# 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**: 바텀시트 모달, 전 멤버 흑백 처리

### 개발 서버 실행
```bash
cd /docker/fromis_9/app
npx expo start --lan
```

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

---

## 5. 분석 절차

### 5.1 코드 전수 조사
```bash
# 프로젝트 구조 확인
find /docker/fromis_9 -type f -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" | head -50
```

### 5.2 DB 구조 파악
```bash
# .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 설정 확인
```bash
cat /docker/caddy/Caddyfile | grep -A 20 "fromis9"
```

---

## 6. 주의사항

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