Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough개발용 토큰 상수 변경, 방 생성 타입과 API 헬퍼 추가, 그룹 생성 페이지에 방 생성 플로우 통합 및 유효성 검증/에러 처리 도입, DateWheel 터치/휠 입력 처리 로직을 useCallback/useEffect 기반으로 재구성하여 비수동 이벤트 리스너로 교체. 공개 API 시그니처 변경 없음. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant UI as CreateGroup Page
participant Helper as createRoom()
participant API as apiClient
participant BE as Server
User->>UI: 제출 클릭
UI->>UI: 입력값 검증/페이로드 구성
UI->>Helper: createRoom(payload)
Helper->>API: POST /rooms
API->>BE: 요청 전송
BE-->>API: ApiResponse<CreateRoomData>
API-->>Helper: 응답 전달
Helper-->>UI: isSuccess, roomId
alt 성공
UI->>UI: isSubmitting 해제 및 네비게이션
else 실패
UI->>User: 에러 알림
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes Possibly related issues
Poem
✨ 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/Issue comments)Type 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: 7
🧹 Nitpick comments (7)
src/components/creategroup/ActivityPeriodSection/DateWheel.tsx (2)
69-90: 드래그 이동 시 연속 렌더링 최적화 제안 (rAF/쓰로틀링).매 이동마다
values.map으로sliderState를 재생성하고 상태 업데이트를 트리거합니다. 트랙패드/손가락 드래그에서 잦은 리렌더가 발생할 수 있으니requestAnimationFrame기반으로 업데이트를 모아서 처리하거나 간단한 쓰로틀을 적용하는 것을 권장합니다. 또한sensitivity는 상수로 컴포넌트 외부에 선언하거나 prop으로 노출하여 튜닝 가능하게 하는 것도 좋습니다.예시(핵심 아이디어만 제시):
const SENSITIVITY = 30; const rAFRef = useRef<number | null>(null); const scheduleUpdate = (newIndex: number) => { if (rAFRef.current) cancelAnimationFrame(rAFRef.current); rAFRef.current = requestAnimationFrame(() => { setCurrentIndex(newIndex); setSliderState({ abs: newIndex, slides: values.map((_, i) => ({ distance: i - newIndex })), }); }); };
99-116: 중복 로직 제거로 간결화 제안.
handleInteractionMove와moveToIndex에서sliderState재구성 로직이 중복입니다.updateToIndex(newIndex: number, triggerOnChange: boolean)헬퍼로 추출하면 가독성과 유지보수성이 좋아집니다.적용 방향(요지):
- if (newIndex !== currentIndex) { - setCurrentIndex(newIndex); - onChange(values[newIndex]); - const newState: SliderState = { abs: newIndex, slides: values.map((_, i) => ({ distance: i - newIndex })) }; - setSliderState(newState); - } + const updateToIndex = (newIndex: number, triggerChange: boolean) => { + if (newIndex === currentIndex) return; + setCurrentIndex(newIndex); + setSliderState({ abs: newIndex, slides: values.map((_, i) => ({ distance: i - newIndex })) }); + if (triggerChange) onChange(values[newIndex]); + }; // moveToIndex 내부 - if (newIndex !== currentIndex) { ... } + updateToIndex(newIndex, true); // handleInteractionMove 내부 - if (newIndex !== currentIndex) { ... } + updateToIndex(newIndex, false);src/types/room.ts (2)
27-31: 날짜 문자열 형식 안정성을 타입으로 보강 제안.
YYYY.MM.DD포맷을 템플릿 리터럴 타입으로 표현하면 컴파일 단계에서 형식 오류를 더 일찍 잡을 수 있습니다.아래와 같이 보강을 고려해 보세요.
+export type DateYMD = `${number}.${number}.${number}`; + export interface CreateRoomRequest { isbn: string; category: string; roomName: string; description: string; - progressStartDate: string; // YYYY.MM.DD 형식 - progressEndDate: string; // YYYY.MM.DD 형식 + progressStartDate: DateYMD; // YYYY.MM.DD 형식 + progressEndDate: DateYMD; // YYYY.MM.DD 형식 recruitCount: number; password: string | null; // 비공개방: 4자리 숫자, 공개방: null isPublic: boolean; }
63-69: 실패 응답에서 data 필드 null/생략 가능성 고려.백엔드가 실패 시
data를 생략하거나 null로 내려줄 수 있습니다. 현재는data: T로 고정되어 있어 런타임과 타입이 어긋날 수 있습니다.백엔드 계약이 확정되지 않았다면 다음과 같이 완화하는 것을 권장합니다.
export interface ApiResponse<T> { isSuccess: boolean; code: number; message: string; - data: T; + data?: T | null; }확인을 위해 서버 스펙/샘플 응답(JSON)을 재확인해 주세요. 필요 시 제가 문서화/타입 정리를 도와드릴 수 있습니다.
src/api/rooms/createRoom.ts (2)
8-11: 반환 타입 명시로 가독성 및 유지보수성 향상.함수 반환 타입을 명시하면 호출부에서 타입 추론이 더 명확해집니다.
다음과 같이 타입을 명시하세요.
-export const createRoom = async (roomData: CreateRoomRequest) => { +export const createRoom = async (roomData: CreateRoomRequest): Promise<CreateRoomResponse> => { const response = await apiClient.post<CreateRoomResponse>('rooms', roomData); return response.data; };
13-40: 사용 예시는 코드 파일보다 문서/주석 상단(JSDoc)으로 이동 권장.길이가 있는 사용 예시는 README나 JSDoc에 두는 편이 코드 탐색 시 잡음을 줄여줍니다. 필요하다면 간단한 JSDoc 예시만 남기고 상세 흐름은 문서로 옮겨 주세요.
src/pages/group/CreateGroup.tsx (1)
10-10: 중복 슬래시 경로 수정.임포트 경로에 중복 슬래시가 있습니다. 일부 번들러에서는 문제 없지만 일관성 있게 정리하는 것이 좋습니다.
-import PrivacySettingSection from '../../components/creategroup//PrivacySettingSection/PrivacySettingSection'; +import PrivacySettingSection from '../../components/creategroup/PrivacySettingSection/PrivacySettingSection';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/api/index.ts(1 hunks)src/api/rooms/createRoom.ts(1 hunks)src/components/creategroup/ActivityPeriodSection/DateWheel.tsx(3 hunks)src/pages/group/CreateGroup.tsx(3 hunks)src/types/room.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/api/rooms/createRoom.ts (2)
src/types/room.ts (3)
ApiResponse(64-69)CreateRoomData(35-37)CreateRoomRequest(22-32)src/api/index.ts (1)
apiClient(27-33)
src/pages/group/CreateGroup.tsx (3)
src/types/book.ts (1)
Book(1-7)src/types/room.ts (1)
CreateRoomRequest(22-32)src/api/rooms/createRoom.ts (1)
createRoom(8-11)
🪛 Gitleaks (8.27.2)
src/api/index.ts
5-5: Uncovered a JSON Web Token, which may lead to unauthorized access to web applications and sensitive user data.
(jwt)
🔇 Additional comments (1)
src/components/creategroup/ActivityPeriodSection/DateWheel.tsx (1)
136-175: 비수동(non-passive) 터치/휠 리스너 등록 및 정리(Cleanup) 처리, 구현 잘되었습니다.preventDefault가 필요한 UX 요구사항을 충족하면서 메모리 누수 없이 적절히 해제하고 있습니다.
Comment on lines
4
to
6
| const ACCESS_TOKEN = | ||
| 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjEsImlhdCI6MTc1NDIwMTY4OCwiZXhwIjoxNzU2NzkzNjg4fQ.oOyJ7JI_t2-Xq1-gfAv4ZaYNrbyplvqdxhCk76-Txe4'; | ||
| 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1NDM4MjY1MiwiZXhwIjoxNzU2OTc0NjUyfQ.CCb_F6OGe02_ITYsE-tqc2_PvSkRsxd96t8NWNIa1pI'; | ||
|
|
There was a problem hiding this comment.
하드코딩된 JWT 토큰 커밋은 즉시 제거 필요 (비밀정보 유출).
Gitleaks가 JWT를 감지했습니다. 프런트 코드에 토큰을 하드코딩/커밋하면 누구나 악용할 수 있습니다. 로컬스토리지의 사용자 토큰만 사용하도록 수정하고, 개발 편의를 위한 토큰이 필요하다면 최소한 커밋에서 제거하고 개인 로컬 환경변수로 주입하세요. 프런트의 VITE_ 환경변수는 번들에 포함되므로 근본적 보안수단이 아님을 유의하세요.
아래와 같이 ACCESS_TOKEN 상수 및 fallback 로직을 제거하세요.
-// 하드코딩된 액세스 토큰
-const ACCESS_TOKEN =
- 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjksImlhdCI6MTc1NDM4MjY1MiwiZXhwIjoxNzU2OTc0NjUyfQ.CCb_F6OGe02_ITYsE-tqc2_PvSkRsxd96t8NWNIa1pI'; apiClient.interceptors.request.use(
config => {
// 로컬스토리지에서 토큰 먼저 확인
const token = TokenManager.getAccessToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
- } else {
- // 토큰이 없으면 하드코딩된 토큰 사용 (개발용)
- config.headers.Authorization = ACCESS_TOKEN;
}
return config;
},
error => Promise.reject(error),
);Also applies to: 39-46
🧰 Tools
🪛 Gitleaks (8.27.2)
5-5: Uncovered a JSON Web Token, which may lead to unauthorized access to web applications and sensitive user data.
(jwt)
🤖 Prompt for AI Agents
In src/api/index.ts around lines 4-6 (and similarly lines 39-46), there is a
hardcoded JWT ACCESS_TOKEN constant and fallback logic that must be removed;
delete the constant and any fallback that injects a static token, and instead
read the authenticated token only from localStorage (or from a non-bundled,
developer-only runtime source) at request time; ensure code fails gracefully
when no token is present (return unauthorized / prompt login) and remove the
hardcoded secret from the repo (and any tests/fixtures), avoiding use of VITE_*
env vars for this secret.
Comment on lines
+16
to
+23
| // Book 타입 정의 | ||
| interface Book { | ||
| id?: number; | ||
| title: string; | ||
| author: string; | ||
| cover: string; | ||
| isbn?: string; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Book 타입 재정의 대신 공용 타입 임포트 사용.
동일 의미의 타입을 파일 내 재정의하면 추후 스키마 변경 시 불일치가 발생합니다. src/types/book.ts에 정의된 공용 타입을 사용하세요.
-import type { CreateRoomRequest } from '@/types/room';
-
-// Book 타입 정의
-interface Book {
- id?: number;
- title: string;
- author: string;
- cover: string;
- isbn?: string;
-}
+import type { CreateRoomRequest } from '@/types/room';
+import type { Book } from '@/types/book';📝 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.
Suggested change
| // Book 타입 정의 | |
| interface Book { | |
| id?: number; | |
| title: string; | |
| author: string; | |
| cover: string; | |
| isbn?: string; | |
| } | |
| -import type { CreateRoomRequest } from '@/types/room'; | |
| -// Book 타입 정의 | |
| -interface Book { | |
| - id?: number; | |
| - title: string; | |
| - author: string; | |
| - cover: string; | |
| - isbn?: string; | |
| -} | |
| +import type { CreateRoomRequest } from '@/types/room'; | |
| +import type { Book } from '@/types/book'; |
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 16 to 23, the local Book
interface is duplicating the shared type; remove this local definition and
instead import the Book type from src/types/book.ts (add an import at the top:
import { Book } from 'src/types/book' or the correct relative path), then update
any references to use the imported Book type; ensure there are no remaining
duplicate definitions or naming conflicts.
Comment on lines
+32
to
+52
| const getDefaultDates = () => { | ||
| const today = new Date(); | ||
| const tomorrow = new Date(today); | ||
| tomorrow.setDate(today.getDate() + 1); | ||
|
|
||
| const oneMonthLater = new Date(today); | ||
| oneMonthLater.setDate(today.getDate() + 1); | ||
|
|
||
| return { | ||
| start: { | ||
| year: tomorrow.getFullYear(), | ||
| month: tomorrow.getMonth() + 1, | ||
| day: tomorrow.getDate(), | ||
| }, | ||
| end: { | ||
| year: oneMonthLater.getFullYear(), | ||
| month: oneMonthLater.getMonth() + 1, | ||
| day: oneMonthLater.getDate(), | ||
| }, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
기본 종료일(oneMonthLater) 계산 버그: 내일과 동일하게 설정됩니다.
oneMonthLater가 today + 1일로 설정되어 시작일과 동일한 날짜가 됩니다. 한 달 후로 의도했다면 월 단위 증가로 보정하세요.
- const getDefaultDates = () => {
+ const getDefaultDates = () => {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);
- const oneMonthLater = new Date(today);
- oneMonthLater.setDate(today.getDate() + 1);
+ const oneMonthLater = new Date(tomorrow);
+ // 한 달 후로 설정 (달 증가; 일자는 내일과 동일하게 유지)
+ oneMonthLater.setMonth(tomorrow.getMonth() + 1);
return {
start: {
year: tomorrow.getFullYear(),
month: tomorrow.getMonth() + 1,
day: tomorrow.getDate(),
},
end: {
year: oneMonthLater.getFullYear(),
month: oneMonthLater.getMonth() + 1,
day: oneMonthLater.getDate(),
},
};
};📝 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.
Suggested change
| const getDefaultDates = () => { | |
| const today = new Date(); | |
| const tomorrow = new Date(today); | |
| tomorrow.setDate(today.getDate() + 1); | |
| const oneMonthLater = new Date(today); | |
| oneMonthLater.setDate(today.getDate() + 1); | |
| return { | |
| start: { | |
| year: tomorrow.getFullYear(), | |
| month: tomorrow.getMonth() + 1, | |
| day: tomorrow.getDate(), | |
| }, | |
| end: { | |
| year: oneMonthLater.getFullYear(), | |
| month: oneMonthLater.getMonth() + 1, | |
| day: oneMonthLater.getDate(), | |
| }, | |
| }; | |
| }; | |
| const getDefaultDates = () => { | |
| const today = new Date(); | |
| const tomorrow = new Date(today); | |
| tomorrow.setDate(today.getDate() + 1); | |
| const oneMonthLater = new Date(tomorrow); | |
| // 한 달 후로 설정 (달 증가; 일자는 내일과 동일하게 유지) | |
| oneMonthLater.setMonth(tomorrow.getMonth() + 1); | |
| return { | |
| start: { | |
| year: tomorrow.getFullYear(), | |
| month: tomorrow.getMonth() + 1, | |
| day: tomorrow.getDate(), | |
| }, | |
| end: { | |
| year: oneMonthLater.getFullYear(), | |
| month: oneMonthLater.getMonth() + 1, | |
| day: oneMonthLater.getDate(), | |
| }, | |
| }; | |
| }; |
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 32 to 52, the oneMonthLater date
is incorrectly set to today + 1 day (same as tomorrow); change the logic to add
one calendar month instead of one day. Specifically, after creating
oneMonthLater as a copy of today, call setMonth(today.getMonth() + 1) (or use an
equivalent month-add operation that preserves day/year rollover) so the end date
becomes one month ahead of today rather than identical to the start date.
Comment on lines
+68
to
+93
| const handleCompleteClick = async () => { | ||
| if (isSubmitting) return; // 중복 실행 방지 | ||
|
|
||
| setIsSubmitting(true); | ||
|
|
||
| try { | ||
| // 날짜 형식 변환 (YYYY.MM.DD) | ||
| const formatDate = (date: { year: number; month: number; day: number }) => { | ||
| const month = date.month.toString().padStart(2, '0'); | ||
| const day = date.day.toString().padStart(2, '0'); | ||
| return `${date.year}.${month}.${day}`; | ||
| }; | ||
|
|
||
| // 방 생성 요청 데이터 구성 | ||
| const roomData: CreateRoomRequest = { | ||
| isbn: selectedBook?.isbn || '9788936434632', // 선택된 책의 ISBN 또는 기본값 | ||
| category: selectedGenre, | ||
| roomName: roomTitle.trim(), | ||
| description: roomDescription.trim(), | ||
| progressStartDate: formatDate(startDate), | ||
| progressEndDate: formatDate(endDate), | ||
| recruitCount: memberLimit, | ||
| password: isPrivate ? password.trim() : null, | ||
| isPublic: !isPrivate, // isPrivate의 반대값 | ||
| }; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
도서 선택 누락 시 기본 ISBN 하드코딩 사용은 위험 — 명시적 검증으로 대체.
선택 도서가 없을 때 임의의 기본 ISBN을 사용하는 것은 데이터 무결성을 깨뜨립니다. 생성 진행 전 도서/ISBN을 강제 검증하고, roomData 생성 시 널 단언이 아닌 타입 보장을 사용하세요.
- const handleCompleteClick = async () => {
+ const handleCompleteClick = async () => {
if (isSubmitting) return; // 중복 실행 방지
setIsSubmitting(true);
try {
+ // 필수 입력 선검증: 도서/ISBN
+ if (!selectedBook?.isbn) {
+ alert('도서를 선택해주세요.');
+ return;
+ }
+
// 날짜 형식 변환 (YYYY.MM.DD)
const formatDate = (date: { year: number; month: number; day: number }) => {
const month = date.month.toString().padStart(2, '0');
const day = date.day.toString().padStart(2, '0');
return `${date.year}.${month}.${day}`;
};
// 방 생성 요청 데이터 구성
const roomData: CreateRoomRequest = {
- isbn: selectedBook?.isbn || '9788936434632', // 선택된 책의 ISBN 또는 기본값
+ isbn: selectedBook.isbn, // 선택된 책의 ISBN (필수)
category: selectedGenre,
roomName: roomTitle.trim(),
description: roomDescription.trim(),
progressStartDate: formatDate(startDate),
progressEndDate: formatDate(endDate),
recruitCount: memberLimit,
password: isPrivate ? password.trim() : null,
isPublic: !isPrivate, // isPrivate의 반대값
};비고: 가능하면 setIsSubmitting(true)는 선검증(도서/날짜/기타) 이후에 호출하는 것이 UX에 유리합니다.
📝 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.
Suggested change
| const handleCompleteClick = async () => { | |
| if (isSubmitting) return; // 중복 실행 방지 | |
| setIsSubmitting(true); | |
| try { | |
| // 날짜 형식 변환 (YYYY.MM.DD) | |
| const formatDate = (date: { year: number; month: number; day: number }) => { | |
| const month = date.month.toString().padStart(2, '0'); | |
| const day = date.day.toString().padStart(2, '0'); | |
| return `${date.year}.${month}.${day}`; | |
| }; | |
| // 방 생성 요청 데이터 구성 | |
| const roomData: CreateRoomRequest = { | |
| isbn: selectedBook?.isbn || '9788936434632', // 선택된 책의 ISBN 또는 기본값 | |
| category: selectedGenre, | |
| roomName: roomTitle.trim(), | |
| description: roomDescription.trim(), | |
| progressStartDate: formatDate(startDate), | |
| progressEndDate: formatDate(endDate), | |
| recruitCount: memberLimit, | |
| password: isPrivate ? password.trim() : null, | |
| isPublic: !isPrivate, // isPrivate의 반대값 | |
| }; | |
| const handleCompleteClick = async () => { | |
| if (isSubmitting) return; // 중복 실행 방지 | |
| setIsSubmitting(true); | |
| try { | |
| // 필수 입력 선검증: 도서/ISBN | |
| if (!selectedBook?.isbn) { | |
| alert('도서를 선택해주세요.'); | |
| return; | |
| } | |
| // 날짜 형식 변환 (YYYY.MM.DD) | |
| const formatDate = (date: { year: number; month: number; day: number }) => { | |
| const month = date.month.toString().padStart(2, '0'); | |
| const day = date.day.toString().padStart(2, '0'); | |
| return `${date.year}.${month}.${day}`; | |
| }; | |
| // 방 생성 요청 데이터 구성 | |
| const roomData: CreateRoomRequest = { | |
| isbn: selectedBook.isbn, // 선택된 책의 ISBN (필수) | |
| category: selectedGenre, | |
| roomName: roomTitle.trim(), | |
| description: roomDescription.trim(), | |
| progressStartDate: formatDate(startDate), | |
| progressEndDate: formatDate(endDate), | |
| recruitCount: memberLimit, | |
| password: isPrivate ? password.trim() : null, | |
| isPublic: !isPrivate, // isPrivate의 반대값 | |
| }; |
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 68 to 93, replace the current
approach of falling back to a hardcoded ISBN by adding an explicit validation
that selectedBook (and its isbn) exists before building roomData; if missing,
surface a user-facing error (toast or form error) and return early without
setting isSubmitting, then only call setIsSubmitting(true) after all validations
pass; when constructing roomData, use the validated selectedBook.isbn (no
hardcoded default) and ensure types reflect optional password/null properly.
Comment on lines
+111
to
+121
| // 요청 데이터 검증 | ||
| const validation = { | ||
| isbn: roomData.isbn.length > 0, | ||
| category: roomData.category.length > 0, | ||
| roomName: roomData.roomName.length > 0, | ||
| description: roomData.description.length > 0, | ||
| startDate: roomData.progressStartDate.length >= 8, | ||
| endDate: roomData.progressEndDate.length >= 8, | ||
| recruitCount: roomData.recruitCount >= 1 && roomData.recruitCount <= 30, | ||
| password: !isPrivate || (roomData.password !== null && /^\d{4}$/.test(roomData.password)), | ||
| }; |
There was a problem hiding this comment.
날짜 문자열 길이 검증이 부정확합니다.
YYYY.MM.DD는 길이 10입니다. 현재는 >= 8로 허용 폭이 너무 넓습니다.
- startDate: roomData.progressStartDate.length >= 8,
- endDate: roomData.progressEndDate.length >= 8,
+ startDate: roomData.progressStartDate.length === 10,
+ endDate: roomData.progressEndDate.length === 10,추가로 정규식 검증까지 고려하면 더욱 견고해집니다: /^\d{4}\.\d{2}\.\d{2}$/
📝 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.
Suggested change
| // 요청 데이터 검증 | |
| const validation = { | |
| isbn: roomData.isbn.length > 0, | |
| category: roomData.category.length > 0, | |
| roomName: roomData.roomName.length > 0, | |
| description: roomData.description.length > 0, | |
| startDate: roomData.progressStartDate.length >= 8, | |
| endDate: roomData.progressEndDate.length >= 8, | |
| recruitCount: roomData.recruitCount >= 1 && roomData.recruitCount <= 30, | |
| password: !isPrivate || (roomData.password !== null && /^\d{4}$/.test(roomData.password)), | |
| }; | |
| // 요청 데이터 검증 | |
| const validation = { | |
| isbn: roomData.isbn.length > 0, | |
| category: roomData.category.length > 0, | |
| roomName: roomData.roomName.length > 0, | |
| description: roomData.description.length > 0, | |
| startDate: roomData.progressStartDate.length === 10, | |
| endDate: roomData.progressEndDate.length === 10, | |
| recruitCount: roomData.recruitCount >= 1 && roomData.recruitCount <= 30, | |
| password: !isPrivate || (roomData.password !== null && /^\d{4}$/.test(roomData.password)), | |
| }; |
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 111 to 121, the date length
checks (>= 8) are too permissive for the expected "YYYY.MM.DD" format; update
the validation for startDate and endDate to require exact length 10 and validate
against a strict regex /^\d{4}\.\d{2}\.\d{2}$/ so only properly formatted dates
pass (e.g., change the checks to ensure roomData.progressStartDate and
roomData.progressEndDate are length 10 and match the regex).
Comment on lines
+135
to
+147
| // 두 가지 응답 형식 모두 확인 | ||
| const isSuccessful = response.isSuccess || response.isSuccess; | ||
|
|
||
| if (isSuccessful) { | ||
| // 성공 시 모집 중인 방 상세 페이지로 이동 | ||
| navigate('/group/detail', { | ||
| replace: true, | ||
| state: { roomId: response.data.roomId }, | ||
| }); | ||
| } else { | ||
| alert(`방 생성에 실패했습니다: ${response.message} (코드: ${response.code})`); | ||
| } | ||
| } catch (error) { |
There was a problem hiding this comment.
성공 판정 로직 오타: 항상 동일 필드만 확인합니다.
const isSuccessful = response.isSuccess || response.isSuccess;는 중복입니다. 만약 백엔드가 success 또는 isSuccess를 혼용한다면 아래처럼 보수적으로 처리하세요.
- // 두 가지 응답 형식 모두 확인
- const isSuccessful = response.isSuccess || response.isSuccess;
+ // 응답 형식 호환 처리
+ const isSuccessful = (response as any).success ?? response.isSuccess === true;가능하면 서버 계약을 단일 키로 정리하는 것을 권장합니다.
📝 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.
Suggested change
| // 두 가지 응답 형식 모두 확인 | |
| const isSuccessful = response.isSuccess || response.isSuccess; | |
| if (isSuccessful) { | |
| // 성공 시 모집 중인 방 상세 페이지로 이동 | |
| navigate('/group/detail', { | |
| replace: true, | |
| state: { roomId: response.data.roomId }, | |
| }); | |
| } else { | |
| alert(`방 생성에 실패했습니다: ${response.message} (코드: ${response.code})`); | |
| } | |
| } catch (error) { | |
| // 응답 형식 호환 처리 | |
| const isSuccessful = (response as any).success ?? response.isSuccess === true; | |
| if (isSuccessful) { | |
| // 성공 시 모집 중인 방 상세 페이지로 이동 | |
| navigate('/group/detail', { | |
| replace: true, | |
| state: { roomId: response.data.roomId }, | |
| }); | |
| } else { | |
| alert(`방 생성에 실패했습니다: ${response.message} (코드: ${response.code})`); | |
| } | |
| } catch (error) { |
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 135 to 147, the success check
currently reads the same field twice causing a bug; replace the duplicated check
with a robust check that accepts either response.success or response.isSuccess
(and optionally a nested success flag like response.data.success) and treat
truthy values as success, then proceed to navigate on success and show the
existing alert on failure; prefer normalizing the server response to a single
key or map the server fields to a single local boolean before branching.
Comment on lines
+139
to
+144
| // 성공 시 모집 중인 방 상세 페이지로 이동 | ||
| navigate('/group/detail', { | ||
| replace: true, | ||
| state: { roomId: response.data.roomId }, | ||
| }); | ||
| } else { |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
라우팅 경로/파라미터 전달 방식 확인 필요.
/group/detail로 state에 roomId를 담아 이동합니다. 라우트가 /:roomId 파라미터를 기대하거나 state 미사용 방식이라면 페이지 진입 후 데이터 로딩이 실패할 수 있습니다.
아래 스크립트로 라우트 정의 및 사용처를 확인해 주세요.
🏁 Script executed:
#!/bin/bash
# 라우트 정의에서 group/detail 경로 검색
rg -n --glob "src/**" "group/detail" -A 5 -B 5
# roomId를 URL 파라미터로 받는지 확인
rg -n --glob "src/**" "path:\\s*['\"]/group/detail" -A 3 -B 3
# location.state.roomId 사용 여부 검색
rg -n --glob "src/**" "state:\\s*\\{[^}]*roomId" -A 2 -B 2Length of output: 2290
🏁 Script executed:
#!/bin/bash
# Find and display the top of GroupDetail.tsx to inspect parameter handling
file=$(rg --files | grep -E 'src/pages/.*/GroupDetail\.tsx$' || true)
if [ -z "$file" ]; then
echo "GroupDetail.tsx not found"
exit 1
fi
echo "Located file: $file"
sed -n '1,200p' "$file"Length of output: 3973
라우팅 경로 및 파라미터 처리 로직 확인 및 보완 필요
현재 /group/detail 경로는 URL 파라미터를 받지 않고, GroupDetail.tsx 에서도 location.state.roomId 또는 useParams() 를 통해 roomId를 읽어오는 로직이 없습니다.
이대로 두면 navigate('/group/detail', { state: { roomId } }) 로 이동해도 상세 데이터를 불러오지 못합니다.
조치 사항:
- 경로를
/group/detail/:roomId처럼 URL 파라미터로 변경하거나 GroupDetail.tsx에서useLocation()또는useParams()를 사용해roomId를 읽고, 해당 ID로 API 호출하도록 구현
대상 파일:
src/pages/index.tsx(Route 정의)src/pages/groupDetail/GroupDetail.tsx(파라미터/상태 처리 로직)
🤖 Prompt for AI Agents
In src/pages/group/CreateGroup.tsx around lines 139 to 144, the navigate call
pushes state.roomId to '/group/detail' but the app routes and GroupDetail
component don't read URL params or location.state so the detail page will not
load data; update routing to use '/group/detail/:roomId' in src/pages/index.tsx
and change the navigate call to include the roomId in the URL (e.g.
navigate(`/group/detail/${response.data.roomId}`, { replace: true })) OR keep
the current URL and implement roomId reading in
src/pages/groupDetail/GroupDetail.tsx by using useLocation() to read
location.state.roomId with a fallback to useParams().roomId, then use that ID to
fetch the detail API; ensure both route definition and GroupDetail data-loading
logic support the chosen approach.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣ 연관된 이슈
#83
📝 작업 내용
방 생성 API 연동을 구현했습니다.
🕸️ 주요 구현 사항
1. 방 생성 API 연동
POST /roomsAPI 연동@/types/room.ts)2. 폼 검증 및 데이터 처리
password: null, 비공개방:password: "1234"3. 날짜 시스템 개선
4. UX 개선
🔧 기술적 개선사항
Summary by CodeRabbit