laanc 공통 컴포넌트 수정

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를 연결
+                      ref={bufferZoneRef} // Input 요소에 ref를 연결
-                      onClick={() => handleInputClick('bufferZone')}
+                      onClick={e => handleInputClick('bufferZone')}
                       placeholder='100m'
                       disabled={
                         !areaCoordList

src/components/ui/input/index.tsx

@@ -1,5 +1,10 @@
-'use client';
+import {
-import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
+  ChangeEvent,
+  MouseEventHandler,
+  ReactNode,
+  ForwardedRef,
+  forwardRef
+} from 'react';
 import { Input } from 'reactstrap';
 
 interface Props {
@@ -18,29 +23,13 @@ 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({
+const CustomInput = forwardRef<HTMLInputElement, Props>(
+  (
+    {
       children,
       className,
       label,
@@ -52,32 +41,39 @@ export default function CustomInput({
       value,
       name,
       type,
-  inline = false,
+      inline,
       bsSize,
       placeholder,
       disabled = false,
-  onKeyPress
+      onKeyPress,
-}: Props) {
+      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;