Morib 모립

☺️ 서비스 이름 및 소개

마음 먹은 사람들을 위한 집중 공간, 모립 Morib
작업에 필요한 서비스를 등록하고 타이머를 설정하며, 등록하지 않은 서비스에 접근할 경우 경고 알림 및 타이머를 중지합니다. 친구를 추가하고 서로의 집중현황을 보며 함께 동기부여 받는 것을 목표로 합니다.

---

☺️ Morib Flow

---

👩🏻‍💻🧑🏻‍💻 Morib Web Developers

팀원	서대원	박상아	김건휘	김한서
팀원 소개
역할	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"
  

✍🏻 컨벤션

📏 컨벤션 노션 링크

✨ Git 컨벤션

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룰을 사용해서 코드리뷰에서 필요한 커뮤니케이션 비용을 최소화하고자 했습니다.

✨ Project 컨벤션

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

1. 컴포넌트

• 확장자는 .tsx
• 의미없는 div 또는 컴포넌트 최상단은 fragment 사용하기
• 외부 모듈과 내부 모듈을 구분지어 import 하기
  • 다운로드 받은 패키지 모듈과 내부에서 만든 모듈을 구분에서 가져오기

2. 변수, 함수

• 변수/함수명은 20자 미만, 주석으로 변수 설명
• var 금지.
• 되도록 const를 사용하되 부득이한 경우 let을 사용하도록 한다.
• 상수는 영문 대문자 스네이크케이스 : API_KEY.
• 클래스 생성자 / 생성자 함수는 대문자 카멜 케이스를 생성한다.
• 변수명 : 이해할 수 있을 정도로 충분히 고민해보기
  • 대부분의 경우 카멜 케이스 사용
  • URL, HTML 같은 범용적인 대문자 약어는 대문자 그대로 사용
• 만약 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙인다.
  • isActive 같이 is 키워드는 boolean에만 적용
• 전역 변수는 되도록 사용하지 않는다.

3. 함수

• 이벤트 핸들러명 : handle로 시작하도록 한다.
• 유틸함수는 반환값을 기준으로 이름 네이밍
• 중복함수는 utils 폴더에 모아서 재사용한다.
• 되도록 화살표 함수를 사용한다.

4. 메소드

• 배열 복사시 → 스프레드 연산자(…) 사용
  • const copys = […originals]
• 배열과 객체는 리터럴로 선언
• 객체나 배열을 사용할 때, 되도록 불변성을 지키면서 작성
  • spread 연산자나 lodash, immer 라이브러리 등을 활용할 것!
• 함수 표현식 대신 화살표 함수를 사용
• 객체의 프로퍼티에 접근할 때는 Destructuring을 이용
• 비교시에는 ===와 !== 연산자만 사용

5. Style

• 글로벌 스타일은 index.css에서 적용
• 최대한 시맨틱 태그 잘 활용하기
• svg 파일은 OOOIcon 으로 import 해서 사용
• 단위는 rem을 사용, 변경이 필요없는 (border관련) 속성만 px

---

🎱 모리비들의 고민 아카이빙

🪄 모리비들의 아티클	💥 모리비들의 트러블 슈팅
대원이의 react-query 도입 근거와 간단 사용법 건휘의 Polling vs WebSocket 상아의 tailwind CSS 건휘의 Socket.IO 정리 한서의 초기세팅 -ESLint, Prettier, tsconfig	Typescript Complier가 JSX 구문 인식 못하는 오류 pnpm router type을 추론을 못하는 문제 prettier 플러그인 로딩순서에 따라 적용이 안되는 문제 운영체제간 차이로 git pull / push 가 안 받아진다?! datepicker 라이브러리에서 날짜 사이 간격에 배경색 적용이 되지 않을 때 animation 사이드바가 영역 바깥쪽에서 등장하고 닫히는 문제 useQuery 계속해서 쿼리가 불러와지는 이슈 발생 SVG가 화면에 안 뜨는 이슈… svg 호버 색 변경하는 법 tailwind css로 부모 속성 hover시 부모 속성과 자식 속성 동시에 다른 효과 주기