pds-dev-kit-web 1.4.21 → 1.4.24

package/dist/index.d.ts

@@ -5,14 +5,14 @@ export { theme };
 export { Form };
 import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_DynamicDesktopNavBarTemplates, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_UserDesktopSideTab } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
-import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicChatListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_ChatList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar, D_UserDesktopSideTab, D_DynamicDesktopNavBarTemplates };
+import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };
 export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-export { M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = void 0;
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = void 0;
+exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
+exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBarTemplates = exports.D_UserDesktopSideTab = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = void 0;
+exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "WTContainersBox", { enumerable: true, get: funct
 Object.defineProperty(exports, "D_AdminList", { enumerable: true, get: function () { return desktop_1.D_AdminList; } });
 Object.defineProperty(exports, "D_AdminListHeader", { enumerable: true, get: function () { return desktop_1.D_AdminListHeader; } });
 Object.defineProperty(exports, "D_AdminListItem", { enumerable: true, get: function () { return desktop_1.D_AdminListItem; } });
+Object.defineProperty(exports, "D_BasicChatListItem", { enumerable: true, get: function () { return desktop_1.D_BasicChatListItem; } });
 Object.defineProperty(exports, "D_BasicFormGroup", { enumerable: true, get: function () { return desktop_1.D_BasicFormGroup; } });
 Object.defineProperty(exports, "D_BasicList", { enumerable: true, get: function () { return desktop_1.D_BasicList; } });
 Object.defineProperty(exports, "D_BasicListItem", { enumerable: true, get: function () { return desktop_1.D_BasicListItem; } });
@@ -45,6 +46,7 @@ Object.defineProperty(exports, "D_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "D_BodyTextGroup", { enumerable: true, get: function () { return desktop_1.D_BodyTextGroup; } });
 Object.defineProperty(exports, "D_Card", { enumerable: true, get: function () { return desktop_1.D_Card; } });
 Object.defineProperty(exports, "D_CardList", { enumerable: true, get: function () { return desktop_1.D_CardList; } });
+Object.defineProperty(exports, "D_ChatList", { enumerable: true, get: function () { return desktop_1.D_ChatList; } });
 Object.defineProperty(exports, "D_Checkbox", { enumerable: true, get: function () { return desktop_1.D_Checkbox; } });
 Object.defineProperty(exports, "D_Chip", { enumerable: true, get: function () { return desktop_1.D_Chip; } });
 Object.defineProperty(exports, "D_ContextMenu", { enumerable: true, get: function () { return desktop_1.D_ContextMenu; } });
@@ -93,6 +95,7 @@ Object.defineProperty(exports, "MPContainersBox", { enumerable: true, get: funct
 Object.defineProperty(exports, "LayoutMS", { enumerable: true, get: function () { return mobile_1.LayoutMS; } });
 Object.defineProperty(exports, "MSNavigationContainer", { enumerable: true, get: function () { return mobile_1.MSNavigationContainer; } });
 Object.defineProperty(exports, "MSContainersBox", { enumerable: true, get: function () { return mobile_1.MSContainersBox; } });
+Object.defineProperty(exports, "M_BasicChatListItem", { enumerable: true, get: function () { return mobile_1.M_BasicChatListItem; } });
 Object.defineProperty(exports, "M_BasicFormGroup", { enumerable: true, get: function () { return mobile_1.M_BasicFormGroup; } });
 Object.defineProperty(exports, "M_BasicList", { enumerable: true, get: function () { return mobile_1.M_BasicList; } });
 Object.defineProperty(exports, "M_BasicListItem", { enumerable: true, get: function () { return mobile_1.M_BasicListItem; } });
@@ -100,6 +103,7 @@ Object.defineProperty(exports, "M_BlogTextField", { enumerable: true, get: funct
 Object.defineProperty(exports, "M_BodyTextGroup", { enumerable: true, get: function () { return mobile_1.M_BodyTextGroup; } });
 Object.defineProperty(exports, "M_Card", { enumerable: true, get: function () { return mobile_1.M_Card; } });
 Object.defineProperty(exports, "M_CardList", { enumerable: true, get: function () { return mobile_1.M_CardList; } });
+Object.defineProperty(exports, "M_ChatList", { enumerable: true, get: function () { return mobile_1.M_ChatList; } });
 Object.defineProperty(exports, "M_Checkbox", { enumerable: true, get: function () { return mobile_1.M_Checkbox; } });
 Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () { return mobile_1.M_Chip; } });
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return mobile_1.M_ContextMenu; } });

package/dist/src/common/components/Navigations/ContextTextLabelNav.d.ts

@@ -6,6 +6,7 @@ declare type Props = {
     text: string;
     openNewTab: boolean;
     preventLineChange?: boolean;
+    onClick?: () => void;
 };
-declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange, onClick }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
 export default TextLabelNav;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -7,9 +7,9 @@ var react_1 = __importDefault(require("react"));
 var desktop_1 = require("../../../desktop");
 var NavLink_1 = __importDefault(require("./NavLink"));
 function TextLabelNav(_a, ref) {
-    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
-    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
-        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c, onClick = _a.onClick;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular", ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { onClick: onClick, ref: ref, to: to, openNewTab: openNewTab },
         react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: "form2Regular" })));
 }
 exports.default = TextLabelNav;

package/dist/src/common/hooks/useDetectOverflow.js

@@ -30,7 +30,7 @@ function useDetectOverflow(ref, detectOnResize) {
         else {
             setIsScrollBoxStart(false);
         }
-        if (Math.ceil(ref.node.scrollLeft + ref.node.clientWidth) === ref.node.scrollWidth) {
+        if (Math.abs(ref.node.scrollLeft + ref.node.clientWidth - ref.node.scrollWidth) <= 5) {
             setIsScrollBoxEnd(true);
         }
         else {

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

@@ -173,5 +173,7 @@
     "sys_base_dimmed_01": "black/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "white"
+    "sys_component_base_08": "white",
+    "sys_text_social_login_01": "grey900",
+    "sys_text_social_login_02": "grey900"
 }

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

@@ -173,5 +173,7 @@
     "sys_base_dimmed_01": "white/opacity30",
     "sys_kakao": "kakaoyellow",
     "sys_border_line_12": "grey100",
-    "sys_component_base_08": "black"
+    "sys_component_base_08": "black",
+    "sys_text_social_login_01": "white",
+    "sys_text_social_login_02": "grey900"
 }

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

@@ -523,5 +523,8 @@
     "ui_45": "sys_component_base_08",
     "ui_46": "sys_base_dimmed_01",
     "ui_47": "sys_kakao",
-    "ui_cpnt_sheet_base_03": "sys_component_base_white_opacity00"
+    "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"
 }

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

@@ -235,6 +235,8 @@ declare const colorSet: {
         sys_kakao: string;
         sys_border_line_12: string;
         sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
     };
     readonly PaletteColor_Dark: {
         sys_container_background_01: string;
@@ -412,6 +414,8 @@ declare const colorSet: {
         sys_kakao: string;
         sys_border_line_12: string;
         sys_component_base_08: string;
+        sys_text_social_login_01: string;
+        sys_text_social_login_02: string;
     };
     readonly UIColor: {
         ui_cpnt_button_fill_base_primary: string;
@@ -939,6 +943,9 @@ declare const colorSet: {
         ui_46: string;
         ui_47: string;
         ui_cpnt_sheet_base_03: string;
+        ui_48: string;
+        ui_49: string;
+        ui_50: string;
     };
 };
 export default colorSet;

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

@@ -524,4 +524,7 @@ export interface UITheme {
     ui_46: string;
     ui_47: string;
     ui_cpnt_sheet_base_03: string;
+    ui_48: string;
+    ui_49: string;
+    ui_50: string;
 }

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

@@ -23,6 +23,9 @@ declare type Props = {
     column10HeaderText?: TFunctionResult;
     column10Width?: ColumnWidthType;
     dropdownMode?: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
+    dropdown1Value?: PDSValueOption;
+    dropdown2Value?: PDSValueOption;
+    dropdown3Value?: PDSValueOption;
     dropdown1DefaultText?: PDSValueOption;
     dropdown2DefaultText?: PDSValueOption;
     dropdown3DefaultText?: PDSValueOption;
@@ -72,5 +75,5 @@ declare type Props = {
     /** @deprecated onClickTBtn3를 대신 사용하세요. */
     onClickMBtn3?: () => void;
 };
-declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
+declare function AdminList({ selectionMode, headerRowMode, column2HeaderText, column3HeaderText, column3Width, column4HeaderText, column4Width, column5HeaderText, column5Width, column6HeaderText, column6Width, column7HeaderText, column7Width, column8HeaderText, column8Width, column9HeaderText, column9Width, column10HeaderText, column10Width, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, quickActionBtnMode, quickActionBtn1Text, quickActionBtn2Text, quickActionBtn3Text, quickActionBtnType, quickActionBtn1State, quickActionBtn2State, quickActionBtn3State, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, emptyText, scrollMode, scrollVisibleType, selectedIds, maintainIds, children, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3, onClickQuickActionBtn1, onClickQuickActionBtn2, onClickQuickActionBtn3, onSelect, mBtnMode, mBtn1Text, mBtn2Text, mBtn3Text, onClickMBtn1, onClickMBtn2, onClickMBtn3 }: Props): JSX.Element;
 export default AdminList;

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

@@ -53,7 +53,7 @@ var TextLabel_1 = require("../TextLabel");
 var BulkActionBar_1 = __importDefault(require("./BulkActionBar"));
 var HeaderRow_1 = __importDefault(require("./HeaderRow"));
 function AdminList(_a) {
-    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, dropdown1DefaultText = _a.dropdown1DefaultText, dropdown2DefaultText = _a.dropdown2DefaultText, dropdown3DefaultText = _a.dropdown3DefaultText, dropdown1ValueArray = _a.dropdown1ValueArray, dropdown2ValueArray = _a.dropdown2ValueArray, dropdown3ValueArray = _a.dropdown3ValueArray, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _t = _a.scrollMode, scrollMode = _t === void 0 ? 'infinite' : _t, _u = _a.scrollVisibleType, scrollVisibleType = _u === void 0 ? 'moving' : _u, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, _v = _a.mBtnMode, mBtnMode = _v === void 0 ? 'mbtn_amount1' : _v, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
+    var _b = _a.selectionMode, selectionMode = _b === void 0 ? 'multi' : _b, _c = _a.headerRowMode, headerRowMode = _c === void 0 ? 'use' : _c, column2HeaderText = _a.column2HeaderText, column3HeaderText = _a.column3HeaderText, _d = _a.column3Width, column3Width = _d === void 0 ? 'small' : _d, column4HeaderText = _a.column4HeaderText, _e = _a.column4Width, column4Width = _e === void 0 ? 'small' : _e, column5HeaderText = _a.column5HeaderText, _f = _a.column5Width, column5Width = _f === void 0 ? 'small' : _f, column6HeaderText = _a.column6HeaderText, _g = _a.column6Width, column6Width = _g === void 0 ? 'small' : _g, column7HeaderText = _a.column7HeaderText, _h = _a.column7Width, column7Width = _h === void 0 ? 'small' : _h, column8HeaderText = _a.column8HeaderText, _j = _a.column8Width, column8Width = _j === void 0 ? 'small' : _j, column9HeaderText = _a.column9HeaderText, _k = _a.column9Width, column9Width = _k === void 0 ? 'small' : _k, column10HeaderText = _a.column10HeaderText, _l = _a.column10Width, column10Width = _l === void 0 ? 'small' : _l, _m = _a.dropdownMode, dropdownMode = _m === void 0 ? 'dropdown_amount1' : _m, 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, _o = _a.quickActionBtnMode, quickActionBtnMode = _o === void 0 ? 'btn_amount2' : _o, quickActionBtn1Text = _a.quickActionBtn1Text, quickActionBtn2Text = _a.quickActionBtn2Text, quickActionBtn3Text = _a.quickActionBtn3Text, _p = _a.quickActionBtnType, quickActionBtnType = _p === void 0 ? 'fix' : _p, _q = _a.quickActionBtn1State, quickActionBtn1State = _q === void 0 ? 'normal' : _q, _r = _a.quickActionBtn2State, quickActionBtn2State = _r === void 0 ? 'normal' : _r, _s = _a.quickActionBtn3State, quickActionBtn3State = _s === void 0 ? 'normal' : _s, tBtnMode = _a.tBtnMode, tBtn1Text = _a.tBtn1Text, tBtn2Text = _a.tBtn2Text, tBtn3Text = _a.tBtn3Text, emptyText = _a.emptyText, _t = _a.scrollMode, scrollMode = _t === void 0 ? 'infinite' : _t, _u = _a.scrollVisibleType, scrollVisibleType = _u === void 0 ? 'moving' : _u, selectedIds = _a.selectedIds, maintainIds = _a.maintainIds, children = _a.children, onChangeDropdown1 = _a.onChangeDropdown1, onChangeDropdown2 = _a.onChangeDropdown2, onChangeDropdown3 = _a.onChangeDropdown3, onClickTBtn1 = _a.onClickTBtn1, onClickTBtn2 = _a.onClickTBtn2, onClickTBtn3 = _a.onClickTBtn3, onClickQuickActionBtn1 = _a.onClickQuickActionBtn1, onClickQuickActionBtn2 = _a.onClickQuickActionBtn2, onClickQuickActionBtn3 = _a.onClickQuickActionBtn3, onSelect = _a.onSelect, _v = _a.mBtnMode, mBtnMode = _v === void 0 ? 'mbtn_amount1' : _v, mBtn1Text = _a.mBtn1Text, mBtn2Text = _a.mBtn2Text, mBtn3Text = _a.mBtn3Text, onClickMBtn1 = _a.onClickMBtn1, onClickMBtn2 = _a.onClickMBtn2, onClickMBtn3 = _a.onClickMBtn3;
     var selectAllMethods = (0, react_hook_form_1.useForm)();
     var checkboxMethods = (0, react_hook_form_1.useForm)();
     var isAllCheckboxSelected = (0, react_hook_form_1.useWatch)({ name: 'all', control: selectAllMethods.control });
@@ -202,7 +202,7 @@ function AdminList(_a) {
         }
     };
     return (react_1.default.createElement(S_AdminList, null,
-        isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })),
+        isBulkActionBarOpen && (react_1.default.createElement(BulkActionBar_1.default, { itemCount: totalItemCount, dropdownMode: dropdownMode, dropdown1Value: dropdown1Value, dropdown2Value: dropdown2Value, dropdown3Value: dropdown3Value, dropdown1DefaultText: dropdown1DefaultText, dropdown2DefaultText: dropdown2DefaultText, dropdown3DefaultText: dropdown3DefaultText, dropdown1ValueArray: dropdown1ValueArray, dropdown2ValueArray: dropdown2ValueArray, dropdown3ValueArray: dropdown3ValueArray, tBtnMode: btnMode(), tBtn1Text: tBtn1Text || mBtn1Text, tBtn2Text: tBtn2Text || mBtn2Text, tBtn3Text: tBtn3Text || mBtn3Text, onChangeDropdown1: onChangeDropdown1, onChangeDropdown2: onChangeDropdown2, onChangeDropdown3: onChangeDropdown3, onClickTBtn1: onClickTBtn1 || onClickMBtn1, onClickTBtn2: onClickTBtn2 || onClickMBtn2, onClickTBtn3: onClickTBtn3 || onClickMBtn3 })),
         headerRowMode === 'use' && (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, selectAllMethods),
             react_1.default.createElement("form", null,
                 react_1.default.createElement(HeaderRow_1.default, { selectionMode: selectionMode, column2HeaderText: column2HeaderText, column3HeaderText: column3HeaderText, column3HeaderWidth: column3Width, column4HeaderText: column4HeaderText, column4HeaderWidth: column4Width, column5HeaderText: column5HeaderText, column5HeaderWidth: column5Width, column6HeaderText: column6HeaderText, column6HeaderWidth: column6Width, column7HeaderText: column7HeaderText, column7HeaderWidth: column7Width, column8HeaderText: column8HeaderText, column8HeaderWidth: column8Width, column9HeaderText: column9HeaderText, column9HeaderWidth: column9Width, column10HeaderText: column10HeaderText, column10HeaderWidth: column10Width, quickActionBtnType: quickActionBtnType, quickActionButtonCount: getActionButtonCount(), onClickSelectAllCheckbox: handleSelectAllCheckbox })))),

package/dist/src/desktop/components/AdminList/BulkActionBar.d.ts

@@ -4,6 +4,9 @@ import { PDSValueOption } from '../../../common';
 declare type Props = {
     itemCount?: number;
     dropdownMode: 'none' | 'dropdown_amount1' | 'dropdown_amount2' | 'dropdown_amount3';
+    dropdown1Value?: PDSValueOption;
+    dropdown2Value?: PDSValueOption;
+    dropdown3Value?: PDSValueOption;
     dropdown1DefaultText?: PDSValueOption;
     dropdown2DefaultText?: PDSValueOption;
     dropdown3DefaultText?: PDSValueOption;
@@ -21,5 +24,5 @@ declare type Props = {
     onClickTBtn2?: () => void;
     onClickTBtn3?: () => void;
 };
-declare function BulkActionBar({ itemCount, dropdownMode, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: Props): JSX.Element;
+declare function BulkActionBar({ itemCount, dropdownMode, dropdown1Value, dropdown2Value, dropdown3Value, dropdown1DefaultText, dropdown2DefaultText, dropdown3DefaultText, dropdown1ValueArray, dropdown2ValueArray, dropdown3ValueArray, tBtnMode, tBtn1Text, tBtn2Text, tBtn3Text, onChangeDropdown1, onChangeDropdown2, onChangeDropdown3, onClickTBtn1, onClickTBtn2, onClickTBtn3 }: Props): JSX.Element;
 export default BulkActionBar;

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/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;
+    hoverBtnMode?: 'none' | 'use';
+    contextMenuOptionArray?: PDSValueOption[];
+    contextMenuState?: 'normal' | 'disabled';
+    colorTheme?: 'seller' | 'subscriber';
+    onClickContextMenu?: (option: PDSValueOption) => void;
+};
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverBtnMode, contextMenuOptionArray, onClickContextMenu, contextMenuState, colorTheme }: Props): JSX.Element;
+export default BasicChatListItem;

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

@@ -0,0 +1,134 @@
+"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 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.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 _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
+    var contextMenuRef = (0, react_1.useRef)(null);
+    /**
+     * @when contextMenu가 열려 있을 때
+     * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
+     * @clear document의 클릭 이벤트를 제거합니다.
+     */
+    (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';
+            }
+        }
+        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 () {
+        setIsContextMenuOpen(function (prev) { return !prev; });
+    };
+    var handleClickContextMenuItem = function (option) {
+        if (onClickContextMenu) {
+            onClickContextMenu(option);
+        }
+        setIsContextMenuOpen(false);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(S_BasicChatListItem, { colorTheme: colorTheme, hoverBtnMode: hoverBtnMode },
+            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 })); }))))))));
+}
+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 theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+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 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;
+}, 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 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;
+});
+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;

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/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' | 'bodyBtnText'> & {
+    isSubmitted: boolean;
+};
+declare function Body({ scrollVisibleType, children, isSubmitted, bodyBtnText }: Props): JSX.Element;
+export default Body;

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

@@ -0,0 +1,90 @@
+"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, bodyBtnText = _a.bodyBtnText;
+    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);
+    /**
+     * @when 스크롤하지 않은 상태에서 chatMessages가 업데이트 될 때마다
+     * @expected 채팅 리스트의 맨 밑으로 스크롤 내린다.
+     * @clear -
+     */
+    (0, react_1.useEffect)(function () {
+        if (isButtonShow) {
+            if (isSubmitted) {
+                triggerScrollToBottom();
+            }
+            return;
+        }
+        triggerScrollToBottom();
+    }, [children, 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);
+        }
+    };
+    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 })))));
+}
+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  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 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,23 @@
+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';
+    iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
+    iBtn1IconFillType?: 'line' | 'fill';
+    children?: React.ReactNode;
+    textFieldState?: 'normal' | 'read_only' | 'disabled';
+    textFieldHintText?: PDSTextType;
+    textFieldDefaultText?: PDSTextType;
+    textFieldMaxLength?: number;
+    scrollVisibleType?: 'moving' | 'hidden' | 'visible';
+    footerChildren?: React.ReactNode;
+    submitBtnState?: 'disabled' | 'normal';
+    bodyBtnText?: PDSTextType;
+    onSubmit: (value: string) => void;
+};
+declare function ChatList({ styleTheme, headerMode, titleText, captionText, headerDisplayType, iBtn1IconName, iBtn1IconFillType, children, textFieldState, textFieldHintText, textFieldDefaultText, textFieldMaxLength, scrollVisibleType, footerChildren, submitBtnState, bodyBtnText, onSubmit }: Props): JSX.Element;
+export default ChatList;