CustomTabView

import SwiftUI


enum Tab: CaseIterable {
    case one, two, three, four
    
    var title: String {
        switch self {
        case .one:
            return "1번"
        case .two:
            return "2번"
        case .three:
            return "3번"
        case .four:
            return "4번"
        }
    }
    
    var selectImage: UIImage {
        switch self {
        case .one:
            return UIImage(systemName: "1.square.fill")!
        case .two:
            return UIImage(systemName: "2.square.fill")!
        case .three:
            return UIImage(systemName: "3.square.fill")!
        case .four:
            return UIImage(systemName: "4.square.fill")!
        }
    }
    
    var deSelectImage: UIImage {
        switch self {
        case .one:
            return UIImage(systemName: "1.square")!
        case .two:
            return UIImage(systemName: "2.square")!
        case .three:
            return UIImage(systemName: "3.square")!
        case .four:
            return UIImage(systemName: "4.square")!
        }
    }
    
    var childView: AnyView {
        switch self {
        case .one:
            return AnyView(VStack {
                Spacer()
                Text("test1")
                Spacer()
            })
        case .two:
            return AnyView(VStack {
                Spacer()
                Text("test2")
                Spacer()
            })
        case .three:
            return AnyView(VStack {
                Spacer()
                Text("test3")
                Spacer()
            })
        case .four:
            return AnyView(VStack {
                Spacer()
                Text("test4")
                Spacer()
            })
        }
    }
    
    var selectColor: Color {
        switch self {
        default:
            return .red
        }
    }
    
    var deSelectColor: Color {
        switch self {
        default:
            return .gray
        }
    }
}

struct CustomTabView: View {
    @Binding var tabIdx: Tab
    
    var body: some View {
        HStack {
            Group {
                Spacer()
                
                ForEach(Tab.allCases, id: \.self) { tab in
                    
                    Button (action: {
                        tabIdx = tab
                    }) {
                        VStack{
                            Image(uiImage: tabIdx == tab ? tab.selectImage: tab.deSelectImage)
                            Text(tab.title)

                        }
                        .frame(minWidth: 70)
                    }
                    .foregroundColor(tabIdx == tab ? tab.selectColor : tab.deSelectColor)

                    Spacer()
                }
            }
        }
        .padding(.bottom, 14)
        .padding(.top, 11)
        .background(
            RoundedCorner(radius: 20, corners: [.topLeft, .topRight])
                .foregroundColor(.white)
        )
        .clipped()
        .shadow(color: .black.opacity(0.15), radius: 8, x: 0, y: 0)
    }
}

struct TestTebView: View {
    
    @State var tabIdx: Tab = Tab.allCases[0]
    
    var body: some View {
        VStack(spacing: 0) {
            Spacer()
            Group {
                VStack {
                    tabIdx.childView
                }
            }
            .padding(.bottom, -20)
            CustomTabView(tabIdx: self.$tabIdx)
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
}

struct TestTebView_Previews: PreviewProvider {
    static var previews: some View {
        TestTebView()
    }
}