Lighter Big Plan

Todo list 앱입니다. 제목을 더블클릭해서 수정할 수 있습니다.

Dependencies

"axios": "^0.27.2",
"classnames": "^2.3.1",
"dayjs": "^1.11.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.3",
"web-vitals": "^2.1.4"

배포 페이지

우측 About 참고

기본 기능

할 일

할 일 목록

• 기본적으로 할 일의 제목이 나타나고, 제목을 클릭하면 선택되었음이 표시됩니다.
• 제목을 더블클릭하면 세부사항을 설정할 수 있습니다. 상세화면에서는 다음과 같은 설정이 가능합니다.
  • 간단한 메모를 기록할 수 있습니다.
  • 기간은 달력 모양 버튼(기간을 정하지 않은 경우) 혹은 날짜 버튼(기간을 정한 경우)을 클릭해서 설정할 수 있습니다.
    • 버튼을 누르면 date picker가 나옵니다. date picker는 남은 공간에 따라 위 혹은 아래 방향으로 나타납니다.
    • 시작일과 종료일을 달력에서 선택하면 기간이 설정됩니다. 선택 순서에 상관 없이 선택한 날짜 중 빠른 날이 시작일, 느린 날이 종료일이 됩니다.
  • 카테고리 버튼을 눌러서 나타나는 메뉴 중 하나를 선택하면 카테고리 설정이 됩니다. 필요한 경우 직접 입력해서 카테고리를 생성할 수 있습니다.
  • 현재는 기본적으로 dummy data가 추가됩니다.

할 일 추가

• 제목 옆의 + 버튼을 누르거나, Enter 키를 눌러서 새로운 할 일을 추가할 수 있습니다.
• 목록에서 할 일이 선택된 상태라면 선택된 할 일 바로 밑에 새로운 할 일이 추가됩니다.
• 할 일이 추가됨과 동시에 세부 화면 수정 창이 나타납니다.

프로필 선택

사용자 선택

• 어느 경로로 접근하여도, 사용자가 선택되지 않았다면 /login 경로로 이동합니다.
• 사용자를 선택했을 때, 비밀번호가 설정되어 있다면 비밀번호 입력 창이 나오고 그렇지 않으면 바로 로그인됩니다.

사용자 추가

• + 버튼을 누르면 사용자가 추가됩니다.
• 사용자 이름, 비밀번호, 비빌번호 확인을 입력하고 확인 아이콘을 누르면 됩니다.
• 추가를 취소하고 뒤로 가기 아이콘을 누르면 이전 화면 (사용자 선택 화면)으로 이동합니다.

정보 수정

• 하단의 수정 버튼을 누르고 수정할 사용자를 누르면 됩니다.

로그아웃

• GNB 우측의 사용자 이름을 클릭하면 로그아웃 버튼이 나타나고, 이를 누르면 로그아웃됩니다.

기타

• GNB 위 버튼으로 다크/라이트 모드를 설정할 수 있습니다.
• SNB 우측 모서리(접혀 있을 때는 화면 좌측 모서리)를 선택하면 SNB를 접고 펼 수 있습니다.