Todolist-modal (typescript, react-query)

https://github.com/sjk990515/modalTodo

(깃허브 파일 링크)

GitHub - sjk990515/modalTodo

반응형 투두리스트 실행방법

1. 다운로드하신 후 파일로 들어가 터미널을 연 후 npm i 로 필요한 파일을 설치해 줍니다.

(사용 기술 : react, typescript, react-query, axios, json-server, styled-components, react-router-dom, styled-reset, uuid)

2. 파일 안에 터미널을 추가로 한 개 더 연 후 하나는 npm start 나머지 하나는 npx json-server —watch db.json —port 3001로 서버와 웹을 모두 열어줍니다.

3. 그리고 크롬 등 웹에서 http://localhost:3000/ 으로 실행하시면 사용하실 수 있습니다.

페이지 설명

기본적으로 투두리스트 페이지 입니다.

위 카테고리로 할 일, 완료한 일을 선택할 수 있습니다

오른쪽 밑의 추가를 누르게 되면 글을 새로 작성하실 수 있습니다

작성한 글을 누르면 모달의 형태로 볼 수 있고 수정, 삭제가 가능합니다. 닫기 외에 모달 바깥쪽을 클릭해도 창을 닫을 수 있습니다.

오른쪽 Done 버튼을 누르게 되면 완료 상태로 바뀌게 됩니다.

수정을 누르면 모달 페이지에서 바로 수정이 가능합니다.

모든 기능은 모바일 및 태블릿에서도 사용 가능합니다.

)

)

)

)