@pfct/purple 1.3.4-npm-test.1

package/dist/components/Tabs/TextTabs/index.styled.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scroll = exports.Fixed = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("../../../style/common");
+const TextStyles_1 = require("../../../core/TextStyles");
+const utils_1 = require("../../../utils");
+const Colors_1 = require("../../../core/Colors");
+exports.Fixed = {
+    Item: styled_1.default.div `
+		display: inline-block;
+		padding-top: 15px;
+		padding-bottom: 11px;
+		cursor: pointer;
+		text-align: center;
+
+		flex-grow: 1;
+
+		position: relative;
+		${({ active, colorType }) => active
+        ? (0, react_1.css) `
+						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
+				  `
+        : (0, react_1.css) `
+						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
+				  `};
+	`,
+    Wrapper: styled_1.default.div `
+		display: flex;
+		gap: 0px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
+	`,
+};
+exports.Scroll = {
+    Item: styled_1.default.div `
+		display: inline-block;
+		padding: 16px 0;
+		cursor: pointer;
+		text-align: center;
+
+		min-width: max-content;
+
+		position: relative;
+		${({ active, colorType }) => active
+        ? (0, react_1.css) `
+						${(0, TextStyles_1.headline6)({ color: (0, utils_1.textTabColorStyle)(colorType).on.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).on.barColor};
+				  `
+        : (0, react_1.css) `
+						${(0, TextStyles_1.title3)({ color: (0, utils_1.textTabColorStyle)(colorType).off.textColor })};
+						border-bottom: 2px solid ${(0, utils_1.textTabColorStyle)(colorType).off.barColor};
+				  `};
+	`,
+    Wrapper: styled_1.default.div `
+		${common_1.scrollStyle}
+
+		display: flex;
+		gap: 30px;
+
+		width: 100%;
+		background-color: transparent;
+
+		white-space: nowrap;
+
+		${(0, utils_1.Smaller)((0, react_1.css) `
+			/* Mobile) 에만 좌우 여백 추가  */
+			padding-left: 20px;
+			padding-right: 20px;
+		`)}
+
+		border-bottom: 1px solid ${Colors_1.basicColors.gray50};
+	`,
+};

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

@@ -0,0 +1,2 @@
+export * from './TextTabs';
+export * from './FillTabs';

package/dist/components/Tabs/index.js

@@ -0,0 +1,18 @@
+"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("./TextTabs"), exports);
+__exportStar(require("./FillTabs"), exports);

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PropsWithChildren } from '../../../types/react';
+type BaseTagStyleProps = {
+    backgroundColor: string;
+    fontColor: string;
+};
+type CommonTagProps = PropsWithChildren<{
+    /** 태그 배치시 줄바꿈 여부(기본값: 줄바꿈) */
+    inline?: boolean;
+}>;
+type BaseTagProps = PropsWithChildren<BaseTagStyleProps & CommonTagProps>;
+declare const BaseTag: React.FC<BaseTagProps>;
+export type { CommonTagProps };
+export { BaseTag };

package/dist/components/Tag/BaseTag/index.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.BaseTag = void 0;
+const react_1 = __importDefault(require("react"));
+const Typography_1 = require("../../../core/Typography");
+const Styled = __importStar(require("./index.styled"));
+const BaseTag = ({ children, backgroundColor, fontColor, inline }) => {
+    return (react_1.default.createElement(Styled.Wrapper, { inline: inline, backgroundColor: backgroundColor },
+        react_1.default.createElement(Typography_1.Title4, { color: fontColor }, children)));
+};
+exports.BaseTag = BaseTag;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CommonTagProps } from '.';
+export type BaseTagStyleProps = {
+    backgroundColor: string;
+    fontColor: string;
+};
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<BaseTagStyleProps, "backgroundColor"> & Pick<CommonTagProps, "inline">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Tag/BaseTag/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.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Wrapper = styled_1.default.div `
+	box-sizing: border-box;
+	width: max-content;
+	padding: 3px 8px;
+	border-radius: 30px;
+	display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
+	align-items: center;
+	justify-content: center;
+	background-color: ${({ backgroundColor }) => backgroundColor};
+`;

package/dist/components/Tag/BlueTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const BlueTag: React.FC<CommonTagProps>;
+export default BlueTag;

package/dist/components/Tag/BlueTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const BlueTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.blue50, fontColor: Colors_1.basicColors.blue400 }, props)));
+exports.default = BlueTag;

package/dist/components/Tag/GrayTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const GrayTag: React.FC<CommonTagProps>;
+export default GrayTag;

package/dist/components/Tag/GrayTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const GrayTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.gray50, fontColor: Colors_1.basicColors.gray600 }, props)));
+exports.default = GrayTag;

package/dist/components/Tag/GreenTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const GreenTag: React.FC<CommonTagProps>;
+export default GreenTag;

package/dist/components/Tag/GreenTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const GreenTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.green50, fontColor: Colors_1.basicColors.green400 }, props)));
+exports.default = GreenTag;

package/dist/components/Tag/LimeTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const LimeTag: React.FC<CommonTagProps>;
+export default LimeTag;

package/dist/components/Tag/LimeTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const LimeTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.lime50, fontColor: Colors_1.basicColors.lime400 }, props)));
+exports.default = LimeTag;

package/dist/components/Tag/PinkTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const PinkTag: React.FC<CommonTagProps>;
+export default PinkTag;

package/dist/components/Tag/PinkTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const PinkTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.pink50, fontColor: Colors_1.basicColors.pink400 }, props)));
+exports.default = PinkTag;

package/dist/components/Tag/PurpleTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const PurpleTag: React.FC<CommonTagProps>;
+export default PurpleTag;

package/dist/components/Tag/PurpleTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const PurpleTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.purple50, fontColor: Colors_1.basicColors.purple400 }, props)));
+exports.default = PurpleTag;

package/dist/components/Tag/RedTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const RedTag: React.FC<CommonTagProps>;
+export default RedTag;

package/dist/components/Tag/RedTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const RedTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.red50, fontColor: Colors_1.basicColors.red400 }, props)));
+exports.default = RedTag;

package/dist/components/Tag/YellowTag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CommonTagProps } from './BaseTag';
+declare const YellowTag: React.FC<CommonTagProps>;
+export default YellowTag;

package/dist/components/Tag/YellowTag.js

@@ -0,0 +1,10 @@
+"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 Colors_1 = require("../../core/Colors");
+const BaseTag_1 = require("./BaseTag");
+const YellowTag = (props) => (react_1.default.createElement(BaseTag_1.BaseTag, Object.assign({ backgroundColor: Colors_1.basicColors.yellow50, fontColor: Colors_1.basicColors.yellow400 }, props)));
+exports.default = YellowTag;

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

@@ -0,0 +1,10 @@
+export * from './BaseTag';
+import GrayTag from './GrayTag';
+import PurpleTag from './PurpleTag';
+import GreenTag from './GreenTag';
+import BlueTag from './BlueTag';
+import PinkTag from './PinkTag';
+import RedTag from './RedTag';
+import YellowTag from './YellowTag';
+import LimeTag from './LimeTag';
+export { GrayTag, PurpleTag, GreenTag, BlueTag, PinkTag, RedTag, YellowTag, LimeTag };

package/dist/components/Tag/index.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 __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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LimeTag = exports.YellowTag = exports.RedTag = exports.PinkTag = exports.BlueTag = exports.GreenTag = exports.PurpleTag = exports.GrayTag = void 0;
+__exportStar(require("./BaseTag"), exports);
+const GrayTag_1 = __importDefault(require("./GrayTag"));
+exports.GrayTag = GrayTag_1.default;
+const PurpleTag_1 = __importDefault(require("./PurpleTag"));
+exports.PurpleTag = PurpleTag_1.default;
+const GreenTag_1 = __importDefault(require("./GreenTag"));
+exports.GreenTag = GreenTag_1.default;
+const BlueTag_1 = __importDefault(require("./BlueTag"));
+exports.BlueTag = BlueTag_1.default;
+const PinkTag_1 = __importDefault(require("./PinkTag"));
+exports.PinkTag = PinkTag_1.default;
+const RedTag_1 = __importDefault(require("./RedTag"));
+exports.RedTag = RedTag_1.default;
+const YellowTag_1 = __importDefault(require("./YellowTag"));
+exports.YellowTag = YellowTag_1.default;
+const LimeTag_1 = __importDefault(require("./LimeTag"));
+exports.LimeTag = LimeTag_1.default;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const BlueTag_1 = __importDefault(require("./BlueTag"));
+describe('<BlueTag />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(BlueTag_1.default, null, "\uD655\uC778"));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CommonTagProps as TagProps } from '.';
+type Story = StoryObj<TagProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tag-0db63bd8b4bc46fb87149698695c9efa?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 타입, 상태와 같은 부가적인 정보를 강조하기 위하여 사용하며, 분류된 콘텐츠를 식별하는데 도움이 됩니다.
+ *
+ */
+declare const meta: Meta<TagProps>;
+export default meta;
+export declare const Story1: Story;

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

@@ -0,0 +1,45 @@
+"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/Tag-0db63bd8b4bc46fb87149698695c9efa?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 타입, 상태와 같은 부가적인 정보를 강조하기 위하여 사용하며, 분류된 콘텐츠를 식별하는데 도움이 됩니다.
+ *
+ */
+const meta = {
+    title: 'Component/Tag',
+    component: _1.PinkTag,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", null,
+        react_1.default.createElement(_1.PinkTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.BlueTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.PurpleTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.RedTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.LimeTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.GreenTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.YellowTag, Object.assign({}, props)),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(_1.GrayTag, Object.assign({}, props)))),
+    args: {
+        children: '태그',
+    },
+};
+exports.Story1.storyName = '태그';

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TagColorStyleParams } from '../../utils';
+export type TagStyleProps = TagColorStyleParams & {
+    /** 태그 배치시 줄바꿈 여부(기본값: 줄바꿈) */
+    inline?: boolean;
+};
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TagColorStyleParams & {
+    /** 태그 배치시 줄바꿈 여부(기본값: 줄바꿈) */
+    inline?: boolean | undefined;
+}, 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

@@ -0,0 +1,14 @@
+import React from 'react';
+type TitleProps = {
+    image?: React.ReactNode;
+    title: React.ReactNode;
+    subTitle?: string;
+    deletePaddingTop?: boolean;
+    subTitleColor?: string;
+};
+/**
+ * @props image size는 40을 기본으로 사용합니다.
+ */
+declare const Title: React.FC<TitleProps>;
+export type { TitleProps };
+export { Title };

package/dist/components/Title/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.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;