- 공통 Lightbox 컴포넌트에 비디오 지원 추가 (teasers prop)
- 사진 메타데이터 표시 지원 (photos prop으로 컨셉/멤버 정보)
- showCounter, showDownload props 추가
- PC AlbumDetail의 인라인 라이트박스 코드 제거 (-285줄)
- 코드 중복 제거 및 유지보수성 향상
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- utils/youtube.js: YouTube URL 파싱 유틸리티 생성
- getYoutubeVideoId, getYoutubeThumbnail, getYoutubeEmbedUrl
- utils/format.js: parseCredits, calculateTotalDuration 함수 추가
- hooks/useLightbox.js: 라이트박스 상태 관리 훅 생성
- components/common/ErrorMessage.jsx: 에러 메시지 컴포넌트 생성
- components/common/Loading.jsx: size prop 추가 (sm, md, lg)
- TrackDetail (PC/Mobile): 중복 함수 제거, 유틸리티 사용
- AlbumDetail (PC/Mobile): getTotalDuration -> calculateTotalDuration 유틸리티 사용
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- PC 컴포넌트를 components/pc/로 이동 (Calendar, ScheduleCard, BirthdayCard, CategoryFilter)
- Mobile 컴포넌트를 components/mobile/로 이동 (Mobile 접두사 제거)
- components/schedule/에는 공용 코드만 유지 (confetti.js, AdminScheduleCard)
- Schedule, Home 페이지의 import 경로 업데이트
- 관련 문서 업데이트
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 페이지 폴더 구조를 문서대로 정리 (pc/, mobile/ 하위 폴더)
- Mobile Schedule 리팩토링 (1,495줄 → 780줄, 48% 감소)
- MobileCalendar를 별도 공통 컴포넌트로 분리
- MobileBirthdayCard에 motion/delay 지원 추가
- 중복 상수 통합: CATEGORY_ID, MIN_YEAR, SEARCH_LIMIT, MEMBER_ENGLISH_NAMES
- sections/utils.js 중복 함수 제거 (@/utils에서 re-export)
- formatXDateTime 함수 개선 (datetime 문자열 직접 처리)
- 모바일 유튜브 숏츠 표시 개선 (가로 비율, 전체화면시 세로)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
PC 스케줄 페이지:
- Calendar 컴포넌트 (년/월 선택, 날짜 선택, 일정 점 표시)
- CategoryFilter 컴포넌트 (카테고리별 필터링)
- 검색 기능 (무한 스크롤 + 가상 스크롤 + 자동완성)
- 생일 폭죽 애니메이션
Mobile 스케줄 페이지:
- 달력 뷰 / 리스트 뷰 전환
- 월 선택 드롭다운
- 검색 기능 (무한 스크롤)
- 날짜별 그룹화된 일정 목록
공통 컴포넌트:
- BirthdayCard (PC/Mobile)
- fireBirthdayConfetti 함수
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
PC 카드 (2종):
- ScheduleCard: 일반 일정 카드 (홈, 스케줄 페이지)
- AdminScheduleCard: 관리자 일정 카드 (편집/삭제 버튼 포함)
Mobile 카드 (3종):
- MobileScheduleCard: 홈 페이지용 (간결한 레이아웃)
- MobileScheduleListCard: 스케줄 타임라인용 (날짜 없이 시간/카테고리)
- MobileScheduleSearchCard: 검색 결과용 (왼쪽에 날짜 표시)
공통 변경:
- decodeHtmlEntities를 사용하여 HTML 엔티티 디코딩
- getDisplayMembers 유틸 추가 (5명 이상일 때 프로미스나인 표시)
- getMemberList가 member_names 문자열 처리하도록 개선
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ScheduleCard (PC): 카테고리와 source name 분리, Link2 아이콘 사용
- MobileScheduleCard (Mobile): 동일한 구조로 분리
- Home 페이지에서 컴포넌트 사용하도록 변경
- 멤버 5명 이상이면 '프로미스나인'으로 표시
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 6-9에서 추가된 파일 제거
- react-device-detect 미사용 문제로 인한 구조 재설계
- 올바른 폴더 구조로 재시작 예정:
- pages/{feature}/pc/, pages/{feature}/mobile/ 구조
- react-device-detect BrowserView/MobileView 사용
- components/pc/, components/mobile/ 레이아웃 분리
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
레이아웃 컴포넌트:
- Header: PC용 헤더 (네비게이션 + SNS 링크)
- MobileNav: 모바일 하단 네비게이션
- Footer: PC용 푸터
- Layout: PC/Mobile 통합 레이아웃 (useIsMobile 기반 분기)
스케줄 페이지 (기본 구조):
- PC: 좌측 캘린더 + 우측 일정 목록
- Mobile: 상단 네비게이션 + 일정 목록
- 월 변경, 날짜 선택, 일정 표시 기능
App.jsx 업데이트:
- 라우팅 설정 (/, /schedule, /members, /album)
- Layout 컴포넌트 적용
상수 추가:
- NAV_ITEMS: 네비게이션 메뉴 항목
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- frontend-temp/ 폴더 생성 (Strangler Fig Pattern)
- package.json: clsx 추가, 버전 2.0.0
- vite.config.js: @ path alias 추가
- 기본 폴더 구조 생성 (api, components, hooks, pages, stores, utils, constants)
- docker-compose.yml: fromis9-frontend-dev 서비스 추가
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
