@pfct/purple 1.3.4-rc.0

package/dist/components/Loading/Spinner/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 = require(".");
+describe('<Spinner />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.Spinner, null)));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Loading/Spinner/index.styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const SpinnerWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Loading/Spinner/index.styled.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.SpinnerWrapper = styled_1.default.div `
+	border: 4px solid ${({ color }) => color};
+	border-left-color: rgba(1, 1, 1, 0);
+	border-radius: 50%;
+	width: 25px;
+	height: 25px;
+	animation: spin 1s linear infinite;
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;

package/dist/components/Loading/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ProgressBar';
+export * from './Skeleton';
+export * from './Spinner';

package/dist/components/Loading/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("./ProgressBar"), exports);
+__exportStar(require("./Skeleton"), exports);
+__exportStar(require("./Spinner"), exports);

package/dist/components/Loading/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkeletonProps } from '.';
+import { SpinnerProps } from './Spinner';
+import { ProgressBarProps } from './ProgressBar';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Loading-c210da0d1c0b408f9cb6c5925baa9fb7?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 진행 상황을 안내하거나 UI를 불러올 때 사용합니다.
+ */
+declare const meta: Meta<SkeletonProps>;
+export default meta;
+export declare const Story1: StoryObj<SpinnerProps>;
+export declare const Story2: StoryObj<ProgressBarProps>;
+export declare const Story3: StoryObj<SkeletonProps>;

package/dist/components/Loading/index.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const ProgressBar_1 = require("./ProgressBar");
+const Colors_1 = require("../../core/Colors");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Loading-c210da0d1c0b408f9cb6c5925baa9fb7?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 진행 상황을 안내하거나 UI를 불러올 때 사용합니다.
+ */
+const meta = {
+    title: 'Component/Loading',
+    component: _1.Skeleton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.Spinner, Object.assign({}, props)),
+    args: {
+        colorType: 'white',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '진행 상황을 예측할 수 없을 때 사용합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = '스피너 로딩';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { position: 'relative' } },
+        react_1.default.createElement(ProgressBar_1.ProgressBar, Object.assign({}, props)))),
+    args: {
+        progress: 20,
+        pointColor: Colors_1.basicColors.pink400,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '진행 상황을 예측할 수 있을 때 사용합니다.',
+            },
+        },
+    },
+};
+exports.Story2.storyName = '프로그레스바';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'white', width: '500px', height: '300px', padding: '20px' } },
+        react_1.default.createElement(_1.Skeleton.Layout, null,
+            react_1.default.createElement(_1.Skeleton, Object.assign({}, props)),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(_1.Skeleton, { variant: "text", width: 150, height: 50 }),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(_1.Skeleton, { variant: "rect", height: 100 })))),
+    args: {
+        variant: 'circle',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '표시될 정보의 대략적인 형태를 미리 보여주어 사용자가 다음 화면을 예상할 수 있도록 합니다.',
+            },
+        },
+    },
+};
+exports.Story3.storyName = '스켈레톤';

package/dist/components/MiniButton/BoxMiniButton/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BaseButtonProps } from '../../../components/Button/BaseButton';
+type BoxMiniButtonProps = Omit<BaseButtonProps, 'purpose'>;
+declare const BoxMiniButton: React.FC<BoxMiniButtonProps>;
+export type { BoxMiniButtonProps };
+export { BoxMiniButton };

package/dist/components/MiniButton/BoxMiniButton/index.js

@@ -0,0 +1,51 @@
+"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.BoxMiniButton = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseButton_1 = require("../../../components/Button/BaseButton");
+const TextStyles_1 = require("../../../core/TextStyles");
+const Styled = __importStar(require("./index.styled"));
+const BoxMiniButton = (_a) => {
+    var { onClick, children, disabled, className } = _a, restProps = __rest(_a, ["onClick", "children", "disabled", "className"]);
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(BaseButton_1.BaseButton, Object.assign({}, restProps, { purpose: "sub", className: className, onClick: onClick, disabled: disabled, typography: TextStyles_1.typography.title4, height: 35, borderRadius: '8px' }),
+            react_1.default.createElement(Styled.Content, null, children))));
+};
+exports.BoxMiniButton = BoxMiniButton;

package/dist/components/MiniButton/BoxMiniButton/index.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BoxMiniButtonProps } from '.';
+type Story = StoryObj<BoxMiniButtonProps>;
+/**
+ * updated 230523
+ *
+ * 컴포넌트 내에서 종속된 버튼으로 사용합니다.
+ */
+declare const meta: Meta<BoxMiniButtonProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;

package/dist/components/MiniButton/BoxMiniButton/index.stories.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * 컴포넌트 내에서 종속된 버튼으로 사용합니다.
+ */
+const meta = {
+    title: 'Component/MiniButton/Box Button',
+    component: _1.BoxMiniButton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props)),
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props, { disabled: true })))),
+    args: {
+        children: '미니버튼',
+        colorType: 'pink',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story1.storyName = '핑크 라이트';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props)),
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props, { disabled: true })))),
+    args: {
+        children: '미니버튼',
+        colorType: 'blue',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story2.storyName = '블루 라이트';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props)),
+        react_1.default.createElement(_1.BoxMiniButton, Object.assign({}, props, { disabled: true })))),
+    args: {
+        children: '미니버튼',
+        colorType: 'gray',
+    },
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story3.storyName = '그레이 라이트';

package/dist/components/MiniButton/BoxMiniButton/index.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/MiniButton/BoxMiniButton/index.styled.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.Content = exports.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Wrapper = styled_1.default.div `
+	width: max-content;
+
+	& > button {
+		padding: 0;
+	}
+`;
+exports.Content = styled_1.default.div `
+	padding: 0 10px;
+`;

package/dist/components/MiniButton/IconMiniButton/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ButtonTagProps } from '../common/ButtonTag';
+type IconMiniButtonProps = Omit<ButtonTagProps, 'styleType'> & {
+    icon: React.ReactNode;
+};
+/**
+ * icon component는 size 19를 권장합니다.
+ */
+declare const IconMiniButton: React.FC<IconMiniButtonProps>;
+export type { IconMiniButtonProps };
+export { IconMiniButton };

package/dist/components/MiniButton/IconMiniButton/index.js

@@ -0,0 +1,42 @@
+"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.IconMiniButton = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const ButtonTag_1 = __importDefault(require("../common/ButtonTag"));
+/**
+ * icon component는 size 19를 권장합니다.
+ */
+const IconMiniButton = ({ colorType, children, icon, size, onClick, disabled = false, }) => {
+    return (react_1.default.createElement(ButtonTag_1.default, { styleType: "icon", onClick: onClick, disabled: disabled, colorType: colorType, size: size },
+        react_1.default.createElement(Styled.Content, null,
+            react_1.default.createElement("div", null, children),
+            icon)));
+};
+exports.IconMiniButton = IconMiniButton;

package/dist/components/MiniButton/IconMiniButton/index.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconMiniButtonProps } from '.';
+type Story = StoryObj<IconMiniButtonProps>;
+/**
+ * updated 230523
+ *
+ * 한 화면 내에서 사용자의 추가 액션이 필요할 때 사용합니다.
+ */
+declare const meta: Meta<IconMiniButtonProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;
+export declare const Story4: Story;

package/dist/components/MiniButton/IconMiniButton/index.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const ChevronRightS_1 = require("../../../Icon/generated/ChevronRightS");
+/**
+ * updated 230523
+ *
+ * 한 화면 내에서 사용자의 추가 액션이 필요할 때 사용합니다.
+ */
+const meta = {
+    title: 'Component/MiniButton/Icon Button',
+    component: _1.IconMiniButton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonProps = {
+    children: '미니버튼',
+    size: 'm',
+    disabled: false,
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.IconMiniButton, Object.assign({}, props, { icon: react_1.default.createElement(ChevronRightS_1.ChevronRightS, null) })))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'gray' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story1.storyName = 'Gray';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.IconMiniButton, Object.assign({}, props, { icon: react_1.default.createElement(ChevronRightS_1.ChevronRightS, null) })))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'pink' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story2.storyName = 'Pink';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.IconMiniButton, Object.assign({}, props, { icon: react_1.default.createElement(ChevronRightS_1.ChevronRightS, null) })))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'blue' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story3.storyName = 'Blue';
+exports.Story4 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.IconMiniButton, Object.assign({}, props, { icon: react_1.default.createElement(ChevronRightS_1.ChevronRightS, null) })))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'lime' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story4.storyName = 'Lime';

package/dist/components/MiniButton/IconMiniButton/index.styled.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type { CommonMiniButtonStyleProps } from '../common/index.styled';
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/MiniButton/IconMiniButton/index.styled.js

@@ -0,0 +1,37 @@
+"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.Content = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CommonStyled = __importStar(require("../common/index.styled"));
+exports.Content = styled_1.default.div `
+	padding-left: ${CommonStyled.MiniButtonSidePaddingPx}px;
+
+	display: flex;
+	align-items: center;
+`;

package/dist/components/MiniButton/UnderLineMiniButton/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonTagProps } from '../common/ButtonTag';
+type UnderLineMiniButtonProps = Omit<ButtonTagProps, 'styleType'> & {
+    url?: string;
+};
+declare const UnderLineMiniButton: React.FC<UnderLineMiniButtonProps>;
+export type { UnderLineMiniButtonProps };
+export { UnderLineMiniButton };

package/dist/components/MiniButton/UnderLineMiniButton/index.js

@@ -0,0 +1,39 @@
+"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.UnderLineMiniButton = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const ButtonTag_1 = __importDefault(require("../common/ButtonTag"));
+const UnderLineMiniButton = ({ size, colorType, children, url, onClick, disabled = false, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, url ? (react_1.default.createElement(Styled.LinkWrapper, { href: url, target: "_blank" },
+        react_1.default.createElement(ButtonTag_1.default, { styleType: "underline", disabled: disabled, colorType: colorType, size: size },
+            react_1.default.createElement(Styled.Content, null, children)))) : (react_1.default.createElement(ButtonTag_1.default, { styleType: "underline", onClick: onClick, disabled: disabled, colorType: colorType, size: size },
+        react_1.default.createElement(Styled.Content, null, children)))));
+};
+exports.UnderLineMiniButton = UnderLineMiniButton;

package/dist/components/MiniButton/UnderLineMiniButton/index.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { UnderLineMiniButtonProps } from '.';
+type Story = StoryObj<UnderLineMiniButtonProps>;
+/**
+ * updated 230523
+ *
+ * 한 화면 내에서 사용자의 흐름을 방해하지 않으면서 정보를 제공할 때 사용합니다.
+ */
+declare const meta: Meta<UnderLineMiniButtonProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;
+export declare const Story4: Story;

package/dist/components/MiniButton/UnderLineMiniButton/index.stories.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * 한 화면 내에서 사용자의 흐름을 방해하지 않으면서 정보를 제공할 때 사용합니다.
+ */
+const meta = {
+    title: 'Component/MiniButton/Underline Button',
+    component: _1.UnderLineMiniButton,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonProps = {
+    children: '미니버튼',
+    size: 'm',
+    disabled: false,
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.UnderLineMiniButton, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'gray' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story1.storyName = '그레이';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.UnderLineMiniButton, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'pink' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story2.storyName = 'Pink';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.UnderLineMiniButton, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'blue' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story3.storyName = 'Blue';
+exports.Story4 = {
+    render: (props) => (react_1.default.createElement("div", { style: { display: 'flex', gap: '10px' } },
+        react_1.default.createElement(_1.UnderLineMiniButton, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, commonProps), { colorType: 'lime' }),
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+exports.Story4.storyName = 'Lime';

package/dist/components/MiniButton/UnderLineMiniButton/index.styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type { CommonMiniButtonStyleProps } from '../common/index.styled';
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LinkWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;