From 875a3004fd5e9010c07c1e611da205981d1e67cc Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 16:18:21 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20QInput=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20useCallback=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/QInput.jsx | 32 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index 484d9859..aea2d66e 100644
--- a/src/components/common/input/QInput.jsx
+++ b/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'}