react-select 라이브러리 수정

src/app/management/productinfo/page.jsx

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

src/app/reactselect/page.jsx

@@ -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() {
+export default function ReactSelectPage() {
-  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 (
     <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>

src/components/common/reactselect/ReactSelect.jsx

@@ -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}
+        />
+    )
+}

src/components/publishpage/PublishPage.jsx

@@ -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>

src/components/sub/management/productinfo/ProductInfoTable.jsx

@@ -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="">
+                                            <ReactSelect/>
-                                                <option>選択</option>
-                                            </select>
                                         </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="" >
+                                            <ReactSelect/>
-                                                <option>選択</option>
-                                            </select>
                                         </div>
                                         <div className="input-wrap" style={{width : '216px'}}>
                                             <input type="text" className="input-light" readOnly/>

src/styles/_modal.scss

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

src/styles/_reset.scss

@@ -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;
+        }
+    }
 }