🔀 :: (#128) - change icon file elements

[audgns10]

💡 개요

• 새롭게 추가된 아이콘을 등록해야할 것 같았습니다.

📃 작업내용

• 새롭게 추가된 아이콘을 등록하였습니다.

🔀 변경사항

• chore ExpoIcon
• add Icon Files
• chore strings.xml File

🙋‍♂️ 질문사항

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

🍴 사용방법

• 해당 함수의 이름에 맞게 찾아서 해당 함수를 사용하면 됩니다.

🎸 기타

• x

Summary by CodeRabbit

• 신규 기능
  • 새로운 아이콘 추가: 체크박스, 드롭다운, 두 개의 원, 긴 내용, 짧은 내용 아이콘.
  • 메인 로고 업데이트.
• 버그 수정
  • 아이콘의 시각적 표현 개선.
• 문서화
  • 새로운 문자열 리소스 추가: 각 아이콘에 대한 설명.

[coderabbitai]

Walkthrough

이 변경 사항은 ExpoIcon.kt 파일 내의 ExpoMainLogo 컴포저블 함수의 로고 리소스 ID를 업데이트하고, 새로운 아이콘을 나타내는 다섯 개의 컴포저블 함수(CheckBoxIcon, DropDownIcon, TwoCircleIcon, LongContentIcon, ShortContentIcon)를 추가합니다. 또한, 각 아이콘에 대한 벡터 드로어블 파일과 설명 문자열을 추가하여 디자인 시스템의 아이콘 세트를 확장합니다.

Changes

파일 경로	변경 요약
core/design-system/src/main/java/com/.../ExpoIcon.kt	ExpoMainLogo의 로고 리소스 ID 업데이트 및 5개의 새로운 컴포저블 함수 추가
core/design-system/src/main/res/drawable/...	ic_check_box.xml, ic_drop_down.xml, ic_long_content.xml, ic_short_content.xml, ic_two_circle.xml 파일 추가
core/design-system/src/main/res/values/strings.xml	새로운 문자열 리소스(checkbox_description, drop_down_description, two_circle_description, long_content_description, short_content_description) 추가

Possibly related PRs

• 🔀 :: (#126) - Icon을 추가합니다. #127: 이 PR의 변경 사항은 ExpoIcon.kt에서 아이콘을 위한 새로운 컴포저블 함수 추가와 관련이 있으며, 메인 PR에 추가된 새로운 아이콘 함수와 직접적으로 연결됩니다.

Suggested labels

♻️ Refactor

Suggested reviewers

• diejdkll
• kimjeakwan

Poem

🐰 새로운 아이콘이 왔어요,
귀여운 체크박스, 드롭다운도 있어요.
두 개의 원, 긴 내용도 추가,
디자인 시스템이 더욱 빛나요!
모두 함께 즐겨요,
아이콘의 세계로 뛰어들어요! 🌟

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (3)

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

1-9: 접근성을 위한 contentDescription 추가 필요

시각 장애인을 위한 TalkBack 지원을 위해 contentDescription을 추가하는 것이 좋습니다.

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
     android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:viewportHeight="24"
+    android:contentDescription="@string/dropdown_icon_description">

strings.xml에 다음 문자열도 추가해 주세요:

<string name="dropdown_icon_description">드롭다운 메뉴 아이콘</string>

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

6-8: 접근성과 테마 지원을 위한 개선사항을 제안드립니다.

현재 구현은 기능적으로는 문제가 없으나, 다음과 같은 개선사항을 고려해보시기 바랍니다:

1. 다크 모드 지원을 위해 하드코딩된 색상 대신 테마 속성을 사용
2. 아이콘의 의미를 더 명확하게 전달하기 위한 contentDescription 속성 추가

다음과 같이 수정해보시는 것은 어떨까요:

  <path
      android:pathData="M3,6.8a0.8,0.8 0,0 1,0.8 -0.8h16.4a0.7,0.7 0,1 1,0 1.5L3.9,7.5a0.8,0.8 0,0 1,-0.8 -0.8ZM20.3,9.8L3.6,9.8a0.8,0.8 0,0 0,0 1.4h16.6a0.7,0.7 0,1 0,0 -1.4ZM20.3,13.5L3.6,13.5a0.7,0.7 0,1 0,0 1.5h16.6a0.7,0.7 0,1 0,0 -1.5ZM15.7,17.3h-12a0.7,0.7 0,1 0,0 1.4h12a0.7,0.7 0,1 0,0 -1.4Z"
-     android:fillColor="#121212"/>
+     android:fillColor="?attr/colorOnSurface"/>

추가로 벡터 요소에 다음 속성을 추가하는 것을 추천드립니다:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
+   android:contentDescription="@string/long_content_description"
    android:width="24dp"

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

23-27: 문자열 정렬 순서 개선 제안

가독성과 유지보수를 위해 한글 자음 순서대로 정렬하는 것을 제안드립니다.

다음과 같이 정렬하면 좋을 것 같습니다:

     <string name="setting_description">세팅 아이콘</string>
-    <string name="checkbox_description">체크박스 아이콘</string>
-    <string name="drop_down_description">드롭다운 아이콘</string>
-    <string name="two_circle_description">질문 아이콘</string>
-    <string name="long_content_description">장문 아이콘</string>
-    <string name="short_content_description">단문 아이콘</string>
+    <string name="drop_down_description">드롭다운 아이콘</string>
+    <string name="long_content_description">장문 아이콘</string>
+    <string name="short_content_description">단문 아이콘</string>
+    <string name="checkbox_description">체크박스 아이콘</string>
+    <string name="two_circle_description">질문 아이콘</string>
</resources>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 4a5fba4 and c94e1d5.

⛔ Files ignored due to path filters (1)

• core/design-system/src/main/res/drawable/logo_expo.png is excluded by !**/*.png

📒 Files selected for processing (7)

• core/design-system/src/main/java/com/school_of_company/design_system/icon/ExpoIcon.kt (2 hunks)
• core/design-system/src/main/res/drawable/ic_check_box.xml (1 hunks)
• core/design-system/src/main/res/drawable/ic_drop_down.xml (1 hunks)
• core/design-system/src/main/res/drawable/ic_long_content.xml (1 hunks)
• core/design-system/src/main/res/drawable/ic_short_content.xml (1 hunks)
• core/design-system/src/main/res/drawable/ic_two_circle.xml (1 hunks)
• core/design-system/src/main/res/values/strings.xml (1 hunks)

✅ Files skipped from review due to trivial changes (2)

• core/design-system/src/main/res/drawable/ic_short_content.xml
• core/design-system/src/main/res/drawable/ic_two_circle.xml

🧰 Additional context used

🔇 Additional comments (7)

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

1-5: 벡터 드로어블의 크기와 구조가 적절합니다.

24dp 크기와 뷰포트 설정이 머티리얼 디자인 가이드라인을 잘 따르고 있습니다.

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

1-5: 벡터 드로어블 구조가 적절합니다.

Material Design 가이드라인에 맞는 24dp 크기와 올바른 뷰포트 설정이 되어있습니다.

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

1-5: 벡터 선언이 Material Design 가이드라인을 잘 따르고 있습니다.

24dp x 24dp 크기와 동일한 뷰포트 비율을 사용하여 적절하게 구성되었습니다.

---

1-9: 디자인 시스템 내의 다른 아이콘들과의 일관성을 확인해주세요.

새로 추가된 아이콘의 스타일이 기존 디자인 시스템의 아이콘들과 일관성이 있는지 확인이 필요합니다.

✅ Verification successful

새로 추가된 ic_long_content.xml 아이콘을 분석한 결과, 디자인 시스템의 다른 아이콘들과 일관성이 있음을 확인했습니다.

검증 결과:

• 아이콘 크기: 대부분의 아이콘들이 24dp x 24dp 크기를 사용하고 있으며, ic_long_content.xml도 동일한 크기(24dp x 24dp)를 사용합니다. (예외: ic_main_expo_logo.xml은 로고용 특수 크기)
• 색상: 대부분의 아이콘들이 #121212 색상을 사용하고 있으며, ic_long_content.xml도 동일한 색상을 사용합니다. (예외: ic_main_expo_logo.xml은 브랜드 색상, ic_copy.xml은 #000)

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 디자인 시스템의 다른 아이콘들과 스타일 일관성 확인

# 다른 아이콘 파일들의 색상 값 확인
echo "다른 아이콘 파일들의 색상 값 확인:"
rg "android:fillColor" "core/design-system/src/main/res/drawable/"

# 아이콘 크기 일관성 확인
echo -e "\n아이콘 크기 일관성 확인:"
rg "android:width|android:height" "core/design-system/src/main/res/drawable/"

Length of output: 6753

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

23-27: 새로운 아이콘 문자열이 잘 추가되었습니다!

새로 추가된 아이콘 설명들이 기존 패턴을 잘 따르고 있으며, 명확한 의미를 전달하고 있습니다.

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

13-13: 리소스 ID 변경 검증 필요

리소스 ID가 ic_main_expo_logo에서 logo_expo로 변경되었습니다. 새로운 리소스가 올바르게 추가되었는지 확인이 필요합니다.

#!/bin/bash
# 새로운 로고 리소스 파일 존재 여부 확인
fd "logo_expo.xml" -t f

---

190-232: 새로운 아이콘 컴포저블 구현이 일관성 있게 작성되었습니다.

각 아이콘 컴포저블이 기존 패턴을 잘 따르고 있으며, 코드 구조가 일관성 있게 작성되었습니다.

리소스 파일 검증이 필요합니다.

새로 추가된 아이콘들의 리소스 파일과 문자열이 올바르게 추가되었는지 확인이 필요합니다:

• 드로어블: ic_check_box, ic_drop_down, ic_two_circle, ic_long_content, ic_short_content
• 문자열: checkbox_description, drop_down_description, two_circle_description, long_content_description, short_content_description

✅ Verification successful

Let me try a different approach to verify the resources:

---

리소스 파일이 모두 올바르게 구현되어 있음을 확인했습니다.

검증 결과:

• 모든 드로어블 리소스가 core/design-system/src/main/res/drawable/ 경로에 정상적으로 존재합니다:
  • ic_check_box.xml
  • ic_drop_down.xml
  • ic_two_circle.xml
  • ic_long_content.xml
  • ic_short_content.xml
• 모든 문자열 리소스가 core/design-system/src/main/res/values/strings.xml에 적절히 정의되어 있습니다:
  • checkbox_description: "체크박스 아이콘"
  • drop_down_description: "드롭다운 아이콘"
  • two_circle_description: "질문 아이콘"
  • long_content_description: "장문 아이콘"
  • short_content_description: "단문 아이콘"

코드와 리소스 모두 일관된 네이밍 패턴을 따르고 있으며, 누락된 리소스 없이 완벽하게 구현되어 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
echo "드로어블 리소스 확인:"
fd "ic_(check_box|drop_down|two_circle|long_content|short_content).xml" -t f

echo "\n문자열 리소스 확인:"
rg "(checkbox|drop_down|two_circle|long_content|short_content)_description" -t xml

Length of output: 194

---

Script:

#!/bin/bash
# Check drawable resources
echo "=== Drawable Resources ==="
fd "ic_check_box" --type f
fd "ic_drop_down" --type f
fd "ic_two_circle" --type f
fd "ic_long_content" --type f
fd "ic_short_content" --type f

# Check string resources
echo -e "\n=== String Resources ==="
rg -t xml "checkbox_description"
rg -t xml "drop_down_description"
rg -t xml "two_circle_description"
rg -t xml "long_content_description"
rg -t xml "short_content_description"

# Check if there are any similar resources with different naming patterns
echo -e "\n=== Similar Resources ==="
fd "check.*box" --type f
fd "drop.*down" --type f
fd "two.*circle" --type f
fd "(long|short).*content" --type f

Length of output: 1781