주소찾기, 설계의뢰 grid 추가

src/app/management/newproduct/page.jsx

@@ -47,7 +47,7 @@ export default function NewProductPage(){
             {/* <FindAddressPop/> */}
 
             {/* 설계의뢰 불러오기 팝업 */}
-            {/* <DesignRequestPop/> */}
+            <DesignRequestPop/>
         </div>
     )
 }

src/components/sub/management/newproduct/DesignRequestPop.jsx

@@ -1,6 +1,50 @@
+'use client'
+
 import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
+import Pagination from "@/components/common/grid/Pagination";
+import QGrid from "@/components/common/grid/QGrid";
+import { useState } from "react";
+
+const HeaderRadioButton = () => {
+    return(
+        <div className="d-check-radio pop no-text">
+            <input type="radio" name="radio99" id="ra99" disabled/>
+            <label htmlFor="ra99"></label>
+        </div>
+    )
+}
+const CellRadioButton = () => {
+    return(
+        <div className="d-check-radio light no-text">
+            <input type="radio" name="radio98" id="ra98" />
+            <label htmlFor="ra98"></label>
+        </div>
+    )
+}
 
 export default function DesignRequestPop(){
+    const [gridProps, setGridProps] = useState({
+        gridData: [
+            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
+            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
+            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
+            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
+        ],
+        gridColumns:[
+            { field: "radio", width: 45, cellRenderer: CellRadioButton, headerComponent: HeaderRadioButton,  cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
+            { headerName: "状態 ", field: "status", width: 100, cellStyle: { textAlign: "center" } },
+            { headerName: "設計依頼番号", field: "designRequestNumber", cellStyle: { textAlign: "center" } },
+            { headerName: "販売代理店ID", field: "salesAgentID" },
+            { headerName: "販売代理店名", field: "salesAgentName" },
+            { headerName: "案件名", field: "projectName" },
+            { headerName: "都道府県", field: "prefecture" },
+            { headerName: "設置家屋数 ", field: "installedHouses", cellStyle: { textAlign: "center" } },
+            { headerName: "依頼者名 ", field: "clientName", cellStyle: { textAlign: "center" } },
+            { headerName: "設計依頼提出日 ", field: "submissionDate", cellStyle: { textAlign: "center" } },
+        ],
+        isPageable: true,
+    })
+
     return(
         <div className="modal-popup">
             <div className="modal-dialog big">
@@ -97,6 +141,12 @@ export default function DesignRequestPop(){
                             </div>
                             <div className="design-request-grid">
                                 <div className="design-request-grid-tit">Plan List</div>
+                                <div className='q-grid'>
+                                    <QGrid {...gridProps}/>
+                                    <div className='pagination-wrap'>
+                                        <Pagination/>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                         <div className="footer-btn-wrap">

src/components/sub/management/newproduct/FindAddressPop.jsx

@@ -1,5 +1,39 @@
+'use client'
 
+import QGrid from "@/components/common/grid/QGrid";
+import { useState } from "react";
+
+const HeaderRadioButton = () => {
+    return(
+        <div className="d-check-radio pop no-text">
+            <input type="radio" name="radio99" id="ra99" disabled/>
+            <label htmlFor="ra99"></label>
+        </div>
+    )
+}
+const CellRadioButton = () => {
+    return(
+        <div className="d-check-radio light no-text">
+            <input type="radio" name="radio98" id="ra98" />
+            <label htmlFor="ra98"></label>
+        </div>
+    )
+}
 export default function FindAddressPop(){
+    const [gridProps, setGridProps] = useState({
+        gridData: [
+            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
+            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
+            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
+        ],
+        gridColumns:[
+            { field: "radio", width: 45, cellRenderer: CellRadioButton, headerComponent: HeaderRadioButton,  cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
+            { headerName: "都道府県", field: "city", flex: 1 },
+            { headerName: "市区町村", field: "district", flex: 1 },
+            { headerName: "市区町村以下", field: "municipal", flex: 1 },
+        ],
+        isPageable: true,
+    })
 
     return(
         <div className="modal-popup">
@@ -16,7 +50,9 @@ export default function FindAddressPop(){
                                 <button className="search-btn"></button>
                             </div>
                             <div className="address-grid">
-                                grid영역
+                                <div className='q-grid'>
+                                    <QGrid {...gridProps}/>
+                                </div>
                             </div>
                         </div>
                         <div className="footer-btn-wrap">

src/styles/_contents.scss

@@ -627,10 +627,10 @@
         justify-content: flex-end;
         margin-top: 20px;
     }
+}
 .pagination-wrap{
     margin-top: 24px;
 }
-}
 
 .infomation-wrap{
     margin-bottom: 30px;

src/styles/_modal.scss

@@ -26,8 +26,6 @@ $alert-color: #101010;
 
 .modal-pop-wrap{
     position: fixed;
-    top: 200px;
-    right: 100px;
     width: 100%;
     height: -webkit-fit-content;
     height: -moz-fit-content;