화면 05 · 내정보 및 설정 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page 4:46 "05. 내정보 및 설정" · 허브 노트: 화면-05-01-내정보-및-설정.md
6개 섹션 · 19개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)
범위: 마이페이지(계정 관리) 화면군. 결제 내역(별도 화면)·멤버십·크레딧·결제수단 관리는 별도 화면 파일(이 화면군 밖).

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

05_01 · 마이페이지 (홈)

계정 관리의 허브. 이메일·멤버십·크레딧·설정 메뉴가 한 화면에 모인다. 멤버십 등급에 따라 무료(Free)·유료(Membership) 두 모습으로 갈린다. 진입 시 GET /member/info로 전체를 채운다.

마이페이지 · 무료(Free)

My page 1

E-mail user@email.com › 2

MembershipFree

Start Membership › 3

Credit0

Add Credit › 4

Payment History› 5

Payment Methods› 6

Set PIN code› 7

Change PIN code›

Change Password› 8

Notifications 9

LanguageEnglish › 10

Log out› 11

Delete account› 12

주석 · 마이페이지 무료
1데이터진입 시 회원 정보 조회 GET /member/info로 이메일·등급·크레딧·알림·언어를 채운다. 대응 뷰 MyPageView.vue.
2이동이메일 행 → 이메일 변경. 대응 뷰 ChangeEmailView.vue.
3이동"Start Membership" → 멤버십 가입(handleMembership). 멤버십 화면은 [[화면-06-멤버십-크레딧]] (이 화면군 밖).
4이동"Add Credit" → 크레딧 충전(handleAddCredit). 결제 화면은 [[화면-06-멤버십-크레딧]] (이 화면군 밖).
5이동결제 내역(별도 화면) → 별도 화면 파일. 갤러리에서 열람 (이 화면군 밖).
6이동결제 수단 관리 → [[화면-05-03-결제수단-관리]]. 신설 메뉴(arwen_docs#321) (이 화면군 밖).
7이동"Set PIN code" → 간편 비밀번호(PIN) 설정. 대응 뷰 SetPinView.vue.
·이동"Change PIN code" → 간편 비밀번호 변경(ChangePinView.vue). PIN 등록 뒤 노출.
8데이터비밀번호 변경 → POST /auth/email-verify/password(재설정 메일). 대응 뷰 ChangePasswordView.vue.
9동작알림 토글 → 켜짐/꺼짐 즉시 저장 PATCH /member/notification.
10이동"Language" → 언어 설정 모달. 선택 시 PATCH /member/lang.
11이동"Log out" → 로그아웃 확인 팝업. 확인 시 POST /member/signOut.
12이동"Delete account" → 회원 탈퇴. 대응 뷰 DeleteAccountView.vue.
13요소하단 탭(layout/bottom_menu): My character·Chats·My page. 다른 탭은 별도 화면 파일 (이 화면군 밖).

마이페이지 · 유료(Membership)

My page

E-mailuser@email.com ›

3 months membership› 1

renews 2026-08-01 · auto-renew ON 2

Credit1,240

Add Credit ›

Payment History›

Payment Methods›

Change PIN code›

LanguageEnglish ›

Log out›

1상태유료 등급이면 멤버십 줄에 등급명(예: 3 months membership)이 뜬다. 눌러 멤버십 관리로(이 화면군 밖).
2상태갱신일과 자동결제(auto-renew) 안내가 붙는다. 근거: [[멤버십]]·[[결제-구독-여정]].

05_02 · 언어 설정 · 로그아웃 (오버레이)

언어 설정은 화면 아래에서 올라오는 모달창(modal), 로그아웃은 화면 가운데에 뜨는 팝업(popup)으로 나눠 쓴다. 근거: KB 노트 "모달과 팝업은 다르게 쓴다".

언어 모달 · default

My page

Language 1

한국어 (Korean)

English

Save 2

주석 · 언어 설정 모달
1요소바텀시트 모달(modal). 언어 선택 항목은 Option 컴포넌트. 한국어·영어 중 하나.
2규칙아무것도 고르지 않으면 Save 비활성. 저장 시 PATCH /member/lang.

언어 모달 · selected

My page

Language

한국어 (Korean)✓ 1

English

Save

1상태고른 항목에 테두리 강조가 붙고 Save 활성. 저장 → PATCH /member/lang 후 마이페이지로 복귀.

로그아웃 확인 팝업

My page

주석 · 로그아웃 팝업
1이동"Cancel" → 팝업 닫고 마이페이지에 머무름.
2데이터"Ok" → 로그아웃 실행 POST /member/signOut. 성공 시 로그인 화면으로(이 화면군 밖).

05_03 · 이메일 변경

새 이메일 입력 → 인증 메일 발송 → 링크 인증 → 완료. 이미 쓰는 이메일이면 오류로 막는다. 대응 뷰 ChangeEmailView.vue·ChangeEmailSentView.vue·ChangeEmailResultView.vue.

이메일 변경 · default

‹ Change E-mail 1

새 이메일을
입력해 주세요

New e-mail 2

주석 · 이메일 변경 기본
1이동뒤로 가기 → 마이페이지.
2동작새 이메일 입력. 형식·중복 검증. 컴포넌트 Input/Text_field.
3데이터변경 요청 POST /member/email → 인증 메일 발송 POST /member/email-verify. 채우기 전에는 비활성.

이메일 변경 · filled

‹ Change E-mail

새 이메일을
입력해 주세요

new@email.com

·상태이메일 채우면 Continue 활성 → 인증 메일 발송 안내로.

이메일 변경 · 인증메일 전송

‹

인증 메일을 보냈어요

받은 메일의 인증 링크를 눌러
이메일 변경을 마치세요.

·데이터인증 메일 발송 POST /member/email-verify. 대응 뷰 ChangeEmailSentView.vue.
·이동봉투(일러스트) 클릭 = 메일 링크 인증 시뮬 → 변경 완료.

이메일 변경 · 사용중(오류)

‹ Change E-mail

새 이메일을
입력해 주세요

used@email.com

이미 사용 중인 이메일입니다. 1

1상태이미 가입에 쓰인 이메일이면 오류 Label로 막는다. 다른 이메일로 재입력 유도. #needs-verification 오류 문구 정본.

이메일 변경 · success

‹

이메일이 변경되었어요

새 이메일로 로그인할 수 있어요.

1이동변경 완료 화면. 대응 뷰 ChangeEmailResultView.vue. "Go to Home" → 메인(이 화면군 밖).

05_04 · 간편 비밀번호(PIN) 설정

4자리 PIN을 처음 등록한다. 입력 → 재입력 확인(불일치 시 오류) → 완료. PIN은 브라우저 재실행 시 본인 확인용 4자리 잠금이다. 대응 뷰 SetPinView.vue·ConfirmPinView.vue.

PIN 설정 · 입력

‹ Set PIN code 1

PIN 번호를
설정하세요

숫자 4자리 2

주석 · PIN 설정 입력
1이동뒤로 가기 → 마이페이지.
2동작4칸에 한 자리씩 숫자 입력(Input/Text_field + 키패드).
3이동입력 완료 → 재입력 확인 단계로. PIN 등록 처리(FE 내부).

PIN 설정 · 재입력 error

‹ Set PIN code

PIN 번호를
다시 입력하세요

PIN codes do not match. 1

1상태앞서 넣은 PIN과 다르면 "PIN codes do not match." 오류. 일치해야 다음 진행(ConfirmPinView.vue).

PIN 설정 · success

‹

PIN이 설정되었어요

다음 접속부터 PIN으로 잠금을 풀어요.

1이동등록 완료 → "확인" → 마이페이지로 복귀. 근거: [[glossary]] PIN 정의.

05_05 · 간편 비밀번호(PIN) 변경

이미 PIN을 쓰는 사용자가 바꾼다. 현재 PIN 확인 → 새 PIN 입력·재입력 → 완료. 대응 뷰 ChangePinView.vue·ConfirmChangePinView.vue.

PIN 변경 · 기존 확인

‹ Change PIN code 1

현재 PIN을
입력하세요

본인 확인 2

주석 · PIN 변경 기존 확인
1이동뒤로 가기 → 마이페이지.
2동작현재 쓰는 PIN 4자리 입력. 틀리면 오류(error) 상태로 재시도.
3이동확인되면 새 PIN 입력 단계로.

PIN 변경 · 새 입력/재입력

‹ Change PIN code

새 PIN을
입력하세요

한 번 더 입력해 확인 1

1상태새 PIN 입력 → 재입력으로 확인. 불일치 시 오류(설정과 동일 규칙).

PIN 변경 · success

‹

PIN이 변경되었어요

새 PIN으로 잠금을 풀어요.

1이동변경 완료 → "확인" → 마이페이지로 복귀.

05_06 · 회원 탈퇴

약관을 읽고 동의해야 탈퇴한다. 동의 체크 → 계정 삭제 → 완료 팝업. 대응 뷰 DeleteAccountView.vue. 처리하면 회원 데이터는 탈퇴 기록으로 남는다([[MemberWithdraw]]).

회원 탈퇴 · default

‹ Delete account 1

I agree and delete my account. 2

주석 · 회원 탈퇴 기본
1이동뒤로 가기 → 마이페이지.
2동작탈퇴 약관 동의 체크(button/check+text). 필수. #needs-verification 약관 본문에 candy.ai·EverAI 등 외부 더미 텍스트가 섞여 있음(실제 약관 확정 필요).
3규칙동의 전에는 Delete account 비활성. 동의해야 활성.

회원 탈퇴 · selected

‹ Delete account

I agree and delete my account.

·상태동의 체크(on) → Delete account 활성. 실행 → POST /member/withdraw.

회원 탈퇴 · 완료 팝업

‹ Delete account

I agree and delete my account.

1이동탈퇴 성공 → dim+popup 안내. "Ok" → 로그인/시작 화면으로(이 화면군 밖). 데이터는 [[MemberWithdraw]] 기록으로 남는다.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-05-01-내정보-및-설정.md의 wireframe: 필드가 이 파일을 가리킨다. 결제 내역(별도 화면)·멤버십·크레딧·결제수단 관리는 별도 화면 파일이며, 화면 간 이동은 갤러리(index.html)로 본다.