Refactor: 온보딩 UI 수정된 디자인 반영 (#T3-154)

- OnboardingType 워딩 수정
- OnboardingChoiceButton, OnboardingViewController, 등 수정

Author: choijungp

Projects/Presentation/Sources/Common/Extension/NSAttributedString+.swift

@@ -13,17 +13,16 @@ extension NSAttributedString {
 
         attributedString.addAttribute(
             .font,
-            value: BitnagilFont(style: .body2, weight: .regular).font,
+            value: BitnagilFont(style: .subtitle1, weight: .medium).font,
             range: NSRange(location: 0, length: text.count)
         )
 
         if let range = text.range(of: highlightText) {
             let nsRange = NSRange(range, in: text)
-            attributedString.addAttribute(
-                .font,
-                value: BitnagilFont(style: .body2, weight: .semiBold).font,
-                range: nsRange
-            )
+            attributedString.addAttributes([
+                .font: BitnagilFont(style: .subtitle1, weight: .semiBold).font,
+                .foregroundColor: BitnagilColor.orange500 ?? .orange
+            ], range: nsRange)
         }
         return attributedString
     }

Projects/Presentation/Sources/Onboarding/Model/OnboardingChoiceType.swift

@@ -15,20 +15,20 @@ extension OnboardingChoiceType: OnboardingChoiceProtocol {
         case .eveningTime: "저녁을 편안하게 마무리하고 싶어요."
         case .allTime: "언제든 상관 없어요."
 
-        case .never: "밖에 나가지 않고 집에서만 지냈어요."
-        case .rarely: "잠깐 외출했어요."
-        case .sometimes: "가끔 나가요."
-        case .often: "자주 외출해요."
-
         case .stability: "안정감"
         case .connection: "연결감"
         case .growth: "성장감"
         case .vitality: "생동감"
 
+        case .never: "나가지 않고 집에서만 지냈어요."
+        case .rarely: "잠깐 외출했어요."
+        case .sometimes: "가끔 나가요."
+        case .often: "자주 외출해요."
+
         case .once: "시작이 더 중요해요."
         case .twoToThree: "너무 무리하지 않아도 괜찮아요."
-        case .fourOrMore: "이 정도면 충분히 활력 있는 한 주가 될거에요."
-        case .notSure: "목표 선택을 도와드릴게요!"
+        case .fourOrMore: "충분히 활력 있는 한 주가 될거에요."
+        case .notSure: "아직 잘 모르겠어요."
         }
     }
 
@@ -50,7 +50,7 @@ extension OnboardingChoiceType: OnboardingChoiceProtocol {
         case .fourOrMore:
             return "일주일에 4회 이상"
         case .notSure:
-            return "아직 잘 모르겠어요"
+            return "목표 선택을 도와드릴게요!"
 
         default:
             return nil

Projects/Presentation/Sources/Onboarding/Model/OnboardingType.swift

@@ -12,27 +12,27 @@ extension OnboardingType {
     var step: Int {
         switch self {
         case .time: 1
-        case .frequency: 2
-        case .feeling: 3
+        case .feeling: 2
+        case .frequency: 3
         case .outdoor: 4
         }
     }
 
     var mainTitle: String {
         switch self {
         case .time: "어떤 시간대를\n더 잘 보내고 싶나요?"
+        case .feeling: "요즘 어떤 회복이 필요하신가요?"
         case .frequency: "최근 얼마나 자주\n바깥 바람을 쐬시나요?"
-        case .feeling: "요즘 어떤 회복이\n필요하신가요?"
         case .outdoor: "작지만 의미 있는 변화를 위해,\n일주일에 몇 번 외출하고 싶으신가요?"
         }
     }
 
     var subTitle: String? {
         switch self {
         case .time: nil
-        case .frequency: nil
         case .feeling: "여러 개 선택할 수 있어요!"
-        case .outdoor: "무리하지 않는 선에서, 나만의 외출 목표를 정해보세요."
+        case .frequency: nil
+        case .outdoor: "부담 없이 나만의 외출 목표를 정해보세요."
         }
     }
 
@@ -43,17 +43,17 @@ extension OnboardingType {
                     OnboardingChoiceType.eveningTime,
                     OnboardingChoiceType.allTime]
 
-        case .frequency:
-            return [OnboardingChoiceType.never,
-                    OnboardingChoiceType.rarely,
-                    OnboardingChoiceType.sometimes,
-                    OnboardingChoiceType.often]
-
         case .feeling:
             return [OnboardingChoiceType.stability,
                     OnboardingChoiceType.connection,
                     OnboardingChoiceType.growth,
                     OnboardingChoiceType.vitality]
+            
+        case .frequency:
+            return [OnboardingChoiceType.never,
+                    OnboardingChoiceType.rarely,
+                    OnboardingChoiceType.sometimes,
+                    OnboardingChoiceType.often]
 
         case .outdoor:
             return [OnboardingChoiceType.once,

Projects/Presentation/Sources/Onboarding/View/Component/OnboardingChoiceButton.swift

@@ -5,21 +5,24 @@
 //  Created by 최정인 on 7/9/25.
 //
 
+import SnapKit
 import UIKit
 
 final class OnboardingChoiceButton: UIButton {
-
     private enum Layout {
         static let cornerRadius: CGFloat = 12
         static let horizontalMargin: CGFloat = 20
         static let stackViewSpacing: CGFloat = 2
-        static let mainLabelHeight: CGFloat = 28
+        static let mainLabelHeight: CGFloat = 24
         static let subLabelHeight: CGFloat = 20
+        static let checkedIconTrailingSpacing: CGFloat = 20
+        static let checkedIconSize: CGFloat = 28
     }
 
     private let stackView = UIStackView()
     private let mainLabel = UILabel()
     private var subLabel: UILabel? = nil
+    private let checkedIcon = UIImageView()
 
     private var isChecked: Bool = false {
         didSet {
@@ -41,37 +44,35 @@ final class OnboardingChoiceButton: UIButton {
     }
 
     private func configureAttribute() {
-        backgroundColor = .white
-        layer.borderWidth = 1
+        backgroundColor = BitnagilColor.gray99
+        layer.masksToBounds = true
         layer.cornerRadius = Layout.cornerRadius
 
         stackView.axis = .vertical
         stackView.alignment = .leading
         stackView.spacing = Layout.stackViewSpacing
         stackView.isUserInteractionEnabled = false
 
-        guard let subTitle = onboardingChoice.subTitle else {
-            mainLabel.text = onboardingChoice.mainTitle
-            mainLabel.font = BitnagilFont(style: .body1, weight: .regular).font
-            mainLabel.textColor = BitnagilColor.gray50
-            return
-        }
-
         mainLabel.text = onboardingChoice.mainTitle
-        mainLabel.font = BitnagilFont(style: .subtitle1, weight: .semiBold).font
+        mainLabel.font = BitnagilFont(style: .body1, weight: .semiBold).font
         mainLabel.textColor = BitnagilColor.gray50
 
-        subLabel = UILabel()
-        if let subLabel {
-            subLabel.text = subTitle
-            subLabel.font = BitnagilFont(style: .body2, weight: .regular).font
-            subLabel.textColor = BitnagilColor.gray50
+        if let subTitle = onboardingChoice.subTitle {
+            subLabel = UILabel()
+            subLabel?.text = subTitle
+            subLabel?.font = BitnagilFont(style: .body2, weight: .medium).font
+            subLabel?.textColor = BitnagilColor.gray50
         }
+
+        checkedIcon.image = BitnagilIcon.orangeCheckedCircleIcon
+        checkedIcon.isHidden = true
     }
 
     private func configureLayout() {
         addSubview(stackView)
+        addSubview(checkedIcon)
         stackView.addArrangedSubview(mainLabel)
+
         if let subLabel {
             stackView.addArrangedSubview(subLabel)
             mainLabel.snp.makeConstraints { make in
@@ -86,13 +87,19 @@ final class OnboardingChoiceButton: UIButton {
             make.leading.equalToSuperview().inset(Layout.horizontalMargin)
             make.centerY.equalToSuperview()
         }
+
+        checkedIcon.snp.makeConstraints { make in
+            make.trailing.equalToSuperview().inset(Layout.checkedIconTrailingSpacing)
+            make.size.equalTo(Layout.checkedIconSize)
+            make.centerY.equalToSuperview()
+        }
     }
 
     private func updateButtonAttribute() {
-        backgroundColor = isChecked ? BitnagilColor.lightBlue75 : .white
-        layer.borderColor = (isChecked ? BitnagilColor.lightBlue200 : .white)?.cgColor
-        mainLabel.textColor = isChecked ? BitnagilColor.navy500 : BitnagilColor.gray50
-        subLabel?.textColor = isChecked ? BitnagilColor.navy500 : BitnagilColor.gray50
+        backgroundColor = isChecked ? BitnagilColor.orange50 : BitnagilColor.gray99
+        mainLabel.textColor = isChecked ? BitnagilColor.orange500 : BitnagilColor.gray50
+        subLabel?.textColor = isChecked ? BitnagilColor.orange500 : BitnagilColor.gray50
+        checkedIcon.isHidden = !isChecked
     }
 
     func updateButtonState(isChecked: Bool) {

Projects/Presentation/Sources/Onboarding/View/Component/OnboardingResultSummaryView.swift

@@ -0,0 +1,107 @@
+//
+//  OnboardingResultSummaryView.swift
+//  Presentation
+//
+//  Created by 최정인 on 8/11/25.
+//
+
+import Domain
+import SnapKit
+import UIKit
+
+final class OnboardingResultSummaryView: UIView {
+    private enum Layout {
+        static let orderImageViewSize: CGFloat = 24
+        static let resultSummaryLabelLeadingSpacing: CGFloat = 14
+        static let resultSummaryLabelHeight: CGFloat = 28
+    }
+
+    private let orderImageView = UIImageView()
+    private let resultSummaryLabel = UILabel()
+    private let grayLine = UIImageView()
+
+    init(onboardingType: OnboardingType?, highlightText: String) {
+        super.init(frame: .zero)
+        configureAttribute(onboardingType: onboardingType, highlightText: highlightText)
+        configureLayout()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    private func configureAttribute(onboardingType: OnboardingType?, highlightText: String) {
+        switch onboardingType {
+        case .time:
+            orderImageView.image = BitnagilIcon.circleOneIcon
+        case .feeling:
+            orderImageView.image = BitnagilIcon.circleTwoIcon
+        case .outdoor:
+            orderImageView.image = BitnagilIcon.circleThreeIcon
+        default:
+            orderImageView.isHidden = true
+        }
+
+        let baseText = baseText(onboardingType: onboardingType, highlightText: highlightText)
+        resultSummaryLabel.attributedText = NSAttributedString.highlighted(text: baseText, highlightText: highlightText)
+
+        grayLine.image = BitnagilGraphic.onboardingGrayLine
+    }
+
+    private func configureLayout() {
+        addSubview(orderImageView)
+        addSubview(resultSummaryLabel)
+        addSubview(grayLine)
+
+        orderImageView.snp.makeConstraints { make in
+            make.leading.equalToSuperview()
+            make.centerY.equalToSuperview()
+            make.size.equalTo(Layout.orderImageViewSize)
+        }
+
+        resultSummaryLabel.snp.makeConstraints { make in
+            make.top.equalToSuperview()
+            make.leading.equalTo(orderImageView.snp.trailing).offset(Layout.resultSummaryLabelLeadingSpacing)
+            make.height.equalTo(Layout.resultSummaryLabelHeight)
+        }
+
+        grayLine.snp.makeConstraints { make in
+            make.leading.equalTo(resultSummaryLabel)
+            make.trailing.equalToSuperview()
+            make.bottom.equalToSuperview()
+        }
+    }
+
+    private func baseText(onboardingType: OnboardingType?, highlightText: String) -> String {
+        switch onboardingType {
+        case .time:
+            return timeResultBaseText(highlightText: highlightText)
+
+        case .feeling:
+            if highlightText.filter({ $0 == "," }).count >= 2 {
+                return "\(highlightText)을"
+            } else {
+                return "\(highlightText)을 원하는 중이에요"
+            }
+
+        case .outdoor:
+            return "\(highlightText)을 목표로 해볼게요!"
+
+        default:
+            return "원하는 중이에요"
+        }
+    }
+
+    private func timeResultBaseText(highlightText: String) -> String {
+        switch highlightText {
+        case "아침루틴":
+            return "아침루틴을 만들고 싶고"
+        case "저녁루틴":
+            return "저녁루틴을 만들고 싶고"
+        case "전체루틴":
+            return "전체루틴을 회복하고 싶고"
+        default:
+            return ""
+        }
+    }
+}