feat-fe: 공고폼 임시 저장 기능 구현

[github-actions]

Original issue description

목적

공고, 지원서 입력 폼 임시 저장 기능 구현

작업 세부사항

• 브라우저 API를 활용하여 form 관련 정보를 임시 저장합니다.

참고 사항

• 해당 기능은 브라우저의 로컬스토리지 기능을 사용합니다.

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

---

auto-save-form

closes #953

⚒️ 변경사항

1. React Testing Library (RTL) 테스트 추가
   • useDashboardCreateForm 및 useLocalStorageState 훅에 대한 테스트를 강화.
   • 추가된 주요 테스트
     • localStorage 값이 존재하는 경우 이전 작성 데이터를 복원하는 로직 테스트.
     • localStorage 값이 없는 경우 초기값을 설정하고 동작하는지 검증.
     • confirm 호출로 사용자가 선택에 따라 저장된 데이터를 유지 또는 초기화하는 로직 테스트.
2. Lazy Loading 로직 임시 수정

   • AppRouter에서 발생한 중복 렌더링 문제로 인해 DashboardCreate 페이지의 Lazy Loading을 임시적으로 제거

   • 해당 임포트를 일반적인 동기 방식으로 변경하여 문제를 해결

     import DashboardCreate from '@pages/DashboardCreate';

   • 동적임포트를 사용하면 Confirm 로직이 4번 나타납니다. (예상값은 Strict Mode로 2번)

   • 아래는 동적 임포트 사용시 4번 Confirm 로직이 발생되는 부분 캡쳐

2024-12-24.11.06.36.mov

3. Mock Handler 수정

   • dashboardHandlers에서 clubId가 누락된 요청을 처리하도록 수정.

     if (!body.startDate || !body.endDate || !body.postingContent || !body.title || !clubId) {
       return new Response(null, { status: 400, statusText: 'The request body is missing required information.' });
     }

💬 논의 사항

1. 동적 임포트 문제
   1. 이 부분은 Development 환경에서만 발생되는 사항인지 잘 모르겠습니다.
   2. 제 생각엔 React-Router와의 Loading 충돌로 생각되는데, 명확하진 않습니다.
   3. 추후 진행해보고 싶은 사항은 React-Router 버전 업그레이드 이후, React-Router에서 제공하는 Lazy기능을 통해서 해결해보면 어떨까 싶습니다.
   4. 따로 이슈 파보도록 할게요

[github-actions]

1735006390.590399

[github-actions]

1735006392.370689

[github-actions]

1735006394.880659