Fix: #279 이미지 업로드 및 조회 오류 수정 #284
Conversation
Walkthrough이 변경 사항은 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 0
🧹 Outside diff range and nitpick comments (2)
src/hooks/query/useUserQuery.ts (1)
43-43: 이미지 처리 로직이 올바르게 수정되었습니다.프로필 이미지 업로드 및 삭제 시
editUserInfo호출에서 속성명이fileName으로 일관되게 변경되었습니다. 기존의 에러 처리와 쿼리 무효화 로직은 그대로 유지되어 있습니다.다만, 이미지 업로드/삭제 실패 시 사용자에게 보여지는 에러 메시지를 좀 더 구체적으로 개선하면 좋을 것 같습니다:
- onError: () => toastError('이미지 업로드에 실패했습니다. 다시 시도해 주세요.'), + onError: () => toastError('프로필 이미지 업로드에 실패했습니다. 잠시 후 다시 시도해 주세요.'),Also applies to: 62-62
src/mocks/mockData.ts (1)
207-207: 이미지 파일 확장자 검증 로직 추가를 고려해주세요.현재 더미 데이터에 jpg, png, jpeg, webp 등 다양한 이미지 확장자가 사용되고 있습니다. 실제 구현 시 허용된 이미지 확장자 검증 로직 추가를 권장드립니다.
const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.webp'] as const; function isValidImageFile(fileName: string): boolean { const extension = fileName.toLowerCase().slice(fileName.lastIndexOf('.')); return ALLOWED_IMAGE_EXTENSIONS.includes(extension as typeof ALLOWED_IMAGE_EXTENSIONS[number]); }Also applies to: 218-218, 229-229, 240-240, 251-251, 262-262, 273-273, 284-284
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
src/components/user/auth-form/ProfileImageContainer.tsx(1 hunks)src/hooks/query/useUserQuery.ts(2 hunks)src/mocks/mockData.ts(24 hunks)src/mocks/services/authServiceHandler.ts(2 hunks)src/mocks/services/userServiceHandler.ts(2 hunks)src/pages/setting/UserSettingPage.tsx(2 hunks)src/stores/useStore.ts(2 hunks)src/types/UserType.tsx(2 hunks)
🔇 Additional comments (7)
src/types/UserType.tsx (1)
13-13: 타입 정의가 일관성 있게 업데이트되었습니다.
백엔드와의 일관성을 위해 profileImageName에서 fileName으로 변경된 사항이 User 타입과 관련 타입 정의들에 올바르게 반영되었습니다.
Also applies to: 20-20, 31-31
src/stores/useStore.ts (1)
84-84: 상태 관리 로직이 일관성 있게 수정되었습니다.
userInfo의 초기 상태와 clearUserInfo 메서드에서 fileName 속성이 올바르게 적용되었습니다. 스토어의 영속성 처리와 암호화 로직은 변경 없이 잘 유지되고 있습니다.
추가로 확인이 필요한 사항:
Also applies to: 107-107
✅ Verification successful
userInfo.fileName 속성의 마이그레이션이 완료되었습니다.
ProfileImageContainer 컴포넌트에서 새로운 fileName 속성을 올바르게 사용하고 있으며, 이전 속성명인 profileImageName은 코드베이스에서 완전히 제거되었음을 확인했습니다. 상태 관리 로직이 일관되게 적용되어 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 다른 컴포넌트에서 userInfo.fileName 사용 여부 확인
# userInfo.fileName 사용 검색
rg "userInfo\.fileName" --type ts --type tsx
# 이전 속성명 사용 여부 확인 (마이그레이션 누락 검증)
rg "profileImageName" --type ts --type tsx
Length of output: 145
Script:
#!/bin/bash
# Search for userInfo.fileName usage
rg "userInfo\.fileName"
# Search for previous property name usage
rg "profileImageName"
# List TypeScript files to understand the codebase structure
fd "\.tsx?$"
Length of output: 5422
src/components/user/auth-form/ProfileImageContainer.tsx (1)
37-38: 변수명 변경이 올바르게 적용되었습니다.
백엔드와의 일관성을 위해 profileImageName에서 fileName으로의 변경이 정확하게 이루어졌습니다.
src/pages/setting/UserSettingPage.tsx (1)
26-26: 폼 데이터의 변수명이 일관되게 변경되었습니다.
defaultValues, watch, setValue 모두에서 fileName 사용이 일관되게 적용되었습니다.
Also applies to: 59-60
✅ Verification successful
fileName 타입이 올바르게 정의되어 있고 일관되게 사용되고 있습니다.
검증 결과:
EditUserInfoForm타입은User타입을 상속받고 있으며,User타입에서fileName이string | null타입으로 올바르게 정의되어 있습니다.- 코드베이스 전반에 걸쳐
fileName필드가 일관되게 사용되고 있습니다. - 폼 데이터의 기본값 설정과 타입이 모두 정확하게 일치합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# EditUserInfoForm 타입 정의 확인
ast-grep --pattern 'type EditUserInfoForm = {
$$$
fileName: $_
$$$
}'
Length of output: 77
Script:
#!/bin/bash
# EditUserInfoForm 타입 정의를 다른 패턴으로 검색
rg -A 5 "EditUserInfoForm"
# fileName 관련 타입 정의 검색
rg -A 2 "fileName.*:"
Length of output: 10263
src/mocks/services/userServiceHandler.ts (1)
97-97: Mock 서비스의 변수명이 올바르게 업데이트되었습니다.
이미지 업로드와 삭제 핸들러에서 fileName 사용이 일관되게 적용되었습니다.
Also applies to: 165-165
✅ Verification successful
Let me verify the mock data structure with one more command to ensure consistency.
Mock 데이터 구조와 변수명이 일관되게 적용되었음을 확인했습니다.
User타입에fileName필드가 올바르게 정의되어 있습니다.USER_DUMMY초기 데이터에도fileName필드가 포함되어 있습니다.- 이미지 업로드와 삭제 핸들러에서
fileName사용이 일관되게 적용되었습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# USER_DUMMY 타입과 초기 데이터 구조 확인
ast-grep --pattern 'const USER_DUMMY: User[] = ['
# User 타입 정의 확인
ast-grep --pattern 'type User = {
$$$
fileName: $_
$$$
}'
Length of output: 582
Script:
#!/bin/bash
# Check USER_DUMMY initialization
rg "USER_DUMMY.*=" -A 10
Length of output: 33639
src/mocks/services/authServiceHandler.ts (1)
45-45: 변수명 변경이 일관되게 적용되었습니다.
백엔드와의 일관성을 위해 profileImageName에서 fileName으로 변경된 부분이 회원가입 및 소셜 로그인 로직에서 올바르게 적용되었습니다.
Also applies to: 185-185
src/mocks/mockData.ts (1)
33-33: 더미 데이터의 변수명이 일관되게 변경되었습니다.
모든 사용자 데이터에서 profileImageName이 fileName으로 올바르게 변경되었습니다.
Also applies to: 44-44, 55-55, 66-66, 77-77, 88-88, 99-99, 110-110, 121-121, 132-132, 143-143, 154-154, 165-165, 176-176, 187-187, 196-196
PR Type
What kind of change does this PR introduce?
Related Issues
What does this PR do?
Other information
백엔드에서 보내주는 이미지 파일 정보의 변수명이
fileName인데 반해, 프론트에서 사용 중인 변수명은profileImageName이었기 때문에 이미지 관련 기능에 오류가 발생했습니다.이에 따라 버그를 수정하기 위해 백엔드와 변수명을 일치시키는 작업을 진행했습니다.