pds-dev-kit-web-test 2.4.14 → 2.4.15

package/dist/src/mobile/components/ChatList/Body.js

@@ -0,0 +1,120 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var MainButton_1 = require("../MainButton");
+var useAutoScrollToBottom_1 = __importDefault(require("./useAutoScrollToBottom"));
+var Body = react_1.default.forwardRef(function (_a, ref) {
+    var bodyChildren = _a.bodyChildren, scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode, callBackAfterScrollToBottom = _a.callBackAfterScrollToBottom;
+    var _b = (0, react_1.useState)(false), isButtonShow = _b[0], setIsButtonShow = _b[1];
+    var _c = (0, useAutoScrollToBottom_1.default)(), triggerScrollToBottom = _c.triggerScrollToBottom, EndOfList = _c.EndOfList;
+    /**
+     * @when 페이지 진입 시
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!isButtonShow) {
+            triggerScrollToBottom();
+        }
+    }, [children, isButtonShow, triggerScrollToBottom]);
+    /**
+     * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        var handleTriggerScroll = function () {
+            if (isSubmitted) {
+                callBackAfterScrollToBottom();
+                triggerScrollToBottom();
+            }
+        };
+        setTimeout(function () { return handleTriggerScroll(); }, 0);
+    }, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
+    var handleClickMBtn = function () {
+        triggerScrollToBottom();
+    };
+    var handleScroll = function (e) {
+        var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        var BUTTON_SHOW_UP_HEIGHT = 64;
+        if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
+            setIsButtonShow(false);
+            return;
+        }
+        setIsButtonShow(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ id: "chatMessageBox", onScroll: handleScroll, ref: ref, scrollVisibleType: scrollVisibleType }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {})] })), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }) }))] })));
+});
+var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var S_Body = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n\n  ", ";\n"])), function (_a) {
+    var bodySpacingMode = _a.bodySpacingMode;
+    return bodySpacingMode === 'use' && bodySpacing;
+});
+var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
+var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_ChatMessageBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    if (!scrollVisibleType || scrollVisibleType === 'moving') {
+        return;
+    }
+    return {
+        visible: scrollVisibleStyle,
+        hidden: scrollHiddenStyle
+    }[scrollVisibleType];
+});
+var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: ", ";\n  left: 50%;\n  position: absolute;\n  transform: translate(-50%, 0);\n"], ["\n  bottom: ", ";\n  left: 50%;\n  position: absolute;\n  transform: translate(-50%, 0);\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = Body;
+Body.displayName = 'Body';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,100 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var Body_1 = __importDefault(require("./Body"));
+var Footer_1 = __importDefault(require("./Footer"));
+var Header_1 = __importDefault(require("./Header"));
+var baseBackgroundColors = {
+    solid: 'ui_cpnt_list_base_area_solid',
+    translucent: 'ui_cpnt_list_base_area_translucent',
+    transparent: 'ui_cpnt_list_base_area_transparent'
+};
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
+    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, _d = _a.titleStyleTheme, titleStyleTheme = _d === void 0 ? 'subTitleBold' : _d, _e = _a.headerDisplayType, headerDisplayType = _e === void 0 ? 'none' : _e, _f = _a.headerIBtn1IconName, headerIBtn1IconName = _f === void 0 ? 'ic_xmark' : _f, _g = _a.headerIBtn1IconFillType, headerIBtn1IconFillType = _g === void 0 ? 'line' : _g, headerIBtn2IconName = _a.headerIBtn2IconName, _h = _a.headerIBtn2IconFillType, headerIBtn2IconFillType = _h === void 0 ? 'line' : _h, headerIBtn3IconName = _a.headerIBtn3IconName, _j = _a.headerIBtn3IconFillType, headerIBtn3IconFillType = _j === void 0 ? 'line' : _j, children = _a.children, bodyChildren = _a.bodyChildren, _k = _a.textFieldState, textFieldState = _k === void 0 ? 'normal' : _k, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _l = _a.scrollVisibleType, scrollVisibleType = _l === void 0 ? 'moving' : _l, footerChildren = _a.footerChildren, _m = _a.submitIBtnState, submitIBtnState = _m === void 0 ? 'normal' : _m, bodyMBtnText = _a.bodyMBtnText, _o = _a.bodySpacingMode, bodySpacingMode = _o === void 0 ? 'none' : _o, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _p = _a.footerIBtn1State, footerIBtn1State = _p === void 0 ? 'normal' : _p, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _q = _a.footerIBtn1Type, footerIBtn1Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _r = _a.footerIBtn2State, footerIBtn2State = _r === void 0 ? 'normal' : _r, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _s = _a.footerIBtn2Type, footerIBtn2Type = _s === void 0 ? 'button' : _s, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _t = _a.footerIBtn3State, footerIBtn3State = _t === void 0 ? 'normal' : _t, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _u = _a.footerIBtn3Type, footerIBtn3Type = _u === void 0 ? 'button' : _u, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var methods = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+        defaultValues: {
+            chat: ''
+        }
+    });
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _v = methods.formState, isValid = _v.isValid, isDirty = _v.isDirty, isSubmitSuccessful = _v.isSubmitSuccessful;
+    /**
+     * @when 폼 제출에 성공했을 시
+     * @expected 폼을 초기화합니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isSubmitSuccessful) {
+            reset();
+        }
+    }, [isSubmitSuccessful]);
+    var inputValue = (0, react_hook_form_1.useWatch)({ name: 'chat', control: control });
+    var isSubmitButtonActive = (0, react_1.useMemo)(function () {
+        if (!submitIBtnState) {
+            return false;
+        }
+        return isDirty && isValid && inputValue.length > 0 && submitIBtnState === 'normal';
+    }, [isDirty, isValid, inputValue, submitIBtnState]);
+    var handleSubmitChat = function (_a) {
+        var chat = _a.chat;
+        if (!chat || !isSubmitButtonActive) {
+            return;
+        }
+        onSubmit(chat);
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
+    };
+    return ((0, jsx_runtime_1.jsxs)(S_ChatList, __assign({ "x-pds-name": "ChatList", "x-pds-element-type": "component", "x-pds-device-type": "mobile", backgroundColor: baseBackgroundColors[colorTheme], id: "chatList" }, { children: [headerMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { colorTheme: colorTheme, titleText: titleText, descText: descText, captionText: captionText, onClickCaptionText: onClickCaptionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, headerIBtn2IconName: headerIBtn2IconName, headerIBtn2IconFillType: headerIBtn2IconFillType, headerIBtn3IconName: headerIBtn3IconName, headerIBtn3IconFillType: headerIBtn3IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1, onClickHeaderIBtn2: onClickHeaderIBtn2, onClickHeaderIBtn3: onClickHeaderIBtn3 }), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' })] })), (0, jsx_runtime_1.jsx)(Body_1.default, __assign({ scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, bodyChildren: bodyChildren, ref: ref }, { children: children })), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, { colorTheme: colorTheme === 'transparent' ? 'divider2' : 'none' }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)("form", __assign({ onSubmit: handleSubmit(handleSubmitChat) }, { children: (0, jsx_runtime_1.jsx)(Footer_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, footerChildren: footerChildren, isSubmitBtnActive: isSubmitButtonActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }) })) })), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" })] })));
+});
+var S_ChatList = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return theme[backgroundColor];
+});
+exports.default = ChatList;
+var templateObject_1;

package/dist/src/mobile/components/ChatList/ChatTextField.js

@@ -0,0 +1,63 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+var IconButton_1 = require("../IconButton");
+var TextField_1 = require("../TextField");
+var UploadIconButton_1 = require("../UploadIconButton");
+function ChatTextField(_a) {
+    var colorTheme = _a.colorTheme, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, isSubmitBtnActive = _a.isSubmitBtnActive, _b = _a.submitIBtnIconName, submitIBtnIconName = _b === void 0 ? 'ic_paper_plane' : _b, _c = _a.submitIBtnIconFillType, submitIBtnIconFillType = _c === void 0 ? 'fill' : _c, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    var chatValidation = {
+        validate: function (value) {
+            if (!value)
+                return true;
+            return value.trim().length ? true : false;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_FooterContentWrapper, __assign({ footerIBtn2IconName: footerIBtn2IconName, footerIBtn3IconName: footerIBtn3IconName }, { children: [footerIBtn3IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn3Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, onClick: onClickFooterIBtn3 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn3State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn3IconFillType, iconSize: 24, state: footerIBtn3State, accept: footerIBtn3Accept, onClick: onClickFooterIBtn3 })) })), footerIBtn2IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn2Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn2State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn2IconFillType, iconSize: 24, state: footerIBtn2State, onClick: onClickFooterIBtn2 })) })), (0, jsx_runtime_1.jsx)(S_TextFieldWrapper, { children: (0, jsx_runtime_1.jsx)(TextField_1.TextField, { name: "chat", responsiveMode: "use", textLineType: "single", inputType: "text", hintText: textFieldHintText, defaultText: textFieldDefaultText, validation: chatValidation, maxLength: textFieldMaxLength, colorTheme: colorTheme === 'transparent' ? 'transparent' : 'none', enterSubmitMode: "use", validationPoint: "onChange", state: textFieldState, autoComplete: "off" }) }), footerIBtn1IconName && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footerIBtn1Type === 'button' ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) : ((0, jsx_runtime_1.jsx)(UploadIconButton_1.UploadIconButton, { iconName: footerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: footerIBtn1State === 'normal'
+                            ? 'ui_cpnt_button_icon_primary'
+                            : 'ui_cpnt_button_icon_disabled', iconFillType: footerIBtn1IconFillType, iconSize: 24, state: footerIBtn1State, onClick: onClickFooterIBtn1 })) })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: submitIBtnIconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: isSubmitBtnActive ? 'ui_cpnt_button_icon_primary' : 'ui_cpnt_button_icon_disabled', iconFillType: submitIBtnIconFillType, iconSize: 24, type: "submit", state: isSubmitBtnActive ? 'normal' : 'disabled' })] })) }));
+}
+var S_FooterContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn3IconName = _a.footerIBtn3IconName;
+    return footerIBtn2IconName || footerIBtn3IconName
+        ? "".concat(theme.spacing.spacingC)
+        : "".concat(theme.spacing.spacingE);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var S_TextFieldWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n  margin-right: ", ";\n"], ["\n  flex: 1;\n  margin-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = ChatTextField;
+var templateObject_1, templateObject_2;

package/dist/src/mobile/components/ChatList/Footer.js

@@ -0,0 +1,25 @@
+"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 __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 styled_components_1 = __importDefault(require("styled-components"));
+var ChatTextField_1 = __importDefault(require("./ChatTextField"));
+function Footer(_a) {
+    var colorTheme = _a.colorTheme, footerChildren = _a.footerChildren, textFieldDefaultText = _a.textFieldDefaultText, textFieldHintText = _a.textFieldHintText, textFieldState = _a.textFieldState, textFieldMaxLength = _a.textFieldMaxLength, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, isSubmitBtnActive = _a.isSubmitBtnActive, footerIBtn1State = _a.footerIBtn1State, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, footerIBtn1Type = _a.footerIBtn1Type, onClickFooterIBtn1 = _a.onClickFooterIBtn1, footerIBtn2State = _a.footerIBtn2State, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, footerIBtn2Type = _a.footerIBtn2Type, onClickFooterIBtn2 = _a.onClickFooterIBtn2, footerIBtn3State = _a.footerIBtn3State, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, footerIBtn3Type = _a.footerIBtn3Type, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChatTextField_1.default, { colorTheme: colorTheme, textFieldDefaultText: textFieldDefaultText, textFieldHintText: textFieldHintText, textFieldState: textFieldState, textFieldMaxLength: textFieldMaxLength, isSubmitBtnActive: isSubmitBtnActive, submitIBtnIconName: submitIBtnIconName, submitIBtnIconFillType: submitIBtnIconFillType, footerIBtn1State: footerIBtn1State, footerIBtn1IconName: footerIBtn1IconName, footerIBtn1IconFillType: footerIBtn1IconFillType, footerIBtn1Type: footerIBtn1Type, onClickFooterIBtn1: onClickFooterIBtn1, footerIBtn2State: footerIBtn2State, footerIBtn2IconName: footerIBtn2IconName, footerIBtn2IconFillType: footerIBtn2IconFillType, footerIBtn2Type: footerIBtn2Type, onClickFooterIBtn2: onClickFooterIBtn2, footerIBtn3State: footerIBtn3State, footerIBtn3IconName: footerIBtn3IconName, footerIBtn3IconFillType: footerIBtn3IconFillType, footerIBtn3Type: footerIBtn3Type, footerIBtn3Accept: footerIBtn3Accept, onClickFooterIBtn3: onClickFooterIBtn3 }), (0, jsx_runtime_1.jsx)(S_FooterChildrenWrapper, { children: footerChildren })] }));
+}
+var S_FooterChildrenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = Footer;
+var templateObject_1;

package/dist/src/mobile/components/ChatList/Header.js

@@ -0,0 +1,56 @@
+"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 styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var IconButton_1 = require("../IconButton");
+var TextLabel_1 = require("../TextLabel");
+var titleTextColors = {
+    solid: 'sysTextPrimary',
+    translucent: 'sysTextWhite',
+    transparent: 'sysTextWhite'
+};
+var iconColors = {
+    solid: 'ui_cpnt_button_icon_enabled',
+    translucent: 'ui_cpnt_button_icon_white',
+    transparent: 'ui_cpnt_button_icon_white'
+};
+function Header(_a) {
+    var colorTheme = _a.colorTheme, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, onClickCaptionText = _a.onClickCaptionText, titleStyleTheme = _a.titleStyleTheme, headerDisplayType = _a.headerDisplayType, headerIBtn1IconName = _a.headerIBtn1IconName, headerIBtn1IconFillType = _a.headerIBtn1IconFillType, headerIBtn2IconName = _a.headerIBtn2IconName, headerIBtn2IconFillType = _a.headerIBtn2IconFillType, headerIBtn3IconName = _a.headerIBtn3IconName, headerIBtn3IconFillType = _a.headerIBtn3IconFillType, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, onClickHeaderIBtn2 = _a.onClickHeaderIBtn2, onClickHeaderIBtn3 = _a.onClickHeaderIBtn3;
+    return ((0, jsx_runtime_1.jsxs)(S_HeaderContentWrapper, { children: [(0, jsx_runtime_1.jsxs)(S_HeaderLeftBox, { children: [titleText && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: titleTextColors[colorTheme], wordBreak: "break_all" })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_c" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: descText, styleTheme: "body2Regular", colorTheme: colorTheme === 'solid' ? 'sysTextSecondary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_02' : undefined, wordBreak: "break_all" })] })), captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsx)(S_CaptionTextWrapper, __assign({ onClick: onClickCaptionText }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'solid' ? 'sysTextTertiary' : 'sysTextWhite', colorOverride: colorTheme === 'translucent' ? 'ui_cpnt_list_text_caption_03' : undefined, wordBreak: "break_all" }) }))] }))] }), headerDisplayType === 'ibtn3' && headerIBtn3IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn3IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn3IconFillType, onClick: onClickHeaderIBtn3 })), (headerDisplayType === 'ibtn2' || headerDisplayType === 'ibtn3') && headerIBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn2IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn2IconFillType, onClick: onClickHeaderIBtn2 })), headerDisplayType !== 'none' && headerIBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: headerIBtn1IconName, baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColors[colorTheme], iconSize: 24, iconFillType: headerIBtn1IconFillType, onClick: onClickHeaderIBtn1 }))] }));
+}
+var S_HeaderContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var S_HeaderLeftBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var S_CaptionTextWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
+exports.default = Header;
+var templateObject_1, templateObject_2, templateObject_3;

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

package/dist/src/mobile/components/ChatList/useAutoScrollToBottom.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+function useAutoScrollToBottom(_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.behavior, behavior = _c === void 0 ? 'auto' : _c, _d = _b.heightOfEndOfList, heightOfEndOfList = _d === void 0 ? 10 : _d;
+    var scrollRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)(false), scrollTrigger = _e[0], setScrollTrigger = _e[1];
+    /**
+     * @when scrollTrigger가 변할 때마다(false -> true, vice versa)
+     * @expected EndOfList가 화면에 보이도록 스크롤 한다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (scrollRef.current) {
+            scrollRef.current.scrollIntoView({ behavior: behavior });
+            // NOTE: 스크롤을 빠르게 하는 중에 scrollIntoView시 스크롤 영역만큼 렌더가 안되는 이슈에 대한 임시조치
+            setTimeout(function () {
+                var _a;
+                (_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: behavior });
+            }, 100);
+        }
+    }, [scrollTrigger]);
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
+        setScrollTrigger(function (prev) { return !prev; });
+    }, []);
+    function EndOfList() {
+        return (0, jsx_runtime_1.jsx)("li", { style: { listStyle: 'none', height: "".concat(heightOfEndOfList, "px") }, ref: scrollRef });
+    }
+    return {
+        triggerScrollToBottom: triggerScrollToBottom,
+        EndOfList: EndOfList
+    };
+}
+exports.default = useAutoScrollToBottom;

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

@@ -0,0 +1,60 @@
+"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_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+var TextLabel_1 = require("../TextLabel");
+function Checkbox(_a) {
+    var text = _a.text, _b = _a.fontWeight, fontWeight = _b === void 0 ? 'regular' : _b, _c = _a.state, state = _c === void 0 ? 'normal' : _c, name = _a.name, onChange = _a.onChange;
+    var register = (0, react_hook_form_1.useFormContext)().register;
+    var checkboxFormRegister = register(name);
+    var isChecked = (0, react_hook_form_1.useWatch)({ name: name });
+    var handleChange = function (e) {
+        checkboxFormRegister.onChange(e);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    var icon = function () {
+        switch (state) {
+            case 'normal': {
+                return isChecked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+            }
+            case 'disabled': {
+                return isChecked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }) })] })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_checkbox_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(S_Checkbox, __assign({ "x-pds-name": "Checkbox", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: (0, jsx_runtime_1.jsxs)(S_Label, __assign({ htmlFor: name }, { children: [icon(), text && ((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", __assign({ hidden: true, type: "checkbox" }, checkboxFormRegister, { id: name, disabled: state === 'disabled', onChange: handleChange }))] })) })));
+}
+var S_Checkbox = styled_components_1.default.div(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_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n"], ["\n  align-items: center;\n  display: flex;\n"])));
+var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));
+var S_OverrideIcon = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: 0;\n  position: absolute;\n  top: 0;\n"], ["\n  left: 0;\n  position: absolute;\n  top: 0;\n"])));
+var S_TextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+exports.default = Checkbox;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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