- 페이지 폴더 구조를 문서대로 정리 (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 앨범 페이지:
- 앨범 목록 그리드 (4열)
- 앨범 타입별 통계 (정규/미니/싱글/총)
- 호버 시 트랙 수 표시
- 타이틀곡 및 발매일 표시
Mobile 앨범 페이지:
- 앨범 목록 그리드 (2열)
- 앨범 타입 및 발매년도 표시
Note: 앨범 상세 페이지(AlbumDetail, AlbumGallery)는 추후 구현 예정
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 멤버 페이지: 5열 그리드, 전 멤버 섹션 (grayscale)
- Mobile 멤버 페이지: Swiper 카드 스타일, 썸네일 인디케이터
- App.jsx에 멤버 라우트 추가
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- PC/Mobile 홈 페이지 분리 구현
- App.jsx: react-device-detect (BrowserView/MobileView) 사용
- PCWrapper: body.is-pc 클래스 추가
- 커스텀 훅 사용 (useMembers, useAlbums, useUpcomingSchedules)
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>
페이지 추가:
- Home: PC/Mobile 통합 홈 페이지
- 히어로 섹션, 그룹 통계, 멤버/앨범/일정 미리보기
- Members: PC/Mobile 통합 멤버 페이지
- 현재 멤버, 전 멤버 그리드
- NotFound: 404 페이지
훅 추가:
- useMembers: 멤버 목록 조회
- useMemberDetail: 멤버 상세 조회
라우팅:
- 모든 공개 라우트 완성 (/, /members, /album, /schedule)
- 404 라우트 추가 (*)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
앨범 페이지:
- Album.jsx: PC/Mobile 통합 (useIsMobile 분기)
- PC: 통계 + 4열 그리드 + 호버 오버레이
- Mobile: 2열 그리드 간소화
훅 추가:
- useAlbums: 앨범 목록 조회
- useAlbumDetail: 앨범 상세 조회
- useAlbumGallery: 앨범 갤러리 조회
라우팅:
- /album 라우트 추가
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>
- api/client.js: fetch 래퍼, ApiError, 헬퍼 함수 (get/post/put/del)
- api/auth.js: 로그인, 토큰 검증
- api/schedules.js: 스케줄/카테고리 API (공개 + 어드민)
- api/albums.js: 앨범 API (공개 + 어드민)
- api/members.js: 멤버 API (공개 + 어드민)
- docs: useQuery 사용 가이드라인 추가
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- useAuthStore: 인증 상태 관리 (localStorage persist)
- useScheduleStore: 스케줄 페이지 상태 (검색, 필터, 날짜, 뷰)
- useUIStore: UI 상태 (토스트, 모달, 라이트박스, 확인 다이얼로그)
- stores/index.js: 통합 export
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>
