- main을 flex flex-col로 변경
- 브레드크럼, 타이틀에 flex-shrink-0 추가
- 그리드에 flex-1 min-h-0 추가
- 일정 목록 컬럼에 flex flex-col min-h-0 추가
- 스크롤 컨테이너에서 max-h 고정값 제거하고 flex-1로 변경
1. 외부 스크롤 제거 (h-screen overflow-hidden flex flex-col)
2. HTML 엔티티 디코딩 함수 추가 (< > 등 올바르게 표시)
3. decodeHtmlEntities 함수를 컴포넌트 외부로 이동하여 ScheduleItem에서 접근 가능
문제: 일정 관리 페이지에서 날짜 선택 후 홈으로 갔다왔을 때
오늘 날짜로 초기화가 안됨
해결:
- useScheduleStore에 preserveState 플래그 추가
- AdminSchedule에서 preserveState가 false면 오늘 날짜로 초기화
- AdminScheduleForm, AdminScheduleBots에서 일정 관리로 돌아갈 때
preserveState를 true로 설정하여 상태 유지
새로 생성된 파일:
- components/admin/ConfirmDialog.jsx (109줄)
- 삭제 확인 등 위험한 작업을 위한 공통 다이얼로그
- Props: isOpen, onClose, onConfirm, title, message, loading, variant 등
수정된 파일:
- pages/pc/admin/AdminAlbums.jsx (60줄 → 15줄)
- pages/pc/admin/AdminSchedule.jsx (70줄 → 17줄)
총 약 100줄의 중복 코드 제거
새로 생성된 파일:
- components/admin/AdminHeader.jsx (47줄)
- 로고, Admin 배지, 사용자 정보, 로그아웃 버튼 포함
수정된 파일:
- pages/pc/admin/AdminMembers.jsx
- AdminHeader import 추가
- 중복 헤더 JSX 제거 (24줄 -> 1줄)
- handleLogout 함수 제거 (5줄)
나머지 9개 Admin 페이지도 동일한 패턴으로 적용 가능
- components/admin/CustomDatePicker.jsx 생성 (269줄)
- AdminMemberEdit에서 중복 제거 (-237줄)
- AdminAlbumForm에서 중복 제거 (-273줄)
- AdminScheduleForm에서 중복 제거 (-349줄)
- 현재 년도/월 표시: 테두리 제거, 글씨색만 유지
- 오늘 날짜: 배경색 제거, 글씨색만 유지
- 요일/일요일/토요일 색상 구분 추가
총 코드 감소: 약 860줄
- AdminMemberEdit API 모듈 적용
- AdminScheduleForm API 모듈 적용
- AdminAlbumPhotos API 모듈 적용 (업로드는 SSE 유지)
- api/admin/albums.js에 getAlbumTeasers, deleteAlbumTeaser 추가
총 적용 완료:
- Public 페이지: 7개
- Admin 페이지: 10개 전체 완료
- AdminAlbums API 모듈 적용
총 적용 완료:
- Public 페이지: 7개 (PC 6 + 모바일 1)
- Admin 페이지: 7개 (Schedule, ScheduleBots, ScheduleCategory, Login, Dashboard, Albums, Schedule)
- api/admin/auth.js 인증 모듈 생성 (verifyToken, login, logout, hasToken 등)
- categories.js reorderCategories 경로 수정
- AdminScheduleCategory 전체 API 모듈 적용
- AdminLogin API 모듈 적용
- AdminDashboard API 모듈 적용
남은 작업: AdminAlbums, AdminAlbumPhotos, AdminMemberEdit, AdminScheduleForm
- api/ 디렉토리 구조 생성
- index.js: 공통 fetch 래퍼
- schedules.js, albums.js, members.js: 공개 API
- admin/: 어드민 API (bots, albums, categories, members, schedules)
- Schedule.jsx: API 모듈 적용
- AdminScheduleBots.jsx: API 모듈 적용
- filteredSchedules useMemo로 불필요한 재계산 방지
- ScheduleItem React.memo 컴포넌트로 분리하여 리렌더링 방지
- categoryCounts useMemo 맵으로 O(1) 카테고리 카운트 조회
- 카테고리 카운트를 선택된 날짜 기준으로 계산
- useDeferredValue로 달력 점 표시 지연 처리하여 UI 응답성 향상
- selectedDate 변경 시 스크롤 맨 위로 초기화
- AdminSchedule.jsx: hasSchedule, getScheduleColor, filteredSchedules에서 formatDate 사용
- AdminScheduleForm.jsx: 수정 모드 날짜 로드 시 formatDate 사용
- toISOString 대신 dayjs 기반 formatDate 사용
- dayjs 패키지 설치 (타임존 지원)
- utils/date.js 유틸리티 생성 (getTodayKST, formatDate, parseDateKST 등)
- PC/모바일 Home.jsx의 날짜 계산을 유틸리티로 교체
- PC Schedule.jsx, AdminSchedule.jsx의 getTodayKST 함수를 유틸리티로 교체
- KST 타임존 기준으로 정확한 날짜 계산 보장
- RSS 방식에서 YouTube API 방식으로 변경 (최근 10개 영상 조회)
- rss_url 컬럼 삭제
- Google Cloud Webhook으로 할당량 경고 수신
- 95% 도달 시 봇 자동 중지
- LA 시간 자정(할당량 리셋)에 봇 자동 재시작
- 봇 관리 페이지에 경고 배너 표시
- react-infinite-scroll-component를 useInfiniteQuery + useInView로 대체
- Schedule.jsx, AdminSchedule.jsx에 안정적인 무한 스크롤 적용
- source_name에 Link2 아이콘 추가 (카테고리 오른쪽 인라인 표시)
- 멤버 5명 이상일 경우 '프로미스나인'으로 표시 (탈퇴 멤버 고려)
- AdminSchedule 일반 모드에서 members 배열도 확인하여 멤버 표시
- QueryClientProvider 설정 추가 (main.jsx)
- 카테고리 정렬: 일정 개수 기준 내림차순, 0개 숨김, 기타는 맨 아래 고정
- useMemo로 카테고리 정렬 메모이제이션 (깜빡임 방지)
- 일정 수정 시 이미지 삭제 버그 수정 (existingImageIds 업데이트)
- 이미지 파일명에서 Date.now() 제거 (01.webp 형식 유지)
- 이미지 삭제 후 sort_order 재정렬 로직 추가
- 날짜 선택 시 요일 표시 추가 (2026년 1월 7일 (수) 형식)
- 검색 모드 전환 시 일정 목록 fade 애니메이션 통일
- 일정 개수 텍스트 애니메이션 추가
- 관리자 일정 개수 표시 'N개 일정'으로 변경
- 일정 항목 애니메이션 y 이동 제거 (스크롤바 깜빡임 방지)
- 관리자 일정 페이지 상태 유지 (sessionStorage)
- 검색 결과 유사도순 정렬 (동일 유사도 시 최신 날짜 우선)
- 프론트엔드 검색 재정렬 제거 (Meilisearch 순서 유지)
- 관리자 일정 페이지 Meilisearch 검색 적용
- 일정 수정 시 Meilisearch 동기화 추가
- 서버 시작 시 자동 동기화
- 멤버 이름 쉼표 구분으로 통일
- 봇 스케줄러: 서버 시작 시 자동 초기화, 10초 간격 상태 동기화
- DB 리팩토링: bots 테이블에서 YouTube 컬럼 분리, bot_youtube_config 활용
- 봇별 커스텀 설정: BOT_CUSTOM_CONFIG 상수로 코드 내 관리
- 공개/관리자 일정 목록에 멤버 태그 표시 (5명 이상이면 '프로미스나인')
- 일정 목록 글씨 크기 증가 및 UI 개선
- source_name 관리자 일정에 뱃지로 표시
- 봇 시작/정지 토스트에 봇 이름 포함
- YouTube 일정 봇 서비스 추가 (youtube-bot.js, youtube-scheduler.js)
- 공개 일정 API 라우터 추가 (schedules.js)
- 관리자 일정 봇 관리 페이지 추가 (AdminScheduleBots.jsx)
- 백엔드 의존성 업데이트
- 헤더에 검색 토글 UI 추가 (밑줄 스타일 검색창)
- API 검색 기능 (/api/admin/schedules?search=) 연동
- 검색 모드에서 달력/카테고리 비활성화 (framer-motion animate)
- 검색 결과에 년.월 형식 날짜 표시 (2025.4)
- 카테고리 개수: 검색 시 결과 기준, 일반 시 해당 월 기준
- 달력/카테고리 구조 분리하여 독립 제어
- AdminSchedule.jsx도 동일한 비활성화 방식 적용
- schedule_members 테이블 분리 (members 컬럼 → 별도 테이블)
- schedules 테이블 컬럼 comment 추가 및 순서 정리
- 상세주소(location_detail) 필드 추가
- 장소 검색 UI 개선 (탭 제거 → 입력 필드+검색 버튼 병합)
- 카카오 장소 검색 API 프록시 추가 (/api/admin/kakao/places)
- 백엔드 CRUD API 구현 (GET/PUT/DELETE /schedules/:id)
- 프론트엔드 삭제 기능 및 확인 다이얼로그 추가
- 프론트엔드 수정 모드 지원 (기존 데이터 로드)
- 일정 카테고리 CRUD API 추가 (backend/routes/admin.js)
- AdminScheduleCategory 페이지 신규 추가
- 카테고리 추가/수정/삭제 기능
- 드래그 앤 드롭 정렬 (framer-motion Reorder)
- react-colorful 기반 커스텀 색상 선택기
- 중복 카테고리 체크
- AdminScheduleForm에 동적 카테고리 로드 기능 추가
- 삭제 다이얼로그 앨범 스타일로 통일 (AlertTriangle 아이콘, 경고 메시지)
- Toast 컴포넌트 exit 애니메이션 수정
- 토스트 3초 자동 닫힘 기능 추가
- AdminSchedule, AdminScheduleForm 페이지 추가
- 커스텀 타임피커 구현 (오전/오후 지원, 드래그/휠 스크롤)
- Lightbox 공통 컴포넌트 분리 (components/common/Lightbox.jsx)
- 이미지 드래그 앤 드롭 정렬 기능
- 이미지 삭제 확인 다이얼로그
- 이미지 추가 버튼 첫번째 위치 고정
- 일정 이미지 순서 번호 표시
- react-ios-time-picker 라이브러리 CSS 제거
- 멤버 수정 페이지 추가 (AdminMemberEdit.jsx)
- 커스텀 데이트픽커 적용 (앨범 폼과 동일)
- 활동 상태 버튼 토글 (활동 중/탈퇴)
- URL 라우터 멤버 이름 기반으로 변경 (/admin/members/:name/edit)
- 백엔드 멤버 조회/수정 API 추가 (이름 기반)
- 전 멤버 섹션 UI 개선 (배경 항상 표시, 포지션 제거)
