From 97afaf3f5cbd88bbe628b6ff756e3b0d3e06d0ae Mon Sep 17 00:00:00 2001 From: basssy Date: Thu, 17 Oct 2024 15:12:44 +0900 Subject: [PATCH] =?UTF-8?q?React-Select=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?= =?UTF-8?q?=EB=9F=AC=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/app/reactselect/page.jsx | 40 ++ src/components/publishpage/PublishPage.jsx | 242 ++++++++--- yarn.lock | 468 ++++++++++++++++++++- 4 files changed, 680 insertions(+), 71 deletions(-) create mode 100644 src/app/reactselect/page.jsx 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

+
+