Conversation
Review Summary by Qodo프로필 이미지 업로드 로직 개선 및 에러 처리 강화
WalkthroughsDescription• Presigned URL 요청에 파일명 파라미터 추가 • 이미지 업로드 단계별 에러 핸들링 강화 • 기본 이미지 처리 로직 단순화 및 명확화 • 불필요한 유틸 함수 제거 및 인라인 처리 Diagramflowchart LR
A["파일명 파라미터 추가"] --> B["Presigned URL 요청"]
B --> C["에러 핸들링 추가"]
C --> D["S3 업로드"]
D --> E["기본 이미지 처리 단순화"]
E --> F["프로필 제출"]
File Changes1. hooks/useProfileSignUp.ts
|
Enabling\disabling automation
meaning the
the tool will replace every marker of the form
Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all. |
Custom labelsThe default labels of the If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases.
The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. |
Inline File Walkthrough 💎For enhanced user experience, the To enable inline file summary, set
|
Utilizing extra instructionsThe Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable. |
More PR-Agent commands
|
See the describe usage page for a comprehensive guide on using this tool.
Code Review by Qodo
1. Serialized File upload crash
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| const { data: response } = await api.get<PresignedUrlResponse>( | ||
| "/api/members/files/presigned/profiles", | ||
| { params: { filename: file.name } }, | ||
| ); | ||
| presignedUrl = response.data.presignedUrl; | ||
| imageKey = response.data.imageKey; | ||
| } catch (error) { | ||
| console.error("❌ Presigned URL을 받아오지 못했습니다.", error); | ||
| throw error; | ||
| } | ||
|
|
||
| // S3에 직접 업로드 (Axios 인스턴스 대신 표준 axios 사용 - baseURL 무시를 위해) | ||
| await axios.put(presignedUrl, file, { | ||
| headers: { | ||
| "Content-Type": file.type, | ||
| }, | ||
| }); | ||
| // 2단계: S3에 직접 업로드 (Axios 인스턴스 대신 표준 axios 사용 - baseURL 무시를 위해) | ||
| try { | ||
| await axios.put(presignedUrl, file, { | ||
| headers: { | ||
| "Content-Type": file.type, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
1. Serialized file upload crash 🐞 Bug ⛯ Reliability
TermsDrawer가 profile.profileImageFile을 truthy 체크만으로 uploadImage에 전달하는데, ProfileProvider가 프로필 전체를 JSON.stringify로 localStorage에 저장/로드하므로 새로고침 후 profileImageFile이 실제 File이 아닌 plain object가 되어 file.name/file.type 접근이 깨져 presigned 발급 또는 S3 업로드가 런타임 실패합니다.
Agent Prompt
### Issue description
`profileImageFile`(File 객체)가 ProfileProvider에서 localStorage에 JSON으로 저장/복원되면서 실제 `File` 형태가 보존되지 않습니다. 이후 `TermsDrawer.handleComplete()`에서 truthy 체크만으로 `uploadImage()`에 전달되고, 이번 PR에서 `uploadImage()`가 `file.name`을 쿼리 파라미터로 사용하게 되어 새로고침/재방문 시 런타임 실패가 발생할 수 있습니다.
### Issue Context
- 프로필 상태는 localStorage에 그대로 저장됩니다.
- File 객체는 JSON 직렬화/역직렬화로 원형이 보존되지 않습니다.
- `uploadImage()`는 `file.name`/`file.type`에 의존합니다.
### Fix Focus Areas
- providers/profile-provider.tsx[22-46]
- app/profile-image/_components/ScreenProfileImage.tsx[49-57]
- app/profile-image/_components/TermsDrawer.tsx[94-105]
- hooks/useProfileSignUp.ts[27-50]
### Expected changes
1) localStorage에 저장할 프로필 데이터에서 `profileImageFile`을 제외(저장 직전 삭제)하거나, 로드 직후 `profileImageFile`을 항상 `undefined`로 정리.
2) `TermsDrawer`에서 업로드 호출 전에 `profile.profileImageFile instanceof File` 체크. 아니라면 `updateProfile({ profileImageFile: undefined })`(provider 접근 가능 시)로 정리하고 에러 메시지/재선택 유도.
3) 가능하면 `useProfile` 상태를 `persisted fields`와 `ephemeral fields(File/preview)`로 분리.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
1 participant
feat: 프로필 이미지 업로드 로직 개선 및 기본 이미지 처리 추가