pds-dev-kit-web 1.4.26 → 1.4.29

package/dist/src/GlobalStyle.js

@@ -5,6 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css');\n  \n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: Pretendard JP, -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
 exports.default = GlobalStyle;
 var templateObject_1;

package/dist/src/common/assets/icons/line/PostColumn.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import IconType from '../IconType';
+declare const PostColumn: ({ color, size, ...rest }: IconType) => JSX.Element;
+export default PostColumn;

package/dist/src/common/assets/icons/line/PostColumn.js

@@ -0,0 +1,34 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var PostColumn = function (_a) {
+    var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
+        react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M18.5,2 C20.433,2 22,3.567 22,5.5 L22,5.5 L22,18.5 C22,20.433 20.433,22 18.5,22 L18.5,22 L5.5,22 C3.567,22 2,20.433 2,18.5 L2,18.5 L2,5.5 C2,3.567 3.567,2 5.5,2 L5.5,2 Z M18.5,3.5 L5.5,3.5 C4.397,3.5 3.5,4.397 3.5,5.5 L3.5,5.5 L3.5,18.5 C3.5,19.603 4.397,20.5 5.5,20.5 L5.5,20.5 L15.23,20.5 L14.1017582,18.8869552 L13.7979992,19.1907141 C13.6179939,19.3696967 13.3254853,19.3696967 13.1465028,19.1896914 L13.1465028,19.1896914 L11.9641952,18.0063611 C11.7841899,17.8263558 11.7841899,17.5348699 11.9641952,17.3548646 L11.9641952,17.3548646 L12.3968216,16.9222382 C10.7287043,15.8411836 8.58705028,14.9800219 7.50497295,14.4410288 C7.03655006,14.2078401 6.75529177,13.7118027 6.80233861,13.1912192 C7.05393693,10.4082963 6.36255293,8.70949628 5.97697339,7.99867989 L5.97697339,7.99867989 C5.93197206,7.92708687 5.90538037,7.87492624 5.87265213,7.82890216 C5.81435496,7.66628373 5.85321974,7.48423291 5.97697339,7.36047927 L5.97697339,7.36047927 L6.24186756,7.09660786 L10.649952,11.5046923 C10.4914246,11.9935703 10.6008596,12.5499503 10.9884847,12.9375754 C11.5397509,13.4888416 12.4346636,13.4888416 12.9859299,12.9375754 C13.5371961,12.3863091 13.5371961,11.4924192 12.9859299,10.9411529 C12.5972821,10.5525051 12.0419248,10.4440928 11.5530467,10.6015975 L11.5530467,10.6015975 L7.14496234,6.19351307 L7.41087927,5.92759615 C7.53463291,5.8038425 7.71668373,5.76497772 7.88032492,5.82327489 C7.92532624,5.85600313 7.97748687,5.88157206 8.04294334,5.9214596 L8.04294334,5.9214596 C8.76091904,6.31317569 10.4586963,7.00558245 13.2416192,6.75500689 C13.7622027,6.70796005 14.2582401,6.99024109 14.4914288,7.45866398 C15.0293992,8.54074131 15.8844243,10.6895546 16.9624106,12.361763 L16.9624106,12.361763 L17.4062874,11.9168635 C17.5862927,11.7378809 17.8788013,11.7378809 18.0577838,11.9178863 L18.0577838,11.9178863 L19.2411141,13.1012166 C19.4200967,13.2812219 19.4200967,13.5727077 19.2400914,13.752713 L19.2400914,13.752713 L18.9404235,14.052381 L20.5,15.146 L20.5,5.5 C20.5,4.44713636 19.6826921,3.58197107 18.6490673,3.50549502 L18.5,3.5 Z" })));
+};
+exports.default = PostColumn;

package/dist/src/common/assets/icons/line/index.d.ts

@@ -79,6 +79,7 @@ declare const lineIcons: {
     readonly ic_plus: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_plus_circle: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_blog: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
+    readonly ic_post_column: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_community_p: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_free: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
     readonly ic_post_inquiry: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;

package/dist/src/common/assets/icons/line/index.js

@@ -82,6 +82,7 @@ var Plan_1 = __importDefault(require("./Plan"));
 var Plus_1 = __importDefault(require("./Plus"));
 var PlusCircle_1 = __importDefault(require("./PlusCircle"));
 var PostBlog_1 = __importDefault(require("./PostBlog"));
+var PostColumn_1 = __importDefault(require("./PostColumn"));
 var PostCommunityP_1 = __importDefault(require("./PostCommunityP"));
 var PostFree_1 = __importDefault(require("./PostFree"));
 var PostInquiry_1 = __importDefault(require("./PostInquiry"));
@@ -224,6 +225,7 @@ var lineIcons = {
     ic_plus: Plus_1.default,
     ic_plus_circle: PlusCircle_1.default,
     ic_post_blog: PostBlog_1.default,
+    ic_post_column: PostColumn_1.default,
     ic_post_community_p: PostCommunityP_1.default,
     ic_post_free: PostFree_1.default,
     ic_post_inquiry: PostInquiry_1.default,

package/dist/src/common/styles/colorSet/UIColor.json

@@ -526,5 +526,6 @@
     "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00",
     "ui_48": "sys_text_social_login_01",
     "ui_49": "sys_text_social_login_02",
-    "ui_50": "sys_text_white"
+    "ui_50": "sys_text_white",
+    "ui_51": "sys_background_dimmed_65"
 }

package/dist/src/common/styles/colorSet/index.d.ts

@@ -946,6 +946,7 @@ declare const colorSet: {
         ui_48: string;
         ui_49: string;
         ui_50: string;
+        ui_51: string;
     };
 };
 export default colorSet;

package/dist/src/common/styles/colorSet/ui-type.d.ts

@@ -527,4 +527,5 @@ export interface UITheme {
     ui_48: string;
     ui_49: string;
     ui_50: string;
+    ui_51: string;
 }

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

@@ -5,11 +5,11 @@ declare type Props = {
     contentText?: PDSTextType;
     leftImageMode?: 'none' | 'use';
     imageSrc?: string;
-    hoverBtnMode?: 'none' | 'use';
+    hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
     colorTheme?: 'seller' | 'subscriber';
-    onClickContextMenu?: (option: PDSValueOption) => void;
+    onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverBtnMode, contextMenuOptionArray, onClickContextMenu, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;

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

@@ -33,6 +33,7 @@ var ContextMenu_1 = require("../ContextMenu");
 var ContextMenuItem_1 = require("../ContextMenuItem");
 var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
+var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
     subscriber: 'sysTextSecondary'
@@ -42,9 +43,11 @@ var backgroundColorTheme = {
     subscriber: 'ui_cpnt_list_base_area'
 };
 function BasicChatListItem(_a) {
-    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverBtnMode, hoverBtnMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenu = _a.onClickContextMenu, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
+    var titleText = _a.titleText, contentText = _a.contentText, _b = _a.leftImageMode, leftImageMode = _b === void 0 ? 'none' : _b, imageSrc = _a.imageSrc, _c = _a.hoverMode, hoverMode = _c === void 0 ? 'use' : _c, contextMenuOptionArray = _a.contextMenuOptionArray, onClickContextMenuItem = _a.onClickContextMenuItem, _d = _a.contextMenuState, contextMenuState = _d === void 0 ? 'normal' : _d, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'subscriber' : _e;
     var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
     var contextMenuRef = (0, react_1.useRef)(null);
+    var chatBody = document.querySelector('#chatMessageBox');
+    var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
      * @when contextMenu가 열려 있을 때
      * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
@@ -52,57 +55,45 @@ function BasicChatListItem(_a) {
      */
     (0, react_1.useEffect)(function () {
         // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
-        var chatBody = document.querySelector('#chatMessageBox');
-        if (chatBody) {
-            if (isContextMenuOpen) {
-                chatBody.style.overflowY = 'hidden';
-            }
-            else {
-                chatBody.style.overflowY = 'auto';
-            }
+        if (!chatBody) {
+            return;
         }
-        function handleClickOutside(e) {
-            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target)) {
-                if (isContextMenuOpen) {
-                    e.stopPropagation();
-                    setIsContextMenuOpen(false);
-                }
-            }
-        }
-        document.addEventListener('click', handleClickOutside);
-        return function () {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, [isContextMenuOpen]);
-    var handleClickMoreButton = function () {
+        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
+    }, [isContextMenuOpen, chatBody]);
+    var handleMoreButtonClick = function (e) {
+        e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
     };
-    var handleClickContextMenuItem = function (option) {
-        if (onClickContextMenu) {
-            onClickContextMenu(option);
+    var handleContextMenuItemClick = function (option) {
+        if (onClickContextMenuItem) {
+            onClickContextMenuItem(option);
         }
         setIsContextMenuOpen(false);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverBtnMode: hoverBtnMode },
+        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverMode: hoverMode },
             leftImageMode === 'use' && (react_1.default.createElement(S_ImageViewWrapper, null,
                 react_1.default.createElement(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }))),
             react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: titleTextColors[colorTheme] }),
             react_1.default.createElement(S_ContentTextWrapper, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary", wordBreak: "break_all" })),
-            react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen },
-                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_on_primary", onClick: handleClickMoreButton }),
-                isContextMenuOpen && (react_1.default.createElement(S_ContextMenuWrapper, { ref: contextMenuRef },
-                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleClickContextMenuItem, state: contextMenuState })); }))))))));
+            hoverMode === 'use' && (react_1.default.createElement(S_SeeMoreButton, { isContextMenuOpen: isContextMenuOpen, ref: contextMenuRef },
+                react_1.default.createElement(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_button_icon_enabled", onClick: handleMoreButtonClick }))),
+            react_1.default.createElement(Popup_1.PopupProvider, null,
+                react_1.default.createElement(Popup_1.Popup, { targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } },
+                    react_1.default.createElement(ContextMenu_1.ContextMenu, null, contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return (react_1.default.createElement(ContextMenuItem_1.ContextMenuItem, { key: el.value, option: el, onClick: handleContextMenuItemClick, state: contextMenuState })); })))))));
 }
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"], ["\n  display: ", ";\n  margin-left: ", ";\n  position: relative;\n"])), function (_a) {
-    var isContextMenuOpen = _a.isContextMenuOpen;
-    return (isContextMenuOpen ? 'block' : 'none');
-}, function (_a) {
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-left: ", ";\n  position: relative;\n  visibility: ", ";\n"], ["\n  margin-left: ", ";\n  position: relative;\n  visibility: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
+}, function (_a) {
+    var isContextMenuOpen = _a.isContextMenuOpen;
+    return (isContextMenuOpen ? 'visible' : 'hidden');
 });
-var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  height: fit-content;\n  min-height: 24px;\n  max-width: 100%;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  ", ";\n\n  :hover {\n    ", " {\n      display: ", ";\n    }\n  }\n"])), function (_a) {
+var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  height: fit-content;\n  max-width: 100%;\n  min-height: 24px;\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n\n  :hover {\n    ", " {\n      visibility: ", ";\n    }\n  }\n"])), function (_a) {
+    var colorTheme = _a.colorTheme, theme = _a.theme;
+    return colorTheme && theme[backgroundColorTheme[colorTheme]];
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
@@ -114,12 +105,9 @@ var S_BasicChatListItem = styled_components_1.default.div(templateObject_2 || (t
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
-}, function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    return colorTheme && theme[backgroundColorTheme[colorTheme]];
 }, S_SeeMoreButton, function (_a) {
-    var hoverBtnMode = _a.hoverBtnMode;
-    return hoverBtnMode === 'use' && 'block';
+    var hoverMode = _a.hoverMode;
+    return hoverMode === 'use' && 'visible';
 });
 var S_ImageViewWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  margin-right: ", ";\n  min-width: 24px;\n  width: 24px;\n"])), function (_a) {
     var theme = _a.theme;
@@ -129,6 +117,5 @@ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"], ["\n  position: absolute;\n  right: -4px;\n  z-index: 10;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/desktop/components/BasicChatListItem/Popup.d.ts

@@ -0,0 +1,19 @@
+import React, { MutableRefObject } from 'react';
+declare type Props = {
+    targetRef: MutableRefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onClickOutside?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    placement: string;
+    wrapperHeight?: number;
+    children: React.ReactNode;
+};
+declare function Popup({ targetRef, isOpen, onClickOutside, onClick, placement, wrapperHeight, children }: Props): JSX.Element;
+/**
+ * 팝업 루트 프로바이더
+ * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
+ */
+declare function PopupProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export { PopupProvider, Popup };

package/dist/src/desktop/components/BasicChatListItem/Popup.js

@@ -0,0 +1,238 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 });
+exports.Popup = exports.PopupProvider = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+var PopupContext = (0, react_1.createContext)({
+    current: null
+});
+function getHAutoPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
+    return (leftSpaced ? 'left' : 'right') + "-" + (topSpaced ? 'end' : 'start');
+}
+function getVAutoPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    var topSpaced = targetRect.bottom + popupRect.height > (wrapperHeight || window.innerWidth);
+    return (topSpaced ? 'top' : 'bottom') + "-" + (leftSpaced ? 'end' : 'start');
+}
+function getVCenterPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var leftSpaced = targetRect.right + popupRect.width > window.innerWidth;
+    return leftSpaced ? 'left-center' : 'right-center';
+}
+function getHCenterPlacement(_a) {
+    var targetRect = _a.targetRect, popupRect = _a.popupRect;
+    var topSpaced = targetRect.bottom + popupRect.height > window.innerHeight;
+    return topSpaced ? 'top-center' : 'bottom-center';
+}
+/**
+ * 위치 정규화
+ */
+function getNormalizedPlacement(_a) {
+    var placement = _a.placement, targetRect = _a.targetRect, popupRect = _a.popupRect, wrapperHeight = _a.wrapperHeight;
+    switch (placement) {
+        case 'v-auto':
+            return getVAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'h-auto':
+            return getHAutoPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'v-center':
+            return getVCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        case 'h-center':
+            return getHCenterPlacement({ targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+        default:
+            return placement;
+    }
+}
+function updatePosition(_a) {
+    var targetElem = _a.targetElem, popupElem = _a.popupElem, placement = _a.placement, wrapperHeight = _a.wrapperHeight;
+    var targetRect = targetElem.getBoundingClientRect();
+    var popupRect = popupElem.getBoundingClientRect();
+    var normPlacement = getNormalizedPlacement({ placement: placement, targetRect: targetRect, popupRect: popupRect, wrapperHeight: wrapperHeight });
+    switch (normPlacement) {
+        case 'top':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-start':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-end':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + targetRect.width - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'top-both':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = targetRect.width + "px";
+            break;
+        case 'top-center':
+            popupElem.style.top = targetRect.top - popupRect.height + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-start':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-end':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.right - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'bottom-both':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left + "px";
+            popupElem.style.width = targetRect.width + "px";
+            break;
+        case 'bottom-center':
+            popupElem.style.top = targetRect.bottom + "px";
+            popupElem.style.left = targetRect.left - (popupRect.width - targetRect.width) / 2 + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-start':
+            popupElem.style.top = targetRect.top + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-end':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'left-center':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left - popupRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-start':
+            popupElem.style.top = targetRect.top + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-end':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        case 'right-center':
+            popupElem.style.top = targetRect.top - (popupRect.height - targetRect.height) / 2 + "px";
+            popupElem.style.left = targetRect.left + targetRect.width + "px";
+            popupElem.style.width = 'auto';
+            break;
+        default:
+            break;
+    }
+    return normPlacement;
+}
+function Popup(_a) {
+    var targetRef = _a.targetRef, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClickOutside = _a.onClickOutside, onClick = _a.onClick, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, wrapperHeight = _a.wrapperHeight, children = _a.children;
+    var popupRootRef = (0, react_1.useContext)(PopupContext);
+    var _d = (0, react_1.useState)('bottom'), normPlacement = _d[0], setNormPlacement = _d[1];
+    var popupRef = (0, react_1.useRef)(null);
+    /**
+     * 팝업 외의 다른 요소 클릭시 팝업이 닫히도록 합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleClickOutside(e) {
+            if (popupRootRef.current && !popupRootRef.current.contains(e.target)) {
+                if (onClickOutside) {
+                    onClickOutside();
+                }
+            }
+        }
+        window.document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            window.document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [popupRootRef, onClickOutside]);
+    /**
+     * 전체 UI 렌더링이 한 프레임 완료된 후에 팝업 위치를 결정합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        window.requestAnimationFrame(function () {
+            if (!targetRef.current || !popupRef.current) {
+                return;
+            }
+            var targetElem = targetRef.current;
+            var popupElem = popupRef.current;
+            var updatedPlacement = updatePosition({ targetElem: targetElem, popupElem: popupElem, placement: placement, wrapperHeight: wrapperHeight });
+            setNormPlacement(updatedPlacement);
+        });
+    }, [isOpen, placement, wrapperHeight, targetRef, popupRef]);
+    function handlePopupClick(e) {
+        e.stopPropagation();
+        if (onClick) {
+            onClick(e);
+        }
+    }
+    if (!popupRootRef || !popupRootRef.current || !isOpen) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    var popupComponent = (react_1.default.createElement(S_Popup, { ref: popupRef, onClick: function (e) { return handlePopupClick(e); } }, typeof children === 'function' ? children(normPlacement) : children));
+    return (0, react_dom_1.createPortal)(popupComponent, popupRootRef.current);
+}
+exports.Popup = Popup;
+var S_Popup = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"], ["\n  left: -1000px;\n  position: fixed;\n  top: -1000px;\n  z-index: 1000;\n"])));
+/**
+ * 팝업 루트 프로바이더
+ * 팝업을 사용하기 위해서는 팝업 프로바이더가 상위 컴포넌트로 있어야 합니다.
+ */
+function PopupProvider(_a) {
+    var children = _a.children;
+    var ref = (0, react_1.useRef)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(PopupContext.Provider, { value: ref }, children),
+        react_1.default.createElement("div", { ref: ref })));
+}
+exports.PopupProvider = PopupProvider;
+var templateObject_1;

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

@@ -4,7 +4,10 @@ declare type BodyTextGroupProps = {
     titleText: PDSTextType;
     descText?: PDSTextType;
     contentText?: PDSTextType;
+    titleTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
+    descTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
+    contentTextWordBreak?: 'normal' | 'break_all' | 'keep_all' | 'break_word';
     contentFontWeight?: 'regular' | 'bold';
 };
-declare function BodyTextGroup({ titleText, descText, contentText, contentFontWeight }: BodyTextGroupProps): JSX.Element;
+declare function BodyTextGroup({ titleText, descText, contentText, titleTextWordBreak, descTextWordBreak, contentTextWordBreak, contentFontWeight }: BodyTextGroupProps): JSX.Element;
 export default BodyTextGroup;

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

@@ -7,14 +7,14 @@ var react_1 = __importDefault(require("react"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 function BodyTextGroup(_a) {
-    var titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _b = _a.contentFontWeight, contentFontWeight = _b === void 0 ? 'regular' : _b;
+    var titleText = _a.titleText, descText = _a.descText, contentText = _a.contentText, _b = _a.titleTextWordBreak, titleTextWordBreak = _b === void 0 ? 'keep_all' : _b, _c = _a.descTextWordBreak, descTextWordBreak = _c === void 0 ? 'keep_all' : _c, _d = _a.contentTextWordBreak, contentTextWordBreak = _d === void 0 ? 'keep_all' : _d, _e = _a.contentFontWeight, contentFontWeight = _e === void 0 ? 'regular' : _e;
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }),
+        react_1.default.createElement(TextLabel_1.TextLabel, { text: titleText, wordBreak: titleTextWordBreak, styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }),
         descText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: descText, wordBreak: descTextWordBreak, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }))),
         contentText && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
+            react_1.default.createElement(TextLabel_1.TextLabel, { text: contentText, wordBreak: contentTextWordBreak, styleTheme: contentFontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorTheme: "sysTextPrimary" })))));
 }
 exports.default = BodyTextGroup;

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

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

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

@@ -31,10 +31,11 @@ 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, bodyBtnText = _a.bodyBtnText;
+    var scrollVisibleType = _a.scrollVisibleType, children = _a.children, isSubmitted = _a.isSubmitted, bodyMBtnText = _a.bodyMBtnText;
     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가 업데이트 될 때마다
      * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
@@ -48,26 +49,24 @@ function Body(_a) {
             return;
         }
         triggerScrollToBottom();
-    }, [children, isButtonShow, isSubmitted]);
+    }, [childrenLength, isButtonShow, isSubmitted]);
     var handleClickMBtn = function () {
         triggerScrollToBottom();
     };
-    var handleScroll = function () {
-        if (scrollRef.current) {
-            var _a = scrollRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            if (Math.ceil(scrollTop) + clientHeight === scrollHeight) {
-                setIsButtonShow(false);
-                return;
-            }
-            setIsButtonShow(true);
+    var handleScroll = function (e) {
+        var _a = e.currentTarget, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+        if (scrollTop + clientHeight === scrollHeight) {
+            setIsButtonShow(false);
+            return;
         }
+        setIsButtonShow(true);
     };
     return (react_1.default.createElement(S_Body, null,
         react_1.default.createElement(S_ChatMessageBox, { id: "chatMessageBox", onScroll: handleScroll, ref: scrollRef, 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: bodyBtnText, size: "small", onClick: handleClickMBtn })))));
+            react_1.default.createElement(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn })))));
 }
 var S_Body = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"], ["\n  flex: 1;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  position: relative;\n"])));
 var scrollVisibleStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    display: block;\n  }\n"])));
@@ -82,7 +81,7 @@ var S_ChatMessageBox = styled_components_1.default.div(templateObject_4 || (temp
         hidden: scrollHiddenStyle
     }[scrollVisibleType];
 });
-var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"], ["\n  position: absolute;\n  bottom: ", ";\n  left: 50%;\n  transform: translate(-50%, 0);\n"])), function (_a) {
+var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __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;
 });