[NL-41]: 마이페이지 UI 구현 (#20)

TTOzzi · web-flow · commit f2aa7628322a · 2025-07-29T23:02:12.000+09:00
* [NL-41]: MyPageViewController 생성

* [NL-41]: 프로필 영역 셀 구현

* [NL-41]: 의견 보내기 영역 셀 구현

* [NL-41]: 설정 메뉴 셀 구현

* [NL-41]: 마이페이지 초안

* [NL-41]: 코드 정리

* [NL-41]: CommonLayer -&gt; Setting 연결 및 modulemap 관련 워닝 제거
diff --git a/Common/Project.swift b/Common/Project.swift
@@ -16,7 +16,13 @@ struct CommonLayer: Layer {
           .target(name: "Lib"),
           .project(target: "CoreLayer", path: "../Core"),
           .project(target: "DesignSystem", path: "../DesignSystem"),
-        ]
+        ],
+        settings: .settings(
+          base: [
+            "DEFINES_MODULE": "NO",
+            "SWIFT_INSTALL_OBJC_HEADER": "NO",
+          ]
+        )
       ),
       .createTarget(name: "Auth"),
       .createTarget(name: "Constant"),
diff --git a/Core/Project.swift b/Core/Project.swift
@@ -14,7 +14,13 @@ struct CoreLayer: Layer {
           .target(name: "NetworkCore"),
           .target(name: "DIInjector"),
           .target(name: "Extension")
-        ]
+        ],
+        settings: .settings(
+          base: [
+            "DEFINES_MODULE": "NO",
+            "SWIFT_INSTALL_OBJC_HEADER": "NO",
+          ]
+        )
       ),
       .createTarget(
         name: "NetworkCore",
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/Ellipse.imageset/Contents.json b/DesignSystem/DesignSystem/Resources/Images.xcassets/Ellipse.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "Ellipse.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/Ellipse.imageset/Ellipse.svg b/DesignSystem/DesignSystem/Resources/Images.xcassets/Ellipse.imageset/Ellipse.svg
@@ -0,0 +1,3 @@
+<svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="1.5" cy="2" r="1.5" fill="#CFD6D9"/>
+</svg>
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/chevron-right-s.imageset/Contents.json b/DesignSystem/DesignSystem/Resources/Images.xcassets/chevron-right-s.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "chevron-right-s.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/chevron-right-s.imageset/chevron-right-s.svg b/DesignSystem/DesignSystem/Resources/Images.xcassets/chevron-right-s.imageset/chevron-right-s.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66699 4.66675L10.0003 8.00008L6.66699 11.3334" stroke="#34363E" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/edit-2.imageset/Contents.json b/DesignSystem/DesignSystem/Resources/Images.xcassets/edit-2.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "edit-2.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/DesignSystem/DesignSystem/Resources/Images.xcassets/edit-2.imageset/edit-2.svg b/DesignSystem/DesignSystem/Resources/Images.xcassets/edit-2.imageset/edit-2.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_171_2465)">
+<path d="M11.333 2.00004C11.5081 1.82494 11.716 1.68605 11.9447 1.59129C12.1735 1.49653 12.4187 1.44775 12.6663 1.44775C12.914 1.44775 13.1592 1.49653 13.3879 1.59129C13.6167 1.68605 13.8246 1.82494 13.9997 2.00004C14.1748 2.17513 14.3137 2.383 14.4084 2.61178C14.5032 2.84055 14.552 3.08575 14.552 3.33337C14.552 3.58099 14.5032 3.82619 14.4084 4.05497C14.3137 4.28374 14.1748 4.49161 13.9997 4.66671L4.99967 13.6667L1.33301 14.6667L2.33301 11L11.333 2.00004Z" stroke="#353C3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_171_2465">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/DesignSystem/Project.swift b/DesignSystem/Project.swift
@@ -14,7 +14,13 @@ struct DesignSystemLayer: Layer {
         dependencies: [
           .external(name: "SwiftRichString"),
           .external(name: "Then"),
-        ]
+        ],
+        settings: .settings(
+          base: [
+            "DEFINES_MODULE": "NO",
+            "SWIFT_INSTALL_OBJC_HEADER": "NO",
+          ]
+        )
       ),
       .createTarget(
         name: "DesignSystemSample",
diff --git a/Feature/Project.swift b/Feature/Project.swift
@@ -18,7 +18,13 @@ struct FeatureLayer: Layer {
           .target(name: "Fortune"),
           .project(target: "CommonLayer", path: "../Common"),
           .project(target : "DesignSystem", path : "../DesignSystem")
-        ]
+        ],
+        settings: .settings(
+          base: [
+            "DEFINES_MODULE": "NO",
+            "SWIFT_INSTALL_OBJC_HEADER": "NO",
+          ]
+        )
       ),
       .createTarget(
         name: "Onboarding",
@@ -27,7 +33,12 @@ struct FeatureLayer: Layer {
         ]
       ),
       .createTarget(name: "Home"),
-      .createTarget(name: "Setting"),
+      .createTarget(
+        name: "Setting",
+        dependencies: [
+          .project(target: "CommonLayer", path: "../Common"),
+        ]
+      ),
       .createTarget(name: "History"),
       .createTarget(name: "Fortune"),
     ]
diff --git a/Feature/Setting/Sources/MyPage/Cells/MyPageMenuCollectionViewCell.swift b/Feature/Setting/Sources/MyPage/Cells/MyPageMenuCollectionViewCell.swift
@@ -0,0 +1,124 @@
+//
+//  MyPageMenuCollectionViewCell.swift
+//  Setting
+//
+//  Created by ttozzi on 7/26/25.
+//
+
+import DesignSystem
+import SnapKit
+import Then
+import UIKit
+
+struct MyPageMenuCollectionViewCellModel {
+  
+  enum Style {
+    case none
+    case icon(UIImage)
+    case text(String)
+  }
+  
+  let style: Style
+  let title: String
+}
+
+final class MyPageMenuCollectionViewCell: UICollectionViewCell {
+  
+  private lazy var contentStackView = UIStackView().then {
+    $0.axis = .horizontal
+    $0.spacing = .zero
+  }
+  private lazy var titleLabel = UILabel().then {
+    $0.style = Typography.Body_14_M
+    $0.numberOfLines = 1
+    $0.setContentHuggingPriority(.init(.zero), for: .horizontal)
+  }
+  private lazy var accessoryStackView = UIStackView().then {
+    $0.axis = .horizontal
+    $0.spacing = .zero
+  }
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupUI()
+  }
+  
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+  
+  private func setupUI() {
+    backgroundColor = .clear
+    contentStackView.backgroundColor = .clear
+    
+    contentView.addSubview(contentStackView)
+    contentStackView.snp.makeConstraints { make in
+      make.horizontalEdges.equalToSuperview().inset(20)
+      make.centerY.equalToSuperview()
+    }
+    
+    contentStackView.addArrangedSubview(titleLabel)
+    contentStackView.addArrangedSubview(accessoryStackView)
+  }
+  
+  func update(with cellModel: MyPageMenuCollectionViewCellModel) {
+    resetAccessoryStackView()
+    switch cellModel.style {
+    case .none:
+      break
+    case .icon(let image):
+      let imageView = UIImageView(image: image.withRenderingMode(.alwaysTemplate))
+      imageView.tintColor = STColors.gray5.color
+      imageView.contentMode = .scaleAspectFit
+      imageView.snp.makeConstraints { make in
+        make.size.equalTo(24)
+      }
+      accessoryStackView.addArrangedSubview(imageView)
+    case .text(let text):
+      let textLabel = UILabel().then {
+        $0.style = Typography.Body_14_M
+        $0.textColor = STColors.primary2.color
+      }
+      textLabel.styledText = text
+      accessoryStackView.addArrangedSubview(textLabel)
+    }
+    titleLabel.styledText = cellModel.title
+  }
+  
+  private func resetAccessoryStackView() {
+    accessoryStackView.arrangedSubviews.forEach {
+      accessoryStackView.removeArrangedSubview($0)
+    }
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview {
+  let stackView = UIStackView().then {
+    $0.axis = .vertical
+    $0.spacing = .zero
+  }
+  let cellModels = [
+    MyPageMenuCollectionViewCellModel(
+      style: .none,
+      title: "none"
+    ),
+    MyPageMenuCollectionViewCellModel(
+      style: .icon(STImages.chevronRightS.image),
+      title: "icon"
+    ),
+    MyPageMenuCollectionViewCellModel(
+      style: .text("1.0.0"),
+      title: "text"
+    )
+  ]
+  cellModels.forEach {
+    let cell = MyPageMenuCollectionViewCell()
+    cell.snp.makeConstraints { make in
+      make.height.equalTo(48)
+    }
+    cell.update(with: $0)
+    stackView.addArrangedSubview(cell)
+  }
+  return stackView
+}
diff --git a/Feature/Setting/Sources/MyPage/Cells/MyProfileInfoCollectionViewCell.swift b/Feature/Setting/Sources/MyPage/Cells/MyProfileInfoCollectionViewCell.swift
@@ -0,0 +1,120 @@
+//
+//  MyProfileInfoCollectionViewCell.swift
+//  Setting
+//
+//  Created by ttozzi on 7/26/25.
+//
+
+import DesignSystem
+import SnapKit
+import Then
+import UIKit
+
+struct MyProfileInfoCollectionViewCellModel {
+  let nickname: String
+  // let profileImageURL: URL?
+  let gender: String // TODO: 데이터 타입 확인 필요
+  let birthDate: String // TODO: 데이터 타입 확인 필요
+  let birthTime: String
+}
+
+final class MyProfileInfoCollectionViewCell: UICollectionViewCell {
+  
+  private lazy var contentStackView = UIStackView().then {
+    $0.spacing = .zero
+    $0.axis = .vertical
+    $0.alignment = .center
+  }
+  private lazy var profileImageView = UIImageView().then {
+    $0.layer.cornerRadius = 44
+    $0.clipsToBounds = true
+  }
+  private lazy var nicknameStackView = UIStackView().then {
+    $0.axis = .horizontal
+    $0.spacing = 4
+  }
+  private lazy var nicknameLabel = UILabel().then {
+    $0.style = Typography.Heading_20_B
+  }
+  private lazy var editButton = UIButton().then {
+    let image = STImages.edit2.image.withRenderingMode(.alwaysTemplate)
+    $0.setImage(image, for: .normal)
+    $0.tintColor = STColors.gray5.color
+  }
+  private lazy var descriptionStackView = UIStackView().then {
+    $0.axis = .horizontal
+    $0.alignment = .center
+    $0.spacing = 4
+  }
+  private lazy var genderLabel = UILabel().then {
+    $0.style = Typography.Caption_12_B
+  }
+  private lazy var birthDateLabel = UILabel().then {
+    $0.style = Typography.Caption_12_B
+  }
+  private lazy var birthTimeLabel = UILabel().then {
+    $0.style = Typography.Caption_12_B
+  }
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupUI()
+    profileImageView.backgroundColor = .gray // TODO: 임시
+  }
+  
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+  
+  private func setupUI() {
+    backgroundColor = .clear
+    contentStackView.backgroundColor = .clear
+    
+    contentView.addSubview(contentStackView)
+    contentStackView.snp.makeConstraints { make in
+      make.edges.equalToSuperview().inset(20)
+    }
+    
+    contentStackView.addArrangedSubview(profileImageView)
+    contentStackView.setCustomSpacing(16, after: profileImageView)
+    profileImageView.snp.makeConstraints { make in
+      make.size.equalTo(88)
+    }
+    
+    contentStackView.addArrangedSubview(nicknameStackView)
+    contentStackView.setCustomSpacing(8, after: nicknameStackView)
+    nicknameStackView.addArrangedSubview(nicknameLabel)
+    nicknameStackView.addArrangedSubview(editButton)
+    
+    contentStackView.addArrangedSubview(descriptionStackView)
+    let descriptionLabels = [genderLabel, birthDateLabel, birthTimeLabel]
+    descriptionLabels.enumerated().forEach { index, label in
+      descriptionStackView.addArrangedSubview(label)
+      if index < descriptionLabels.count - 1 {
+        let ellipse = UIImageView(image: STImages.ellipse.image)
+        ellipse.tintColor = STColors.gray6.color
+        descriptionStackView.addArrangedSubview(ellipse)
+      }
+    }
+  }
+  
+  func update(with cellModel: MyProfileInfoCollectionViewCellModel) {
+    nicknameLabel.styledText = "\(cellModel.nickname) 님"
+    genderLabel.styledText = cellModel.gender
+    birthDateLabel.styledText = cellModel.birthDate
+    birthTimeLabel.styledText = cellModel.birthTime
+  }
+}
+
+@available(iOS 17.0, *)
+#Preview {
+  let cellModel = MyProfileInfoCollectionViewCellModel(
+    nickname: "콩떡",
+    gender: "여",
+    birthDate: "1999-12-25",
+    birthTime: "01:00 ~ 02:59"
+  )
+  let cell = MyProfileInfoCollectionViewCell()
+  cell.update(with: cellModel)
+  return cell
+}
diff --git a/Feature/Setting/Sources/MyPage/Cells/SendFeedbackCollectionViewCell.swift b/Feature/Setting/Sources/MyPage/Cells/SendFeedbackCollectionViewCell.swift
diff --git a/Feature/Setting/Sources/MyPage/MyPageSectionBackgroundView.swift b/Feature/Setting/Sources/MyPage/MyPageSectionBackgroundView.swift
diff --git a/Feature/Setting/Sources/MyPage/MyPageViewController.swift b/Feature/Setting/Sources/MyPage/MyPageViewController.swift
diff --git a/Feature/Setting/Sources/empty.swift b/Feature/Setting/Sources/empty.swift
