feat: common select 컴포넌트 추가

src/components/Playground.jsx

@@ -11,14 +11,15 @@ import { useMessage } from '@/hooks/useMessage'
 import { convertDwgToPng } from '@/lib/cadAction'
 import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'
 
-import QSelect from '@/components/ui/QSelect'
 import { Button } from '@nextui-org/react'
 import ColorPicker from './common/color-picker/ColorPicker'
 import { useSwal } from '@/hooks/useSwal'
 
 import styles from './playground.module.css'
 import Image from 'next/image'
+
 import QInput from './common/input/Qinput'
+import QSelect from './common/select/QSelect'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -39,6 +40,7 @@ export default function Playground() {
   const [textInput, setTextInput] = useState('')
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
+  const [selectedValue, setSelectedValue] = useState('')
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
@@ -48,6 +50,9 @@ export default function Playground() {
   useEffect(() => {
     console.log('checkboxInput:', checkboxInput)
   }, [checkboxInput])
+  useEffect(() => {
+    console.log('selectedValue:', selectedValue)
+  }, [selectedValue])
 
   const handleUsers = async () => {
     // const users = await get('/api/user/find-all')
@@ -129,11 +134,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} />
+        <div className="m-2">
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setTextInput('')
+            }}
+          >
+            QInput TextInput DATA RESET
+          </button>
+          <QInput type="text" value={textInput} onChange={setTextInput} />
+          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setRadioInput('')
+            }}
+          >
+            QInput Radio DATA RESET
+          </button>
           <QInput
-            type='radio'
+            type="radio"
             value={radioInput}
             onChange={setRadioInput}
             options={[
@@ -141,8 +163,17 @@ export default function Playground() {
               { id: 'r02', value: 'option2', name: 'Option 2' },
             ]}
           />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setCheckboxInput('')
+            }}
+          >
+            QInput Checkbox DATA RESET
+          </button>
           <QInput
-            type='checkbox'
+            type="checkbox"
             value={checkboxInput}
             onChange={setCheckboxInput}
             options={[
@@ -152,7 +183,50 @@ export default function Playground() {
           />
         </div>
         <div className="m-2">
-          <QSelect />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setSelectedValue([])
+            }}
+          >
+            QSelect DATA RESET
+          </button>
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+          />
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+            disabled="true"
+          />
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+            dark="true"
+          />
         </div>
         <div className="w-full bg-orange-300 m-2">{testVar}</div>
         <div>

src/components/common/select/QSelect.jsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useCallback } from 'react'
+
+export default function QSelect({ placeholder = '', options, disabled = false, dark = false, value, onChange }) {
+  // const options = [
+  //   { id: 's01', value: 'cat', name: '고양이' },
+  //   { id: 's02', value: 'dog', name: '개' },
+  //   { id: 's03', value: 'lion', name: '사자' },
+  //   { id: 's04', value: 'tiger', name: '호랑이' },
+  // ]
+
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value)
+    },
+    [onChange],
+  )
+
+  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}>
+              <option value="" disabled hidden>
+                {placeholder}
+              </option>
+              {options.map((option) => (
+                <option key={option.name} value={option.value}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}