Skip to content

morib-in/Morib-Client

Repository files navigation

Morib ๋ชจ๋ฆฝ

โ˜บ๏ธ ์„œ๋น„์Šค ์ด๋ฆ„ ๋ฐ ์†Œ๊ฐœ

image

๋งˆ์Œ ๋จน์€ ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•œ ์ง‘์ค‘ ๊ณต๊ฐ„, ๋ชจ๋ฆฝ Morib
์ž‘์—…์— ํ•„์š”ํ•œ ์„œ๋น„์Šค๋ฅผ ๋“ฑ๋กํ•˜๊ณ  ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•˜๋ฉฐ, ๋“ฑ๋กํ•˜์ง€ ์•Š์€ ์„œ๋น„์Šค์— ์ ‘๊ทผํ•  ๊ฒฝ์šฐ ๊ฒฝ๊ณ  ์•Œ๋ฆผ ๋ฐ ํƒ€์ด๋จธ๋ฅผ ์ค‘์ง€ํ•ฉ๋‹ˆ๋‹ค. ์นœ๊ตฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ์„œ๋กœ์˜ ์ง‘์ค‘ํ˜„ํ™ฉ์„ ๋ณด๋ฉฐ ํ•จ๊ป˜ ๋™๊ธฐ๋ถ€์—ฌ ๋ฐ›๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.


โ˜บ๏ธ Morib Flow

image image image image image image image image image



๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿง‘๐Ÿปโ€๐Ÿ’ป Morib Web Developers


ํŒ€์› ์„œ๋Œ€์› ๋ฐ•์ƒ์•„ ๊น€๊ฑดํœ˜ ๊น€ํ•œ์„œ
ํŒ€์› ์†Œ๊ฐœ
์—ญํ• 

WEB FRONTEND

WEB FRONTEND

WEB FRONTEND

WEB FRONTEND



๐Ÿ›  ๊ธฐ์ˆ ์Šคํƒ

์—ญํ•  ์ข…๋ฅ˜
Library React VITE
Programming Language TypeScript
Styling Tailwind CSS
Data Fetching Axios ReactQuery
Formatting ESLint Prettier
Package Manager Pnpm
Version Control Git GitHub


๐Ÿ’ก ์ฃผ์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

  • "@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


๐ŸŽฑ ๋ชจ๋ฆฌ๋น„๋“ค์˜ ๊ณ ๋ฏผ ์•„์นด์ด๋น™

๐Ÿช„ ๋ชจ๋ฆฌ๋น„๋“ค์˜ ์•„ํ‹ฐํด ๐Ÿ’ฅ ๋ชจ๋ฆฌ๋น„๋“ค์˜ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ