Merge pull request #99 from depromeet/feat/#90-profile-refactoring-UI

[Feat/#90] profile refactoring UI

Projects/Feature/Crew/Interface/Sources/Ranking/CrewRankingStoreInterface.swift

@@ -6,6 +6,7 @@
 //
 
 import ComposableArchitecture
+import SharedDesignSystem
 
 public struct CrewRankingStore: ReducerProtocol {
     private let reducer: Reduce<State, Action>
@@ -17,13 +18,23 @@ public struct CrewRankingStore: ReducerProtocol {
     }
 
     public struct State: Equatable {
+        public var crewRankingList: IdentifiedArrayOf<CrewRankingCellStore.State> = [
+            .init(id: .init(), title: "상체 머신", ranking: "1", userName: "채령", data: ["상체 6시간", "상체 839kcal"]),
+            .init(id: .init(), title: "운동 누적 시간", ranking: "1", userName: "채령", data: ["07:43:29"]),
+            .init(id: .init(), title: "꼴찌의 전당", ranking: "1", userName: "채령", data: ["30분", "839kcal"]),
+            .init(id: .init(), title: "하체 머신", ranking: "1", userName: "채령", data: ["하체 2시간 3분", " 839kcal"]),
+            .init(id: .init(), title: "유산소킹", ranking: "1", userName: "채령", data: ["유산소 2시간 3분", " 839kcal"])
+        ]
+
         public init() {
 
         }
     }
 
     public enum Action: BindableAction, Equatable {
         case binding(BindingAction<State>)
+
+        case crewRankingCell(id: CrewRankingCellStore.State.ID, action: CrewRankingCellStore.Action)
     }
 
     public var body: some ReducerProtocol<State, Action> {

Projects/Feature/Crew/Interface/Sources/Ranking/CrewRankingView.swift

@@ -7,6 +7,7 @@
 
 import SwiftUI
 import ComposableArchitecture
+import SharedDesignSystem
 
 public struct CrewRankingView: View {
     public let store: StoreOf<CrewRankingStore>
@@ -19,7 +20,92 @@ public struct CrewRankingView: View {
 
     public var body: some View {
         WithViewStore(self.store, observe: { $0 }) { viewStore in
-            Text("Rank View")
+            ScrollView {
+                VStack(spacing: 55) {
+                    weekControlView(viewStore: viewStore)
+
+                    rankingTabView()
+
+                    VStack(alignment: .center, spacing: 10) {
+                        Button {
+
+                        } label: {
+                            Image(systemName: "heart.fill")
+                                .resizable()
+                                .frame(width: 23, height: 20)
+                                .foregroundColor(.black)
+                        }
+                        .frame(width: 60, height: 60)
+                        .background(.white)
+                        .clipShape(Circle())
+
+                        Text("응원보내기")
+                            .font(.pretendard(size: 13, type: .medium))
+                            .foregroundColor(Color.colorGrey600)
+                    }
+                    Spacer()
+                }
+            }
+        }
+        .toolbar {
+            ToolbarItem(placement: .principal) {
+                HStack {
+                    Spacer()
+
+                    Button {
+
+                    } label: {
+                        Image(systemName: "square.and.arrow.up")
+                            .resizable()
+                            .foregroundColor(Color.colorGrey700)
+                            .frame(maxWidth: 25, maxHeight: 25)
+                    }
+                }
+            }
+        }
+    }
+
+    private func weekControlView(viewStore: ViewStoreOf<CrewRankingStore>) -> some View {
+        HStack(spacing: 5) {
+            Spacer()
+
+            Button {
+
+            } label: {
+                Image(systemName: "arrowtriangle.left.fill")
+                    .resizable()
+                    .foregroundColor(Color.colorGrey700)
+                    .frame(maxWidth: 10, maxHeight: 10)
+
+            }
+
+            Text("5월 12일 - 19일")
+                .font(.pretendard(size: 15, type: .medium))
+                .foregroundColor(Color.colorGrey700)
+
+            Button {
+
+            } label: {
+                Image(systemName: "arrowtriangle.right.fill")
+                    .resizable()
+                    .foregroundColor(Color.colorGrey700)
+                    .frame(maxWidth: 10, maxHeight: 10)
+            }
+
+            Spacer()
+        }
+    }
+
+    @ViewBuilder
+    private func rankingTabView() -> some View {
+        TabView {
+            ForEachStore(self.store.scope(
+                state: \.crewRankingList,
+                action: CrewRankingStore.Action.crewRankingCell(id:action:))) {
+                    CrewRankingCellView(store: $0)
+                }
         }
+        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
+        .frame(height: 400)
     }
 }

Projects/Feature/Crew/Interface/Sources/Root/CrewRootView.swift

@@ -11,13 +11,13 @@ import FeatureProfileInterface
 
 public struct CrewRootView: View {
     public let store: StoreOf<CrewRootStore>
-
+    
     public init(
         store: StoreOf<CrewRootStore>
     ) {
         self.store = store
     }
-
+    
     public var body: some View {
         WithViewStore(self.store, observe: { $0 }) { viewStore in
             NavigationStack(path: viewStore.binding(\.$path)) {
@@ -33,16 +33,19 @@ public struct CrewRootView: View {
                         case .crewRanking:
                             IfLetStore(self.store.scope(state: \.crewRanking, action: { .crewRanking($0) })) {
                                 CrewRankingView(store: $0)
+                                    .toolbarRole(.editor)
                             }
 
                         case .profile:
                             IfLetStore(self.store.scope(state: \.profile, action: { .profile($0) })) {
                                 ProfileView(store: $0, profileSubject: .my)
+                                    .toolbarRole(.editor)
                             }
-
+                            
                         case .widthOfChange:
                             IfLetStore(self.store.scope(state: \.widthOfChange, action: { .widthOfChange($0) })) {
                                 WidthOfChangeView(store: $0)
+                                    .toolbarRole(.editor)
                             }
                         }
                     }

Projects/Feature/Crew/Sources/Ranking/CrewRankingStore.swift

@@ -14,6 +14,12 @@ extension CrewRankingStore {
             switch action {
             case .binding:
                 return .none
+
+            case let .crewRankingCell(id, action):
+                return .none
+
+            default:
+                return .none
             }
         }
 

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingCardio.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Frame 48096425.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Frame 48096425 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Frame 48096425 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingCardioAvatar.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 481673.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Group 481673 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Group 481673 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingLastPlace.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Frame 48096427.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Frame 48096427 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Frame 48096427 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingLastPlaceAvatar.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 481903.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Group 481903 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Group 481903 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingLowerBody.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Frame 48096426.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Frame 48096426 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Frame 48096426 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingLowerBodyAvatar.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 481732.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Group 481732 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Group 481732 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingUpperBody.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 481902.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Group 481902 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Group 481902 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingWorkoutCumulativeTime.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Frame 48096428.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Frame 48096428 (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Frame 48096428 (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Projects/Shared/DesignSystem/Resources/Images.xcassets/crewRankingWorkoutCumulativeTimeAvatar.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "alarm clock.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "alarm clock (1).png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "alarm clock (2).png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}