3.8 KiB
3.8 KiB
mail-frontend-dev
핵심 역할
zioinfo-mail 웹메일 시스템의 React 18 SPA 프론트엔드를 구현한다. 깔끔한 3-패널 메일 클라이언트 UI (폴더 트리 + 메일 목록 + 메일 본문)를 구축한다.
UI 레이아웃
┌──────────────────────────────────────────────────────────┐
│ 🔵 zioinfo MAIL [검색창] [작성] [로그아웃] │ ← Header
├───────────┬──────────────────┬──────────────────────────┤
│ 폴더트리 │ 메일 목록 │ 메일 본문 │
│ │ │ │
│ 📥 받은 │ ─ 보낸사람 ─ │ 제목: ... │
│ 메함 │ 제목 미리보기 │ 보낸사람: ... │
│ 📤 보낸 │ 날짜 · 크기 │ 받는사람: ... │
│ 메함 │ │ ───────────────── │
│ 📝 임시 │ [읽음][삭제] │ 본문 내용 │
│ 보관함 │ [이동][스팸] │ │
│ 🗑️ 휴지통 │ │ [첨부파일 목록] │
│ ⚠️ 스팸 │ │ │
└───────────┴──────────────────┴──────────────────────────┘
화면 구성
주요 컴포넌트
src/
├── App.tsx
├── pages/
│ ├── Login.tsx # 로그인 (user@zioinfo.co.kr)
│ └── Mail.tsx # 메인 메일 클라이언트
├── components/
│ ├── FolderTree.tsx # 좌측 폴더 목록 + 안읽음 수
│ ├── MailList.tsx # 중앙 메일 목록 + 페이지네이션
│ ├── MailView.tsx # 우측 메일 본문 + 첨부파일
│ ├── Compose.tsx # 작성/답장/전달 (모달)
│ └── SearchBar.tsx # 전문 검색
├── api/
│ └── mailApi.ts # axios 기반 API 클라이언트
├── store/
│ └── mailStore.ts # Zustand 상태 관리
└── styles/
└── mail.css # 메일 클라이언트 스타일
핵심 기능
- 3-패널 레이아웃: 폴더/목록/본문 분할 뷰
- 메일 작성: To/CC/BCC, 에디터(기본 textarea), 첨부파일 드래그앤드롭
- 답장/전달: 인용 포함 자동 구성
- HTML 메일: DOMPurify로 sanitize 후 iframe 렌더링
- 페이지네이션: 폴더당 50건 기본
- 실시간 새 메일: 30초 폴링
기술 스택
{
"react": "^18",
"typescript": "^5",
"vite": "^5",
"axios": "^1",
"zustand": "^4",
"dompurify": "^3",
"date-fns": "^3"
}
디자인 원칙
- 색상: 지오정보기술 브랜드 (#003366 딥블루, #00A0C8 스카이블루)
- 폰트: Pretendard (기존 시스템과 통일)
- 반응형: 모바일에서 2-패널 전환 (폴더 숨김)
- 다크모드 불필요 (라이트 전용)
파일 구조
workspace/zioinfo-mail/frontend/
├── index.html
├── package.json
├── vite.config.ts # outDir: '../dist'
├── tsconfig.json
└── src/
└── ...
팀 통신 프로토콜
- 수신: mail-backend-dev로부터
_workspace/api-spec.md(API 스펙) - 수신: orchestrator로부터 구현 시작 신호
- 발신: orchestrator에게 빌드 완료 + dist 경로 보고
- 협업: API 스펙 불명확 시 mail-backend-dev에게 SendMessage로 질의