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

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

@@ -1,197 +0,0 @@
-"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.js

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

@@ -1,8 +0,0 @@
-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

@@ -1,33 +0,0 @@
-"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.js

@@ -1,22 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-"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.js

@@ -1,20 +0,0 @@
-"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.js

@@ -1,12 +0,0 @@
-"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

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

package/dist/library/IconWithImage/index.spec.js

@@ -1,20 +0,0 @@
-"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.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.IconWrapper = styled_1.default.img `
-	${({ width, height }) => (0, react_1.css) `
-		width: ${width}px
-		height: ${height}px
-	`}
-`;

package/dist/library/List/BottomSheetItemList/index.js

@@ -1,42 +0,0 @@
-"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.BottomSheetItemList = void 0;
-const react_1 = __importDefault(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const BottomSheetItemList = ({ item, onClick }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null, item.map((item) => {
-        var _a;
-        return (react_1.default.createElement(Styled.Item, { key: item.label, onClick: () => {
-                if (!item.disabled) {
-                    onClick({ value: item.value, label: item.label });
-                }
-            }, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label));
-    })));
-};
-exports.BottomSheetItemList = BottomSheetItemList;

package/dist/library/List/BottomSheetItemList/index.styled.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const TextStyles_1 = require("../../../core/TextStyles");
-const Colors_1 = require("../../../core/Colors");
-exports.Item = styled_1.default.div `
-	width: 100%;
-	height: 48px;
-	padding: 15px 25px;
-	background-color: ${Colors_1.basicColors.white};
-	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })}
-
-	${({ disabled }) => disabled &&
-    (0, react_1.css) `
-			background-color: ${Colors_1.basicColors.gray50};
-			color: ${Colors_1.basicColors.gray200};
-			cursor: not-allowed;
-		`}
-
-	&:active {
-		background-color: ${Colors_1.basicColors.gray25};
-	}
-`;

package/dist/library/List/index.js

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

package/dist/library/Lottie/index.js

@@ -1,104 +0,0 @@
-"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.Lottie = void 0;
-const react_1 = __importStar(require("react"));
-const react_intersection_observer_1 = require("react-intersection-observer");
-const lottie_web_1 = __importDefault(require("lottie-web"));
-const hooks_1 = require("../../hooks");
-const uuid_util_1 = require("../../utils/uuid.util");
-const IconWithImage_1 = require("../IconWithImage");
-const Styled = __importStar(require("./index.styled"));
-const Lottie = ({ width, height, viewBox, className, playOnce, autoplay = false, alterImgSrcOnLoad, lottieFileSrcPath: lottieFileName, }) => {
-    const [animationData, setAnimationData] = (0, react_1.useState)(null);
-    const rootElement = (0, react_1.useRef)(null);
-    const elementId = (0, react_1.useRef)((0, uuid_util_1.uuid)());
-    const isMobile = (0, hooks_1.useLayoutIsMobile)();
-    const { ref: wrapperRef, inView } = (0, react_intersection_observer_1.useInView)({
-        /**
-         * 모바일 : 로띠의 높이가 PC와 다르게 작기 때문에 스크롤시 로띠의 play 시작점을 자연스럽게 하기위해 0.4
-         * PC : 로띠의 play 시작점이 lottie 끝에 들어왔을때 play하기 위해 value 0.9
-         */
-        threshold: isMobile ? 0.4 : 0.9,
-        /**
-         * rootMargin을 주어서 lottie inview에 대한 범위를 추가하였습니다.
-         * 모바일, PC의 높이가 달라 다르게 선언하였습니다.
-         */
-        rootMargin: isMobile ? '20% 0% 0% 0%' : '40% 0% 10% 0%',
-    });
-    const viewBoxSize = (0, react_1.useMemo)(() => { var _a, _b; return (viewBox ? `${(_a = viewBox.x) !== null && _a !== void 0 ? _a : 0} ${(_b = viewBox.y) !== null && _b !== void 0 ? _b : 0} ${viewBox.width} ${viewBox.height}` : undefined); }, [viewBox]);
-    const [lottieInstance, setLottieInstance] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        fetch(lottieFileName)
-            .then((res) => res.json())
-            .then((data) => {
-            setAnimationData(data);
-        })
-            .catch(() => {
-            console.info('lottie load 에 실패했습니다.');
-        });
-    }, [lottieFileName]);
-    (0, react_1.useEffect)(() => {
-        if (!rootElement.current || !animationData) {
-            return;
-        }
-        const lottieInstance = lottie_web_1.default.loadAnimation({
-            container: rootElement.current,
-            renderer: 'svg',
-            loop: !Boolean(playOnce),
-            autoplay,
-            animationData,
-            rendererSettings: {
-                viewBoxSize,
-            },
-            name: className,
-        });
-        setLottieInstance(lottieInstance);
-        return () => lottieInstance.destroy();
-    }, [animationData, className, autoplay, playOnce, viewBoxSize]);
-    (0, react_1.useEffect)(() => {
-        if (inView) {
-            lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.goToAndPlay((lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame) > 0.9 * (lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.totalFrames) ? 0 : lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame, true);
-        }
-        else {
-            if (playOnce) {
-                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.stop();
-            }
-            else {
-                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.pause();
-            }
-        }
-    }, [inView, lottieInstance, playOnce]);
-    if (animationData === null && alterImgSrcOnLoad) {
-        return (react_1.default.createElement(Styled.AlterImageWrapper, null,
-            react_1.default.createElement(IconWithImage_1.IconWithImage, { width: width || 0, srcPath: alterImgSrcOnLoad })));
-    }
-    return (react_1.default.createElement(Styled.Wrapper, { ref: wrapperRef },
-        react_1.default.createElement(Styled.Container, { id: elementId.current, className: className, ref: rootElement, width: width, height: height })));
-};
-exports.Lottie = Lottie;

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

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlterImageWrapper = exports.Container = exports.Wrapper = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.Wrapper = styled_1.default.div `
-	width: 100%;
-`;
-exports.Container = styled_1.default.div `
-	/* block 사용시 container div와 lottie svg 사이 미세한 여백이 발생하여 flex 사용*/
-	display: flex;
-
-	${(p) => p.width &&
-    (0, react_1.css) `
-			width: ${p.width}px;
-		`}
-	${(p) => p.height &&
-    (0, react_1.css) `
-			height: ${p.height}px;
-		`}
-`;
-// 대체 이미지
-exports.AlterImageWrapper = styled_1.default.div `
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;

package/dist/library/Spacing/index.js

@@ -1,35 +0,0 @@
-"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.Spacing = void 0;
-const react_1 = __importDefault(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const Spacing = ({ spaceNumber }) => {
-    return react_1.default.createElement(Styled.Spacing, { spaceNumber: spaceNumber });
-};
-exports.Spacing = Spacing;

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

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