[DP-442] 마이페이지 추천 유튜브 mock → 신규 API 스펙 구조로 변경

[uiuuoq]

연결된 Jira 티켓

• DP-442

작업 내용

• 마이페이지 추천 유튜브 섹션을 신규 API 스펙(GET /recommend/youtube)에 맞게 변경 (mock 유지)

주요 변경점

• types/myPage.ts: MyPageRecommendVideo 필드 교체 (thumbnail→thumbnailUrl, uploadedAt→publishedAt, views 제거, videoId: string | null → string), contentId·translatedTitle·tags·isScrapped·isLiked 추가, MyPageRecommendYoutubeResponse 타입 추가
• lib/mock/my-page-recommend-video.ts: 10개 고정, { videos, isPersonalized, message } 구조 반환, duration ISO 8601 형식 적용, 영어 원제 + translatedTitle 혼합
• RecommendedVideoCard.tsx / RecommendedVideoListItem.tsx: parseDuration (ISO 8601 → 표시용) 추가, translatedTitle ?? title 표시, views 제거, 항상 <a> 렌더링 (서버에서 videoId: null 필터링 보장)
• RecommendedVideoListItem.tsx: 태그 목록 UI 추가 (제목 → 태그 → 채널명 · 날짜 순)
• RecommendedVideoList.tsx: 페이지네이션 제거, isPersonalized 안내 문구 처리, key={video.contentId}
• RecommendedSection.tsx: videos 상태 타입 교체, isPersonalized 처리, key={video.contentId}
• SourceLogo.tsx: paddingOverride prop 추가 (naver_d2 로고 크기 마이페이지 한정 조정)

테스트 방법

1. /my-page 접속 → 추천 유튜브 카드 4개 정상 렌더링 확인
2. 영어 원제 영상은 한국어 번역 제목으로 표시되는지 확인
3. duration 배지가 10:24 형식으로 표시되는지 확인
4. 카드/리스트 아이템 클릭 시 YouTube 링크로 이동하는지 확인
5. 전체 보기(/my-page/recommend/video) 접속 → 10개 목록, 페이지네이션 없음 확인
6. 리스트에서 태그 표시 확인
7. mock에서 isPersonalized: false로 변경 후 안내 문구 표시 확인

AI 사용 여부

• Claude Code 사용

체크리스트

• 빌드/테스트 확인
• 리뷰어 지정
• 라벨 지정

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
traceapp	Ready	Preview, Comment	Apr 30, 2026 0:33am