Profile & Password

로그인한 사용자가 자신의 정보를 보고 고치는 화면입니다. /me 페이지에서 큰 아바타와 요약 카드 아래에 프로필 수정과 비밀번호 변경 두 탭으로 제공됩니다.

What users can do

Profile form

<ProfileForm
  user={user}
  onSubmit={update.mutate}
  pending={update.isPending}
  optionalFields={["nickname", "phone", "address"]}
  addressType="postcode"
/>

Nickname

• 닉네임을 켜 두면 마이페이지 요약 카드에서 [변경] 한 번으로 바꿀 수 있습니다 (NicknameForm, Nickname 페이지 참고). 이 프로필 폼에서는 중복을 피하려고 닉네임을 따로 보여 주지 않습니다.
• 폼 컴포넌트 단독으로 쓸 때(optionalFields에 nickname을 넣었을 때)는 이 폼 안에서도 입력하고 바꿀 수 있습니다 (2~12자). 비우고 저장하면 닉네임이 지워지고 이름이 다시 보입니다.
• 닉네임이 있으면 사용자 메뉴, 아바타의 이니셜, 내 정보 제목에 이름 대신 닉네임이 쓰입니다.
• 중복 닉네임은 서버가 거절하고, 그 메시지가 폼 아래에 나옵니다.

Address

주소는 가입과 같은 AddressField를 씁니다. 검색 버튼으로 다시 고르면 우편번호와 주소가 함께 바뀌고, 상세 주소만 고칠 수도 있습니다 (Address Field 참고).

• 처음에는 저장 버튼이 잠겨 있고, 값을 바꿔야 켜집니다. 바꾸지 않은 채 저장하는 일을 막습니다.
• 아이디는 수정할 수 없습니다(비활성 입력창). 로그인 식별자라 바꾸면 안 됩니다.
• 저장에 성공하면 화면의 이름·이메일이 바로 갱신되고 내 정보를 저장했습니다. 토스트가 나타납니다.
• 선택 항목은 가입 폼에서 켠 signup.optionalFields와 같은 목록을 씁니다. 가입에서 받는 항목은 여기서도 고칠 수 있어야 하기 때문입니다.

Change password

<ChangePasswordForm
  onSubmit={change.mutate}
  pending={change.isPending}
  error={message}
/>

• 제출하면 입력창이 모두 비워집니다. 비밀번호를 화면에 남기지 않기 위해서입니다.
• 성공하면 비밀번호를 변경했습니다. 토스트가 나타납니다.

API

// request
{ "name": "김관리자", "email": "master@example.com", "phone": "010-1234-5678" }

// response 200 → 갱신된 User

// request
{ "current_password": "••••••••", "new_password": "••••••••" }

// response 204 | 400 { "detail": "현재 비밀번호가 올바르지 않습니다." }

• 비밀번호를 바꾼 뒤 다른 기기의 세션을 끊을지는 서버 정책입니다. 보안상 끊는 것을 권장합니다.

Props

ProfileForm

ChangePasswordForm