@bigtablet/design-system 1.9.0 → 1.10.0

package/dist/index.css

@@ -76,7 +76,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-  animation: fade_in 0.2s ease-out;
+  animation: fade_in 0.2s ease-in-out;
 }
 .alert_modal {
   background: #ffffff;
@@ -84,7 +84,7 @@
   min-width: 320px;
   max-width: 480px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  animation: slide_up 0.3s ease-out;
+  animation: slide_up 0.3s ease-in-out;
   overflow: hidden;
 }
 .alert_modal_title {
@@ -126,10 +126,10 @@
   border: 1px solid transparent;
   line-height: 1.5;
   transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    transform 0.2s ease-out;
+    background 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 }
 .alert_modal_button:focus-visible {
   outline: none;
@@ -216,7 +216,6 @@
 
 /* src/ui/general/button/style.scss */
 .button {
-  width: 100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -226,10 +225,10 @@
   cursor: pointer;
   font-weight: 500;
   transition:
-    background 0.2s ease-out,
-    color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    transform 0.2s ease-out;
+    background 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
 }
 .button:disabled {
   cursor: not-allowed;
@@ -318,9 +317,9 @@
   border-radius: 6px;
   background: #ffffff;
   transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
+    background 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
   display: inline-block;
   position: relative;
 }
@@ -408,9 +407,9 @@
   line-height: 1.5;
   color: #1a1a1a;
   transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
+    background 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
 }
 .file_input:hover .file_input_label {
   border-color: rgba(0, 0, 0, 0.08);
@@ -457,9 +456,9 @@
   border-radius: 9999px;
   background: #ffffff;
   transition:
-    background 0.2s ease-out,
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
+    background 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out;
   position: relative;
   display: inline-block;
 }
@@ -538,9 +537,9 @@
   background: #ffffff;
   border-radius: 8px;
   transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    background 0.2s ease-in-out;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
@@ -623,11 +622,12 @@
 .select_list {
   position: absolute;
   z-index: 10000;
-  top: 0.25rem;
+  top: 100%;
   left: 0;
   width: 100%;
   min-width: 100%;
   box-sizing: border-box;
+  margin-top: 0.25rem;
   background: #ffffff;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
@@ -680,7 +680,7 @@
   padding: 2px;
   border-radius: 9999px;
   background: #e5e5e5;
-  transition: background 0.2s ease-out;
+  transition: background 0.2s ease-in-out;
   cursor: pointer;
 }
 .switch_thumb {
@@ -688,7 +688,7 @@
   height: 18px;
   background: #ffffff;
   border-radius: 9999px;
-  transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-in-out;
   transform: translateX(0);
 }
 .switch_on {
@@ -782,9 +782,9 @@
   width: 100%;
   border-radius: 8px;
   transition:
-    border-color 0.2s ease-out,
-    box-shadow 0.2s ease-out,
-    background 0.2s ease-out;
+    border-color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    background 0.2s ease-in-out;
   font-size: 0.9375rem;
   line-height: 1.5;
   color: #1a1a1a;
@@ -868,6 +868,21 @@
 
 /* src/ui/form/date-picker/style.scss */
 .date_picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.date_picker_label {
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #666666;
+}
+.date_picker_required {
+  margin-left: 0.25rem;
+  color: #ef4444;
+}
+.date_picker_fields {
   display: flex;
   gap: 0.5rem;
 }
@@ -884,9 +899,9 @@
   border-radius: 6px;
   cursor: pointer;
   transition:
-    border-color 0.1s ease-out,
-    box-shadow 0.1s ease-out,
-    background-color 0.1s ease-out;
+    border-color 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out,
+    background-color 0.1s ease-in-out;
   appearance: none;
   background-image:
     linear-gradient(
@@ -920,20 +935,26 @@
 .date_picker select option {
   color: #1a1a1a;
 }
-.date_picker select:nth-child(1) {
-  min-width: 96px;
+.date_picker_full {
+  width: 100%;
+}
+.date_picker_full .date_picker_fields {
+  width: 100%;
+}
+.date_picker_full select {
+  flex: 1;
+  min-width: 0;
 }
-.date_picker select:nth-child(2),
-.date_picker select:nth-child(3) {
-  min-width: 72px;
+.date_picker_disabled .date_picker_label {
+  color: #9ca3af;
 }
 @media (max-width: 480px) {
-  .date_picker {
+  .date_picker_fields {
     gap: 0.25rem;
   }
   .date_picker select {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 }
 
@@ -954,7 +975,7 @@
   font-size: 0.875rem;
   line-height: 1.5;
   color: #1a1a1a;
-  transition: background 0.2s ease-out, border-color 0.2s ease-out;
+  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
 }
 .pagination_item:hover:not(:disabled) {
   background: #fafafa;
@@ -981,7 +1002,7 @@
   font-size: 0.875rem;
   line-height: 1.5;
   color: #666666;
-  transition: background 0.2s ease-out, color 0.2s ease-out;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 .pagination_pageButton:hover {
   background: #fafafa;

package/dist/index.d.ts

@@ -53,8 +53,9 @@ declare const useToast: (containerId?: string) => {
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "sm" | "md" | "lg";
+    width?: string;
 }
-declare const Button: ({ variant, size, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, width, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: React.ReactNode;
@@ -125,6 +126,8 @@ declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.
 
 type DatePickerMode = "year-month" | "year-month-day";
 interface DatePickerProps {
+    label?: string;
+    required?: boolean;
     value?: string;
     onChange: (value: string) => void;
     mode?: DatePickerMode;
@@ -132,7 +135,7 @@ interface DatePickerProps {
     endYear?: number;
     disabled?: boolean;
 }
-declare const DatePicker: ({ value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, required, value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;

package/dist/index.js

@@ -168,6 +168,7 @@ var useToast = (containerId = "default") => {
 var Button = ({
   variant = "primary",
   size = "md",
+  width = "100%",
   className,
   ...props
 }) => {
@@ -177,7 +178,7 @@ var Button = ({
     `button_size_${size}`,
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("button", { className: buttonClassName, ...props });
+  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: { width }, ...props });
 };
 var Checkbox = ({
   label,
@@ -279,7 +280,9 @@ var Select = ({
   React3.useEffect(() => {
     const onDocClick = (e) => {
       if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target)) setIsOpen(false);
+      if (!wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
     };
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
@@ -327,7 +330,9 @@ var Select = ({
       case "Home":
         e.preventDefault();
         setIsOpen(true);
-        setActiveIndex(options.findIndex((o) => !o.disabled));
+        setActiveIndex(
+          options.findIndex((o) => !o.disabled)
+        );
         break;
       case "End":
         e.preventDefault();
@@ -347,8 +352,15 @@ var Select = ({
   };
   React3.useEffect(() => {
     if (!isOpen) return;
-    const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
-    setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
+    const idx = options.findIndex(
+      (o) => o.value === currentValue && !o.disabled
+    );
+    setActiveIndex(
+      idx >= 0 ? idx : Math.max(
+        0,
+        options.findIndex((o) => !o.disabled)
+      )
+    );
   }, [isOpen, options, currentValue]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
@@ -365,7 +377,14 @@ var Select = ({
       className: rootClassName,
       style: fullWidth ? { width: "100%" } : void 0,
       children: [
-        label ? /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }) : null,
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: selectId,
+            className: "select_label",
+            children: label
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -379,12 +398,18 @@ var Select = ({
             onKeyDown,
             disabled,
             children: [
-              /* @__PURE__ */ jsx("span", { className: currentOption ? "select_value" : "select_placeholder", children: currentOption ? currentOption.label : placeholder }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: currentOption ? "select_value" : "select_placeholder",
+                  children: currentOption ? currentOption.label : placeholder
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
             ]
           }
         ),
-        isOpen ? /* @__PURE__ */ jsx(
+        isOpen && /* @__PURE__ */ jsx(
           "ul",
           {
             id: `${selectId}_listbox`,
@@ -413,14 +438,20 @@ var Select = ({
                   },
                   children: [
                     /* @__PURE__ */ jsx("span", { children: opt.label }),
-                    selected ? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) : null
+                    selected && /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        size: 16,
+                        "aria-hidden": "true"
+                      }
+                    )
                   ]
                 },
                 opt.value
               );
             })
           }
-        ) : null
+        )
       ]
     }
   );
@@ -527,6 +558,8 @@ TextField.displayName = "TextField";
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var DatePicker = ({
+  label,
+  required,
   value,
   onChange,
   mode = "year-month-day",
@@ -543,49 +576,64 @@ var DatePicker = ({
     const result = mode === "year-month" ? `${yy}-${pad(mm)}-01` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
     onChange(result);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "date_picker", children: [
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        value: year,
-        disabled,
-        onChange: (e) => emit(Number(e.target.value), month || 1, day || 1),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from(
-            { length: endYear - startYear + 1 },
-            (_, i) => startYear + i
-          ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        value: month,
-        disabled: disabled || !year,
-        onChange: (e) => emit(year, Number(e.target.value), day || 1),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from({ length: 12 }, (_, i) => i + 1).map((m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2))
-        ]
-      }
-    ),
-    mode === "year-month-day" && /* @__PURE__ */ jsxs(
-      "select",
-      {
-        value: day,
-        disabled: disabled || !month,
-        onChange: (e) => emit(year, month, Number(e.target.value)),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from({ length: days }, (_, i) => i + 1).map(
-            (d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2)
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "date_picker",
+        disabled && "date_picker_disabled"
+      ].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxs("label", { className: "date_picker_label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "date_picker_required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: year,
+              disabled,
+              onChange: (e) => emit(Number(e.target.value), month || 1, day || 1),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+                Array.from(
+                  { length: endYear - startYear + 1 },
+                  (_, i) => startYear + i
+                ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: month,
+              disabled: disabled || !year,
+              onChange: (e) => emit(year, Number(e.target.value), day || 1),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+                Array.from({ length: 12 }, (_, i) => i + 1).map((m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2))
+              ]
+            }
+          ),
+          mode === "year-month-day" && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: day,
+              disabled: disabled || !month,
+              onChange: (e) => emit(year, month, Number(e.target.value)),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+                Array.from({ length: days }, (_, i) => i + 1).map(
+                  (d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2)
+                )
+              ]
+            }
           )
-        ]
-      }
-    )
-  ] });
+        ] })
+      ]
+    }
+  );
 };
 var range = (start, end) => {
   const out = [];

package/dist/next.css

@@ -2,12 +2,17 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   height: 100%;
+  width: 240px;
   background: #ffffff;
   border-right: 1px solid #e5e5e5;
   padding: 0.5rem;
   gap: 0.5rem;
+  overflow: hidden;
+  transition: width 0.3s ease-in-out;
+}
+.sidebar.is_closed {
+  width: 56px;
 }
 .sidebar_brand {
   padding: 0.5rem;
@@ -19,95 +24,87 @@
   align-items: center;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
-}
-.sidebar_brand_img {
-  object-fit: contain;
 }
 .sidebar_nav {
   display: grid;
   gap: 0.25rem;
-  padding: 0.5rem 0;
 }
 .sidebar_group {
   display: grid;
   gap: 0.25rem;
 }
 .sidebar_item {
-  display: grid;
-  grid-template-columns: 24px 1fr auto;
+  border: none;
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
+  justify-content: space-between;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
   color: #6b7280;
-  background: transparent;
-  border: 1px solid transparent;
   cursor: pointer;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  transition:
-    background-color 0.2s ease-out,
-    color 0.2s ease-out,
-    border-color 0.2s ease-out;
+  background: transparent;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 .sidebar_item:hover {
   background: #fafafa;
   color: #1f2937;
 }
-.sidebar_item:hover .sidebar_icon {
-  color: #1f2937;
-}
 .sidebar_item.is_active {
-  position: relative;
   background: #ffffff;
-  border-color: #e5e5e5;
   color: #1f2937;
   box-shadow: inset 0 0 0 1px #e5e5e5;
 }
-.sidebar_item.is_active::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 3px;
-  border-radius: 9999px;
-  background: #000000;
+.sidebar_item_left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.sidebar_item_right {
+  display: flex;
+  align-items: center;
 }
 .sidebar_icon {
-  display: inline-grid;
+  display: grid;
   place-items: center;
-  color: #6b7280;
-  transition: color 0.2s ease-out;
-}
-.sidebar_label {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-.sidebar_label.is_active {
-  color: #000000;
-  font-weight: 500;
 }
 .sidebar_chevron {
-  display: inline-grid;
-  place-items: center;
-  color: #6b7280;
-  transition: transform 0.2s ease-out;
+  transition: transform 0.2s ease-in-out;
 }
 .sidebar_chevron.is_open {
   transform: rotate(180deg);
 }
+.sidebar_label {
+  font-size: 1rem;
+  white-space: nowrap;
+}
 .sidebar_sub {
   display: grid;
   gap: 0.25rem;
-  padding-left: 1rem;
+  padding-left: 0.75rem;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transform: translateY(-4px);
+  transition:
+    max-height 0.3s ease-in-out,
+    opacity 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+}
+.sidebar_sub.is_open {
+  max-height: 500px;
+  opacity: 1;
+  transform: translateY(0);
 }
 .sidebar_sub_item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
   padding: 0.25rem 0.75rem;
-  border-radius: 6px;
+  border-radius: 8px;
   color: #6b7280;
+  cursor: pointer;
+  background: transparent;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 .sidebar_sub_item:hover {
   background: #fafafa;
@@ -117,3 +114,12 @@
   color: #000000;
   font-weight: 500;
 }
+.sidebar_sub_icon {
+  display: grid;
+  place-items: center;
+  color: #6b7280;
+}
+.sidebar_sub_label {
+  font-size: 0.875rem;
+  white-space: nowrap;
+}

package/dist/next.d.ts

@@ -3,14 +3,12 @@ import * as React from 'react';
 import { LucideIcon } from 'lucide-react';
 
 type MatchMode = "startsWith" | "exact";
-/** 단일 링크 메뉴 */
 interface SidebarLinkItem {
     type?: "link";
     href: string;
     label: React.ReactNode;
     icon?: LucideIcon;
 }
-/** 서브 메뉴 그룹 */
 interface SidebarGroupItem {
     type: "group";
     id: string;
@@ -23,12 +21,11 @@ interface SidebarProps {
     items?: SidebarItem[];
     activePath?: string;
     onItemSelect?: (href: string) => void;
-    width?: number;
     className?: string;
     style?: React.CSSProperties;
     match?: MatchMode;
     brandHref?: string;
 }
-declare const Sidebar: ({ items, activePath, onItemSelect, width, className, style, match, brandHref, }: SidebarProps) => react_jsx_runtime.JSX.Element;
+declare const Sidebar: ({ items, activePath, onItemSelect, className, style, match, brandHref, }: SidebarProps) => react_jsx_runtime.JSX.Element;
 
 export { Sidebar, type SidebarItem, type SidebarProps };

package/dist/next.js

@@ -3,7 +3,7 @@ import './next.css';
 import * as React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, CornerDownRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/navigation/sidebar/index.tsx
@@ -11,7 +11,6 @@ var Sidebar = ({
   items = [],
   activePath,
   onItemSelect,
-  width = 240,
   className,
   style,
   match = "startsWith",
@@ -23,17 +22,17 @@ var Sidebar = ({
   };
   const [openGroups, setOpenGroups] = React.useState([]);
   const [isOpen, setIsOpen] = React.useState(true);
-  const handleToggleSidebar = (value) => {
-    setIsOpen(value);
-    localStorage.setItem("isOpen", JSON.stringify(value));
+  const toggleSidebar = (next) => {
+    setIsOpen(next);
+    localStorage.setItem("isOpen", JSON.stringify(next));
   };
   React.useEffect(() => {
     if (!activePath) return;
-    const autoOpenIds = items.filter(
-      (item) => item.type === "group" && item.children.some((child) => isActive(child.href))
-    ).map((group) => group.id);
+    const autoOpen = items.filter(
+      (item) => item.type === "group" && item.children.some((c) => isActive(c.href))
+    ).map((g) => g.id);
     setOpenGroups(
-      (prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...autoOpenIds]))
+      (prev) => Array.from(/* @__PURE__ */ new Set([...prev, ...autoOpen]))
     );
   }, [activePath, items]);
   const toggleGroup = (id) => {
@@ -41,94 +40,108 @@ var Sidebar = ({
       (prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
     );
   };
-  const rootClassName = ["sidebar", className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "aside",
     {
-      className: rootClassName,
-      style: { width: isOpen ? `${width}px` : "56px", ...style },
-      "aria-label": "\uC0AC\uC774\uB4DC \uB0B4\uBE44\uAC8C\uC774\uC158",
+      className: [
+        "sidebar",
+        isOpen ? "is_open" : "is_closed",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style,
       children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href: brandHref,
-            className: "sidebar_brand_link",
-            "aria-label": "Bigtablet \uD648\uC73C\uB85C",
-            children: [
-              /* @__PURE__ */ jsx(
-                Image,
-                {
-                  src: "/images/logo/bigtablet.png",
-                  alt: "Bigtablet",
-                  width: 96,
-                  height: 30,
-                  priority: true,
-                  className: "sidebar_brand_img"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Image,
-                {
-                  src: "/images/sidebar/arrow-close.svg",
-                  alt: "ArrowClose",
-                  width: 24,
-                  height: 24,
-                  onClick: () => handleToggleSidebar(false)
-                }
-              )
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/images/logo/bigtablet.png",
+              alt: "Bigtablet",
+              width: 96,
+              height: 30,
+              priority: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/images/sidebar/arrow-close.svg",
+              alt: "Close",
+              width: 24,
+              height: 24,
+              onClick: () => toggleSidebar(false)
+            }
+          )
+        ] }) }),
         /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
           if (item.type === "group") {
-            const isOpen2 = openGroups.includes(item.id);
+            const open = openGroups.includes(item.id);
             return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
               /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  className: [
-                    "sidebar_item",
-                    isOpen2 && "is_open"
-                  ].filter(Boolean).join(" "),
+                  className: "sidebar_item",
                   onClick: () => toggleGroup(item.id),
                   children: [
-                    item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
-                    /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label }),
-                    /* @__PURE__ */ jsx(
-                      "span",
+                    /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
+                      item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
+                      /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "sidebar_item_right", children: /* @__PURE__ */ jsx(
+                      ChevronDown,
                       {
+                        size: 16,
                         className: [
                           "sidebar_chevron",
-                          isOpen2 && "is_open"
-                        ].filter(Boolean).join(" "),
-                        children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+                          open && "is_open"
+                        ].filter(Boolean).join(" ")
                       }
-                    )
+                    ) })
                   ]
                 }
               ),
-              isOpen2 && /* @__PURE__ */ jsx("div", { className: "sidebar_sub", children: item.children.map((child) => {
-                const active2 = isActive(child.href);
-                return /* @__PURE__ */ jsx(
-                  Link,
-                  {
-                    href: child.href,
-                    className: [
-                      "sidebar_sub_item",
-                      active2 && "is_active"
-                    ].filter(Boolean).join(" "),
-                    onClick: () => onItemSelect?.(child.href),
-                    children: child.label
-                  },
-                  child.href
-                );
-              }) })
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: [
+                    "sidebar_sub",
+                    open && "is_open"
+                  ].filter(Boolean).join(" "),
+                  children: item.children.map((child) => {
+                    const active2 = isActive(
+                      child.href
+                    );
+                    return /* @__PURE__ */ jsxs(
+                      Link,
+                      {
+                        href: child.href,
+                        className: [
+                          "sidebar_sub_item",
+                          active2 && "is_active"
+                        ].filter(Boolean).join(" "),
+                        onClick: () => onItemSelect?.(
+                          child.href
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", children: /* @__PURE__ */ jsx(
+                            CornerDownRight,
+                            {
+                              size: 14
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
+                        ]
+                      },
+                      child.href
+                    );
+                  })
+                }
+              )
             ] }, item.id);
           }
           const active = isActive(item.href);
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsx(
             Link,
             {
               href: item.href,
@@ -137,33 +150,24 @@ var Sidebar = ({
                 active && "is_active"
               ].filter(Boolean).join(" "),
               onClick: () => onItemSelect?.(item.href),
-              children: [
+              children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
                 item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: [
-                      "sidebar_label",
-                      active && "is_active"
-                    ].filter(Boolean).join(" "),
-                    children: item.label
-                  }
-                )
-              ]
+                /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
+              ] })
             },
             item.href
           );
         }) })
-      ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      ] }) : /* @__PURE__ */ jsx(
         Image,
         {
           src: "/images/sidebar/menu.svg",
-          alt: "menu",
+          alt: "Open",
           width: 24,
           height: 24,
-          onClick: () => handleToggleSidebar(true)
+          onClick: () => toggleSidebar(true)
         }
-      ) })
+      )
     }
   );
 };

package/dist/styles/scss/_motion.scss

@@ -1,4 +1,12 @@
-$transition_fast: 0.1s ease-out;
-$transition_base: 0.2s ease-out;
-$transition_slow: 0.3s ease-out;
-$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+$transition_fast: 0.1s ease-in-out;   // hover, icon
+$transition_base: 0.2s ease-in-out;   // 메뉴 열림
+$transition_slow: 0.3s ease-in-out;   // 레이아웃 변화
+
+$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1); // Material 계열
+$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);    // accordion, toast
+
+$transition_fade: 0.15s ease-in-out;      // opacity
+$transition_slide: 0.25s ease-in-out;     // translate
+$transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+
+$transition_state: 0.18s ease-in-out;     // disabled → enabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",

package/src/styles/scss/_motion.scss

@@ -1,4 +1,12 @@
-$transition_fast: 0.1s ease-out;
-$transition_base: 0.2s ease-out;
-$transition_slow: 0.3s ease-out;
-$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+$transition_fast: 0.1s ease-in-out;   // hover, icon
+$transition_base: 0.2s ease-in-out;   // 메뉴 열림
+$transition_slow: 0.3s ease-in-out;   // 레이아웃 변화
+
+$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1); // Material 계열
+$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);    // accordion, toast
+
+$transition_fade: 0.15s ease-in-out;      // opacity
+$transition_slide: 0.25s ease-in-out;     // translate
+$transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+
+$transition_state: 0.18s ease-in-out;     // disabled → enabled