fix: 로그인 버튼 레이아웃을 수정해요

14th-team5-iOS/App/Sources/Presentation/Account/AccountSignIn/AccountSignInViewController.swift

@@ -32,8 +32,8 @@ public final class AccountSignInViewController: BaseViewController<AccountSignIn
     private let titleLabel = BBLabel(.body1Bold, textAlignment: .center, textColor: .gray200)
     private let loginImageView = UIImageView()
 
-    private let kakaoLoginButton = UIButton()
-    private let appleLoginButton = UIButton()
+    private let kakaoLoginButton = BBButton()
+    private let appleLoginButton = BBButton()
     private let loginStack = UIStackView()
 
     override public func viewWillAppear(_ animated: Bool) {
@@ -69,16 +69,30 @@ public final class AccountSignInViewController: BaseViewController<AccountSignIn
         loginStack.do {
             $0.axis = .vertical
             $0.spacing = Metric.spacing
-            $0.alignment = .fill
-            $0.distribution = .fill
+            $0.distribution = .fillEqually
         }
 
         kakaoLoginButton.do {
-            $0.setImage(DesignSystemAsset.kakaoLogin.image, for: .normal)
+            $0.setImageWithTitle(
+                image: DesignSystemAsset.kakao.image,
+                title: "Kakao로 계속하기"
+            )
+            $0.setTitle("Kakao로 계속하기", for: .normal)
+            $0.backgroundColor = UIColor(red: 254/255, green: 229/255, blue: 0/255, alpha: 1)
+            $0.layer.cornerRadius = 8
+            $0.setTitleColor(.bibbiBlack, for: .normal)
+            $0.setTitleFontStyle(.head2Bold)
         }
 
         appleLoginButton.do {
-            $0.setImage(DesignSystemAsset.appleLogin.image, for: .normal)
+            $0.setImageWithTitle(
+                image: DesignSystemAsset.apple.image,
+                title: "Apple로 계속하기"
+            )
+            $0.backgroundColor = UIColor(red: 254/255, green: 254/255, blue: 254/255, alpha: 1)
+            $0.layer.cornerRadius = 8
+            $0.setTitleColor(.bibbiBlack, for: .normal)
+            $0.setTitleFontStyle(.head2Bold)
         }
     }
 
@@ -102,8 +116,9 @@ public final class AccountSignInViewController: BaseViewController<AccountSignIn
         }
 
         loginStack.snp.makeConstraints {
-            $0.horizontalEdges.equalToSuperview().inset(Metric.inset)
-            $0.bottom.equalTo(view.safeAreaLayoutGuide).offset(Metric.loginOffset)
+            $0.height.equalTo(124)
+            $0.horizontalEdges.equalToSuperview().inset(20)
+            $0.bottom.equalTo(view.safeAreaLayoutGuide).offset(12)
         }
     }
 

14th-team5-iOS/Core/Sources/Bibbi/BBCommons/BBButton/BBButton.swift

@@ -14,7 +14,8 @@ import SnapKit
 public class BBButton: UIButton {
 
     // MARK: - Views
-
+    public var mainStackView: UIStackView = UIStackView()
+    public var mainImageView: UIImageView = UIImageView()
     public var mainTitleLabel: BBLabel = BBLabel()
 
     // MARK: - Properties
@@ -65,17 +66,23 @@ public class BBButton: UIButton {
     // MARK: - Helpers
 
     private func setupUI() {
-        addSubview(mainTitleLabel)
-
+        addSubviews(mainStackView)
+        mainStackView.addArrangedSubview(mainTitleLabel)
     }
 
     private func setupConstraints() {
-        mainTitleLabel.snp.makeConstraints {
+        mainStackView.snp.makeConstraints {
             $0.center.equalToSuperview()
         }
     }
 
     private func setupAttributes() {
+        mainStackView.do {
+            $0.spacing = 4
+            $0.distribution = .fillProportionally
+            $0.axis = .horizontal
+        }
+
         mainTitleLabel.do {
             $0.numberOfLines = 1
         }
@@ -100,6 +107,14 @@ public class BBButton: UIButton {
         self.id = id
     }
 
+    public func setImageWithTitle(image: UIImage?, title: String?) {
+        mainStackView.removeAllArrangedSubviews()
+        mainStackView.addArrangedSubviews(mainImageView, mainTitleLabel)
+
+        mainImageView.image = image
+        mainTitleLabel.text = title
+    }
+
     /// 버튼의 타이틀을 변경합니다.
     public override func setTitle(_ title: String?, for state: UIControl.State) {
         titleLabel?.text = title

14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/AccountSignIn/appleLogin.imageset/Contents.json → 14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/AccountSignIn/Apple.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "appleLogin.svg",
+      "filename" : "Apple.svg",
       "idiom" : "universal"
     }
   ],

14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/AccountSignIn/kakaoLogin.imageset/Contents.json → 14th-team5-iOS/DesignSystem/Resources/Assets.xcassets/AccountSignIn/kakao.imageset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "kakaoLogin.svg",
+      "filename" : "kakao.svg",
       "idiom" : "universal"
     }
   ],