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

package/dist/components/Tag/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Tag = ({ children, colorType, type }) => {
+    return (react_1.default.createElement(Styled.Wrapper, { colorType: colorType, type: type }, children));
+};
+exports.Tag = Tag;

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

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

package/dist/components/Tag/index.stories.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.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const meta = {
+    title: 'Component/Tag',
+    component: _1.Tag,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.Tag, Object.assign({}, props)),
+    args: {
+        type: 'fill',
+        colorType: 'gray',
+        children: '태그',
+    },
+};
+exports.Story1.storyName = '태그';

package/dist/components/Tag/index.styled.d.ts

@@ -3,10 +3,10 @@ export type TagStyleProps = TagColorStyleParams & {
     /** 태그 배치시 줄바꿈 여부(기본값: 줄바꿈) */
     inline?: boolean;
 };
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & TagColorStyleParams & {
     /** 태그 배치시 줄바꿈 여부(기본값: 줄바꿈) */
     inline?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Tag/index.styled.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const utils_1 = require("../../utils");
+const TextStyles_1 = require("../../core/TextStyles");
+exports.Wrapper = styled_1.default.div `
+	${({ type, colorType }) => (0, TextStyles_1.title4)({ color: (0, utils_1.tagColorStyle)({ type, colorType }).textColor })};
+	background-color: ${({ type, colorType }) => (0, utils_1.tagColorStyle)({ type, colorType }).backgroundColor};
+
+	box-sizing: border-box;
+	width: max-content;
+	padding: 3px 8px;
+	border-radius: 30px;
+	align-items: center;
+	justify-content: center;
+	display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
+`;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type TitleProps = {
     image?: React.ReactNode;
     title: React.ReactNode;

package/dist/components/Title/index.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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const Colors_1 = require("../../core/Colors");
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+/**
+ * @props image size는 40을 기본으로 사용합니다.
+ */
+const Title = ({ title, subTitle, image, deletePaddingTop = false, subTitleColor = Colors_1.basicColors.gray400, }) => {
+    return (react_1.default.createElement(Styled.Wrapper, { deletePaddingTop: deletePaddingTop },
+        image && react_1.default.createElement(Styled.ImageWrapper, null, image),
+        react_1.default.createElement(Styled.Title, null, title),
+        subTitle && react_1.default.createElement(Styled.SubTitle, { color: subTitleColor }, subTitle)));
+};
+exports.Title = Title;

package/dist/components/Title/index.spec.d.ts

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

package/dist/components/Title/index.spec.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 });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    title: '확인',
+};
+describe('<Title />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(_1.Title, Object.assign({}, props)));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TitleProps } from '.';
+type Story = StoryObj<TitleProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Title-369f8ec1d675488fbd618791e7b3d0fb?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면의 특징이나 목적을 설명하기 위해 사용합니다.
+ *
+ */
+declare const meta: Meta<TitleProps>;
+export default meta;
+export declare const Story1: Story;

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

@@ -0,0 +1,44 @@
+"use strict";
+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 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Title-369f8ec1d675488fbd618791e7b3d0fb?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 화면의 특징이나 목적을 설명하기 위해 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Title',
+    component: _1.Title,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.Title, Object.assign({}, props)),
+    args: {
+        title: '타이틀을 입력해주세요',
+        subTitle: '서브타이틀을 입력해주세요',
+        image: (react_1.default.createElement("svg", { width: "45", height: "45", viewBox: "0 0 45 45", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            react_1.default.createElement("path", { d: "M15.5837 18.0117H12.2167C11.7704 18.0117 11.4087 18.3735 11.4087 18.8197V20.0512C11.4087 20.4974 11.7704 20.8591 12.2167 20.8591H15.5837C16.03 20.8591 16.3917 20.4974 16.3917 20.0512V18.8197C16.3917 18.3735 16.03 18.0117 15.5837 18.0117Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M14.6726 18.7539H13.1279C12.5716 18.7539 12.1206 19.184 12.1206 19.7145V29.6737C12.1206 30.2043 12.5716 30.6343 13.1279 30.6343H14.6726C15.2289 30.6343 15.6799 30.2043 15.6799 29.6737V19.7145C15.6799 19.184 15.2289 18.7539 14.6726 18.7539Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M15.5837 28.7031H12.2167C11.7704 28.7031 11.4087 29.0649 11.4087 29.5111V30.7426C11.4087 31.1888 11.7704 31.5506 12.2167 31.5506H15.5837C16.03 31.5506 16.3917 31.1888 16.3917 30.7426V29.5111C16.3917 29.0649 16.03 28.7031 15.5837 28.7031Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M24.1833 18.0117H20.8163C20.37 18.0117 20.0083 18.3735 20.0083 18.8197V20.0512C20.0083 20.4974 20.37 20.8591 20.8163 20.8591H24.1833C24.6296 20.8591 24.9913 20.4974 24.9913 20.0512V18.8197C24.9913 18.3735 24.6296 18.0117 24.1833 18.0117Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M23.2722 18.7539H21.7275C21.1712 18.7539 20.7202 19.184 20.7202 19.7145V29.6737C20.7202 30.2043 21.1712 30.6343 21.7275 30.6343H23.2722C23.8285 30.6343 24.2795 30.2043 24.2795 29.6737V19.7145C24.2795 19.184 23.8285 18.7539 23.2722 18.7539Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M24.1833 28.7031H20.8163C20.37 28.7031 20.0083 29.0649 20.0083 29.5111V30.7426C20.0083 31.1888 20.37 31.5506 20.8163 31.5506H24.1833C24.6296 31.5506 24.9913 31.1888 24.9913 30.7426V29.5111C24.9913 29.0649 24.6296 28.7031 24.1833 28.7031Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M32.783 18.0117H29.4159C28.9696 18.0117 28.6079 18.3735 28.6079 18.8197V20.0512C28.6079 20.4974 28.9696 20.8591 29.4159 20.8591H32.783C33.2292 20.8591 33.5909 20.4974 33.5909 20.0512V18.8197C33.5909 18.3735 33.2292 18.0117 32.783 18.0117Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M31.8713 18.7539H30.3266C29.7703 18.7539 29.3193 19.184 29.3193 19.7145V29.6737C29.3193 30.2043 29.7703 30.6343 30.3266 30.6343H31.8713C32.4276 30.6343 32.8786 30.2043 32.8786 29.6737V19.7145C32.8786 19.184 32.4276 18.7539 31.8713 18.7539Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("path", { d: "M32.783 28.7031H29.4159C28.9696 28.7031 28.6079 29.0649 28.6079 29.5111V30.7426C28.6079 31.1888 28.9696 31.5506 29.4159 31.5506H32.783C33.2292 31.5506 33.5909 31.1888 33.5909 30.7426V29.5111C33.5909 29.0649 33.2292 28.7031 32.783 28.7031Z", fill: "#D0D8DC" }),
+            react_1.default.createElement("rect", { x: "9.1543", y: "30.6367", width: "26.6911", height: "4.54635", rx: "1", fill: "#90A4AF" }),
+            react_1.default.createElement("path", { d: "M9.1543 15.3552C9.1543 15.0068 9.33563 14.6835 9.63294 14.5018L21.4572 7.27768C22.0973 6.88659 22.9025 6.88659 23.5426 7.27768L35.3668 14.5018C35.6641 14.6835 35.8454 15.0068 35.8454 15.3552V17.7558C35.8454 18.3081 35.3977 18.7558 34.8454 18.7558H10.1543C9.60201 18.7558 9.1543 18.3081 9.1543 17.7558L9.1543 15.3552Z", fill: "#90A4AF" }),
+            react_1.default.createElement("path", { d: "M22.4996 15.1379C23.8462 15.1379 24.9377 14.0464 24.9377 12.6998C24.9377 11.3533 23.8462 10.2617 22.4996 10.2617C21.1531 10.2617 20.0615 11.3533 20.0615 12.6998C20.0615 14.0464 21.1531 15.1379 22.4996 15.1379Z", fill: "white" }))),
+    },
+};
+exports.Story1.storyName = '타이틀';

package/dist/components/Title/index.styled.d.ts

@@ -4,17 +4,17 @@ interface WrapperProps {
 interface SubTitleProps {
     color: string;
 }
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & WrapperProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ImageWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Title: import('@emotion/styled').StyledComponent<{
-    lg?: import('../../core/Typography').Typo;
-    sm?: import('../../core/Typography').Typo;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    lg?: import("../../core/Typography").Typo;
+    sm?: import("../../core/Typography").Typo;
     color?: string;
     textAlign?: string;
     fontWeight?: string;
@@ -22,13 +22,13 @@ export declare const Title: 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 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;
@@ -36,8 +36,8 @@ 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;
 } & SubTitleProps, {}, {}>;
 export {};

package/dist/components/Title/index.styled.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubTitle = exports.Title = exports.ImageWrapper = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Typography_1 = require("../../core/Typography");
+const utils_1 = require("../../utils");
+exports.Wrapper = styled_1.default.div `
+	${(0, utils_1.Smaller)((0, react_1.css) `
+		padding: 25px 0;
+	`)}
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 80px 80px 25px;
+	`)}
+
+	/** deletePaddingTop = true 이면, 사용처 BasicLayout 에서 padding-top 관리 */
+
+	${({ deletePaddingTop }) => deletePaddingTop &&
+    (0, utils_1.Smaller)((0, react_1.css) `
+			padding-top: 0px;
+		`)}
+
+	${({ deletePaddingTop }) => deletePaddingTop &&
+    (0, utils_1.Larger)((0, react_1.css) `
+			padding-top: 0px;
+		`)}
+`;
+exports.ImageWrapper = styled_1.default.div `
+	padding: 0 20px;
+	margin-bottom: 15px;
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0;
+	`)}
+`;
+exports.Title = (0, styled_1.default)(Typography_1.Headline3) `
+	padding: 0 25px;
+	white-space: pre-wrap;
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0;
+	`)}
+`;
+exports.SubTitle = (0, styled_1.default)(Typography_1.Title3) `
+	margin-top: 10px;
+	padding: 0 25px;
+	color: ${({ color }) => color};
+	white-space: pre-wrap;
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0;
+	`)}
+`;

package/dist/components/ToastMessage/BaseToastMessage/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { PropsWithChildren } from '../../../types/react';
 type ToastPosition = 'TOP' | 'TOP_RIGHT' | 'TOP_LEFT' | 'BOTTOM' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT';
 type BaseToastMessageProps = PropsWithChildren<{

package/dist/components/ToastMessage/BaseToastMessage/index.js

@@ -0,0 +1,65 @@
+"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.BaseToastMessage = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const BaseToastMessage = ({ visible, children, onClose, milliSeconds = 3000, className, }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const toastRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setOpen(true);
+        }
+        else {
+            setOpen(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    }, [visible, onClose]);
+    (0, react_1.useEffect)(() => {
+        const timeoutId = setTimeout(() => {
+            setOpen(false);
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, milliSeconds);
+        return () => {
+            if (timeoutId !== undefined) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [milliSeconds, onClose]);
+    return (react_1.default.createElement(Styled.Toast, { className: className, visible: open, onClick: onClose, ref: toastRef },
+        react_1.default.createElement(Styled.Content, null, children)));
+};
+exports.BaseToastMessage = BaseToastMessage;

package/dist/components/ToastMessage/BaseToastMessage/index.styled.d.ts

@@ -1,10 +1,10 @@
-export declare const Toast: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Toast: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     visible: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Content: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: 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/ToastMessage/BaseToastMessage/index.styled.js

@@ -0,0 +1,78 @@
+"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.Toast = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const style_constants_1 = require("../../../constants/style.constants");
+const Colors_1 = require("../../../core/Colors");
+const TextStyles_1 = require("../../../core/TextStyles");
+const utils_1 = require("../../../utils");
+const DEFAULT_BOTTOM_VALUE = '-55px';
+const PC_BOTTOM_UP_VALUE = '50px';
+const MOBILE_BOTTOM_UP_VALUE = '25px';
+const up = (0, react_1.keyframes) `
+	0% {
+		bottom: ${DEFAULT_BOTTOM_VALUE};
+	}
+	100% {
+		${(0, utils_1.Smaller)((0, react_1.css) `
+			bottom: ${MOBILE_BOTTOM_UP_VALUE};
+		`)};
+		${(0, utils_1.Larger)((0, react_1.css) `
+			bottom: ${PC_BOTTOM_UP_VALUE};
+		`)};
+	}
+`;
+const down = (0, react_1.keyframes) `
+	0% {
+		${(0, utils_1.Smaller)((0, react_1.css) `
+			bottom: ${MOBILE_BOTTOM_UP_VALUE};
+		`)};
+		${(0, utils_1.Larger)((0, react_1.css) `
+			bottom: ${PC_BOTTOM_UP_VALUE};
+		`)};
+	}
+	100% {
+		bottom: ${DEFAULT_BOTTOM_VALUE};
+	}
+`;
+const toastMessageStyle = (visible) => (0, react_1.css) `
+	visibility: ${visible ? 'visible' : 'hidden'};
+	z-index: ${style_constants_1.zIndex.basicLayer + 11};
+	animation: ${visible ? up : down} 0.4s ease-out;
+	transition: all 0.4s ease-out;
+`;
+exports.Toast = styled_1.default.div `
+	min-width: 320px;
+	max-width: max-content;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		min-width: 440px;
+	`)}
+	height: 55px;
+	box-sizing: border-box;
+	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '80%')};
+	border-radius: 15px;
+	padding: 17px 15px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	position: fixed;
+	left: 50%;
+	transform: translate(-50%, 0);
+	${(0, utils_1.Smaller)((0, react_1.css) `
+		bottom: ${MOBILE_BOTTOM_UP_VALUE};
+	`)};
+	${(0, utils_1.Larger)((0, react_1.css) `
+		bottom: ${PC_BOTTOM_UP_VALUE};
+	`)};
+	${({ visible }) => toastMessageStyle(visible)};
+`;
+exports.Content = styled_1.default.div `
+	${TextStyles_1.typography.title3};
+	color: ${Colors_1.basicColors.white};
+	width: 100%;
+`;

package/dist/components/ToastMessage/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BaseToastMessageProps } from '../BaseToastMessage';
 import { PropsWithChildren } from '../../../types/react';
 type IconToastProps = {

package/dist/components/ToastMessage/Toast/index.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const react_1 = __importStar(require("react"));
+const BoxMiniButton_1 = require("../../MiniButton/BoxMiniButton");
+const BaseToastMessage_1 = require("../BaseToastMessage");
+const Styled = __importStar(require("./index.styled"));
+const Toast = (_a) => {
+    var { milliSeconds = 2000, children, icon, onClick, hasButton, buttonText } = _a, restProps = __rest(_a, ["milliSeconds", "children", "icon", "onClick", "hasButton", "buttonText"]);
+    // fyi. 토스트 메시지 내 버튼이 있다면 5초, 없다면 2초간 머문 후 자동으로 사라집니다.
+    const toastMessageMilliSeconds = hasButton ? 5000 : milliSeconds;
+    const handleToastButton = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [onClick]);
+    return (react_1.default.createElement(BaseToastMessage_1.BaseToastMessage, Object.assign({ milliSeconds: toastMessageMilliSeconds }, restProps),
+        react_1.default.createElement(Styled.ContentWrapper, null,
+            icon ? (react_1.default.createElement(Styled.IconWrapper, null,
+                icon,
+                " ",
+                react_1.default.createElement("div", null, children))) : (react_1.default.createElement("div", null, children)),
+            hasButton && (react_1.default.createElement(BoxMiniButton_1.BoxMiniButton, { colorType: "gray", onClick: handleToastButton }, buttonText)))));
+};
+exports.Toast = Toast;

package/dist/components/ToastMessage/Toast/index.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastMessageProps } from '.';
+type Story = StoryObj<ToastMessageProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Toast-Message-2ea99ab2e0154d858596c6314c87284c?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 현재 진행 상태와 관련된 간단한 메시지로 일시적인 피드백을 제공할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<ToastMessageProps>;
+export default meta;
+export declare const Story1: Story;