마음 먹은 사람들을 위한 집중 공간, 모립 Morib
작업에 필요한 서비스를 등록하고 타이머를 설정하며, 등록하지 않은 서비스에 접근할 경우 경고 알림 및 타이머를 중지합니다. 친구를 추가하고 서로의 집중현황을 보며 함께 동기부여 받는 것을 목표로 합니다.
| 팀원 | 서대원  |
박상아 |
김건휘 |
김한서 |
|---|---|---|---|---|
| 팀원 소개 |  |
 |
 |
 |
| 역할 |
WEB FRONTEND |
WEB FRONTEND |
WEB FRONTEND |
WEB FRONTEND |
| 역할 | 종류 |
|---|---|
| Library |   |
| Programming Language |  |
| Styling |  |
| Data Fetching |   |
| Formatting |   |
| Package Manager |  |
| Version Control |   |
"@tanstack/react-query": "^5.49.2""tailwindcss": "^3.4.4""socket.io-client": "^4.7.5"
1️⃣ Commit 컨벤션
Commit Type
type: subject
type과 콜론 후 한칸 띄고 subject
Commit 메시지 종류 설명
| 제목 | 내용 |
|---|---|
| feat | 새로운 기능을 추가할 경우 |
| fix | 버그를 고친 경우 |
| chore | 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정 |
| docs | 문서 수정, 파일 삭제, 파일명 수정 등 |
| style | 기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋 |
| refactor | 프로덕션 코드 리팩토링 |
| code review | 코드 리뷰 반영 |
2️⃣ Branch 전략
GitHub-Flow전략 +develop- 브랜치 운영
feat/#이슈번호/이슈이름(camelCase): 기능을 개발하면서 각자가 사용할 브랜치main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 곳develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)feat/#issue/기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합fix/#issue/기능명: feature브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치
3️⃣ 코드리뷰 룰 - PN룰
뱅크샐러드에서 사용하고 있는 코드리뷰 룰인 PN룰을 사용해서 코드리뷰에서 필요한 커뮤니케이션 비용을 최소화하고자 했습니다.1️⃣ 폴더 구조
- 사용되는 파일을 가까이 모아서 배치
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
|-- 📁 assets
| |-- 📁 svgs
| |-- 📁 images
|-- 📁 apis
| |-- 📁 auth
| | |-- 📁axios
| | |-- 📁queries
| |-- 📁 common
| |-- 📁 home
| |-- 📁 modal
| |-- 📁 tasks
| |-- 📁 timer
|-- client.ts
|-- 📁 components
| |-- 📁 atoms (button , input 등 재사용의 가장 작은 요소)
| | |-- 📁 XXXBtn
| | |-- 📁 CalendarXXX
| | |-- 📁 CategoryXXX
| | |-- 📁 CategoryCommonXXX
| | |-- 📁 HomeXXX
| | |-- 📁 TimerXXX
| | |-- 📁 TodoXXX
| |-- 📁 molecules (atom을 모아 만든 카드, 리스트, 썸네일 등의 요소)
| | |-- 📁 Calendar
| | |-- 📁 CategoryXXX
| | |-- 📁 CategoryModalXXX
| | |-- 📁 Datepicker
| | |-- 📁 FriendInfoCarousel
| | |-- 📁 HomeXXX
| | |-- 📁 TimerXXX
| | |-- 📁 TodoXXX
| |-- 📁 templates (페이지를 만들기 위한 템플릿 - 페이지에서 요소들을 감싸서 사용)
| | |-- 📁 AddCategoryListModal
| | |-- 📁 CategoryModal
| | |-- 📁 HomePageWrapper
| | |-- 📁 LoginPageWrapper
| | |-- 📁 TimerPageTemplates
|-- 📁 pages
| |-- 📁 HomePage
| |-- 📁 LoginPage
| |-- 📁 RedirectPage
| |-- 📁 TimerPage
|-- 📁 constants
| |-- btnText.ts
| |-- router.ts
| |-- tabSelection.ts
|-- 📁 hocs
| |-- withAuthProtection.ts
|-- 📁 hooks (커스텀 훅을 담아두는 폴더)
| |-- useCalendar.ts
| |-- useCarouselTimer.ts
| |-- useClickOutside.ts
| |-- useCloseSideBar.ts
| |-- useCreateTodo.ts
| |-- useDatePicker.ts
| |-- useFriendInfoCarousel.ts
| |-- useFunnel.ts
| |-- useLottieAnimation.ts
| |-- useTimerCount.ts
| |-- useToggleSideBar.ts
| |-- useUrlHandler.ts
|-- 📁 mocks
| |-- categoryData.ts
| |-- faviconData.ts
| |-- homeData.ts
| |-- urlData.ts
| |-- userData.ts
| |-- userFriendData.ts
|-- 📁 stores
| |-- 📁 actions
| |-- 📁 atoms
|-- 📁 types
| |-- 📁 common
| |-- 📁 home
| |-- global.ts
| |-- todoData.ts
| |-- userData.ts
|-- 📁 utils ( 재사용이 높은 함수모음 폴더 )
| |-- 📁 calendar
| |-- 📁 date
| |-- 📁 homePage
| |-- 📁 isUrlValid
| |-- 📁 time
| |-- 📁 timer
| |-- 📁 token
|-- Router.tsx (라우터 파일)
|-- App.tsx
|-- index.css
|-- main.tsx
|--vite-env.d.ts
|-- .eslintrc.cjs
|-- .gitignore
|-- .prettierrc
|-- README.md
|-- index.html
|-- package.json
|-- pnpm-lock.yaml
|-- postcss.config.js
|-- tailwind.config.js
|-- tsconfig.app.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- vercel.json
|-- vite.config.ts
...2️⃣ Coding Conventions
- 확장자는
.tsx - 의미없는 div 또는 컴포넌트 최상단은 fragment 사용하기
- 외부 모듈과 내부 모듈을 구분지어 import 하기
- 다운로드 받은 패키지 모듈과 내부에서 만든 모듈을 구분에서 가져오기
- 변수/함수명은 20자 미만, 주석으로 변수 설명
- var 금지.
- 되도록
const를 사용하되 부득이한 경우let을 사용하도록 한다. - 상수는 영문 대문자 스네이크케이스 :
API_KEY. - 클래스 생성자 / 생성자 함수는 대문자 카멜 케이스를 생성한다.
- 변수명 : 이해할 수 있을 정도로 충분히 고민해보기
- 대부분의 경우 카멜 케이스 사용
- URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용
- 만약 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙인다.
- isActive 같이 is 키워드는 boolean에만 적용
- 전역 변수는 되도록 사용하지 않는다.
- 이벤트 핸들러명 :
handle로 시작하도록 한다. - 유틸함수는 반환값을 기준으로 이름 네이밍
- 중복함수는 utils 폴더에 모아서 재사용한다.
- 되도록 화살표 함수를 사용한다.
- 배열 복사시 → 스프레드 연산자(…) 사용
const copys = […originals]
- 배열과 객체는 리터럴로 선언
- 객체나 배열을 사용할 때, 되도록 불변성을 지키면서 작성
- spread 연산자나 lodash, immer 라이브러리 등을 활용할 것!
- 함수 표현식 대신 화살표 함수를 사용
- 객체의 프로퍼티에 접근할 때는 Destructuring을 이용
- 비교시에는
===와!==연산자만 사용
- 글로벌 스타일은
index.css에서 적용 - 최대한 시맨틱 태그 잘 활용하기
- svg 파일은 OOOIcon 으로 import 해서 사용
- 단위는 rem을 사용, 변경이 필요없는 (border관련) 속성만 px