Slid To Do

투두리스트를 작성하고, 진도율 체크 및 목표를 설정하며 각 할 일에 대한 노트를 작성해 관리하는 웹 어플리케이션

🌟 About the Project

👾 Tech Stack

Frontend 기술 스택

• Next.js (pages routing) (v14.2.3)
• React (v18.2.0)
• Typescript (v5)
• TailwindCSS
• Storybook (v.8.1.1)
• tanstack/react-query
• prettier, eslint

라이브러리

• react-hook-form (비제어 컴포넌트 폼)
• draft-js (텍스트 에디터)
• react-spinners (로딩 스피너)
• react-cookie (리액트 쿠키)
• axios (데이터 패칭)
• shadcn/ui (스켈레톤 UI, 토스트 메세지 UI)

CI/CD, 배포

• Chromatic (스토리북 배포, UI 테스트 도구)
• CI/CD는 github-actions의 workflows를 활용
• vercel

🎯 Features (MVP)

• 콘텐츠(파일, 링크)를 첨부할 수 있는 할 일 생성 기능
• 각 할 일에 대한 노트를 에디터로 작성 기능 및 노트 임시 저장 기능
• 목표를 만들고, 할 일에 목표를 추가할 수 있는 기능
• 각 할 일 여부에 따른 진행률을 확인 할 수 있는 기능 (프로그래스 바, 프로그래스 그래프)
• 회원가입, 로그인, 로그아웃 기능
• pc, 태블릿, 모바일 반응형 UI 및 스켈레톤 UI
• 모달, 팝업, 사이드바 구현 및 반응형에 따른 레이아웃 구현

📷 주요 기능 스크린샷

✨ 대시보드 페이지

✨ 할 일 생성 모달

✨ 노트 작성, 수정페이지

✨ 노트 보기 페이지

✨ 사이드바, 반응형 UI