[Design] Tabbar configuration - #2

Whidy-iOS/Assets.xcassets/scrapActive.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "scrapActive.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Whidy-iOS/Assets.xcassets/scrapInActive.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "scrapInActive.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Whidy-iOS/Assets.xcassets/tabMapActive.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "tabMapActive.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Whidy-iOS/Assets.xcassets/tabMapInActive.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "tabMapInActive.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "[email protected]",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Whidy-iOS/Core/Extension/View+Extension.swift

@@ -18,7 +18,7 @@ extension View {
     }
 
     // Output용
-    func normalTextFieldModifier(height: CGFloat, fontSize:CGFloat = 16, weight:Font.Weight = .regular, fontColor:UInt = ColorSystem.black.rawValue, bgColorHex: UInt = ColorSystem.whitee4ebf1.rawValue, alignment : TextAlignment = .leading) -> some View {
+    func normalTextFieldModifier(height: CGFloat, fontSize:CGFloat = 16, weight:Font.Weight = .regular, fontColor:UInt = ColorSystem.black.rawValue, bgColorHex: UInt = ColorSystem.tabbarUnactive.rawValue, alignment : TextAlignment = .leading) -> some View {
         modifier(NormalTextFieldModifier(height: height, fontSize: fontSize, weight: weight, fontColor: fontColor, bgColorHex: bgColorHex, alignment: alignment))
     }
 
@@ -34,7 +34,7 @@ extension View {
         modifier(NormalTextLabelModifier2(fontSize: fontSize, width: width, height: height, alignment: alignment, bgColor: bgColor))
     }
 
-    func shadowModifier(cornerRadius : CGFloat = 15, bgColor : UInt = ColorSystem.whitee4ebf1.rawValue, radius:CGFloat = 2, x:CGFloat = 7, y:CGFloat = 7) -> some View {
+    func shadowModifier(cornerRadius : CGFloat = 15, bgColor : UInt = ColorSystem.tabbarUnactive.rawValue, radius:CGFloat = 2, x:CGFloat = 7, y:CGFloat = 7) -> some View {
         modifier(ShadowModifier(cornerRadius:cornerRadius, bgColor: bgColor, radius: radius, x: x, y: y))
     }
 

Whidy-iOS/Core/ViewModifier/NormalTextLabelModifier.swift

@@ -14,12 +14,12 @@ struct NormalTextLabelModifier : ViewModifier {
 
     func body(content: Content) -> some View {
         content
-            .fontModifier(fontSize: fontSize, weight: .semibold, color: ColorSystem.gray6e7f8d.rawValue)
+            .fontModifier(fontSize: fontSize, weight: .semibold, color: ColorSystem.tabbarUnactive.rawValue)
             .padding()
             .frame(maxWidth: .infinity, maxHeight: height)
             .background {
                 RoundedRectangle(cornerRadius: 4)
-                    .foregroundColor(Color(hex: ColorSystem.whitee4ebf1.rawValue))
+                    .foregroundColor(Color(hex: ColorSystem.tabbarUnactive.rawValue))
                     .frame(maxWidth: .infinity, maxHeight: height)
             }
     }

Whidy-iOS/Core/ViewModifier/NormalTextLabelModifier2.swift

@@ -16,7 +16,7 @@ struct NormalTextLabelModifier2: ViewModifier {
 
     func body(content: Content) -> some View {
         content
-            .foregroundStyle(Color(hex: ColorSystem.gray6e7f8d.rawValue))
+            .foregroundStyle(Color(hex: ColorSystem.tabbarUnactive.rawValue))
             .font(.system(size: fontSize, weight: .bold))
             .background(Color(hex: bgColor))
             .frame(width: width, height: height, alignment: alignment)

Whidy-iOS/Core/ViewModifier/ShadowModifier.swift

@@ -19,6 +19,6 @@ struct ShadowModifier : ViewModifier {
         content
             .background(Color(hex: bgColor))
             .cornerRadius(cornerRadius)
-            .shadow(color: Color(hex: ColorSystem.gray6e7f8d.rawValue).opacity(0.3), radius: radius, x: x, y: y)
+            .shadow(color: Color(hex: ColorSystem.tabbarUnactive.rawValue).opacity(0.3), radius: radius, x: x, y: y)
     }
 }

Whidy-iOS/Presentation/Common/CustomTabBar.swift

@@ -0,0 +1,56 @@
+//
+//  CustomTabBar.swift
+//  Whidy-iOS
+//
+//  Created by JinwooLee on 1/18/25.
+//
+
+import SwiftUI
+
+struct CustomTabBar: View {
+    @Binding var selectedTab: MainCoordinator.Tab
+
+    var body : some View {
+        HStack(alignment: .center) {
+            Button {
+                selectedTab = .studyMap
+            } label: {
+                VStack(spacing:8) {
+                    //FIXME: - 이미지 추가되면 수정
+                    ///Image(selectedTab == .calendar ? "calendarSelected" : "calendarUnSelected")
+                    ///
+                    Text("지도")
+                        .fontModifier(fontSize: 10, weight: .bold, color: selectedTab == .studyMap ? ColorSystem.tabbarActive.rawValue : ColorSystem.tabbarUnactive.rawValue)
+                }
+                .offset(x:-5)
+            }
+
+            Button {
+                selectedTab = .scrap
+            } label: {
+                VStack(spacing:8) {
+                    //FIXME: - 이미지 추가되면 수정
+                    ///Image(selectedTab == .calendar ? "calendarSelected" : "calendarUnSelected")
+                    ///
+                    Text("스크랩")
+                        .fontModifier(fontSize: 10, weight: .bold, color: selectedTab == .scrap ? ColorSystem.tabbarActive.rawValue : ColorSystem.tabbarUnactive.rawValue)
+                }
+            }
+
+
+            Button {
+                selectedTab = .myPage
+            } label: {
+                VStack(spacing:8) {
+                    //FIXME: - 이미지 추가되면 수정
+                    ///Image(selectedTab == .calendar ? "calendarSelected" : "calendarUnSelected")
+                    ///
+                    Text("마이페이지")
+                        .fontModifier(fontSize: 10, weight: .bold, color: selectedTab == .myPage ? ColorSystem.tabbarActive.rawValue : ColorSystem.tabbarUnactive.rawValue)
+                }
+            }
+        }
+        .frame(width: UIScreen.main.bounds.width, height: 30)
+        .background(.red)
+    }
+}

Whidy-iOS/Presentation/Main/Coordinator/MainCoordinatorView.swift

@@ -17,25 +17,22 @@ struct MainCoordinatorView: View {
                 TabView(selection: $store.selectedTab.sending(\.tabSelected)) {
                     StudyMapCoordinatorView(store: store.scope(state: \.studyMap, action: \.studyMap))
                         .tabItem {
-//                            Image(store.selectedTab == .home ? .homeTabActive : .homeTabInActive)
+                            Image(store.selectedTab == .studyMap ? .tabMapActive : .tabMapInActive)
                             Text("지도")
-                                .tabItemFont()
                         }
                         .tag(MainCoordinator.Tab.studyMap)
 
                     ScrapCoordinatorView(store: store.scope(state: \.scrap, action: \.scrap))
                         .tabItem {
-//                            Image(store.selectedTab == .home ? .homeTabActive : .homeTabInActive)
+                            Image(store.selectedTab == .scrap ? .scrapActive : .scrapInActive)
                             Text("스크랩")
-                                .tabItemFont()
                         }
                         .tag(MainCoordinator.Tab.scrap)
 
                     MyPageCoordinatorView(store: store.scope(state: \.myPage, action: \.myPage))
                         .tabItem {
 //                            Image(store.selectedTab == .home ? .homeTabActive : .homeTabInActive)
                             Text("마이")
-                                .tabItemFont()
                         }
                         .tag(MainCoordinator.Tab.myPage)
                 }

Whidy-iOS/Resources/Color.swift

@@ -11,54 +11,8 @@ enum ColorSystem: UInt {
     case black = 0xFF000000
     case white = 0xFFFFFFFF
 
-    case black000000 = 0x000000
-    case black222222 = 0x222222
-    case black333333 = 0x333333
-    case black384255 = 0x384255
-
-    case gray97999e = 0x97999e
-    case graycccccc = 0xcccccc
-    case graye3e5ec = 0xE3E5EC
-    case grayd8d8d8 = 0xD8D8D8
-    case gray999999 = 0x999999
-    case gray555555 = 0x555555
-    case graye8e8e8 = 0xE8E8E8
-    case gray1e2834 = 0x1E2834
-    case gray6e7f8d = 0x6E7F8D // textUnPointColor
-
-    case whiteffffff = 0xFFFFFF
-    case whitebcc1c6 = 0xBCC1C6
-    case white46ffffff = 0x46FFFFFF
-    case whiteeff2f5 = 0xEFF2F5
-    case whitee4ebf1 = 0xE4EBF1 //textInputBackground
-    case whiteeeeeee = 0xEEEEEE
-
-    case redff7f00 = 0xFF7F00
-    case redff0000 = 0xFF0000
-    case rede31c25 = 0xE31C25
-
-    case orangefa0 = 0xFA0
-    case orangee58903 = 0xE58903
-
-    case yellowfee500 = 0xFEE500
-    case yellowffbd03 = 0xFFBD03
-    case yellowe7d532 = 0xE7D532
-    case yellowe4d232 = 0xE4D232
-    case yellowffa200 = 0xFFA200
-
-    case green4ac687 = 0x4AC687
-    case green7abd87 = 0x7ABD87
-    case green668d4e = 0x668D4E
-    case green5ea504 = 0x5EA504 // pointColor
-    case green04be74 = 0x04BE74
-    case green00c73c = 0x00C73C
-    case green00a461 = 0x00A461
-
-    case blue4e93f3 = 0x4E93F3
-    case blue0a1624 = 0x0A1624
-    case blue049cbe = 0x049CBE
-    case blue073b4c = 0x073B4C
-    case blue16B2B6 = 0x16B2B6
+    case tabbarActive = 0x373737
+    case tabbarUnactive = 0x8A8A8A
 
     var uIntToString: String {
         return String(format: "%06X", self.rawValue)

Whidy-iOS/Whidy_iOSApp.swift

@@ -15,6 +15,11 @@ struct Whidy_iOSApp: App {
 
     init() {
         Logger.configurations()
+
+        /// Tabbar Configuration
+        UITabBar.appearance().backgroundColor = UIColor.white
+        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.font: UIFont.systemFont(ofSize: 12)], for: .normal)
+        UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.font: UIFont.systemFont(ofSize: 12)], for: .selected)
     }
 
     var body: some Scene {