# 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로 질의