# InsuWiki UI 기능 업데이트 3건

## 프로젝트 경로
`/home/jay/projects/insuwiki/`
- Next.js 16 + React 19 + Tiptap 3.20 + Tailwind 4
- 에디터: `nextapp/src/components/EditorToolbar.tsx`
- 모달: `nextapp/src/components/AISettingsModal.tsx`
- 헤더/탭: `nextapp/src/components/GlobalHeader.tsx`
- 메인 페이지: `nextapp/src/app/page.tsx`

## 에이전트 미팅 결과
`/home/jay/workspace/memory/meetings/2026-03-05-insuwiki-ui-updates.md` 참조

---

## 기능 1: 파일첨부 드래그앤드롭

### 현재
- `EditorToolbar.tsx` 243~276행: `<input type="file" accept="image/*">` 숨김 + 버튼 클릭 트리거
- FormData POST to `/api/upload` (Google Drive 업로드)
- 드래그앤드롭 미지원

### 구현 방향
- Tiptap Extension으로 에디터 영역 자체를 드롭존으로 활용
- `handleDrop` 이벤트에서 파일 감지 → 기존 업로드 로직 재사용
- `dragover` 시 에디터 영역에 테두리 하이라이트 + 반투명 오버레이 피드백
- **PC 전용**: 모바일에서는 드래그앤드롭 비활성 (기존 버튼/갤러리 유지)
- 기존 input 버튼은 **반드시 병행 유지** (접근성)
- 클라이언트 측 파일 용량(10MB 이하) · 형식(image/* 만) 검증 선행

### 주의
- Tiptap Extension으로 분리하거나, EditorToolbar에 dragover/drop 이벤트 추가
- `dragover` 상태 잔류 방지 (탭 전환 후 복귀 시 하이라이트 stuck 방지)
- 기존 업로드 로직(FormData + /api/upload) 재사용, 중복 구현 금지

---

## 기능 2: 파일첨부 창(에디터 모달) 크기 조절

### 현재
- 에디터/설정 모달: `fixed inset-0`, `max-w-md` (448px) 고정
- PC/모바일 크기 동일 → PC에서 너무 크게 느껴짐

### 구현 방향
- PC: `max-w-sm` (384px) 으로 축소
- `min-width` 가드 추가 (너무 작아지지 않도록)
- 높이: `max-h-[90dvh] overflow-y-auto`로 제한
- 모바일: 현재 크기 유지 (모바일은 괜찮다는 피드백)
- 소프트키보드 올라올 때 닫기 버튼 접근성 확보 (`dvh` 단위 사용)

### 주의
- `AISettingsModal.tsx` 외에도 동일 패턴을 사용하는 다른 모달이 있는지 확인하여 일관성 유지
- 브라우저 줌 110~150%에서도 레이아웃 깨지지 않는지 확인

---

## 기능 3: 위키-마이-데일리 탭 스와이프

### 현재
- `GlobalHeader.tsx` 66~103행: 버튼 클릭 → `onTabChange()` → 상태 업데이트
- `page.tsx` 50~52행: `?tab=wiki|my|daily` 쿼리파라미터
- 스와이프 미지원

### 구현 방향
- **CSS scroll-snap + JS 터치/velocity 감지** (외부 라이브러리 없이)
- `scroll-snap-type: x mandatory` 컨테이너 + 각 탭 콘텐츠를 snap 포인트로
- 탭 전환 시 `scrollTo({ behavior: 'smooth' })` + 쿼리파라미터 동기화
- 좌우 끝에서 overscroll 저항감 표현
- 탭 인디케이터(하단 바)와 스와이프 오프셋 실시간 연동

### 충돌 방지 (중요!)
- **에디터 영역에서 스와이프 차단**: 에디터 내부 `touchstart`에서 `stopPropagation` 처리. 텍스트 선택/커서 이동과 스와이프 제스처 간섭 방지
- **세로 스크롤 충돌 방지**: `touchmove` 시 deltaX/deltaY 비율로 방향 판정. 각도 30° 이상일 때만 스와이프로 인식
- 빠른 연속 스와이프 race condition 방지 (debounce 또는 transition lock)

### 주의
- 탭 순서: 위키(0) ↔ 마이(1) ↔ 데일리(2)
- 쿼리파라미터 `?tab=` 과 scroll position 동기화 필수
- 가로 스크롤 콘텐츠가 탭 내부에 있을 경우 스와이프와 충돌할 수 있으므로 확인

---

## 검증
1. `cd /home/jay/projects/insuwiki/nextapp && npm run build` — 빌드 성공 확인
2. 드래그앤드롭: 이미지 파일 드롭 → 업로드 동작 확인 (실제 API 호출은 Mock 가능)
3. 모달 크기: PC 해상도(1920x1080) 기준 max-w-sm 적용 확인
4. 스와이프: 터치 이벤트 시뮬레이션 또는 수동 테스트
5. 기존 기능 리그레션 없는지 확인

## 팀원 배정 가이드
- 3개 기능 독립적이므로 팀원 병렬 작업 가능
- 이리스(프론트): 드래그앤드롭 + 스와이프
- 아테나(UX): 모달 크기 조절
- 아르고스(테스터): 전체 검증