✨ feat: 프로필 업데이트 페이지 UX 개선 및 기능 분리

[james20140802]

🚀 Description

이 PR은 프로필 수정 페이지(profile/edit)의 전반적인 사용자 경험(UX)을 대폭 개선하고 오작동하던 기존 프로필 이미지 렌더링을 픽스합니다. 또한, 혼동을 방지하기 위해 사용자가 비밀번호를 자가 갱신할 수 있는 별도의 설정 페이지를 독립적으로 구성했습니다.

✨ Key Changes

• UX/UI 전면 개선 (Native Alert 제거)

  • useProfileUpdate 커스텀 훅 내부에 하드코딩 되어있던 브라우저 alert() 호출을 일괄 제거했습니다.
  • 결과를 상태 객체({ success: boolean, error?: string }) 형식으로 컨트롤하여 반환하도록 훅을 뜯어고쳤으며, 실패 및 성공 메시지가 sonner의 toast 컴포넌트를 통해 깔끔하게 띄워지도록 호출부를 수정했습니다.

• 프로필 이미지 복구 및 삭제 기능 구현

  • useProfileUpdate 에서 렌더링 시 서버 응답 전에 비동기 문제가 발생하여 imagePath가 먼저 null로 세팅되던 꼬임 이슈를 고쳤습니다.
  • 기존의 정적인 경로 참조(/profile-images/)를 getImageUrl 유틸 함수로 교체하여 소셜 로그인이나 원격 이미지 등의 스토리지 주소가 누락 없이 제대로 렌더링되게 변경했습니다.
  • X 삭제 아이콘 UI를 추가해, 버튼 클릭 시 프로필 이미지를 초기화시키고 즉각적으로 기본 영문 이니셜 아바타 모드로 전환되게 수정했습니다.

• 비밀번호 변경 전용 신규 뷰 분리

  • 프로필 수정 폼 안에서 헷갈리지 않게 스스로 비밀번호를 갱신할 수 있는 로그인된 회원용 전용 관리 페이지(/protected/profile/update-password)를 새로 오픈했습니다.
  • 투박하게 공간을 차지하던 기존 변경 버튼들을 제거하고, 다른 곳에서 쓰던 밑줄 텍스트 엥커 링크 스타일로 대체하여 미니멀한 구성으로 리팩토링했습니다.
  • 비밀번호 갱신 성공 시 자동 로그아웃 및 /login으로 튕겨내는 프로세스를 구현했습니다.

• 레이아웃 쏠림 현상(Layout Shift) 방어

  • 메인 ProfileHeader.tsx페이지에서 본인 태그 아이콘을 복사할 경우, 노출되는 'Copied!' 알림에 의해 전체 정보 엘리먼트들(닉네임, 짧은 소개 등)의 렌더링 가로폭이 좌측으로 욱여 밀리며 쏠리던 반응형 버그를 타겟하여, absolute 속성을 통해 물리적으로 포지션을 빼내어 고정되게 만들었습니다.

⚠️ Note

• useProfileUpdate 의 반환 타입이 변경되었습니다. 이후 해당 훅을 사용할 때는 리턴된 success 프로퍼티 결과에 따라 분기 처리를 하셔야 합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
readiary	Ready	Preview, Comment	Mar 8, 2026 7:22am