Vivid Renewal TODO

이 문서는 Google Sheets 비비드 요구사항 정의서의 공통 사항과 01 - Home 섹션을 기준으로, 현재 리뉴얼 중인 화면에서 추가 확인 또는 수정이 필요한 항목을 추적합니다.

범위

대상: 현재 리뉴얼한 Home, Sidebar, Profile popup, Gallery detail modal, Home persona/discover 영역
제외: 레거시 화면 전반, 아직 리뉴얼 범위가 아닌 상세 플로우
기준: Figma 디자인, 요구사항 정의서, 기존 디자인 시스템, 현재 구현 순서로 확인

상태 기준

[ ]: 미착수
[~]: 구현 중 또는 일부 반영
[x]: 반영 완료
확인 필요: 이전 구현 요청과 정의서가 충돌하거나 제품 결정이 필요한 항목

2026-06-01 구현 대조 메모

아래 항목은 공통 사항과 01 - Home 기준으로 현재 코드에 남아 있는 미반영/부분 반영 사항이다. 레거시 전반이 아니라 현재 리뉴얼 중인 Home, Sidebar, Profile popup, Gallery detail modal 중심으로만 추적한다.

2026-06-05 Discover 큐레이션 전환 메모

기존 사용자 게시(posts) 기능과 좋아요(likes) 기능은 둘러보기의 기반으로 사용하지 않는다.
별 아이콘은 pins 기반의 모음/즐겨찾기 기능으로 유지한다.
Home Discover는 사용자의 게시물이 아니라 관리자가 선별한 discover_items를 노출한다.
유저는 콘텐츠 공개 허용 설정으로 관리자 큐레이션 후보 노출 여부를 제어한다.
- 기본값은 허용이다.
- 문구 기준: 모든 콘텐츠가 공개되는 것은 아니며, 검토 후 선별 노출됩니다.
Discover 카테고리는 전체, 포토, 비디오, 코디, 배경으로 구성한다.
- 전체는 UI 필터 전용이며 DB 저장값으로 사용하지 않는다.
- DB 저장 카테고리는 PHOTO, VIDEO, COORDI, BACKGROUND을 사용한다.
구현 상태:
- 백엔드 allowContentCuration 및 discover_items foundation 추가
- Home Discover를 posts 기반에서 discover_items 기반으로 교체
- 프로필의 게시/좋아요 탭과 통계 제거
- 게시/좋아요 API 및 DB 테이블 제거 마이그레이션 추가
- 관리자 둘러보기 큐레이션 페이지 추가
- 리뉴얼 설정 화면에서 콘텐츠 공개 허용 토글 UI 연결

우선순위 P0

공통 popup/modal 진입 및 종료 애니메이션을 먼저 정리한다.
- 기존 Profile popup은 단순 조건부 렌더링이라 진입/종료 애니메이션이 없었다.
- 기존 Gallery detail modal은 고정 overlay와 content를 바로 렌더링하며, dim fade, media zoom-in, 우측 패널 slide-in/out 애니메이션이 없었다.
- 구현 방향: 이미 프로젝트에서 사용하는 framer-motion과 AnimatePresence를 재사용해 공통 modal motion primitive를 만든다.
- 1단계 반영: ModalPresence, ModalSurface를 추가하고 Profile popup에 진입/종료 애니메이션을 적용했다.
- 2단계 반영: Gallery detail modal에 ModalBackdrop, ModalMediaSurface, ModalSidePanel을 적용하고, exit animation 이후 URL query를 정리하도록 닫기 흐름을 조정했다.
- 공통 primitive 후보:
  - ModalPresence: open 상태에 따라 children을 mount/unmount하고 exit 애니메이션을 보장한다.
  - ModalBackdrop: #000 opacity 80%, blur 50, fade in/out, backdrop click close를 담당한다.
  - ModalSurface: popup/modal 본문 진입/종료 motion variant를 담당한다.
  - ModalSidePanel: 상세 모달 우측 패널의 right slide-in/out을 담당한다.
  - ModalMediaSurface: 상세 모달 좌측 media의 zoom-in/out을 담당한다.
- 정의서 기준 motion:
  - On: 아래에서 올라오며 나타난다.
  - Off: 위에서 내려가는 느낌으로 사라진다.
  - 구현 전 실제 Figma motion 의도가 닫힐 때 아래로 내려감인지 위쪽에서 내려오는 out motion인지 최종 확인이 필요하다.
Modal dim 규칙을 통일한다.
- 기준: #000 opacity 80%, background blur 50, 흐려지는 애니메이션.
- 2단계 반영: Gallery detail modal은 bg-black/80, backdrop-blur-[50px], fade in/out을 적용했다.
- Profile popup은 overlay dim을 쓰지 않는 anchored popup이므로 dim 대상에서 제외하되, exit animation은 공통 규칙을 공유한다.
Detail modal 애니메이션을 공통 primitive로 이관한다.
- 좌측 media 영역: 진입 시 zoom-in.
- 우측 정보 패널: 진입 시 right slide-in.
- 2단계 반영: 닫기 시 exit animation이 끝난 후 query param 제거 또는 unmount가 일어나도록 했다.
- Escape, X 버튼, media 바깥 클릭 닫기 동작은 유지한다.

우선순위 P1

주요 loading 상태를 skeleton 중심으로 전환한다.
- Home persona, Home discover, Gallery detail fallback loading에 spinner가 남아 있다.
Tooltip 스타일을 정의서 기준으로 통일한다.
- 기준: Regular 14/20, text #fff, background #80, radius 8, padding 16px.
- 현재 공통 Tooltip과 Sidebar Tooltip override가 서로 다르다.
Home Discover 비디오 카드 자동재생을 보강한다.
- 현재 카드는 thumbnail/image만 렌더링한다.
- 비디오 작업물은 hover 없이 muted autoplay loop preview로 노출하는 방향을 검토한다.
Home Discover 검색 범위를 정의서 기준으로 보강한다.
- 작성자 닉네임, 프롬프트 단어, 룩북 태그를 검색 대상으로 맞춘다.
Home 내 남은 visible Place 문구를 Discover/Gallery/콘텐츠 계열 용어로 정리한다.
- API/hook 이름(usePlacePosts, mapPlacePostToGalleryItem)은 별도 route/domain rename 범위로 분리한다.
Detail modal 프롬프트 영역 펼치기/접기를 구현한다.
- 현재 chevron은 시각 요소만 있고 동작이 없다.
Detail modal kebab menu를 저장하기, 공유하기 링크 복사 액션으로 정리한다.
- 현재 더보기 버튼은 즉시 링크 복사만 수행한다.

우선순위 P2

Persona 카드 kebab menu에서 삭제, 편집 액션을 연결한다.
- 현재는 hover 시 kebab 모양만 노출된다.
Discover hover overlay에 이름뿐 아니라 날짜 등 정의서 기준 정보를 보강한다.
참조 이미지 영역을 정의서 기준으로 정리한다.
- 클릭/hover 인터랙션 제거는 현재 유지되고 있으나, 저해상도 썸네일 사용과 페르소나/참조된 룩북 한정 노출은 추가 확인이 필요하다.
내 룩북에 추가 버튼 노출 조건을 재검토한다.
- 현재는 lookbookTarget이 있으면 노출된다.
- TODO 기준은 룩북 상세 화면에서만 노출이다.

확인 필요

Home Hero의 hover pause 규칙은 정의서와 이후 요청이 일부 충돌한다.
- 정의서: 캐러셀 영역 hover 시 자동 넘김 정지.
- 이후 요청 반영 상태: 비디오 배너는 hover와 상관없이 영상 종료 시 다음 배너로 넘어간다.
- 제품 기준을 정의서 우선으로 되돌릴지, 최신 요청 우선으로 유지할지 결정이 필요하다.

공통 사항

[~] Popup/modal 진입 및 종료 애니메이션을 공통 규칙으로 정리한다.
- On: 아래에서 올라오는 애니메이션
- Off: 위에서 내려가는 애니메이션
- 1단계: Profile popup 적용 완료
- 2단계: Gallery detail modal의 dim fade, media zoom-in, right panel slide-in/out 적용 완료
- 남은 범위: 다른 리뉴얼 modal/popup 적용 범위 확인
[~] Modal dim 규칙을 통일한다.
- #000 opacity 80%
- background blur 50
- 흐려지는 애니메이션
- dim 영역 클릭 시 뒤로가기 또는 닫기
- 2단계: Gallery detail modal 적용 완료
Modal에서 좌측 사이드패널은 dim 처리하지 않고, 사이드패널에서 32px 떨어진 위치에 X 버튼을 노출한다.
#90 이하 컬러 버튼 hover 시 #000 opacity 30% dim 처리를 공통 버튼 상태로 검토한다.
주요 loading 상태를 spinner 중심에서 skeleton loading 중심으로 정리한다.
Tooltip 스타일을 정의서 기준으로 통일한다.
- Regular 14/20
- text #fff
- background #80
- radius 8
- padding 16px
이미지 카드 hover 모션을 공통화한다.
- 큐레이션 이미지, 나의 페르소나 목록, 생성 화면 이미지 그리드
- subtle lift 4-8px
- 부드러운 easing transition
Sidebar menu hover tooltip을 Home, Persona, Lookbook, Notifications 기준으로 재확인한다.
Sidebar price 버튼 hover 애니메이션을 정의서 기준으로 보강한다.
- 텍스트는 박스 내부에 유지
- cursor pointer

01 - Home: Recent Persona Tasks

Home에서 최근 페르소나 노출 개수를 최대 8개로 제한한다.
섹션 내 전체보기 클릭 시 Persona main page로 이동하는 동작을 유지한다.
카드 hover 시 페르소나명, 최근 수정일, kebab menu를 노출한다.
Kebab menu에서 삭제, 편집 액션을 연결한다.
새 페르소나 버튼 클릭 시 페르소나 추가 모달이 열리는지 재확인한다.
Loading 상태를 skeleton으로 전환한다.

01 - Home: Discover

큐레이션 이미지 그리드는 1행 5개 기준으로 조정한다.
Discover category는 전체, 포토, 비디오, 룩북 4개를 유지한다.
비디오 작업물은 hover하지 않아도 자동 재생되도록 카드 렌더링을 보강한다.
검색 대상 범위를 정의서 기준으로 맞춘다.
- 작성자 닉네임
- 프롬프트 단어
- 룩북의 경우 태그
Home 내 남은 Place 문구를 Discover/Gallery/콘텐츠 계열 용어로 정리한다.
이미지 카드 hover 시 이름, 날짜 등 오버레이 노출 상태를 Figma 기준으로 재확인한다.
즐겨찾기 버튼은 hover 시 노출하고, 이미 즐겨찾기된 경우에는 항시 채워진 별로 표시한다.

구현 메모

Home 관련 주요 파일
- frontend-vivid-ai/src/features/dashboard/components/HomeHeroBanner.tsx
- frontend-vivid-ai/src/features/dashboard/components/HomePersonaSection.tsx
- frontend-vivid-ai/src/features/dashboard/components/HomeBrowseSection.tsx
- frontend-vivid-ai/src/features/dashboard/components/HomeGalleryItemDetailModal.tsx
공통/레이아웃 관련 주요 파일
- frontend-vivid-ai/src/components/navigation/AppSidebar.tsx
- frontend-vivid-ai/src/components/navigation/ProfileActivePopup.tsx
- frontend-vivid-ai/src/components/ui/atoms/Tooltip/ToolTip.tsx
- frontend-vivid-ai/src/features/community/components/community-detail/GalleryItemDetailModal.tsx
현재 usePlacePosts, mapPlacePostToGalleryItem 등 일부 코드명은 API/기존 도메인 호환을 위해 남아 있다. UI 문구와 route naming 정리와 별도 범위로 다룬다.

범위​

상태 기준​

2026-06-01 구현 대조 메모​

2026-06-05 Discover 큐레이션 전환 메모​

우선순위 P0​

우선순위 P1​

우선순위 P2​

확인 필요​

공통 사항​

01 - Home: Event Banner​

01 - Home: Recent Persona Tasks​

01 - Home: Discover​

01 - Home: Detail Image Modal​

구현 메모​

범위