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

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

@@ -20,9 +20,10 @@ var __importDefault = (this && this.__importDefault) || function (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 panels_1 = require("../../../../../../../../../mobile/panels");
 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 MembershipBenefitInfo_1 = __importDefault(require("./MembershipBenefitInfo"));
@@ -32,33 +33,19 @@ function MembershipSectionSheet(_a) {
     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));
+    var membershipCardTemplate = membership.membershipCardTemplate, membershipBenefitInfo = membership.membershipBenefitInfo;
+    return ((0, jsx_runtime_1.jsxs)(panels_1.SectionSheet, __assign({ overrideCSS: {
+            backgroundColor: constants_1.MEMBERSHIP_SECTION_TONE_COLOR[itemToneType].membershipSheetBackgroundColor,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            marginBottom: '48px'
+        }, width: "100%", height: "100%", shapeType: "round", paddingBottom: "spacing_f" }, { children: [(0, jsx_runtime_1.jsx)(components_2.M_MembershipSectionItem.MembershipCard, { membershipCardTemplate: membershipCardTemplate }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (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)(S_MembershipDetailBox, { children: membershipBenefitInfo && ((0, jsx_runtime_1.jsx)(MembershipBenefitInfo_1.default, { membershipBenefitInfo: membershipBenefitInfo, itemToneType: itemToneType }, void 0)) }, 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 theme = _a.theme;
-    return theme.spacing.spacingG;
-}, function (_a) {
+var S_MembershipDetailBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"], ["\n  padding-top: ", ";\n  position: relative;\n  width: 100%;\n"])), 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 + ")";
-});
-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_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 contentBackgroundDimColor = _a.contentBackgroundDimColor;
-    return contentBackgroundDimColor;
+    return theme.spacing.spacingF;
 });
-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"])));
 exports.default = MembershipSectionSheet;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1;

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

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,11 +30,11 @@ 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, __assign({ isEmptySectionData: !title && !description && !buttonAlphaLinkSrc }, { 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;
-    return theme.spacing.spacingE;
+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, theme = _a.theme;
+    return isEmptySectionData ? 0 : theme.spacing.spacingG;
 });
 var S_DescriptionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\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/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts

@@ -1,5 +1,6 @@
 import type { TypeOfMembershipSectionToneColor } from './type';
 import type { SubscriptionProductType, TypeOfItemToneType, TypeOfProgrammedItemActionButtonTextType } from '../../../DynamicLayout/types';
+export declare const MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
 export declare const COMMON_OVERLAY_IMAGE_SRC = "https://static.publ.site/membership_card_deco.png";
 export declare const MEMBERSHIP_SECTION_TONE_COLOR: {
     [key in TypeOfItemToneType]: TypeOfMembershipSectionToneColor;

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = void 0;
+exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = exports.MEMBERSHIP_SECTION_TONE_COLOR = exports.COMMON_OVERLAY_IMAGE_SRC = exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = void 0;
+exports.MEMBERSHIP_SECTION_PREVIEW_WIDTH = 375;
 exports.COMMON_OVERLAY_IMAGE_SRC = 'https://static.publ.site/membership_card_deco.png';
 exports.MEMBERSHIP_SECTION_TONE_COLOR = {
     LIGHT: {

package/package.json

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

package/release-note.md

@@ -1,12 +1,8 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.0.11]
+## [v2.0.13-alpha.0]
 
-## daily|https://design.storybook.publ.biz/
+## alpha|https://storybook-pds-alpha.test.publ.biz
 
-### Layout
-* WTA
-    * 로딩 상태일때도 area의 스타일과 동일한 스타일을 가지도록 조치
-* WTK
-    * 로딩 상태일때도 area의 스타일과 동일한 스타일을 가지도록 조치
-### Color
-* 컬러 키 값 23.05.10 11시 43분 기준 싱크
+### sub
+* DynamicLayout
+    * membership section M_Template_B 디자인 변경