Directory 구조

작성중..

새 Directory가 필요할 경우 팀에 공유한 뒤 추가하시면 됩니다.

⚠️ 꼭 필요한 경우가 아니면 깊은 Directory 중첩을 피한다.

FrontEnd

📦client
 ┃ ┣ 📂.storybook       // 스토리북 전역 설정 파일
 ┃ ┣ 📂__tests__        // Jest 테스트 코드
 ┣ 📂cypress 
 ┃ ┣ 📂intergration     // cypress 테스트 코드
 ┃ ┣ 📂pulgins          // cypress 플러그인
 ┣ 📂public             
 ┃ ┣ 📂images           // 이미지 파일
 ┃ ┣ 📂fonts            // 글꼴 파일
 ┣ 📂src
 ┃ ┣ 📂components       // 페이지 하위 컴포넌트 (* 아래 components Rule 참조)
 ┃ ┃ ┣ 📂design         // 디자인 시스템 컴포넌트 (ex. Modal, DropDown)
 ┃ ┣ 📂hoc              // 고차 컴포넌트 (ex. Context)
 ┃ ┣ 📂hooks            // 커스텀 훅 ❗️상태에 영향을 받는 중복되는 로직을 커스텀 훅으로 분리한다. 파일 이름은 'use...'로 시작한다.
 ┃ ┣ 📂pages            // 페이지 루트 컴포넌트
 ┃ ┣ 📂recoil           // 상태 관리를 위한 atom, selector ❗️'user/atom.ts' or 'user/selector.ts'와 같이 도메인명의 하위 폴더에 파일을 생성한다.
 ┃ ┣ 📂services         // 외부 API 인터페이스 ❗️파일 이름은 '...API'로 끝난다.
 ┃ ┣ 📂stories          // 스토리북 파일 ❗️ 파일 이름은 'Button.stories.tsx'와 같은 형식으로 한다.
 ┃ ┣ 📂styles           // 공통으로 사용되는 스타일 (ex. 전역 스타일, theme 스타일)
 ┃ ┣ 📂types            // 재사용되는 타입 (ex. DTO) ❗️파일 이름은 'user.d.ts'와 같은 형식으로 한다.
 ┃ ┣ 📂utils            // 유틸 함수 ❗️상태에 영향을 받지 않는 로직은 유틸 함수로 분리한다.
 ┃ ┣ 📜App.tsx          // 페이지 라우팅 컴포넌트
 ┃ ┣ 📜index.tsx        // 렌더링 파일
 ┣ 📜.eslintrc.js       // eslint 설정 파일
 ┣ 📜.prettierrc        // prettier 설정 파일
 ┣ 📜cypress.json       // cypress 설정 파일    
 ┣ 📜tsconfig.json      // 타입스크립트 설정 파일
 ┣ 📜webpack.common.js  // 공통 웹팩 설정 파일
 ┣ 📜webpack.dev.js     // 개발 모드 웹팩 설정 파일
 ┣ 📜webpack.prod.js    // 배포 모드 웹팩 설정 파일

📂components Rule

📂components
┣ 📂design
┃ ┣ 📂Modal
┃ ┣ 📜index.tsx         // 함수 컴포넌트
┃ ┣ 📜style.ts          // styled-components
┣ 📂Profile
┃ ┣ 📜index.tsx         
┃ ┣ 📜style.ts         
┣ 📂Calendar
┃ ┣ 📜index.tsx        
┃ ┣ 📜style.ts       
  .
  .
  .

• 예기치 못하게 특정 컴포넌트를 재사용할 수 있으므로 Directory를 flat하게 관리한다.
• styled-components 스타일 로직을 분리한다. (아래 예시 코드 참고)

import * as s from './style';

...

return <s.Title />

BackEnd