From 99abae61767328547ce9652ddd784cedcfdb28b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=83=81=ED=98=84?= <gus516@palnet.co.kr>
Date: Wed, 31 Jan 2024 11:50:11 +0900
Subject: [PATCH] =?UTF-8?q?laanc=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/laanc/step/LaancStep1.js |  6 +-
 src/components/ui/input/index.tsx       | 96 ++++++++++++-------------
 2 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/src/components/laanc/step/LaancStep1.js b/src/components/laanc/step/LaancStep1.js
index d866694e..7a6d8d7f 100644
--- a/src/components/laanc/step/LaancStep1.js
+++ b/src/components/laanc/step/LaancStep1.js
@@ -1086,7 +1086,7 @@ export default function LaancStep1({
                             .replace('m') // "m"을 맨 뒤에 붙임
                         });
                       }}
-                      innerRef={fltElevRef} // Input 요소에 ref를 연결
+                      ref={fltElevRef} // Input 요소에 ref를 연결
                       onClick={() => handleInputClick('fltElev')}
                       placeholder='100m'
                     />
@@ -1118,8 +1118,8 @@ export default function LaancStep1({
                         //   value.replace(/^0+/, '').replace(/\D/g, '')
                         // );
                       }}
-                      innerRef={bufferZoneRef} // Input 요소에 ref를 연결
-                      onClick={() => handleInputClick('bufferZone')}
+                      ref={bufferZoneRef} // Input 요소에 ref를 연결
+                      onClick={e => handleInputClick('bufferZone')}
                       placeholder='100m'
                       disabled={
                         !areaCoordList
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index e57dacf5..3072c738 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,5 +1,10 @@
-'use client';
-import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
+import {
+  ChangeEvent,
+  MouseEventHandler,
+  ReactNode,
+  ForwardedRef,
+  forwardRef
+} from 'react';
 import { Input } from 'reactstrap';
 
 interface Props {
@@ -18,66 +23,57 @@ interface Props {
   bsSize?: 'lg' | 'sm' | undefined;
   placeholder?: string;
   disabled?: boolean;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-/**
- *
- * @param children: ReactNode
- * @param className?:string
- * @param readOnly?:boolean default false
- * @param checked?:boolean
- * @param label?:string
- * @param id?:string
- * @param onClick?:MouseEventHandler<HTMLButtonElement>
- * @param onChange?:MouseEventHandler<HTMLButtonElement>
- * @param value?:any
- * @param name?:string
- * @param type?:string
- * @param inline?:boolean default false
- * @param bsSize?: "lg" | "sm"
- * @param placeholder?:string
- * @param onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
- * @param disabled?:boolean default false
- */
 
-export default function CustomInput({
-  children,
-  className,
-  label,
-  checked,
-  readOnly = false,
-  id,
-  onClick,
-  onChange,
-  value,
-  name,
-  type,
-  inline = false,
-  bsSize,
-  placeholder,
-  disabled = false,
-  onKeyPress
-}: Props) {
-  return (
-    <>
+const CustomInput = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      children,
+      className,
+      label,
+      checked,
+      readOnly = false,
+      id,
+      onClick,
+      onChange,
+      value,
+      name,
+      type,
+      inline,
+      bsSize,
+      placeholder,
+      disabled = false,
+      onKeyPress,
+      onBlur
+    },
+    ref
+  ) => {
+    return (
       <Input
+        innerRef={ref}
         className={className}
-        id={id}
+        label={label}
         checked={checked}
         readOnly={readOnly}
-        label={label}
+        id={id}
+        onClick={onClick}
+        onChange={onChange}
         value={value}
         name={name}
-        disabled={disabled}
         type={type}
+        inline={inline}
         bsSize={bsSize}
-        onClick={onClick}
-        onChange={onChange}
-        onKeyPress={onKeyPress}
         placeholder={placeholder}
+        disabled={disabled}
+        onBlur={onBlur}
+        onKeyPress={onKeyPress}
       >
         {children}
       </Input>
-    </>
-  );
-}
+    );
+  }
+);
+
+export default CustomInput;