Feat: 환경 설정 세팅

[nakyoung98]

📃 관련 이슈

Closes: #2

✨ 작업 내용

환경설정 구축

빌드 툴

• Vite

프레임워크

• React

언어

• TS

기타 라이브러리

• 전역 상태 관리: Zustand
• 비동기 상태 관리: React Query
• HTTP 라이브러리: Axios
• 코드 품질 관리 도구: ESLint, Prettier
• 폼 상태 관리: React Hook Form
• UI 라이브러리: Tailwind
• 페이지 라우팅: React Router

폴더 구조 정의

관련하여 folder structure rule로 lint 정의 완료

root
├── * (기타 설정 파일들)
└── src (소스 코드의 루트 디렉토리)
    ├── assets (이미지, 폰트 등 정적 자산 파일들)
    │   └── *
    ├── pages (페이지 단위의 컴포넌트들)
    │   └── {PascalCase}
    │       ├── {PascalCase}.tsx
    │       └── {PascalCase}.scss
    ├── layouts (레이아웃 관련 컴포넌트들)
    │   └── {PascalCase}
    │       ├── {PascalCase}.tsx
    │       └── {PascalCase}.scss
    ├── components (재사용 가능한 UI 컴포넌트들)
    │   └── {PascalCase}
    │       ├── {PascalCase}.tsx
    │       └── {PascalCase}.scss
    ├── apis (API 관련 로직)
    │   ├── api (API 엔드포인트 정의)
    │   │   └── {camelCase}.ts
    │   ├── services (API 호출 서비스)
    │   │   └── {camelCase}.ts
    │   ├── dtos (데이터 전송 객체 타입 정의)
    │   │   └── {camelCase}.ts
    │   └── axios.ts (Axios 인스턴스 및 설정)
    ├── stores (상태 관리 스토어)
    │   └── use{PascalCase}Store.ts
    ├── routes (라우팅 관련 로직)
    │   └── {camelCase}.ts
    ├── hooks (커스텀 React 훅)
    │   └── use{PascalCase}.ts
    ├── utils (유틸리티 함수들)
    │   └── {camelCase}.ts
    ├── types (타입 정의)
    │   └── {camelCase}.ts
    ├── constants (상수 정의)
    │   └── {camelCase}.ts
    ├── mocks (목업 데이터)
    │   └── {camelCase}.json
    ├── lib (Tailwind CSS 관련 설정)
    │   └── *
    ├── App.tsx (메인 App 컴포넌트)
    ├── main.tsx (애플리케이션 진입점)
    ├── index.css (전역 스타일)
    └── vite-env.d.ts (Vite 환경 타입 선언)

⚠️ 주의 사항

폴더 구조는 확정된 것이 아니며, 언제든지 변동될 수 있음

📚 문서화 계획

• [ ] 폴더 구조 wiki 업데이트

[github-actions[bot]]

올바른 PR 컨벤션

rebase에 대한 PR 컨벤션을 잘 준수하셨군요! 코드 작성하시느라 수고 많으셨습니다 :)