Framed style

여러 요소를 하나의 프레임으로 감싸 정보의 그룹화를 명확히 하기 위한 컴포넌트입니다. 그룹 단위의 선택된 상태를 시각적으로 강조하기 위해 사용합니다.

enum FramedStyle

Topics

Enumerations

enum Status

프레임의 상태를 정의하는 열거형입니다.

  • Overview

    각 상태마다 다른 테두리 색상과 스타일이 적용됩니다.

Enumeration Cases

case negative

부정적 상태 (오류, 경고 등)

case normal

기본 상태

case selected

선택된 상태

Associated Extensions

extension View
func framedStyle(status: FramedStyle.Status, borderRadius: CGFloat, shadowLevel: Shadow.Level) -> some View

현재 뷰에 프레임 스타일을 적용합니다.

  • Parameters

    ParameterDescription
    status프레임 상태, 생략하면 기본값으로 .normal 적용
    borderRadius테두리 반경, 생략하면 기본값으로 0 적용
    shadowLevel그림자 레벨, 생략하면 기본값으로 .xsmall 적용

  • Return Value

    프레임 스타일이 적용된 뷰

  • Discussion

    테두리, 배경, 그림자가 있는 프레임을 뷰에 적용하여 일관된 디자인을 제공합니다. 다양한 크기와 상태를 설정할 수 있어 다양한 UI 요소에 활용할 수 있습니다.

    Note

    그림자에는 원본 View 배경색의 opacity가 동일하게 적용되므로, 원본 View의 opacity가 0.0인 경우 그림자가 표시되지 않습니다.

    Note

    비활성화는 SwiftUI 표준 disabled(_:)를 사용합니다. 상위 컨테이너에 한 번 걸면 하위 컴포넌트까지 함께 비활성 스타일로 표시됩니다.

    // 기본 사용법
Text("입력 필드")
    .framedStyle()

// 프레임에 그림자 적용
Button("확인") { }
    .framedStyle(shadowLevel: .medium)

// 선택된 상태의 프레임
Rectangle()
    .frame(width: 200, height: 100)
    .framedStyle(status: .selected)

// 비활성화된 프레임
Text("비활성화된 텍스트")
    .framedStyle()
    .disabled(true)

// 부정적 상태의 프레임 (오류 표시)
Text("오류 메시지")
    .framedStyle(status: .negative)

// 둥근 모서리가 있는 선택된 프레임
Text("선택된 항목")
    .framedStyle(borderRadius: 16, status: .selected)

© 2026 Wanted Lab, Inc.