pds-dev-kit-web-test 0.2.36 → 0.2.38

package/dist/src/common/styles/colorSet/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable import/order */
 var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
 var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
-var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var UIColor_json_1 = __importDefault(require("./UIColor.json"));
+var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
 var colorSet = {
     SemanticColor: SemanticColor_json_1.default,
     PaletteColor_light: PaletteColor_light_json_1.default,
-    PaletteColor_Dark: PaletteColor_Dark_json_1.default,
-    UIColor: UIColor_json_1.default
+    UIColor: UIColor_json_1.default,
+    PaletteColor_Dark: PaletteColor_Dark_json_1.default
 };
 exports.default = colorSet;

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

@@ -835,4 +835,6 @@ export interface UITheme {
     ui_cpnt_modalwithtab_sidetab_hover: string;
     ui_cpnt_modalwithtab_sidetab_pressed: string;
     ui_107: string;
+    ui_cpnt_textlabel_sys_white_02: string;
+    ui_cpnt_headerbar_base_area_transparent: string;
 }

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.js

@@ -454,7 +454,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 |
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
 });
-var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"], ["\n  ", "\n  flex: 1;\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 }, function (_a) {
@@ -462,6 +462,9 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
     return stepperMode === 'use' && type === 'number' && isFocused
         ? inputInnerSpinButtonStyle
         : '-webkit-appearance: none; margin: 0;';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type Props = {
     titleText?: PDSTextType;
@@ -8,8 +9,9 @@ type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'subscriber' | 'seller_transparent' | 'subscriber_transparent';
+    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
+    contextMenuPosition?: PlacementTypes;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;

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

@@ -29,34 +29,42 @@ var TextLabel_1 = require("../TextLabel");
 var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
-    subscriber: 'sysTextSecondary',
     seller_transparent: 'usrTextBrandPrimary',
-    subscriber_transparent: 'sysTextWhite'
+    subscriber: 'sysTextSecondary',
+    subscriber_transparent: 'sysTextWhite',
+    secondary_transparent_grey: 'sysTextSecondary',
+    white_transparent_grey: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
-    subscriber: 'ui_cpnt_list_base_area',
     seller_transparent: 'ui_cpnt_list_base_area_transparent_seller',
-    subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
+    subscriber: 'ui_cpnt_list_base_area',
+    subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
+    secondary_transparent_grey: 'ui_cpnt_list_base_area',
+    white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
 };
 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 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, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'v-auto' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
     /**
-     * @when contextMenu가 열려 있을 때
-     * @expected ChatList body의 스크롤을 숨기고, contextMenu의 외부를 클릭하면 contextMenu가 닫히도록 합니다.
-     * @clear document의 클릭 이벤트를 제거합니다.
+     * @when 스크롤, 휠 이벤트 발생시
+     * @expected contextMenu를 닫습니다.
+     * @clear 스크롤, 휠 이벤트를 제거합니다.
      */
     (0, react_1.useEffect)(function () {
-        // NOTE pop up 개념이 생기기 전까지의 임시 조치 방법입니다.
-        if (!chatBody) {
-            return;
+        function handleScrollEvent() {
+            setIsContextMenuOpen(false);
         }
-        chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
-    }, [isContextMenuOpen, chatBody]);
+        window.addEventListener('scroll', handleScrollEvent);
+        window.addEventListener('wheel', handleScrollEvent);
+        return function () {
+            window.removeEventListener('scroll', handleScrollEvent);
+            window.removeEventListener('wheel', handleScrollEvent);
+        };
+    }, []);
     var handleMoreButtonClick = function (e) {
         e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
@@ -67,7 +75,30 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    var contentTextColorTheme = 'sysTextPrimary';
+    var contentTextColorOverride;
+    var iconColorKey;
+    switch (colorTheme) {
+        case 'subscriber_transparent': {
+            contentTextColorTheme = 'sysTextWhite';
+            iconColorKey = 'ui_cpnt_button_icon_white';
+            break;
+        }
+        case 'secondary_transparent_grey': {
+            contentTextColorTheme = 'sysTextSecondary';
+            break;
+        }
+        case 'white_transparent_grey': {
+            contentTextColorOverride = 'ui_cpnt_textlabel_sys_white_02';
+            iconColorKey = 'ui_cpnt_button_icon_white';
+            break;
+        }
+        default: {
+            contentTextColorTheme = 'sysTextPrimary';
+            iconColorKey = 'ui_cpnt_button_icon_enabled';
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ onMouseLeave: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })) })] })) }));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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  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"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;

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

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
 type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export type ChatBubbleListItemProps = {
@@ -11,8 +12,9 @@ export type ChatBubbleListItemProps = {
     timeText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
+    contextMenuPosition?: PlacementTypes;
     children?: React.ReactNode;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, contextMenuPosition, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -67,9 +67,9 @@ var profileImageBorderColorTheme = {
     translucent_black: 'ui_avatar_border_translucent_black'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
     var isMe = styleTheme.includes('me');
-    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -85,6 +85,22 @@ function ChatBubbleListItem(_a) {
         }
         chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
     }, [isContextMenuOpen, chatBody]);
+    /**
+     * @when 스크롤, 휠 이벤트 발생시
+     * @expected contextMenu를 닫습니다.
+     * @clear 스크롤, 휠 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleScrollEvent() {
+            setIsContextMenuOpen(false);
+        }
+        window.addEventListener('scroll', handleScrollEvent);
+        window.addEventListener('wheel', handleScrollEvent);
+        return function () {
+            window.removeEventListener('scroll', handleScrollEvent);
+            window.removeEventListener('wheel', handleScrollEvent);
+        };
+    }, []);
     var handleMoreButtonClick = function (e) {
         e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
@@ -136,7 +152,7 @@ function ChatBubbleListItem(_a) {
         }
         return false;
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "desktop", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
 type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;

package/dist/src/mobile/common/components/TextFieldBase/TextFieldBase.js

@@ -436,7 +436,7 @@ var inputInnerSpinButtonStyle = (0, styled_components_1.css)(templateObject_14 |
     var innerSpinButtonSize = _a.innerSpinButtonSize;
     return innerSpinButtonSize && "".concat(innerSpinButtonSize, "px");
 });
-var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), basicStyle, function (_a) {
+var S_Input = styled_components_1.default.input(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"], ["\n  ", "\n  line-height: ", ";\n  position: relative;\n\n  ::-webkit-inner-spin-button {\n    ", "\n  }\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-text-fill-color: ", " !important;\n    transition: background-color 9999s ease-in-out 0s !important;\n  }\n"])), basicStyle, function (_a) {
     var theme = _a.theme;
     return theme.desktopLineHeight.singleLine;
 }, function (_a) {
@@ -444,6 +444,9 @@ var S_Input = styled_components_1.default.input(templateObject_15 || (templateOb
     return stepperMode === 'use' && type === 'number' && isFocused
         ? inputInnerSpinButtonStyle
         : '-webkit-appearance: none; margin: 0;';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_textfield_text_typed;
 });
 var S_Auto = styled_components_1.default.textarea(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"], ["\n  ", "\n  display: block;\n  overflow-y: auto;\n  resize: none;\n  ", "\n  ", ";\n"])), basicStyle, function (_a) {
     var autoMaxRows = _a.autoMaxRows, textSize = _a.textSize, fieldHeight = _a.fieldHeight;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type Props = {
     titleText?: PDSTextType;
@@ -8,8 +9,9 @@ type Props = {
     hoverMode?: 'none' | 'use';
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
-    colorTheme?: 'seller' | 'subscriber' | 'seller_transparent' | 'subscriber_transparent';
+    colorTheme?: 'seller' | 'seller_transparent' | 'subscriber' | 'subscriber_transparent' | 'secondary_transparent_grey' | 'white_transparent_grey';
+    contextMenuPosition?: PlacementTypes;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
+declare function BasicChatListItem({ titleText, contentText, leftImageMode, imageSrc, hoverMode, contextMenuOptionArray, contextMenuPosition, onClickContextMenuItem, contextMenuState, colorTheme }: Props): JSX.Element;
 export default BasicChatListItem;

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

@@ -29,19 +29,23 @@ var TextLabel_1 = require("../TextLabel");
 var Popup_1 = require("./Popup");
 var titleTextColors = {
     seller: 'usrTextBrandPrimary',
-    subscriber: 'sysTextSecondary',
     seller_transparent: 'usrTextBrandPrimary',
-    subscriber_transparent: 'sysTextWhite'
+    subscriber: 'sysTextSecondary',
+    subscriber_transparent: 'sysTextWhite',
+    secondary_transparent_grey: 'sysTextSecondary',
+    white_transparent_grey: 'sysTextWhite'
 };
 var backgroundColorTheme = {
     seller: 'ui_cpnt_list_base_area_seller',
-    subscriber: 'ui_cpnt_list_base_area',
     seller_transparent: 'ui_cpnt_list_base_area_transparent_seller',
-    subscriber_transparent: 'ui_cpnt_list_base_area_transparent'
+    subscriber: 'ui_cpnt_list_base_area',
+    subscriber_transparent: 'ui_cpnt_list_base_area_transparent',
+    secondary_transparent_grey: 'ui_cpnt_list_base_area',
+    white_transparent_grey: 'ui_cpnt_list_base_area_transparent'
 };
 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 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, _d = _a.contextMenuPosition, contextMenuPosition = _d === void 0 ? 'v-auto' : _d, onClickContextMenuItem = _a.onClickContextMenuItem, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'subscriber' : _f;
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var chatBodyRect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -57,6 +61,24 @@ function BasicChatListItem(_a) {
         }
         chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
     }, [isContextMenuOpen, chatBody]);
+    /**
+     * @when contextMenu가 열려 있을 때
+     * @expected touchmove 이벤트 발생시 contextMenu를 닫습니다.
+     * @clear touchmove 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleScrollEvent() {
+            setIsContextMenuOpen(false);
+        }
+        window.addEventListener('touchmove', handleScrollEvent);
+        window.addEventListener('scroll', handleScrollEvent);
+        window.addEventListener('wheel', handleScrollEvent);
+        return function () {
+            window.removeEventListener('touchmove', handleScrollEvent);
+            window.removeEventListener('scroll', handleScrollEvent);
+            window.removeEventListener('wheel', handleScrollEvent);
+        };
+    }, []);
     var handleMoreButtonClick = function (e) {
         e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
@@ -67,7 +89,33 @@ function BasicChatListItem(_a) {
         }
         setIsContextMenuOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: colorTheme === 'subscriber_transparent' ? 'sysTextWhite' : 'sysTextPrimary', wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) }))), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    var handleContextMenuOutsideClick = function () {
+        setIsContextMenuOpen(false);
+    };
+    var contentTextColorTheme;
+    var contentTextColorOverride;
+    var iconColorKey;
+    switch (colorTheme) {
+        case 'subscriber_transparent': {
+            contentTextColorTheme = 'sysTextWhite';
+            iconColorKey = 'ui_cpnt_button_icon_white';
+            break;
+        }
+        case 'secondary_transparent_grey': {
+            contentTextColorTheme = 'sysTextSecondary';
+            break;
+        }
+        case 'white_transparent_grey': {
+            contentTextColorOverride = 'ui_cpnt_textlabel_sys_white_02';
+            iconColorKey = 'ui_cpnt_button_icon_white';
+            break;
+        }
+        default: {
+            contentTextColorTheme = 'sysTextPrimary';
+            iconColorKey = 'ui_cpnt_button_icon_enabled';
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_BasicChatListItem, __assign({ "x-pds-name": "BasicChatListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", colorTheme: colorTheme }, { children: [leftImageMode === 'use' && ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: "responsive" }) })), (0, jsx_runtime_1.jsx)(S_TitleTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", wordBreak: "break_all", colorTheme: titleTextColors[colorTheme] }) }), (0, jsx_runtime_1.jsx)(S_ContentTextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: contentText, styleTheme: "caption1Regular", colorTheme: contentTextColorTheme, colorOverride: contentTextColorOverride, wordBreak: "break_all" }) }), hoverMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MoreButtonWrapper, { children: (0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { fillType: "fill", baseSize: "xsmall", iconFillType: "fill", iconSize: 20, iconName: "ic_more", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: iconColorKey, onClick: handleMoreButtonClick }) })) })), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: chatBodyRect === null || chatBodyRect === void 0 ? void 0 : chatBodyRect.height, onClickOutside: handleContextMenuOutsideClick }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var S_BasicChatListItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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  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"])), function (_a) {
     var colorTheme = _a.colorTheme, theme = _a.theme;
@@ -93,7 +141,8 @@ var S_ContentTextWrapper = styled_components_1.default.div(templateObject_3 || (
     var theme = _a.theme;
     return theme.spacing.spacingC;
 });
-var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
+var S_MoreButtonWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  width: 24px;\n"], ["\n  height: 24px;\n  width: 24px;\n"])));
+var S_SeeMoreButton = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"], ["\n  margin-left: ", ";\n  opacity: ", ";\n  position: relative;\n\n  ", ":hover & {\n    opacity: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;
 }, function (_a) {
@@ -103,6 +152,6 @@ var S_SeeMoreButton = styled_components_1.default.div(templateObject_4 || (templ
     var hoverMode = _a.hoverMode;
     return hoverMode === 'use' && '1';
 });
-var S_TitleTextWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 120px;\n  min-width: 56px;\n"], ["\n  max-width: 120px;\n  min-width: 56px;\n"])));
+var S_TitleTextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 120px;\n  min-width: 56px;\n"], ["\n  max-width: 120px;\n  min-width: 56px;\n"])));
 exports.default = BasicChatListItem;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
 type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { PlacementTypes } from './Popup';
 import type { PDSTextType, PDSValueOption } from '../../../common';
 type ColorThemeType = 'grey' | 'brand_primary' | 'translucent_white' | 'translucent_black';
 export type ChatBubbleListItemProps = {
@@ -11,8 +12,9 @@ export type ChatBubbleListItemProps = {
     timeText?: PDSTextType;
     contextMenuOptionArray?: PDSValueOption[];
     contextMenuState?: 'normal' | 'disabled';
+    contextMenuPosition?: PlacementTypes;
     children?: React.ReactNode;
     onClickContextMenuItem?: (option: PDSValueOption) => void;
 };
-declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
+declare function ChatBubbleListItem({ titleText, imageSrc, hoverMode, styleTheme, colorTheme, timeMode, timeText, contextMenuOptionArray, contextMenuState, contextMenuPosition, children, onClickContextMenuItem }: ChatBubbleListItemProps): JSX.Element;
 export default ChatBubbleListItem;

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

@@ -67,9 +67,9 @@ var profileImageBorderColorTheme = {
     translucent_black: 'ui_avatar_border_translucent_black'
 };
 function ChatBubbleListItem(_a) {
-    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
+    var titleText = _a.titleText, imageSrc = _a.imageSrc, _b = _a.hoverMode, hoverMode = _b === void 0 ? 'use' : _b, styleTheme = _a.styleTheme, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'grey' : _c, _d = _a.timeMode, timeMode = _d === void 0 ? 'use' : _d, timeText = _a.timeText, contextMenuOptionArray = _a.contextMenuOptionArray, _e = _a.contextMenuState, contextMenuState = _e === void 0 ? 'normal' : _e, _f = _a.contextMenuPosition, contextMenuPosition = _f === void 0 ? 'v-auto' : _f, children = _a.children, onClickContextMenuItem = _a.onClickContextMenuItem;
     var isMe = styleTheme.includes('me');
-    var _f = (0, react_1.useState)(false), isContextMenuOpen = _f[0], setIsContextMenuOpen = _f[1];
+    var _g = (0, react_1.useState)(false), isContextMenuOpen = _g[0], setIsContextMenuOpen = _g[1];
     var contextMenuRef = (0, react_1.useRef)(null);
     var chatBody = document.querySelector('#chatMessageBox');
     var rect = chatBody === null || chatBody === void 0 ? void 0 : chatBody.getBoundingClientRect();
@@ -85,6 +85,24 @@ function ChatBubbleListItem(_a) {
         }
         chatBody.style.overflowY = isContextMenuOpen ? 'hidden' : 'auto';
     }, [isContextMenuOpen, chatBody]);
+    /**
+     * @when contextMenu가 열려 있을 때
+     * @expected touchmove 이벤트 발생시 contextMenu를 닫습니다.
+     * @clear touchmove 이벤트를 제거합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        function handleScrollEvent() {
+            setIsContextMenuOpen(false);
+        }
+        window.addEventListener('touchmove', handleScrollEvent);
+        window.addEventListener('scroll', handleScrollEvent);
+        window.addEventListener('wheel', handleScrollEvent);
+        return function () {
+            window.removeEventListener('touchmove', handleScrollEvent);
+            window.removeEventListener('scroll', handleScrollEvent);
+            window.removeEventListener('wheel', handleScrollEvent);
+        };
+    }, []);
     var handleMoreButtonClick = function (e) {
         e.stopPropagation();
         setIsContextMenuOpen(function (prev) { return !prev; });
@@ -136,7 +154,7 @@ function ChatBubbleListItem(_a) {
         }
         return false;
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: "v-auto", wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ChatBubbleListItem, __assign({ "x-pds-name": "ChatBubbleListItem", "x-pds-element-type": "component", "x-pds-device-type": "mobile", isMe: isMe }, { children: [isLeftSpacingChecker() ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isShowProfileImage() ? ((0, jsx_runtime_1.jsx)(S_ImageViewWrapper, __assign({ isOtherAvatarImpact: styleTheme === 'other_avatar_impact', colorTheme: colorTheme }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.ImageView, { shapeType: "circular", ratio: "1_1", scaleType: "cover", src: imageSrc, width: styleTheme === 'other_avatar_impact' ? 36 : 38 }) }))) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_g", spacingType: "width" })) })) : ((0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [isShowTitleText() && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: titleText, styleTheme: "caption1Bold", colorTheme: colorTheme && checkTextColorTheme() }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b" })] })), (0, jsx_runtime_1.jsxs)(S_ChatBubbleBox, { children: [(0, jsx_runtime_1.jsxs)(S_ChatBubbleWrapper, __assign({ isMe: isMe }, { children: [timeMode === 'use' && timeText && isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(ChatBubble_1.default, __assign({ colorTheme: colorTheme, tailType: chatBubbleTailType[styleTheme] }, { children: children })), timeMode === 'use' && timeText && !isMe && ((0, jsx_runtime_1.jsxs)(S_TimeWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: timeText, styleTheme: "caption2Regular", colorTheme: "sysTextTertiary", singleLineMode: "use" })] }))] })), hoverMode === 'use' && !isMe && ((0, jsx_runtime_1.jsx)(S_SeeMoreButton, __assign({ isContextMenuOpen: isContextMenuOpen, hoverMode: hoverMode, ref: contextMenuRef }, { children: (0, jsx_runtime_1.jsx)(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 }) })))] })] }), (0, jsx_runtime_1.jsx)(Popup_1.PopupProvider, { children: (0, jsx_runtime_1.jsx)(Popup_1.Popup, __assign({ targetRef: contextMenuRef, isOpen: isContextMenuOpen, placement: contextMenuPosition, wrapperHeight: rect === null || rect === void 0 ? void 0 : rect.height, onClickOutside: function () { return setIsContextMenuOpen(false); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, { children: contextMenuOptionArray === null || contextMenuOptionArray === void 0 ? void 0 : contextMenuOptionArray.map(function (el) { return ((0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, onClick: handleContextMenuItemClick, state: contextMenuState }, el.value)); }) }) })) })] })) }));
 }
 var MyChatBubbleListItem = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/mobile/components/ChatBubbleListItem/Popup.d.ts

@@ -1,4 +1,5 @@
 import { MutableRefObject } from 'react';
+export type PlacementTypes = 'v-auto' | 'h-auto' | 'v-center' | 'h-center' | 'top' | 'top-start' | 'top-end' | 'top-both' | 'top-center' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-both' | 'bottom-center' | 'left' | 'left-start' | 'left-end' | 'left-center' | 'right' | 'right-start' | 'right-end' | 'right-center';
 type Props = {
     targetRef: MutableRefObject<HTMLElement | null>;
     isOpen: boolean;

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

@@ -86,7 +86,7 @@ var Body = react_1.default.forwardRef(function (_a, ref) {
         }
         setIsButtonShow(true);
     };
-    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ onScroll: handleScroll, ref: ref, scrollVisibleType: scrollVisibleType }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {})] })), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(S_Body, __assign({ bodySpacingMode: bodySpacingMode }, { children: [(0, jsx_runtime_1.jsxs)(S_ChatMessageBox, __assign({ id: "chatMessageBox", onScroll: handleScroll, ref: ref, scrollVisibleType: scrollVisibleType }, { children: [children, (0, jsx_runtime_1.jsx)(EndOfList, {})] })), bodyChildren, isButtonShow && ((0, jsx_runtime_1.jsx)(S_BottomButtonWrapper, { children: (0, jsx_runtime_1.jsx)(MainButton_1.MainButton, { text: bodyMBtnText, size: "small", onClick: handleClickMBtn }) }))] })));
 });
 var bodySpacing = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  box-sizing: border-box;\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;

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

@@ -18,9 +18,11 @@ type Props = {
     iBtn1Type?: 'submit' | 'reset' | 'button';
     iBtn2State?: 'normal' | 'disabled';
     iBtn2Type?: 'submit' | 'reset' | 'button';
+    colorTheme?: ColorTheme;
     onClickLeftBtn?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onClickIBtn2?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 };
-declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
+export type ColorTheme = 'none' | 'transparent_white';
+declare function MobileHeaderBar({ titleType, titleText, captionText, leftBtnMode, displayType, iBtn1IconName, iBtn1IconFillType, iBtn1IconColorKey, iBtn2IconName, iBtn2IconFillType, iBtn2IconColorKey, dividerMode, imageSrc, iBtn1State, iBtn1Type, iBtn2State, iBtn2Type, colorTheme, onClickLeftBtn, onClickIBtn1, onClickIBtn2 }: Props): JSX.Element;
 export default MobileHeaderBar;