From d053e5f34073195f7d76b64fdfae22a4c71015a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=92=E1=85=A9=E1=86=BC=E1=84=89=E1=85=A5=E1=86=A8?=
 =?UTF-8?q?=E1=84=92=E1=85=A7=E1=86=AB?= <ghdtjrgus333@naver.com>
Date: Tue, 16 Sep 2025 17:47:09 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20Segments=20View=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EB=B0=8F=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/Components/SegmentsView.swift        | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 AppleStoreProductKiosk/Features/Main/Components/SegmentsView.swift

diff --git a/AppleStoreProductKiosk/Features/Main/Components/SegmentsView.swift b/AppleStoreProductKiosk/Features/Main/Components/SegmentsView.swift
new file mode 100644
index 0000000..e3c361e
--- /dev/null
+++ b/AppleStoreProductKiosk/Features/Main/Components/SegmentsView.swift
@@ -0,0 +1,98 @@
+//
+//  SegmentsView.swift
+//  AppleStoreProductKiosk
+//
+//  Created by 홍석현 on 9/16/25.
+//
+
+import SwiftUI
+
+public struct SegmentData: Identifiable {
+  public let id: String
+  public let title: String
+  public let icon: String?
+}
+
+public struct SegmentsView<Content: View>: View {
+  private let items: [SegmentData]
+  @Binding private var selectedID: String
+  private let content: (SegmentData, Bool) -> Content
+
+  public init(
+    items: [SegmentData],
+    selectedID: Binding<String>,
+    content: @escaping (SegmentData, Bool) -> Content
+  ) {
+    self.items = items
+    self._selectedID = selectedID
+    self.content = content
+  }
+
+  public var body: some View {
+    ScrollView(.horizontal) {
+      HStack(spacing: 6) {
+        ForEach(items) { item in
+          Button(action: {
+            withAnimation(.interactiveSpring) {
+              selectedID = item.id
+            }
+          }) {
+            content(item, selectedID == item.id)
+              .padding(.horizontal, 12)
+              .padding(.vertical, 12)
+              .background(
+                selectedID == item.id ? Color.blue : Color.white
+              )
+              .foregroundColor(
+                selectedID == item.id ? .white : .primary
+              )
+              .overlay(
+                Capsule()
+                  .stroke(
+                    selectedID == item.id
+                      ? Color.blue : Color.gray.opacity(0.5),
+                    lineWidth: 1
+                  )
+              )
+              .clipShape(Capsule())
+          }
+        }
+      }
+      .padding(.horizontal, 8)
+    }
+    .scrollIndicators(.hidden)
+  }
+}
+
+private struct PreviewSegment: View {
+  @State var selectedSegment = "iPhone"
+
+  var body: some View {
+    SegmentsView(
+      items: [
+        SegmentData(id: "iPhone", title: "iPhone", icon: "iphone"),
+        SegmentData(id: "iPad", title: "iPad", icon: "ipad"),
+        SegmentData(id: "Mac", title: "Mac", icon: "macbook"),
+        SegmentData(
+          id: "Apple Watch",
+          title: "Apple Watch",
+          icon: "applewatch"
+        ),
+      ],
+      selectedID: $selectedSegment
+    ) { item, isSelected in
+      HStack {
+        if let icon = item.icon {
+          Image(systemName: icon)
+        }
+        Text(item.title)
+          .lineLimit(1)
+      }
+      .font(.system(size: 12))
+    }
+  }
+}
+
+#Preview {
+  PreviewSegment()
+}