feat/#84 77번 브랜치 디자인 롤백

[warcat12]

📌 관련 이슈

관련된 이슈 번호를 작성해 주세요.

Closes #84

---

🛠️ 작업 내용

구현한 내용을 간략히 설명해 주세요.

✅ 변경 사항

• [ ]
• [ ]

🔍 테스트 내용

테스트한 방법과 결과를 작성해 주세요.

• 단위 테스트 작성 / 확인
• 기능 동작 확인

📷 스크린샷 (선택사항)

UI 변경이 있는 경우 첨부해 주세요.

💬 리뷰어에게

리뷰 시 특별히 봐줬으면 하는 부분이 있다면 작성해 주세요.

---

📋 PR 체크리스트

• develop 브랜치를 base로 설정했나요?
• 코드 컨벤션을 준수했나요?
• 불필요한 주석 / 디버그 코드를 제거했나요?
• 관련 이슈 번호를 연결했나요?

[jychoi0831]

현재 head commit 5758e86 기준으로 확인했습니다.

Findings

• [P2] OOTD 카드와 상세 조합 매핑이 깨질 수 있습니다. src/components/HomeTab.tsx:173에서 ootdItems를 uniqueItems로 다시 걸러낸 뒤, 렌더링에서는 필터링된 ootdRecommendations의 itemIdx로 원본 ootdCombinations[itemIdx]를 참조합니다(src/components/HomeTab.tsx:541, src/components/HomeTab.tsx:545, src/components/HomeTab.tsx:553). OOTD 응답에 같은 대표 clothesId를 공유하지만 조합은 다른 추천이 섞이면 중간 항목이 제거되고, 이후 카드가 다른 원본 index의 조합을 열게 됩니다. 그 결과 사용자가 본 카드와 상세 모달의 코디/썸네일이 달라질 수 있고, 유효한 OOTD 조합도 목록에서 사라질 수 있습니다. OOTD는 outfitId 또는 구성품 조합 key로 dedupe하고, 렌더링 item 안에 combo를 같이 보관하거나 id로 조합을 찾아 index 의존을 제거해야 합니다.

• [P3] 홈 추천 문서가 새 UI 구조와 맞지 않습니다. 이번 PR은 RecommendationLabel에서 ootd를 제거하고 OOTD를 상단 고정 섹션으로 분리했지만, 공식 문서는 여전히 HomeTab의 ootd 라벨 연동을 기준으로 설명합니다(docs/api/frontend-api-usage.md:263, docs/frontend/implementation-gaps.md:52, docs/frontend/implementation-gaps.md:63). 이 구조 변경이 의도라면 FE 문서의 라벨/화면 흐름 기준도 같이 갱신해야 하고, 단순 디자인 롤백이라면 문서 기준과 맞게 ootd 라벨 흐름을 유지해야 합니다.

검증

• PASS: git diff --check origin/develop...5758e86 --
• PASS: git merge-tree --write-tree origin/develop 5758e86 (5f201961db43f2e6d571613b039c2659b1a40083)
• PASS: npm ci --offline
• PASS: npm run lint (0 errors, 35 warnings)
• PASS: npm run build
• PASS: GitHub CI Lint & Build

Sync 확인

• 상대 BE 레포 동기화 필요: 없음

본 리뷰는 Codex를 사용해 작성했습니다.

[jychoi0831]

현재 head commit 6ab75d8 기준으로 확인했습니다.

Findings

• [P2] OOTD 조합을 대표 clothesId로 dedupe해 서로 다른 코디가 사라질 수 있습니다. ootdItems는 BE OOTD 응답의 조합 단위로 만들어지지만, src/components/HomeTab.tsx:173에서 공통 uniqueItems를 적용하고 이 helper는 clothesId가 있으면 그것을 중복 key로 사용합니다(src/components/HomeTab.tsx:162, src/components/HomeTab.tsx:166). 그런데 OOTD mapping은 mainItem = item.top || item.outer || item.bottom || item을 대표로 잡고 clothesId: mainItem.clothesId를 넣습니다(src/components/HomeTab.tsx:285, src/components/HomeTab.tsx:302). 따라서 BE가 top A + bottom B, top A + bottom C처럼 같은 대표 옷을 공유하는 서로 다른 코디를 반환하면 두 번째 조합은 렌더 전에 제거됩니다. OOTD는 상품 목록이 아니라 코디 조합 목록이므로 outfitId나 구성품 조합 key(top/bottom/outer/shoes) 기준으로 dedupe하거나, OOTD 전용으로 id 기준 dedupe를 사용해야 합니다.

검증

• PASS: git diff --check origin/develop...6ab75d8 --
• PASS: git merge-tree --write-tree origin/develop 6ab75d8 (1fbc7875285829cf00f53fa3b8ec72aa6712ef0b)
• PASS: npm ci --offline
• PASS: npm run lint (0 errors, 35 warnings)
• PASS: npm run build
• PASS: GitHub CI Lint & Build

Sync 확인

• 상대 BE 레포 동기화 필요: 없음

본 리뷰는 Codex를 사용해 작성했습니다.