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

package/dist/components/BottomSheet/TitleBottomSheet/index.stories.js

@@ -0,0 +1,86 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = require(".");
+const button_1 = require("@/components/ui/button");
+const TitleComponent = (props) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toggleOpen = () => {
+        setOpen((prev) => !prev);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { style: { width: '200px' } },
+            react_1.default.createElement(button_1.Button, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBAA8\uB2EC \uC624\uD508")),
+        react_1.default.createElement(_1.TitleBottomSheet, Object.assign({}, props, { visible: open }),
+            react_1.default.createElement(_1.TitleBottomSheet.Body, null,
+                react_1.default.createElement(_1.TitleBottomSheet.Title, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subTitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" })),
+            react_1.default.createElement(_1.TitleBottomSheet.SingleButton, { colorType: "gray", purpose: "main", onClick: toggleOpen }, "\uBC84\uD2BC"))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Bottom-Sheet-295e90bcc23247bb9a14b354a142df6d?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면 하단에서 상단으로 들어오는 컨테이너 영역입니다. <br/>
+ * 현재 페이지를 벗어나지 않고 관련된 정보 제공하거나 동작을 제어합니다.
+ *
+ */
+const meta = {
+    title: 'Component/BottomSheet/TitleBottomSheet',
+    component: TitleComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(TitleComponent, Object.assign({}, props)),
+    args: {
+        minHeight: 'full',
+    },
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트가 필요할 때 기본적으로 사용되며 사용자가 어떤 행동을 해야하는지 혹은 정보를 명확하게 인지시킬 때 사용합니다.  
+<br/>
+- 하단 버튼이 없는 경우는 전체 범위를, 하단 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다. `,
+            },
+        },
+    },
+};
+exports.Story1.storyName = '바탐시트 - 타이틀';

package/dist/components/BottomSheet/TitleBottomSheet/index.styled.d.ts

@@ -1,9 +1,9 @@
 export declare const className: {
     subTitle: string;
 };
-export declare const SubTitle: import('@emotion/styled').StyledComponent<{
-    lg?: import('../../../core/Typography').Typo;
-    sm?: import('../../../core/Typography').Typo;
+export declare const SubTitle: import("@emotion/styled").StyledComponent<{
+    lg?: import("../../../core/Typography").Typo;
+    sm?: import("../../../core/Typography").Typo;
     color?: string;
     textAlign?: string;
     fontWeight?: string;
@@ -11,18 +11,18 @@ export declare const SubTitle: import('@emotion/styled').StyledComponent<{
     element?: string;
     'data-element-name'?: string;
 } & {
-    children?: import('react').ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 } & {
-    theme?: import('@emotion/react').Theme;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export type TitleWrapperProps = {
     contentPadding: boolean;
 };
-export declare const TitleWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & TitleWrapperProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonMargin: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & TitleWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonMargin: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/BottomSheet/TitleBottomSheet/index.styled.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonMargin = exports.TitleWrapper = exports.SubTitle = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+const Typography_1 = require("../../../core/Typography");
+const index_styled_1 = require("../BaseBottomSheet/index.styled");
+exports.className = {
+    subTitle: 'title-bottom-sheet-sub-title',
+};
+exports.SubTitle = (0, styled_1.default)(Typography_1.Title3) `
+	color: ${Colors_1.basicColors.gray400};
+`;
+exports.TitleWrapper = styled_1.default.div `
+	padding: 25px ${({ contentPadding }) => `${contentPadding ? 0 : `${index_styled_1.ContentWrapperPadding}px`}`};
+
+	.${exports.className.subTitle} {
+		margin-top: 10px;
+	}
+`;
+exports.ButtonMargin = styled_1.default.div `
+	margin-top: 25px;
+`;

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,19 @@
+"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("./BaseBottomSheet"), exports);
+__exportStar(require("./TitleBottomSheet"), exports);
+__exportStar(require("./NavBottomSheet"), exports);

package/dist/components/Button/BaseButton/index.d.ts

@@ -1,6 +1,6 @@
-import { default as React } from 'react';
-import { PropsWithChildren } from '../../../types/react';
-import { SingleButtonColorStyleParams } from '../../../utils';
+import React from 'react';
+import { type PropsWithChildren } from '../../../types/react';
+import { type SingleButtonColorStyleParams } from '../../../utils';
 type BaseProps = PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     isLoading?: boolean;
 }>;

package/dist/components/Button/BaseButton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+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.BaseButton = BaseButton;
+const react_1 = __importDefault(require("react"));
+const Spinner_1 = require("../../Loading/Spinner");
+const button_1 = require("../../../components/ui/button");
+function BaseButton(_a) {
+    var { children, isLoading, disabled } = _a, props = __rest(_a, ["children", "isLoading", "disabled"]);
+    return (react_1.default.createElement(button_1.Button, Object.assign({ disabled: disabled || isLoading }, props), isLoading ? (react_1.default.createElement("div", { className: "h-[25px] w-[25px]" },
+        react_1.default.createElement(Spinner_1.Spinner, { colorType: "white" }))) : (children)));
+}

package/dist/components/Button/DoubleButton/index.d.ts

@@ -1,11 +1,8 @@
-import { default as React, PropsWithChildren } from 'react';
-import { SingleButtonProps } from '../SingleButton';
-import { ColorType, PurposeType } from '../../../utils';
+import React, { PropsWithChildren } from 'react';
+import { ButtonProps } from '@/components/ui/button';
 type DoubleButtonProps = {
-    colorType: ColorType;
-    purpose: PurposeType;
-    left: PropsWithChildren<Omit<SingleButtonProps, 'purpose' | 'colorType'>>;
-    right: PropsWithChildren<Omit<SingleButtonProps, 'purpose' | 'colorType'>>;
+    left: PropsWithChildren<ButtonProps>;
+    right: PropsWithChildren<ButtonProps>;
 };
 declare const DoubleButton: React.FC<DoubleButtonProps>;
 export type { DoubleButtonProps };

package/dist/components/Button/DoubleButton/index.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 });
+exports.DoubleButton = void 0;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("@/components/ui/button");
+const DoubleButton = ({ left, right }) => {
+    return (react_1.default.createElement("div", { className: "flex w-full gap-[10px]" },
+        react_1.default.createElement(button_1.Button, Object.assign({}, left, { purpose: (left === null || left === void 0 ? void 0 : left.purpose) || 'sub' }), left.children),
+        react_1.default.createElement(button_1.Button, Object.assign({}, right, { purpose: (right === null || right === void 0 ? void 0 : right.purpose) || 'main', type: (right === null || right === void 0 ? void 0 : right.type) || 'submit' }), right.children)));
+};
+exports.DoubleButton = DoubleButton;

package/dist/components/Button/DoubleButton/index.spec.d.ts

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

package/dist/components/Button/DoubleButton/index.spec.js

@@ -0,0 +1,30 @@
+"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 = require(".");
+const props = {
+    left: {
+        colorType: 'gray',
+        children: '취소',
+        onClick: () => {
+            console.log('onClick left');
+        },
+    },
+    right: {
+        colorType: 'pink',
+        children: '확인',
+        onClick: () => {
+            console.log('onClick right');
+        },
+    },
+};
+describe('<DoubleButton />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.DoubleButton, Object.assign({}, props)));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Button/DoubleButton/index.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DoubleButtonProps } from '.';
+type Story = StoryObj<DoubleButtonProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * **Pattern**
+ *
+ * 정보 영역에서 선택사항이 두 가지일 경우 사용합니다.
+ *
+ * **Hierarchy**
+ *
+ * 더블 버튼은 좌측에 반드시 블루 그레이 틴트 버튼 1개가 함께 사용 되어야 합니다.
+ */
+declare const meta: Meta<DoubleButtonProps>;
+export default meta;
+export declare const MainButton: Story;
+export declare const ColorSubButton: Story;

package/dist/components/Button/DoubleButton/index.stories.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorSubButton = exports.MainButton = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/fdb21779528c4474ba7e5e500388bf3e?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * **Pattern**
+ *
+ * 정보 영역에서 선택사항이 두 가지일 경우 사용합니다.
+ *
+ * **Hierarchy**
+ *
+ * 더블 버튼은 좌측에 반드시 블루 그레이 틴트 버튼 1개가 함께 사용 되어야 합니다.
+ */
+const meta = {
+    title: 'Component/Button/DoubleButton',
+    component: _1.DoubleButton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// TODO: 스토리북 docs 점검 필요
+const commonArgs = {
+    left: {
+        colorType: 'gray',
+        children: '취소',
+    },
+    right: {
+        colorType: 'pink',
+        children: '확인',
+    },
+};
+// Props 교체 가능
+exports.MainButton = {
+    render: (props) => react_1.default.createElement(_1.DoubleButton, Object.assign({}, props)),
+    args: commonArgs,
+    argTypes: {
+        left: {
+            onClick: { action: 'leftOnClick' },
+        },
+        right: {
+            onClick: { action: 'rightOnClick' },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '비즈니스 전략상 더 중요한 버튼을 강조할 때 우측에 필 버튼을 사용합니다.',
+            },
+        },
+    },
+};
+// UI 확인용
+exports.ColorSubButton = {
+    render: (props) => (react_1.default.createElement(_1.DoubleButton, { left: Object.assign(Object.assign({}, props.left), { colorType: 'pink' }), right: Object.assign(Object.assign({}, props.right), { colorType: 'pink' }) })),
+    args: commonArgs,
+    parameters: {
+        docs: {
+            description: {
+                story: '중요도가 아주 높진 않지만 약간의 위계를 가진 두 가지 선택에 대해 표현할 때 컬러 틴트 버튼을 사용합니다.',
+            },
+        },
+    },
+};

package/dist/components/Button/FloatBaseButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatBaseButton = void 0;
+const react_1 = __importDefault(require("react"));
+const MiniButton_1 = require("../../MiniButton");
+const constants_1 = require("@/constants");
+const FloatBaseButton = ({ children, underlineText, underlineUrl, underlineOnClick, underlineDisabled, }) => (react_1.default.createElement("div", { className: "fixed bottom-0 left-0 w-full", style: { zIndex: constants_1.zIndex.gnb } },
+    react_1.default.createElement("div", { className: "relative box-border w-full" },
+        react_1.default.createElement("div", { className: "h-[55px] w-full bg-gradient-to-b from-[rgba(255,255,255,0.01)] to-white" }),
+        underlineText && (react_1.default.createElement("div", { className: "relative flex h-[48px] w-full justify-center bg-white" },
+            react_1.default.createElement(MiniButton_1.UnderLineMiniButton, { size: "m", colorType: "gray", url: underlineUrl, onClick: underlineOnClick, disabled: underlineDisabled }, underlineText))),
+        react_1.default.createElement("div", { className: "h-[65px] w-full bg-white" }),
+        react_1.default.createElement("div", { className: "absolute bottom-[20px] left-1/2 flex w-full -translate-x-1/2 px-[20px]" }, children))));
+exports.FloatBaseButton = FloatBaseButton;

package/dist/components/Button/FloatBaseButton/index.styled.d.ts

@@ -1,24 +1,24 @@
-export declare const FloatButtonWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const FloatButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const GradientSection: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GradientSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MiniButtonSection: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MiniButtonSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonSection: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Button/FloatBaseButton/index.styled.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonWrapper = exports.ButtonSection = exports.MiniButtonSection = exports.GradientSection = exports.Wrapper = exports.FloatButtonWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const style_constants_1 = require("../../../constants/style.constants");
+const Colors_1 = require("../../../core/Colors");
+exports.FloatButtonWrapper = styled_1.default.div `
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	z-index: ${style_constants_1.zIndex.gnb};
+`;
+exports.Wrapper = styled_1.default.div `
+	width: 100%;
+	box-sizing: border-box;
+	position: relative;
+`;
+exports.GradientSection = styled_1.default.div `
+	width: 100%;
+	height: 55px;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 1) 100%);
+`;
+exports.MiniButtonSection = styled_1.default.div `
+	background-color: ${Colors_1.basicColors.white};
+	width: 100%;
+	height: 48px;
+	display: flex;
+	justify-content: center;
+	position: relative;
+
+	& > * {
+		position: relative;
+		top: -2px;
+	}
+`;
+exports.ButtonSection = styled_1.default.div `
+	background-color: ${Colors_1.basicColors.white};
+	width: 100%;
+	height: 65px;
+`;
+exports.ButtonWrapper = styled_1.default.div `
+	width: 100%;
+	display: flex;
+	padding: 0 20px;
+	position: absolute;
+	bottom: 20px;
+	left: 50%;
+	transform: translate(-50%, 0%);
+`;

package/dist/components/Button/FloatDoubleButton/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { DoubleButtonProps } from '../DoubleButton';
 import { FloatBaseButtonProps } from '../FloatBaseButton';
 type FloatDoubleButtonProps = DoubleButtonProps & FloatBaseButtonProps;

package/dist/components/Button/FloatDoubleButton/index.js

@@ -0,0 +1,28 @@
+"use strict";
+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.FloatDoubleButton = void 0;
+const react_1 = __importDefault(require("react"));
+const FloatBaseButton_1 = require("../FloatBaseButton");
+const button_1 = require("@/components/ui/button");
+const FloatDoubleButton = (props) => {
+    const { underlineText, underlineUrl, underlineOnClick, underlineDisabled } = props, leftProps = __rest(props, ["underlineText", "underlineUrl", "underlineOnClick", "underlineDisabled"]);
+    return (react_1.default.createElement(FloatBaseButton_1.FloatBaseButton, { underlineText: underlineText, underlineUrl: underlineUrl, underlineOnClick: underlineOnClick, underlineDisabled: underlineDisabled },
+        react_1.default.createElement("div", { className: "flex w-full gap-[10px]" },
+            react_1.default.createElement(button_1.Button, Object.assign({}, leftProps.left, { onClick: leftProps.left.onClick, colorType: leftProps.left.colorType, purpose: "sub", disabled: leftProps.left.disabled, className: leftProps.left.className }), leftProps.left.children),
+            react_1.default.createElement(button_1.Button, Object.assign({}, leftProps.right, { onClick: leftProps.right.onClick, colorType: leftProps.right.colorType, purpose: "main", disabled: leftProps.right.disabled, className: leftProps.right.className, type: leftProps.right.type || 'submit' }), leftProps.right.children))));
+};
+exports.FloatDoubleButton = FloatDoubleButton;

package/dist/components/Button/FloatDoubleButton/index.spec.d.ts

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

package/dist/components/Button/FloatDoubleButton/index.spec.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 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+describe('<FloatDoubleButton />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.FloatDoubleButton, { left: { children: '취소', colorType: 'gray' }, right: { children: '확인', colorType: 'pink' } }));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Button/FloatDoubleButton/index.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").FloatDoubleButtonProps>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/dist/components/Button/FloatDoubleButton/index.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+exports.default = {
+    title: 'Component/Button/FloatDoubleButton',
+    component: _1.FloatDoubleButton,
+};
+const Default = () => (react_1.default.createElement("div", { className: "h-screen w-full bg-gray-100" },
+    react_1.default.createElement(_1.FloatDoubleButton, { left: { children: '취소', colorType: 'gray' }, right: { children: '확인', colorType: 'lime' } })));
+exports.Default = Default;

package/dist/components/Button/FloatSingleButton/index.d.ts

@@ -1,7 +1,7 @@
-import { default as React } from 'react';
-import { SingleButtonProps } from '../SingleButton';
+import React from 'react';
 import { FloatBaseButtonProps } from '../FloatBaseButton';
-type FloatSingleButtonProps = SingleButtonProps & FloatBaseButtonProps;
+import { ButtonProps } from '@/components/ui/button';
+type FloatSingleButtonProps = ButtonProps & FloatBaseButtonProps;
 declare const FloatSingleButton: React.FC<FloatSingleButtonProps>;
 export type { FloatSingleButtonProps };
 export { FloatSingleButton };

package/dist/components/Button/FloatSingleButton/index.js

@@ -0,0 +1,26 @@
+"use strict";
+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.FloatSingleButton = void 0;
+const react_1 = __importDefault(require("react"));
+const FloatBaseButton_1 = require("../FloatBaseButton");
+const button_1 = require("@/components/ui/button");
+const FloatSingleButton = (_a) => {
+    var { underlineText, underlineUrl, underlineOnClick, underlineDisabled, children } = _a, restProps = __rest(_a, ["underlineText", "underlineUrl", "underlineOnClick", "underlineDisabled", "children"]);
+    return (react_1.default.createElement(FloatBaseButton_1.FloatBaseButton, { underlineText: underlineText, underlineUrl: underlineUrl, underlineOnClick: underlineOnClick, underlineDisabled: underlineDisabled },
+        react_1.default.createElement(button_1.Button, Object.assign({}, restProps), children)));
+};
+exports.FloatSingleButton = FloatSingleButton;

package/dist/components/Button/FloatSingleButton/index.spec.d.ts

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

package/dist/components/Button/FloatSingleButton/index.spec.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 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+describe('<FloatSingleButton />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.FloatSingleButton, { colorType: "gray", purpose: "main" }, "\uD655\uC778"));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Button/FloatSingleButton/index.stories.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import(".").FloatSingleButtonProps>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;