pds-dev-kit-web 1.4.43 → 1.4.46

package/dist/src/desktop/components/ChatList/Body.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText' | 'bodySpacingMode'> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
     isSubmitted: boolean;
-};
-declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText, bodySpacingMode }: Props): JSX.Element;
+    callBackAfterScrollToBottom: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Body;

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

@@ -30,26 +30,34 @@ 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"));
-function Body(_a) {
-    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
+var Body = react_1.default.forwardRef(function (_a, ref) {
+    var 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;
-    var scrollRef = (0, react_1.useRef)(null);
-    var childrenLength = react_1.default.Children.count(children);
     /**
-     * @when 스크롤하지 않은 상태에서 chatMessages가 업데이트 될 때마다
+     * @when 페이지 진입 시
      * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
      * @clear -
      */
     (0, react_1.useEffect)(function () {
-        if (isButtonShow) {
+        if (!isButtonShow) {
+            triggerScrollToBottom();
+        }
+    }, [children, isButtonShow, triggerScrollToBottom]);
+    /**
+     * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        var handleTriggerScroll = function () {
             if (isSubmitted) {
+                callBackAfterScrollToBottom();
                 triggerScrollToBottom();
             }
-            return;
-        }
-        triggerScrollToBottom();
-    }, [childrenLength, isButtonShow, isSubmitted]);
+        };
+        setTimeout(function () { return handleTriggerScroll(); }, 0);
+    }, [children, isButtonShow, isSubmitted, callBackAfterScrollToBottom]);
     var handleClickMBtn = function () {
         triggerScrollToBottom();
     };
@@ -62,12 +70,12 @@ function Body(_a) {
         setIsButtonShow(true);
     };
     return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
-        react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
+        react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, scrollVisibleType: scrollVisibleType, ref: ref },
             children,
             react_1.default.createElement(EndOfList, null)),
         isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
             react_1.default.createElement(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-right: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -96,4 +104,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
     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/desktop/components/ChatList/ChatList.d.ts

@@ -41,5 +41,5 @@ export declare type Props = {
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-declare function ChatList({ styleTheme, headerMode, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, bodySpacingMode, onSubmit, onClickHeaderIBtn1, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ChatList;

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

@@ -49,7 +49,7 @@ var baseBackgroundColors = {
     translucent: 'ui_cpnt_list_base_area_translucent',
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
-function ChatList(_a) {
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _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, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
@@ -57,7 +57,17 @@ function ChatList(_a) {
             chat: ''
         }
     });
-    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isSubmitted = _t.isSubmitted, isDirty = _t.isDirty, isValid = _t.isValid;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isDirty = _t.isDirty, isValid = _t.isValid, isSubmitSuccessful = _t.isSubmitSuccessful;
+    /**
+     * @when 폼 submit이 성공적으로 완료 되었을 때
+     * @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) {
@@ -71,20 +81,22 @@ function ChatList(_a) {
             return;
         }
         onSubmit(chat);
-        reset({ chat: '' });
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
     };
     return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
             react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
         react_1.default.createElement(hybrid_1.Divider, null),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
                 react_1.default.createElement(Footer_1.default, { 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 }))),
         react_1.default.createElement(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];

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

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (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]);
-    function triggerScrollToBottom() {
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
         setScrollTrigger(function (prev) { return !prev; });
-    }
+    }, []);
     function EndOfList() {
         return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
     }

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

@@ -35,6 +35,7 @@ function DesktopTabBar(_a) {
     var history = (0, react_router_dom_1.useHistory)();
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     if (itemArray) {
+        var isSubTabBarActivated = itemArray.some(function (item) { return item.isActive && item.subArray; });
         var handelClickTabItem_1 = function (item, e) {
             if (item.onClick) {
                 item.onClick(e);
@@ -51,13 +52,14 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBox, null,
-            itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
-                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); }),
-            itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
+        return (react_1.default.createElement(S_TabBarBox, null,
+            react_1.default.createElement(S_MainTabBarSpace, null, itemArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.title },
+                react_1.default.createElement(S_MainTabItemWrapper, { text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, textLabel_1(item, false)),
+                item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, textLabel_1(subItem, true))); }))))); })),
+            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
     }
     if (textArray) {
+        var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
         var handleClick_1 = function (value) {
             if (value) {
                 history.push(value.path);
@@ -74,24 +76,26 @@ function DesktopTabBar(_a) {
                 return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
             }
         };
-        return (react_1.default.createElement(S_TabBox, null,
-            textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
-                react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
-                        handleClick_1(item);
-                    } }, textLabel_2(item, false)),
-                item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
-                        handleClick_1(subItem);
-                    } }, textLabel_2(subItem, true))); }))))); }),
-            textArray.map(function (item) {
-                return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
-            })));
+        return (react_1.default.createElement(S_TabBarBox, null,
+            react_1.default.createElement(S_MainTabBarSpace, null, textArray.map(function (item) { return (react_1.default.createElement(S_MainTabItemBox, { key: item.path },
+                react_1.default.createElement(S_MainTabItemWrapper, { isActive: pathname.includes(item.path), styleTheme: styleTheme, text: item.title, onClick: function () { return handleClick_1(item); } }, textLabel_2(item, false)),
+                pathname.includes(item.path) && item.subArray && (react_1.default.createElement(S_SubTabBarWrapper, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubTabItemWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handleClick_1(subItem); } }, textLabel_2(subItem, true))); }))))); })),
+            isSubTabBarActivated && react_1.default.createElement(S_SubTabBarSpace, null)));
     }
     return react_1.default.createElement(react_1.default.Fragment, null);
 }
-var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  align-items: flex-end;\n  box-sizing: border-box;\n  justify-content: center;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
+var S_TabBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_MainTabBarSpace = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  height: 40px;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingD;
+    return theme.ui_cpnt_tabbar_base_area;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_divider;
 }, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var tabIndicator = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"], ["\n  &::after {\n    background-color: ", ";\n    bottom: -1px;\n    left: 0px;\n    content: '';\n    height: 2px;\n    position: absolute;\n    width: 100%;\n    ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, styleTheme = _a.styleTheme;
     return styleTheme === 'content'
         ? theme.ui_cpnt_tabbar_border_active_indicator
@@ -101,51 +105,41 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
     return !isActive && "display: none;";
 });
 // NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
-var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"], ["\n  display: block;\n  content: ", ";\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n"])), function (_a) {
-    var text = _a.text;
-    return "'" + text + "'";
-});
-var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n"], ["\n  position: relative;\n  ", "\n"])), mediumStyle);
-var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  cursor: pointer;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
+var textOffset = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"], ["\n  & > div::before {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    display: block;\n    content: ", ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingA;
+    return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+    var text = _a.text;
+    return "'" + text + "'";
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
-}, textOffset, function (_a) {
     var theme = _a.theme;
     return theme.fontWeight.bold;
-}, textOffset);
-var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"], ["\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding-left: ", ";\n  position: relative;\n  height: 40px;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_tabbar_base_area;
 }, function (_a) {
+    var text = _a.text;
+    return "'" + text + "'";
+});
+var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"], ["\n  margin-right: ", ";\n  position: relative;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+    return theme.spacing.spacingD;
+});
+var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"], ["\n  align-items: flex-end;\n  display: flex;\n  height: 100%;\n  box-sizing: border-box;\n  padding: 0 ", ";\n  padding-bottom: ", ";\n  cursor: pointer;\n\n  ", "\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
-});
-var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"], ["\n  width: 100%;\n  height: 32px;\n  background-color: ", ";\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n"])), function (_a) {
+    return theme.spacing.spacingB;
+}, tabIndicator, textOffset);
+var S_SubTabBarWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"], ["\n  width: max-content;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n"])));
+var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 32px;\n  background-color: ", ";\n"], ["\n  height: 32px;\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_tabbar_base_area_sub;
 });
-var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"], ["\n  width: 100vw;\n  position: absolute;\n  bottom: -33px;\n  left: 0px;\n  height: 32px;\n  display: flex;\n  z-index: 1;\n"])));
-var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  position: relative;\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  & > div::before {\n    font-weight: ", ";\n    ", "\n  }\n\n  & > div::after {\n    font-weight: ", ";\n    ", "\n  }\n"])), function (_a) {
+var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"], ["\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: flex;\n  margin-right: ", ";\n  padding: 0 ", ";\n\n  &:last-child {\n    margin-right: 0;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
-}, textOffset, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
 }, textOffset);
 exports.default = DesktopTabBar;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -9,7 +9,7 @@ declare type Props = {
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     responsiveMode?: 'none' | 'use';
     size?: 'large' | 'small';
     state?: 'normal' | 'read_only' | 'disabled';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
-        if (value) {
+        if (value !== undefined) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -61,7 +76,7 @@ function Dropdown(_a) {
     };
     var handleClickOption = function (option) {
         setIsFocused(false);
-        if (!value) {
+        if (value === undefined) {
             setSelectedValue(option);
         }
         if (onChange) {

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

@@ -18,7 +18,7 @@ function FilterBar(_a) {
             return textArray.map(function (option) {
                 var _a;
                 return (react_1.default.createElement(S_ChipWrapper, { key: option.value },
-                    react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: (value === null || value === void 0 ? void 0 : value.value) || undefined, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
+                    react_1.default.createElement(Chip_1.Chip, { displayType: "filter_single", text: option.text, value: value === null || value === void 0 ? void 0 : value.value, id: option.value, onClickChip: function () { return onClickChip && onClickChip(option); }, activeChipId: activeChipId, chipId: (_a = option.value) === null || _a === void 0 ? void 0 : _a.toString() })));
             });
         }
     };

package/dist/src/mobile/components/ChatList/Body.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Props as ChatListProps } from './ChatList';
-declare type Props = Pick<ChatListProps, 'scrollVisibleType' | 'children' | 'bodyMBtnText' | 'bodySpacingMode'> & {
+declare const Body: React.ForwardRefExoticComponent<Pick<ChatListProps, "children" | "scrollVisibleType" | "bodyMBtnText" | "bodySpacingMode"> & {
     isSubmitted: boolean;
-};
-declare function Body({ scrollVisibleType, children, isSubmitted, bodyMBtnText, bodySpacingMode }: Props): JSX.Element;
+    callBackAfterScrollToBottom: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Body;

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

@@ -30,49 +30,53 @@ 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 useTimeout_1 = __importDefault(require("./useTimeout"));
-function Body(_a) {
-    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText, bodySpacingMode = _a.bodySpacingMode;
+var Body = react_1.default.forwardRef(function (_a, ref) {
+    var 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;
-    var scrollRef = (0, react_1.useRef)(null);
-    var childrenLength = react_1.default.Children.count(children);
-    var handleTriggerScroll = function () {
-        if (isButtonShow) {
-            if (isSubmitted) {
-                triggerScrollToBottom();
-            }
-            return;
+    /**
+     * @when 페이지 진입 시
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!isButtonShow) {
+            triggerScrollToBottom();
         }
-        triggerScrollToBottom();
-    };
+    }, [children, isButtonShow, triggerScrollToBottom]);
     /**
      * @when 스크롤을 하고 있지 않은 상황에서 chatMessages가 업데이트 될 때마다
      * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
      * @clear -
      */
-    (0, useTimeout_1.default)({ callback: handleTriggerScroll, target: childrenLength }, 200);
+    (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 () {
-        if (scrollRef.current) {
-            var _a = scrollRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            var BUTTON_SHOW_UP_HEIGHT = 100;
-            if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
-                setIsButtonShow(false);
-                return;
-            }
-            setIsButtonShow(true);
+    var handleScroll = function (e) {
+        var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        var BUTTON_SHOW_UP_HEIGHT = 100;
+        if (Math.ceil(scrollTop) + clientHeight + BUTTON_SHOW_UP_HEIGHT > scrollHeight) {
+            setIsButtonShow(false);
+            return;
         }
+        setIsButtonShow(true);
     };
     return (react_1.default.createElement(S_Body, { bodySpacingMode: bodySpacingMode },
-        react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: scrollRef, scrollVisibleType: scrollVisibleType },
+        react_1.default.createElement(S_ChatMessageBox, { onScroll: handleScroll, ref: ref, scrollVisibleType: scrollVisibleType },
             children,
             react_1.default.createElement(EndOfList, null)),
         isButtonShow && (react_1.default.createElement(S_BottomButtonWrapper, null,
             react_1.default.createElement(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-right: ", ";\n  padding-left: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-right: ", ";\n  padding-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
@@ -101,4 +105,5 @@ var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_6 ||
     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.d.ts

@@ -41,5 +41,5 @@ export declare type Props = {
     onSubmit: (value: string) => void;
     onClickHeaderIBtn1?: () => void;
 };
-declare function ChatList({ styleTheme, headerMode, titleText, descText, captionText, titleStyleTheme, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, bodySpacingMode, onSubmit, onClickHeaderIBtn1, submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1IconName, footerIBtn1IconFillType, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2IconName, footerIBtn2IconFillType, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3IconName, footerIBtn3IconFillType, footerIBtn3Type, footerIBtn3Accept, onClickFooterIBtn3 }: Props): JSX.Element;
+declare const ChatList: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ChatList;

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

@@ -49,7 +49,7 @@ var baseBackgroundColors = {
     translucent: 'ui_cpnt_list_base_area_translucent',
     transparent: 'ui_cpnt_list_base_area_translucent'
 };
-function ChatList(_a) {
+var ChatList = react_1.default.forwardRef(function (_a, ref) {
     var _b = _a.styleTheme, styleTheme = _b === void 0 ? 'solid' : _b, _c = _a.headerMode, headerMode = _c === void 0 ? 'use' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, _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, children = _a.children, _h = _a.textFieldState, textFieldState = _h === void 0 ? 'normal' : _h, textFieldHintText = _a.textFieldHintText, textFieldDefaultText = _a.textFieldDefaultText, textFieldMaxLength = _a.textFieldMaxLength, _j = _a.scrollVisibleType, scrollVisibleType = _j === void 0 ? 'moving' : _j, footerChildren = _a.footerChildren, _k = _a.submitIBtnState, submitIBtnState = _k === void 0 ? 'normal' : _k, bodyMBtnText = _a.bodyMBtnText, _l = _a.bodySpacingMode, bodySpacingMode = _l === void 0 ? 'none' : _l, onSubmit = _a.onSubmit, onClickHeaderIBtn1 = _a.onClickHeaderIBtn1, submitIBtnIconName = _a.submitIBtnIconName, submitIBtnIconFillType = _a.submitIBtnIconFillType, _m = _a.footerIBtn1State, footerIBtn1State = _m === void 0 ? 'normal' : _m, footerIBtn1IconName = _a.footerIBtn1IconName, footerIBtn1IconFillType = _a.footerIBtn1IconFillType, _o = _a.footerIBtn1Type, footerIBtn1Type = _o === void 0 ? 'button' : _o, onClickFooterIBtn1 = _a.onClickFooterIBtn1, _p = _a.footerIBtn2State, footerIBtn2State = _p === void 0 ? 'normal' : _p, footerIBtn2IconName = _a.footerIBtn2IconName, footerIBtn2IconFillType = _a.footerIBtn2IconFillType, _q = _a.footerIBtn2Type, footerIBtn2Type = _q === void 0 ? 'button' : _q, onClickFooterIBtn2 = _a.onClickFooterIBtn2, _r = _a.footerIBtn3State, footerIBtn3State = _r === void 0 ? 'normal' : _r, footerIBtn3IconName = _a.footerIBtn3IconName, footerIBtn3IconFillType = _a.footerIBtn3IconFillType, _s = _a.footerIBtn3Type, footerIBtn3Type = _s === void 0 ? 'button' : _s, footerIBtn3Accept = _a.footerIBtn3Accept, onClickFooterIBtn3 = _a.onClickFooterIBtn3;
     var methods = (0, react_hook_form_1.useForm)({
         mode: 'onChange',
@@ -57,7 +57,17 @@ function ChatList(_a) {
             chat: ''
         }
     });
-    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isSubmitted = _t.isSubmitted, isValid = _t.isValid, isDirty = _t.isDirty;
+    var reset = methods.reset, handleSubmit = methods.handleSubmit, control = methods.control, _t = methods.formState, isValid = _t.isValid, isDirty = _t.isDirty, isSubmitSuccessful = _t.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) {
@@ -71,20 +81,22 @@ function ChatList(_a) {
             return;
         }
         onSubmit(chat);
-        reset({ chat: '' });
+    };
+    var callBackAfterScrollToBottom = function () {
+        reset();
     };
     return (react_1.default.createElement(S_ChatList, { backgroundColor: baseBackgroundColors[styleTheme], id: "chatList" },
         headerMode === 'use' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(Header_1.default, { styleTheme: styleTheme, titleText: titleText, descText: descText, captionText: captionText, titleStyleTheme: titleStyleTheme, headerDisplayType: headerDisplayType, headerIBtn1IconName: headerIBtn1IconName, headerIBtn1IconFillType: headerIBtn1IconFillType, onClickHeaderIBtn1: onClickHeaderIBtn1 }),
             react_1.default.createElement(hybrid_1.Divider, null))),
-        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitted, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode }, children),
+        react_1.default.createElement(Body_1.default, { scrollVisibleType: scrollVisibleType, isSubmitted: isSubmitSuccessful, bodyMBtnText: bodyMBtnText, bodySpacingMode: bodySpacingMode, callBackAfterScrollToBottom: callBackAfterScrollToBottom, ref: ref }, children),
         react_1.default.createElement(hybrid_1.Divider, null),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
         react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
             react_1.default.createElement("form", { onSubmit: handleSubmit(handleSubmitChat) },
                 react_1.default.createElement(Footer_1.default, { 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 }))),
         react_1.default.createElement(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];

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

@@ -32,11 +32,16 @@ function useAutoScrollToBottom(_a) {
     (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]);
-    function triggerScrollToBottom() {
+    var triggerScrollToBottom = (0, react_1.useCallback)(function () {
         setScrollTrigger(function (prev) { return !prev; });
-    }
+    }, []);
     function EndOfList() {
         return react_1.default.createElement("li", { style: { listStyle: 'none', height: heightOfEndOfList + "px" }, ref: scrollRef });
     }

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

@@ -7,7 +7,7 @@ declare type DropDownValues = PDSValueOption & {
 declare type Props = {
     colorTheme?: 'none' | 'dark' | 'white';
     defaultValue?: PDSValueOption;
-    value?: PDSValueOption;
+    value?: PDSValueOption | null;
     hintText?: TFunctionResult;
     maxHeightItemNumber?: number;
     responsiveMode?: 'none' | 'use';

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

@@ -37,17 +37,32 @@ function Dropdown(_a) {
     // selectionMode = 'single',
     size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, onChange = _a.onChange;
     var _g = (0, react_1.useState)(false), isFocused = _g[0], setIsFocused = _g[1];
-    var _h = (0, react_1.useState)(defaultValue), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    /**
+     * @when value 프롭의 값에 따라
+     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+     * @clear -
+     */
     (0, react_1.useEffect)(function () {
-        if (defaultValue) {
-            setSelectedValue(defaultValue);
+        if (value === null) {
+            setSelectedValue(null);
+            return;
         }
-    }, [defaultValue]);
-    (0, react_1.useEffect)(function () {
-        if (value) {
+        if (value !== undefined) {
             setSelectedValue(value);
         }
     }, [value]);
+    /**
+     * @when defaultValue 프롭에 값이 있을 시
+     * @expected Dropdown의 초기값을 설정해줍니다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (!defaultValue) {
+            return;
+        }
+        setSelectedValue(defaultValue);
+    }, [defaultValue]);
     var handleClick = function () {
         if (state === 'disabled' || state === 'read_only') {
             return;
@@ -61,7 +76,7 @@ function Dropdown(_a) {
     };
     var handleClickOption = function (option) {
         setIsFocused(false);
-        if (!value) {
+        if (value === undefined) {
             setSelectedValue(option);
         }
         if (onChange) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "1.4.43",
+  "version": "1.4.46",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,10 +1,6 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v1.4.43]
+## [v1.4.46]
 
 ### Component
-* BasicChatListItem
-  * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
-* ChatBubbleListItem
-  * safari에서 우측 더보기 버튼이 간혈적으로 보이지 않는 이슈 해결
-* UserDesktopNavBar
-  * loginInfoMode가 profile일때 마우스 커서가 변하지 않는 이슈 해결
+* DesktopTabBar
+  * subTabBar가 영역을 가질 수 있도록 수정

package/dist/src/mobile/components/ChatList/useTimeout.d.ts

@@ -1,6 +0,0 @@
-declare type Props = {
-    callback: () => void;
-    target: unknown;
-};
-declare function useTimeout({ callback, target }: Props, delay: number): void;
-export default useTimeout;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-function useTimeout(_a, delay) {
-    var callback = _a.callback, target = _a.target;
-    (0, react_1.useEffect)(function () {
-        var timeout = setTimeout(function () { return callback(); }, delay);
-        return function () { return clearTimeout(timeout); };
-    }, [target]);
-}
-exports.default = useTimeout;