Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough
Changes공간 등록 기능 추가
토큰 저장소 및 로그아웃 인프라 개선
Sequence Diagram(s)sequenceDiagram
actor User as 사용자
participant HostPostPage as HostPostPage
participant SpaceCreateForm as SpaceCreateForm
participant NextRoute as /api/spaces (Next.js)
participant Upstream as 상위 공간 서비스
User->>HostPostPage: 이미지 파일 선택 (PhotoSlot)
HostPostPage->>HostPostPage: URL.createObjectURL → previewUrl 생성
User->>HostPostPage: 캘린더 날짜 클릭
HostPostPage->>HostPostPage: selectedDates 토글
HostPostPage->>SpaceCreateForm: imageFiles, selectedDates 전달
User->>SpaceCreateForm: 폼 입력 후 임시저장
SpaceCreateForm->>SpaceCreateForm: sessionStorage에 draft 저장
User->>SpaceCreateForm: 등록 제출
SpaceCreateForm->>SpaceCreateForm: getAccessToken() / 유효성 검증 / fileToDataUrl()
SpaceCreateForm->>NextRoute: POST /api/spaces (Authorization + body)
NextRoute->>NextRoute: 환경변수·헤더·필드 타입 검증
NextRoute->>Upstream: axios.post /spaces
Upstream-->>NextRoute: 응답 (space_id 등)
NextRoute-->>SpaceCreateForm: 상위 status + 데이터
SpaceCreateForm->>SpaceCreateForm: sessionStorage draft 삭제
SpaceCreateForm-->>User: 성공 메시지 (space_id 포함)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/app/api/spaces/route.ts (1)
4-14: 💤 Low value
CreateSpaceBody타입 정의가 실제 검증 로직과 불일치합니다.모든 필드가 optional(
?)로 선언되어 있지만, Line 78-92에서 필수 필드로 검증하고 있습니다. 타입 정의를 실제 요구사항에 맞게 수정하면 코드 가독성과 타입 안전성이 향상됩니다.💡 제안: 필수/선택 필드 명시
type CreateSpaceBody = { - name?: string; - description?: string | null; - address?: string; - thumbnail_url?: string; - image_urls?: string[]; - price_per_hour?: number; - category?: string; - lat?: number; - lng?: number; + name: string; + description?: string | null; + address: string; + thumbnail_url: string; + image_urls: string[]; + price_per_hour: number; + category: string; + lat: number; + lng: number; };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/api/spaces/route.ts` around lines 4 - 14, The CreateSpaceBody type definition marks all fields as optional with the `?` modifier, but the validation logic at lines 78-92 treats certain fields as required. Update the CreateSpaceBody type definition to remove the optional marker from fields that are validated as mandatory (such as name, address, lat, lng, etc.), keeping only truly optional fields marked with `?`. This will align the type definition with the actual validation requirements and improve type safety.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/api/spaces/route.ts`:
- Around line 78-92: The validation check for the `image_urls` field in the
request body validation section only verifies that it is an array using
`Array.isArray(body.image_urls)`, but does not validate that all elements within
the array are strings. Add an additional check within the same conditional block
to ensure that every element in the `body.image_urls` array is of type string.
This can be done by chaining a check that uses `every()` method to verify all
array elements are strings, preventing invalid data types from being passed to
downstream services.
In `@src/app/Host_post/page.tsx`:
- Around line 168-179: The handleImageSlotChange function creates new Blob URLs
via URL.createObjectURL when replacing images but never revokes the previous
ones, causing memory leaks when images are replaced multiple times in the same
slot. Before assigning a new file and preview URL to a slot, check if the
current slot already has a previewUrl value and revoke it using
URL.revokeObjectURL() before proceeding with the update. This ensures old Blob
URLs are properly cleaned up during image replacement.
- Around line 128-136: The useEffect cleanup function is running every time
imageSlots changes because imageSlots is included in the dependency array, which
immediately revokes newly created Blob URLs before they can be displayed. To fix
this, change the dependency array to an empty array [] so the cleanup function
only runs on component unmount, allowing Blob URL previews to persist during the
component's lifetime.
In `@src/app/Host_post/SpaceCreateForm.tsx`:
- Around line 276-297: The current implementation converts image files to
base64-encoded Data URLs and includes them directly in the JSON request body,
which exceeds the 1MB request size limit for large or multiple images. Instead
of using fileToDataUrl to convert files and embedding them as Data URLs in the
JSON body sent to the "/api/spaces" endpoint, refactor the image upload flow to
either use FormData with multipart/form-data encoding or implement a separate
image upload endpoint that returns URLs to be referenced in the space creation
request. This approach keeps the request body size manageable and follows
standard file upload patterns.
---
Nitpick comments:
In `@src/app/api/spaces/route.ts`:
- Around line 4-14: The CreateSpaceBody type definition marks all fields as
optional with the `?` modifier, but the validation logic at lines 78-92 treats
certain fields as required. Update the CreateSpaceBody type definition to remove
the optional marker from fields that are validated as mandatory (such as name,
address, lat, lng, etc.), keeping only truly optional fields marked with `?`.
This will align the type definition with the actual validation requirements and
improve type safety.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d6742069-979d-4d9b-a9fc-7bd244d40fcc
📒 Files selected for processing (3)
src/app/Host_post/SpaceCreateForm.tsxsrc/app/Host_post/page.tsxsrc/app/api/spaces/route.ts
Comment on lines
+276
to
+297
| try { | ||
| const imageDataUrls = await Promise.all(selectedFiles.map(fileToDataUrl)); | ||
|
|
||
| const response = await fetch("/api/spaces", { | ||
| body: JSON.stringify({ | ||
| name: form.title.trim(), | ||
| description: form.description.trim() || null, | ||
| address: form.region.trim(), | ||
| thumbnail_url: imageDataUrls[0], | ||
| image_urls: imageDataUrls, | ||
| price_per_hour: pricePerHour, | ||
| category: form.category, | ||
| lat, | ||
| lng, | ||
| }), | ||
| headers: { | ||
| Accept: "application/json", | ||
| "Content-Type": "application/json", | ||
| Authorization: `Bearer ${accessToken}`, | ||
| }, | ||
| method: "POST", | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Next.js API route body size limit default
💡 Result:
The default request body size limit for Next.js API routes and Server Actions is 1MB [1][2]. The method for configuring or changing this limit depends on which router you are using: Pages Router (API Routes) You can modify the body size limit by exporting a config object within your API route file [1][3]: export const config = { api: { bodyParser: { sizeLimit: '1mb', }, }, } App Router (Route Handlers) There is currently no direct equivalent to the pages router config object for Route Handlers in the App Router to increase the body size limit. If you need to handle larger payloads, you may need to stream the request body or use an alternative approach [4][5][6]. Server Actions For Server Actions, the limit can be configured in your next.config.js file [2]: module.exports = { experimental: { serverActions: { bodySizeLimit: '2mb', // Set your desired limit here }, }, }
Citations:
- 1: https://nextjs.im/docs/pages/building-your-application/routing/api-routes/
- 2: https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions
- 3: https://www.bookstack.cn/read/next.js-12.3-en/4b999732cdca2e4f.md
- 4: nextjs api routes not excepting body more than 1MB vercel/next.js#52457
- 5: App router Increase body size limit Api routes vercel/next.js#57501
- 6: https://stackoverflow.com/questions/79061963/nextjs-throwing-413-payload-too-large
🏁 Script executed:
# First, let's understand the project structure - check if it's Next.js and which router is used
git ls-files | head -20Repository: MomentLit/FE-V1
Length of output: 470
🏁 Script executed:
# Check for next.config.js or next.config.ts
find . -maxdepth 2 -name "next.config.*" -o -name "package.json" | head -10Repository: MomentLit/FE-V1
Length of output: 91
🏁 Script executed:
# Look for the API route being called (/api/spaces)
fd -t f "spaces" --search-path . | grep -i "api\|route"Repository: MomentLit/FE-V1
Length of output: 41
🏁 Script executed:
# Check the actual SpaceCreateForm.tsx file to understand context better
wc -l src/app/Host_post/SpaceCreateForm.tsxRepository: MomentLit/FE-V1
Length of output: 101
🏁 Script executed:
# Check next.config.ts for any body size configuration
cat next.config.tsRepository: MomentLit/FE-V1
Length of output: 295
🏁 Script executed:
# Check the specific lines 276-297 in SpaceCreateForm.tsx
sed -n '276,297p' src/app/Host_post/SpaceCreateForm.tsxRepository: MomentLit/FE-V1
Length of output: 759
🏁 Script executed:
# Search for the /api/spaces endpoint - might be in src/app/api
find ./src -type f -name "*.ts" -o -name "*.tsx" | xargs grep -l "api/spaces\|/spaces" 2>/dev/null | head -10Repository: MomentLit/FE-V1
Length of output: 280
🏁 Script executed:
# Check if there's an app/api directory structure
fd -t f . src/app/api 2>/dev/null | head -20Repository: MomentLit/FE-V1
Length of output: 191
🏁 Script executed:
# Check the API route handler
cat src/app/api/spaces/route.tsRepository: MomentLit/FE-V1
Length of output: 2636
🏁 Script executed:
# Search for fileToDataUrl function
rg "fileToDataUrl" -A 5 -B 2 src/app/Host_post/SpaceCreateForm.tsxRepository: MomentLit/FE-V1
Length of output: 534
🏁 Script executed:
# Look for any file size/image handling utilities
fd -t f "util\|helper\|constant" src/app/Host_post/ src/lib/ src/utils/ 2>/dev/null | xargs cat 2>/dev/null | head -50Repository: MomentLit/FE-V1
Length of output: 41
🏁 Script executed:
# Check if there's a base64 or file conversion utility
rg "toDataUrl|DataUrl|base64" -l src/Repository: MomentLit/FE-V1
Length of output: 97
Data URL로 인한 요청 본문 크기 초과 문제
Base64로 인코딩된 Data URL은 원본 파일 대비 약 33% 더 크며, 고해상도 이미지 5장이면 수십 MB가 될 수 있습니다. Next.js 기본 요청 본문 제한이 1MB이므로, 현재 코드에서는 다수의 이미지를 업로드할 때 요청이 실패할 가능성이 높습니다.
이미지는 multipart/form-data로 업로드하거나 별도의 업로드 엔드포인트에서 URL을 받아 사용하는 방식이 표준입니다. 또한 상위 서비스가 Data URL 형식을 지원하는지 확인이 필요합니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/Host_post/SpaceCreateForm.tsx` around lines 276 - 297, The current
implementation converts image files to base64-encoded Data URLs and includes
them directly in the JSON request body, which exceeds the 1MB request size limit
for large or multiple images. Instead of using fileToDataUrl to convert files
and embedding them as Data URLs in the JSON body sent to the "/api/spaces"
endpoint, refactor the image upload flow to either use FormData with
multipart/form-data encoding or implement a separate image upload endpoint that
returns URLs to be referenced in the space creation request. This approach keeps
the request body size manageable and follows standard file upload patterns.
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.
#️⃣ 연관된 이슈
📝 작업 내용
💬 리뷰 요청 사항 (선택)
Summary by CodeRabbit
릴리스 노트
새로운 기능
개선 사항