podo-ui 0.3.17 → 0.4.0

package/dist/react/atom/chip.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ChipProps {
+    children: React.ReactNode;
+    theme?: 'default' | 'blue' | 'green' | 'orange' | 'yellow' | 'red';
+    type?: 'default' | 'fill' | 'border';
+    size?: 'sm' | 'md';
+    round?: boolean;
+    icon?: string;
+    onDelete?: () => void;
+    className?: string;
+}
+declare const Chip: React.FC<ChipProps>;
+export default Chip;
+//# sourceMappingURL=chip.d.ts.map

package/dist/react/atom/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../react/atom/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/react/atom/chip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Chip = ({ children, theme = 'default', type = 'default', size = 'md', round = false, icon, onDelete, className = '', }) => {
+    const chipClasses = [
+        'chip',
+        theme !== 'default' && theme,
+        type !== 'default' && type,
+        size !== 'md' && size,
+        round && 'round',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: chipClasses, children: [icon && _jsx("i", { className: `icon ${icon}` }), children, onDelete && _jsx("button", { "aria-label": "\uC0AD\uC81C", onClick: onDelete })] }));
+};
+export default Chip;

package/dist/react/atom/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,0GAWT,WAAW,4CAuvIb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,0GAWT,WAAW,4CAovIb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/react/atom/editor.js

@@ -86,7 +86,6 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
     const tableContextMenuRef = useRef(null);
     // 다중 셀 선택 관련 상태
     const [selectedTableCells, setSelectedTableCells] = useState([]);
-    const [isSelectingCells, setIsSelectingCells] = useState(false);
     const [selectionStartCell, setSelectionStartCell] = useState(null);
     const isSelectingCellsRef = useRef(false); // 최신 상태 추적을 위한 ref
     const justFinishedDraggingRef = useRef(false); // 드래그가 방금 끝났는지 추적
@@ -1103,7 +1102,6 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         // selectionStartCell이 있고, 다른 셀로 이동한 경우에만 드래그 선택 모드 활성화
         if (selectionStartCell && cell !== selectionStartCell && !isSelectingCellsRef.current) {
             isSelectingCellsRef.current = true;
-            setIsSelectingCells(true);
             e.preventDefault();
             e.stopPropagation();
         }
@@ -1142,7 +1140,6 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         isMouseDownRef.current = false;
         // 드래그 선택 모드 무조건 종료 (선택된 셀은 유지)
         isSelectingCellsRef.current = false;
-        setIsSelectingCells(false);
         // selectionStartCell은 유지하여 선택 상태 보존
     }, []);
     // 셀 선택 해제

package/dist/react/molecule/toast-provider.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ToastPosition, ToastVariant } from './toast';
+import { ToastPosition, ToastTheme } from './toast';
 interface ToastOptions {
     header?: string;
     message: string;
-    variant?: ToastVariant;
-    type?: 'type01' | 'type02';
+    theme?: ToastTheme;
+    border?: boolean;
     long?: boolean;
     duration?: number;
     width?: string | number;

package/dist/react/molecule/toast-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAc,EAAc,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQzE,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IAC7C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAID,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAoFjE,CAAC"}
+{"version":3,"file":"toast-provider.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAEhF,OAAc,EAAc,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAQvE,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED,UAAU,gBAAgB;IACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC;IAC7C,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAID,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAoFjE,CAAC"}

package/dist/react/molecule/toast-provider.js

@@ -28,8 +28,8 @@ export const ToastProvider = ({ children }) => {
                 position,
                 header: options.header,
                 message: options.message,
-                variant: options.variant,
-                type: options.type,
+                theme: options.theme,
+                border: options.border,
                 long: options.long,
                 duration: options.duration,
                 width: options.width,
@@ -59,6 +59,6 @@ export const ToastProvider = ({ children }) => {
                         const positionToasts = getToastsByPosition(position);
                         if (positionToasts.length === 0)
                             return null;
-                        return (_jsx("div", { className: `${styles.toastContainer} ${styles[position]}`, children: positionToasts.map((toast) => (_jsx(Toast, { id: toast.id, header: toast.header, message: toast.message, variant: toast.variant, type: toast.type, long: toast.long, duration: toast.duration, width: toast.width, onClose: hideToast }, toast.id))) }, position));
+                        return (_jsx("div", { className: `${styles.toastContainer} ${styles[position]}`, children: positionToasts.map((toast) => (_jsx(Toast, { id: toast.id, header: toast.header, message: toast.message, theme: toast.theme, border: toast.border, long: toast.long, duration: toast.duration, width: toast.width, onClose: hideToast }, toast.id))) }, position));
                     }) }), document.body)] }));
 };

package/dist/react/molecule/toast.d.ts

@@ -1,11 +1,11 @@
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export type ToastVariant = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+export type ToastTheme = 'default' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
 export interface ToastProps {
     id: string;
     header?: string;
     message: string;
-    variant?: ToastVariant;
-    type?: 'type01' | 'type02';
+    theme?: ToastTheme;
+    border?: boolean;
     long?: boolean;
     duration?: number;
     width?: string | number;

package/dist/react/molecule/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7F,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmF/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../react/molecule/toast.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE3F,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA+E/B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/react/molecule/toast.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import styles from './toast.module.scss';
-const Toast = ({ id, header, message, variant = 'default', type = 'type01', long = false, duration = 3000, width, onClose, }) => {
+const Toast = ({ id, header, message, theme = 'default', border = false, long = false, duration = 3000, width, onClose, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const [isClosing, setIsClosing] = useState(false);
     useEffect(() => {
@@ -26,9 +26,9 @@ const Toast = ({ id, header, message, variant = 'default', type = 'type01', long
     };
     const toastClasses = [
         'toast',
-        variant,
-        type === 'type02' ? 'toast-border' : '',
-        long ? 'toast-long' : '',
+        theme,
+        border ? 'border' : '',
+        long ? 'long' : '',
         styles.toastAnimation,
         isVisible && !isClosing ? styles.fadeIn : '',
         isClosing ? styles.fadeOut : '',
@@ -39,7 +39,7 @@ const Toast = ({ id, header, message, variant = 'default', type = 'type01', long
         width: width ? (typeof width === 'number' ? `${width}px` : width) : 'auto',
     };
     const getIcon = () => {
-        switch (variant) {
+        switch (theme) {
             case 'success':
                 return 'icon-check';
             case 'warning':
@@ -53,6 +53,6 @@ const Toast = ({ id, header, message, variant = 'default', type = 'type01', long
                 return 'icon-info';
         }
     };
-    return (_jsxs("div", { className: toastClasses, style: toastStyle, children: [_jsx("div", { className: "toast-icon", children: _jsx("i", { className: getIcon() }) }), _jsxs("div", { className: "toast-content", children: [header && !long && _jsx("div", { className: "toast-header", children: header }), _jsx("div", { className: "toast-body", children: message })] }), _jsx("button", { className: "toast-close", onClick: handleClose, children: _jsx("i", { className: "icon-close" }) })] }));
+    return (_jsxs("div", { className: toastClasses, style: toastStyle, children: [_jsx("i", { className: getIcon() }), _jsxs("div", { className: "toast-content", children: [header && !long && _jsx("div", { className: "toast-header", children: header }), _jsx("div", { className: "toast-body", children: message })] }), _jsx("button", { onClick: handleClose, "aria-label": "\uB2EB\uAE30" })] }));
 };
 export default Toast;

package/global.scss

@@ -39,6 +39,11 @@
 @forward './scss/button/layout';
 @forward './scss/button/class';
 
+/*
+  Atom
+*/
+@forward './scss/atom/chip';
+
 /*
   Form
 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

package/scss/atom/chip.scss

@@ -0,0 +1,232 @@
+@use '../color/function' as *;
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px; // round=no (기본값)
+  font-family: var(--font-family);
+  font-weight: 400;
+  line-height: 1.6;
+  cursor: default;
+  user-select: none;
+  transition: all 0.2s;
+
+  // 기본 스타일 (theme: default, type: default, size: md)
+  // type: default = 진한 배경
+  padding: 2px 8px;
+  font-size: 16px;
+  background-color: color('default-deep');
+  color: color('default-deep-reverse');
+  border: none;
+
+  // 아이콘
+  i {
+    flex-shrink: 0;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-right: 0 !important;
+
+    &::before {
+      font-size: 24px !important;
+    }
+  }
+
+  // 삭제 버튼 (chip 하위 button 요소)
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    width: 24px;
+    height: 24px;
+    font-size: 18px;
+    line-height: 1;
+    transition: opacity 0.2s;
+    flex-shrink: 0;
+    color: inherit;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    // union 아이콘 사용
+    &::before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 24px;
+      background-color: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.39339 4.39339C4.65143 4.13535 5.06764 4.13535 5.32568 4.39339L9 8.06771L12.6743 4.39339C12.9324 4.13535 13.3486 4.13535 13.6066 4.39339C13.8647 4.65143 13.8647 5.06764 13.6066 5.32568L9.93229 9L13.6066 12.6743C13.8647 12.9324 13.8647 13.3486 13.6066 13.6066C13.3486 13.8647 12.9324 13.8647 12.6743 13.6066L9 9.93229L5.32568 13.6066C5.06764 13.8647 4.65143 13.8647 4.39339 13.6066C4.13535 13.3486 4.13535 12.9324 4.39339 12.6743L8.06771 9L4.39339 5.32568C4.13535 5.06764 4.13535 4.65143 4.39339 4.39339Z' fill='black'/%3E%3C/svg%3E");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.39339 4.39339C4.65143 4.13535 5.06764 4.13535 5.32568 4.39339L9 8.06771L12.6743 4.39339C12.9324 4.13535 13.3486 4.13535 13.6066 4.39339C13.8647 4.65143 13.8647 5.06764 13.6066 5.32568L9.93229 9L13.6066 12.6743C13.8647 12.9324 13.8647 13.3486 13.6066 13.6066C13.3486 13.8647 12.9324 13.8647 12.6743 13.6066L9 9.93229L5.32568 13.6066C5.06764 13.8647 4.65143 13.8647 4.39339 13.6066C4.13535 13.3486 4.13535 12.9324 4.39339 12.6743L8.06771 9L4.39339 5.32568C4.13535 5.06764 4.13535 4.65143 4.39339 4.39339Z' fill='black'/%3E%3C/svg%3E");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
+    }
+  }
+
+  // round=yes variant (완전히 둥근 모서리)
+  &.round {
+    border-radius: 100px;
+  }
+
+  // Size variants
+  &.sm {
+    padding: 2px 8px;
+    font-size: 12px;
+    gap: 4px;
+
+    i {
+      width: 16px;
+      height: 16px;
+
+      &::before {
+        font-size: 16px !important;
+      }
+    }
+
+    button {
+      width: 16px;
+      height: 16px;
+
+      &::before {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  &.md {
+    padding: 2px 8px;
+    font-size: 16px;
+    gap: 4px;
+
+    i {
+      width: 24px;
+      height: 24px;
+
+      &::before {
+        font-size: 24px !important;
+      }
+    }
+
+    button {
+      width: 24px;
+      height: 24px;
+
+      &::before {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  // Theme colors - type: default (진한 배경)
+  &.blue {
+    background-color: color('info');
+    color: color('info-reverse');
+  }
+
+  &.green {
+    background-color: color('success');
+    color: color('success-reverse');
+  }
+
+  &.yellow,
+  &.orange {
+    background-color: color('warning');
+    color: color('warning-reverse');
+  }
+
+  &.red {
+    background-color: color('danger');
+    color: color('danger-reverse');
+  }
+
+  // Type: fill (옅은 배경)
+  &.fill {
+    background-color: color('default-fill');
+    color: color('text-sub');
+
+    i {
+      color: color('text-body');
+    }
+
+    &.blue {
+      background-color: color('info-fill');
+      color: color('info-hover');
+
+      i {
+        color: color('info');
+      }
+    }
+
+    &.green {
+      background-color: color('success-fill');
+      color: color('success-hover');
+
+      i {
+        color: color('success');
+      }
+    }
+
+    &.yellow,
+    &.orange {
+      background-color: color('warning-fill');
+      color: color('warning-hover');
+
+      i {
+        color: color('warning');
+      }
+    }
+
+    &.red {
+      background-color: color('danger-fill');
+      color: color('danger-hover');
+
+      i {
+        color: color('danger');
+      }
+    }
+  }
+
+  // Type: border (테두리만)
+  &.border {
+    background-color: transparent;
+    border: 1px solid;
+    color: color('text-sub');
+    border-color: color('border');
+
+    &.blue {
+      color: color('info');
+      border-color: color('info');
+    }
+
+    &.green {
+      color: color('success');
+      border-color: color('success');
+    }
+
+    &.yellow,
+    &.orange {
+      color: color('warning');
+      border-color: color('warning');
+    }
+
+    &.red {
+      color: color('danger');
+      border-color: color('danger');
+    }
+  }
+}

package/scss/molecule/toast.scss

@@ -7,25 +7,27 @@
   align-items: flex-start;
   gap: s(3);
   padding: s(4) s(5);
-  border-radius: r(1);
-  background-color: color('bg-elevation-1');
+  border-radius: r(1); // 2px (border=no 기본값)
+  background-color: color('default-fill');
   border: none;
-  border-top: 4px solid color('border');
+  border-top: 4px solid color('default-deep');
   position: relative;
   min-width: 320px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-  // Icon area
-  .toast-icon {
+  // Icon (직접 i 요소 사용)
+  > i {
     flex-shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: color('text-sub');
+    margin: 0 !important;
 
-    i {
-      font-size: 20px;
+    &::before {
+      font-size: 24px !important;
+      margin: 0 !important;
     }
   }
 
@@ -34,7 +36,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: s(1);
+    gap: 4px;
   }
 
   .toast-header {
@@ -50,8 +52,8 @@
     color: color('text-body');
   }
 
-  // Close button
-  .toast-close {
+  // Close button (toast 하위 button 요소)
+  button {
     flex-shrink: 0;
     width: 24px;
     height: 24px;
@@ -59,22 +61,37 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: color('text-action');
+    color: color('text-sub');
     background: none;
     border: none;
     padding: 0;
+    margin: 0;
+    transition: opacity 0.2s;
 
     &:hover {
-      color: color('text-action-hover');
-    }
-
-    i {
-      font-size: 16px;
+      opacity: 0.7;
+    }
+
+    // union 아이콘 (X) 사용
+    &::before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 24px;
+      background-color: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.39339 4.39339C4.65143 4.13535 5.06764 4.13535 5.32568 4.39339L9 8.06771L12.6743 4.39339C12.9324 4.13535 13.3486 4.13535 13.6066 4.39339C13.8647 4.65143 13.8647 5.06764 13.6066 5.32568L9.93229 9L13.6066 12.6743C13.8647 12.9324 13.8647 13.3486 13.6066 13.6066C13.3486 13.8647 12.9324 13.8647 12.6743 13.6066L9 9.93229L5.32568 13.6066C5.06764 13.8647 4.65143 13.8647 4.39339 13.6066C4.13535 13.3486 4.13535 12.9324 4.39339 12.6743L8.06771 9L4.39339 5.32568C4.13535 5.06764 4.13535 4.65143 4.39339 4.39339Z' fill='black'/%3E%3C/svg%3E");
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.39339 4.39339C4.65143 4.13535 5.06764 4.13535 5.32568 4.39339L9 8.06771L12.6743 4.39339C12.9324 4.13535 13.3486 4.13535 13.6066 4.39339C13.8647 4.65143 13.8647 5.06764 13.6066 5.32568L9.93229 9L13.6066 12.6743C13.8647 12.9324 13.8647 13.3486 13.6066 13.6066C13.3486 13.8647 12.9324 13.8647 12.6743 13.6066L9 9.93229L5.32568 13.6066C5.06764 13.8647 4.65143 13.8647 4.39339 13.6066C4.13535 13.3486 4.13535 12.9324 4.39339 12.6743L8.06771 9L4.39339 5.32568C4.13535 5.06764 4.13535 4.65143 4.39339 4.39339Z' fill='black'/%3E%3C/svg%3E");
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+      -webkit-mask-size: contain;
     }
   }
 
   // Long variant (horizontal layout, left border)
-  &.toast-long {
+  &.long {
     .toast-content {
       flex-direction: row;
       align-items: center;
@@ -89,19 +106,20 @@
       white-space: nowrap;
     }
 
-    &:not(.toast-border) {
+    &:not(.border) {
       border-top: none;
       border-left: 4px solid color('border');
     }
   }
 
-  // Type 02 - Only full outline border (no thick colored border)
-  &.toast-border {
-    border: 1px solid color('border');
+  // Border variant - Full outline border with rounded corners
+  &.border {
+    border: 1px solid color('default-pressed');
+    border-radius: r(6); // 16px
+    padding: s(5); // 16px all sides
 
-    &.toast-long {
-      border: 1px solid color('border');
-      border-top: 1px solid color('border');
+    &.long {
+      border: 1px solid color('default-pressed');
     }
   }
 
@@ -110,16 +128,21 @@
     background-color: color('info-fill');
     border-top-color: color('info');
 
-    .toast-icon {
+    > i {
+      color: color('info');
+    }
+
+    .toast-header,
+    .toast-body {
       color: color('info');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('info');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('info');
     }
   }
@@ -128,16 +151,16 @@
     background-color: color('success-fill');
     border-top-color: color('success');
 
-    .toast-icon {
+    > i {
       color: color('success');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('success');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('success');
     }
   }
@@ -146,16 +169,16 @@
     background-color: color('warning-fill');
     border-top-color: color('warning');
 
-    .toast-icon {
+    > i {
       color: color('warning');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('warning');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('warning');
     }
   }
@@ -164,16 +187,16 @@
     background-color: color('danger-fill');
     border-top-color: color('danger');
 
-    .toast-icon {
+    > i {
       color: color('danger');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('danger');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('danger');
     }
   }
@@ -183,16 +206,16 @@
     background-color: color('default-fill');
     border-top-color: color('default-deep');
 
-    .toast-icon {
-      color: color('text-action');
+    > i {
+      color: color('text-sub');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('default-deep');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('default-pressed');
     }
   }
@@ -202,16 +225,21 @@
     background-color: color('primary-fill');
     border-top-color: color('primary');
 
-    .toast-icon {
+    > i {
+      color: color('primary');
+    }
+
+    .toast-header,
+    .toast-body {
       color: color('primary');
     }
 
-    &.toast-long:not(.toast-border) {
+    &.long:not(.border) {
       border-top: none;
       border-left-color: color('primary');
     }
 
-    &.toast-border {
+    &.border {
       border-color: color('primary');
     }
   }