/Todo-List-TS

Todo-LIst with TypeScript ๐Ÿ“‘

Primary LanguageTypeScript

Todo-List-TS

โœ๏ธ๋‚˜๋งŒ์˜ Todo๋ฅผ ๊ธฐ๋กํ•˜์„ธ์š”.

๐Ÿ“Ž ๋ฐฐํฌ ๋งํฌ

https://todo-ts-3ea0b.web.app/

๐Ÿ“Ž ๋ธ”๋กœ๊ทธ ๋งํฌ

https://www.notion.so/Todo-List-afe28ef6881a4129b07ead7ca34fc66e

โš™๏ธ ์‚ฌ์šฉ ์Šคํƒ

  • TypeScript
  • React.js
  • Styled-Components (์Šคํƒ€์ผ)
  • Firebase (์„œ๋ฒ„์™€ DB๋ฅผ ์‰ฝ๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ตฌ์ถ•ํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.)
  • Zustand (์ƒํƒœ๊ด€๋ฆฌ)

๐Ÿง ๊ตฌํ˜„ ๋ชฉ์ 

  • ํ•™์Šตํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹ค์ œ๋กœ ์ ์šฉํ•˜๋ฉฐ ์‹ค๋ ฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ณ  ์œ ์ €์˜ Todo ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด firebase๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

โš™๏ธ ํŒŒ์ผ๊ตฌ์กฐ

client
    โ”œโ”€โ”€ package.json
    โ”œโ”€โ”€ package-lock.json
    โ”œโ”€โ”€ public
    โ”œโ”€โ”€ src
    โ”‚   โ”œโ”€โ”€ assets
    โ”‚   โ”‚   โ”œโ”€โ”€ css
    โ”‚   โ”‚   โ””โ”€โ”€ images
    โ”‚   โ”œโ”€โ”€ components
    โ”‚   โ”œโ”€โ”€ hooks
    โ”‚   โ”œโ”€โ”€ mocks
    โ”‚   โ”œโ”€โ”€ pages
    โ”‚   โ”œโ”€โ”€ redux
    โ”‚   โ”œโ”€โ”€ types
    โ”‚   โ””โ”€โ”€ utils
    โ””โ”€โ”€ tsconfig.json

๐Ÿ› ๏ธ ๋ฌธ์ œ์ ๊ณผ ํ•ด๊ฒฐ์ฑ…

  • ๋ฌธ์ œ์  : ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๋‚ด์˜ ์ค‘๋ณต์ฝ”๋“œ๊ฐ€ ์กด์žฌํ•˜์—ฌ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง„๋‹ค.
  • ํ•ด๊ฒฐ์ฑ… : custom hook ๋˜๋Š” ๊ณตํ†ตํ•จ์ˆ˜๋กœ ๋งŒ๋“ค์–ด ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’์€ ์ฝ”๋“œ๋กœ ๋ฆฌํŒฉํ† ๋งํ•œ๋‹ค.

๐Ÿ†• ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ๊ธฐ๋Šฅ

  • ๋‹ฌ๋ ฅ์— ๋‚ ์งœ ๋ณ„๋กœ Todo๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ
  • Drag&Drop์œผ๋กœ Todo์˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ

โœ… ์ฃผ์š”๊ธฐ๋Šฅ ๋ฐ ๊ตฌํ˜„ํ™”๋ฉด

1. ๋กœ๊ทธ์ธ ๋ฐ ํšŒ์›๊ฐ€์ž…

  • ๋กœ๊ทธ์ธ (์ผ๋ฐ˜) แ„‹แ…ตแ†ฏแ„‡แ…กแ†ซแ„…แ…ฉแ„€แ…ณแ„‹แ…ตแ†ซ

  • ๋กœ๊ทธ์ธ (์†Œ์…œ) แ„‰แ…ฉแ„‰แ…งแ†ฏแ„…แ…ฉแ„€แ…ณแ„‹แ…ตแ†ซ

  • ํšŒ์›๊ฐ€์ž… แ„’แ…ฌแ„‹แ…ฏแ†ซแ„€แ…กแ„‹แ…ตแ†ธ

2. Todo์ถ”๊ฐ€๊ธฐ๋Šฅ

แ„แ…ฎแ„ƒแ…ฎแ„Žแ…ฎแ„€แ…ก

3. Todo์‚ญ์ œ ๋ฐ ์ˆ˜์ •๊ธฐ๋Šฅ

  • ์ˆ˜์ • แ„แ…ฎแ„ƒแ…ฎแ„‰แ…ฎแ„Œแ…ฅแ†ผ

  • ์‚ญ์ œ แ„‰แ…กแ†จแ„Œแ…ฆ