Feature/#76 - 시크릿 수정 화면 구현 및 폼 폭·진행 오버레이 정리

Projects/DVDesign/SampleApp/Sources/ContentView.swift

@@ -70,6 +70,8 @@ struct ContentView: View {
             DVLabeledFieldPreviewView()
         case "DVChipsField":
             DVChipsFieldPreviewView()
+        case "DVMultiSelectDropdown":
+            DVMultiSelectDropdownPreviewView()
         default:
             ComponentPlaceholderView(name: component.name)
         }
@@ -107,6 +109,7 @@ private struct Component: Hashable {
         Component(name: "DVCategory"),
         Component(name: "DVButton"),
         Component(name: "DVCheckBox"),
+        Component(name: "DVMultiSelectDropdown"),
         Component(name: "DVTitleBar"),
         Component(name: "DVSecretType"),
         Component(name: "DVRadioButton"),

Projects/DVDesign/SampleApp/Sources/DVMultiSelectDropdownPreviewView.swift

@@ -0,0 +1,96 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+
+import DVDesign
+
+/// `DVMultiSelectDropdown`의 **연속 선택** 회귀 화면.
+///
+/// 여러 항목을 잇따라 누를 때 팝오버의 체크 상태가 매번 따라오는지 본다. 한때 방금 누른 행만
+/// 갱신되고 이전에 누른 행들은 옛 상태로 남았고, 몇 번은 멀쩡해서 눈으로는 판정이 어려웠다.
+///
+/// TCA도 Array↔Set 어댑터도 없이 순수 `@State`만 쓰므로, 여기서 어긋나면 원인은 컴포넌트 안에 있다.
+/// 나머지 설정은 `ProjectFieldView`와 맞춘다 — `groupsSelectedAtTop: true`, 검색 없음, add-new 있음.
+struct DVMultiSelectDropdownPreviewView: View {
+
+    private struct Item: Identifiable, Hashable {
+        let id = UUID()
+        let name: String
+    }
+
+    private let items: [Item] = [
+        .init(name: "DeVault"),
+        .init(name: "DrinkiG"),
+        .init(name: "CheerLot"),
+        .init(name: "SipStream"),
+        .init(name: "Example"),
+    ]
+
+    @State private var selection: Set<UUID> = []
+    @State private var log: [String] = []
+
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                header
+
+                DVMultiSelectDropdown(
+                    "Select Project",
+                    items: items,
+                    selection: $selection,
+                    label: \.name,
+                    size: .md,
+                    onCreate: { log.insert("+ Add new 눌림", at: 0) },
+                    createLabel: "Add new project",
+                    emptyMessage: "No projects yet",
+                    groupsSelectedAtTop: true
+                )
+
+                stateReadout
+                Spacer(minLength: 0)
+            }
+            .padding(40)
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .onAppear {
+            // 열기 전에 두 개를 선택해 둬야 Selected / All 두 섹션이 모두 생긴다.
+            if selection.isEmpty {
+                selection = Set(items.prefix(2).map(\.id))
+            }
+        }
+    }
+
+    private var header: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            Text("연속 선택 재현")
+                .font(.title2).fontWeight(.semibold)
+            Text("팝오버를 열고 여러 항목을 **연속으로** 눌러보세요. 아래 상태가 누를 때마다 즉시 "
+                 + "따라오면 컴포넌트는 정상입니다.")
+                .font(.callout)
+                .foregroundStyle(.secondary)
+        }
+    }
+
+    /// 팝오버 밖에서 본 실제 상태. 팝오버 안 체크와 여기가 어긋나면 **렌더 문제**,
+    /// 둘 다 틀리면 **쓰기 유실**이다.
+    private var stateReadout: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Text("selection (\(selection.count)개)")
+                .font(.headline)
+            ForEach(items) { item in
+                HStack(spacing: 8) {
+                    Image(systemName: selection.contains(item.id) ? "checkmark.square.fill" : "square")
+                        .foregroundStyle(selection.contains(item.id) ? .green : .secondary)
+                    Text(item.name)
+                }
+                .font(.system(.body, design: .monospaced))
+            }
+            if !log.isEmpty {
+                Divider()
+                ForEach(log, id: \.self) { Text($0).font(.caption).foregroundStyle(.secondary) }
+            }
+        }
+        .padding(16)
+        .background(RoundedRectangle(cornerRadius: 8).fill(Color.secondary.opacity(0.08)))
+    }
+}

Projects/DVDesign/Sources/Components/DVCategory.swift

@@ -43,8 +43,8 @@ public struct DVCategory: View {
                 .contentShape(Rectangle())
         }
         .buttonStyle(DVCategoryButtonStyle(isHovered: isHovered, isSelected: isSelected))
-        .animation(.easeOut(duration: 0.12), value: isHovered)
-        .animation(.easeOut(duration: 0.12), value: isSelected)
+        .animation(MotionMetrics.hover, value: isHovered)
+        .animation(MotionMetrics.hover, value: isSelected)
         .onHover { isHovered = $0 }
     }
 }

Projects/DVDesign/Sources/Components/DVChipsContainer.swift

@@ -15,8 +15,9 @@ import SwiftUI
 /// }
 /// ```
 ///
-/// 값이 비면 chip 없이 박스만 남는다 — ``DVTextContainer``의 Empty 상태와 같은 취급이며,
-/// 이때도 높이는 다른 읽기 전용 필드와 맞도록 32pt를 유지한다.
+/// 값이 비면 `placeholder`를 표시한다. 박스만 남겨두면 "아직 안 불러온 것"과 "고른 것이 없는 것"이
+/// 구분되지 않는다. `placeholder`가 `nil`이면 빈 박스로 둔다.
+/// 어느 쪽이든 높이는 다른 읽기 전용 필드와 맞도록 32pt를 유지한다.
 ///
 /// > Note: chip은 ``DVChip``(내부적으로 `Button`)이라 그대로 두면 포커스를 받는다.
 /// > 컨테이너 전체에 `allowsHitTesting(false)`를 걸어 인터랙션을 차단한다.
@@ -40,37 +41,55 @@ public struct DVChipsContainer: View {
     // MARK: - Properties
 
     private let labels: [String]
+    private let placeholder: String?
     private let size: DVComponentSize
 
     // MARK: - Init
 
     /// - Parameters:
-    ///   - labels: chip으로 표시할 텍스트 목록. 빈 배열이면 박스만 표시된다.
+    ///   - labels: chip으로 표시할 텍스트 목록.
+    ///   - placeholder: `labels`가 비었을 때 대신 표시할 문구. `nil`이면 빈 박스.
     ///   - size: 너비 변형. 기본값 ``DVComponentSize/md``.
     public init(
         _ labels: [String],
+        placeholder: String? = nil,
         size: DVComponentSize = .md
     ) {
         self.labels = labels
+        self.placeholder = placeholder
         self.size = size
     }
 
     // MARK: - Body
 
     public var body: some View {
-        DVFlowLayout(hSpacing: Metrics.chipsSpacing, vSpacing: Metrics.chipsSpacing) {
-            // 라벨이 중복될 수 있으므로 값이 아니라 위치를 id로 쓴다.
-            ForEach(Array(labels.enumerated()), id: \.offset) { _, label in
-                DVChip(label)
+        content
+            .allowsHitTesting(false)
+            .padding(Metrics.chipsPadding)
+            .frame(minHeight: Metrics.minHeight)
+            .dvComponentWidth(size, alignment: .leading)
+            .background {
+                RoundedRectangle(cornerRadius: Metrics.cornerRadius)
+                    .fill(Color.dv(.gray300))
+            }
+    }
+
+    @ViewBuilder
+    private var content: some View {
+        if labels.isEmpty, let placeholder {
+            // 값 텍스트(gray900)가 아니라 안내 문구로 읽혀야 하므로 placeholder 색을 쓴다 —
+            // `DVTextField`·`DVMultilineTextField`의 placeholder와 같은 취급이다.
+            Text(placeholder)
+                .dvFont(.bodyLG)
+                .foregroundStyle(Color.dv(.gray400))
+                .frame(maxWidth: .infinity, alignment: .leading)
+        } else {
+            DVFlowLayout(hSpacing: Metrics.chipsSpacing, vSpacing: Metrics.chipsSpacing) {
+                // 라벨이 중복될 수 있으므로 값이 아니라 위치를 id로 쓴다.
+                ForEach(Array(labels.enumerated()), id: \.offset) { _, label in
+                    DVChip(label)
+                }
             }
-        }
-        .allowsHitTesting(false)
-        .padding(Metrics.chipsPadding)
-        .frame(minHeight: Metrics.minHeight)
-        .dvComponentWidth(size, alignment: .leading)
-        .background {
-            RoundedRectangle(cornerRadius: Metrics.cornerRadius)
-                .fill(Color.dv(.gray300))
         }
     }
 }

Projects/DVDesign/Sources/Components/DVIconButton.swift

@@ -0,0 +1,96 @@
+// Copyright © 2026 Devault. All rights reserved
+
+import SwiftUI
+
+// MARK: - DVIconButton
+
+/// 라벨 없이 아이콘만 있는 작은 버튼. hover·press 되먹임을 준다.
+///
+/// **색은 호출부가 정한다.** 회색 아이콘은 회색 계열에서, 초록 아이콘은 초록 계열에서
+/// 움직여야 버튼의 성격이 유지된다.
+public struct DVIconButton: View {
+
+    // MARK: - Properties
+
+    private let systemName: String
+    private let font: DVFont
+    private let idle: DVColor
+    private let hovered: DVColor
+    private let pressed: DVColor
+    /// 색 토큰만으로 press와 hover가 구분되지 않을 때 쓰는 보조 수단.
+    private let pressedOpacity: Double
+    private let hitSize: CGFloat
+    private let action: () -> Void
+
+    @State private var isHovered = false
+
+    // MARK: - Init
+
+    public init(
+        systemName: String,
+        font: DVFont = .captionLG,
+        idle: DVColor,
+        hovered: DVColor,
+        pressed: DVColor,
+        pressedOpacity: Double = 1,
+        hitSize: CGFloat = 22,
+        action: @escaping () -> Void
+    ) {
+        self.systemName = systemName
+        self.font = font
+        self.idle = idle
+        self.hovered = hovered
+        self.pressed = pressed
+        self.pressedOpacity = pressedOpacity
+        self.hitSize = hitSize
+        self.action = action
+    }
+
+    // MARK: - Body
+
+    public var body: some View {
+        Button(action: action) {
+            Image(systemName: systemName)
+                .dvFont(font)
+        }
+        .buttonStyle(
+            DVIconButtonStyle(
+                isHovered: isHovered,
+                idle: idle,
+                hovered: hovered,
+                pressed: pressed,
+                pressedOpacity: pressedOpacity,
+                hitSize: hitSize
+            )
+        )
+        .onHover { isHovered = $0 }
+        .animation(MotionMetrics.hover, value: isHovered)
+    }
+}
+
+// MARK: - ButtonStyle
+
+private struct DVIconButtonStyle: ButtonStyle {
+
+    let isHovered: Bool
+    let idle: DVColor
+    let hovered: DVColor
+    let pressed: DVColor
+    let pressedOpacity: Double
+    let hitSize: CGFloat
+
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .foregroundStyle(Color.dv(tint(isPressed: configuration.isPressed)))
+            .opacity(configuration.isPressed ? pressedOpacity : 1)
+            // 배경이 없으면 넓힌 영역이 클릭을 받지 못한다.
+            .frame(width: hitSize, height: hitSize)
+            .contentShape(Rectangle())
+            .animation(MotionMetrics.hover, value: configuration.isPressed)
+    }
+
+    private func tint(isPressed: Bool) -> DVColor {
+        if isPressed { return pressed }
+        return isHovered ? hovered : idle
+    }
+}