pds-dev-kit-web 2.0.10-alpha.0 → 2.0.11-alpha.0

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/MembershipSheet.js

@@ -27,10 +27,10 @@ var Section_1 = require("../../../../../../../../DynamicLayout/components/Sectio
 var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
 var styled_components_1 = __importDefault(require("styled-components"));
-var EmptyMembershipPlanSheet_1 = __importDefault(require("./EmptyMembershipPlanSheet"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 var MembershipCard_1 = __importDefault(require("./MembershipCard"));
 var MembershipPlanSheet_1 = __importDefault(require("./MembershipPlanSheet"));
+var UnavailableMembershipPlanSheet_1 = __importDefault(require("./UnavailableMembershipPlanSheet"));
 function MembershipSheet(_a) {
     var filteredMemberships = _a.filteredMemberships, isWideView = _a.isWideView;
     var _b = (0, react_1.useState)(0), currentIndex = _b[0], setCurrentIndex = _b[1];
@@ -38,7 +38,7 @@ function MembershipSheet(_a) {
     if (!section) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    var _c = section.styles, itemHighlightingColorInHex = _c.itemHighlightingColorInHex, itemToneType = _c.itemToneType, programmedItemActionButtonTextType = _c.programmedItemActionButtonTextType;
+    var itemToneType = section.styles.itemToneType;
     var currentMembership = filteredMemberships[currentIndex];
     var membership = currentMembership.membership, connectedSubscriptionProducts = currentMembership.connectedSubscriptionProducts;
     var handlePrevMembershipClick = function () {
@@ -64,7 +64,7 @@ function MembershipSheet(_a) {
                     paddingLeft: isWideView ? '160px' : '64px',
                     paddingRight: isWideView ? '160px' : '64px',
                     paddingTop: '80px'
-                }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], itemToneType: itemToneType, itemHighlightingColorInHex: itemHighlightingColorInHex, programmedItemActionButtonTextType: programmedItemActionButtonTextType }, void 0)) : ((0, jsx_runtime_1.jsx)(EmptyMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
+                }, width: "100%", height: "auto", shapeType: "round" }, { children: [(0, jsx_runtime_1.jsx)(MembershipCard_1.default, { membershipCardTemplate: membership.membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsxs)(S_MembershipDetailBox, __assign({ isWideView: isWideView }, { children: [membership.title && ((0, jsx_runtime_1.jsx)(desktop_1.Item.Title, { text: membership.title, styleTheme: "displayBold", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, textAlign: "left", lineLimit: 2, ellipsisMode: "use" }, void 0)), membership.membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membership.membershipBenefitInfo, itemToneTextLabelColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0)), connectedSubscriptionProducts.length > 0 ? ((0, jsx_runtime_1.jsx)(MembershipPlanSheet_1.default, { connectedSubscriptionProduct: connectedSubscriptionProducts[0], sectionStyles: section.styles }, void 0)) : ((0, jsx_runtime_1.jsx)(UnavailableMembershipPlanSheet_1.default, { sectionStyles: section.styles }, void 0))] }), void 0)] }), void 0)] }, void 0));
 }
 var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n"])));
 var S_ArrowButtonBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: ", ";\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/SectionContents.js

@@ -30,7 +30,7 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "headingBold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }), void 0));
 }
 var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
     var isEmptySectionData = _a.isEmptySectionData;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.d.ts → UnavailableMembershipPlanSheet.d.ts}

@@ -3,5 +3,5 @@ import type { ISectionStyles } from '../../../../../../../../DynamicLayout/types
 declare type Props = {
     sectionStyles: ISectionStyles;
 };
-declare function EmptyMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
-export default EmptyMembershipPlanSheet;
+declare function UnavailableMembershipPlanSheet({ sectionStyles }: Props): JSX.Element;
+export default UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/desktop/components/{EmptyMembershipPlanSheet.js → UnavailableMembershipPlanSheet.js}

@@ -17,16 +17,17 @@ var panels_1 = require("../../../../../../../../../desktop/panels");
 var components_1 = require("../../../../../../../../../hybrid/components");
 var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
-function EmptyMembershipPlanSheet(_a) {
+function UnavailableMembershipPlanSheet(_a) {
     var sectionStyles = _a.sectionStyles;
     var t = (0, react_i18next_1.useTranslation)('translation').t;
     var itemToneType = sectionStyles.itemToneType, programmedItemActionButtonTextType = sectionStyles.programmedItemActionButtonTextType;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", paddingBottom: "spacing_d", overrideCSS: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "auto", shapeType: "round", overrideCSS: {
                     display: 'flex',
                     alignItems: 'center',
+                    justifyContent: 'center',
                     height: '112px',
                     backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipPlanSheetBackgroundColor
                 } }, { children: (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.Title, { text: t('str_5300'), color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(components_2.D_MembershipSectionItem.XlargeMainButton, { buttonText: t(constants_1.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT[programmedItemActionButtonTextType]), state: "disabled", buttonTextColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].disabledProgrammedItemActionButtonTextColor, buttonBackgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType]
                     .disabledProgrammedItemActionButtonBackgroundColor }, void 0)] }, void 0));
 }
-exports.default = EmptyMembershipPlanSheet;
+exports.default = UnavailableMembershipPlanSheet;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/EmptyMembershipSheet.js

@@ -38,16 +38,11 @@ function MembershipSheet() {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                marginBottom: '96px'
+                marginTop: '48px',
+                marginBottom: '48px'
             }, width: "100%", height: "180px", shapeType: "round" }, { children: (0, jsx_runtime_1.jsx)(components_1.D_MembershipSectionItem.Title, { text: t('str_5299'), styleTheme: "body2Regular", color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].emptyMembershipSheetTextLabelColor }, void 0) }), void 0) }, void 0));
 }
-var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  padding: 0 ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n  padding: 0 ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
+var S_EmptyMembershipSheet = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", ";\n"], ["\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipContents.js

@@ -17,6 +17,6 @@ function MembershipContents(_a) {
             return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(MembershipSectionSheet_1.default, { membership: connectedMembership.membership }, void 0) }, connectedMembership.id));
         }) }, void 0));
 }
-var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 115px;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 115px;\n  position: relative;\n"])));
+var S_MembershipBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 0;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  margin-bottom: 0;\n  position: relative;\n"])));
 exports.default = MembershipContents;
 var templateObject_1;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/MembershipSectionSheet.js

@@ -14,51 +14,109 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var pdsOriginal_1 = require("../../../../../../../../DynamicLayout/components/pdsOriginal");
+var components_1 = require("../../../../../../../../../hybrid/components");
 var Section_1 = require("../../../../../../../../DynamicLayout/components/Section");
-var components_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
+var components_2 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/components");
 var constants_1 = require("../../../../../../../../DynamicLayout/sections/MembershipSection/constants");
-var styled_components_1 = __importDefault(require("styled-components"));
+var styled_components_1 = __importStar(require("styled-components"));
 var MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
 function MembershipSectionSheet(_a) {
     var membership = _a.membership;
     var section = (0, react_1.useContext)(Section_1.sectionContext);
+    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
+    var _b = (0, react_1.useState)(0), containerHeight = _b[0], setContainerHeight = _b[1];
+    var _c = (0, react_1.useState)(0), containerWidth = _c[0], setContainerWidth = _c[1];
+    var firstObserve = true;
+    var observerTarget = (0, react_1.useRef)(null);
+    var fadeTarget = (0, react_1.useRef)(null);
+    /**
+     * @when : 화면 진입 시
+     * @expected : 화면에 타겟의 등장을 감지하는 옵저버를 추가합니다.
+     * @clear : 옵저버 연결을 해제합니다.
+     */
+    (0, react_1.useEffect)(function () {
+        var observerTargetElement = observerTarget.current;
+        var fadeTargetElement = fadeTarget.current;
+        var mainElement = document.querySelector('main');
+        setContainerHeight(mainElement ? mainElement.clientHeight : window.innerHeight);
+        if (!observerTargetElement || !fadeTargetElement) {
+            return;
+        }
+        setContainerWidth(observerTargetElement.clientWidth);
+        var observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                if (entry.isIntersecting) {
+                    fadeTargetElement.classList.remove('fadeOut');
+                    fadeTargetElement.classList.add('fadeIn');
+                }
+                else {
+                    !firstObserve && fadeTargetElement.classList.add('fadeOut');
+                    fadeTargetElement.classList.remove('fadeIn');
+                }
+            });
+            firstObserve = false;
+        });
+        observer.observe(observerTargetElement);
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
     if (!section) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }
-    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
     var itemToneType = section.styles.itemToneType;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(S_ImageWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsxs)(S_ContentBox, { children: [(0, jsx_runtime_1.jsx)(S_TopGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0), (0, jsx_runtime_1.jsx)(S_MembershipDetailBox, __assign({ contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, { children: (0, jsx_runtime_1.jsxs)(S_MembershipDetailContents, { children: [(0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_f" }, void 0), membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)), (0, jsx_runtime_1.jsx)(pdsOriginal_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(S_BottomGradient, { contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_MembershipSection, { children: [(0, jsx_runtime_1.jsxs)(S_MembershipSectionView, __assign({ containerHeight: containerHeight }, { children: [(0, jsx_runtime_1.jsx)(S_ImageWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)(S_ContentWrapper, __assign({ ref: fadeTarget, "$height": (containerWidth - 96) * 1.6, contentBackgroundDimColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].contentBackgroundDimColor }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsxs)(S_CardContentsWrapper, { children: [(0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.Title, { text: membership.title || '', color: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetTextLabelColor, customFontSize: "28px", customFontWeight: "bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_f" }, void 0), membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0))] }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(S_StickySpacing, { ref: observerTarget, containerHeight: containerHeight }, void 0)] }, void 0));
 }
-var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
+var S_MembershipSection = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var S_MembershipSectionView = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  position: sticky;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n"], ["\n  height: ", "px;\n  position: sticky;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n"])), function (_a) {
+    var containerHeight = _a.containerHeight;
+    return containerHeight;
+});
+var S_CardContentsWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingG;
+    return theme.spacing.spacingE;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingG;
-});
-var S_ContentBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var S_TopGradient = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
-    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return "linear-gradient(transparent, " + contentBackgroundDimColor + ")";
+    return theme.spacing.spacingE;
 });
-var S_BottomGradient = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  height: 80px;\n  position: relative;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
-    var contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return "linear-gradient(" + contentBackgroundDimColor + ", transparent)";
+var S_ImageWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 96px);\n  z-index: 1;\n"], ["\n  left: 50%;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 96px);\n  z-index: 1;\n"])));
+var S_StickySpacing = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", "px;\n  margin-top: 200px;\n  position: relative;\n"], ["\n  height: ", "px;\n  margin-top: 200px;\n  position: relative;\n"])), function (_a) {
+    var containerHeight = _a.containerHeight;
+    return containerHeight;
 });
-var S_MembershipDetailBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: ", ";\n  display: flex;\n  min-height: 446px;\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"], ["\n  background: ", ";\n  display: flex;\n  min-height: 446px;\n  position: sticky;\n  width: 100%;\n  z-index: 2;\n"])), function (_a) {
+var fadein = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n   from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n"], ["\n   from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n"])));
+var fadeout = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n   from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n"], ["\n   from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n"])));
+var S_ContentWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 12px;\n  display: none;\n  height: ", "px;\n  left: 50%;\n  overflow: auto;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 96px);\n  z-index: 2;\n\n  &.fadeIn {\n    animation: ", " 0.5s;\n    display: inline-block;\n  }\n\n  &.fadeOut {\n    animation: ", " 0.5s;\n    display: inline-block;\n    opacity: 0;\n  }\n"], ["\n  background: ", ";\n  border-radius: 12px;\n  display: none;\n  height: ", "px;\n  left: 50%;\n  overflow: auto;\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(100% - 96px);\n  z-index: 2;\n\n  &.fadeIn {\n    animation: ", " 0.5s;\n    display: inline-block;\n  }\n\n  &.fadeOut {\n    animation: ", " 0.5s;\n    display: inline-block;\n    opacity: 0;\n  }\n"])), function (_a) {
     var contentBackgroundDimColor = _a.contentBackgroundDimColor;
     return contentBackgroundDimColor;
-});
-var S_MembershipDetailContents = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0 72px;\n  position: relative;\n  width: 100%;\n"], ["\n  margin: 0 72px;\n  position: relative;\n  width: 100%;\n"])));
+}, function (_a) {
+    var $height = _a.$height;
+    return $height;
+}, fadein, fadeout);
 exports.default = MembershipSectionSheet;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/EditType/templates/TemplateB/mobile/components/SectionContents.js

@@ -19,7 +19,7 @@ function SectionContents() {
     }
     var _a = section.styles, buttonAlphaBackgroundColorInHex = _a.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _a.buttonAlphaLabelColorInHex, buttonAlphaDesignType = _a.buttonAlphaDesignType, descriptionColorInHex = _a.descriptionColorInHex, titleColorInHex = _a.titleColorInHex;
     var _b = section.properties, title = _b.title, description = _b.description, buttonAlphaLabel = _b.buttonAlphaLabel, buttonAlphaLinkSrc = _b.buttonAlphaLinkSrc, buttonAlphaLinkType = _b.buttonAlphaLinkType;
-    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, textAlign: "center", color: titleColorInHex, styleTheme: "displayBold" }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, textAlign: "center", color: descriptionColorInHex, styleTheme: "body1Bold" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(S_SectionDataBox, { children: [title && ((0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold", lineHeight: 1.3 }, void 0)), description && ((0, jsx_runtime_1.jsx)(S_DescriptionWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "18px", fontWeight: "600" }, void 0) }, void 0)), buttonAlphaLinkSrc && ((0, jsx_runtime_1.jsx)(S_ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.M_MembershipSectionItem.DesignedSectionButton, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }, void 0) }, void 0))] }, void 0));
 }
 var S_SectionDataBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", ";\n"], ["\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.d.ts

@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
     var IconButton: ({ iconButtonIconColor, iconButtonDisabledIconColor, iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate }: MembershipCardProps) => JSX.Element;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/desktop/MembershipSectionItem.js

@@ -70,12 +70,15 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
     return lineHeight;
 });
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 function DesignedSectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.d.ts

@@ -7,7 +7,9 @@ declare namespace MembershipSectionItem {
     var Title: ({ text, color, lineHeight, ...textLabelProps }: IItemTitle & TextLabelProps & {
         lineHeight?: number | undefined;
     }) => JSX.Element;
-    var Description: ({ text, color, ...textLabelProps }: IItemDescription & TextLabelProps) => JSX.Element;
+    var Description: ({ text, color, fontWeight, ...textLabelProps }: IItemDescription & TextLabelProps & {
+        fontWeight?: string | undefined;
+    }) => JSX.Element;
     var DesignedSectionButton: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;
     var IconButton: ({ iconButtonBackgroundColor, iconButtonBorderColor, iconButtonDisabledBackgroundColor, iconButtonDisabledIconColor, iconButtonIconColor, isDisabled, iconName, state, onClick }: IconButtonProps) => JSX.Element;
     var MembershipCard: ({ membershipCardTemplate, cardWidth }: MembershipCardProps) => JSX.Element;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/components/mobile/MembershipSectionItem.js

@@ -70,12 +70,18 @@ var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (t
     return lineHeight;
 });
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
+    var text = _a.text, color = _a.color, fontWeight = _a.fontWeight, textLabelProps = __rest(_a, ["text", "color", "fontWeight"]);
+    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-membership-item-element-name": "Description", color: color, fontWeight: fontWeight, isBulletPointMode: textLabelProps.bulletPointMode === 'use' }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps), void 0) }), void 0));
 }
-var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
+var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"], ["\n  ", ";\n\n  & > div {\n    color: ", ";\n    width: 100%;\n\n    ", ";\n  }\n"])), function (_a) {
+    var isBulletPointMode = _a.isBulletPointMode;
+    return isBulletPointMode && 'position: relative';
+}, function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight : " + fontWeight + ";";
 });
 function DesignedSectionButton(_a) {
     var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;

package/package.json

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

package/release-note.md

@@ -1,8 +1,12 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.10-alpha.0]
+## [v2.0.11-alpha.0]
 
-## alpha|https://storybook-pds-975.test.publ.biz
+## alpha|https://storybook-pds-983.test.publ.biz
 
-### Component
-* TextLabel
-    * tooltip icon 위치 조정
+### sub
+* DynamicLayout
+    * membership section 디자인 수정
+    * membership section에서 미리보기 영역 높이 감지할 수 있도록 조치
+    * membership section 스토리북 예제 분기하여 제공
+### Color
+* 컬러 키 값 23.05.09 18시 38분 기준 싱크