[Feat] 모임 수정 페이지 작업 #231
[Feat] 모임 수정 페이지 작업 #231
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Walkthrough그룹 서비스 API 인터페이스를 재설계하여 라우트 매개변수 처리를 정규화했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Layout as EditMeetupLayout
participant Page as EditMeetupPage
participant API as Group API
participant QueryClient as React Query
participant Router as Next.js Router
User->>Layout: 요청 /post-meetup/[groupId]
Layout->>Layout: 라우트 params 추출
Layout->>API: getGroupDetails(params)
API-->>Layout: 그룹 세부정보
Layout->>Layout: 호스트 여부 확인
alt 비호스트 && 완료됨
Layout->>Router: redirect(/post-meetup)
else 호스트 || 진행 중
Layout->>QueryClient: dehydrate & hydrate
Layout-->>Page: children with hydrated state
Page->>Page: groupId 추출
Page->>QueryClient: useGetGroupDetails(params)
QueryClient-->>Page: 기존 그룹 정보
Page->>Page: 폼 기본값 설정
User->>Page: 폼 수정 및 제출
Page->>API: editGroup(params, payload)
API-->>Page: CreateGroupResponse
Page->>QueryClient: 캐시 무효화
Page->>Router: replace(/groups/[id])
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📉 #231을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #231 +/- ##
===========================================
- Coverage 38.44% 38.32% -0.12%
===========================================
Files 164 165 +1
Lines 7238 7266 +28
Branches 300 301 +1
===========================================
+ Hits 2783 2785 +2
+ Misses 4455 4481 +26 영향받은 파일
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
src/api/service/group-service/index.tssrc/app/post-meetup/[groupId]/layout.tsxsrc/app/post-meetup/[groupId]/page.tsxsrc/app/post-meetup/page.tsxsrc/hooks/use-group/use-group-attend/index.tssrc/hooks/use-group/use-group-delete/index.tssrc/hooks/use-group/use-group-edit/index.tssrc/hooks/use-group/use-group-get-details/index.tssrc/hooks/use-group/use-group-leave/index.tssrc/lib/schema/group.tssrc/types/service/group.ts
🧰 Additional context used
🧬 Code graph analysis (6)
src/hooks/use-group/use-group-delete/index.ts (2)
src/types/service/group.ts (1)
GroupIdParams(204-206)src/api/index.ts (1)
API(22-22)
src/hooks/use-group/use-group-get-details/index.ts (2)
src/types/service/group.ts (1)
GroupIdParams(204-206)src/lib/query-key/query-key-group/index.ts (1)
groupKeys(1-10)
src/hooks/use-group/use-group-edit/index.ts (3)
src/types/service/group.ts (2)
GroupIdParams(204-206)CreateGroupPayload(91-105)src/api/index.ts (1)
API(22-22)src/lib/query-key/query-key-group/index.ts (1)
groupKeys(1-10)
src/hooks/use-group/use-group-leave/index.ts (2)
src/types/service/group.ts (1)
GroupIdParams(204-206)src/lib/query-key/query-key-group/index.ts (1)
groupKeys(1-10)
src/hooks/use-group/use-group-attend/index.ts (3)
src/types/service/group.ts (1)
GroupIdParams(204-206)src/api/index.ts (1)
API(22-22)src/lib/query-key/query-key-group/index.ts (1)
groupKeys(1-10)
src/app/post-meetup/[groupId]/layout.tsx (2)
src/api/index.ts (1)
API(22-22)src/lib/query-key/query-key-group/index.ts (1)
groupKeys(1-10)
🪛 Biome (2.1.2)
src/app/post-meetup/[groupId]/page.tsx
[error] 76-76: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 77-77: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 78-78: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 80-80: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 83-83: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 85-85: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 88-88: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
[error] 92-92: Avoid passing children using a prop
The canonical way to pass children in React is to use JSX elements
(lint/correctness/noChildrenProp)
🔇 Additional comments (12)
src/app/post-meetup/page.tsx (2)
33-33: LGTM!새로운
joinPolicy필드가 올바르게 기본값으로 추가되었습니다.
44-44: LGTM!폼 값을 직접 전달하도록 단순화되었습니다. 타입이 이미 일치하므로 스프레드 연산자가 필요하지 않습니다.
src/types/service/group.ts (2)
104-104: LGTM!
CreateGroupPayload에joinPolicy필드가 올바르게 추가되었습니다.
204-205: LGTM!
GroupIdPayload를GroupIdParams로 명확하게 이름을 변경했습니다.src/lib/schema/group.ts (1)
28-28: LGTM!
joinPolicy필드에 대한 검증이 올바르게 추가되었습니다. Zod 리터럴 유니온 사용이 적절합니다.src/hooks/use-group/use-group-get-details/index.ts (1)
5-10: LGTM!
GroupIdPayload에서GroupIdParams로의 리팩토링이 올바르게 적용되었습니다.src/hooks/use-group/use-group-delete/index.ts (1)
4-8: LGTM!
GroupIdParams리팩토링이 일관되게 적용되었습니다.src/hooks/use-group/use-group-leave/index.ts (1)
5-13: LGTM!
GroupIdParams리팩토링이 올바르게 적용되었습니다. 모든 참조가 일관되게 업데이트되었습니다.src/app/post-meetup/[groupId]/page.tsx (1)
76-88: Biome 경고는 무시해도 됨 - @tanstack/react-form의 의도된 패턴
childrenprop 사용에 대한 Biome 경고는 @tanstack/react-form의Field컴포넌트가 render prop 패턴으로 설계되었기 때문에 발생하는 false positive입니다. 이 라이브러리에서는 이 방식이 공식 문서에서 권장하는 사용법입니다.src/hooks/use-group/use-group-attend/index.ts (1)
5-13: LGTM!
GroupIdPayload에서GroupIdParams로의 타입 변경과 파라미터 이름 변경이 일관되게 적용되었습니다. API 호출과 캐시 무효화 로직 모두 올바르게 업데이트되었습니다.src/api/service/group-service/index.ts (2)
46-48: LGTM!
editGroup메서드가 PATCH 메서드를 사용하여 올바르게 구현되었습니다.CreateGroupResponse를 반환 타입으로 사용하는 것은 수정 후 생성된 리소스 정보를 반환하는 일반적인 패턴입니다.
50-64: 리팩토링이 일관되게 적용됨
GroupIdPayload에서GroupIdParams로의 네이밍 변경이 모든 메서드에 일관되게 적용되었습니다. 라우트 파라미터와 요청 페이로드를 명확히 구분하는 좋은 개선입니다.
| const { data } = useGetGroupDetails({ groupId }); | ||
| const { mutateAsync: EditGroup } = useEditGroup({ groupId }); | ||
|
|
||
| const { | ||
| title, | ||
| address: { location }, | ||
| startTime, | ||
| tags, | ||
| description, | ||
| maxParticipants, | ||
| images, | ||
| } = data as GetGroupDetailsResponse; |
There was a problem hiding this comment.
data가 undefined일 경우 런타임 에러 발생 가능
useGetGroupDetails가 로딩 중이거나 에러 상태일 때 data가 undefined일 수 있습니다. 타입 단언(as GetGroupDetailsResponse)으로 이를 무시하면 구조 분해 할당 시 런타임 에러가 발생합니다.
레이아웃에서 prefetch와 권한 체크를 수행한다고 해도, 클라이언트 컴포넌트에서는 데이터 로딩 상태를 명시적으로 처리하는 것이 안전합니다.
🔎 제안된 수정 사항
const { data } = useGetGroupDetails({ groupId });
- const { mutateAsync: EditGroup } = useEditGroup({ groupId });
- const {
- title,
- address: { location },
- startTime,
- tags,
- description,
- maxParticipants,
- images,
- } = data as GetGroupDetailsResponse;
+ const { mutateAsync: EditGroup } = useEditGroup({ groupId });
+
+ if (!data) {
+ return null; // 또는 로딩 스피너
+ }
+
+ const {
+ title,
+ address: { location },
+ startTime,
+ tags,
+ description,
+ maxParticipants,
+ images,
+ } = data;📝 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.
| const { data } = useGetGroupDetails({ groupId }); | |
| const { mutateAsync: EditGroup } = useEditGroup({ groupId }); | |
| const { | |
| title, | |
| address: { location }, | |
| startTime, | |
| tags, | |
| description, | |
| maxParticipants, | |
| images, | |
| } = data as GetGroupDetailsResponse; | |
| const { data } = useGetGroupDetails({ groupId }); | |
| const { mutateAsync: EditGroup } = useEditGroup({ groupId }); | |
| if (!data) { | |
| return null; // 또는 로딩 스피너 | |
| } | |
| const { | |
| title, | |
| address: { location }, | |
| startTime, | |
| tags, | |
| description, | |
| maxParticipants, | |
| images, | |
| } = data; |
🤖 Prompt for AI Agents
In src/app/post-meetup/[groupId]/page.tsx around lines 31 to 42, you destructure
fields from data using a type assertion which will throw if data is undefined
during loading or error; guard against undefined by checking data before
destructuring (e.g., return a loading/error UI or early return when !data), or
provide safe defaults/optional chaining when extracting nested fields
(address?.location) and only call useEditGroup when groupId/data is present;
update the code to handle loading and error states explicitly instead of
assuming data exists.
There was a problem hiding this comment.
근데 진지하게 수정 페이지에서 data가 undefined 이면 그냥 터지는게 맞는게 아닐까?
There was a problem hiding this comment.
@HopeFullee, 좋은 지적이십니다. 타당한 관점입니다.
레이아웃에서 prefetch와 권한 검증을 통해 데이터가 보장된다면, data가 undefined인 상황은 정상적인 로딩 상태가 아니라 시스템 오류를 의미합니다. 이 경우 "fail fast" 원칙에 따라 일찍 터져서 문제를 명확히 드러내는 것이 오히려 더 나은 선택일 수 있습니다.
이 접근의 장점:
- 버그나 아키텍처 문제를 즉시 발견 가능
- 불가능한 상태를 조용히 처리하면서 실제 문제를 숨기지 않음
- 레이아웃의 보장이 깨졌을 때 명확한 신호
고려사항:
- 하이드레이션 불일치나 네트워크 일시적 오류 같은 엣지 케이스에서도 크래시 발생
- 사용자 경험 측면에서는 로딩 상태가 더 우아할 수 있음
하지만 아키텍처 설계 의도를 고려하면 현재 코드가 맞습니다. 제안을 무시하셔도 됩니다. 👍
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| console.log('모임 생성 성공.'); | ||
| }, | ||
| onError: () => { | ||
| console.log('모임 생성 실패.'); |
There was a problem hiding this comment.
콘솔 메시지가 편집이 아닌 생성을 참조하고 있습니다.
성공 및 오류 콘솔 로그에 "모임 생성"이 표시되지만 이 훅은 모임을 편집하는 것입니다. 올바른 메시지로 수정해주세요.
🔎 제안된 수정
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: groupKeys.detail(params.groupId) });
- console.log('모임 생성 성공.');
+ console.log('모임 수정 성공.');
},
onError: () => {
- console.log('모임 생성 실패.');
+ console.log('모임 수정 실패.');
},🤖 Prompt for AI Agents
In src/hooks/use-group/use-group-edit/index.ts around lines 15 to 18, the
success and error console logs currently say "모임 생성 성공." and "모임 생성 실패." even
though this hook performs group editing; change both messages to refer to
editing (e.g., "모임 수정 성공." and "모임 수정 실패."). Ensure you update the onSuccess and
onError console.log strings accordingly so logs correctly reflect the edit
operation.
There was a problem hiding this comment.
올 ㅋ create hook 복사해와서 수정한건데 이걸 잡네
There was a problem hiding this comment.
@HopeFullee 복사-붙여넣기할 때 이런 실수는 흔하죠! 😄 수정해주시면 감사하겠습니다!
(\(\
(=^.^=)
(")_(")
코드 레빗이 처음으로 도움이된 건 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
📝 변경 사항
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선사항
✏️ Tip: You can customize this high-level summary in your review settings.