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

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

@@ -0,0 +1,113 @@
+"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 __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 {};

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

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

@@ -1,13 +1,13 @@
-export declare const InputTag: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const InputTag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     decoration?: boolean;
     hasLabel: boolean;
-}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const DecorationItemWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const DecorationItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     disabled?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecorationItemWrapper = exports.InputTag = 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("../common/InputFrame/constant");
+const index_styled_1 = require("../common/InputFrame/index.styled");
+exports.InputTag = styled_1.default.input `
+	${TextStyles_1.typography.title1};
+
+	box-sizing: border-box;
+	width: 100%;
+	height: ${constant_1.INPUT_HEIGHT}px;
+
+	padding-left: ${constant_1.INNER_POSITION_LEFT}px;
+
+	${({ hasLabel }) => hasLabel
+    ? (0, react_1.css) `
+					padding-top: ${constant_1.INNER_POSITION_TOP.hasLabel}px;
+					padding-bottom: ${constant_1.INNER_POSITION_BOTTOM.hasLabel}px;
+			  `
+    : (0, react_1.css) `
+					padding-bottom: ${constant_1.INNER_POSITION_BOTTOM.noLabel}px;
+			  `};
+
+	color: ${Colors_1.basicColors.gray900};
+	transition: all 0.2s;
+	border: none;
+	background-color: transparent;
+	-webkit-appearance: none;
+
+	&::-webkit-date-and-time-value {
+		text-align: initial;
+	}
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	${({ decoration }) => decoration
+    ? (0, react_1.css) `
+					border-top-left-radius: 10px;
+					border-bottom-left-radius: 10px;
+			  `
+    : (0, react_1.css) `
+					border-radius: 10px;
+			  `}
+
+	&:disabled {
+		color: ${index_styled_1.InputDisabledTextColor};
+		-webkit-text-fill-color: ${Colors_1.basicColors.gray200};
+		opacity: 1;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&::placeholder {
+		${({ hasLabel }) => (0, index_styled_1.NotActivePlaceholderOrLabelStyle)({ hasLabel })}
+	}
+`;
+exports.DecorationItemWrapper = styled_1.default.div `
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding-right: 15px;
+	border-top-right-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: ${({ disabled }) => (disabled ? Colors_1.basicColors.gray25 : Colors_1.basicColors.white)};
+`;

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BasicInputProps } from '../BaseInput';
 export type NumberInputProps = Pick<BasicInputProps, 'errorValidation' | 'decoration' | 'focus'> & {
     originValue: string;

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

@@ -0,0 +1,64 @@
+"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 __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 });
+const react_1 = __importStar(require("react"));
+const BaseInput_1 = require("../BaseInput");
+const rifm_1 = require("rifm");
+const utils_1 = require("../../../utils");
+const NumberInput = (props) => {
+    const { originValue, onValueChange, postfix = '', prefix = '', max = Number.MAX_SAFE_INTEGER } = props, restProps = __rest(props, ["originValue", "onValueChange", "postfix", "prefix", "max"]);
+    const formattingValue = (0, react_1.useCallback)((value) => {
+        return (0, utils_1.extractNumber)(value).length > 0 ? `${prefix}${(0, utils_1.formatKoreaCurrency)(value)} ${postfix}` : '';
+    }, [postfix, prefix]);
+    return (react_1.default.createElement(rifm_1.Rifm, { accept: /[\d]/g, format: formattingValue, value: originValue, onChange: (val) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((0, utils_1.extractNumber)(val)) }, ({ value, onChange }) => (react_1.default.createElement(BaseInput_1.BaseInput, Object.assign({ type: "tel", format: postfix, value: value, onChange: (e) => {
+            const numeric = (0, utils_1.extractNumber)(e.target.value);
+            if (Number(numeric) > max) {
+                e.target.value = originValue;
+            }
+            onChange(e);
+        } }, restProps)))));
+};
+exports.default = NumberInput;

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

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

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

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { BasicInputProps } from '../BaseInput';
 interface PostfixInputProps extends BasicInputProps {
     realValue: string;

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

@@ -0,0 +1,139 @@
+"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 __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.PostfixInput = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("../BaseInput/index.styled"));
+const ExpendStyled = __importStar(require("./index.styled"));
+const Typography_1 = require("../../../core/Typography");
+const Colors_1 = require("../../../core/Colors");
+const InputFrame_1 = require("../common/InputFrame");
+/**
+ *  fyi.  decoration 다시 살림 (https://pfcoworkspace.slack.com/archives/C0145TGCZ41/p1701937714740749)
+ */
+const PostfixInput = react_1.default.forwardRef((props, forwardedRef) => {
+    const { realValue, postfix, onBlur, onFocus, onClick, disabled, label, placeholder, errorValidation, logRocketMasking, focus = false, max, decoration, updateRealValue, formatRealValue, formatDisplayValue, type, pattern } = props, otherProps = __rest(props, ["realValue", "postfix", "onBlur", "onFocus", "onClick", "disabled", "label", "placeholder", "errorValidation", "logRocketMasking", "focus", "max", "decoration", "updateRealValue", "formatRealValue", "formatDisplayValue", "type", "pattern"]);
+    const [displayValue, setDisplayValue] = (0, react_1.useState)('');
+    const [errorText, setErrorText] = (0, react_1.useState)('');
+    const [focused, setFocused] = (0, react_1.useState)(focus);
+    const inputRef = (0, react_1.useRef)(null);
+    const active = focused || Boolean(displayValue);
+    const showPlaceholderOnlyNotActive = !label && !active && Boolean(placeholder);
+    const handleValidateMessage = (0, react_1.useCallback)((val) => {
+        if (val.length === 0 || val === '0') {
+            // 빈값일때 에러 안나게
+            setErrorText('');
+            return;
+        }
+        if (errorValidation) {
+            for (let i = 0; i < errorValidation.length; i++) {
+                if (!errorValidation[i].condition(val) && val.length !== 0) {
+                    setErrorText(errorValidation[i].errorText);
+                    break;
+                }
+                else {
+                    setErrorText('');
+                }
+            }
+        }
+    }, [errorValidation]);
+    const handleInputFocusState = (0, react_1.useCallback)((e) => {
+        const { type } = e;
+        if (type === 'focus') {
+            setFocused(true);
+        }
+        else {
+            setFocused(false);
+        }
+    }, []);
+    const handleClickInput = (0, react_1.useCallback)((e) => {
+        var _a;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [onClick, inputRef]);
+    const handleChangeInput = (0, react_1.useCallback)((val) => {
+        const updateValue = (formatRealValue === null || formatRealValue === void 0 ? void 0 : formatRealValue(val)) || val;
+        const maxNumber = Number(max);
+        const numeric = Number(updateValue);
+        if (maxNumber && !isNaN(numeric)) {
+            if (numeric > maxNumber) {
+                return;
+            }
+        }
+        updateRealValue(updateValue);
+    }, [max, updateRealValue, formatRealValue]);
+    (0, react_1.useEffect)(() => {
+        let newDisplayValue = realValue;
+        if (formatDisplayValue) {
+            newDisplayValue = (formatDisplayValue === null || formatDisplayValue === void 0 ? void 0 : formatDisplayValue(newDisplayValue)) || ''; // 0만원 안되도록
+        }
+        setDisplayValue(newDisplayValue);
+        handleValidateMessage(realValue);
+    }, [formatDisplayValue, handleValidateMessage, realValue]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (focus) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [inputRef, focus]);
+    return (react_1.default.createElement(InputFrame_1.InputFrame, { label: label, active: active, focused: focused, disabled: Boolean(disabled), errorText: errorText, handleClickInput: handleClickInput },
+        react_1.default.createElement(ExpendStyled.InputAndUnitWrapper, null,
+            react_1.default.createElement(ExpendStyled.InputSizer, { focused: focused, displayValue: displayValue },
+                react_1.default.createElement(ExpendStyled.InputTag, Object.assign({}, otherProps, { className: ExpendStyled.className.inputTag, hasLabel: Boolean(label), placeholder: showPlaceholderOnlyNotActive ? placeholder : '', "data-private": logRocketMasking, ref: forwardedRef || inputRef, name: label, disabled: disabled, value: formatDisplayValue ? displayValue : realValue, onChange: (e) => {
+                        const val = e.currentTarget.value;
+                        handleChangeInput(val);
+                    }, 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: false, pattern: type === 'number' ? '\\d*' : pattern, type: type, onClick: handleClickInput, size: showPlaceholderOnlyNotActive ? undefined : 1 }))),
+            react_1.default.createElement(ExpendStyled.UnitWrapper, null, active && (react_1.default.createElement(ExpendStyled.Unit, { hasLabel: Boolean(label), hasValue: Boolean(displayValue) },
+                react_1.default.createElement(Typography_1.BaseTypography, { md: "Title1", color: disabled ? Colors_1.basicColors.gray200 : undefined }, postfix))))),
+        decoration && react_1.default.createElement(Styled.DecorationItemWrapper, { disabled: disabled }, decoration)));
+});
+exports.PostfixInput = PostfixInput;

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

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

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

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

@@ -9,30 +9,30 @@ interface InputSizerProps {
     displayValue: string;
     focused: boolean;
 }
-export declare const InputTag: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const InputTag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     decoration?: boolean;
     hasLabel: boolean;
-} & import('react').ClassAttributes<HTMLInputElement> & import('react').InputHTMLAttributes<HTMLInputElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const InputAndUnitWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const InputAndUnitWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UnitWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnitWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Unit: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Unit: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & UnitProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & UnitProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 /** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
-export declare const InputSizer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const InputSizer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & InputSizerProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & InputSizerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/components/Input/PostfixInput/index.styled.js

@@ -0,0 +1,107 @@
+"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.InputSizer = exports.Unit = exports.UnitWrapper = exports.InputAndUnitWrapper = exports.InputTag = exports.className = void 0;
+const BaseStyled = __importStar(require("../BaseInput/index.styled"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const constant_1 = require("../common/InputFrame/constant");
+const react_1 = require("@emotion/react");
+exports.className = {
+    inputTag: 'postfix-input-tag',
+};
+exports.InputTag = (0, styled_1.default)(BaseStyled.InputTag) `
+	background-color: transparent;
+	padding-right: 0;
+	border-radius: 0;
+	height: ${constant_1.INPUT_HEIGHT}px; /** input, unit 아랫선 맞추기 */
+`;
+exports.InputAndUnitWrapper = styled_1.default.div `
+	display: flex;
+	width: 100%;
+`;
+exports.UnitWrapper = styled_1.default.div `
+	display: block;
+	position: relative;
+	flex: 1;
+`;
+exports.Unit = styled_1.default.div `
+	position: absolute;
+
+	${({ hasLabel }) => hasLabel
+    ? (0, react_1.css) `
+					top: ${constant_1.INNER_POSITION_TOP.hasLabel}px;
+			  `
+    : (0, react_1.css) `
+					top: ${constant_1.INNER_POSITION_TOP.noLabel}px;
+			  `}
+`;
+/** ref. https://css-tricks.com/auto-growing-inputs-textareas/#aa-other-ideas */
+exports.InputSizer = styled_1.default.div `
+	display: inline-grid;
+	flex: none;
+
+	${({ focused }) => focused &&
+    (0, react_1.css) `
+			width: fit-content;
+			padding-right: 4px;
+		`}
+
+	&::after {
+		content: '${({ displayValue }) => displayValue + ' '}';
+
+		visibility: hidden;
+		white-space: pre-wrap;
+		/** BaseStyled.InputTag 속성과 공유중, 유의 필요 */
+		padding-left: ${constant_1.INNER_POSITION_LEFT + 5}px;
+		${TextStyles_1.typography.title1}
+	}
+
+	&::after,
+	.${exports.className.inputTag} {
+		grid-area: 1 / 2;
+		resize: none;
+		background: none;
+		appearance: none;
+		border: none;
+
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		-moz-appearance: none;
+	}
+`;