Feat/86 체험 수정 페이지 api 적용 #90
Conversation
Walkthrough이 변경사항은 활동(액티비티) 상세 정보의 수정 기능을 추가합니다. 새로운 편집 폼, 관련 커스텀 훅, 타입 정의, API 라우트, 그리고 페이지 컴포넌트가 도입되었으며, 기존 컴포넌트 일부도 수정되었습니다. 데이터 패칭, 캐시 무효화, 이미지 및 일정 관리 로직이 포함됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EditActivityForm
participant useEditActivityForm
participant API_Route
participant Backend
User->>EditActivityForm: 폼 입력 및 제출
EditActivityForm->>useEditActivityForm: handleSubmit 호출
useEditActivityForm->>API_Route: PATCH /api/editActivity/[id]
API_Route->>Backend: PATCH /my-activities/{id}
Backend-->>API_Route: 결과 반환
API_Route-->>useEditActivityForm: 응답 반환
useEditActivityForm->>EditActivityForm: 상태/알림 처리
useEditActivityForm->>User: 성공 시 상세 페이지로 이동
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🔇 Additional comments (2)
✨ 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: 12
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (8)
src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx(1 hunks)src/app/(with-header)/activities/[id]/components/Title.tsx(3 hunks)src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx(1 hunks)src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts(1 hunks)src/app/(with-header)/myactivity/[id]/page.tsx(1 hunks)src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx(2 hunks)src/app/api/editActivity/[id]/route.ts(1 hunks)src/types/activityDetailType.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx (2)
src/types/activityDetailType.ts (1)
Schedule(68-73)src/app/(with-header)/myactivity/components/ScheduleSelect.tsx (2)
ScheduleSelectProps(6-17)ScheduleSelect(19-78)
🪛 GitHub Actions: CI
src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
[warning] 40-40: no-console: Unexpected console statement. Only these console methods are allowed: warn, error.
[warning] 106-106: react/jsx-sort-props: Callbacks must be listed after all other props
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx
[error] 72-72: @typescript-eslint/no-explicit-any: Unexpected any. Specify a different type.
[warning] 42-42: react/jsx-sort-props: Callbacks must be listed after all other props
[warning] 45-60: react/jsx-sort-props: Props should be sorted alphabetically
[warning] 74-74: react/jsx-sort-props: Props should be sorted alphabetically
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
[warning] 29-44: react/jsx-sort-props: Callbacks must be listed after all other props or props should be sorted alphabetically
src/app/(with-header)/activities/[id]/components/Title.tsx
[warning] 1-1: simple-import-sort/imports: Run autofix to sort these imports!
src/app/api/editActivity/[id]/route.ts
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
🔇 Additional comments (13)
src/app/(with-header)/activities/[id]/components/ActivityDetailForm.tsx (1)
74-75: 공백 라인 추가가 적절합니다.코드 가독성을 위한 공백 라인 추가는 적절합니다.
src/app/(with-header)/activities/[id]/components/Title.tsx (3)
9-11: 필요한 훅 import가 적절히 추가되었습니다.편집 기능을 위한 navigation과 cache management에 필요한 훅들이 적절히 import되었습니다.
54-54: 편집 메뉴 아이템의 핸들러가 적절히 업데이트되었습니다.alert 대신 실제 편집 기능으로 연결되도록 핸들러가 적절히 변경되었습니다.
21-28: 편집 네비게이션 및 캐시 무효화 로직 검증 완료
src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts훅에서['edit-activity', id]쿼리 키 사용이 확인되었습니다.캐시 무효화 후 편집 페이지로 이동하는 로직이 적절하므로, 추가 수정 없이 승인합니다.
src/app/(with-header)/myactivity/components/ScheduleSelectForm.tsx (3)
4-4: 중앙화된 타입 시스템 사용이 적절합니다.
Schedule타입을 중앙 타입 정의에서 import하여 타입 일관성을 개선했습니다.
7-14: 타입 정의가 개선되었습니다.
Schedule[]타입 사용과keyof Omit<Schedule, 'id'>를 통한 더 정교한 콜백 타입 정의가 적절합니다. 옵셔널id필드를 제외한 Schedule 속성들만 변경 가능하도록 제한한 것이 좋은 접근입니다.
37-37: React key 처리가 적절히 개선되었습니다.
dateSlot.id ?? idx를 사용하여 기존 스케줄은 id를, 새로운 스케줄은 인덱스를 key로 사용하는 것이 적절합니다. 이는 React의 재렌더링 최적화에 도움이 됩니다.src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (5)
1-34: 폼 컴포넌트 구조가 잘 설계되었습니다.커스텀 훅을 사용한 상태 관리 분리와 적절한 구조분해 할당으로 깔끔한 컴포넌트 구조를 가지고 있습니다.
36-37: 로딩 및 에러 상태 처리가 적절합니다.Early return 패턴을 사용한 로딩과 에러 상태 처리가 적절합니다.
39-48: 폼 레이아웃과 제출 버튼 배치가 적절합니다.폼 구조와 헤더 영역의 제목과 제출 버튼 배치가 사용자 경험 관점에서 적절합니다.
50-61: InfoSection 컴포넌트 통합이 적절합니다.필요한 props를 적절히 전달하고 있으며, price 타입 변환 로직도 적절합니다.
63-68: ScheduleSelectForm 통합이 적절합니다.스케줄 관리를 위한 props 전달이 적절하게 구현되었습니다.
src/types/activityDetailType.ts (1)
68-87: 새로운 타입 정의가 잘 구성되었습니다.
Schedule과ActivityDetailEdit인터페이스가 수정 기능의 요구사항을 잘 반영하고 있습니다. 특히Schedule인터페이스의id를 optional로 한 것은 새로운 일정과 기존 일정을 모두 처리할 수 있어 적절합니다.
| import { useState, useEffect } from 'react'; | ||
| import { useParams, useRouter } from 'next/navigation'; | ||
| import { useQuery, useQueryClient } from '@tanstack/react-query'; | ||
| import { privateInstance } from '@/apis/privateInstance'; | ||
| import { uploadImage } from '../../utils/uploadImage'; | ||
| import { ActivityDetailEdit, Schedule } from '@/types/activityDetailType'; | ||
| import { AxiosError } from 'axios'; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
임포트 순서를 수정해주세요.
파이프라인에서 simple-import-sort/imports 경고가 발생했습니다. 임포트 순서를 정렬해주세요.
🧰 Tools
🪛 GitHub Actions: CI
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts around
lines 3 to 9, the import statements are not sorted according to the
simple-import-sort/imports rule. Reorder the imports by grouping them into
external packages first (like 'react', 'next/navigation',
'@tanstack/react-query', 'axios'), then absolute imports (starting with '@/'),
and finally relative imports (starting with './' or '../'), sorting each group
alphabetically to fix the warning.
| const handleSubmit = async (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
|
|
||
| try { | ||
| let bannerImageUrl = ''; | ||
| if (typeof mainImage === 'string') { | ||
| bannerImageUrl = mainImage; | ||
| } else if (mainImage instanceof File) { | ||
| bannerImageUrl = await uploadImage(mainImage); | ||
| } | ||
|
|
||
| const subImageIdsToRemove = originalSubImages | ||
| .filter((orig) => !subImages.some((img) => img.id === orig.id)) | ||
| .map((img) => img.id) | ||
| .filter((id): id is number => id !== undefined); | ||
|
|
||
| const subImageUrlsToAdd: string[] = []; | ||
|
|
||
| for (const img of subImages) { | ||
| if (!img.id) { | ||
| if (img.url instanceof File) { | ||
| const uploadedUrl = await uploadImage(img.url); | ||
| subImageUrlsToAdd.push(uploadedUrl); | ||
| } else if (typeof img.url === 'string') { | ||
| subImageUrlsToAdd.push(img.url); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const newSchedules = dates.filter((d) => !d.id); | ||
|
|
||
| const scheduleIdsToRemove = originalSchedules | ||
| .filter((orig) => !dates.some((d) => d.id === orig.id)) | ||
| .map((d) => d.id) | ||
| .filter((id): id is number => id !== undefined); | ||
|
|
||
| const payload = { | ||
| title, | ||
| category, | ||
| description, | ||
| address, | ||
| price, | ||
| bannerImageUrl, | ||
| subImageIdsToRemove, | ||
| subImageUrlsToAdd, | ||
| schedulesToAdd: newSchedules, | ||
| scheduleIdsToRemove, | ||
| }; | ||
|
|
||
| await privateInstance.patch(`/editActivity/${id}`, payload); | ||
|
|
||
| alert('수정이 완료되었습니다.'); //토스트로 대체 | ||
| queryClient.invalidateQueries({ queryKey: ['activity', id] }); | ||
| router.push(`/activities/${id}`); | ||
| } catch (err) { | ||
| const error = err as AxiosError; | ||
| const responseData = error.response?.data as | ||
| | { error?: string; message?: string } | ||
| | undefined; | ||
| console.error('전체 에러:', error); | ||
| alert( | ||
| //토스트로대체 | ||
| responseData?.error || | ||
| responseData?.message || | ||
| error.message || | ||
| '수정에 실패했습니다.', | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
폼 제출 중 로딩 상태 관리를 추가해보세요.
현재 폼 제출 중에 사용자가 중복 제출을 할 수 있고, 진행 상황을 알 수 없습니다. 로딩 상태를 관리하여 UX를 개선하는 것을 권장합니다.
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+ setIsSubmitting(true);
try {
// ... 기존 로직
} catch (err) {
// ... 에러 처리
+ } finally {
+ setIsSubmitting(false);
}
};그리고 반환 객체에 isSubmitting을 추가해주세요.
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts between
lines 103 and 171, the form submission handler lacks loading state management,
allowing users to submit multiple times and not see progress. Add a state
variable, e.g., isSubmitting, initialized to false. Set isSubmitting to true at
the start of handleSubmit and reset it to false in both success and error paths
to prevent duplicate submissions. Also, return isSubmitting from the hook so the
component can use it to disable the submit button and show loading indicators.
| bannerImageUrl = await uploadImage(mainImage); | ||
| } | ||
|
|
||
| const subImageIdsToRemove = originalSubImages | ||
| .filter((orig) => !subImages.some((img) => img.id === orig.id)) | ||
| .map((img) => img.id) | ||
| .filter((id): id is number => id !== undefined); | ||
|
|
||
| const subImageUrlsToAdd: string[] = []; | ||
|
|
||
| for (const img of subImages) { | ||
| if (!img.id) { | ||
| if (img.url instanceof File) { | ||
| const uploadedUrl = await uploadImage(img.url); | ||
| subImageUrlsToAdd.push(uploadedUrl); | ||
| } else if (typeof img.url === 'string') { | ||
| subImageUrlsToAdd.push(img.url); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
이미지 업로드 실패에 대한 에러 처리를 추가해보세요.
uploadImage 함수 호출 시 실패할 경우에 대한 에러 처리가 없습니다. 네트워크 오류나 서버 문제로 이미지 업로드가 실패하면 전체 폼 제출이 실패할 수 있습니다.
} else if (mainImage instanceof File) {
- bannerImageUrl = await uploadImage(mainImage);
+ try {
+ bannerImageUrl = await uploadImage(mainImage);
+ } catch (uploadError) {
+ console.error('메인 이미지 업로드 실패:', uploadError);
+ throw new Error('메인 이미지 업로드에 실패했습니다.');
+ }
}📝 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.
| bannerImageUrl = await uploadImage(mainImage); | |
| } | |
| const subImageIdsToRemove = originalSubImages | |
| .filter((orig) => !subImages.some((img) => img.id === orig.id)) | |
| .map((img) => img.id) | |
| .filter((id): id is number => id !== undefined); | |
| const subImageUrlsToAdd: string[] = []; | |
| for (const img of subImages) { | |
| if (!img.id) { | |
| if (img.url instanceof File) { | |
| const uploadedUrl = await uploadImage(img.url); | |
| subImageUrlsToAdd.push(uploadedUrl); | |
| } else if (typeof img.url === 'string') { | |
| subImageUrlsToAdd.push(img.url); | |
| } | |
| } | |
| } | |
| } else if (mainImage instanceof File) { | |
| try { | |
| bannerImageUrl = await uploadImage(mainImage); | |
| } catch (uploadError) { | |
| console.error('메인 이미지 업로드 실패:', uploadError); | |
| throw new Error('메인 이미지 업로드에 실패했습니다.'); | |
| } | |
| } | |
| const subImageIdsToRemove = originalSubImages | |
| .filter((orig) => !subImages.some((img) => img.id === orig.id)) | |
| .map((img) => img.id) | |
| .filter((id): id is number => id !== undefined); | |
| const subImageUrlsToAdd: string[] = []; | |
| for (const img of subImages) { | |
| if (!img.id) { | |
| if (img.url instanceof File) { | |
| const uploadedUrl = await uploadImage(img.url); | |
| subImageUrlsToAdd.push(uploadedUrl); | |
| } else if (typeof img.url === 'string') { | |
| subImageUrlsToAdd.push(img.url); | |
| } | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts around
lines 111 to 130, the calls to uploadImage lack error handling, which can cause
the entire form submission to fail silently if an upload fails. Wrap each
uploadImage call in a try-catch block to catch any errors during image upload,
handle or log the error appropriately, and prevent the failure from stopping the
entire process.
| const subImageIdsToRemove = originalSubImages | ||
| .filter((orig) => !subImages.some((img) => img.id === orig.id)) | ||
| .map((img) => img.id) | ||
| .filter((id): id is number => id !== undefined); | ||
|
|
||
| const subImageUrlsToAdd: string[] = []; | ||
|
|
||
| for (const img of subImages) { | ||
| if (!img.id) { | ||
| if (img.url instanceof File) { | ||
| const uploadedUrl = await uploadImage(img.url); | ||
| subImageUrlsToAdd.push(uploadedUrl); | ||
| } else if (typeof img.url === 'string') { | ||
| subImageUrlsToAdd.push(img.url); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const newSchedules = dates.filter((d) => !d.id); | ||
|
|
||
| const scheduleIdsToRemove = originalSchedules | ||
| .filter((orig) => !dates.some((d) => d.id === orig.id)) | ||
| .map((d) => d.id) | ||
| .filter((id): id is number => id !== undefined); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
복잡한 배열 비교 로직을 단순화하는 것을 고려해보세요.
서브 이미지와 일정의 추가/제거를 판단하는 로직이 복잡하여 버그가 발생할 가능성이 있습니다. 헬퍼 함수로 분리하거나 더 명확한 로직으로 리팩토링하는 것을 권장합니다.
예시:
const getSubImageChanges = (original: SubImageType[], current: SubImageType[]) => {
const idsToRemove = original
.filter(orig => !current.some(img => img.id === orig.id))
.map(img => img.id)
.filter((id): id is number => id !== undefined);
const urlsToAdd = current
.filter(img => !img.id)
.map(img => img.url);
return { idsToRemove, urlsToAdd };
};🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/hooks/useEditActivityForm.ts between
lines 114 and 137, the logic for determining which sub-images and schedules to
add or remove is complex and repetitive. Refactor this by extracting the array
comparison logic into reusable helper functions that clearly separate the
concerns of identifying items to remove and items to add. For example, create a
function that takes original and current arrays and returns ids to remove and
urls or new items to add, simplifying the main code and reducing potential bugs.
| import EditActivityForm from './components/EditActivityForm'; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <EditActivityForm /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
페이지 컴포넌트 구조가 적절합니다.
Next.js 페이지 컴포넌트로서 적절한 구조를 가지고 있습니다. EditActivityForm 컴포넌트를 렌더링하는 간단한 래퍼 역할을 수행합니다.
선택적 개선사항: 불필요한 래퍼 div 제거
EditActivityForm이 자체 컨테이너 스타일링을 가지고 있다면 래퍼 div는 제거할 수 있습니다:
export default function Page() {
- return (
- <div>
- <EditActivityForm />
- </div>
- );
+ return <EditActivityForm />;
}📝 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.
| import EditActivityForm from './components/EditActivityForm'; | |
| export default function Page() { | |
| return ( | |
| <div> | |
| <EditActivityForm /> | |
| </div> | |
| ); | |
| } | |
| import EditActivityForm from './components/EditActivityForm'; | |
| export default function Page() { | |
| return <EditActivityForm />; | |
| } |
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/page.tsx lines 1 to 9, the wrapper div
around EditActivityForm is unnecessary if EditActivityForm already handles its
own container styling. Remove the outer div and return EditActivityForm directly
from the Page component to simplify the structure.
| import { NextRequest, NextResponse } from 'next/server'; | ||
| import { cookies } from 'next/headers'; | ||
| import axios, { AxiosError } from 'axios'; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
임포트 순서를 수정해주세요.
파이프라인에서 simple-import-sort/imports 경고가 발생했습니다. 임포트 순서를 정렬해주세요.
-import { NextRequest, NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';📝 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.
| import { NextRequest, NextResponse } from 'next/server'; | |
| import { cookies } from 'next/headers'; | |
| import axios, { AxiosError } from 'axios'; | |
| import axios, { AxiosError } from 'axios'; | |
| import { cookies } from 'next/headers'; | |
| import { NextRequest, NextResponse } from 'next/server'; |
🧰 Tools
🪛 GitHub Actions: CI
[warning] 3-3: simple-import-sort/imports: Run autofix to sort these imports!
🤖 Prompt for AI Agents
In src/app/api/editActivity/[id]/route.ts around lines 3 to 5, the import
statements are not sorted according to the simple-import-sort/imports rule,
causing a pipeline warning. Reorder the imports so that external libraries are
grouped and sorted alphabetically first, followed by internal imports, ensuring
consistent and clean import order.
| try { | ||
| const body = await req.json(); | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
입력 데이터 검증을 추가하는 것을 고려해보세요.
요청 본문에 대한 기본적인 검증이 없어 잘못된 데이터가 백엔드로 전송될 수 있습니다. 최소한 필수 필드 존재 여부나 데이터 타입 검증을 추가하는 것을 권장합니다.
const body = await req.json();
+
+ // 기본적인 입력 검증
+ if (!body.title || typeof body.title !== 'string') {
+ return NextResponse.json({ message: '제목은 필수입니다' }, { status: 400 });
+ }📝 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.
| try { | |
| const body = await req.json(); | |
| try { | |
| const body = await req.json(); | |
| // 기본적인 입력 검증 | |
| if (!body.title || typeof body.title !== 'string') { | |
| return NextResponse.json({ message: '제목은 필수입니다' }, { status: 400 }); | |
| } |
🤖 Prompt for AI Agents
In src/app/api/editActivity/[id]/route.ts around lines 25 to 27, the code
currently parses the request body without validating the input data. To fix
this, add validation logic after parsing the JSON to check for the presence of
required fields and verify their data types. This ensures that only well-formed
and complete data is processed by the backend.
|
|
||
| return NextResponse.json(response.data, { status: 200 }); | ||
| } catch (error: unknown) { | ||
| console.error('체험 등록 에러:', error); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
오해를 일으킬 수 있는 에러 로그 메시지를 수정해주세요.
에러 로그 메시지가 "체험 등록 에러"로 되어 있지만, 이 API는 체험 수정을 위한 것이므로 적절한 메시지로 변경해야 합니다.
- console.error('체험 등록 에러:', error);
+ console.error('체험 수정 에러:', error);📝 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.
| console.error('체험 등록 에러:', error); | |
| console.error('체험 수정 에러:', error); |
🤖 Prompt for AI Agents
In src/app/api/editActivity/[id]/route.ts at line 41, the error log message
incorrectly states "체험 등록 에러" which implies an error during activity
registration, but this API handles activity editing. Update the error message to
accurately reflect that the error occurred during activity editing to avoid
confusion.
| const status = axiosError.response?.status || 500; | ||
| const detail = axiosError.response?.data; | ||
|
|
||
| const errorMessage = detail?.message || detail?.error || '체험 등록 실패'; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
일관성 없는 에러 메시지를 수정해주세요.
기본 에러 메시지가 "체험 등록 실패"로 되어 있지만, 이 API는 수정 기능이므로 "체험 수정 실패"가 더 적절합니다.
- const errorMessage = detail?.message || detail?.error || '체험 등록 실패';
+ const errorMessage = detail?.message || detail?.error || '체험 수정 실패';📝 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 errorMessage = detail?.message || detail?.error || '체험 등록 실패'; | |
| const errorMessage = detail?.message || detail?.error || '체험 수정 실패'; |
🤖 Prompt for AI Agents
In src/app/api/editActivity/[id]/route.ts at line 48, the default error message
is "체험 등록 실패" which is inconsistent with the API's purpose of editing
activities. Change the default error message to "체험 수정 실패" to accurately reflect
the failure context.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (1)
77-77: 이전 리뷰 코멘트가 성공적으로 반영되었습니다.
any타입 대신SubImageType인터페이스를 사용하여 타입 안전성이 크게 개선되었습니다. 코드의 가독성과 유지보수성이 향상되었습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx(1 hunks)
🔇 Additional comments (4)
src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx (4)
1-7: import 구조가 잘 정리되어 있습니다.Next.js 클라이언트 컴포넌트 패턴을 올바르게 따르고 있으며, 상대 경로 import도 깔끔하게 구성되어 있습니다.
9-12: 타입 안전성 개선이 잘 적용되었습니다.이전 리뷰 코멘트에서 지적된
any타입 사용 문제가SubImageType인터페이스로 해결되었습니다.string | File유니온 타입으로 기존 이미지와 새 파일 업로드를 모두 처리할 수 있어 좋습니다.
15-39: 커스텀 훅을 통한 관심사 분리가 잘 되어 있습니다.
useEditActivityForm훅을 사용하여 비즈니스 로직과 컴포넌트 렌더링 로직을 깔끔하게 분리했습니다. 상태 관리와 이벤트 핸들러가 모두 훅에서 처리되어 컴포넌트가 간결해졌습니다.
44-83: 폼 구조가 논리적으로 잘 구성되어 있습니다.정보 입력, 일정 선택, 이미지 관리 섹션으로 명확하게 분리되어 있고, Tailwind CSS를 사용한 반응형 디자인도 적절합니다. 가격 필드의 문자열-숫자 변환도 인라인으로 간단하게 처리되어 있어 좋습니다.
| if (isLoading) return <div>로딩 중...</div>; | ||
| if (error) return <div>오류가 발생했습니다: {error.message}</div>; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
로딩 및 에러 처리 로직은 기능적으로 올바릅니다.
Early return 패턴을 사용한 것이 좋습니다. 향후 개선을 위해 로딩 스피너나 더 상세한 에러 메시지를 고려해볼 수 있겠습니다.
🤖 Prompt for AI Agents
In src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx around
lines 41 to 42, the current loading and error handling uses simple text
messages. To improve user experience, replace the plain text with a loading
spinner component for the loading state and enhance the error display by showing
more detailed error information or a styled error message component. This will
make the UI more user-friendly and informative.
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
체험 수정 페이지 api 연동 고생많으셨습니다. 수정쪽이 복잡하다고 들었는데 깔끔하게 구현해주셨네요. tanstackQuery 활용법이나 상태관리 패턴들 매번 많이 배워갑니다. 👍
minimo-9
left a comment
minimo-9
left a comment
There was a problem hiding this comment.
만드시느라 고생하셨습니다! 데이터가 굉장히 길어서 놀랐습니다 ㅋㅋ
|
|
||
|
|
||
| if (isLoading || !activityData) { | ||
| return <div>로딩 중...</div>; |
There was a problem hiding this comment.
요부분은 나중에 로딩스피너로 바꾸셔도 좋을 것 같습니다!
BokyungCodes
left a comment
BokyungCodes
left a comment
There was a problem hiding this comment.
API랑 상태 처리도 깔끔하고 체험 수정 코드 구조도 잘 짜신 것 같습니다! 수고하셨습니다 👍
📌 변경 사항 개요
체험 수정 페이지 api 연결
📝 상세 내용
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
신규 기능
기능 개선
버그 수정
기타