react-validate-component 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { VINPUT_PARAMS } from './types/vinput';
-export declare const VText: ({ maxLength, value, className, props, }: VINPUT_PARAMS) => React.JSX.Element;
+import React from 'react';
+import { VTEXT_PARAMS } from './types/vinput';
+export declare const VText: ({ vState, vClassName, vShowMessage, vMessage, vIsInnerMessage, vLocateMessage, vMessageClass, vIsAnimate, props, }: VTEXT_PARAMS) => JSX.Element;
 export declare const VCheckbox: () => React.JSX.Element;
 export declare const VRadio: () => React.JSX.Element;
 export declare const VDate: () => React.JSX.Element;

package/dist/react-validate-component.cjs.development.js

@@ -2,21 +2,73 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = _interopDefault(require('react'));
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".index-module_invalid__gHKsE {\r\n  border: 2px solid red;\r\n}\r\n\r\n/* 유효성 메시지 locate */\r\n.index-module_vinput__tFGFH {\r\n  display: flex;\r\n}\r\n.index-module_vinput-top-left__2g8Bq {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top__ZTh6H {\r\n  flex-direction: column-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top-right__t6K-Q {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-left__vJn0s {\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-right__HDgip {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__xxaiT {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom__nCOAf {\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__6AjOE {\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage__rihga {\r\n  position: absolute;\r\n  font-size: 12px;\r\n  margin: 0;\r\n  padding: 2px 5px;\r\n  display: flex;\r\n}\r\n.index-module_innerMessage-top-left__HLoYg {\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__ouYW6 {\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__7tMC8 {\r\n  align-items: flex-start;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__4iZyl {\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__U2006 {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__Pg2oU {\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__1QDIv {\r\n  align-items: flex-end;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__gMogT {\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__peBq- {\r\n  align-items: flex-end;\r\n  justify-content: flex-end;\r\n}\r\n\r\n.index-module_animateMessage__Gxf3M {\r\n  animation: index-module_fade-in__GxKz8 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__GxKz8 {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n";
+var styles = {"invalid":"index-module_invalid__gHKsE","vinput":"index-module_vinput__tFGFH","vinput-top-left":"index-module_vinput-top-left__2g8Bq","vinput-top":"index-module_vinput-top__ZTh6H","vinput-top-right":"index-module_vinput-top-right__t6K-Q","vinput-center-left":"index-module_vinput-center-left__vJn0s","vinput-center-right":"index-module_vinput-center-right__HDgip","vinput-bottom-left":"index-module_vinput-bottom-left__xxaiT","vinput-bottom":"index-module_vinput-bottom__nCOAf","vinput-bottom-right":"index-module_vinput-bottom-right__6AjOE","innerMessage":"index-module_innerMessage__rihga","innerMessage-top-left":"index-module_innerMessage-top-left__HLoYg","innerMessage-top":"index-module_innerMessage-top__ouYW6","innerMessage-top-right":"index-module_innerMessage-top-right__7tMC8","innerMessage-center-left":"index-module_innerMessage-center-left__4iZyl","innerMessage-center":"index-module_innerMessage-center__U2006","innerMessage-center-right":"index-module_innerMessage-center-right__Pg2oU","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__1QDIv","innerMessage-bottom":"index-module_innerMessage-bottom__gMogT","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__peBq-","animateMessage":"index-module_animateMessage__Gxf3M","fade-in":"index-module_fade-in__GxKz8"};
+styleInject(css_248z);
 
 // Text
 var VText = function VText(_ref) {
-  var maxLength = _ref.maxLength,
-    value = _ref.value,
-    className = _ref.className,
-    props = _ref.props;
-  return React.createElement("input", Object.assign({
+  var _props$defaultValue;
+  var _ref$vState = _ref.vState,
+    vState = _ref$vState === void 0 ? false : _ref$vState,
+    _ref$vClassName = _ref.vClassName,
+    vClassName = _ref$vClassName === void 0 ? '' : _ref$vClassName,
+    _ref$vShowMessage = _ref.vShowMessage,
+    vShowMessage = _ref$vShowMessage === void 0 ? false : _ref$vShowMessage,
+    _ref$vMessage = _ref.vMessage,
+    vMessage = _ref$vMessage === void 0 ? '' : _ref$vMessage,
+    _ref$vIsInnerMessage = _ref.vIsInnerMessage,
+    vIsInnerMessage = _ref$vIsInnerMessage === void 0 ? false : _ref$vIsInnerMessage,
+    _ref$vLocateMessage = _ref.vLocateMessage,
+    vLocateMessage = _ref$vLocateMessage === void 0 ? 'bottom' : _ref$vLocateMessage,
+    _ref$vMessageClass = _ref.vMessageClass,
+    vMessageClass = _ref$vMessageClass === void 0 ? '' : _ref$vMessageClass,
+    _ref$vIsAnimate = _ref.vIsAnimate,
+    vIsAnimate = _ref$vIsAnimate === void 0 ? false : _ref$vIsAnimate,
+    _ref$props = _ref.props,
+    props = _ref$props === void 0 ? {} : _ref$props;
+  var Result = React.createElement("div", {
+    className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
+  }, React.createElement("input", Object.assign({
     type: "text"
   }, props, {
-    className: className,
-    maxLength: maxLength,
-    value: value
-  }));
+    defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
+    className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
+  })), vState && vShowMessage ? React.createElement("p", {
+    className: vMessageClass + " " + (vIsInnerMessage ? (props == null ? void 0 : props.className) + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] : '') + " " + (vIsAnimate ? styles.animateMessage : '')
+  }, vMessage) : null);
+  return Result;
 };
 // Checkbox
 var VCheckbox = function VCheckbox() {

package/dist/react-validate-component.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-validate-component.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","maxLength","value","className","props","React","type","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":";;;;;;AAGA;IACaA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA;MAChBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,KAAK,GAAAJ,IAAA,CAALI,KAAK;EAEL,OACEC;IACEC,IAAI,EAAC;KACDF,KAAK;IACTD,SAAS,EAAEA,SAAS;IACpBF,SAAS,EAAEA,SAAS;IACpBC,KAAK,EAAEA;KACP;AAEN;AAEA;IACaK,SAAS,GAAG,SAAZA,SAASA;EACpB,OAAOF;IAAOC,IAAI,EAAC;IAAa;AAClC;AAEA;IACaE,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOH;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaG,KAAK,GAAG,SAARA,KAAKA;EAChB,OAAOJ;IAAOC,IAAI,EAAC;IAAS;AAC9B;AAEA;IACaI,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOL;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaK,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAON;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaM,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOP;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaO,IAAI,GAAG,SAAPA,IAAIA;EACf,OAAOR;IAAOC,IAAI,EAAC;IAAQ;AAC7B;;;;;;;;;;;"}
+{"version":3,"file":"react-validate-component.cjs.development.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  vState = false,\n  vClassName = '',\n  vShowMessage = false,\n  vMessage = '',\n  vIsInnerMessage = false,\n  vLocateMessage = 'bottom',\n  vMessageClass = '',\n  vIsAnimate = false,\n  props = {},\n}: VTEXT_PARAMS) => {\n  const Result: JSX.Element = (\n    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>\n      <input\n        type=\"text\"\n        {...props}\n        defaultValue={props?.defaultValue ?? ''}\n        className={`${props?.className} ${\n          vState ? vClassName || styles.invalid : ''\n        }`}\n      ></input>\n      {vState && vShowMessage ? (\n        <p\n          className={`${vMessageClass} ${\n            vIsInnerMessage\n              ? `${props?.className} ${styles.innerMessage} ${\n                  styles[`innerMessage-${vLocateMessage}`]\n                }`\n              : ''\n          } ${vIsAnimate ? styles.animateMessage : ''}`}\n        >\n          {vMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n\n  return Result;\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","vState","_ref$vState","_ref$vClassName","vClassName","_ref$vShowMessage","vShowMessage","_ref$vMessage","vMessage","_ref$vIsInnerMessage","vIsInnerMessage","_ref$vLocateMessage","vLocateMessage","_ref$vMessageClass","vMessageClass","_ref$vIsAnimate","vIsAnimate","_ref$props","props","Result","React","className","styles","vinput","type","defaultValue","_props$defaultValue","invalid","innerMessage","animateMessage","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":"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"}

package/dist/react-validate-component.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.VCheckbox=function(){return e.createElement("input",{type:"checkbox"})},exports.VColor=function(){return e.createElement("input",{type:"color"})},exports.VDate=function(){return e.createElement("input",{type:"date"})},exports.VEmail=function(){return e.createElement("input",{type:"email"})},exports.VRadio=function(){return e.createElement("input",{type:"radio"})},exports.VRange=function(){return e.createElement("input",{type:"range"})},exports.VText=function(t){return e.createElement("input",Object.assign({type:"text"},t.props,{className:t.className,maxLength:t.maxLength,value:t.value}))},exports.VUrl=function(){return e.createElement("input",{type:"url"})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,t={invalid:"index-module_invalid__gHKsE",vinput:"index-module_vinput__tFGFH","vinput-top-left":"index-module_vinput-top-left__2g8Bq","vinput-top":"index-module_vinput-top__ZTh6H","vinput-top-right":"index-module_vinput-top-right__t6K-Q","vinput-center-left":"index-module_vinput-center-left__vJn0s","vinput-center-right":"index-module_vinput-center-right__HDgip","vinput-bottom-left":"index-module_vinput-bottom-left__xxaiT","vinput-bottom":"index-module_vinput-bottom__nCOAf","vinput-bottom-right":"index-module_vinput-bottom-right__6AjOE",innerMessage:"index-module_innerMessage__rihga","innerMessage-top-left":"index-module_innerMessage-top-left__HLoYg","innerMessage-top":"index-module_innerMessage-top__ouYW6","innerMessage-top-right":"index-module_innerMessage-top-right__7tMC8","innerMessage-center-left":"index-module_innerMessage-center-left__4iZyl","innerMessage-center":"index-module_innerMessage-center__U2006","innerMessage-center-right":"index-module_innerMessage-center-right__Pg2oU","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__1QDIv","innerMessage-bottom":"index-module_innerMessage-bottom__gMogT","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__peBq-",animateMessage:"index-module_animateMessage__Gxf3M","fade-in":"index-module_fade-in__GxKz8"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".index-module_invalid__gHKsE {\r\n  border: 2px solid red;\r\n}\r\n\r\n/* 유효성 메시지 locate */\r\n.index-module_vinput__tFGFH {\r\n  display: flex;\r\n}\r\n.index-module_vinput-top-left__2g8Bq {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top__ZTh6H {\r\n  flex-direction: column-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top-right__t6K-Q {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-left__vJn0s {\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-right__HDgip {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__xxaiT {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom__nCOAf {\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__6AjOE {\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage__rihga {\r\n  position: absolute;\r\n  font-size: 12px;\r\n  margin: 0;\r\n  padding: 2px 5px;\r\n  display: flex;\r\n}\r\n.index-module_innerMessage-top-left__HLoYg {\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__ouYW6 {\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__7tMC8 {\r\n  align-items: flex-start;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__4iZyl {\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__U2006 {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__Pg2oU {\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__1QDIv {\r\n  align-items: flex-end;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__gMogT {\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__peBq- {\r\n  align-items: flex-end;\r\n  justify-content: flex-end;\r\n}\r\n\r\n.index-module_animateMessage__Gxf3M {\r\n  animation: index-module_fade-in__GxKz8 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__GxKz8 {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n"),exports.VCheckbox=function(){return n.createElement("input",{type:"checkbox"})},exports.VColor=function(){return n.createElement("input",{type:"color"})},exports.VDate=function(){return n.createElement("input",{type:"date"})},exports.VEmail=function(){return n.createElement("input",{type:"email"})},exports.VRadio=function(){return n.createElement("input",{type:"radio"})},exports.VRange=function(){return n.createElement("input",{type:"range"})},exports.VText=function(e){var i,r=e.vState,o=void 0!==r&&r,s=e.vClassName,l=e.vShowMessage,d=void 0!==l&&l,a=e.vMessage,u=void 0===a?"":a,_=e.vIsInnerMessage,m=void 0!==_&&_,c=e.vLocateMessage,g=void 0===c?"bottom":c,x=e.vMessageClass,p=void 0===x?"":x,f=e.vIsAnimate,v=void 0!==f&&f,M=e.props,y=void 0===M?{}:M;return n.createElement("div",{className:t.vinput+" "+t["vinput-"+g]},n.createElement("input",Object.assign({type:"text"},y,{defaultValue:null!=(i=null==y?void 0:y.defaultValue)?i:"",className:(null==y?void 0:y.className)+" "+(o?(void 0===s?"":s)||t.invalid:"")})),o&&d?n.createElement("p",{className:p+" "+(m?(null==y?void 0:y.className)+" "+t.innerMessage+" "+t["innerMessage-"+g]:"")+" "+(v?t.animateMessage:"")},u):null)},exports.VUrl=function(){return n.createElement("input",{type:"url"})};
 //# sourceMappingURL=react-validate-component.cjs.production.min.js.map

package/dist/react-validate-component.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-validate-component.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["React","type","_ref","props","className","maxLength","value"],"mappings":"6GAsByB,WACvB,OAAOA,yBAAOC,KAAK,6BAcC,WACpB,OAAOD,yBAAOC,KAAK,yBANA,WACnB,OAAOD,yBAAOC,KAAK,yBASC,WACpB,OAAOD,yBAAOC,KAAK,0BAhBC,WACpB,OAAOD,yBAAOC,KAAK,0BAmBC,WACpB,OAAOD,yBAAOC,KAAK,yBA5CA,SAAHC,GAMhB,OACEF,uCACEC,KAAK,QAJJC,EAALC,OAMIC,UAPKF,EAATE,UAQIC,UAVKH,EAATG,UAWIC,MAVCJ,EAALI,uBA8CkB,WAClB,OAAON,yBAAOC,KAAK"}
+{"version":3,"file":"react-validate-component.cjs.production.min.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  vState = false,\n  vClassName = '',\n  vShowMessage = false,\n  vMessage = '',\n  vIsInnerMessage = false,\n  vLocateMessage = 'bottom',\n  vMessageClass = '',\n  vIsAnimate = false,\n  props = {},\n}: VTEXT_PARAMS) => {\n  const Result: JSX.Element = (\n    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>\n      <input\n        type=\"text\"\n        {...props}\n        defaultValue={props?.defaultValue ?? ''}\n        className={`${props?.className} ${\n          vState ? vClassName || styles.invalid : ''\n        }`}\n      ></input>\n      {vState && vShowMessage ? (\n        <p\n          className={`${vMessageClass} ${\n            vIsInnerMessage\n              ? `${props?.className} ${styles.innerMessage} ${\n                  styles[`innerMessage-${vLocateMessage}`]\n                }`\n              : ''\n          } ${vIsAnimate ? styles.animateMessage : ''}`}\n        >\n          {vMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n\n  return Result;\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","React","_ref","vState","_ref$vState","_ref$vClassName","vClassName","_ref$vShowMessage","vShowMessage","_ref$vMessage","vMessage","_ref$vIsInnerMessage","vIsInnerMessage","_ref$vLocateMessage","vLocateMessage","_ref$vMessageClass","vMessageClass","_ref$vIsAnimate","vIsAnimate","_ref$props","props","className","styles","vinput","defaultValue","_props$defaultValue","invalid","innerMessage","animateMessage"],"mappings":"26CAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,IAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAgC,oBAAbC,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,2mFCuBrB,WACvB,OAAOe,yBAAOP,KAAK,6BAcC,WACpB,OAAOO,yBAAOP,KAAK,yBANA,WACnB,OAAOO,yBAAOP,KAAK,yBASC,WACpB,OAAOO,yBAAOP,KAAK,0BAhBC,WACpB,OAAOO,yBAAOP,KAAK,0BAmBC,WACpB,OAAOO,yBAAOP,KAAK,yBAnEA,SAAHQ,aAChBC,OAAAA,WAAMC,GAAQA,EAAAC,EAAAH,EACdI,WAAeC,EAAAL,EACfM,aAAAA,WAAYD,GAAQA,EAAAE,EAAAP,EACpBQ,SAAAA,WAAQD,EAAG,GAAEA,EAAAE,EAAAT,EACbU,gBAAAA,WAAeD,GAAQA,EAAAE,EAAAX,EACvBY,eAAAA,WAAcD,EAAG,SAAQA,EAAAE,EAAAb,EACzBc,cAAAA,WAAaD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,WAAAA,WAAUD,GAAQA,EAAAE,EAAAjB,EAClBkB,MAAAA,WAAKD,EAAG,GAAEA,EA4BV,OAzBElB,uBAAKoB,UAAcC,EAAOC,WAAUD,YAAiBR,IACnDb,uCACEP,KAAK,QACD0B,GACJI,oBAAYC,QAAEL,SAAAA,EAAOI,cAAYC,EAAI,GACrCJ,iBAAcD,SAAAA,EAAOC,gBACnBlB,YAhBEE,EAAG,GAAEA,IAgBgBiB,EAAOI,QAAU,OAG3CvB,GAAUK,EACTP,qBACEoB,UAAcL,OACZJ,SACOQ,SAAAA,EAAOC,eAAaC,EAAOK,iBAC5BL,kBAAuBR,GAEzB,SACFI,EAAaI,EAAOM,eAAiB,KAExClB,GAED,oBAsCU,WAClB,OAAOT,yBAAOP,KAAK"}

package/dist/react-validate-component.esm.js

@@ -1,58 +1,108 @@
-import { createElement } from 'react';
+import React from 'react';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".index-module_invalid__gHKsE {\r\n  border: 2px solid red;\r\n}\r\n\r\n/* 유효성 메시지 locate */\r\n.index-module_vinput__tFGFH {\r\n  display: flex;\r\n}\r\n.index-module_vinput-top-left__2g8Bq {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top__ZTh6H {\r\n  flex-direction: column-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-top-right__t6K-Q {\r\n  flex-direction: column-reverse;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-left__vJn0s {\r\n  flex-direction: row-reverse;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-center-right__HDgip {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-left__xxaiT {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom__nCOAf {\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_vinput-bottom-right__6AjOE {\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage__rihga {\r\n  position: absolute;\r\n  font-size: 12px;\r\n  margin: 0;\r\n  padding: 2px 5px;\r\n  display: flex;\r\n}\r\n.index-module_innerMessage-top-left__HLoYg {\r\n  align-items: flex-start;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-top__ouYW6 {\r\n  align-items: flex-start;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-top-right__7tMC8 {\r\n  align-items: flex-start;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-center-left__4iZyl {\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-center__U2006 {\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-center-right__Pg2oU {\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n}\r\n.index-module_innerMessage-bottom-left__1QDIv {\r\n  align-items: flex-end;\r\n  justify-content: flex-start;\r\n}\r\n.index-module_innerMessage-bottom__gMogT {\r\n  align-items: flex-end;\r\n  justify-content: center;\r\n}\r\n.index-module_innerMessage-bottom-right__peBq- {\r\n  align-items: flex-end;\r\n  justify-content: flex-end;\r\n}\r\n\r\n.index-module_animateMessage__Gxf3M {\r\n  animation: index-module_fade-in__GxKz8 1s ease-in-out;\r\n}\r\n\r\n@keyframes index-module_fade-in__GxKz8 {\r\n  0% {\r\n    opacity: 0;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n";
+var styles = {"invalid":"index-module_invalid__gHKsE","vinput":"index-module_vinput__tFGFH","vinput-top-left":"index-module_vinput-top-left__2g8Bq","vinput-top":"index-module_vinput-top__ZTh6H","vinput-top-right":"index-module_vinput-top-right__t6K-Q","vinput-center-left":"index-module_vinput-center-left__vJn0s","vinput-center-right":"index-module_vinput-center-right__HDgip","vinput-bottom-left":"index-module_vinput-bottom-left__xxaiT","vinput-bottom":"index-module_vinput-bottom__nCOAf","vinput-bottom-right":"index-module_vinput-bottom-right__6AjOE","innerMessage":"index-module_innerMessage__rihga","innerMessage-top-left":"index-module_innerMessage-top-left__HLoYg","innerMessage-top":"index-module_innerMessage-top__ouYW6","innerMessage-top-right":"index-module_innerMessage-top-right__7tMC8","innerMessage-center-left":"index-module_innerMessage-center-left__4iZyl","innerMessage-center":"index-module_innerMessage-center__U2006","innerMessage-center-right":"index-module_innerMessage-center-right__Pg2oU","innerMessage-bottom-left":"index-module_innerMessage-bottom-left__1QDIv","innerMessage-bottom":"index-module_innerMessage-bottom__gMogT","innerMessage-bottom-right":"index-module_innerMessage-bottom-right__peBq-","animateMessage":"index-module_animateMessage__Gxf3M","fade-in":"index-module_fade-in__GxKz8"};
+styleInject(css_248z);
 
 // Text
 var VText = function VText(_ref) {
-  var maxLength = _ref.maxLength,
-    value = _ref.value,
-    className = _ref.className,
-    props = _ref.props;
-  return createElement("input", Object.assign({
+  var _props$defaultValue;
+  var _ref$vState = _ref.vState,
+    vState = _ref$vState === void 0 ? false : _ref$vState,
+    _ref$vClassName = _ref.vClassName,
+    vClassName = _ref$vClassName === void 0 ? '' : _ref$vClassName,
+    _ref$vShowMessage = _ref.vShowMessage,
+    vShowMessage = _ref$vShowMessage === void 0 ? false : _ref$vShowMessage,
+    _ref$vMessage = _ref.vMessage,
+    vMessage = _ref$vMessage === void 0 ? '' : _ref$vMessage,
+    _ref$vIsInnerMessage = _ref.vIsInnerMessage,
+    vIsInnerMessage = _ref$vIsInnerMessage === void 0 ? false : _ref$vIsInnerMessage,
+    _ref$vLocateMessage = _ref.vLocateMessage,
+    vLocateMessage = _ref$vLocateMessage === void 0 ? 'bottom' : _ref$vLocateMessage,
+    _ref$vMessageClass = _ref.vMessageClass,
+    vMessageClass = _ref$vMessageClass === void 0 ? '' : _ref$vMessageClass,
+    _ref$vIsAnimate = _ref.vIsAnimate,
+    vIsAnimate = _ref$vIsAnimate === void 0 ? false : _ref$vIsAnimate,
+    _ref$props = _ref.props,
+    props = _ref$props === void 0 ? {} : _ref$props;
+  var Result = React.createElement("div", {
+    className: styles.vinput + " " + styles["vinput-" + vLocateMessage]
+  }, React.createElement("input", Object.assign({
     type: "text"
   }, props, {
-    className: className,
-    maxLength: maxLength,
-    value: value
-  }));
+    defaultValue: (_props$defaultValue = props == null ? void 0 : props.defaultValue) != null ? _props$defaultValue : '',
+    className: (props == null ? void 0 : props.className) + " " + (vState ? vClassName || styles.invalid : '')
+  })), vState && vShowMessage ? React.createElement("p", {
+    className: vMessageClass + " " + (vIsInnerMessage ? (props == null ? void 0 : props.className) + " " + styles.innerMessage + " " + styles["innerMessage-" + vLocateMessage] : '') + " " + (vIsAnimate ? styles.animateMessage : '')
+  }, vMessage) : null);
+  return Result;
 };
 // Checkbox
 var VCheckbox = function VCheckbox() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "checkbox"
   });
 };
 // Radio
 var VRadio = function VRadio() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "radio"
   });
 };
 // Date
 var VDate = function VDate() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "date"
   });
 };
 // Color
 var VColor = function VColor() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "color"
   });
 };
 // Email
 var VEmail = function VEmail() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "email"
   });
 };
 // Range
 var VRange = function VRange() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "range"
   });
 };
 // Url
 var VUrl = function VUrl() {
-  return createElement("input", {
+  return React.createElement("input", {
     type: "url"
   });
 };

package/dist/react-validate-component.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-validate-component.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { VINPUT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  maxLength,\n  value,\n  className,\n  props,\n}: VINPUT_PARAMS) => {\n  return (\n    <input\n      type=\"text\"\n      {...props}\n      className={className}\n      maxLength={maxLength}\n      value={value}\n    />\n  );\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","maxLength","value","className","props","React","type","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":";;AAGA;IACaA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA;MAChBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,KAAK,GAAAJ,IAAA,CAALI,KAAK;EAEL,OACEC;IACEC,IAAI,EAAC;KACDF,KAAK;IACTD,SAAS,EAAEA,SAAS;IACpBF,SAAS,EAAEA,SAAS;IACpBC,KAAK,EAAEA;KACP;AAEN;AAEA;IACaK,SAAS,GAAG,SAAZA,SAASA;EACpB,OAAOF;IAAOC,IAAI,EAAC;IAAa;AAClC;AAEA;IACaE,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOH;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaG,KAAK,GAAG,SAARA,KAAKA;EAChB,OAAOJ;IAAOC,IAAI,EAAC;IAAS;AAC9B;AAEA;IACaI,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOL;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaK,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAON;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaM,MAAM,GAAG,SAATA,MAAMA;EACjB,OAAOP;IAAOC,IAAI,EAAC;IAAU;AAC/B;AAEA;IACaO,IAAI,GAAG,SAAPA,IAAIA;EACf,OAAOR;IAAOC,IAAI,EAAC;IAAQ;AAC7B;;;;"}
+{"version":3,"file":"react-validate-component.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './index.module.css';\nimport { VTEXT_PARAMS } from './types/vinput';\n\n// Text\nexport const VText = ({\n  vState = false,\n  vClassName = '',\n  vShowMessage = false,\n  vMessage = '',\n  vIsInnerMessage = false,\n  vLocateMessage = 'bottom',\n  vMessageClass = '',\n  vIsAnimate = false,\n  props = {},\n}: VTEXT_PARAMS) => {\n  const Result: JSX.Element = (\n    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>\n      <input\n        type=\"text\"\n        {...props}\n        defaultValue={props?.defaultValue ?? ''}\n        className={`${props?.className} ${\n          vState ? vClassName || styles.invalid : ''\n        }`}\n      ></input>\n      {vState && vShowMessage ? (\n        <p\n          className={`${vMessageClass} ${\n            vIsInnerMessage\n              ? `${props?.className} ${styles.innerMessage} ${\n                  styles[`innerMessage-${vLocateMessage}`]\n                }`\n              : ''\n          } ${vIsAnimate ? styles.animateMessage : ''}`}\n        >\n          {vMessage}\n        </p>\n      ) : null}\n    </div>\n  );\n\n  return Result;\n};\n\n// Checkbox\nexport const VCheckbox = () => {\n  return <input type=\"checkbox\" />;\n};\n\n// Radio\nexport const VRadio = () => {\n  return <input type=\"radio\" />;\n};\n\n// Date\nexport const VDate = () => {\n  return <input type=\"date\" />;\n};\n\n// Color\nexport const VColor = () => {\n  return <input type=\"color\" />;\n};\n\n// Email\nexport const VEmail = () => {\n  return <input type=\"email\" />;\n};\n\n// Range\nexport const VRange = () => {\n  return <input type=\"range\" />;\n};\n\n// Url\nexport const VUrl = () => {\n  return <input type=\"url\" />;\n};\n"],"names":["VText","_ref","vState","_ref$vState","_ref$vClassName","vClassName","_ref$vShowMessage","vShowMessage","_ref$vMessage","vMessage","_ref$vIsInnerMessage","vIsInnerMessage","_ref$vLocateMessage","vLocateMessage","_ref$vMessageClass","vMessageClass","_ref$vIsAnimate","vIsAnimate","_ref$props","props","Result","React","className","styles","vinput","type","defaultValue","_props$defaultValue","invalid","innerMessage","animateMessage","VCheckbox","VRadio","VDate","VColor","VEmail","VRange","VUrl"],"mappings":"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"}

package/dist/types/vinput.d.ts

@@ -1,6 +1,12 @@
-export interface VINPUT_PARAMS {
-    maxLength: number;
-    value: string;
-    className: string;
-    props: object;
+import propsType from './vprops';
+export interface VTEXT_PARAMS {
+    readonly vState: boolean;
+    vClassName?: string;
+    readonly vShowMessage: boolean;
+    vMessage?: string;
+    vIsInnerMessage?: boolean;
+    vLocateMessage?: 'top-left' | 'top' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+    vMessageClass?: string;
+    vIsAnimate?: boolean;
+    props?: propsType;
 }

package/dist/types/vprops.d.ts

@@ -0,0 +1,3 @@
+export default interface propsType {
+    [key: string]: any;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -57,5 +57,12 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.6.3",
     "typescript": "^3.9.10"
+  },
+  "dependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.25.3",
+    "babel-jest": "^29.7.0",
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

package/src/index.module.css

@@ -0,0 +1,103 @@
+.invalid {
+  border: 2px solid red;
+}
+
+/* 유효성 메시지 locate */
+.vinput {
+  display: flex;
+}
+.vinput-top-left {
+  flex-direction: column-reverse;
+  align-items: flex-start;
+  justify-content: center;
+}
+.vinput-top {
+  flex-direction: column-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-top-right {
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  justify-content: center;
+}
+.vinput-center-left {
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-center-right {
+  align-items: center;
+  justify-content: center;
+}
+.vinput-bottom-left {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+.vinput-bottom {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.vinput-bottom-right {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+.innerMessage {
+  position: absolute;
+  font-size: 12px;
+  margin: 0;
+  padding: 2px 5px;
+  display: flex;
+}
+.innerMessage-top-left {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.innerMessage-top {
+  align-items: flex-start;
+  justify-content: center;
+}
+.innerMessage-top-right {
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.innerMessage-center-left {
+  align-items: center;
+  justify-content: flex-start;
+}
+.innerMessage-center {
+  align-items: center;
+  justify-content: center;
+}
+.innerMessage-center-right {
+  align-items: center;
+  justify-content: flex-end;
+}
+.innerMessage-bottom-left {
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+.innerMessage-bottom {
+  align-items: flex-end;
+  justify-content: center;
+}
+.innerMessage-bottom-right {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.animateMessage {
+  animation: fade-in 1s ease-in-out;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/index.tsx

@@ -1,22 +1,46 @@
-import * as React from 'react';
-import { VINPUT_PARAMS } from './types/vinput';
+import React from 'react';
+import styles from './index.module.css';
+import { VTEXT_PARAMS } from './types/vinput';
 
 // Text
 export const VText = ({
-  maxLength,
-  value,
-  className,
-  props,
-}: VINPUT_PARAMS) => {
-  return (
-    <input
-      type="text"
-      {...props}
-      className={className}
-      maxLength={maxLength}
-      value={value}
-    />
+  vState = false,
+  vClassName = '',
+  vShowMessage = false,
+  vMessage = '',
+  vIsInnerMessage = false,
+  vLocateMessage = 'bottom',
+  vMessageClass = '',
+  vIsAnimate = false,
+  props = {},
+}: VTEXT_PARAMS) => {
+  const Result: JSX.Element = (
+    <div className={`${styles.vinput} ${styles[`vinput-${vLocateMessage}`]}`}>
+      <input
+        type="text"
+        {...props}
+        defaultValue={props?.defaultValue ?? ''}
+        className={`${props?.className} ${
+          vState ? vClassName || styles.invalid : ''
+        }`}
+      ></input>
+      {vState && vShowMessage ? (
+        <p
+          className={`${vMessageClass} ${
+            vIsInnerMessage
+              ? `${props?.className} ${styles.innerMessage} ${
+                  styles[`innerMessage-${vLocateMessage}`]
+                }`
+              : ''
+          } ${vIsAnimate ? styles.animateMessage : ''}`}
+        >
+          {vMessage}
+        </p>
+      ) : null}
+    </div>
   );
+
+  return Result;
 };
 
 // Checkbox

package/src/types/vinput.ts

@@ -1,7 +1,23 @@
-// VInput 파라미터
-export interface VINPUT_PARAMS {
-  maxLength: number;
-  value: string;
-  className: string;
-  props: object;
+import propsType from './vprops';
+
+// VText 파라미터
+export interface VTEXT_PARAMS {
+  readonly vState: boolean; // 유효성 상태 값
+  vClassName?: string; // 유효성 입힐 class 명
+  readonly vShowMessage: boolean; // 유효성 메시지 출력할지
+  vMessage?: string; // 유효성 메시지
+  vIsInnerMessage?: boolean; // 유효성 메시지를 element 안에 넣을지 (absolute)
+  vLocateMessage?: // 유효성 메시지를 element 어디에 붙일지
+  | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'center-left'
+    | 'center'
+    | 'center-right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right';
+  vMessageClass?: string; // 유효성 메시지에 입힐 class 명
+  vIsAnimate?: boolean; // 유효성 메시지 출력 시 애니메이션 적용할지
+  props?: propsType; // 기타 옵션
 }

package/src/types/vprops.ts

@@ -0,0 +1,3 @@
+export default interface propsType {
+  [key: string]: any;
+}

package/src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}