배포 주소

배포 사이트

💻 설치 방법

npm install
npm start

📂 파일 구조

src
┣ Components
┃ ┣ Board.tsx
┃ ┣ CreateBoard.tsx
┃ ┗ CreateDraggable.tsx
┣ atom
┃ ┗ atoms.ts
┣ constant
┃ ┗ constants.ts
┣ styles
┃ ┣ globalStyle.ts
┃ ┣ styled.d.ts
┃ ┗ theme.ts
┣ App.tsx
┣ index.tsx
┗ react-app-env.d.ts

---

📋프로젝트 사진

메인 화면

---

드래그앤드랍 화면

---

📝 기능

React Hook Form을 이용하여 입력 폼을 빌드하고 구현

• React Hook Form 을 이용해서 기존의 입력 폼의 입력값을 받을 때 사용되는 코드 양보다 더 적게 적을 수 있었습니다.

Recoil의 atoms를 이용해 애플리케이션의 상태를 관리

• 저장된 메세지 리스트를 Recoil을 통해 전역으로 관리하였습니다.

Beautiful DnD를 활용하여 드래그-앤-드롭을 구현

• Beautiful DnD 라이브러리를 사용하여 각 보드마다 드래그-앤-드롭 기능을 구현하였고 드래그 중 보드와 메시지의 색이 변하도록 구현했습니다.