From fed54caad3d6f5e94eb5e1c1f96a9b067d89644b Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Mon, 7 Oct 2024 17:55:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20common=20input=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

전달하는 type에 따라 input, radio, checkbox로 사용
---
 src/components/Playground.jsx          | 38 +++++++++++++++-
 src/components/common/input/QInput.jsx | 60 ++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/input/QInput.jsx

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index 200a0337..3a85beef 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import { FaAnglesUp } from 'react-icons/fa6'
@@ -18,6 +18,7 @@ import { useSwal } from '@/hooks/useSwal'
 
 import styles from './playground.module.css'
 import Image from 'next/image'
+import QInput from './common/input/Qinput'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -35,6 +36,19 @@ export default function Playground() {
 
   const [color, setColor] = useState('#ff0000')
 
+  const [textInput, setTextInput] = useState('')
+  const [radioInput, setRadioInput] = useState('')
+  const [checkboxInput, setCheckboxInput] = useState([])
+  useEffect(() => {
+    console.log('textInput:', textInput)
+  }, [textInput])
+  useEffect(() => {
+    console.log('radioInput:', radioInput)
+  }, [radioInput])
+  useEffect(() => {
+    console.log('checkboxInput:', checkboxInput)
+  }, [checkboxInput])
+
   const handleUsers = async () => {
     // const users = await get('/api/user/find-all')
     const params = {
@@ -115,6 +129,28 @@ export default function Playground() {
     <>
       <div className="container mx-auto p-4 m-4 border">
         <div className={styles.test}>이 영역은 테스트입니다.</div>
+        <div>
+          <QInput type={'text'} value={textInput} onChange={setTextInput} />
+          <QInput type={'text'} value={textInput} onChange={setTextInput} readOnly={true} />
+          <QInput
+            type={'radio'}
+            value={radioInput}
+            onChange={setRadioInput}
+            options={[
+              { id: 'r01', value: 'option1', name: 'Option 1' },
+              { id: 'r02', value: 'option2', name: 'Option 2' },
+            ]}
+          />
+          <QInput
+            type={'checkbox'}
+            value={checkboxInput}
+            onChange={setCheckboxInput}
+            options={[
+              { id: 'c01', value: 'checkbox1', name: 'Checkbox 1' },
+              { id: 'c02', value: 'checkbox2', name: 'Checkbox 2' },
+            ]}
+          />
+        </div>
         <div className="m-2">
           <QSelect />
         </div>
diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
new file mode 100644
index 00000000..484d9859
--- /dev/null
+++ b/src/components/common/input/QInput.jsx
@@ -0,0 +1,60 @@
+'use client'
+
+export default function QInput({ type, readOnly = false, options, value, onChange }) {
+  // options = options || [
+  //   {
+  //     id: 'one',
+  //     name: 'Option 1',
+  //     value: '111',
+  //   },
+  //   {
+  //     id: 'two',
+  //     name: 'Option 2',
+  //     value: '222',
+  //   },
+  //   {
+  //     id: 'three',
+  //     name: 'Option 3',
+  //     value: '333',
+  //   },
+  // ]
+
+  const handleChange = (e, optionValue) => {
+    if (type === 'radio') {
+      onChange(e.target.value)
+    } else {
+      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+      onChange(newValue)
+    }
+  }
+
+  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} value={value} onChange={(e) => onChange(e.target.value)} />
+            </div>
+          ) : type === 'radio' || type === 'checkbox' ? (
+            <div className="flx mb5">
+              {options?.map((option) => (
+                <div 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}
+        </div>
+      </div>
+    </div>
+  )
+}