Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR updates the group/study creation API integration by modifying request and response type contracts to include meetingName and maxMembers fields, adjusting the GroupPage component to map and send these new fields while using server-provided values for the created group object, and configuring a Vercel proxy to route API requests to an external backend host. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
Summary of ChangesHello @yunn1215, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 그룹 생성 기능을 백엔드 API와 완전히 연동하기 위한 변경사항을 포함합니다. 사용자 인터페이스에서 입력받은 데이터를 API 요청 형식에 맞춰 전송하고, API 응답을 기반으로 UI 상태를 업데이트하도록 로직을 수정했습니다. 또한, Vercel 배포 환경에서 프론트엔드와 백엔드 간의 API 통신을 원활하게 하기 위한 프록시 설정이 추가되었습니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
그룹 생성 API 연동을 위한 PR 잘 보았습니다. 전반적으로 API 연동을 위한 타입 정의와 서비스 함수, 컴포넌트 로직 수정이 잘 이루어졌습니다. 다만, 몇 가지 중요한 보안 및 유지보수 관련 이슈가 발견되었습니다. 가장 시급한 문제로, 그룹 생성 시 비밀번호가 하드코딩되어 있어 심각한 보안 취약점이 존재합니다. 또한, Vercel 프록시 설정에서 암호화되지 않은 HTTP 프로토콜을 사용하고 IP 주소를 하드코딩한 부분도 수정이 필요합니다. 코드에 남아있는 디버깅용 console.log 구문들도 제거해야 합니다. 자세한 내용은 각 파일에 남긴 코멘트를 확인해주세요.
| name: data.name, | ||
| meetingName: data.category ?? "", // undefined 방지 | ||
| maxMembers: Number(data.totalMembers), // number 강제 변환 | ||
| password: "1234", |
There was a problem hiding this comment.
비밀번호가 "1234"로 하드코딩되어 있습니다. 이는 심각한 보안 취약점입니다. 실제 사용자가 입력한 비밀번호를 사용하도록 수정해야 합니다. AddGroupModal에 비밀번호 입력 필드를 추가하고, 해당 값을 안전하게 전달하는 로직이 필요해 보입니다.
| [ | ||
| { | ||
| "source": "/api/:path*", | ||
| "destination": "http://3.27.86.20:8080/api/:path*" |
There was a problem hiding this comment.
Vercel rewrite 설정에 보안 및 유지보수 관련 문제가 있습니다.
- HTTP 사용 (Critical):
destination이http로 설정되어 있어, API 요청이 암호화되지 않은 상태로 전송됩니다. 이는 중간자 공격(MITM)에 취약하며, 민감한 정보가 노출될 수 있습니다. 반드시https를 사용해야 합니다. - 하드코딩된 IP 주소 (High): 백엔드 서버의 IP 주소가 하드코딩되어 있습니다. 서버 IP가 변경될 경우 배포된 프론트엔드가 동작하지 않게 됩니다. 가능하면 도메인 이름을 사용하고, 환경별로 설정할 수 있도록 관리하는 것이 좋습니다.
| "destination": "http://3.27.86.20:8080/api/:path*" | |
| "destination": "https://3.27.86.20:8080/api/:path*" |
| // 디버깅: 요청 전 데이터 확인 | ||
| console.log("📤 보내는 데이터:", { | ||
| name: data.name, | ||
| meetingName: data.category ?? "", // undefined 방지 | ||
| maxMembers: Number(data.totalMembers), // 숫자로 강제 변환 | ||
| password: "1234", | ||
| description: data.description, | ||
| }); |
There was a problem hiding this comment.
디버깅을 위한 console.log 구문은 프로덕션 코드에 포함되어서는 안 됩니다. 머지하기 전에 제거해주세요.
| id: response.id, // UUID | ||
| category: data.category, // 사용자가 입력한 모임명 유지 | ||
| title: response.name, // 백엔드 name 사용 | ||
| leader: "나", // 생성자는 자동으로 스터디장 |
There was a problem hiding this comment.
스터디장 이름이 "나"로 하드코딩되어 있습니다. 현재 로그인한 사용자의 이름이나 닉네임으로 동적으로 설정하는 것이 좋습니다.
| export async function createStudy( | ||
| data: CreateStudyRequest | ||
| ): Promise<CreateStudyResponse> { | ||
| console.log("📤 실제 요청 바디:", data); |
There was a problem hiding this comment.
디버깅을 위한 console.log 구문은 프로덕션 코드에 포함되어서는 안 됩니다. 머지하기 전에 제거해주세요.
![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
🧹 Nitpick comments (4)
vercel.json (1)
1-8: Consider HTTPS and config‑driven backend URL for the Vercel rewriteThe rewrite hard‑codes an HTTP IP endpoint. If this is used beyond local/dev, you probably want TLS (
https://…) and to move the target host into config/env (e.g. Vercel environment variables) instead of committing a raw IP, so you can rotate hosts without code changes.src/types/group.ts (1)
13-31: CreateStudy request/response types look coherent with new fields
CreateStudyRequestandCreateStudyResponsenow clearly modelmeetingNameandmaxMembers, and these match howGroupPageandstudy.serviceare using them. Only minor note:StudyDetailResponse.descriptionis non‑optional while the create request’sdescriptionis optional, so if the backend ever omits description in detail responses you may want to relax that field todescription?: stringfor consistency.src/services/study.service.ts (1)
29-38: Reuse a shared Axios instance for invite‑code lookups
getStudyByInviteCodecreates a newaxios.createinstance on every call. For a lightweight GET this isn’t critical, but you could simplify and avoid per‑call instantiation by either:
- exporting a dedicated
publicApiinstance fromapi.ts, or- using the shared
apiinstance and explicitly overriding headers (e.g. clearingAuthorization) for this request.This keeps configuration in one place and makes it easier to tweak things like
baseURLandwithCredentialslater.src/pages/GroupPage.tsx (1)
58-65: UsemaxMembersfrom the API for groups joined by invite as wellFor newly created groups you set:
totalMembers: response.maxMembers,but for groups joined via invite you still have:
totalMembers: 0, // API 응답에 없음Now that
CreateStudyResponseincludesmaxMembers, andgetStudyByInviteCodereturns that type, you can likely populatetotalMembershere too:- totalMembers: 0, // API 응답에 없음 + totalMembers: studyInfo.maxMembers,This avoids showing
1/0명in the list and keeps create/join flows consistent with the backend contract defined insrc/types/group.ts.Also applies to: 228-237
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/pages/GroupPage.tsx(2 hunks)src/services/api.ts(1 hunks)src/services/study.service.ts(1 hunks)src/types/group.ts(1 hunks)vercel.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/services/study.service.ts (1)
src/types/group.ts (2)
CreateStudyRequest(14-20)CreateStudyResponse(23-31)
src/pages/GroupPage.tsx (2)
src/services/study.service.ts (1)
createStudy(14-20)src/types/group.ts (1)
StudyGroup(1-9)
🔇 Additional comments (1)
src/services/api.ts (1)
13-30: No action needed —config.headersis guaranteed to be initialized by AxiosIn Axios v1.13.2, the
headersobject is always initialized by Axios inside request interceptors as anAxiosHeadersinstance (typed asRawAxiosRequestHeaders | AxiosHeaders). The code at line 16 and line 27 safely accessconfig.headerswithout a null-check because Axios ensures this object exists. The null-check at line 21 is defensive but unnecessary.Likely an incorrect or invalid review comment.
| // 디버깅: 요청 전 데이터 확인 | ||
| console.log("📤 보내는 데이터:", { | ||
| name: data.name, | ||
| meetingName: data.category ?? "", // undefined 방지 | ||
| maxMembers: Number(data.totalMembers), // 숫자로 강제 변환 | ||
| password: "1234", | ||
| description: data.description, | ||
| }); | ||
|
|
||
| const response = await createStudy({ | ||
| name: data.name, | ||
| meetingName: data.category ?? "", // undefined 방지 | ||
| maxMembers: Number(data.totalMembers), // number 강제 변환 | ||
| password: "1234", | ||
| description: data.description, | ||
| }); |
There was a problem hiding this comment.
Remove debug logging and hard‑coded password from group creation payload
This block both logs the outgoing payload and hard‑codes the group password:
console.log("📤 보내는 데이터:", { ... password: "1234", ... });
const response = await createStudy({
name: data.name,
meetingName: data.category ?? "",
maxMembers: Number(data.totalMembers),
password: "1234",
description: data.description,
});Two issues:
- The log includes the password value, which is sensitive.
- Using the same literal
"1234"for every group makes the protection effectively useless beyond local prototyping.
Before merging to main, I’d (a) remove or dev‑gate this log and (b) either take password from user input or agree with BE on a different mechanism if a password isn’t really needed yet.
🤖 Prompt for AI Agents
In src/pages/GroupPage.tsx around lines 39 to 54, remove the console.log that
prints the outgoing payload (it exposes sensitive data) and eliminate the
hard‑coded "1234" password in the createStudy call; instead take the password
from the form data (e.g., data.password) or omit the password field entirely if
the backend agreed it’s not required, and ensure any remaining debug logs never
include password or other sensitive fields (use guarded logging or omit
sensitive keys).
| * @param data 스터디 생성 요청 데이터 (name, meetingName, maxMembers, password, description) | ||
| * @returns 생성된 스터디 정보 | ||
| */ | ||
| export async function createStudy( | ||
| data: CreateStudyRequest | ||
| ): Promise<CreateStudyResponse> { | ||
| console.log("📤 실제 요청 바디:", data); | ||
| const response = await api.post<CreateStudyResponse>("/studies", data); | ||
| return response.data; | ||
| } |
There was a problem hiding this comment.
Avoid logging full createStudy payload (includes password)
console.log("📤 실제 요청 바디:", data); will log all fields including password. Even if currently a dummy value, this is a bad pattern to keep in production and can leak credentials into logs. I’d remove this log or gate it behind a dev‑only check and, if needed, log only non‑sensitive fields.
🤖 Prompt for AI Agents
In src/services/study.service.ts around lines 11 to 20, the function logs the
entire createStudy request body (including the password) which can leak
credentials; remove the console.log or guard it behind an environment/dev-only
check and if logging is needed, only log a sanitized object that excludes
sensitive fields (e.g., omit password) before sending the request. Ensure no raw
request payload with sensitive fields is written to logs in production.
1 participant
Summary by CodeRabbit
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.