chore: README 수정

Author: dldvk9999

README.md

@@ -24,9 +24,9 @@ yarn add react-validate-component
 
 ## 사용법, How to use
 
-현재 라이브러리에는 `VText` 컴포넌트가 구현되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
+현재 라이브러리에는 `VText`, `VCheckbox`, `VURL` 컴포넌트가 구현되어 있습니다. 이 컴포넌트를 사용하여 텍스트 입력 필드의 유효성 검사를 쉽게 구현할 수 있습니다.
 
-The library currently includes the `VText` component. You can use this component to easily implement validation for text input fields.
+The library currently includes the `VText`, `VCheckbox`, `VURL` component. You can use this component to easily implement validation for text input fields.
 
 ### VText Component
 
@@ -201,6 +201,85 @@ export default App;
 - `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
 - `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
 
+### VURL Component
+
+`VURL` 컴포넌트는 기본적인 URL 필드에 유효성 검사 문구를 출력해주는 기능을 제공합니다.
+
+The `VURL` component provides functionality to display validation messages for basic url fields.
+
+#### 사용 예제, Example
+
+```jsx
+import React from 'react';
+import { VText } from 'react-validate-component';
+
+const App = () => {
+  const [vState, setvState] = React.useState < boolean > false;
+  const [vMessage, setvMessage] = React.useState < string > '';
+  const [message, setmessage] =
+    React.useState < string > 'https://www.naver.com';
+
+  React.useEffect(() => {
+    if (/^http[s]?:\/\/([\S]{3,})/i.test(message)) {
+      setvState(false);
+      setvMessage('');
+    } else {
+      setvState(true);
+      setvMessage('IT MUST BE URL.');
+    }
+  }, [message]);
+
+  return (
+    <div>
+      <h2>VURL</h2>
+      <h3>INPUT URL.</h3>
+      <VURL
+        vState={vState}
+        vType={'outer'}
+        // vClassName={'test'}
+        vShowMessage={true}
+        vMessage={vMessage}
+        vLocateMessage={'bottom-left'}
+        vMessageClass={styles.validation_message}
+        vIsAnimate={true}
+        props={{
+          onChange: (e: { target: { value: string } }) => {
+            setmessage(e.target.value);
+          },
+          placeholder: 'this is react-validate-component test.',
+          className: styles.input_text,
+          defaultValue: 'https://www.naver.com',
+        }}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+#### Props
+
+- `vState` (boolean): 유효성 상태 값입니다.
+- `vType` (`inner`, `outer`, `tooltip`): 유효성 메시지를 띄우는 타입입니다.
+- `vClassName` (string): 유효성 입힐 class 명입니다.
+- `vShowMessage` (boolean): 유효성 메시지 출력 여부값입니다.
+- `vMessage` (string): 유효성 검사 실패 시 표시할 에러 메시지입니다.
+- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): 유효성 메시지를 element 어디에 붙일지 위치값입니다.
+- `vMessageClass` (string): 유효성 메시지에 입힐 class 명입니다.
+- `vIsAnimate` (boolean): 유효성 메시지 출력 시 애니메이션 적용할지 여부입니다. (현재는 opacity만 적용되어있습니다.)
+- `props` (object): 기타 옵션입니다. 기본 input 태그에 attribute로 넣을 값들을 입력하시면 됩니다.
+
+- `vState` (boolean): The validity status value.
+- `vType` (`inner`, `outer`, `tooltip`): The type of validation message display.
+- `vClassName` (string): The class name to apply for validation styling.
+- `vShowMessage` (boolean): Whether to display the validation message.
+- `vMessage` (string): The error message to display when validation fails.
+- `vLocateMessage` (`top-left`, `top`, `top-right`, `center-left`, `center`, `center-right`, `bottom-left`, `bottom`, `bottom-right`): The position where the validation message should be displayed relative to the element.
+- `vMessageClass` (string): The class name to apply to the validation message.
+- `vIsAnimate` (boolean): Whether to apply animation when displaying the validation message (currently, only opacity animation is supported).
+- `props` (object): Other options. Enter values for attributes that can be added to the basic input tag.
+
 ### 유효성 검사 규칙, Validation Rules
 
 - 지금은 사용자가 정규식 혹은 함수를 이용해 작성한 유효성검사 로직을 토대로 element에 출력하고 있습니다.