pds-dev-kit-web 2.2.296 → 2.2.298

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextOptionStyles = exports.getTextStyles = void 0;
+exports.isValidDate = exports.getTextOptionStyles = exports.getTextStyles = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var react_1 = require("react");
@@ -22,11 +22,13 @@ var react_i18next_1 = require("react-i18next");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var types_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/types");
+var parseQueryData_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util/parseQueryData");
 var hooks_1 = require("../../../../hooks");
 var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
 var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
 var textUtil_1 = require("../../../../newUtils/textUtil");
 var util_1 = require("../../../../util");
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HeightFitContentCover_1 = require("../components/S_HeightFitContentCover");
@@ -44,7 +46,7 @@ function Text(props) {
     var desktopHeightFitContent = (_d = CB_STYLE_PROP_TEXTOPTION === null || CB_STYLE_PROP_TEXTOPTION === void 0 ? void 0 : CB_STYLE_PROP_TEXTOPTION.CB_STYLE_PROP_TEXTOPTION_SPEC_FITCONTENT) !== null && _d !== void 0 ? _d : false;
     var mobileHeightFitContent = (_e = CB_STYLE_PROP_TEXTOPTION === null || CB_STYLE_PROP_TEXTOPTION === void 0 ? void 0 : CB_STYLE_PROP_TEXTOPTION['CB_STYLE_PROP_TEXTOPTION_SPEC_FITCONTENT:MOBILE']) !== null && _e !== void 0 ? _e : desktopHeightFitContent;
     var heightFitContent = device === 'MOBILE' ? mobileHeightFitContent : desktopHeightFitContent;
-    var cLinkValue = function () {
+    var cLinkValue = function (defaultValue) {
         if (CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
             CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA') {
             if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
@@ -56,13 +58,13 @@ function Text(props) {
             }
             return link;
         }
-        return CB_CONTENT_PROP_CLINK_SPEC_SRC;
+        return defaultValue;
     };
     var _j = (0, useCLINK_1.default)({
-        src: cLinkValue(),
+        src: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_SRC),
         type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
         openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
-        internalSrc: String(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
+        internalSrc: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
     }), CLINKCursor = _j.CLINKCursor, onClickCLINK = _j.onClickCLINK;
     var _k = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _k.style, textHoverStyle = _k.hoverStyle;
     var textOptionStyle = getTextOptionStyles(props === null || props === void 0 ? void 0 : props.CB_STYLE_PROP_TEXTOPTION, device).style;
@@ -93,13 +95,39 @@ function Text(props) {
             CB_CONTENT_PROP_TEXT_SPEC_VALUETYPE === 'DELEGATEDDATA';
         if (isDataConnected) {
             if (queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData) {
+                if (CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA === 'NONE') {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10477" });
+                    }
+                    return '';
+                }
+                if (!Object.prototype.hasOwnProperty.call(queryContext.queryData, CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA)) {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                    }
+                    return '';
+                }
                 var value = queryContext.queryData[CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA];
-                if (formatOption) {
-                    return formatOption.formatter(value);
+                if (value === null || value === undefined) {
+                    if (mode === 'EDIT') {
+                        return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+                    }
+                    return '';
+                }
+                if (!value && mode === 'EDIT') {
+                    return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10597" });
                 }
-                return value;
+                return (0, parseQueryData_1.parseQueryValue)({
+                    value: value,
+                    queryKey: CB_CONTENT_PROP_TEXT_SPEC_CONNECTDATA,
+                    formatOption: formatOption,
+                    t: t
+                });
             }
-            return 'ERROR: data connected but no data';
+            if (mode === 'EDIT') {
+                return (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" });
+            }
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         }
         if (device === 'MOBILE' &&
             mode !== 'EDIT' &&
@@ -130,7 +158,13 @@ function Text(props) {
         return props.CB_CONTENT_PROP_TEXT.CB_CONTENT_PROP_TEXT_SPEC_TEXT;
     };
     var getTruncatedText = function (text) {
+        if (!text || typeof text !== 'string') {
+            return text;
+        }
         var maxLength = props.CB_STYLE_PROP_TEXT.CB_STYLE_PROP_TEXT_SPEC_ELLIPSIS;
+        if (isRichText(text)) {
+            return domstringToPlain(text, maxLength, true);
+        }
         if (!maxLength) {
             return text;
         }
@@ -189,3 +223,69 @@ function getTextOptionStyles(props, device) {
     });
 }
 exports.getTextOptionStyles = getTextOptionStyles;
+/**
+ * 텍스트가 Rich Text(HTML)인지 Plain Text인지 판별합니다.
+ * @param {string} text - 확인할 문자열
+ * @returns {boolean} - HTML 태그가 포함되어 있으면 true
+ */
+var isRichText = function (text) {
+    if (typeof text !== 'string')
+        return false;
+    // HTML 태그를 찾는 정규 표현식
+    var htmlRegex = /<[a-z][\s\S]*>/i;
+    return htmlRegex.test(text);
+};
+function domstringToPlain(domstring, ellipsis, useEnter) {
+    var tempDivElement = document.createElement('div');
+    tempDivElement.innerHTML = domstring;
+    // 1. 제거하고 싶은 '비-텍스트' 태그들을 정의하고 모두 삭제합니다.
+    var tagsToRemove = ['iframe', 'img', 'video', 'audio', 'script', 'style', 'canvas', 'svg'];
+    tagsToRemove.forEach(function (tagName) {
+        var elements = tempDivElement.querySelectorAll(tagName);
+        elements.forEach(function (el) { return el.remove(); });
+    });
+    // 2. 텍스트 추출 (위에서 태그를 지웠으므로 순수 텍스트만 남음)
+    var plainText = tempDivElement.textContent || tempDivElement.innerText || '';
+    // 3. 공백 처리
+    var processedText = plainText.replace(/\s{2,}/gi, ' ');
+    // 4. 말줄임표 처리
+    if (ellipsis && processedText.length > ellipsis) {
+        return "".concat(processedText.slice(0, ellipsis), "...");
+    }
+    // 5. 줄바꿈 처리 로직
+    if (useEnter) {
+        // innerHTML에서 br과 p 태그를 변환하기 전에,
+        // 이미 1번 단계에서 이미지/이프레임 등이 제거된 상태의 innerHTML을 사용합니다.
+        processedText = tempDivElement.innerHTML
+            .replace(/<br\s*\/?>/gi, '\n')
+            .replace(/<\/p>/gi, '\n')
+            .replace(/&gt;/gi, '>')
+            .replace(/&lt;/gi, '<')
+            .replace(/&amp;/gi, '&')
+            .replace(/<p[^>]*>/gi, '')
+            .replace(/<\/?[^>]+(>|$)/g, ''); // 남은 모든 HTML 태그 제거 (정규식 추가)
+    }
+    else {
+        // 줄바꿈을 공백으로 치환하거나 <br>로 치환 (상황에 따라 선택)
+        processedText = processedText.replace(/\n/gi, ' ').trim();
+    }
+    return processedText;
+}
+/**
+ * 문자열이 유효한 날짜 형태인지 판별합니다.
+ * (YYYY-MM-DD, ISO 8601, UTC 형태 등을 지원)
+ */
+var isValidDate = function (value) {
+    if (!value || typeof value !== 'string')
+        return false;
+    // 1. 기본적인 날짜 구조인지 정규식으로 확인 (숫자와 특수기호 조합)
+    // 최소한 "0000-00-00" 또는 "00/00/00" 형태는 갖춰야 함
+    var datePattern = /^\d{4}[./-]\d{1,2}[./-]\d{1,2}/;
+    if (!datePattern.test(value))
+        return false;
+    // 2. Date 객체 생성을 시도 (UTC 처리를 위해 공백을 T로 치환 고려)
+    var d = new Date(value.replace(' ', 'T'));
+    // 3. 존재하지 않는 날짜(예: 13월, 32일)라면 getTime()이 NaN을 반환함
+    return !isNaN(d.getTime());
+};
+exports.isValidDate = isValidDate;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/textSpecFormatOptions.d.ts

@@ -1,7 +1,6 @@
-type Formatter = (value: string) => string;
+export type Formatter = (value: string) => string;
 export declare const TEXT_SPEC_FORMAT_OPRIONS: Record<string, {
     name: string;
     description: string;
     formatter: Formatter;
 } | undefined>;
-export {};

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/textSpecFormatOptions.js

@@ -9,7 +9,7 @@ exports.TEXT_SPEC_FORMAT_OPRIONS = {
             var num = Number(value);
             if (isNaN(num))
                 return value; // Return original if not a number
-            return new Intl.NumberFormat('en-US', {
+            return new Intl.NumberFormat(undefined, {
                 maximumFractionDigits: 0
             }).format(num);
         }
@@ -21,7 +21,7 @@ exports.TEXT_SPEC_FORMAT_OPRIONS = {
             var num = Number(value);
             if (isNaN(num))
                 return value; // Return original if not a number
-            return new Intl.NumberFormat('en-US', {
+            return new Intl.NumberFormat(undefined, {
                 minimumFractionDigits: 1,
                 maximumFractionDigits: 1
             }).format(num);
@@ -34,7 +34,7 @@ exports.TEXT_SPEC_FORMAT_OPRIONS = {
             var num = Number(value);
             if (isNaN(num))
                 return value; // Return original if not a number
-            return new Intl.NumberFormat('en-US', {
+            return new Intl.NumberFormat(undefined, {
                 minimumFractionDigits: 2,
                 maximumFractionDigits: 2
             }).format(num);
@@ -139,7 +139,7 @@ exports.TEXT_SPEC_FORMAT_OPRIONS = {
             if (isNaN(d.getTime()))
                 return value;
             var dd = String(d.getDate()).padStart(2, '0');
-            var mmm = d.toLocaleString('en-US', { month: 'short' });
+            var mmm = d.toLocaleString(undefined, { month: 'short' });
             return "".concat(dd, " ").concat(mmm);
         }
     },

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/VideoPlayer/VideoPlayer.js

@@ -21,17 +21,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var Icon_1 = require("../../../../../../../DynamicLayout/components/pdsOriginal/hybrid/Icon");
+var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
 var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
 var styled_components_1 = __importDefault(require("styled-components"));
+var DataNotFound_1 = __importDefault(require("../../../fallbacks/DataNotFound"));
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var helper_1 = require("./helper");
 function VideoPlayer(props) {
     var _a = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
+    var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
     var CB_CONTENT_PROP_VIDEO = props.CB_CONTENT_PROP_VIDEO;
     var index = props.index, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
     var isEditMode = mode === 'EDIT';
@@ -140,6 +143,27 @@ function VideoPlayer(props) {
         video.play();
         return;
     };
+    var showDataNotFound = function () {
+        if (mode !== 'EDIT') {
+            return false;
+        }
+        if (CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DATA' ||
+            CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE === 'DELEGATEDDATA') {
+            if (!(queryContext === null || queryContext === void 0 ? void 0 : queryContext.queryData)) {
+                return true;
+            }
+            if (!Object.prototype.hasOwnProperty.call(queryContext.queryData, CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA)) {
+                if (mode === 'EDIT') {
+                    return true;
+                }
+                return false;
+            }
+            if (!queryContext.queryData[CB_CONTENT_PROP_VIDEO.CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA]) {
+                return true;
+            }
+        }
+        return false;
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [isEditMode && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
                                 position: 'absolute',
                                 top: '50%',
@@ -150,7 +174,7 @@ function VideoPlayer(props) {
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 transform: 'translate(-50%, -50%)'
-                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB)] })) }))] }));
+                            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { iconName: "ic_video_play_circle", fillType: "fill", colorKey: "ui_cpnt_icon_sys_white", size: 48 }) }))), (0, jsx_runtime_1.jsxs)(S_Video, __assign({ muted: true, playsInline: true, controls: !isEditMode, isEditMode: isEditMode, ref: videoRef, "data-src": CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR, poster: CB_CONTENT_PROP_VIDEO_SPEC_THUMB, onPlay: onPlay, onEnded: onEnded, onError: onVideoError, onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata }, { children: [(0, jsx_runtime_1.jsx)("source", { src: videoURL }), "Your browser does not support the video tag."] }), videoURL + CB_CONTENT_PROP_VIDEO_SPEC_THUMB), showDataNotFound() && (0, jsx_runtime_1.jsx)(DataNotFound_1.default, { stringKey: "str_10478" })] })) }))] }));
 }
 function getBGColorStyles(props, device) {
     var availableSpecCodes = [

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts

@@ -46,7 +46,7 @@ export type CB_CONTENT_PROP_CONTENTSCAROUSEL = {
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSCAROUSEL_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -56,7 +56,7 @@ export type CB_CONTENT_PROP_SLIDEBANNER = {
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_VALUETYPE: CCB_VALUE_TYPE;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATASORTING: STRING_PLAIN;
-    CB_CONTENT_PROP_SLIDEBANNER_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_SLIDEBANNER_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_SLIDEBANNER_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
 };
@@ -65,7 +65,7 @@ export type CB_CONTENT_PROP_CONTENTSLIST = {
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_CONNECTDATA: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATASORTING: STRING_PLAIN;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAFILTER: STRING_PLAIN;
-    CB_CONTENT_PROP_CONTENTSLIST_SPEC_OFFSET: NUMBER_INTEGER;
+    CB_CONTENT_PROP_CONTENTSLIST_SPEC_DATAOFFSET: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_MANUALITEMS: ManualItem[];
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_ITEMCOUNTS: NUMBER_INTEGER;
     CB_CONTENT_PROP_CONTENTSLIST_SPEC_DISPLAYCOUNTS: NUMBER_INTEGER;
@@ -171,6 +171,7 @@ export type CB_STYLE_PROP_COLOR_SPECS = CB_STYLE_PROP_COLOR_SPECS_BASE & {
 };
 export type CB_CONTENT_PROP_VIDEO = {
     CB_CONTENT_PROP_VIDEO_SPEC_CONNECTDATA: STRING_PLAIN;
+    CB_CONTENT_PROP_VIDEO_SPEC_VALUETYPE: 'VALUE' | 'DELEGATEDDATA' | 'DATA';
     CB_CONTENT_PROP_VIDEO_SPEC_SELECTOR: string;
     CB_CONTENT_PROP_VIDEO_SPEC_AUTOPLAY: string;
     CB_CONTENT_PROP_VIDEO_SPEC_MAUTOPLAY: string;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/DataNotFound.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function DataNotFound({ stringKey }: {
+    stringKey: string;
+}): JSX.Element;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/fallbacks/DataNotFound.js

@@ -0,0 +1,33 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+function DataNotFound(_a) {
+    var stringKey = _a.stringKey;
+    var t = (0, react_i18next_1.useTranslation)('translation').t;
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, { children: (0, jsx_runtime_1.jsx)(S_DataNotFound, { children: t(stringKey) }) }));
+}
+exports.default = DataNotFound;
+var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n"], ["\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 100%;\n"])));
+var S_DataNotFound = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"], ["\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  display: flex;\n  font-size: ", ";\n  font-weight: ", ";\n  justify-content: center;\n  line-height: ", ";\n  margin: auto;\n  padding: ", ";\n  text-align: center;\n  width: 100%;\n  word-break: keep-all;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.desktopFontSize.caption2;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fontWeight.bold;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.desktopLineHeight.caption1;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseJsonProperties.js

@@ -37,7 +37,6 @@ function parseJsonProperties(properties, device) {
         };
         if (normalizedProperty.name in types_4.CB_STYLE_PROP_KEYS) {
             var _a = (0, stylePropParsers_1.parseStyleProperties)(normalizedProperty, device), style = _a.style, overlayStyle = _a.overlayStyle;
-            // console.log(normalizedProperty.name, ' >>>', overlayStyle, overlayHoverStyle);
             return __assign(__assign({}, acc), { style: __assign(__assign({}, acc.style), style), overlayStyle: __assign(__assign({}, acc.overlayStyle), overlayStyle) });
         }
         if (normalizedProperty.name in types_3.CB_LAYOUT_PROP_KEYS) {

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseQueryData.d.ts

@@ -0,0 +1,18 @@
+import type { Formatter } from '../components/ComponentBlock/componentBlocks/Text/textSpecFormatOptions';
+import type { TFunction } from 'i18next';
+export declare function parseQueryValue({ value, queryKey, formatOption, t }: {
+    value: any;
+    queryKey: string;
+    formatOption?: {
+        name: string;
+        description: string;
+        formatter: Formatter;
+    };
+    t: TFunction;
+}): any;
+/**
+ * 문자열이 유효한 날짜 형태인지 판별합니다.
+ * (YYYY-MM-DD, ISO 8601, UTC 형태 등을 지원)
+ */
+export declare const isValidDate: (value: string) => boolean;
+export declare function formatReleasedDateToYear(dateStr: string | null | undefined): string | null | undefined;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseQueryData.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatReleasedDateToYear = exports.isValidDate = exports.parseQueryValue = void 0;
+function parseQueryValue(_a) {
+    var value = _a.value, queryKey = _a.queryKey, formatOption = _a.formatOption, t = _a.t;
+    if (Array.isArray(value)) {
+        return value.map(function (item) { return item.name; }).join(', ');
+    }
+    if (queryKey === 'saleStatus') {
+        if (value === 'ACTIVE') {
+            return t('str_commerce_products_status_sale_active');
+        }
+        if (value === 'DISCONTINUED') {
+            return t('str_commerce_products_status_sale_stopped');
+        }
+    }
+    if (queryKey === 'paid') {
+        if (value === 'PAID') {
+            return t('str_paid');
+        }
+    }
+    if (queryKey === 'pinned') {
+        if (value === 'true') {
+            return t('str_pinned');
+        }
+        return '';
+    }
+    if (queryKey === 'releasedDate') {
+        return formatReleasedDateToYear(value);
+    }
+    if (queryKey.endsWith('Date') || queryKey.endsWith('At')) {
+        if (formatOption) {
+            return formatOption.formatter(convertToUTC(value));
+        }
+        return convertToLocalTime(value);
+    }
+    if (formatOption) {
+        return formatOption.formatter(convertToUTC(value));
+    }
+    return value;
+}
+exports.parseQueryValue = parseQueryValue;
+/**
+ * UTC 날짜 문자열을 로컬 타임 문자열로 변환합니다.
+ * @param utcString - '2022-07-29 00:55:03' 형태의 문자열
+ * @returns 로컬 시간으로 변환된 문자열
+ */
+var convertToLocalTime = function (utcString) {
+    if ((0, exports.isValidDate)(utcString) === false) {
+        return utcString;
+    }
+    var date = new Date("".concat(utcString.replace(' ', 'T'), "Z"));
+    return date.toLocaleString();
+};
+var convertToUTC = function (string) {
+    if ((0, exports.isValidDate)(string) === false) {
+        return string;
+    }
+    var date = new Date("".concat(string.replace(' ', 'T'), "Z"));
+    return date.toISOString();
+};
+/**
+ * 문자열이 유효한 날짜 형태인지 판별합니다.
+ * (YYYY-MM-DD, ISO 8601, UTC 형태 등을 지원)
+ */
+var isValidDate = function (value) {
+    if (!value || typeof value !== 'string')
+        return false;
+    // 1. 기본적인 날짜 구조인지 정규식으로 확인 (숫자와 특수기호 조합)
+    // 최소한 "0000-00-00" 또는 "00/00/00" 형태는 갖춰야 함
+    var datePattern = /^\d{4}[./-]\d{1,2}[./-]\d{1,2}/;
+    if (!datePattern.test(value))
+        return false;
+    // 2. Date 객체 생성을 시도 (UTC 처리를 위해 공백을 T로 치환 고려)
+    var d = new Date(value.replace(' ', 'T'));
+    // 3. 존재하지 않는 날짜(예: 13월, 32일)라면 getTime()이 NaN을 반환함
+    return !isNaN(d.getTime());
+};
+exports.isValidDate = isValidDate;
+// NOTE: 서버에서 'releasedDate' 필드가 'YYYY-00-00' 형식으로 옴, 연도만 추출하는 함수 추가
+function formatReleasedDateToYear(dateStr) {
+    if (!dateStr) {
+        return dateStr;
+    }
+    var yearRegex = /^(\d{4})-\d{2}-\d{2}$/;
+    var match = yearRegex.exec(dateStr);
+    if (match) {
+        return match[1];
+    }
+    return dateStr;
+}
+exports.formatReleasedDateToYear = formatReleasedDateToYear;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropBorder.js

@@ -21,17 +21,31 @@ var AVAILABLE_SPECS = [
 function parseStylePropBorder(namedProps, device) {
     var specs = namedProps.specs;
     return AVAILABLE_SPECS.reduce(function (acc, cur) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var baseKey = device === 'DESKTOP' ? cur : "".concat(cur, ":MOBILE");
         var cssPropertyKey = getParsedKey(baseKey);
         var value = specs[baseKey];
         var hoverValue = specs["".concat(baseKey, ":HOVER")];
         var isRadius = cssPropertyKey === 'borderRadius';
         if (value === null || value === undefined) {
+            if (device === 'MOBILE') {
+                var desktopValue = specs[cur];
+                if (isRadius) {
+                    var _e = desktopValue, tl = _e.tl, tr = _e.tr, bl = _e.bl, br = _e.br;
+                    return {
+                        style: __assign(__assign({}, acc.style), { borderTopLeftRadius: tl, borderTopRightRadius: tr, borderBottomLeftRadius: bl, borderBottomRightRadius: br }),
+                        hoverStyle: __assign({}, acc.hoverStyle)
+                    };
+                }
+                return {
+                    style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = desktopValue, _a)),
+                    hoverStyle: __assign({}, acc.hoverStyle)
+                };
+            }
             return acc;
         }
         if (isRadius) {
-            var _d = value, tl = _d.tl, tr = _d.tr, bl = _d.bl, br = _d.br;
+            var _f = value, tl = _f.tl, tr = _f.tr, bl = _f.bl, br = _f.br;
             var hoverValueTypeExpanded = hoverValue;
             if (hoverValueTypeExpanded === null || hoverValueTypeExpanded === undefined) {
                 return {
@@ -46,13 +60,13 @@ function parseStylePropBorder(namedProps, device) {
         }
         if (hoverValue === null || hoverValue === undefined) {
             return {
-                style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value, _a)),
+                style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value, _b)),
                 hoverStyle: __assign({}, acc.hoverStyle)
             };
         }
         return {
-            style: __assign(__assign({}, acc.style), (_b = {}, _b[cssPropertyKey] = value, _b)),
-            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_c = {}, _c[cssPropertyKey] = hoverValue, _c))
+            style: __assign(__assign({}, acc.style), (_c = {}, _c[cssPropertyKey] = value, _c)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_d = {}, _d[cssPropertyKey] = hoverValue, _d))
         };
     }, {
         style: {},

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -429,6 +429,7 @@ export interface IComposition {
     compositionTemplateCode: string;
     dynamicLayoutComponentBlockId: number;
     ccbManualItemUuid: string;
+    isInitialConversionTriggered: boolean;
 }
 export type ICompositionJsonProperties = {
     data: {

package/package.json

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

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.296]
+## [v2.2.298]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1414] Select valueArray에 disabled 상태 추가
+* [3.4 추가 작업사항] Project/papp contents