Environment

• Node.js: v20.19.5 (recommended 20.x)
• Yarn: 4.10.3

로컬 개발서버시작

yarn install
yarn dev

yarn berry 사용으로 인한 import lint에러 관련 설정

yarn dlx @yarnpkg/sdks vscode

위 명령어 후 shift + ctrl(command) + p > Select typescript Version > Use Workspace verion 설정

주요 사용 라이브러리

• vite
• emotion
• zustand
• react-query
• lodash
• js-cookie
• vite-plugin-svgr

i) svg 파일은 asset 에 두고 컴포넌트형식으로 import 해서 사용

폴더구조

src/
├── components/           # 재사용 가능한 컴포넌트
│   ├── commons/         # 공통 컴포넌트
│   ├── layouts/         # 레이아웃 컴포넌트
│   └── parts/           # 페이지별 특화 컴포넌트
├── constants/           # 상수 정의
├── hocs/               # Higher-Order Components
├── hooks/              # 커스텀 훅
├── pages/              # 페이지 컴포넌트
├── store/              # 상태 관리 (Zustand)
├── styles/             # 스타일 관련 파일
├── types/              # TypeScript 타입 정의
│   ├── globals/        # 전역 타입
│   ├── interfaces/     # 인터페이스 정의
│   └── types/          # 타입 정의
├── utils/              # 유틸리티 함수
├── assets/             # 정적 자산
│   ├── fonts/          # 폰트 파일
│   └── icons/          # 아이콘 파일
├── App.tsx             # 메인 앱 컴포넌트
└── main.tsx            # 앱 진입점

public/
├── font/               # 공개 폰트
├── icon/               # 공개 아이콘
├── illustration/       # 일러스트레이션
├── logo/               # 로고 파일
└── project/            # 프로젝트 관련 이미지