Design/#13/UI component 구현

Projects/DVDesign/SampleApp/Sources/ContentView.swift

@@ -34,6 +34,22 @@ struct ContentView: View {
     @ViewBuilder
     private func detailView(for component: Component) -> some View {
         switch component.name {
+        case "DVPageControl":
+            DVPageControlPreviewView()
+        case "DVCategory":
+            DVCategoryPreviewView()
+        case "DVProjectContainer":
+            DVProjectContainerPreviewView()
+        case "DVVaultContainer":
+            DVVaultContainerPreviewView()
+        case "DVButton":
+            DVButtonPreviewView()
+        case "DVCheckBox":
+            DVCheckBoxPreviewView()
+        case "DVTitleBar":
+            DVTitleBarPreviewView()
+        case "DVSecretType":
+            DVSecretTypePreviewView()
         case "DVRadioButton", "DVRadioButtonGroup":
             RadioButtonPreviewView()
         default:
@@ -42,6 +58,32 @@ struct ContentView: View {
     }
 }
 
+// MARK: - Routing
+
+@ViewBuilder
+private func destination(for component: Component) -> some View {
+    switch component.name {
+    case "DVPageControl":
+        DVPageControlPreviewView()
+    case "DVCategory":
+        DVCategoryPreviewView()
+    case "DVProjectContainer":
+        DVProjectContainerPreviewView()
+    case "DVVaultContainer":
+        DVVaultContainerPreviewView()
+    case "DVButton":
+        DVButtonPreviewView()
+    case "DVCheckBox":
+        DVCheckBoxPreviewView()
+    case "DVTitleBar":
+        DVTitleBarPreviewView()
+    case "DVSecretType":
+        DVSecretTypePreviewView()
+    default:
+        ComponentPlaceholderView(name: component.name, owner: component.owner)
+    }
+}
+
 // MARK: - Placeholder Detail
 
 private struct ComponentPlaceholderView: View {
@@ -93,6 +135,8 @@ private enum ComponentSection: CaseIterable {
                 Component(name: "DVCategory", owner: "예성"),
                 Component(name: "DVButton", owner: "예성"),
                 Component(name: "DVCheckBox", owner: "예성"),
+                Component(name: "DVTitleBar", owner: "예성"),
+                Component(name: "DVSecretType", owner: "예성"),
             ]
         case .doyeon:
             return [

Projects/DVDesign/SampleApp/Sources/DVButtonPreviewView.swift

@@ -0,0 +1,58 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVButtonPreviewView: View {
+
+    // MARK: - Body
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Primary") {
+                    primaryStates
+                }
+                previewSection("Secondary") {
+                    secondaryStates
+                }
+                previewSection("Button Pair") {
+                    buttonPair
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVButton")
+    }
+}
+
+// MARK: - Subviews
+
+extension DVButtonPreviewView {
+
+    private var primaryStates: some View {
+        VStack(spacing: 8) {
+            DVButton(titleText: "Start") {}
+            DVButton(titleText: "Start") {}
+                .disabled(true)
+        }
+        .frame(width: 242)
+    }
+
+    private var secondaryStates: some View {
+        VStack(spacing: 8) {
+            DVButton(titleText: "Cancel", style: .secondary) {}
+            DVButton(titleText: "Cancel", style: .secondary) {}
+                .disabled(true)
+        }
+        .frame(width: 74)
+    }
+
+    private var buttonPair: some View {
+        VStack(spacing: 8) {
+            DVButton(titleText: "Cancel", style: .secondary) {}
+            DVButton(titleText: "Create") {}
+        }
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVCategoryPreviewView.swift

@@ -0,0 +1,34 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVCategoryPreviewView: View {
+    @State private var selected = 0
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Interactive") {
+                    HStack(spacing: 8) {
+                        DVCategory(title: "All",     count: 999, isSelected: selected == 0) { selected = 0 }
+                        DVCategory(title: "Star",    count: 12,  isSelected: selected == 1) { selected = 1 }
+                        DVCategory(title: "Expired", count: 5,   isSelected: selected == 2) { selected = 2 }
+                        DVCategory(title: "Deleted", count: 3,   isSelected: selected == 3) { selected = 3 }
+                    }
+                }
+
+                previewSection("Selected") {
+                    DVCategory(title: "All", count: 999, isSelected: true) {}
+                }
+
+                previewSection("Unselected") {
+                    DVCategory(title: "All", count: 999, isSelected: false) {}
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVCategory")
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVCheckBoxPreviewView.swift

@@ -0,0 +1,45 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVCheckBoxPreviewView: View {
+
+    // MARK: - Properties
+
+    @State private var isChecked = false
+
+    // MARK: - Body
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Interactive") {
+                    interactiveRow
+                }
+                previewSection("Checked") {
+                    DVCheckBox(isChecked: true) {}
+                }
+                previewSection("Unchecked") {
+                    DVCheckBox(isChecked: false) {}
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVCheckBox")
+    }
+}
+
+// MARK: - Subviews
+
+extension DVCheckBoxPreviewView {
+
+    private var interactiveRow: some View {
+        HStack(spacing: 12) {
+            DVCheckBox(isChecked: isChecked) { isChecked.toggle() }
+            Text(isChecked ? "Checked" : "Unchecked")
+                .foregroundStyle(.secondary)
+        }
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVPageControlPreviewView.swift

@@ -0,0 +1,50 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVPageControlPreviewView: View {
+
+    // MARK: - Properties
+
+    @State private var currentStep = 0
+
+    // MARK: - Body
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Interactive (탭해서 이동)") {
+                    VStack(spacing: 16) {
+                        DVPageControl(totalSteps: 3, currentStep: currentStep)
+                        HStack(spacing: 8) {
+                            DVButton(titleText: "이전", style: .secondary) {
+                                if currentStep > 0 { currentStep -= 1 }
+                            }
+                            .frame(width: 80)
+                            .disabled(currentStep == 0)
+
+                            DVButton(titleText: "다음", style: .secondary) {
+                                if currentStep < 2 { currentStep += 1 }
+                            }
+                            .frame(width: 80)
+                            .disabled(currentStep == 2)
+                        }
+                    }
+                }
+                previewSection("Step 1 / 3") {
+                    DVPageControl(totalSteps: 3, currentStep: 0)
+                }
+                previewSection("Step 2 / 3") {
+                    DVPageControl(totalSteps: 3, currentStep: 1)
+                }
+                previewSection("Step 3 / 3") {
+                    DVPageControl(totalSteps: 3, currentStep: 2)
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVPageControl")
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVProjectContainerPreviewView.swift

@@ -0,0 +1,46 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVProjectContainerPreviewView: View {
+    @State private var selected: String? = nil
+
+    private let projects = [
+        ("CheerLot", 8),
+        ("DrinkiG", 8),
+        ("LongLongNameExample", 8),
+    ]
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Interactive") {
+                    VStack(spacing: 2) {
+                        ForEach(projects, id: \.0) { name, count in
+                            DVProjectContainer(
+                                name: name,
+                                count: count,
+                                isSelected: selected == name
+                            ) { selected = selected == name ? nil : name }
+                        }
+                    }
+                    .frame(width: 220)
+                }
+
+                previewSection("Selected") {
+                    DVProjectContainer(name: "DrinkiG", count: 8, isSelected: true) {}
+                        .frame(width: 220)
+                }
+
+                previewSection("Unselected") {
+                    DVProjectContainer(name: "DrinkiG", count: 8, isSelected: false) {}
+                        .frame(width: 220)
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVProjectContainer")
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVSecretTypePreviewView.swift

@@ -0,0 +1,40 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVSecretTypePreviewView: View {
+
+    // MARK: - Body
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Icon 없음 (기본)") {
+                    DVSecretType(labelText: "API Keys / Token")
+                }
+                previewSection("Icon 있음") {
+                    DVSecretType(
+                        labelText: "API Keys / Token",
+                        icon: Image(systemName: "key.fill")
+                    )
+                }
+                previewSection("다른 타입") {
+                    HStack(spacing: 24) {
+                        DVSecretType(
+                            labelText: "Password",
+                            icon: Image(systemName: "lock.fill")
+                        )
+                        DVSecretType(
+                            labelText: "Note",
+                            icon: Image(systemName: "note.text")
+                        )
+                    }
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVSecretType")
+    }
+}

Projects/DVDesign/SampleApp/Sources/DVTitleBarPreviewView.swift

@@ -0,0 +1,41 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+import DVDesign
+
+struct DVTitleBarPreviewView: View {
+
+    // MARK: - Properties
+
+    @State private var searchText = ""
+
+    // MARK: - Body
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 32) {
+                previewSection("Interactive") {
+                    DVTitleBar(
+                        titleText: "All",
+                        searchText: $searchText,
+                        onSortTapped: {}
+                    )
+                    .frame(width: 280)
+                    .background(Color.white)
+                }
+                previewSection("Expired") {
+                    DVTitleBar(
+                        titleText: "Expired",
+                        searchText: .constant(""),
+                        onSortTapped: {}
+                    )
+                    .frame(width: 280)
+                    .background(Color.white)
+                }
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .navigationTitle("DVTitleBar")
+    }
+}