Reel-zip (릴집)

인스타그램 릴스를 카테고리별로 저장하고 관리하는 모바일 앱입니다.

📱 주요 기능

1. 릴스 저장

• 인스타그램에서 릴스 공유 시 자동으로 앱이 열리고 저장
• 저장 완료 후 자동으로 인스타그램으로 복귀
• 중복 저장 방지 (409 에러 처리)

2. 카테고리 관리

• 16개 카테고리: 정보, 가전, 스포츠, 코인, 주식, 레시피, 맛집, 카페, 패션, 생활용품, 여행, 반려동물, 유아, 건강, 음악, 밈
• 각 카테고리별 고유 색상 및 아이콘
• OOBE(온보딩)에서 초기 관심 카테고리 선택
• 프로필에서 카테고리 활성화/비활성화 관리
• OOBE에서 선택한 카테고리는 릴스가 없어도 유지
• 사용자가 활성화한 카테고리는 릴스가 0개일 때 자동 비활성화

3. 홈 화면

• 최근 저장된 릴스 미리보기
• 활성화된 카테고리별 릴스 개수 표시
• 카테고리 클릭 시 해당 카테고리 상세 화면으로 이동

4. 지도 화면

• 저장된 릴스의 위치를 지도에 마커로 표시
• 카테고리별 색상으로 마커 구분
• 위치 정보가 있는 릴스만 표시

5. 프로필 화면

• 사용자 이름 표시
• 모든 카테고리 목록 및 활성화 상태 관리
• 로그아웃 기능

6. 릴스 상세 화면

• 릴스 재생 및 상세 정보 확인
• 카테고리 수정 기능
• 릴스 삭제 기능

7. 사용자 인증

• 로그인/회원가입
• JWT 토큰 기반 인증
• 토큰 만료 시 자동 로그아웃 및 재로그인 유도

🛠 기술 스택

Frontend

• React Native (0.81.5)
• Expo (~54.0.20)
• TypeScript (~5.9.2)
• Expo Router (~6.0.13) - 파일 기반 라우팅
• React Navigation - 네비게이션 관리

주요 라이브러리

• @mj-studio/react-native-naver-map - 네이버 지도
• @react-native-async-storage/async-storage - 로컬 스토리지
• expo-share-intent - 인스타그램 공유 인텐트 처리
• expo-location - 위치 정보
• expo-linking - 딥링크 및 외부 앱 열기

📁 프로젝트 구조

reel-share-test/
├── app/                    # Expo Router 기반 화면
│   ├── (tabs)/            # 탭 네비게이션
│   │   ├── index.tsx      # 홈 화면
│   │   ├── map.tsx        # 지도 화면
│   │   └── explore.tsx    # 프로필 화면
│   ├── login.tsx          # 로그인
│   ├── signup.tsx         # 회원가입
│   ├── onboarding.tsx    # OOBE (카테고리 선택)
│   ├── onboarding-complete.tsx
│   ├── category.tsx       # 카테고리 상세
│   ├── reel.tsx          # 릴스 상세
│   └── _layout.tsx        # 루트 레이아웃 (공유 인텐트 처리)
├── components/            # 재사용 컴포넌트
├── constants/            # 상수 정의
│   └── categories.ts     # 카테고리 정의
├── utils/                # 유틸리티 함수
│   ├── api.ts           # API 호출 (safeFetch)
│   ├── auth.ts          # 인증 상태 관리
│   ├── authApi.ts       # 인증 API
│   └── categoryStorage.ts # 카테고리 저장소
└── assets/              # 이미지 등 리소스

🚀 시작하기

사전 요구사항

• Node.js 18+
• npm 또는 yarn
• Expo CLI
• Android Studio (Android 개발용)

설치

1. 의존성 설치

   npm install

2. 백엔드 URL 설정

   utils/api.ts와 utils/authApi.ts에서 백엔드 URL을 설정합니다:

   const BACKEND_URL = "https://your-backend-url.ngrok-free.dev";

3. 앱 실행

   # 개발 서버 시작
   npx expo start
   
   # Android 실행
   npm run android
   

🔧 환경 설정

Android 설정

• app.json에서 Google Maps API 키 설정 필요
• Naver Map 설정은 withNaverMap.js에서 관리

iOS 설정

• Xcode에서 Bundle Identifier 설정 필요
• app.json의 ios.bundleIdentifier 확인

공유 인텐트 설정

• Android: androidIntentFilters: ["text/*"] 설정됨
• iOS: iosActivationRules 설정 필요 (필요시)

📡 API 엔드포인트

인증

• POST /api/login - 로그인
• POST /api/register - 회원가입

릴스

• GET /api/reels - 릴스 목록 조회
• POST /api/download_reel - 릴스 저장
• DELETE /api/reels/:id - 릴스 삭제
• POST /api/reels/:id/correct_topic - 카테고리 수정

🎨 카테고리 시스템

카테고리 목록

1. 정보 - 파란색 (#3B82F6)
2. 가전 - 시안 (#06B6D4)
3. 스포츠 - 초록색 (#10B981)
4. 코인 - 황금색 (#F59E0B)
5. 주식 - 빨간색 (#EF4444)
6. 레시피 - 핑크 (#EC4899)
7. 맛집 - 보라색 (#D946EF)
8. 카페 - 진보라 (#A855F7)
9. 패션 - 로즈핑크 (#F43F5E)
10. 생활용품 - 청록색 (#14B8A6)
11. 여행 - 보라색 (#8B5CF6)
12. 반려동물 - 오렌지 (#F97316)
13. 유아 - 연두색 (#84CC16)
14. 건강 - 라임그린 (#22C55E)
15. 음악 - 오렌지레드 (#FB923C)
16. 밈 - 퍼플 (#9333EA)

카테고리 관리 로직

• OOBE 카테고리: 회원가입 시 선택한 카테고리, 릴스가 없어도 유지
• 활성 카테고리: 사용자가 프로필에서 활성화한 카테고리
• 자동 활성화: 새로운 릴스가 저장되면 해당 카테고리 자동 활성화
• 자동 비활성화: OOBE 카테고리가 아닌 경우, 릴스가 0개가 되면 자동 비활성화

🔐 인증 플로우

1. 앱 실행 시 인증 상태 확인
2. 미인증 시 → 로그인 화면
3. 회원가입 시 → OOBE 화면 (카테고리 선택)
4. 로그인 성공 시 → 홈 화면
5. 토큰 만료 시 → 자동 로그아웃 및 재로그인 유도

📱 사용자 플로우

릴스 저장 플로우

1. 인스타그램에서 릴스 공유
2. ReelZip 앱 선택
3. 앱이 자동으로 열리고 저장 시작
4. 저장 완료 후 자동으로 인스타그램으로 복귀

카테고리 관리 플로우

1. 프로필 화면에서 "카테고리 관리" 접근
2. 원하는 카테고리 활성화/비활성화
3. 변경사항 즉시 반영

🐛 알려진 이슈

• ngrok URL 변경 시 utils/api.ts와 utils/authApi.ts 모두 업데이트 필요
• Android에서 공유 인텐트가 제대로 작동하지 않을 수 있음 (디바이스별 차이)

📝 개발 노트

주요 구현 사항

• JWT 토큰 자동 갱신 및 만료 처리
• 카테고리별 색상 및 아이콘 시스템
• OOBE 카테고리와 일반 카테고리 구분 관리
• 지도 마커 색상 동적 적용
• 릴스 삭제 시 카테고리 자동 비활성화 로직

향후 개선 사항

• 릴스 검색 기능
• 즐겨찾기 기능
• 다크 모드 지원
• 릴스 공유 기능
• 통계 대시보드

👥 개발자

youngdud

---

ReelZip - 인스타그램 릴스를 더 체계적으로 관리하세요! 🎬