@pfct/purple 1.3.4-rc.0

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;

package/dist/library/BasicLayout/Footer.js

@@ -0,0 +1,100 @@
+"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 __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 Icon_1 = require("../../Icon");
+const core_1 = require("../../core");
+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(__1.SingleButton, 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(__1.SingleButton, { 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(__1.SingleButton, Object.assign({}, props)))) : (react_1.default.createElement(__1.SingleButton, 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(Icon_1.InformationFillIcon, 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(__1.SingleButton, 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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { PropsWithChildren } from '../../types/react';
+export type BasicLayoutProps = PropsWithChildren<{
+    hasHeader: boolean;
+    hasFooter: boolean;
+    bottomExtraComp?: React.ReactNode;
+    bodyCenterizing?: boolean;
+    marginBottomNoFooterColor?: string;
+}>;
+declare const BasicLayout: React.FC<BasicLayoutProps> & {
+    VerticalHorizontalCenterLayout: React.FC<{}>;
+    Header: React.FC<import("../../components/Title").TitleProps>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    SidePaddingBody: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        children?: React.ReactNode;
+    } & {
+        theme?: import("@emotion/react").Theme | undefined;
+    }, {}, {}>;
+    CenterBody: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+        children?: React.ReactNode;
+    } & {
+        theme?: import("@emotion/react").Theme | undefined;
+    }, {}, {}>;
+    ImageCenterBody: React.FC<{
+        imagePath: string;
+        imageType: "svg" | "pngSet" | "png";
+        imageWidth: number;
+        imageHeight: number;
+    }>;
+    Footer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    SingleButton: React.FC<import("./Footer").SingleButtonCompProps>;
+    SingleATag: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        isLoading?: boolean | undefined;
+    } & {
+        readonly children: React.ReactNode;
+    } & import("../..").SingleButtonColorStyleParams & {
+        typography?: import("@emotion/react").SerializedStyles | undefined;
+        borderRadius?: string | undefined;
+    } & {
+        height?: number | undefined;
+    } & import("../../components/Button/FloatBaseButton").FloatBaseButtonProps & {
+        openUrl: string;
+        target?: string | undefined;
+    }>;
+    DoubleButton: React.FC<import("../../components/Button/FloatDoubleButton").FloatDoubleButtonProps>;
+    ContentsPadding: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ContentsVerticalPadding: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    StickBottomWrapper: import("../..").ReactFCWithChildren<unknown>;
+    SingleButtonWithTooltip: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        isLoading?: boolean | undefined;
+    } & {
+        readonly children: React.ReactNode;
+    } & import("../..").SingleButtonColorStyleParams & {
+        typography?: import("@emotion/react").SerializedStyles | undefined;
+        borderRadius?: string | undefined;
+    } & {
+        height?: number | undefined;
+    } & {
+        tooltip: import("../..").ImpactTooltipProps;
+    }>;
+    SingleButtonWithInformationIcon: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        isLoading?: boolean | undefined;
+    } & {
+        readonly children: React.ReactNode;
+    } & import("../..").SingleButtonColorStyleParams & {
+        typography?: import("@emotion/react").SerializedStyles | undefined;
+        borderRadius?: string | undefined;
+    } & {
+        height?: number | undefined;
+    } & {
+        infoText: string;
+    }>;
+    Form: React.FC<import("../BasicForm").BasicFormProps>;
+};
+export default BasicLayout;

package/dist/library/BasicLayout/index.js

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