React With Park

🚀 실행 방법

필수 요구사항

• Node.js 18+

설치 및 실행

1. 의존성 설치

   yarn install

2. 환경 변수 설정

   프로젝트 루트에 .env 파일을 생성하고 환경변수를 설정

   # API 서버 URL
   VITE_SERVER_URL=

3. 개발 서버 실행

   yarn dev

   브라우저에서 http://localhost:5173으로 접속

   
   
   

📁 프로젝트 폴더 구조

react_withpark/
├── public/                   # 정적 파일
│   └── favicon.ico           # 파비콘
├── src/                      # 소스 코드
│   ├── api/                  # API 관련
│   │   ├── queries/          # React Query 쿼리 함수들
│   │   ├── mutations/        # React Query 뮤테이션 함수들  
│   │   ├── utils/            # API 유틸리티 함수들
│   │   ├── fetcher.ts        # HTTP 클라이언트 설정 (ky)
│   │   └── QueryClientProvider.tsx # React Query 프로바이더
│   ├── assets/               # 에셋 폴더 (이미지, 아이콘 등)
│   ├── constants/            # 상수 정의
│   ├── hooks/                # 커스텀 훅
│   │   ├── useDialog.ts      # 다이얼로그 상태 관리 훅
│   │   ├── useAuthAtom.ts    # 인증 상태 Jotai 훅
│   │   └── useLocalStorage.ts # 로컬스토리지 관리 훅
│   ├── pages/                # 페이지 컴포넌트
│   │   ├── CommunityPage/    # 커뮤니티 페이지
│   │   ├── DashboardPage/    # 대시보드 페이지
│   │   ├── GamePage/         # 게임 페이지
│   │   ├── IntroPage/        # 소개 페이지
│   │   ├── LoginPage/        # 로그인 페이지
│   │   ├── OAuth/            # OAuth 인증 관련
│   │   ├── OnboardingPage/   # 온보딩 페이지
│   │   ├── PlaceDetailPage/  # 장소 상세 페이지
│   │   ├── PlacePage/        # 장소 목록 페이지
│   │   ├── PostDetailPage/   # 게시물 상세 페이지
│   │   ├── SettingPage/      # 설정 페이지
│   │   └── index.ts          # 페이지 컴포넌트 익스포트
│   ├── routes/               # 라우팅 설정
│   ├── types/                # TypeScript 타입 정의
│   ├── ui/                   # UI 컴포넌트
│   │   ├── components/       # 재사용 가능한 UI 컴포넌트들
│   │   └── assets/           # UI 관련 자산들
│   ├── App.tsx               # 루트 컴포넌트
│   ├── index.css             # 글로벌 스타일
│   ├── main.tsx              # 앱 진입점
│   └── vite-env.d.ts         # Vite 타입 정의
├── .gitignore                # Git 무시 파일 목록
├── .yarnrc.yml              # Yarn Berry 설정
├── eslint.config.js         # ESLint 설정
├── index.html               # HTML 템플릿
├── package.json             # 패키지 의존성 및 스크립트
├── tsconfig.json            # TypeScript 설정
├── vercel.json              # Vercel 배포 설정
├── vite.config.ts           # Vite 설정
└── README.md                # 프로젝트 문서

🛠 사용 기술

프론트엔드

기술	목적	버전
React	UI 라이브러리	^18.3.1
TypeScript	타입 안전성	^5.5.3
Vite	빌드 도구	^6.3.5
React Router	라우팅	^7.6.0

상태관리 & 데이터 페칭

기술	목적	버전
Jotai	클라이언트 상태 관리	^2.12.5
TanStack Query	서버 상태 관리	^5.76.1
ky	HTTP 클라이언트	^1.8.1

스타일링 & 애니메이션

기술	목적	버전
Emotion	CSS-in-JS	^11.14.0
Framer Motion	애니메이션	^12.15.0

유틸리티

기술	목적	버전
Day.js	날짜 처리	^1.11.13
nanoid	고유 ID 생성	^5.1.5
async-mutex	비동기 동기화	^0.5.0

개발 도구

기술	목적	버전
ESLint	정적 분석	^9.9.0
Prettier	코드 포맷터	^3.5.3
Yarn Berry	패키지 매니저	4.9.1

배포

기술	목적	버전
Vercel	배포 플랫폼