SwiftUI DropDownSelector 컴포넌트 만드는 법

2025.01.31 - [개발관련] - Supabase로 Next.js 호스팅하는 방법

Supabase로 Next.js 호스팅하는 방법

 

SwiftUI로 디자인시스템 만드는 법 온라인 강의

SwiftUI로 하는 디자인시스템 구현 : SwiftUI로 세상 모든 UI 만드는 법: 완전판 강의 | 무색무취의고

 

 

 

 

 

struct DropDownSelector: View {
  @State private var selectedOption: String = "Option 1"
  @State private var isExpanded: Bool = false
  let options = ["Option 1", "Option 2", "Option 3"]
  
  var body: some View {
    // 셀렉트 박스 영역
    Button(action: {
      withAnimation {
        isExpanded.toggle()
      }
    }) {
      HStack {
        Text(selectedOption)
          .foregroundColor(.primary)
        Spacer()
        Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
          .foregroundColor(.gray)
      }
      .padding()
      .background(Color.gray.opacity(0.2))
      .cornerRadius(8)
    }
    .overlay {
      // 버튼과 같은 위치에 놓되, drop-down 리스트는 오프셋을 줘서 아래에 나타나도록 함.
      if isExpanded {
        VStack(alignment: .leading, spacing: 0) {
          ForEach(options, id: \.self) { option in
            Button(action: {
              selectedOption = option
              withAnimation {
                isExpanded = false
              }
            }) {
              Text(option)
                .padding()
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.white)
                
            }
            .foregroundColor(.primary)
            
            if option != options.last {
              Divider()
            }
          }
        }
        .cornerRadius(8)
        .shadow(radius: 5)
        // 버튼의 아래쪽에 나타나도록 오프셋 적용 (버튼 높이만큼)
        .offset(y: 100)
        // 부드러운 애니메이션 효과
        .transition(.opacity)
        
      }
    }
    .zIndex(.infinity)
  }
}