[♻️] 버튼뷰 리팩토링 진행중

This commit is contained in:
Seonkyu_Kim 2025-02-06 17:59:22 +09:00
parent bbed8abb22
commit 3beafd636b
23 changed files with 356 additions and 191 deletions

View File

@ -21,6 +21,7 @@ struct LoginView: View {
@State var isSecure: Bool = true
@State var isSave: Bool = false
var body: some View {
VStack(spacing: 0) {
Spacer().frame(height: 100)

View File

@ -10,47 +10,48 @@ import SwiftUI
struct CircleBtnView: View {
let title: String?
let image: Image
@Binding var isSelected: Bool
let isReverse: Bool
let action: VOID_TO_VOID?
var backColor: Color {isReverse ? Color(.Second.light) : Color(.Normal.normal)}
var foreColor: Color {isSelected ? Color(.Second.normal) : Color(.Disable.normal)}
@ObservedObject var vm: ButtonViewModel
let id: UUID
var body: some View {
if let state = vm.btnStates[id] {
Button{
guard let action = action else {return}
guard let action = state.action else {return}
action()
} label: {
VStack(alignment: .center, spacing: 0) {
self.image
if let image = state.image {
image
.resizable()
.renderingMode(.template)
.foregroundStyle(self.foreColor)
.frame(width: 24, height: 24)
if let title = self.title {
.foregroundStyle(state.foreColor)
.frame(width: state.width/2, height: state.height/2)
}
//
if let title = state.title, let font = state.font {
Text("\(title)")
.font(.nps(font: .bold, size: 6))
.foregroundStyle(self.foreColor)
.font(font)
.lineLimit(1)
.minimumScaleFactor(0.5)
.truncationMode(.tail)
.foregroundStyle(state.textColor)
// .padding()
}
}
.padding()
.background {
if isReverse {
if state.isReverse {
Circle()
.accentColor(self.backColor)
.frame(width: 48, height: 48)
.accentColor(state.backColor)
.frame(width: state.width, height: state.height)
.innerShadow(shape: Circle(), color: Color(.Text.black).opacity(0.75), blur: 8, x: 0, y: 4)
} else {
Circle()
.accentColor(self.backColor)
.frame(width: 48, height: 48)
.accentColor(state.backColor)
.frame(width: state.width, height: state.height)
.shadow(color: Color(.Text.black).opacity(0.75), radius: 8, x: 4, y: 8)
}
}
}
}
}
}

View File

@ -6,42 +6,45 @@
//
import SwiftUI
//import combine
struct SimpleBtnView: View {
let title: String?
let image: Image?
let font: Font?
let width: CGFloat
let height: CGFloat
var isUsable: Bool = true
let action: VOID_TO_VOID?
@ObservedObject var vm: ButtonViewModel
let id: UUID
var body: some View {
Button{
guard let action = action else { return }
action()
} label: {
if let title = title, let font = font {
if let state = vm.btnStates[id] {
if let title = state.title, let font = state.font {
Text("\(title)")
.font(font)
.tint(Color(.Second.dark))
.frame(width: width, height: height)
.lineLimit(1)
.minimumScaleFactor(0.5)
.truncationMode(.tail)
.foregroundStyle(state.textColor)
.frame(width: state.width, height: state.height)
.onTapGesture {
if state.isUsable {
guard let action = state.action else { return }
action()
}
else if let image = image {
}
}
else {
Button{
guard let action = state.action else { return }
action()
} label: {
if let image = state.image {
image
.resizable()
.frame(width: width, height: height)
.frame(width: state.width, height: state.height)
}
}
.disabled(isUsable)
.disabled(!state.isUsable)
}
} else {
EmptyView()
}
}
}
#Preview {
SimpleBtnView(title: "체크 합니다", image: Image(.BottomBar.home),
font: .nps(font: .bold, size: 12),
width: 40, height: 40,
action: nil)
}

View File

@ -19,15 +19,17 @@ struct TopProfileView: View {
VStack(spacing: 0){
VStack(alignment: .center, spacing: 0) {
HStack(spacing: 0) {
SimpleBtnView(title: nil,image: Image(.Icon.market),font: nil,
width: 40, height: 40) {
printLog("TEST")
}
// SimpleBtnView(image: Image(.Icon.market), title: nil, font: nil,
// width: 40, height: 40)
// .doAction {
// printLog("TEST")
// }
Spacer(minLength: 1)
SimpleBtnView(title: nil, image: Image(.Icon.notificationSET), font: nil,
width: 40, height: 40) {
printLog("TEST")
}
// SimpleBtnView(image: Image(.Icon.notificationSET), title: nil, font: nil,
// width: 40, height: 40)
// .doAction {
// printLog("TEST")
// }
} /// Stack
ZStack{
Circle()
@ -78,20 +80,20 @@ struct TopProfileView: View {
.padding(EdgeInsets(top: 24, leading: 24, bottom: 12, trailing: 24))
HStack(spacing: 0) {
ForEach(Array(childrenList.enumerated()),id: \.offset){ index, name in
CircleBtnView(title: "\(name)", image: Image(.Icon.face),
// MARK: TO-DO
///
isSelected: Binding(
get: { self.childNum == index },
set: { _ in self.childNum = index }
), isReverse: false) {
self.childNum = index
}
if index != childrenList.count-1 {
Spacer()
}
}
// ForEach(Array(childrenList.enumerated()),id: \.offset){ index, name in
// CircleBtnView(title: "\(name)", image: Image(.Icon.face),
// // MARK: TO-DO
// ///
// isSelected: Binding(
// get: { self.childNum == index },
// set: { _ in self.childNum = index }
// ), isReverse: false) {
// self.childNum = index
// }
// if index != childrenList.count-1 {
// Spacer()
// }
// }
} /// HStack
.padding([.leading, .trailing], 24)
}

View File

@ -8,72 +8,63 @@
import SwiftUI
struct BottomView: View {
@State private var isHomeSelected: Bool = true
@State private var isManagementSelected: Bool = false
@State private var isChattingSelected: Bool = false
@State private var isCalendarSelected: Bool = false
@State private var isEtcSelected: Bool = false
@StateObject var btnVM = ButtonViewModel()
@State var pageType: PageType = .Home
@State private var homeID = UUID()
@State private var managementID = UUID()
@State private var chattingID = UUID()
@State private var calendarID = UUID()
@State private var etcID = UUID()
var body: some View {
HStack(spacing: 0){
Spacer(minLength: 1).frame(width: 24)
CircleBtnView(title: "", image: Image(.BottomBar.home),
isSelected: $isHomeSelected, isReverse: false,
action: {
btnAllFalse()
isHomeSelected.toggle()
})
Spacer(minLength: 1)
let idList: [UUID] = [homeID,managementID,chattingID,calendarID,etcID]
CircleBtnView(title: "학습 관리", image: Image(.BottomBar.management),
isSelected: $isManagementSelected, isReverse: false,
action: {
btnAllFalse()
isManagementSelected.toggle()
})
HStack(alignment: .center, spacing: 0){
ForEach(Array(idList.enumerated()), id: \.offset) { index, id in
CircleBtnView(vm: btnVM, id: id)
if index != idList.count-1 {
Spacer(minLength: 1)
CircleBtnView(title: "채팅", image: Image(.BottomBar.chatting),
isSelected: $isChattingSelected, isReverse: false,
action: {
btnAllFalse()
isChattingSelected.toggle()
})
Spacer(minLength: 1)
CircleBtnView(title: "일정", image: Image(.BottomBar.calendar),
isSelected: $isCalendarSelected, isReverse: false,
action: {
btnAllFalse()
isCalendarSelected.toggle()
})
Spacer(minLength: 1)
CircleBtnView(title: "더보기", image: Image(.BottomBar.etc),
isSelected: $isEtcSelected, isReverse: false,
action: {
btnAllFalse()
isEtcSelected.toggle()
})
Spacer(minLength: 1).frame(width: 24)
}
}
}
// MARK: TO-DO
//
.padding([.top],12)
.padding([.horizontal],24)
// .padding(EdgeInsets(top: 12, leading: 24, bottom: 0, trailing: 24))
.background {
Rectangle()
.foregroundStyle(Color(.Normal.dark))
.ignoresSafeArea(edges: .bottom)
}
.frame(maxWidth: .infinity)
.onAppear {
let idList: [UUID] = [homeID,managementID,chattingID,calendarID,etcID]
let btnText: [String] = ["", "학습 관리", "채팅", "일정", "더보기"]
let btnImage: [Image] = [Image(.Icon.home),Image(.Icon.management),Image(.Icon.chatting),Image(.Icon.calendar),Image(.Icon.etc)]
idList.enumerated().forEach { (index, id) in
btnVM.btnStates[id] = ButtonState()
btnVM.setSize(for: id, newWidth: 48, newHeight: 48)
btnVM.setText(for: id, newText: btnText[index],
newFont: .nps(font: .bold, size: 6))
btnVM.setImage(for: id, newImage: btnImage[index])
btnVM.setAction(for: id) {
btnVM.setIsSelected(for: id, newValue: true)
idList.forEach {
if $0 != id {
btnVM.setIsSelected(for: $0, newValue: false)
}
}
}
}
btnVM.setIsSelected(for: idList[pageType.rawValue], newValue: true)
}
private func btnAllFalse() {
isHomeSelected = false
isManagementSelected = false
isChattingSelected = false
isCalendarSelected = false
isEtcSelected = false
}
}
#Preview {
BottomView()
}

View File

@ -8,36 +8,36 @@
import SwiftUI
struct TopView: View {
@StateObject var btnVM = ButtonViewModel()
@State var titleName: String = ""
@State var changeLogo: Bool = false
@State var tailLogo: Bool = false
@State private var leftBtnID = UUID()
@State private var rightBtnID = UUID()
var myType: UserType = .Teacher
var body: some View {
HStack(alignment: .center, spacing: 0) {
ZStack {
TypeIcon(myType: myType)
.opacity(changeLogo ? 0 : 1)
SimpleBtnView(title: nil, image: Image(.Icon.back), font: nil, width: 40, height: 40) {
SimpleBtnView(vm: btnVM, id: leftBtnID)
.background {
if let state = btnVM.btnStates[leftBtnID], state.image == nil {
Circle()
.strokeBorder(Color(.Second.normal) ,lineWidth: 4)
.frame(width: 40, height: 40)
}
.opacity(changeLogo ? 1 : 0)
}
.padding(EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 12))
Text("\(titleName)")
.foregroundStyle(Color(.Text.detail))
.font(.nps(font: .bold, size: 20))
Spacer()
SimpleBtnView(title: nil, image: Image(.Icon.face), font: nil, width: 40, height: 40)
{
}
SimpleBtnView(vm: btnVM, id: rightBtnID)
.padding(EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 24))
.opacity(tailLogo ? 0 : 1)
}
.background {
@ -46,31 +46,49 @@ struct TopView: View {
.ignoresSafeArea(edges: .top)
}
.frame(maxWidth: .infinity)
.onAppear {
btnVM.btnStates[leftBtnID] = ButtonState()
btnVM.btnStates[rightBtnID] = ButtonState()
}
}
btnVM.setSize(for: leftBtnID, newWidth: 40, newHeight: 40)
btnVM.setSize(for: rightBtnID, newWidth: 40, newHeight: 40)
struct TypeIcon: View {
var myType: UserType
var body: some View {
if self.myType == .Student {
SimpleBtnView(title: nil, image: Image(.Icon.face), font: nil, width: 40, height: 40, isUsable: false) {
}
btnVM.setImage(for: leftBtnID, newImage: Image(.Icon.face))
} else {
SimpleBtnView(title: "\(self.myType.rawValue)", image: Image(.Icon.face),
font: .nps(font: .bold, size: 24), width: 40, height: 40, isUsable: false) {
btnVM.setText(for: leftBtnID,
newText: "\(myType.rawValue)",
newFont: .nps(font: .bold, size: 24))
}
btnVM.setImage(for: rightBtnID, newImage: Image(.Icon.notificationSET))
}
}.background {
Circle()
.strokeBorder(Color(.Second.normal) ,lineWidth: 4)
.frame(width: 40, height: 40)
}
}
}
}
#Preview {
TopView(titleName: "Name")
}
//struct TypeIcon: View {
// var myType: UserType
//
// var body: some View {
// if self.myType == .Student {
// SimpleBtnView(image: Image(.Icon.face), title: nil, font: nil, width: 40, height: 40)
// } else {
// SimpleBtnView(image: nil, title: "\(self.myType.rawValue)", font: .nps(font: .bold, size: 24), width: 40, height: 40)
// .doAction {
// printLog("CHECK!!!")
// }
// .setTextColor(.red)
// .setIsUsable(false)
// }
// }
//}
//#Preview {
// TopView(titleName: "Name")
//}

View File

@ -0,0 +1,31 @@
//
// ButtonState.swift
// AcaMate
//
// Created by TAnine on 2/6/25.
//
import SwiftUI
struct ButtonState {
var image: Image? = nil
var title: String? = nil
var font: Font? = nil
var width: CGFloat = 0
var height: CGFloat = 0
var action: VOID_TO_VOID? = nil
var textColor: Color = .Text.detail
var isUsable: Bool = true
// -- CircleBtn -- //
var isSelected: Bool = false
var isReverse: Bool = false
var backColor: Color = .Normal.normal
var foreColor: Color = .Disable.normal
}

View File

@ -0,0 +1,16 @@
//
// Page Type.swift
// AcaMate
//
// Created by TAnine on 2/6/25.
//
import Foundation
enum PageType: Int{
case Home = 0
case Management
case Chatting
case Calendar
case Etc
}

View File

@ -12,6 +12,7 @@ class AppViewModel: ObservableObject {
@Published var isLoading: Bool = false
@Published var showAlert: Bool = false
var alertData: AlertData = .init(body: "")
let alertAction = CurrentValueSubject<String?, Never>(nil)

View File

@ -0,0 +1,98 @@
//
// ButtonViewModel.swift
// AcaMate
//
// Created by TAnine on 2/6/25.
//
import SwiftUI
import Combine
class ButtonViewModel: ObservableObject {
@Published var btnStates: [UUID: ButtonState] = [:]
func setImage(for id: UUID, newImage: Image){
var state = btnStates[id] ?? ButtonState()
state.image = newImage
btnStates[id] = state
objectWillChange.send()
}
func setText(for id: UUID, newText: String?, newFont: Font?) {
var state = btnStates[id] ?? ButtonState()
state.title = newText
state.font = newFont
btnStates[id] = state
objectWillChange.send()
}
func setSize(for id: UUID, newWidth: CGFloat?, newHeight: CGFloat?){
var state = btnStates[id] ?? ButtonState()
state.width = newWidth ?? 0
state.height = newHeight ?? 0
btnStates[id] = state
objectWillChange.send()
}
func setAction(for id: UUID, newAction: @escaping VOID_TO_VOID) {
var state = btnStates[id] ?? ButtonState()
state.action = newAction
btnStates[id] = state
objectWillChange.send()
}
func setTextColor(for id: UUID, newColor: Color) {
var state = btnStates[id] ?? ButtonState()
state.textColor = newColor
btnStates[id] = state
objectWillChange.send()
}
func setIsUsable(for id: UUID, newValue: Bool) {
var state = btnStates[id] ?? ButtonState()
state.isUsable = newValue
btnStates[id] = state
objectWillChange.send()
}
// -- CircleBtn -- //
func setIsSelected(for id: UUID, newValue: Bool){
var state = btnStates[id] ?? ButtonState()
state.isSelected = newValue
state.foreColor = newValue ? Color(.Second.normal) : Color(.Disable.normal)
btnStates[id] = state
objectWillChange.send()
}
func setIsReverse(for id: UUID, newValue: Bool){
var state = btnStates[id] ?? ButtonState()
state.isReverse = newValue
state.backColor = newValue ? Color(.Second.light) : Color(.Normal.normal)
btnStates[id] = state
objectWillChange.send()
}
// func setBackColor(for id: UUID, newColor: Color) {
// var state = btnStates[id] ?? ButtonState()
//
// state.backColor = newColor
//
// btnStates[id] = state
// objectWillChange.send()
// }
// func setForeColor(for id: UUID, newColor: Color) {
// var state = btnStates[id] ?? ButtonState()
//
// state.foreColor = newColor
//
// btnStates[id] = state
// objectWillChange.send()
// }
}

View File

@ -104,4 +104,16 @@ extension View {
.mask(shape.fill(LinearGradient(gradient: Gradient(colors: [.black, .clear]), startPoint: .topLeading, endPoint: .bottomTrailing)))
}
}
@ViewBuilder
func switchButtonStyle(_ animate: Bool) -> some View {
if animate {
self.buttonStyle(DefaultButtonStyle())
} else {
self.buttonStyle(PlainButtonStyle())
// .allowsHitTesting(false)
}
}
}
//extension BUtton

View File

@ -1,9 +0,0 @@
{
"info" : {
"author" : "xcode",
"version" : 1
},
"properties" : {
"provides-namespace" : true
}
}