[bugfix] 에러 처리 추가

[yeonjin719]

🚨 관련 이슈

#115

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

• 에러 처리 로딩 처리 추가

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

[coderabbitai]

Caution

Review failed

The pull request is closed.

Summary by CodeRabbit

• New Features

  • 데이터 로딩 중 스피너 표시로 진행 상태를 안내합니다.
  • 데이터 오류 발생 시 에러 페이지로 자동 이동합니다.
  • 데이트 코스 검색에 추가 필터(시간대, 장소, 식사, 이동수단, 키워드, 시작시간)를 적용합니다.

• Bug Fixes

  • 페이지네이션 표기 일관성 개선: 내부 0기반, UI는 1기반으로 정확히 표시합니다.
  • 로딩/오류 상태에서의 버튼 표시를 안정화하여 예외 상황에서도 자연스럽게 동작합니다.
  • 목록과 네비게이터가 로딩 완료 후에만 렌더링되도록 처리했습니다.

Walkthrough

데이터 페칭에 로딩/에러 처리를 추가하고 페이지 인덱싱을 0 기반으로 정렬했습니다. Navigate로 에러 라우팅, ClipLoader로 로딩 표시를 도입했습니다. 훅 사용을 isLoading/error 반환 형태로 갱신하고, 페이지네이션 표시 값은 1 기반으로 변환해 전달합니다.

Changes

Cohort / File(s)	Change Summary
로딩/에러 처리 도입 src/components/modal/dateCourseSearchFilterModal.tsx, src/pages/dateCourse/CoursePage.tsx, src/pages/dateCourse/FindDateCourse.tsx	Navigate를 통한 /error 리다이렉트 추가, ClipLoader로 로딩 표시. 데이터 훅에서 isLoading/error 사용.
페이지 인덱싱 조정 src/components/modal/dateCourseSearchFilterModal.tsx, src/pages/dateCourse/CoursePage.tsx, src/pages/dateCourse/FindDateCourse.tsx	내부 상태 및 공통 파라미터의 page를 0 기반으로 변경; UI 컴포넌트(Navigator)에는 current+1 전달.
데이터 훅 시그널 확장 반영 src/pages/dateCourse/CoursePage.tsx, src/pages/dateCourse/FindDateCourse.tsx	useGetBookmarkedCourse/useGetCourse 호출부를 data/isLoading/error 패턴으로 수정.
모달 액션 렌더링 변경 src/components/modal/dateCourseSearchFilterModal.tsx	기존 정적 버튼을 로딩 중에는 ClipLoader, 완료 시 버튼으로 조건부 렌더링.
필터 파라미터 확장 src/pages/dateCourse/CoursePage.tsx, src/pages/dateCourse/FindDateCourse.tsx	dateDurationTime, datePlaces, mealTypes, transportation, userPreferredKeywords, startTime 등 추가 필터를 훅 호출에 전달.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant C as Page/Modal Component
  participant H as Data Hook
  participant API as Backend
  participant R as Router

  U->>C: 페이지 진입/필터 적용
  C->>H: fetch({ page(0-based), filters })
  H->>API: GET /date-courses
  H-->>C: { data?, isLoading, error }

  alt error
    C->>R: Navigate(/error, replace)
  else loading
    C-->>U: ClipLoader 표시
  else success
    C-->>U: 리스트/네비게이터 렌더 (current+1)
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 2c6ff24 and a1f29bc.

📒 Files selected for processing (3)

• src/components/modal/dateCourseSearchFilterModal.tsx (4 hunks)
• src/pages/dateCourse/CoursePage.tsx (4 hunks)
• src/pages/dateCourse/FindDateCourse.tsx (4 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.