프리온보딩 프론트엔드 인턴십 (6월)

지원자 : 류수현

제작 기간 : 2023.06.18 ~ 2023.06.21 (4일)

TODO LIST 과제를 하며 :
인턴십을 늦게 발견해 4일간 바짝 만들었습니다. 여유없이 제출해야하지만 수업 커리큘럼이 프론트엔드로서 알아야할 다양한 과정을 담고있어 수강하고 싶고, 인턴십을 통해 이번 여름엔 프론트엔드 신입으로 취업합격 하고싶어 신청했습니다

Todo List는 만들어본 적이 있어서 이번에는 사용하기 편하고 익숙한 모습으로 구현 해보고싶어 종이 메모장처럼 만들었습니다. 시간이 빠듯해 조금만 더 만들고 자야지 하면서 만들다 보면 재밌어서 정신차려보면 아침이 오더라구요. 아직 코드를 작성하며 어떻게 컴포넌트를 분리할지, 함수로 만들어 재사용하는게 좋을지 고민도 많이하고, 실수도 해서 해메이기도 하지만 그 과정을 통해 새로운 학습을 하고 문제를 해결하며 점차 원하는대로 만들어낼 수 있어 즐거웠습니다.

디자인

Figma로 디자인을 정리한 후 구현했습니다 👉디자인 보기

실행방법

$ npm start

• 실행 영상

기능구현 데모영상

배포 : TODO LIST

👥 회원가입 / 로그인

• 로그인 페이지에서 회원가입 페이지로 이동

  

• 유효성 검사 기능 구현

  • 조건

    • 이메일 조건 : @ 포함
    • 비밀번호 조건 : 8자 이상
    • 입력된 이메일과 비밀번호가 유효성 검사를 통과하지 못한다면 button에 disabled 속성을 부여

  • 회원가입 유효성 검사

    

  • 로그인 유효성 검사

    

• 회원가입 / 로그인 요청 구현

  • 회원가입 실패

    

  • 회원가입 성공
    : button클릭 → 회원가입 진행 → 회원가입 정상 완료 → /signin 경로로 이동

    

  • 로그인 실패

    

  • 로그인 성공
    button클릭 → 로그인 진행 → 로그인 정상 완료 → /todo 경로로 이동

    

• 로그인 여부에 따른 리다이렉트 처리 구현

  • 토큰이 있을때
    /signin 또는 /signup 페이지에 접속 시 ⇒ /todo 경로로 리다이렉트

    

  • 토큰이 없을때
    /todo 페이지에 접속 시 ⇒ /signin 경로로 리다이렉트

    

---

✅ TODO LIST

• 새 TODO 입력 구현

  

• 완료 여부 수정 구현

  

• 수정 모드 구현

  • "수정 버튼" 클릭 -> 수정모드 활성화
  • "수정 취소 버튼" 클릭 -> 수정 취소 (수정내용 초기화, 수정모드 비활성화)
  • "수정 확인 버튼" 클릭 -> 수정 업데이트

  

  

• 삭제 기능 구현

  • 삭제도 수정처럼 삭제 모드로 구현하여 사용자가 확인후 삭제할 수 있도록 했습니다.

  

추가 구현

구현 목록 노션 기록

• 리팩토링

  • 커스텀훅으로 로직과 뷰 분리
  • 커스텀훅으로 재사용성 고려하여 수정

• Todo List 정렬 구현

  • 최근 작성순 / 오래된순 토글 버튼 구현하기

    

  • 체크한것만 보기, 체크 안한것만 보기 버튼 구현하기

• 만들지않은 페이지로 이동했을때, 404띄우기

  

• Todo list 스크롤 UI 수정

  • 스크롤 가능한 방향에 그림자 표시하기

• 회원가입 페이지 → 로그인 페이지 으로 가는 버튼 만들기

• 시계 구현하기