[NL-8] 홈 화면 UI 구현 (#24)

* NL-8: 홈 화면 헤더 영역 셀 구현

* NL-8: 홈 화면 번호 추천 영역 셀 구현

* NL-8: 디자인 세부값 업데이트

* NL-8: 홈 화면 오늘의 운세 영역 구현

* NL-8: 홈 화면 UI 구현

* NL-8: 코드 정리

* NL-8: 헤더 영역 chip 높이 설정

* NL-8: 이미지 + 텍스트 영역을 attributedString 을 활용하도록 수정

Author: TTOzzi

Core/Extension/Sources/PaddingLabel.swift

@@ -0,0 +1,30 @@
+//
+//  PaddingLabel.swift
+//  Extension
+//
+//  Created by ttozzi on 8/3/25.
+//
+
+import UIKit
+
+public final class PaddingLabel: UILabel {
+  
+  public var contentInsets: UIEdgeInsets = .zero {
+    didSet {
+      invalidateIntrinsicContentSize()
+    }
+  }
+  
+  public override func drawText(in rect: CGRect) {
+    let insetRect = rect.inset(by: contentInsets)
+    super.drawText(in: insetRect)
+  }
+  
+  public override var intrinsicContentSize: CGSize {
+    let size = super.intrinsicContentSize
+    return CGSize(
+      width: size.width + contentInsets.left + contentInsets.right,
+      height: size.height + contentInsets.top + contentInsets.bottom
+    )
+  }
+}

DesignSystem/DesignSystem/Resources/Images.xcassets/ball.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "ball.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DesignSystem/DesignSystem/Resources/Images.xcassets/ball.imageset/ball.svg

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "clover.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DesignSystem/DesignSystem/Resources/Images.xcassets/clover.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "number_ball.png",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

DesignSystem/DesignSystem/Resources/Images.xcassets/clover.imageset/clover.svg

@@ -5,7 +5,7 @@
 //  Created by ttozzi on 7/19/25.
 //
 
-import Foundation
+import UIKit
 import SwiftRichString
 
 public struct Typography {
@@ -128,4 +128,9 @@ extension Style {
     paragraph.lineHeightMultiple = value
     return self
   }
+  
+  public func color(_ value: UIColor) -> Style {
+    color = value
+    return self
+  }
 }

DesignSystem/DesignSystem/Resources/Images.xcassets/number_ball.imageset/Contents.json

@@ -0,0 +1,95 @@
+//
+//  FortuneItemCollectionViewCell.swift
+//  Home
+//
+//  Created by ttozzi on 8/3/25.
+//
+
+import UIKit
+import DesignSystem
+import Extension
+
+struct FortuneItemCollectionViewCellModel {
+  let title: String
+  let imageURL: String?
+  let message: String
+}
+
+final class FortuneItemCollectionViewCell: UICollectionViewCell {
+  
+  private lazy var contentStackView = UIStackView().then {
+    $0.spacing = 12
+    $0.axis = .vertical
+    $0.alignment = .center
+  }
+  private lazy var titleLabel = PaddingLabel().then { // TODO: Chip
+    $0.style = Typography.Body_14_SB
+    $0.textColor = STColors.primary2.color
+    $0.contentInsets = UIEdgeInsets(top: 3.5, left: 10, bottom: 3.5, right: 10)
+    $0.layer.cornerRadius = 6
+    $0.layer.borderWidth = 1
+    $0.layer.borderColor = STColors.primary7.color.cgColor
+  }
+  private lazy var imageView = UIImageView().then {
+    $0.backgroundColor = .gray // TODO: 확인 필요
+    $0.layer.cornerRadius = 8
+    $0.clipsToBounds = true
+  }
+  private lazy var messageLabel = UILabel().then {
+    $0.style = Typography.Body_14_B.lineHeightMultiple(1.2)
+    $0.textColor = STColors.gray1.color
+    $0.numberOfLines = .zero
+  }
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupUI()
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  private func setupUI() {
+    contentView.backgroundColor = .clear
+    
+    contentView.addSubview(contentStackView)
+    contentStackView.snp.makeConstraints { make in
+      make.edges.equalToSuperview()
+    }
+    contentStackView.addArrangedSubview(titleLabel)
+    titleLabel.snp.makeConstraints { make in
+      make.height.equalTo(28)
+    }
+    contentStackView.addArrangedSubview(imageView)
+    imageView.snp.makeConstraints { make in
+      make.width.equalToSuperview()
+      make.height.equalTo(106)
+    }
+    contentStackView.addArrangedSubview(messageLabel)
+    messageLabel.snp.makeConstraints { make in
+      make.height.greaterThanOrEqualTo(21)
+    }
+  }
+  
+  func update(with model: FortuneItemCollectionViewCellModel) {
+    titleLabel.styledText = model.title
+    messageLabel.styledText = model.message
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview {
+  let cellModel = FortuneItemCollectionViewCellModel(
+    title: "행운의 오브제",
+    imageURL: "",
+    message: "보이면 낚으시길"
+  )
+  let cell = FortuneItemCollectionViewCell()
+  cell.update(with: cellModel)
+  cell.snp.makeConstraints { make in
+    make.width.equalTo(138)
+    make.height.equalTo(179)
+  }
+  return cell
+}

DesignSystem/DesignSystem/Resources/Images.xcassets/number_ball.imageset/number_ball.png

@@ -0,0 +1,90 @@
+//
+//  HomeHeaderCollectionViewCell.swift
+//  Home
+//
+//  Created by ttozzi on 7/31/25.
+//
+
+import DesignSystem
+import Extension
+import UIKit
+
+struct HomeHeaderCollectionViewCellModel: HomeCellModel {
+  let roundText: String
+  let message: String
+  let imageURL: String?
+}
+
+final class HomeHeaderCollectionViewCell: UICollectionViewCell {
+  
+  private lazy var contentStackView = UIStackView().then {
+    $0.spacing = .zero
+    $0.axis = .vertical
+    $0.alignment = .center
+  }
+  private lazy var roundTextChip = PaddingLabel().then { // TODO: Chip Component
+    $0.backgroundColor = STColors.primary7.color
+    $0.layer.cornerRadius = 14
+    $0.clipsToBounds = true
+    $0.style = Typography.Body_14_SB
+    $0.textColor = STColors.primary2.color
+    $0.textAlignment = .center
+    $0.contentInsets = UIEdgeInsets(top: 3.5, left: 10, bottom: 3.5, right: 10)
+  }
+  private lazy var messageLabel = UILabel().then {
+    $0.style = Typography.Heading_24_B
+    $0.textColor = STColors.black.color
+  }
+  private lazy var imageView = UIImageView().then {
+    $0.backgroundColor = .gray // TODO: 임시 영역
+  }
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupUI()
+  }
+  
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+  
+  private func setupUI() {
+    contentView.addSubview(contentStackView)
+    contentStackView.snp.makeConstraints { make in
+      make.top.leading.trailing.equalToSuperview()
+      make.bottom.equalToSuperview().inset(16)
+    }
+    contentStackView.addArrangedSubview(roundTextChip)
+    roundTextChip.snp.makeConstraints { make in
+      make.height.equalTo(28)
+    }
+    contentStackView.setCustomSpacing(12, after: roundTextChip)
+    contentStackView.addArrangedSubview(messageLabel)
+    contentStackView.setCustomSpacing(28, after: messageLabel)
+    contentStackView.addArrangedSubview(imageView)
+    imageView.snp.makeConstraints { make in
+      make.size.equalTo(120) // TODO: 확인 필요
+    }
+  }
+  
+  func update(with model: HomeHeaderCollectionViewCellModel) {
+    roundTextChip.styledText = model.roundText
+    messageLabel.styledText = model.message
+    // TODO: imageView 로드
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview {
+  let cellModel = HomeHeaderCollectionViewCellModel(
+    roundText: "1181회",
+    message: "잘 되면 꼭 기억해 주세요",
+    imageURL: ""
+  )
+  let cell = HomeHeaderCollectionViewCell()
+  cell.update(with: cellModel)
+  cell.snp.makeConstraints { make in
+    make.height.equalTo(228)
+  }
+  return cell
+}