[Feat] MyPageView UI 구현

HappyAnding/HappyAnding/Assets.xcassets/Icons/Contents.json

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

HappyAnding/HappyAnding/Assets.xcassets/Icons/loved.imageset/Contents.json

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

HappyAnding/HappyAnding/Assets.xcassets/Icons/new.imageset/Contents.json

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

HappyAnding/HappyAnding/Assets.xcassets/Icons/ranked.imageset/Contents.json

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

HappyAnding/HappyAnding/Assets.xcassets/Profile/Contents.json

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

HappyAnding/HappyAnding/Assets.xcassets/Profile/profile_ex.imageset/Contents.json

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

HappyAnding/HappyAnding/Extensions/SCZ+Color.swift

@@ -73,7 +73,7 @@ struct SCZColor {
         "Pink": Pink(),
         "Purple": Purple(),
         "LightPurple": Lavendar(),
-        "Silver": Silver(),
+        "Gray": Silver(),
         "Khaki": Khaki(),
         "Brown": Brown()
     ]

HappyAnding/HappyAnding/Model/SectionType.swift

@@ -66,44 +66,86 @@ enum SectionType {
         }
     }
 
-    func fetchTitleIcon() -> some View {
+    func fetchTitleImage() -> some View {
         switch self {
         case .recent:
-            return Image(systemName: self.icon)
+            return Image("new")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
                     Color(hexString: "E4C139"),
                     Color(hexString: "E4C139")
                 )
+                .shadow(color: Color(hexString: "E5C239").opacity(0.36),
+                            radius: 8,
+                            x: 0,
+                            y: 0)
         case .download:
-            return Image(systemName: self.icon)
+            return Image("ranked")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
-                    Color(hexString: "404040", opacity: 0.48),
-                    Color(hexString: "404040", opacity: 0.48)
+                    SCZColor.CharcoalGray.opacity48,
+                    SCZColor.CharcoalGray.opacity48
                 )
+                .shadow(color: Color.black.opacity(0.16),
+                            radius: 8,
+                            x: 0,
+                            y: 0)
         case .popular:
-            return Image(systemName: self.icon)
+            return Image("loved")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
                     SCZColor.SCZBlue.opacity88,
                     SCZColor.SCZBlue.opacity88
                 )
+                .shadow(color: SCZColor.SCZBlue.opacity48,
+                            radius: 8,
+                            x: 0,
+                            y: 0)
         case .myShortcut:
             return Image(systemName: "square.text.square.fill")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
                     SCZColor.CharcoalGray.opacity64,
                     Color.white
                 )
+                .shadow(color: Color.clear,
+                            radius: 0,
+                            x: 0,
+                            y: 0)
         case .myDownloadShortcut:
             return Image(systemName: "arrow.down.square.fill")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
                     Color.white,
                     SCZColor.CharcoalGray.opacity24
                 )
+                .shadow(color: Color.clear,
+                            radius: 0,
+                            x: 0,
+                            y: 0)
         case .myLovingShortcut:
-            return Image(systemName: "heart.fill")
+            return Image("loved")
+                .resizable()
+                .scaledToFit()
+                .frame(width: 19)
                 .foregroundStyle(
                     SCZColor.SCZBlue.opacity88,
                     SCZColor.SCZBlue.opacity88
                 )
+                .shadow(color: Color.black.opacity(0.16),
+                            radius: 8,
+                            x: 0,
+                            y: 0)
         }
     }
 }

HappyAnding/HappyAnding/TextLiteral.swift

@@ -224,7 +224,7 @@ enum TextLiteral {
     static let signInWithAppleViewUseWithoutSignIn: String = "로그인 없이 둘러보기"
 
     // MARK: - MyPageView
-    static let myPageViewTitle: String = "프로필"
+    static let myPageViewTitle: String = "나의 공간"
     static let myPageViewMyCuration: String = "내가 작성한 추천 모음집"
     static let myPageViewLikedShortcuts: String = "내가 좋아요한"
     static let myPageViewDownloadedShortcuts: String = "다운로드한"

HappyAnding/HappyAnding/ViewModel/MyPageViewModels/MyPageViewModel.swift

@@ -0,0 +1,50 @@
+//
+//  MyPageViewModel.swift
+//  HappyAnding
+//
+//  Created by JeonJimin on 4/15/24.
+//
+
+import Foundation
+import Combine
+
+final class MyPageViewModel: ObservableObject {
+    private let shortcutsZipViewModel = ShortcutsZipViewModel.share
+    private var cancellables = Set<AnyCancellable>()
+
+    @Published var myShortcuts: [Shortcuts] = []
+    @Published var myDownloadShortcuts: [Shortcuts] = []
+    @Published var myLovingShortcuts: [Shortcuts] = []
+
+    @Published var isMyDownloadShortcutFolded = false {
+        didSet {
+            UserDefaults.standard.set(isMyDownloadShortcutFolded, forKey: "isMyDownloadShortcutFolded")
+        }
+    }
+    @Published var isMyLovingShortcutFolded = false {
+        didSet {
+            UserDefaults.standard.set(isMyLovingShortcutFolded, forKey: "isMyLovingShortcutFolded")
+        }
+    }
+
+    init() {
+        shortcutsZipViewModel.$shortcutsMadeByUser
+            .sink { [weak self] in self?.myShortcuts = $0 }
+            .store(in: &cancellables)
+
+        shortcutsZipViewModel.$shortcutsUserDownloaded
+            .sink { [weak self] in self?.myDownloadShortcuts = $0 }
+            .store(in: &cancellables)
+
+        shortcutsZipViewModel.$shortcutsUserLiked
+            .sink { [weak self] in self?.myLovingShortcuts = $0 }
+            .store(in: &cancellables)
+
+        self.isMyDownloadShortcutFolded = UserDefaults.standard.bool(forKey: "isMyDownloadShortcutFolded")
+        self.isMyLovingShortcutFolded = UserDefaults.standard.bool(forKey: "isMyLovingShortcutFolded")
+    }
+
+    func fetchUserInfo() -> String {
+        shortcutsZipViewModel.userInfo?.nickname ?? TextLiteral.defaultUser
+    }
+}

HappyAnding/HappyAnding/Views/Components/CardSection.swift

@@ -10,31 +10,31 @@ import SwiftUI
 struct CardSection: View {
     let type: SectionType
     let shortcuts: [Shortcuts]
-
+    let horizontalPadding: CGFloat = 16
     var body: some View {
         VStack(alignment: .leading, spacing: 6) {
             HStack {
-                type.fetchTitleIcon()
+                type.fetchTitleImage()
                 Text(type.title)
                     .foregroundStyle(SCZColor.Basic)
             }
-                .font(.system(size: 20, weight: .semibold))
-                .padding(.horizontal, 13)
+            .font(.system(size: 20, weight: .semibold))
+            .padding(.horizontal, horizontalPadding)
             ScrollView(.horizontal, showsIndicators: false) {
                 HStack(spacing: 6) {
                     Rectangle()
                         .foregroundStyle(Color.clear)
-                        .frame(width: 13)
+                        .frame(width: horizontalPadding-6)
                     ForEach(Array(shortcuts.enumerated()).prefix(5), id: \.offset) { index, shortcut in
                         switch type {
                         case .recent:
                             UnorderedCell(shortcut: shortcut)
                         default:
-                            OrderedCell(type: .download, index: index, shortcut: shortcut)
+                            OrderedCell(type: .download, index: index+1, shortcut: shortcut)
                         }
                     }
                     ExpandedCell(type: type, shortcuts: shortcuts)
-                        .padding(.trailing, 13)
+                        .padding(.trailing, horizontalPadding)
                 }
             }
         }

HappyAnding/HappyAnding/Views/Components/ExploreCell.swift

@@ -48,6 +48,7 @@ struct OrderedCell: View {
         .background( SCZColor.colors[shortcut.color]?.color(for: colorScheme).fillGradient() ?? Color.clear.toGradient())
         .cornerRadius(16)
         .roundedBorder(cornerRadius: 16, color: Color.white, isNormalBlend: true, opacity: 0.12)
+        .navigationLinkRouter(data: shortcut)
     }
 
     private func formatNumber(_ number: Int) -> String {
@@ -87,6 +88,7 @@ struct UnorderedCell: View{
         )
         .cornerRadius(16)
         .dropShadow()
+        .navigationLinkRouter(data: shortcut)
     }
 }
 
@@ -95,23 +97,25 @@ struct ExpandedCell: View {
     let shortcuts: [Shortcuts]
 
     var body: some View {
-        NavigationLink {
-            ExpandedRankingView(type: type, shortcuts: shortcuts)
-        } label: {
-            VStack(alignment: .center, spacing: 4) {
-                Image(systemName: "rectangle.portrait.on.rectangle.portrait.angled.fill")
-                Text("더보기")
-            }
-            .foregroundStyle(Color.white.opacity(0.88))
-            .font(.system(size: 15, weight: .semibold))
-            .frame(width: 108, height: 144, alignment: .center)
-            .background(SCZColor.CharcoalGray.opacity08)
-            .cornerRadius(12)
-            .overlay(
-                RoundedRectangle(cornerRadius: 12)
-                    .strokeBorder(Color.white.opacity(0.12), lineWidth: 2)
-            )
-            .shadow(color: SCZColor.CharcoalGray.opacity04, radius: 4, x: 0, y: 2)
+        VStack(alignment: .center, spacing: 4) {
+            Image(systemName: "rectangle.portrait.on.rectangle.portrait.angled.fill")
+            Text("더보기")
         }
+        .foregroundStyle(SCZColor.CharcoalGray.opacity64)
+        .font(.system(size: 15, weight: .semibold))
+        .frame(width: 108, height: 144, alignment: .center)
+        .background(
+            ZStack {
+                Color.white.opacity(0.24)
+                SCZColor.CharcoalGray.opacity08
+            }
+        )
+        .cornerRadius(12)
+        .overlay(
+            RoundedRectangle(cornerRadius: 12)
+                .strokeBorder(Color.white.opacity(0.12), lineWidth: 2)
+        )
+        .shadow(color: SCZColor.CharcoalGray.opacity04, radius: 4, x: 0, y: 2)
+        .navigationLinkRouter(data: type)
     }
 }