🔀::MainMissionView UI 작성

App/Resources/Colors/Medal.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

App/Resources/Colors/Medal.xcassets/FirstPlace.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x9B",
+          "green" : "0xD7",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x9B",
+          "green" : "0xD7",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

App/Resources/Colors/Medal.xcassets/SecondPlace.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xD9",
+          "green" : "0xD9",
+          "red" : "0xD9"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xD9",
+          "green" : "0xD9",
+          "red" : "0xD9"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

App/Resources/Colors/Medal.xcassets/ThirdPlace.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x5D",
+          "green" : "0x86",
+          "red" : "0xCE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x5D",
+          "green" : "0x86",
+          "red" : "0xCE"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

App/Resources/Images/Banner.xcassets/BannerImage_1.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "banner1.png",
+      "filename" : "SKBanner.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "banner1 1.png",
+      "filename" : "SKBanner 1.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "banner1 2.png",
+      "filename" : "SKBanner 2.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

App/Resources/Images/Banner.xcassets/BannerImage_2.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "banner22.png",
+      "filename" : "SKBanner2.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "banner22 1.png",
+      "filename" : "SKBanner2 1.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "banner22 2.png",
+      "filename" : "SKBanner2 2.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

App/Resources/Images/Banner.xcassets/BannerImage_3.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "banner3.png",
+      "filename" : "SKBanner3.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "banner3 1.png",
+      "filename" : "SKBanner3 1.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "banner3 2.png",
+      "filename" : "SKBanner3 2.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

App/Sources/DesignSystem/Color/Color+sk.swift

@@ -4,12 +4,14 @@ public extension Color {
     enum SKColorSystem {
         case main(Main)
         case gray(Gray)
+        case medal(Medal)
     }
 
     static func sk(_ style: SKColorSystem) -> Color {
         switch style {
         case let .main(colorable as SKColorable),
-             let .gray(colorable as SKColorable):
+            let .gray(colorable as SKColorable),
+            let .medal(colorable as SKColorable):
             return colorable.color
         }
     }

App/Sources/DesignSystem/Color/SKColorSystem+Medal.swift

@@ -0,0 +1,20 @@
+import SwiftUI
+
+public extension Color.SKColorSystem {
+    // swiftlint:disable identifier_name
+    enum Medal: SKColorable {
+        case firstplace
+        case secondplace
+        case thirdplace
+    }
+}
+
+public extension Color.SKColorSystem.Medal {
+    var color: Color {
+        switch self {
+        case .firstplace: return StackKnowledgeAsset.Medal.firstPlace.swiftUIColor
+        case .secondplace: return StackKnowledgeAsset.Medal.secondPlace.swiftUIColor
+        case .thirdplace: return StackKnowledgeAsset.Medal.thirdPlace.swiftUIColor
+        }
+    }
+}

App/Sources/DesignSystem/Extensions/View/LogoNavigationBar.swift

@@ -0,0 +1,45 @@
+import SwiftUI
+
+struct LogoNavigationBarModifier: ViewModifier {
+
+    var logo: Image = Image(asset: StackKnowledgeAsset.Logo.logoIcon)
+    var title: String = "Stack Knowledge"
+
+    func body(content: Content) -> some View {
+        content
+            .navigationBarBackButtonHidden(true)
+            .toolbar {
+                ToolbarItemGroup(placement: .navigationBarLeading) {
+                    HStack {
+                        logo
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .frame(width: 20, height: 20)
+
+                        Spacer()
+                            .frame(width: 10)
+
+                        Text(title)
+                            .skFont(.r18)
+                    }
+                }
+                ToolbarItem(placement: .navigationBarTrailing) {
+                    Button(action: {
+                        // logout 동작 필요.
+                    }) {
+                        Image(asset: StackKnowledgeAsset.Logout.logoutIcon)
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .frame(width: 24, height: 24)
+                            .foregroundColor(.primary)
+                    }
+                }
+            }
+    }
+}
+
+public extension View {
+    func logoNavigationBar() -> some View {
+        self.modifier(LogoNavigationBarModifier())
+    }
+}

App/Sources/DesignSystem/Extensions/View/MainMissionScrollView.swift

@@ -0,0 +1,46 @@
+import SwiftUI
+
+struct MainMissionScrollView: View {
+    let title: String = "미소쌤"
+    let subtitle: String = "북학파의북학파의북학파의북학파의북학파의북학파의"
+    let price: String = "1000 M"
+
+    var body: some View {
+        VStack {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 16) {
+                    ForEach(1..<7) {_ in
+                        VStack {
+                            Text(title)
+                                .skFont(.pm14)
+                                .multilineTextAlignment(.center)
+                                .padding(.top, 16)
+
+                            Text(subtitle)
+                                .skFont(.pr12)
+                                .multilineTextAlignment(.center)
+                                .lineLimit(3)
+                                .padding(.top, 16)
+                                .padding(.horizontal, 16)
+
+                            Spacer()
+
+                            Text(price)
+                                .skFont(.pm16)
+                                .multilineTextAlignment(.center)
+                                .padding(.bottom, 24)
+                        }
+                        .background(Color.white)
+                        .frame(width: 117, height: 158)
+                        .cornerRadius(10)
+                    }
+                }
+
+            }
+            .padding(.vertical, 16)
+            .padding(.horizontal, 15.44)
+            .background(Color.SKColorSystem.Gray.lightgray1.color)
+            .cornerRadius(20)
+        }
+    }
+}

App/Sources/DesignSystem/Extensions/View/MainRankingView.swift

@@ -0,0 +1,73 @@
+import SwiftUI
+
+struct MainRankingView: View {
+    let profileName: String = "안강호"
+    let ownPoint: String = "1000 M"
+
+    var body: some View {
+        VStack {
+            ScrollView(.horizontal, showsIndicators: false) {
+                HStack(spacing: 15.44) {
+                    ForEach(1..<4) { i in
+                        ZStack(alignment: .topLeading) {
+                            VStack {
+                                Image(.bannerImage3)
+                                    .resizable()
+                                    .aspectRatio(contentMode: .fill)
+                                    .frame(width: 60, height: 60)
+                                    .clipShape(Circle())
+                                    .clipped()
+
+                                Text(profileName)
+                                    .skFont(.pm14)
+                                    .lineLimit(nil)
+                                    .fixedSize(horizontal: false, vertical: true)
+
+                                Spacer().frame(height: 16)
+
+                                Text(ownPoint)
+                                    .skFont(.pm16)
+                            }
+                            .padding(.init(top: 18, leading: 25, bottom: 18, trailing: 25))
+                            .background(Color.white)
+                            .frame(height: 158)
+                            .cornerRadius(10)
+
+                            if i == 1 {
+                                Circle()
+                                    .frame(width: 20, height: 20)
+                                    .foregroundColor(Color.SKColorSystem.Medal.firstplace.color)
+                                    .overlay(
+                                        Text("1")
+                                            .skFont(.pm14)
+                                    )
+                            }
+                            else if i == 2 {
+                                Circle()
+                                    .frame(width: 20, height: 20)
+                                    .foregroundColor(Color.SKColorSystem.Medal.secondplace.color)
+                                    .overlay(
+                                        Text("2")
+                                            .skFont(.pm14)
+                                    )
+                            }
+                            else if i == 3 {
+                                Circle()
+                                    .frame(width: 20, height: 20)
+                                    .foregroundColor(Color.SKColorSystem.Medal.thirdplace.color)
+                                    .overlay(
+                                        Text("3")
+                                            .skFont(.pm14)
+                                    )
+                            }
+                        }
+                    }
+                }
+            }
+            .padding(.vertical, 16)
+            .padding(.horizontal, 15.44)
+            .background(Color.SKColorSystem.Gray.lightgray1.color)
+            .cornerRadius(20)
+        }
+    }
+}