pds-dev-kit-web-test 0.0.6 → 0.0.7

package/dist/src/desktop/components/AdminList/BulkActionBar.js

@@ -15,7 +15,7 @@ var Dropdown_1 = require("../Dropdown");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
 function BulkActionBar(_a) {
-    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
+    var _b = _a.itemCount, itemCount = _b === void 0 ? 1 : _b, _c = _a.dropdownMode, dropdownMode = _c === void 0 ? 'dropdown_amount1' : _c, dropdown1Value = _a.dropdown1Value, dropdown2Value = _a.dropdown2Value, dropdown3Value = _a.dropdown3Value, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     return (react_1.default.createElement(S_BulkActionBar, null,
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
@@ -27,14 +27,14 @@ function BulkActionBar(_a) {
         react_1.default.createElement(hybrid_1.Divider, { direction: "vertical", height: 16 }),
         react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e", spacingType: "width" }),
         dropdownMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
-            dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, onChange: onChangeDropdown1, size: "small", colorTheme: "dark" })),
+            dropdown1ValueArray && (react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown1ValueArray, defaultValue: dropdown1DefaultText, value: dropdown1Value, onChange: onChangeDropdown1, size: "small", colorTheme: "dark" })),
             (dropdownMode === 'dropdown_amount2' || dropdownMode === 'dropdown_amount3') &&
                 dropdown2ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, onChange: onChangeDropdown2, size: "small", colorTheme: "dark" }))),
+                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown2ValueArray, defaultValue: dropdown2DefaultText, value: dropdown2Value, onChange: onChangeDropdown2, size: "small", colorTheme: "dark" }))),
             dropdownMode === 'dropdown_amount3' && dropdown3ValueArray && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
+                react_1.default.createElement(Dropdown_1.Dropdown, { valueArray: dropdown3ValueArray, defaultValue: dropdown3DefaultText, value: dropdown3Value, onChange: onChangeDropdown3, size: "small", colorTheme: "dark" }))))),
         tBtnMode !== 'none' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
             react_1.default.createElement(TextButton_1.TextButton, { size: "small", text: tBtn1Text, onClick: onClickTBtn1, colorTheme: "white" }),

package/dist/src/desktop/components/AdminListHeader/HeaderBar.js

@@ -48,7 +48,7 @@ function HeaderBar(_a) {
             react_1.default.createElement(S_ListCount, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: t('str_rows_per_page', '목록 개수'), styleTheme: "caption1Regular" }),
                 react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-                react_1.default.createElement(Dropdown_1.Dropdown, { size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })),
+                react_1.default.createElement(Dropdown_1.Dropdown, { customWidth: "88px", size: "small", valueArray: dropdownTextArray, onChange: handleDropdown, defaultValue: dropdownDefaultValue !== null && dropdownDefaultValue !== void 0 ? dropdownDefaultValue : dropdownTextArray[0] })),
             react_1.default.createElement(S_Page, null,
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: currentPage, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),
                 react_1.default.createElement(TextLabel_1.TextLabel, { text: " / ", styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" }),

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PDSTextType, PDSValueOption } from '../../../common';
+declare type Props = {
+    titleText?: PDSTextType;
+    contentText?: PDSTextType;
+    leftImageMode?: 'none' | 'use';
+    imageSrc?: string;
+    hoverMode?: 'none' | 'use';
+    contextMenuOptionArray?: PDSValueOption[];
+    contextMenuState?: 'normal' | 'disabled';
+    colorTheme?: 'seller' | 'subscriber';
+    onClickContextMenuItem?: (option: PDSValueOption) => void;
+};
+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

@@ -0,0 +1,121 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var hybrid_1 = require("../../../hybrid");
+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'
+};
+var backgroundColorTheme = {
+    seller: 'ui_cpnt_list_base_area_seller',
+    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.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가 닫히도록 합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
+        if (!chatBody) {
+            return;
+        }
+        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
+    }, [isContextMenuOpen, chatBody]);
+    var handleMoreButtonClick = function (e) {
+        e.stopPropagation();
+        setIsContextMenuOpen(function (prev) { return !prev; });
+    };
+    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, 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" })),
+            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  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  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) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, S_SeeMoreButton, function (_a) {
+    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;
+    return theme.spacing.spacingB;
+});
+var S_ContentTextWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  margin-left: ", ";\n"], ["\n  flex: 1;\n  margin-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+exports.default = BasicChatListItem;
+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/BasicChatListItem/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,89 @@
+"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 });
+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;
+    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 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isButtonShow) {
+            if (isSubmitted) {
+                triggerScrollToBottom();
+            }
+            return;
+        }
+        triggerScrollToBottom();
+    }, [childrenLength, isButtonShow, isSubmitted]);
+    var handleClickMBtn = function () {
+        triggerScrollToBottom();
+    };
+    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: 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"])));
+var scrollHiddenStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+var S_ChatMessageBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"], ["\n  height: 100%;\n  overflow-y: auto;\n\n  ", "\n"])), function (_a) {
+    var scrollVisibleType = _a.scrollVisibleType;
+    if (!scrollVisibleType || scrollVisibleType === 'moving') {
+        return;
+    }
+    return {
+        visible: scrollVisibleStyle,
+        hidden: scrollHiddenStyle
+    }[scrollVisibleType];
+});
+var S_BottomButtonWrapper = styled_components_1.default.div(templateObject_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;
+});
+exports.default = Body;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, PDSTextType } from '../../../common';
+export declare type Props = {
+    styleTheme?: 'solid' | 'translucent' | 'transparent';
+    headerMode?: 'none' | 'use';
+    titleText?: PDSTextType;
+    captionText?: PDSTextType;
+    headerDisplayType?: 'none' | 'ibtn1';
+    headerIBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    headerIBtn1IconFillType?: 'line' | 'fill';
+    children?: React.ReactNode;
+    textFieldState?: 'normal' | 'read_only' | 'disabled';
+    textFieldHintText?: PDSTextType;
+    textFieldDefaultText?: PDSTextType;
+    textFieldMaxLength?: number;
+    scrollVisibleType?: 'moving' | 'hidden' | 'visible';
+    footerChildren?: React.ReactNode;
+    submitIBtnState?: 'disabled' | 'normal';
+    bodyMBtnText?: PDSTextType;
+    onSubmit: (value: string) => void;
+    onClickHeaderIBtn1?: () => void;
+};
+declare function ChatList({ styleTheme, headerMode, titleText, captionText, headerDisplayType, headerIBtn1IconName, headerIBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitIBtnState, bodyMBtnText, onSubmit, onClickHeaderIBtn1 }: Props): JSX.Element;
+export default ChatList;