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

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

@@ -5,105 +5,105 @@ interface BasicLayoutParentProps extends BasicLayoutBodyCenterProps {
     hasGlobalLayoutHeader: boolean;
 }
 export declare const BasicLayoutBase: {
-    ParentWrapper: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    ParentWrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    } & BasicLayoutParentProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    ChildrenWrapper: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    } & BasicLayoutParentProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    ChildrenWrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    } & BasicLayoutBodyCenterProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Header: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    } & BasicLayoutBodyCenterProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Body: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Footer: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Footer: 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>, {}>;
 };
 export declare const PureLayoutBase: {
-    ParentWrapper: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    ParentWrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
-    }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    VerticalHorizontalCenterBody: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    VerticalHorizontalCenterBody: 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>, {}>;
 };
 export declare const defaultLRPadding: {
     larger: number;
     smaller: number;
 };
-export declare const SidePaddingBody: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const SidePaddingBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const CenterBody: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const CenterBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 interface ImageProps {
     width: number;
     height: number;
 }
-export declare const ImgBase: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const ImgBase: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & ImageProps, import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const MarginTopNoHeader: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & ImageProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const MarginTopNoHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginTopHasHeader: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginTopHasHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginBottomNoFooter: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginBottomNoFooter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MarginBottomHasFooter: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MarginBottomHasFooter: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     backgroundColor?: string;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ButtonWrapperInPc: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ButtonWrapperInPc: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ATagButton: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ATagButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
-export declare const ContentsPadding: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const ContentsPadding: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContentsVerticalPadding: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentsVerticalPadding: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StickBottomWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StickBottomWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TooltipButtonWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TooltipButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InformationIconWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InformationIconWrapper: 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>, {}>;
 export {};

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

@@ -0,0 +1,197 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformationIconWrapper = exports.TooltipButtonWrapper = exports.StickBottomWrapper = exports.ContentsVerticalPadding = exports.ContentsPadding = exports.ATagButton = exports.ButtonWrapperInPc = exports.MarginBottomHasFooter = exports.MarginBottomNoFooter = exports.MarginTopHasHeader = exports.MarginTopNoHeader = exports.ImgBase = exports.CenterBody = exports.SidePaddingBody = exports.defaultLRPadding = exports.PureLayoutBase = exports.BasicLayoutBase = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const core_1 = require("../../core");
+const index_constant_1 = require("../GNB/index.constant");
+const utils_1 = require("../../utils");
+/* ==================== Layout, Wrapper ==================== */
+const getFullHeightStyle = (deletePx = 0) => (0, react_1.css) `
+	height: calc(100vh - ${deletePx}px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+	height: calc(100vh - ${deletePx}px - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
+`;
+exports.BasicLayoutBase = {
+    ParentWrapper: styled_1.default.div `
+		${({ hasGlobalLayoutHeader }) => hasGlobalLayoutHeader ? getFullHeightStyle(index_constant_1.GNB_HEIGHT.mobile) : getFullHeightStyle()}
+
+		${({ bodyCenterizing }) => !bodyCenterizing &&
+        (0, react_1.css) `
+				height: inherit;
+			`}
+
+		${(0, utils_1.Larger)((0, react_1.css) `
+			/* scroll 생기기 전에는 sticky > relative 로 자리차지 */
+			height: initial;
+			padding: 80px 0;
+		`)};
+	`,
+    ChildrenWrapper: styled_1.default.div `
+		width: 100%;
+		/* <Card /> spec 에서 disabled, click 등의 속성 없앰 */
+
+		box-sizing: border-box;
+		background-color: ${core_1.basicColors.white};
+		border-radius: 20px;
+
+		/* [flex] stretch component 를 위해 우선 적용 */
+		${({ bodyCenterizing }) => bodyCenterizing &&
+        (0, react_1.css) `
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			`}
+
+		${(0, utils_1.Larger)((0, react_1.css) `
+			width: 600px;
+			margin: 0 auto;
+			border-radius: 20px;
+			box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.04);
+
+			/* [flex] 초기화 */
+			flex: initial;
+			/*  bodyCenterizing 초기화 */
+			height: initial;
+		`)}
+	`,
+    Header: styled_1.default.div ``,
+    Body: styled_1.default.div ``,
+    Footer: styled_1.default.div ``,
+};
+exports.PureLayoutBase = {
+    ParentWrapper: styled_1.default.div `
+		${getFullHeightStyle()}
+	`,
+    VerticalHorizontalCenterBody: styled_1.default.div `
+		${getFullHeightStyle()}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	`,
+};
+/* ==================== Body ==================== */
+exports.defaultLRPadding = {
+    larger: 80,
+    smaller: 20,
+};
+exports.SidePaddingBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0 ${exports.defaultLRPadding.larger}px;
+	`)};
+`;
+exports.CenterBody = (0, styled_1.default)(exports.BasicLayoutBase.Body) `
+	/* 주의사항 : BasicLayout.props bodyCenterizing={true} 를 넘겨줘야합니다 */
+	/* 세로 - full 차지 */
+	flex-grow: 1;
+
+	/* 박스 내 가로/세로 중앙 */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+`;
+exports.ImgBase = styled_1.default.img `
+	width: ${({ width }) => width}px;
+	height: ${({ height }) => height}px;
+`;
+/* ==================== Footer ==================== */
+const MARGIN_TOP_NO_HEADER_IN_MOBILE = 25;
+exports.MarginTopNoHeader = styled_1.default.div `
+	width: 100%;
+	height: ${MARGIN_TOP_NO_HEADER_IN_MOBILE}px; /** TODO: 임시, 정확한 수치 찾기 */
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: 80px;
+	`)}
+`;
+exports.MarginTopHasHeader = styled_1.default.div `
+	width: 100%;
+	height: ${index_constant_1.GNB_HEIGHT.mobile}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: ${index_constant_1.GNB_HEIGHT.pc}px;
+	`)}
+`;
+exports.MarginBottomNoFooter = styled_1.default.div `
+	width: 100%;
+	min-height: 80px; /* Body = flex-grow 에 대응하기위해 단순 height 로는 안됨 */
+
+	/** pc, mobile 공통 */
+`;
+exports.MarginBottomHasFooter = styled_1.default.div `
+	width: 100%;
+	height: 150px;
+
+	${({ backgroundColor }) => backgroundColor && `background-color:${backgroundColor}`};
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		width: auto;
+		height: auto;
+	`)}
+`;
+//StickBottomWrapper 랑 정리 필요
+exports.ButtonWrapperInPc = styled_1.default.div `
+	padding: 60px ${exports.defaultLRPadding.larger}px 80px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`;
+exports.ATagButton = styled_1.default.a `
+	color: transparent;
+	text-decoration: none;
+	width: 100%;
+`;
+exports.ContentsPadding = styled_1.default.div `
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 0 ${exports.defaultLRPadding.larger}px;
+	`)}
+`;
+exports.ContentsVerticalPadding = styled_1.default.div `
+	height: 15px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		height: 60px;
+	`)}
+`;
+exports.StickBottomWrapper = styled_1.default.div `
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	padding: 0 ${exports.defaultLRPadding.smaller}px;
+	position: fixed;
+	bottom: 20px;
+
+	${(0, utils_1.Larger)((0, react_1.css) `
+		padding: 60px ${exports.defaultLRPadding.larger}px 80px;
+		position: static;
+	`)}
+`;
+exports.TooltipButtonWrapper = styled_1.default.div `
+	.tippy-content {
+		background-color: ${core_1.basicColors.gray900};
+		color: ${core_1.basicColors.white};
+	}
+	.tippy-arrow:before {
+		border-top-color: ${core_1.basicColors.gray900} !important;
+	}
+
+	width: 100%;
+`;
+exports.InformationIconWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;

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

@@ -1,18 +1,18 @@
-import { default as React } from 'react';
+import React from 'react';
 import * as Styled from './index.styled';
 declare const Flex: React.ExoticComponent<{
     children?: React.ReactNode | undefined;
 }> & {
-    Row: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Row: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     } & Styled.FlexContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Column: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Column: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     } & Styled.FlexContainerProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-    Item: import('@emotion/styled').StyledComponent<{
-        theme?: import('@emotion/react').Theme;
+    Item: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
         as?: React.ElementType;
     } & {
         flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;

package/dist/library/Flex/index.js

@@ -0,0 +1,46 @@
+"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("./index.styled"));
+const Flex = Object.assign(react_1.default.Fragment, {
+    Row: Styled.FlexContainerRow,
+    Column: Styled.FlexContainerColumn,
+    Item: Styled.FlexItem,
+});
+exports.default = Flex;

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

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

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

@@ -0,0 +1,33 @@
+"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 = __importDefault(require("."));
+const core_1 = require("../../core");
+const meta = {
+    title: 'Library/Flex',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(_1.default.Row, Object.assign({}, props),
+        react_1.default.createElement(core_1.Title1, null, "\uC548\uB155\uD558\uC138\uC694"),
+        react_1.default.createElement(core_1.Title4, null, "\uBC18\uAC00\uC6CC\uC694"))),
+    args: {
+        justifyContent: 'space-between',
+    },
+};
+exports.Story1.storyName = 'Flex.Row';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement(_1.default.Column, Object.assign({}, props),
+        react_1.default.createElement(core_1.Title1, null, "\uC548\uB155\uD558\uC138\uC694"),
+        react_1.default.createElement(core_1.Title4, null, "\uBC18\uAC00\uC6CC\uC694"))),
+    args: {
+        justifyContent: 'space-between',
+    },
+};
+exports.Story2.storyName = 'Flex.Column';

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

@@ -1,16 +1,16 @@
 import { CSSProperties } from 'react';
 export type FlexContainerProps = Pick<CSSProperties, 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent'>;
 type FlexItemProps = Pick<CSSProperties, 'flexGrow' | 'flexShrink' | 'flexBasis'>;
-export declare const FlexContainerRow: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const FlexContainerRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & FlexContainerProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FlexContainerColumn: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FlexContainerColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & FlexContainerProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const FlexItem: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FlexItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & FlexItemProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & FlexItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexItem = exports.FlexContainerColumn = exports.FlexContainerRow = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const GenerateFlexStyle = (props) => {
+    return {
+        display: 'flex',
+        flexWrap: Boolean(props.flexWrap) ? props.flexWrap : undefined,
+        justifyContent: Boolean(props.justifyContent) ? props.justifyContent : undefined,
+        alignContent: Boolean(props.alignContent) ? props.alignContent : undefined,
+    };
+};
+exports.FlexContainerRow = styled_1.default.div((props) => (Object.assign(Object.assign({}, GenerateFlexStyle(props)), { flexDirection: 'row' })));
+exports.FlexContainerColumn = styled_1.default.div((props) => (Object.assign(Object.assign({}, GenerateFlexStyle(props)), { flexDirection: 'column' })));
+exports.FlexItem = styled_1.default.div((props) => ({
+    flexGrow: Boolean(props.flexGrow) ? props.flexGrow : undefined,
+    flexShrink: Boolean(props.flexShrink) ? props.flexGrow : undefined,
+    flexBasis: Boolean(props.flexBasis) ? props.flexBasis : undefined,
+}));

package/dist/library/GNB/index.constant.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GNB_HEIGHT = void 0;
+// TODO: 서비스마다 변경될 가능성 있음.
+exports.GNB_HEIGHT = {
+    pc: 84,
+    mobile: 55,
+};

package/dist/library/GlobalLayoutHeaderProvider/index.type.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { NavigationProps } from '../../components/Navigation';
 type HeaderForNone = {
     type: 'none';

package/dist/library/GlobalLayoutHeaderProvider/index.type.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.GlobalLayoutHeaderContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.GlobalLayoutHeaderContext = react_1.default.createContext({
+    hideGnb: () => {
+        console.info('');
+    },
+    showGnb: () => {
+        console.info('');
+    },
+    setGlobalLayoutHeader: () => {
+        console.info('');
+    },
+    hasGlobalLayoutHeaderInMobile: false,
+    hasGlobalLayoutHeader: false,
+});

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface IconWithImageProps {
     srcPath: string;
     width: number;

package/dist/library/IconWithImage/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWithImage = void 0;
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const IconWithImage = ({ srcPath, width, height }) => {
+    return (react_1.default.createElement(index_styled_1.IconWrapper, { width: width, height: height || width, src: `${srcPath}.png`, srcSet: `${srcPath}@2x.png 2x, ${srcPath}@3x.png 3x` }));
+};
+exports.IconWithImage = IconWithImage;

package/dist/library/IconWithImage/index.spec.d.ts

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

package/dist/library/IconWithImage/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 = {
+    srcPath: 'hello.png',
+    width: 200,
+};
+describe('<IconWithImage />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.IconWithImage, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -2,8 +2,8 @@ interface IconWrapperProps {
     width: number;
     height: number;
 }
-export declare const IconWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & IconWrapperProps, import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+} & IconWrapperProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export {};