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

🔀 :: (#132) - 바텀네비게이션바를 구현하였습니다. #133

Merged
merged 8 commits into from
Oct 23, 2024

Conversation

audgns10
Copy link
Member

@audgns10 audgns10 commented Oct 23, 2024

💡 개요

  • 바텀네비게이션바가 디자인상에 있어 이를 구현해야할 것 같았습니다.

📃 작업내용

스크린샷 2024-10-23 오후 6 15 47
  • 바텀네비게이션바를 구현하였습니다.
  • 바텀네비게이션바에 필요한 아이콘을 추가하였습니다.
  • ExpoAndroidTheme에 잘못 타입을 지정한 코드를 수정하여 에러를 잡았습니다.

🔀 변경사항

  • chore strings.xml
  • chore ExpoIcon
  • chore ExpoAndroidTheme
  • add ExpoNavigationBar

🙋‍♂️ 질문사항

  • 개선할 점, 오타, 코드에 이산한 부분이 있다면 Comment 달아주세요.

🍴 사용방법

  • appState, app에서 각각의 아이콘에 Destination(목적지)를 설정하여 화면간 이동이 될 수 있도록 하고 Scaffold에 넣어 사용하면 됩니다.

🎸 기타

  • x

Summary by CodeRabbit

  • 새로운 기능

    • 내비게이션 바와 아이템을 위한 새로운 구성 요소 추가.
    • 홈 아이콘 및 추가 아이콘을 위한 새로운 아이콘 구성 요소 추가.
  • 버그 수정

    • ExpoAndroidTheme 함수에서 typography 매개변수에 기본값 추가로 사용 간소화.
  • 문서화

    • 새로운 문자열 리소스 추가: "홈 아이콘" 및 "출력 아이콘".
  • 스타일

    • 새로운 벡터 드로어블 아이콘 추가: ic_houseic_append.

@audgns10 audgns10 added 1️⃣ Priority: High 우선순위 - 상 ✨ Feature 신규 기능 labels Oct 23, 2024
@audgns10 audgns10 self-assigned this Oct 23, 2024
@audgns10 audgns10 linked an issue Oct 23, 2024 that may be closed by this pull request
Copy link

coderabbitai bot commented Oct 23, 2024

Caution

Review failed

The head commit changed during the review from 47ab9c6 to b5aac92.

Walkthrough

이 변경 사항은 com.school_of_company.design_system.component.navigation 패키지 내에 새로운 Kotlin 파일 ExpoNavigationBar.kt를 추가합니다. 이 파일은 ExpoNavigationBarItemExpoNavigationBar라는 두 가지 주요 컴포저블 함수를 정의합니다. 또한, 아이콘과 설명을 포함하는 새로운 아이콘 함수인 HomeIconAppendIconExpoIcon.kt에 추가하고, ExpoAndroidTheme 함수의 매개변수에 기본값을 설정하여 사용을 간소화합니다. 추가적으로, 두 개의 벡터 드로어블 파일과 두 개의 문자열 리소스를 추가하여 디자인 시스템을 강화합니다.

Changes

파일 경로 변경 요약
core/design-system/src/main/java/com/school_of_company/design_system/component/navigation/ExpoNavigationBar.kt 새로운 컴포저블 함수 ExpoNavigationBarItem, ExpoNavigationBar, ExpoNavigationPreview 추가.
core/design-system/src/main/java/com/school_of_company/design_system/icon/ExpoIcon.kt 새로운 아이콘 함수 HomeIcon, AppendIcon 추가.
core/design-system/src/main/java/com/school_of_company/design_system/theme/ExpoTheme.kt ExpoAndroidTheme 함수의 typography 매개변수에 기본값 추가.
core/design-system/src/main/res/drawable/ic_append.xml 새로운 벡터 드로어블 ic_append.xml 추가.
core/design-system/src/main/res/drawable/ic_house.xml 새로운 벡터 드로어블 ic_house.xml 추가.
core/design-system/src/main/res/values/strings.xml 새로운 문자열 리소스 home_description, append_description 추가.

Possibly related PRs

Suggested reviewers

  • kimjeakwan
  • diejdkll

🐰 새로운 아이콘과 바,
디자인이 더욱 빛나,
홈과 출력 아이콘,
함께하는 즐거운 순간,
우리 앱의 멋진 모습,
모두가 좋아할 거야! 🌟


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 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

@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: 5

🧹 Outside diff range and nitpick comments (3)
core/design-system/src/main/java/com/school_of_company/design_system/theme/ExpoTheme.kt (1)

8-12: typography 매개변수에 기본값 추가는 좋은 개선사항입니다.

ExpoTypography를 기본값으로 설정함으로써:

  • 코드 사용성이 향상되었습니다
  • 기존 호출 코드와의 호환성이 유지됩니다
  • 디자인 시스템의 일관성이 강화되었습니다

ExpoColor와 동일한 패턴을 따르고 있어 일관된 API를 제공합니다.

향후 새로운 테마 속성을 추가할 때도 이와 같은 패턴을 따르는 것을 권장합니다.

core/design-system/src/main/res/values/strings.xml (1)

28-29: "append_description" 문자열의 설명을 더 직관적으로 수정하는 것을 고려해 주세요.

"출력 아이콘"이라는 설명이 사용자에게 다소 모호할 수 있습니다. "추가" 또는 "첨부"와 같은 더 직관적인 용어를 사용하는 것이 좋을 것 같습니다.

다음과 같이 수정하는 것을 제안드립니다:

-    <string name="append_description">출력 아이콘</string>
+    <string name="append_description">추가 아이콘</string>
core/design-system/src/main/java/com/school_of_company/design_system/component/navigation/ExpoNavigationBar.kt (1)

49-69: 디자인 시스템 상수 사용을 권장합니다.

구분선의 두께가 하드코딩되어 있습니다. 디자인 시스템의 일관성을 위해 상수로 분리하는 것이 좋습니다.

다음과 같이 수정하는 것을 제안합니다:

+private val NavigationDividerThickness = 1.dp
+
 @Composable
 fun ExpoNavigationBar(
     modifier: Modifier = Modifier,
     content: @Composable RowScope.() -> Unit
 ) {
     ExpoAndroidTheme { colors, _ ->
         Column {
             HorizontalDivider(
-                thickness = 1.dp,
+                thickness = NavigationDividerThickness,
                 color = colors.gray200
             )
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 9317b77 and fb9b061.

📒 Files selected for processing (6)
  • core/design-system/src/main/java/com/school_of_company/design_system/component/navigation/ExpoNavigationBar.kt (1 hunks)
  • core/design-system/src/main/java/com/school_of_company/design_system/icon/ExpoIcon.kt (1 hunks)
  • core/design-system/src/main/java/com/school_of_company/design_system/theme/ExpoTheme.kt (1 hunks)
  • core/design-system/src/main/res/drawable/ic_append.xml (1 hunks)
  • core/design-system/src/main/res/drawable/ic_house.xml (1 hunks)
  • core/design-system/src/main/res/values/strings.xml (1 hunks)
🧰 Additional context used
🔇 Additional comments (8)
core/design-system/src/main/java/com/school_of_company/design_system/theme/ExpoTheme.kt (1)

3-6: 필요한 임포트문이 모두 포함되어 있습니다.

모든 필수 컴포넌트들이 올바르게 임포트되어 있으며, 불필요한 임포트는 없습니다.

core/design-system/src/main/res/drawable/ic_house.xml (2)

1-5: 벡터 드로어블 구조가 잘 정의되어 있습니다!

벡터 드로어블의 크기와 뷰포트가 일관성있게 설정되어 있습니다.


1-9: 아이콘 최적화를 검토해주세요.

path 데이터가 최적화되어 있는지 확인해보시면 좋을 것 같습니다. Android Studio의 Vector Asset Studio를 사용하면 자동으로 최적화된 path 데이터를 생성할 수 있습니다.

core/design-system/src/main/res/drawable/ic_append.xml (1)

1-5: 벡터 드로어블 구조가 잘 구성되어 있습니다!

벡터 크기와 뷰포트가 Material Design 아이콘 표준인 24dp로 올바르게 설정되어 있습니다.

core/design-system/src/main/res/values/strings.xml (1)

28-29: 아이콘 설명의 일관성 검증이 필요합니다.

새로 추가된 아이콘 설명이 기존 아이콘들의 명명 규칙과 일치하는지 확인이 필요합니다.

✅ Verification successful

검색 결과를 분석해보니, 모든 아이콘 설명이 일관된 패턴을 따르고 있습니다. 새로 추가된 두 문자열도 기존의 패턴을 잘 따르고 있어 추가 검증이 필요하지 않습니다.

아이콘 설명이 기존 패턴과 일치합니다

기존 아이콘 설명들과 새로 추가된 아이콘 설명들이 모두 다음과 같은 일관된 패턴을 따르고 있습니다:

  • [기능/의미] + 아이콘 형식 사용
  • 모든 설명이 한글로 작성됨
  • 설명이 간결하고 명확함
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 설명: 아이콘 관련 문자열 리소스의 일관성 확인

# 모든 strings.xml 파일에서 아이콘 관련 문자열 검색
rg -l "description.*아이콘" -g "strings.xml"

# 검색된 파일들에서 아이콘 설명 패턴 분석
rg "description.*아이콘" -g "strings.xml"

Length of output: 2899

core/design-system/src/main/java/com/school_of_company/design_system/component/navigation/ExpoNavigationBar.kt (1)

81-84: 리소스 파일 존재 여부를 확인해주세요.

참조된 아이콘 리소스들이 실제로 존재하는지 확인이 필요합니다.

다음 스크립트로 리소스 파일들의 존재 여부를 확인할 수 있습니다:

✅ Verification successful

모든 아이콘 리소스가 정상적으로 존재합니다

실행된 스크립트를 통해 다음 리소스 파일들이 모두 존재함을 확인했습니다:

  • ic_house.xml
  • ic_append.xml
  • ic_expo.xml
  • ic_user.xml
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if all required drawable resources exist
fd -e xml "ic_(house|append|expo|user).xml" core/design-system/src/main/res/drawable

Length of output: 301

core/design-system/src/main/java/com/school_of_company/design_system/icon/ExpoIcon.kt (2)

235-242: 구현이 잘 되어있습니다!

HomeIcon 구현이 파일의 기존 아이콘 패턴을 잘 따르고 있으며, 리소스 참조도 적절합니다.


244-250: 리소스 확인 및 이름 검토가 필요합니다.

구현은 올바르게 되어 있으나, 다음 사항들을 확인해 주시기 바랍니다:

  1. 'append'라는 이름이 내비게이션 아이템의 목적을 명확하게 전달하는지 검토해 주세요.
  2. 필요한 리소스가 모두 존재하는지 확인이 필요합니다.

리소스 존재 여부를 확인하기 위해 다음 스크립트를 실행합니다:

✅ Verification successful

Let me generate one more verification to check the actual usage context of this icon:

This will help us understand if the name 'append' is appropriate in the context where it's being used, and what the icon actually looks like.


리소스가 모두 정상적으로 존재하며, 아이콘 이름이 적절합니다.

검증 결과:

  • ic_append.xml 벡터 드로어블이 존재하며, 체크마크가 있는 캘린더/문서 형태의 아이콘으로 '출력' 기능을 잘 나타내고 있습니다.
  • append_description 문자열 리소스가 "출력 아이콘"으로 올바르게 정의되어 있습니다.
  • 아이콘 이름과 설명이 기능을 명확하게 전달하고 있어 수정이 필요하지 않습니다.
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 필요한 리소스 파일들이 존재하는지 확인

echo "벡터 드로어블 리소스 확인:"
fd "ic_append.xml|ic_house.xml" core/design-system/src/main/res/drawable

echo "\n문자열 리소스 확인:"
rg "append_description|home_description" core/design-system/src/main/res/values/strings.xml

Length of output: 460


Script:

#!/bin/bash
# AppendIcon 사용처 확인
echo "AppendIcon 사용 컨텍스트 확인:"
rg "AppendIcon\(" -A 3 -B 3

# ic_append 아이콘 내용 확인
echo "\n아이콘 벡터 내용 확인:"
cat core/design-system/src/main/res/drawable/ic_append.xml

Length of output: 1679

Copy link
Collaborator

@kimjeakwan kimjeakwan left a comment

Choose a reason for hiding this comment

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

stable 한 compose인 것 같습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1️⃣ Priority: High 우선순위 - 상 ✨ Feature 신규 기능
Projects
None yet
Development

Successfully merging this pull request may close these issues.

네비게이션바 컴포넌트를 구현해야합니다.
3 participants