🔀 :: (#411) - 박람회 자세히 보기 화면의 버튼 디자인이 변경되어 이를 수정하였습니다.

[audgns10]

💡 개요

• 박람회 자세히 보기 화면 버튼 디자인이 수정되어 이를 반영할 필요가 있었습니다.

📃 작업내용

• 박람회 자세히 보기 화면의 버튼 디자인이 변경되어 이를 수정하였습니다.

  • 두개의 버튼에서 border 값을 삭제하고, 배경색을 변경하였습니다.

  • before

    

  • after

    

🔀 변경사항

• chore ExpoButton(ExpoEnableButton)
• chore ExpoDetailScreen

🙋‍♂️ 질문사항

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

🍴 사용방법

• x

🎸 기타

• x

Summary by CodeRabbit

• New Features

  • 버튼의 배경색을 사용자 지정 가능하도록 개선되어 다양한 디자인 구성이 가능합니다.

• Style

  • 상세 화면 버튼의 스타일이 단순화되어 일관된 디자인과 개선된 시각 효과를 제공합니다.
  • 미리보기 설정이 표준화되어 UI 검토 및 활용이 용이해졌습니다.

[coderabbitai]

Walkthrough

이 PR은 두 개의 파일에 변경을 도입합니다. ExpoButton.kt에서는 ExpoEnableButton 컴포저블 함수에 backgroundColor 매개변수를 추가하여 버튼 배경 색상을 사용자 정의할 수 있도록 하며, 기본값은 Color.White로 설정되었습니다. ExpoDetailScreen.kt에서는 프리뷰를 위해 기존의 @ExpoPreviews 어노테이션을 표준 @Preview로 변경하고, 버튼 컴포넌트의 모디파이어와 색상 스타일을 단순화하였습니다.

Changes

파일	요약된 변경 사항
core/design-system/src/.../ExpoButton.kt	ExpoEnableButton 함수에 backgroundColor 매개변수를 추가 (기본값: Color.White), ButtonDefaults.buttonColors의 containerColor에 적용
feature/expo/src/.../ExpoDetailScreen.kt	@ExpoPreviews를 @Preview로 변경, ExpoEnableDetailButton과 ExpoEnableButton의 모디파이어를 Modifier.fillMaxWidth()로 단순화 및 색상 변경 적용

Sequence Diagram(s)

sequenceDiagram
    participant 호출자 as Caller
    participant 버튼 as ExpoEnableButton
    participant 기본값 as ButtonDefaults
    호출자->>버튼: ExpoEnableButton 호출 (backgroundColor 포함)
    버튼->>기본값: containerColor에 backgroundColor 전달
    기본값-->>버튼: 버튼 색상 구성 정보 반환
    버튼-->>호출자: 버튼 렌더링 완료

Loading

sequenceDiagram
    participant 개발자 as Developer
    participant 미리보기 as Preview
    participant 상세화면 as ExpoDetailScreen
    개발자->>미리보기: @Preview 활성화
    미리보기->>상세화면: ExpoDetailScreen 호출
    상세화면->>버튼1: ExpoEnableDetailButton 호출 (단순화된 Modifier)
    상세화면->>버튼2: ExpoEnableButton 호출 (색상 및 Modifier 변경)
    버튼1-->>상세화면: 컴포넌트 렌더링 완료
    버튼2-->>상세화면: 컴포넌트 렌더링 완료

Loading

Possibly related PRs

• 🔀 :: (#401) - button enable disable changes apply #403: ExpoEnableButton 컴포저블 수정과 관련된 버튼 속성 및 스타일 변경이 포함되어 있음.
• 🔀 :: (#120) - Color, ColorTheme을 생성하고, ExpoAndroidTheme를 생성하였습니다. #121: 버튼의 색상 관리 개선을 위한 backgroundColor 매개변수 추가와 관련된 변경 내용 포함.
• 🔀 :: (#145) - Button 컴포넌트를 제작하였습니다. #146: 동일 파일 내의 ExpoEnableButton 함수 수정과 직접 관련된 변경 내용.

Suggested labels

✨ Feature

Suggested reviewers

• kimjeakwan
• diejdkll
• answad

Poem

나는 작은 토끼, 🐰
버튼에 색을 담아
흰색에서 새로운 빛을 뿜어내네
프리뷰도 깔끔하게 빛나고,
코드 속 걸음마다 즐거움이 넘치네!
찬란한 순간, 우리 함께 달리자!
🥕✨

Tip

🌐 Web search-backed reviews and chat

• We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
• You can disable this feature by setting web_search: false in the knowledge_base settings.
• Please share any feedback in the Discord discussion.

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

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

105-105: 버튼 디자인 변경이 잘 구현되었습니다!

backgroundColor 매개변수 추가와 containerColor 업데이트가 잘 이루어졌습니다.

일관성을 위해 다른 버튼 컴포넌트들(ExpoButton, ExpoStateButton, ExpoEnableDetailButton)도 비슷한 방식으로 배경색을 커스터마이즈할 수 있도록 하는 것을 고려해보세요.

Also applies to: 117-117

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 031a0e1 and 5cd692a.

📒 Files selected for processing (2)

• core/design-system/src/main/java/com/school_of_company/design_system/component/button/ExpoButton.kt (2 hunks)
• feature/expo/src/main/java/com/school_of_company/expo/view/ExpoDetailScreen.kt (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: build

🔇 Additional comments (3)

feature/expo/src/main/java/com/school_of_company/expo/view/ExpoDetailScreen.kt (3)

331-332: 버튼 스타일링이 단순화되었습니다.

불필요한 border 스타일링을 제거하고 fillMaxWidth()만 사용하도록 수정한 것이 좋습니다.

---

337-340: 버튼 디자인이 디자인 가이드라인에 맞게 업데이트되었습니다.

• textColor를 colors.gray700로 설정
• backgroundColor를 colors.gray100로 설정
• 불필요한 border 스타일링 제거

---

410-411: Preview 어노테이션이 표준화되었습니다.

커스텀 @ExpoPreviews 대신 표준 @Preview 어노테이션을 사용하도록 변경되었습니다.

[answad]

수고하셧습니다