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

package/dist/Icon/index.stories.js

@@ -0,0 +1,67 @@
+"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 export_generated_1 = require("./export.generated");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/System-Icon-d059e54cac724c34a98415684c381c8a?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 시스템 아이콘은 아이콘 별로 기능이나 액션을 가지고 있으며, 사용자의 쉽고 간편한 서비스 사용을 도와줍니다.<br/>
+ * 단순하고 직관적인 형태의 아이콘을 지향합니다.
+ *
+ */
+const meta = {
+    title: 'Foundation/Icon',
+    component: export_generated_1.CheckIcon,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const Component = (props) => {
+    const MIcon = [
+        export_generated_1.CheckIcon,
+        export_generated_1.CancelIcon,
+        export_generated_1.ChevronDownIcon,
+        export_generated_1.ChevronLeftIcon,
+        export_generated_1.ChevronRightIcon,
+        export_generated_1.ChevronUpIcon,
+        export_generated_1.DoubleChevronLeftIcon,
+        export_generated_1.DoubleChevronRightIcon,
+    ];
+    const SignIcon = [
+        export_generated_1.PlusIcon,
+        export_generated_1.AlarmFillIcon,
+        export_generated_1.EyeFillIcon,
+        export_generated_1.EyeSlashFillIcon,
+        export_generated_1.SettingFillIcon,
+        export_generated_1.CancelCircleIcon,
+        export_generated_1.QuestionCircleIcon,
+        export_generated_1.InformationIcon,
+        export_generated_1.SearchIcon,
+        export_generated_1.ReIcon,
+        export_generated_1.MoreIcon,
+        export_generated_1.MenuIcon,
+        export_generated_1.PersonFillIcon,
+        export_generated_1.CartFillIcon,
+        export_generated_1.FilterIcon,
+        export_generated_1.CalendarIcon,
+        export_generated_1.ShareIcon,
+        export_generated_1.StoreIcon,
+    ];
+    return (react_1.default.createElement(react_1.default.Fragment, null, [MIcon, SignIcon].map((list, idx1) => (react_1.default.createElement("div", { key: idx1, style: { display: 'flex', gap: '20px' } },
+        list.map((Comp, idx2) => (react_1.default.createElement(Comp, Object.assign({ key: idx2 }, props)))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null))))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component, Object.assign({}, props)),
+    args: {
+        fillColor: 'black',
+    },
+};
+exports.Story1.storyName = 'System Icon';

package/dist/Icon/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Icon/utils/generate-exports.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 () {
+    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 });
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const files = fs.readdirSync(path.join(__dirname, '../generated'));
+const generatedForExportIconCode = files
+    .filter((f) => f.includes('tsx'))
+    .map((f) => {
+    const fileName = f.split('.')[0];
+    return `export { ${fileName} as ${fileName}Icon } from './generated/${fileName}';`;
+})
+    .join('\n');
+fs.writeFile(path.join(__dirname, '../export.generated.ts'), [generatedForExportIconCode].join('\n'), (err) => {
+    if (err) {
+        throw err;
+    }
+    console.log('모든 아이콘 export 완료!');
+});

package/dist/components/Badge/BaseBadge/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export type BadgeTypes = 'dot' | 'new-short' | 'new-long' | 'number';
 type commonType = {
     readonly type: BadgeTypes;

package/dist/components/Badge/BaseBadge/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 });
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("../BaseBadge/index.styled"));
+const BaseBadge = (props) => {
+    const { type, testId } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        type === 'dot' && react_1.default.createElement(Styled.Dot, { "data-testid": testId }),
+        type === 'new-short' && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, "N"))),
+        type === 'new-long' && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, "NEW"))),
+        type === 'number' && (react_1.default.createElement(react_1.default.Fragment, null, props.value && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, props.value > 9 ? '9+' : props.value)))))));
+};
+exports.default = BaseBadge;

package/dist/components/Badge/BaseBadge/index.spec.d.ts

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

package/dist/components/Badge/BaseBadge/index.spec.js

@@ -0,0 +1,35 @@
+"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 index_1 = __importDefault(require("./index"));
+describe('Badge Components', () => {
+    const testId = 'notification-component-test-id';
+    test('Dot type의 컴포넌트가 디자인 의도에 맞게 잘 그려집니다', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "dot", testId: testId }));
+        expect(react_2.screen.getByTestId(testId)).toHaveStyle({
+            width: '5px',
+            height: '5px',
+            borderRadius: '50%',
+        });
+    });
+    test('New type의 컴포넌트가 디자인 의도에 맞게 잘 그려집니다', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "new-short" }));
+        expect(react_2.screen.getByText(`N`)).toBeInTheDocument();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- number 값이 1보다 작으면 그려지지 않음', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "dot", testId: testId }));
+        expect(react_2.screen.queryByTestId(testId)).toBeEmptyDOMElement();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- number 값이 1이상이면 숫자 나타남', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "number", value: 1 }));
+        expect(react_2.screen.getByText(`1`)).toBeInTheDocument();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- umber 값이 10이상이면 9+로 표시됨', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "number", value: 10 }));
+        expect(react_2.screen.getByText(`9+`)).toBeInTheDocument();
+    });
+});

package/dist/components/Badge/BaseBadge/index.styled.d.ts

@@ -1,12 +1,12 @@
-export declare const Dot: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Dot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Badge: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Badge: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BadgeContent: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeContent: 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/Badge/BaseBadge/index.styled.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeContent = exports.Badge = exports.Dot = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const core_1 = require("../../../core");
+const NoticationBgColor = core_1.basicColors.red400;
+const ContentHeight = '16px';
+const CommonStyle = (0, react_1.css) `
+	background-color: ${NoticationBgColor};
+`;
+exports.Dot = styled_1.default.div `
+	${CommonStyle};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`;
+exports.Badge = styled_1.default.div `
+	${CommonStyle};
+
+	height: ${ContentHeight};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+exports.BadgeContent = styled_1.default.div `
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${core_1.basicColors.white};
+	letter-spacing: -0.2px;
+`;

package/dist/components/Badge/IconBadge/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BaseBadgeProps } from '../BaseBadge';
 type IconBadgeProps = {
     children: React.ReactNode;

package/dist/components/Badge/IconBadge/index.js

@@ -0,0 +1,49 @@
+"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.IconBadge = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBadge_1 = __importDefault(require("../BaseBadge"));
+const Styled = __importStar(require("./index.styled"));
+const IconBadge = ({ children, badge }) => {
+    return (react_1.default.createElement(Styled.IconBadgeWrapper, { type: badge.type },
+        children,
+        react_1.default.createElement(Styled.AbsoluteWrapper, { className: Styled.className.absoluteWrapper },
+            react_1.default.createElement(BaseBadge_1.default, Object.assign({}, badge)))));
+};
+exports.IconBadge = IconBadge;

package/dist/components/Badge/IconBadge/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconBadgeProps } from '.';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+declare const meta: Meta<IconBadgeProps>;
+export default meta;
+export declare const IconBadge2: StoryObj<IconBadgeProps>;
+export declare const IconBadge1: StoryObj<IconBadgeProps>;
+export declare const IconBadgeNewLong: StoryObj<IconBadgeProps>;
+export declare const IconBadge3: StoryObj<IconBadgeProps>;
+export declare const IconBadge4: StoryObj<IconBadgeProps>;

package/dist/components/Badge/IconBadge/index.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBadge4 = exports.IconBadge3 = exports.IconBadgeNewLong = exports.IconBadge1 = exports.IconBadge2 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const Icon_1 = require("../../../Icon");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Badge/IconBadge',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const CommonIcon = Icon_1.AlarmFillIcon;
+exports.IconBadge2 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'dot' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge2.storyName = 'Icon + Dot Badge';
+exports.IconBadge1 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'new-short' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge1.storyName = 'Icon + New(Short) Badge';
+exports.IconBadgeNewLong = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'new-long' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadgeNewLong.storyName = 'Icon + New(Long) Badge';
+exports.IconBadge3 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'number', value: 8 } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge3.storyName = 'Icon + Number Badge (9 이하)';
+exports.IconBadge4 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'number', value: 10 } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge4.storyName = 'Icon + Number Badge (9 초과)';

package/dist/components/Badge/IconBadge/index.styled.d.ts

@@ -2,13 +2,13 @@ import { BadgeTypes } from '../BaseBadge';
 export declare const className: {
     absoluteWrapper: string;
 };
-export declare const AbsoluteWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const AbsoluteWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconBadgeWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconBadgeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     type: BadgeTypes;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Badge/IconBadge/index.styled.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBadgeWrapper = exports.AbsoluteWrapper = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.className = {
+    absoluteWrapper: 'absolute-wrapper',
+};
+exports.AbsoluteWrapper = styled_1.default.div `
+	position: absolute;
+`;
+const IconSize = 25; // TODO: constant 로 import 하기
+exports.IconBadgeWrapper = styled_1.default.div `
+	position: relative;
+	width: ${IconSize}px;
+	height: ${IconSize}px;
+
+	${({ type }) => {
+    switch (type) {
+        case 'dot':
+            return (0, react_1.css) `
+					.${exports.className.absoluteWrapper} {
+						left: 20px;
+						bottom: 21px;
+					}
+				`;
+        case 'new-short':
+        case 'new-long':
+        case 'number':
+            return (0, react_1.css) `
+					.${exports.className.absoluteWrapper} {
+						left: 13px;
+						bottom: 13px;
+					}
+				`;
+    }
+}}
+`;

package/dist/components/Badge/TextBadge/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BaseBadgeProps } from '../BaseBadge';
 type TextBadgeProps = {
     children: React.ReactNode;

package/dist/components/Badge/TextBadge/index.js

@@ -0,0 +1,48 @@
+"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.TextBadge = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBadge_1 = __importDefault(require("../BaseBadge"));
+const Styled = __importStar(require("./index.styled"));
+const TextBadge = ({ children, badge }) => {
+    return (react_1.default.createElement(Styled.TextBadgeWrapper, { type: badge.type },
+        children,
+        react_1.default.createElement(BaseBadge_1.default, Object.assign({}, badge))));
+};
+exports.TextBadge = TextBadge;

package/dist/components/Badge/TextBadge/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextBadgeProps } from '.';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+declare const meta: Meta<TextBadgeProps>;
+export default meta;
+export declare const TextBadge2: StoryObj<TextBadgeProps>;
+export declare const TextBadge1: StoryObj<TextBadgeProps>;
+export declare const TextBadgeNewLong: StoryObj<TextBadgeProps>;
+export declare const TextBadge3: StoryObj<TextBadgeProps>;
+export declare const TextBadge4: StoryObj<TextBadgeProps>;

package/dist/components/Badge/TextBadge/index.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBadge4 = exports.TextBadge3 = exports.TextBadgeNewLong = exports.TextBadge1 = exports.TextBadge2 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const core_1 = require("../../../core");
+const TEST_TEXT = '안녕하세요';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Badge/TextBadge',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.TextBadge2 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'dot' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge2.storyName = 'Text + Dot Badge';
+exports.TextBadge1 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'new-short' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge1.storyName = 'Text + New(Short) Badge';
+exports.TextBadgeNewLong = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'new-long' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge1.storyName = 'Text + New(Long) Badge';
+exports.TextBadge3 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'number', value: 8 } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge3.storyName = 'Text + Number Badge (9 이하)';
+exports.TextBadge4 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'number', value: 10 } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge4.storyName = 'Text + Number Badge (9 초과)';

package/dist/components/Badge/TextBadge/index.styled.d.ts

@@ -1,7 +1,7 @@
 import { BadgeTypes } from '../BaseBadge';
-export declare const TextBadgeWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const TextBadgeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     type: BadgeTypes;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Badge/TextBadge/index.styled.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBadgeWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.TextBadgeWrapper = styled_1.default.div `
+	display: flex;
+
+	${({ type }) => {
+    switch (type) {
+        case 'dot':
+            return (0, react_1.css) `
+					gap: 1px;
+					align-items: start;
+				`;
+        case 'new-short':
+        case 'new-long':
+        case 'number':
+            return (0, react_1.css) `
+					gap: 3px;
+					align-items: center;
+				`;
+    }
+}}
+`;

package/dist/components/Badge/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBadge = exports.IconBadge = void 0;
+const IconBadge_1 = require("./IconBadge");
+Object.defineProperty(exports, "IconBadge", { enumerable: true, get: function () { return IconBadge_1.IconBadge; } });
+const TextBadge_1 = require("./TextBadge");
+Object.defineProperty(exports, "TextBadge", { enumerable: true, get: function () { return TextBadge_1.TextBadge; } });