pds-dev-kit-web-test 0.0.20 → 0.0.21

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

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

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

@@ -0,0 +1,19 @@
+"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;

package/dist/src/common/styles/movement/animationStyle.d.ts

@@ -0,0 +1,7 @@
+export declare const buttonOnAni: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const buttonOffAni: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const dialogOnAni: import("styled-components").FlattenSimpleInterpolation;
+export declare const dialogOffAni: import("styled-components").FlattenSimpleInterpolation;
+export declare const modalOnAni: import("styled-components").FlattenSimpleInterpolation;
+export declare const modalOffAni: import("styled-components").FlattenSimpleInterpolation;
+export declare const contentSheetOnAni: import("styled-components").FlattenSimpleInterpolation;

package/dist/src/common/styles/movement/animationStyle.js

@@ -0,0 +1,23 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contentSheetOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOffAni = exports.dialogOnAni = exports.buttonOffAni = exports.buttonOnAni = void 0;
+var styled_components_1 = require("styled-components");
+var keyframes_1 = require("./keyframes");
+exports.buttonOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: backgroundImageFadeIn 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeIn {\n    0% {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    100% {\n      ", "\n    }\n  }\n"], ["\n  animation: backgroundImageFadeIn 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeIn {\n    0% {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    100% {\n      ", "\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n        to top,\n        " + theme.ui_cpnt_button_fill_on_base_hover + ",\n        " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
+});
+exports.buttonOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: backgroundImageFadeOut 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeOut {\n    from {\n      ", "\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    to {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n  }\n"], ["\n  animation: backgroundImageFadeOut 0.1s ease-in both;\n\n  @keyframes backgroundImageFadeOut {\n    from {\n      ", "\n    }\n    10% {\n      background-image: linear-gradient(to top, #ffffff17, #ffffff17);\n    }\n    20% {\n      background-image: linear-gradient(to top, #ffffff14, #ffffff14);\n    }\n    30% {\n      background-image: linear-gradient(to top, #ffffff12, #ffffff12);\n    }\n    40% {\n      background-image: linear-gradient(to top, #ffffff0f, #ffffff0f);\n    }\n    50% {\n      background-image: linear-gradient(to top, #ffffff0d, #ffffff0d);\n    }\n    60% {\n      background-image: linear-gradient(to top, #ffffff0a, #ffffff0a);\n    }\n    70% {\n      background-image: linear-gradient(to top, #ffffff08, #ffffff08);\n    }\n    80% {\n      background-image: linear-gradient(to top, #ffffff05, #ffffff05);\n    }\n    90% {\n      background-image: linear-gradient(to top, #ffffff03, #ffffff03);\n    }\n    to {\n      background-image: linear-gradient(to top, #ffffff00, #ffffff00);\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "background-image: linear-gradient(\n        to top,\n        " + theme.ui_cpnt_button_fill_on_base_hover + ",\n        " + theme.ui_cpnt_button_fill_on_base_hover + "\n      );";
+});
+exports.dialogOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
+exports.dialogOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
+exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
+exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
+exports.contentSheetOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.glow);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/common/styles/movement/keyframes.d.ts

@@ -0,0 +1,14 @@
+export declare const fadeIn: import("styled-components").Keyframes;
+export declare const fadeOut: import("styled-components").Keyframes;
+export declare const glow: import("styled-components").Keyframes;
+export declare const scaleUp: import("styled-components").Keyframes;
+export declare const scaleDown: import("styled-components").Keyframes;
+export declare const scaleUpIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleDownIncludeTranslate: import("styled-components").Keyframes;
+export declare const gelatine: import("styled-components").Keyframes;
+export declare const scaleBounceIn: import("styled-components").Keyframes;
+export declare const scaleBounceIn02: import("styled-components").Keyframes;
+export declare const scaleBounceInIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleBounceInIncludeTranslate02: import("styled-components").Keyframes;
+export declare const scaleBounceOutIncludeTranslate: import("styled-components").Keyframes;
+export declare const scaleBounceOutIncludeTranslate02: import("styled-components").Keyframes;

package/dist/src/common/styles/movement/keyframes.js

@@ -0,0 +1,23 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceInIncludeTranslate = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = void 0;
+var styled_components_1 = require("styled-components");
+exports.fadeIn = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { opacity: 0.7; }\n  to { opacity: 1; }\n"], ["\n  from { opacity: 0.7; }\n  to { opacity: 1; }\n"])));
+exports.fadeOut = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: 1; }\n  to { opacity: 0.7; }\n"], ["\n  from { opacity: 1; }\n  to { opacity: 0.7; }\n"])));
+exports.glow = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  from { transform: scale(1); }\n  to { transform: scale(1.03); }\n"], ["\n  from { transform: scale(1); }\n  to { transform: scale(1.03); }\n"])));
+exports.scaleUp = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  from { transform: scale(0.95); }\n  to { transform: scale(1); }\n"], ["\n  from { transform: scale(0.95); }\n  to { transform: scale(1); }\n"])));
+exports.scaleDown = (0, styled_components_1.keyframes)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  from { transform: scale(1); }\n  to { transform: scale(0.95); }\n"], ["\n  from { transform: scale(1); }\n  to { transform: scale(0.95); }\n"])));
+exports.scaleUpIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  from { transform: scale(0.97)  translate(-50%, -50%); }\n  to { transform: scale(1)  translate(-50%, -50%); }\n"], ["\n  from { transform: scale(0.97)  translate(-50%, -50%); }\n  to { transform: scale(1)  translate(-50%, -50%); }\n"])));
+exports.scaleDownIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  from { transform: scale(1)  translate(-50%, -50%); }\n  to { transform: scale(0.97)  translate(-50%, -50%); }\n"], ["\n  from { transform: scale(1)  translate(-50%, -50%); }\n  to { transform: scale(0.97)  translate(-50%, -50%); }\n"])));
+exports.gelatine = (0, styled_components_1.keyframes)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.95, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.9);\n  }\n  75% {\n    transform: scale(0.97, 1.05);\n  }\n"], ["\n  from, to {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(0.95, 1.1);\n  }\n  50% {\n    transform: scale(1.05, 0.9);\n  }\n  75% {\n    transform: scale(0.97, 1.05);\n  }\n"])));
+exports.scaleBounceIn = (0, styled_components_1.keyframes)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1);\n  }\n  23% {\n    transform: scale(1.03);\n  }\n  66% {\n    transform: scale(0.99);\n  }\n"], ["\n  from, to {\n    transform: scale(1);\n  }\n  23% {\n    transform: scale(1.03);\n  }\n  66% {\n    transform: scale(0.99);\n  }\n"])));
+exports.scaleBounceIn02 = (0, styled_components_1.keyframes)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  from {\n    transform: scale(0.9);\n  }\n  50% {\n    transform: scale(1.01);\n  }\n  to {\n    transform: scale(1);\n  }\n"], ["\n  from {\n    transform: scale(0.9);\n  }\n  50% {\n    transform: scale(1.01);\n  }\n  to {\n    transform: scale(1);\n  }\n"])));
+exports.scaleBounceInIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n"], ["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n"])));
+exports.scaleBounceInIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  from {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n"], ["\n  from {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n"])));
+exports.scaleBounceOutIncludeTranslate = (0, styled_components_1.keyframes)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n"], ["\n  from, to {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  33% {\n    transform: scale(0.99) translate(-50%, -50%);\n  }\n  66% {\n    transform: scale(1.03) translate(-50%, -50%);\n  }\n"])));
+exports.scaleBounceOutIncludeTranslate02 = (0, styled_components_1.keyframes)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  from {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n"], ["\n  from {\n    transform: scale(1) translate(-50%, -50%);\n  }\n  50% {\n    transform: scale(1.01) translate(-50%, -50%);\n  }\n  to {\n    transform: scale(0.9) translate(-50%, -50%);\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/common/styles/movement/transitionStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const AdminListItemTransition: import("styled-components").FlattenSimpleInterpolation;
+export declare const TextFieldTransition: import("styled-components").FlattenSimpleInterpolation;
+export declare const ContentSheetTransition: import("styled-components").FlattenSimpleInterpolation;

package/dist/src/common/styles/movement/transitionStyle.js

@@ -0,0 +1,12 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentSheetTransition = exports.TextFieldTransition = exports.AdminListItemTransition = void 0;
+var styled_components_1 = require("styled-components");
+exports.AdminListItemTransition = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: background-color 0.15s ease-out;\n"], ["\n  transition: background-color 0.15s ease-out;\n"])));
+exports.TextFieldTransition = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transition: background-color 0.15s ease-out;\n\n  :hover {\n    background-color: #eff0f3;\n  }\n"], ["\n  transition: background-color 0.15s ease-out;\n\n  :hover {\n    background-color: #eff0f3;\n  }\n"])));
+exports.ContentSheetTransition = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transition: transform 0.2s ease-out;\n\n  :hover {\n    transform: scale(1.015);\n  }\n"], ["\n  transition: transform 0.2s ease-out;\n\n  :hover {\n    transform: scale(1.015);\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var Checkbox_1 = require("../Checkbox");
 var TextLabel_1 = require("../TextLabel");
@@ -254,7 +255,7 @@ var S_SelectionColumn = styled_components_1.default.div(templateObject_23 || (te
 });
 var hoverAdminListItem = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  align-items: center;\n  position: relative;\n"], ["\n  align-items: center;\n  position: relative;\n"])));
 var fixedAdminListItem = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  justify-content: space-between;\n"], ["\n  justify-content: space-between;\n"])));
-var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
+var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  padding-left: ", ";\n\n  ", ";\n  ", "\n\n  ", "\n\n  :hover {\n    background-color: ", ";\n\n    ", " {\n      display: ", ";\n      visibility: visible;\n    }\n  }\n\n  &:last-child {\n    margin-bottom: 88px;\n  }\n"])), function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
     return isSelected ? theme.ui_cpnt_datatable_base_selected : theme.ui_cpnt_datatable_base_default;
 }, function (_a) {
@@ -267,7 +268,7 @@ var S_AdminListItem = styled_components_1.default.div(templateObject_26 || (temp
     var quickActionBtnType = _a.quickActionBtnType;
     return quickActionBtnType &&
         { fix: fixedAdminListItem, hover: hoverAdminListItem }[quickActionBtnType];
-}, function (_a) {
+}, transitionStyle_1.AdminListItemTransition, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_datatable_base_hover;
 }, S_QuickActionButtonBox, function (_a) {

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextButton_1 = require("../TextButton");
 var TextLabel_1 = require("../TextLabel");
@@ -88,7 +89,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_4 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-sizing: border-box;\n  box-shadow: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: auto;\n  min-width: 480px;\n  max-width: 560px;\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_alertdialog_base;
 }, function (_a) {
@@ -97,7 +98,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_5 || (templa
 }, function (_a) {
     var theme = _a.theme;
     return theme.boxShadow.elevation5;
-});
+}, animationStyle_1.dialogOnAni);
 var S_Footer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingC;

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

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
@@ -204,7 +205,7 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var textLineType = _a.textLineType;
     return textLineType === 'auto' && auto;
 });
-var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  ", ";\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -214,7 +215,7 @@ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
     if (isFocused)
         return "box-shadow: 0 0 0 2px " + theme.ui_cpnt_textfield_border_focus + " inset;";
     return "box-shadow: 0 0 0 1px " + theme.ui_cpnt_textfield_border_normal + " inset;";
-});
+}, transitionStyle_1.TextFieldTransition);
 var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_disabled;

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

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -77,10 +78,7 @@ var floatingActionButtonStyle = (0, styled_components_1.css)(templateObject_4 ||
 }, function (_a) {
     var state = _a.state;
     return (state === 'normal' ? 'pointer' : 'default');
-}, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
-}, function (_a) {
+}, animationStyle_1.buttonOnAni, function (_a) {
     var theme = _a.theme;
     return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {

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

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 // NOTE : 기획상 아직 사용하지 않는 props
@@ -259,10 +260,7 @@ var primaryDisabled = (0, styled_components_1.css)(templateObject_13 || (templat
 var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: none;\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
-}, function (_a) {
-    var theme = _a.theme;
-    return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
-}, function (_a) {
+}, animationStyle_1.buttonOnAni, function (_a) {
     var theme = _a.theme;
     return "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_pressed + ",\n    " + theme.ui_cpnt_button_fill_on_base_pressed + "\n  );";
 }, function (_a) {

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

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importStar(require("styled-components"));
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
 function TextField(_a) {
@@ -195,7 +196,7 @@ var large = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 =
     var textLineType = _a.textLineType;
     return textLineType === 'auto' && auto;
 });
-var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n"])), function (_a) {
+var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: solid 2px\n    ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_normal;
 }, function (_a) {
@@ -205,7 +206,7 @@ var normal = (0, styled_components_1.css)(templateObject_7 || (templateObject_7
     if (isFocused)
         return theme.ui_cpnt_textfield_border_focus;
     return theme.ui_cpnt_textfield_border_normal;
-});
+}, transitionStyle_1.TextFieldTransition);
 var read_only = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  border: solid 2px ", ";\n"], ["\n  background-color: ", ";\n  border: solid 2px ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_textfield_base_disabled;

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

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../../common/components");
 var styles_1 = require("../../../common/styles");
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
 var types_1 = require("./types");
@@ -232,9 +233,8 @@ var primary = (0, styled_components_1.css)(templateObject_14 || (templateObject_
     var theme = _a.theme;
     return theme.ui_cpnt_button_fill_base_primary;
 }, function (_a) {
-    var theme = _a.theme, isSubmitting = _a.isSubmitting;
-    return !isSubmitting &&
-        "background-image: linear-gradient(\n    to top,\n    " + theme.ui_cpnt_button_fill_on_base_hover + ",\n    " + theme.ui_cpnt_button_fill_on_base_hover + "\n  );";
+    var isSubmitting = _a.isSubmitting;
+    return !isSubmitting && animationStyle_1.buttonOnAni;
 }, function (_a) {
     var theme = _a.theme, isSubmitting = _a.isSubmitting;
     return !isSubmitting &&

package/dist/src/desktop/panels/ContentSheet/ContentSheet.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var styles_1 = require("../../../common/styles");
+var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var backgroundColorTheme = {
     transparent: 'ui_cpnt_sheet_base_03',
     white: 'ui_cpnt_sheet_base_white',
@@ -100,7 +101,7 @@ var overrideStyle = (0, styled_components_1.css)(templateObject_6 || (templateOb
     var theme = _a.theme, overrideBorderColorKey = _a.overrideBorderColorKey;
     return overrideBorderColorKey && theme[overrideBorderColorKey];
 });
-var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
+var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"], ["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border-style: ", ";\n  border-width: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  box-sizing: border-box;\n\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var $width = _a.$width;
     return $width;
 }, function (_a) {
@@ -136,7 +137,7 @@ var S_ContentSheet = styled_components_1.default.div(templateObject_7 || (templa
 }, function (_a) {
     var paddingLeft = _a.paddingLeft;
     return paddingLeft !== 'none' && paddingLeftStyle;
-}, overrideStyle);
+}, overrideStyle, transitionStyle_1.ContentSheetTransition);
 var S_LoadingContentSheet = (0, styled_components_1.default)(S_ContentSheet)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
 exports.default = ContentSheet;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/src/desktop/panels/DesktopBasicModal/DesktopBasicModal.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../components");
 function DesktopBasicModal(_a) {
@@ -70,7 +71,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  left: 50%;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -91,7 +92,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
 }, function (_a) {
     var size = _a.size;
     return size === 'rlarge' && 'min-width: 960px;';
-});
+}, animationStyle_1.modalOnAni);
 var S_Left = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingB;

package/dist/src/desktop/panels/DesktopHeadlessModal/DesktopHeadlessModal.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_dom_1 = __importDefault(require("react-dom"));
 var styled_components_1 = __importStar(require("styled-components"));
+var animationStyle_1 = require("../../../common/styles/movement/animationStyle");
 function DesktopHeadlessModal(_a) {
     var body = _a.body, _b = _a.size, size = _b === void 0 ? 'rlarge' : _b, _c = _a.dimmedClickCloseMode, dimmedClickCloseMode = _c === void 0 ? 'none' : _c, _d = _a.scrollVisibleType, scrollVisibleType = _d === void 0 ? 'hidden' : _d, onClose = _a.onClose;
     var container = (0, react_1.useState)(function () {
@@ -78,7 +79,7 @@ var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templa
     var theme = _a.theme;
     return theme.ui_cpnt_modal_dimmed;
 });
-var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n"])), function (_a) {
+var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 24px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  display: flex;\n  left: 50%;\n  max-height: 80vh;\n  min-width: ", ";\n  pointer-events: auto;\n  position: fixed;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: ", ";\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_base;
 }, function (_a) {
@@ -99,7 +100,7 @@ var S_ModalWrapper = styled_components_1.default.div(templateObject_2 || (templa
         rlarge: '60vw'
     };
     return sizes[size];
-});
+}, animationStyle_1.modalOnAni);
 var scrollVisible = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"], ["\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 3px;\n  }\n\n  ::-webkit-scrollbar {\n    display: block;\n    width: 6px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_modal_border;

package/dist/src/sub/DynamicLayout/desktop/components/common/Carousel.js

@@ -53,7 +53,7 @@ function Carousel(_a) {
             return;
         }
         setTargetMode(mode);
-    }, [slidesPerView, mode]);
+    }, [slidesPerView, mode, children]);
     return (react_1.default.createElement(S_Carousel, null,
         react_1.default.createElement(S_SwiperStyleWrapper, null,
             react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: targetMode === 'loop' || targetMode === 'autoplay', autoplay: targetMode === 'autoplay'

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateA/TemplateA.js

@@ -34,23 +34,40 @@ function TemplateA() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc, buttonAlphaLinkType = _a.buttonAlphaLinkType;
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
+    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var contentsBodyRef = (0, react_1.useRef)(null);
+    var handleResize = function () {
+        var _a;
+        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [contentsBodyRef]);
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
-            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
+            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { height: imageHeight },
                 react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))),
             react_1.default.createElement(S_ContentsBodyWrapper, null,
-                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
-                description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
-                buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                    react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))))));
+                react_1.default.createElement("div", { ref: contentsBodyRef },
+                    title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
+                    description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
+                        react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
+                    buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
+                        react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }))))))));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js

@@ -34,15 +34,29 @@ function TemplateB() {
     var _a = sectionContext.properties, sectionContentMediaType = _a.sectionContentMediaType, sectionContentMediaSrc = _a.sectionContentMediaSrc, title = _a.title, description = _a.description, buttonAlphaLabel = _a.buttonAlphaLabel, buttonAlphaLinkType = _a.buttonAlphaLinkType, buttonAlphaLinkSrc = _a.buttonAlphaLinkSrc;
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
+    var _c = (0, react_1.useState)(360), imageHeight = _c[0], setImageHeight = _c[1];
+    var contentsBodyRef = (0, react_1.useRef)(null);
+    var handleResize = function () {
+        var _a;
+        var contentsBodyHeight = (_a = contentsBodyRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        setImageHeight(contentsBodyHeight !== null && contentsBodyHeight !== void 0 ? contentsBodyHeight : 360);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [contentsBodyRef]);
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBodyWrapper, null,
-                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
-                description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
-                    react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
-                buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
-                    react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
-            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
+                react_1.default.createElement("div", { ref: contentsBodyRef },
+                    title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
+                    description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
+                        react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", fontWeight: "600" }))),
+                    buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
+                        react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex }))))),
+            sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, { height: imageHeight },
                 react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))))));
 }
 var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
@@ -50,7 +64,10 @@ var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (tem
     return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n\n  display: flex;\n"])));
-var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
+var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: ", "px;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -90,7 +90,6 @@
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/parser": "^4.33.0",
     "chromatic": "^6.0.6",
-    "css-loader": "^4.3.0",
     "dotenv-cli": "^4.0.0",
     "eslint": "^7.27.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -102,7 +101,6 @@
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",

package/release-note.md

@@ -1,9 +1,19 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.20]
+## [v0.0.21]
 
-* sub
-  * DynamicLayout 수정
-    * 인포박스섹션의 디바이더 컬러키 변경
-    * 섹션 및 아이템 순서 정렬과 필터 적용
-    * 컨텐츠 캐러셀 섹션의 내용 중앙 정렬
-    * 유튜브 연관 동영상 뜨는 이슈 수정
+### common
+* movement 폴더 생성
+### Component단에 transition 또는 animation 부여
+* AdminListItem
+* DesktopAlertDialog
+* EditApplyTextField
+* FloatingActionButton
+* MainButton
+* TextField
+* UploadMainButton
+* ContentSheet
+* DesktopBasicModal
+### panel단에 transition 또는 animation 부여
+* ContentSheet
+* DesktopBasicModal
+* DesktopHeadlessModal