pds-dev-kit-web-test 2.2.98 → 2.2.244

package/dist/src/desktop/components/Select/Select.js

@@ -39,16 +39,40 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_hook_form_1 = require("react-hook-form");
+var types_1 = require("../../../common/types");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
-var HINT = 'HINT_VALUE';
 function Select(_a) {
-    var _b;
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f, customWidth = _a.customWidth, onChange = _a.onChange;
+    var _b, _c;
+    var name = _a.name, hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, _g = _a.colorTheme, colorTheme = _g === void 0 ? 'none' : _g, customWidth = _a.customWidth, validation = _a.validation, onChange = _a.onChange;
+    // validation을 확장하여 힌트 체크 추가
+    var extendedValidation = __assign(__assign({}, validation), { validate: function (value) {
+            var _a;
+            // 값이 없으면 required.message 노출
+            if (!value || value.length === 0) {
+                if (validation === null || validation === void 0 ? void 0 : validation.required) {
+                    return ((_a = validation === null || validation === void 0 ? void 0 : validation.required) === null || _a === void 0 ? void 0 : _a.message) || false;
+                }
+            }
+            // 기존 validate 함수가 있다면 실행
+            if (validation === null || validation === void 0 ? void 0 : validation.validate) {
+                return validation.validate(value);
+            }
+            return true;
+        } });
+    var formContext = (0, react_hook_form_1.useFormContext)();
+    var register = name && formContext ? formContext.register(name, extendedValidation) : null;
+    var isError = name && formContext ? Boolean((0, types_1.getErrorByName)(formContext.formState.errors, name)) : false;
     var handleChange = function (e) {
-        if (onChange) {
-            onChange(e);
+        register === null || register === void 0 ? void 0 : register.onChange(e);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    var handleBlur = function (e) {
+        if (register) {
+            register.onBlur(e);
+            formContext.trigger(name);
         }
     };
     var getIconColorKey = function () {
@@ -56,28 +80,28 @@ function Select(_a) {
             if (colorTheme === 'dark') {
                 return 'ui_cpnt_select_icon_darktheme_disabled';
             }
-            if (colorTheme === 'none') {
-                return 'ui_cpnt_select_icon_02';
-            }
+            return 'ui_cpnt_select_icon_02';
         }
         if (colorTheme === 'dark') {
             return 'ui_cpnt_select_icon_darktheme_default';
         }
-        if (colorTheme === 'none') {
-            return 'ui_cpnt_select_icon_01';
-        }
+        return 'ui_cpnt_select_icon_01';
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, "$size": size, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "desktop", "$size": size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsxs)(S_SelectWrapper, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }) })), (0, jsx_runtime_1.jsxs)(S_Select, __assign({}, register, { disabled: state === 'disabled' || state === 'read_only', state: state, isError: isError, "$size": size, colorTheme: colorTheme, onChange: handleChange, onBlur: handleBlur, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : '', value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: "" }, { children: hintText }))), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }))] }), name &&
+                ((_c = (0, types_1.getErrorByName)(formContext.formState.errors, name)) === null || _c === void 0 ? void 0 : _c.message) &&
+                state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: (0, types_1.getErrorByName)(formContext.formState.errors, name).message })))] })));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
 var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  width: 188px;\n"], ["\n  height: 32px;\n  width: 188px;\n"])));
 var rlarge = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 48px;\n  width: 100%;\n"], ["\n  height: 48px;\n  width: 100%;\n"])));
-var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 2px solid ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 2px solid ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n  }\n"])), function (_a) {
+var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid\n      ", " !important;\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  color: ", ";\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n  }\n\n  :focus {\n    border: 2px solid\n      ", " !important;\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_darktheme_normal;
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, isError = _a.isError;
+    if (isError)
+        return theme.ui_cpnt_select_dropdown_border_darktheme_error;
     return theme.ui_cpnt_select_border_darktheme_normal;
 }, function (_a) {
     var theme = _a.theme;
@@ -94,7 +118,9 @@ var dark = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 =
         ? theme.ui_cpnt_select_text_darktheme_readonly
         : theme.ui_cpnt_select_text_darktheme_disabled;
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, isError = _a.isError;
+    if (isError)
+        return theme.ui_cpnt_select_dropdown_border_darktheme_error;
     return theme.ui_cpnt_select_border_darktheme_focus;
 }, function (_a) {
     var theme = _a.theme;
@@ -104,10 +130,10 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var $size = _a.$size;
     return $size &&
         {
-            large: large,
-            medium: medium,
-            small: small,
-            rlarge: rlarge
+            small: 'width: 188px;',
+            medium: 'width: 188px;',
+            large: 'width: 432px;',
+            rlarge: 'width: 100%'
         }[$size];
 }, function (_a) {
     var responsiveMode = _a.responsiveMode;
@@ -116,11 +142,12 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var customWidth = _a.customWidth;
     return customWidth && "width: ".concat(customWidth, ";");
 });
-var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
+var S_SelectWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var S_Icon_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  pointer-events: none;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundHoverColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -131,7 +158,7 @@ var backgroundHoverColor = (0, styled_components_1.css)(templateObject_8 || (tem
             return theme.ui_cpnt_textfield_base_hover;
     }
 });
-var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundActiveColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
     switch (colorTheme) {
         case 'none':
@@ -142,12 +169,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_9 || (te
             return theme.ui_cpnt_textfield_base_pressed;
     }
 });
-var normalActionColor = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
-var S_Select = styled_components_1.default.select(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  cursor: pointer;\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  cursor: pointer;\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var normalActionColor = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundHoverColor, backgroundActiveColor);
+var S_Select = styled_components_1.default.select(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  ", ";\n  border: 2px solid\n    ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  cursor: pointer;\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid\n      ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  ", ";\n  border: 2px solid\n    ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  cursor: pointer;\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    cursor: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid\n      ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_normal;
 }, function (_a) {
-    var theme = _a.theme;
+    var $size = _a.$size;
+    return $size &&
+        {
+            large: large,
+            medium: medium,
+            small: small,
+            rlarge: rlarge
+        }[$size];
+}, function (_a) {
+    var theme = _a.theme, isError = _a.isError;
+    if (isError)
+        return theme.ui_cpnt_select_dropdown_border_error;
     return theme.ui_cpnt_select_border_normal;
 }, function (_a) {
     var $size = _a.$size;
@@ -192,7 +230,9 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
             return 'pointer';
     }
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, isError = _a.isError;
+    if (isError)
+        return theme.ui_cpnt_select_dropdown_border_error;
     return theme.ui_cpnt_select_border_focus;
 }, function (_a) {
     var theme = _a.theme;
@@ -204,5 +244,28 @@ var S_Select = styled_components_1.default.select(templateObject_11 || (template
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
+var S_Error = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n  white-space: pre-wrap;\n"])), function (_a) {
+    var theme = _a.theme, colorTheme = _a.colorTheme;
+    switch (colorTheme) {
+        case 'none': {
+            return theme.ui_cpnt_select_dropdown_text_error;
+        }
+        case 'dark': {
+            return theme.ui_cpnt_select_dropdown_text_darktheme_error;
+        }
+    }
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.normal;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
 exports.default = Select;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/dist/src/desktop/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'right-top' | 'right-center' | 'right-bottom' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'center';
+export interface BaseSnackbarProps {
+    text: string;
+    actionBtnText?: string;
+    position?: SnackbarPosition;
+    closeBtnMode?: 'none' | 'use';
+    duration?: number;
+    anchorRef?: React.RefObject<HTMLElement>;
+    onActionBtnClick?: () => void;
+}
+export interface SnackbarProps extends BaseSnackbarProps {
+    id?: string | number;
+    onClose?: () => void;
+}
+declare const Snackbar: React.FC<SnackbarProps>;
+export default Snackbar;

package/dist/src/desktop/components/Snackbar/Snackbar.js

@@ -0,0 +1,221 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+var panels_1 = require("../../panels");
+var components_1 = require("../../../hybrid/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextButton_1 = require("../TextButton");
+var TextLabel_1 = require("../TextLabel");
+var Snackbar = function (_a) {
+    var id = _a.id, text = _a.text, _b = _a.actionBtnText, actionBtnText = _b === void 0 ? '' : _b, _c = _a.position, position = _c === void 0 ? 'bottom-center' : _c, _d = _a.closeBtnMode, closeBtnMode = _d === void 0 ? 'none' : _d, _e = _a.duration, duration = _e === void 0 ? 2000 : _e, anchorRef = _a.anchorRef, onActionBtnClick = _a.onActionBtnClick, onClose = _a.onClose;
+    var _f = (0, react_1.useState)(false), isVisible = _f[0], setIsVisible = _f[1];
+    var _g = (0, react_1.useState)({}), containerStyle = _g[0], setContainerStyle = _g[1];
+    var timerRef = (0, react_1.useRef)();
+    /*
+     * 마운트 시 애니메이션
+     */
+    (0, react_1.useEffect)(function () {
+        var showTimer = setTimeout(function () {
+            setIsVisible(true);
+        }, 10);
+        return function () { return clearTimeout(showTimer); };
+    }, [id]);
+    /*
+     * duration 타이머
+     */
+    (0, react_1.useEffect)(function () {
+        if (duration > 0) {
+            timerRef.current = setTimeout(function () {
+                handleClose();
+            }, duration);
+        }
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, [id, duration]);
+    /*
+     * 스크롤, 리사이즈시 포지션 업데이트
+     */
+    (0, react_1.useEffect)(function () {
+        var updatePosition = function () {
+            if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
+                var rect = anchorRef.current.getBoundingClientRect();
+                var style = getAnchorBasedStyle(position, rect);
+                setContainerStyle(style);
+            }
+            else {
+                var style = getViewportBasedStyle(position);
+                setContainerStyle(style);
+            }
+        };
+        // 초기 렌더링 시 약간의 딜레이를 주어 DOM이 완전히 준비되도록 함
+        var initialTimer = setTimeout(updatePosition, 0);
+        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
+            window.addEventListener('resize', updatePosition);
+            // ResizeObserver로 anchorRef 요소의 크기 변화 감지
+            var resizeObserver_1 = new ResizeObserver(updatePosition);
+            resizeObserver_1.observe(anchorRef.current);
+            return function () {
+                clearTimeout(initialTimer);
+                window.removeEventListener('resize', updatePosition);
+                resizeObserver_1.disconnect();
+            };
+        }
+        updatePosition();
+        return function () {
+            clearTimeout(initialTimer);
+        };
+    }, [position, anchorRef]);
+    var handleClose = function () {
+        setIsVisible(false);
+        if (onClose) {
+            setTimeout(function () {
+                onClose();
+            }, 300);
+        }
+    };
+    var getViewportBasedStyle = function (position) {
+        var base = {
+            position: 'fixed',
+            zIndex: 9999
+        };
+        var offset = 24;
+        switch (position) {
+            case 'top-left':
+                return __assign(__assign({}, base), { top: offset, left: offset });
+            case 'top-center':
+                return __assign(__assign({}, base), { top: offset, left: '50%', transform: 'translateX(-50%)' });
+            case 'top-right':
+                return __assign(__assign({}, base), { top: offset, right: offset });
+            case 'right-top':
+                return __assign(__assign({}, base), { top: offset, right: offset });
+            case 'right-center':
+                return __assign(__assign({}, base), { top: '50%', right: offset, transform: 'translateY(-50%)' });
+            case 'right-bottom':
+                return __assign(__assign({}, base), { bottom: offset, right: offset });
+            case 'bottom-right':
+                return __assign(__assign({}, base), { bottom: offset, right: offset });
+            case 'bottom-center':
+                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return __assign(__assign({}, base), { bottom: offset, left: offset });
+            case 'left-bottom':
+                return __assign(__assign({}, base), { bottom: offset, left: offset });
+            case 'left-center':
+                return __assign(__assign({}, base), { top: '50%', left: offset, transform: 'translateY(-50%)' });
+            case 'left-top':
+                return __assign(__assign({}, base), { top: offset, left: offset });
+            case 'center':
+                return __assign(__assign({}, base), { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' });
+            default:
+                return __assign(__assign({}, base), { bottom: offset, left: '50%', transform: 'translateX(-50%)' });
+        }
+    };
+    var getAnchorBasedStyle = function (position, rect) {
+        var base = {
+            position: 'fixed',
+            zIndex: 9999
+        };
+        var offset = 24;
+        switch (position) {
+            case 'top-left':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left });
+            case 'top-center':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+            case 'top-right':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.top + offset, right: window.innerWidth - rect.right });
+            case 'right-top':
+                return __assign(__assign({}, base), { top: rect.top, left: rect.right + offset });
+            case 'right-center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.right + offset, transform: 'translateY(-50%)' });
+            case 'right-bottom':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, left: rect.right + offset });
+            case 'bottom-right':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, right: window.innerWidth - rect.right });
+            case 'bottom-center':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+            case 'bottom-left':
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left });
+            case 'left-bottom':
+                return __assign(__assign({}, base), { bottom: window.innerHeight - rect.bottom, right: window.innerWidth - rect.left + offset });
+            case 'left-center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, right: window.innerWidth - rect.left + offset, transform: 'translateY(-50%)' });
+            case 'left-top':
+                return __assign(__assign({}, base), { top: rect.top, right: window.innerWidth - rect.left + offset });
+            case 'center':
+                return __assign(__assign({}, base), { top: rect.top + rect.height / 2, left: rect.left + rect.width / 2, transform: 'translate(-50%, -50%)' });
+            default:
+                return __assign(__assign({}, base), { top: rect.bottom + offset, left: rect.left + rect.width / 2, transform: 'translateX(-50%)' });
+        }
+    };
+    var getMaxWidthStyles = function () {
+        // anchor가 있는 경우
+        if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) {
+            var rect = anchorRef.current.getBoundingClientRect();
+            if (position.includes('top-') || position.includes('bottom-') || position === 'center') {
+                return {
+                    maxWidth: "".concat(rect.width - 48, "px"),
+                    width: 'max-content'
+                };
+            }
+        }
+        // anchor가 없으면 기본값
+        return {
+            maxWidth: '640px',
+            width: 'max-content'
+        };
+    };
+    var snackbarContent = ((0, jsx_runtime_1.jsx)(S_Container, __assign({ style: __assign(__assign({}, containerStyle), getMaxWidthStyles()) }, { children: (0, jsx_runtime_1.jsx)(S_SnackbarWrapper, __assign({ position: position, isVisible: isVisible }, { children: (0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ shapeType: "round", radius: 8, paddingTop: "none", paddingRight: "none", paddingBottom: "none", paddingLeft: "spacing_d", width: "100%", height: "auto", overrideBackgroundColorKey: "ui_cpnt_snackbar_base", overrideCSS: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: "caption1Regular", colorOverride: "ui_cpnt_snackbar_text", wordBreak: "break_all", ellipsisMode: "use", lineLimit: 2 }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_c" })] })), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsxs)(S_Buttons, { children: [onActionBtnClick && actionBtnText && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: actionBtnText, colorTheme: "grey3", size: "xsmall", onClick: onActionBtnClick })), closeBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", iconColorKey: "ui_cpnt_snackbar_text", iconSize: 16, baseSize: "medium", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleClose })), closeBtnMode === 'none' && actionBtnText && ((0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }))] })] })) })) })));
+    return (0, react_dom_1.createPortal)(snackbarContent, document.body);
+};
+var S_Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"], ["\n  pointer-events: none;\n  width: max-content;\n  & > * {\n    pointer-events: auto;\n  }\n"])));
+var getInitialTransform = function (position) {
+    if (position.startsWith('top-'))
+        return 'translateY(-10px)';
+    if (position.startsWith('bottom-'))
+        return 'translateY(10px)';
+    if (position.startsWith('left-'))
+        return 'translateX(-10px)';
+    if (position.startsWith('right-'))
+        return 'translateX(10px)';
+    if (position === 'center')
+        return 'scale(0.95)';
+    return 'translateY(0)';
+};
+var S_SnackbarWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  opacity: ", ";\n  transform: ", ";\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  width: 100%;\n"])), function (_a) {
+    var isVisible = _a.isVisible;
+    return (isVisible ? 1 : 0);
+}, function (_a) {
+    var isVisible = _a.isVisible, position = _a.position;
+    return isVisible ? 'translate(0, 0) scale(1)' : getInitialTransform(position);
+});
+var S_Buttons = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+exports.default = Snackbar;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/desktop/components/Snackbar/index.d.ts

@@ -0,0 +1 @@
+export { default as Snackbar } from './Snackbar';

package/dist/src/desktop/components/Snackbar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Snackbar = void 0;
+var Snackbar_1 = require("./Snackbar");
+Object.defineProperty(exports, "Snackbar", { enumerable: true, get: function () { return __importDefault(Snackbar_1).default; } });

package/dist/src/desktop/components/Snackbar/provider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { BaseSnackbarProps } from './Snackbar';
+interface SnackbarContextType {
+    showSnackbar: (props: BaseSnackbarProps) => void;
+    hideSnackbar: (id: string) => void;
+}
+export declare const SnackbarProvider: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSnackbar: () => SnackbarContextType;
+export {};

package/dist/src/desktop/components/Snackbar/provider.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbar = exports.SnackbarProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Snackbar_1 = __importDefault(require("./Snackbar"));
+var SnackbarContext = (0, react_1.createContext)(null);
+var SnackbarProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)(null), snackbar = _b[0], setSnackbar = _b[1];
+    var value = (0, react_1.useMemo)(function () { return ({
+        showSnackbar: function (props) {
+            var id = crypto.randomUUID();
+            setSnackbar(__assign(__assign({}, props), { id: id }));
+        },
+        hideSnackbar: function () {
+            setSnackbar(null);
+        }
+    }); }, []);
+    return ((0, jsx_runtime_1.jsxs)(SnackbarContext.Provider, __assign({ value: value }, { children: [children, snackbar && ((0, jsx_runtime_1.jsx)(Snackbar_1.default, __assign({}, snackbar, { onClose: function () { return value.hideSnackbar(); } }), snackbar.id))] })));
+};
+exports.SnackbarProvider = SnackbarProvider;
+var useSnackbar = function () {
+    var context = (0, react_1.useContext)(SnackbarContext);
+    if (!context)
+        throw new Error('useSnackbar must be used within a SnackbarProvider');
+    return context;
+};
+exports.useSnackbar = useSnackbar;

package/dist/src/desktop/components/TextButton/TextButton.d.ts

@@ -1,4 +1,4 @@
-import type { PDSTextType } from '../../../common';
+import type { PDSIconType, PDSTextType } from '../../../common';
 import type React from 'react';
 export type TextButtonProps = {
     text?: PDSTextType;
@@ -7,9 +7,12 @@ export type TextButtonProps = {
     fontWeight?: 'bold' | 'regular';
     type?: 'submit' | 'reset' | 'button';
     state?: 'normal' | 'disabled';
-    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'white' | 'white2';
+    iconMode?: 'none' | 'left' | 'right';
+    iconFillType?: 'fill' | 'line';
+    iconName?: PDSIconType;
+    colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
 };
-declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
+declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
 export default TextButton;