Directory 구조

📦client ┣ 📂.storybook // 스토리북 전역 설정 파일 ┣ 📂cypress ┃ ┣ 📂fixtures // mock API json ┃ ┣ 📂intergration // cypress 테스트 코드 ❗️파일 이름은 'mypage.spec.ts'와 같은 형식으로 한다. ┃ ┣ 📂pulgins // cypress 플러그인 ┃ ┣ 📂support // cypress 커스텀 함수 ┣ 📂public ┃ ┣ 📂icons // 아이콘 파일 ┃ ┣ 📂images // 이미지 파일 ┃ ┣ 📂fonts // 글꼴 파일 ┣ 📂src ┃ ┣ 📂api // 외부 API 인터페이스 ❗️파일 이름은 '...API'로 끝난다. ┃ ┣ 📂components // 페이지 하위 컴포넌트 (* 아래 components Rule 참조) ┃ ┃ ┣ 📂design // 디자인 시스템 컴포넌트 (ex. Modal, DropDown) ┃ ┣ 📂constants ┃ ┃ ┣ 📜consts.ts // `const` 키워드 정의 상수 ┃ ┃ ┣ 📜enums.ts // `enum` 키워드 정의 상수 ┃ ┣ 📂hoc // 고차 컴포넌트 (ex. Context) ┃ ┣ 📂hooks // 커스텀 훅 ❗️상태에 영향을 받는 중복되는 로직을 커스텀 훅으로 분리한다. 파일 이름은 'use...'로 시작한다. ┃ ┣ 📂pages // 페이지 루트 컴포넌트 ❗️파일 이름은 '...Page'로 끝난다. ┃ ┣ 📂services // 공통으로 사용되는 모듈 (ex. 로컬/세션 스토리지 관리 모듈) ┃ ┣ 📂stores // zusthand store ❗️파일 이름은 '...Store'로 끝난다. ┃ ┣ 📂stories // 스토리북 파일 ❗️ 파일 이름은 'Button.stories.tsx'와 같은 형식으로 한다. ┃ ┣ 📂styles // 공통으로 사용되는 스타일 (ex. 전역 스타일, theme 스타일) ┃ ┣ 📂types // 재사용되는 타입 (ex. DTO) ❗️파일 이름은 'user.d.ts'와 같은 형식으로 한다. ┃ ┣ 📂utils // 유틸 함수 ❗️상태에 영향을 받지 않는 로직은 유틸 함수로 분리한다. 즉, “동일한 입력"에 대해서는 “동일한 출력”을 내는 순수 함수를 말한다. ┃ ┃ ┣ 📂test // jest 테스트 코드 ❗️파일 이름은 'getCurrentTime.spec.ts'와 같은 형식으로 한다. ┃ ┣ 📜App.tsx // 페이지 라우팅 컴포넌트 ┃ ┣ 📜index.tsx // 렌더링 파일 ┣ 📜.eslintrc.js // eslint 설정 파일 ┣ 📜cypress.json // cypress 설정 파일 ┣ 📜tsconfig.json // 타입스크립트 설정 파일 ┣ 📜webpack.common.js // 공통 웹팩 설정 파일 ┣ 📜webpack.dev.js // 개발 모드 웹팩 설정 파일 ┣ 📜webpack.prod.js // 배포 모드 웹팩 설정 파일

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

import * as s from './style'; ... return <s.Title />

📦server ├── 📂src │ ├── 📂alarms // alarms 테이블에 관한 API들,❗️nest.js generator를 통해 생성 │ │ └── 📂entities │ │ └── 📜alram.entity.ts │ ├── 📂config │ │ └── 📜typeorm.config.ts // DB 접속을 위한 설정 │ ├── 📂exception │ │ ├── 📜http-error.ts // Nest.js에서 제공하는 에러 이외에 custom http error를 내기 위함 │ │ └── 📜http-exception.filter.ts // 전역 에러 형식(탬플릿) 지정 │ ├── 📂exercises // exercises 테이블에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂dto // `POST`를 통해 DB로 들어가는 값들의 타입 검증 │ │ ├── 📂entities │ │ │ └── 📜exercise.entity.ts │ ├── 📂follows // follows 테이블에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂entities │ │ │ └── 📜follow.entity.ts │ ├── 📂oauth // oauth에 관한 API들, 추후에 google 이외에도 추가될 가능성을 고려해 제작 │ │ ├── 📂google-oauth // google oauth에 관한 API들,❗️nest.js generator를 통해 생성 │ │ │ ├── 📂dto // `POST`를 통해 DB로 들어가는 값들의 타입 검증 │ │ └── 📂jwt │ │ │ └── 📜jwt.strategy.ts // jwt 쿠키 발행 및 검증 │ ├── 📂routines // routines에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂dto // `POST`를 통해 DB로 들어가는 값들의 타입 검증 │ │ ├── 📂entities │ │ │ └── 📜routine.entity.ts │ ├── 📂sbd_records // sbd_records에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂dto // `POST`를 통해 DB로 들어가는 값들의 타입 검증 │ │ ├── 📂entities │ │ │ └── 📜sbd_record.entity.ts │ ├── 📂sbd_statistics // sbd_statistics에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂entities │ │ │ └── 📜sbd_statistics.entity.ts │ ├── 📂types // 커스텀 타입, 파일 이름은 'request.d.ts'와 같은 형식으로 한다. │ ├── 📂users // users에 관한 API들,❗️nest.js generator를 통해 생성 │ │ ├── 📂dto // `POST`를 통해 DB로 들어가는 값들의 타입 검증 │ │ ├── 📂entities │ │ │ └── 📜user.entity.ts │ ├── 📂utils // 백엔드에서 전체적으로 자주 쓰이는 것들을 모듈화해 분리하는 곳 │ │ └── 📜env.ts │ ├── 📜app.module.ts // 구현한 기능들을 import 하는 곳 │ └── 📜main.ts // 서버가 실행되는 곳, 각종 서버 설정과 filter(pipeline)를 설정하는 곳 ├── 📂test // e2e 테스트 코드 작성하는 곳 ├── 📜README.md ├── 📜nest-cli.json // nest.js cli 사용을 위함 ├── 📜package-lock.json ├── 📜package.json ├── 📜tsconfig.build.json └── 📜tsconfig.json // 타입스크립트 설정 파일