feat: 밈 신고하기 추가 (#86)

Projects/Core/DesignSystem/Sources/PlainNavigationBar.swift

@@ -42,7 +42,7 @@ public struct PlainNavigationBar: View {
         Spacer()
 
         if hasConfigureButton {
-          ResourceKitAsset.Icon.setting.swiftUIImage
+          ResourceKitAsset.Icon.moreItem.swiftUIImage
         }
       }
       .padding(.horizontal, 16)
@@ -84,9 +84,11 @@ public struct PlainNavigationBarModifier: ViewModifier {
           HStack {
             Spacer()
             if hasConfigureButton {
-              ResourceKitAsset.Icon.setting.swiftUIImage
-                .resizable()
-                .frame(width: 20, height: 20)
+              Button(action: { self.rightActionHandler?() }) {
+                ResourceKitAsset.Icon.moreItem.swiftUIImage
+                  .resizable()
+                  .frame(width: 20, height: 20)
+              }
             }
           }
         }

Projects/Features/MemeDetail/Sources/MemeDetailView.swift

@@ -31,34 +31,19 @@ public struct MemeDetailView: View {
 
   public var body: some View {
     Spacer()
-
-    MemeDetailCardView(meme: $viewModel.state.meme) {
-      viewModel.dispatch(type: .likeButtonTapped)
+    ZStack {
+      memeDetailCardView
+      if viewModel.state.isSheetPresented {
+        Color.black.opacity(0.4)
+      }
     }
-    .padding(.horizontal, 24)
-    .memeDetailTabBar(isFarmemed: $viewModel.state.meme.isFarmemed) { tab in
-      tabBarTap(tab)
-    }
-    .background(
-        KFImage(URL(string: viewModel.state.meme.imageUrlString))
-            .resizable()
-            .loadDiskFileSynchronously()
-            .cacheMemoryOnly()
-            .aspectRatio(contentMode: .fill)
-            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
-            .clipped()
-            .opacity(0.4) // Image Opacity: 40%
-            .blur(radius: 50) // Layer Blur: 50
-            .overlay(Color.white.opacity(0.3)) // White Dim: #fff, Opacity: 30%
-            .edgesIgnoringSafeArea(.top)
-    )
     .onAppear {
       viewModel.logMemeDetail(interaction: .view, event: .meme)
     }
     .plainNavigationBar(
       backHandler: { viewModel.dispatch(type: .naviBackButtonTapped) },
-      rightActionHandler: nil,
-      hasConfigureButton: false,
+      rightActionHandler: { viewModel.dispatch(type: .naviMoreButtonTapped) },
+      hasConfigureButton: true,
       title: viewModel.state.meme.title
     )
     .popup(
@@ -71,7 +56,16 @@ public struct MemeDetailView: View {
       image: viewModel.state.meme.isFarmemed ? ResourceKitAsset.Icon.copyFilled.swiftUIImage : nil,
       text: viewModel.state.meme.isFarmemed ? "파밈 완료!" : "파밈을 취소했어요"
     )
-
+    .sheet(isPresented: $viewModel.state.isSheetPresented) {
+      ZStack(alignment: .bottom) {
+        bottomSheetView
+          .presentationDetents([.height(66)])
+      }
+    }
+    .sheet(isPresented: $viewModel.state.isWebViewPresented) {
+      WebView(url: viewModel.state.reportProblemUrl)
+        .presentationDetents([.large])
+    }
     Spacer()
   }
 
@@ -86,6 +80,49 @@ public struct MemeDetailView: View {
       viewModel.dispatch(type: .shreButtonTapped)
     }
   }
+
+  private var memeDetailCardView: some View {
+    MemeDetailCardView(meme: $viewModel.state.meme) {
+      viewModel.dispatch(type: .likeButtonTapped)
+    }
+    .padding(.horizontal, 24)
+    .memeDetailTabBar(isFarmemed: $viewModel.state.meme.isFarmemed) { tab in
+      tabBarTap(tab)
+    }
+    .background(
+        KFImage(URL(string: viewModel.state.meme.imageUrlString))
+            .resizable()
+            .loadDiskFileSynchronously()
+            .cacheMemoryOnly()
+            .aspectRatio(contentMode: .fill)
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
+            .clipped()
+            .opacity(0.4) // Image Opacity: 40%
+            .blur(radius: 50) // Layer Blur: 50
+            .overlay(Color.white.opacity(0.3)) // White Dim: #fff, Opacity: 30%
+            .edgesIgnoringSafeArea(.top)
+    )
+  }
+
+  private var bottomSheetView: some View {
+    VStack {
+      Rectangle()
+        .cornerRadius(20, corners: [.topLeft, .topRight])
+        .frame(height: 16)
+        .foregroundStyle(Color.Background.white)
+      reportProblembutton
+    }
+    .onTapGesture {
+      viewModel.dispatch(type: .reportProblemButtonTapped)
+    }
+  }
+
+  private var reportProblembutton: some View {
+    Text("신고하기")
+      .font(Font.Body.Xlarge.medium)
+      .foregroundStyle(Color.Text.primary)
+      .padding(.vertical, 16)
+  }
 }
 //
 //#Preview {

Projects/Features/MemeDetail/Sources/MemeDetailViewModel.swift

@@ -29,12 +29,18 @@ public final class MemeDetailViewModel: ViewModelType, ObservableObject {
     case shreButtonTapped
     case farmemeButtonTapped
     case naviBackButtonTapped
+    case naviMoreButtonTapped
+    case reportProblemButtonTapped
   }
 
   public struct State {
     var meme: MemeDetail
     var isCopied: Bool = false
     var isFarmemeChanged: Bool = false
+    var isSheetPresented: Bool = false
+    var isWebViewPresented: Bool = false
+
+    let reportProblemUrl: URL? = URL(string: "https://forms.gle/a5QkMnLD8AANtYCo7")
   }
 
   // MARK: - Properties
@@ -49,6 +55,8 @@ public final class MemeDetailViewModel: ViewModelType, ObservableObject {
 
   private var reactionCount = 0
   private var reactionTask: Task<Void, Never>?
+
+
 
   // MARK: - Initializers
 
@@ -94,6 +102,12 @@ public final class MemeDetailViewModel: ViewModelType, ObservableObject {
         }
       case .naviBackButtonTapped:
         router?.popView()
+      case .naviMoreButtonTapped:
+        state.isSheetPresented = true
+      case .reportProblemButtonTapped:
+        state.isSheetPresented = false
+        state.isWebViewPresented = true
+        print("reportProblemButtonTapped")
       }
     }
   }

Projects/ResourceKit/Resources/Icon.xcassets/More_Item.imageset/Contents.json

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