로그인화면, 물건현황

src/components/main/ChangePasswordPop.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { sessionStore } from '@/store/commonAtom'
 import { useRecoilValue, useRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
+import { useRouter } from 'next/navigation'
 
 export default function ChangePasswordPop() {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
@@ -12,7 +13,7 @@ export default function ChangePasswordPop() {
   const { patch } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
-
+  const router = useRouter()
   const formInitValue = {
     password1: '',
     password2: '',
@@ -74,6 +75,8 @@ export default function ChangePasswordPop() {
         if (res.result.resultCode === 'S') {
           alert(getMessage('main.popup.login.success'))
           setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+          //메인으로 이동
+          router.push('/')
         } else {
           alert(res.result.resultMsg)
         }
@@ -154,7 +157,6 @@ export default function ChangePasswordPop() {
                 className="btn-origin grey"
                 onClick={() => {
                   router.push('/login')
-                  setOpen(false)
                 }}
               >
                 {getMessage('main.popup.login.btn2')}

src/components/management/Stuff.jsx

@@ -76,16 +76,7 @@ export default function Stuff() {
         headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
         checkboxSelection: true,
         showDisabledCheckboxes: true,
-        // .centered {
-        //   .ag-header-cell-label {
-        //     justify-content: center !important;
-        //   }
-        // }
         cellStyle: { textAlign: 'center' },
-        //suppressMovable: true, //헤더 못움직이게
-        // width : 100
-        // minWidth : 100
-        // maxWidth : 100
         valueFormatter: function (params) {
           if (params.value) {
             return dayjs(params?.value).format('YYYY.MM.DD HH:mm:ss')
@@ -96,8 +87,8 @@ export default function Stuff() {
       },
       {
         field: 'objectNo',
+        width: '180px',
         headerName: getMessage('stuff.gridHeader.objectNo'),
-        // headerClass: 'centered', //_test.scss에 추가 테스트
         cellRenderer: function (params) {
           if (params.data.objectNo) {
             return (

src/components/management/StuffDetail.jsx

@@ -7,11 +7,16 @@ import Select from 'react-dropdown-select'
 import Link from 'next/link'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
+import { isEmptyArray } from '@/util/common-utils'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { useRecoilValue } from 'recoil'
+import { sessionStore } from '@/store/commonAtom'
+import FindAddressPop from './popup/FindAddressPop'
+import DesignRequestPop from './popup/DesignRequestPop'
 export default function StuffDetail() {
+  const sessionState = useRecoilValue(sessionStore)
+
   const router = useRouter()
   const searchParams = useSearchParams()
   const { getMessage } = useMessage()
@@ -56,14 +61,18 @@ export default function StuffDetail() {
   const [prefValue, setPrefValue] = useState('')
   const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
   const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
+  const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
 
   const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트
 
   const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트
   const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
-  const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
+  const [showButtonValid, setShowButtonValid] = useState(false) //주소검색 활성화 컨트롤
   const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
 
+  // const []  //1차판매점 자동완성 선택값
+  // const []  //2차판매점 자동완성 선택값
+
   const [editMode, setEditMode] = useState('NEW')
   const [detailData, setDetailData] = useState({})
 
@@ -85,15 +94,15 @@ export default function StuffDetail() {
           // 도도부현API
           get({ url: '/api/object/prefecture/list' }).then((res) => {
             if (!isEmptyArray(res)) {
-              // console.log('도도부현API 결과:::', res)
+              console.log('도도부현API 결과:::', res)
               setPrefCodeList(res)
             }
           })
-          // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
           // 임시 1차점 판매점코드 saleStoreId=201TES01
           // T01
           //1차점 : X167
-          get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
+          // get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
+          get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
             if (!isEmptyArray(res)) {
               // console.log('판매점 결과:::::', res)
               setSaleStoreList(res)
@@ -111,32 +120,31 @@ export default function StuffDetail() {
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('신규화면 도도부현API 결과:::', res)
+          console.log('신규화면 도도부현API 결과:::', res)
           setPrefCodeList(res)
         }
       })
-      // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
       // 임시 1차점 판매점코드 saleStoreId=201TES01
       // T01
       //1차점 : X167
-      get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
+      get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
+        // get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
         if (!isEmptyArray(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('otherList:::::', otherList)
           //1차점 셀렉트박스
           setSaleStoreList(firstList)
           //1차 판매점 자동완성 값 셋팅
-          form.setValue('saleStoreId', firstList[0].saleStoreId)
+          //form.setValue('saleStoreId', firstList[0].saleStoreId)
           //1차 판매점 번호 셋팅
-          form.setValue('saleStoreName', firstList[0].saleStoreId)
+          form.setValue('saleStoreName', firstList[0]?.saleStoreId)
 
           //1차점 아닌 판매점 셀렉트박스
+          setOriginOtherSaleStoreList(otherList)
           setOtherSaleStoreList(otherList)
-          form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
+          // form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
-          form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
+          form.setValue('otherSaleStoreName', otherList[0]?.saleStoreId)
         }
       })
     }
@@ -144,32 +152,83 @@ export default function StuffDetail() {
 
   //1차점 변경 이벤트
   const onSelectionChange = (key) => {
-    if (key == null) {
+    if (!isEmptyArray(key)) {
+      setOtherSaleStoreList(otherSaleStoreList)
+      form.setValue('saleStoreId', key[0].saleStoreId)
+      form.setValue('saleStoreName', key[0].saleStoreId)
+
+      //선택한 1차점 정보로 2차점 list 추리기
+      //長府工産株式会社　大阪支社
+      let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key[0].saleStoreId)
+      setOtherSaleStoreList(newOtherSaleStoreList)
+    } else {
+      //X누름
       form.setValue('saleStoreId', '')
       form.setValue('saleStoreName', '')
-    } else {
+      setOtherSaleStoreList(originOtherSaleStoreList)
-      const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
-      form.setValue('saleStoreId', key.target.value)
-      form.setValue('saleStoreName', name)
     }
   }
 
   //2차점 변경 이벤트
   const onSelectionChange2 = (key) => {
-    const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
+    if (!isEmptyArray(key)) {
-    form.setValue('otherSaleStoreId', key.target.value)
+      form.setValue('otherSaleStoreId', key[0].saleStoreId)
-    form.setValue('otherSaleStoreNm', name)
+      form.setValue('otherSaleStoreId', key[0].saleStoreId)
+    } else {
+      form.setValue('otherSaleStoreId', '')
+      form.setValue('otherSaleStoreId', '')
+    }
   }
   // 우편번호 숫자만 체크
   const _zipNo = watch('zipNo')
   useEffect(() => {
     if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
-      setButtonValid(true)
+      //setButtonValid(true)
     } else {
-      setButtonValid(false)
+      //setButtonValid(false)
     }
   }, [_zipNo])
 
+  //팝업에서 넘어온 우편정보
+  const setZipInfo = (info) => {
+    console.log('팝업에서 넘어온 데이타::::::::', info)
+
+    // const params = {
+    //   zipcode: _zipNo,
+    // }
+
+    // get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
+    //   //7830060
+    //   //9302226
+    //   //0790177 3개짜리
+    //   if (res.status === 200) {
+    //     if (res.results != null) {
+    //       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)
+    //       form.setValue('prefId', res.results[0].prefcode)
+    //       form.setValue('prefName', res.results[0].address1)
+    //       form.setValue('address', res.results[0].address2 + res.results[0].address3)
+    //     } else {
+    //       alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
+    //       form.setValue('prefId', '')
+    //       form.setValue('prefName', '')
+    //       form.setValue('address', '')
+    //       form.setValue('zipNo', '')
+    //       setPrefValue('')
+    //       setAreaIdList([])
+    //       form.setValue('areaId', '')
+    //       // form.setValue('areaName', '')
+    //       setWindSpeedList([])
+    //       form.setValue('windSpeed', '')
+    //     }
+    //   } else {
+    //     alert(res.message)
+    //   }
+    // })
+  }
+
   //임시저장 저장 버튼 컨트롤
   // dispCompanyName: '', //담당자
   // objectName: '', //물건명
@@ -201,10 +260,10 @@ export default function StuffDetail() {
   const _installHeight = watch('installHeight')
 
   useEffect(() => {
-    // console.log('mode:::::', editMode)
+    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
@@ -251,7 +310,7 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      // console.log('errors::', errors)
+      console.log('errors::', errors)
       setIsFormValid(Object.keys(errors).length === 0)
     } else {
       // console.log('상세일때 폼체크')
@@ -273,49 +332,21 @@ export default function StuffDetail() {
 
   // 주소검색 API
   const onSearchPostNumber = () => {
-    const params = {
+    console.log('주소검색클릭!!')
-      zipcode: _zipNo,
-    }
 
-    get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
+    setShowButtonValid(true)
-      //7830060
-      //9302226
-      //0790177 3개짜리
-      if (res.status === 200) {
-        if (res.results != null) {
-          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)
-          form.setValue('prefId', res.results[0].prefcode)
-          form.setValue('prefName', res.results[0].address1)
-          form.setValue('address', res.results[0].address2 + res.results[0].address3)
-        } else {
-          alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
-          form.setValue('prefId', '')
-          form.setValue('prefName', '')
-          form.setValue('address', '')
-          form.setValue('zipNo', '')
-          setPrefValue('')
-          setAreaIdList([])
-          form.setValue('areaId', '')
-          // form.setValue('areaName', '')
-          setWindSpeedList([])
-          form.setValue('windSpeed', '')
-        }
-      } else {
-        alert(res.message)
-      }
-    })
   }
 
   useEffect(() => {
+    console.log('우편번호검색해서 값이왔어:::::::::::', prefValue)
     if (prefValue !== '') {
       // 발전량시뮬레이션 지역 목록
       // /api/object/prefecture/도도부현코드/list
       get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('발전량 시뮬레이션::::::::', res)
+          console.log('발전량 시뮬레이션::::::::', res)
+          //res에 areaId추가됨
+          // form.setValue('areaId', res[0].areaId)
           form.setValue('areaId', res[0].prefId)
           form.setValue('areaName', res[0].prefName)
           setAreaIdList(res)
@@ -404,7 +435,7 @@ export default function StuffDetail() {
       workName: null,
     }
     console.log('임시저장params::', params)
-    return
+    // return
     await post({ url: '/api/object/save-object', data: params }).then((res) => {
       console.log('res::::::', res)
     })
@@ -498,18 +529,16 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr5" style={{ width: '567px' }}>
+                        <div style={{ width: '567px', marginRight: '5px' }}>
-                          {saleStoreList?.length > 0 && (
+                          <Select
-                            <select className="select-light" onChange={onSelectionChange} value={form.watch('saleStoreId')}>
+                            options={saleStoreList}
-                              {saleStoreList.map((row) => {
+                            value={form.watch('saleStoreId')}
-                                return (
+                            onChange={onSelectionChange}
-                                  <option key={row.saleStoreLevel} value={row.saleStoreId}>
+                            labelField="saleStoreName"
-                                    {row.saleStoreName}
+                            valueField="saleStoreId"
-                                  </option>
+                            searchBy="saleStoreName"
-                                )
+                            clearable={true}
-                              })}
+                          ></Select>
-                            </select>
-                          )}
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
                           <input type="text" className="input-light" value={form.watch('saleStoreId')} {...form.register('saleStoreId')} readOnly />
@@ -526,18 +555,17 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr5" style={{ width: '567px' }}>
+                        <div style={{ width: '567px', marginRight: '5px' }}>
-                          {otherSaleStoreList?.length > 0 && (
+                          <Select
-                            <select className="select-light" onChange={onSelectionChange2} value={form.watch('otherSaleStoreId')}>
+                            options={otherSaleStoreList}
-                              {otherSaleStoreList.map((row) => {
+                            value={form.watch('otherSaleStoreId')}
-                                return (
+                            labelField="saleStoreName"
-                                  <option key={row.saleStoreId} value={row.saleStoreId} text={row.saleStoreName}>
+                            valueField="saleStoreId"
-                                    {row.saleStoreName}
+                            searchBy="saleStoreName"
-                                  </option>
+                            clearable={true}
-                                )
+                            onChange={onSelectionChange2}
-                              })}
+                            disabled={form.watch('saleStoreId') !== '' ? false : true}
-                            </select>
+                          ></Select>
-                          )}
                         </div>
                         <div className="input-wrap" style={{ width: '216px' }}>
                           <input
@@ -558,20 +586,12 @@ export default function StuffDetail() {
                     <td>
                       <div className="flx-box">
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
-                          <input
+                          <input type="text" className="input-light" disabled />
-                            type="text"
-                            className="input-light"
-                            maxLength={7}
-                            {...form.register('zipNo', {
-                              minLength: { value: 7, message: '7자리만가능' },
-                              pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
-                            })}
-                          />
                         </div>
-                        <Button className="btn-origin grey" isDisabled={!buttonValid} onClick={onSearchPostNumber}>
+                        <Button className="btn-origin grey" onClick={onSearchPostNumber}>
                           주소검색
                         </Button>
-                        <div className="guide">*우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오</div>
+                        <div className="guide">*주소검색 버튼을 클릭한 후, 도도부현 정보를 선택해주십시오.</div>
                       </div>
                     </td>
                   </tr>
@@ -581,20 +601,16 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="input-wrap mr5" style={{ width: '200px' }}>
+                        <div className="select-wrap" style={{ width: '200px' }}>
-                          <input type="text" className="input-light" value={form.watch('prefName')} {...form.register('prefName')} readOnly />
+                          {prefCodeList?.length > 0 && (
-                          {/* {prefCodeList?.length > 0 && (
+                            <select className="select-light" name="prefName" {...register('prefId')} disabled>
-                            <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
+                              {prefCodeList.map((row) => (
-                              {prefCodeList.map((row) => {
+                                <option key={row.prefId} value={row.prefId}>
-                                return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
+                                  {row.prefName}
-                              })}
+                                </option>
-                            </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')} />
@@ -644,8 +660,8 @@ export default function StuffDetail() {
                             })}
                           </select>
                         </div>
-                        <span>m/s이하</span>
+                        <span className="mr10">m/s이하</span>
-                        <button className="btn-origin grey mr5">풍속선택</button>
+                        <button className="btn-origin grey">풍속선택</button>
                       </div>
                     </td>
                   </tr>
@@ -784,6 +800,8 @@ export default function StuffDetail() {
           )}
         </>
       )}
+      {showButtonValid && <FindAddressPop setShowButtonValid={setShowButtonValid} zipInfo={setZipInfo} />}
+      <DesignRequestPop />
     </>
   )
 }

src/components/management/StuffQGrid.jsx

@@ -40,7 +40,6 @@ export default function StuffQGrid(props) {
       suppressMovable: true,
       resizable: false,
       suppressSizeToFit: false,
-      headerClass: 'centered', //_test.scss에 추가 테스트
     }
   }, [])
 
@@ -67,11 +66,7 @@ export default function StuffQGrid(props) {
 
   //더블클릭
   const onCellDoubleClicked = useCallback((event) => {
-    // if (event.column.colId === 'company') {
-    //   return
-    // } else {
     props.getCellDoubleClicked(event)
-    // }
   }, [])
 
   //컨텐츠에 따라 컬럼넓이 자동조절
@@ -82,7 +77,6 @@ export default function StuffQGrid(props) {
   }, [])
 
   const onGridReady = useCallback((event) => {
-    // console.log('event:::', event)
     // 헤더 사이즈 조정 컬럼에 width값으로 계산
     event.api.sizeColumnsToFit()
   }, [])
@@ -92,6 +86,13 @@ export default function StuffQGrid(props) {
     gridData ? setRowData(gridData) : ''
   }, [gridData])
 
+  // 임시는 row색깔 구분
+  const getRowClass = (row) => {
+    if (row.data.objectNo.substring(0, 1) === 'T') {
+      return 'important_row'
+    }
+  }
+
   return (
     <div className="ag-theme-quartz" style={{ height: 500 }}>
       <AgGridReact
@@ -107,10 +108,10 @@ export default function StuffQGrid(props) {
         onSelectionChanged={onSelectionChanged}
         onCellDoubleClicked={onCellDoubleClicked}
         pagination={isPageable}
-        //paginationPageSize={paginationPageSize}
-        //paginationPageSizeSelector={paginationPageSizeSelector}
         autoSizeStrategy={autoSizeStrategy}
         overlayNoRowsTemplate={'<span className="ag-overlay-loading-center">물건 목록이 없습니다.</span>'}
+        // getRowStyle={getRowStyle}
+        getRowClass={getRowClass}
       />
     </div>
   )

src/components/management/StuffSearchCondition.jsx

@@ -260,7 +260,8 @@ export default function StuffSearchCondition() {
                       options={schSelSaleStoreList}
                       value={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
                       labelField="saleStoreName"
-                      valueField="saleStoreName"
+                      valueField="saleStoreId"
+                      searchBy="saleStoreName"
                       onChange={onSelectionChange}
                       clearable={true}
                       onClearAll={handleClear}

src/components/management/popup/DesignRequestPop.jsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function DesignRequestPop() {
+  return <div></div>
+}

src/components/management/popup/FindAddressPop.jsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { queryStringFormatter } from '@/util/common-utils'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRecoilValue } from 'recoil'
+import FindAddressPopQGrid from './FindAddressPopQGrid'
+
+export default function FindAddressPop(props) {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { get } = useAxios(globalLocaleState)
+  const [prefId, setPrefId] = useState('')
+  const [address1, setAddress1] = useState('')
+  const [address2, setAddress2] = useState('')
+  const [address3, setAddress3] = useState('')
+  const gridRef = useRef()
+
+  const [gridProps, setGridProps] = useState({
+    gridData: [],
+    isPageable: false,
+    gridColumns: [],
+  })
+  const formInitValue = {
+    zipNo: '',
+  }
+  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
+    defaultValues: formInitValue,
+  })
+
+  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
+  //우편번호 검색
+  const searchPostNum = () => {
+    //   //7830060
+    //   //9302226
+    //   //0790177 3개짜리
+    console.log(watch('zipNo'))
+    const params = {
+      zipcode: watch('zipNo'),
+    }
+
+    get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
+      console.log('우편조회 API결과:::::', res)
+      if (res.status === 200) {
+      } else {
+        alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
+      }
+    })
+  }
+  // 주소적용 클릭
+  const zipInfo = () => {
+    console.log('주소적용 클릭:::::::::')
+    // setAddress3('3333')
+    // setAddress3('4444')
+    // setAddress3('5555')
+    props.zipInfo({
+      zipNo: '3434343',
+      address1: '3333',
+      address2: '4444',
+      address3: '5555',
+    })
+
+    props.setShowButtonValid(false)
+  }
+
+  //숫자만
+  const handleKeyUp = (e) => {
+    let input = e.target
+    input.value = input.value.replace(/[^0-9]/g, '')
+  }
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog middle">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">우편번호 郵便番号</h1>
+            <button className="modal-close" onClick={() => props.setShowButtonValid(false)}>
+              닫기
+            </button>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="address-input-wrap">
+                <input
+                  type="text"
+                  className="address-input"
+                  maxLength={7}
+                  onKeyUp={handleKeyUp}
+                  {...form.register('zipNo')}
+                  placeholder="우편번호의 7자리를 입력하세요. 郵便番号の7桁を入力してください。"
+                />
+                <button className="search-btn" onClick={searchPostNum}></button>
+              </div>
+              <div className="address-grid">
+                <FindAddressPopQGrid {...gridProps} gridRef={gridRef} />
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button className="btn-origin grey mr5" onClick={() => props.setShowButtonValid(false)}>
+                닫다 閉じる
+              </button>
+              <button className="btn-origin navy " onClick={zipInfo}>
+                주소적용 住所適用
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/management/popup/FindAddressPopQGrid.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export default function FindAddressPopGrid(props) {
+  const { gridData, gridColumns, isPageable = true, gridRef } = props
+  return <div></div>
+}

src/styles/_grid-detail.scss

@@ -1,64 +1,63 @@
-.q-grid{
+.q-grid {
-    height: fit-content;
+  height: fit-content;
-    .ag-theme-quartz {
+  .ag-theme-quartz {
-        outline: none;
+    outline: none;
-        border: none;
+    border: none;
-        --ag-border-radius: 0px;
+    --ag-border-radius: 0px;
-        --ag-wrapper-border-radius: 0px;
+    --ag-wrapper-border-radius: 0px;
-        --ag-header-height: 40px;
+    --ag-header-height: 40px;
-        --ag-header-foreground-color: white;
+    --ag-header-foreground-color: white;
-        --ag-header-background-color: #5D6A76;
+    --ag-header-background-color: #5d6a76;
-        // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
+    // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
-        --ag-header-cell-moving-background-color: #5D6A76;
+    --ag-header-cell-moving-background-color: #5d6a76;
-        .ag-root-wrapper{
+    .ag-root-wrapper {
-            outline: none;
+      outline: none;
-            border: none;
+      border: none;
-            
-        }
-        .ag-header{
-            border-bottom: none;
-            border-radius: 4px;
-        }
-        .ag-header-cell{
-            font-size: 13px;
-            color: #fff;
-        }
-        .ag-header-cell-label{
-            justify-content: center;
-        }
-        .ag-header-cell-resize{
-            &:after{
-                display: none;
-            }
-        }
-        .ag-row{
-            border-bottom: 1px solid #ECF0F4;
-            &:nth-child(2n){
-                background-color: #F7F9FA;
-            }
-            &.important_row{
-                background-color: #e7e7e7;
-            }
-        }
-        .ag-cell{
-            font-size: 13px;
-            color: #45576F;
-        }
-        .ag-icon-desc::before,
-        .ag-icon-asc::before,
-        .ag-icon-filter::before{
-            color: #fff;
-        }
     }
-    .copy-ico-wrap{
+    .ag-header {
-        display: flex;
+      border-bottom: none;
-        align-items: center;
+      border-radius: 4px;
-        .copy_ico{
-            width: 18px;
-            height: 18px;
-            background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
-            background-size: cover;
-            margin-left: 12px;
-        }
     }
-}
+    .ag-header-cell {
+      font-size: 13px;
+      color: #fff;
+    }
+    .ag-header-cell-label {
+      justify-content: center;
+    }
+    .ag-header-cell-resize {
+      &:after {
+        display: none;
+      }
+    }
+    .ag-row {
+      border-bottom: 1px solid #ecf0f4;
+      &:nth-child(2n) {
+        background-color: #f7f9fa;
+      }
+      &.important_row {
+        background-color: #e7e7e7;
+      }
+    }
+    .ag-cell {
+      font-size: 13px;
+      color: #45576f;
+    }
+    .ag-icon-desc::before,
+    .ag-icon-asc::before,
+    .ag-icon-filter::before {
+      color: #fff;
+    }
+  }
+  .copy-ico-wrap {
+    display: flex;
+    align-items: center;
+    .copy_ico {
+      width: 18px;
+      height: 18px;
+      background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center;
+      background-size: cover;
+      margin-left: 12px;
+    }
+  }
+}