Fix: 예약 거절 시 캐시 무효화 #511
Fix: 예약 거절 시 캐시 무효화 #511
Conversation
Walkthrough이번 변경에서는 예약 캘린더의 DayCell 컴포넌트에서 거절(reject) mutation 성공 시 캐시 무효화 키를 수정했습니다. 또한 Storybook의 정적 파일 제공 설정을 비활성화하고, 빌드 스크립트에 Storybook 정적 파일을 Next.js 출력 폴더에 빌드하도록 명령을 추가했습니다. 마지막으로, Vercel 설정에 Storybook UI 접근을 위한 rewrite 규칙을 추가했습니다. 그리고 Storybook 접근을 위한 React 클라이언트 리디렉션 컴포넌트가 새로 도입되었으며, 활동 삭제 후 캐시 무효화 범위가 확대되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DayCell Component
participant Mutation (reject)
participant QueryClient
User->>DayCell Component: 예약 거절 액션 실행
DayCell Component->>Mutation (reject): reject mutation 호출
Mutation (reject)-->>DayCell Component: onSuccess 콜백 실행
DayCell Component->>QueryClient: invalidate ['allReservationsByDate', selectedActivityId, day.format('YYYY-MM-DD')]
DayCell Component->>QueryClient: invalidate ['schedules']
DayCell Component->>QueryClient: invalidate ['reservationDashboard']
sequenceDiagram
participant User
participant StorybookRedirect Component
participant Router
User->>StorybookRedirect Component: /storybook 경로 접근
StorybookRedirect Component->>Router: router.replace('/storybook/index.html')
Router-->>User: 페이지 리디렉션 완료
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-q3svnxvgf-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-af1ojurkz-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-j9jfkihkk-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-ooi1nou46-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-91xe4ziz1-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
✅ Preview Deployment Ready!🔗 Preview URL: https://roam-ready-6s80yfnql-yongmins-projects-bf5f7733.vercel.app This preview will be automatically updated on new commits. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/storybook/page.tsx (1)
6-12: 컴포넌트 구현이 깔끔하지만 몇 가지 개선점이 있습니다.Storybook 리다이렉트 컴포넌트가 잘 구현되었습니다. 다만 다음 개선사항들을 고려해보세요:
- SEO 최적화를 위한 로딩 상태 표시
- 리다이렉트 실패 시 에러 처리
- 접근성을 위한 적절한 메타데이터 추가
개선된 구현 예시:
export default function StorybookRedirect() { const router = useRouter(); + useEffect(() => { - router.replace('/storybook/index.html'); - }, []); - return null; + router.replace('/storybook/index.html'); + }, [router]); + + return ( + <div> + <p>Storybook으로 리다이렉트 중...</p> + </div> + ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.storybook/main.ts(1 hunks)src/app/storybook/page.tsx(1 hunks)src/domain/Activity/components/detail/activity-summary/ActivityDropdown.tsx(1 hunks)src/domain/Reservation/components/my-activity-card/DeleteMyActivityModal.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/domain/Activity/components/detail/activity-summary/ActivityDropdown.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- .storybook/main.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Yongmin0423
PR: codeit-FE-15-Part4-Team1/RoamReady#367
File: src/domain/Reservation/components/reservation-calendar/DayCell.tsx:180-180
Timestamp: 2025-07-30T05:52:34.014Z
Learning: Yongmin0423은 기본 기능 구현을 우선순위로 두고, 사용자 경험 개선(토스트 알림 등)은 리팩토링 단계에서 처리하는 개발 방식을 선호합니다.
🔇 Additional comments (1)
src/domain/Reservation/components/my-activity-card/DeleteMyActivityModal.tsx (1)
32-32: 캐시 무효화 범위 확장이 적절합니다.
['carousel-activities']쿼리 키에 대한 캐시 무효화를 추가하여 활동 삭제 후 캐러셀 관련 데이터의 일관성을 보장하는 것은 좋은 개선사항입니다. 이는 다른 컴포넌트와의 일관성을 유지하고 사용자가 최신 데이터를 볼 수 있도록 합니다.
| useEffect(() => { | ||
| router.replace('/storybook/index.html'); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
useEffect 의존성 배열에 router 추가가 필요합니다.
React Hook 규칙에 따라 useEffect 내부에서 사용되는 router는 의존성 배열에 포함되어야 합니다.
useEffect(() => {
router.replace('/storybook/index.html');
- }, []);
+ }, [router]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| router.replace('/storybook/index.html'); | |
| }, []); | |
| useEffect(() => { | |
| router.replace('/storybook/index.html'); | |
| }, [router]); |
🤖 Prompt for AI Agents
In src/app/storybook/page.tsx around lines 8 to 10, the useEffect hook uses the
router object but does not include it in the dependency array. To comply with
React Hook rules, add router to the dependency array of useEffect to ensure the
effect runs correctly when router changes.
👻 관련 이슈 번호
👻 요약
👻 주요 변경 사항
👻 체크리스트
📷 UI 변경 사항
👻 문제 사항
👻 논의 사항
👻 기타 참고 사항
Summary by CodeRabbit
Chores
public/storybook디렉토리에 생성됩니다./storybook경로를 통해 Storybook UI에 접근할 수 있도록 설정이 추가되었습니다./storybook/로 설정됩니다./storybook/index.html로 리다이렉트되는 기능이 추가되었습니다.버그 수정