TOOPLAY Front

TOOPLAY의 Expo Router 기반의 React Native 앱입니다.

빠른 시작

필수 요구사항

• Node.js 18+
• Yarn 1.22.22+
• iOS: Xcode 14+ (macOS에서 iOS 개발 시)
• Android: Android Studio / Android SDK (Android 개발 시)

초기 설정

# 1. 의존성 설치
yarn install

# 2. 개발 서버 실행
yarn start

실행하기

# 웹 (우권장 - 개발 속도가 빠름)
yarn web

# iOS 시뮬레이터
yarn ios

# Android 에뮬레이터
yarn android

# 또는 Expo Go 앱으로 QR 코드 스캔하여 실행
yarn start

📦 프로젝트 구조

├── app/                    # Expo Router - 파일 기반 라우팅
│   ├── _layout.tsx        # 전역 레이아웃 및 네비게이션
│   └── index.tsx          # 홈 화면 (/ 경로)
├── src/
│   ├── components/        # 재사용 가능한 UI 컴포넌트
│   ├── hooks/            # 커스텀 React 훅
│   ├── utils/            # 유틸리티 함수
│   ├── types/            # TypeScript 타입/인터페이스 정의
│   ├── constants/        # 상수값
│   ├── lib/              # 외부 라이브러리 설정/래핑
│   ├── styles/           # 전역 스타일 (Layout, Text 등)
│   └── theme/            # 테마 설정
│       ├── colors.ts     # 색상 팔레트
│       ├── typography.ts # 폰트 설정
│       └── layout.ts     # 간격, 사이즈 등
└── assets/               # 이미지, 폰트 등 정적 리소스

🛠 주요 기술 스택

항목	기술
런타임	Expo 54.0
프레임워크	React 19.1, React Native 0.81
라우팅	Expo Router 6.0
언어	TypeScript 5.9
스타일링	React Native StyleSheet / 커스텀 테마
코드 품질	ESLint 9.0, Prettier 3.8

📋 코드 컨벤션

네이밍 규칙

• PascalCase: 컴포넌트, 타입/인터페이스, 클래스, enum
• camelCase: 변수, 함수, 훅, 스타일 객체 키
• kebab-case: 파일/폴더 이름 (선택)

📝 개발 워크플로우

브랜치

이슈번호-타입 (ex. 10-feat)

린트 및 포맷팅

# ESLint 실행
yarn lint

# Prettier 포맷팅 적용
yarn format

# 포맷팅 확인만 (수정 안 함)
yarn format:check

커밋 전에 반드시 yarn lint를 실행해주세요.