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

package/dist/components/Segment/BaseSegment/index.styled.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.className = {
+    segmentControl: 'segment-control',
+    segmentLabel: 'segment-label',
+};
+exports.Control = styled_1.default.div `
+	width: ${({ width }) => `${width}%`};
+	background-color: ${Colors_1.basicColors.white};
+	position: absolute;
+	left: ${({ control }) => `${control}%`};
+	transition: left 0.4s ease-out;
+	z-index: -10 !important;
+	border-radius: 8px;
+	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
+`;
+exports.Label = styled_1.default.label `
+	${TextStyles_1.typography.h6};
+	font-weight: 700;
+	transition: all 0.4s ease-out;
+	color: ${({ active }) => (active ? Colors_1.basicColors.gray900 : Colors_1.basicColors.gray200)};
+`;
+exports.Wrapper = styled_1.default.div `
+	box-sizing: border-box;
+	width: 100%;
+	height: 48px;
+	position: relative;
+	background-color: ${Colors_1.semanticColors.segmentControlContainer};
+	z-index: 5;
+	border-radius: 10px;
+	padding: 4px;
+`;
+exports.Input = styled_1.default.input `
+	display: none;
+`;
+exports.LabelWrapper = styled_1.default.div `
+	width: calc(100% - 8px);
+	height: 40px;
+	box-sizing: border-box;
+	position: absolute;
+
+	& > .${exports.className.segmentControl}, .${exports.className.segmentLabel} {
+		width: ${({ width }) => `${width}%`};
+		height: 40px;
+		text-align: center;
+		display: inline-block;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+	}
+`;

package/dist/components/Segment/ExtendSegment/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type ExtendSegmentProps = {
     item: {
         children: React.ReactNode;

package/dist/components/Segment/ExtendSegment/index.js

@@ -0,0 +1,69 @@
+"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 });
+exports.ExtendSegment = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const ExtendSegment = ({ item, value = '', onChange }) => {
+    const width = 100 / item.length;
+    const control = () => {
+        const idx = item.findIndex((i) => i.value === value) * 100;
+        if (idx < 0) {
+            return 0;
+        }
+        else {
+            return idx / item.length;
+        }
+    };
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(Styled.LabelWrapper, { width: width },
+            item.map((label, index) => {
+                const active = value === label.value;
+                const className = (() => {
+                    const result = [active ? 'active' : 'disabled'];
+                    result.push(Styled.className.extendSegmentLabel);
+                    return result.join(' ');
+                })();
+                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                    react_1.default.createElement(Styled.Label, { className: className, active: active, onClick: () => {
+                            onChange(label.value);
+                        } }, label.children)));
+            }),
+            react_1.default.createElement(Styled.Control, { control: control(), width: width }))));
+};
+exports.ExtendSegment = ExtendSegment;

package/dist/components/Segment/ExtendSegment/index.styled.d.ts

@@ -1,34 +1,34 @@
 export declare const className: {
     extendSegmentLabel: string;
 };
-export declare const Control: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Control: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     control: number;
     width: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Label: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     active: boolean;
-} & import('react').ClassAttributes<HTMLLabelElement> & import('react').LabelHTMLAttributes<HTMLLabelElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Input: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const LabelWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     width: number;
-} & 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;
 }, {}, {}>;

package/dist/components/Segment/ExtendSegment/index.styled.js

@@ -0,0 +1,70 @@
+"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 });
+exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const BaseSegmentStyled = __importStar(require("../BaseSegment/index.styled"));
+const Colors_1 = require("../../../core/Colors");
+exports.className = {
+    extendSegmentLabel: 'extend-segment-label',
+};
+exports.Control = BaseSegmentStyled.Control;
+exports.Label = (0, styled_1.default)(BaseSegmentStyled.Label) `
+	/* fyi. selector 여러개와 !important 로 비활성화 색깔 고정 */
+
+	&.disabled > * {
+		color: ${Colors_1.basicColors.gray200} !important;
+	}
+`;
+exports.Wrapper = BaseSegmentStyled.Wrapper;
+exports.Input = BaseSegmentStyled.Input;
+exports.LabelWrapper = (0, styled_1.default)(BaseSegmentStyled.LabelWrapper) `
+	& > .${exports.className.extendSegmentLabel} {
+		width: ${({ width }) => `${width}%`};
+		height: 40px;
+		text-align: center;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+
+		/* 다른 속성 */
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+`;

package/dist/components/Segment/index.js

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

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SegmentProps } from './BaseSegment';
+import { ExtendSegmentProps } from './ExtendSegment';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 하위 정보를 동일하게 분할하여 구성합니다.
+ * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
+ *
+ */
+declare const meta: Meta<SegmentProps<string>>;
+export default meta;
+export declare const Story1: StoryObj<SegmentProps<string>>;
+export declare const Story2: StoryObj<ExtendSegmentProps>;

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

@@ -0,0 +1,115 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const BaseSegment_1 = require("./BaseSegment");
+const ExtendSegment_1 = require("./ExtendSegment");
+const Colors_1 = require("../../core/Colors");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 하위 정보를 동일하게 분할하여 구성합니다.
+ * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
+ *
+ */
+const meta = {
+    title: 'Component/Segment',
+    component: BaseSegment_1.Segment,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const BaseSegmentComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.item[0]);
+    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(BaseSegment_1.Segment, Object.assign({}, props, { value: value, onChange: onChange }))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
+        react_1.default.createElement(BaseSegmentComp, Object.assign({}, props)))),
+    args: {
+        item: ['One', 'Two', 'Three'],
+    },
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story1.storyName = 'Segment - 문자열 리스트';
+const ExtendSegmentComp = (props) => {
+    const [value, setValue] = (0, react_1.useState)(props.item[0].value);
+    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(ExtendSegment_1.ExtendSegment, Object.assign({}, props, { value: value, onChange: onChange }))));
+};
+exports.Story2 = {
+    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
+        react_1.default.createElement(ExtendSegmentComp, Object.assign({}, props)))),
+    args: {
+        item: [
+            {
+                value: '부정',
+                children: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", null, "\uBD80\uC815"),
+                    react_1.default.createElement("div", { style: { color: Colors_1.basicColors.red300, paddingLeft: '5px' } }, "4"))),
+            },
+            {
+                value: '긍정',
+                children: (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", null, "\uAE0D\uC815"),
+                    react_1.default.createElement("div", { style: { color: '#6EED81', paddingLeft: '5px' } }, "1"))),
+            },
+        ],
+    },
+    argTypes: {
+        onChange: { action: 'onChange' },
+    },
+};
+exports.Story2.storyName = 'Segment - 컴포넌트 리스트';

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

@@ -1,4 +1,4 @@
-import { default as React, InputHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes } from 'react';
 import { InputValidator } from '../Input/BaseInput';
 type SelectBoxProps<ValueType = string> = InputHTMLAttributes<HTMLSelectElement> & {
     itemList: SelectItemProps<ValueType>[];

package/dist/components/SelectBox/index.js

@@ -0,0 +1,91 @@
+"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 });
+exports.SelectBoxStyled = exports.SelectBox = void 0;
+const List_1 = require("../../library/List");
+const Icon_1 = require("../../Icon");
+const BottomSheet_1 = require("../BottomSheet");
+const Colors_1 = require("../../core/Colors");
+const react_1 = __importStar(require("react"));
+const BaseInput_1 = require("../Input/BaseInput");
+const Styled = __importStar(require("./index.styled"));
+const useLayoutIsMobile_1 = __importDefault(require("../../hooks/useLayoutIsMobile"));
+const SelectBox = (props) => {
+    var _a;
+    const { label, placeholder, itemList, onChange, disabled, errorValidation, value, bottomSheetTitle } = props;
+    const [name, setName] = (0, react_1.useState)((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
+    const [mouseOut, setMouseOut] = (0, react_1.useState)(false);
+    const [visibleItemList, setVisibleItemList] = (0, react_1.useState)(false);
+    const isMobile = (0, useLayoutIsMobile_1.default)();
+    const handleVisibleItemList = (0, react_1.useCallback)((visible) => {
+        setVisibleItemList(visible);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setName((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
+    }, [itemList, value]);
+    return (react_1.default.createElement(Styled.Wrapper, null,
+        react_1.default.createElement(Styled.IconWrapper, { rotateArrow: visibleItemList },
+            react_1.default.createElement(Icon_1.ChevronDownIcon, { size: 20, fillColor: Colors_1.basicColors.gray200 })),
+        react_1.default.createElement(BaseInput_1.BaseInput, { disabled: disabled, className: "select-box", label: label, placeholder: placeholder, readOnly: true, onClick: () => setVisibleItemList(!visibleItemList), focusedAnimation: false, value: name, onBlur: () => {
+                if (mouseOut) {
+                    handleVisibleItemList(false);
+                }
+            }, errorValidation: errorValidation }),
+        visibleItemList && (react_1.default.createElement(Styled.Desktop, null,
+            react_1.default.createElement(Styled.ItemListWrapper, { onMouseOver: () => setMouseOut(false), onMouseOut: () => setMouseOut(true) },
+                react_1.default.createElement(Styled.ItemList, null, itemList.map((item) => {
+                    const { label, value } = item;
+                    return (react_1.default.createElement(Styled.Item, { key: label, onClick: () => {
+                            setName(label);
+                            onChange(value);
+                            handleVisibleItemList(false);
+                        } }, label));
+                })),
+                react_1.default.createElement(Styled.ListBottomMargin, null)))),
+        isMobile && ( // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
+        react_1.default.createElement(BottomSheet_1.TitleBottomSheet, { visible: visibleItemList, onMaskClick: () => handleVisibleItemList(false) },
+            react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Body, { hasContentPadding: false },
+                react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Title, { hasContentPadding: false, title: bottomSheetTitle }),
+                react_1.default.createElement(List_1.BottomSheetItemList, { item: itemList, onClick: ({ value }) => {
+                        onChange(value);
+                        handleVisibleItemList(false);
+                    } }))))));
+};
+exports.SelectBox = SelectBox;
+exports.SelectBoxStyled = __importStar(require("./index.styled"));

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

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

package/dist/components/SelectBox/index.spec.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 });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = require(".");
+const props = {
+    itemList: [],
+    onChange: (val) => {
+        console.log('onChange', val);
+    },
+};
+describe('<SelectBox />', () => {
+    it('렌더링 체크', () => {
+        (0, react_2.render)(react_1.default.createElement(react_1.default.Fragment, null,
+            "\uD655\uC778",
+            react_1.default.createElement(_1.SelectBox, Object.assign({}, props))));
+        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
+    });
+});

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

@@ -1,34 +1,34 @@
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ItemListWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemListWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ListBottomMargin: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListBottomMargin: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ItemList: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemList: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Item: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     rotateArrow: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Desktop: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Desktop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Mobile: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Mobile: 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>, {}>;