S4) Unit12. [Coz' Mini Hackathon] TodoList 만들기

📣  TodoList 만들기

𝟭. 사용 스택(라이브러리 등)

- React

    ㄴ react-spinners(로딩 화면)
    ㄴ react-icons
    ㄴ react-router-dom

- Redux (메모 목록 관리)
- Json-server (할일 목록 관리)
- Styled-components
- Framer-motion (페이지 이동 효과)
- Moment (달력)
 

𝟮. 구현 기능

- todo CRUD
- todo 초기화 
- 달력에서 완료 todo 확인 기능
    ㄴ 완료한 일정이 있는 날은 빨간 점으로 표시
- memo CRUD
- 회원가입, 로그인, 로그아웃 기능
    ㄴ json-server 이용
- 글꼴 변화 기능
    ㄴ 초기화 시 처음 글꼴로 돌아오는 에러? 존재
- 데이터 받아오기 전까지 로딩화면 구현
- Menu 기능 구현
 

𝟯. 페이지 컴포넌트 설명

📄 Login 

    -  로그인 기능
        ㄴ 서버에서 아이디, 비밀번호 저장하고 있어서 일치하는 정보 있으면 로그인 가능
        ㄴ 회원가입 페이지로 이동 가능

 

📄 Signup

    - 회원가입 기능
        ㄴ 없는 아이디면 서버에 저장하고, 그 정보로 로그인 가능

 

📄 TodoTemplate

    - Todo 목록 출력(RUD 기능)
    - 새로운 todo 추가 가능(C 기능)
    - 새로운 memo 추가 가능
    - Menu 확인 가능
    - MemoTemplate 페이지로 이동 기능

 

📄 Creator

    - 제작자 프로필 확인
        ㄴ insta, github 링크 이동 가능

 

📄 MemoTemplate

    - Memo 목록 출력(RUD 기능)

 

📄 Calendar

    - 달력 확인 가능
        ㄴ 오늘, 이전에 완료한 일정 확인 가능

 

𝟰. 시연 영상

투두리스트 시연영상 최종.mov

2.46MB