coyo-hm / simple-kanban-board

react-beautiful-dnd를 이용한 간단한 칸반 보드

Simple Kanban Board

react-beautiful-dnd를 이용한 노션 보드 클론 코딩입니다.

• react-beautiful-dnd를 사용하여 Drag and Drop이 가능한 Kanban Board를 구현하였습니다.
• react-color를 사용하여 보드의 색상을 변경할 수 있게 해주었습니다.
• context api를 사용하여 theme toggle을 구현하였습니다.
• localStorage를 이용해서 기존의 작성했던 보드의 정보를 저장해주었습니다.

Table of contents

• Simple Kanban Board
  • Table of contents
  • 🔗 Link
  • ✅ Feat
    • Theme Switching
    • Board & Card Drag and Drop
    • Board 생성
    • Board 색상 추가
  • 👉🏻 Quick Start
  • 🛠️ Tech Stack

🔗 Link

• Demo Page
• Github Repository

✅ Feat

Theme Switching

styled-components 와 useContext를 이용하여 Theme Switching 구현

Board & Card Drag and Drop

react-beautiful-dnd를 사용하여 Drag and Drop이 가능한 Kanban Board를 구현

• 카드끼리의 위치 이동은 물론 보드끼리의 위치 이동도 가능
• 또한 보드에서 다른 보드로 카드 이동 가능
• 아래의 휴지통으로 보드나 카드를 드랍하여 카드나 보드는 삭제

Board 생성

Recoil과 React-Hook-Form 을 이용하여 보드 생성 및 편집

Board 색상 추가

Recoil과 React-Color를 이용하여 보드 색상을 관리 구현

👉🏻 Quick Start

npm install
npm start

🛠️ Tech Stack

• react v_18.2.0
• react-beautiful-dnd v_13.1.0
• react-helmet v_6.1.0
• react-hook-form v_7.34.0
• react-color v_2.19.3
• recoil v_0.7.4
• styled-components v_5.3.5
• typescript v_4.8.3

simple-kanban-board's Issues

카드 오류

• 카드 편집 시에 커서 올바른 위치에 없음
• 카드 생성 후에 input 창에 입력값 남아 있음

모바일 화면 최적화