qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

react-select 라이브러리 수정

Browse Source
This commit is contained in:
김창수 2024-10-17 17:41:02 +09:00
parent 04b0e35dd6
commit 0ec77570d2
7 changed files with 154 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/management/productinfo/page.jsx
View File

@ -52,7 +52,7 @@ export default function ProductInfo(){
<Footer/>
{/* 풍속선택 팝업 */}
<WindSelectPop/>
{/* <WindSelectPop/> */}
</div>
)
}

28
src/app/reactselect/page.jsx
View File

@ -1,29 +1,9 @@
'use client'
import React, { useRef, useState } from 'react'
import Select from 'react-select'
import ReactSelect from '@/components/common/reactselect/ReactSelect'
import '@/styles/_inputcommon.scss'
export default function ReactSelect() {
const selectOption = [
{ label: '김창수', value: '1' },
{ label: '류제영', value: '2' },
{ label: '정상연', value: '3' },
{ label: '안병근', value: '4' },
]
export default function ReactSelectPage() {
const ref = useRef()
const [select, setSelect] = useState('')
//isSearchable 자동완성 검색가능여부
//isClearable x버튼
const onSelectionChange = (key) => {
if (key) {
setSelect(key.value)
} else {
setSelect('')
}
}
return (
<div>
<h1 className="title">REACT-SELECT</h1>
@ -31,7 +11,7 @@ export default function ReactSelect() {
<div className="input-wrap">
<h1>REACT-SELECT</h1>
<div className="react-select-wrap">
<Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
<ReactSelect/>
</div>
</div>
</div>

44
src/components/common/reactselect/ReactSelect.jsx Normal file
View File

@ -0,0 +1,44 @@
'use client'
import React, { useRef, useState } from 'react'
import Select from 'react-select'
export default function ReactSelect(){
const selectOption = [
{ label: '김창수김창수김창수김창수김창수김창수김창수김창수김창수', value: '1' },
{ label: '敬称選択', value: '2' },
{ label: '敬称選択', value: '3' },
{ label: '敬称選択', value: '5' },
{ label: '敬称選択', value: '6' },
]
const ref = useRef()
const [select, setSelect] = useState('')
//isSearchable 자동완성 검색가능여부
//isClearable x버튼
const onSelectionChange = (key) => {
if (key) {
setSelect(key.value)
} else {
setSelect('')
}
}
return(
<Select
ref={ref}
className='react-select-custom'
classNamePrefix='custom'
options={selectOption}
onChange={onSelectionChange}
isSearchable={false}
placeholder="敬称選択"
isClearable={true}
// isDisabled={true}
/>
)
}

15
src/components/publishpage/PublishPage.jsx
View File

@ -75,6 +75,21 @@ export default function PublishPage() {
<td className="coding_stat_web"></td>
<td className="t-center">2024-09-05</td>
</tr>
<tr>
<td className="t-center">
<strong>셀렉트</strong>
</td>
<td>
<strong className="title">react-select</strong>
</td>
<td>
<Link href="/reactselect" target="_blank">
reactselect
</Link>
</td>
<td className="coding_stat_web"></td>
<td className="t-center">2024-09-05</td>
</tr>
<tr>
<td className="t-center">
<strong>React-Select</strong>

13
src/components/sub/management/productinfo/ProductInfoTable.jsx
View File

@ -2,6 +2,7 @@
import Pagination from "@/components/common/grid/Pagination";
import QGrid from "@/components/common/grid/QGrid";
import ReactSelect from "@/components/common/reactselect/ReactSelect";
import { useState } from "react";
export default function ProductInfoTable(){
@ -83,6 +84,10 @@ export default function ProductInfoTable(){
<div className="select-wrap" style={{width : '120px'}}>
<select className="select-light" name="" id="" >
<option>案件</option>
<option>案件</option>
<option>案件</option>
<option>案件</option>
<option>案件</option>
</select>
</div>
</div>
@ -110,9 +115,7 @@ export default function ProductInfoTable(){
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{width : '567px'}}>
<select className="select-light" name="" id="">
<option>選択</option>
</select>
<ReactSelect/>
</div>
<div className="input-wrap" style={{width : '216px'}}>
<input type="text" className="input-light" readOnly/>
@ -135,9 +138,7 @@ export default function ProductInfoTable(){
<td>
<div className="flx-box">
<div className="select-wrap mr5" style={{width : '567px'}}>
<select className="select-light" name="" id="" >
<option>選択</option>
</select>
<ReactSelect/>
</div>
<div className="input-wrap" style={{width : '216px'}}>
<input type="text" className="input-light" readOnly/>

2
src/styles/_modal.scss
View File

@ -453,7 +453,7 @@ $alert-color: #101010;
gap: 20px;
}
.select-wrap{
div{
.sort-select{
width: 100%;
}
}

82
src/styles/_reset.scss
View File

@ -804,4 +804,86 @@ input[type=text]{
background-size: 14px 15px;
cursor: pointer;
}
}
// react select
.react-select-custom{
width: 100%;
.custom__control{
height: 30px;
min-height: unset;
border-radius: 2px;
border-color: #EEE;
background-color: #fff;
&:hover{
border-color: #EEE;
}
}
.custom__control--is-focused{
border-color: #EEE;
box-shadow: unset;
&:hover{
border-color: #EEE;
}
}
.custom__value-container {
height: 100%;
padding: 0 10px;
}
.custom__placeholder,
.custom__single-value{
margin: 0;
}
.custom__single-value{
font-size: 13px;
color: #45576F;
font-weight: 400;
}
.custom__placeholder{
font-size: 13px;
color: #bbbbbb;
font-weight: 400;
}
.custom__clear-indicator,
.custom__indicator-separator{
display: none;
}
.custom__indicator{
padding: 0;
svg{
display: none;
}
}
.custom__dropdown-indicator{
width: 30px;
height: 100%;
background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
}
.custom__menu {
margin: 1px 0;
border-radius: 2px;
overflow: hidden;
}
.custom__menu-list {
padding: 0;
}
.custom__option{
font-size: 13px;
padding: 7px 10px;
color: #45576F;
}
.custom__option--is-selected{
color: #fff;
}
// disable
&.custom--is-disabled{
.custom__control{
background-color: #FAFAFA ;
}
.custom__single-value{
color: #999999;
}
}
}