[design] #154 ContentSetting 사이드바로 이동

YAPP-Github · Oct 25, 2024 · fbdbf37 · fbdbf37
1 parent 7e37f77
commit fbdbf37
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/Projects/App/Sources/MainTabSplit/Pokit/PokitSplitFeature.swift b/Projects/App/Sources/MainTabSplit/Pokit/PokitSplitFeature.swift
@@ -4,6 +4,8 @@
 //
 //  Created by 김도형 on 10/24/24.
 
+import SwiftUI
+
 import ComposableArchitecture
 import FeaturePokit
 import FeatureCategoryDetail
@@ -24,6 +26,8 @@ public struct PokitSplitFeature {
     /// - State
     @ObservableState
     public struct State: Equatable {
+        var columnVisibility: NavigationSplitViewVisibility = .doubleColumn
+
         var 포킷: PokitRootFeature.State = .init()
         var 카테고리상세: CategoryDetailFeature.State?
         var 링크추가및수정: ContentSettingFeature.State = .init()
@@ -61,8 +65,13 @@ public struct PokitSplitFeature {
         case 링크상세(ContentDetailFeature.Action)
 
         @CasePathable
-        public enum View: Equatable {
+        public enum View: Equatable, BindableAction {
+            case binding(BindingAction<State>)
+
             case 뷰가_나타났을때
+            case 검색_버튼_눌렀을때
+            case 알람_버튼_눌렀을때
+            case 설정_버튼_눌렀을때
         }
 
         public enum InnerAction: Equatable {
@@ -128,6 +137,8 @@ public struct PokitSplitFeature {
 
     /// - Reducer body
     public var body: some ReducerOf<Self> {
+        BindingReducer(action: \.view)
+
         Scope(state: \.포킷, action: \.포킷) {
             PokitRootFeature()
         }

diff --git a/Projects/App/Sources/MainTabSplit/Pokit/PokitSplitView.swift b/Projects/App/Sources/MainTabSplit/Pokit/PokitSplitView.swift
@@ -16,10 +16,12 @@ import FeatureContentSetting
 import FeatureCategoryDetail
 import FeatureContentList
 import FeatureCategorySharing
+import DSKit
 
 @ViewAction(for: PokitSplitFeature.self)
 public struct PokitSplitView: View {
     /// - Properties
+    @Perception.Bindable
     public var store: StoreOf<PokitSplitFeature>
 
     /// - Initializer
@@ -31,29 +33,47 @@ public struct PokitSplitView: View {
 public extension PokitSplitView {
     var body: some View {
         WithPerceptionTracking {
-            NavigationSplitView(columnVisibility: .constant(.all)) {
+            NavigationSplitView(columnVisibility: $store.columnVisibility) {
+                ContentSettingView(store: store.scope(state: \.링크추가및수정, action: \.링크추가및수정))
+            } content: {
                 PokitRootView(store: store.scope(state: \.포킷, action: \.포킷))
-                    .toolbar(.hidden, for: .navigationBar)
+                    .pokitNavigationBar { pokitNavigationBar }
             } detail: {
-                detail
-                    .toolbar(.hidden, for: .navigationBar)
+                if let store = store.scope(state: \.카테고리상세, action: \.카테고리상세) {
+                    CategoryDetailView(store: store)
+                }
             }
+
         }
     }
 }
 //MARK: - Configure View
 private extension PokitSplitView {
-    var detail: some View {
-        HStack(spacing: 0) {
-            if let store = store.scope(state: \.카테고리상세, action: \.카테고리상세) {
-                CategoryDetailView(store: store)
-            } else {
-                Spacer()
+    var pokitNavigationBar: some View {
+        PokitHeader {
+            PokitHeaderItems(placement: .leading) {
+                Image(.logo(.pokit))
+                    .resizable()
+                    .frame(width: 104, height: 32)
+                    .foregroundStyle(.pokit(.icon(.brand)))
             }
 
-            ContentSettingView(store: store.scope(state: \.링크추가및수정, action: \.링크추가및수정))
-                .frame(width: 375)
+            PokitHeaderItems(placement: .trailing) {
+                PokitToolbarButton(
+                    .icon(.search),
+                    action: { send(.검색_버튼_눌렀을때) }
+                )
+                PokitToolbarButton(
+                    .icon(.bell),
+                    action: { send(.알람_버튼_눌렀을때) }
+                )
+                PokitToolbarButton(
+                    .icon(.setup),
+                    action: { send(.설정_버튼_눌렀을때) }
+                )
+            }
         }
+        .padding(.vertical, 8)
     }
 }
 //MARK: - Preview