Merge pull request #69 from YAPP-Github/BOOK-119-feature/#67

feat: 입력 관련 컴포넌트 추가, 디자인 시스템 일부 수정

Author: clxxrlove

.github/workflows/ios_ci.yml

@@ -83,7 +83,7 @@ jobs:
         shell: bash
 
       - name: 🧱 Initialize Tuist module structure
-        working-directory: src
+        working-directory: src/SupportingFiles/Scripts
         run: |
           chmod +x tuist_module_init.sh
           ./tuist_module_init.sh

src/Projects/BKDesign/PreviewApp/Sources/Common/BaseView.swift

@@ -0,0 +1,23 @@
+// Copyright © 2025 Booket. All rights reserved
+
+import UIKit
+
+class BaseView: UIView {
+    // MARK: - Initialize
+    override init(frame: CGRect = .zero) {
+        super.init(frame: frame)
+        self.setupView()
+        self.setupLayout()
+        self.configure()
+    }
+    
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    // MARK: - Common Methods
+    func setupView() {}
+    func setupLayout() {}
+    func configure() {}
+}

src/Projects/BKDesign/PreviewApp/Sources/Common/BaseViewController.swift

@@ -0,0 +1,44 @@
+// Copyright © 2025 Booket. All rights reserved
+
+import UIKit
+
+class BaseViewController<T: BaseView>: UIViewController {
+    // MARK: - Properties
+    let contentView: T
+    
+    // MARK: - Initialize
+    init() {
+        self.contentView = T()
+        super.init(nibName: nil, bundle: nil)
+    }
+    
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    // MARK: - Life Cycle
+    override func loadView() {
+        if contentView.backgroundColor == nil {
+            contentView.backgroundColor = .white
+        }
+        view = contentView
+    }
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        
+        self.setupView()
+        self.configure()
+        self.setupLayout()
+        self.bindAction()
+        self.bindState()
+    }
+    
+    // MARK: - Common Methods
+    func setupView() {}
+    func configure() {}
+    func setupLayout() {}
+    func bindAction() {}
+    func bindState() {}
+}

src/Projects/BKDesign/PreviewApp/Sources/SceneDelegate.swift

@@ -5,6 +5,7 @@ import UIKit
 
 class SceneDelegate: UIResponder, UIWindowSceneDelegate {
     var window: UIWindow?
+    let navigationController = UINavigationController()
 
     func scene(
         _ scene: UIScene,
@@ -13,12 +14,43 @@ class SceneDelegate: UIResponder, UIWindowSceneDelegate {
     ) {
         guard let windowScene = scene as? UIWindowScene else { return }
 
-        let window = UIWindow(windowScene: windowScene)
-        let viewController = BKButtonTestViewController()
-//        let viewController = BKButtonGroupDemoViewController()
-        window.rootViewController = UINavigationController(rootViewController: viewController)
-        window.makeKeyAndVisible()
+        setupNavigationBar()
+        window = UIWindow(windowScene: windowScene)
+        window?.rootViewController = navigationController
+        window?.makeKeyAndVisible()
 
-        self.window = window
+        navigationController.pushViewController(CatalogViewController(), animated: true)
+    }
+    
+    func setupNavigationBar() {
+        guard let font = BKTextStyle.headline2(weight: .semiBold).uiFont else { return }
+        let appearance = UINavigationBarAppearance()
+        appearance.configureWithDefaultBackground()
+        appearance.titleTextAttributes = [
+            .foregroundColor: UIColor.bkContentColor(.primary),
+            .font: font
+        ]
+        appearance.backgroundColor = .bkBaseColor(.primary)
+        appearance.shadowColor = .clear
+        
+        let barButtonAppearance = UIBarButtonItemAppearance()
+        barButtonAppearance.normal.titleTextAttributes = [
+            .foregroundColor: UIColor.clear
+        ]
+        
+        let backButtonImage = BKImage.Icon.chevronLeft
+            .withRenderingMode(.alwaysTemplate)
+            .withAlignmentRectInsets(
+                UIEdgeInsets(top: 0, left: -16, bottom: 0, right: 0)
+            )
+        
+        appearance.backButtonAppearance = barButtonAppearance
+        appearance.setBackIndicatorImage(backButtonImage, transitionMaskImage: backButtonImage)
+        
+        navigationController.navigationBar.tintColor = .bkContentColor(.primary)
+        navigationController.navigationBar.standardAppearance = appearance
+        navigationController.navigationBar.scrollEdgeAppearance = appearance
+        navigationController.navigationBar.compactAppearance = appearance
+        navigationController.navigationBar.isTranslucent = false
     }
 }

src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonGroupDemoViewController.swift

@@ -15,6 +15,11 @@ public final class BKButtonGroupDemoViewController: UIViewController {
         setupScrollView()
         setupDemoGroups()
     }
+    
+    public override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        navigationItem.title = "Button"
+    }
 
     private func setupScrollView() {
         view.addSubview(scrollView)

src/Projects/BKDesign/PreviewApp/Sources/View/BKButtonTestViewController.swift

@@ -16,12 +16,12 @@ public final class BKButtonTestViewController: UIViewController {
         super.viewDidLoad()
         view.backgroundColor = .white
         setupScrollView()
-//        setupIndependentButtons()
         setupStackView()
     }
 
     public override func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
+        navigationItem.title = "Button Tests"
         setupAllTestButtons()
     }
 
@@ -59,9 +59,9 @@ public final class BKButtonTestViewController: UIViewController {
         addButton("Secondary", style: .secondary, size: size)
         addButton("Tertiary", style: .tertiary, size: size)
 
-        addIconButton("Apple 로그인", style: .primary, size: size, left: .appleLogo)
-        addIconButton("카카오 로그인", style: .primary, size: size, right: .kakaoLogo)
-        addIconButton("양쪽 아이콘", style: .primary, size: size, left: .appleLogo, right: .kakaoLogo)
+        addIconButton("Apple 로그인", style: .primary, size: size, left: BKImage.Icon.apple)
+        addIconButton("카카오 로그인", style: .primary, size: size, right: BKImage.Icon.kakao)
+        addIconButton("양쪽 아이콘", style: .primary, size: size, left: BKImage.Icon.apple, right: BKImage.Icon.kakao)
     }
 
     // MARK: - Button Builders
@@ -76,13 +76,13 @@ public final class BKButtonTestViewController: UIViewController {
         _ title: String,
         style: BKButtonStyle,
         size: BKButtonSize,
-        left: BKIcon? = nil,
-        right: BKIcon? = nil
+        left: UIImage? = nil,
+        right: UIImage? = nil
     ) {
         let button = BKButton(style: style, size: size)
         button.title = "[\(size.label)] \(title)"
-        button.leftIcon = left?.image
-        button.rightIcon = right?.image
+        button.leftIcon = left
+        button.rightIcon = right
         containerView.addArrangedSubview(button)
     }
 
@@ -104,8 +104,8 @@ public final class BKButtonTestViewController: UIViewController {
             .tertiary(title: "[Free] Tertiary", size: .rounded)
         ]
 
-        buttons[0].leftIcon = BKIcon.appleLogo.image
-        buttons[2].rightIcon = BKIcon.kakaoLogo.image
+        buttons[0].leftIcon = BKImage.Icon.apple
+        buttons[2].rightIcon = BKImage.Icon.kakao
 
         var last: UIView?
         for button in buttons {

src/Projects/BKDesign/PreviewApp/Sources/View/BKInputCatalogView.swift

@@ -0,0 +1,138 @@
+// Copyright © 2025 Booket. All rights reserved
+
+import BKDesign
+import SnapKit
+import UIKit
+
+final class BKInputCatalogView: BaseView {
+    private let contentView = UIView()
+    private let scrollView: UIScrollView = {
+        let scrollView = UIScrollView()
+        scrollView.alwaysBounceVertical = true
+        scrollView.alwaysBounceHorizontal = false
+        scrollView.showsHorizontalScrollIndicator = false
+        return scrollView
+    }()
+    
+    private let stackView: UIStackView = {
+        let stackView = UIStackView()
+        stackView.axis = .vertical
+        stackView.spacing = BKSpacing.spacing5
+        stackView.alignment = .fill
+        return stackView
+    }()
+    
+    private let mediumLabel = BKLabel(
+        text: "Medium Label",
+        type: .medium
+    )
+    
+    private let smallLabel = BKLabel(
+        text: "small label",
+        type: .small
+    )
+    
+    private let labelDivider = BKDivider(type: .medium)
+    private let checkBoxStackView: UIStackView = {
+        let stackView = UIStackView()
+        stackView.axis = .horizontal
+        stackView.spacing = BKSpacing.spacing2
+        stackView.alignment = .leading
+        stackView.distribution = .equalCentering
+        return stackView
+    }()
+    
+    private let rectangleCheckBox = BKCheckBox(type: .rectangle)
+    private let roundCheckBox = BKCheckBox(type: .round)
+    private let checkBoxSpacer = UIView()
+    
+    private let checkBoxDivider = BKDivider(type: .medium)
+    
+    private let normalBaseTextField = BKBaseTextField(
+        placeholder: "여기에 텍스트가 들어갑니다.",
+        type: .normal
+    )
+    
+    private let brandBaseTextField = BKBaseTextField(
+        placeholder: "여기에 텍스트가 들어갑니다.",
+        type: .brand
+    )
+    
+    private let errorBaseTextField = BKBaseTextField(
+        placeholder: "여기에 텍스트가 들어갑니다.",
+        type: .error
+    )
+    
+    private let searchTextFieldDivider = BKDivider(type: .small)
+    
+    private let searchTextField = BKSearchTextField(
+        placeholder: "여기에 텍스트가 들어갑니다.",
+        type: .brand
+    )
+    
+    private let textFieldDivider = BKDivider(type: .small)
+    
+    private let textField = BKTextView(
+        labelText: "BKTextField",
+        placeholder: "여기에 텍스트가 들어갑니다.",
+        helpMessage: "Help message",
+        isError: false
+    )
+    
+    private let textFieldWithError = BKTextView(
+        labelText: "BKTextField",
+        placeholder: "에러가 발생한 TextField.",
+        helpMessage: "Help message",
+        isError: true
+    )
+    
+    override func setupView() {
+        addSubview(scrollView)
+        
+        scrollView.addSubview(contentView)
+        contentView.addSubview(stackView)
+
+        stackView.addArrangedSubview(mediumLabel)
+        stackView.addArrangedSubview(smallLabel)
+        stackView.addArrangedSubview(labelDivider)
+
+        checkBoxStackView.addArrangedSubview(rectangleCheckBox)
+        checkBoxStackView.addArrangedSubview(roundCheckBox)
+        checkBoxStackView.addArrangedSubview(checkBoxSpacer)
+        stackView.addArrangedSubview(checkBoxStackView)
+        
+        stackView.addArrangedSubview(checkBoxDivider)
+
+        stackView.addArrangedSubview(normalBaseTextField)
+        stackView.addArrangedSubview(brandBaseTextField)
+        stackView.addArrangedSubview(errorBaseTextField)
+
+        stackView.addArrangedSubview(searchTextFieldDivider)
+        
+        stackView.addArrangedSubview(searchTextField)
+
+        stackView.addArrangedSubview(textFieldDivider)
+        stackView.addArrangedSubview(textField)
+        stackView.addArrangedSubview(textFieldWithError)
+    }
+
+    override func configure() {
+        backgroundColor = .white
+    }
+
+    override func setupLayout() {
+        scrollView.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
+
+        contentView.snp.makeConstraints {
+            $0.edges.equalTo(scrollView.contentLayoutGuide)
+            $0.width.equalTo(scrollView.frameLayoutGuide)
+        }
+
+        stackView.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+                .inset(BKInset.inset20)
+        }
+    }
+}

src/Projects/BKDesign/PreviewApp/Sources/View/BKInputCatalogViewController.swift

@@ -0,0 +1,10 @@
+// Copyright © 2025 Booket. All rights reserved
+
+import UIKit
+
+final class BKInputCatalogViewController: BaseViewController<BKInputCatalogView> {
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        navigationItem.title = "Label, TextField"
+    }
+}