Todo List Bunny
Deploy Link
https://todolist-bunny.netlify.app
Contributors
| 🐇Henry | 🍑 Kenny | 🥔 Ian |
|---|
Tech Stacks
Language
Framework
Server & Database
Animation
Collaboration Tool
Package Management
Version control
Bundler
Deploy
Others
UI/Design
- neumorphic UI 디자인 적용
Features
- 로그인, 회원가입 기능
- 반응형 레이아웃
- 데스크탑/태블릿 : 768px 이상
- 모바일 : 767px 이하, 최소 375px까지 지원
- 할일 달성률을 프로그레스바로 표현
- 달성률 100% 달성 시 알림 메세지 토스트
- 할일 목록
- 평소에는 elipsis, hover 시 전부 보여주기 (hover text)
- 목록에 아이템이 추가되어 overflow시 스크롤 기능
- 할일 아이템 추가/삭제/수정 기능
- 할일 아이템 체크(Done) 기능
- 다크/라이트 모드 지원
- 모달 기능
- 할일 아이템 추가, 수정 시 form 모달
- 로그인, 회원가입시 에러 메세지 모달
Animations
- 모달 애니메이션
- 프로그레스바 애니메이션 (Done 체크시 자연스럽게 늘어나도록)
- 스와이프 기능: 모바일 버전에서 밀어서 삭제 버튼 보이기 (미는 건, 데스크탑에서는 드래그 + 모바일에서는 터치 스타트/엔드)
Screens/components
Header
- PC
- Mobile
Main
- PC
- Mobile
Signin/Signup Form
- PC
- Mobile
Modals
- PC
- Mobile
Toast
- PC
- Mobile
Dark Mode
-
PC
-
Mobile
TODOS
- 컴포넌트들 만들기
- 헤더
- CUD 버튼
- 체크박스 버튼
- 할일 아이템
- 할일 아이템 리스트
- 프로그레스 바
- 모달
- 다크모드 토글
- 회원가입, 로그인 폼
- 컴포넌트 조립 (정적인 레이아웃 구현)
- 메인페이지(데스크탑)
- 메인페이지(모바일)
- 로그인/회원가입(데스크탑)
- 로그인/회원가입(모바일)
- 기능 구현
- 로그인, 회원가입 기능
- 로그아웃 기능
- 프로그레스바 기능
- hover text 기능
- 할 일 추가(모달)
- 할 일 삭제, 수정 기능
- 할 일 체크 기능
- 모바일 스와이프 기능 구현
- prefers-color-scheme을 이용한 사용자 선호에 따른 동적 테마 지원
- 애니메이션, 디자인(스타일, 배치, 테마, 반응형 등) 적용
- 모달 애니메이션
- 프로그레스바 애니메이션 (Done 체크시 자연스럽게 늘어나도록)
- 스와이프 기능: 모바일 버전에서 밀어서 삭제 버튼 보이기 (미는 건, 데스크탑에서는 드래그 + 모바일에서는 터치 스타트/엔드)
- 모바일 반응형 레이아웃(데스크탑/태블릿 : 768px 이상, 모바일 : 430px 이상 767px 이하)
- 다크/라이트 모드 지원