163 lines
3.9 KiB
Markdown
163 lines
3.9 KiB
Markdown
# 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/` - 페이지 컴포넌트
|
|
- `pc/public/` - PC 공개 페이지 (Home, Members, Album, AlbumDetail, TrackDetail 등)
|
|
- `mobile/public/` - 모바일 전용 페이지
|
|
- `pc/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 동기화**: 기능 추가 시 웹과 앱 모두 구현 필요
|