@pfct/purple 1.3.8-rc.0 → 1.3.8-rc.1

package/dist/components/NavigationBar/BottomNavigationBar/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IconProps } from '../../../Icon';
+type BottomNavigationBarProps = {
+    value: string;
+    list: {
+        Icon: React.FC<IconProps>;
+        label: string;
+        value: string;
+    }[];
+    onChange: (value: string) => void;
+};
+declare const BottomNavigationBar: React.FC<BottomNavigationBarProps>;
+export type { BottomNavigationBarProps };
+export { BottomNavigationBar };

package/dist/components/NavigationBar/BottomNavigationBar/index.js

@@ -0,0 +1,44 @@
+"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.BottomNavigationBar = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const core_1 = require("../../../core");
+const BottomNavigationBar = (props) => {
+    const count = props.list.length;
+    return (react_1.default.createElement(Styled.Container, { count: count }, props.list.map((item, key) => {
+        const fillColor = props.value === item.value ? core_1.basicColors.gray900 : core_1.basicColors.gray200;
+        return (react_1.default.createElement(Styled.MenuItemWrapper, { key: key, onClick: () => {
+                props.onChange(item.value);
+            } },
+            react_1.default.createElement(item.Icon, { fillColor: fillColor }),
+            react_1.default.createElement(Styled.Label, { fontColor: fillColor }, item.label)));
+    })));
+};
+exports.BottomNavigationBar = BottomNavigationBar;

package/dist/components/NavigationBar/BottomNavigationBar/index.stories.d.ts

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

package/dist/components/NavigationBar/BottomNavigationBar/index.stories.js

@@ -0,0 +1,43 @@
+"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 meta = {
+    title: 'Component/NavigationBar/BottomNavigationBar(개발중)',
+    component: _1.BottomNavigationBar,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const BottomNavigationBarComponent = (props) => {
+    const [value, setValue] = react_1.default.useState(props.value);
+    return react_1.default.createElement(_1.BottomNavigationBar, Object.assign({}, props, { value: value, onChange: setValue }));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(BottomNavigationBarComponent, Object.assign({}, props)),
+    args: {
+        value: '0',
+        list: [
+            {
+                Icon: Icon_1.PlusMIcon,
+                label: '서비스',
+                value: '0',
+            },
+            {
+                Icon: Icon_1.AlarmFillIcon,
+                label: '알림',
+                value: '1',
+            },
+            {
+                Icon: Icon_1.MenuIcon,
+                label: '메뉴',
+                value: '2',
+            },
+        ],
+    },
+};

package/dist/components/NavigationBar/BottomNavigationBar/index.styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    count: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MenuItemWrapper: 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 Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    fontColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavigationBar/BottomNavigationBar/index.styled.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.MenuItemWrapper = exports.Container = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../../core");
+exports.Container = styled_1.default.div `
+	border-top: 1px solid ${core_1.basicColors.gray200};
+	background-color: ${core_1.basicColors.white};
+
+	display: grid;
+	grid-template-columns: repeat(${({ count }) => count}, 1fr);
+`;
+exports.MenuItemWrapper = styled_1.default.div `
+	padding: 5px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;
+exports.Label = styled_1.default.div `
+	/* TODO: caption style */
+
+	padding-top: 5px;
+	color: ${({ fontColor }) => fontColor};
+`;

package/dist/components/NavigationBar/PageNavigationBar/constant.d.ts

@@ -0,0 +1,7 @@
+export type NavigationContentColor = 'white' | 'gray';
+export declare const CONTENT_COLOR_MAP: Record<NavigationContentColor, {
+    icon: string;
+    title: string;
+    rightText: string;
+    backgroundColor: string;
+}>;

package/dist/components/NavigationBar/PageNavigationBar/constant.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTENT_COLOR_MAP = void 0;
+const Colors_1 = require("../../../core/Colors");
+exports.CONTENT_COLOR_MAP = {
+    white: {
+        icon: Colors_1.basicColors.white,
+        title: Colors_1.basicColors.white,
+        rightText: Colors_1.basicColors.white,
+        backgroundColor: Colors_1.basicColors.gray900,
+    },
+    gray: {
+        icon: Colors_1.basicColors.gray900,
+        title: Colors_1.basicColors.gray900,
+        rightText: Colors_1.basicColors.gray700,
+        backgroundColor: Colors_1.basicColors.white,
+    },
+};

package/dist/components/NavigationBar/PageNavigationBar/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconProps } from '../../../Icon';
+import { NavigationContentColor } from './constant';
+type BaseNavigationProps = {
+    title?: string;
+    titleColor: string;
+    backgroundColor: string;
+    leftChildren: React.ReactNode;
+    rightChildren: React.ReactNode;
+    zIndex?: number;
+};
+type PageNavigationProps = Pick<BaseNavigationProps, 'title' | 'zIndex'> & {
+    contentColor: NavigationContentColor;
+    hasBackgroundColor: boolean;
+    leftArea?: {
+        type: 'backIcon';
+        handleClickButton: () => void;
+    };
+    rightArea?: {
+        type: 'closeIcon';
+        handleClickButton: () => void;
+    } | {
+        type: 'icon';
+        children: React.FC<IconProps>;
+        handleClickButton: () => void;
+    } | {
+        type: 'text';
+        children: string;
+        handleClickButton: () => void;
+    };
+};
+declare const PageNavigationBar: React.FC<PageNavigationProps>;
+export type { PageNavigationProps };
+export { PageNavigationBar };

package/dist/components/NavigationBar/PageNavigationBar/index.js

@@ -0,0 +1,88 @@
+"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.PageNavigationBar = void 0;
+const react_1 = __importStar(require("react"));
+const Icon_1 = require("../../../Icon");
+const Typography_1 = require("../../../core/Typography");
+const constant_1 = require("./constant");
+const style_constants_1 = require("../../../constants/style.constants");
+const Styled = __importStar(require("./index.styled"));
+const BaseNavigation = ({ title, titleColor, leftChildren, rightChildren, zIndex = style_constants_1.zIndex.gnb, backgroundColor, }) => {
+    return (react_1.default.createElement(Styled.Wrapper, { backgroundColor: backgroundColor, zIndex: zIndex },
+        leftChildren && react_1.default.createElement(Styled.LeftChildrenWrapper, null, leftChildren),
+        title && react_1.default.createElement(Typography_1.Headline5, { color: titleColor }, title),
+        rightChildren && react_1.default.createElement(Styled.RightChildrenWrapper, null, rightChildren)));
+};
+const PageNavigationBar = (_a) => {
+    var { contentColor, hasBackgroundColor, leftArea, rightArea } = _a, commonProps = __rest(_a, ["contentColor", "hasBackgroundColor", "leftArea", "rightArea"]);
+    const iconColor = constant_1.CONTENT_COLOR_MAP[contentColor].icon;
+    const titleColor = constant_1.CONTENT_COLOR_MAP[contentColor].title;
+    const rightTextColor = constant_1.CONTENT_COLOR_MAP[contentColor].rightText;
+    const backgroundColor = constant_1.CONTENT_COLOR_MAP[contentColor].backgroundColor;
+    const leftChildren = (0, react_1.useMemo)(() => {
+        const handleClickButton = () => {
+            leftArea === null || leftArea === void 0 ? void 0 : leftArea.handleClickButton();
+        };
+        switch (leftArea === null || leftArea === void 0 ? void 0 : leftArea.type) {
+            case 'backIcon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Icon_1.ChevronLeftMIcon, { fillColor: titleColor })));
+            default:
+                return;
+        }
+    }, [leftArea, titleColor]);
+    const rightChildren = (0, react_1.useMemo)(() => {
+        const handleClickButton = () => {
+            rightArea === null || rightArea === void 0 ? void 0 : rightArea.handleClickButton();
+        };
+        switch (rightArea === null || rightArea === void 0 ? void 0 : rightArea.type) {
+            case 'closeIcon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Icon_1.CancelMIcon, { fillColor: iconColor })));
+            case 'icon':
+                return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(rightArea.children, { fillColor: titleColor })));
+            case 'text':
+                return (react_1.default.createElement(Styled.TextWrapper, { onClick: handleClickButton },
+                    react_1.default.createElement(Typography_1.Title3, { color: rightTextColor }, rightArea.children)));
+            default:
+                return;
+        }
+    }, [iconColor, titleColor, rightTextColor, rightArea]);
+    return (react_1.default.createElement(BaseNavigation, Object.assign({ backgroundColor: hasBackgroundColor ? backgroundColor : 'transparent', leftChildren: leftChildren, titleColor: titleColor, rightChildren: rightChildren }, commonProps)));
+};
+exports.PageNavigationBar = PageNavigationBar;

package/dist/components/NavigationBar/PageNavigationBar/index.spec.d.ts

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

package/dist/components/NavigationBar/PageNavigationBar/index.spec.js

@@ -0,0 +1,20 @@
+"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 = {
+    contentColor: 'gray',
+    hasBackgroundColor: true,
+};
+describe('<PageNavigationBar />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/NavigationBar/PageNavigationBar/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PageNavigationProps } from '.';
+type Story = StoryObj<PageNavigationProps>;
+/**
+ * updated 230523
+ *
+ * 현재 사용자가 위치한 화면의 정보와 액션 기능을 담고 있는 컴포넌트입니다.
+ *
+ */
+declare const meta: Meta<PageNavigationProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;
+export declare const Story3: Story;
+export declare const Story4: Story;
+export declare const Story5: Story;
+export declare const Story6: Story;
+export declare const Story7: Story;

package/dist/components/NavigationBar/PageNavigationBar/index.stories.js

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story7 = exports.Story6 = exports.Story5 = exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * 현재 사용자가 위치한 화면의 정보와 액션 기능을 담고 있는 컴포넌트입니다.
+ *
+ */
+const meta = {
+    title: 'Component/NavigationBar/PageNavigationBar(개발중)',
+    component: _1.PageNavigationBar,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story1.storyName = '배경컬러 있음';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: false,
+        title: '타이틀',
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story2.storyName = '배경컬러 없음';
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+    },
+};
+exports.Story3.storyName = 'leftArea / rightArea - 없음';
+exports.Story4 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'text',
+            children: '텍스트',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story4.storyName = 'rightArea - Text';
+exports.Story5 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story5.storyName = 'rightArea - 취소 아이콘';
+exports.Story6 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'white',
+        hasBackgroundColor: true,
+        title: '타이틀',
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story6.storyName = 'contentColor - white';
+exports.Story7 = {
+    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
+        react_1.default.createElement(_1.PageNavigationBar, Object.assign({}, props)))),
+    args: {
+        contentColor: 'gray',
+        hasBackgroundColor: true,
+        leftArea: {
+            type: 'backIcon',
+            handleClickButton: () => {
+                console.log('left button click');
+            },
+        },
+        rightArea: {
+            type: 'closeIcon',
+            handleClickButton: () => {
+                console.log('right button click');
+            },
+        },
+    },
+};
+exports.Story7.storyName = 'title 없음';

package/dist/components/NavigationBar/PageNavigationBar/index.styled.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+type WrapperProps = {
+    backgroundColor: string;
+    zIndex?: number;
+};
+type ClickableProps = {
+    onClick?: () => void;
+};
+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 LeftChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ClickableProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const RightChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ClickableProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+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 TextWrapper: import("@emotion/styled").StyledComponent<{
+    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 {};

package/dist/components/NavigationBar/PageNavigationBar/index.styled.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextWrapper = exports.IconWrapper = exports.RightChildrenWrapper = exports.LeftChildrenWrapper = exports.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Wrapper = styled_1.default.div `
+	width: 100%;
+	height: 55px;
+	box-sizing: border-box;
+	top: ${({ zIndex }) => (zIndex && zIndex > 0 ? '0' : 'initial')};
+	position: ${({ zIndex }) => (zIndex && zIndex > 0 ? 'sticky' : 'relative')};
+	z-index: ${({ zIndex }) => zIndex || 'initial'};
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	background-color: ${({ backgroundColor }) => backgroundColor};
+
+	padding: 15px 0;
+	text-overflow: ellipsis;
+`;
+const CommonChildrenWrapper = styled_1.default.div `
+	position: absolute;
+	top: 0;
+	bottom: 0;
+
+	cursor: ${({ onClick }) => (onClick ? 'pointer' : 'auto')};
+`;
+exports.LeftChildrenWrapper = (0, styled_1.default)(CommonChildrenWrapper) `
+	left: 15px;
+`;
+exports.RightChildrenWrapper = (0, styled_1.default)(CommonChildrenWrapper) `
+	right: 15px;
+`;
+// Extra
+const VerticalCenterizeWrapper = styled_1.default.div `
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+exports.IconWrapper = VerticalCenterizeWrapper;
+exports.TextWrapper = (0, styled_1.default)(VerticalCenterizeWrapper) `
+	margin-right: 5px;
+`;

package/dist/components/NavigationBar/TitleNavigationBar/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IconProps } from '../../../Icon';
+type TitleNavigationBarProps = {
+    title: string;
+    iconList?: {
+        Icon: React.FC<IconProps>;
+        handleClick: () => void;
+    }[];
+    contentsColor: 'white' | 'gray';
+    hasBackgroundColor: boolean;
+};
+declare const TitleNavigationBar: React.FC<TitleNavigationBarProps>;
+export type { TitleNavigationBarProps };
+export { TitleNavigationBar };

package/dist/components/NavigationBar/TitleNavigationBar/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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleNavigationBar = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../../../core");
+const Styled = __importStar(require("./index.styled"));
+const TitleNavigationBar = (props) => {
+    var _a;
+    const styleProps = (0, react_1.useMemo)(() => {
+        let fontColor = '';
+        let backgroundColor = '';
+        let iconColor = '';
+        switch (props.contentsColor) {
+            case 'white':
+                fontColor = core_1.basicColors.white;
+                backgroundColor = core_1.basicColors.gray900;
+                iconColor = core_1.basicColors.white;
+                break;
+            case 'gray':
+                fontColor = core_1.basicColors.gray900;
+                backgroundColor = core_1.basicColors.white;
+                iconColor = core_1.basicColors.gray200;
+                break;
+        }
+        return {
+            fontColor,
+            backgroundColor: props.hasBackgroundColor ? backgroundColor : 'transparent',
+            iconColor,
+        };
+    }, [props]);
+    return (react_1.default.createElement(Styled.Container, Object.assign({}, styleProps),
+        react_1.default.createElement(Styled.Title, Object.assign({}, styleProps), props.title),
+        props.iconList && (react_1.default.createElement(Styled.IconListWrapper, Object.assign({}, styleProps), (_a = props.iconList) === null || _a === void 0 ? void 0 : _a.map((item, index) => (react_1.default.createElement(Styled.IconWrapper, { key: index, onClick: item.handleClick },
+            react_1.default.createElement(item.Icon, { fillColor: styleProps.iconColor }))))))));
+};
+exports.TitleNavigationBar = TitleNavigationBar;

package/dist/components/NavigationBar/TitleNavigationBar/index.stories.d.ts

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

package/dist/components/NavigationBar/TitleNavigationBar/index.stories.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.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const Icon_1 = require("../../../Icon");
+const meta = {
+    title: 'Component/NavigationBar/TitleNavigationBar(개발중)',
+    component: _1.TitleNavigationBar,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.TitleNavigationBar, Object.assign({}, props)),
+    args: {
+        title: '타이틀',
+        iconList: [
+            {
+                Icon: Icon_1.PlusMIcon,
+                handleClick: () => {
+                    console.log('handleClick');
+                },
+            },
+            {
+                Icon: Icon_1.AlarmFillIcon,
+                handleClick: () => {
+                    console.log('handleClick');
+                },
+            },
+            {
+                Icon: Icon_1.MenuIcon,
+                handleClick: () => {
+                    console.log('handleClick');
+                },
+            },
+        ],
+        hasBackgroundColor: true,
+        contentsColor: 'gray',
+    },
+};
+exports.Story1.storyName = '아이콘 3개';
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(_1.TitleNavigationBar, Object.assign({}, props)),
+    args: {
+        title: '타이틀',
+        hasBackgroundColor: true,
+        contentsColor: 'white',
+    },
+};
+exports.Story2.storyName = '아이콘 0개';

package/dist/components/NavigationBar/TitleNavigationBar/index.styled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+type StyleProps = {
+    fontColor: string;
+    backgroundColor: string;
+    iconColor: string;
+};
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconListWrapper: 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 {};

package/dist/components/NavigationBar/TitleNavigationBar/index.styled.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = exports.IconListWrapper = exports.Container = exports.Title = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../../core");
+exports.Title = styled_1.default.div `
+	${({ fontColor }) => (0, core_1.headline3)({ color: fontColor })}
+`;
+exports.Container = styled_1.default.div `
+	display: flex;
+	justify-content: space-between;
+	padding: 30px 20px 15px 25px;
+	background-color: ${({ backgroundColor }) => backgroundColor};
+`;
+exports.IconListWrapper = styled_1.default.div `
+	display: flex;
+	align-items: center;
+	gap: 15px;
+`;
+exports.IconWrapper = styled_1.default.div `
+	cursor: pointer;
+`;

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

@@ -0,0 +1,3 @@
+export * from './PageNavigationBar';
+export * from './TitleNavigationBar';
+export * from './BottomNavigationBar';

package/dist/components/NavigationBar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageNavigationBar"), exports);
+__exportStar(require("./TitleNavigationBar"), exports);
+__exportStar(require("./BottomNavigationBar"), exports);

package/dist/library/ShareUI/Buttons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ButtonProps = {
+    handleClickButton: () => void;
+};
+export declare const KakaoButton: React.FC<ButtonProps>;
+export declare const ShareButton: React.FC<ButtonProps>;
+export {};

package/dist/library/ShareUI/Buttons.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareButton = exports.KakaoButton = void 0;
+const react_1 = __importDefault(require("react"));
+const KakaoButton = ({ handleClickButton }) => (react_1.default.createElement("svg", { onClick: handleClickButton, width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("g", { id: "Kakaotalk_Icon_Button" },
+        react_1.default.createElement("circle", { id: "Ellipse 1", cx: "20", cy: "20", r: "20", fill: "#F9E000" }),
+        react_1.default.createElement("path", { id: "Vector", d: "M20.0006 10.7233C14.0824 10.7233 9.28516 14.3347 9.28516 18.7921C9.28516 21.6924 11.3166 24.2343 14.3677 25.6565C14.1431 26.4524 13.5564 28.5433 13.439 28.9904C13.2933 29.5454 13.6515 29.5377 13.8882 29.3893C14.0723 29.2717 16.824 27.4892 18.0117 26.7202C18.6571 26.8108 19.3208 26.859 20.0006 26.859C25.9188 26.859 30.7161 23.2476 30.7161 18.7921C30.7161 14.3366 25.9188 10.7233 20.0006 10.7233Z", fill: "#371C1D" }))));
+exports.KakaoButton = KakaoButton;
+const ShareButton = ({ handleClickButton }) => (react_1.default.createElement("svg", { onClick: handleClickButton, width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("g", { id: "Share_Icon_Button" },
+        react_1.default.createElement("circle", { id: "Ellipse 1", cx: "20", cy: "20", r: "20", fill: "#D0D8DC" }),
+        react_1.default.createElement("g", { id: "link icon" },
+            react_1.default.createElement("path", { id: "Rectangle 3961 (Stroke)", fillRule: "evenodd", clipRule: "evenodd", d: "M13.7902 22.6446C12.8058 23.629 12.8058 25.225 13.7902 26.2094C14.7746 27.1937 16.3706 27.1937 17.355 26.2094L20.1367 23.4277C20.6639 22.9005 21.5187 22.9005 22.0459 23.4277C22.5731 23.9549 22.5731 24.8096 22.0459 25.3369L19.2642 28.1186C17.2254 30.1574 13.9198 30.1574 11.881 28.1185C9.84223 26.0797 9.84223 22.7742 11.881 20.7354L14.6627 17.9537C15.1899 17.4265 16.0447 17.4265 16.5719 17.9537C17.0991 18.4809 17.0991 19.3357 16.5719 19.8629L13.7902 22.6446Z", fill: "white" }),
+            react_1.default.createElement("path", { id: "Rectangle 3961 (Stroke)_2", fillRule: "evenodd", clipRule: "evenodd", d: "M22.6434 13.791C23.6278 12.8067 25.2238 12.8067 26.2082 13.791C27.1926 14.7754 27.1926 16.3714 26.2082 17.3558L23.4265 20.1375C22.8993 20.6647 22.8993 21.5195 23.4265 22.0467C23.9537 22.5739 24.8085 22.5739 25.3357 22.0467L28.1174 19.265C30.1562 17.2262 30.1562 13.9207 28.1174 11.8819C26.0786 9.84305 22.773 9.84305 20.7342 11.8819L17.9525 14.6635C17.4253 15.1908 17.4253 16.0455 17.9525 16.5727C18.4797 17.0999 19.3345 17.0999 19.8617 16.5727L22.6434 13.791Z", fill: "white" }),
+            react_1.default.createElement("rect", { id: "Rectangle 3962", x: "15.3301", y: "22.8126", width: "10.5061", height: "2.62656", rx: "1.31328", transform: "rotate(-45 15.3301 22.8126)", fill: "white" })))));
+exports.ShareButton = ShareButton;

package/dist/library/ShareUI/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as Styled from './index.styled';
+type ShareUIBaseProps = {
+    title: string;
+    textToCopy: string;
+    description?: string;
+};
+declare const ShareUIBase: React.FC<ShareUIBaseProps>;
+type ShareUIListProps = ShareUIBaseProps;
+declare const ShareUIList: React.FC<ShareUIListProps>;
+type ShareUICardProps = ShareUIBaseProps & Styled.CardContainerStyleProps;
+declare const ShareUICard: React.FC<ShareUICardProps>;
+export type { ShareUIListProps, ShareUICardProps };
+export { ShareUIBase, ShareUIList, ShareUICard };

package/dist/library/ShareUI/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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareUICard = exports.ShareUIList = exports.ShareUIBase = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const Buttons_1 = require("./Buttons");
+const ShareUIBase = ({ title, description, textToCopy }) => {
+    const handleClickKaKaoButton = () => {
+        console.log('TODO: 카카오 공유하기');
+    };
+    const handleClickLinkButton = () => {
+        (0, copy_to_clipboard_1.default)(textToCopy);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Styled.TitleWrapper, null,
+            description && react_1.default.createElement(Styled.SubTitle, null, description),
+            react_1.default.createElement(Styled.Title, null, title)),
+        react_1.default.createElement(Styled.IconWrapper, null,
+            react_1.default.createElement(Buttons_1.KakaoButton, { handleClickButton: handleClickKaKaoButton }),
+            react_1.default.createElement(Buttons_1.ShareButton, { handleClickButton: handleClickLinkButton }))));
+};
+exports.ShareUIBase = ShareUIBase;
+const ShareUIList = (props) => {
+    return (react_1.default.createElement(Styled.ListContainer, null,
+        react_1.default.createElement(ShareUIBase, Object.assign({}, props))));
+};
+exports.ShareUIList = ShareUIList;
+const ShareUICard = (props) => {
+    return (react_1.default.createElement(Styled.CardContainer, { background: props.background },
+        react_1.default.createElement(ShareUIBase, Object.assign({}, props))));
+};
+exports.ShareUICard = ShareUICard;

package/dist/library/ShareUI/index.stories.d.ts

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

package/dist/library/ShareUI/index.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = exports.Story2 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const meta = {
+    title: 'Library/ShareUI(개발중)',
+    component: _1.ShareUICard,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(_1.ShareUICard, Object.assign({}, props)),
+    args: {
+        title: '최대 두 줄까지 작성 권장',
+        description: '설명 최대 한 줄 권장(optional)',
+        textToCopy: `[챌린지] 요즘 용돈 버는 법, 알려드릴게요!\nhttps://naver.com`,
+        background: 'gray',
+    },
+};
+exports.Story2.storyName = 'ShareUICard';
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.ShareUIList, Object.assign({}, props)),
+    args: {
+        title: '최대 두 줄까지 작성 권장',
+        textToCopy: `[챌린지] 요즘 용돈 버는 법, 알려드릴게요!\nhttps://naver.com`,
+    },
+};
+exports.Story1.storyName = 'ShareUIList';

package/dist/library/ShareUI/index.styled.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export declare const TitleWrapper: 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;
+}, {}, {}>;
+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 CommonContainer: 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 ListContainer: import("@emotion/styled").StyledComponent<{
+    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 type CardContainerStyleProps = {
+    background: 'default' | 'gray';
+};
+export declare const CardContainer: import("@emotion/styled").StyledComponent<{
+    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;
+} & CardContainerStyleProps, {}, {}>;

package/dist/library/ShareUI/index.styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardContainer = exports.ListContainer = exports.CommonContainer = exports.IconWrapper = exports.SubTitle = exports.Title = exports.TitleWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../core");
+const utils_1 = require("../../utils");
+exports.TitleWrapper = styled_1.default.div `
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`;
+exports.Title = (0, styled_1.default)(core_1.Headline6) `
+	color: ${core_1.basicColors.gray900};
+`;
+exports.SubTitle = (0, styled_1.default)(core_1.Title4) `
+	color: ${core_1.basicColors.gray600};
+	margin-bottom: 5px;
+`;
+exports.IconWrapper = styled_1.default.div `
+	display: flex;
+	gap: 15px;
+	align-items: center;
+
+	svg {
+		cursor: pointer;
+	}
+`;
+exports.CommonContainer = styled_1.default.div `
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+`;
+exports.ListContainer = (0, styled_1.default)(exports.CommonContainer) `
+	padding: 20px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 20px 80px;
+	`)}
+`;
+exports.CardContainer = (0, styled_1.default)(exports.CommonContainer) `
+	padding: 20px;
+	border-radius: 10px;
+
+	${({ background }) => {
+    switch (background) {
+        case 'gray':
+            return (0, react_1.css) `
+					background-color: ${core_1.basicColors.gray25};
+				`;
+        default:
+            return (0, react_1.css) `
+					background-color: ${core_1.basicColors.white};
+				`;
+    }
+}}
+`;

package/dist/library/Spacing/index.d.ts

@@ -3,5 +3,5 @@ interface SpacingProps {
     spaceNumber: number;
 }
 declare const Spacing: React.FC<SpacingProps>;
-export { SpacingProps };
+export type { SpacingProps };
 export { Spacing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pfct/purple",
-  "version": "1.3.8-rc.0",
+  "version": "1.3.8-rc.1",
   "description": "design system for PFCT web service",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",