From 7ef7065596da2b8e66be92021fc898b04acd9580 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: Wed, 16 Oct 2024 13:38:08 +0900
Subject: [PATCH] =?UTF-8?q?=ED=92=8D=EC=86=8D=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/management/productinfo/page.jsx       |  4 +
 .../management/productinfo/WindSelectPop.jsx  | 94 +++++++++++++++++++
 src/styles/_table.scss                        | 70 ++++++++++++++
 3 files changed, 168 insertions(+)
 create mode 100644 src/components/sub/management/productinfo/WindSelectPop.jsx

diff --git a/src/app/management/productinfo/page.jsx b/src/app/management/productinfo/page.jsx
index 2aec13c..5d2fc10 100644
--- a/src/app/management/productinfo/page.jsx
+++ b/src/app/management/productinfo/page.jsx
@@ -6,6 +6,7 @@ import '@/styles/contents.scss';
 import '@/styles/grid.scss';
 import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable";
 import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox";
+import WindSelectPop from "@/components/sub/management/productinfo/WindSelectPop";
 
 export default function ProductInfo(){
     return(
@@ -49,6 +50,9 @@ export default function ProductInfo(){
                 </div>
             </div>
             <Footer/>
+
+            {/* 풍속선택 팝업 */}
+            <WindSelectPop/>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/sub/management/productinfo/WindSelectPop.jsx b/src/components/sub/management/productinfo/WindSelectPop.jsx
new file mode 100644
index 0000000..7ed039d
--- /dev/null
+++ b/src/components/sub/management/productinfo/WindSelectPop.jsx
@@ -0,0 +1,94 @@
+
+export default function WindSelectPop(){
+    return(
+        <div className="modal-popup">
+            <div className="modal-dialog middle">
+                <div className="modal-content">
+                    <div className="modal-header">
+                        <h1 className="title">風速選択</h1>
+                        <button className="modal-close">닫기</button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="modal-body-inner">
+                            <div className="common-table">
+                                <table>
+                                    <colgroup>
+                                        <col style={{width: '70px'}}/>
+                                        <col />
+                                    </colgroup>
+                                    <tbody>
+                                        <tr>
+                                            <th>県</th>
+                                            <td>
+                                                <div className="input-wrap">
+                                                    <input type="text" className="input-light" defaultValue='東京都' readOnly/>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div className="wind-table">
+                                <table>
+                                    <thead>
+                                        <tr>
+                                            <th style={{width: '50px'}}>選択</th>
+                                            <th style={{width: '110px'}}>風速</th>
+                                            <th>Remarks</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td className="al-c">
+                                                <div className="d-check-radio light no-text">
+                                                    <input type="radio" name="radio05" id="ra17"/>
+                                                    <label htmlFor="ra17"></label>
+                                                </div>
+                                            </td>
+                                            <td className="al-c">32m/s</td>
+                                            <td>八王子市 立川市 昭島市 日野市 東村山市 福生市 東大和市 武敲村山市 羽村市 苏 石野市 西多障部の 瑞糖</td>
+                                        </tr>
+                                        <tr>
+                                            <td className="al-c">
+                                                <div className="d-check-radio light no-text">
+                                                    <input type="radio" name="radio05" id="ra18"/>
+                                                    <label htmlFor="ra18"></label>
+                                                </div>
+                                            </td>
+                                            <td className="al-c">32m/s</td>
+                                            <td>23区 武藏野市 三鹰市府中市網布市 町田市 小金井市 小平市 国分寺市 国立市 西東京市 狗江市清灏市 東久留米市 多摩市稲城</td>
+                                        </tr>
+                                        <tr>
+                                            <td className="al-c">
+                                                <div className="d-check-radio light no-text">
+                                                    <input type="radio" name="radio05" id="ra19"/>
+                                                    <label htmlFor="ra19"></label>
+                                                </div>
+                                            </td>
+                                            <td className="al-c">32m/s</td>
+                                            <td>大島町 利島町 新島村 神津島村 三宅村 御被島</td>
+                                        </tr>
+                                        <tr>
+                                            <td className="al-c">
+                                                <div className="d-check-radio light no-text">
+                                                    <input type="radio" name="radio05" id="ra20"/>
+                                                    <label htmlFor="ra20"></label>
+                                                </div>
+                                            </td>
+                                            <td className="al-c">32m/s</td>
+                                            <td>八丈町 青 島村 小笠際</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <div className="footer-btn-wrap">
+                            <button className="btn-origin grey mr5 ">閉じる</button>
+                            <button className="btn-origin navy ">選択</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index f615547..d7e1c40 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -360,4 +360,74 @@ table{
             }
         }
     }
+}
+
+// 풍속 선택 테이블
+.wind-table{
+    margin-top: 20px;
+    table{
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: separate;
+        thead{
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            tr{
+                th{
+                    text-align: center;
+                    font-size: 13px;
+                    font-weight: 600;
+                    color: #344356;
+                    background-color: #F7F9FA;
+                    padding: 10.5px 10px;
+                    vertical-align: middle;
+                    border-bottom: 1px solid #ECF0F4;
+                    border-top: 1px solid #ECF0F4;
+                    &:first-child{
+                        border-left: 1px solid #ECF0F4;
+                        border-radius: 4px 0 0 4px;
+                    }
+                    &:last-child{
+                        border-right: 1px solid #ECF0F4;
+                        border-radius: 0 4px 4px 0;
+                    }
+                }
+            }
+        }
+        tbody{
+            display: block;
+            max-height: 200px;
+            overflow-y: auto;
+            tr{
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                td{
+                    padding: 13.5px 10px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #45576F;
+                    vertical-align: middle;
+                    border-bottom: 1px solid #ECF0F4;
+                    &:nth-child(2){
+                        width: 110px;
+                    }
+                    &:nth-child(1){
+                        width: 50px;
+                    }
+                }
+            }
+            &::-webkit-scrollbar {
+                width: 4px;
+                background-color: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: #ECF0F4;
+            }
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+        }
+    }
 }
\ No newline at end of file