물건현황 화면에서 견적서로 이동. 견적서 화면 작업

src/app/floor-plan/[mid]/[pid]/page.jsx

@@ -1,3 +1,9 @@
+import Estimate from '@/components/estimate/Estimate'
+
 export default function EstimatePage() {
-  return <div>이자리....</div>
+  return (
+    <>
+      <Estimate />
+    </>
+  )
 }

src/components/estimate/Estimate.jsx

@@ -0,0 +1,307 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import SingleDatePicker from '../common/datepicker/SingleDatePicker'
+import { useRecoilValue } from 'recoil'
+import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+
+export default function Estimate() {
+  const { getMessage } = useMessage()
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  console.log('견적서화면이군요', objectRecoil.floorPlanObjectNo)
+  return (
+    <div className="sub-content estimate">
+      <div className="sub-content-inner">
+        {/* 물건번호, 견적서번호, 등록일, 변경일시 시작 */}
+        <div className="sub-content-box">
+          <div className="sub-table-box">
+            <div className="estimate-list-wrap one">
+              <div className="estimate-box">
+                <div className="estimate-tit">{getMessage('estimate.detail.objectNo')}</div>
+                <div className="estimate-name">RX524231020006 (Plan No: 1)</div>
+              </div>
+              <div className="estimate-box">
+                <div className="estimate-tit">{getMessage('estimate.detail.estimateNo')}</div>
+                <div className="estimate-name">5242310200065242</div>
+              </div>
+              <div className="estimate-box">
+                <div className="estimate-tit">{getMessage('estimate.detail.createDatetime')}</div>
+                <div className="estimate-name">9999.09.28</div>
+              </div>
+              <div className="estimate-box">
+                <div className="estimate-tit">{getMessage('estimate.detail.lastEditDatetime')}</div>
+                <div className="estimate-name">9999.09.28 06:36</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* 물건번호, 견적서번호, 등록일, 변경일시 끝 */}
+        {/* 기본정보 시작 */}
+        <div className="sub-content-box">
+          <div className="sub-table-box">
+            <div className="table-box-title-wrap">
+              <div className="title-wrap">
+                <h3>{getMessage('estimate.detail.header.title')}</h3>
+              </div>
+            </div>
+            <div className="common-table bt-able">
+              <table>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col style={{ width: '160px' }} />
+                  <col />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    {/* 1차 판매점명 */}
+                    <th>{getMessage('estimate.detail.saleStoreId')}</th>
+                    <td></td>
+                    {/* 견적일 */}
+                    <th>
+                      {getMessage('estimate.detail.estimateDate')} <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="date-picker" style={{ width: '350px' }}>
+                        <SingleDatePicker />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    {/* 2차 판매점명 */}
+                    <th>{getMessage('estimate.detail.otherSaleStoreId')}</th>
+                    <td></td>
+                    {/* 담당자 */}
+                    <th>
+                      {getMessage('estimate.detail.receiveUser')} <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="input-wrap" style={{ width: '350px' }}>
+                        <input type="text" className="input-light" defaultValue={'물건정보에서 입력한 담당자명 표시'} />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    {/* 안건명 */}
+                    <th>
+                      {getMessage('estimate.detail.title')} <span className="important">*</span>
+                    </th>
+                    <td colSpan={3}>
+                      <div className="form-flex-wrap">
+                        <div className="input-wrap mr5" style={{ width: '610px' }}>
+                          <input type="text" className="input-light" defaultValue={'안건명:::'} />
+                        </div>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" className="input-light" defaultValue={'경칭?'} />
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    {/* 메모 */}
+                    <th>{getMessage('estimate.detail.remarks')}</th>
+                    <td colSpan={3}>물건정보에서 입력한 메모 표시</td>
+                  </tr>
+                  <tr>
+                    {/* 주문분류 */}
+                    <th>
+                      注文分類/주문분류 <span className="important">*</span>
+                    </th>
+                    <td colSpan={3}>
+                      <div className="radio-wrap"></div>
+                    </td>
+                  </tr>
+                  <tr>
+                    {/* 지붕재・사양시공 최대4개*/}
+                    <th>屋根材・仕様施工 / 지붕재・사양시공</th>
+                    <td colSpan={3}>
+                      <div className="form-flex-wrap mb5">
+                        <div className="input-wrap mr5" style={{ width: '610px' }}>
+                          <input type="text" className="input-light" defaultValue={'ハゼ式折板（角ハゼ)'} readOnly />
+                        </div>
+                        <div className="input-wrap" style={{ width: '200px' }}>
+                          <input type="text" className="input-light" defaultValue={'標準施工'} readOnly />
+                        </div>
+                      </div>
+                      <div className="form-flex-wrap mb5"></div>
+                      <div className="form-flex-wrap mb5"></div>
+                      {/* 마지막div엔 mb5 제외 */}
+                      <div className="form-flex-wrap"></div>
+                    </td>
+                  </tr>
+                  <tr>
+                    {/* 비고 */}
+                    <th>備考 /비고</th>
+                    <td colSpan={3}>
+                      <div className="input-wrap">
+                        <input type="text" className="input-light" />
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            {/* 파일첨부 시작 */}
+            <div className="table-box-title-wrap">
+              <div className="title-wrap">
+                <h3>{getMessage('estimate.detail.header.fileList1')}</h3>
+                <div className="d-check-box light mr5">
+                  <input type="checkbox" id="" />
+                  <label htmlFor="" style={{ color: '#101010' }}>
+                    後日資料提出 / 후일자료제출
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div className="common-table mb10">
+              <table>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <th>{getMessage('estimate.detail.header.fileList1')}</th>
+                    <td>
+                      <div className="drag-file-box">
+                        <div className="btn-area">
+                          <button className="btn-origin grey">{getMessage('estimate.detail.fileList.btn')}</button>
+                        </div>
+                        <div className="drag-file-area">
+                          <p>Drag file here</p>
+                          <ul className="file-list"></ul>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            {/* 첨부파일 목록 시작 */}
+            <div className="common-table bt-able">
+              <table>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <th>{getMessage('estimate.detail.header.fileList2')}</th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            {/* 첨부파일 목록 끝 */}
+            {/* 파일첨부 끝 */}
+            {/* 견적특이사항 시작 */}
+            <div className="table-box-title-wrap">
+              <div className="title-wrap">
+                <h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
+                <div className="product_tit">{getMessage('estimate.detail.header.specialEstimateProductInfo')}</div>
+              </div>
+            </div>
+            {/* 공통코드영역시작 */}
+            <div className="special-note-check-wrap"></div>
+            {/* 공통코드영역끝 */}
+            {/* 견적특이사항 내용영역시작 */}
+            <div className="calculation-estimate"></div>
+            {/* 견적특이사항 내용영역끝 */}
+            {/* 견적특이사항 끝 */}
+            {/* 제품정보 시작 */}
+            <div className="table-box-title-wrap">
+              <div className="title-wrap">
+                <h3>{getMessage('estimate.detail.header.specialEstimateProductInfo')}</h3>
+              </div>
+            </div>
+            <div className="estimate-wrap">
+              <div className="estimate-list-wrap one">
+                <div className="estimate-box">
+                  <div className="estimate-tit">수량 (PCS)</div>
+                  <div className="estimate-name blue">74</div>
+                </div>
+                <div className="estimate-box">
+                  <div className="estimate-tit">용량 (Kw)</div>
+                  <div className="estimate-name blue">8300</div>
+                </div>
+                <div className="estimate-box">
+                  <div className="estimate-tit">공급가액</div>
+                  <div className="estimate-name blue">6,798,900</div>
+                </div>
+                <div className="estimate-box">
+                  <div className="estimate-tit">부가세 (10％)</div>
+                  <div className="estimate-name blue">679,890</div>
+                </div>
+                <div className="estimate-box">
+                  <div className="estimate-tit">총액</div>
+                  <div className="estimate-name red">7,478,790</div>
+                </div>
+              </div>
+            </div>
+            {/* YJOD면 아래영역 숨김 */}
+            <div className="common-table bt-able">
+              <table>
+                <colgroup>
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col style={{ width: '160px' }} />
+                  <col />
+                  <col style={{ width: '160px' }} />
+                  <col />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <th>
+                      {getMessage('estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice')}
+                      <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="input-wrap">
+                        <input type="text" className="input-light" />
+                      </div>
+                    </td>
+                    <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
+                    <td>(모듈수량 * 수량) / 100)</td>
+                    <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
+                    <td>PKG단가(W) * PKG용량(W)</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            {/* 제품정보 끝 */}
+            {/* 가격표시영역시작 */}
+            <div className="estimate-product-option">
+              <div className="product-price-wrap">
+                <div className="product-price-tit">{getMessage('estimate.detail.header.showPrice')}</div>
+                <div className="select-wrap"></div>
+                <button className="btn-origin grey ml5">{getMessage('estimate.detail.showPrice.btn1')}</button>
+              </div>
+              <div className="product-edit-wrap">
+                <div className="product-edit-explane">
+                  <div className="click-check">
+                    <span className="ico"></span>
+                    {getMessage('estimate.detail.showPrice.description')}
+                  </div>
+                </div>
+                <div className="product-edit-btn">
+                  <button className="btn-origin navy mr5">
+                    <span className="plus"></span>
+                    {getMessage('estimate.detail.showPrice.btn2')}
+                  </button>
+                  <button className="btn-origin grey">
+                    <span className="minus"></span>
+                    {getMessage('estimate.detail.showPrice.btn3')}
+                  </button>
+                </div>
+              </div>
+            </div>
+            {/* 가격표시영역끝 */}
+            {/* html테이블시작 */}
+            <div className="q-grid no-cols"></div>
+            {/* html테이블끝 */}
+          </div>
+        </div>
+        {/* 기본정보끝 */}
+      </div>
+    </div>
+  )
+}

src/components/management/StuffDetail.jsx

@@ -257,7 +257,9 @@ export default function StuffDetail() {
                   type="button"
                   className="grid-btn"
                   onClick={() => {
-                    console.log('견적서조회버튼클릭')
+                    //mid:5(견적서), /pid:플랜번호
+                    setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
+                    router.push(`/floor-plan/5/${params.data.planNo}`)
                   }}
                 >
                   <span className="file"></span>
@@ -270,7 +272,8 @@ export default function StuffDetail() {
                     console.log('엑셀버튼클릭')
                   }}
                 >
-                  <span className="excel"></span>Excel
+                  <span className="excel"></span>
+                  {getMessage('stuff.detail.planGrid.btn2')}
                 </button>
               </div>
             </>

src/components/management/StuffPlanQGrid.jsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
+import { useMessage } from '@/hooks/useMessage'
 import { AgGridReact } from 'ag-grid-react'
 import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-quartz.css'
@@ -8,7 +9,7 @@ export default function StuffPlanQGrid(props) {
   const [rowData, setRowData] = useState(null)
   // const [gridApi, setGridApi] = useState(null)
   const [colDefs, setColDefs] = useState(planGridColumns)
-
+  const { getMessage } = useMessage()
   const defaultColDef = useMemo(() => {
     return {
       flex: 1,
@@ -46,6 +47,7 @@ export default function StuffPlanQGrid(props) {
         pagination={isPageable}
         domLayout="autoHeight"
         suppressCellFocus={true}
+        overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}
       />
     </div>
   )

src/locales/ja.json

@@ -707,5 +707,29 @@
   "surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
-  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
+  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요.",
+  "estimate.detail.header.title": "基本情報",
+  "estimate.detail.objectNo": "品番",
+  "estimate.detail.estimateNo": "見積書番号",
+  "estimate.detail.createDatetime": "登録日",
+  "estimate.detail.lastEditDatetime": "変更日時",
+  "estimate.detail.saleStoreId": "一次販売店名",
+  "estimate.detail.estimateDate": "見積日",
+  "estimate.detail.otherSaleStoreId": "二次販売店名",
+  "estimate.detail.receiveUser": "担当者 ",
+  "estimate.detail.title": "案件名",
+  "estimate.detail.remarks": "メモ",
+  "estimate.detail.header.fileList1": "ファイル添付",
+  "estimate.detail.fileList.btn": "ファイル選択",
+  "estimate.detail.header.fileList2": "添付ファイル一覧",
+  "estimate.detail.header.specialEstimate": "見積もりの具体的な",
+  "estimate.detail.header.specialEstimateProductInfo": "製品情報",
+  "estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価 (W)",
+  "estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG容量 (Kw)",
+  "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG金額",
+  "estimate.detail.header.showPrice": "価格表示",
+  "estimate.detail.showPrice.btn1": "Pricing",
+  "estimate.detail.showPrice.description": "クリックして製品の特異性を確認する",
+  "estimate.detail.showPrice.btn2": "製品を追加",
+  "estimate.detail.showPrice.btn3": "製品削除"
 }

src/locales/ko.json

@@ -712,5 +712,29 @@
   "surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
   "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
-  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
+  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요.",
+  "estimate.detail.header.title": "기본정보",
+  "estimate.detail.objectNo": "물건번호",
+  "estimate.detail.estimateNo": "견적서 번호",
+  "estimate.detail.createDatetime": "등록일",
+  "estimate.detail.lastEditDatetime": "변경일시",
+  "estimate.detail.saleStoreId": "1차 판매점명",
+  "estimate.detail.estimateDate": "견적일",
+  "estimate.detail.otherSaleStoreId": "2차 판매점명",
+  "estimate.detail.receiveUser": "담당자",
+  "estimate.detail.title": "안건명",
+  "estimate.detail.remarks": "메모",
+  "estimate.detail.header.fileList1": "파일첨부",
+  "estimate.detail.fileList.btn": "파일선택",
+  "estimate.detail.header.fileList2": "첨부파일 목록",
+  "estimate.detail.header.specialEstimate": "견적특이사항",
+  "estimate.detail.header.specialEstimateProductInfo": "제품정보",
+  "estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "주택PKG단가 (W)",
+  "estimate.detail.sepcialEstimateProductInfo.pkgWeight": "PKG 용량 (Kw)",
+  "estimate.detail.sepcialEstimateProductInfo.pkgPrice": "PKG 금액",
+  "estimate.detail.header.showPrice": "가격표시",
+  "estimate.detail.showPrice.btn1": "Pricing",
+  "estimate.detail.showPrice.description": "클릭하여 제품 특이사항 확인",
+  "estimate.detail.showPrice.btn2": "제품추가",
+  "estimate.detail.showPrice.btn3": "제품삭제"
 }