/Menu-Management-App

๐Ÿ˜Š๋ฌธ๋ฒ…์Šค ์นดํŽ˜ ๋ฉ”๋‰ด ์•ฑ ๋“œ๋ฆด๐Ÿ˜Š

Primary LanguageTypeScriptMIT LicenseMIT

๐Ÿ˜Š๋ฌธ๋ฒ…์Šค ์นดํŽ˜ ๋ฉ”๋‰ด ์•ฑ ๋“œ๋ฆด๐Ÿ˜Š

๊ธฐ์ดˆ๊นŒ์ง€ ๋šซ์–ด๋ณด๊ณ  ์ฒœ์žฅ๊นŒ์ง€ ์Œ“์•„๋ณด์žโœ๏ธ


๐Ÿ’ป ์‚ฌ์šฉ๋ฒ•

lerna์™€ yarn์ด ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!


โœ”๏ธ ํ•„์ˆ˜ ์š”์†Œ ์„ค์น˜

# lerna๋ฅผ globalํ•˜๊ฒŒ ์„ค์น˜
npm install -g lerna

# yarn์„ globalํ•˜๊ฒŒ ์„ค์น˜
npm install -g yarn

โœ”๏ธ ํ”„๋กœ์ ํŠธ ํด๋ก  & ์ข…์†์„ฑ ์„ค์น˜

# cloning project
git clone https://github.com/FECrash/Menu-Management-App.git

# move to project
cd Menu-Management-App

# installation
yarn bootstrap

โœ”๏ธ ์‹œ์ž‘ํ•˜๊ธฐ

# build
yarn @id:build
# test
yarn @id:test
# front start
yarn @id:front
# backend & frontend start
yarn @id:start
  • ์˜ˆ์‹œ : ํ”„๋กœ์ ํŠธ๋ช…์€ ์ž๋™์œผ๋กœ ์†Œ๋ฌธ์ž ์น˜ํ™˜๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋Œ€๋ฌธ์ž๋ฅผ ๋ฐ˜๋“œ์‹œ ์†Œ๋ฌธ์ž๋กœ ๋ฐ”๊พธ๊ณ  ์ง„ํ–‰ํ•ด์ฃผ์„ธ์š”.
    yarn inseong-so:build
    yarn inseong-so:test
    yarn inseong-so:front
    yarn inseong-so:start

๐Ÿ”จ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์‚ด์•„์žˆ์„ ๋•Œ

yarn taskkill


โœ” ๊ฐœ์š”

ํ”„๋ก ํŠธ์—”๋“œ ๋“œ๋ฆด ๋‹ค์šด(Front-end Drill Down)

๊ธฐ๋ณธ๊ธฐ์— ์ถฉ์‹คํ•ด์ง€๊ธฐ ์œ„ํ•ด ๋™์ผํ•œ ํ™˜๊ฒฝ์—์„œ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ์•ฑ์„ ๊ตฌํ˜„ํ•˜๋Š” ์ €์žฅ์†Œ์ž…๋‹ˆ๋‹ค.

  • ์–ธ์–ด : JavaScript / Typescript
  • ํ…Œ์ŠคํŠธ : Jest / Cypress
  • ๋นŒ๋” : Webpack / Vite
  • ์Šคํƒ€์ผ : CSS / Sass / CSS in JS



๐Ÿ“น์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ ๋ฒ…์Šค ์š”๊ตฌ์‚ฌํ•ญ, ์ž์„ธํžˆ๋ณด๊ธฐ!!๐Ÿ‘ˆ

JS ๋ฌธ๋ฒ…์Šค ์นดํŽ˜๋ฉ”๋‰ด ์•ฑ

Vanilla JS๋กœ ๊ตฌํ˜„ ํ•˜๋Š” ์ƒํƒœ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์นดํŽ˜๋ฉ”๋‰ด ์•ฑ

template version


โ˜•๏ธ ์ฝ”๋“œ๋ฆฌ๋ทฐ ๋ชจ์ž„ - Black Coffee


'ํ›Œ๋ฅญํ•œ ์˜์‚ฌ์†Œํ†ต์€ ๋ธ”๋ž™์ปคํ”ผ์ฒ˜๋Ÿผ ์ž๊ทน์ ์ด๋ฉฐ, ํ›„์— ์ž ๋“ค๊ธฐ๊ฐ€ ์–ด๋ ต๋‹ค'.
A.M. ๋ฆฐ๋“œ๋ฒ„๊ทธ(๋ฏธ๊ตญ์˜ ์ž‘๊ฐ€, ์ˆ˜ํ•„๊ฐ€) -


๋ธ”๋ž™์ปคํ”ผ์ฒ˜๋Ÿผ ์„œ๋กœ๋ฅผ ์ž๊ทนํ•ด์ฃผ๊ณ , ๋™๊ธฐ๋ถ€์—ฌ ํ•ด์ฃผ๋ฉฐ, ๊ทธ ์„ฑ์žฅ๊ณผ์ •์œผ๋กœ ์ธํ•ด ์˜๋ฏธ์žˆ๋Š” ๊ฐ€์น˜๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๊ณ ์ž ํ•˜๋Š”
๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ โ˜•๏ธ Black Coffee์ž…๋‹ˆ๋‹ค.


๐Ÿ”ฅ Projects!

๐Ÿ–ฅ๏ธ ๋ฐ๋ชจ ๋งํฌ


๐ŸŽฏ step1 ์š”๊ตฌ์‚ฌํ•ญ - ๋” ์กฐ์ž‘๊ณผ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋ง์œผ๋กœ ๋ฉ”๋‰ด ๊ด€๋ฆฌํ•˜๊ธฐ

  • ์—์Šคํ”„๋ ˆ์†Œ ๋ฉ”๋‰ด์— ์ƒˆ๋กœ์šด ๋ฉ”๋‰ด๋ฅผ ํ™•์ธ ๋ฒ„ํŠผ ๋˜๋Š” ์—”ํ„ฐํ‚ค ์ž…๋ ฅ์œผ๋กœ ์ถ”๊ฐ€ํ•œ๋‹ค.
    • ๋ฉ”๋‰ด๊ฐ€ ์ถ”๊ฐ€๋˜๊ณ  ๋‚˜๋ฉด, input์€ ๋นˆ ๊ฐ’์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค.
    • ์‚ฌ์šฉ์ž ์ž…๋ ฅ๊ฐ’์ด ๋นˆ ๊ฐ’์ด๋ผ๋ฉด ์ถ”๊ฐ€๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ๋ฉ”๋‰ด์˜ ์ˆ˜์ • ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋ฉ”๋‰ด ์ด๋ฆ„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ฉ”๋‰ด ์ˆ˜์ •์‹œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” prompt ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ™œ์šฉํ•œ๋‹ค.
  • ๋ฉ”๋‰ด ์‚ญ์ œ ๋ฒ„ํŠผ์„ ์ด์šฉํ•˜์—ฌ ๋ฉ”๋‰ด ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ๋ฉ”๋‰ด ์‚ญ์ œ์‹œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” confirm ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํ™œ์šฉํ•œ๋‹ค.
  • ์ด ๋ฉ”๋‰ด ๊ฐฏ์ˆ˜๋ฅผ countํ•˜์—ฌ ์ƒ๋‹จ์— ๋ณด์—ฌ์ค€๋‹ค.
  • ์ถ”๊ฐ€๋˜๋Š” ๋ฉ”๋‰ด์˜ ์•„๋ž˜ ๋งˆํฌ์—…์€ <ul id="espresso-menu-list" class="mt-3 pl-0"></ul> ์•ˆ์— ์‚ฝ์ž…ํ•ด์•ผ ํ•œ๋‹ค.
<li class="menu-list-item d-flex items-center py-2">
  <span class="w-100 pl-2 menu-name">${name}</span>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
  >
    ์ˆ˜์ •
  </button>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
  >
    ์‚ญ์ œ
  </button>
</li>

๐ŸŽฏ step2 ์š”๊ตฌ์‚ฌํ•ญ - ์ƒํƒœ ๊ด€๋ฆฌ๋กœ ๋ฉ”๋‰ด ๊ด€๋ฆฌํ•˜๊ธฐ

  • localStorage์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜์—ฌ ์ƒˆ๋กœ๊ณ ์นจํ•ด๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‚จ์•„์žˆ๊ฒŒ ํ•œ๋‹ค.
  • ์—์Šคํ”„๋ ˆ์†Œ, ํ”„๋ผํ‘ธ์น˜๋…ธ, ๋ธ”๋ Œ๋””๋“œ, ํ‹ฐ๋ฐ”๋‚˜, ๋””์ €ํŠธ ๊ฐ๊ฐ์˜ ์ข…๋ฅ˜๋ณ„๋กœ ๋ฉ”๋‰ดํŒ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ ๋‹ค.
    • ํŽ˜์ด์ง€์— ์ตœ์ดˆ๋กœ ์ ‘๊ทผํ•  ๋•Œ๋Š” ์—์Šคํ”„๋ ˆ์†Œ ๋ฉ”๋‰ด๊ฐ€ ๋จผ์ € ๋ณด์ด๊ฒŒ ํ•œ๋‹ค.
  • ํ’ˆ์ ˆ ์ƒํƒœ์ธ ๊ฒฝ์šฐ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๊ฒŒ, ํ’ˆ์ ˆ ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•˜๊ณ  sold-out class๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค.
  • ํ’ˆ์ ˆ ์ƒํƒœ ๋ฉ”๋‰ด์˜ ๋งˆํฌ์—…
<li class="menu-list-item d-flex items-center py-2">
  <span class="w-100 pl-2 menu-name sold-out">${name}</span>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
  >
    ํ’ˆ์ ˆ
  </button>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
  >
    ์ˆ˜์ •
  </button>
  <button
    type="button"
    class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
  >
    ์‚ญ์ œ
  </button>
</li>

๐ŸŽฏ step3 ์š”๊ตฌ์‚ฌํ•ญ - ์„œ๋ฒ„์™€์˜ ํ†ต์‹ ์„ ํ†ตํ•ด ๋ฉ”๋‰ด ๊ด€๋ฆฌํ•˜๊ธฐ

  • ๋งํฌ์— ์žˆ๋Š” ์›น ์„œ๋ฒ„ ์ €์žฅ์†Œ๋ฅผ cloneํ•˜์—ฌ ๋กœ์ปฌ์—์„œ ์›น ์„œ๋ฒ„๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค.
  • ์›น ์„œ๋ฒ„๋ฅผ ๋„์›Œ์„œ ์‹ค์ œ ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ์˜ ๋ณ€๊ฒฝ์„ ์ €์žฅํ•˜๋Š” ํ˜•ํƒœ๋กœ ๋ฆฌํŒฉํ„ฐ๋งํ•œ๋‹ค.
    • localStorage์— ์ €์žฅํ•˜๋Š” ๋กœ์ง์€ ์ง€์šด๋‹ค.
    • fetch ๋น„๋™๊ธฐ api๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์„ async await์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•œ๋‹ค.
    • API ํ†ต์‹ ์ด ์‹คํŒจํ•˜๋Š” ๊ฒฝ์šฐ์— ๋Œ€ํ•ด ์‚ฌ์šฉ์ž๊ฐ€ ์•Œ ์ˆ˜ ์žˆ๊ฒŒ alert์œผ๋กœ ์˜ˆ์™ธ์ฒ˜๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค.
  • ์ค‘๋ณต๋˜๋Š” ๋ฉ”๋‰ด๋Š” ์ถ”๊ฐ€ํ•  ์ˆ˜ ์—†๋‹ค.

๐Ÿ“ API

baseUrl

http://localhost:3000

๋ฉ”๋‰ด ์ƒ์„ฑํ•˜๊ธฐ

method uri
POST /api/category/:category/menu
{
 requestBody: {
   "name": "string"
 },
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

์นดํ…Œ๊ณ ๋ฆฌ๋ณ„ ๋ฉ”๋‰ด๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

method uri
GET /api/category/:category/menu
{
  response: [
    {
      id: "string",
      name: "string",
      isSoldOut: Boolean,
    },
  ];
}

๋ฉ”๋‰ด ์ด๋ฆ„ ์ˆ˜์ •ํ•˜๊ธฐ

method uri
PUT /api/category/:category/menu/:menuId
{
 requestBody: {
   "name": "string"
 },
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

๋ฉ”๋‰ด ํ’ˆ์ ˆ ์ฒ˜๋ฆฌํ•˜๊ธฐ

method uri
PUT /api/category/:category/menu/:menuId/soldout
{
 response: {
   "id": "string",
   "name": "string",
   "isSoldOut": Boolean
  }
}

๋ฉ”๋‰ด ์‚ญ์ œํ•˜๊ธฐ

method uri
DELETE /api/category/:category/menu/:menuId
์‘๋‹ต ๋ฐ์ดํ„ฐ ์—†์Œ

โš™๏ธ Before Started

Tip ๋กœ์ปฌ์—์„œ ์„œ๋ฒ„ ๋„์›Œ์„œ ์†์‰ฝ๊ฒŒ static resources ๋ณ€๊ฒฝ ๋ฐ ํ™•์ธํ•˜๋Š” ๋ฐฉ๋ฒ•

๋กœ์ปฌ์—์„œ ์›น์„œ๋ฒ„๋ฅผ ๋„์›Œ html, css, js ๋“ฑ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์†์‰ฝ๊ฒŒ ํ…Œ์ŠคํŠธํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  npm์ด ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ๊ธ€์— npm install ์ด๋ž€ ํ‚ค์›Œ๋“œ๋กœ ๊ฐ์ž์˜ ์šด์˜์ฒด์ œ์— ๋งž๊ฒŒ๋” npm์„ ์„ค์น˜ํ•ด์ฃผ์„ธ์š”. ์ดํ›„ ์•„๋ž˜์˜ ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ์›นํŽ˜์ด์ง€๋ฅผ ํ…Œ์ŠคํŠธํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

npm install -g live-server

์‹คํ–‰์€ ์•„๋ž˜์˜ ์ปค๋งจ๋“œ๋กœ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

live-server ํด๋”๋ช…

๐Ÿ’ป Code Review

์•„๋ž˜ ๋งํฌ๋“ค์— ์žˆ๋Š” ๋ฆฌ๋ทฐ ๊ฐ€์ด๋“œ๋ฅผ ๋ณด๊ณ , ์ข‹์€ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฌธํ™”๋ฅผ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ€๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ‘๐Ÿผ Contributing

๋งŒ์•ฝ ๋ฏธ์…˜ ์ˆ˜ํ–‰ ์ค‘์— ๊ฐœ์„ ์‚ฌํ•ญ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด, ์–ธ์ œ๋“  ์ž์œ ๋กญ๊ฒŒ PR์„ ๋ณด๋‚ด์ฃผ์„ธ์š”.


๐Ÿž Bug Report

๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ•œ๋‹ค๋ฉด, Issues์— ๋“ฑ๋กํ•ด์ฃผ์„ธ์š”.


๐Ÿ“ License

This project is MIT licensed.