Window 98 Todo-list

윈도우 98 테마 디자인의 투두리스트 프로젝트

Use Skills

How To Start?

1. 첫번째 터미널에 yarn build 명령어 실행시 eslint + build + JSON server start 명령어가 동시에 실행됩니다.
2. 새로운 두번째 터미널에 yarn start 명령어로 프로젝트를 실행합니다.
3. http://localhost:3001/ 경로로 브라우저를 실행합니다.
   
   
   
   

0. Apps

• Recycle Bin : 삭제된 리스트들이 담긴 페이지
  
• Github : 현재 Repository 페이지
  
• Todo-List : 등록한 리스트 조회, 등록, 삭제, 수정 페이지
  
  
  
  
  

1-1. Todo-List 홈

Todo-List 아이콘 및 제목을 클릭하면 리스트 관련 페이지로 이동합니다.

1-2. Todo-List 등록

오른쪽 상단의 New List를 클릭해 등록창을 실행할 수 있습니다.
제목과 내용 입력 후, 등록 버튼을 클릭하면 새로운 리스트를 등록할 수 있습니다.

1-3. Todo-List 조회

새롭게 등록된 리스트가 있다면, 등록순으로 리스트가 조회됩니다.

1-4-1. Todo-List 수정

리스트의 오른쪽에 있는 수정 버튼을 클릭하면 제목 및 내용 수정창이 실행됩니다.
제목과 내용 수정 후, 수정 버튼을 클릭하면 변경된 내용으로 리스트가 수정됩니다.

1-4-2. Todo-List 수정 시 이탈 감지

기존의 내용과 변경된 내용이 있는 상태에서, 우측 상단의 닫기 버튼을 클릭하면 이탈 확인창이 새롭게 실행됩니다.
수정창을 종료하려면 확인 버튼을 클릭해 수정창을 종료시킬 수 있습니다.

1-5. Todo-List 완료 체크

조회된 리스트의 체크박스를 클릭하면 완료 상태를 toggle 할 수 있습니다.

1-6. Todo-List 상세 페이지

조회된 리스트의 제목 영역을 클릭하면, 리스트의 상세 페이지로 이동할 수 있습니다.
상세 페이지에서도 동일하게 수정 및 삭제 기능을 제공합니다.

1-7. Todo-List 삭제

리스트 우측의 삭제 버튼을 클릭하면, 삭제 여부에 관한 확인창이 실행됩니다.
확인창의 확인 버튼을 클릭하면, 리스트가 삭제됩니다.

2-1. 휴지통 홈

휴지통 페이지에서는 삭제된 리스트들만 조회할 수 있습니다.
조회된 삭제 리스트는 다시 Todo-List 페이지로 복원하거나, 완전히 삭제할 수 있습니다.

2-2. 삭제 리스트 체크

복원 및 비우기 기능을 사용하기 위해 상단의 체크박스 및 각각의 리스트의 체크박스를 선택합니다.
상단의 체크박스를 클릭하면 전체 리스트를 선택하거나 해제할 수 있습니다.

2-3. �삭제 리스트 복원

복원할 삭제 리스트들을 체크한 후, 오른쪽 상단의 선택 복원 버튼을 클릭하면 복원 여부 확인창이 실행됩니다.
확인 버튼을 클릭하면, 해당 리스트들을 모두 Todo-List 페이지로 이동시킬 수 있습니다.

2-4. �삭제 리스트 비우기

비우기를 실행할 리스트들을 체크한 후, 오른쪽 상단의 선택 비우기 버튼을 클릭하면 비우기 여부 확인창이 실행됩니다.
확인 버튼을 클릭하면, 해당 리스트들이 완전히 삭제 됩니다.

3. 에러 처리 페이지

유효하지 않는 페이지이거나(404) API 에러 발생시, 블루스크린 테마의 오류 화면이 실행됩니다.
블루스크린 화면을 클릭하면 홈 화면으로 이동합니다.