caadiq 1d5626568a feat: 일정 추가 폼 카테고리별 분기 마이그레이션

- form/index.jsx: 카테고리 선택 메인 페이지
- form/YouTubeForm.jsx: YouTube URL 기반 일정 추가
- form/XForm.jsx: X 게시글 ID 기반 일정 추가
- form/components/CategorySelector.jsx: 카테고리 선택기
- edit/YouTubeEditForm.jsx: YouTube 일정 수정 폼
- App.jsx 라우트 업데이트
  - /admin/schedule/new → 새로운 카테고리 선택 폼
  - /admin/schedule/new-legacy → 기존 레거시 폼
  - /admin/schedule/youtube/:id/edit → YouTube 수정 폼

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-22 21:11:59 +09:00

17 KiB

Raw Blame History

관리자 페이지 마이그레이션 계획서

개요

목표: frontend/src/pages/pc/admin/ → frontend-temp/src/pages/admin/
현재 규모: 12개 파일, 약 7,535 LOC
방식: 일반 페이지와 동일한 Strangler Fig Pattern 적용
특이사항: PC 전용 (모바일 관리자 페이지 없음)

현재 구조 분석

관리자 페이지 (12개)

파일	LOC	설명	복잡도
AdminLogin.jsx	168	로그인 폼	낮음
AdminDashboard.jsx	167	대시보드 (통계)	낮음
AdminMembers.jsx	180	멤버 목록	낮음
AdminMemberEdit.jsx	382	멤버 수정 폼	중간
AdminAlbums.jsx	222	앨범 목록	낮음
AdminAlbumForm.jsx	666	앨범 생성/수정 폼	높음
AdminAlbumPhotos.jsx	1,538	사진 업로드 (SSE)	매우 높음
AdminSchedule.jsx	1,465	일정 목록/검색	매우 높음
AdminScheduleForm.jsx	1,173	일정 생성/수정 폼	높음
AdminScheduleCategory.jsx	463	카테고리 관리	중간
AdminScheduleDict.jsx	664	일정 사전 관리	중간
AdminScheduleBots.jsx	447	봇 관리	중간

관리자 컴포넌트 (3개)

파일	설명
AdminLayout.jsx	관리자 레이아웃 (헤더 + 본문)
AdminHeader.jsx	관리자 헤더 (네비게이션)
NumberPicker.jsx	숫자 입력 컴포넌트

관리자 API (8개)

파일	설명
auth.js	로그인/인증
albums.js	앨범 CRUD
members.js	멤버 CRUD
schedules.js	일정 CRUD
categories.js	카테고리 CRUD
suggestions.js	검색어 추천 관리
bots.js	봇 관리
stats.js	통계 조회

마이그레이션 전략

우선순위

복잡도와 의존성을 고려하여 순차적으로 진행:

1단계: 폴더 구조 재편 (기존 파일을 새 구조로 이동)
2단계: 관리자 기반 설정 (레이아웃, API, 인증)
3단계: 간단한 페이지 (로그인, 대시보드, 멤버)
4단계: 앨범 관리
5단계: 일정 관리 (가장 복잡)

코딩 가이드라인

공개 영역과 동일한 패턴 적용:

useQuery / useMutation 사용
서비스 레이어 분리
공통 컴포넌트 재사용
TypeScript JSDoc 타입 정의

1단계: 폴더 구조 재편

기존 frontend-temp 파일들을 새로운 구조로 이동합니다.

1.1 현재 구조 → 새 구조

현재                              →  새 구조
─────────────────────────────────────────────────────────
api/
├── client.js                     →  api/common/client.js
├── index.js                      →  (삭제, 각 폴더별 index.js로 대체)
├── auth.js                       →  api/pc/admin/auth.js
├── schedules.js                  →  api/pc/public/schedules.js
├── albums.js                     →  api/pc/public/albums.js
└── members.js                    →  api/pc/common/members.js

components/
├── common/                       →  components/common/
│   ├── Loading.jsx
│   ├── ErrorBoundary.jsx
│   ├── ErrorMessage.jsx
│   ├── Toast.jsx
│   ├── Lightbox.jsx
│   └── ...
├── pc/                           →  components/pc/public/
│   ├── Layout.jsx
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── Calendar.jsx
│   └── ScheduleCard.jsx
└── mobile/                       →  components/mobile/
    ├── Layout.jsx
    ├── Header.jsx
    ├── BottomNav.jsx
    └── ...

hooks/
├── useMediaQuery.js              →  hooks/common/useMediaQuery.js
├── useLightbox.js                →  hooks/common/useLightbox.js
├── useCalendar.js                →  hooks/common/useCalendar.js
├── useAdminAuth.js               →  hooks/pc/admin/useAdminAuth.js
└── ...

pages/
├── home/pc/                      →  pages/pc/public/home/
├── home/mobile/                  →  pages/mobile/home/
├── schedule/pc/                  →  pages/pc/public/schedule/
├── schedule/mobile/              →  pages/mobile/schedule/
├── album/pc/                     →  pages/pc/public/album/
├── album/mobile/                 →  pages/mobile/album/
├── members/pc/                   →  pages/pc/public/members/
└── members/mobile/               →  pages/mobile/members/

1.2 import 경로 업데이트

파일 이동 후 모든 import 경로를 새 구조에 맞게 수정합니다.

// Before
import { fetchApi } from '@/api/client';
import Loading from '@/components/common/Loading';
import Calendar from '@/components/pc/Calendar';

// After
import { fetchApi } from '@/api/common/client';
import Loading from '@/components/common/Loading';
import Calendar from '@/components/pc/public/Calendar';

1.3 index.js 파일 생성

각 폴더에 re-export용 index.js 생성:

// api/pc/public/index.js
export * from './schedules';
export * from './albums';

// api/pc/admin/index.js
export * from './auth';
export * from './schedules';
// ...

2단계: 관리자 기반 설정

2.1 관리자 API 추가

원칙: 조회(GET)는 공개 API 재사용, CUD(Create/Update/Delete)는 관리자 API

api/
├── common/               # PC, Mobile 공통
│   └── client.js         # fetch 래퍼 (fetchApi, fetchAuthApi)
│
├── pc/
│   ├── common/           # PC 내 공통 (public + admin 공유)
│   │   └── members.js    # 멤버 조회 (일정 폼에서도 사용)
│   ├── public/           # PC 공개 API
│   │   ├── schedules.js
│   │   └── albums.js
│   └── admin/            # PC 관리자 API
│       ├── auth.js
│       ├── schedules.js
│       ├── albums.js
│       ├── members.js
│       ├── categories.js
│       ├── suggestions.js
│       ├── bots.js
│       └── stats.js
│
└── mobile/               # 모바일 (pc/public과 동일 API 사용 가능)

사용 예시:

// PC 공개 페이지
import { fetchSchedules } from '@/api/pc/public';

// PC 관리자 페이지 - 조회는 pc/common 또는 pc/public 재사용
import { fetchMembers } from '@/api/pc/common';
import { createSchedule } from '@/api/pc/admin';

// 모바일 페이지
import { fetchSchedules } from '@/api/pc/public'; // 동일 API 재사용

2.2 관리자 레이아웃

components/pc/admin/ 폴더 구조:

components/pc/admin/
├── Layout.jsx    # AdminLayout
├── Header.jsx    # AdminHeader (네비게이션)
└── NumberPicker.jsx

2.3 인증 훅 수정

현재 useAdminAuth.js를 관리자 전용으로 확장:

토큰 검증
자동 로그아웃
권한 체크

3단계: 간단한 페이지

3.1 AdminLogin

로그인 폼 컴포넌트화
useMutation으로 로그인 처리
에러 처리 표준화

3.2 AdminDashboard

통계 API 호출 (useQuery)
차트/카드 컴포넌트화
로딩/에러 상태 처리

3.3 AdminMembers / AdminMemberEdit

멤버 목록 테이블
멤버 수정 폼
이미지 업로드 처리

4단계: 앨범 관리

4.1 AdminAlbums

앨범 목록 테이블
삭제 확인 모달
정렬/필터링

4.2 AdminAlbumForm

폼 필드:

기본 정보 (이름, 발매일, 타입)
트랙 목록 (동적 추가/삭제)
티저 목록 (동적 추가/삭제)
앨범 커버 업로드

컴포넌트 분리:

components/pc/admin/album/
├── AlbumBasicForm.jsx   # 기본 정보
├── TrackListForm.jsx    # 트랙 관리
├── TeaserListForm.jsx   # 티저 관리
└── CoverUploader.jsx    # 커버 업로드

4.3 AdminAlbumPhotos

가장 복잡한 페이지:

SSE 스트리밍 업로드
진행률 표시
멤버 태깅
드래그 앤 드롭

훅 분리:

hooks/pc/admin/
├── usePhotoUpload.js    # SSE 업로드 로직
├── usePhotoList.js      # 사진 목록 관리
└── useMemberTag.js      # 멤버 태깅

5단계: 일정 관리

5.1 AdminSchedule

기능:

일정 목록 (가상 스크롤)
검색/필터링
일괄 삭제

훅 재사용:

useScheduleSearch (공개 영역과 동일)
useScheduleFiltering (공개 영역과 동일)

5.2 AdminScheduleForm