# task-1432.1 완료 보고서

## SCQA

**S**: InsuRo 프로젝트(`/home/jay/projects/InsuRo/src/`)에서 API URL, 색상, 매직넘버 등이 15개 이상의 컴포넌트/페이지 파일에 하드코딩되어 있으며, 동일한 값이 여러 파일에 중복 존재한다.

**C**: 하나의 값(예: API 서버 주소 `aidevserver.tail2cdab6.ts.net:10000`)이 3개 파일에 중복되어, 변경 시 모든 파일을 개별 수정해야 하며 누락 위험이 높다. CRM 스테이지 라벨은 4개 파일에 중복, API 요청 딜레이(3000ms)는 2개 파일에 중복된 상태였다.

**Q**: 하드코딩된 값을 단일 소스로 통합하여 "하나 바꾸면 전부 바뀌는" 구조로 전환할 수 있는가?

**A**: 3개 config 파일 + 2개 data 파일을 생성하고 15개 컴포넌트를 업데이트하여 모든 중복 하드코딩을 단일 소스 참조로 전환 완료. `npm run build` 성공, `tsc --noEmit` 에러 0건.

## 작업 내용

### 신규 생성 파일 (5개)

- `src/config/api.ts` — API URL 중앙 관리 (INSURO_API_BASE, NAVER_DATALAB_URL, NAVER_BLOG_SEARCH_URL, EXTERNAL_URLS)
- `src/config/constants.ts` — 매직넘버 상수화 (API_REQUEST_DELAY_MS, NOTIFICATION_DURATION_MS, TOAST_LIMIT, TOAST_REMOVE_DELAY, MS_PER_DAY, BMI_THRESHOLDS, IMAGE_PREVIEW_MAX_WIDTH/HEIGHT, IMAGE_PALETTES)
- `src/config/crm.ts` — CRM 파이프라인 설정 (STAGE_LABELS, STAGE_COLORS, STAGE_BADGE_COLORS)
- `src/data/insurance-companies.ts` — 보험사 50개 데이터 + Category/InsuranceCompany 타입
- `src/data/external-sites.tsx` — 외부 참고사이트 11개 데이터 + SiteItem 타입

### 수정 파일 (17개)

- `.env` — VITE_ALLOWED_HOST 추가
- `vite.config.ts` — allowedHosts 환경변수 참조로 변경
- `src/pages/AdminFcpa.tsx` — INSURO_API_BASE import 사용 (2곳)
- `src/pages/FcpaGuide.tsx` — INSURO_API_BASE import 사용
- `src/pages/KeywordAnalysis.tsx` — NAVER_DATALAB_URL, NAVER_BLOG_SEARCH_URL import 사용
- `src/pages/ApiGuide.tsx` — EXTERNAL_URLS import 사용 (6곳)
- `src/pages/InsurancePortal.tsx` — 타입/데이터 배열 → @/data/insurance-companies import, EXTERNAL_URLS.GOOGLE_FAVICON_SERVICE 사용
- `src/pages/ExternalSites.tsx` — SiteItem/sites → @/data/external-sites import
- `src/pages/CrmDashboard.tsx` — STAGE_LABELS, STAGE_COLORS → @/config/crm import
- `src/pages/CrmCustomers.tsx` — STAGE_LABELS, STAGE_BADGE_COLORS → @/config/crm import
- `src/pages/CrmCustomerDetail.tsx` — STAGE_LABELS → @/config/crm import
- `src/pages/AdminNewsletters.tsx` — API_REQUEST_DELAY_MS import 사용
- `src/pages/AdminPremiumData.tsx` — API_REQUEST_DELAY_MS import 사용
- `src/components/ChatNotificationListener.tsx` — NOTIFICATION_DURATION_MS import 사용
- `src/hooks/use-toast.ts` — TOAST_LIMIT, TOAST_REMOVE_DELAY import 사용
- `src/pages/Calculators.tsx` — MS_PER_DAY, BMI_THRESHOLDS import 사용
- `src/components/image-generator/LayoutPreview.tsx` — IMAGE_PALETTES, IMAGE_PREVIEW_MAX_WIDTH/HEIGHT import 사용

## 검증 결과

- `npm run build`: 성공 (7.11s, TypeScript 에러 0건)
- `tsc --noEmit`: EXIT_CODE=0 (에러 0건)
- 하드코딩 grep 검증: API URL, 매직넘버 모두 config 파일에만 존재

## 발견 이슈 및 해결

### 자체 해결 (3건)

1. **CrmCustomers.tsx STAGE_COLORS 이름 충돌** — CrmDashboard의 hex 색상 배열과 CrmCustomers의 CSS 클래스 Record가 동명 → `STAGE_BADGE_COLORS`로 분리
   - 수정: `src/config/crm.ts` 에 STAGE_BADGE_COLORS 추가, CrmCustomers.tsx 참조 변경
2. **ExternalSites 데이터에 JSX 포함** — lucide-react 아이콘이 데이터에 포함 → `.tsx` 확장자로 데이터 파일 생성
   - 수정: `src/data/external-sites.tsx`
3. **Login.tsx 애니메이션 매직넘버** — 50+ 로컬 애니메이션 값이 있으나, "하나 바꾸면 전부 바뀌는가?" 기준 미해당 → 의도적 스킵
   - 사유: 컴포넌트 내부에서만 사용, 다른 파일과 공유하지 않음

## 머지 판단

- **머지 필요**: Yes
- **브랜치**: task/task-1432.1-dev7
- **워크트리 경로**: /home/jay/projects/InsuRo/.worktrees/task-1432.1-dev7
- **머지 의견**: 빌드 성공, TypeScript 에러 0건, 기존 로직 변경 없이 import 소스만 변경. 충돌 가능성 낮음 (데이터 이동 + import 추가만).

## 모델 사용 기록

- 팀원: 이쉬첼(A) / 작업 내용: API URL 모듈화 + 환경변수 / 사용 모델: sonnet
- 팀원: 이쉬첼(B) / 작업 내용: 보험사·외부사이트·CRM 데이터 분리 / 사용 모델: sonnet
- 팀원: 이쉬첼(C) / 작업 내용: 매직넘버 상수 분리 / 사용 모델: sonnet
- 전 작업 프론트엔드 전용이므로 이쉬첼 1명이 3개 독립 서브태스크 병렬 수행 (역할 확장 사유: 백엔드/UX/테스터 역할 해당 없음)