@pfct/purple 1.3.4-rc.0

package/dist/components/Input/common/InputFrame/index.styled.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorText = exports.InputLabel = exports.InputWrapper = exports.InputDisabledTextColor = exports.NotActivePlaceholderOrLabelStyle = 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");
+const constant_1 = require("./constant");
+const NotActivePlaceholderOrLabelStyle = ({ hasLabel }) => (0, react_1.css) `
+	${TextStyles_1.typography.title1}
+
+	position: absolute;
+	top: ${hasLabel ? constant_1.INNER_POSITION_TOP.hasLabel : constant_1.INNER_POSITION_TOP.noLabel}px;
+	left: ${constant_1.INNER_POSITION_LEFT}px;
+	color: ${Colors_1.basicColors.gray100};
+`;
+exports.NotActivePlaceholderOrLabelStyle = NotActivePlaceholderOrLabelStyle;
+exports.InputDisabledTextColor = Colors_1.basicColors.gray200;
+exports.InputWrapper = styled_1.default.div `
+	width: 100%;
+	height: ${constant_1.INPUT_HEIGHT}px;
+	position: relative;
+	box-sizing: border-box;
+	background-color: ${Colors_1.basicColors.white};
+	border: 1px solid ${({ active }) => (active ? Colors_1.basicColors.gray600 : Colors_1.basicColors.gray50)};
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+
+	${({ error }) => error &&
+    (0, react_1.css) `
+			border: 1px solid ${Colors_1.basicColors.red400};
+		`}
+
+	${({ active }) => active &&
+    (0, react_1.css) `
+			box-shadow: 0 2px 5px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '10%')};
+		`}
+
+	${({ disabled, error }) => !error
+    ? !disabled
+        ? (0, react_1.css) `
+						&:hover {
+							border: 1px solid ${Colors_1.basicColors.gray600};
+							box-shadow: 0 2px 5px ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.gray900, '10%')};
+						}
+						&:focus {
+							border: 1px solid ${Colors_1.basicColors.gray600};
+							outline: none;
+						}
+				  `
+        : (0, react_1.css) `
+						background-color: ${Colors_1.basicColors.gray25};
+						color: ${exports.InputDisabledTextColor};
+				  `
+    : null};
+`;
+exports.InputLabel = styled_1.default.label `
+	position: absolute;
+	color: ${Colors_1.basicColors.gray200};
+	left: ${constant_1.INNER_POSITION_LEFT}px;
+	pointer-events: none;
+	transition-property: font-size, transform;
+	transition-duration: 0.4s;
+
+	${({ active }) => !active
+    ? (0, react_1.css) `
+					bottom: 50%;
+					transform: translate(0%, 50%);
+					${TextStyles_1.typography.title1}
+			  `
+    : (0, react_1.css) `
+					top: 11px;
+					${TextStyles_1.typography.body2}
+			  `};
+`;
+exports.ErrorText = styled_1.default.div `
+	bottom: 0px;
+	position: relative;
+	${TextStyles_1.typography.body2};
+	color: ${Colors_1.basicColors.red400};
+	margin-top: 10px;
+	left: 5px;
+`;

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

@@ -0,0 +1,5 @@
+export * from './common/InputFrame';
+export * from './BaseInput';
+export * from './NumberInput';
+export * from './PostfixInput';
+export * from './ResidentNumberInput';

package/dist/components/Input/index.js

@@ -0,0 +1,21 @@
+"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("./common/InputFrame"), exports);
+__exportStar(require("./BaseInput"), exports);
+__exportStar(require("./NumberInput"), exports);
+__exportStar(require("./PostfixInput"), exports);
+__exportStar(require("./ResidentNumberInput"), exports);

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicInputProps, PostfixInputProps, ResidentNumberInputProps } from '.';
+import { SelectBoxProps } from '../SelectBox';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Textfield-fdde7ce93e65439cb8188cfb4a8609aa?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자가 입력할 수 있는 영역입니다. 직접 입력하거나 정보 값을 선택하여 입력합니다.<br/>다양한 옵션이 있으며 숫자를 포함한 여러 텍스트 형식을 지원합니다.
+ */
+declare const meta: Meta<BasicInputProps>;
+export default meta;
+type BaseInputStory = StoryObj<BasicInputProps>;
+export declare const Story1: BaseInputStory;
+export declare const Story2: BaseInputStory;
+export declare const Story3: StoryObj<SelectBoxProps>;
+export declare const Story4: StoryObj<ResidentNumberInputProps>;
+export declare const Story5: StoryObj<ResidentNumberInputProps>;
+export declare const Story6: StoryObj<PostfixInputProps>;

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

@@ -0,0 +1,172 @@
+"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.Story6 = exports.Story5 = exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const MiniButton_1 = require("../MiniButton");
+const Input_1 = require("../Input");
+const SelectBox_1 = require("../SelectBox");
+const index_util_1 = require("./PostfixInput/index.util");
+const defaultArgs = {
+    label: '레이블',
+    placeholder: '플레이스홀더',
+    disabled: false,
+};
+const WidthLimitComp = ({ width = '400px', height, children, }) => {
+    return react_1.default.createElement("div", { style: { width, height } }, children);
+};
+const BaseInputComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const onChange = (e) => {
+        setValue(e.target.value);
+    };
+    return react_1.default.createElement(Input_1.BaseInput, Object.assign({}, props, { value: value, onChange: onChange }));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Textfield-fdde7ce93e65439cb8188cfb4a8609aa?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자가 입력할 수 있는 영역입니다. 직접 입력하거나 정보 값을 선택하여 입력합니다.<br/>다양한 옵션이 있으며 숫자를 포함한 여러 텍스트 형식을 지원합니다.
+ */
+const meta = {
+    title: 'Component/TextField',
+    component: Input_1.BaseInput,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, null,
+        react_1.default.createElement(BaseInputComp, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, defaultArgs), { errorValidation: [
+            {
+                condition: (value) => {
+                    return value[0] === '1';
+                },
+                errorText: '1로 시작해주세요',
+            },
+        ] }),
+};
+exports.Story1.storyName = 'Basic';
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, null,
+        react_1.default.createElement(BaseInputComp, Object.assign({}, props)))),
+    args: {
+        label: '레이블',
+        placeholder: '플레이스홀더',
+        decoration: react_1.default.createElement(MiniButton_1.BoxMiniButton, { colorType: "pink" }, "\uC778\uC99D \uC694\uCCAD"),
+        errorValidation: [
+            {
+                condition: (value) => {
+                    return value[0] === '1';
+                },
+                errorText: '1로 시작해주세요',
+            },
+        ],
+    },
+};
+exports.Story2.storyName = '+ Button (Decoration)';
+const SelectBoxComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const onChange = (val) => {
+        setValue(val);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "selected: ",
+        value,
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(SelectBox_1.SelectBox, Object.assign({}, props, { value: value, onChange: onChange }))));
+};
+exports.Story3 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, { height: 400 },
+        react_1.default.createElement(SelectBoxComp, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, defaultArgs), { bottomSheetTitle: '모바일 타이틀', itemList: [
+            { label: '선택 1', value: 'VALUE_1' },
+            { label: '선택 2', value: 'VALUE_2' },
+            { label: '선택 3', value: 'VALUE_3' },
+            { label: '선택 4', value: 'VALUE_4' },
+            { label: '선택 5', value: 'VALUE_5' },
+            { label: '선택 6', value: 'VALUE_6' },
+            { label: '선택 7', value: 'VALUE_7' },
+            { label: '선택 8', value: 'VALUE_8' },
+            { label: '선택 9', value: 'VALUE_9' },
+            { label: '선택 10', value: 'VALUE_10' },
+            { label: '선택 11', value: 'VALUE_11' },
+        ] }),
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'PC) 셀렉트 필드를 클릭하면 드랍다운 메뉴가 나타납니다.<br/> MOBILE) 셀렉트 필드를 탭 하면 바텀 시트를 제공합니다.',
+            },
+        },
+    },
+};
+exports.Story3.storyName = '+ Select';
+const ResidentNumberInputComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const onChange = (val) => {
+        setValue(val);
+    };
+    return react_1.default.createElement(Input_1.ResidentNumberInput, Object.assign({}, props, { value: value, setValue: onChange }));
+};
+exports.Story4 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, null,
+        react_1.default.createElement(ResidentNumberInputComp, Object.assign({}, props)))),
+    args: Object.assign({}, defaultArgs),
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story4.storyName = '+ Blind (rrnInputType=13)';
+exports.Story5 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, null,
+        react_1.default.createElement(ResidentNumberInputComp, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, defaultArgs), { rrnInputType: 7 }),
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story5.storyName = '+ Blind (rrnInputType=7)';
+const PostfixInputComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const submitValue = Number(value);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "submitValue : ",
+        submitValue,
+        react_1.default.createElement(Input_1.PostfixInput, Object.assign({}, props, { realValue: value, updateRealValue: setValue, formatRealValue: index_util_1.formatRealValueWithManWon, formatDisplayValue: index_util_1.formatDisplayValueWithManWon }))));
+};
+exports.Story6 = {
+    render: (props) => (react_1.default.createElement(WidthLimitComp, null,
+        react_1.default.createElement(PostfixInputComp, Object.assign({}, props)))),
+    args: Object.assign(Object.assign({}, defaultArgs), { postfix: '만원', max: 100000000000 }),
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story6.storyName = '+ Unit';

package/dist/components/Loading/ProgressBar/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ProgressBarProps {
+    progress: number;
+    pointColor?: string;
+}
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export type { ProgressBarProps };
+export { ProgressBar };

package/dist/components/Loading/ProgressBar/index.js

@@ -0,0 +1,38 @@
+"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.ProgressBar = void 0;
+const react_1 = __importStar(require("react"));
+const Colors_1 = require("../../../core/Colors");
+const Styled = __importStar(require("./index.styled"));
+const ProgressBar = ({ progress, pointColor = Colors_1.basicColors.gray900 }) => {
+    const [curProgress, setCurProgress] = (0, react_1.useState)(progress);
+    (0, react_1.useEffect)(() => {
+        setCurProgress(progress);
+    }, [progress]);
+    return (react_1.default.createElement(Styled.ProgressBar, null,
+        react_1.default.createElement(Styled.Progress, { progress: curProgress, pointColor: pointColor })));
+};
+exports.ProgressBar = ProgressBar;

package/dist/components/Loading/ProgressBar/index.spec.d.ts

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

package/dist/components/Loading/ProgressBar/index.spec.js

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

package/dist/components/Loading/ProgressBar/index.styled.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface ProgressProps {
+    progress: number;
+    pointColor: string;
+}
+export declare const ProgressBar: 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 Progress: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ProgressProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/components/Loading/ProgressBar/index.styled.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = exports.ProgressBar = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+exports.ProgressBar = styled_1.default.div `
+	position: absolute;
+	width: 100%;
+	top: 0;
+	height: 3px;
+	background-color: ${Colors_1.basicColors.gray50};
+`;
+exports.Progress = styled_1.default.div `
+	width: ${({ progress }) => progress}%;
+	background-color: ${({ pointColor }) => pointColor};
+	height: 100%;
+	transition: width 3s ease-in-out;
+`;

package/dist/components/Loading/Skeleton/SkeletonLayout/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactFCWithChildren } from '../../../../types/react';
+declare const SkeletonLayout: ReactFCWithChildren;
+export { SkeletonLayout };

package/dist/components/Loading/Skeleton/SkeletonLayout/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const SkeletonLayout = ({ children }) => {
+    return (react_1.default.createElement(index_styled_1.SkeletonWrapper, null,
+        react_1.default.createElement(index_styled_1.ShinyWrapper, null, children)));
+};
+exports.SkeletonLayout = SkeletonLayout;

package/dist/components/Loading/Skeleton/SkeletonLayout/index.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SkeletonWrapper: 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 ShinyWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Loading/Skeleton/SkeletonLayout/index.styled.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.ShinyWrapper = exports.SkeletonWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.SkeletonWrapper = styled_1.default.div `
+	position: relative;
+	overflow: hidden;
+`;
+exports.ShinyWrapper = styled_1.default.div `
+	@keyframes gradient {
+		0% {
+			left: -125%;
+		}
+		100% {
+			left: 150%;
+		}
+	}
+
+	&::before {
+		content: '';
+		background: rgba(255, 255, 255, 0.4);
+		position: absolute;
+		width: 150px; /** shiny 폭 */
+		height: 100%;
+		top: 0%;
+		transform: skew(-45deg);
+
+		animation: gradient 1.8s ease-out infinite;
+	}
+`;

package/dist/components/Loading/Skeleton/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface SkeletonProps {
+    variant?: 'text' | 'circle' | 'rect';
+    width?: number;
+    height?: number;
+    radius?: number;
+}
+declare const Skeleton: React.FC<SkeletonProps> & {
+    Layout: import("../../..").ReactFCWithChildren<unknown>;
+};
+export type { SkeletonProps };
+export { Skeleton };

package/dist/components/Loading/Skeleton/index.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.Skeleton = void 0;
+const react_1 = __importDefault(require("react"));
+const index_styled_1 = require("./index.styled");
+const SkeletonLayout_1 = require("./SkeletonLayout");
+const SkeletonItem = (props) => {
+    const { variant, width, height, radius } = props;
+    let skeleton;
+    switch (variant) {
+        case 'text':
+            skeleton = react_1.default.createElement(index_styled_1.TextSkeleton, { width: width, height: height });
+            break;
+        case 'circle':
+            skeleton = react_1.default.createElement(index_styled_1.CircleSkeleton, { radius: radius });
+            break;
+        case 'rect':
+            skeleton = react_1.default.createElement(index_styled_1.RecSkeleton, { height: height });
+            break;
+        default:
+            skeleton = react_1.default.createElement(index_styled_1.TextSkeleton, null);
+            break;
+    }
+    return skeleton;
+};
+const Skeleton = Object.assign(SkeletonItem, {
+    Layout: SkeletonLayout_1.SkeletonLayout,
+});
+exports.Skeleton = Skeleton;

package/dist/components/Loading/Skeleton/index.spec.d.ts

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

package/dist/components/Loading/Skeleton/index.spec.js

@@ -0,0 +1,16 @@
+"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(".");
+describe('<Skeleton />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.Skeleton, null)));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

package/dist/components/Loading/Skeleton/index.styled.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const TextSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    height?: number | undefined;
+    width?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RecSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    height?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CircleSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    radius?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Loading/Skeleton/index.styled.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleSkeleton = exports.RecSkeleton = exports.TextSkeleton = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../../core/Colors");
+const SKELETON_COLOR = Colors_1.basicColors.gray50;
+exports.TextSkeleton = styled_1.default.div `
+	height: ${(props) => props.height || 15}px;
+	width: ${(props) => props.width || 200}px;
+	background-color: ${SKELETON_COLOR};
+	border-radius: 10px;
+`;
+exports.RecSkeleton = styled_1.default.div `
+	height: ${(props) => props.height || 50}px;
+	width: 100%;
+	background-color: ${SKELETON_COLOR};
+	border-radius: 10px;
+`;
+exports.CircleSkeleton = styled_1.default.div `
+	height: ${(props) => (props.radius && props.radius * 2) || 50}px;
+	width: ${(props) => (props.radius && props.radius * 2) || 50}px;
+	background-color: ${SKELETON_COLOR};
+	border-radius: 50%;
+`;

package/dist/components/Loading/Spinner/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SpinnerProps {
+    colorType?: 'white' | 'gray';
+}
+declare const Spinner: React.FC<SpinnerProps>;
+export type { SpinnerProps };
+export { Spinner };

package/dist/components/Loading/Spinner/index.js

@@ -0,0 +1,43 @@
+"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.Spinner = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const core_1 = require("../../../core");
+// TODO: dim 영역과의 조합은 추후 로딩 개편되면
+const Spinner = (props) => {
+    const { colorType } = props;
+    let color = core_1.basicColors.white;
+    switch (colorType) {
+        case 'gray':
+            color = core_1.basicColors.gray200;
+    }
+    return react_1.default.createElement(Styled.SpinnerWrapper, { color: color });
+};
+exports.Spinner = Spinner;

package/dist/components/Loading/Spinner/index.spec.d.ts

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