From 9f3eb8a9957e80624b7a98ea85f407c68113e42c Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Tue, 30 Apr 2024 23:33:09 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8B=9C=EB=A6=AC=EC=A6=88=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=ED=85=9C=20-=20=EC=83=81=EB=8B=A8=EC=9D=84=20?=
 =?UTF-8?q?=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EC=A0=95=EB=A0=AC?=
 =?UTF-8?q?=EC=9D=B4=20=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Content/Series/SeriesListAllView.swift    |  4 +-
 .../Series/UserProfileSeriesView.swift        |  2 +-
 .../Profile/UserProfileCreatorView.swift      |  4 +-
 .../UI/Component/SeriesListItemView.swift     | 96 ++++++++++---------
 4 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/SodaLive/Sources/Content/Series/SeriesListAllView.swift b/SodaLive/Sources/Content/Series/SeriesListAllView.swift
index c61fb9f..31b42ef 100644
--- a/SodaLive/Sources/Content/Series/SeriesListAllView.swift
+++ b/SodaLive/Sources/Content/Series/SeriesListAllView.swift
@@ -25,10 +25,10 @@ struct SeriesListAllView: View {
                 DetailNavigationBar(title: "시리즈 전체보기")
                 
                 ScrollView(.vertical, showsIndicators: false) {
-                    LazyVGrid(columns: columns, spacing: 13.3) {
+                    LazyVGrid(columns: columns, spacing: 16.7) {
                         ForEach(0..<viewModel.seriesList.count, id: \.self) { index in
                             let item = viewModel.seriesList[index]
-                            SeriesListItemView(item: item)
+                            SeriesListItemView(itemWidth: (screenSize().width - 40) / 3, item: item)
                                 .contentShape(Rectangle())
                                 .onTapGesture {
                                     AppState.shared
diff --git a/SodaLive/Sources/Explorer/Profile/Series/UserProfileSeriesView.swift b/SodaLive/Sources/Explorer/Profile/Series/UserProfileSeriesView.swift
index 73542cc..4a5ffc4 100644
--- a/SodaLive/Sources/Explorer/Profile/Series/UserProfileSeriesView.swift
+++ b/SodaLive/Sources/Explorer/Profile/Series/UserProfileSeriesView.swift
@@ -30,7 +30,7 @@ struct UserProfileSeriesView: View {
             }
             
             ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 13.3) {
+                HStack(alignment: .top, spacing: 13.3) {
                     ForEach(0..<items.count, id: \.self) {
                         let item = items[$0]
                         SeriesListBigItemView(item: item)
diff --git a/SodaLive/Sources/Explorer/Profile/UserProfileCreatorView.swift b/SodaLive/Sources/Explorer/Profile/UserProfileCreatorView.swift
index 2303efd..d14793b 100644
--- a/SodaLive/Sources/Explorer/Profile/UserProfileCreatorView.swift
+++ b/SodaLive/Sources/Explorer/Profile/UserProfileCreatorView.swift
@@ -49,7 +49,7 @@ struct UserProfileCreatorView: View {
                             .padding(.horizontal, 16)
                             .overlay(
                                 RoundedRectangle(cornerRadius: 16.7)
-                                    .stroke(Color(hex: "9970ff"), lineWidth: 1)
+                                    .stroke(Color.button, lineWidth: 1)
                             )
                             .padding(.top, 13.3)
                             .onTapGesture {
@@ -79,7 +79,7 @@ struct UserProfileCreatorView: View {
             
             Text(creator.tags.map { "#\($0)" }.joined(separator: " "))
                 .font(.custom(Font.medium.rawValue, size: 13.3))
-                .foregroundColor(Color(hex: "9970ff"))
+                .foregroundColor(Color.button)
                 .padding(.top, creator.tags.count > 0 ? 13.3 : 0)
             
             HStack(spacing: 10) {
diff --git a/SodaLive/Sources/UI/Component/SeriesListItemView.swift b/SodaLive/Sources/UI/Component/SeriesListItemView.swift
index 1ebcd1e..48687ed 100644
--- a/SodaLive/Sources/UI/Component/SeriesListItemView.swift
+++ b/SodaLive/Sources/UI/Component/SeriesListItemView.swift
@@ -11,67 +11,73 @@ import Kingfisher
 
 struct SeriesListItemView: View {
     
+    let itemWidth: CGFloat
     let item: SeriesListItem
     
     var body: some View {
-        VStack(alignment: .leading, spacing: 8) {
-            ZStack {
-                KFImage(URL(string: item.coverImage))
-                    .resizable()
-                    .scaledToFill()
-                    .cornerRadius(5)
-                    .clipped()
-                
-                LinearGradient(
-                    colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)],
-                    startPoint: .top,
-                    endPoint: .bottom
-                )
-                
-                VStack(alignment: .leading, spacing: 0) {
-                    HStack(spacing: 3.3) {
-                        if !item.isComplete && item.isNew {
-                            SeriesItemBadgeView(title: "신작", backgroundColor: .button)
-                        }
-                        
-                        if item.isComplete {
-                            SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
-                        }
-                        
-                        if item.isPopular {
-                            SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
+        HStack(alignment: .top) {
+            VStack(alignment: .leading, spacing: 8) {
+                ZStack {
+                    KFImage(URL(string: item.coverImage))
+                        .resizable()
+                        .scaledToFill()
+                        .cornerRadius(5)
+                        .clipped()
+                    
+                    LinearGradient(
+                        colors: [Color.black.opacity(0.1), Color.black.opacity(0.8)],
+                        startPoint: .top,
+                        endPoint: .bottom
+                    )
+                    
+                    VStack(alignment: .leading, spacing: 0) {
+                        HStack(spacing: 3.3) {
+                            if !item.isComplete && item.isNew {
+                                SeriesItemBadgeView(title: "신작", backgroundColor: .button)
+                            }
+                            
+                            if item.isComplete {
+                                SeriesItemBadgeView(title: "완결", backgroundColor: Color(hex: "002abd"))
+                            }
+                            
+                            if item.isPopular {
+                                SeriesItemBadgeView(title: "인기", backgroundColor: Color(hex: "ec6033"))
+                            }
+                            
+                            Spacer()
                         }
                         
                         Spacer()
-                    }
-                    
-                    Spacer()
-                    
-                    HStack {
-                        Spacer()
                         
-                        SeriesItemBadgeView(title: "총 \(item.numberOfContent)화", backgroundColor: Color.gray33.opacity(0.7))
+                        HStack {
+                            Spacer()
+                            
+                            SeriesItemBadgeView(title: "총 \(item.numberOfContent)화", backgroundColor: Color.gray33.opacity(0.7))
+                        }
                     }
+                    .padding(3.3)
                 }
-                .padding(3.3)
+                .frame(width: itemWidth, height: itemWidth * 432 / 306)
+                
+                Text(item.title)
+                    .font(.custom(Font.medium.rawValue, size: 12))
+                    .foregroundColor(Color.grayee)
+                    .lineLimit(2)
+                    .frame(width: itemWidth, alignment: .leading)
+                
+                Text(item.publishedDaysOfWeek)
+                    .font(.custom(Font.medium.rawValue, size: 11))
+                    .foregroundColor(Color.gray77)
+                    .frame(width: itemWidth, alignment: .leading)
             }
-            
-            Text(item.title)
-                .font(.custom(Font.medium.rawValue, size: 12))
-                .foregroundColor(Color.grayee)
-                .lineLimit(2)
-                .frame(width: (screenSize().width - 60) / 3, alignment: .leading)
-            
-            Text(item.publishedDaysOfWeek)
-                .font(.custom(Font.medium.rawValue, size: 11))
-                .foregroundColor(Color.gray77)
+            .frame(width: itemWidth)
         }
-        .frame(width: (screenSize().width - 60) / 3)
     }
 }
 
 #Preview {
     SeriesListItemView(
+        itemWidth: CGFloat(294 / 3),
         item: SeriesListItem(
             seriesId: 1,
             title: "제목, 관심사,프로필+방장, 참여인원(어딘가..)",