Design/#49 - 사이드바 디자인 수정 및 온보딩/잠금 화면 구현

Projects/DVDesign/Sources/Components/DVButton.swift

@@ -8,40 +8,42 @@ public struct DVButton: View {
 
     public enum Style {
         case primary
+        case primarySmall
         case secondary
 
         var cornerRadius: CGFloat {
             switch self {
-            case .primary:   return 20
-            case .secondary: return 6
+            case .primary, .primarySmall: return 20
+            case .secondary:              return 6
             }
         }
 
         var height: CGFloat {
             switch self {
-            case .primary:   return 40
-            case .secondary: return 24
+            case .primary, .primarySmall: return 40
+            case .secondary:              return 24
             }
         }
 
         var horizontalPadding: CGFloat {
             switch self {
-            case .primary:   return 16
-            case .secondary: return 16
+            case .primary, .primarySmall: return 16
+            case .secondary:              return 16
             }
         }
 
         var width: CGFloat {
             switch self {
-            case .primary:   return 242
-            case .secondary: return 74
+            case .primary:      return 242
+            case .primarySmall: return 134
+            case .secondary:    return 74
             }
         }
 
         var font: DVFont {
             switch self {
-            case .primary:   return .bodyLG
-            case .secondary: return .bodyMD
+            case .primary, .primarySmall: return .bodyLG
+            case .secondary:              return .bodyMD
             }
         }
     }
@@ -108,7 +110,7 @@ private struct DVButtonStyle: ButtonStyle {
 
     private var foregroundColor: Color {
         switch style {
-        case .primary:
+        case .primary, .primarySmall:
             return Color.dv(.white)
         case .secondary:
             return isEnabled ? Color.dv(.gray800) : Color.dv(.gray400)
@@ -117,7 +119,7 @@ private struct DVButtonStyle: ButtonStyle {
 
     private func backgroundColor(isPressed: Bool) -> Color {
         switch style {
-        case .primary:
+        case .primary, .primarySmall:
             if !isEnabled { return Color.dv(.vaultGreenTint) }
             if isPressed || isHovered { return Color.dv(.vaultGreenDark) }
             return Color.dv(.vaultGreen)

Projects/DVDesign/Sources/Components/DVCategory.swift

@@ -9,6 +9,7 @@ public struct DVCategory: View {
     public let title: String
     public let count: Int
     public let systemImage: String
+    public let iconColor: Color
     public let isSelected: Bool
     public let action: () -> Void
 
@@ -20,12 +21,14 @@ public struct DVCategory: View {
         title: String,
         count: Int,
         systemImage: String,
+        iconColor: Color = Color.dv(.gray800),
         isSelected: Bool,
         action: @escaping () -> Void
     ) {
         self.title = title
         self.count = count
         self.systemImage = systemImage
+        self.iconColor = iconColor
         self.isSelected = isSelected
         self.action = action
     }
@@ -65,7 +68,7 @@ extension DVCategory {
     private var iconView: some View {
         Image(systemName: systemImage)
             .dvFont(.headingLG)
-            .foregroundStyle(isSelected ? Color.dv(.white) : Color.dv(.gray800))
+            .foregroundStyle(isSelected ? Color.dv(.white) : iconColor)
             .frame(width: 24, height: 24)
     }
 

Projects/DVDesign/Sources/Components/DVStepIndicator.swift

@@ -33,7 +33,7 @@ extension DVStepIndicator {
 
     private func dot(isActive: Bool) -> some View {
         RoundedRectangle(cornerRadius: 4)
-            .fill(isActive ? Color.dv(.vaultGreen) : Color.dv(.gray300))
+            .fill(isActive ? Color.dv(.vaultGreen) : Color.dv(.gray500))
             .frame(width: isActive ? 24 : 8, height: 8)
             .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isActive)
     }

Projects/DVDesign/Sources/Foundations/Color/View+DVColor.swift

@@ -10,4 +10,8 @@ public extension View {
     func dvBackgroundColor(_ token: DVColor) -> some View {
         self.background(token.color)
     }
+
+    func dvScreenBackground(_ token: DVColor = .gray100) -> some View {
+        self.background(token.color.ignoresSafeArea())
+    }
 }

Projects/DVPresentation/Project.swift

@@ -17,6 +17,7 @@ let project = Project.project(
 
                 // 3rd-party dependency
                 .tca(),
+                .lottie(),
             ]
         ),
     ]

Projects/DVPresentation/Sources/Features/Lock/LockFeature.swift

@@ -0,0 +1,57 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import Foundation
+
+import ComposableArchitecture
+
+// MARK: - LockFeature
+
+@Reducer
+public struct LockFeature {
+
+  // MARK: - State
+
+  @ObservableState
+  public struct State: Equatable {
+    public var isPostOnboarding: Bool
+
+    public init(isPostOnboarding: Bool = false) {
+      self.isPostOnboarding = isPostOnboarding
+    }
+  }
+
+  // MARK: - Action
+
+  public enum Action: Equatable {
+
+    // MARK: - View
+
+    case didTapUnlock
+
+    // MARK: - Delegate
+
+    case delegate(Delegate)
+
+    public enum Delegate: Equatable {
+      case unlockCompleted
+    }
+  }
+
+  // MARK: - Init
+
+  public init() {}
+
+  // MARK: - Body
+
+  public var body: some ReducerOf<Self> {
+    Reduce { state, action in
+      switch action {
+      case .didTapUnlock:
+        return .send(.delegate(.unlockCompleted))
+
+      case .delegate:
+        return .none
+      }
+    }
+  }
+}

Projects/DVPresentation/Sources/Features/Lock/LockView.swift

@@ -0,0 +1,89 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+
+import ComposableArchitecture
+import DVDesign
+
+// MARK: - LockView
+
+public struct LockView: View {
+
+  // MARK: - Properties
+
+  @Bindable public var store: StoreOf<LockFeature>
+
+  // MARK: - Init
+
+  public init(store: StoreOf<LockFeature>) {
+    self.store = store
+  }
+
+  // MARK: - Body
+
+  public var body: some View {
+    content
+      .dvScreenBackground()
+  }
+}
+
+// MARK: - Subviews
+
+extension LockView {
+
+  private var content: some View {
+    ZStack {
+      unlockView
+      if store.isPostOnboarding {
+        VStack {
+          Spacer()
+          DVStepIndicator(totalSteps: 4, currentStep: 3)
+            .padding(.bottom, 40)
+        }
+      }
+    }
+    .frame(maxWidth: .infinity, maxHeight: .infinity)
+  }
+
+  private var unlockView: some View {
+    VStack(spacing: 40) {
+      appIconWithLogoView
+      DVButton(titleText: "Unlock with Touch ID", style: .primary) {
+        store.send(.didTapUnlock)
+      }
+    }
+  }
+
+  private var appIconWithLogoView: some View {
+    VStack(spacing: 20) {
+      RoundedRectangle(cornerRadius: 20)
+        .fill(Color.dv(.gray800))
+        .frame(width: 80, height: 80)
+      (
+        Text("De").foregroundStyle(Color.dv(.vaultDark))
+        + Text("Vault").foregroundStyle(Color.dv(.vaultGreen))
+      )
+      .font(.dv(.displayBrand))
+    }
+  }
+}
+
+// MARK: - Preview
+
+#Preview("Post Onboarding") {
+  LockView(
+    store: Store(initialState: LockFeature.State(isPostOnboarding: true)) {
+      LockFeature()
+    }
+  )
+  .frame(width: 540, height: 400)
+}
+
+#Preview("Re-entry / Locked") {
+  LockView(
+    store: Store(initialState: LockFeature.State(isPostOnboarding: false)) {
+      LockFeature()
+    }
+  )
+  .frame(width: 540, height: 400)
+}

Projects/DVPresentation/Sources/Features/Main/MainView.swift

@@ -3,6 +3,7 @@
 import SwiftUI
 
 import ComposableArchitecture
+import DVDesign
 
 // MARK: - MainView
 
@@ -16,6 +17,7 @@ struct MainView: View {
 
   var body: some View {
     content
+      .dvScreenBackground()
       .task { store.send(.task) }
   }
 }

Projects/DVPresentation/Sources/Features/Onboarding/OnboardingFeature.swift

@@ -0,0 +1,94 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import Foundation
+
+import ComposableArchitecture
+
+// MARK: - OnboardingFeature
+
+@Reducer
+public struct OnboardingFeature {
+
+  // MARK: - Step
+
+  public enum Step: Equatable {
+    case welcome
+    case security
+    case icloudSync
+    case syncing
+  }
+
+  // MARK: - State
+
+  @ObservableState
+  public struct State: Equatable {
+    public var step: Step = .welcome
+
+    public init(step: Step = .welcome) {
+      self.step = step
+    }
+
+    var currentStepIndex: Int {
+      switch step {
+      case .welcome:    return 0
+      case .security:   return 1
+      case .icloudSync: return 2
+      case .syncing:    return 2
+      }
+    }
+  }
+
+  // MARK: - Action
+
+  public enum Action: Equatable {
+
+    // MARK: - View
+
+    case didTapStart
+    case didTapEnableTouchID
+    case didTapNotNow
+    case didTapEnableSync
+    case syncingCompleted
+
+    // MARK: - Delegate
+
+    case delegate(Delegate)
+
+    public enum Delegate: Equatable {
+      case completed
+    }
+  }
+
+  // MARK: - Init
+
+  public init() {}
+
+  // MARK: - Body
+
+  public var body: some ReducerOf<Self> {
+    Reduce { state, action in
+      switch action {
+      case .didTapStart:
+        state.step = .security
+        return .none
+
+      case .didTapEnableTouchID:
+        state.step = .icloudSync
+        return .none
+
+      case .didTapNotNow:
+        return .send(.delegate(.completed))
+
+      case .didTapEnableSync:
+        state.step = .syncing
+        return .none
+
+      case .syncingCompleted:
+        return .send(.delegate(.completed))
+
+      case .delegate:
+        return .none
+      }
+    }
+  }
+}