물건 등록화면

src/components/management/StuffDetail.jsx

@@ -14,6 +14,7 @@ import { useRecoilValue } from 'recoil'
 import { sessionStore } from '@/store/commonAtom'
 import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
+import WindSelectPop from './popup/WindSelectPop'
 export default function StuffDetail() {
   const sessionState = useRecoilValue(sessionStore)
 
@@ -43,7 +44,6 @@ export default function StuffDetail() {
     prefName: '',
     address: '', //주소
     areaId: '', //발전량시뮬레이션지역id
-    // areaName: '', //발전량시뮬레이션지역명
     windSpeed: '', //기준풍속
     verticalSnowCover: '', //수직적설량NEW
     coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0)
@@ -68,10 +68,11 @@ export default function StuffDetail() {
 
   const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트
 
-  const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트
+  // const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트 팝업으로이동
   const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
   const [showAddressButtonValid, setShowAddressButtonValid] = useState(false) //주소검색팝업 활성화 컨트롤
   const [showDesignRequestButtonValid, setShowDesignRequestButtonValid] = useState(false) //설계의뢰팝업 활성화 컨트롤
+  const [showWindSpeedButtonValid, setShowWindSpeedButtonValid] = useState(false) //풍속선택팝업 활성화 컨트롤
   const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
 
   const [editMode, setEditMode] = useState('NEW')
@@ -208,6 +209,14 @@ export default function StuffDetail() {
     form.setValue('zipNo', info.zipNo)
   }
 
+  //팝업에서 넘어온 설계의뢰 정보
+  const setPlanReqInfo = (info) => {}
+
+  //팝업에서 넘어온 바람정보
+  const setWindSppedInfo = (info) => {
+    form.setValue('windSpeed', info.windSpeed)
+  }
+
   //임시저장 저장 버튼 컨트롤
   // dispCompanyName: '', //담당자
   // objectName: '', //물건명
@@ -307,6 +316,16 @@ export default function StuffDetail() {
     setShowDesignRequestButtonValid(true)
   }
 
+  // 풍속선택 팝업 오픈
+  const onSearchWindSpeedPopOpen = () => {
+    const prefName = form.watch('prefName')
+    if (prefName === '') {
+      alert(getMessage('stuff.windSelectPopup.error.message1'))
+    } else {
+      setShowWindSpeedButtonValid(true)
+    }
+  }
+
   useEffect(() => {
     if (prefValue !== '') {
       // 발전량시뮬레이션 지역 목록
@@ -326,18 +345,18 @@ export default function StuffDetail() {
     form.setValue('areaId', e.target.value)
   }
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (!isEmptyArray(areaIdList)) {
+  //   if (!isEmptyArray(areaIdList)) {
-      let _prefName = form.watch('prefName')
+  //     let _prefName = form.watch('prefName')
-      // console.log('기준풍속 가져오는 API', _prefName)
+  //     // console.log('기준풍속 가져오는 API', _prefName)
-      get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
+  //     get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
-        // console.log('res::', res)
+  //       // console.log('res::', res)
-        if (!isEmptyArray(res)) {
+  //       if (!isEmptyArray(res)) {
-          setWindSpeedList(res)
+  //         setWindSpeedList(res)
-        }
+  //       }
-      })
+  //     })
-    }
+  //   }
-  }, [areaIdList])
+  // }, [areaIdList])
 
   //필수값 다 입력했을때
   const onValid = (data) => {
@@ -643,7 +662,10 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                        <div className="input-wrap mr5">
+                          <input type="text" className="input-light" readOnly value={form.watch('windSpeed')} {...register('windSpeed')} />
+                        </div>
+                        {/* <div className="select-wrap mr10" style={{ width: '200px' }}>
                           <select className="select-light" name="windSpeed" {...register('windSpeed')}>
                             {windSpeedList.map((row) => {
                               return (
@@ -653,9 +675,11 @@ export default function StuffDetail() {
                               )
                             })}
                           </select>
-                        </div>
+                        </div> */}
                         <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
-                        <button className="btn-origin grey">{getMessage('stuff.detail.btn.windSpeedPop')}</button>
+                        <button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
+                          {getMessage('stuff.detail.btn.windSpeedPop')}
+                        </button>
                       </div>
                     </td>
                   </tr>
@@ -803,7 +827,7 @@ export default function StuffDetail() {
                     </tr>
                     <tr>
                       <th>
-                        물건구분/물건명 <span className="importatn">*</span>
+                        {getMessage('stuff.detail.objectStatusId')} <span className="importatn">*</span>
                       </th>
                       <td>
                         <div className="flx-box">
@@ -906,7 +930,12 @@ export default function StuffDetail() {
         </>
       )}
       {showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
-      {showDesignRequestButtonValid && <PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} />}
+      {showDesignRequestButtonValid && (
+        <PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} planReqInfo={setPlanReqInfo} />
+      )}
+      {showWindSpeedButtonValid && (
+        <WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />
+      )}
     </>
   )
 }

src/components/management/popup/FindAddressPop.jsx

@@ -68,6 +68,7 @@ export default function FindAddressPop(props) {
         if (isNotEmptyArray(res.results)) {
           setGridProps({ ...gridProps, gridData: res.results })
         } else {
+          alert(getMessage('stuff.addressPopup.error.message1'))
           setGridProps({ ...gridProps, gridData: [] })
         }
       } else {
@@ -80,7 +81,7 @@ export default function FindAddressPop(props) {
   const applyAddress = () => {
     // console.log('주소적용 클릭:::::::::', prefId, address1, address2, address3, zipNo)
     if (prefId == null) {
-      alert('stuff.addressPopup.error.message2')
+      alert(getMessage('stuff.addressPopup.error.message2'))
     } else {
       props.zipInfo({
         zipNo: zipNo,
@@ -99,6 +100,10 @@ export default function FindAddressPop(props) {
   const handleKeyUp = (e) => {
     let input = e.target
     input.value = input.value.replace(/[^0-9]/g, '')
+
+    if (e.key === 'Enter') {
+      searchPostNum()
+    }
   }
 
   //그리드에서 선택한 우편정보

src/components/management/popup/PlanRequestPop.jsx

@@ -12,7 +12,6 @@ import dayjs from 'dayjs'
 import PlanRequestPopQGrid from './PlanRequestPopQGrid'
 import { sessionStore } from '@/store/commonAtom'
 import { planReqSearchState } from '@/store/planReqAtom'
-import Select from 'react-dropdown-select'
 export default function PlanRequestPop(props) {
   const sessionState = useRecoilValue(sessionStore)
 

src/components/management/popup/WindSelectPop.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRecoilValue } from 'recoil'
+import { isEmptyArray, isNotEmptyArray } from '@/util/common-utils'
+export default function WindSelectPop(props) {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { promiseGet } = useAxios(globalLocaleState)
+  const [windSpeedList, setWindSpeedList] = useState([])
+  const [windSpeed, setWindSpeed] = useState(null)
+  const { getMessage } = useMessage()
+
+  //선택한 라디오 값 세팅
+  const handleChangeRadio = (e) => {
+    setWindSpeed(e.target.value)
+  }
+
+  //적용
+  const applyWindSpeed = () => {
+    if (windSpeed == null) {
+      alert(getMessage('stuff.windSelectPopup.error.message2'))
+    } else {
+      props.windSpeedInfo({ windSpeed: windSpeed })
+
+      //팝업닫기
+      props.setShowWindSpeedButtonValid(false)
+    }
+  }
+
+  useEffect(() => {
+    if (props.prefName !== '') {
+      promiseGet({ url: `/api/object/windSpeed/${props.prefName}/list` }).then((res) => {
+        if (res.status === 200) {
+          if (!isEmptyArray(res.data)) {
+            setWindSpeedList(res.data)
+          }
+        }
+      })
+    }
+  }, [props])
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog middle">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('stuff.windSelectPopup.title')}</h1>
+            <button className="modal-close" onClick={() => props.setShowWindSpeedButtonValid(false)}>
+              닫기
+            </button>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="common-table">
+                <table>
+                  <colgroup>
+                    <col style={{ width: '70px' }} />
+                    <col />
+                  </colgroup>
+                  <tbody>
+                    <tr>
+                      <th>{getMessage('stuff.windSelectPopup.search.address1')}</th>
+                      <td>
+                        <div className="input-wrap">
+                          <input type="text" className="input-light" defaultValue={props.prefName} readOnly />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div className="wind-table">
+                <table>
+                  <thead>
+                    <tr>
+                      <th style={{ width: '50px' }}>{getMessage('stuff.windSelectPopup.table.selected')}</th>
+                      <th style={{ width: '110px' }}>{getMessage('stuff.windSelectPopup.table.windspeed')}</th>
+                      <th>Remarks</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {windSpeedList.map((row, index) => {
+                      // console.log('row:::', row)
+                      return (
+                        <tr key={index}>
+                          <td className="al-c">
+                            <div className="d-check-radio light no-text">
+                              <input type="radio" value={row.windSpeed} name="windS" id={row.windSpeed} onChange={handleChangeRadio} />
+                              <label htmlFor={row.windSpeed}></label>
+                            </div>
+                          </td>
+                          <td className="al-c">{row.windSpeed}</td>
+                          <td>{row.remarks}</td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button className="btn-origin grey mr5" onClick={() => props.setShowWindSpeedButtonValid(false)}>
+                {getMessage('stuff.windSelectPopup.btn1')}
+              </button>
+              <button className="btn-origin navy" onClick={applyWindSpeed}>
+                {getMessage('stuff.windSelectPopup.btn2')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/locales/ja.json

@@ -508,6 +508,14 @@
   "stuff.search.period": "期間検索",
   "stuff.search.schDateTypeU": "更新日",
   "stuff.search.schDateTypeR": "登録日",
+  "stuff.windSelectPopup.title": "風速選択",
+  "stuff.windSelectPopup.table.selected": "選択",
+  "stuff.windSelectPopup.table.windspeed": "風速",
+  "stuff.windSelectPopup.error.message1": "住所を先に検索してください",
+  "stuff.windSelectPopup.error.message2": "風速を選択してください。",
+  "stuff.windSelectPopup.search.address1": "県",
+  "stuff.windSelectPopup.btn1": "閉じる",
+  "stuff.windSelectPopup.btn2": "選択",
   "length": "長さ",
   "height": "高さ",
   "output": "出力",

src/locales/ko.json

@@ -513,6 +513,14 @@
   "stuff.search.period": "기간검색",
   "stuff.search.schDateTypeU": "갱신일",
   "stuff.search.schDateTypeR": "등록일",
+  "stuff.windSelectPopup.title": "풍속선택",
+  "stuff.windSelectPopup.table.selected": "선택",
+  "stuff.windSelectPopup.table.windspeed": "풍속",
+  "stuff.windSelectPopup.error.message1": "주소를 먼저 검색해주세요.",
+  "stuff.windSelectPopup.error.message2": "풍속을 선택해주세요.",
+  "stuff.windSelectPopup.search.address1": "현",
+  "stuff.windSelectPopup.btn1": "닫기",
+  "stuff.windSelectPopup.btn2": "선택",
   "length": "길이",
   "height": "높이",
   "output": "출력",