Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -8,6 +8,8 @@ import { onlyNumberInputChange } from '@/util/input-utils'
 import { fabric } from 'fabric'
 import { gridColorState } from '@/store/gridAtom'
 import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
 
 const TYPE = {
   DOT: 'DOT',
@@ -16,6 +18,7 @@ const TYPE = {
 
 export default function DotLineGrid(props) {
   // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
+  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [close, setClose] = useState(false)
   const { setShowDotLineGridModal } = props
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
@@ -27,6 +30,8 @@ export default function DotLineGrid(props) {
   const interval = useRecoilValue(dotLineIntervalSelector)
 
   const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
 
   useEffect(() => {
     return () => {
@@ -46,6 +51,12 @@ export default function DotLineGrid(props) {
   ]
   const [selectOption, setSelectOption] = useState(SelectOption[0])
 
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('DotLineGrid useEffect 실행')
+    fetchGridSettings()
+  }, [objectNo])
+
   const HandleClickClose = () => {
     // setClose(true)
     // setTimeout(() => {
@@ -64,7 +75,52 @@ export default function DotLineGrid(props) {
     })
   }
 
-  const handleSave = () => {
+  // Canvas Grid Setting 조회 및 초기화
+  const fetchGridSettings = async () => {
+    try {
+      const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
+
+      const patternData = {
+        INTERVAL: {
+          type: res.gridType,
+          horizontalInterval: res.gridHorizon,
+          verticalInterval: res.gridVertical,
+          ratioInterval: res.gridRatio,
+        },
+        dimension: res.gridDimen,
+        DOT: res.dotGridDisplay,
+        LINE: res.lineGridDisplay,
+      }
+
+      const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
+
+      // dimension 값에 맞는 옵션을 선택
+      setSelectOption(matchedOption)
+
+      // 서버에서 받은 데이터로 상태 업데이트
+      setDotLineGridSettingState(patternData)
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  const handleSave = async () => {
+    try {
+      const patternData = {
+        objectNo,
+        dotGridDisplay: dotLineGridSetting.DOT,
+        lineGridDisplay: dotLineGridSetting.LINE,
+        gridType: dotLineGridSetting.INTERVAL.type,
+        gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval,
+        gridVertical: dotLineGridSetting.INTERVAL.verticalInterval,
+        gridRatio: dotLineGridSetting.INTERVAL.ratioInterval,
+        gridDimen: dotLineGridSetting.INTERVAL.dimension,
+      }
+
+      // HTTP POST 요청 보내기
+      await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
         // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
         canvas
           ?.getObjects()
@@ -75,10 +131,10 @@ export default function DotLineGrid(props) {
           .filter((obj) => obj.name === 'dotGrid')
           .forEach((obj) => canvas?.remove(obj))
 
-    const horizontalInterval = interval.horizontalInterval
+        //const horizontalInterval = interval.horizontalInterval
-    const verticalInterval = interval.verticalInterval
+        //const verticalInterval = interval.verticalInterval
 
-    if (dotLineGridSetting.DOT) {
+        if (patternData.dotGridDisplay) {
           const circle = new fabric.Circle({
             radius: 2,
             fill: 'red',
@@ -94,8 +150,8 @@ export default function DotLineGrid(props) {
           })
 
           const patternSourceCanvas = new fabric.StaticCanvas(null, {
-        width: horizontalInterval,
+            width: patternData.gridHorizon,
-        height: verticalInterval,
+            height: patternData.gridVertical,
           })
 
           patternSourceCanvas.add(circle)
@@ -131,10 +187,15 @@ export default function DotLineGrid(props) {
           canvas.renderAll()
         }
 
-    if (dotLineGridSetting.LINE) {
+        if (patternData.lineGridDisplay) {
-      for (let i = 0; i < canvas.height / verticalInterval + 1; i++) {
+          for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) {
             const horizontalLine = new fabric.Line(
-          [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2],
+              [
+                0,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+                canvas.width,
+                i * patternData.gridVertical - patternData.gridVertical / 2,
+              ],
               {
                 stroke: gridColor,
                 strokeWidth: 1,
@@ -153,9 +214,14 @@ export default function DotLineGrid(props) {
             canvas.add(horizontalLine)
           }
 
-      for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) {
+          for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) {
             const verticalLine = new fabric.Line(
-          [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height],
+              [
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                0,
+                i * patternData.gridHorizon - patternData.gridHorizon / 2,
+                canvas.height,
+              ],
               {
                 stroke: gridColor,
                 strokeWidth: 1,
@@ -176,6 +242,10 @@ export default function DotLineGrid(props) {
         }
 
         canvas.renderAll()
+      })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
   }
 
   const handleRadioChange = (e) => {

src/components/floor-plan/modal/setting01/FirstOption.jsx

@@ -116,11 +116,21 @@ export default function FirstOption() {
     }
   }
 
-  const onClickDimension = async (item) => {
+  const onClickOnlyOne = async (item) => {
+    //화면 표시
+    if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      //치수 표시
+    } else {
       const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
         option.selected = option.id === item.id
         return option
       })
+    }
 
     setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
 
@@ -205,7 +215,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.dimensionDisplay.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>
@@ -217,7 +227,7 @@ export default function FirstOption() {
         <div className="flex-check-box for-line">
           {settingModalFirstOptions &&
             settingModalFirstOptions.option2.map((item) => (
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOnlyOne(item)}>
                 <span className="check-area"></span>
                 <span className="title-area">{getMessage(item.name)}</span>
               </button>

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -18,6 +18,7 @@ export default function GridOption(props) {
   const [color, setColor] = useColor(gridColor)
 
   useEffect(() => {
+    console.log('GridOption useEffect 실행')
     setGridColor(color.hex)
   }, [color])
 

src/components/management/Stuff.jsx

@@ -12,20 +12,24 @@ import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
 import dayjs from 'dayjs'
 import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
 dayjs.extend(isLeapYear)
-import { globalLocaleStore } from '@/store/localeAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
+import KO from '@/locales/ko.json'
+import JA from '@/locales/ja.json'
+import '@/styles/grid.scss'
 export default function Stuff() {
+  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
   const stuffSearchParams = useRecoilValue(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const { getMessage } = useMessage()
   const [curPage, setCurPage] = useState(1) //현재 페이지 번호
   const [defaultSize, setDefaultSize] = useState(100) //페이지 당 게시물 수
+  const [gridCount, setGridCount] = useState(0) //총 갯수
   const [defaultSortType, setDefaultSortType] = useState('R')
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
   const gridRef = useRef()
 
-  const [gridCount, setGridCount] = useState(0)
   const [selectedRowData, setSelectedRowData] = useState([])
   const [selectedRowDataCount, setSelectedRowDataCount] = useState(0)
 
@@ -273,14 +277,12 @@ export default function Stuff() {
 
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
         const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
-
         await get({
           url: apiUrl,
         }).then((res) => {
           if (!isEmptyArray(res)) {
-            // console.log('화면진입API결과::', res)
+            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridCount(res[0].totCnt)
-            setGridCount(res.length)
           }
         })
       }
@@ -293,15 +295,14 @@ export default function Stuff() {
       stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
       stuffSearchParams.endRow = curPage * defaultSize
       stuffSearchParams.schSortType = defaultSortType
-      // console.log('조회 눌럿을때 ::::::::::::::', stuffSearchParams)
       async function fetchData() {
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
         const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
-          console.log('API결과:::::::', res)
+          // console.log('검색조건 변경 조회 API결과:::::::', res)
           if (!isEmptyArray(res)) {
-            setGridProps({ ...gridProps, gridData: res, count: res.length })
+            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-            setGridCount(res.length)
+            setGridCount(res[0].totCnt)
           } else {
             setGridProps({ ...gridProps, gridData: [], count: 0 })
             setGridCount(0)
@@ -324,15 +325,14 @@ export default function Stuff() {
       startRow: startRow,
       endRow: curPage * e.target.value,
     })
-    // console.log('셋팅된 검색조건:::', stuffSearchParams)
+    console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams)
     //조회API호출
     // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
     const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
-      // console.log('보여줄개수바꿨을때 조회 ::::::::::', res)
       if (!isEmptyArray(res)) {
-        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-        setGridCount(res.length)
+        setGridCount(res[0].totCnt)
       } else {
         setGridProps({ ...gridProps, gridData: [], count: 0 })
         setGridCount(0)
@@ -352,18 +352,24 @@ export default function Stuff() {
     })
     // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
     const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
-    // console.log('apiUrl::', apiUrl)
     get({ url: apiUrl }).then((res) => {
-      // console.log('정렬바꿨을때 조회 ::::::::::', res)
       if (!isEmptyArray(res)) {
-        setGridProps({ ...gridProps, gridData: res, count: res.length })
+        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-        setGridCount(res.length)
+        setGridCount(res[0].totCnt)
       } else {
         setGridProps({ ...gridProps, gridData: [], count: 0 })
         setGridCount(0)
       }
     })
   }
+
+  useEffect(() => {
+    if (globalLocaleState === 'ko') {
+      setAppMessageState(KO)
+    } else {
+      setAppMessageState(JA)
+    }
+  }, [globalLocaleState])
   return (
     <>
       {/* 퍼블시작 */}

src/components/management/StuffDetail.jsx

@@ -11,6 +11,7 @@ import dayjs from 'dayjs'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
 export default function StuffDetail() {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -38,7 +39,7 @@ export default function StuffDetail() {
     windSpeed: '', //기준풍속
     snowCover: '', //수직적설량
     coldAreaChk: false, //한랭지대책시행
-    surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
+    surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
     saltAreaChk: false, //염해지역용아이템사용
     installHeight: '', //설치높이
     powerConTerms: '0', //계약조건(잉여 / 전량)
@@ -77,14 +78,13 @@ export default function StuffDetail() {
       get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
         // console.log('물건번호로 상세 API 호출')
         if (res != null) {
-          // console.log('상세res:::::::', res)
           setDetailData(res)
 
           // 신규 상세 공통APi
           // 도도부현API
           get({ url: '/api/object/prefecture/list' }).then((res) => {
             if (!isEmptyArray(res)) {
-              //console.log('도도부현API 결과:::', res)
+              console.log('도도부현API 결과:::', res)
               setPrefCodeList(res)
             }
           })
@@ -106,12 +106,11 @@ export default function StuffDetail() {
         }
       })
     } else {
-      console.log('신규화면')
       // 신규 상세 공통APi
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
-          //console.log('도도부현API 결과:::', res)
+          // console.log('신규화면 도도부현API 결과:::', res)
           setPrefCodeList(res)
         }
       })
@@ -121,11 +120,11 @@ export default function StuffDetail() {
       //1차점 : X167
       get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          console.log('판매점 결과:::::', res)
+          // console.log('판매점 결과:::::', res)
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-          console.log('first:::::', firstList)
+          // console.log('first:::::', firstList)
-          console.log('otherList:::::', otherList)
+          // console.log('otherList:::::', otherList)
           //1차점 셀렉트박스
           setSaleStoreList(firstList)
           //1차 판매점 자동완성 값 셋팅
@@ -135,6 +134,8 @@ export default function StuffDetail() {
 
           //1차점 아닌 판매점 셀렉트박스
           setOtherSaleStoreList(otherList)
+          form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
+          form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
         }
       })
     }
@@ -146,14 +147,17 @@ export default function StuffDetail() {
       form.setValue('saleStoreId', '')
       form.setValue('saleStoreName', '')
     } else {
-      form.setValue('saleStoreId', key)
+      const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
-      form.setValue('saleStoreName', key)
+      form.setValue('saleStoreId', key.target.value)
+      form.setValue('saleStoreName', name)
     }
   }
 
   //2차점 변경 이벤트
   const onSelectionChange2 = (key) => {
-    console.log(key)
+    const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
+    form.setValue('otherSaleStoreId', key.target.value)
+    form.setValue('otherSaleStoreNm', name)
   }
   // 우편번호 숫자만 체크
   const _zipNo = watch('zipNo')
@@ -187,17 +191,19 @@ export default function StuffDetail() {
   const _objectName = watch('objectName')
   const _objectNameOmit = watch('objectNameOmit')
   const _saleStoreId = watch('saleStoreId')
+  const _otherSaleStoreId = watch('otherSaleStoreId')
   const _prefId = watch('prefId')
   const _address = watch('address')
   const _powerSimArea = watch('powerSimArea')
   const _windSpeed = watch('windSpeed')
   const _snowCover = watch('snowCover')
   const _installHeight = watch('installHeight')
+
   useEffect(() => {
     // console.log('mode:::::', editMode)
     if (editMode === 'NEW') {
       const formData = form.getValues()
-      // console.log('폼::::::::::::', formData)
+      console.log('폼::::::::::::', formData)
       let errors = {}
       if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
         errors.dispCompanyName = true
@@ -212,6 +218,10 @@ export default function StuffDetail() {
         errors.saleStoreId = true
       }
 
+      // if (!_otherSaleStoreId) {
+      //   errors.otherSaleStoreId = true
+      // }
+
       if (!_zipNo || _zipNo.length != 7) {
         errors.zipCode = true
       }
@@ -240,12 +250,25 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      // console.log('errors::', errors)
+      console.log('errors::', errors)
       setIsFormValid(Object.keys(errors).length === 0)
     } else {
       // console.log('상세일때 폼체크')
     }
-  }, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight])
+  }, [
+    _dispCompanyName,
+    _objectName,
+    _objectNameOmit,
+    _saleStoreId,
+    // _otherSaleStoreId,
+    _zipNo,
+    _prefId,
+    _address,
+    _powerSimArea,
+    _windSpeed,
+    _snowCover,
+    _installHeight,
+  ])
 
   // 주소검색 API
   const onSearchPostNumber = () => {
@@ -257,7 +280,7 @@ export default function StuffDetail() {
       //9302226
       if (res.status === 200) {
         if (res.results != null) {
-          // console.log('주소검색::', res.results)
+          console.log('주소검색::', res.results)
           // console.log('prefcode::', res.results[0].prefcode)
           // console.log('address::', res.results[0].address2 + res.results[0].address3)
           setPrefValue(res.results[0].prefcode)
@@ -287,7 +310,7 @@ export default function StuffDetail() {
       // /api/object/prefecture/도도부현코드/list
       get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('발전시뮬레이션::::::::', res)
+          console.log('발전량 시뮬레이션::::::::', res)
           setPowerSimAreaList(res)
         }
       })
@@ -328,7 +351,6 @@ export default function StuffDetail() {
   // 임시저장
   const onTempSave = async () => {
     const formData = form.getValues()
-    //console.log('임시저장::::::::', formData)
 
     const params = {
       saleStoreId: formData.saleStoreId,
@@ -348,8 +370,8 @@ export default function StuffDetail() {
       snowCover: formData.snowCover,
       surfaceType: formData.surfaceType,
       powerConTerms: formData.powerConTerms,
-      saltAreaChk: formData.saltAreaChk,
       coldAreaChk: formData.coldAreaChk,
+      saltAreaChk: formData.saltAreaChk,
       tempFlg: '1',
       workNo: null,
       workName: null,
@@ -364,8 +386,9 @@ export default function StuffDetail() {
   // 발전량 시뮬레이션 변경
   const handlePowerSimAreaOnChange = (e) => {
     // console.log('가지고있는 도도부현코드:::::::::', prefValue)
-    // console.log('발전량시뮬레이션변경:::::::::', e.target.value)
+    console.log('발전량시뮬레이션변경:::::::::', e.target.value)
-    //값 set해주고 그거 useEffect로 api호출
+    form.setValue('powerSimArea', e.target.value)
+    //값 set해주고 그거 useEffect로 기준풍속, 수직적설량 api호출
   }
 
   // 물건삭제
@@ -426,7 +449,7 @@ export default function StuffDetail() {
                           <input type="text" className="input-light" {...form.register('objectName')} />
                         </div>
                         <div className="select-wrap" style={{ width: '120px' }}>
-                          <select name="objectNameOmit" {...register('objectNameOmit')}>
+                          <select className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
                             <option value="">경칭공통코드선택</option>
                             <option value="11">경칭11</option>
                             <option value="22">경칭22</option>
@@ -457,16 +480,20 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
-                          <select className="select-light" name="" id=""></select>
+                          {saleStoreList?.length > 0 && (
+                            <select className="select-light" onChange={onSelectionChange} value={form.watch('saleStoreId')}>
+                              {saleStoreList.map((row) => {
+                                return (
+                                  <option key={row.saleStoreLevel} value={row.saleStoreId}>
+                                    {row.saleStoreName}
+                                  </option>
+                                )
+                              })}
+                            </select>
+                          )}
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
-                          <input
+                          <input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
-                            type="text"
-                            className="input-light"
-                            value={form.watch('saleStoreName')}
-                            {...form.register('saleStoreName')}
-                            readOnly
-                          />
                         </div>
                       </div>
                     </td>
@@ -474,20 +501,34 @@ export default function StuffDetail() {
                   <tr>
                     <th>
                       <div className="flx-box">
-                        <div className="title">
+                        <div className="title">2차 판매점명 / ID</div>
-                          2차 판매점명 / ID <span className="important">*</span>
-                        </div>
                         <div className="tooltips"></div>
                       </div>
                     </th>
                     <td>
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
-                          <select className="select-light" name="" id=""></select>
+                          {otherSaleStoreList?.length > 0 && (
-                        </div>
+                            <select className="select-light" onChange={onSelectionChange2} value={form.watch('otherSaleStoreId')}>
+                              {otherSaleStoreList.map((row) => {
+                                return (
+                                  <option key={row.saleStoreId} value={row.saleStoreId} text={row.saleStoreName}>
+                                    {row.saleStoreName}
+                                  </option>
+                                )
+                              })}
+                            </select>
+                          )}
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
-                        <input type="text" className="input-ligth" readOnly defaultValue={'선택한2차점 판매점명찍기 예정'} />
+                          <input
+                            type="text"
+                            className="input-light"
+                            value={form.watch('otherSaleStoreId')}
+                            {...form.register('otherSaleStoreId')}
+                            readOnly
+                          />
+                        </div>
                       </div>
                     </td>
                   </tr>
@@ -522,6 +563,7 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
+                          <input type="text" className="input-light" value={form.watch('prefName')} {...form.register('prefName')} readOnly />
                           {/* {prefCodeList?.length > 0 && (
                             <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
                               {prefCodeList.map((row) => {
@@ -529,6 +571,11 @@ export default function StuffDetail() {
                               })}
                             </Select>
                           )} */}
+                          {/* {prefCodeList?.length > 0 && (
+                            <select>
+                              <option value=""></option>
+                            </select>
+                          )} */}
                         </div>
                         <div className="input-wrap mr5" style={{ width: '580px' }}>
                           <input type="text" className="input-light" value={form.watch('address')} {...form.register('address')} />
@@ -541,7 +588,19 @@ export default function StuffDetail() {
                       발전량시뮬레이션지역 <span className="important">*</span>
                     </th>
                     <td>
-                      <div className="select-wrap" style={{ width: '200px' }}></div>
+                      <div className="select-wrap" style={{ width: '200px' }}>
+                        {powerSimAreaList?.length > 0 && (
+                          <select className="select-light" name="powerSimArea" onChange={handlePowerSimAreaOnChange}>
+                            {powerSimAreaList.map((row) => {
+                              return (
+                                <option key={row.prefName} value={row.prefId}>
+                                  {row.prefName}
+                                </option>
+                              )
+                            })}
+                          </select>
+                        )}
+                      </div>
                     </td>
                   </tr>
                   <tr>
@@ -568,11 +627,17 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr10" style={{ width: '200px' }}></div>
+                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                          <select className="select-light" name="snowCover" {...register('snowCover')}>
+                            <option value="">수직적설량코드?</option>
+                            <option value="30">30</option>
+                            <option value="40">40</option>
+                          </select>
+                        </div>
                         <span className="mr10">cm</span>
                         <div className="d-check-box light">
-                          <input type="checkbox" />
+                          <input type="checkbox" id="coldAreaChk" {...form.register('coldAreaChk')} />
-                          <label htmlFor="">한랭지대책시행</label>
+                          <label htmlFor="coldAreaChk">한랭지대책시행</label>
                         </div>
                       </div>
                     </td>
@@ -592,8 +657,8 @@ export default function StuffDetail() {
                           <label htmlFor="surfaceType1">Ⅱ</label>
                         </div>
                         <div className="d-check-box light mr5">
-                          <input type="checkbox" />
+                          <input type="checkbox" id="saltAreaChk" {...form.register('saltAreaChk')} />
-                          <label htmlFor="">염해지역용아이템사용</label>
+                          <label htmlFor="saltAreaChk">염해지역용아이템사용</label>
                         </div>
                         <div className="tooltips"></div>
                       </div>