로그인 화면에 Figma 디자인을 적용한다

Application/App/Project.swift

@@ -20,6 +20,7 @@ let project = Project(
             sources: ["Sources/**/*.swift"],
             resources: [
                 "Sources/Resource/Assets.xcassets",
+                "../Presentation/PresentationShared/Resources/Assets.xcassets",
                 "Sources/Resource/GoogleService-Info.plist",
                 "Sources/Resource/Localizable.xcstrings",
             ],

Application/App/Sources/Resource/Localizable.xcstrings

@@ -641,6 +641,40 @@
         }
       }
     },
+    "login_intro_description" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "needs_review",
+            "value" : "Set goals and manage implementation records and todos in one place."
+          }
+        },
+        "ko" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "목표를 세우고 구현 기록과 Todo를 한곳에서 관리하세요."
+          }
+        }
+      }
+    },
+    "login_intro_title" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Document Your Development Journey"
+          }
+        },
+        "ko" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "개발 과정을 기록하세요"
+          }
+        }
+      }
+    },
     "login_terms_notice" : {
       "extractionState" : "manual",
       "localizations" : {
@@ -1644,104 +1678,104 @@
         }
       }
     },
-    "search_instruction" : {
+    "search_hash_guide_message" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Enter a search term to find your saved content."
+            "value" : "Type like #123 to find that Todo directly."
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "검색어를 입력해 저장한 앱 컨텐츠를 찾아보세요."
+            "value" : "#123처럼 입력하면 해당 Todo를 바로 찾을 수 있습니다."
           }
         }
       }
     },
-    "search_prompt" : {
+    "search_hash_guide_title" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Search (e.g. #123)"
+            "value" : "Enter a Todo number"
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "검색 (예: #123)"
+            "value" : "Todo 번호를 입력해주세요"
           }
         }
       }
     },
-    "search_recent" : {
+    "search_instruction" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Recent Searches"
+            "value" : "Enter a search term to find your saved content."
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "최근 검색"
+            "value" : "검색어를 입력해 저장한 앱 컨텐츠를 찾아보세요."
           }
         }
       }
     },
-    "search_show_more" : {
+    "search_prompt" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Show More"
+            "value" : "Search (e.g. #123)"
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "더보기"
+            "value" : "검색 (예: #123)"
           }
         }
       }
     },
-    "search_hash_guide_message" : {
+    "search_recent" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Type like #123 to find that Todo directly."
+            "value" : "Recent Searches"
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "#123처럼 입력하면 해당 Todo를 바로 찾을 수 있습니다."
+            "value" : "최근 검색"
           }
         }
       }
     },
-    "search_hash_guide_title" : {
+    "search_show_more" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Enter a Todo number"
+            "value" : "Show More"
           }
         },
         "ko" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Todo 번호를 입력해주세요"
+            "value" : "더보기"
           }
         }
       }
@@ -3619,4 +3653,4 @@
     }
   },
   "version" : "1.0"
-}
+}

Application/Presentation/Entry/Sources/Common/Component/LoginButton.swift

@@ -8,9 +8,9 @@
 import SwiftUI
 
 struct LoginButton: View {
-    @State private var logo: Image?
-    @State private var text = ""
     @ScaledMetric(relativeTo: .body) private var height = CGFloat(22)
+    private var logo: Image?
+    private var text = ""
     private let showsProgressView: Bool
     private let action: () -> Void
 
@@ -20,8 +20,8 @@ struct LoginButton: View {
         showsProgressView: Bool = false,
         action: @escaping () -> Void = {}
     ) {
-        self._logo = State(initialValue: logo)
-        self._text = State(initialValue: text)
+        self.logo = logo
+        self.text = text
         self.showsProgressView = showsProgressView
         self.action = action
     }
@@ -30,28 +30,30 @@ struct LoginButton: View {
         Button {
             action()
         } label: {
-            ZStack {
-                Text(text)
-                    .opacity(showsProgressView ? 0 : 1)
+            Group {
                 if showsProgressView {
                     ProgressView()
+                        .tint(Color(asset: .accentColor))
+                } else {
+                    Text(text)
+                        .foregroundStyle(Color(asset: .textPrimary))
                 }
             }
-            .foregroundStyle(Color.primary)
             .font(.system(.body))
-            .contentShape(.capsule)
-            .frame(width: 300, height: height + 16)
-            .overlay {
-                ZStack(alignment: .leading) {
-                    Capsule()
-                        .stroke(Color.gray, lineWidth: 1)
-                    if let logo, !showsProgressView {
-                        logo
-                            .resizable()
-                            .scaledToFit()
-                            .frame(width: height, height: height)
-                            .padding(.leading)
-                    }
+            .contentShape(.rect(cornerRadius: 12))
+            .frame(width: 300, height: height + 24)
+            .background {
+                RoundedRectangle(cornerRadius: 12)
+                    .stroke(Color(asset: .border), lineWidth: 3)
+                    .fill(Color(asset: .surface))
+            }
+            .overlay(alignment: .leading) {
+                if let logo, !showsProgressView {
+                    logo
+                        .resizable()
+                        .scaledToFit()
+                        .frame(width: height, height: height)
+                        .padding(.leading)
                 }
             }
         }

Application/Presentation/Entry/Sources/Login/LoginView.swift

@@ -26,27 +26,41 @@ struct LoginView: View {
     var body: some View {
         VStack {
             Spacer()
-            Image("Primary")
+            Spacer()
+            Image("Primary", bundle: PresentationResources.bundle)
                 .resizable()
                 .scaledToFit()
-                .frame(width: sceneWidth / 5)
+                .frame(width: sceneWidth / 4)
             Spacer()
+
+            VStack(spacing: 24) {
+                Text(String(localized: "login_intro_title"))
+                    .font(.title)
+                    .fontWeight(.heavy)
+                    .multilineTextAlignment(.center)
+                Text(String(localized: "login_intro_description"))
+                    .padding(.horizontal)
+                    .foregroundStyle(Color(asset: .textTertiary))
+                    .multilineTextAlignment(.center)
+            }
+            Spacer()
+
             VStack(spacing: 20) {
                 signInButton(
                     provider: .google,
-                    logo: Image("Google"),
+                    logo: Image("Google", bundle: PresentationResources.bundle),
                     text: String(localized: "login_google_sign_in")
                 )
 
                 signInButton(
                     provider: .github,
-                    logo: Image("Github"),
+                    logo: Image("Github", bundle: PresentationResources.bundle),
                     text: String(localized: "login_github_sign_in")
                 )
 
                 signInButton(
                     provider: .apple,
-                    logo: Image("Apple"),
+                    logo: Image("Apple", bundle: PresentationResources.bundle),
                     text: String(localized: "login_apple_sign_in")
                 )
             }

Application/Presentation/Entry/Sources/Root/RootView.swift

@@ -33,7 +33,7 @@ public struct RootView: View {
 
     public var body: some View {
         ZStack {
-            Color(UIColor.systemGroupedBackground).ignoresSafeArea()
+            Color(asset: .appBackground).ignoresSafeArea()
             if let signIn = store.signIn {
                 if signIn {
                     MainView(

Application/Presentation/PresentationShared/Resources/Assets.xcassets/AccentColor.colorset/Contents.json

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

Application/Presentation/PresentationShared/Resources/Assets.xcassets/AppBackground.colorset/Contents.json

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