견적서 그리드 추가

public/static/images/sub/grid_tip.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" fill="white" stroke="#F16A6A"/>
+<path d="M6.507 8.728L6.276 4.669L6.221 3.129H7.849L7.794 4.669L7.563 8.728H6.507ZM7.035 11.654C6.74167 11.654 6.49967 11.5513 6.309 11.346C6.12567 11.1407 6.034 10.8913 6.034 10.598C6.034 10.29 6.12567 10.037 6.309 9.839C6.49967 9.641 6.74167 9.542 7.035 9.542C7.32833 9.542 7.56667 9.641 7.75 9.839C7.94067 10.037 8.036 10.29 8.036 10.598C8.036 10.8913 7.94067 11.1407 7.75 11.346C7.56667 11.5513 7.32833 11.654 7.035 11.654Z" fill="#F16A6A"/>
+</svg>

src/app/canvas/page.jsx

@@ -154,7 +154,7 @@ export default function CanvasPage() {
                     {/* <HexagonalRoofOption/> */}
 
                     {/* 회로 및 가대설정 */}
-                    <CircuitStandSetting/>
+                    {/* <CircuitStandSetting/> */}
 
                     {/* 모듈 부가기능 */}
 

src/components/canvas/CanvasEstimate.jsx

@@ -7,21 +7,92 @@ import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
 import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";
 import QGrid from "../common/grid/QGrid";
 
+const HeaderCheckButton = () => {
+    return(
+        <div className="d-check-box pop no-text">
+            <input type="checkbox" id="ch97" disabled/>
+            <label htmlFor="ch97"></label>
+        </div>
+    )
+}
+const CellCheckButton = () => {
+    return(
+        <div className="d-check-box light no-text">
+            <input type="checkbox" id="ch98" />
+            <label htmlFor="ch98"></label>
+        </div>
+    )
+}
+
+const CellProductName = () => {
+    return(
+        <div className="form-flex-wrap">
+            <div className="select-box mr5" style={{flex : '1'}}>
+                <select className="select-light black" name="" id="">
+                    <option>Re.RISE415</option>
+                </select>
+            </div>
+            <div className="btn-area">
+                <button className="btn-origin green">追加、変更資材</button>
+            </div>
+        </div>
+    )
+}
+
+const CellShapePlate = () => {
+    return(
+        <div className="form-flex-wrap">
+            <div className="name">HNW-MC4-CHN30</div>
+            <button className="grid-tip"></button>
+        </div>
+    )
+}
+
+const CellQuantity = () =>{
+    return(
+        <div className="input-wrap" style={{width: '100%'}}>
+            <input type="text" className="input-light al-r" defaultValue={'20'}/>
+        </div>
+    )
+}
+
+const CellUnitPrice = () =>{
+    return(
+        <div className="form-flex-wrap">
+            <div className="input-wrap mr5" style={{flex: '1'}}>
+                <input type="text" className="input-light al-r" defaultValue={'278,050'}/>
+            </div>
+            <div className="btn-area">
+                <button className="btn-origin green">OPEN</button>
+            </div>
+        </div>
+    )
+}
+
 export default function CanvasEstimate() {
     const [gridProps, setGridProps] = useState({
         gridData: [
-            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
+            { status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
         ],
         gridColumns:[
-            { headerName: "状態 ", field: "status", width: 100, cellStyle: { textAlign: "center" } },
+            { field: "check", width: 45, cellRenderer: CellCheckButton, headerComponent: HeaderCheckButton,  cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
-            { headerName: "設計依頼番号", field: "designRequestNumber", cellStyle: { textAlign: "center" } },
+            { headerName: "アイテム ", field: "item", width: 100, cellStyle: { textAlign: "right" } },
-            { headerName: "販売代理店ID", field: "salesAgentID" },
+            { headerName: "品番", field: "productName", flex: 1, cellRenderer: CellProductName, cellStyle: { display: 'flex', alignItems: 'center'} },
-            { headerName: "販売代理店名", field: "salesAgentName" },
+            { headerName: "型板", field: "shapePlate", width: 200, cellRenderer: CellShapePlate, cellStyle: { display: 'flex', alignItems: 'center'} },
-            { headerName: "案件名", field: "projectName" },
+            { headerName: "数量", field: "quantity", width: 120, cellRenderer: CellQuantity, cellStyle: { display: 'flex', alignItems: 'center'} },
-            { headerName: "都道府県", field: "prefecture" },
+            { headerName: "単位", field: "unit", width: 100, },
-            { headerName: "設置家屋数 ", field: "installedHouses", cellStyle: { textAlign: "center" } },
+            { headerName: "単価", field: "unitPrice", cellRenderer: CellUnitPrice, cellStyle: { display: 'flex', alignItems: 'center'} },
-            { headerName: "依頼者名 ", field: "clientName", cellStyle: { textAlign: "center" } },
+            { headerName: "金額 (税別別) ", field: "amountExTax", cellStyle: { textAlign: "right" }, width: 240, },
-            { headerName: "設計依頼提出日 ", field: "submissionDate", cellStyle: { textAlign: "center" } },
         ],
         isPageable: true,
     })
@@ -424,7 +495,7 @@ export default function CanvasEstimate() {
                                 </div>
                             </div>
                         </div>
-                        <div className='q-grid'>
+                        <div className='q-grid no-cols'>
                             <QGrid {...gridProps}/>
                         </div>
                     </div>

src/styles/_grid-detail.scss

@@ -68,6 +68,14 @@
             }
         }
     }
+    .form-flex-wrap{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .grid-tip{
+            margin-left: auto;
+        }
+    }
 }
 
 // grid-button
@@ -109,4 +117,12 @@
             }
         }
     }
+}
+
+.grid-tip{
+    display: block;
+    width: 15px;
+    height: 15px;
+    background: url(../../public/static/images/sub/grid_tip.svg)no-repeat center;
+    background-size: cover;
 }

src/styles/_reset.scss

@@ -308,6 +308,12 @@ button{
             background-color: #607F9A;
         }
     }
+    &.green{
+        background-color: #A6BBA8;
+        &:hover{
+            background-color: #98af9b;
+        }
+    }
     &.white{
         border: 1px solid #94A0AD;
         background-color: #fff;