Refactor/92 메인페이지 삭제 로직 반영 및 Tanstack Query 도입 #112
Conversation
Walkthrough이 변경사항은 경험(Experience) 관련 컴포넌트와 API 유틸리티를 TanStack Query(React Query) 기반의 선언적 데이터 패칭 방식으로 리팩터링하고, 관련 타입을 명확히 했습니다. 또한 활동 삭제 시 쿼리 무효화 범위를 확장하고, 일부 인터페이스 및 반환 타입을 개선했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ExperienceList
participant TanStackQuery
participant API
User->>ExperienceList: 페이지 진입/필터 변경
ExperienceList->>TanStackQuery: useQuery로 experiences 요청
TanStackQuery->>API: getExperiences 호출
API-->>TanStackQuery: { experiences, totalCount } 반환
TanStackQuery-->>ExperienceList: 데이터/로딩/에러 상태 전달
ExperienceList-->>User: UI 렌더링 (로딩/에러/목록)
sequenceDiagram
participant User
participant PopularExperiences
participant TanStackQuery
participant API
User->>PopularExperiences: 컴포넌트 마운트
PopularExperiences->>TanStackQuery: useQuery로 popularExperiences 요청
TanStackQuery->>API: getPopularExperiences 호출
API-->>TanStackQuery: { activities } 반환
TanStackQuery-->>PopularExperiences: 데이터/로딩/에러 상태 전달
PopularExperiences-->>User: UI 렌더링 (로딩/에러/목록)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Possibly related PRs
Suggested labels
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
src/app/(with-header)/components/PopularExperiences.tsx (1)
53-65: JSX 구조를 단순화할 수 있습니다.
div와Link컴포넌트가 중복으로 래핑되어 있습니다. 구조를 단순화하여 가독성을 향상시킬 수 있습니다.- {data.activities.map((exp) => ( - <div key={exp.id} className='flex-shrink-0 card'> - <Link href={`/activities/${exp.id}`} className='flex-shrink-0 card'> - <PopularCard - imageUrl={exp.bannerImageUrl} - price={exp.price} - rating={exp.rating} - reviews={exp.reviewCount} - title={exp.title} - /> - </Link> - </div> - ))} + {data.activities.map((exp) => ( + <Link key={exp.id} href={`/activities/${exp.id}`} className='flex-shrink-0 card'> + <PopularCard + imageUrl={exp.bannerImageUrl} + price={exp.price} + rating={exp.rating} + reviews={exp.reviewCount} + title={exp.title} + /> + </Link> + ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.json(1 hunks)src/app/(with-header)/activities/[id]/hooks/useDeleteActivity.ts(1 hunks)src/app/(with-header)/components/ExperienceList.tsx(3 hunks)src/app/(with-header)/components/PopularExperiences.tsx(3 hunks)src/app/api/experiences/getExperiences.ts(2 hunks)src/app/api/experiences/getPopularExperiences.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/api/experiences/getPopularExperiences.ts (2)
src/types/experienceListTypes.ts (2)
Experience(1-14)ExperienceResponse(16-20)src/apis/instance.ts (1)
instance(100-100)
src/app/api/experiences/getExperiences.ts (1)
src/types/experienceListTypes.ts (2)
ExperienceResponse(16-20)Experience(1-14)
🔇 Additional comments (13)
package.json (1)
49-49: 사소한 포맷팅 개선입니다.파일 끝의 개행 문자 제거는 코드 스타일 일관성을 위한 정리 작업입니다.
src/app/api/experiences/getExperiences.ts (2)
11-22: 타입 정의가 명확해졌습니다.서버 응답과 프론트엔드 사용 타입을 명확히 구분한 것이 좋습니다. 특히
ExperienceListResult인터페이스로 useQuery의 제네릭 타입을 명시한 점이 훌륭합니다.
28-33: 함수 시그니처 개선이 좋습니다.매개변수 구조분해와 명시적 반환 타입 선언으로 가독성과 타입 안전성이 향상되었습니다.
src/app/(with-header)/activities/[id]/hooks/useDeleteActivity.ts (1)
18-20: 캐시 무효화 전략이 잘 구현되었습니다.삭제 후 관련된 모든 쿼리를 무효화하여 메인 페이지의 체험 리스트와 인기 체험 목록에서 삭제가 즉시 반영되도록 한 것이 PR 목표와 정확히 일치합니다.
exact: false옵션으로 다양한 파라미터를 가진 체험 리스트 쿼리들을 모두 무효화하는 것도 적절합니다.src/app/api/experiences/getPopularExperiences.ts (2)
4-6: 인터페이스 단순화가 적절합니다.인기 체험 조회에서 불필요한
cursorId와totalCount필드를 제거하여 인터페이스를 단순화한 것이 좋습니다.
14-16: cursor 기반 첫 페이지 호출 확인 완료
PopularExperiencesResponse타입에 별도cursorId나nextCursor필드가 없고, 초기 페이지 조회용으로만 설계되어 있으므로method: 'cursor'와size: 12변경은 서버 API 스펙에 부합하며,cursorId없이도 정상 동작합니다.src/app/(with-header)/components/PopularExperiences.tsx (2)
5-7: TanStack Query 도입이 성공적으로 완료되었습니다.
useState와useEffect대신useQuery를 사용하여 선언적 데이터 패칭으로 개선했습니다. 불필요한 imports도 깔끔하게 정리되었습니다.
16-19: 쿼리 설정이 적절합니다.쿼리 키와 함수 설정이 올바르며, 캐시 무효화 전략과도 일치합니다.
src/app/(with-header)/components/ExperienceList.tsx (5)
3-11: 임포트 구성이 잘 정리되었습니다.TanStack Query 도입에 따른 임포트 변경사항이 적절하고, 관련 임포트들이 논리적으로 그룹화되어 가독성이 향상되었습니다.
ExperienceListResult타입 임포트로 API 응답의 타입 안정성도 확보되었습니다.
29-40: TanStack Query 구현이 우수합니다.쿼리 키에 모든 관련 의존성이 포함되어 적절한 캐싱과 리페칭이 보장되며,
placeholderData옵션으로 리페칭 중 UI 깜빡임을 방지한 것이 좋습니다. 타입 명시도 타입 안정성을 확보했습니다.
42-44: 데이터 추출 로직이 안전합니다.옵셔널 체이닝과 적절한 기본값 설정으로 안전한 데이터 접근이 보장되어, 데이터가 로딩 중이거나 에러 상태일 때도 UI가 안정적으로 동작할 수 있습니다.
90-108: 로딩과 에러 상태 처리가 적절합니다.로딩, 에러, 성공 상태에 대한 조건부 렌더링이 명확하고, 사용자 친화적인 메시지로 UX가 개선되었습니다. 데이터가 있을 때만 그리드를 렌더링하는 구조도 안전합니다.
24-120: 전체적으로 성공적인 리팩터링입니다.기존 기능을 모두 유지하면서 TanStack Query를 성공적으로 도입했습니다. 선언적 데이터 관리로 코드가 더 간결해졌고, 쿼리 캐시 무효화를 통한 삭제 로직 반영도 자동으로 처리될 것입니다. PR 목표에 완벽히 부합하는 구현입니다.
| if (isLoading) return <p className="text-center">인기 체험을 불러오는 중입니다...</p>; | ||
| if (error || !data) return <p className="text-center text-red-500">데이터를 불러오는 데 실패했어요 😢</p>; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
로딩 및 에러 상태 처리를 개선할 수 있습니다.
현재 로딩 메시지와 에러 메시지가 단순합니다. 사용자 경험 향상을 위해 더 구체적인 피드백을 제공하는 것을 고려해보세요.
- if (isLoading) return <p className="text-center">인기 체험을 불러오는 중입니다...</p>;
- if (error || !data) return <p className="text-center text-red-500">데이터를 불러오는 데 실패했어요 😢</p>;
+ if (isLoading) return (
+ <div className="text-center py-10">
+ <div className="animate-pulse">인기 체험을 불러오는 중입니다...</div>
+ </div>
+ );
+ if (error || !data) return (
+ <div className="text-center py-10 text-red-500">
+ <p>인기 체험을 불러오는 데 실패했습니다.</p>
+ <button onClick={() => window.location.reload()} className="mt-2 text-blue-500 underline">
+ 다시 시도
+ </button>
+ </div>
+ );📝 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.
| if (isLoading) return <p className="text-center">인기 체험을 불러오는 중입니다...</p>; | |
| if (error || !data) return <p className="text-center text-red-500">데이터를 불러오는 데 실패했어요 😢</p>; | |
| if (isLoading) return ( | |
| <div className="text-center py-10"> | |
| <div className="animate-pulse">인기 체험을 불러오는 중입니다...</div> | |
| </div> | |
| ); | |
| if (error || !data) return ( | |
| <div className="text-center py-10 text-red-500"> | |
| <p>인기 체험을 불러오는 데 실패했습니다.</p> | |
| <button | |
| onClick={() => window.location.reload()} | |
| className="mt-2 text-blue-500 underline" | |
| > | |
| 다시 시도 | |
| </button> | |
| </div> | |
| ); |
🤖 Prompt for AI Agents
In src/app/(with-header)/components/PopularExperiences.tsx around lines 36 to
37, improve the loading and error state handling by replacing the simple text
messages with more informative and user-friendly feedback. Enhance the loading
message to indicate what is being loaded specifically and consider adding retry
options or detailed error information in the error message to improve user
experience.
| interface ExperienceResponse { | ||
| activities: Experience[]; | ||
| totalCount: number; | ||
| cursorId: number; | ||
| } |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
타입 중복 가능성을 확인해주세요.
src/types/experienceListTypes.ts에 이미 ExperienceResponse 인터페이스가 정의되어 있는 것으로 보입니다. 타입 정의 중복을 피하기 위해 기존 타입을 재사용하거나 통합하는 것을 고려해보세요.
다음 스크립트로 타입 중복을 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash
# 중복된 ExperienceResponse 인터페이스 정의 확인
rg -A 5 "interface ExperienceResponse" --type tsLength of output: 684
타입 중복 제거: 기존 ExperienceResponse 타입 재사용
src/app/api/experiences/getExperiences.ts(12–16)에서 로컬로 정의된 ExperienceResponse와
src/types/experienceListTypes.ts의 동일 인터페이스가 중복되어 있습니다.
기존 타입을 import해서 중복 정의를 제거해주세요.
- 파일: src/app/api/experiences/getExperiences.ts
- 위치: 12–16행
--- src/app/api/experiences/getExperiences.ts
@@ 12,16
- interface ExperienceResponse {
- activities: Experience[];
- totalCount: number;
- cursorId: number;
- }
+ import type { ExperienceResponse } from '../../../types/experienceListTypes';🤖 Prompt for AI Agents
In src/app/api/experiences/getExperiences.ts at lines 12 to 16, the
ExperienceResponse interface is redundantly defined locally while the same
interface exists in src/types/experienceListTypes.ts. Remove the local
ExperienceResponse definition and import the ExperienceResponse type from
src/types/experienceListTypes.ts to eliminate duplication and maintain
consistency.
minimo-9
left a comment
minimo-9
left a comment
There was a problem hiding this comment.
삭제 로직과 Tanstack Query를 잘 도입하셨네요!
📌 변경 사항 개요
삭제한 체험이 메인 페이지의 모든 체험 및 인기 체험 목록에서 반영되도록 함
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
리팩터링
버그 수정
기타