useQuery 의 isError를 통해 오늘 날짜 정보를 가져오는데 실패했을 경우 콘솔 창에 에러메시지가 나타나도록 했습니다.
사용할 땐 아래처럼 사용합니다.
const { date } = useTodayDate();
date이름으로 retrun 하기 때문에 date 이름을 바로 사용할 수 있습니다.
오늘의 날짜 정보가 필요한 상세/메인/수정 페이지에 적용해두었습니다!
-> (추가) 작성 페이지에도 적용완료했습니다!**
🚨 버그 발생 이유 (선택 사항)
1️⃣ localStroage의 lastWritingDate 사라짐 현상 해결
용호님이 발견해주신 #151 오류를 해결했습니다.
제가 예전에 일기 작성, 수정 테스트를 진행하면서 매번 개발자 도구를 통해 localStroage의 lastWritingDate를 삭제해주는 게 불편해 수정 페이지로 이동할 때 lastWritingDate 가 삭제되는 코드를 작성해두었었습니다. PR 올릴 때 이 코드를 제거하는 것을 깜박해 발생한 오류입니다..!
✅ 체크리스트
📝 작업 상세 내용
1️⃣ usePatchDiary 훅 생성
일기 수정 PATCH
/api/diary/{diaryId}
api를 axios에서 useMutation을 활용한 Tanstack query로 변경하였습니다.usePatchDiary 훅은 수정할 일기의 diaryId, 이미지 파일, requestDto를 인수로 받습니다. 이 훅을 사용할 땐 아래처럼 mutate 함수를 사용해야합니다.
mutate 함수는 일기 수정이 끝난 후 저장버튼을 눌렀을 때 실행되도록 했습니다. 그리고 mutate 함수를 통해 mutationFn의 fetchAxios가 실행되며 수정된 일기가 서버로 전송됩니다.
onSuccess는 patch가 성공적으로 완료되었을 때 실행됩니다. 일기 수정이 성공적으로 끝나면 수정된 일기 상세 페이지로 이동하도록 했습니다.
onError는 patch에 실패했을 때 실행되는데 에러 메시지를 콘솔창에 띄워주도록 했습니다.
2️⃣ useTodayDate 훅 생성
158 이슈의 문제를 해결하고자 서버에서 제공해주는 날짜 데이터를 이용하도록 변경하기 위해
/api/main/today-date
api를 적용했습니다.이 api는 일기 상세 페이지 외에도 메인/작성/수정 페이지에서 사용되고 있어 Tanstack query를 사용한 useTodayDate 훅으로 만들어 사용하면 api 중복 요청을 해결하고 작성할 코드도 줄어듭니다.
아래가 useTodayDate 코드 입니다.
useQuery 의 isError를 통해 오늘 날짜 정보를 가져오는데 실패했을 경우 콘솔 창에 에러메시지가 나타나도록 했습니다. 사용할 땐 아래처럼 사용합니다.
date이름으로 retrun 하기 때문에 date 이름을 바로 사용할 수 있습니다. 오늘의 날짜 정보가 필요한 상세/메인/수정 페이지에 적용해두었습니다! -> (추가) 작성 페이지에도 적용완료했습니다!**
🚨 버그 발생 이유 (선택 사항)
1️⃣ localStroage의 lastWritingDate 사라짐 현상 해결
용호님이 발견해주신 #151 오류를 해결했습니다.
제가 예전에 일기 작성, 수정 테스트를 진행하면서 매번 개발자 도구를 통해 localStroage의 lastWritingDate를 삭제해주는 게 불편해 수정 페이지로 이동할 때 lastWritingDate 가 삭제되는 코드를 작성해두었었습니다. PR 올릴 때 이 코드를 제거하는 것을 깜박해 발생한 오류입니다..!
해당 코드를 지우고 정상 동작 확인했습니다!
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
📚 참고 자료 (선택 사항)
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: Close #88 Close #151 Close #158