Feature/profile update(patch) 기능 구

[youdaeng2]

📦 Pull Request

📝 요약(Summary)

유저 마이페이지에서 프로필 이미지를 업로드하고 닉네임을 수정할 수 있는 기능을 추가했습니다.

• Profile 컴포넌트에 닉네임 수정 폼을 추가해 사용자가 직접 닉네임을 수정하고 저장할 수 있습니다.
• 프로필 이미지 클릭 시 파일 선택창이 열리며, 이미지 선택 시 즉시 미리보기로 반영됩니다.
• 이미지 업로드는 .png, .jpg, .jpeg, .webp 확장자만 허용되며, MIME 타입도 검증합니다.
• 닉네임 또는 이미지 중 하나라도 변경된 경우에만 '변경하기' 버튼이 활성화되며, 중복 요청을 방지하기 위해 isSubmitting 상태를 사용합니다.
• 변경된 정보는 PATCH /users/me API를 통해 서버에 반영되며, 응답 결과를 전역 유저 상태 (useUser)에 업데이트합니다.
• next/image의 fill 사용으로 인한 런타임 경고를 해결하기 위해 width + height 방식으로 렌더링 구조를 리팩토링했습니다.

---

💬 공유사항 to 리뷰어

• 이미지 미리보기 처리에서 blob: URL 여부에 따라 <img>와 <Image>를 조건 분기했는데, 이 구조가 적절한지 검토 부탁드립니다.
• ProfileImageInput에 업로드, 미리보기, 확장자 제한 로직이 몰려 있는데 컴포넌트 책임 분리 측면에서 더 나은 구조가 있을지 의견 주시면 감사하겠습니다.
• 이미지를 삭제하는 기능이나 변경 완료 시 유저에게 알려주는 로직 등 꼭 넣었으면 하는 추가 기능이 있다면 말씀해주세요

---

관련 이슈

#81

📸 스크린샷

이미지, 닉네임 수정

맞지 않는 확장자 업로드 시 제한

---

✅ 체크리스트

• 프로필 이미지 클릭 시 파일 선택창 정상 작동
• 이미지 선택 시 미리보기 정상 표시 (blob: URL → <img>, URL → <Image>)
• 업로드된 이미지가 서버에 저장되고 수정 요청에 반영됨
• 닉네임 수정 시 입력값 검증 (2자 이상 20자 이하)
• 닉네임 또는 이미지 중 하나라도 변경된 경우에만 버튼 활성화
• API 응답 결과로 전역 유저 상태 업데이트 (useUser)
• next/image에서 fill 대신 width + height 속성으로 구조 수정
• 이미지 확장자 제한 (.png, .jpg, .jpeg, .webp)
• ESLint / Prettier 통과
• 빌드 및 실행 테스트 완료

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
whyne-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2025 5:29am