feat #95: 이미지 출력 기본 뷰 설정

Nexters · Sep 7, 2023 · 14a22db · 14a22db
1 parent 51f6362
commit 14a22db
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 2 deletions.
diff --git a/Projects/Features/Sources/MyPage/MyPageFeature.swift b/Projects/Features/Sources/MyPage/MyPageFeature.swift
@@ -28,6 +28,8 @@ public struct MyPageFeature: Reducer {
  let userId: Int
  let nickname: String
 
+ var imageExportMode = false
+
  var circleShown = false
  var selectedSegment: MyPageSegment = .similar
  var shownFirstTime = true
@@ -54,6 +56,7 @@ public struct MyPageFeature: Reducer {
  case circleDismissed
  case prepareSettingView
  case selectSegement(MyPageSegment)
+ case setExportPhotoMode(enabled: Bool)
  }
  }
 
@@ -132,6 +135,10 @@ public struct MyPageFeature: Reducer {
  state.settingViewState = SettingFeature.State()
  return .none
 
+ case .view(.setExportPhotoMode(let isEnabled)):
+ state.view.imageExportMode = isEnabled
+ return .none
+
  case .scoreListAction:
  print("score")
  return .none

diff --git a/Projects/Features/Sources/MyPage/MyPageView.swift b/Projects/Features/Sources/MyPage/MyPageView.swift
@@ -49,11 +49,72 @@ struct MyPageView: View {
  viewStore.send(.circleDismissed)
  }
  }
+ .graphFrame(length: viewStore.imageExportMode ? 560 : 700)
+ .ignoresSafeArea(.container)
 
- if !viewStore.state.circleShown {
+ if viewStore.imageExportMode {
+ VStack(spacing: 0) {
+ HStack {
+ Button(action: { viewStore.send(.setExportPhotoMode(enabled: false)) }) {
+ Image(systemName: "xmark")
+ .foregroundColor(.white)
+ }
+ Spacer()
+ Button(action: {}) {
+ HStack {
+ DSKitAsset.Image.photoExport.swiftUIImage
+ Text("이미지 저장")
+ }
+ }
+ .foregroundColor(.white)
+ .padding(3)
+ .overlay(
+ Capsule()
+ .stroke(Color.white.opacity(0.3))
+ )
+ }
+ .padding(.horizontal, 20)
+ .padding(.top, 28)
+ .background(DSKitAsset.Color.keymeBlack.swiftUIColor)
+
+ DSKitAsset.Color.keymeBlack.swiftUIColor
+ .allowsHitTesting(false)
+ .reverseMask {
+ RoundedRectangle(cornerRadius: 24)
+ .fill(Color.black)
+ .padding(32)
+ }
+ .overlay {
+ RoundedRectangle(cornerRadius: 24)
+ .stroke(.white.opacity(0.3))
+ .overlay {
+ VStack(alignment: .leading, spacing: 8) {
+ Text.keyme(
+ viewStore.selectedSegment.title,
+ font: .body5)
+ .foregroundColor(.white.opacity(0.3))
+ Text.keyme(
+ "친구들이 생각하는\n\(viewStore.nickname)님의 성격은?",
+ font: .heading1)
+ .foregroundColor(.white)
+
+ Spacer()
+
+ HStack { Spacer() }
+ }
+ .padding(28)
+ }
+ .padding(32)
+ }
+ }
+ }
+
+ // 개별 원이 보이거나 사진 export 모드가 아닌 경우에만 보여주는 부분
+ // 탑 바, 탭 바, top5, bottom5 등
+ if !viewStore.circleShown && !viewStore.imageExportMode {
  VStack(alignment: .leading, spacing: 0) {
  HStack(spacing: 4) {
- Button(action: { viewStore.send(.prepareSettingView) }) {
+ Button(action: { viewStore.send(.setExportPhotoMode(enabled: true)) }) {
  DSKitAsset.Image.photoExport.swiftUIImage
  .resizable()
  .frame(width: 35, height: 35)
@@ -99,6 +160,7 @@ struct MyPageView: View {
  .foregroundColor(.white)
  }
  }
+ .toolbar(viewStore.imageExportMode ? .hidden : .visible, for: .tabBar)
  .navigationDestination(
  store: store.scope(state: \.$settingViewState, action: MyPageFeature.Action.setting),
  destination: { SettingView(store: $0) })
@@ -111,3 +173,20 @@ struct MyPageView: View {
  }
  }
 }
+
+extension View {
+ @inlinable func reverseMask<Mask: View>(
+ alignment: Alignment = .center,
+ @ViewBuilder _ mask: () -> Mask
+ ) -> some View {
+ self.mask(
+ ZStack(alignment: .center) {
+ Rectangle()
+
+ mask()
+ .blendMode(.destinationOut)
+ }
+ .compositingGroup()
+ )
+ }
+}