feat: 🎸 purchase ui

Packages/BeMatch/Sources/MembershipFeature/Assets.xcassets/Contents.json

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

Packages/BeMatch/Sources/MembershipFeature/Assets.xcassets/membership-benefit.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "membership-benefit.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Packages/BeMatch/Sources/MembershipFeature/Assets.xcassets/purchase-header.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "purchase-header.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Packages/BeMatch/Sources/MembershipFeature/Localizable.xcstrings

@@ -76,6 +76,9 @@
           }
         }
       }
+    },
+    "続ける - ¥500円/週" : {
+
     }
   },
   "version" : "1.0"

Packages/BeMatch/Sources/MembershipFeature/MembershipPurchase.swift

@@ -1,5 +1,6 @@
 import AnalyticsClient
 import ComposableArchitecture
+import Styleguide
 import SwiftUI
 
 @Reducer
@@ -37,25 +38,74 @@ public struct MembershipPurchaseView: View {
   public init(store: StoreOf<MembershipPurchaseLogic>) {
     self.store = store
   }
+
+  var gradient: LinearGradient {
+    LinearGradient(
+      colors: [
+        Color(0xFFE8B423),
+        Color(0xFFF5D068),
+      ],
+      startPoint: .leading,
+      endPoint: .trailing
+    )
+  }
 
   public var body: some View {
     WithViewStore(store, observe: { $0 }) { _ in
-      List {
-        Text("MembershipPurchase", bundle: .module)
+      VStack(spacing: 8) {
+        ScrollView {
+          VStack(spacing: 24) {
+            Image(ImageResource.purchaseHeader)
+              .resizable()
+
+            VStack(spacing: 40) {
+              Text("続ける - ¥500円/週")
+                .font(.system(.subheadline, weight: .semibold))
+                .frame(height: 50)
+                .frame(maxWidth: .infinity)
+                .foregroundStyle(Color.black)
+                .background(gradient)
+                .clipShape(RoundedRectangle(cornerRadius: 16))
+
+              VStack(spacing: 60) {
+                Image(ImageResource.membershipBenefit)
+                  .resizable()
+
+                PurchaseAboutView()
+              }
+            }
+          }
+          .padding(.top, 96)
+          .padding(.bottom, 48)
+          .padding(.horizontal, 16)
+        }
+
+        Text("続ける - ¥500円/週")
+          .font(.system(.subheadline, weight: .semibold))
+          .frame(height: 50)
+          .frame(maxWidth: .infinity)
+          .foregroundStyle(Color.black)
+          .background(gradient)
+          .clipShape(RoundedRectangle(cornerRadius: 16))
+          .padding(.horizontal, 16)
+          .padding(.bottom, 36)
       }
-      .navigationTitle(String(localized: "MembershipPurchase", bundle: .module))
-      .navigationBarTitleDisplayMode(.inline)
+      .background()
       .task { await store.send(.onTask).finish() }
       .onAppear { store.send(.onAppear) }
     }
   }
 }
 
 #Preview {
-  MembershipPurchaseView(
-    store: .init(
-      initialState: MembershipPurchaseLogic.State(),
-      reducer: { MembershipPurchaseLogic() }
+  NavigationStack {
+    MembershipPurchaseView(
+      store: .init(
+        initialState: MembershipPurchaseLogic.State(),
+        reducer: { MembershipPurchaseLogic() }
+      )
     )
-  )
+  }
+  .environment(\.colorScheme, .dark)
+  .environment(\.locale, Locale(identifier: "ja-JP"))
 }