fromis_9/docs/handover.md

fromis_9 프로젝트 인수인계서

프로젝트 개요

fromis_9 K-pop 아이돌 팬사이트 - 웹 프론트엔드, 백엔드 API, 모바일 앱으로 구성

---

1. 디렉토리 구조

/docker/fromis_9/
├── frontend/          # React 웹 프론트엔드 (Vite)
├── backend/           # Express.js 백엔드 API
├── app/               # React Native 모바일 앱 (Expo)
└── .env               # 환경변수 (DB 접속정보 등)

---

2. 웹 프론트엔드 (/frontend)

기술 스택

• React + Vite
• TailwindCSS
• framer-motion (애니메이션)

주요 경로

• src/pages/ - 페이지 컴포넌트
  • public/ - 공개 페이지 (Home, Members, Album 등)
  • mobile/public/ - 모바일 전용 페이지
  • admin/ - 관리자 페이지
• src/api/ - API 호출 함수
• src/components/ - 재사용 컴포넌트

---

3. 백엔드 (/backend)

기술 스택

• Express.js
• MariaDB (mysql2)
• RustFS (파일 스토리지)

주요 경로

• routes/ - API 라우트
  • public/ - 공개 API
  • admin/ - 관리자 API
• lib/ - 유틸리티 (DB, 파일 업로드 등)

---

4. 모바일 앱 (/app)

기술 스택

• Expo (React Native)
• TypeScript
• React Navigation (탭 + 스택 네비게이션)
• expo-blur, expo-linear-gradient (UI 효과)

주요 경로

app/src/
├── api/               # API 호출 함수
│   ├── albums.ts      # 앨범 API
│   ├── members.ts     # 멤버 API
│   └── schedules.ts   # 일정 API
├── components/        # 공통 컴포넌트
│   └── common/
│       └── Header.tsx # 공통 헤더 (뒤로가기, 타이틀, rightElement)
├── navigation/        # 네비게이션 설정
│   └── AppNavigator.tsx
├── screens/           # 화면 컴포넌트
│   ├── HomeScreen.tsx
│   ├── MembersScreen.tsx
│   ├── AlbumScreen.tsx
│   ├── AlbumDetailScreen.tsx
│   ├── AlbumGalleryScreen.tsx  # 컨셉포토 갤러리 (라이트박스)
│   └── ScheduleScreen.tsx
└── constants/         # 상수 (colors 등)

네비게이션 구조

TabNavigator (하단 탭)
├── HomeTab → HomeScreen
├── MembersTab → MembersScreen
├── AlbumTab → AlbumStackNavigator
│   ├── AlbumList → AlbumScreen
│   ├── AlbumDetail → AlbumDetailScreen
│   └── AlbumGallery → AlbumGalleryScreen
└── ScheduleTab → ScheduleScreen

주요 기능

• 탭 전환 시 앨범 스택 리셋: 다른 탭 갔다가 앨범 탭 클릭 시 목록으로 돌아감
• AlbumGalleryScreen: 웹과 1:1 동일한 컨셉포토 갤러리 (PagerView 라이트박스, 다운로드)
• MembersScreen: 바텀시트 모달, 전 멤버 흑백 처리

개발 서버 실행

cd /docker/fromis_9/app
npx expo start --lan

APK 빌드

npx expo run:android --variant release
# 또는 로컬 빌드
./gradlew assembleDebug  # android/ 폴더에서

---

5. 분석 절차

5.1 코드 전수 조사

# 프로젝트 구조 확인
find /docker/fromis_9 -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | head -50

5.2 DB 구조 파악

# .env에서 DB 정보 확인
cat /docker/fromis_9/.env

# MariaDB 접속 (컨테이너명: mariadb)
docker exec -it mariadb mysql -u [USER] -p[PASSWORD] fromis9

# 테이블 목록
SHOW TABLES;

# 테이블 스키마
DESCRIBE [table_name];

5.3 Caddy 설정 확인

cat /docker/caddy/Caddyfile | grep -A 20 "fromis9"

---

6. 주의사항

• 앱 HMR: Vite처럼 자동 반영, 빌드 불필요
• 앱 테스트: 흔들어서 → Reload로 확인
• DB 접속: .env 파일의 실제 자격증명 사용
• 웹/앱 1:1 동기화: 기능 추가 시 웹과 앱 모두 구현 필요