feat #95: 이미지 출력 뷰 인터랙션 추가

Encrypted/XCConfig/App/PROD.xcconfig.encrypted

@@ -1 +1 @@
-�d��BJؠ���LH�
8�v2c�����mH �"?^F1Xn�o^�|�т�2x>�SFgtmz\���Ԍ����uQ&uD�0�p>y�����|/�N&UcŞ�;RV��$�H�K����X6W]�nu.����i}�D�ş?��~Jod	>�w���R
+�d��BJؠ���LH�
8�v2c�����mH �"?^F1Xn�o^�|�т�2x>�SFgtmz\���Ԍ����uQ&=O��pV��fa�zuc)�!����wW�0+SXl>7{�mD@
���Z�]��增�o�_{�Z���Ex�6 l}�5`������W����.?��h��o>Hˈ4��:	SѢ����C^7L�

Projects/Features/Sources/MyPage/CirclePackView/CircleView/CirclePackView.swift

@@ -23,6 +23,8 @@ public class CirclePackViewOption<DetailView: View> {
     var framePadding: CGFloat
     /// Circle pack 그래프가 확대됐을 때 그 원이 가질 화면 가로길이에 대한 비율입니다.
     var magnifiedCircleRatio: CGFloat
+    /// 그런거 모르겠고 Scale로 사이즈 조정하고 싶으면 여기
+    var scale: CGFloat
 
     var onCircleTappedHandler: (CircleData) -> Void
     var onCircleDismissedHandler: (CircleData) -> Void
@@ -36,6 +38,7 @@ public class CirclePackViewOption<DetailView: View> {
         outboundLength = 700
         framePadding = 350
         magnifiedCircleRatio =  0.9
+        scale = 1
         self.onCircleTappedHandler = onCircleTappedHandler
         self.onCircleDismissedHandler = onCircleDismissedHandler
     }
@@ -46,6 +49,7 @@ public class CirclePackViewOption<DetailView: View> {
         outboundLength: CGFloat,
         framePadding: CGFloat,
         magnifiedCircleRatio: CGFloat,
+        scale: CGFloat,
         onCircleTappedHandler: @escaping (CircleData) -> Void = { _ in },
         onCircleDismissedHandler: @escaping (CircleData) -> Void = { _ in }
     ) {
@@ -54,6 +58,7 @@ public class CirclePackViewOption<DetailView: View> {
         self.outboundLength = outboundLength
         self.framePadding = framePadding
         self.magnifiedCircleRatio = magnifiedCircleRatio
+        self.scale = scale
         self.onCircleTappedHandler = onCircleTappedHandler
         self.onCircleDismissedHandler = onCircleDismissedHandler
     }
@@ -127,6 +132,7 @@ public struct CirclePackView<DetailView: View>: View {
                     }
                 }
                 .frame(width: option.outboundLength, height: option.outboundLength)
+                .scaleEffect(option.scale)
                 .padding(option.framePadding)
                 .pinchZooming()
             }
@@ -359,6 +365,14 @@ extension CirclePackView {
         return self
     }
 
+    /// 버블차트의 원 크기 스케일을 잡습니다.
+    ///
+    /// 기본값은 당연히 1입니다.
+    func graphScale(_ factor: CGFloat) -> CirclePackView {
+        self.option.scale = factor
+        return self
+    }
+
     func onCircleTapped(_ handler: @escaping (CircleData) -> Void) -> CirclePackView {
         self.option.onCircleTappedHandler = handler
         return self

Projects/Features/Sources/MyPage/MyPageFeature.swift

@@ -161,11 +161,12 @@ public struct MyPageFeature: Reducer {
 
             case .imageExportModeAction(.dismissImageExportMode):
                 state.imageExportModeState = nil
-                return .none
 
             default:
                 return .none
             }
+
+            return .none
         }
         .ifLet(\.$settingViewState, action: /Action.setting) {
             SettingFeature()

Projects/Features/Sources/MyPage/MyPageView+.swift

@@ -77,7 +77,7 @@ extension MyPageView {
                     HStack {
                         Image(systemName: "arrow.clockwise")
                             .foregroundColor(.white)
-                        Slider(value: $rotationAngle.degrees, in: -180...180, step: 0.1)
+                        Slider(value: $rotationAngle.degrees, in: -Double.pi...Double.pi, step: 0.01)
                             .background(DSKitAsset.Color.keymeBlack.swiftUIColor)
                     }
                     .padding(20)

Projects/Features/Sources/MyPage/MyPageView.swift

@@ -25,6 +25,10 @@ struct MyPageView: View {
     public var body: some View {
         WithViewStore(store, observe: \.view, send: MyPageFeature.Action.view) { viewStore in
             ZStack(alignment: .topLeading) {
+                // Default bg color
+                DSKitAsset.Color.keymeBlack.swiftUIColor
+                    .ignoresSafeArea()
+
                 CirclePackView(
                     namespace: namespace,
                     data: viewStore.shownCircleDatalist,
@@ -52,16 +56,9 @@ struct MyPageView: View {
                         viewStore.send(.circleDismissed)
                     }
                 }
+                .graphScale(viewStore.imageExportMode ? 0.7 : 1)
                 .ignoresSafeArea(.container, edges: .bottom)
-
-                // Export 모드에 진입합니다
-                IfLetStore(store.scope(
-                    state: \.imageExportModeState,
-                    action: MyPageFeature.Action.imageExportModeAction)
-                ) {
-                    ImageExportOverlayView(store: $0, angle: $graphRotationAngle)
-                }
-
+
                 // 개별 원이 보이거나 사진 export 모드가 아닌 경우에만 보여주는 부분
                 // 탑 바, 탭 바, top5, bottom5 등
                 if !viewStore.circleShown && !viewStore.imageExportMode {
@@ -111,12 +108,30 @@ struct MyPageView: View {
                             .transition(.opacity)
                     }
                     .foregroundColor(.white)
+                    .transition(.opacity)
                 }
+
+                // Export 모드에 진입합니다
+
+                IfLetStore(store.scope(
+                    state: \.imageExportModeState,
+                    action: MyPageFeature.Action.imageExportModeAction)
+                ) {
+                    ImageExportOverlayView(store: $0, angle: $graphRotationAngle)
+                }
+                .transition(
+                    .opacity
+                        .combined(with: .scale(scale: 2))
+                        .animation(Animation.customInteractiveSpring()))
+                .zIndex(ViewZIndex.high.rawValue)
             }
             .toolbar(viewStore.imageExportMode ? .hidden : .visible, for: .tabBar)
             .navigationDestination(
                 store: store.scope(state: \.$settingViewState, action: MyPageFeature.Action.setting),
                 destination: { SettingView(store: $0) })
+            .animation(Animation.customInteractiveSpring(duration: 0.5), value: viewStore.circleShown)
+            .animation(Animation.customInteractiveSpring(), value: viewStore.imageExportMode)
+            .border(DSKitAsset.Color.keymeBlack.swiftUIColor, width: viewStore.imageExportMode ? 5 : 0)
         }
         .onAppear {
             store.send(.requestCircle(.top5))
@@ -125,6 +140,11 @@ struct MyPageView: View {
             store.send(.view(.selectSegement(.similar)))
         }
     }
+
+    private enum ViewZIndex: CGFloat {
+        case low = 0
+        case high = 1
+    }
 }
 
 extension View {