@pfct/purple 1.3.4-npm-test.1

package/dist/hooks/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEventListener = exports.useResize = exports.useLayoutIsMobile = void 0;
+__exportStar(require("./useOverlayPreventScroll"), exports);
+const useLayoutIsMobile_1 = __importDefault(require("./useLayoutIsMobile"));
+exports.useLayoutIsMobile = useLayoutIsMobile_1.default;
+const useResize_1 = __importDefault(require("./useResize"));
+exports.useResize = useResize_1.default;
+const useEventListener_1 = __importDefault(require("./useEventListener"));
+exports.useEventListener = useEventListener_1.default;

package/dist/hooks/useEventListener.d.ts

@@ -0,0 +1,5 @@
+interface EventListener {
+    (evt: Event): void;
+}
+declare const useEventListener: (eventName: string, handler: EventListener, target?: HTMLElement, option?: AddEventListenerOptions) => void;
+export default useEventListener;

package/dist/hooks/useEventListener.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useEventListener = (eventName, handler, target, option) => {
+    const savedHandler = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    (0, react_1.useEffect)(() => {
+        const element = target !== null && target !== void 0 ? target : window;
+        const isSupported = Boolean(element && element.addEventListener);
+        const eventListener = (event) => { var _a; return (_a = savedHandler.current) === null || _a === void 0 ? void 0 : _a.call(savedHandler, event); };
+        if (isSupported) {
+            element.addEventListener(eventName, eventListener, option);
+        }
+        return () => {
+            isSupported && element.removeEventListener(eventName, eventListener, option);
+        };
+    }, [eventName, option, target]);
+};
+exports.default = useEventListener;

package/dist/hooks/useLayoutIsMobile.d.ts

@@ -0,0 +1,2 @@
+declare const useLayoutIsMobile: () => boolean;
+export default useLayoutIsMobile;

package/dist/hooks/useLayoutIsMobile.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const useResize_1 = __importDefault(require("./useResize"));
+const useLayoutIsMobile = () => {
+    const [isMobile, setIsMobile] = (0, react_1.useState)(true);
+    (0, useResize_1.default)((0, react_1.useCallback)(() => {
+        setIsMobile(window.outerWidth <= utils_1.MediaQuerySize.Mobile);
+    }, []));
+    return isMobile;
+};
+exports.default = useLayoutIsMobile;

package/dist/hooks/useOverlayPreventScroll.d.ts

@@ -0,0 +1,6 @@
+declare const registerHookForOverlayPreventScroll: ({ throttleKeyword, globalScrollTarget, }: {
+    throttleKeyword: string;
+    globalScrollTarget: HTMLElement;
+}) => void;
+declare const useOverlayPreventScroll: (view: boolean) => void;
+export { registerHookForOverlayPreventScroll, useOverlayPreventScroll };

package/dist/hooks/useOverlayPreventScroll.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverlayPreventScroll = exports.registerHookForOverlayPreventScroll = void 0;
+const react_1 = require("react");
+// init
+let GLOBAL_SCROLL_TARGET = null;
+let THROTTLE_KEWORD = '';
+// WARN : 무조건 _app에서 불러야 사용 가능
+const registerHookForOverlayPreventScroll = ({ throttleKeyword, globalScrollTarget = document === null || document === void 0 ? void 0 : document.body, }) => {
+    GLOBAL_SCROLL_TARGET = globalScrollTarget;
+    THROTTLE_KEWORD = throttleKeyword;
+};
+exports.registerHookForOverlayPreventScroll = registerHookForOverlayPreventScroll;
+const useOverlayPreventScroll = (view) => {
+    (0, react_1.useEffect)(() => {
+        if (!GLOBAL_SCROLL_TARGET || !THROTTLE_KEWORD) {
+            console.warn('GLOBAL_SCROLL_TARGET 혹은 THROTTLE_KEWORD 이 등록되지 않았습니다.');
+            return;
+        }
+        if (view) {
+            GLOBAL_SCROLL_TARGET === null || GLOBAL_SCROLL_TARGET === void 0 ? void 0 : GLOBAL_SCROLL_TARGET.classList.add(THROTTLE_KEWORD);
+        }
+        return () => {
+            GLOBAL_SCROLL_TARGET === null || GLOBAL_SCROLL_TARGET === void 0 ? void 0 : GLOBAL_SCROLL_TARGET.classList.remove(THROTTLE_KEWORD);
+        };
+    }, [view]);
+    return;
+};
+exports.useOverlayPreventScroll = useOverlayPreventScroll;

package/dist/hooks/useResize.d.ts

@@ -0,0 +1,2 @@
+declare const useResize: (resizeFunc: () => void) => void;
+export default useResize;

package/dist/hooks/useResize.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useEventListener_1 = __importDefault(require("./useEventListener"));
+const useResize = (resizeFunc) => {
+    (0, useEventListener_1.default)('resize', resizeFunc);
+    (0, react_1.useEffect)(() => {
+        resizeFunc();
+    }, [resizeFunc]);
+};
+exports.default = useResize;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './core';
+export * from './hooks';
+export * from './Icon';
+export * from './library';
+export * from './utils';
+export * from './types';
+export * from './constants';

package/dist/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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 });
+__exportStar(require("./components"), exports);
+__exportStar(require("./core"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./library"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./constants"), exports);

package/dist/library/BasicForm/index.d.ts

@@ -0,0 +1,8 @@
+import React, { FormEvent } from 'react';
+import { PropsWithChildren } from '../../types/react';
+export type BasicFormProps = PropsWithChildren<{
+    buttonId?: string;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+}>;
+declare const BasicForm: React.FC<BasicFormProps>;
+export default BasicForm;

package/dist/library/BasicForm/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const useResize_1 = __importDefault(require("../../hooks/useResize"));
+const BasicForm = ({ children, onSubmit, buttonId }) => {
+    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(0);
+    const formRef = (0, react_1.useRef)(null);
+    const handleButtonVisible = (0, react_1.useCallback)((visible = true) => {
+        var _a;
+        const button = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#${buttonId}`);
+        if (button && button.parentElement) {
+            button.parentElement.style.transition = 'all 0.4s ease-in-out';
+            if (!visible) {
+                button.parentElement.style.bottom = '-100px';
+                return;
+            }
+            button.parentElement.style.bottom = '0';
+        }
+    }, [buttonId]);
+    const resizeHandler = (0, react_1.useCallback)(() => {
+        if (currentHeight < window.innerHeight) {
+            // 키보드가 내려감
+            handleButtonVisible(true);
+        }
+        else if (currentHeight > window.innerHeight) {
+            // 키보드가 올라옴
+            handleButtonVisible(false);
+        }
+        setCurrentHeight(window.innerHeight);
+    }, [currentHeight, handleButtonVisible]);
+    (0, useResize_1.default)(resizeHandler);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const onFocus = () => {
+            handleButtonVisible(false);
+        };
+        const onBlur = () => {
+            handleButtonVisible(true);
+        };
+        const elementList = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input');
+        if (elementList && elementList.length > 0) {
+            Array.from(elementList).forEach((element) => {
+                element.addEventListener('focus', onFocus);
+                element.addEventListener('blur', onBlur);
+            });
+        }
+        return () => {
+            if (elementList && elementList.length > 0) {
+                Array.from(elementList).forEach((element) => {
+                    element.removeEventListener('focus', onFocus);
+                    element.removeEventListener('blur', onBlur);
+                });
+            }
+        };
+    }, [handleButtonVisible, children]);
+    return (react_1.default.createElement("form", { ref: formRef, onSubmit: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (onSubmit) {
+                onSubmit(e);
+            }
+            return false;
+        } }, children));
+};
+exports.default = BasicForm;

package/dist/library/BasicForm/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/library/BasicForm/index.spec.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = __importDefault(require("."));
+const __1 = require("../../");
+describe('Basic Form Component', () => {
+    test('renders without crashing', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.default, null,
+            react_1.default.createElement(__1.SingleButton, { purpose: "main", colorType: "pink" }, "\uBC84\uD2BC")));
+        expect(react_2.screen.getByText('버튼')).toBeInTheDocument();
+    });
+});

package/dist/library/BasicForm/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicFormProps } from '.';
+type Story = StoryObj<BasicFormProps>;
+declare const meta: Meta<BasicFormProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/library/BasicForm/index.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = __importDefault(require("."));
+const __1 = require("../../");
+const Spacing_1 = require("../../library/Spacing");
+const meta = {
+    title: 'Library/BasicForm',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const Story1 = () => {
+    const handleSubmit = (0, react_1.useCallback)(() => {
+        alert('제출 완료!');
+    }, []);
+    return (react_1.default.createElement(_1.default, { onSubmit: handleSubmit },
+        react_1.default.createElement(__1.BaseInput, { placeholder: "\uC544\uC774\uB514", value: 'id', onChange: () => console.log('onChange') }),
+        react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 20 }),
+        react_1.default.createElement(__1.BaseInput, { type: 'isPasswordVisible' ? 'text' : 'password', placeholder: "\uBE44\uBC00\uBC88\uD638", value: 'password', onChange: () => console.log('onChange') }),
+        react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 20 }),
+        react_1.default.createElement(__1.SingleButton, { colorType: "pink", purpose: "main" }, "\uBC84\uD2BC")));
+};
+exports.Story1 = Story1;
+exports.Story1.storyName = '예제';

package/dist/library/BasicLayout/3All.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicLayoutProps } from '.';
+/**
+ * fyi.
+ * type GlobalLayoutHeaderContext 기반으로 GlobalLayoutHeaderProvider 를 정의해야 BasicLayout 상하 여백이 정상 작동합니다.
+ * storybook 에서는 GlobalLayoutHeaderProvider 생략하고 컴포넌트 쌓는 예시에 초점 맞췄습니다.
+ */
+declare const meta: Meta<BasicLayoutProps>;
+export default meta;
+type Story = StoryObj<BasicLayoutProps>;
+export declare const SingleButtonWithUnderlyingButtonLayoutPage: Story;
+export declare const SingleButtonWithTooltipLayoutPage: Story;
+export declare const SingleButtonOnlyLayoutPage: Story;
+export declare const DoubleButtonLayoutPage: Story;
+export declare const NoSidePaddingLayoutPage: Story;
+export declare const CenterBodyPage: Story;
+export declare const ImageCenterBodyPage: Story;

package/dist/library/BasicLayout/3All.stories.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCenterBodyPage = exports.CenterBodyPage = exports.NoSidePaddingLayoutPage = exports.DoubleButtonLayoutPage = exports.SingleButtonOnlyLayoutPage = exports.SingleButtonWithTooltipLayoutPage = exports.SingleButtonWithUnderlyingButtonLayoutPage = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = __importDefault(require("."));
+const components_1 = require("../../components");
+/**
+ * fyi.
+ * type GlobalLayoutHeaderContext 기반으로 GlobalLayoutHeaderProvider 를 정의해야 BasicLayout 상하 여백이 정상 작동합니다.
+ * storybook 에서는 GlobalLayoutHeaderProvider 생략하고 컴포넌트 쌓는 예시에 초점 맞췄습니다.
+ */
+const meta = {
+    title: 'Library/BasicLayout',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.SingleButtonWithUnderlyingButtonLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(components_1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })),
+                react_1.default.createElement(_1.default.Footer, null,
+                    react_1.default.createElement(_1.default.SingleButton, { purpose: "main", colorType: "pink", onClick: () => {
+                            console.log('onClick');
+                        }, disabled: true, underlineText: "\uBBF8\uB2C8\uBC84\uD2BC", underlineOnClick: () => {
+                            console.log('underlineOnClick');
+                        } }, "\uB2E4\uC74C")))))),
+};
+exports.SingleButtonWithTooltipLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(components_1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })),
+                react_1.default.createElement(_1.default.Footer, null,
+                    react_1.default.createElement(_1.default.SingleButtonWithTooltip, { purpose: "main", colorType: "pink", onClick: () => {
+                            console.log('onClick');
+                        }, disabled: true, tooltip: { placement: 'bottom-center', content: '툴팁 문구를 입력해주세요', colorType: 'gray' } }, "\uB2E4\uC74C")))))),
+};
+exports.SingleButtonOnlyLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(components_1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })),
+                react_1.default.createElement(_1.default.Footer, null,
+                    react_1.default.createElement(_1.default.SingleButton, { purpose: "main", colorType: "pink", onClick: () => {
+                            console.log('onClick');
+                        }, disabled: true }, "\uB2E4\uC74C")))))),
+};
+exports.DoubleButtonLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(components_1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })),
+                react_1.default.createElement(_1.default.Footer, null,
+                    react_1.default.createElement(_1.default.DoubleButton, { colorType: "pink", purpose: "main", left: {
+                            children: '왼쪽',
+                            onClick: () => {
+                                console.log('leftOnClick');
+                            },
+                        }, right: {
+                            children: '오른쪽',
+                            onClick: () => {
+                                console.log('rightOnClick');
+                            },
+                        } })))))),
+};
+exports.NoSidePaddingLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+                react_1.default.createElement(_1.default.Body, null,
+                    react_1.default.createElement(components_1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })),
+                react_1.default.createElement(_1.default.Footer, null,
+                    react_1.default.createElement(_1.default.SingleButton, { purpose: "main", colorType: "pink", onClick: () => {
+                            console.log('onClick');
+                        }, disabled: true }, "\uB2E4\uC74C")))))),
+};
+exports.CenterBodyPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true, bodyCenterizing: true },
+            react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+            react_1.default.createElement(_1.default.CenterBody, null, "\uC548\uB155\uD558\uC138\uC694!"),
+            react_1.default.createElement(_1.default.Footer, null,
+                react_1.default.createElement(_1.default.SingleButton, { purpose: "main", colorType: "pink", onClick: () => {
+                        console.log('onClick');
+                    }, disabled: true }, "\uB2E4\uC74C"))))),
+};
+exports.ImageCenterBodyPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: true, bodyCenterizing: true },
+            react_1.default.createElement(_1.default.Header, { title: "Title", subTitle: "SubTitle" }),
+            react_1.default.createElement(_1.default.ImageCenterBody, { imageType: "pngSet", imageWidth: 300, imageHeight: 300, imagePath: `test` }),
+            react_1.default.createElement(_1.default.Footer, null,
+                react_1.default.createElement(_1.default.SingleButton, { purpose: "main", colorType: "pink", onClick: () => {
+                        console.log('onClick');
+                    }, disabled: true }, "\uB2E4\uC74C"))))),
+};

package/dist/library/BasicLayout/Body.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * ImageCenterBodyComp : 이미지 한개만 갖고 있고, 상하좌우 중앙정렬을 자동 세팅해줍니다.
+ *
+ * @param imagePath
+ * - process.env.NEXT_PUBLIC_ASSETS_URL 도 넘겨줍니다.
+ * - A@2x.png -> A 만 넣기 / B.svg -> B 만 넣기
+ * @returns
+ */
+export declare const ImageCenterBodyComp: React.FC<{
+    imagePath: string;
+    imageType: 'pngSet' | 'png' | 'svg';
+    imageWidth: number;
+    imageHeight: number;
+}>;

package/dist/library/BasicLayout/Body.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageCenterBodyComp = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const IconWithImage_1 = require("../IconWithImage");
+/**
+ * ImageCenterBodyComp : 이미지 한개만 갖고 있고, 상하좌우 중앙정렬을 자동 세팅해줍니다.
+ *
+ * @param imagePath
+ * - process.env.NEXT_PUBLIC_ASSETS_URL 도 넘겨줍니다.
+ * - A@2x.png -> A 만 넣기 / B.svg -> B 만 넣기
+ * @returns
+ */
+const ImageCenterBodyComp = ({ imagePath, imageType, imageWidth, imageHeight }) => {
+    let ImgComp = react_1.default.createElement(react_1.default.Fragment, null);
+    if (imageType === 'pngSet') {
+        ImgComp = react_1.default.createElement(IconWithImage_1.IconWithImage, { srcPath: imagePath, width: imageWidth });
+    }
+    else if (imageType === 'png') {
+        ImgComp = react_1.default.createElement(Styled.ImgBase, { src: `${imagePath}.png`, width: imageWidth, height: imageHeight });
+    }
+    else if (imageType === 'svg') {
+        ImgComp = react_1.default.createElement(Styled.ImgBase, { src: `${imagePath}.svg`, width: imageWidth, height: imageHeight });
+    }
+    return react_1.default.createElement(Styled.CenterBody, null, ImgComp);
+};
+exports.ImageCenterBodyComp = ImageCenterBodyComp;

package/dist/library/BasicLayout/Footer.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FloatSingleButtonProps } from '../../components/Button/FloatSingleButton';
+import { FloatDoubleButtonProps } from '../../components/Button/FloatDoubleButton';
+import { SingleButtonProps } from '../../components/Button/SingleButton';
+import { ReactFCWithChildren } from '../../types/react';
+import { ImpactTooltipProps } from '../../components';
+export type SingleButtonCompProps = FloatSingleButtonProps & {
+    marginBottomHasFooterBackgroundColor?: string;
+};
+export declare const SingleButtonComp: React.FC<SingleButtonCompProps>;
+export declare const SingleATagComp: React.FC<FloatSingleButtonProps & {
+    openUrl: string;
+    target?: string;
+}>;
+export declare const DoubleButtonComp: React.FC<FloatDoubleButtonProps>;
+export declare const SingleButtonWithTooltipComp: React.FC<SingleButtonProps & {
+    tooltip: ImpactTooltipProps;
+}>;
+export declare const SingleButtonWithInformationIconComp: React.FC<SingleButtonProps & {
+    infoText: string;
+}>;
+export declare const StickBottomWrapperComp: ReactFCWithChildren;