From a192c66c393514e28a05214300ba1562c8e076dc Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 18:15:33 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20QInput,=20QSelect=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=20div=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/QInput.jsx   | 48 +++++++++++-------------
 src/components/common/select/QSelect.jsx | 32 ++++++----------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index aea2d66e..39b8be08 100644
--- a/src/components/common/input/QInput.jsx
+++ b/src/components/common/input/QInput.jsx
@@ -41,32 +41,28 @@ export default function QInput({ type, readOnly = false, options = [], value, on
   )
 
   return (
-    <div className="input-content light">
-      <div className="input-wrap">
-        <div className="form-input">
-          {type === 'text' ? (
-            <div className="mb5">
-              <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 key={option.name} className={`d-${type}-radio light mr5`}>
-                  <input
-                    type={type}
-                    name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
-                    value={option.value}
-                    id={option.id}
-                    checked={type === 'radio' ? value === option.value : value.includes(option.value)}
-                    onChange={(e) => handleChange(e, option.value)}
-                  />
-                  <label htmlFor={option.id}>{option.name}</label>
-                </div>
-              ))}
-            </div>
-          ) : null}
+    <>
+      {type === 'text' ? (
+        <div className="mb5">
+          <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
         </div>
-      </div>
-    </div>
+      ) : type === 'radio' || type === 'checkbox' ? (
+        <div className="flx mb5">
+          {options?.map((option) => (
+            <div key={option.name} className={`d-${type}-radio light mr5`}>
+              <input
+                type={type}
+                name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
+                value={option.value}
+                id={option.id}
+                checked={type === 'radio' ? value === option.value : value.includes(option.value)}
+                onChange={(e) => handleChange(e, option.value)}
+              />
+              <label htmlFor={option.id}>{option.name}</label>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
   )
 }
diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelect.jsx
index ba89ef04..acf0ac6b 100644
--- a/src/components/common/select/QSelect.jsx
+++ b/src/components/common/select/QSelect.jsx
@@ -18,25 +18,17 @@ export default function QSelect({ placeholder, options, disabled = false, dark =
   )
 
   return (
-    <div className="input-content light">
-      <div className="input-wrap">
-        <div className="form-input">
-          <div className="mb5">
-            <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
-              {placeholder?.length > 0 ? (
-                <option value="" disabled hidden>
-                  {placeholder}
-                </option>
-              ) : null}
-              {options.map((option) => (
-                <option key={option.name} value={option.value}>
-                  {option.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
+    <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
+      {placeholder && (
+        <option value="" disabled hidden>
+          {placeholder}
+        </option>
+      )}
+      {options.map((option) => (
+        <option key={option.name} value={option.value}>
+          {option.name}
+        </option>
+      ))}
+    </select>
   )
 }