[Feat-T3-167] 추천 루틴 화면 수정된 디자인 반영

Projects/Presentation/Resources/Colors.xcassets/RoutineCategory/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Presentation/Resources/Colors.xcassets/RoutineCategory/Yellow10.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xC7",
+          "green" : "0xF5",
+          "red" : "0xFF"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/connect_icon.imageset/Contents.json

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

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/grow_icon.imageset/Contents.json

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

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/outside_icon.imageset/Contents.json

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

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/rest_icon.imageset/Contents.json

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

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/shine_icon.imageset/Contents.json

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

Projects/Presentation/Resources/Images.xcassets/RoutineCategory/wakeup_icon.imageset/Contents.json

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

Projects/Presentation/Sources/Common/Component/RoutineCardView.swift

@@ -0,0 +1,166 @@
+//
+//  RoutineCardView.swift
+//  Presentation
+//
+//  Created by 최정인 on 8/16/25.
+//
+
+import Domain
+import SnapKit
+import UIKit
+
+final class RoutineCardView: UIView {
+    private enum Layout {
+        static let horizontalMargin: CGFloat = 16
+        static let cornerRadius: CGFloat = 12
+        static let headerInfoStackViewSpacing: CGFloat = 10
+        static let headerInfoStackViewTopSpacing: CGFloat = 14
+        static let subRoutineStackViewSpacing: CGFloat = 2
+        static let subRoutineStackViewTopSpacing: CGFloat = 10
+        static let subRoutineStackViewBottomSpacing: CGFloat = 14
+        static let subRoutineLabelHeight: CGFloat = 20
+        static let categoryIconSize: CGFloat = 32
+        static let plusImageSize: CGFloat = 24
+        static let plusButtonTopSpacing: CGFloat = 14
+        static let plusButtonTrailingSpacing: CGFloat = 7
+        static let plusButtonSize: CGFloat = 32
+        static let grayLineTopSpacing: CGFloat = 10
+        static let grayLineHeight: CGFloat = 1
+    }
+
+    private let headerInfoStackView = UIStackView()
+    private let categoryIconView = RoutineCategoryIcon(routineCategory: .connection)
+    private let titleLabel = UILabel()
+    private let editButton = UIButton()
+    private let deleteButton = UIButton()
+    private let plusButton = UIButton()
+    private let grayLine = UIView()
+    private let subRoutineLabel = UILabel()
+    private let subRoutineStackView = UIStackView()
+
+    init() {
+        super.init(frame: .zero)
+        configureAttribute()
+        configureLayout()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func configureAttribute() {
+        backgroundColor = .white
+        layer.masksToBounds = true
+        layer.cornerRadius = Layout.cornerRadius
+
+        headerInfoStackView.axis = .horizontal
+        headerInfoStackView.spacing = Layout.headerInfoStackViewSpacing
+
+        titleLabel.text = "개운하게 일어나기"
+        titleLabel.font = BitnagilFont(style: .body1, weight: .semiBold).font
+        titleLabel.textColor = BitnagilColor.gray10
+
+        let plusImage = BitnagilIcon.plusIcon?
+            .resizeAspectFit(to: CGSize(width: Layout.plusImageSize, height: Layout.plusImageSize))
+        plusButton.setImage(plusImage, for: .normal)
+        plusButton.tintColor = BitnagilColor.gray10
+
+        grayLine.backgroundColor = BitnagilColor.gray97
+
+        subRoutineStackView.axis = .vertical
+        subRoutineStackView.spacing = Layout.subRoutineStackViewSpacing
+
+        subRoutineLabel.text = "세부 루틴"
+        subRoutineLabel.font = BitnagilFont(style: .body2, weight: .medium).font
+        subRoutineLabel.textColor = BitnagilColor.gray40
+        subRoutineLabel.snp.makeConstraints { make in
+            make.height.equalTo(Layout.subRoutineLabelHeight)
+        }
+        subRoutineStackView.addArrangedSubview(subRoutineLabel)
+
+        ["물 마시기", "물 마시기", "물 마시기"].forEach {
+            let subRoutineTitleLabel = UILabel()
+            subRoutineTitleLabel.text = "• \($0)"
+            subRoutineTitleLabel.font = BitnagilFont(style: .body2, weight: .medium).font
+            subRoutineTitleLabel.textColor = BitnagilColor.gray40
+            subRoutineTitleLabel.snp.makeConstraints { make in
+                make.height.equalTo(Layout.subRoutineLabelHeight)
+            }
+            subRoutineStackView.addArrangedSubview(subRoutineTitleLabel)
+        }
+    }
+
+    private func configureLayout() {
+        [categoryIconView, titleLabel].forEach {
+            headerInfoStackView.addArrangedSubview($0)
+        }
+        addSubview(headerInfoStackView)
+        addSubview(plusButton)
+        addSubview(grayLine)
+        addSubview(subRoutineStackView)
+
+        categoryIconView.snp.makeConstraints { make in
+            make.size.equalTo(Layout.categoryIconSize)
+        }
+
+        headerInfoStackView.snp.makeConstraints { make in
+            make.top.equalToSuperview().offset(Layout.headerInfoStackViewTopSpacing)
+            make.leading.equalToSuperview().offset(Layout.horizontalMargin)
+        }
+
+        plusButton.snp.makeConstraints { make in
+            make.top.equalToSuperview().offset(Layout.plusButtonTopSpacing)
+            make.trailing.equalToSuperview().inset(Layout.plusButtonTrailingSpacing)
+            make.size.equalTo(Layout.plusButtonSize)
+        }
+
+        grayLine.snp.makeConstraints { make in
+            make.top.equalTo(headerInfoStackView.snp.bottom).offset(Layout.grayLineTopSpacing)
+            make.leading.equalToSuperview().offset(Layout.horizontalMargin)
+            make.trailing.equalToSuperview().inset(Layout.horizontalMargin)
+            make.height.equalTo(Layout.grayLineHeight)
+        }
+
+        subRoutineStackView.snp.makeConstraints { make in
+            make.top.equalTo(grayLine.snp.bottom).offset(Layout.subRoutineStackViewTopSpacing)
+            make.leading.equalToSuperview().offset(Layout.horizontalMargin)
+            make.trailing.equalToSuperview().inset(Layout.horizontalMargin)
+            make.bottom.equalToSuperview().inset(Layout.subRoutineStackViewBottomSpacing)
+        }
+    }
+}
+
+fileprivate class RoutineCategoryIcon: UIView {
+    private enum Layout {
+        static let cornerRadius: CGFloat = 3.76
+        static let iconSize: CGFloat = 24
+    }
+
+    private let routineCategoryIcon = UIImageView()
+    private let routineCategory: RoutineCategoryType
+    init(routineCategory: RoutineCategoryType) {
+        self.routineCategory = routineCategory
+        super.init(frame: .zero)
+        configureAttribute()
+        configureLayout()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func configureAttribute() {
+        layer.masksToBounds = true
+        layer.cornerRadius = Layout.cornerRadius
+        backgroundColor = routineCategory.iconBackgroundColor ?? BitnagilColor.yellow10
+        routineCategoryIcon.image = routineCategory.iconImage ?? BitnagilIcon.shineIcon
+    }
+
+    private func configureLayout() {
+        addSubview(routineCategoryIcon)
+        routineCategoryIcon.snp.makeConstraints { make in
+            make.size.equalTo(Layout.iconSize)
+            make.center.equalToSuperview()
+        }
+    }
+}

Projects/Presentation/Sources/Common/Component/SelectableItemCell.swift

@@ -5,6 +5,7 @@
 //  Created by 최정인 on 7/24/25.
 //
 
+import SnapKit
 import UIKit
 
 final class SelectableItemCell: UITableViewCell {
@@ -28,7 +29,7 @@ final class SelectableItemCell: UITableViewCell {
 
     private func configureAttribute() {
         titleLabel.font = BitnagilFont(style: .body1, weight: .regular).font
-        titleLabel.textColor = .black
+        titleLabel.textColor = BitnagilColor.gray10
 
         let checkImage = BitnagilIcon.checkIcon?
             .resizeAspectFit(to: CGSize(width: Layout.checkIconSize, height: Layout.checkIconSize))?
@@ -54,7 +55,24 @@ final class SelectableItemCell: UITableViewCell {
     }
 
     func configureCell(item: SelectableItem, isSelected: Bool) {
-        titleLabel.text = item.title
         checkIcon.isHidden = !isSelected
+
+        guard let displayName = item.displayName else {
+            titleLabel.text = item.description
+            return
+        }
+        let attributedString = NSMutableAttributedString(string: item.description)
+        attributedString.addAttribute(
+            .font,
+            value: BitnagilFont(style: .body1, weight: .regular).font,
+            range: NSRange(location: 0, length: item.description.count))
+
+        if let range = item.description.range(of: displayName) {
+            let nsRange = NSRange(range, in: item.description)
+            attributedString.addAttributes([
+                .font: BitnagilFont(style: .body1, weight: .semiBold).font
+            ], range: nsRange)
+        }
+        titleLabel.attributedText = attributedString
     }
 }