Agent: Document Agent
<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />
Referring to the @Member Information Update use case document, design the necessary screens and output them according to the @iOS Screen Design Template format.
</aside>
# iOS Screen Design Document Template
## Basic Information
| Item | Content |
| ----------------- | --------------------------------------------------- |
| Screen ID | \\[Unique identifier for the screen] |
| Screen Name | \\[Name of the screen] |
| Function Overview | \\[Overview of the features provided by this screen] |
| Author | \\[Author's name] |
| Creation Date | \\[Date of creation] |
| Update History | \\[Date, updater, and update details] |
## Screen Specifications
### 1. Screen Layout
\\[Insert wireframe or mockup image of the screen]
### 2. UI Elements List
| Element ID | Element Type | Display Name | Description | Input Restrictions/Display Conditions |
| ---------- | ------------------------------- | --------------- | -------------- | ------------------------------------------- |
| \\[ID-001] | \\[Button/Label/TextField, etc.] | \\[Display Text] | \\[Description] | \\[Input restrictions or display conditions] |
| \\[ID-002] | | | | |
| ... | | | | |
### 3. Screen Transitions
| Operation | Destination Screen | Transition Condition | Parameters Passed |
| ------------------- | -------------------------- | --------------------------- | -------------------------------- |
| \\[Button tap, etc.] | \\[Destination screen name] | \\[Condition for transition] | \\[Data passed during transition] |
| ... | | | |
### 4. Validation Rules
| Item | Validation Rule | Error Message |
| ------------ | ---------------------------------------- | --------------------------- |
| \\[Item name] | \\[Required/Character limit/Format, etc.] | \\[Error message to display] |
| ... | | |
### 5. API Requests
#### Request Information
| API Name | HTTP Method | Endpoint | Call Timing |
| ----------- | ----------------- | --------------- | ------------------------- |
| \\[API name] | \\[GET/POST, etc.] | \\[Endpoint URL] | \\[When the API is called] |
#### Request Parameters
| Parameter Name | Type | Required | Description |
| ----------------- | ------------------- | --------- | --------------------------- |
| \\[Parameter name] | \\[String/Int, etc.] | \\[Yes/No] | \\[Description of parameter] |
| ... | | | |
#### Response Handling
| Status Code | Handling Details |
| ----------- | ---------------------- |
| 200 | \\[Handling on success] |
| 400 | \\[Handling on error] |
| ... | |
### 6. State Management
| State Name | Type | Initial Value | Description |
| ---------------------- | ------- | ---------------- | ----------------------------- |
| \\[State variable name] | \\[Type] | \\[Initial value] | \\[What this state represents] |
| ... | | | |
### 7. Animation & Interaction
| Element ID | Event | Animation Details | Duration |
| ------------- | ------------------ | ----------------------- | ---------- |
| \\[Element ID] | \\[Tap/Swipe, etc.] | \\[Details of animation] | \\[Seconds] |
| ... | | | |
### 8. Accessibility Support
| Element ID | VoiceOver Text | Accessibility Hint | Other Support |
| ------------- | ----------------- | ------------------ | ------------------------------ |
| \\[Element ID] | \\[VoiceOver text] | \\[Hint details] | \\[Other accessibility support] |
| ... | | | |
### 9. Localization
| Key | Japanese | English | Other Languages |
| ----------- | ---------------- | --------------- | ---------------------- |
| \\[Key name] | \\[Japanese text] | \\[English text] | \\[Other language text] |
| ... | | | |
### 10. Device Support
| Supported Device | Screen Size | Special Notes |
| ------------------ | -------------- | ---------------- |
| \\[iPhone 14, etc.] | \\[Screen size] | \\[Special notes] |
| ... | | |
### 11. Dark Mode Support
| Element ID | Light Mode Settings | Dark Mode Settings |
| ------------- | -------------------- | -------------------- |
| \\[Element ID] | \\[Color/Image, etc.] | \\[Color/Image, etc.] |
| ... | | |
## Supplementary Information
### Technical Implementation Notes
\\[Notes or special points for implementation]
### Design Guidelines Reference
\\[Reference to applicable design guidelines]
### Related Screens
\\[Reference to other related screens]
# Basic Information
| Item | Content |
| ------------ | -------------------------------------------------------------------------------------- |
| Screen ID | member-update-screen |
| Screen Name | Member Information Update Screen |
| Function | Screen for members to change email address, password, and profile image (per use case) |
| Author | Dummy |
| Created Date | 2025/08/12 |
| Update Log | 2025/08/12・Dummy・First Edition |
## Screen Specifications
### 1. Screen Layout
### 2. UI Elements List
| Element ID | Type | Display Name | Description | Input Restriction/Display Condition |
| --------------- | --------- | ---------------------- | ------------------------------------ | ---------------------------------------- |
| emailInput | TextField | New Email Address | Input field for email address | Required format & uniqueness |
| currentEmail | Label | Current Email Address | Displays registered email address | Shows current value of logged-in user |
| passwordInput | Password | Current Password | Password for identity verification | Required |
| newPassword | Password | New Password | Input for new password | Strength & character count restriction |
| confirmPassword | Password | New Password (Confirm) | Re-enter new password | Must match newPassword |
| profileImage | Image | Profile Image | Currently registered profile image | Display only |
| uploadImage | File | Select Image File | Upload new image | jpg/png only, max size 2MB |
| saveEmailBtn | Button | Update Email | Execute email address change | Enabled only if input required & changed |
| savePassBtn | Button | Change Password | Execute password change | Enabled if all three fields are filled |
| saveImgBtn | Button | Change Image | Execute image upload | Enabled when image selected |
| cancelBtn | Button | Cancel | Cancel edit operation | Always enabled |
| errorMsg | Text | Error Display Area | Shows validation or process errors | Displayed only when error occurs |
| resultMsg | Text | Result Notification | Common notification for success/fail | Displayed only after processing |
### 3. Screen Transitions
| Operation | Destination Screen | Transition Condition | Parameters Passed |
| -------------- | -------------------- | ----------------------------- | ----------------- |
| Save Button | Current Screen | Validation success → Save API | Process result |
| Cancel | Member Detail Screen | Button pressed | None |
| Session Expiry | Login Screen | Session error | None |
### 4. Validation Rules
| Item | Validation Rule | Error Message |
| ---------------- | ---------------------------------------- | -------------------------------------------- |
| Email Address | Required, email format, uniqueness | Invalid email format / Already registered |
| Current Password | Required, validity | Current password is incorrect |
| New Password | Required, at least 8 chars, mix of types | New password is weak / At least 8 characters |
| Confirm Password | Must match newPassword | New password does not match |
| Image File | jpg/png only, max size 2MB | Unsupported format / File size too large |
### 5. API Requests
#### Request Information
| API Name | HTTP Method | Endpoint | Call Timing |
| ------------------ | ----------- | -------------------- | ------------------------ |
| updateEmail | POST | /api/member/email | When saving email |
| updatePassword | POST | /api/member/password | When saving password |
| updateProfileImage | POST | /api/member/image | When saving image upload |
#### Request Parameters
| Parameter Name | Type | Required | Description |
| --------------- | ------ | -------- | ----------------------------- |
| newEmail | String | Yes | New email address |
| currentPassword | String | Yes | Current password |
| newPassword | String | Yes | New password |
| profileImage | File | Yes | New profile image (on upload) |
#### Response Handling
| Status Code | Handling Description |
| ----------- | ----------------------------------------- |
| 200 | On success: Show success notification |
| 400/422 | Show validation error |
| 401 | Session expired: Redirect to login screen |
| 500 | Show common error |
### 6. State Management
| State Name | Type | Initial Value | Description |
| ------------ | ------ | ---------------------------- | --------------------------- |
| email | String | Current value (from API) | Email address being entered |
| password | String | Empty string | Current password |
| newPassword | String | Empty string | New password |
| confirmPass | String | Empty string | New password (confirmation) |
| profileImage | String | Current image URL (from API) | Profile image for display |
| uploadFile | File | null | Newly uploaded image |
| error | String | Empty string | Error message |
| result | String | Empty string | Result notification |
### 7. Animation & Interaction
| Element ID | Event | Animation Description | Duration |
| ------------ | ---------- | ----------------------------- | -------- |
| saveEmailBtn | Tap | Press animation on button tap | 0.2 sec |
| savePassBtn | Tap | Press animation on button tap | 0.2 sec |
| saveImgBtn | Tap | Press animation on button tap | 0.2 sec |
| errorMsg | On display | Fade-in notification | 0.5 sec |
| resultMsg | On display | Fade-in notification | 0.5 sec |
### 8. Accessibility Support
| Element ID | VoiceOver Text | Accessibility Hint | Other Support |
| ------------- | ------------------------ | ------------------------- | -------------------------- |
| emailInput | Enter new email address | Enter in email format | Focus frame color contrast |
| passwordInput | Enter current password | Hidden for security | Do not auto-read |
| saveEmailBtn | Save email change button | Enabled after input check | |
| ... | ... | ... | ... |
### 9. Localization
| Key | Japanese | English | Other Languages |
| ------------------ | -------- | ------------- | --------------- |
| member.email | メールアドレス | Email Address | |
| member.password | パスワード | Password | |
| member.newPassword | 新パスワード | New Password | |
| member.profile | プロフィール画像 | Profile Image | |
| common.save | 保存 | Save | |
| common.cancel | キャンセル | Cancel | |
### 10. Device Support
| Supported Device | Screen Size | Remarks |
| ---------------- | ---------------------- | --------------- |
| iPhone 14 | 390x844px | Touch operation |
| Android | Mainstream resolutions | Responsive |
| PC | 1280px or more | Responsive |
### 11. Dark Mode Support
| Element ID | Light Mode Setting | Dark Mode Setting |
| ------------ | ---------------------------- | -------------------------------- |
| emailInput | White background, black text | Dark gray background, white text |
| saveEmailBtn | Blue background, white text | Blue background, white text |
| ... | ... | ... |
## Supplementary Information
### Technical Implementation Notes
- Both API and screen validation are performed for email, password, and image
- When important information is changed, email notification is sent from the server
- All input values from the frontend are transmitted via encrypted communication
### Design Guideline Reference
- Refer to internal standards for form design and accessibility guidelines
### Related Screens
- Member Detail Screen
- Login Screen