Mypage 구현 by devgony · Pull Request #27 · prography/10th-Motimo-FE

devgony · 2025-07-04T14:45:28Z

Summary by CodeRabbit

New Features
- Introduced a user profile page with login, guest mode, and navigation to completed goals, notifications, and terms of service.
- Added components for editing user profiles, displaying points, and managing notification settings.
- Implemented lists and detailed views for completed goals, including support for attachments.
- Added guest login options and modals for account deletion confirmation.
- Provided reusable icons and a centralized export for MyPage components.
- Enabled SVG import as React components and URLs.
Bug Fixes
- Improved handling of SVG files in production builds for more flexible imports.
Documentation
- Added comprehensive Storybook stories for all new MyPage components and states, supporting visual testing and interaction scenarios.
Chores
- Added a custom hook for safe router usage across environments.
- Updated shared component exports to include new utilities.

- Add main onboarding page with state management for 4-step flow - Create LoginScreen component with Google/Kakao login options - Create GoalInputScreen with validation and tooltip functionality - Create PeriodSelectionScreen with month selector and calendar - Create CompletionScreen with animated check and goal summary - Update Tailwind config to integrate design tokens from tokens.css - Add onboarding entry point to main page - Implement responsive mobile-first design patterns - Add TypeScript interfaces and proper type safety

coderabbitai · 2025-07-04T14:45:34Z

Caution

Review failed

The pull request is closed.

Walkthrough

This update introduces a comprehensive set of new components and pages for the "MyPage" user profile and settings area, including profile editing, notification setup, completed goals, and terms of service. It adds supporting icons, shared components, Storybook stories for visual testing, a custom router hook, and updates the build configuration for SVG handling.

Changes

File(s) / Path(s)	Change Summary
`.cursor/rules/global-rule.mdc`	Added rule to ignore Home Indicator (GestureBar) in global styling.
`app/mypage/page.tsx`, `app/mypage/edit/page.tsx`, `app/mypage/terms/page.tsx`, `app/mypage/notifications/page.tsx`, `app/mypage/done/page.tsx`, `app/mypage/done/[id]/page.tsx`	Added new Next.js client pages for MyPage, profile editing, terms, notifications, and completed goals.
`components/mypage/DoneItemDetail.tsx`, `components/mypage/DoneItems.tsx`, `components/mypage/EditProfile.tsx`, `components/mypage/GuestLoginSection.tsx`, `components/mypage/MyPage.tsx`, `components/mypage/NavigationList.tsx`, `components/mypage/NotificationSetup.tsx`, `components/mypage/PointsDisplay.tsx`, `components/mypage/TermsOfService.tsx`, `components/mypage/UserProfile.tsx`	Added new React components for MyPage features (profile, points, navigation, guest login, notifications, etc.).
`components/mypage/index.ts`	Created central export file for all MyPage components.
`components/icons/ChevronRightIcon.tsx`, `components/icons/EditIcon.tsx`, `components/icons/PlusIcon.tsx`	Added new SVG icon components.
`components/shared/AppBar/AppBar.tsx`	Removed default values for `title` and `points` props; adjusted conditional rendering.
`components/shared/Modal/ModalDeletingAccount/ModalDeletingAccount.tsx`	Added modal component for account deletion confirmation.
`components/shared/Modal/ModalDeletingAccount/ModalDeletingAccount.stories.tsx`	Added Storybook stories for account deletion modal.
`components/shared/index.ts`	Added `CupertinoPicker` to shared exports.
`components/mypage/DoneItemDetail.stories.tsx`, `components/mypage/DoneItems.stories.tsx`, `components/mypage/EditProfile.stories.tsx`, `components/mypage/GuestLoginSection.stories.tsx`, `components/mypage/MyPage.stories.tsx`, `components/mypage/NavigationList.stories.tsx`, `components/mypage/NotificationSetup.stories.tsx`, `components/mypage/PointsDisplay.stories.tsx`, `components/mypage/TermsOfService.stories.tsx`, `components/mypage/UserProfile.stories.tsx`	Added Storybook stories for all new MyPage components for visual testing.
`hooks/useSafeRouter.ts`	Introduced a custom hook to safely access Next.js router or provide a mock for non-Next.js environments.
`app/onboarding/_components/LoginScreen.tsx`	Replaced text logo with imported SVG logo component.
`next.config.ts`	Customized Webpack config to support importing SVGs as React components or URLs.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MyPage
    participant Router
    participant Components

    User->>MyPage: Visits /mypage
    MyPage->>Components: Renders UserProfile, PointsDisplay, NavigationList, etc.
    User->>MyPage: Clicks navigation item (e.g., Edit Profile)
    MyPage->>Router: Navigates to /mypage/edit
    Router->>Components: Renders EditProfile
    User->>Components: Interacts (edit, save, delete, add interests)
    Components->>MyPage: Updates state/UI as needed

Possibly related PRs

prography/10th-Motimo-FE#25: Adds similar rules to ignore UI elements like the Home Indicator and Appbar in .cursor/rules/global-rule.mdc, directly related to the global styling change in this PR.

Suggested reviewers

Hys-Lee

Poem

In a warren of code, new features appear,
MyPage now sparkles—so much to revere!
Profiles to edit, and points to display,
Goals all completed, in a rabbit’s own way.
With icons and stories, the UI feels bright—
Hippity-hop, ship it tonight!
🐇✨

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

app/mypage/done/[id]/page.tsx

(node:31743) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files
(Use node --trace-warnings ... to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 9.30.1

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

app/mypage/done/page.tsx

(node:31744) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files
(Use node --trace-warnings ... to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 9.30.1

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

app/mypage/edit/page.tsx

(node:31751) ESLintIgnoreWarning: The ".eslintignore" file is no longer supported. Switch to using the "ignores" property in "eslint.config.js": https://eslint.org/docs/latest/use/configure/migration-guide#ignoring-files
(Use node --trace-warnings ... to show where the warning was created)

Oops! Something went wrong! :(

ESLint: 9.30.1

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

34 others

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a5ef53d and aa57c72.

⛔ Files ignored due to path filters (1)

public/profile-default.png is excluded by !**/*.png

📒 Files selected for processing (38)

.cursor/rules/global-rule.mdc (1 hunks)
app/mypage/done/[id]/page.tsx (1 hunks)
app/mypage/done/page.tsx (1 hunks)
app/mypage/edit/page.tsx (1 hunks)
app/mypage/notifications/page.tsx (1 hunks)
app/mypage/page.tsx (1 hunks)
app/mypage/terms/page.tsx (1 hunks)
app/onboarding/_components/LoginScreen.tsx (2 hunks)
components/icons/ChevronRightIcon.tsx (1 hunks)
components/icons/EditIcon.tsx (1 hunks)
components/icons/PlusIcon.tsx (1 hunks)
components/mypage/DoneItemDetail.stories.tsx (1 hunks)
components/mypage/DoneItemDetail.tsx (1 hunks)
components/mypage/DoneItems.stories.tsx (1 hunks)
components/mypage/DoneItems.tsx (1 hunks)
components/mypage/EditProfile.stories.tsx (1 hunks)
components/mypage/EditProfile.tsx (1 hunks)
components/mypage/GuestLoginSection.stories.tsx (1 hunks)
components/mypage/GuestLoginSection.tsx (1 hunks)
components/mypage/MyPage.stories.tsx (1 hunks)
components/mypage/MyPage.tsx (1 hunks)
components/mypage/NavigationList.stories.tsx (1 hunks)
components/mypage/NavigationList.tsx (1 hunks)
components/mypage/NotificationSetup.stories.tsx (1 hunks)
components/mypage/NotificationSetup.tsx (1 hunks)
components/mypage/PointsDisplay.stories.tsx (1 hunks)
components/mypage/PointsDisplay.tsx (1 hunks)
components/mypage/TermsOfService.stories.tsx (1 hunks)
components/mypage/TermsOfService.tsx (1 hunks)
components/mypage/UserProfile.stories.tsx (1 hunks)
components/mypage/UserProfile.tsx (1 hunks)
components/mypage/index.ts (1 hunks)
components/shared/AppBar/AppBar.tsx (4 hunks)
components/shared/Modal/ModalDeletingAccount/ModalDeletingAccount.stories.tsx (1 hunks)
components/shared/Modal/ModalDeletingAccount/ModalDeletingAccount.tsx (1 hunks)
components/shared/index.ts (1 hunks)
hooks/useSafeRouter.ts (1 hunks)
next.config.ts (1 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

devgony added 30 commits June 26, 2025 16:25

feat: set layout

38fecb9

feat: add dummy login and redirection

257c404

Merge remote-tracking branch 'upstream/main' into onboarding

ef63023

update rule

8ffae0b

fix AppBar

9225600

fix margin

b21f0f0

fix appBar with thick height

951a7e7

remove Home indicator

b8b889b

add BottunRound

d2992f2

update rule

7116a1e

replace with ButtonRound

9f7aeeb

replace with ButtonRound on CompletionScreen

4489a72

replace with ToolTip-1

c989ed0

revert tailwind

f8cd796

fix ToolTip

c9cc7d9

add mt-number-16

33870c0

add moti-check

060eeb7

impl login - 1

9e8fe56

impl mypage base

d9f1869

add profile-default

6f3c415

add text-black

7b7d84f

add NotificationSetup

1dde3c0

impl TermsOfServcie

55e2a86

add EditProfile

c74d2bb

impl delete account

cfd08e3

add DoneItemDetail

1fedb94

add CupertinoPicker

8a95e7f

extract CupertinoPicker

296b1c2

set url to picsum random picture

5baa2bb

hide title

588e476

Merge remote-tracking branch 'upstream/main' into mypage

315b332

devgony force-pushed the mypage branch from dba50c1 to 315b332 Compare July 4, 2025 16:04

convert filled to outlined

5e50090

devgony changed the title ~~Mypage~~ Mypage 구현 Jul 4, 2025

devgony added 3 commits July 5, 2025 15:21

handle svg

2e9067e

remove gestureBar

aa0b081

useSafeRouter to handle storybook err

aa57c72

devgony marked this pull request as ready for review July 5, 2025 06:44

devgony merged commit 3ec1119 into prography:main Jul 5, 2025
2 of 4 checks passed

This was referenced Jul 10, 2025

Login 및 API 호출 통합 #33

Merged

Groups 목록, 그룹 멤버 찌르기 구현 #34

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mypage 구현#27

Mypage 구현#27
devgony merged 36 commits intoprography:mainfrom
devgony:mypage

devgony commented Jul 4, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jul 4, 2025 •

edited

Loading

Review failed

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

devgony commented Jul 4, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

devgony commented Jul 4, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 4, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)