---
title: "🎛️ 260519-18:30_F6후속-Nav크기분리"
notion_id: "36522962086881c08002c0272ebf22bd"
notion_url: "https://app.notion.com/p/36522962086881c08002c0272ebf22bd"
category: "workreport"
parent: "Claude Code 작업보고"
updated: "2026-05-19"
priority: "Low"
purpose: "하단 Nav 활성/비활성 아이콘·텍스트 크기 분리 (F-6 후속)"
---

**일시:** 2026-05-19 18:30 KST
**브랜치:** main
**수정 파일:** src/components/Layout.tsx (단독)
**모델:** Claude Opus 4.7 (1M context)
**이전 커밋:** f5b27cb (메뉴 아이콘 SVG 에셋)
**현 커밋:** 2b19a86 (Nav 크기 분리)
---
## 👤 USER (작업 지시)
```javascript
※ 주의: 동일 작업을 수행 중인 다른 에이전트가 있을 수 있음.
작업 시작 전 반드시 git status 확인 후 충돌 여부 점검할 것.
작업 전 git pull로 최신 원격 커밋 기준 동기화할 것.

## 작업 목표
하단 Nav 비활성/활성 상태 아이콘·텍스트 크기 분리 (F-6 후속)

## 구현 내용

### 비활성 상태 (기본)
- 아이콘 fontSize: 28px
- 텍스트 fontSize: 11px
- fontWeight: 400

### 활성 상태
- 아이콘 fontSize: 32px (비활성보다 한 단계 큰 크기)
- 텍스트 fontSize: 13px (비활성보다 한 단계 큰 크기)
- fontWeight: 700 (볼드)
- 색상은 이미 적용된 #d97757 그대로 유지

## 주의사항
- Layout.tsx 외 다른 파일 절대 수정 금지
- 색상(#c8f135, #d97757, opacity 0.45)은 이미 적용된 값 유지
- 모바일 롤백 내용도 이미 적용된 값 건드리지 말 것
- 데스크탑 최적 컨테이너 우선 설계 후 모바일 반응형 적용. 모바일 퍼스트 설계 금지.

## 완료 기준
- [ ] 비활성 탭: 아이콘 28px, 텍스트 11px, 일반체
- [ ] 활성 탭: 아이콘 32px, 텍스트 13px, 볼드
- [ ] npm run build 에러 없음
- [ ] main 브랜치 커밋·푸시 완료
```
---
## 🤖 ASSISTANT (작업 수행)
### Step 1 — git 동기화 + Nav 구간 확인 (병렬)
**Bash:** `git status && git pull`
```javascript
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean
Already up to date.
```
**Read:** Layout.tsx L115-149 — 현재 Nav 구조 확인
- L138-149: NavLink 컴포넌트의 children이 평범한 JSX (함수 아님), span에 고정 fontSize 28px/12px, fontWeight는 NavLink style 콜백에서 각각 계산
### 구현 판단
스펙 예시는 자식 span에 `isActive`를 따옴표 없이 쓰고 있으나, 이는 NavLink style 콜백 스코프 안에만 존재하는 변수라 실제로는 children에서 접근 불가. 따라서 **NavLink의 children prop을 함수형으로 변경**해서 자식 span에도 isActive를 전달.
react-router-dom v6의 NavLink children은 `ReactNode | ((p: { isActive, isPending }) => ReactNode)` 해당. Fragment로 감싸면 OK.
### Step 2 — NavLink children 함수형으로 교체 + 크기 분리
**Edit:** L138-149
```diff
           {navItems.map(item => (
             <NavLink key={item.to} to={item.to}
               style={({ isActive }) => ({
                 flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
                 padding: '8px 2px 9px', gap: '3px',
                 color: isActive ? '#d97757' : '#c8f135',
                 opacity: isActive ? 1 : 0.45,
                 textDecoration: 'none',
                 transition: 'color 0.15s, opacity 0.15s',
-                fontWeight: isActive ? 700 : 400,
               })}>
-              <span style={{ fontSize: '28px', lineHeight: 1 }}>{item.icon}</span>
-              <span style={{ fontSize: '12px', letterSpacing: '0.03em' }}>{item.label}</span>
+              {({ isActive }) => (
+                <>
+                  <span style={{
+                    fontSize: isActive ? '32px' : '28px',
+                    lineHeight: 1,
+                    transition: 'font-size 0.1s',
+                  }}>{item.icon}</span>
+                  <span style={{
+                    fontSize: isActive ? '13px' : '11px',
+                    fontWeight: isActive ? 700 : 400,
+                    letterSpacing: '0.03em',
+                    transition: 'font-size 0.1s',
+                  }}>{item.label}</span>
+                </>
+              )}
             </NavLink>
           ))}
```
변경점 요약:
- NavLink container의 fontWeight 분기 제거 (텍스트 span으로 이동)
- children을 함수형 + Fragment로 교체해서 isActive 전달
- 아이콘 span: 28→32px 분기 + transition font-size 0.1s
- 텍스트 span: 11→13px 분기, fontWeight 400→700 그대로 유지
- 색상·opacity·컨테이너 maxWidth(isDesktop) 계산 모두 유지
### Step 3 — 빌드 검증
**Bash:** `npm run build`
```javascript
vite v5.4.21 building for production...
✓ 104 modules transformed.
dist/index.html                   1.14 kB
dist/assets/index-QhyjWE97.css    4.73 kB
dist/assets/index-Dt17fDFW.js   797.46 kB
✓ built in 2.18s
```
결과: 타입 에러 0, 빌드 성공.
### Step 4 — 커밋 + 푸시
**Bash:** `git add src/components/Layout.tsx && git commit -m "..." && git push origin main`
```javascript
[main 2b19a86] feat(layout): 하단 Nav 활성/비활성 아이콘·텍스트 크기 분리 (F-6 후속)
 1 file changed, 15 insertions(+), 3 deletions(-)
   f5b27cb..2b19a86  main -> main
```
---
## 📋 최종 변경 요약
<table header-row="true">
<tr>
<td>항목</td>
<td>비활성 (Before → After)</td>
<td>활성 (Before → After)</td>
</tr>
<tr>
<td>아이콘 fontSize</td>
<td>28px → **28px** (유지)</td>
<td>28px → **32px**</td>
</tr>
<tr>
<td>텍스트 fontSize</td>
<td>12px → **11px**</td>
<td>12px → **13px**</td>
</tr>
<tr>
<td>fontWeight</td>
<td>400 → **400** (유지)</td>
<td>700 → **700** (유지)</td>
</tr>
<tr>
<td>color</td>
<td>#c8f135 → 유지</td>
<td>#d97757 → 유지</td>
</tr>
<tr>
<td>opacity</td>
<td>0.45 → 유지</td>
<td>1 → 유지</td>
</tr>
<tr>
<td>transition (추가)</td>
<td>—</td>
<td>**font-size 0.1s**</td>
</tr>
</table>
### 구현 세부
- `<NavLink>` children을 `(isActive) => ReactNode` 함수형으로 교체
- container `style` 콜백에서 fontWeight 분기 제거 → 텍스트 span으로 이동
- 클릭/전환 시 언마운트되지 않도록 Fragment로 감쌔
---
## 🔗 관련 파일
- src/components/Layout.tsx
## ✅ 확인 필요 (사장님)
- [ ] 비활성 탭이 아이콘 28px / 텍스트 11px / 일반체로 표시되는지
- [ ] 활성 탭이 아이콘 32px / 텍스트 13px / 볼드로 표시되는지
- [ ] 탭 전환 시 0.1s 부드러운 크기 트랜지션 적용 확인
- [ ] 데스크탑/모바일 양쪽에서 동일 동작
---
## 📐 커밋 정보
- **커밋 해시:** `2b19a86`
- **이전 커밋:** `f5b27cb` (메뉴 아이콘 SVG 에셋)
- **메시지:** feat(layout): 하단 Nav 활성/비활성 아이콘·텍스트 크기 분리 (F-6 후속)
- **변경 통계:** src/components/Layout.tsx \| 18 lines (+15 / -3)
- **푸시:** origin/main 반영 완료
---
## 👤 USER (업로드 지시)
```javascript
완료 후 노션 Claude Code 작업보고 페이지에
전체 대화 raw 그대로 새 하위 페이지로 업로드.
페이지 제목: 260519-hh:mm_F6후속-Nav크기분리
```
## 🤖 ASSISTANT
본 페이지 생성. 끝.