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

package/dist/src/mobile/components/Radio/Radio.js

@@ -39,9 +39,9 @@ function Radio(_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: value }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
+    return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: "".concat(name, "-").concat(value) }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
                         ? 'ui_cpnt_selcontrols_text_default'
-                        : 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
+                        : 'ui_cpnt_selcontrols_text_disabled' }) }), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: "".concat(name, "-").concat(value), type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })] })));
 }
 var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));

package/dist/src/mobile/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export interface ImageUploadResult {
+    location?: string;
+    error?: unknown;
+}
+export type ImageUploadHandler = (file: File) => Promise<ImageUploadResult>;
+/**
+ * NOTE
+ * toolbar에 사용하고싶은 옵션들을 배열 내부에 차례대로 작성해줍니다.
+ * toolbar 옵션은 아래 링크를 참고해주세요.
+ * https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+ * ex) 'undo | redo' => ['undo', 'redo']
+ */
+export type RichTextEditorProps = {
+    toolbar: string[];
+    defaultText?: string;
+    hintText?: string;
+    required?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    maxFileSize?: number;
+    lengthValidationText?: string;
+    requiredValidationText?: string;
+    fileSizeValidationText?: string;
+    height?: string | number;
+    tinymceScriptSrc?: string;
+    onChange?: (value: string, isValid?: boolean) => void;
+    onBlur?: (value: string, count: number) => void;
+    onImageUpload?: ImageUploadHandler;
+    isLoadingUsed?: boolean;
+    /**
+     * @deprecated onChange 이벤트를 사용해주세요.
+     */
+    onCountCharacter?: (count: number) => void;
+};
+declare function RichTextEditor({ toolbar, defaultText, hintText, maxLength, minLength, maxFileSize, required, lengthValidationText, requiredValidationText, fileSizeValidationText, height, tinymceScriptSrc, onChange, onBlur, onCountCharacter, onImageUpload, isLoadingUsed }: RichTextEditorProps): JSX.Element;
+export default RichTextEditor;

package/dist/src/mobile/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,281 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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");
+/* eslint-disable prefer-promise-reject-errors */
+var tinymce_react_1 = require("@tinymce/tinymce-react");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var uuid_1 = require("uuid");
+var components_1 = require("../../../common/components");
+var styled_components_1 = __importDefault(require("styled-components"));
+var MobileAlertDialog_1 = require("../MobileAlertDialog");
+var DEFAULT_ELEMENT_COUNT = 7;
+function RichTextEditor(_a) {
+    var _this = this;
+    var _b, _c, _d;
+    var toolbar = _a.toolbar, defaultText = _a.defaultText, hintText = _a.hintText, maxLength = _a.maxLength, minLength = _a.minLength, maxFileSize = _a.maxFileSize, required = _a.required, lengthValidationText = _a.lengthValidationText, requiredValidationText = _a.requiredValidationText, fileSizeValidationText = _a.fileSizeValidationText, _e = _a.height, height = _e === void 0 ? 600 : _e, _f = _a.tinymceScriptSrc, tinymceScriptSrc = _f === void 0 ? '/tinymce/tinymce.min.js' : _f, onChange = _a.onChange, onBlur = _a.onBlur, onCountCharacter = _a.onCountCharacter, onImageUpload = _a.onImageUpload, _g = _a.isLoadingUsed, isLoadingUsed = _g === void 0 ? true : _g;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    var _h = (0, react_1.useState)(0), count = _h[0], setCount = _h[1];
+    var _j = (0, react_1.useState)(true), isEditorLoading = _j[0], setIsEditorLoading = _j[1];
+    var _k = (0, react_1.useState)(false), isEditorDirty = _k[0], setIsEditorDirty = _k[1];
+    var _l = (0, react_1.useState)(false), isFileValidationAlertDialogOpen = _l[0], setIsFilValidationAlertDialogOpen = _l[1];
+    var editorRef = (0, react_1.useRef)(null);
+    var editorContent = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getContent();
+    var elementsCount = Array.from((_d = (_c = editorRef.current) === null || _c === void 0 ? void 0 : _c.contentDocument.all) !== null && _d !== void 0 ? _d : []).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
+    var useDarkMode = window.PdsUtils.tone === 'DARK';
+    (0, react_1.useEffect)(function () {
+        if (defaultText && defaultText.length === 0) {
+            setCount(defaultText.length);
+        }
+    }, [defaultText]);
+    var handleInit = function (evt, editor) {
+        if (isLoadingUsed) {
+            setIsEditorLoading(false);
+        }
+        editorRef.current = editor;
+        if (defaultText && defaultText.length !== 0) {
+            handleEditorValueChange(defaultText, editor);
+        }
+        var isSourceCodeToolActive = toolbar.some(function (group) {
+            var tools = group.split(' ');
+            return tools.includes('code');
+        });
+        if (isSourceCodeToolActive) {
+            var container = editor.getContainer();
+            var sourceCodeButton = container.querySelector('[aria-label="Source code"]');
+            if (sourceCodeButton instanceof HTMLElement) {
+                sourceCodeButton.style.width = 'fit-content';
+                sourceCodeButton.style.display = 'flex';
+                sourceCodeButton.style.alignItems = 'center';
+                var textElement = document.createElement('span');
+                textElement.innerHTML = 'HTML';
+                textElement.style.fontWeight = 'bold';
+                sourceCodeButton.append(textElement);
+            }
+        }
+    };
+    var handleEditorValueChange = function (value, editor) {
+        // NOTE: 기본 요소를 제외한 추가된 HTML 요소의 개수
+        var addedElementsCount = Array.from(editor.contentDocument.all).filter(function (element) { return !['BR', 'P'].includes(element.tagName); }).length - DEFAULT_ELEMENT_COUNT;
+        var wordCount = editor.plugins.wordcount;
+        var charCount = 0;
+        if (wordCount) {
+            charCount = wordCount.body.getCharacterCount();
+            onCountCharacter === null || onCountCharacter === void 0 ? void 0 : onCountCharacter(charCount);
+            setCount(charCount);
+        }
+        var isValid = function () {
+            // NOTE: 추가된 HTML 요소가 존재해도, maxLength를 초과할 경우.
+            if (maxLength && charCount > maxLength) {
+                return false;
+            }
+            // NOTE: 기본 요소를 제외한 추가된 HTML 요소가 존재하는 경우 유효성 검사를 통과합니다.
+            if (addedElementsCount > 0) {
+                return true;
+            }
+            if (required && charCount === 0) {
+                return false;
+            }
+            if (minLength && charCount < minLength) {
+                return false;
+            }
+            return true;
+        };
+        setIsEditorDirty(value ? true : false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, isValid());
+    };
+    var handleEditorBlur = function () {
+        var _a, _b;
+        var editorContent = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getContent();
+        var wordCount = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.plugins.wordcount;
+        if (editorContent && onBlur) {
+            onBlur(editorContent, (wordCount === null || wordCount === void 0 ? void 0 : wordCount.body.getCharacterCount()) || 0);
+        }
+    };
+    var handleFileChangeByFilePicker = function (cb) {
+        var input = document.createElement('input');
+        input.setAttribute('type', 'file');
+        input.setAttribute('accept', 'image/*');
+        input.addEventListener('change', function () { return __awaiter(_this, void 0, void 0, function () {
+            var file, result, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        file = input === null || input === void 0 ? void 0 : input.files[0];
+                        if (!file)
+                            return [2 /*return*/];
+                        if (maxFileSize && file.size > maxFileSize * 1024 * 1024) {
+                            setIsFilValidationAlertDialogOpen(true);
+                            return [2 /*return*/];
+                        }
+                        if (!onImageUpload) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, onImageUpload(file)];
+                    case 2:
+                        result = _a.sent();
+                        if (result.location) {
+                            cb(result.location, { title: file.name, alt: 'image' });
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_1 = _a.sent();
+                        return [2 /*return*/, Promise.reject(new Error('Request failed'))];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); });
+        input.click();
+    };
+    var handleUploadImageByDragAndDrop = function (blobInfo) { return __awaiter(_this, void 0, void 0, function () {
+        var convertedFile, result, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (maxFileSize && blobInfo.blob().size > maxFileSize * 1024 * 1024) {
+                        setIsFilValidationAlertDialogOpen(true);
+                        return [2 /*return*/, Promise.reject({ remove: true })];
+                    }
+                    if (blobInfo.blobUri().startsWith('blob')) {
+                        convertedFile = new File([blobInfo.blob()], (0, uuid_1.v4)());
+                    }
+                    if (!(convertedFile && onImageUpload)) return [3 /*break*/, 5];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, onImageUpload(convertedFile)];
+                case 2:
+                    result = _a.sent();
+                    if (result.location) {
+                        return [2 /*return*/, Promise.resolve(result.location)];
+                    }
+                    return [2 /*return*/, Promise.reject({ remove: true })];
+                case 3:
+                    error_2 = _a.sent();
+                    return [2 /*return*/, Promise.reject({ remove: true })];
+                case 4: return [3 /*break*/, 6];
+                case 5: return [2 /*return*/, Promise.reject({ remove: true })];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var validationText = (0, react_1.useMemo)(function () {
+        if (required &&
+            !isEditorDirty &&
+            (!editorContent || editorContent.length === 0) &&
+            elementsCount <= 0) {
+            return (0, jsx_runtime_1.jsx)(S_Error, { children: requiredValidationText });
+        }
+        if (elementsCount <= 0 && minLength && count > 0 && count < minLength) {
+            return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
+        }
+        if (maxLength && count > 0 && count > maxLength) {
+            return (0, jsx_runtime_1.jsx)(S_Error, { children: lengthValidationText });
+        }
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }, [required, isEditorDirty, editorContent, elementsCount, count, minLength, maxLength]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_Editor, { children: [isEditorLoading && isLoadingUsed && ((0, jsx_runtime_1.jsx)(S_LoadingWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.CircularProgress, {}) })), (0, jsx_runtime_1.jsx)(tinymce_react_1.Editor, { tinymceScriptSrc: tinymceScriptSrc, onInit: handleInit, onEditorChange: handleEditorValueChange, initialValue: defaultText, init: {
+                            images_max_width: '100%',
+                            menubar: false,
+                            promotion: false,
+                            branding: true,
+                            elementpath: false,
+                            plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap emoticons',
+                            editimage_cors_hosts: ['picsum.photos'],
+                            toolbar: toolbar.join(' | '),
+                            toolbar_sticky: false,
+                            toolbar_sticky_offset: 108,
+                            autosave_ask_before_unload: true,
+                            placeholder: hintText,
+                            autosave_interval: '30s',
+                            autosave_prefix: '{path}{query}-{id}-',
+                            autosave_restore_when_empty: false,
+                            autosave_retention: '2m',
+                            image_advtab: false,
+                            image_title: true,
+                            file_picker_types: 'image',
+                            importcss_append: true,
+                            file_picker_callback: handleFileChangeByFilePicker,
+                            images_upload_handler: handleUploadImageByDragAndDrop,
+                            mobile: {
+                                toolbar: toolbar.join(' | '),
+                                toolbar_mode: 'wrap'
+                            },
+                            selector: undefined,
+                            height: height,
+                            image_caption: true,
+                            noneditable_class: 'mceNonEditable',
+                            toolbar_mode: 'wrap',
+                            skin: useDarkMode ? 'oxide-dark' : 'oxide',
+                            content_css: useDarkMode ? 'dark' : 'default',
+                            indent: false,
+                            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px } img { height: auto; max-width: 100%; } p, div { overflow: hidden; } pre { white-space: pre-wrap; }',
+                            setup: function (editor) {
+                                editor.on('blur', handleEditorBlur);
+                            }
+                        } }), validationText] }), isFileValidationAlertDialogOpen && ((0, jsx_runtime_1.jsx)(MobileAlertDialog_1.MobileAlertDialog, { contentText: fileSizeValidationText, tBtn1Text: t('str_confirm'), onClickTBtn1: function () { return setIsFilValidationAlertDialogOpen(false); } }))] }));
+}
+var S_Editor = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 500px;\n  position: relative;\n\n  .tox-statusbar__wordcount {\n    visibility: hidden;\n  }\n"], ["\n  min-height: 500px;\n  position: relative;\n\n  .tox-statusbar__wordcount {\n    visibility: hidden;\n  }\n"])));
+var S_LoadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1000;\n"], ["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1000;\n"])));
+var S_Error = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-top: ", ";\n  text-align: left;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_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 = RichTextEditor;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/mobile/components/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, ImageUploadHandler, ImageUploadResult } from './RichTextEditor';

package/dist/src/mobile/components/RichTextEditor/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.RichTextEditor = void 0;
+var RichTextEditor_1 = require("./RichTextEditor");
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return __importDefault(RichTextEditor_1).default; } });

package/dist/src/mobile/components/SegmentedButtonGroup/SegmentedButtonGroup.js

@@ -72,8 +72,8 @@ function SegmentedButtonGroup(_a) {
         return 'ui_cpnt_button_icon_enabled';
     };
     return ((0, jsx_runtime_1.jsx)(S_SegmentedButtonGroupGroups, __assign({ "x-pds-name": "SegmentedButtonGroup", "x-pds-element-type": "component", "x-pds-device-type": "mobile", selectionType: selectionType }, { children: valueArray.map(function (_a) {
-            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d;
-            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue) }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }) }), String(currentButtonValue)));
+            var currentButtonValue = _a.value, iconName = _a.iconName, _b = _a.iconFillType, iconFillType = _b === void 0 ? 'line' : _b, _c = _a.iconColorTheme, iconColorTheme = _c === void 0 ? 'none' : _c, _d = _a.state, buttonState = _d === void 0 ? 'normal' : _d, _e = _a.backgroundColorTheme, backgroundColorTheme = _e === void 0 ? 'ui_cpnt_segmentedbuttongroup_base_default' : _e;
+            return ((0, jsx_runtime_1.jsx)(S_BasicButton, __assign({ size: size, onClick: function () { return handleClick(currentButtonValue); }, onMouseDown: function () { return handleMouseDown(currentButtonValue); }, disabled: state === 'disabled' || buttonState === 'disabled', selectionType: selectionType, isSelected: checkSelection(currentButtonValue), backgroundColorTheme: backgroundColorTheme }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getIconColorKey(checkSelection(currentButtonValue), state === 'disabled' || buttonState === 'disabled', iconColorTheme) }) }), String(currentButtonValue)));
         }) })));
 }
 var S_SegmentedButtonGroupGroups = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"], ["\n  width: max-content;\n\n  & > button:not(:last-child) {\n    margin-right: ", ";\n  }\n"])), function (_a) {
@@ -129,10 +129,12 @@ var small = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 =
     return selectionType === 'single' && '10px';
 });
 var S_BasicButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: none;\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  ", ";\n\n  &::before {\n    background-color: transparent;\n    border-radius: inherit;\n    content: '';\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n\n  &:hover:enabled:before {\n    background-color: ", ";\n  }\n\n  &:active:enabled:before {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), function (_a) {
-    var isSelected = _a.isSelected, theme = _a.theme;
-    return isSelected
-        ? theme.ui_cpnt_segmentedbuttongroup_base_selected
-        : theme.ui_cpnt_segmentedbuttongroup_base_default;
+    var isSelected = _a.isSelected, backgroundColorTheme = _a.backgroundColorTheme, theme = _a.theme;
+    if (isSelected)
+        return theme.ui_cpnt_segmentedbuttongroup_base_selected;
+    if (backgroundColorTheme)
+        return theme[backgroundColorTheme];
+    return theme.ui_cpnt_segmentedbuttongroup_base_default;
 }, function (_a) {
     var size = _a.size;
     return size && { large: large, medium: medium, small: small }[size];

package/dist/src/mobile/components/Select/Select.d.ts

@@ -1,10 +1,12 @@
-import type { PDSTextType } from '../../../common';
+import { Path } from 'react-hook-form';
+import type { IFormValues, PDSTextType } from '../../../common';
 import type { SelectHTMLAttributes } from 'react';
 type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];
 };
 type SelectProps = {
+    name?: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultValue?: SelectOption;
     value?: SelectOption['value'];
@@ -14,7 +16,10 @@ type SelectProps = {
     state?: 'normal' | 'read_only' | 'disabled';
     colorTheme?: 'none' | 'dark';
     customWidth?: string;
+    validation?: {
+        [key: string]: any;
+    };
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 };
-declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, onChange }: SelectProps): JSX.Element;
+declare function Select({ name, hintText, defaultValue, value, valueArray, size, responsiveMode, state, colorTheme, customWidth, validation, onChange }: SelectProps): JSX.Element;
 export default Select;

package/dist/src/mobile/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 () {
@@ -63,17 +87,21 @@ function Select(_a) {
         }
         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": "mobile", "$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": "mobile", "$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;
@@ -90,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;
@@ -100,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;
@@ -112,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  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  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  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  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 backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+var backgroundActiveColor = (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':
@@ -127,12 +158,23 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (te
             return theme.ui_cpnt_textfield_base_pressed;
     }
 });
-var normalActionColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
-var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __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  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    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  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    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_10 || (templateObject_10 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), 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  ", ";\n  border: 2px solid\n    ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\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    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  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    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;
@@ -167,7 +209,9 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
         ? theme.ui_cpnt_select_text_readonly
         : theme.ui_cpnt_select_text_disabled;
 }, 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;
@@ -179,5 +223,28 @@ var S_Select = styled_components_1.default.select(templateObject_10 || (template
     var state = _a.state;
     return state === 'normal' && normalActionColor;
 });
+var S_Error = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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;
+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;

package/dist/src/mobile/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;