Skip to content

Feature/my page UI#22

Merged
hyunjung-choi merged 7 commits intodevelopfrom
feature/my-page-ui
Jul 5, 2025
Merged

Feature/my page UI#22
hyunjung-choi merged 7 commits intodevelopfrom
feature/my-page-ui

Conversation

@hyunjung-choi
Copy link
Copy Markdown
Member

@hyunjung-choi hyunjung-choi commented Jul 4, 2025

PULL REQUEST

Description

  • Implemented MyPageScreen UI with user profile section
  • Created menu items for account settings, notifications, and help
  • Applied consistent design system and styling
  • Implement CherrydanDefaultButton component

ScreenShots

Summary by CodeRabbit

  • New Features

    • Introduced a redesigned "My Page" screen with a structured layout, including a top app bar, greeting section, customer center options, service settings, and dedicated buttons for account withdrawal and logout.
    • Added new string resources to support the updated "My Page" screen content and labels.
    • Added customizable button components with various styles, shapes, sizes, and enabled states for consistent UI elements across the app.
  • Style

    • Enhanced visual styling and consistent theming across the "My Page" screen for improved user experience.

@hyunjung-choi hyunjung-choi self-assigned this Jul 4, 2025
@hyunjung-choi hyunjung-choi added the feat 새로운 기능 label Jul 4, 2025
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jul 4, 2025

Walkthrough

New string resources for the "My Page" screen were added to the app's resource files. The MyPageScreen composable was completely rewritten, transforming it from a simple text display into a scaffold-based, interactive UI with multiple sections, styled buttons, and preview support. Helper composables were introduced for consistent styling. Additionally, a new customizable button component CherrydanDefaultButton with various styles, shapes, and sizes was added to the design system.

Changes

File(s) Change Summary
core/presentation/ui/src/main/res/values/strings.xml Added new string resources for "My Page" screen UI elements.
home/presentation/.../my_page/MyPageScreen.kt Rewrote MyPageScreen as a scaffold-based UI; added helper and preview composables for the screen.
core/presentation/designsystem/src/main/java/.../CherrydanDefaultButton.kt Added CherrydanDefaultButton composable with enums for style, shape, and size; included previews.

Poem

A page for you, now bright and new,
With greetings, buttons—quite a view!
Strings for logout, settings, too,
Compose and color shining through.
The rabbit hops with joy and glee,
"My Page" is ready—come and see!
🐇✨


📜 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 eb9e536 and c8cbf47.

📒 Files selected for processing (1)
  • core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build
✨ 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.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (6)
home/presentation/src/main/java/com/hyunjung/home/presentation/my_page/MyPageScreen.kt (6)

47-56: Add proper click handlers for top bar icons.

The notification and search icon buttons have empty click handlers, which means they're non-functional. Consider implementing proper navigation or state management for these actions.

Would you like me to suggest a proper implementation pattern for these click handlers?


94-94: Use string resource instead of hardcoded text.

The "고객 센터" text is hardcoded. Consider adding this to the string resources for consistency and localization support.

-                    text = "고객 센터",
+                    text = stringResource(id = R.string.my_page_customer_center),

You'll need to add this string resource:

<string name="my_page_customer_center">고객 센터</string>

103-121: Use string resources for menu items.

The menu items ("공지 사항", "1:1 문의", "자주 묻는 질문", "이용 가이드") are hardcoded. Consider adding these to string resources for consistency and maintainability.

Add these to your string resources and replace the hardcoded strings:

<string name="my_page_notice">공지 사항</string>
<string name="my_page_inquiry">1:1 문의</string>
<string name="my_page_faq">자주 묻는 질문</string>
<string name="my_page_guide">이용 가이드</string>

171-207: Extract button styling to reduce code duplication.

The withdrawal and logout buttons share identical styling. Consider extracting this into a reusable component or style.

+@Composable
+private fun MyPageActionButton(
+    text: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier,
+        contentPadding = PaddingValues(horizontal = 18.dp, vertical = 9.dp),
+        colors = ButtonColors(
+            containerColor = CherrydanColors.Gray2,
+            contentColor = CherrydanColors.Gray5,
+            disabledContainerColor = CherrydanColors.Gray2,
+            disabledContentColor = CherrydanColors.Gray5
+        ),
+        shape = RoundedCornerShape(2.dp)
+    ) {
+        Text(
+            text = text,
+            style = CherrydanTypography.Main5_R,
+            color = CherrydanColors.Gray5
+        )
+    }
+}

Then replace the buttons:

-                    Button(
-                        onClick = { /* TODO: Handle logout */ },
-                        modifier = Modifier
-                            .padding(end = 8.dp),
-                        contentPadding = PaddingValues(horizontal = 18.dp, vertical = 9.dp),
-                        colors = ButtonColors(
-                            containerColor = CherrydanColors.Gray2,
-                            contentColor = CherrydanColors.Gray5,
-                            disabledContainerColor = CherrydanColors.Gray2,
-                            disabledContentColor = CherrydanColors.Gray5
-                        ),
-                        shape = RoundedCornerShape(2.dp)
-                    ) {
-                        Text(
-                            text = stringResource(id = R.string.my_page_withdrawal),
-                            style = CherrydanTypography.Main5_R,
-                            color = CherrydanColors.Gray5
-                        )
-                    }
+                    MyPageActionButton(
+                        text = stringResource(id = R.string.my_page_withdrawal),
+                        onClick = { /* TODO: Handle withdrawal */ },
+                        modifier = Modifier.padding(end = 8.dp)
+                    )

172-191: Implement proper logout and withdrawal functionality.

Both buttons have TODO comments with empty implementations. These critical user actions should have proper implementations.

Would you like me to help implement proper logout and withdrawal functionality with confirmation dialogs?


213-227: Consider adding click functionality to MyPageItemText.

The helper composable renders text items but doesn't support click actions. Since these appear to be menu items, consider adding click support.

 @Composable
-private fun MyPageItemText(text: String) {
+private fun MyPageItemText(
+    text: String,
+    onClick: (() -> Unit)? = null
+) {
     Row(
         modifier = Modifier
             .fillMaxWidth()
             .padding(horizontal = 16.dp, vertical = 8.dp),
+            .run { if (onClick != null) clickable { onClick() } else this },
         verticalAlignment = Alignment.CenterVertically
     ) {
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 78e0aef and 664c3f9.

📒 Files selected for processing (2)
  • core/presentation/ui/src/main/res/values/strings.xml (1 hunks)
  • home/presentation/src/main/java/com/hyunjung/home/presentation/my_page/MyPageScreen.kt (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build
🔇 Additional comments (3)
core/presentation/ui/src/main/res/values/strings.xml (1)

49-60: LGTM! Well-structured string resources.

The new string resources for the My Page screen follow consistent naming conventions and are properly formatted. The Korean localization aligns with the existing app structure.

home/presentation/src/main/java/com/hyunjung/home/presentation/my_page/MyPageScreen.kt (2)

103-121: Add click handlers for menu items.

The menu items are missing click handlers, making them non-interactive. Each item should have an appropriate onClick behavior.

These menu items appear to be clickable UI elements but lack functionality. Please verify if these should navigate to other screens or trigger specific actions.


229-235: LGTM! Proper preview implementation.

The preview composable follows best practices with proper theme wrapping.

@hyunjung-choi hyunjung-choi linked an issue Jul 4, 2025 that may be closed by this pull request
2 tasks
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt (1)

62-100: Consider extracting common modifier logic.

The button implementation has duplicated modifier chains between SMALL and BIG sizes. Consider extracting the common logic to improve maintainability.

 @Composable
 fun CherrydanDefaultButton(
     text: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     style: CherrydanButtonStyle = CherrydanButtonStyle.GRAY,
     shape: CherrydanButtonShape = CherrydanButtonShape.ROUNDED_SMALL,
     size: CherrydanButtonSize = CherrydanButtonSize.BIG,
     enabled: Boolean = true,
     textStyle: TextStyle = CherrydanTypography.Main5_R
 ) {
+    val baseModifier = modifier
+        .clip(RoundedCornerShape(shape.cornerRadius))
+        .background(if (enabled) style.containerColor else style.disabledContainerColor)
+        .clickable(enabled = enabled) { onClick() }
+
     Box(
         modifier = when (size) {
             CherrydanButtonSize.SMALL -> {
-                modifier
+                baseModifier
                     .height(36.dp)
-                    .clip(RoundedCornerShape(shape.cornerRadius))
-                    .background(if (enabled) style.containerColor else style.disabledContainerColor)
-                    .clickable(enabled = enabled) { onClick() }
             }

             CherrydanButtonSize.BIG -> {
-                modifier
+                baseModifier
                     .fillMaxWidth()
-                    .clip(RoundedCornerShape(shape.cornerRadius))
-                    .background(if (enabled) style.containerColor else style.disabledContainerColor)
-                    .clickable(enabled = enabled) { onClick() }
                     .padding(vertical = 15.dp)
             }
         },
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 664c3f9 and eb9e536.

📒 Files selected for processing (3)
  • core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt (1 hunks)
  • core/presentation/ui/src/main/res/values/strings.xml (1 hunks)
  • home/presentation/src/main/java/com/hyunjung/home/presentation/my_page/MyPageScreen.kt (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • core/presentation/ui/src/main/res/values/strings.xml
🚧 Files skipped from review as they are similar to previous changes (1)
  • home/presentation/src/main/java/com/hyunjung/home/presentation/my_page/MyPageScreen.kt
🧰 Additional context used
🧬 Code Graph Analysis (1)
core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt (1)
core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/Theme.kt (1)
  • CherrydanTheme (24-42)
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build
🔇 Additional comments (4)
core/presentation/designsystem/src/main/java/com/hyunjung/core/presentation/designsystem/component/CherrydanDefaultButton.kt (4)

1-25: LGTM! Clean imports and package structure.

The imports are well-organized and include all necessary dependencies for the button component. The package structure follows Android conventions.


26-50: Well-structured enum for button styles.

The CherrydanButtonStyle enum provides a clean way to define different button variants with their respective colors. The inclusion of both normal and disabled states is a good practice for accessibility.


52-60: Simple and effective enum definitions.

The CherrydanButtonShape and CherrydanButtonSize enums are well-designed with appropriate naming and values.


102-196: Comprehensive preview functions.

The preview functions provide excellent coverage of different button states and configurations. They demonstrate enabled/disabled states, different styles, and both size variants effectively.

@hyunjung-choi hyunjung-choi merged commit 0125cd2 into develop Jul 5, 2025
2 checks passed
@hyunjung-choi hyunjung-choi deleted the feature/my-page-ui branch July 5, 2025 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat 새로운 기능

Projects

None yet

Development

Successfully merging this pull request may close these issues.

My Page UI

2 participants