React 1주차 개인 투두리스트 과제 프로젝트 입니다!
겸사겸사, 평소에 써보고 싶었던 component ui
인 shadcn ui
라이브러리를 적용하였습니다!
겸사겸사2, 해보고 싶었던 React 프로젝트를 Github Actions를 사용하여 Github Page로 배포하는 Workflow
도 구성해보았습니다 ✍🏻
겸사겸사3, shadcn ui에 의존적인 tailwind
도 적용해 볼 수 있었습니다.
그러면서 tailwind
className을 어떤식으로 관리하는 것이 좋을까? 고민하고 해결해보는 시간도 가졌습니다!
아무쪼록 많은 것을 학습할 수 있었던 좋은 시간이였습니다 🔍
- useState를 이용하여 Todos를 저장합니다.
- localstorage를 사용하여, 재 접속시에도 기존 데이터를 유지할 수 있도록 하였습니다.
- shadcn ui에서 제안하는 zod 유효성 검사 라이브러리를 이용하여, 2자 이상 필수 작성될 수 있도록 하였습니다.
- Todo가 수정, 삭제, 상태 변경이 일어나는 경우 사용자에게 명확하게 인지 될 수 있도록 Toast를 노출하였습니다.
- Todo의 상태를 수정하고, 삭제할 수 있습니다.
Github Page 배포를 위한 Github Actions script
shadcn ui에서 제공하는 컴포넌트 모음 (기본 경로)
shadcn ui에서 제공된 className 병합 함수 (기본 경로)
layout의 컴포넌트들을 index로부터 export 할 수 있도록 정의
상단 헤더
컨텐츠 너비를 제한하는 컴포넌트
todo의 컴포넌트들을 index로부터 export 할 수 있도록 정의
todo 카드 컴포넌트
todo의 부모 컴포넌트
todo를 생성하는 입력 폼 컴포넌트