Momentory Frontend

추억을 순간순간 기록하고 공유하는 위치 기반 사진 SNS 플랫폼

🔗momentory

🖼️ 프로젝트 소개

Momentory는 사진을 통해 추억을 기록하고, 지역 기반 스탬프를 수집하며, 캐릭터를 성장시키는 소셜 플랫폼입니다. 사용자는 여행지에서 찍은 사진을 업로드하고, 지역 스탬프와 문화 스탬프를 수집하며, 포인트를 획득하여 캐릭터를 꾸밀 수 있습니다.

🛠️ 기술 스택

• React 19 + TypeScript + Vite
• Zustand - 전역 상태 관리
• TanStack Query - 서버 상태 관리
• React Router DOM - 라우팅
• Tailwind CSS - 스타일링
• Axios - API 요청
• STOMP.js + SockJS - 실시간 통신

📍설치 및 실행

# 의존성 설치
pnpm install

# 개발 서버 실행
pnpm run dev

📁 프로젝트 구조

src/
├── api/              # API 요청 함수
├── assets/           # 정적 리소스 (이미지, 폰트 등)
├── components/       # 재사용 가능한 컴포넌트
├── config/           # 설정 파일
├── hooks/            # 커스텀 React 훅
├── layouts/          # 레이아웃 컴포넌트
├── lib/              # 외부 라이브러리 설정
├── pages/            # 페이지 컴포넌트
│   ├── album-page/
│   ├── Auth/
│   ├── character-page/
│   ├── community-page/
│   ├── home-page/
│   ├── map-page/
│   ├── notification-page/
│   ├── photo-edit-page/
│   ├── photo-upload-page/
│   ├── profile-page/
│   ├── roulette-page/
│   ├── settings-page/
│   ├── share-page/
│   ├── shop-page/
│   ├── stamp-page/
│   └── travel-page/
├── routes/           # 라우팅 설정
├── stores/           # Zustand 상태 관리
├── types/            # TypeScript 타입 정의
└── utils/            # 유틸리티 함수