인사이트 KeywordStat & 헤더 뷰 구현

FoodDiary/DesignSystem/Resources/Assets.xcassets/Colors/sd850.colorset/Contents.json

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

FoodDiary/Presentation/Sources/Core/UIColor+DesignSystem.swift

@@ -39,6 +39,7 @@ public extension UIColor {
 
     static let sdBase = DesignSystemAsset.sdBase.color
     static let sd900 = DesignSystemAsset.sd900.color
+    static let sd850 = DesignSystemAsset.sd850.color
     static let sd800 = DesignSystemAsset.sd800.color
     static let sd700 = DesignSystemAsset.sd700.color
     static let sd600 = DesignSystemAsset.sd600.color

FoodDiary/Presentation/Sources/Insight/Components/InsightHeaderView.swift

@@ -0,0 +1,57 @@
+//
+//  InsightHeaderView.swift
+//  Presentation
+//
+
+import DesignSystem
+import SnapKit
+import UIKit
+
+final class InsightHeaderView: UIView {
+
+    // MARK: - UI Components
+
+    private let dateLabel = UILabel()
+    private let titleLabel = UILabel()
+
+    // MARK: - Init
+
+    init(date: Date = Date()) {
+        super.init(frame: .zero)
+        setupUI(date: date)
+        setupConstraints()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // MARK: - Setup
+
+    private func setupUI(date: Date) {
+        let formatter = DateFormatter()
+        formatter.dateFormat = "yyyy.MM.dd"
+        dateLabel.setText(formatter.string(from: date), style: .p12, color: .gray050)
+
+        let attributed = NSMutableAttributedString()
+        attributed.append(Typography.hd20.styled("이번 달, ", color: .primary))
+        attributed.append(Typography.hd20.styled("잘 먹었습니다.", color: .gray050))
+        titleLabel.attributedText = attributed
+        titleLabel.numberOfLines = 0
+
+        addSubview(dateLabel)
+        addSubview(titleLabel)
+    }
+
+    private func setupConstraints() {
+        dateLabel.snp.makeConstraints {
+            $0.top.leading.equalToSuperview()
+        }
+
+        titleLabel.snp.makeConstraints {
+            $0.top.equalTo(dateLabel.snp.bottom).offset(12)
+            $0.leading.trailing.bottom.equalToSuperview()
+        }
+    }
+}

FoodDiary/Presentation/Sources/Insight/Components/InsightKeywordsView.swift

@@ -11,18 +11,20 @@ final class InsightKeywordsView: UIView {
     // MARK: - Constants
 
     private enum Constants {
-        static let tagHeight: CGFloat = 32
-        static let tagHorizontalPadding: CGFloat = 14
-        static let tagSpacing: CGFloat = 8
-        static let lineSpacing: CGFloat = 8
+        static let inset: CGFloat = 20
+        static let tagHeight: CGFloat = 36
+        static let horizontalSpacing: CGFloat = 8
+        static let verticalSpacing: CGFloat = 8
     }
 
     // MARK: - UI Components
 
     private let titleLabel = UILabel()
-    private let tagsContainerView = UIView()
+    private let tagsContainer = UIView()
     private let keywords: [String]
-    private var didLayoutTags = false
+    private var tagViews: [UIView] = []
+    private var tagsContainerHeightConstraint: Constraint?
+    private var lastTagsHeight: CGFloat = 0
 
     // MARK: - Init
 
@@ -45,84 +47,80 @@ final class InsightKeywordsView: UIView {
         layer.cornerRadius = 16
         clipsToBounds = true
 
-        titleLabel.setText("💬 키워드", style: .hd18)
+        titleLabel.setText("나의 입맛과\n가장 잘 어울리는 키워드", style: .hd16, color: .gray050)
+        titleLabel.numberOfLines = 2
         addSubview(titleLabel)
-        addSubview(tagsContainerView)
+        addSubview(tagsContainer)
+
+        tagViews = keywords.map { makeTagView(text: $0) }
+        tagViews.forEach { tagsContainer.addSubview($0) }
     }
 
     private func setupConstraints() {
         titleLabel.snp.makeConstraints {
-            $0.top.leading.equalToSuperview().inset(20)
-            $0.trailing.lessThanOrEqualToSuperview().inset(20)
+            $0.top.leading.trailing.equalToSuperview().inset(Constants.inset)
         }
 
-        tagsContainerView.snp.makeConstraints {
-            $0.top.equalTo(titleLabel.snp.bottom).offset(12)
-            $0.leading.trailing.equalToSuperview().inset(20)
-            $0.height.equalTo(0)
-            $0.bottom.equalToSuperview().inset(20)
+        tagsContainer.snp.makeConstraints {
+            $0.top.equalTo(titleLabel.snp.bottom).offset(16)
+            $0.leading.trailing.equalToSuperview().inset(Constants.inset)
+            $0.bottom.equalToSuperview().inset(Constants.inset)
+            tagsContainerHeightConstraint = $0.height.equalTo(Constants.tagHeight).constraint
         }
     }
 
-    public override func layoutSubviews() {
+    // MARK: - Layout
+
+    override func layoutSubviews() {
         super.layoutSubviews()
-        guard !didLayoutTags else { return }
-        layoutTags()
+        updateTagLayout()
     }
 
-    // MARK: - Tag Layout
-
-    private func layoutTags() {
-        let containerWidth = tagsContainerView.bounds.width
+    private func updateTagLayout() {
+        let containerWidth = tagsContainer.bounds.width
         guard containerWidth > 0 else { return }
-        didLayoutTags = true
 
-        var currentX: CGFloat = 0
-        var currentY: CGFloat = 0
+        var x: CGFloat = 0
+        var y: CGFloat = 0
 
-        for keyword in keywords {
-            let tagView = makeTagView(text: keyword)
-            let tagSize = tagView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
-
-            if currentX + tagSize.width > containerWidth, currentX > 0 {
-                currentX = 0
-                currentY += Constants.tagHeight + Constants.lineSpacing
+        for tagView in tagViews {
+            let width = tagWidth(for: tagView)
+            if x + width > containerWidth, x > 0 {
+                x = 0
+                y += Constants.tagHeight + Constants.verticalSpacing
             }
-
-            tagView.frame = CGRect(
-                x: currentX,
-                y: currentY,
-                width: tagSize.width,
-                height: Constants.tagHeight
-            )
-            tagsContainerView.addSubview(tagView)
-            currentX += tagSize.width + Constants.tagSpacing
+            tagView.frame = CGRect(x: x, y: y, width: width, height: Constants.tagHeight)
+            x += width + Constants.horizontalSpacing
         }
 
-        let totalHeight = currentY + Constants.tagHeight
-        tagsContainerView.snp.updateConstraints {
-            $0.height.equalTo(totalHeight)
-        }
+        let totalHeight = tagViews.isEmpty ? Constants.tagHeight : y + Constants.tagHeight
+        guard totalHeight != lastTagsHeight else { return }
+        lastTagsHeight = totalHeight
+        tagsContainerHeightConstraint?.update(offset: totalHeight)
+        setNeedsLayout()
     }
 
+    private func tagWidth(for tagView: UIView) -> CGFloat {
+        guard let label = tagView.subviews.first as? UILabel else { return 80 }
+        return ceil(label.intrinsicContentSize.width) + 28
+    }
+
+    // MARK: - Tag
+
     private func makeTagView(text: String) -> UIView {
         let container = UIView()
-        container.backgroundColor = .sd700
+        container.backgroundColor = .sd850
         container.layer.cornerRadius = Constants.tagHeight / 2
 
         let label = UILabel()
-        label.setText("#\(text)", style: .p14, color: .gray050)
+        label.setText("#\(text)", style: .p14, color: .gray400)
         container.addSubview(label)
 
         label.snp.makeConstraints {
-            $0.leading.trailing.equalToSuperview().inset(Constants.tagHorizontalPadding)
+            $0.leading.trailing.equalToSuperview().inset(14)
             $0.centerY.equalToSuperview()
         }
 
-        container.snp.makeConstraints {
-            $0.height.equalTo(Constants.tagHeight)
-        }
-
         return container
     }
 }

FoodDiary/Presentation/Sources/Insight/InsightViewController.swift

@@ -196,6 +196,7 @@ public final class InsightViewController<Repo: InsightRepository>: UIViewControl
         scrollView.isHidden = false
 
         let sections: [UIView] = [
+            InsightHeaderView(),
             InsightPhotoStatsView(photoStats: insight.photoStats, month: insight.month),
             InsightCategoryStatsView(categoryStats: insight.categoryStats),
             InsightTopMenuView(topMenu: insight.topMenu),