Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat #98] :: 바텀네비게이션 수정 #99

Merged

Conversation

parkuiery
Copy link
Member

@parkuiery parkuiery commented Jan 4, 2025

개요

바텀네비게이션을 수정하였습니다.

Android iOS Desktop

작업사항

추가 로 할 말

Summary by CodeRabbit

  • UI 개선
    • 하단 탐색 표시줄의 레이아웃과 스타일을 업데이트했습니다.
    • 선택된 아이콘과 텍스트의 색상을 변경했습니다.
    • 텍스트 스타일을 조정하여 가독성을 개선했습니다.

@parkuiery parkuiery added the refactor 코드 리팩토링 할 경우 label Jan 4, 2025
@parkuiery parkuiery self-assigned this Jan 4, 2025
@parkuiery parkuiery linked an issue Jan 4, 2025 that may be closed by this pull request
Copy link
Contributor

coderabbitai bot commented Jan 4, 2025

워크스루

이 변경사항은 BottomNavigationBar.kt 파일의 바텀 네비게이션 바 컴포저블 함수를 개선합니다. Column 레이아웃을 추가하여 HorizontalDividerBottomAppBar의 구조를 향상시켰습니다. 네비게이션 바의 비주얼 스타일을 단순화하고, 색상 및 텍스트 스타일을 조정하여 전체적인 UI 디자인을 개선했습니다.

변경 사항

파일 변경 요약
composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt - Column 레이아웃 추가
- HorizontalDivider 전체 너비로 설정
- BottomAppBar 그래픽 레이어 및 모서리 설정 제거
- 색상 및 텍스트 스타일 업데이트

시퀀스 다이어그램

sequenceDiagram
    participant UI as Bottom Navigation Bar
    participant Divider as Horizontal Divider
    participant AppBar as Bottom App Bar
    participant NavItems as Navigation Items

    UI->Divider: Add full-width divider
    UI->AppBar: Simplify appearance
    AppBar->NavItems: Update color scheme
    NavItems->NavItems: Change text style
Loading

시 🐰

네비게이션 바, 새 옷을 입고
색깔과 선이 춤을 추네
간결하고 깔끔하게
사용자의 눈길을 사로잡아
토끼처럼 깡총깡총 🐇✨


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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. (Beta)
  • @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
Contributor

@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 (2)
composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt (2)

44-49: BottomAppBar 높이 비율은 적절하지만, 다양한 화면 크기에 대한 확인이 필요합니다.
fillMaxHeight(0.08f)는 기기 화면 높이에 따라 다소 차이가 클 수 있으니, 사용자 경험을 고려해 보조 수단(예: minimumHeight) 등을 추가하는 방안을 고려해 보세요.


70-85: Icon 및 Text 구성이 명확하나, 확장성 측면에서 따로 컴포저블 분리를 고려해볼 수 있습니다.
Column 내부에 IconDmsText를 나란히 배치하는 형태는 일관성이 좋습니다. 다만, 재사용이 필요한 경우 별도 작은 컴포저블로 분리하면 더욱 유지보수가 용이할 것입니다.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between eeaeb69 and 090e994.

📒 Files selected for processing (1)
  • composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt (2 hunks)
🔇 Additional comments (4)
composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt (4)

38-43: Column과 HorizontalDivider 구조가 명확합니다.
전체 레이아웃 내에서 구분선(HorizontalDivider)을 활용하여 상단 영역과 BottomAppBar를 자연스럽게 구분하고 있습니다.


50-57: 애니메이션 처리 및 색상 전환 로직이 깔끔하게 잘 구성되었습니다.
animateColorAsState를 통해 선택 상태에 따라 색상을 부드럽게 전환하는 방식이 직관적이며, 코드 가독성도 좋습니다.


60-69: 중복 내비게이션 방지 로직이 적절합니다.
이미 같은 라우트인 경우에는 navigate 하지 않도록 분기 처리를 해주시는 것은 불필요한 내비게이션 스택 중첩을 방지해 앱 안정성에 도움을 줍니다.


86-96: NavigationBarItemColors 설정이 일관적이며 의미가 분명합니다.
선택/비선택 아이콘/텍스트 컬러를 명시적으로 관리해, 확장성이나 테마 변경 시 유연하게 대응하기 쉽습니다.

@parkuiery parkuiery merged commit 1453b37 into develop Jan 4, 2025
2 of 5 checks passed
@parkuiery parkuiery deleted the feature/98-refactor-바텀네비게이션-수정 branch January 4, 2025 02:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
refactor 코드 리팩토링 할 경우
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Refactor]: 바텀네비게이션 수정
1 participant