refactor: QInput 컴포넌트에 useCallback 적용

src/components/common/input/QInput.jsx

@@ -1,6 +1,8 @@
 'use client'
 
-export default function QInput({ type, readOnly = false, options, value, onChange }) {
+import { useCallback } from 'react'
+
+export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
   // options = options || [
   //   {
   //     id: 'one',
@@ -19,14 +21,24 @@ export default function QInput({ type, readOnly = false, options, value, onChang
   //   },
   // ]
 
-  const handleChange = (e, optionValue) => {
-    if (type === 'radio') {
+  const handleChange = useCallback(
+    (e, optionValue) => {
+      if (type === 'radio') {
+        onChange(e.target.value)
+      } else {
+        const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+        onChange(newValue)
+      }
+    },
+    [type, value, onChange],
+  )
+
+  const handleTextChange = useCallback(
+    (e) => {
       onChange(e.target.value)
-    } else {
-      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
-      onChange(newValue)
-    }
-  }
+    },
+    [onChange],
+  )
 
   return (
     <div className="input-content light">
@@ -34,12 +46,12 @@ export default function QInput({ type, readOnly = false, options, value, onChang
         <div className="form-input">
           {type === 'text' ? (
             <div className="mb5">
-              <input type={type} className="input-light" readOnly={readOnly} value={value} onChange={(e) => onChange(e.target.value)} />
+              <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
             </div>
           ) : type === 'radio' || type === 'checkbox' ? (
             <div className="flx mb5">
               {options?.map((option) => (
-                <div className={`d-${type}-radio light mr5`}>
+                <div key={option.name} className={`d-${type}-radio light mr5`}>
                   <input
                     type={type}
                     name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}