https://github.com/coyo-hm/simple-kanban-board
react-beautiful-dnd를 이용한 간단한 칸반 보드
https://github.com/coyo-hm/simple-kanban-board
react-beautiful-dnd react-color react-helmet react-hooks reactjs recoil styled-components typescript
Last synced: about 2 months ago
JSON representation
react-beautiful-dnd를 이용한 간단한 칸반 보드
- Host: GitHub
- URL: https://github.com/coyo-hm/simple-kanban-board
- Owner: coyo-hm
- Created: 2022-09-13T16:42:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-12T15:38:29.000Z (about 1 year ago)
- Last Synced: 2025-02-01T10:24:49.769Z (4 months ago)
- Topics: react-beautiful-dnd, react-color, react-helmet, react-hooks, reactjs, recoil, styled-components, typescript
- Language: TypeScript
- Homepage: https://coyo-hm.github.io/Simple-Kanban-Board/
- Size: 3.85 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Kanban Board
[](https://github.com/coyo-hm/Simple-Kanban-Board)
[](https://github.com/prettier/prettier)
> react-beautiful-dnd를 이용한 노션 보드 클론 코딩입니다.
>
> - react-beautiful-dnd를 사용하여 Drag and Drop이 가능한 Kanban Board를 구현하였습니다.
> - [react-color](https://casesandberg.github.io/react-color/)를 사용하여 보드의 색상을 변경할 수 있게 해주었습니다.
> - context api를 사용하여 theme toggle을 구현하였습니다.
> - localStorage를 이용해서 기존의 작성했던 보드의 정보를 저장해주었습니다.
## Table of contents
- [Simple Kanban Board](#simple-kanban-board)
- [Table of contents](#table-of-contents)
- [🔗 Link](#-link)
- [✅ Feat](##-feat)
- [Theme Switching](#theme-Switching)
- [Board & Card Drag and Drop](#board--card-drag-and-drop)
- [Board 생성](#board-생성)
- [Board 색상 추가](#board-색상-추가)
- [👉🏻 Quick Start](#-quick-start)
- [🛠️ Tech Stack](#-tech-stack)
## 🔗 Link
- [Demo Page](https://coyo-hm.github.io/Simple-Kanban-Board/)
- [Github Repository](https://github.com/coyo-hm/Simple-Kanban-Board)
## ✅ 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
```shell
npm install
npm start
```
## 🛠️ Tech Stack
- [react v_18.2.0](https://ko.legacy.reactjs.org/)
- [react-beautiful-dnd v_13.1.0](https://www.npmjs.com/package/react-beautiful-dnd)
- [react-helmet v_6.1.0](https://www.npmjs.com/package/react-helmet)
- [react-hook-form v_7.34.0](https://react-hook-form.com/)
- [react-color v_2.19.3](https://casesandberg.github.io/react-color/)
- [recoil v_0.7.4](https://recoiljs.org/ko/)
- [styled-components v_5.3.5](https://styled-components.com/)
- [typescript v_4.8.3](https://www.typescriptlang.org/)