Merge pull request #27 from MarketPlace-O2O-Platform/Design#26/MyPageCouponCell

[Refactor] 받은 쿠폰함의 쿠폰 디자인 변경

Author: yena0213

MarketPlace/API/Service/NetworkService.swift

@@ -21,7 +21,6 @@ protocol NetworkServiceProtocol {
 final class NetworkService: NetworkServiceProtocol {
     func request<T: Decodable>(_ endpoint: Endpoint) async -> NetworkResult<T>  {
         var request = endpoint.urlRequest
-        print(request.url)
 
         if let token = KeychainManager.getToken() {
             request.addValue("Bearer \(token)", forHTTPHeaderField: "Authorization")

MarketPlace/Assets.xcassets/myCoupon.imageset/Contents.json

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

MarketPlace/Assets.xcassets/myCoupon.imageset/쿠폰.png

@@ -98,6 +98,7 @@ final class MarketService: MarketServiceProtocol {
         return await networkService.request(
             MarketEndpoint.postMarketRequest(name: name, address: address)
         )
+    }
 
     // MARK: - 주소별 매장 조회 API
     func fetchMarketsWithAddress(lastPageIndex: Int?, category: String?, pageSize: Int?) async -> NetworkResult<APIResDto<MarketResDto<MarketModel>>> {

MarketPlace/Service/MarketService.swift

@@ -19,7 +19,7 @@ struct ImageTextOverlay: View {
                 ForEach(texts.indices, id: \.self) { index in
                     Text(texts[index])
                         .foregroundColor(Color.white)
-                        .pretendardFont(size: index == 0 || index == 2 ? 18 : 26, weight: index == 1 ? .heavy : .bold)
+                        .pretendardFont(size: index == 0 || index == 2 ? 18 : 26, weight: .semibold)
                         .lineLimit(index == 1 ? 2 : 1)
                         .lineSpacing(index == 0 || index == 1 ? 33.8 : 3.12)
                         .padding(.leading, 5)

MarketPlace/View/Main/Components/ImageTextOverlay.swift

@@ -7,9 +7,11 @@ struct MarketCouponListView: View {
     @Binding private var selectedCouponId: Int
     @Binding private var showToast: Bool
     @Binding private var toastMessage: String
-    
+
+    @State private var currentIndex: Int = 0
+
     private let marketId: Int
-    
+
     init(
         coupons: Binding<[CouponValidModel]>,
         isPopupVisible: Binding<Bool>,
@@ -27,50 +29,74 @@ struct MarketCouponListView: View {
     }
 
     var body: some View {
-        ZStack {
-            ScrollView(.horizontal, showsIndicators: false) {
-                HStack(spacing: 8) {
-                    ForEach($coupons) { $coupon in
+        VStack(alignment: .leading, spacing: 10) {
+            TabView(selection: $currentIndex) {
+                ForEach(Array($coupons.enumerated()), id: \.element.id) { index, $coupon in
+                    ZStack(alignment: .leading) {
                         Image("couponDetail")
                             .resizable()
                             .aspectRatio(contentMode: .fill)
                             .frame(height: 93)
-                            .overlay(alignment: .leading) {
-                                VStack(alignment: .leading, spacing: 5) {
-                                    Text(coupon.couponName)
-                                        .pretendardFont(size: 16, weight: .semibold)
-                                        .foregroundColor(.white)
-                                        .lineLimit(2)
-                                        .multilineTextAlignment(.leading)
-                                        .frame(maxWidth: 200, alignment: .leading)
-                                    
-                                    Text(coupon.deadLine.toKoreanDateFormat())
-                                        .pretendardFont(size: 14, weight: .regular)
-                                        .foregroundColor(.white)
-                                }
-                                .padding(.leading, 25)
-                                .padding(.vertical, 5)
-                                .opacity(coupon.isAvailable ? 1.0 : 0.5)
-                                .onTapGesture {
-                                    if coupon.isAvailable && !coupon.isMemberIssued {
-                                        selectedCouponId = coupon.id
-                                        isPopupVisible = true
-                                    } else if coupon.isMemberIssued {
-                                        toastMessage = "이미 발급 완료된 쿠폰입니다"
-                                        showToast = true
-                                    } else if !coupon.isAvailable {
-                                        toastMessage = "기한이 만료되었습니다"
-                                        showToast = true
-                                    }
-                                }
-                            }
+
+                        VStack(alignment: .leading, spacing: 5) {
+                            Text(coupon.couponName)
+                                .pretendardFont(size: 16, weight: .semibold)
+                                .foregroundColor(.white)
+                                .lineLimit(2)
+                                .multilineTextAlignment(.leading)
+                                .frame(maxWidth: 200, alignment: .leading)
+
+                            Text(coupon.deadLine.toKoreanDateFormat())
+                                .pretendardFont(size: 14, weight: .regular)
+                                .foregroundColor(.white)
+                        }
+                        .padding(.leading, 25)
+                        .padding(.vertical, 5)
+                        .opacity(coupon.isAvailable ? 1.0 : 0.5)
+                    }
+                    .padding(.horizontal, 16)
+                    .tag(index)
+                    .onTapGesture {
+                        if coupon.isAvailable && !coupon.isMemberIssued {
+                            selectedCouponId = coupon.id
+                            isPopupVisible = true
+                        } else if coupon.isMemberIssued {
+                            toastMessage = "이미 발급 완료된 쿠폰입니다"
+                            showToast = true
+                        } else if !coupon.isAvailable {
+                            toastMessage = "기한이 만료되었습니다"
+                            showToast = true
+                        }
                     }
-                }.padding(.horizontal, 16)
+                }
+            }
+            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
+            .frame(height: 110)
+
+            HStack {
+                Spacer()
+                HStack(spacing: 6) {
+                    ForEach(0..<coupons.count, id: \.self) { i in
+                        Circle()
+                            .fill(i == currentIndex ? Color.primary : Color.secondary.opacity(0.4))
+                            .frame(width: 5, height: 5)
+                    }
+                }
+                Spacer()
             }
+            
+            Text(coupons.indices.contains(currentIndex) ? "\(coupons[currentIndex].couponDescription)\n쿠폰 다운로드 시점으로부터 3일 이내로 미사용 시 소멸 예정" : "")
+                .pretendardFont(size: 13, weight: .regular)
+                .foregroundColor(.gray)
+                .padding(.top, 10)
+                .padding(.leading, 20)
+                .animation(.easeInOut, value: currentIndex)
         }
     }
 }
 
+
+
 struct ToastView: View {
     let message: String
     @Binding var isShowing: Bool

MarketPlace/View/Main/Components/MarketCouponListView.swift

@@ -79,11 +79,6 @@ struct MarketDetailView: View {
                                         .pretendardFont(size: 13, weight: .semibold)
                                         .padding(.leading, 16)
                                 }
-                                
-                                Text(shop.description)
-                                    .pretendardFont(size: 13, weight: .regular)
-                                    .foregroundColor(.gray)
-                                    .padding(.leading, 16)
                             }
                             .zIndex(10)
 

MarketPlace/View/Main/View/MarketDetailView.swift

@@ -5,53 +5,64 @@ struct MyCouponCell: View {
     var onTap: () -> Void
 
     var body: some View {
-        Image(viewModel.couponStatus==CouponStatus.issued ? "myCoupon_canuse" : "myCoupon_used")
+        Image("myCoupon")
             .resizable()
             .scaledToFit()
-            .frame(width: 335, height: 102)
+            .frame(width: 335)
             .overlay {
-                HStack(spacing: 0) {
-                    ShimmeringAsyncImage(
-                        url: URL(
-                            string: URLManager.shared.baseStringURL + "image/" + viewModel.coupon.thumbnail
-                        ),
-                        cornerRadius: 0,
-                        width: 102,
-                        height: 102
-                    )
-                    
-                    VStack(alignment: .leading, spacing: 4) {
-                        Text(viewModel.coupon.couponName)
-                            .pretendardFont(size: 18, weight: .medium)
-                            .font(.headline)
-                            .lineLimit(1)
-                            .foregroundColor(Color(hex: "#121212"))
-                        
-                        Text(viewModel.coupon.description)
-                            .pretendardFont(size: 15, weight: .semibold)
-                            .lineLimit(1)
-                            .foregroundColor(Color(red: 0.07, green: 0.07, blue: 0.07))
+                VStack(alignment: .leading) {
+                    HStack(alignment: .top, spacing: 12) {
+                        ShimmeringAsyncImage(
+                            url: URL(
+                                string: URLManager.shared.baseStringURL + "image/" + viewModel.coupon.thumbnail
+                            ),
+                            cornerRadius: 4,
+                            width: 60,
+                            height: 65
+                        )
 
-                        Text(viewModel.formattedDeadline)
-                            .pretendardFont(size: 13, weight: .regular)
-                            .foregroundColor(Color(red: 0.33, green: 0.33, blue: 0.33))
+                        VStack(alignment: .leading, spacing: 7) {
+                            Text("하노이키친 인천대점")
+                                .pretendardFont(size: 14, weight: .regular)
+                                .lineLimit(1)
+                                .foregroundStyle(Color(hex: "#727272"))
+                            
+                            Text(viewModel.coupon.couponName)
+                                .pretendardFont(size: 24, weight: .medium)
+                                .lineLimit(1)
+                                .foregroundStyle(Color(hex: "#303030"))
+                        }.padding(.top, 5)
                     }
-                    .padding(.horizontal, 12)
-                    .frame(width: 165, alignment: .leading)
-                    
-                    Spacer()
+                    .padding(.top, 10)
+                    .padding(.horizontal, 20)
 
                     Button(action: {
                         if viewModel.canUse {
                             onTap()
                         }
-                    }) {
+                    }, label: {
                         Text(viewModel.couponStatusText)
-                            .pretendardFont(size: 13, weight: .bold)
-                            .foregroundStyle(Color.white)
-                    }.disabled(!viewModel.canUse)
+                            .foregroundStyle(viewModel.couponStatus==CouponStatus.issued ? .white : Color(hex: "#727272"))
+                            .pretendardFont(size: 14, weight: .semibold)
+                            .padding(.vertical, 15)
+                            .frame(maxWidth: .infinity)
+                            .background(
+                                RoundedRectangle(cornerRadius: 4)
+                                    .fill(viewModel.couponStatus==CouponStatus.issued ? Color(hex: "#303030") : Color(hex: "#E0E0E0"))
+                            )
+                    })
+                    .padding(.horizontal ,20)
+                    .disabled(!viewModel.canUse)
 
-                    Spacer()
+                    Button(action: {
+                        
+                    }, label: {
+                        Text("쿠러미 카카오채널로 영수증 전송")
+                            .pretendardFont(size: 14, weight: .regular)
+                            .foregroundStyle(Color(hex: "#727272"))
+                    })
+                    .padding(.leading, 20)
+                    .padding(.top, 20)
                 }
             }
     }

MarketPlace/View/MyPage/Components/MyCouponCell.swift

@@ -39,9 +39,9 @@ struct MyCouponView: View {
                         }
                     }
                     .frame(maxWidth: .infinity)
-                    .padding(.top, 20)
+                    .padding(.vertical, 20)
                 }
-                .background(Color.white)
+                .background(Color(hex: "#FAFAFA"))
             }
 
             if showingPopup {

MarketPlace/View/MyPage/View/MyCouponView.swift

@@ -2,7 +2,6 @@ import Foundation
 import SwiftUI
 
 struct MyPageView: View {
-    @State private var selectedCategory: Int = 0
     @StateObject private var viewModel = MyPageViewModel()
     @EnvironmentObject var loginVM: LoginViewModel
 
@@ -23,7 +22,6 @@ struct MyPageView: View {
                 .padding(.horizontal, 20)
                 .padding(.bottom, 8)
 
-                CircleCategoryTabView(selectedTab: $selectedCategory)
                 FavoriteShopListView(favoriteMarkets: $viewModel.favoriteMarkets)
             }
             .background(Color.white)
@@ -33,11 +31,6 @@ struct MyPageView: View {
                     await viewModel.fetchMemberInfo()
                 }
             }
-            .onChange(of: selectedCategory) {
-                Task{
-                    await viewModel.fetchFavoriteMarket(lastModifiedAt: nil, pageSize: nil)
-                }
-            }
             .overlay {
                 CustomAlertView(isPresented: $showLogoutAlert, title: "로그아웃 하시겠습니까?", buttonTitle: "로그아웃") {
                     loginVM.logout()