pds-dev-kit-web-test 0.2.0-beta.0 → 0.2.1

package/dist/src/sub/DynamicLayout/sections/MembershipSection/constants.d.ts

@@ -0,0 +1,13 @@
+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;
+};
+export declare const MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT: {
+    [key in TypeOfProgrammedItemActionButtonTextType]: string;
+};
+export declare const MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT: {
+    [key in SubscriptionProductType]: string;
+};

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

@@ -0,0 +1,58 @@
+"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 = 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: {
+        contentBackgroundDimColor: '#F5F5F8CC',
+        iconButtonBackgroundColor: '#FFFFFFFF',
+        iconButtonBorderColor: '#E3E5E9FF',
+        iconButtonDisabledBackgroundColor: '#FFFFFFFF',
+        iconButtonDisabledIconColor: '#AAAAB1FF',
+        iconButtonIconColor: '#1E1E20FF',
+        membershipPlanSheetBackgroundColor: '#EAEBEFFF',
+        membershipSheetBackgroundColor: '#F5F5F8FF',
+        membershipSheetTextLabelColor: '#1E1E20FF',
+        scrollbarColor: '#E3E5E9FF',
+        disabledProgrammedItemActionButtonTextColor: '#AAAAB1FF',
+        disabledProgrammedItemActionButtonBackgroundColor: '#E3E5E9FF',
+        emptyMembershipSheetTextLabelColor: '#68686BFF'
+    },
+    DARK: {
+        contentBackgroundDimColor: '#252526B3',
+        iconButtonBackgroundColor: '#1E1E20FF',
+        iconButtonBorderColor: '#404042FF',
+        iconButtonDisabledBackgroundColor: '#151515FF',
+        iconButtonDisabledIconColor: '#68686CFF',
+        iconButtonIconColor: '#FDFDFDFF',
+        membershipPlanSheetBackgroundColor: '#303032FF',
+        membershipSheetBackgroundColor: '#252526FF',
+        membershipSheetTextLabelColor: '#FDFDFDFF',
+        scrollbarColor: '#404042FF',
+        disabledProgrammedItemActionButtonTextColor: '#68686CFF',
+        disabledProgrammedItemActionButtonBackgroundColor: '#404042FF',
+        emptyMembershipSheetTextLabelColor: '#A5A5ABFF'
+    }
+};
+exports.MEMBERSHIP_SECTION_ACTION_BUTTON_TEXT = {
+    A: 'str_5350',
+    B: 'str_5351',
+    C: 'str_5352',
+    D: 'str_5353',
+    E: 'str_5354'
+};
+exports.MEMBERSHIP_SECTION_SUBSCRIPTION_PRODUCT_TYPE_TEXT = {
+    COUPON_FREE_FINITE: 'str_payment_option_coupon_free_finite',
+    COUPON_FREE_INFINITE: 'str_payment_option_coupon_free_infinite',
+    COUPON_ONCE_FINITE: 'str_payment_option_coupon_one_time',
+    COUPON_ONCE_INFINITE: 'str_payment_option_coupon_one_time',
+    FREE_FINITE: 'str_payment_option_subs_temporary_free',
+    FREE_INFINITE: 'str_payment_option_unlimited_free',
+    ONCE_FINITE: 'str_payment_option_one_time',
+    ONCE_INFINITE: 'str_payment_option_one_time',
+    SUBSCRIPTION_30DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_90DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_180DAYS: 'str_payment_option_subs_regularly',
+    SUBSCRIPTION_365DAYS: 'str_payment_option_subs_regularly'
+};

package/dist/src/sub/DynamicLayout/sections/MembershipSection/index.d.ts

@@ -0,0 +1,3 @@
+import { EditTypeMembershipSection } from './EditType';
+import { NormalTypeMembershipSection } from './NormalType';
+export { EditTypeMembershipSection, NormalTypeMembershipSection };

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = void 0;
+var EditType_1 = require("./EditType");
+Object.defineProperty(exports, "EditTypeMembershipSection", { enumerable: true, get: function () { return EditType_1.EditTypeMembershipSection; } });
+var NormalType_1 = require("./NormalType");
+Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return NormalType_1.NormalTypeMembershipSection; } });

package/dist/src/sub/DynamicLayout/sections/MembershipSection/type.d.ts

@@ -0,0 +1,5 @@
+export declare type TypeOfMembershipSectionToneColor = {
+    [key in colorTonePreset]: string;
+};
+declare type colorTonePreset = 'contentBackgroundDimColor' | 'iconButtonBackgroundColor' | 'iconButtonBorderColor' | 'iconButtonDisabledBackgroundColor' | 'iconButtonDisabledIconColor' | 'iconButtonIconColor' | 'membershipPlanSheetBackgroundColor' | 'membershipSheetBackgroundColor' | 'membershipSheetTextLabelColor' | 'scrollbarColor' | 'disabledProgrammedItemActionButtonTextColor' | 'disabledProgrammedItemActionButtonBackgroundColor' | 'emptyMembershipSheetTextLabelColor';
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/sections/index.d.ts

@@ -3,3 +3,6 @@ export { ContentsSection } from './ContentsSection';
 export { FooterSection } from './FooterSection';
 export { InfoBoxSection } from './InfoBoxSection';
 export { IntroSection } from './IntroSection';
+export { EditTypeMembershipSection } from './MembershipSection';
+export { NormalTypeMembershipSection } from './MembershipSection';
+export { FullscreenIframeSection } from './FullscreenIframeSection';

package/dist/src/sub/DynamicLayout/sections/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
+exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
 var ContentsCarouselSection_1 = require("./ContentsCarouselSection");
 Object.defineProperty(exports, "ContentsCarouselSection", { enumerable: true, get: function () { return ContentsCarouselSection_1.ContentsCarouselSection; } });
 var ContentsSection_1 = require("./ContentsSection");
@@ -11,3 +11,9 @@ var InfoBoxSection_1 = require("./InfoBoxSection");
 Object.defineProperty(exports, "InfoBoxSection", { enumerable: true, get: function () { return InfoBoxSection_1.InfoBoxSection; } });
 var IntroSection_1 = require("./IntroSection");
 Object.defineProperty(exports, "IntroSection", { enumerable: true, get: function () { return IntroSection_1.IntroSection; } });
+var MembershipSection_1 = require("./MembershipSection");
+Object.defineProperty(exports, "EditTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_1.EditTypeMembershipSection; } });
+var MembershipSection_2 = require("./MembershipSection");
+Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_2.NormalTypeMembershipSection; } });
+var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
+Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return FullscreenIframeSection_1.FullscreenIframeSection; } });

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

@@ -1,7 +1,11 @@
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A';
+/// <reference types="react" />
+import type { TypeOfSectionAction } from './sectionActionTypes';
+export { TypeOfSectionAction };
+export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM_SECTION';
+export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | 'CUSTOM_SECTION_A';
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
+export declare type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED' | 'CUSTOM';
 export declare type TypeOfCarouselAutoplayMode = 'AUTO' | 'MANUAL';
 export declare type TypeOfCarouselInfiniteLoopMode = 'USE' | 'NO_USE';
 export declare type TypeOfBackgroundMediaType = 'IMAGE' | 'YOUTUBE';
@@ -10,8 +14,10 @@ export declare type TypeOfItemButtonDesignType = 'A' | 'B' | 'C' | 'D' | 'E' | '
 export declare type TypeOfItemManifestSchema = 'BASE_CONTENTS_CAROUSEL_ITEM' | 'BASE_FOOTER_ITEM' | 'BASE_INFO_BOX_ITEM';
 export declare type TypeOfItemLinkMethod = 'CLICK_ITEM' | 'CLICK_BUTTON_IN_ITEM' | 'NONE';
 export declare type TypeOfItemLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
-declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method';
-declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex';
+export declare type TypeOfItemToneType = 'LIGHT' | 'DARK';
+export declare type TypeOfProgrammedItemActionButtonTextType = 'A' | 'B' | 'C' | 'D' | 'E';
+declare type KeyOfSectionProperties = 'title' | 'description' | 'section_content_media_type' | 'section_content_media_src' | 'button_alpha_label' | 'button_alpha_link_type' | 'button_alpha_link_src' | 'button_bravo_label' | 'button_bravo_link_type' | 'button_bravo_link_src' | 'button_charlie_label' | 'button_charlie_link_type' | 'button_charlie_link_src' | 'button_delta_label' | 'button_delta_link_type' | 'button_delta_link_src' | 'button_echo_label' | 'button_echo_link_type' | 'button_echo_link_src' | 'carousel_autoplay_mode' | 'carousel_autoplay_time' | 'carousel_infinite_loop_mode' | 'item_link_method' | 'multi_purpose_url';
+declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_hex' | 'background_color_in_hex' | 'background_media_type' | 'background_media_src' | 'background_overlay_color_in_hex' | 'button_alpha_design_type' | 'button_alpha_background_color_in_hex' | 'button_alpha_label_color_in_hex' | 'button_bravo_design_type' | 'button_bravo_background_color_in_hex' | 'button_bravo_label_color_in_hex' | 'button_charlie_design_type' | 'button_charlie_background_color_in_hex' | 'button_charlie_label_color_in_hex' | 'button_delta_design_type' | 'button_delta_background_color_in_hex' | 'button_delta_label_color_in_hex' | 'button_echo_design_type' | 'button_echo_background_color_in_hex' | 'button_echo_label_color_in_hex' | 'item_title_color_in_hex' | 'item_description_color_in_hex' | 'item_button_design_type' | 'item_button_background_color_in_hex' | 'item_button_label_color_in_hex' | 'item_highlighting_color_in_hex' | 'item_tone_type' | 'programmed_item_action_button_text_type';
 declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
     id: number;
@@ -29,6 +35,35 @@ export interface ISection {
     dynamicLayoutSectionItems: Array<IItem> | null;
     insertedAt: string;
     updatedAt: string;
+    type: TypeOfSectionType;
+    program?: 'MEMBERSHIP_DISPLAY';
+    componentBlocks?: any[];
+    programData?: {
+        mdid: string;
+        preview: {
+            availableResources: ['REAL.MEMBERSHIP_DISPLAY'];
+            resources: {
+                mock: Record<string, never>;
+                real: {
+                    membershipDisplay: IMembershipDisplay;
+                };
+            };
+        };
+    };
+}
+export interface SubscriptionProductInList {
+    id: number;
+    type: SubscriptionProductType;
+    title: string;
+    alias: string;
+    expiryPeriodInDays: ExpiryPeriodInDaysType;
+    isDeactivated: boolean;
+    fee: {
+        currency: 'KRW' | 'USD';
+        amount: string;
+    };
+    insertedAt: string;
+    updatedAt: string;
 }
 export interface ISectionProperties {
     title: string;
@@ -54,6 +89,7 @@ export interface ISectionProperties {
     carouselAutoplayTime: number;
     carouselInfiniteLoopMode: TypeOfCarouselInfiniteLoopMode;
     itemLinkMethod: TypeOfItemLinkMethod;
+    multiPurposeUrl: string;
 }
 export interface ISectionStyles {
     titleColorInHex: string;
@@ -82,6 +118,9 @@ export interface ISectionStyles {
     itemButtonDesignType: TypeOfItemButtonDesignType;
     itemButtonBackgroundColorInHex: string;
     itemButtonLabelColorInHex: string;
+    itemHighlightingColorInHex: string;
+    itemToneType: TypeOfItemToneType;
+    programmedItemActionButtonTextType: TypeOfProgrammedItemActionButtonTextType;
 }
 export interface IItem {
     id: number;
@@ -96,7 +135,7 @@ export interface IItem {
     insertedAt: string;
     updatedAt: string;
 }
-interface IItemProperties {
+export interface IItemProperties {
     title: string;
     description: string;
     body: string;
@@ -170,8 +209,76 @@ export declare type DynamicLayoutProps = {
     /** @deprecated use 'mode' instead */
     isPreview?: boolean;
     sections: ISection[];
-    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     scrollDownTargetSectionId?: number;
+    editingSectionId?: number;
+    navigationHandler?: (linkType: 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE', src: string) => void;
     onClickEditSection?: (section: ISection) => void;
+    sectionActionHandler?: (action: TypeOfSectionAction) => void;
+    programmedSectionComponents?: IProgrammedSectionComponents;
+};
+export declare type SubscriptionProductType = 'FREE_INFINITE' | 'FREE_FINITE' | 'ONCE_INFINITE' | 'ONCE_FINITE' | 'COUPON_FREE_INFINITE' | 'COUPON_FREE_FINITE' | 'COUPON_ONCE_INFINITE' | 'COUPON_ONCE_FINITE' | 'SUBSCRIPTION_30DAYS' | 'SUBSCRIPTION_90DAYS' | 'SUBSCRIPTION_180DAYS' | 'SUBSCRIPTION_365DAYS';
+declare type ExpiryPeriodInDaysType = 1 | 3 | 7 | 14 | 30;
+export declare type IMembershipCardTemplate = {
+    backgroundImageSrc: string;
+    logoImageSrc: string;
+    overlayType: 'NONE' | 'SOLID' | 'GRADIENT';
+    overlayColorPrimary: string;
+    overlayColorSecondary: string;
+    designSchema: 'A' | 'B' | 'C';
+};
+export declare type IMembershipBenefitInfo = {
+    benefitAlpha?: string;
+    benefitBravo?: string;
+    benefitCharlie?: string;
+    benefitDelta?: string;
+    benefitEcho?: string;
+};
+export declare type IConnectedSubscriptionProducts = {
+    id: number;
+    order: number;
+    connectedMembershipId: number;
+    subscriptionProductId: number;
+    subscriptionProduct: {
+        id: number;
+        type: SubscriptionProductType;
+        title: string;
+        alias: string;
+        expiryPeriodInDays: ExpiryPeriodInDaysType;
+        isDeactivated: boolean;
+        fee: {
+            currency: 'KRW' | 'USD';
+            amount: string | number;
+        };
+        insertedAt: string;
+        updatedAt: string;
+    };
+};
+export declare type IMembership = {
+    id: number;
+    type: 'SYSTEM_GUEST' | 'SYSTEM_MEMBER' | 'SYSTEM_P_APP_UNLOCK' | 'GENERAL';
+    mid: string;
+    title: string;
+    insertedAt: string;
+    updatedAt: string;
+    membershipCardTemplate: IMembershipCardTemplate;
+    membershipBenefitInfo: IMembershipBenefitInfo;
+    totalSubscriptionProducts: number;
+};
+export declare type IConnectedMembership = {
+    id: number;
+    order: number;
+    mdid: string;
+    mid: string;
+    membership: IMembership;
+    connectedSubscriptionProducts: IConnectedSubscriptionProducts[];
+};
+export declare type IProgrammedSectionComponents = {
+    [key in TypeOfSectionManifestSchema]?: JSX.Element;
+};
+export declare type IMembershipDisplay = {
+    id: number;
+    mdid: string;
+    title: string;
+    isDefault: boolean;
+    connectedMemberships: IConnectedMembership[];
 };
-export {};

package/dist/src/sub/DynamicLayout/utils/formatCurrency.d.ts

@@ -0,0 +1,8 @@
+/**
+ * currency에 따라 숫자를 통화 형식으로 변환한다.
+ *
+ * ex) KRW 1024 => 1,024
+ *
+ * ex) USD 1024 => 1,024.00
+ */
+export default function formatCurrency(value: string | number, currency?: string): string;

package/dist/src/sub/DynamicLayout/utils/formatCurrency.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * currency에 따라 숫자를 통화 형식으로 변환한다.
+ *
+ * ex) KRW 1024 => 1,024
+ *
+ * ex) USD 1024 => 1,024.00
+ */
+function formatCurrency(value, currency) {
+    if (currency === void 0) { currency = 'KRW'; }
+    var decimals;
+    switch (currency) {
+        case 'KRW':
+            decimals = 0;
+            break;
+        case 'USD':
+            decimals = 2;
+            break;
+    }
+    var str = Number(value).toFixed(decimals);
+    if (decimals) {
+        return str.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
+    }
+    return str.replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+}
+exports.default = formatCurrency;

package/dist/src/sub/index.d.ts

@@ -1 +1,2 @@
 export { DynamicLayout } from './DynamicLayout';
+export * from './AdminList';

package/dist/src/sub/index.js

@@ -1,6 +1,16 @@
 "use strict";
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicLayout = void 0;
-// NOTE: 이름은 변경될 수 있습니다.
 var DynamicLayout_1 = require("./DynamicLayout");
 Object.defineProperty(exports, "DynamicLayout", { enumerable: true, get: function () { return DynamicLayout_1.DynamicLayout; } });
+__exportStar(require("./AdminList"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.1",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
+    "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",
@@ -33,9 +34,8 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsc",
-    "prepare": "npm run build",
-    "sync:i18n": "dotenv -e env/.env node syncI18n.ts",
+    "build": "rm -rf ./dist && tsc && tsc-alias",
+    "prepare": "npm run build | husky install",
     "sync:color": "dotenv -e env/.env node syncColor.ts",
     "storybook": "start-storybook -p 6006",
     "build:storybook": "build-storybook",
@@ -85,6 +85,7 @@
     "@storybook/react": "^6.3.12",
     "@types/lodash": "^4.14.175",
     "@types/node": "^16.10.2",
+    "@types/react-grid-layout": "^1.3.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",
@@ -95,9 +96,12 @@
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.24.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -107,6 +111,8 @@
     "stylelint-order": "^4.1.0",
     "stylelint-prettier": "^1.2.0",
     "ts-loader": "^8.3.0",
+    "tsc-alias": "^1.8.3",
+    "tsconfig-paths": "^4.1.2",
     "typescript": "^4.4.4",
     "webpack": "^4.46.0",
     "webpack-cli": "^4.9.0"

package/release-note.md

@@ -1,4 +1,6 @@
-# PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.2.0-beta.0]
-
-### 배포 테스트
+# pds-dev-kit-web-test Release Notes
+## [v0.2.1]
+## 기준 pds-dev-kit-web 버전 @2.0.14
+### sub
+* DynamicLayout - custom section
+    * Accordion 컴포넌트 블럭 추가

package/webhook/node_modules/esrecurse/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["es2015"]
+}

package/.vscode/settings.json

@@ -1,50 +0,0 @@
-{
-  "editor.minimap.enabled": false,
-  "javascript.validate.enable": false,
-  "javascript.format.enable": false,
-  "typescript.format.enable": false,
-  "editor.formatOnSave": false,
-  "stylelint.syntax": "css-in-js",
-  "[javascript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.stylelint": true
-    }
-  },
-  "[typescript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.stylelint": true,
-      "source.fixAll.eslint": true
-    }
-  },
-  "[typescriptreact]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.stylelint": true,
-      "source.fixAll.eslint": true
-    }
-  },
-  "[css]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.stylelint": true
-    }
-  },
-  "[json]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[jsonc]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "files.associations": {
-    "*.stylelintrc": "jsonc"
-  },
-  "cSpell.words": ["lotties", "singleline"]
-}

package/bitbucket-pipelines.yml

@@ -1,114 +0,0 @@
-#  Template React Deploy
-
-#  This template allows you to deploy your React app to an AWS S3 bucket and invalidate the old AWS Cloudfront distribution.
-#  The workflow allows running tests, code linting and security scans on feature branches (as well as master).
-#  The react app will be validated, deployed to S3 and trigger an AWS Cloudfront distribution invalidation to refresh the CDN caches after the code is merged to master.
-
-# Prerequisites: $AWS_ACCESS_KEY_ID, $AWS_SECRET_ACCESS_KEY setup in the Deployment variables.
-# For advanced cases, please, follow examples from the pipe's:
-# README https://bitbucket.org/atlassian/aws-s3-deploy/src/master/README.md
-# README https://bitbucket.org/atlassian/aws-cloudfront-invalidate/src/master/README.md
-
-image: node:10.15.3
-
-# Workflow Configuration
-
-options:
-  size: 2x
-
-definitions:
-  services:
-    docker:
-      memory: 7128
-
-pipelines:
-  pull-requests:
-    '**':
-      - step:
-          script:
-          - npm install
-          - npm run build:storybook
-          - if [ "${BITBUCKET_PR_DESTINATION_BRANCH}" != "staging" ]; then printf 'not a target branch we want to check'; exit; fi
-          - printf 'running storybook'
-          - npm run chromatic
-  tags:
-    version-*:
-      - step:
-          name: Deploy to Production
-          deployment: Production
-          caches:
-            - node
-          script:
-            - npm install
-            - npm run build:storybook
-            # sync your files to S3
-            - pipe: atlassian/aws-s3-deploy:0.4.4
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                S3_BUCKET: 'proto2.publishingkit.net'
-                LOCAL_PATH: 'storybook-static'
-                EXTRA_ARGS: '--delete'
-            # triggering a distribution invalidation to refresh the CDN caches
-            - pipe: atlassian/aws-cloudfront-invalidate:0.1.1
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                DISTRIBUTION_ID: $DISTRIBUTION_ID
-
-  branches:
-    staging:
-      - step:
-          name: Deploy to Staging
-          deployment: Staging
-          caches:
-            - node
-          script:
-            - npm install
-            - npm run build:storybook
-            # sync your files to S3
-            - pipe: atlassian/aws-s3-deploy:0.4.4
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                S3_BUCKET: $S3_BUCKET_STAGING
-                LOCAL_PATH: 'storybook-static'
-                EXTRA_ARGS: '--delete'
-            # triggering a distribution invalidation to refresh the CDN caches
-            - pipe: atlassian/aws-cloudfront-invalidate:0.1.1
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                DISTRIBUTION_ID: $DISTRIBUTION_ID_STAGING
-    master:
-      - step:
-          name: Deploy to Production
-          deployment: Production
-          caches:
-            - node
-          script:
-            - npm install
-            - npm run build:storybook
-            # sync your files to S3
-            - pipe: atlassian/aws-s3-deploy:0.4.4
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                S3_BUCKET: $S3_BUCKET_PROD
-                LOCAL_PATH: 'storybook-static'
-                EXTRA_ARGS: '--delete'
-            # triggering a distribution invalidation to refresh the CDN caches
-            - pipe: atlassian/aws-cloudfront-invalidate:0.1.1
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                DISTRIBUTION_ID: $DISTRIBUTION_ID_PROD
-definitions:
-  caches:
-    node: src/node_modules

package/dist/src/common/hooks/useAnimation.d.ts

@@ -1,2 +0,0 @@
-declare function useAnimation(isRender: boolean): [boolean, () => void, boolean];
-export default useAnimation;

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

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-function useAnimation(isRender) {
-    var _a = (0, react_1.useState)(false), isComplete = _a[0], setIsComplete = _a[1];
-    (0, react_1.useEffect)(function () {
-        if (isRender) {
-            setIsComplete(true);
-        }
-    }, [isRender]);
-    var shouldRender = isRender || isComplete;
-    var isAnimationStart = isRender && isComplete;
-    var handleAnimationEnd = function () {
-        if (!isRender)
-            setIsComplete(false);
-    };
-    return [shouldRender, handleAnimationEnd, isAnimationStart];
-}
-exports.default = useAnimation;