From 0ec77570d21db807ea3123f5295056797873445e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= <chang9811@interplug.co.kr>
Date: Thu, 17 Oct 2024 17:41:02 +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=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/management/productinfo/page.jsx       |  2 +-
 src/app/reactselect/page.jsx                  | 28 +------
 .../common/reactselect/ReactSelect.jsx        | 44 ++++++++++
 src/components/publishpage/PublishPage.jsx    | 15 ++++
 .../productinfo/ProductInfoTable.jsx          | 13 +--
 src/styles/_modal.scss                        |  2 +-
 src/styles/_reset.scss                        | 82 +++++++++++++++++++
 7 files changed, 154 insertions(+), 32 deletions(-)
 create mode 100644 src/components/common/reactselect/ReactSelect.jsx

diff --git a/src/app/management/productinfo/page.jsx b/src/app/management/productinfo/page.jsx
index 5d2fc10..21a4128 100644
--- a/src/app/management/productinfo/page.jsx
+++ b/src/app/management/productinfo/page.jsx
@@ -52,7 +52,7 @@ export default function ProductInfo(){
             <Footer/>
 
             {/* 풍속선택 팝업 */}
-            <WindSelectPop/>
+            {/* <WindSelectPop/> */}
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/app/reactselect/page.jsx b/src/app/reactselect/page.jsx
index eaf37c5..ac7534d 100644
--- a/src/app/reactselect/page.jsx
+++ b/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() {
-  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>
diff --git a/src/components/common/reactselect/ReactSelect.jsx b/src/components/common/reactselect/ReactSelect.jsx
new file mode 100644
index 0000000..e9627e5
--- /dev/null
+++ b/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}
+        />
+    )
+}
\ No newline at end of file
diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx
index fc1eed5..43e2ac9 100644
--- a/src/components/publishpage/PublishPage.jsx
+++ b/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>
diff --git a/src/components/sub/management/productinfo/ProductInfoTable.jsx b/src/components/sub/management/productinfo/ProductInfoTable.jsx
index 857ec37..887c444 100644
--- a/src/components/sub/management/productinfo/ProductInfoTable.jsx
+++ b/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="">
-                                                <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/>
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index f0966b0..5be2411 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -453,7 +453,7 @@ $alert-color: #101010;
     gap: 20px;
 }
 .select-wrap{
-    div{
+    .sort-select{
         width: 100%;
     }
 }
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index d345f64..a329977 100644
--- a/src/styles/_reset.scss
+++ b/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;
+        }
+    }
 }
\ No newline at end of file