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

AcaMate/1. View/11. Intro & Login/LoginView.swift

@@ -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)

AcaMate/1. View/12. Main/121. Button/CircleBtnView.swift

@@ -10,45 +10,46 @@ 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 {
-        Button{
-            guard let action = action else {return}
-            action()
-        } label: {
-            VStack(alignment: .center, spacing: 0) {
-                self.image
-                    .resizable()
-                    .renderingMode(.template)
-                    .foregroundStyle(self.foreColor)
-                    .frame(width: 24, height: 24)
-                if let title = self.title {
-                    Text("\(title)")
-                        .font(.nps(font: .bold, size: 6))
-                        .foregroundStyle(self.foreColor)
+        if let state = vm.btnStates[id] {
+            Button{
+                guard let action = state.action else {return}
+                action()
+            } label: {
+                VStack(alignment: .center, spacing: 0) {
+                    if let image = state.image {
+                        image
+                            .resizable()
+                            .renderingMode(.template)
+                            .foregroundStyle(state.foreColor)
+                            .frame(width: state.width/2, height: state.height/2)
+                    }
+//                        
+                    if let title = state.title, let font = state.font {
+                        Text("\(title)")
+                            .font(font)
+                            .lineLimit(1)
+                            .minimumScaleFactor(0.5)
+                            .truncationMode(.tail)
+                            .foregroundStyle(state.textColor)
+//                            .padding()
+                    }
                 }
-            }
-            .padding()
-            .background {
-                if isReverse {
-                    Circle()
-                        .accentColor(self.backColor)
-                        .frame(width: 48, height: 48)
-                        .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)
-                        .shadow(color: Color(.Text.black).opacity(0.75), radius: 8, x: 4, y: 8)
+                .background {
+                    if state.isReverse {
+                        Circle()
+                            .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(state.backColor)
+                            .frame(width: state.width, height: state.height)
+                            .shadow(color: Color(.Text.black).opacity(0.75), radius: 8, x: 4, y: 8)
+                    }
                 }
             }
         }

AcaMate/1. View/12. Main/121. Button/SimpleBtnView.swift

@@ -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 {
-                image
-                    .resizable()
-                    .frame(width: width, height: height)
+            else {
+                Button{
+                    guard let action = state.action else { return }
+                    action()
+                } label: {
+                    if let image = state.image {
+                        image
+                            .resizable()
+                            .frame(width: state.width, height: state.height)
+                    }
+                }
+                .disabled(!state.isUsable)
             }
+        } else {
+            EmptyView()
         }
-        .disabled(isUsable)
     }
 }
-
-#Preview {
-    SimpleBtnView(title: "체크 합니다", image: Image(.BottomBar.home),
-                  font: .nps(font: .bold, size: 12),
-                  width: 40, height: 40,
-                  action: nil)
-}

AcaMate/1. View/12. Main/122. DashBoard/TopProfileView.swift

@@ -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)
         }

AcaMate/1. View/12. Main/BottomView.swift

@@ -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()
-            })
-            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)
+        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)
+                }
+                
+            }
         }
-        .padding([.top],12)
+        // 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()
 }

AcaMate/1. View/12. Main/TopView.swift

@@ -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))
+                .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)
-            {
-                
-            }
-            .padding(EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 24))
-            .opacity(tailLogo ? 0 : 1)
+            SimpleBtnView(vm: btnVM, id: rightBtnID)
+                .padding(EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 24))
             
         }
         .background {
@@ -46,31 +46,49 @@ struct TopView: View {
                 .ignoresSafeArea(edges: .top)
         }
         .frame(maxWidth: .infinity)
+        .onAppear {
+            btnVM.btnStates[leftBtnID] = ButtonState()
+            btnVM.btnStates[rightBtnID] = ButtonState()
             
-    }
-}
-
-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.setSize(for: leftBtnID, newWidth: 40, newHeight: 40)
+            btnVM.setSize(for: rightBtnID, newWidth: 40, newHeight: 40)
             
+            if self.myType == .Student {
+                btnVM.setImage(for: leftBtnID, newImage: Image(.Icon.face))
+            } else {
+                btnVM.setText(for: leftBtnID,
+                              newText: "\(myType.rawValue)",
+                              newFont: .nps(font: .bold, size: 24))
             }
-        } else {
-            SimpleBtnView(title: "\(self.myType.rawValue)", image: Image(.Icon.face),
-                          font: .nps(font: .bold, size: 24), width: 40, height: 40, isUsable: false) {
-                
-            }.background {
-                Circle()
-                    .strokeBorder(Color(.Second.normal) ,lineWidth: 4)
-                    .frame(width: 40, height: 40)
-            }
+            btnVM.setImage(for: rightBtnID, newImage: Image(.Icon.notificationSET))
         }
+        
     }
 }
 
-#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")
+//}

AcaMate/2. Model/Button State.swift

@@ -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
+}

AcaMate/2. Model/Page Type.swift

@@ -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
+}

AcaMate/3. ViewModel/AppViewModel.swift

@@ -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)

AcaMate/3. ViewModel/ButtonViewModel.swift

@@ -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()
+//    }
+}

AcaMate/5. Modifier/View.swift

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

AcaMate/6. Resources/Assets.xcassets/Image Folder/BottomBar/Contents.json

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