🔨fix: 작성페이지 접근 불가 오류 수정

[rkdcodus]

✅ 체크리스트

• [x] 작성페이지 접근 오류 해결
• [x] 작성, 수정 기능 분리

📝 작업 상세 내용

1️⃣ CreateDiary 에서 수정 기능 분리

EditDiary 컴포넌트를 생성해 본래 CreateDiary에서 수정기능을 분리했습니다.
한 컴포넌트 내 여러 기능을 가지고 있으면 복잡성이 증가해 코드 이해가 어려워지고 기능 변경이 어려워집니다. 따라서 가독성, 유지보수를 위해 분리하였고 버그도 해결되었습니다.

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

1️⃣ 버그 원인

작성페이지 접근 오류가 발생했던 이유는 useParamsId의 diaryId 예외처리 부분 때문이었습니다. useParamsId는 url의 파라미터인 diaryId가 유효한 값인지 판단하고 숫자 타입으로 리턴합니다.

export const useParamsId = () => {
  const { diaryId } = useParams();
  const diaryId_num = Number(diaryId);
  const navigate = useNavigate();

  useEffect(() => {
    if (Number.isNaN(diaryId_num) || diaryId_num === 0) {
      navigate('/non-existent-page');
    }
  }, [diaryId_num]);

  return diaryId_num;
};

CreateDiary 컴포넌트에는 작성과 수정기능이 함께 들어있었습니다.

• 작성 시 주소창: /creatediary
• 수정 시 주소창: /editdiary/:diaryId

그리고 이처럼 작성 기능일 때와 수정 기능일 때의 주소창은 형태가 다릅니다. 이 주소창을 기준으로 작성인지 수정인지 판단했습니다. 주소창 url의 파라미터에서 diaryId가 들어있다면 수정 페이지로 판단하여 수정 시의 코드가 실행됩니다.

이 diaryId를 가져오긴 위해선 유효한 숫자인지 판단하고 타입을 변경하는 과정을 거쳐야하기 때문에 CreateDiary 컴포넌트 내 useParamsId 훅을 사용했습니다. 하지만 작성페이지의 주소창에는 당연히 diaryId가 들어있지 않아 undefined로 자동 예외처리되어 non-existent-diary 페이지로 이동되는 버그가 발생했습니다.

🔎 후속 작업 (선택 사항)

CreateDiary와 EditDiary에 중복되는 코드가 많습니다. 리팩토링을 통해 중복되는 것은 컴포넌트로 분리해 재사용하면 좋을 것 같습니다!

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

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

📸 스크린샷 (선택 사항)

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

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #154