[UI] 버튼 컴포넌트 구현완료 by Nico1eKim · Pull Request #20 · THIP-TextHip/THIP-Android

Nico1eKim · 2025-05-29T08:34:00Z

➕ 이슈 링크

closed [UI] 버튼 컴포넌트 [(THIP2025-23)] #17

🔎 작업 내용

버튼 컴포넌트 중 논의가 필요한 사항 / 굳이 분리가 필요 없는 버튼 빼고 모두 구현 완료했습니다

투표 버튼에 애니메이션 효과 반영했습니다!

📸 스크린샷

button/action_book -> AcitonBookButton

button/action_medium -> ActionMediumButton

button/action_fill -> ActionFillButton

button/button_group_vote -> GroupVoteButton 애니메이션 효과 추가

2025-06-23.10.41.37.mov

button/chips_toggle -> ToggleSwitchButton

2025-05-29.5.17.54.mov

button/chips_option -> OptionChipButton, GenreChipButton, RecentSearchButton

OptionChipButton

2025-05-29.5.18.45.mov

GenreChipButton

RecentSearchButton

button/button_header -> HeaderButton

2025-05-29.5.19.47.mov

button/icon_fab - feedwrite, makeroom / note_default, web_default 컴포넌트로 나눠서 구현

ExpandableFloatingButton
https://github.com/user-attachments/assets/c656d3d4-86fd-4831-bb65-0006f8b4eb49

FloatingButton

button/icon_checkbox -> CheckboxButton

2025-05-29.5.22.42.mov

button/text_filter -> FilterButton

2025-05-29.5.23.35.mov

button/button_follow, button/button_change -> OutlinedButton

😢 해결하지 못한 과제

button/chips_option의 페이지별 보기 버튼은 로직 수정 회의를 해봐야 할 것 같아서 아직 구현 안했습니다.

📢 리뷰어들에게

추후 개발할 때 어떤 것이 인자로 들어가고, 어떻게 사용할 수 있는지 참고하라고 거의 모든 예시를 preview로 만들어놨습니다. preview참고해서 개발 부탁합니다 ~
컴포넌트를 너무 세세하게 나눈 것 같다, 또는 컴포넌트 분리를 너무 안한거같다고 느끼는 모든 코드 리뷰 환영입니다. 코리 열심히 & 자세히 부탁드려욧 ~~

Summary by CodeRabbit

New Features
- 다양한 스타일과 기능의 버튼 UI 컴포넌트(예: 액션 버튼, 토글 스위치, 체크박스, 칩, 플로팅 버튼, 그룹 투표, 필터, 최근 검색 등)가 새롭게 추가되었습니다.
- 확장 가능한 플로팅 버튼과 드롭다운 필터, 투표 버튼 등 인터랙티브한 UI 요소들이 도입되었습니다.
- 새로운 색상 팔레트와 관련 테마 속성이 추가되었습니다.
리소스
- 새로운 아이콘 및 벡터 드로어블(chevron, circle, reset, x 등)이 추가되었습니다.
- 버튼, 책 정보, UI 라벨 등 다양한 신규 문자열 리소스가 추가되었습니다.
환경설정
- 프로젝트의 JDK 및 언어 레벨이 JDK 21로 설정되었습니다.

…into ui/THIP-TextHip#17-buttons

JJUYAAA

헉 양이 엄청 많네용 너무너무 수고하셨습니다아 ~~~~

JJUYAAA · 2025-05-31T08:30:17Z

+    <string name="book_author">한한강한강한강한ㅇㅇㄴㄴㅁ강</string>
+
+    <!--    버튼 컴포넌트    -->
+    <string name="author">저</string>


"저자" 오타인 것 같네용!

ㅎㅋㅎㅋㅎㅋ이게 마자용 ! "한강 저"라고 돼있더라구욧

허걱 ㅋㅋㅎㅋㅎㅋㅋ 머쓱 🫢🫢

JJUYAAA · 2025-05-31T08:36:27Z

+
+    <!--    mock data    -->
+    <string name="book_title">책이름을입력해주세요책이름을</string>
+    <string name="book_author">한한강한강한강한ㅇㅇㄴㄴㅁ강</string>


저는 앱 내에 디폴트값인 문자열만 따로 추출해서 사용하는 거라고 생각하고 있었는데, mock data도 이렇게 추출해야 하는 건가용? 나중에 수정한다고 해도, 고정된 값이 아닐텐데 따로 추출을 해두는 것이 일반적인 방법인지 궁금해용 -!!🧐

아 원래는 디폴트만 추출하고 이렇게 mock data는 굳이 추출 안해도 되긴 하는데 이렇게 자주 쓰이는 mock data는 추출하는 편입니두 .. 어차피 나중에 삭제할 데이터라 어떤 방식으로 해도 상관 없을거같긴해용 ~

JJUYAAA · 2025-06-01T01:04:10Z

+                painter = painterResource(
+                    id = if (expanded) R.drawable.ic_upmore else R.drawable.ic_downmore
+                ),
+                contentDescription = "Dropdown",


단순하게 궁금한게 하나 있는데, 코드들을 보면 대부분의 아이콘에 description을 null로 주셨는데 여기서는 채워져있네요! 이게 어떤 기준으로 나누신 건지 궁금합니당

ㅎㅎㅋㅎㅋㅎㅋ사실 코드 자동완성에 따라서 따라가는 편인데 ... 보통 자동완성은 contentDescription을 채워주고 저는 그냥 null을 때려박아서 ... null은 최대한 안쓰는게 좋긴한데 귀찮으면 null쓰는 편입니다 ㅠㅠ

rbqks529 · 2025-06-22T03:45:02Z

늦은 만큼 확실하게 확인할게요~
먼저 button/action_profile_feed는 없는데 논의 사항이 있어서 아직 진행안하신 걸까요?

rbqks529

전부 확인했는데 확실히 안드 고인물 답게 깔끔하게 하시네요

rbqks529 · 2025-06-22T03:45:10Z

+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp), // TODO: 화면에서 버튼 위치 조정


버튼 위치 조정이 있는데 이거는 뭘까용

아 이거 화면 상 위치인데 이거 구현했을 당시에 화면상 FAB 버튼의 위치가 어디인지 안나왔어서 임의로 설정했었습니둥

rbqks529 · 2025-06-22T04:14:23Z

이 Composable이 그 영상에 나오는 FAB누르면 추가 버튼나오는 함수인가요?

아뇽 영상 중에 button/icon_checkbox -> CheckboxButton 입니두 ~

rbqks529 · 2025-06-22T04:33:54Z

+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable(
+                    interactionSource = remember { MutableInteractionSource() },


이 코드는 처음 보는데 어떤 효과가 있나용

이거 아래애 있는

indication = null 코드랑 같이 클릭되는 효과를 없애기 위한 코드입니두

interactionSource = remember { MutableInteractionSource() } 는 상호작용 상태를 추적하는 기능입니닷!

rbqks529 · 2025-06-22T10:42:48Z

확인하니까 깔끔하고 좋은데 디자인 사항에는 없긴한데 애니메이션을 넣을 수 있다면 넣는거는 어떨까요

참고해서 시도해보겠습니닷 !

Nico1eKim · 2025-06-22T16:38:14Z

늦은 만큼 확실하게 확인할게요~ 먼저 button/action_profile_feed는 없는데 논의 사항이 있어서 아직 진행안하신 걸까요?

맞습니닷 아직 확실하게 어떻게 될지 결론이 안난거같아서 일단 냅뒀습니당ㅇ

coderabbitai · 2025-06-23T13:42:50Z

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

📥 Commits

Reviewing files that changed from the base of the PR and between 1f7c62f and 3eadbf6.

📒 Files selected for processing (22)

.idea/deploymentTargetSelector.xml (1 hunks)
.idea/misc.xml (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/ActionBookButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/ActionFillButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/ActionMediumButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/CheckboxButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/ExpandableFloatingButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/FilterButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/FloatingButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/GenreChipButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/GroupVoteButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/HeaderButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/OptionChipButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/OutlinedButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/RecentSearchButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/common/buttons/ToggleSwitchButton.kt (1 hunks)
app/src/main/java/com/texthip/thip/ui/theme/Color.kt (3 hunks)
app/src/main/res/drawable/ic_chevron.xml (1 hunks)
app/src/main/res/drawable/ic_circle.xml (1 hunks)
app/src/main/res/drawable/ic_reset_20.xml (1 hunks)
app/src/main/res/drawable/ic_x_20.xml (1 hunks)
app/src/main/res/values/strings.xml (1 hunks)

 __________________________________________________________________________________
< Crash early. A dead program normally does a lot less damage than a crippled one. >
 ----------------------------------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

Tip

You can customize the tone of the review comments and chat replies.

Set the tone_instructions setting in your project's settings in CodeRabbit to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

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

Nico1eKim added 21 commits May 17, 2025 01:15

[UI]: action book button 컴포넌트 제작 (THIP-TextHip#17)

4196e27

[refactor]: clickable 추가 (THIP-TextHip#17)

8c611e1

[init]: Color 변수 추가 반영 (THIP-TextHip#17)

adc4b1b

[UI]: action medium button 컴포넌트 제작 (THIP-TextHip#17)

e274b5a

[UI]: action fill button 컴포넌트 제작 (THIP-TextHip#17)

ac4bf49

[UI]: toggle switch button 컴포넌트 제작 (THIP-TextHip#17)

37d65ff

[UI]: checkbox button 컴포넌트 제작 (THIP-TextHip#17)

56a64cc

[UI]: outlined button 컴포넌트 제작 (THIP-TextHip#17)

61e4358

[UI]: group vote button 컴포넌트 제작 (THIP-TextHip#17)

f840e26

[UI]: filter button 컴포넌트 제작 (THIP-TextHip#17)

4251f1f

[refactor]: group vote button 컴포넌트 toggle가능하게 수정 (THIP-TextHip#17)

acec823

[refactor]: filter button 컴포넌트 위치, 버튼 수정 (THIP-TextHip#17)

dd79f98

[refactor]: action medium button 컴포넌트 확장성 넓게 수정 (THIP-TextHip#17)

e32baa8

[refactor]: header button 컴포넌트 제작 (THIP-TextHip#17)

4507a30

[chore]: 변수 명 변경 (THIP-TextHip#17)

897585c

[UI]: option chip button 컴포넌트 제작 (THIP-TextHip#17)

1a6a105

[UI]: genre chip button 컴포넌트 제작 (THIP-TextHip#17)

e57937f

[UI]: recent search button 컴포넌트 제작 (THIP-TextHip#17)

243190c

[UI]: expandable floating button 컴포넌트 제작 (THIP-TextHip#17)

ef98a30

[UI]: floating button 컴포넌트 제작 (THIP-TextHip#17)

6a487cb

Merge branch 'develop' of https://github.com/THIP-TextHip/THIP-Android …

c3367bc

…into ui/THIP-TextHip#17-buttons

Nico1eKim requested review from JJUYAAA and rbqks529 May 29, 2025 08:34

Nico1eKim self-assigned this May 29, 2025

Nico1eKim added 🎨 UI 🍀 refactor 🐱 나은 labels May 29, 2025

JJUYAAA approved these changes Jun 1, 2025

View reviewed changes

Nico1eKim changed the title ~~UI/#17 buttons~~ [UI] 버튼 컴포넌트 구현완료 Jun 1, 2025

Nico1eKim added the ✅ OK merge label Jun 1, 2025

rbqks529 approved these changes Jun 22, 2025

View reviewed changes

Nico1eKim added 2 commits June 23, 2025 14:15

[UI]: floating button 화면 상 위치 수정 (THIP-TextHip#17)

49db2f4

[UI]: Group Vote Button에 애니메이션 효과 추가 (THIP-TextHip#17)

3eadbf6

Nico1eKim merged commit b6f3833 into THIP-TextHip:develop Jun 23, 2025
1 check was pending

Conversation

Nico1eKim commented May 29, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

➕ 이슈 링크

🔎 작업 내용

📸 스크린샷

button/action_book -> AcitonBookButton

button/action_medium -> ActionMediumButton

button/action_fill -> ActionFillButton

button/button_group_vote -> GroupVoteButton ** 애니메이션 효과 추가 **

button/chips_toggle -> ToggleSwitchButton

button/chips_option -> OptionChipButton, GenreChipButton, RecentSearchButton

button/button_header -> HeaderButton

button/icon_fab - feedwrite, makeroom / note_default, web_default 컴포넌트로 나눠서 구현

button/icon_checkbox -> CheckboxButton

button/text_filter -> FilterButton

button/button_follow, button/button_change -> OutlinedButton

😢 해결하지 못한 과제

📢 리뷰어들에게

Summary by CodeRabbit

Uh oh!

JJUYAAA left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rbqks529 commented Jun 22, 2025

Uh oh!

rbqks529 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Nico1eKim commented Jun 22, 2025

Uh oh!

coderabbitai Bot commented Jun 23, 2025

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Nico1eKim commented May 29, 2025 •

edited by coderabbitai Bot

Loading

button/button_group_vote -> GroupVoteButton 애니메이션 효과 추가

CodeRabbit Configuration File (`.coderabbit.yaml`)