diff --git a/package.json b/package.json index 2667d94..e3fb1d0 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "devDependencies": { "postcss": "^8", + "react-select": "^5.8.1", "sass": "^1.77.8", "tailwindcss": "^3.4.1" } diff --git a/src/app/reactselect/page.jsx b/src/app/reactselect/page.jsx new file mode 100644 index 0000000..ba1898e --- /dev/null +++ b/src/app/reactselect/page.jsx @@ -0,0 +1,40 @@ +'use client' +import React, { useRef, useState } from 'react' +import Select from 'react-select' +import '@/styles/_inputcommon.scss' +export default function ReactSelect() { + const selectOption = [ + { label: '김창수', value: '1' }, + { label: '류제영', value: '2' }, + { label: '정상연', value: '3' }, + { label: '안병근', value: '4' }, + ] + + const ref = useRef() + + const [select, setSelect] = useState('') + + //isSearchable 자동완성 검색가능여부 + //isClearable x버튼 + + const onSelectionChange = (key) => { + if (key) { + setSelect(key.value) + } else { + setSelect('') + } + } + return ( +
+

REACT-SELECT

+
+
+

REACT-SELECT

+
+