search

CHZZK-Study / Grass-Diary-Client

취지직 2팀 프로젝트 Grass Diary
1 stars 3 forks source link

♻ refactor: EditDiary 페이지 Tanstack query 적용 및 localStroage의 lastWritingDate 사라짐 현상 해결 #159

Closed rkdcodus closed 2 months ago

rkdcodus commented 2 months ago

✅ 체크리스트

📝 작업 상세 내용

1️⃣ usePatchDiary 훅 생성

일기 수정 PATCH /api/diary/{diaryId} api를 axios에서 useMutation을 활용한 Tanstack query로 변경하였습니다. 

export const usePatchDiary = ({ diaryId, file, requestDto }: PatchDiaryProps) => {
  ... 
  return useMutation({
    mutationFn: () => fetchAxios({ diaryId, formData }),
    onSuccess() {
      navigate(`/diary/${diaryId}`, { replace: true, state: 'editcomplete' });
    },
    onError(error) {
      console.error(error.message);
    },
  });
};

usePatchDiary 훅은 수정할 일기의 diaryId, 이미지 파일, requestDto를 인수로 받습니다. 이 훅을 사용할 땐 아래처럼 mutate 함수를 사용해야합니다. 

  const { mutate } = usePatchDiary({ diaryId, file, requestDto });

mutate 함수는 일기 수정이 끝난 후 저장버튼을 눌렀을 때 실행되도록 했습니다. 그리고 mutate 함수를 통해 mutationFn의 fetchAxios가 실행되며 수정된 일기가 서버로 전송됩니다.

onSuccess는 patch가 성공적으로 완료되었을 때 실행됩니다. 일기 수정이 성공적으로 끝나면 수정된 일기 상세 페이지로 이동하도록 했습니다.

onError는 patch에 실패했을 때 실행되는데 에러 메시지를 콘솔창에 띄워주도록 했습니다.

2️⃣ useTodayDate 훅 생성

158 이슈의 문제를 해결하고자 서버에서 제공해주는 날짜 데이터를 이용하도록 변경하기 위해 /api/main/today-date api를 적용했습니다.

이 api는 일기 상세 페이지 외에도 메인/작성/수정 페이지에서 사용되고 있어 Tanstack query를 사용한 useTodayDate 훅으로 만들어 사용하면 api 중복 요청을 해결하고 작성할 코드도 줄어듭니다.

아래가 useTodayDate 코드 입니다.

// TodayDate 타입은 types/today.ts 에 위치
interface TodayDate {
  year: number;
  month: number;
  date: number;
  day: string;
}

export const useTodayDate = () => {
  const { data: date, isError, error } = useQuery<TodayDate, AxiosError, TodayDate, [string]>({
    queryKey: ['todayDate'],
    queryFn: fetchAxios,
  });

  if (isError) console.error(CONSOLE_ERROR.DATE.GET + error.message);

  return { date };
};

useQuery 의 isError를 통해 오늘 날짜 정보를 가져오는데 실패했을 경우 콘솔 창에 에러메시지가 나타나도록 했습니다. 사용할 땐 아래처럼 사용합니다. 

const { date } = useTodayDate();

date이름으로 retrun 하기 때문에 date 이름을 바로 사용할 수 있습니다. 오늘의 날짜 정보가 필요한 상세/메인/수정 페이지에 적용해두었습니다! -> (추가) 작성 페이지에도 적용완료했습니다!**

🚨 버그 발생 이유 (선택 사항)

1️⃣ localStroage의 lastWritingDate 사라짐 현상 해결

용호님이 발견해주신 #151 오류를 해결했습니다.

제가 예전에 일기 작성, 수정 테스트를 진행하면서 매번 개발자 도구를 통해 localStroage의 lastWritingDate를 삭제해주는 게 불편해 수정 페이지로 이동할 때 lastWritingDate 가 삭제되는 코드를 작성해두었었습니다. PR 올릴 때 이 코드를 제거하는 것을 깜박해 발생한 오류입니다..!

해당 코드를 지우고 정상 동작 확인했습니다!

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

이슈 번호: Close #88 Close #151 Close #158