@pfct/purple 1.3.4-npm-test.1

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+interface WrapperProps {
+    deletePaddingTop: boolean;
+}
+interface SubTitleProps {
+    color: string;
+}
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & WrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImageWrapper: 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 Title: import("@emotion/styled").StyledComponent<{
+    lg?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    sm?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    color?: string | undefined;
+    textAlign?: string | undefined;
+    fontWeight?: string | undefined;
+    className?: string | undefined;
+    element?: string | undefined;
+    'data-element-name'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const SubTitle: import("@emotion/styled").StyledComponent<{
+    lg?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    sm?: "Headline1" | "Headline2" | "Headline3" | "Headline4" | "Headline5" | "Headline6" | "Title1" | "Title2" | "Title3" | "Title4" | "Body1" | "Body2" | undefined;
+    color?: string | undefined;
+    textAlign?: string | undefined;
+    fontWeight?: string | undefined;
+    className?: string | undefined;
+    element?: string | undefined;
+    'data-element-name'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & 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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PropsWithChildren } from '../../../types/react';
+type ToastPosition = 'TOP' | 'TOP_RIGHT' | 'TOP_LEFT' | 'BOTTOM' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT';
+type BaseToastMessageProps = PropsWithChildren<{
+    visible: boolean;
+    onClose?: () => void;
+    milliSeconds?: number;
+    className?: string;
+    position?: ToastPosition;
+}>;
+declare const BaseToastMessage: React.FC<BaseToastMessageProps>;
+export type { BaseToastMessageProps };
+export { BaseToastMessage };

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

@@ -0,0 +1,55 @@
+"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;
+};
+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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Toast: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    visible: boolean;
+}, 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/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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BaseToastMessageProps } from '../BaseToastMessage';
+import { PropsWithChildren } from '../../../types/react';
+type IconToastProps = {
+    icon?: React.ReactNode;
+    hasButton?: boolean;
+    onClick?: () => void;
+    buttonText?: string;
+};
+type ToastMessageProps = PropsWithChildren<BaseToastMessageProps & IconToastProps>;
+declare const Toast: React.FC<ToastMessageProps>;
+export type { ToastMessageProps };
+export { Toast };

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

@@ -0,0 +1,59 @@
+"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;
+};
+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;

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

@@ -0,0 +1,37 @@
+"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 Icon_1 = require("../../../Icon");
+const Colors_1 = require("../../../core/Colors");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Toast-Message-2ea99ab2e0154d858596c6314c87284c?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 현재 진행 상태와 관련된 간단한 메시지로 일시적인 피드백을 제공할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Toast Message',
+    component: _1.Toast,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        "Tip! visible \uAC12\uC744 \uBC14\uAFD4\uBCF4\uC138\uC694",
+        react_1.default.createElement(_1.Toast, Object.assign({}, props)))),
+    args: {
+        visible: true,
+        children: '텍스트를 입력해주세요',
+        icon: react_1.default.createElement(Icon_1.AlarmFillIcon, { fillColor: Colors_1.basicColors.yellow400 }),
+        hasButton: true,
+    },
+};
+exports.Story1.storyName = 'Toast Message';

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Content } from '../../MiniButton/BoxMiniButton/index.styled';
+export declare const ContentWrapper: 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 IconWrapper: 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 ButtonWrapper: import("@emotion/styled").CreateStyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export { Content };

package/dist/components/ToastMessage/Toast/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.Content = exports.ButtonWrapper = exports.IconWrapper = exports.ContentWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const index_styled_1 = require("../../MiniButton/BoxMiniButton/index.styled");
+Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return index_styled_1.Content; } });
+exports.ContentWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+`;
+exports.IconWrapper = styled_1.default.div `
+	display: flex;
+	align-items: center;
+
+	& > * + * {
+		margin-left: 10px;
+	}
+`;
+exports.ButtonWrapper = (0, styled_1.default)(index_styled_1.Wrapper);

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

@@ -0,0 +1 @@
+export * from './Toast';

package/dist/components/ToastMessage/index.js

@@ -0,0 +1,17 @@
+"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("./Toast"), exports);

package/dist/components/Tooltip/BasicTooltip/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TooltipBaseProps } from '../TooltipBase';
+export type BasicTooltipProps = Omit<TooltipBaseProps, 'colorType' | 'alwaysShow' | 'hasCloseButton'>;
+declare const BasicTooltip: React.FC<BasicTooltipProps>;
+export default BasicTooltip;

package/dist/components/Tooltip/BasicTooltip/index.js

@@ -0,0 +1,11 @@
+"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 TooltipBase_1 = __importDefault(require("../TooltipBase"));
+const BasicTooltip = (props) => {
+    return react_1.default.createElement(TooltipBase_1.default, Object.assign({}, props, { colorType: "white", alwaysShow: false, hasCloseButton: false }));
+};
+exports.default = BasicTooltip;

package/dist/components/Tooltip/BasicTooltip/index.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicTooltipProps } from '.';
+type Story = StoryObj<BasicTooltipProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
+ *
+ */
+declare const meta: Meta<BasicTooltipProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;

package/dist/components/Tooltip/BasicTooltip/index.stories.js

@@ -0,0 +1,92 @@
+"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 styled_1 = __importDefault(require("@emotion/styled"));
+const _1 = __importDefault(require("."));
+const TooltipBase_1 = require("../TooltipBase");
+const Icon_1 = require("../../../Icon");
+const __1 = require("../..");
+const library_1 = require("../../../library");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
+ *
+ */
+const meta = {
+    title: 'Component/Tooltip/BasicTooltip',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonArgTypes = {
+    placement: {
+        options: TooltipBase_1.PlacementArray,
+        control: { type: 'radio' },
+    },
+};
+const ContainerForStorybook = styled_1.default.div `
+	width: 100%;
+	padding: 100px 0;
+`;
+const Component1 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(Icon_1.QuestionIcon, null))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+    parameters: {
+        docs: {
+            description: {
+                story: '종속된 컴포넌트 위치에 따라 말풍선 꼬리의 위치를 결정합니다. 화면을 가로로 3등분 하여 콘텐츠의 위치에 따라 왼쪽, 중앙, 오른쪽에 꼬리를 표시하고, 화면을 세로로 2등분 하여 위쪽, 아래쪽으로 말풍선 꼬리를 표시합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = 'w. QuestionIcon';
+const Component2 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.BoxMiniButton, { colorType: "gray" }, "\uC0C1\uD488 \uD544\uD130")),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
+        react_1.default.createElement(_1.default, Object.assign({}, props, { isChildrenFullWidth: true }),
+            react_1.default.createElement(__1.SingleButton, { colorType: "gray", purpose: "main" }, "SingleButton")),
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
+};
+// Props 교체 가능
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(Component2, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+};
+exports.Story2.storyName = 'w. Buttons';
+const Component3 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
+};
+// Props 교체 가능
+exports.Story3 = {
+    render: (props) => react_1.default.createElement(Component3, Object.assign({}, props)),
+    args: {
+        content: '툴팁 문구를 입력해주세요',
+    },
+    argTypes: commonArgTypes,
+};
+exports.Story3.storyName = 'w. IconMiniButton';

package/dist/components/Tooltip/ImpactTooltip/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TooltipBaseProps, TooltipPlacementType } from '../TooltipBase';
+export type ImpactTooltipProps = Omit<TooltipBaseProps, 'alwaysShow' | 'placement'> & {
+    placement: TooltipPlacementType;
+};
+declare const ImpactTooltip: React.FC<ImpactTooltipProps>;
+export default ImpactTooltip;