본 프로젝트는 사이트 기획과 디자인 기간 단축을 위해 클론코딩으로 이루어져 있으며 다음과 같은 기술들을 사용합니다.
- 개발 언어 : Typescript & React
- 개발 환경 : Next.js 14
- UI 스타일링 : emotion & SCSS
- 컴포넌트 관리 : Storybook
- library : react-hook-form, mutarial-ui(skeleton)
- 클라이언트 상태관리 : zustand
- 서버 상태관리 : React Query
- 사용 DB : Firebase
- API : Next.js Api Route
- 테스트 : Jest + RTL
- e2e 테스트 : cypress (진행중)
- 형상관리 : github
- 배포 : vercel
📦 src
├── 📂 test # jest로 만들어진 테스트 코드가 있습니다. (e2e 테스트를 제외한 테스트가 이루어집니다)
├── 📂 apis # API 요청을 보내는 코드입니다
│ ├── 📄 api handler # api 요청을 하는 handler 입니다.
│ ├── 📄 mutation # api요청을 관리하고 onSuccess와 onError를 담당합니다.
│ └── 📄 query hook # react-query의 useQuery를 hook으로 만들어 사용합니다.
├── 📂 asset # 공용으로 사용하는 css와 scss 등이 있습니다.
├── 📂 app # 프로젝트의 Page가 있는 곳 입니다.
│ ├── 📂 @modal #page를 모달 팝업으로 사용 할 수 있도록 하는 인터셉팅 라우팅 역할을 합니다
│ ├── 📂 api # API route가 저장된 곳 입니다.
│ │ ├── 📄 route.ts # api 요청에 대한 response를 return 합니다
│ ├── 📂 page # 각 페이지의 파일이 있습니다
│ │ ├── 📄 page.tsx # react-query의 prefetch를 담당하는 서버컴포넌트와 seo 함수가 있습니다.
│ │ ├── 📄 Client.tsx # 파일에 useClient가 선언되며 파일의 전반적인 UI와 함수로직이 존재합니다.
│ │ ├── 📄 style.(scss || ts) # page의 스타일을 구성하는 scss 파일 입니다.
│ │ ├── 📂 useActions # 페이지의 Hook이 저장된 곳 입니다.
│ │ ├── 📂 components # 페이지의 component가 저장된 곳 입니다.
├── 📂 components # 프로젝트에서 공용으로 사용하는 components를 저장하는 곳 입니다.
│ ├── 📂 atoms # 가장 작은 단계의 공용 컴포넌트를 저장하는 곳 입니다.
│ │ ├── 📂 (component) # input,checkbox,button,popup,,image 등이 존재합니다.
│ │ │ ├── 📄 component.tsx
│ │ │ ├── 📄 component.stories.tsx
│ │ │ ├── 📄 style.ts # component의 스타일을 구성하는 emotion 파일 입니다.
├── 📂 lib # 라이브러리에 관련된 파일을 저장하는 곳 입니다.
├── 📂 provider #Provider 파일을 저장하는 곳 입니다.
├── 📂 static # 정적 파일 (상수로 선언되는 변수들을 저장하는 곳 입니다)
├── 📂 store # 클라이언트로 사용되는 상태를 전역으로 관리 하는 곳 입니다.
├── 📂 utils # 유틸리티 함수를 저장하는 곳 입니다.
└── 📄 middleware.ts # Next.js 자체 middleware로 로그인 토큰 쿠키에 존재 여부에 따라 redirect를 담당합니다.
- 로그인/회원가입/SNS로그인/비밀번호 찾기
- 게시글 노출/게시글 검색/게시글 작성/댓글작성/좋아요 기능
- 게시글 수정&삭제/이미지추가&수정&삭제
- 마이페이지,내 작성글 보기
- 프로필변경/닉네임변경/회원탈퇴
- 아이템 구매 & 사용