Design/#42 - CreateSecret Flow 폼 컴포넌트 5종 추가#43
Merged
Conversation
6 tasks
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (16)
🚧 Files skipped from review as they are similar to previous changes (14)
WalkthroughDVDesign에 칩, 드롭다운, 라벨 필드, 멀티라인·칩 입력 필드를 추가했습니다. 보안 입력과 텍스트 색상 설정을 지원하며, 색상 토큰과 SampleApp 프리뷰·내비게이션을 확장했습니다. ChangesDVDesign 컴포넌트 확장
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant DVTextField
participant SecureField
participant TextField
User->>DVTextField: 표시 토글 탭
DVTextField->>SecureField: isRevealed=false일 때 렌더링
DVTextField->>TextField: isRevealed=true일 때 렌더링
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
Projects/DVDesign/Sources/Components/DVChipsField.swift (2)
78-81: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win이벤트 핸들러 함수명을 과거형으로 변경하세요.
경로 지침에 따라 이벤트 핸들러 함수명은
handle-접두사 대신 과거형(didTap-)을 사용해야 합니다.♻️ 네이밍 개선 제안
- private func handleTapChip(_ chip: String) { + private func didTapChip(_ chip: String) { input = chip onTap(chip) }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Projects/DVDesign/Sources/Components/DVChipsField.swift` around lines 78 - 81, Rename the event handler method handleTapChip to didTapChip and update every call site or callback reference accordingly, preserving its existing behavior of setting input and invoking onTap.Source: Path instructions
54-61: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win중첩된 레이아웃을 하위 뷰로 분리하세요.
경로 지침에 따라
body내부에 직접 구현된 중첩 레이아웃은extension의private var로 분리하는 것이 좋습니다. 이를 통해body의 가독성을 높일 수 있습니다.♻️ 뷰 분리 제안
- if !visibleChips.isEmpty { - DVChipFlow(hSpacing: 10, vSpacing: 10) { - ForEach(visibleChips, id: \.self) { chip in - DVChip(chip) { handleTapChip(chip) } - } - } - .frame(width: size.width, alignment: .leading) - } + chipFlowView파일 하단의
extension DVChipsField영역에 분리된 뷰를 추가해 주세요. (아래 제안하는didTapChip네이밍 변경도 함께 적용되어 있습니다.)`@ViewBuilder` private var chipFlowView: some View { if !visibleChips.isEmpty { DVChipFlow(hSpacing: 10, vSpacing: 10) { ForEach(visibleChips, id: \.self) { chip in DVChip(chip) { didTapChip(chip) } } } .frame(width: size.width, alignment: .leading) } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Projects/DVDesign/Sources/Components/DVChipsField.swift` around lines 54 - 61, Extract the nested visible-chip layout from body into a private `@ViewBuilder` var named chipFlowView in the DVChipsField extension, preserving the existing visibility check, spacing, ForEach identity, frame, and tap behavior; update body to use this subview and rename the tap handler reference to didTapChip only if that symbol is being renamed consistently.Source: Path instructions
Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift (1)
3-4: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value신규 Preview 파일의 임포트 그룹을 일관되게 구분해 주세요.
Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift#L3-L4:SwiftUI와DVDesign사이에 빈 줄을 추가하세요.Projects/DVDesign/SampleApp/Sources/DVChipsFieldPreviewView.swift#L3-L4:SwiftUI와DVDesign사이에 빈 줄을 추가하세요.Projects/DVDesign/SampleApp/Sources/DVDropdownPreviewView.swift#L3-L4:SwiftUI와DVDesign사이에 빈 줄을 추가하세요.Projects/DVDesign/SampleApp/Sources/DVLabeledFieldPreviewView.swift#L3-L4:SwiftUI와DVDesign사이에 빈 줄을 추가하세요.Projects/DVDesign/SampleApp/Sources/DVMultilineTextFieldPreviewView.swift#L3-L4:SwiftUI와DVDesign사이에 빈 줄을 추가하세요.As per path instructions, “내장 프레임워크 먼저, 빈 줄로 서드파티 구분” 지침을 적용했습니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift` around lines 3 - 4, Apply the import-grouping convention by inserting a blank line between SwiftUI and DVDesign in Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift lines 3-4, Projects/DVDesign/SampleApp/Sources/DVChipsFieldPreviewView.swift lines 3-4, Projects/DVDesign/SampleApp/Sources/DVDropdownPreviewView.swift lines 3-4, Projects/DVDesign/SampleApp/Sources/DVLabeledFieldPreviewView.swift lines 3-4, and Projects/DVDesign/SampleApp/Sources/DVMultilineTextFieldPreviewView.swift lines 3-4; keep SwiftUI grouped as the built-in framework import and separate DVDesign as the external module.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift`:
- Around line 3-4: Apply the import-grouping convention by inserting a blank
line between SwiftUI and DVDesign in
Projects/DVDesign/SampleApp/Sources/DVChipPreviewView.swift lines 3-4,
Projects/DVDesign/SampleApp/Sources/DVChipsFieldPreviewView.swift lines 3-4,
Projects/DVDesign/SampleApp/Sources/DVDropdownPreviewView.swift lines 3-4,
Projects/DVDesign/SampleApp/Sources/DVLabeledFieldPreviewView.swift lines 3-4,
and Projects/DVDesign/SampleApp/Sources/DVMultilineTextFieldPreviewView.swift
lines 3-4; keep SwiftUI grouped as the built-in framework import and separate
DVDesign as the external module.
In `@Projects/DVDesign/Sources/Components/DVChipsField.swift`:
- Around line 78-81: Rename the event handler method handleTapChip to didTapChip
and update every call site or callback reference accordingly, preserving its
existing behavior of setting input and invoking onTap.
- Around line 54-61: Extract the nested visible-chip layout from body into a
private `@ViewBuilder` var named chipFlowView in the DVChipsField extension,
preserving the existing visibility check, spacing, ForEach identity, frame, and
tap behavior; update body to use this subview and rename the tap handler
reference to didTapChip only if that symbol is being renamed consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 46c337b0-7100-4f4d-81a5-b72956048671
📒 Files selected for processing (16)
Projects/DVDesign/Resources/Assets.xcassets/color/required.colorset/Contents.jsonProjects/DVDesign/SampleApp/Sources/ContentView.swiftProjects/DVDesign/SampleApp/Sources/DVChipPreviewView.swiftProjects/DVDesign/SampleApp/Sources/DVChipsFieldPreviewView.swiftProjects/DVDesign/SampleApp/Sources/DVDropdownPreviewView.swiftProjects/DVDesign/SampleApp/Sources/DVLabeledFieldPreviewView.swiftProjects/DVDesign/SampleApp/Sources/DVMultilineTextFieldPreviewView.swiftProjects/DVDesign/SampleApp/Sources/TextFieldPreviewView.swiftProjects/DVDesign/Sources/Components/DVChip.swiftProjects/DVDesign/Sources/Components/DVChipsField.swiftProjects/DVDesign/Sources/Components/DVDropdown.swiftProjects/DVDesign/Sources/Components/DVLabeledField.swiftProjects/DVDesign/Sources/Components/DVMultilineTextField.swiftProjects/DVDesign/Sources/Components/DVTextContainer.swiftProjects/DVDesign/Sources/Components/DVTextField.swiftProjects/DVDesign/Sources/Foundations/Color/DVColor.swift
dlguszoo
approved these changes
Jul 19, 2026
dlguszoo
left a comment
dlguszoo
left a comment
Contributor
There was a problem hiding this comment.
와우 chipFiled 캐싱까지.. 수고하셨습니다!
다만 DVDropdown에서 두가지 더 반영하면 좋을 것 같습니다!
사용 1. Expire Date
Menu 대신 DatePicker로
사용 2. Project
프로젝트 다중 선택이 가능한데, 트리거 라벨에 현재 다중 선택값을 어떻게 표현하는지
Contributor
Author
|
@dlguszoo DatePicker는 적용 가능합니다!! 여러개 Project 선택이 가능한 옵션이면 이 UI 컴포넌트가 어울리지 않긴 합니다.. 이 부분은 Dropdown일 때 기대되는 동작이 아닌 것 같아서 멀티 선택을 위한 UI 컴포넌트가 존재하는 게 베스트일 것 같습니다. 현재 드롭다운에서는 (여러 개 선택됨) 등의 Focus뷰가 제일 베스트일 것 같습니다. |
- 여러 줄 입력용 TextEditor 래퍼 (PEM 블록·JSON·env content 등) - 고정 height + 내용 초과 시 내부 세로 스크롤
- Assets에 required.colorset 등록 - DVColor에 case required 추가 — 필수 표시(*)·validation warning 텍스트용
- SecureField 기반 마스킹 + 우측 eye/eye.slash 토글 (11pt, 24pt 슬롯) - 마스킹 상태는 내부 @State로 관리 (caller는 text 바인딩만 신경) - 기존 API 호환 유지 (isSecure 기본값 false) - SampleApp preview에 Secure 섹션 추가 Known limitation: SecureField는 macOS 시스템 특성상 IME(한글 조합) 입력 불가. 시크릿 값은 대부분 ASCII라 실사용 문제 미미.
- Label + (*) 필수 표시 + trailing hint slot(감지/경고) 3파트 래퍼 - 힌트 슬롯: .detected(초록, vaultGreen) / .warning(빨강, required) 지원 - 내부 컨텐츠는 @ViewBuilder — 어떤 입력 뷰든 감싸기 가능
- Chip 기반 multi-tag 표시 필드 (DVTextField + DVChip 배열 composite) - 반응형 Layout — 컨테이너 너비 초과 시 세로 wrap, chip은 tail truncate - Chip 클릭 시 input에 텍스트 세팅 + input과 일치하는 chip만 시각 숨김 - 다른 chip 클릭하면 이전 chip 자동 복귀 - Chip 배열 관리는 외부 담당 (감지 엔진 등)
- 5개 init 모두에 textColor: DVColor = .gray900 파라미터 추가 - 비활성 상태 등 상황별 텍스트 색상 지정 가능 - 기본값 유지로 기존 caller 무영향
- DVChip, DVMultilineTextField, DVDropdown, DVLabeledField, DVTextField - init Parameters 블록과 필수 요약만 유지
- DVChip: text/action 접근 제어를 다른 컴포넌트와 맞춰 private으로 좁힘 - DVMultilineTextField: 사용되지 않는 contentInsetTop 상수와 잘못된 정렬 주석 삭제, 상수 이름을 실제 용도(placeholderLeadingInset)로 리네이밍 - DVLabeledField: size 파라미터 자동 전달을 위한 environment 도입 여지 TODO 노트 추가
- @focusstate 추가 — SecureField ↔ TextField view type 스왑 시 포커스 리셋 방지 - 토글 후 AppKit NSText.selectedRange로 커서를 문자열 끝으로 이동 → macOS 기본 '전체 선택' 동작 대신 커서만 위치
- Layout.Cache 도입 — sizeThatFits/placeSubviews 간 chip 사이즈 재측정 제거 - arrangement(...) 헬퍼로 두 함수의 배치 계산 통합 - visibleChips 변화에 spring 애니메이션 (response 0.5, damping 0.85) - chip 등장/퇴장 asymmetric transition (insertion: opacity + scale 0.85, removal: opacity)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
✨ What's this PR?
📌 관련 이슈 (Related Issue)
🧶 주요 변경 내용 (Summary)
CreateSecret Flow에 필요한 신규 폼 컴포넌트 5종 + 컬러 토큰 1종을
DVDesign에 선행 추가하고, 기존 컴포넌트 2종에 확장 파라미터를 추가했습니다.신규 컴포넌트
DVChip— 태그/토큰 표시용 pillvaultGreenTint배경, 6pt radius, 좌우 16pt paddingaction클로저 호출 (상태 없음, 관리 책임은 caller)DVMultilineTextField— 여러 줄 입력 (DVTextField의 세로 확장 버전)TextEditor기반, 디자인 토큰만 덧입힘DVComponentSize, 높이는height파라미터로 고정 — 내용 초과 시 내부 세로 스크롤DVDropdown— 읽기 전용 트리거 + macOS 시스템 Menurgba(0,0,0,0.85))Menu에 위임 (rounded, shadow, hover highlight, separator 자동).buttonStyle(.plain)— 시스템 chrome 제거 (커스텀 label 그대로 렌더링).menuIndicator(.hidden)— 시스템 기본 chevron 숨김.menuOrder(.fixed)— 팝오버가 위/아래 어느 방향으로 열려도 항목 순서 유지@ViewBuilder로 자유 구성 (Button, Divider, Label 등)DVLabeledField— 폼 필드 wrapperLabel + (*) 필수 표시 + 입력 슬롯 + 우측 hint slot3파트 조합@ViewBuilder로 지정 (DVTextField / DVDropdown / DVMultilineTextField / DVChipsField 등 어떤 뷰든 감쌀 수 있음)TrailingHintenum:.detected(String)— 감지 엔진이 서비스 인식했을 때 (vaultGreen).warning(String)— validation 실패 메시지 (required)DVChipsField— Chip 기반 multi-tag 표시 필드DVTextField+DVChip배열의 composite 컴포넌트Layoutprotocol 커스텀 구현으로 각 chip에 컨테이너 너비를 propose → 자연 너비가 초과할 경우 tail truncate (한 줄에 최소 하나 chip 배치 보장)신규 컬러 토큰
DVColor.required(#C83535) — 필수 표시(*), validation 경고 텍스트용.warning(오렌지#F5A623)은 만료 임박 등 caution용으로 유지.danger(빨강#E84040)와도 별개 —.required는 UI 폼 필수 표시 전용기존 컴포넌트 확장
DVTextField—isSecure마스킹 모드 추가isSecure: Bool = false파라미터 (기본 false, 기존 호출부 무영향)SecureField사용 + 우측에eye/eye.slash토글 (11pt, 24pt 슬롯) 자동 배치@State로 관리 — caller는text바인딩만 신경DVTextContainer—textColor파라미터 추가textColor: DVColor = .gray900파라미터 추가SampleApp
ContentView라우팅에 5개 신규 컴포넌트 연결TextFieldPreviewView에 Secure 섹션 추가TextContainerPreviewView에 비활성 색상 섹션 추가📸 스크린샷
DVChip
DVMultilineTextField
DVDropdown
DVLabeledField
DVChipsField
DVTextField (Secure 모드)
🧪 테스트 / 검증 내역
tuist generate정상 완료xcodebuild -scheme DVDesign빌드 성공xcodebuild -scheme DVDesignSampleApp빌드 성공.menuOrder(.fixed)확인 (항목 순서 유지)💬 기타 공유 사항
TextEditor,Menu,SecureField등 시스템 컨트롤 위에 디자인 토큰만 덧입히는 패턴으로 구현..onSubmit,.focused,.disabled등 SwiftUI modifier가 caller에서 그대로 작동.DVDropdown의 modifier 조합 근거: 초기에.menuStyle(.borderlessButton)을 시도했으나 macOS에서 시스템 chevron을 leading에 재삽입하는 케이스가 있어 커스텀 label 배치가 깨졌음..buttonStyle(.plain) + .menuIndicator(.hidden) + .menuOrder(.fixed)조합이 안정적이라 이걸 채택.DVChipsField의 chip 삭제 UX: 현재 chip 클릭 = "편집 대상 선택"만. 완전 삭제 UX(예: X 아이콘)는 명시 요구 나올 때 확장 예정 — 현 요구사항은 자동 감지 결과 표시 + 오타 수정 시나리오만.DVMultilineTextField사용 범위: 실제로는 SSH/SSL/ServiceAccount/EnvVarSet 4개 폼에서만 등장 예상. 나머지 필드는DVTextField+ 가로 스크롤로 충분.Summary by CodeRabbit
새로운 기능
개선 사항