SEMOSAN - 세모산

등산이 처음이어도 괜찮아요. 내 체력과 취향에 맞는 코스를 찾고, 실시간 안내와 기록, 후기까지 더 가볍고 안전한 등산을 세모산과 함께 시작하세요.

주요 기능

정복 지도 사용자의 등산 기록과 정복한 산 데이터 제공	세모피드 등산 후기 피드	산 목록 산/코스 조회, 거리, 고도, 소요 시간 데이터 제공
실시간 GPS 트래킹 WebSocket 기반 위치 수집 및 트래킹 세션 관리	커뮤니티 게시글, 댓글, 좋아요, 신고, 차단 기능 제공	마이페이지 회원 정보, 등산 이력, 난이도 피드백 관리

기술 스택

Frontend

• React Native + Expo (expo-router 파일 기반 라우팅)
• NativeWind v4 — Tailwind CSS 유틸리티 클래스
• TanStack Query — 서버 상태 관리 및 캐싱
• Zustand — 클라이언트 상태 관리
• React Native Reanimated + Gesture Handler — 애니메이션 및 제스처

지도 & 위치

• Naver Map (@mj-studio/react-native-naver-map)
• expo-location — 백그라운드 GPS 추적
• expo-task-manager — 백그라운드 위치 태스크

알림 & 실시간

• Firebase FCM (@react-native-firebase/messaging) — 마일스톤 푸시 알림
• STOMP WebSocket (@stomp/stompjs) — 실시간 GPS 데이터 전송

인증

• 카카오 로그인 (@react-native-kakao)
• Apple 로그인 (expo-apple-authentication)

디자인 시스템

• Tokens Studio (Figma) → Style Dictionary v5 빌드 파이프라인
• 시맨틱 디자인 토큰 기반 컬러·타이포그래피

프로젝트 구조

app/
  (tabs)/           # 탭 화면 (홈, 탐색, 트래킹, 커뮤니티, 마이페이지)
  _layout.tsx       # 루트 레이아웃
features/           # 기능 단위 모듈
  auth/             # 로그인·인증
  tracking/         # GPS 트래킹 (핵심 기능)
  mountains/        # 산 탐색
  community/        # 커뮤니티
  mypage/           # 마이페이지
  home/             # 홈
components/         # 공통 UI 컴포넌트
tokens/             # Figma 디자인 토큰 (수정 금지)

시작하기

요구사항

• Node.js 18+
• Xcode (iOS 빌드)
• Expo CLI

설치

git clone https://github.com/SEMOSAN/SEMOSAN_FE.git
cd SEMOSAN_FE
npm run expo-install

개발 서버 실행

npm start

디자인 토큰 재빌드 (Figma 토큰 변경 후)

npm run tokens

개발 규칙

• 스타일은 반드시 className (NativeWind) 사용 — StyleSheet / 인라인 스타일 지양
• 토큰으로 정의된 값은 Tailwind 클래스로 참조 (hex 하드코딩 금지)
• tokens/, tokens.cjs, css/ 자동 생성 파일 직접 수정 금지