# 📱 Agent Meeting: 모바일 문서 상세 페이지 서브네비바 UX 개선

**날짜**: 2026-02-24 10:16  
**주제**: 모바일 문서 세부 화면에서 제목 미표시 및 서브네비바 겹침 문제 개선  
**참석자**: PM, UX, Frontend, Backend, Data, QA, Legal, Planner, Reflect (9명 전원)  
**회의 형식**: 문제 정의 → 현황 진단 → 솔루션 브레인스토밍 → 안 결정

---

## 📋 안건 브리핑 (PM)

**PM**: 오너로부터 다음 두 가지 문제가 제기되었습니다.

> 1. **제목이 안 보임** — Wiki/My/Daily 세부 화면에서 문서 제목이 모바일에서 표시되지 않음  
> 2. **서브네비바 과밀 및 겹침** — "← 목록으로, 공유, 히스토리 등" 버튼들이 가로로 과밀하여 겹치거나 잘림  
> 3. **번호 바로가기 인덱스(TOC ≡) 모바일 제거** — 모바일에서는 불필요하니 제거하여 여백 확보

**스크린샷으로 확인된 현재 상태**:
```
[GlobalHeader]  — InsuWiki + Wiki/My/Daily 토글 + 검색 + 🗑️ + 아바타
[SubNavBar h-12] — ← 목록으로 | h1.제목 | 🌏🔒 | 카테고리배지 | 공유 | 히스토리 | ✨ | ⚙️ || 삭제 | 편집 | ≡(TOC)
[콘텐츠 영역]   — 문서 본문
```

**문제 원인**: 서브네비바에 총 10개 이상의 요소가 `h-12` 1줄에 가로로 배치됨. 모바일(375px)에서 제목(`h1`)이 공간을 확보하지 못하고 `min-w-0 truncate` 처리되어 사실상 보이지 않음.

---

## 1️⃣ UX 에이전트 발언

**UX**: 문제를 계층별로 분석했습니다.

### 현재 정보 우선순위 vs 실제 레이아웃 우선순위

| 정보 | 사용자 중요도 | 현재 모바일 표시 여부 |
|-----|------------|-----------------|
| **문서 제목** | 🔴 최고 | ❌ 거의 안 보임 |
| 편집 버튼 | 🟠 높음 | ✅ 표시됨 |
| ← 목록으로 | 🟡 중간 | ✅ 표시됨 |
| 카테고리 배지 | 🟢 낮음 | ✅ 공간 차지 |
| AI 설정 버튼 | 🟢 낮음 | ✅ 공간 차지 |
| TOC(≡) 버튼 | 🟢 낮음 | ✅ 공간 차지 → **제거 대상** |

### 제목 위치: 서브네비바 위 vs 아래?

**옵션 A: 제목을 서브네비바 아래 (콘텐츠 상단) 에 표시**
- 장점: 서브네비바는 액션 전용, 제목은 콘텐츠 첫 줄로 자연스러움
- 단점: 스크롤 시 제목이 사라짐 (인식 유지 어려움)

**옵션 B: 서브네비바를 2줄로 분리**
- 1줄: `← 목록으로` + **제목(h1)** — 제목에 충분한 공간
- 2줄: 액션 버튼들 (공유, 히스토리, AI, 삭제, 편집)
- 장점: 제목 항상 보임, 스크롤해도 sticky로 유지 가능
- 단점: 전체 높이 증가 (모바일 콘텐츠 영역 조금 줄어듦)

**옵션 C: 서브네비바 1줄 유지, 제목을 별도 sticky 타이틀 바로**
- GlobalHeader 스크롤 아웃 후 제목만 sticky로 표시

**UX 추천**: **옵션 B (2줄 분리)** — 제목의 우선순위가 가장 높으므로 1줄 전체를 제목에 할당하는 것이 이상적

### TOC 버튼 제거 의견

모바일에서 긴 목차 문서는 거의 없음. 제거 동의. 대신 빈 공간에 더 중요한 요소 배치.

---

## 2️⃣ Frontend 에이전트 발언

**Frontend**: 코드 관점에서 현재 상태와 2가지 구현 방안을 제시합니다.

### 현재 코드 구조 문제점

```tsx
// DocumentClient.tsx 1202~1430
<nav className="h-12 flex items-center justify-between">
  <div className="flex items-center gap-4 flex-1 min-w-0">  {/* 왼쪽 */}
    <button>← 목록으로</button>
    <div className="flex items-center gap-2 min-w-0">
      <h1 truncate>제목</h1>           {/* 공간 없어서 잘림 */}
      <VisibilityToggle />              {/* 🌏🔒 고정 너비 */}
      <CategoryBadge />                 {/* 카테고리 고정 너비 */}
      <ShareButton />
      <HistoryButton />
      <AIButton />
      <AISettingsButton />
    </div>
  </div>
  <div className="flex-shrink-0">      {/* 오른쪽 */}
    <DeleteButton />
    <EditButton />
    <TocButton />                       {/* ≡ 모바일에서 제거 대상 */}
  </div>
</nav>
```

### 구현 방안: 2줄 서브네비바 (옵션 B)

```tsx
<nav className="bg-white/80 backdrop-blur-sm border-b border-gray-100 z-10 shrink-0">
  {/* 1줄: 네비게이션 + 제목 */}
  <div className="h-10 flex items-center gap-3 px-4">
    <button>← 목록으로</button>
    <h1 className="flex-1 font-bold truncate">제목</h1>  {/* 충분한 공간 */}
    <VisibilityToggle />  {/* 모바일: 아이콘만, PC: 라벨 포함 */}
  </div>
  {/* 2줄: 액션 버튼들 */}
  <div className="h-10 flex items-center justify-between px-4 border-t border-gray-50">
    <div className="flex items-center gap-1">
      <CategoryBadge />
      <ShareButton />
      <HistoryButton />
      <AIButton />
      <AISettingsButton className="hidden sm:flex" />  {/* 모바일 숨김 */}
    </div>
    <div className="flex items-center gap-1">
      <DeleteButton />
      <EditButton />
      {/* TOC 버튼 제거 */}
    </div>
  </div>
</nav>
```

**총 높이**: `h-12` → `h-20` (8px 증가, 모바일에서 콘텐츠 여백 약간 줄어들지만 허용 범위)

### 모바일 숨김 처리 대상

| 요소 | 모바일 처리 |
|-----|-----------|
| ≡ TOC 버튼 | 완전 제거 |
| AI 설정(⚙️) 버튼 | `hidden sm:flex` 모바일 숨김 |
| "편집" 텍스트 → "✏️" 아이콘 | 모바일만 아이콘으로 (선택사항) |
| 카테고리 배지 라벨 | 이모지만 표시, 텍스트 숨김 |

---

## 3️⃣ Backend 에이전트 발언

**Backend**: 이번 변경은 순수 UI/레이아웃 변경으로 API 영향 없음. 확인만 합니다.

- Firestore 쿼리, 저장 로직 변경 없음 ✅
- 제목(`document.title`) 표시 방식 변경만 해당
- 관련 없음

---

## 4️⃣ Data 에이전트 발언

**Data**: 관련 데이터 구조 변경 없음. 하지만 한 가지 제안:

- 제목이 잘 보이게 되면 사용자들이 제목 수정을 더 자주 할 것으로 예상
- 편집 모드에서 제목 입력 필드(input)도 1줄에 적절히 표시되도록 동일한 레이아웃 적용 필요

---

## 5️⃣ QA 에이전트 발언

**QA**: 변경 후 테스트 케이스를 정의합니다.

### 필수 검증 시나리오

| 시나리오 | 기대 결과 |
|---------|---------|
| 모바일(375px) Wiki 문서 열기 | 제목이 1줄 전체에 잘림 없이 표시 |
| 모바일 My 문서 열기 | Visibility 토글 (🌏🔒)이 1줄에 표시 |
| 모바일 Daily 문서 열기 | Share/History 버튼 2줄에 표시 |
| 편집 모드 진입 | 제목 input이 1줄에 표시, 저장/취소 버튼 2줄에 표시 |
| PC(1024px+) | 기존 레이아웃과 동일하게 동작 (회귀 없음) |
| TOC ≡ 버튼 | 모바일에서 미표시 확인 |

---

## 6️⃣ Legal 에이전트 발언

**Legal**: UI 변경이므로 법적 이슈 없음. 단, 문서 제목 표시는 사용자가 현재 보는 문서를 명확히 인식하게 해주므로 오히려 사용성 보호 측면에서 긍정적.

---

## 7️⃣ Planner 에이전트 발언

**Planner**: 범위와 우선순위를 정리합니다.

### 이번 변경 범위

**수정 파일**: `DocumentClient.tsx` — 서브네비바 JSX 레이아웃만 변경

**Must Have**:
- [x] 서브네비바를 2줄로 분리
- [x] 1줄: ← 목록으로 + **제목(h1)** + Visibility토글
- [x] 2줄: 카테고리배지 + Share + History + AI | 삭제 + 편집
- [x] ≡ TOC 버튼 완전 제거

**Should Have**:
- [ ] 모바일에서 AI 설정(⚙️) 숨김
- [ ] 카테고리 배지 모바일에서 이모지만 표시

**공수**: 약 1시간 이내 (JSX 레이아웃 변경)

---

## 8️⃣ Reflect 에이전트 발언

**Reflect**: 기존 패턴 및 주의사항을 전달합니다.

### 주의사항

1. **`isDaily` 조건 분기 주의**: Wiki/My는 Visibility 토글 표시, Daily는 숨김. 기존 조건 그대로 유지 필요
2. **편집 모드 분기**: `isEditing` 시 제목이 `<h1>` → `<input>` 으로 전환됨. 2줄 레이아웃에서도 동일하게 유지
3. **`buttonClass`**: Wiki=인디고, My=보라, Daily=에메랄드 색상 분기 — 편집 버튼 색상 유지
4. **sticky 우선순위**: 서브네비바 `z-10` 기존 유지

### 관련 기존 미팅 참고
- `260214-17.00-ui-review-and-polish.md` — 이전 레이아웃 정리 이력
- `260211-12.15-mobile-indentation-optimization.md` — 모바일 최적화 이력

---

## 9️⃣ PM 에이전트 최종 결정

**PM**: 최종 결정을 내립니다.

### ✅ 합의된 결정

1. **2줄 서브네비바 채택** (옵션 B 전원 동의)
   - **1줄**: `← 목록으로` + 제목(h1 또는 input) + Visibility 토글
   - **2줄**: 카테고리배지 + Share + History + AI | 삭제 + 편집
2. **≡ TOC 버튼 완전 제거** (모바일/PC 모두)
3. **AI 설정(⚙️) 버튼**: 2줄 우측에 배치, 모바일은 `sm:flex hidden`으로 숨김
4. **제목 위치**: 1줄 (서브네비바 상단줄) — 항상 보이도록

### 📋 구현 상세 레이아웃

```
[1줄 h-11] ← 목록으로 | [제목 flex-1] | [🌏🔒 Visibility토글 - 작성자만]
[2줄 h-10] [카테고리배지] [공유] [히스토리] [✨AI] | [🗑️삭제] [편집]
           ← 왼쪽 그룹                              ← 오른쪽 그룹 →
```

편집 모드:
```
[1줄 h-11] ← 목록으로 | [제목 input flex-1] | [카테고리 select]
[2줄 h-10]                                   | [취소] [저장]
```

### 🔜 다음 단계

사용자 승인 후 `DocumentClient.tsx` 서브네비바 JSX 수정 진행

---

**회의 종료**: 2026-02-24 10:30 (예상)  
**다음 Action**: 사용자 승인 → 구현