@pfct/purple 1.3.4-npm-test.1

package/dist/components/DatePicker/SingleDatePicker/index.stories.js

@@ -0,0 +1,71 @@
+"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.Story1 = void 0;
+const react_1 = __importStar(require("react"));
+const useSingleDatePicker_1 = require("./hooks/useSingleDatePicker");
+const BaseDatePicker_1 = require("../BaseDatePicker");
+const utils_1 = require("../../../utils");
+const types_1 = require("../../../types");
+const ThemeColor = 'gray';
+const today = new types_1.PurpleDate().today;
+const SingleDatePickerComponent = (hookInput) => {
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(types_1.EMPTY_DATE);
+    const [displayDate, setDisplayDate] = (0, react_1.useState)(today);
+    const props = (0, useSingleDatePicker_1.useSingleDatePicker)(Object.assign(Object.assign({}, hookInput), { selectedDate,
+        displayDate, onUpdateSelectedDate: setSelectedDate, onUpdateDisplayDate: setDisplayDate }));
+    return react_1.default.createElement(BaseDatePicker_1.BaseDatePicker, Object.assign({}, props));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/DatePicker',
+    component: SingleDatePickerComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(SingleDatePickerComponent, Object.assign({}, props)),
+    args: {
+        disabledDates: [
+            [new types_1.PurpleDate([2023, 9, 2]), new types_1.PurpleDate([2023, 9, 4])],
+            [new types_1.PurpleDate([2023, 9, 27]), new types_1.PurpleDate([2023, 9, 27])],
+        ],
+        colorType: ThemeColor,
+    },
+    argTypes: {
+        colorType: {
+            options: utils_1.ColorTypeArray,
+            control: { type: 'radio' },
+        },
+    },
+};
+exports.Story1.storyName = 'SingleDatePicker';

package/dist/components/DatePicker/SingleDatePickerModal/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SingleDatePickerHooksReturnType } from '../SingleDatePicker/hooks/useSingleDatePicker';
+import { DoubleButtonProps } from '../../Button/DoubleButton';
+import { ColorType } from '../../../utils';
+type SingleDatePickerModalProps = SingleDatePickerHooksReturnType & {
+    title: string;
+    visibleModal: boolean;
+    colorType: ColorType;
+    rightDisabled: DoubleButtonProps['right']['disabled'];
+    openModal: () => void;
+    closeModal: () => void;
+    onReset: () => void;
+    onConfirm: () => void;
+};
+declare const SingleDatePickerModal: React.FC<SingleDatePickerModalProps>;
+export type { SingleDatePickerModalProps };
+export { SingleDatePickerModal };
+export * from './useSingleDatePickerModal';

package/dist/components/DatePicker/SingleDatePickerModal/index.js

@@ -0,0 +1,54 @@
+"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 __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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleDatePickerModal = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseDatePicker_1 = require("../BaseDatePicker");
+const Styled = __importStar(require("./index.styled"));
+const components_1 = require("../../../components");
+const SingleDatePickerModal = (props) => {
+    const { title, visibleModal, colorType, rightDisabled, onReset, onConfirm, closeModal } = props;
+    return (react_1.default.createElement(components_1.NavBottomSheet, { visible: visibleModal, onMaskClick: closeModal },
+        react_1.default.createElement(components_1.NavBottomSheet.Navigation, { title: title, contentColor: "gray", hasBackgroundColor: true }),
+        react_1.default.createElement(components_1.NavBottomSheet.Body, { hasContentPadding: false, hasBottomPadding: false },
+            react_1.default.createElement(Styled.ModalContentWrapper, null,
+                react_1.default.createElement(BaseDatePicker_1.BaseDatePicker, Object.assign({}, props)))),
+        react_1.default.createElement(components_1.NavBottomSheet.DoubleButton, { purpose: "main", colorType: colorType, left: {
+                children: '재설정',
+                onClick: onReset,
+            }, right: {
+                children: '확인',
+                disabled: rightDisabled,
+                onClick: onConfirm,
+            } })));
+};
+exports.SingleDatePickerModal = SingleDatePickerModal;
+__exportStar(require("./useSingleDatePickerModal"), exports);

package/dist/components/DatePicker/SingleDatePickerModal/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SingleDatePickerModalHooksProps } from './useSingleDatePickerModal';
+type StoryProps = {
+    disabledDates: SingleDatePickerModalHooksProps['disabledDates'];
+    colorType: SingleDatePickerModalHooksProps['colorType'];
+};
+type Story = StoryObj<StoryProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+declare const meta: Meta<StoryProps>;
+export default meta;
+export declare const Story3: Story;

package/dist/components/DatePicker/SingleDatePickerModal/index.stories.js

@@ -0,0 +1,80 @@
+"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.Story3 = void 0;
+const react_1 = __importStar(require("react"));
+const index_util_1 = require("../BaseDatePicker/hooks/index.util");
+const useSingleDatePickerModal_1 = require("./useSingleDatePickerModal");
+const _1 = require(".");
+const library_1 = require("../../../library");
+const Button_1 = require("../../../components/Button");
+const utils_1 = require("../../../utils");
+const types_1 = require("../../../types");
+const ThemeColor = 'gray';
+const today = new types_1.PurpleDate().today;
+const SingleDatePickerModalComponent = (hookInput) => {
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(types_1.EMPTY_DATE);
+    const [displayDate, setDisplayDate] = (0, react_1.useState)(today);
+    const props = (0, useSingleDatePickerModal_1.useSingleDatePickerModal)(Object.assign(Object.assign({}, hookInput), { selectedDate,
+        displayDate, onUpdateSelectedDate: setSelectedDate, onUpdateDisplayDate: setDisplayDate }));
+    const displaySelectedStartDate = (0, index_util_1.convertDateToDisplayString)(selectedDate, '선택 전');
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        "\uC120\uD0DD\uB41C \uB0A0\uC9DC : ",
+        displaySelectedStartDate,
+        react_1.default.createElement(library_1.Spacing, { spaceNumber: 15 }),
+        react_1.default.createElement(Button_1.SingleButton, { onClick: props.openModal, colorType: ThemeColor, purpose: "main" }, "SingleDatePicker OPEN"),
+        react_1.default.createElement(_1.SingleDatePickerModal, Object.assign({}, props, { title: "\uC0C1\uD658\uC77C\uC790 \uC120\uD0DD", colorType: ThemeColor }))));
+};
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Date-Picker-f1d8e79caa964c5d9f94015f5b6d1b54?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 특정 날짜를 선택하거나 기간을 선택할 때 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/DatePicker',
+    component: SingleDatePickerModalComponent,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story3 = {
+    render: (props) => react_1.default.createElement(SingleDatePickerModalComponent, Object.assign({}, props)),
+    args: {
+        disabledDates: [
+            [new types_1.PurpleDate([2023, 9, 2]), new types_1.PurpleDate([2023, 9, 4])],
+            [new types_1.PurpleDate([2023, 9, 27]), new types_1.PurpleDate([2023, 9, 27])],
+        ],
+        colorType: ThemeColor,
+    },
+    argTypes: {
+        colorType: {
+            options: utils_1.ColorTypeArray,
+            control: { type: 'radio' },
+        },
+    },
+};
+exports.Story3.storyName = 'SingleDatePicker (바탐시트)';

package/dist/components/DatePicker/SingleDatePickerModal/index.styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ModalContentWrapper: 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/DatePicker/SingleDatePickerModal/index.styled.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.ModalContentWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.ModalContentWrapper = styled_1.default.div `
+	width: 100%;
+	display: flex;
+	justify-content: center;
+`;

package/dist/components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.d.ts

@@ -0,0 +1,7 @@
+import { SingleDatePickerHooksProps } from '../SingleDatePicker/hooks/useSingleDatePicker';
+import { SingleDatePickerModalProps } from '.';
+type SingleDatePickerModalHooksProps = SingleDatePickerHooksProps;
+type SingleDatePickerModalHooksReturnType = Omit<SingleDatePickerModalProps, 'colorType' | 'title'>;
+declare const useSingleDatePickerModal: (props: SingleDatePickerModalHooksProps) => SingleDatePickerModalHooksReturnType;
+export type { SingleDatePickerModalHooksProps };
+export { useSingleDatePickerModal };

package/dist/components/DatePicker/SingleDatePickerModal/useSingleDatePickerModal.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSingleDatePickerModal = void 0;
+const react_1 = require("react");
+const useSingleDatePicker_1 = require("../SingleDatePicker/hooks/useSingleDatePicker");
+const types_1 = require("../../../types");
+const today = new types_1.PurpleDate().today;
+const useSingleDatePickerModal = (props) => {
+    const [visibleModal, setVisibleModal] = (0, react_1.useState)(false);
+    const [tempSelectedDate, setTempSelectedDate] = (0, react_1.useState)(props.selectedDate);
+    const rightDisabled = !tempSelectedDate;
+    const baseDatePicker = (0, useSingleDatePicker_1.useSingleDatePicker)(Object.assign(Object.assign({}, props), { 
+        // 모달 내 임시 value, setter
+        selectedDate: tempSelectedDate, onUpdateSelectedDate: setTempSelectedDate }));
+    const openModal = () => {
+        setVisibleModal(true);
+        props.onUpdateDisplayDate(props.selectedDate || today);
+        setTempSelectedDate(props.selectedDate);
+    };
+    const closeModal = () => {
+        setVisibleModal(false);
+    };
+    const onReset = () => {
+        baseDatePicker.resetSelectedData();
+    };
+    const onConfirm = () => {
+        props.onUpdateSelectedDate(tempSelectedDate);
+        closeModal();
+    };
+    return Object.assign(Object.assign({}, baseDatePicker), { visibleModal,
+        rightDisabled,
+        openModal,
+        closeModal,
+        onReset,
+        onConfirm });
+};
+exports.useSingleDatePickerModal = useSingleDatePickerModal;

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

@@ -0,0 +1,5 @@
+export * from './BaseDatePicker';
+export * from './SingleDatePicker';
+export * from './RangeDatePicker';
+export * from './SingleDatePickerModal';
+export * from './RangeDatePickerModal';

package/dist/components/DatePicker/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("./BaseDatePicker"), exports);
+__exportStar(require("./SingleDatePicker"), exports);
+__exportStar(require("./RangeDatePicker"), exports);
+__exportStar(require("./SingleDatePickerModal"), exports);
+__exportStar(require("./RangeDatePickerModal"), exports);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type DividerProps = {
+    size: 's' | 'm';
+};
+declare const Divider: React.FC<DividerProps>;
+export type { DividerProps };
+export { Divider };

package/dist/components/Divider/index.js

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

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

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

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

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DividerProps } from '.';
+type Story = StoryObj<DividerProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Divider-c55b581b23ce49ad80f9a50fe84946be?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 정보를 시각적으로 구분하거나 그룹화하기 위해 사용합니다.
+ *
+ */
+declare const meta: Meta<DividerProps>;
+export default meta;
+export declare const Story1: Story;
+export declare const Story2: Story;

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

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story2 = exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Divider-c55b581b23ce49ad80f9a50fe84946be?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 정보를 시각적으로 구분하거나 그룹화하기 위해 사용합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Divider',
+    component: _1.Divider,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(_1.Divider, Object.assign({}, props)),
+    args: {
+        size: 'm',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '서로 다른 섹션을 구분해야할 때 M 사이즈를 사용합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = '디바이더_m';
+exports.Story2 = {
+    render: (props) => react_1.default.createElement(_1.Divider, Object.assign({}, props)),
+    args: {
+        size: 's',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: '같은 섹션 안의 콘텐츠를 구분할 때 S 사이즈를 사용합니다.',
+            },
+        },
+    },
+};
+exports.Story2.storyName = '디바이더_s';

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DividerProps } from '.';
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DividerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DividerItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DividerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Divider/index.styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DividerItem = exports.Wrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Colors_1 = require("../../core/Colors");
+exports.Wrapper = styled_1.default.div `
+	box-sizing: border-box;
+	width: 100%;
+`;
+exports.DividerItem = styled_1.default.div `
+	width: 100%;
+	background-color: ${({ size }) => (size === 's' ? Colors_1.basicColors.gray50 : Colors_1.basicColors.gray25)};
+	height: ${({ size }) => (size === 's' ? '1px' : '15px')};
+`;

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

@@ -0,0 +1,33 @@
+import React, { InputHTMLAttributes } from 'react';
+type BasicInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
+    value?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    label?: string;
+    decoration?: React.ReactNode;
+    errorValidation?: InputValidator[];
+    logRocketMasking?: boolean;
+    focus?: boolean;
+    focusedAnimation?: boolean;
+    format?: string;
+};
+type InputValidator = {
+    errorText: string;
+    condition: (value: string) => boolean;
+};
+/**
+ * @description input decoration은 항상 오른쪽에 위치해 있다.
+ */
+declare const BaseInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+    value?: string | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    label?: string | undefined;
+    decoration?: React.ReactNode;
+    errorValidation?: InputValidator[] | undefined;
+    logRocketMasking?: boolean | undefined;
+    focus?: boolean | undefined;
+    focusedAnimation?: boolean | undefined;
+    format?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export type { BasicInputProps, InputValidator };
+export { BaseInput };
+export * as BaseInputStyled from './index.styled';

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

@@ -0,0 +1,103 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseInputStyled = exports.BaseInput = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const InputFrame_1 = require("../common/InputFrame");
+/**
+ * @description input decoration은 항상 오른쪽에 위치해 있다.
+ */
+const BaseInput = react_1.default.forwardRef((props, forwardedRef) => {
+    const { value = '', placeholder, onBlur, onFocus, onChange, disabled, label, decoration, errorValidation, logRocketMasking, focus = false, focusedAnimation = true, format = '', pattern, type } = props, otherProps = __rest(props, ["value", "placeholder", "onBlur", "onFocus", "onChange", "disabled", "label", "decoration", "errorValidation", "logRocketMasking", "focus", "focusedAnimation", "format", "pattern", "type"]);
+    const [errorText, setErrorText] = (0, react_1.useState)('');
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const active = focused || Boolean(value);
+    const showPlaceHolder = (label && active) || !label;
+    const handleInputFocusState = (0, react_1.useCallback)((e) => {
+        const { type } = e;
+        if (otherProps.readOnly || disabled) {
+            return;
+        }
+        if (focusedAnimation) {
+            setFocused(type === 'focus');
+        }
+    }, [disabled, focusedAnimation, otherProps.readOnly]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (focus) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [focus]);
+    (0, react_1.useEffect)(() => {
+        const cleanValue = value.replace(format, '').trim();
+        if (cleanValue && errorValidation) {
+            for (let i = 0; i < errorValidation.length; i++) {
+                if (!errorValidation[i].condition(value) && value.length !== 0) {
+                    setErrorText(errorValidation[i].errorText);
+                    break;
+                }
+                else {
+                    setErrorText('');
+                }
+            }
+        }
+    }, [value, errorValidation, format]);
+    (0, react_1.useEffect)(() => {
+        const numberInput = inputRef.current;
+        const handleWheel = (e) => {
+            e.preventDefault();
+        };
+        if (numberInput) {
+            numberInput.addEventListener('wheel', handleWheel);
+            return () => {
+                numberInput.removeEventListener('wheel', handleWheel);
+            };
+        }
+    }, []);
+    return (react_1.default.createElement(InputFrame_1.InputFrame, { label: label, focused: focused, active: active, disabled: Boolean(disabled), errorText: errorText },
+        react_1.default.createElement(Styled.InputTag, Object.assign({ "data-private": logRocketMasking, ref: forwardedRef || inputRef, name: label, disabled: disabled, value: value, onChange: onChange, onFocus: (e) => {
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                handleInputFocusState(e);
+            }, onBlur: (e) => {
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+                handleInputFocusState(e);
+            }, decoration: Boolean(decoration), pattern: type === 'number' ? '\\d*' : pattern, type: type, hasLabel: Boolean(label), placeholder: showPlaceHolder ? placeholder : '' }, otherProps)),
+        decoration && react_1.default.createElement(Styled.DecorationItemWrapper, { disabled: disabled }, decoration)));
+});
+exports.BaseInput = BaseInput;
+exports.BaseInputStyled = __importStar(require("./index.styled"));

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

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