# task-2093 완료 보고서: InsuRo 가이드 본문 — 카테고리 배지 누락 + 스텝 표시 통일

## SCQA

**S**: InsuRo 서비스 이용가이드(/guide) 페이지가 Supabase DB에서 30+개 가이드 섹션을 로드하여 렌더링하고 있다.

**C**: 카테고리 배지(`tag` 필드)가 null인 섹션(시작하기 등)에서 배지가 누락되어 카테고리 식별이 불가하며, 스텝 표시가 일부 ①②③, 일부 → 화살표로 혼재되어 시각적 일관성이 떨어진다.

**Q**: 모든 가이드 섹션에 카테고리 배지를 표시하고, 스텝 표시를 ①②③ 방식으로 통일할 수 있는가?

**A**: HelpGuide.tsx에서 (1) `tag` 없으면 소속 카테고리 `label`을 fallback으로 사용하는 `badgeText` 로직 추가, (2) SectionLabel 컴포넌트를 모던 pill 형태로 교체, (3) bullets 렌더링에 ArrowRight 대신 StepBadge 사용하여 ①②③ 방식으로 통일. `npm run build` 성공, `npx tsc --noEmit` 에러 0건.

## 수정 파일 목록

| 파일 | 변경 내용 | grep 검증 | 상태 |
|------|-----------|-----------|------|
| src/pages/HelpGuide.tsx:74-79 | SectionLabel 컴포넌트를 pill 형태로 교체 (Tailwind inline) | grep "rounded-full bg-primary/10" OK | verified |
| src/pages/HelpGuide.tsx:217 | badgeText fallback 로직 추가 (tag → category label) | grep "badgeText" OK (2건) | verified |
| src/pages/HelpGuide.tsx:225 | 배지 표시 조건을 badgeText로 변경 | grep "badgeText &&" OK | verified |
| src/pages/HelpGuide.tsx:252-261 | bullets 렌더링: ArrowRight → StepBadge(steps.length + i + 1) | grep "steps.length + i + 1" OK | verified |
| src/pages/HelpGuide.tsx:10 | ArrowRight import 제거 | grep "ArrowRight" 0건 OK | verified |
| src/pages/HelpGuide.tsx:85-86 | 미사용 activeSection state 제거 | grep "activeSection" 0건 OK | verified |

## 검증 시나리오

1. **배지 누락 섹션 0건**: `badgeText = section.tag || categories.find(...)?.label` — tag null인 섹션도 카테고리 label로 배지 표시됨
2. **→ 화살표 표시 섹션 0건**: bullets가 StepBadge로 변경됨. ArrowRight import 완전 제거 확인
3. **빌드 성공**: `npm run build` ✓ (10.28s), `npx tsc --noEmit` exit 0

## L1 스모크테스트 결과

- 서버 재시작: 성공 (Vite dev server on port 5174)
- API 응답 확인: curl http://localhost:5174/ → 200 OK
- 스크린샷: 인증 필요 페이지로 리다이렉트 (로그인 없이 /guide 접근 불가). 빌드 성공 + 코드 정적 검증으로 대체
- 빌드 결과: dist/ 정상 생성, 140 entries precached

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **SectionLabel CSS 클래스 잔존** — 다른 컴포넌트(Intro.tsx, InsuWikiIntro.tsx 등)에서 여전히 `.section-label` CSS 사용 중. index.css에서 제거하지 않고 HelpGuide.tsx만 Tailwind inline으로 전환
2. **ArrowRight import 미제거** — 이리스(서브에이전트) 작업에서 import 제거 확인됨. 잔여 없음
3. **미사용 activeSection state** — 기존 코드에서 값 읽기 없이 setter만 호출하던 unused state. 제거하여 TS 경고 해소

### 범위 외 미해결 (0건)

## 머지 판단

- **머지 필요**: Yes
- **브랜치**: task/task-2093-dev1
- **워크트리 경로**: /home/jay/projects/InsuRo/.worktrees/task-2093-dev1
- **머지 의견**: 프론트엔드 1파일 변경. 빌드 성공, 타입 에러 0건, 다른 컴포넌트 영향 없음. 안전한 머지.

## 모델 사용 기록

- 팀원: 이리스 / 작업 내용: HelpGuide.tsx 배지+스텝 통일 구현 / 사용 모델: sonnet / 정당성: -
- 팀장: 헤르메스 / 작업 내용: activeSection 미사용 변수 제거 (서브에이전트 3회 실패 아닌 경미한 후처리) / 사용 모델: opus / 정당성: TS 진단 즉시 대응

## 세션 통계
- 총 도구 호출: 0회