You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
할 일 항목의 순서를 바꿀 수 있도록 만들어보세요. (추천 라이브러리 - SortableJS)
할 일을 완료하지 않은 항목과 완료한 항목을 분류해서 출력해보세요.
할 일을 완료한 항목을 한 번에 삭제할 수 있도록 만들어보세요.
할 일 항목의 최신 수정일을 표시해보세요. 👉계획은 수정한 시간보다 최초 등록한 시간이 더 중요하다고 판단, 등록한 시간을 상대시간으로 표시
할 일 목록이 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
기타 동작이 완료되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
할 일과 관련된 기타 기능도 고려해보세요.
차별화
60-30-10 법칙을 준수한 심플한 디자인
명언 API를 활용, 계획을 실행함에 있어 동기부여 역할
Incremental Static Regeneration(ISR) 방법을 사용, 10초간 데이터를 캐싱해둠
다크모드
브라우저에서 제공하는 confirm창이 아닌 커스텀 confirm모달 구현
직관적인 UI/UX
TODO 항목 더블클릭시 수정모드 UI로 전환
수정모드에서 'Enter' 키를 누르면 수정이 되며, 'Esc'를 누르면 수정이 취소됨
수정모드에서 외부 요소를 클릭시 수정이 취소됨
다양한 상호작용
모든 TODO, 완료되지 않은 TODO, 완료한 TODO의 갯수를 각각 알려줌
새로운 TODO, 수정 TODO 입력값에 따라 글자수를 알려주며 에러메세지 및 client side validation을 제공
TODO 성공 여부에 따라 삭제 메시지가 다름
완료된 TODO가 없을 때는 모두삭제 버튼이 보이지 않음
TODO apikey를 환경변수에 저장, Next route handler를 통해 api key를 숨김
컴포넌트 구조
고찰 및 느낀점
NextJS 13 공부가 필요
TODO 순서 바꾸는 기능을 sortableJS library와 이미 만들어진 API를 이용하다보니 예상치 못한 결과가 발생, 순서가 변경된 TODO를 완료 하거나 미완료 할 경우 순서가 멋대로 바뀜
sortableJS library를 사용하는 이상 server state를 가져와서 client state로 바꿔줘야함. 이 과정에서 react-query의 장점이 감소하고 server state와 client state간의 동기화 문제가 발생함. 상태관리 및 react-query 공부가 더 필요
shadcn/ui라는 tailwind, radixui 기반의 component library를 처음으로 사용해봄
삭제요청 성공할 확률이 1에 수렴하기 때문에 다음과 같이 client state를 즉각적으로 삭제해주는 것이 더 좋은 UX라고 생각함
consthandleDeleteDone=()=>{// client state를 삭제하는 코드setClientTodos((prevTodos)=>prevTodos.filter((todo)=>!todo.done));// server state를 삭제하는 코드deleteDone(clientTodos.filter((todo)=>todo.done).map((todo)=>todo.id));};
todoIds가 handleReorder함수 내부스코프에서 최신의 순서를 반영하지 못하고 한단계씩 뒤쳐진다. 👉 onEnd의 event 객체를 활용하여 순서를 최신상태로 반영할 수 있음
consttodoIds=clientTodos.map((todo)=>todo.id);consthandleReorder=(event: Sortable.SortableEvent)=>{// 이동 전 index의 아이템을 splice 매서드를 이용하여 변수에 담음
const item=todoIds.splice(event.oldIndexasnumber,1)[0];// 이동 후 index에 해당 아이템을 넣음todoIds.splice(event.newIndexasnumber,0,item);reorderTodo(todoIds);};<ReactSortablelist={filteredTodos}setList={setClientTodos}className="flex flex-col gap-3 p-4 "animation={250}handle=".handle"onEnd={handleReorder}>