feat/ ootd 디자인#88
Conversation
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit a570817 기준으로 확인했습니다.
Findings
-
[P1] 최신
develop과HomeTab.tsx병합 충돌을 먼저 해소해야 합니다.git merge-tree --write-tree origin/develop a5708175b0e7a5349882c833f2fb9a3a1205ebae가src/components/HomeTab.tsxcontent conflict로 실패했고, GitHub 메타데이터도mergeable: CONFLICTING입니다. 현재 head는RecommendationLabel에ootd를 다시 추가하고(src/components/HomeTab.tsx:172) OOTD를 라벨 grid 안에서 렌더링하는 이전 구조를 수정합니다(src/components/HomeTab.tsx:675,src/components/HomeTab.tsx:781). 반면 최신develop은ootd라벨을 제거하고 OOTD를 상단 고정 섹션으로 분리한 상태라, 수동 충돌 해결 시 최신 홈 추천 구조를 되돌릴 위험이 큽니다. 최신develop으로 rebase/merge한 뒤 Canvas 디자인을 현재 OOTD 상단 섹션 구조에 다시 적용해 주세요. -
[P2] OOTD Canvas가 보호 이미지 처리 경로를 우회해 실제 사용자 옷 이미지가 빈 카드로 보일 수 있습니다. 새
OotdCanvas는 raw URL을new Image()로 직접 로드하고(src/components/HomeTab.tsx:79) 바로getImageData를 호출합니다(src/components/HomeTab.tsx:94). 그런데 OOTD 구성품에는/api/v1/images/clothes/**같은 BE 보호 이미지 URL이 들어올 수 있고, 기존 화면들은 이를AuthenticatedImage/useAuthenticatedImageSrc로 blob 변환해 표시합니다(src/components/common/AuthenticatedImage.tsx:9). 현재처럼combo.top?.imageUrl등을 그대로 Canvas에 넘기면(src/components/HomeTab.tsx:831) 인증/CORS 실패 또는 tainted canvas 예외가 발생하고 catch가 console만 남겨 배경만 그려진 카드가 됩니다. Canvas 합성 전에 기존fetchAuthenticatedImageObjectUrl경로로 object URL을 만든 뒤 draw하거나, 실패 시 기존AuthenticatedImage기반 fallback을 렌더링해야 합니다.
검증
- PASS:
git diff --check origin/develop...a5708175b0e7a5349882c833f2fb9a3a1205ebae -- - FAIL:
git merge-tree --write-tree origin/develop a5708175b0e7a5349882c833f2fb9a3a1205ebae-src/components/HomeTab.tsxcontent conflict - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 36 warnings - PASS:
npm run build - GitHub checks: 현재
statusCheckRollup에 실행된 check가 없습니다.
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면 표시 방식 변경이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
…BE5_FinalProject_Team4_FE into feat/#82 # Conflicts: # src/components/HomeTab.tsx
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit ac85508 기준으로 확인했습니다.
Findings
-
[P2] OOTD를 다시 추천 라벨 탭으로 되돌리면서 공식 문서 기준과 코드가 어긋났습니다. 현재 FE 기준 문서는
RECO-001을HomeTab상단 고정 OOTD 섹션으로 두고,RecommendationLabel에서ootd를 제거해 탭과 독립적으로 항상 로드한다고 명시합니다(docs/frontend/implementation-gaps.md:53,docs/frontend/implementation-gaps.md:64,docs/api/frontend-api-usage.md:263). 그런데 이번 head는RecommendationLabel에ootd를 다시 추가하고(src/components/HomeTab.tsx:165), 초기 탭도ootd로 바꾼 뒤(src/components/HomeTab.tsx:229) 라벨 grid에서 OOTD를 선택해야 렌더링되는 구조로 변경합니다(src/components/HomeTab.tsx:625,src/components/HomeTab.tsx:774). 의도한 제품 결정이 OOTD를 다시 탭으로 넣는 것이라면 관련 기준 문서와 gap 문서를 함께 갱신해야 하고, 아니라면 현재develop의 상단 고정 OOTD 섹션 구조 위에 디자인 변경만 적용해야 합니다. -
[P2] OOTD Canvas가 보호 이미지 처리 경로를 우회해 실제 사용자 옷 이미지가 빈 카드로 보일 수 있습니다.
OotdCanvas는 구성품 URL을new Image()로 직접 로드하고(src/components/HomeTab.tsx:49)getImageData를 호출합니다(src/components/HomeTab.tsx:64). 하지만 옷 이미지는/api/v1/images/clothes/**형태의 보호 URL일 수 있고, 기존 화면은 이를AuthenticatedImage/useAuthenticatedImageSrc가 axios blob URL로 바꿔 표시합니다(src/components/common/AuthenticatedImage.tsx:9,src/utils/authenticatedImageUrl.ts:34). 이번 변경은combo.top?.imageUrl등을 그대로 Canvas에 넘기므로(src/components/HomeTab.tsx:824) 인증/CORS 실패 또는 tainted canvas 예외가 나면 catch에서 console만 남기고 카드에는 배경만 남습니다. Canvas 합성 전에fetchAuthenticatedImageObjectUrl로 object URL을 만든 뒤 draw하거나, 실패 시 기존AuthenticatedImage기반 fallback을 렌더링해야 합니다.
검증
- PASS:
git diff --check origin/develop...ac85508e0fde8b9b9173c9f9e4d64218392ebe65 -- - PASS:
git merge-tree --write-tree origin/develop ac85508e0fde8b9b9173c9f9e4d64218392ebe65 - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 36 warnings - PASS:
npm run build - PASS: GitHub CI
Lint & Build
이전 리뷰 확인
- 해결됨: 최신
develop과의HomeTab.tsxmerge conflict는 해소됐습니다. - 미해결: 보호 이미지 URL을 Canvas가 직접 읽는 문제는 남아 있습니다.
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면 표시 방식 변경이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit 2171ce0 기준으로 확인했습니다.
Findings
- [P2] 추천 액션 후 상단 OOTD가 더 이상 갱신되지 않습니다. 현재
onWishlistChanged는 style/match 상태만 비우고refreshSignal을 증가시킵니다(src/components/HomeTab.tsx:280). 그런데 OOTD fetch effect는ootdItems.length === 0일 때만 다시 호출됩니다(src/components/HomeTab.tsx:403). 따라서toggleWishlist,handleFeedback,addPurchasedToCloset가 성공해서onWishlistChanged를 호출해도 기존 OOTD 카드가 남아 있으면refreshSignal변경만으로는GET /api/v1/ootd/{wardrobeId}를 다시 호출하지 않습니다. 특히 구매 후 보유 옷장 전환처럼 wardrobe 데이터가 바뀐 뒤에도 상단 OOTD는 이전 추천을 계속 보여줄 수 있습니다. 기존develop처럼 이 콜백에서setOotdItems([])와setOotdLoading(true)를 함께 수행하거나, refreshSignal 변경 시 OOTD를 강제로 refetch하도록 조건을 조정해 주세요.
Notes
- 이전 리뷰의 merge conflict는 해소됐습니다.
- 이전 리뷰의 OOTD 라벨 재도입 문제도 해소되어
RecommendationLabel은 다시style | similar | match | aimd이고, OOTD는 상단 독립 섹션으로 렌더링됩니다. - 보호 이미지 URL은
fetchAuthenticatedImageObjectUrl를 거치도록 개선됐습니다. 다만 생성된 object URL을 해제하지 않는 구조라(src/components/HomeTab.tsx:149) 추후 cleanup에서URL.revokeObjectURL까지 같이 처리하는 편이 좋습니다.
검증
- PASS:
git diff --check origin/develop...2171ce03e7d6e979924fbe65df955e709247b828 -- - PASS:
git merge-tree --write-tree origin/develop 2171ce03e7d6e979924fbe65df955e709247b828 - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 37 warnings - PASS:
npm run build - PASS: GitHub CI
Lint & Build
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면 표시 방식 변경이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit 2171ce0 기준으로 확인했습니다.
동일 head commit에 대한 재리뷰입니다.
Findings
-
[P2] 추천/저장 액션 이후 상단 OOTD가 갱신되지 않습니다. 현재
onWishlistChanged는 style/match 상태만 비우고refreshSignal을 증가시킵니다(src/components/HomeTab.tsx:280). 하지만 OOTD fetch는ootdItems.length === 0일 때만 실행됩니다(src/components/HomeTab.tsx:403), 그래서refreshSignal이 바뀌어도 기존 OOTD 카드가 남아 있으면GET /api/v1/ootd/{wardrobeId}를 다시 호출하지 않습니다. 또한 하위 추천 컴포넌트의 저장/구매 전환 경로도onWishlistAdded={onRefreshWardrobe}또는onSaved={onRefreshWardrobe}만 호출하므로(src/components/HomeTab.tsx:837,src/components/HomeTab.tsx:842,src/components/HomeTab.tsx:850,src/components/HomeTab.tsx:1011) 부모 옷장 목록은 새로고침돼도 상단 OOTD 상태는 그대로 남습니다. 위시리스트 저장, 추천 제외, 구매 후 보유 옷장 전환처럼 wardrobe 데이터가 바뀐 뒤에도 사용자는 이전 OOTD 조합을 계속 볼 수 있으니, 기존develop처럼 이 갱신 경로에서setOotdItems([])와setOotdLoading(true)를 함께 수행하거나refreshSignal/wardrobe 변경 시 OOTD를 강제로 refetch하도록 조건을 조정해 주세요. -
[P3] 유사 상품/AI MD 탭에서도 style 탭의 count, error, loading/empty 상태가 같이 노출될 수 있습니다.
selectedRecommendations는similar와aimd에서 항상 빈 배열을 반환합니다(src/components/HomeTab.tsx:317), 그런데 헤더 count와 style error는activeLabel !== "match"기준으로 표시됩니다(src/components/HomeTab.tsx:731,src/components/HomeTab.tsx:732). 빈 상태와 skeleton도 같은 조건을 사용합니다(src/components/HomeTab.tsx:737,src/components/HomeTab.tsx:747). 결과적으로 유사 상품이나 AI MD 탭을 열었을 때 실제 목록은 하위 컴포넌트가 렌더링되는데 상단에는0개, style API 에러, style skeleton/empty 문구가 함께 보일 수 있습니다. style 전용 상태는 다시activeLabel === "style"로 한정하거나 각 탭 컴포넌트가 자신의 count/loading/error를 표시하도록 분리하는 편이 좋습니다.
Notes
- 이전 리뷰의 merge conflict는 해소된 상태로 유지되고, GitHub
mergeable도MERGEABLE입니다. - 이전 리뷰의 OOTD 라벨 재도입 문제도 해소되어
RecommendationLabel은style | similar | match | aimd이고, OOTD는 상단 독립 섹션으로 렌더링됩니다. - 보호 이미지 URL은
fetchAuthenticatedImageObjectUrl경로를 거치도록 개선됐습니다. 다만 생성한 object URL을 해제하지 않는 구조라(src/components/HomeTab.tsx:149) 추후 cleanup에서URL.revokeObjectURL을 같이 처리하는 편이 좋습니다.
검증
- PASS:
git diff --check origin/develop...2171ce03e7d6e979924fbe65df955e709247b828 -- - PASS:
git merge-tree --write-tree origin/develop 2171ce03e7d6e979924fbe65df955e709247b828 - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 37 warnings - PASS:
npm run build - PASS: GitHub CI
Lint & Build - 로컬 환경 메모:
git fetch origin은 DNS 제한으로 실패했지만, GitHub API에서 원격develop과 로컬origin/develop이 모두d1464f15f72c11e3cabf95d72cf88129b0cf57c7임을 확인했습니다.
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면 표시 방식 변경이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit 1ead3bc 기준으로 확인했습니다.
Findings
- [P1] 현재 head는 TypeScript build가 실패해서 머지할 수 없습니다.
HomeTab에서SimilarProductRecommendations에onRefreshWardrobe={handleRefreshAll}를 추가했지만(src/components/HomeTab.tsx:842), 해당 컴포넌트의 props 타입은userId,existingGarments,onWishlistAdded,onGoToCloset만 선언합니다(src/components/SimilarProductRecommendations.tsx:41). 이 때문에npm run build가TS2322: Property 'onRefreshWardrobe' does not exist on type 'SimilarProductRecommendationsProps'로 실패했고, GitHub CILint & Build도 실패 상태입니다. 이미 같은 콜백을onWishlistAdded={handleRefreshAll}로 넘기고 있으니 중복 prop을 제거하거나, 실제로 별도 콜백이 필요하다면SimilarProductRecommendationsProps와 내부 호출부를 함께 추가해 주세요.
Notes
- 이전 리뷰의 추천/저장 액션 후 OOTD 미갱신 문제는
handleRefreshAll이setOotdItems([])와setOotdLoading(true)를 수행하고, match/similar/aimd/Outfit 저장 경로에 전달되도록 개선됐습니다. - 이전 리뷰의 유사 상품/AI MD 탭에서 style 상태가 함께 보이던 문제도 style 전용 count/error/loading/empty 조건으로 되돌아와 해소됐습니다.
- 보호 이미지 URL은 계속
fetchAuthenticatedImageObjectUrl경로를 거치지만, 생성한 object URL을 해제하지 않는 구조는 추후 cleanup에서URL.revokeObjectURL을 같이 처리하는 편이 좋습니다.
검증
- PASS:
git diff --check origin/develop...1ead3bc236475b7c47b3a58a3cb2577ffdcd34a5 -- - PASS:
git merge-tree --write-tree origin/develop 1ead3bc236475b7c47b3a58a3cb2577ffdcd34a5 - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 39 warnings - FAIL:
npm run build-src/components/HomeTab.tsx(842,17): error TS2322 - FAIL: GitHub CI
Lint & Build
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면/검증 실패 수정 범위이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
jychoi0831
left a comment
jychoi0831
left a comment
There was a problem hiding this comment.
현재 head commit 7045b4d 기준으로 확인했습니다.
Findings
- 머지 차단 이슈는 확인되지 않았습니다.
Notes
- 이전 리뷰의
SimilarProductRecommendations미선언 prop으로 인한 TypeScript build 실패는 해소됐습니다. - 이전 리뷰의 추천/저장 액션 후 OOTD 미갱신 문제는
handleRefreshAll이 OOTD/style/match를 함께 초기화하고 하위 추천 저장 경로에 전달되도록 개선되어 해소됐습니다. - 이전 리뷰의 유사 상품/AI MD 탭에서 style 상태가 함께 보이던 문제도 style 전용 조건으로 되돌아와 해소됐습니다.
- 참고:
OotdCanvas에서fetchAuthenticatedImageObjectUrl로 생성한 object URL 해제는 아직 없어, 후속 cleanup에서URL.revokeObjectURL을 같이 처리하는 편이 좋습니다.
검증
- PASS:
git diff --check origin/develop...7045b4de38c261900af5ae227f958aae210a863b -- - PASS:
git merge-tree --write-tree origin/develop 7045b4de38c261900af5ae227f958aae210a863b - PASS:
npm ci --offline - PASS:
npm run lint- 0 errors, 39 warnings - PASS:
npm run build - PASS: GitHub CI
Lint & Build
Sync 확인
- 대상 레포: BE
- Sync 이슈 기록: 필요 없음
- 사유: FE 홈 화면/코디 상세 표시 및 검증 수정 범위이며 BE API 계약, enum/code, 문서 source of truth 변경은 없습니다.
본 리뷰는 Codex를 사용해 작성했습니다.
2 participants
📌 관련 이슈
Closes #82
🛠️ 작업 내용
✅ 변경 사항
🔍 테스트 내용
📷 스크린샷 (선택사항)
💬 리뷰어에게
📋 PR 체크리스트
develop브랜치를 base로 설정했나요?