@pfct/purple 1.3.4-rc.0

package/dist/core/Typography/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Headline1';
+export * from './Headline2';
+export * from './Headline3';
+export * from './Headline4';
+export * from './Headline5';
+export * from './Headline6';
+export * from './Body1';
+export * from './Body2';
+export * from './Title1';
+export * from './Title2';
+export * from './Title3';
+export * from './Title4';
+export * from './BaseTypography';

package/dist/core/Typography/index.js

@@ -0,0 +1,29 @@
+"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("./Headline1"), exports);
+__exportStar(require("./Headline2"), exports);
+__exportStar(require("./Headline3"), exports);
+__exportStar(require("./Headline4"), exports);
+__exportStar(require("./Headline5"), exports);
+__exportStar(require("./Headline6"), exports);
+__exportStar(require("./Body1"), exports);
+__exportStar(require("./Body2"), exports);
+__exportStar(require("./Title1"), exports);
+__exportStar(require("./Title2"), exports);
+__exportStar(require("./Title3"), exports);
+__exportStar(require("./Title4"), exports);
+__exportStar(require("./BaseTypography"), exports);

package/dist/core/Typography/index.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { PropsWithChildren } from '../../types/react';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Typography-b6759a3047424987887edd456444a721?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 타이포그래피를 사용하여 콘텐츠를 최대한 명확하고 효율적으로 표현합니다.<br/>폰트의 크기, 굵기 및 컬러를 활용하여 시각적인 효과를 통해 안정적이고 읽기 쉬운 콘텐츠를 만들어 최적의 가독성을 제공합니다.
+ */
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+export declare const Typography: StoryObj<PropsWithChildren>;

package/dist/core/Typography/index.stories.js

@@ -0,0 +1,123 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const react_1 = __importDefault(require("react"));
+const Headline1_1 = require("./Headline1");
+const Headline2_1 = require("./Headline2");
+const Headline3_1 = require("./Headline3");
+const Headline4_1 = require("./Headline4");
+const Headline5_1 = require("./Headline5");
+const Headline6_1 = require("./Headline6");
+const Title1_1 = require("./Title1");
+const Title2_1 = require("./Title2");
+const Title3_1 = require("./Title3");
+const Title4_1 = require("./Title4");
+const Body1_1 = require("./Body1");
+const Body2_1 = require("./Body2");
+const CONTENT = '보통 사람을 위한\n보통이 아닌 금융\nExtraordinary\nFinance for the\nOrdinary';
+const Component = ({ children }) => {
+    const data = [
+        {
+            tag: 'H1',
+            content: CONTENT,
+            Typo: Headline1_1.Headline1,
+        },
+        {
+            tag: 'H2',
+            content: CONTENT,
+            Typo: Headline2_1.Headline2,
+        },
+        {
+            tag: 'H3',
+            content: CONTENT,
+            Typo: Headline3_1.Headline3,
+        },
+        {
+            tag: 'H4',
+            content: CONTENT,
+            Typo: Headline4_1.Headline4,
+        },
+        {
+            tag: 'H5',
+            content: CONTENT,
+            Typo: Headline5_1.Headline5,
+        },
+        {
+            tag: 'H6',
+            content: CONTENT,
+            Typo: Headline6_1.Headline6,
+        },
+        {
+            tag: 'T1',
+            content: CONTENT,
+            Typo: Title1_1.Title1,
+        },
+        {
+            tag: 'T2',
+            content: CONTENT,
+            Typo: Title2_1.Title2,
+        },
+        {
+            tag: 'T3',
+            content: CONTENT,
+            Typo: Title3_1.Title3,
+        },
+        {
+            tag: 'T4',
+            content: CONTENT,
+            Typo: Title4_1.Title4,
+        },
+        {
+            tag: 'B1',
+            content: CONTENT,
+            Typo: Body1_1.Body1,
+        },
+        {
+            tag: 'B2',
+            content: CONTENT,
+            Typo: Body2_1.Body2,
+        },
+    ];
+    return (react_1.default.createElement("table", { style: {
+            borderCollapse: 'collapse',
+        } }, data.map(({ tag, content, Typo }) => {
+        return (react_1.default.createElement("tr", { key: tag, style: {
+                border: '1px solid black',
+            } },
+            react_1.default.createElement("td", { style: {
+                    border: '1px solid black',
+                    textAlign: 'center',
+                    width: 200,
+                } },
+                react_1.default.createElement(Typo, null, tag)),
+            react_1.default.createElement("td", { style: {
+                    border: '1px solid black',
+                    textAlign: 'center',
+                    width: 400,
+                    padding: '15px 0',
+                } },
+                react_1.default.createElement(Typo, null, children || content))));
+    })));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Typography-b6759a3047424987887edd456444a721?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 타이포그래피를 사용하여 콘텐츠를 최대한 명확하고 효율적으로 표현합니다.<br/>폰트의 크기, 굵기 및 컬러를 활용하여 시각적인 효과를 통해 안정적이고 읽기 쉬운 콘텐츠를 만들어 최적의 가독성을 제공합니다.
+ */
+const meta = {
+    title: 'Foundation/Typography',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Typography = {
+    render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
+    args: {
+        children: '',
+    },
+};

package/dist/core/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Colors';
+export * from './Display';
+export * from './Theme';
+export * from './TextStyles';
+export * from './Typography';

package/dist/core/index.js

@@ -0,0 +1,21 @@
+"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("./Colors"), exports);
+__exportStar(require("./Display"), exports);
+__exportStar(require("./Theme"), exports);
+__exportStar(require("./TextStyles"), exports);
+__exportStar(require("./Typography"), exports);

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useOverlayPreventScroll';
+import useLayoutIsMobile from './useLayoutIsMobile';
+import useResize from './useResize';
+import useEventListener from './useEventListener';
+export { useLayoutIsMobile, useResize, useEventListener };

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;