@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

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

@@ -0,0 +1,112 @@
+"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, { left: {
+                            colorType: 'gray',
+                            children: '왼쪽',
+                            onClick: () => {
+                                console.log('leftOnClick');
+                            },
+                        }, right: {
+                            colorType: 'pink',
+                            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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 /**
  * ImageCenterBodyComp : 이미지 한개만 갖고 있고, 상하좌우 중앙정렬을 자동 세팅해줍니다.
  *

package/dist/library/BasicLayout/Body.js

@@ -0,0 +1,64 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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

@@ -1,9 +1,9 @@
-import { default as React } from 'react';
+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';
+import { ButtonProps } from '@/components/ui/button';
 export type SingleButtonCompProps = FloatSingleButtonProps & {
     marginBottomHasFooterBackgroundColor?: string;
 };
@@ -13,10 +13,10 @@ export declare const SingleATagComp: React.FC<FloatSingleButtonProps & {
     target?: string;
 }>;
 export declare const DoubleButtonComp: React.FC<FloatDoubleButtonProps>;
-export declare const SingleButtonWithTooltipComp: React.FC<SingleButtonProps & {
+export declare const SingleButtonWithTooltipComp: React.FC<ButtonProps & {
     tooltip: ImpactTooltipProps;
 }>;
-export declare const SingleButtonWithInformationIconComp: React.FC<SingleButtonProps & {
+export declare const SingleButtonWithInformationIconComp: React.FC<ButtonProps & {
     infoText: string;
 }>;
 export declare const StickBottomWrapperComp: ReactFCWithChildren;

package/dist/library/BasicLayout/Footer.js

@@ -0,0 +1,110 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickBottomWrapperComp = exports.SingleButtonWithInformationIconComp = exports.SingleButtonWithTooltipComp = exports.DoubleButtonComp = exports.SingleATagComp = exports.SingleButtonComp = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("../..");
+const Spacing_1 = require("../../library/Spacing");
+const Styled = __importStar(require("./index.styled"));
+const FloatDoubleButton_1 = require("../../components/Button/FloatDoubleButton");
+const hooks_1 = require("../../hooks");
+const components_1 = require("../../components");
+const core_1 = require("../../core");
+const button_1 = require("@/components/ui/button");
+const SingleButtonComp = (_a) => {
+    var { marginBottomHasFooterBackgroundColor } = _a, props = __rest(_a, ["marginBottomHasFooterBackgroundColor"]);
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    return (react_1.default.createElement(react_1.default.Fragment, null, isMobile ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(__1.FloatSingleButton, Object.assign({}, props)),
+        react_1.default.createElement(Styled.MarginBottomHasFooter, { backgroundColor: marginBottomHasFooterBackgroundColor }))) : (react_1.default.createElement(Styled.ButtonWrapperInPc, null,
+        props.underlineText && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(__1.UnderLineMiniButton, { size: "m", colorType: "gray", disabled: props.underlineDisabled, onClick: props.underlineOnClick }, props.underlineText),
+            react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 25 }))),
+        react_1.default.createElement(button_1.Button, Object.assign({}, props), props.children)))));
+};
+exports.SingleButtonComp = SingleButtonComp;
+const SingleATagComp = (_a) => {
+    var { target = '_blank' } = _a, props = __rest(_a, ["target"]);
+    return (react_1.default.createElement(exports.StickBottomWrapperComp, null,
+        react_1.default.createElement(Styled.ATagButton, { href: props.openUrl, target: target, rel: "noreferrer", onClick: props.onClick },
+            react_1.default.createElement(button_1.Button, { disabled: props.disabled, colorType: props.colorType, purpose: props.purpose }, props.children))));
+};
+exports.SingleATagComp = SingleATagComp;
+const DoubleButtonComp = (props) => {
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    return (react_1.default.createElement(react_1.default.Fragment, null, isMobile ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(FloatDoubleButton_1.FloatDoubleButton, Object.assign({}, props)),
+        react_1.default.createElement(Styled.MarginBottomHasFooter, null))) : (react_1.default.createElement(Styled.ButtonWrapperInPc, null,
+        props.underlineText && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(__1.UnderLineMiniButton, { size: "m", colorType: "gray", disabled: props.underlineDisabled, onClick: props.underlineOnClick }, props.underlineText),
+            react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 25 }))),
+        react_1.default.createElement(__1.DoubleButton, Object.assign({}, props))))));
+};
+exports.DoubleButtonComp = DoubleButtonComp;
+const SingleButtonWithTooltipComp = (props) => {
+    return (react_1.default.createElement(exports.StickBottomWrapperComp, null, props.tooltip ? (react_1.default.createElement(components_1.ImpactTooltip, Object.assign({}, props.tooltip, { isChildrenFullWidth: true }),
+        react_1.default.createElement(button_1.Button, Object.assign({}, props)))) : (react_1.default.createElement(button_1.Button, Object.assign({}, props)))));
+};
+exports.SingleButtonWithTooltipComp = SingleButtonWithTooltipComp;
+const SingleButtonWithInformationIconComp = (props) => {
+    return (react_1.default.createElement(exports.StickBottomWrapperComp, null,
+        react_1.default.createElement(Styled.InformationIconWrapper, null,
+            react_1.default.createElement(__1.InformationIcon, null),
+            react_1.default.createElement(core_1.BaseTypography, { md: "Title3", color: core_1.basicColors.gray400 }, props.infoText)),
+        react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 30 }),
+        react_1.default.createElement(button_1.Button, Object.assign({}, props))));
+};
+exports.SingleButtonWithInformationIconComp = SingleButtonWithInformationIconComp;
+const StickBottomWrapperComp = ({ children }) => {
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isMobile && react_1.default.createElement(Styled.MarginBottomHasFooter, null),
+        react_1.default.createElement(Styled.StickBottomWrapper, null, children)));
+};
+exports.StickBottomWrapperComp = StickBottomWrapperComp;

package/dist/library/BasicLayout/NoFooter.stories.d.ts

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

package/dist/library/BasicLayout/NoFooter.stories.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoFooterPage = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = __importDefault(require("."));
+const __1 = require("../..");
+const Spacing_1 = require("../Spacing");
+const meta = {
+    title: 'Library/BasicLayout',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.NoFooterPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: true, hasFooter: false },
+            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(__1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') }),
+                    react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 20 }),
+                    react_1.default.createElement(__1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') }),
+                    react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 20 })))))),
+};

package/dist/library/BasicLayout/NoHeader.stories.d.ts

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

package/dist/library/BasicLayout/NoHeader.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoHeaderPage = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = __importDefault(require("."));
+const __1 = require("../..");
+const meta = {
+    title: 'Library/BasicLayout',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.NoHeaderPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: false, hasFooter: true },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(__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")))))),
+};

package/dist/library/BasicLayout/OnlyBody.stories.d.ts

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

package/dist/library/BasicLayout/OnlyBody.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnlyBodyLayoutPage = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = __importDefault(require("."));
+const __1 = require("../..");
+const Spacing_1 = require("../Spacing");
+const meta = {
+    title: 'Library/BasicLayout',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.OnlyBodyLayoutPage = {
+    render: () => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_1.default, { hasHeader: false, hasFooter: false },
+            react_1.default.createElement(_1.default.Form, null,
+                react_1.default.createElement(_1.default.SidePaddingBody, null,
+                    react_1.default.createElement(__1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') }),
+                    react_1.default.createElement(Spacing_1.Spacing, { spaceNumber: 30 }),
+                    react_1.default.createElement(__1.BaseInput, { placeholder: "\uC774\uB984", value: 'name', onChange: () => console.log('onChange') })))))),
+};

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { PropsWithChildren } from '../../types/react';
 export type BasicLayoutProps = PropsWithChildren<{
     hasHeader: boolean;
@@ -11,22 +11,22 @@ declare const BasicLayout: React.FC<BasicLayoutProps> & {
     VerticalHorizontalCenterLayout: React.FC<{
         readonly children: React.ReactNode;
     }>;
-    Header: React.FC<import('../..').TitleProps>;
-    Body: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Header: React.FC<import("../..").TitleProps>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    SidePaddingBody: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    SidePaddingBody: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        theme?: import('@emotion/react').Theme;
+        theme?: import("@emotion/react").Theme;
     }, {}, {}>;
-    CenterBody: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    CenterBody: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-        theme?: import('@emotion/react').Theme;
+        theme?: import("@emotion/react").Theme;
     }, {}, {}>;
     ImageCenterBody: React.FC<{
         imagePath: string;
@@ -34,43 +34,46 @@ declare const BasicLayout: React.FC<BasicLayoutProps> & {
         imageWidth: number;
         imageHeight: number;
     }>;
-    Footer: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Footer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    SingleButton: React.FC<import('./Footer').SingleButtonCompProps>;
-    SingleATag: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean;
-    } & {
-        readonly children: React.ReactNode;
-    } & import('../..').SingleButtonColorStyleParams & import('../..').FloatBaseButtonProps & {
+    SingleButton: React.FC<import("./Footer").SingleButtonCompProps>;
+    SingleATag: React.FC<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
+        colorType?: "pink" | "red" | "orange" | "yellow" | "lime" | "green" | "mint" | "skyblue" | "blue" | "indigo" | "purple" | "gray" | null | undefined;
+        purpose?: "main" | "sub" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+        asChild?: boolean;
+    } & import("../..").FloatBaseButtonProps & {
         openUrl: string;
         target?: string;
     }>;
-    DoubleButton: React.FC<import('../..').FloatDoubleButtonProps>;
-    ContentsPadding: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    DoubleButton: React.FC<import("../..").FloatDoubleButtonProps>;
+    ContentsPadding: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    ContentsVerticalPadding: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    ContentsVerticalPadding: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    StickBottomWrapper: import('../..').ReactFCWithChildren;
-    SingleButtonWithTooltip: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean;
+    StickBottomWrapper: import("../..").ReactFCWithChildren;
+    SingleButtonWithTooltip: React.FC<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
+        colorType?: "pink" | "red" | "orange" | "yellow" | "lime" | "green" | "mint" | "skyblue" | "blue" | "indigo" | "purple" | "gray" | null | undefined;
+        purpose?: "main" | "sub" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+        asChild?: boolean;
     } & {
-        readonly children: React.ReactNode;
-    } & import('../..').SingleButtonColorStyleParams & {
-        tooltip: import('../..').ImpactTooltipProps;
+        tooltip: import("../..").ImpactTooltipProps;
     }>;
-    SingleButtonWithInformationIcon: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-        isLoading?: boolean;
+    SingleButtonWithInformationIcon: React.FC<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
+        colorType?: "pink" | "red" | "orange" | "yellow" | "lime" | "green" | "mint" | "skyblue" | "blue" | "indigo" | "purple" | "gray" | null | undefined;
+        purpose?: "main" | "sub" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+        asChild?: boolean;
     } & {
-        readonly children: React.ReactNode;
-    } & import('../..').SingleButtonColorStyleParams & {
         infoText: string;
     }>;
-    Form: React.FC<import('../BasicForm').BasicFormProps>;
+    Form: React.FC<import("../BasicForm").BasicFormProps>;
 };
 export default BasicLayout;

package/dist/library/BasicLayout/index.js

@@ -0,0 +1,88 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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 __1 = require("../..");
+const BasicForm_1 = __importDefault(require("../BasicForm"));
+const Styled = __importStar(require("./index.styled"));
+const Body_1 = require("./Body");
+const Footer_1 = require("./Footer");
+const index_type_1 = require("../GlobalLayoutHeaderProvider/index.type");
+const hooks_1 = require("../../hooks");
+/**  getElementByName 으로 하고 싶었으나, Title 등이 bottomSheet 에 있으면, children 있다고 하기도 애매하네, props 로 명시해야할 듯 */
+const BasicLayoutComp = react_1.default.memo(({ hasHeader, hasFooter, children, bottomExtraComp, bodyCenterizing = false }) => {
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    const { hasGlobalLayoutHeaderInMobile, hasGlobalLayoutHeader } = (0, react_1.useContext)(index_type_1.GlobalLayoutHeaderContext);
+    return (react_1.default.createElement(Styled.BasicLayoutBase.ParentWrapper, { hasGlobalLayoutHeader: hasGlobalLayoutHeader, bodyCenterizing: bodyCenterizing },
+        react_1.default.createElement(Styled.BasicLayoutBase.ChildrenWrapper, { bodyCenterizing: bodyCenterizing },
+            !hasGlobalLayoutHeaderInMobile && !hasHeader && react_1.default.createElement(Styled.MarginTopNoHeader, null),
+            children,
+            isMobile && Boolean(bottomExtraComp) && bottomExtraComp,
+            !hasFooter && react_1.default.createElement(Styled.MarginBottomNoFooter, null)),
+        !isMobile && Boolean(bottomExtraComp) && bottomExtraComp));
+});
+const VerticalHorizontalCenterLayoutComp = ({ children }) => {
+    return (react_1.default.createElement(Styled.PureLayoutBase.ParentWrapper, null,
+        react_1.default.createElement(Styled.PureLayoutBase.VerticalHorizontalCenterBody, null, children)));
+};
+// fyi. 원하는 컴포넌트 선택해서 끼워넣을 수 있도록
+const BasicLayout = Object.assign(BasicLayoutComp, {
+    /* Layout */
+    // BasicLayout (itself): BasicLayoutComp
+    VerticalHorizontalCenterLayout: VerticalHorizontalCenterLayoutComp,
+    /* Header */
+    Header: __1.Title,
+    /* Body */
+    Body: Styled.BasicLayoutBase.Body,
+    SidePaddingBody: Styled.SidePaddingBody,
+    CenterBody: Styled.CenterBody,
+    ImageCenterBody: Body_1.ImageCenterBodyComp,
+    /* Footer */
+    Footer: Styled.BasicLayoutBase.Footer,
+    SingleButton: Footer_1.SingleButtonComp,
+    SingleATag: Footer_1.SingleATagComp,
+    DoubleButton: Footer_1.DoubleButtonComp,
+    ContentsPadding: Styled.ContentsPadding,
+    ContentsVerticalPadding: Styled.ContentsVerticalPadding,
+    StickBottomWrapper: Footer_1.StickBottomWrapperComp,
+    SingleButtonWithTooltip: Footer_1.SingleButtonWithTooltipComp,
+    SingleButtonWithInformationIcon: Footer_1.SingleButtonWithInformationIconComp,
+    /* etc */
+    Form: BasicForm_1.default,
+});
+exports.default = BasicLayout;