diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Components/TemplatePreviewComponents.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Components/TemplatePreviewComponents.swift index 10c73c69..81c44f8f 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Components/TemplatePreviewComponents.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Components/TemplatePreviewComponents.swift @@ -323,7 +323,7 @@ extension TemplatePreviewBody { .foregroundColor(.black) } .padding(.horizontal, 16) - .padding(.vertical, 12.5) + .padding(.vertical, 10.5) } .buttonStyle(.plain) .glassEffect(.regular.interactive(), in: .capsule) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/EffectSelectorView.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/EffectSelectorView.swift index ef831632..615e389f 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/EffectSelectorView.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/EffectSelectorView.swift @@ -267,33 +267,7 @@ struct EffectSelectorView: View { HStack(spacing: 4) { // 유료 아이콘 if !sound.isFree { - if isOwned { - // 유료 + 보유 - if isSelected { - Image(.whiteEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } else { - Image(.grayEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } - } else { - // 유료 + 미보유 - if isSelected { - Image(.whiteEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } else { - Image(.gradientEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } - } + Image(.myCoinMini) } Text(sound.soundName) @@ -441,33 +415,7 @@ struct EffectSelectorView: View { HStack(spacing: 4) { // 유료 아이콘 if !particle.isFree { - if isOwned { - // 유료 + 보유 - if isSelected { - Image(.whiteEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } else { - Image(.grayEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } - } else { - // 유료 + 미보유 - if isSelected { - Image(.whiteEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } else { - Image(.gradientEffectSelect) - .resizable() - .scaledToFit() - .frame(width: 18, height: 18) - } - } + Image(.myCoinMini) } Text(particle.particleName) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView+PurchaseSheet.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView+PurchaseSheet.swift index e7172cc5..e35ac8ba 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView+PurchaseSheet.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView+PurchaseSheet.swift @@ -31,7 +31,7 @@ extension KeyringCustomizingView { /// 장바구니 리스트 (스크롤 가능) ScrollView { - VStack(spacing: 12) { + VStack(spacing: 20) { ForEach(cartItems) { item in purchaseItemRow(item: item) } @@ -43,7 +43,7 @@ extension KeyringCustomizingView { Spacer() // 내 보유 포인트 - HStack(spacing: 4) { + HStack(spacing: 6) { Text("내 보유 :") .typography(.suit15M25) .foregroundStyle(.black100) @@ -51,8 +51,9 @@ extension KeyringCustomizingView { Text("\(UserManager.shared.currentUser?.coin ?? 0)") .typography(.nanum16EB) .foregroundStyle(.main500) + .padding(.top, 2) } - .padding(.bottom, 16) + .padding(.bottom, 7) // 구매 버튼 purchaseButton @@ -80,23 +81,23 @@ extension KeyringCustomizingView { /// 구매 아이템 Row private func purchaseItemRow(item: EffectItem) -> some View { HStack(spacing: 0) { - // 아이콘 (유료 표시) - Image(.mainEffectSelect) - .padding(.trailing, 6) - // 아이템 이름 Text(item.name) - .typography(.suit17B) + .typography(.suit16B) .foregroundStyle(.black100) .padding(.trailing, 6) // 타입 표시 Text(item.type.rawValue) - .typography(.suit12M) + .typography(.suit13M) .foregroundStyle(.gray400) Spacer() + // 아이콘 (유료 표시) + Image(.myCoinMini) + .padding(.trailing, 5) + // 가격 Text("\(item.price)") .typography(.nanum16EB) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView.swift index 56e28888..d497220f 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringCustomizingView.swift @@ -311,7 +311,7 @@ extension KeyringCustomizingView { } label: { Text(hasCartItems ? "구매 \(cartItems.count)" : "다음") .typography(.suit17B) - .foregroundStyle(hasCartItems ? .white100 : .black100) + .foregroundStyle(hasCartItems ? .white100 : .main500) .padding(4.5) } .buttonStyle(.glassProminent) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Helpers.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Helpers.swift index cbbdcc23..c7802085 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Helpers.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Helpers.swift @@ -72,7 +72,7 @@ extension KeyringInfoInputView { } label: { Text("다음") .typography(.suit17B) - .foregroundStyle(viewModel.nameText.isEmpty || hasProfanity ? .gray300 : .black100) + .foregroundStyle(viewModel.nameText.isEmpty || hasProfanity ? .gray300 : .main500) .padding(5) } .buttonStyle(.glassProminent) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Sheet.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Sheet.swift index cfa2cf35..c9314ad6 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Sheet.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+Sheet.swift @@ -111,10 +111,14 @@ extension KeyringInfoInputView { .typography(.notosans15M) /// 커서 표시기 색상 .tint(.main500) - - Text("\(textCount)/\(viewModel.maxTextCount)") - .typography(.suit13M) - .foregroundStyle(.gray300) + + if viewModel.nameText.count > 0 { + Button { + viewModel.nameText = "" + } label: { + Image(.emptyIcon) + } + } } .padding(.vertical, 13.5) .padding(.horizontal, 16) diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+TagManagement.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+TagManagement.swift index a362ce74..758ce7fd 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+TagManagement.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView+TagManagement.swift @@ -50,7 +50,7 @@ extension KeyringInfoInputView { } } -// MARK: - Add Tag Alert (Glass Style) +// MARK: - Add Tag Alert extension KeyringInfoInputView { var addNewTagAlertView: some View { VStack(spacing: 0) { @@ -59,32 +59,42 @@ extension KeyringInfoInputView { .typography(.suit17B) .foregroundStyle(.black100) .padding(.top, 14) + .padding(.bottom, 30) - // TextField - TextField("태그 이름을 입력해주세요", text: $newTagName) - .typography(.notosans15R) - .padding(.vertical, 14) - .padding(.horizontal, 16) - .frame(height: 52) - .background( - RoundedRectangle(cornerRadius: 12) - .fill(.white100) - ) - .padding(.top, 21) - .padding(.bottom, 5) - .onChange(of: newTagName) { oldValue, newValue in - if newValue.count > 10 { - newTagName = String(newValue.prefix(10)) + HStack { + // TextField + TextField("태그 이름을 입력해주세요", text: $newTagName) + .typography(.notosans16R) + .focused($isTagTextFieldFocused) + .onChange(of: newTagName) { oldValue, newValue in + if newValue.count > 10 { + newTagName = String(newValue.prefix(10)) + } + showTagNameAlreadyExistsToast = availableTags.contains(newValue) + } + .tint(.main500) + + if newTagName.count > 0 { + Button { + newTagName = "" + } label: { + Image(.emptyIcon) } - showTagNameAlreadyExistsToast = availableTags.contains(newValue) } - .tint(.main500) + } + .padding(.horizontal, 16) + .padding(.vertical, 14) + .background( + RoundedRectangle(cornerRadius: 12) + .fill(.white100) + ) HStack { Text(showTagNameAlreadyExistsToast ? "이미 사용 중인 태그 이름입니다." : "") .typography(.suit14M) .foregroundStyle(.error) .opacity(showTagNameAlreadyExistsToast ? 1 : 0) + .padding(.top, showTagNameAlreadyExistsToast ? 5 : 0) Spacer() } @@ -139,8 +149,8 @@ extension KeyringInfoInputView { } } .padding(14) + .frame(width: UIScreen.main.bounds.width - 102) // 좌우 51씩 여백 .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 34)) - .frame(width: 300, height: 230) } } diff --git a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView.swift b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView.swift index 4f3f6a46..73dcfcbc 100644 --- a/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView.swift +++ b/Keychy/Keychy/Presentation/KeyringMaker/Shared/Views/KeyringInfoInputView.swift @@ -36,6 +36,7 @@ struct KeyringInfoInputView: View { @State var sheetDetent: PresentationDetent = .height(76) @State var showSheet: Bool = true @FocusState var isFocused: Bool + @FocusState var isTagTextFieldFocused: Bool // MARK: - Profanity Filtering @State var validationMessage: String = "" @@ -111,9 +112,20 @@ struct KeyringInfoInputView: View { Color.black60 .ignoresSafeArea() .zIndex(99) + .onTapGesture { + // 키보드가 올라와 있으면 키보드만 내림 + if isTagTextFieldFocused { + isTagTextFieldFocused = false + } else { + // 키보드가 이미 내려가 있으면 Alert 닫기 + newTagName = "" + showAddTagAlert = false + showTagNameAlreadyExistsToast = false + sheetDetent = .height(measuredSheetHeight) + } + } addNewTagAlertView - .padding(.horizontal, 51) .zIndex(100) }