91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
# 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초 폴링
|
|
|
|
### 기술 스택
|
|
```json
|
|
{
|
|
"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로 질의
|