@team-monolith/cds 1.120.0 → 1.120.2

package/dist/components/Slider.d.ts

@@ -1,11 +1,6 @@
 import { SliderProps as MuiSliderProps } from "@mui/material";
 import React from "react";
-export interface SliderProps extends Omit<MuiSliderProps, "onChangeCommitted"> {
-    className?: string;
-    /** 슬라이더의 최소값 (기본값: 0) */
-    min?: number;
-    /** 슬라이더의 최대값 (기본값: 100) */
-    max?: number;
+export interface SliderProps extends Omit<MuiSliderProps, "defaultValue" | "marks" | "onChangeCommitted"> {
     /** 슬라이더의 기본값 (없는 경우 최소값을 사용) */
     defaultValue?: number;
     /** 슬라이더 하단의 마크 배열 */
@@ -18,4 +13,8 @@ export interface SliderProps extends Omit<MuiSliderProps, "onChangeCommitted"> {
     /** 값 레이블에 단위를 렌더링하는 함수 */
     renderUnit?: (count: number) => string;
 }
+/**
+ * Mui Slider를 기반으로 하는 단일 슬라이더 컴포넌트
+ * /images/2025-10-20-14-53-48.png
+ */
 export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Slider.js

@@ -15,27 +15,28 @@ import { css } from "@emotion/react";
 import { Slider as MuiSlider, } from "@mui/material";
 import React from "react";
 import { shadows } from "../foundation/shadows";
+const SLIDER_THUMB_SIZE = 42;
+/**
+ * Mui Slider를 기반으로 하는 단일 슬라이더 컴포넌트
+ * /images/2025-10-20-14-53-48.png
+ */
 export const Slider = React.forwardRef(function Slider(props, ref) {
-    var _a, _b;
     const { onChangeCommitted, renderUnit } = props, others = __rest(props, ["onChangeCommitted", "renderUnit"]);
-    return (_jsx(Wrapper, { children: _jsx(StyledSlider, Object.assign({ ref: ref }, others, { valueLabelDisplay: "on", valueLabelFormat: (value) => { var _a; return (_a = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit(value)) !== null && _a !== void 0 ? _a : value; }, onChangeCommitted: (_e, value) => {
-                // AIDEV-NOTE:
-                // MUI Slider onChangeCommitted 콜백의 value는 number | number[] 타입이지만
-                // 해당 컴포넌트는 항상 단일 슬라이더이므로 number 타입만 처리함
-                if (Array.isArray(value))
-                    return;
-                onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(value);
-            }, marksLength: (_b = (_a = props.marks) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 })) }));
+    return (_jsx(StyledSlider, Object.assign({ ref: ref }, others, { valueLabelDisplay: "on", valueLabelFormat: (value) => { var _a; return (_a = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit(value)) !== null && _a !== void 0 ? _a : value; }, onChangeCommitted: (_e, value) => {
+            // AIDEV-NOTE:
+            // MUI Slider onChangeCommitted 콜백의 value는 number | number[] 타입이지만
+            // 해당 컴포넌트는 항상 단일 슬라이더이므로 number 타입만 처리함
+            if (Array.isArray(value))
+                return;
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(value);
+        } })));
 });
-const Wrapper = styled.div `
-  padding: 0 21px; // thumb 크기(42px)의 절반만큼 좌우 여백 추가
-`;
-const StyledSlider = styled(MuiSlider, {
-    shouldForwardProp: (prop) => prop !== "marksLength",
-})(({ theme, marksLength }) => css `
+const StyledSlider = styled(MuiSlider)(({ theme }) => css `
     // figma 디자인과 간격 맞추기 위해 조정
     padding: 7px 0;
-    margin-top: 24px;
+    // thumb 크기(SLIDER_THUMB_SIZE)의 절반만큼 좌우 여백 제외한 너비
+    width: calc(100% - ${SLIDER_THUMB_SIZE}px);
+    margin: 24px ${SLIDER_THUMB_SIZE / 2}px 0;
     &.MuiSlider-marked {
       margin-bottom: 20px;
     }
@@ -43,20 +44,25 @@ const StyledSlider = styled(MuiSlider, {
     .MuiSlider-rail {
       border-radius: 100px;
       background: ${theme.color.foreground.neutralBaseDisabled};
+      opacity: 1;
     }
     .MuiSlider-track {
       border-radius: 100px;
       background: ${theme.color.foreground.primary};
     }
     .MuiSlider-thumb {
-      width: 42px;
+      width: ${SLIDER_THUMB_SIZE}px;
       height: 18px;
       border-radius: 23px;
       border: 2px solid ${theme.color.foreground.neutralBaseDisabled};
-      background: #fff;
+      background: ${theme.color.background.neutralBase};
       /* Shadow-4 */
       box-shadow: ${shadows.shadow04};
 
+      &:before {
+        box-shadow: none;
+      }
+
       .MuiSlider-valueLabel {
         background: transparent;
         padding: 0;
@@ -82,12 +88,5 @@ const StyledSlider = styled(MuiSlider, {
       font-weight: 500;
       line-height: 16px; /* 133.333% */
       top: 22px; // figma 디자인과 간격 맞추기 위해 조정
-
-      &[data-index="0"] {
-        transform: translateX(0%);
-      }
-      &[data-index="${marksLength - 1}"] {
-        transform: translateX(-100%);
-      }
     }
   `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.120.0",
+  "version": "1.120.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,