물건 수정화면 플랜목록

src/app/management/stuff/detail/page.jsx

@@ -3,6 +3,8 @@ import '@/styles/contents.scss'
 import StuffSubHeader from '@/components/management/StuffSubHeader'
 import StuffHeader from '@/components/management/StuffHeader'
 import StuffDetail from '@/components/management/StuffDetail'
+import '@/styles/contents.scss'
+import '@/styles/grid.scss'
 export default function ManagementStuffDetailPage() {
   return (
     <>

src/app/management/stuff/page.jsx

@@ -1,7 +1,7 @@
 import StuffSearchCondition from '@/components/management/StuffSearchCondition'
 import Stuff from '@/components/management/Stuff'
 import StuffSubHeader from '@/components/management/StuffSubHeader'
-import '@/styles/contents.scss'
+import '@/styles/grid.scss'
 export default async function ManagementStuffPage() {
   return (
     <>

src/components/management/Stuff.jsx

@@ -16,7 +16,6 @@ import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import QPagination from '../common/pagination/QPagination'
-import '@/styles/grid.scss'
 import { sessionStore } from '@/store/commonAtom'
 
 export default function Stuff() {

src/components/management/StuffDetail.jsx

@@ -16,6 +16,7 @@ import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
+import StuffPlanQGrid from './StuffPlanQGrid'
 
 export default function StuffDetail() {
   //공통코드
@@ -31,12 +32,12 @@ export default function StuffDetail() {
   const { getMessage } = useMessage()
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const ref = useRef()
-  const { get, del, promisePost, promisePut } = useAxios(globalLocaleState)
+  const { get, promiseGet, del, promisePost, promisePut } = useAxios(globalLocaleState)
   //form
   const formInitValue = {
     // 물건번호 T...(임시) R...(진짜)
     planReqNo: '', //설계의뢰No
-    dispCompanyName: '', //담당자
+    receiveUser: '', //담당자
     objectStatusId: '0', //물건구분(신축:0 기축 : 1)
     objectName: '', //물건명
     objectNameOmit: '', //경칭선택
@@ -91,6 +92,173 @@ export default function StuffDetail() {
   const [editMode, setEditMode] = useState('NEW')
   const [detailData, setDetailData] = useState({})
 
+  const [planGridProps, setPlanGridProps] = useState({
+    planGridData: [],
+    isPageable: false,
+    planGridColumns: [
+      {
+        field: 'planNo',
+        headerName: getMessage('stuff.detail.planGridHeader.planNo'),
+        width: 100,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+      },
+      {
+        field: 'orderFlg',
+        headerName: getMessage('stuff.detail.planGridHeader.orderFlg'),
+        width: 80,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: (params) => {
+          //1일때만 동그라미
+          let orderFlg
+          orderFlg = params.value === '1' ? 'O' : 'X'
+          return orderFlg
+        },
+      },
+      {
+        field: 'moduleModel',
+        headerName: getMessage('stuff.detail.planGridHeader.moduleModel'),
+        flex: 1,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+      },
+      {
+        field: 'capacity',
+        headerName: getMessage('stuff.detail.planGridHeader.capacity'),
+        width: 120,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+      },
+      {
+        field: 'roofMaterialIdMulti',
+        headerName: getMessage('stuff.detail.planGridHeader.roofMaterialIdMulti'),
+        width: 140,
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: (params) => {
+          let origin = params.value
+          if (origin !== null) {
+            return (
+              <>
+                {origin?.split(',').map((it) => (
+                  <>
+                    {it}
+                    <br />
+                  </>
+                ))}
+              </>
+            )
+          } else {
+            return null
+          }
+        },
+      },
+      {
+        field: 'constructSpecification',
+        headerName: getMessage('stuff.detail.planGridHeader.constructSpecification'),
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: (params) => {
+          let origin = params.value
+          if (origin !== null) {
+            return (
+              <>
+                {origin?.split(',').map((it) => (
+                  <>
+                    {it}
+                    <br />
+                  </>
+                ))}
+              </>
+            )
+          } else {
+            return null
+          }
+        },
+      },
+      {
+        field: 'supportMethodIdMulti',
+        headerName: getMessage('stuff.detail.planGridHeader.supportMethodIdMulti'),
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: (params) => {
+          let origin = params.value
+          if (origin !== null) {
+            return (
+              <>
+                {origin?.split(',').map((it) => (
+                  <>
+                    {it}
+                    <br />
+                  </>
+                ))}
+              </>
+            )
+          } else {
+            return null
+          }
+        },
+      },
+      {
+        field: 'pcTypeNo',
+        headerName: getMessage('stuff.detail.planGridHeader.pcTypeNo'),
+        flex: 1,
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: (params) => {
+          let origin = params.value
+          if (origin !== null) {
+            return (
+              <>
+                {origin?.split(',').map((it) => (
+                  <>
+                    {it}
+                    <br />
+                  </>
+                ))}
+              </>
+            )
+          } else {
+            return null
+          }
+        },
+      },
+      {
+        field: 'management',
+        headerName: getMessage('stuff.detail.planGridHeader.management'),
+        width: 200,
+        autoHeight: true,
+        cellStyle: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
+        cellRenderer: () => {
+          return (
+            <div className="grid-cell-btn">
+              <button
+                type="button"
+                className="grid-btn"
+                onClick={() => {
+                  console.log('견적서조회버튼클릭')
+                }}
+              >
+                <span className="file"></span>
+                {getMessage('stuff.detail.planGrid.btn1')}
+              </button>
+              <button
+                type="button"
+                className="grid-btn"
+                onClick={() => {
+                  console.log('엑셀버튼클릭')
+                }}
+              >
+                <span className="excel"></span>Excel
+              </button>
+            </div>
+          )
+        },
+      },
+    ],
+  })
+
   useEffect(() => {
     // console.log('objectNo::', objectNo)
 
@@ -101,9 +269,22 @@ export default function StuffDetail() {
         //진짜
         setIsFormValid(true)
       }
-      get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
+      promiseGet({ url: `/api/object/${objectNo}/detail` }).then((res) => {
-        if (res != null) {
+        if (res.status === 200) {
-          setDetailData(res)
+          if (res.data != null) {
+            setDetailData(res.data)
+          } else {
+            setDetailData({})
+          }
+          if (isNotEmptyArray(res.data.planList)) {
+            // console.log('플랜RES::::::::', res.data.planList)
+            setPlanGridProps({ ...planGridProps, planGridData: res.data.planList })
+          } else {
+            setPlanGridProps({ ...planGridProps, planGridData: [] })
+          }
+        } else {
+          setDetailData({})
+          setPlanGridProps({ ...planGridProps, planGridData: [] })
         }
       })
     } else {
@@ -187,7 +368,7 @@ export default function StuffDetail() {
         //설계의뢰No.
         form.setValue('planReqNo', detailData.planReqNo)
         //담당자
-        form.setValue('dispCompanyName', detailData.dispCompanyName)
+        form.setValue('receiveUser', detailData.receiveUser)
 
         //물건구분objectStatusId
         setSelectObjectStatusId(detailData.objectStatusId)
@@ -197,7 +378,6 @@ export default function StuffDetail() {
         form.setValue('objectName', detailData.objectName)
 
         //경칭코드
-
         setSelHonorificCode(detailData.objectNameOmit)
         form.setValue('objectNameOmit', detailData.objectNameOmit)
 
@@ -217,7 +397,32 @@ export default function StuffDetail() {
         //     form.setValue('otherSaleStoreId', sessionState?.storeId)
         //     form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
 
+        //우편번호
         form.setValue('zipNo', detailData.zipNo)
+
+        //도도부현 / 주소
+        setPrefValue(detailData.prefId)
+        form.setValue('prefId', detailData.prefId)
+        //prefName ???
+        form.setValue('address', detailData.address)
+
+        //수직적설량
+        form.setValue('verticalSnowCover', detailData.verticalSnowCover)
+        //한랭지대책시행 coldRegionFlg 1이면 true
+        form.setValue('coldRegionFlg', detailData.coldRegionFlg === '1' ? true : false)
+
+        //면조도구분surfaceType
+        // form.setValue('surfaceType', 'Ⅱ')
+        // form.setValue('surfaceType', 'III・IV')
+        form.setValue('surfaceType', detailData.surfaceType)
+        //염해지역용아이템사용 saltAreaFlg 1이면 true
+        form.setValue('saltAreaFlg', detailData.saltAreaFlg === '1' ? true : false)
+        //설치높이
+        form.setValue('installHeight', detailData.installHeight)
+        //계약조건
+        form.setValue('conType', detailData.conType)
+        //메모
+        form.setValue('remarks', detailData.remarks)
       })
     }
   }, [detailData, sessionState])
@@ -414,8 +619,8 @@ export default function StuffDetail() {
     form.setValue('standardWindSpeedId', info.windSpeed)
   }
 
-  //dispCompanyName: '', //담당자
+  //receiveUser: '', //담당자
-  const _dispCompanyName = watch('dispCompanyName')
+  const _receiveUser = watch('receiveUser')
   //objectName: '', //물건명
   const _objectName = watch('objectName')
   // objectNameOmit: '', //경칭선택
@@ -441,8 +646,8 @@ export default function StuffDetail() {
     if (editMode === 'NEW') {
       const formData = form.getValues()
       let errors = {}
-      if (!formData.dispCompanyName || formData.dispCompanyName.trim().length === 0) {
+      if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
-        errors.dispCompanyName = true
+        errors.receiveUser = true
       }
       if (!formData.objectName || formData.objectName.trim().length === 0) {
         errors.objectName = true
@@ -483,8 +688,8 @@ export default function StuffDetail() {
       console.log('상세일때 폼체크')
       const formData = form.getValues()
       let errors = {}
-      if (!formData.dispCompanyName || formData.dispCompanyName.trim().length === 0) {
+      if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
-        errors.dispCompanyName = true
+        errors.receiveUser = true
       }
       if (!formData.objectName || formData.objectName.trim().length === 0) {
         errors.objectName = true
@@ -524,7 +729,7 @@ export default function StuffDetail() {
       setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     }
   }, [
-    _dispCompanyName,
+    _receiveUser,
     _objectName,
     _objectNameOmit,
     _saleStoreId,
@@ -592,14 +797,14 @@ export default function StuffDetail() {
       prefName: formData.prefName,
       address: formData.address,
       areaId: formData.areaId,
-      receiveUser: formData.dispCompanyName,
+      receiveUser: formData.receiveUser,
       installHeight: formData.installHeight,
       standardWindSpeedId: formData.standardWindSpeedId,
       verticalSnowCover: formData.verticalSnowCover,
       surfaceType: formData.surfaceType,
       conType: formData.conType,
-      coldRegionFlg: formData.coldRegionFlg,
+      coldRegionFlg: formData.coldRegionFlg === true ? '1' : '0',
-      saltAreaFlg: formData.saltAreaFlg,
+      saltAreaFlg: formData.saltAreaFlg === true ? '1' : '0',
       tempFlg: '0',
       workNo: null,
       workName: null,
@@ -623,13 +828,6 @@ export default function StuffDetail() {
     }
   }
 
-  //필수값 안넣었을때 임시저장 form required사용시
-  // const onInvalid = (errors) => {
-  //   console.log('22222222222222222222222')
-  //   const formData = form.getValues()
-  //   console.log('임시저장formData::::', formData)
-  // }
-
   // 임시저장
   const onTempSave = async () => {
     const formData = form.getValues()
@@ -646,14 +844,14 @@ export default function StuffDetail() {
       prefName: formData.prefName,
       address: formData.address,
       areaId: formData.areaId,
-      receiveUser: formData.dispCompanyName,
+      receiveUser: formData.receiveUser,
       installHeight: formData.installHeight,
       standardWindSpeedId: formData.standardWindSpeedId,
       verticalSnowCover: formData.verticalSnowCover,
       surfaceType: formData.surfaceType,
       conType: formData.conType,
-      coldRegionFlg: formData.coldRegionFlg,
+      coldRegionFlg: formData.coldRegionFlg === true ? '1' : '0',
-      saltAreaFlg: formData.saltAreaFlg,
+      saltAreaFlg: formData.saltAreaFlg === true ? '1' : '0',
       tempFlg: '1',
       workNo: null,
       workName: null,
@@ -685,7 +883,7 @@ export default function StuffDetail() {
     } else {
       if (confirm(getMessage('common.message.data.delete'))) {
         del({ url: `/api/object/${objectNo}` }).then((res) => {
-          console.log('삭제결과:::::::', res)
+          // console.log('삭제결과:::::::', res)
           router.push('/management/stuff')
         })
       }
@@ -743,7 +941,7 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="input-wrap" style={{ width: '500px' }}>
-                        <input type="text" className="input-light" {...form.register('dispCompanyName')} />
+                        <input type="text" className="input-light" {...form.register('receiveUser')} />
                       </div>
                     </td>
                   </tr>
@@ -881,7 +1079,7 @@ export default function StuffDetail() {
                           <input
                             type="text"
                             className="input-light"
-                            value={form.watch('otherSaleStoreId')}
+                            value={form.watch('otherSaleStoreId') || ''}
                             {...form.register('otherSaleStoreId')}
                             readOnly
                           />
@@ -968,7 +1166,6 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        {/* 기준풍속sel시작 */}
                         <div className="select-wrap mr10" style={{ width: '200px' }}>
                           <Select
                             {...register('standardWindSpeedId')}
@@ -988,9 +1185,8 @@ export default function StuffDetail() {
                             })}
                           ></Select>
                         </div>
-                        {/* 기준풍속sel끝 */}
                         <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
-                        <Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
+                        <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                           {getMessage('stuff.detail.btn.windSpeedPop')}
                         </Button>
                       </div>
@@ -1007,7 +1203,7 @@ export default function StuffDetail() {
                             type="text"
                             className="input-light"
                             onKeyUp={handleKeyUp}
-                            value={form.watch('verticalSnowCover')}
+                            value={form.watch('verticalSnowCover') || ''}
                             {...register('verticalSnowCover')}
                           />
                         </div>
@@ -1037,7 +1233,9 @@ export default function StuffDetail() {
                           <input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
                           <label htmlFor="saltAreaFlg">{getMessage('stuff.detail.saltAreaFlg')}</label>
                         </div>
-                        <div className="tooltips"></div>
+                        <div className="tooltips">
+                          <span>{getMessage('stuff.detail.tooltip.surfaceType')}</span>
+                        </div>
                       </div>
                     </td>
                   </tr>
@@ -1052,7 +1250,7 @@ export default function StuffDetail() {
                             type="text"
                             className="input-light"
                             onKeyUp={handleKeyUp}
-                            value={form.watch('installHeight')}
+                            value={form.watch('installHeight') || ''}
                             {...register('installHeight')}
                           />
                         </div>
@@ -1151,12 +1349,7 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="input-wrap" style={{ width: '500px' }}>
-                            <input
+                            <input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
-                              type="text"
-                              className="input-light"
-                              {...form.register('dispCompanyName')}
-                              value={form.watch('dispCompanyName') || ''}
-                            />
                           </div>
                         </td>
                       </tr>
@@ -1224,7 +1417,9 @@ export default function StuffDetail() {
                               {getMessage('stuff.detail.saleStoreId')}
                               <span className="important">*</span>
                             </div>
-                            <div className="tooltips"></div>
+                            <div className="tooltips">
+                              <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
+                            </div>
                           </div>
                         </th>
                         <td>
@@ -1250,7 +1445,7 @@ export default function StuffDetail() {
                               <input
                                 type="text"
                                 className="input-light"
-                                value={form.watch('saleStoreId')}
+                                value={form.watch('saleStoreId') || ''}
                                 {...form.register('saleStoreId')}
                                 readOnly
                               />
@@ -1292,7 +1487,7 @@ export default function StuffDetail() {
                               <input
                                 type="text"
                                 className="input-light"
-                                value={form.watch('otherSaleStoreId')}
+                                value={form.watch('otherSaleStoreId') || ''}
                                 {...form.register('otherSaleStoreId')}
                                 readOnly
                               />
@@ -1317,29 +1512,203 @@ export default function StuffDetail() {
                         </td>
                       </tr>
                       {/* 도도부현 /주소 시작*/}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.prefId')}
+                          <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="select-wrap" style={{ width: '200px' }}>
+                              {prefCodeList?.length > 0 && (
+                                <Select
+                                  id="long-value-select3"
+                                  instanceId="long-value-select3"
+                                  className="react-select-custom"
+                                  classNamePrefix="custom"
+                                  placeholder="Select"
+                                  options={prefCodeList}
+                                  getOptionLabel={(x) => x.prefName}
+                                  getOptionValue={(x) => x.prefId}
+                                  isSearchable={false}
+                                  value={prefCodeList.filter(function (option) {
+                                    return option.prefId === prefValue
+                                  })}
+                                  isDisabled={true}
+                                />
+                              )}
+                            </div>
+                            <div className="input-wrap mr5" style={{ width: '580px' }}>
+                              <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 도도부현 /주소 끝 */}
                       {/* 발전량시뮬레이션지역시작 */}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.areaId')} <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="select-wrap" style={{ width: '200px' }}>
+                            <Select
+                              id="long-value-select4"
+                              instanceId="long-value-select4"
+                              className="react-select-custom"
+                              classNamePrefix="custom"
+                              options={areaIdList}
+                              placeholder="Select"
+                              getOptionLabel={(x) => x.prefName}
+                              getOptionValue={(x) => x.areaId}
+                              isSearchable={false}
+                              onChange={handleAreaIdOnChange}
+                              value={areaIdList.filter(function (option) {
+                                return option.areaId === form.watch('areaId')
+                              })}
+                              isDisabled={areaIdList.length > 0 ? false : true}
+                            />
+                          </div>
+                        </td>
+                      </tr>
                       {/* 발전량시뮬레이션지역끝 */}
                       {/* 기준풍속시작 */}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.windSpeed')} <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="select-wrap mr10" style={{ width: '200px' }}>
+                              <Select
+                                {...register('standardWindSpeedId')}
+                                id="long-value-select5"
+                                instanceId="long-value-select5"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={windSpeedList}
+                                onChange={onChangeWindSpeedCode}
+                                getOptionLabel={(x) => x.clCodeNm}
+                                getOptionValue={(x) => x.clCode}
+                                isClearable={true}
+                                isSearchable={false}
+                                value={windSpeedList.filter(function (option) {
+                                  return option.clCode === watch('standardWindSpeedId')
+                                })}
+                              ></Select>
+                            </div>
+                            <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
+                            <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
+                              {getMessage('stuff.detail.btn.windSpeedPop')}
+                            </Button>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 기준풍속끝 */}
                       {/* 수직적설량시작 */}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.verticalSnowCover')} <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="input-wrap mr10" style={{ width: '200px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                onKeyUp={handleKeyUp}
+                                value={form.watch('verticalSnowCover') || ''}
+                                {...register('verticalSnowCover')}
+                              />
+                            </div>
+                            <span className="mr10">cm</span>
+                            <div className="d-check-box light">
+                              <input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
+                              <label htmlFor="coldRegionFlg">{getMessage('stuff.detail.coldRegionFlg')}</label>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 수직적설량끝 */}
                       {/* 면조도구분시작 */}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.surfaceType')} <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="d-check-radio light mr10">
+                              <input type="radio" name="surfaceType" value="III・IV" id="surfaceType0" {...form.register('surfaceType')} />
+                              <label htmlFor="surfaceType0">III・IV</label>
+                            </div>
+                            <div className="d-check-radio light mr10">
+                              <input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
+                              <label htmlFor="surfaceType1">Ⅱ</label>
+                            </div>
+                            <div className="d-check-box light mr5">
+                              <input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
+                              <label htmlFor="saltAreaFlg">{getMessage('stuff.detail.saltAreaFlg')}</label>
+                            </div>
+                            <div className="tooltips">
+                              <span>{getMessage('stuff.detail.tooltip.surfaceType')}</span>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 면조도구분끝 */}
-                      {/* 설치높이싲가 */}
+                      {/* 설치높이시작 */}
+                      <tr>
+                        <th>
+                          {getMessage('stuff.detail.installHeight')} <span className="important">*</span>
+                        </th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="input-wrap mr10" style={{ width: '200px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                onKeyUp={handleKeyUp}
+                                value={form.watch('installHeight') || ''}
+                                {...register('installHeight')}
+                              />
+                            </div>
+                            <span>m</span>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 설치높이끝 */}
                       {/* 계약조건시작 */}
+                      <tr>
+                        <th>{getMessage('stuff.detail.conType')}</th>
+                        <td>
+                          <div className="flx-box">
+                            <div className="d-check-radio light mr10">
+                              <input type="radio" name="conType" value="0" id="conType0" {...form.register('conType')} />
+                              <label htmlFor="conType0">{getMessage('stuff.detail.conType0')}</label>
+                            </div>
+                            <div className="d-check-radio light mr10">
+                              <input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
+                              <label htmlFor="conType1">{getMessage('stuff.detail.conType1')}</label>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
                       {/* 계약조건끝 */}
                       {/* 메모시작 */}
-                      {/* 메모끝 */}
                       <tr>
-                        <th></th>
+                        <th>{getMessage('stuff.detail.remarks')}</th>
+                        <td>
+                          <div className="input-wrap">
+                            <input type="text" className="input-light" {...form.register('remarks')} />
+                          </div>
+                        </td>
                       </tr>
+                      {/* 메모끝 */}
                     </tbody>
                   </table>
                 </div>
               </div>
-
               {objectNo.substring(0, 1) === 'R' ? (
                 <>
                   {/* 진짜R 플랜시작 */}
@@ -1349,7 +1718,7 @@ export default function StuffDetail() {
                       <ul className="info-wrap">
                         <li>
                           {getMessage('stuff.detail.planList.cnt')}
-                          <span className="red">플랜갯수찍어주기</span>
+                          <span className="red"> {detailData.planList?.length}</span>
                         </li>
                       </ul>
                     </div>
@@ -1367,8 +1736,8 @@ export default function StuffDetail() {
                   </div>
                   <div className="information-grid">
                     <div className="q-grid no-cols">
-                      그리드영역
+                      <StuffPlanQGrid {...planGridProps} />
-                      <div className="pagination-wrap">페이징영역</div>
+                      {/* <div className="pagination-wrap">페이징영역</div> */}
                     </div>
                   </div>
                   {/* 진짜R 플랜끝 */}

src/components/management/StuffPlanQGrid.jsx

@@ -0,0 +1,51 @@
+import { useState, useMemo, useCallback, useEffect } from 'react'
+import { AgGridReact } from 'ag-grid-react'
+import 'ag-grid-community/styles/ag-grid.css'
+import 'ag-grid-community/styles/ag-theme-quartz.css'
+export default function StuffPlanQGrid(props) {
+  const { planGridData, planGridColumns, isPageable = true } = props
+
+  const [rowData, setRowData] = useState(null)
+  const [gridApi, setGridApi] = useState(null)
+  const [colDefs, setColDefs] = useState(planGridColumns)
+
+  const defaultColDef = useMemo(() => {
+    return {
+      flex: 1,
+      minWidth: 100,
+      sortable: false,
+      suppressMovable: false,
+      resizable: false,
+      suppressSizeToFit: false,
+    }
+  }, [])
+
+  const rowBuffer = 100
+
+  useEffect(() => {
+    planGridData ? setRowData(planGridData) : ''
+  }, [planGridData])
+
+  const onGridReady = useCallback(
+    (params) => {
+      setGridApi(params.api)
+      planGridData ? setRowData(planGridData) : ''
+    },
+    [planGridData],
+  )
+
+  return (
+    <div className="ag-theme-quartz" style={{ height: '100%' }}>
+      <AgGridReact
+        onGridReady={onGridReady}
+        rowBuffer={rowBuffer}
+        rowData={rowData}
+        columnDefs={colDefs}
+        defaultColDef={defaultColDef}
+        rowSelection={'singleRow'}
+        pagination={isPageable}
+        domLayout="autoHeight"
+      />
+    </div>
+  )
+}

src/locales/ja.json

@@ -502,6 +502,7 @@
   "stuff.detail.conType1": "全量",
   "stuff.detail.remarks": "メモ",
   "stuff.detail.tooltip.saleStoreId": "販売代理店または販売代理店IDを1文字以上入力してください",
+  "stuff.detail.tooltip.surfaceType": "塩害地域の定義は各メーカーの設置マニュアルをご確認ください",
   "stuff.detail.tempSave.message1": "一時保存されました。商品番号を取得するには、必須項目をすべて入力してください。",
   "stuff.detail.confirm.message1": "販売店情報を変更すると、設計依頼文書番号が削除されます。変更しますか？",
   "stuff.detail.delete.message1": "仕様が確定したものは削除できません。",
@@ -566,6 +567,17 @@
   "stuff.windSelectPopup.search.address1": "県",
   "stuff.windSelectPopup.btn1": "閉じる",
   "stuff.windSelectPopup.btn2": "選択",
+  "stuff.detail.planGridHeader.planNo": "プラン番号",
+  "stuff.detail.planGridHeader.orderFlg": "発注可",
+  "stuff.detail.planGridHeader.moduleModel": "モジュール",
+  "stuff.detail.planGridHeader.capacity": "システム容量",
+  "stuff.detail.planGridHeader.roofMaterialIdMulti": "屋根材",
+  "stuff.detail.planGridHeader.constructSpecification": "施工方法",
+  "stuff.detail.planGridHeader.supportMethodIdMulti": "架台",
+  "stuff.detail.planGridHeader.pcTypeNo": "パワーコンディショナー",
+  "stuff.detail.planGridHeader.management": "管理",
+  "stuff.detail.planGrid.btn1": "見積書の照会",
+  "stuff.detail.planGrid.btn2": "Excel",
   "length": "長さ",
   "height": "高さ",
   "output": "出力",

src/locales/ko.json

@@ -507,6 +507,7 @@
   "stuff.detail.conType1": "전량",
   "stuff.detail.remarks": "메모",
   "stuff.detail.tooltip.saleStoreId": "판매대리점 또는 판매대리점ID를 1자 이상 입력하세요",
+  "stuff.detail.tooltip.surfaceType": "염해지역 정의는 각 메이커의 설치 메뉴얼을 확인해주십시오",
   "stuff.detail.tempSave.message1": "임시저장 되었습니다. 물건번호를 획득하려면 필수 항목을 모두 입력해 주십시오.",
   "stuff.detail.confirm.message1": "판매점 정보를 변경하면, 설계의뢰 문서번호가 삭제됩니다. 변경하시겠습니까?",
   "stuff.detail.delete.message1": "사양이 확정된 물건은 삭제할 수 없습니다.",
@@ -571,6 +572,17 @@
   "stuff.windSelectPopup.search.address1": "현",
   "stuff.windSelectPopup.btn1": "닫기",
   "stuff.windSelectPopup.btn2": "선택",
+  "stuff.detail.planGridHeader.planNo": "플랜번호",
+  "stuff.detail.planGridHeader.orderFlg": "발주여부",
+  "stuff.detail.planGridHeader.moduleModel": "모듈",
+  "stuff.detail.planGridHeader.capacity": "시스템용량",
+  "stuff.detail.planGridHeader.roofMaterialIdMulti": "지붕재",
+  "stuff.detail.planGridHeader.constructSpecification": "시공방법",
+  "stuff.detail.planGridHeader.supportMethodIdMulti": "가대",
+  "stuff.detail.planGridHeader.pcTypeNo": "파워컨디셔너",
+  "stuff.detail.planGridHeader.management": "관리",
+  "stuff.detail.planGrid.btn1": "견적서 조회",
+  "stuff.detail.planGrid.btn2": "Excel",
   "length": "길이",
   "height": "높이",
   "output": "출력",