From 44792cd1c0a09d0cf6e043b11a9208bd732e7661 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 5 Sep 2026 22:27:06 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  5 +++
 .../src/components/ui/slider.stories.tsx      | 14 +++++++++
 apps/desktop/src/components/ui/slider.tsx     | 31 +++++++++++++++++++
 .../src/components/ui/ui-added.test.tsx       |  9 ++++++
 .../tests/test_supply_chain_policy.py         |  4 +--
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 apps/desktop/src/components/ui/slider.stories.tsx
 create mode 100644 apps/desktop/src/components/ui/slider.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34331fb86..068feee15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,3 +76,8 @@
 - `ChordsFeature` (코드 분석) 화면에서 각 파트(Role)의 `transpositionPlan`(이조/조옮김 계획)을 표시하는 기능을 추가했습니다.
 - `RangesFeature` (음역대 분석) 화면에서 겹침 경고(Overlap warning) 외에 해당 파트의 채보(Transcription) 가능 노드 수를 요약하여 보여주는 기능을 추가했습니다.
 - 신규 UI 요소에 대한 단위 테스트를 추가했습니다 (`apps/desktop/src/features/chords/index.test.tsx`, `apps/desktop/src/features/ranges/index.test.tsx`).
+
+## [0.1.4] - 2026-09-05
+### Added
+
+- 데스크탑 앱 환경을 위한 재사용 가능한 UI 컴포넌트인 `Slider`를 추가했습니다 (`@base-ui/react` 기반).
diff --git a/apps/desktop/src/components/ui/slider.stories.tsx b/apps/desktop/src/components/ui/slider.stories.tsx
new file mode 100644
index 000000000..b48ca8a03
--- /dev/null
+++ b/apps/desktop/src/components/ui/slider.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Slider } from "./slider"
+
+const meta = {
+  title: "UI/Slider",
+  component: Slider,
+  parameters: { layout: "padded" },
+  args: { defaultValue: [50], className: "w-[60%]" },
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/apps/desktop/src/components/ui/slider.tsx b/apps/desktop/src/components/ui/slider.tsx
new file mode 100644
index 000000000..163050030
--- /dev/null
+++ b/apps/desktop/src/components/ui/slider.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import { cn } from "@/lib/utils"
+
+/** Render a styled slider component. */
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    data-slot="slider"
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Control data-slot="slider-control" className="relative flex w-full items-center">
+      <SliderPrimitive.Track data-slot="slider-track" className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Indicator data-slot="slider-indicator" className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        data-slot="slider-thumb"
+        className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+      />
+    </SliderPrimitive.Control>
+  </SliderPrimitive.Root>
+))
+Slider.displayName = "Slider"
+
+export { Slider }
diff --git a/apps/desktop/src/components/ui/ui-added.test.tsx b/apps/desktop/src/components/ui/ui-added.test.tsx
index 18a0ab314..6506b1772 100644
--- a/apps/desktop/src/components/ui/ui-added.test.tsx
+++ b/apps/desktop/src/components/ui/ui-added.test.tsx
@@ -54,6 +54,7 @@ import {
   InPageNavList,
 } from "./in-page-nav"
 import { Toaster, toast } from "./sonner"
+import { Slider } from "./slider"
 
 describe("added ui primitives (runtime render)", () => {
   it("Table renders header, row and cell", () => {
@@ -246,3 +247,11 @@ describe("added ui primitives (runtime render)", () => {
     expect(await screen.findByText("분석 준비 완료")).toBeTruthy()
   })
 })
+
+describe("added ui primitives - slider", () => {
+  it("Slider renders its control, track, indicator, and thumb", () => {
+    const { container } = render(<Slider defaultValue={[50]} aria-label="slider" />)
+    expect(container.querySelector('[data-slot="slider"]')).toBeTruthy()
+    expect(container.querySelector('[data-slot="slider-thumb"]')).toBeTruthy()
+  })
+})
diff --git a/services/analysis-engine/tests/test_supply_chain_policy.py b/services/analysis-engine/tests/test_supply_chain_policy.py
index 1d8224c5a..6a0853944 100644
--- a/services/analysis-engine/tests/test_supply_chain_policy.py
+++ b/services/analysis-engine/tests/test_supply_chain_policy.py
@@ -1275,9 +1275,7 @@ def test_workflow_concurrency_cancels_only_superseded_pr_heads() -> None:
         workflow = (workflows_dir / workflow_name).read_text(encoding="utf-8")
         assert "concurrency:" in workflow, workflow_name
         assert "cancel-in-progress: false" in workflow, workflow_name
-        assert "contents: read" in workflow or "permissions: read-all" in workflow, (
-            workflow_name
-        )
+        assert "contents: read" in workflow or "permissions: read-all" in workflow, workflow_name
 
     assert "pull_request:" not in (workflows_dir / "release.yml").read_text(encoding="utf-8")