Skip to content

Refactor/#42 버튼 컴포넌트들 수정 #44

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.

Sign up for GitHub

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

Merged
sum130 merged 2 commits into from
Jan 12, 2026
Merged

Refactor/#42 버튼 컴포넌트들 수정 #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5f3c08
refactor: #42 버튼 컴포넌트들 수정
sum130 Jan 12, 2026
e48c019
refactor: #42 버튼 컴포넌트 스케일 수정
sum130 Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 76 additions & 17 deletions Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/CherrishButton.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,14 @@ struct CherrishButton: View {

var body: some View {
Button(action: action) {
Text(title)
.typography(.title2_sb_16)
.foregroundStyle(type.textColor(for: state))
HStack{
Spacer()
Text(title)
.typography(.title2_sb_16)
.foregroundStyle(type.textColor(for: state))
Spacer()
}

}
.buttonStyle(CherrishButtonStyle(state: state, type: type))
.disabled(type.isDisabled(for: state))
Expand All @@ -44,29 +49,17 @@ struct CherrishButtonStyle: ButtonStyle {

func makeBody(configuration: Configuration) -> some View {
configuration.label
.frame(
width: configuration.isPressed ? type.width * 0.95 : type.width,
height: configuration.isPressed ? type.height * 0.95 : type.height
)
.frame(height: type.height)
.background(type.backgroundColor(for: state))
.clipShape(RoundedRectangle(cornerRadius: configuration.isPressed
? type.cornerRadius * 0.95
: type.cornerRadius))
.scaleEffect(configuration.isPressed ? 0.95 : 1.0)
Copy link
Contributor

@wotjs020708 wotjs020708 Jan 12, 2026

Choose a reason for hiding this comment

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

바로 바로 적용 나이스!

Copy link
Contributor

@soseoyo12 soseoyo12 Jan 12, 2026

Choose a reason for hiding this comment

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

와

}
Comment on lines 50 to 58
Copy link

@coderabbitai coderabbitai bot Jan 12, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

scaleEffect와 cornerRadius 조정의 중복 가능성을 검토하세요.

scaleEffect(0.95)는 전체 뷰를 축소하므로 cornerRadius도 시각적으로 비례하여 줄어듭니다. 여기에 cornerRadius * 0.95를 추가로 적용하면 모서리가 의도한 것보다 더 날카롭게 보일 수 있습니다.

♻️ cornerRadius 조정 제거 제안 
     func makeBody(configuration: Configuration) -> some View {
         configuration.label
             .frame(height: type.height)
             .background(type.backgroundColor(for: state))
-            .clipShape(RoundedRectangle(cornerRadius: configuration.isPressed
-                                        ? type.cornerRadius * 0.95
-                                        : type.cornerRadius))
+            .clipShape(RoundedRectangle(cornerRadius: type.cornerRadius))
             .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
     }
🤖 Prompt for AI Agents 
In
@Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/CherrishButton.swift
around lines 50 - 58, In makeBody(configuration:), remove the redundant
cornerRadius scaling so the pressed visual is driven by scaleEffect only: keep
scaleEffect(configuration.isPressed ? 0.95 : 1.0) and change the
clipShape(RoundedRectangle(...)) to always use type.cornerRadius (do not
multiply by 0.95 when configuration.isPressed); this removes the double-shrink
effect when Configuration.isPressed while preserving the existing press
animation.

}


extension CherrishButtonType {

var width: CGFloat {
switch self {
case .next: return 326
case .confirm: return 126
case .save: return 278
case .addEvent: return 196
}
}

var height: CGFloat {
switch self {
case .save: return 44
Expand Down Expand Up @@ -113,3 +106,69 @@ extension CherrishButtonType {
}
}
}


struct CherrishButtonPreviewWrapper: View {
Copy link
Contributor

@y-eonee y-eonee Jan 12, 2026

Choose a reason for hiding this comment

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

요기한번만 지워주세용!!

Copy link
Contributor

@wotjs020708 wotjs020708 Jan 12, 2026

Choose a reason for hiding this comment

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

해줘!


@State private var nextState: ButtonState = .normal
@State private var activeNextState: ButtonState = .active
@State private var dummyState: ButtonState = .active

var body: some View {
VStack(spacing: 16) {

// NEXT - 비활성
CherrishButton(
title: "다음",
type: .next,
state: $nextState
) {
print("Next (normal)")
}

// NEXT - 활성
CherrishButton(
title: "다음",
type: .next,
state: $activeNextState
) {
print("Next (active)")
}
.padding(CGFloat(8))

// CONFIRM
CherrishButton(
title: "확인",
type: .confirm,
state: $dummyState
) {
print("Confirm")
}

// SAVE
CherrishButton(
title: "등록하기",
type: .save,
state: $dummyState
) {
print("Save")
}

// ADD EVENT
CherrishButton(
title: "다운타임 없이 일정 추가",
type: .addEvent,
state: $dummyState
) {
print("Add Event")
}
}
.padding()
.background(Color.gray100)
}
}
#Preview {
CherrishButtonPreviewWrapper()
}
Comment on lines +111 to +172
Copy link

@coderabbitai coderabbitai bot Jan 12, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

프리뷰 래퍼 추가가 좋습니다.

모든 버튼 타입과 상태를 테스트할 수 있는 프리뷰 래퍼가 개발에 유용합니다. 다만 Line 137의 CGFloat(8)은 단순히 8로 작성해도 Swift가 자동으로 타입을 추론합니다.

🤖 Prompt for AI Agents 
In
@Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/CherrishButton.swift
around lines 111 - 172, In CherrishButtonPreviewWrapper replace the explicit
CGFloat initializer used in the padding modifier (currently written as
CGFloat(8) on the CherrishButton instance) with a plain numeric literal (8) so
Swift infers the type; update the padding call on the second CherrishButton (the
one with comment "// NEXT - 활성") to use .padding(8) instead of
.padding(CGFloat(8)).



3 changes: 2 additions & 1 deletion Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/MissionCard.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ struct MissionCard: View {
}
.padding(.horizontal, 7)
.padding(.vertical, 6)
.frame(width: 148, height: 80)
.frame(maxWidth: .infinity)
.frame(height: 80)
.background(isSelected ? .red200 : .gray0)
.overlay(
RoundedRectangle(cornerRadius: 10)
Expand Down
19 changes: 10 additions & 9 deletions Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/SelectionChip.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,15 @@ struct SelectionChip: View {
Text(title)
.typography(.body1_m_14)
.foregroundStyle(isSelected ? .gray800 : .gray700)
.frame(width: 148, height: 80)
.background(isSelected ? .red200 : .gray0)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(isSelected ? .red500 : .gray500, lineWidth: 1)
)
.onTapGesture {
isSelected.toggle()
}
.frame(maxWidth: .infinity)
.frame(height: 80)
.background(isSelected ? .red200 : .gray0)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(isSelected ? .red500 : .gray500, lineWidth: 1)
)
Comment on lines +19 to +25
Copy link

@coderabbitai coderabbitai bot Jan 12, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

배경 색상에 라운드 처리가 누락되었습니다.

.background() 수정자는 색상을 직사각형으로 채우므로 배경의 모서리가 둥글게 표시되지 않습니다. overlay의 RoundedRectangle stroke는 테두리만 둥글게 처리하고 배경은 그대로 둡니다.

🔧 배경에 라운드 처리를 적용하는 수정안 
             .frame(maxWidth: .infinity)
             .frame(height: 80)
-            .background(isSelected ? .red200 : .gray0)
+            .background(
+                RoundedRectangle(cornerRadius: 10)
+                    .fill(isSelected ? .red200 : .gray0)
+            )
             .overlay(
                 RoundedRectangle(cornerRadius: 10)
                     .stroke(isSelected ? .red500 : .gray500, lineWidth: 1)
             )
🤖 Prompt for AI Agents 
In @Cherrish-iOS/Cherrish-iOS/Presentation/Global/Components/SelectionChip.swift
around lines 19 - 25, The background color is applied as a rectangle so its
corners stay square while the overlay stroke is rounded; update the background
to use a rounded shape filled with the conditional color (e.g., replace
.background(isSelected ? .red200 : .gray0) with a RoundedRectangle(cornerRadius:
10).fill(isSelected ? .red200 : .gray0)) so the fill matches the overlay stroke;
ensure you keep the existing overlay RoundedRectangle(cornerRadius:
10).stroke(...) and the frame modifiers intact to preserve sizing and selection
logic in SelectionChip.

.onTapGesture {
isSelected.toggle()
}
}
}