RINGO-59 Design: 로그인 ui 구현 완료

iphone 14 기준 구현 완료
#7

iOS/Ringo/Ringo.xcodeproj/xcuserdata/jinhyuk.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Bucket
+   uuid = "ED0741B5-CBCC-4305-B0D2-4BFBE78C9B22"
+   type = "1"
+   version = "2.0">
+   <Breakpoints>
+      <BreakpointProxy
+         BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
+         <BreakpointContent
+            uuid = "83DD305A-41C8-421B-BC18-70E6897CB31F"
+            shouldBeEnabled = "No"
+            ignoreCount = "0"
+            continueAfterRunningActions = "No"
+            filePath = "Ringo/ViewController.swift"
+            startingColumnNumber = "9223372036854775807"
+            endingColumnNumber = "9223372036854775807"
+            startingLineNumber = "33"
+            endingLineNumber = "33"
+            landmarkName = "viewDidLoad()"
+            landmarkType = "7">
+         </BreakpointContent>
+      </BreakpointProxy>
+   </Breakpoints>
+</Bucket>

iOS/Ringo/Ringo.xcodeproj/xcuserdata/jinhyuk.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -7,7 +7,7 @@
 		<key>Ringo.xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>1</integer>
+			<integer>0</integer>
 		</dict>
 		<key>SnapKitPlayground (Playground) 1.xcscheme</key>
 		<dict>

iOS/Ringo/Ringo/Assets.xcassets/Apple.imageset/Contents.json

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

iOS/Ringo/Ringo/Assets.xcassets/Facebook.imageset/Contents.json

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

iOS/Ringo/Ringo/Assets.xcassets/Google.imageset/Contents.json

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

iOS/Ringo/Ringo/ViewController.swift

@@ -10,11 +10,21 @@ import SnapKit
 
 class ViewController: UIViewController {
 
-    let sampleLabel = UILabel()
     let Text1 = UILabel()
     let Text2 = UILabel()
+    let Text3 = UILabel()
+    let signupBtn = UIButton()
     let email = UILabel()
     let input_email = UITextField()
+    let passwd = UILabel()
+    let input_passwd = UITextField()
+    var showBtn = UIButton()
+    let forgotPwBtn = UIButton()
+    let signinBtn = UIButton()
+    let Text4 = UILabel()
+    let google = UIButton()
+    let apple = UIButton()
+    let facebook = UIButton()
 
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -23,47 +33,173 @@ class ViewController: UIViewController {
         setUpView()
         setConstraints()
     }
+
+    func setUpView() {
+        view.addSubview(Text1)
+        view.addSubview(Text2)
+        view.addSubview(Text3)
+        view.addSubview(signupBtn)
+        view.addSubview(email)
+        view.addSubview(input_email)
+        view.addSubview(passwd)
+        view.addSubview(input_passwd)
+        view.addSubview(showBtn)
+        view.addSubview(forgotPwBtn)
+        view.addSubview(signinBtn)
+        view.addSubview(Text4)
+        view.addSubview(google)
+        view.addSubview(apple)
+        view.addSubview(facebook)
+    }
+
     func setUpValue() {
         view.backgroundColor = .white
-
-        sampleLabel.text = "스토리보드 없이 구현한 ViewController"
-        sampleLabel.font = .preferredFont(forTextStyle: .title3)
+        let button_plain = UIButton.Configuration.plain()
+        let button_filled = UIButton.Configuration.filled()
 
         Text1.text = "Sign in"
         Text1.font = .preferredFont(forTextStyle: .title1)
 
-        Text2.text = "If you don't have an account register \nYou can Sign up here!"
+        Text2.text = "If you don't have an account register \nYou can"
         Text2.font = .preferredFont(forTextStyle: .body)
-        Text2.numberOfLines = 2
+
+        Text3.text = "You can"
+        Text3.font = .preferredFont(forTextStyle: .body)
+
+        signupBtn.setTitle("Sign up here!", for: .normal)
+        signupBtn.setTitleColor(.systemBlue, for: .normal)
+        signupBtn.titleLabel?.font = .systemFont(ofSize: 18)
 
         email.text = "E-mail"
         email.font = .preferredFont(forTextStyle: .body)
-    }
-
-    func setUpView() {
-        view.addSubview(sampleLabel)
-        view.addSubview(Text1)
-        view.addSubview(Text2)
-        view.addSubview(email)
-        view.addSubview(input_email)
+
+        input_email.placeholder = "Enter your email"
+        input_email.borderStyle = .roundedRect
+        input_email.layer.borderWidth = 1.5
+        input_email.layer.borderColor = UIColor(hexCode: "E2E8F0").cgColor
+        input_email.layer.cornerRadius = 5
+        input_email.keyboardType = .emailAddress
+
+        passwd.text = "Password"
+        passwd.font = .preferredFont(forTextStyle: .body)
+
+        showBtn = UIButton.init(primaryAction: UIAction(handler: { _ in
+            self.input_passwd.isSecureTextEntry.toggle()
+            self.showBtn.isSelected.toggle()
+        }))
+
+        showBtn.configuration = button_plain
+        showBtn.configuration?.baseBackgroundColor = .clear
+        showBtn.configurationUpdateHandler = { btn in
+            switch btn.state {
+                case .selected:
+                    btn.configuration?.image = UIImage(systemName: "eye")
+                default:
+                    btn.configuration?.image = UIImage(systemName: "eye.slash")
+            }
+        }
+
+        input_passwd.placeholder = "Enter your password"
+        input_passwd.borderStyle = .roundedRect
+        input_passwd.isSecureTextEntry = true
+        input_passwd.rightView = showBtn
+        input_passwd.rightViewMode = .always
+
+        forgotPwBtn.setTitle("Forgot Password?", for: .normal)
+        forgotPwBtn.setTitleColor(.systemBlue, for: .normal)
+        forgotPwBtn.titleLabel?.font = .systemFont(ofSize: 13)
+
+        signinBtn.configuration = button_filled
+        signinBtn.configuration?.buttonSize = .large
+        signinBtn.setTitle("Sign in", for: .normal)
+        signinBtn.layer.shadowColor = UIColor.systemBlue.cgColor
+        signinBtn.layer.shadowRadius = 15
+        signinBtn.layer.shadowOpacity = 0.5
+        signinBtn.layer.shadowOffset = CGSize(width: 0, height: 0)
+        signinBtn.layer.masksToBounds = false
+
+        Text4.text = "or continue with"
+        Text4.font = .preferredFont(forTextStyle: .body)
+        Text4.textColor = .lightGray
+
+        google.setImage(UIImage(named: "Google"), for: .normal)
+        apple.setImage(UIImage(named: "Apple"), for: .normal)
+        facebook.setImage(UIImage(named: "Facebook"), for: .normal)
     }
 
     func setConstraints(){
-        sampleLabel.snp.makeConstraints{make in make.center.equalToSuperview()}
 
         Text1.snp.makeConstraints { make in
             make.top.equalToSuperview().offset(30)
             make.leading.equalToSuperview().offset(30)
         }
 
         Text2.snp.makeConstraints { make in
-            make.top.equalTo(Text1.snp.bottom)
+            make.top.equalTo(Text1.snp.bottom).offset(20)
             make.leading.equalTo(Text1.snp.leading)
         }
 
+        Text3.snp.makeConstraints { make in
+            make.top.equalTo(Text2.snp.bottom).offset(10)
+            make.leading.equalTo(Text2.snp.leading)
+        }
+
+        signupBtn.snp.makeConstraints { make in
+            make.top.equalTo(Text2.snp.top).offset(24)
+            make.leading.equalTo(Text2.snp.leading).offset(70)
+        }
+
         email.snp.makeConstraints { make in
             make.top.equalTo(Text2.snp.bottom).offset(100)
-            make.leading.equalTo(Text1.snp.leading)
+            make.leading.equalToSuperview().offset(20)
+        }
+
+        input_email.snp.makeConstraints { make in
+            make.top.equalTo(email.snp.bottom).offset(10)
+            make.leading.equalTo(email.snp.leading)
+            make.trailing.equalToSuperview().offset(-20)
+        }
+
+        passwd.snp.makeConstraints { make in
+            make.top.equalTo(input_email.snp.bottom).offset(20)
+            make.leading.equalTo(email.snp.leading)
+        }
+
+        input_passwd.snp.makeConstraints { make in
+            make.top.equalTo(passwd.snp.bottom).offset(10)
+            make.leading.equalTo(passwd.snp.leading)
+            make.trailing.equalToSuperview().offset(-20)
+        }
+
+        forgotPwBtn.snp.makeConstraints { make in
+            make.top.equalTo(input_passwd.snp.bottom).offset(10)
+            make.trailing.equalTo(input_passwd.snp.trailing)
+        }
+
+        signinBtn.snp.makeConstraints { make in
+            make.top.equalTo(forgotPwBtn.snp.bottom).offset(35)
+            make.leading.equalTo(input_passwd.snp.leading)
+            make.trailing.equalTo(input_passwd.snp.trailing)
+        }
+
+        Text4.snp.makeConstraints { make in
+            make.top.equalTo(signinBtn.snp.bottom).offset(150)
+            make.centerX.equalToSuperview()
+        }
+
+        google.snp.makeConstraints { make in
+            make.top.equalTo(Text4.snp.bottom).offset(20)
+            make.leading.equalTo(apple.snp.trailing).offset(20)
+        }
+
+        apple.snp.makeConstraints { make in
+            make.top.equalTo(Text4.snp.bottom).offset(20)
+            make.centerX.equalToSuperview()
+        }
+
+        facebook.snp.makeConstraints { make in
+            make.top.equalTo(Text4.snp.bottom).offset(20)
+            make.trailing.equalTo(apple.snp.leading).offset(-20)
         }
     }
 }
@@ -88,3 +224,24 @@ struct ViewPreview: PreviewProvider {
         ViewControllerRepresentable()
     }
 }
+
+extension UIColor {
+
+    convenience init(hexCode: String, alpha: CGFloat = 1.0) {
+        var hexFormatted: String = hexCode.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines).uppercased()
+
+        if hexFormatted.hasPrefix("#") {
+            hexFormatted = String(hexFormatted.dropFirst())
+        }
+
+        assert(hexFormatted.count == 6, "Invalid hex code used.")
+
+        var rgbValue: UInt64 = 0
+        Scanner(string: hexFormatted).scanHexInt64(&rgbValue)
+
+        self.init(red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
+                  green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
+                  blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
+                  alpha: alpha)
+    }
+}