Refactor: BitnagilAlert 디자인 v2 적용 (#T3-185)

Author: choijungp

Projects/Presentation/Sources/Common/View/BitnagilAlert.swift

@@ -9,54 +9,43 @@ import SnapKit
 import UIKit
 
 final class BitnagilAlert: UIViewController {
-    enum AlertType {
-        case withImage
-        case plainText
-    }
-
     private enum Layout {
-        static let contentViewHorizontalSpacing: CGFloat = 39
-        static let contentViewHorizontalHeight: CGFloat = 154
-        static let imageSize: CGFloat = 55
-        static let imageTopSpacing: CGFloat = 24
-        static let titleTopSpacing: CGFloat = 18
-        static let titleHeight: CGFloat = 30
-        static let contentTopSpacing: CGFloat = 2
-        static let contentHeight: CGFloat = 18
+        static let horizontalMargin: CGFloat = 24
+        static let contentViewHorizontalSpacing: CGFloat = 44
+        static let contentViewHorizontalHeight: CGFloat = 180
+        static let titleTopSpacing: CGFloat = 20
+        static let titleHeight: CGFloat = 28
+        static let contentTopSpacing: CGFloat = 6
+        static let contentHeight: CGFloat = 40
         static let buttonTopSpacing: CGFloat = 18
-        static let buttonHorizontalSpacing: CGFloat = 20
-        static let buttonHeight: CGFloat = 44
-        static let confirmButtonLeadingSpacing: CGFloat = 8
-        static let buttonBottomSpacing: CGFloat = 24
+        static let buttonHeight: CGFloat = 48
+        static let confirmButtonLeadingSpacing: CGFloat = 12
+        static let buttonBottomSpacing: CGFloat = 20
     }
 
     private let dimmedView = UIView()
     private let contentView = UIView()
-    private let alertImageView = UIImageView()
     private let titleLabel = UILabel()
     private let contentLabel = UILabel()
     private let cancelButton = UIButton()
     private let confirmButton = UIButton()
-    private let alertType: AlertType
     private var cancelHandler: (() -> Void)?
     private var confirmHandler: (() -> Void)?
 
     init(
-        alertType: AlertType,
         title: String,
         content: String,
         cancelButtonTitle: String,
         confirmButtonTitle: String,
         cancelHandler: (() -> Void)?,
         confirmHandler: (() -> Void)?
     ) {
-        self.alertType = alertType
         super.init(nibName: nil, bundle: nil)
 
         self.cancelHandler = cancelHandler
         self.confirmHandler = confirmHandler
         titleLabel.text = title
-        contentLabel.text = content
+        contentLabel.attributedText = BitnagilFont(style: .body2, weight: .medium).attributedString(text: content)
         cancelButton.setTitle(cancelButtonTitle, for: .normal)
         confirmButton.setTitle(confirmButtonTitle, for: .normal)
 
@@ -77,21 +66,22 @@ final class BitnagilAlert: UIViewController {
         dimmedView.alpha = 0.7
 
         contentView.backgroundColor = .white
-        contentView.layer.cornerRadius = 20
+        contentView.layer.cornerRadius = 12
         contentView.layer.masksToBounds = true
 
-        alertImageView.image = BitnagilIcon.exclamationFilledIcon
-        titleLabel.font = BitnagilFont(style: .title2, weight: .bold).font
-        contentLabel.font = BitnagilFont(style: .caption1, weight: .regular).font
+        titleLabel.font = BitnagilFont(style: .subtitle1, weight: .semiBold).font
+        titleLabel.textColor = BitnagilColor.gray10
+
+        contentLabel.textColor = BitnagilColor.gray40
+        contentLabel.numberOfLines = 2
 
-        cancelButton.backgroundColor = .white
-        cancelButton.setTitleColor(BitnagilColor.navy500, for: .normal)
-        confirmButton.backgroundColor = BitnagilColor.navy500
+        cancelButton.backgroundColor = BitnagilColor.gray97
+        cancelButton.setTitleColor(BitnagilColor.gray40, for: .normal)
+        confirmButton.backgroundColor = BitnagilColor.gray10
         confirmButton.setTitleColor(.white, for: .normal)
         [cancelButton, confirmButton].forEach {
-            $0.titleLabel?.font = BitnagilFont(style: .subtitle1, weight: .bold).font
-            $0.layer.borderWidth = 1
-            $0.layer.cornerRadius = 8
+            $0.titleLabel?.font = BitnagilFont(style: .body2, weight: .medium).font
+            $0.layer.cornerRadius = 12
             $0.layer.masksToBounds = true
         }
 
@@ -129,44 +119,29 @@ final class BitnagilAlert: UIViewController {
             make.height.equalTo(Layout.contentViewHorizontalHeight).priority(.medium)
         }
 
-        if alertType == .withImage {
-            contentView.addSubview(alertImageView)
-            alertImageView.snp.makeConstraints { make in
-                make.top.equalToSuperview().offset(Layout.imageTopSpacing)
-                make.centerX.equalToSuperview()
-                make.size.equalTo(Layout.imageSize)
-            }
-
-            titleLabel.snp.makeConstraints { make in
-                make.top.equalTo(alertImageView.snp.bottom).offset(Layout.titleTopSpacing)
-                make.centerX.equalToSuperview()
-                make.height.equalTo(Layout.titleHeight)
-            }
-        } else {
-            titleLabel.snp.makeConstraints { make in
-                make.top.equalToSuperview().offset(Layout.titleTopSpacing)
-                make.centerX.equalToSuperview()
-                make.height.equalTo(Layout.titleHeight)
-            }
+        titleLabel.snp.makeConstraints { make in
+            make.top.equalToSuperview().offset(Layout.titleTopSpacing)
+            make.horizontalEdges.equalToSuperview().inset(Layout.horizontalMargin)
+            make.height.equalTo(Layout.titleHeight)
         }
 
         contentLabel.snp.makeConstraints { make in
             make.top.equalTo(titleLabel.snp.bottom).offset(Layout.contentTopSpacing)
-            make.centerX.equalToSuperview()
+            make.horizontalEdges.equalToSuperview().inset(Layout.horizontalMargin)
             make.height.equalTo(Layout.contentHeight)
         }
 
         cancelButton.snp.makeConstraints { make in
             make.top.equalTo(contentLabel.snp.bottom).offset(Layout.buttonTopSpacing)
-            make.leading.equalToSuperview().offset(Layout.buttonHorizontalSpacing)
+            make.leading.equalToSuperview().offset(Layout.horizontalMargin)
             make.height.equalTo(Layout.buttonHeight)
             make.bottom.equalToSuperview().inset(Layout.buttonBottomSpacing)
         }
 
         confirmButton.snp.makeConstraints { make in
             make.top.equalTo(contentLabel.snp.bottom).offset(Layout.buttonTopSpacing)
             make.leading.equalTo(cancelButton.snp.trailing).offset(Layout.confirmButtonLeadingSpacing)
-            make.trailing.equalToSuperview().inset(Layout.buttonHorizontalSpacing)
+            make.trailing.equalToSuperview().inset(Layout.horizontalMargin)
             make.height.equalTo(Layout.buttonHeight)
             make.width.equalTo(cancelButton)
             make.bottom.equalToSuperview().inset(Layout.buttonBottomSpacing)

Projects/Presentation/Sources/Setting/View/SettingView.swift

@@ -259,9 +259,8 @@ extension SettingView: UITableViewDelegate {
             switch row {
             case .logout:
                 alert = BitnagilAlert(
-                    alertType: .withImage,
-                    title: "로그아웃 하시겠어요?",
-                    content: "버튼을 누르면 로그인 페이지로 이동해요.",
+                    title: "로그아웃할까요?",
+                    content: "이 기기에서 계정이 로그아웃되고, 다시\n로그인해야 서비스를 계속 이용할 수 있어요.",
                     cancelButtonTitle: "취소",
                     confirmButtonTitle: "로그아웃",
                     cancelHandler: nil,