[Fix] #72 - 메인 화면 리스트별 다른 컬러 적용

Author: 현수빈

Projects/Feature/Home/Sources/DetailChecklist/DetailChecklistStore.swift

@@ -17,6 +17,7 @@ public struct DetailChecklistStore {
 
   @ObservableState
   public struct State {
+    var index: Int
     var card: Card
     var isPresentDeleteCheckBoxAlert: Bool = false
     var willDeleteCheckBox: CheckBox?

Projects/Feature/Home/Sources/DetailChecklist/DetailChecklistView.swift

@@ -14,9 +14,11 @@ import ComposableArchitecture
 
 struct DetailChecklistView: View {
   @Bindable private var store: StoreOf<DetailChecklistStore>
+  private let colorType: ChecklistColorType
 
   init(store: StoreOf<DetailChecklistStore>) {
     self.store = store
+    self.colorType = ChecklistColorType(index: store.index)
   }
 
   var body: some View {
@@ -48,6 +50,7 @@ struct DetailChecklistView: View {
             DetailColorChecklistCellView(
               title: checkBox.label,
               isSelected: checkBox.isCompleted,
+              colorType: colorType,
               onToggle: {
                 store.send(.didTapChecklistCompleteButton(checkBox: checkBox))
               },

Projects/Feature/Home/Sources/Home/HomeStore.swift

@@ -83,7 +83,7 @@ public struct HomeStore {
 
     // MARK: - Delegate Actions(parent)
 
-    case onNaviagteToDetailChecklist(card: Card)
+    case onNaviagteToDetailChecklist(card: Card, index: Int)
     case onRouteToHistoryScreen
 
     // MARK: - Scope Actions(child)
@@ -141,7 +141,9 @@ public struct HomeStore {
         return .none
 
       case .didTapNavigateToDetailChecklist(let card):
-        return .send(.onNaviagteToDetailChecklist(card: card))
+        guard let index = state.cards.firstIndex(of: card)
+        else { return .none }
+        return .send(.onNaviagteToDetailChecklist(card: card, index: index))
 
       case .fetchData:
         return .run { send in

Projects/Feature/Home/Sources/Home/Views/Checklist/CardProgressView.swift

@@ -7,14 +7,19 @@
 
 import SwiftUI
 
+import SharedDesignSystem
+
 struct CardProgressView: View {
   private let progress: CGFloat
   private let isSelected: Bool
+  private let colorType: ChecklistColorType
 
   init(
+    colorType: ChecklistColorType,
     isSelected: Bool,
     progress: CGFloat
   ) {
+    self.colorType = colorType
     self.isSelected = isSelected
     self.progress = progress
   }
@@ -29,7 +34,7 @@ struct CardProgressView: View {
         Circle()
           .trim(from: 0, to: progress)
           .stroke(
-            isSelected ? .primary800 : .greyScale400,
+            isSelected ? colorType.cardTintColor : .greyScale400,
             style: StrokeStyle(lineWidth: 8, lineCap: .butt, lineJoin: .bevel)
           )
           .rotationEffect(.degrees(-90))
@@ -42,7 +47,7 @@ struct CardProgressView: View {
           Text("%")
             .notoSans(.subhead_2)
         }
-        .foregroundStyle(isSelected ? .primary800 : .greyScale400)
+        .foregroundStyle(isSelected ? colorType.cardTintColor : .greyScale400)
       }
     }
   }

Projects/Feature/Home/Sources/Home/Views/Checklist/CardView.swift

@@ -7,18 +7,23 @@
 
 import SwiftUI
 
+import SharedDesignSystem
+
 struct CardView: View {
   private let title: String
   private let isSelected: Bool
   private let progress: CGFloat
   private let onTap: () -> Void
+  private let colorType: ChecklistColorType
 
   init(
+    colorType: ChecklistColorType,
     title: String,
     isSelected: Bool,
     progress: CGFloat,
     onTap: @escaping () -> Void
   ) {
+    self.colorType = colorType
     self.title = title
     self.isSelected = isSelected
     self.progress = progress
@@ -31,21 +36,47 @@ struct CardView: View {
     }) {
       HStack(spacing: .zero) {
         VStack(alignment: .leading, spacing: 10) {
-          CardProgressView(isSelected: isSelected, progress: progress)
+          CardProgressView(colorType: colorType, isSelected: isSelected, progress: progress)
             .padding(.top, 14)
 
           Text(title)
             .notoSans(.subhead_3)
-            .foregroundStyle(isSelected ? .primary800 : .greyScale600)
+            .foregroundStyle(isSelected ? colorType.cardTintColor : .greyScale600)
         }
         Spacer()
       }
     }
     .padding(.horizontal, 12)
     .frame(width: 162, height: 120)
-    .background(isSelected ? .primary100 : .greyScale050)
+    .background(isSelected ? colorType.cardColor : .greyScale050)
     .clipShape(
       .rect(cornerRadius: 10)
     )
   }
 }
+
+extension ChecklistColorType {
+  
+  // MARK: - 카드 색상
+  var cardColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary100
+    case .green:
+      return Color(hex: "EFFAF3")
+    case .orange:
+      return Color(hex: "FBF1D2")
+    }
+  }
+  
+  var cardTintColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary800
+    case .green:
+      return Color(hex: "84E1AF")
+    case .orange:
+      return Color(hex: "F07603")
+    }
+  }
+}

Projects/Feature/Home/Sources/Home/Views/Checklist/ChecklistList.swift

@@ -14,10 +14,18 @@ import ComposableArchitecture
 struct ChecklistList: View {
   @Bindable private var store: StoreOf<HomeStore>
   private let width: CGFloat
+  private let colorType: ChecklistColorType
 
   init(store: StoreOf<HomeStore>, width: CGFloat) {
     self.store = store
     self.width = width
+    
+    if let selected = store.selectedCard,
+       let index = store.cards.firstIndex(of: selected) {
+      self.colorType = ChecklistColorType(index: index)
+    } else {
+      self.colorType = .blue
+    }
   }
 
   var body: some View {
@@ -43,7 +51,8 @@ struct ChecklistList: View {
                   isSelected: checkBox.isCompleted,
                   onToggle: {
                     store.send(.didTapChecklistCompleteButton(checkBox: checkBox))
-                  }
+                  },
+                  colorType: colorType
                 )
               }
             }

Projects/Feature/Home/Sources/Home/Views/HeaderView.swift

@@ -7,6 +7,8 @@
 
 import SwiftUI
 
+import SharedDesignSystem
+
 import ComposableArchitecture
 
 struct HeaderView: View {
@@ -85,8 +87,11 @@ struct HeaderView: View {
 
       ScrollView(.horizontal, showsIndicators: false) {
         HStack(spacing: 8) {
-          ForEach(store.cards) { card in
+          ForEach(0..<store.cards.count) { i in
+            let card = store.cards[i]
+            let colorType: ChecklistColorType = .init(index: i)
             CardView(
+              colorType: colorType,
               title: card.title,
               isSelected: store.selectedCard == card,
               progress: card.progress,

Projects/Feature/Home/Sources/HomeRootStore.swift

@@ -37,7 +37,7 @@ public struct HomeRootStore {
 
     // MARK: - Navigation
 
-    case navigateToDetailChecklist(card: Card)
+    case navigateToDetailChecklist(card: Card, index: Int)
   }
 
   @Reducer
@@ -61,8 +61,8 @@ public struct HomeRootStore {
         case .onPresentChat:
           return .send(.onPresentChat)
 
-        case .onNaviagteToDetailChecklist(let card):
-          return .send(.navigateToDetailChecklist(card: card))
+        case .onNaviagteToDetailChecklist(let card, let index):
+          return .send(.navigateToDetailChecklist(card: card, index: index))
 
         default:
           return .none
@@ -71,8 +71,8 @@ public struct HomeRootStore {
       case .onAppendChecklist(let checklist):
         return .send(.home(.onAppendNewChecklist(checklist: checklist)))
 
-      case .navigateToDetailChecklist(let card):
-        state.path.append(.detailChecklist(.init(card: card)))
+      case .navigateToDetailChecklist(let card, let index):
+        state.path.append(.detailChecklist(.init(index: index, card: card)))
         return .none
 
       default:

Projects/Shared/DesignSystem/Sources/Cells/Checklist/ChecklistColorType.swift

@@ -0,0 +1,64 @@
+//
+//  ChecklistColorType.swift
+//  FeatureHome
+//
+//  Created by 현수빈 on 10/15/25.
+//
+
+import SwiftUI
+
+public enum ChecklistColorType: Int, CaseIterable {
+  case blue = 0
+  case green
+  case orange
+  
+  public init(index: Int) {
+    self = ChecklistColorType(rawValue: index % ChecklistColorType.allCases.count ) ?? .blue
+  }
+  
+  // MARK: - 체크리스트 색상
+  var checklistColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary050
+    case .green:
+      return Color(hex: "EFFAF3")
+    case .orange:
+      return Color.sub050
+    }
+  }
+  
+   var checklistTintColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary500
+    case .green:
+      return Color(hex: "84E1AF")
+    case .orange:
+      return Color.sub500
+    }
+  }
+  
+  // MARK: - 선택 시 체크리스 색상
+  var checklistSelectedColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary100
+    case .green:
+      return Color(hex: "E5FBEC")
+    case .orange:
+      return Color.sub100
+    }
+  }
+  
+  var checklistSelectedTintColor: Color {
+    switch self {
+    case .blue:
+      return Color.primary900
+    case .green:
+      return Color(hex: "489C6E")
+    case .orange:
+      return Color.sub600
+    }
+  }
+}