물건관리

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

@@ -1,18 +1,45 @@
 import React from 'react'
-import Hero from '@/components/Hero'
-import StuffDetail from '@/components/management/StuffDetail'
 import Link from 'next/link'
+import Image from 'next/image'
+import '@/styles/contents.scss'
+import StuffHeader from '@/components/management/StuffHeader'
+import StuffDetail from '@/components/management/StuffDetail'
 export default function ManagementStuffDetailPage() {
   return (
     <>
-      <div className="pt-48 flex justify-left">
+      <div className="sub-header">
-        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+        <div className="sub-header-inner">
-        <Link href="/management/plan">
+          <ul className="sub-header-title-wrap">
-          <h1 className="text-4xl archivo-black-regular">도면작성</h1>
+            <li className="title-item">
-        </Link>
+              <Link className="sub-header-title" href={'#'}>
+                商品情報
+              </Link>
+            </li>
+          </ul>
+          <ul className="sub-header-location">
+            <li className="location-item">
+              <span className="home">
+                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+              </span>
+            </li>
+            <li className="location-item">
+              <span>物品及び図面管理</span>
+            </li>
+            <li className="location-item">
+              <span>商品情報</span>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div className="m2">
+      <div className="sub-content">
-        <StuffDetail />
+        <div className="sub-content-inner">
+          <div className="sub-content-box">
+            <StuffHeader />
+          </div>
+          <div className="sub-content-box">
+            <StuffDetail />
+          </div>
+        </div>
       </div>
     </>
   )

src/app/management/stuff/page.jsx

@@ -1,20 +1,40 @@
 import StuffSearchCondition from '@/components/management/StuffSearchCondition'
 import Stuff from '@/components/management/Stuff'
 import { initCheck } from '@/util/session-util'
-import Hero from '@/components/Hero'
+import Image from 'next/image'
+import '@/styles/contents.scss'
 export default async function ManagementStuffPage() {
   await initCheck()
 
   return (
     <>
-      <Hero title="물건현황" />
+      <div className="sub-header">
-      <div>
+        <div className="sub-header-inner">
-        <div className="m2">
+          <h1 className="sub-header-title">物品及び図面管理</h1>
-          <StuffSearchCondition />
+          <ul className="sub-header-location">
+            <li className="location-item">
+              <span className="home">
+                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+              </span>
+            </li>
+            <li className="location-item">
+              <span>物品及び図面管理</span>
+            </li>
+            <li className="location-item">
+              <span>新規物件登録</span>
+            </li>
+          </ul>
         </div>
       </div>
-      <div className="flex flex-col justify-center my-8 pt-20">
+      <div className="sub-content">
-        <Stuff />
+        <div className="sub-content-inner">
+          <div className="sub-content-box">
+            <StuffSearchCondition />
+          </div>
+          <div className="sub-content-box">
+            <Stuff />
+          </div>
+        </div>
       </div>
     </>
   )

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

@@ -1,14 +1,41 @@
 import React from 'react'
-import Hero from '@/components/Hero'
+import Link from 'next/link'
+import Image from 'next/image'
+import '@/styles/contents.scss'
 import StuffDetail from '@/components/management/StuffDetail'
 export default function ManagementStuffDetailPage() {
   return (
     <>
-      <div className="pt-48 flex justify-left">
+      <div className="sub-header">
-        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+        <div className="sub-header-inner">
+          <ul className="sub-header-title-wrap">
+            <li className="title-item">
+              <Link className="sub-header-title" href={'#'}>
+                商品情報
+              </Link>
+            </li>
+          </ul>
+          <ul className="sub-header-location">
+            <li className="location-item">
+              <span className="home">
+                <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
+              </span>
+            </li>
+            <li className="location-item">
+              <span>物品及び図面管理</span>
+            </li>
+            <li className="location-item">
+              <span>商品情報</span>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div className="m2">
+      <div className="sub-content">
-        <StuffDetail />
+        <div className="sub-content-inner">
+          <div className="sub-content-box">
+            <StuffDetail />
+          </div>
+        </div>
       </div>
     </>
   )

src/components/management/Stuff.jsx

@@ -12,7 +12,7 @@ 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'
 export default function Stuff() {
   const stuffSearchParams = useRecoilValue(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@@ -20,7 +20,9 @@ export default function Stuff() {
   const [curPage, setCurPage] = useState(1) //현재 페이지 번호
   const [defaultSize, setDefaultSize] = useState(100) //페이지 당 게시물 수
   const [defaultSortType, setDefaultSortType] = useState('R')
-  const { get } = useAxios()
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get } = useAxios(globalLocaleState)
   const gridRef = useRef()
 
   const [gridCount, setGridCount] = useState(0)
@@ -364,50 +366,46 @@ export default function Stuff() {
   }
   return (
     <>
-      <div className="text-2xl">
+      {/* 퍼블시작 */}
-        물건목록
+      <div className="sub-table-box">
-        <span>
+        <div className="table-box-title-wrap">
-          전체 : {gridCount} // 선택 : {selectedRowDataCount}
+          <div className="title-wrap">
-        </span>
+            <h3>물건목록</h3>
-        <select className="select" onChange={onChangePerPage}>
+            <ul className="info-wrap">
-          <option value="100">100</option>
+              <li>
-          <option value="200">200</option>
+                전체
-          <option value="300">300</option>
+                <span>{gridCount}</span>
-        </select>
+              </li>
-        <select className="select" onChange={onChangeSortType}>
+              <li>
-          <option value="R">최근 등록일</option>
+                선택
-          <option value="U">최근 수정일</option>
+                <span className="red">{selectedRowDataCount}</span>
-        </select>
+              </li>
-        <div align="right">
+            </ul>
-          {/* <Button
+          </div>
-            color="primary"
+          <div className="left-unit-box">
-            onPress={() => {
+            <div className="select-box mr5" style={{ width: '110px' }}>
-              fnDeleteRowData(selectedRowData)
+              <select className="select-light black" name="" id="" onChange={onChangeSortType}>
-            }}
+                <option value="R">최근 등록일</option>
-          >
+                <option value="U">최근 수정일</option>
-            물건삭제
+              </select>
-          </Button> */}
+            </div>
-          {/* <Button
+            <div className="select-box" style={{ width: '80px' }}>
-            color="primary"
+              <select className="select-light black" name="" id="" onChange={onChangeSortType}>
-            onPress={() => {
+                <option value="100">100</option>
-              addRowItems()
+                <option value="200">200</option>
-            }}
+                <option value="300">300</option>
-          >
+              </select>
-            행추가
+            </div>
-          </Button>
+          </div>
-          <Button
-            color="primary"
-            onPress={() => {
-              removeRowItems()
-            }}
-          >
-            행삭제
-          </Button> */}
         </div>
-        <div style={{ width: '100%', height: '100%' }}>
+        <div className="grid-table-wrap">
-          <StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
+          <div className="q-grid">
+            <StuffQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} getCellDoubleClicked={getCellDoubleClicked} gridRef={gridRef} />
+            <div className="pagination-wrap">페이징 컴포넌트예정</div>
+          </div>
         </div>
       </div>
+      {/* 퍼블종료 */}
     </>
   )
 }

src/components/management/StuffDetail.jsx

@@ -4,16 +4,20 @@ import React, { useState, useEffect } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem, Select, SelectItem, Checkbox, Textarea, button } from '@nextui-org/react'
 import Link from 'next/link'
-import { del, get, post } from '@/lib/Axios'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
 import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
 import dayjs from 'dayjs'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
+import { useRecoilState, useRecoilValue } from 'recoil'
 export default function StuffDetail() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { getMessage } = useMessage()
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
 
+  const { get, post, del } = useAxios(globalLocaleState)
   //form
   const formInitValue = {
     // 물건번호 T...(임시) R...(진짜)
@@ -63,7 +67,7 @@ export default function StuffDetail() {
 
   useEffect(() => {
     if (objectNo) {
-      console.log('수정화면')
+      //console.log('수정화면')
       setEditMode('EDIT')
 
       if (objectNo.substring(0, 1) === 'R') {
@@ -90,7 +94,7 @@ export default function StuffDetail() {
           //1차점 : X167
           get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
             if (!isEmptyArray(res)) {
-              console.log('판매점 결과:::::', res)
+              // console.log('판매점 결과:::::', res)
               setSaleStoreList(res)
               //1차 판매점 자동완성 값 셋팅
               form.setValue('saleStoreId', res[0].saleStoreId)
@@ -99,9 +103,6 @@ export default function StuffDetail() {
               setOtherSaleStoreList([])
             }
           })
-        } else {
-          alert('삭제된 물건입니다')
-          router.push('/management/stuff')
         }
       })
     } else {
@@ -385,6 +386,312 @@ export default function StuffDetail() {
   return (
     <>
       {(editMode === 'NEW' && (
+        <form onSubmit={handleSubmit(onValid)}>
+          <div className="sub-table-box">
+            <div className="promise-gudie">
+              <span className="important">*</span> 필수 입력항목
+            </div>
+            <div className="infomation-table">
+              <table>
+                <colgroup>
+                  <col style={{ width: '200px' }} />
+                  <col />
+                </colgroup>
+                <tbody>
+                  <tr>
+                    <th>
+                      담당자 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="input-wrap" style={{ width: '500px' }}>
+                        <input type="text" className="input-light" {...form.register('dispCompanyName')} />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      물건구분/물건명 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="d-check-radio light mr10">
+                          <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
+                          <label htmlFor="objectStatus0">신축</label>
+                        </div>
+                        <div className="d-check-radio light mr10">
+                          <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
+                          <label htmlFor="objectStatus0">기축</label>
+                        </div>
+                        <div className="input-wrap mr5" style={{ width: '545px' }}>
+                          <input type="text" className="input-light" {...form.register('objectName')} />
+                        </div>
+                        <div className="select-wrap" style={{ width: '120px' }}>
+                          <select name="objectNameOmit" {...register('objectNameOmit')}>
+                            <option value="">경칭공통코드선택</option>
+                            <option value="11">경칭11</option>
+                            <option value="22">경칭22</option>
+                            <option value="33">경칭33</option>
+                          </select>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>물건명 후리가나</th>
+                    <td>
+                      <div className="input-wrap" style={{ width: '789px' }}>
+                        <input type="text" className="input-light" {...form.register('objectNameKana')} />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      <div className="flx-box">
+                        <div className="title">
+                          1차 판매점명 / 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>
+                        </div>
+                        <div className="input-wrap" style={{ width: '216px' }}>
+                          <input
+                            type="text"
+                            className="input-light"
+                            value={form.watch('saleStoreName')}
+                            {...form.register('saleStoreName')}
+                            readOnly
+                          />
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      <div className="flx-box">
+                        <div className="title">
+                          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>
+                        </div>
+                      </div>
+                      <div className="input-wrap" style={{ width: '216px' }}>
+                        <input type="text" className="input-ligth" readOnly defaultValue={'선택한2차점 판매점명찍기 예정'} />
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      우편번호 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="input-wrap mr5" style={{ width: '200px' }}>
+                          <input
+                            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>
+                        <div className="guide">*우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오</div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      도도부현 / 주소 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="input-wrap mr5" style={{ width: '200px' }}>
+                          {/* {prefCodeList?.length > 0 && (
+                            <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
+                              {prefCodeList.map((row) => {
+                                return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
+                              })}
+                            </Select>
+                          )} */}
+                        </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>
+                      발전량시뮬레이션지역 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="select-wrap" style={{ width: '200px' }}></div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      기준풍속 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                          <select className="select-light" name="windSpeed" {...register('windSpeed')}>
+                            <option value="">기준풍속공통코드?</option>
+                            <option value="30">30</option>
+                            <option value="50">50</option>
+                            <option value="60">60</option>
+                          </select>
+                        </div>
+                        <span>m/s이하</span>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      수직적설량 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="select-wrap mr10" style={{ width: '200px' }}></div>
+                        <span className="mr10">cm</span>
+                        <div className="d-check-box light">
+                          <input type="checkbox" />
+                          <label htmlFor="">한랭지대책시행</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      면조도구분 <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" />
+                          <label htmlFor="">염해지역용아이템사용</label>
+                        </div>
+                        <div className="tooltips"></div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      설치높이 <span className="important">*</span>
+                    </th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="select-wrap mr10" style={{ width: '200px' }}>
+                          <select className="select-light" name="installHeight" {...register('installHeight')}>
+                            <option value="">설치높이공코</option>
+                            <option value="11">111</option>
+                            <option value="22">222</option>
+                            <option value="33">333</option>
+                          </select>
+                        </div>
+                        <span>m</span>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>계약조건</th>
+                    <td>
+                      <div className="flx-box">
+                        <div className="d-check-radio light mr10">
+                          <input type="radio" name="powerConTerms" value="0" id="powerConTerms0" {...form.register('powerConTerms')} />
+                          <label htmlFor="powerConTerms0">잉여</label>
+                        </div>
+                        <div className="d-check-radio light mr10">
+                          <input type="radio" name="powerConTerms" value="1" id="powerConTerms1" {...form.register('powerConTerms')} />
+                          <label htmlFor="powerConTerms1">전량</label>
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>메모</th>
+                    <td>
+                      <div className="input-wrap">
+                        <input type="text" className="input-light" />
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="sub-table-footer">
+              {!isFormValid ? (
+                <button className="btn-origin grey mr5" onClick={onTempSave}>
+                  New화면 임시저장
+                </button>
+              ) : (
+                <button type="submit" className="btn-origin navy mr5">
+                  NEW 화면 저장
+                </button>
+              )}
+              <Link href="/management/stuff">
+                <button type="button" className="btn-origin grey">
+                  NEW화면 물건목록이동
+                </button>
+              </Link>
+            </div>
+          </div>
+        </form>
+      )) || (
+        <>
+          {objectNo.substring(0, 1) === 'R' ? (
+            <>
+              <Link href="/management/stuff">
+                <button type="button" className="btn-origin grey">
+                  R상세:물건목록
+                </button>
+              </Link>
+              <button type="submit" className="btn-origin navy mr5">
+                R상세:저장
+              </button>
+              <button type="submit" className="btn-origin navy mr5" onClick={onDelete}>
+                R상세:물건삭제
+              </button>
+            </>
+          ) : (
+            <>
+              <Link href="/management/stuff">
+                <button type="button" className="btn-origin grey">
+                  T상세:물건목록
+                </button>
+              </Link>
+              <button type="submit" className="btn-origin navy mr5">
+                T상세:저장
+              </button>
+            </>
+          )}
+        </>
+      )}
+      {/* {(editMode === 'NEW' && (
         <form onSubmit={handleSubmit(onValid)}>
           <div>
             <div>(*필수 입력항목)</div>
@@ -610,7 +917,7 @@ export default function StuffDetail() {
             </>
           )}
         </>
-      )}
+      )} */}
     </>
   )
 }

src/components/management/StuffHeader.jsx

@@ -0,0 +1,51 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useAxios } from '@/hooks/useAxios'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRecoilValue } from 'recoil'
+export default function StuffHeader() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get } = useAxios(globalLocaleState)
+  const [headerData, setHeaderData] = useState({})
+
+  useEffect(() => {
+    get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
+      //console.log('res::', res)
+      if (res != null && res != '') {
+        console.log('헤더상세::::::::::', res)
+        setHeaderData(res)
+      } else {
+        alert('삭제된 물건입니다')
+        router.push('/management/stuff')
+      }
+    })
+  }, [objectNo])
+
+  return (
+    <div className="infomation-box-wrap">
+      <div className="sub-table-box">
+        <div className="info-title">물건번호</div>
+        <div className="info-inner">
+          {headerData.objectNo} <button className="copy-ico"></button>
+        </div>
+      </div>
+      <div className="sub-table-box">
+        <div className="info-title">사양확정일</div>
+        <div className="info-inner">{headerData.specificationConfirmDate}</div>
+      </div>
+      <div className="sub-table-box">
+        <div className="info-title">갱신일시</div>
+        <div className="info-inner">{headerData.lastEditDatetime}</div>
+      </div>
+      <div className="sub-table-box">
+        <div className="info-title">등록일</div>
+        <div className="info-inner">{headerData.createDatetime}</div>
+      </div>
+    </div>
+  )
+}

src/components/management/StuffSearchCondition.jsx

@@ -2,25 +2,36 @@
 
 import React, { useEffect } from 'react'
 import { useState } from 'react'
-import { Input, RadioGroup, Radio, Button, Autocomplete, AutocompleteItem } from '@nextui-org/react'
+import { Autocomplete, AutocompleteItem } from '@nextui-org/react'
+import { useAxios } from '@/hooks/useAxios'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { globalLocaleStore } from '@/store/localeAtom'
+
 import RangeDatePicker from '@/components/common/datepicker/RangeDatePicker'
-import { useRecoilState, useResetRecoilState } from 'recoil'
 import { stuffSearchState } from '@/store/stuffAtom'
 import { isEmptyArray } from '@/util/common-utils'
-import { get } from '@/lib/Axios'
 import dayjs from 'dayjs'
 import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
 dayjs.extend(isLeapYear)
 import Link from 'next/link'
+import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 export default function StuffSearchCondition() {
-  //달력 props 관련 날짜 셋팅
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const [dateRange, setDateRange] = useState([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
-  const [startRangeDate, endRangeDate] = dateRange
 
-  const rangeDatePickerProps = {
+  const { get } = useAxios(globalLocaleState)
-    startRangeDate, //시작일
+
-    endRangeDate, //종료일
+  //달력 props 관련 날짜 셋팅
-    setDateRange,
+  const [startDate, setStartDate] = useState(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
+  const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
+
+  const rangeDatePickerProps1 = {
+    startDate, //시작일
+    setStartDate,
+  }
+
+  const rangeDatePickerProps2 = {
+    startDate: endDate, //종료일
+    setStartDate: setEndDate,
   }
 
   //여기서 선택한 검색조건들을 recoil로 관리
@@ -40,7 +51,7 @@ export default function StuffSearchCondition() {
   const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
   // 조회
   const onSubmit = () => {
-    let diff = dayjs(endRangeDate).diff(startRangeDate, 'day')
+    let diff = dayjs(endDate).diff(startDate, 'day')
     if (diff > 366) {
       return alert('최대1년 조회 가능합니다.')
     }
@@ -55,8 +66,8 @@ export default function StuffSearchCondition() {
       schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
       schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
       schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
-      schFromDt: dayjs(startRangeDate).format('YYYY-MM-DD'),
+      schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
-      schToDt: dayjs(endRangeDate).format('YYYY-MM-DD'),
+      schToDt: dayjs(endDate).format('YYYY-MM-DD'),
       code: 'E',
       schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
       startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
@@ -76,7 +87,8 @@ export default function StuffSearchCondition() {
     setReceiveUser('')
     setDispCompanyName('')
     setDateType('U')
-    setDateRange([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
+    setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
+    setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
     setSchSelSaleStoreId('')
     resetStuffRecoil()
   }
@@ -102,23 +114,207 @@ export default function StuffSearchCondition() {
     }
   }
 
-  //x로 날짜 비웠을때 기본값으로 셋팅
   useEffect(() => {
-    if (!startRangeDate && !endRangeDate) {
+    setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
-      setDateRange([dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')])
+    setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
-    }
-  }, [startRangeDate, endRangeDate])
-
-  useEffect(() => {
-    setDateRange([
-      stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
-      stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'),
-    ])
   }, [stuffSearch])
 
   return (
     <>
-      <div align="right">
+      {/* 퍼블적용시작 */}
+      <div className="sub-table-box">
+        <div className="table-box-title-wrap">
+          <div className="title-wrap">
+            <h3>물건현황</h3>
+          </div>
+          <div className="left-unit-box">
+            <Link href="/management/stuff/tempdetail">
+              <button type="button" className="btn-origin navy mr5">
+                물건신규등록버튼
+              </button>
+            </Link>
+            <button type="button" className="btn-origin navy mr5" onClick={onSubmit}>
+              조회
+            </button>
+            <button type="button" className="btn-origin grey" onClick={resetRecoil}>
+              초기화
+            </button>
+          </div>
+        </div>
+        <div className="common-table">
+          <table>
+            <colgroup>
+              <col style={{ width: '160px' }} />
+              <col />
+              <col style={{ width: '160px' }} />
+              <col />
+              <col style={{ width: '160px' }} />
+              <col />
+            </colgroup>
+            <tbody>
+              <tr>
+                <th>물건번호</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="물건번호 입력"
+                      value={stuffSearch?.code === 'E' ? stuffSearch.schObjectNo : objectNo}
+                      onChange={(e) => {
+                        setObjectNo(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+                <th>판매대리점명</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="판매대리점ID 입력"
+                      value={stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId}
+                      onChange={(e) => {
+                        setSaleStoreId(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreId: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+                <th>물건주소</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="물건주소 입력"
+                      value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
+                      onChange={(e) => {
+                        setAddress(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>물건명</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="물건명 입력"
+                      value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
+                      onChange={(e) => {
+                        setobjectName(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+                <th>견적처</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="견적처 입력"
+                      value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
+                      onChange={(e) => {
+                        setDispCompanyName(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+                <th>판매대리점 선택</th>
+                <td>
+                  {/* <div className="select-wrap">
+                    <select className="select-light" name="" id=""></select>
+                  </div> */}
+                  {schSelSaleStoreList?.length > 0 && (
+                    <Autocomplete
+                      className="max-w-xs"
+                      label="판매대리점선택"
+                      defaultItems={schSelSaleStoreList}
+                      selectedKey={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
+                      onSelectionChange={onSelectionChange}
+                    >
+                      {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
+                    </Autocomplete>
+                  )}
+                </td>
+              </tr>
+              <tr>
+                <th>담당자</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      className="input-light"
+                      placeholder="담당자 입력"
+                      value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
+                      onChange={(e) => {
+                        setReceiveUser(e.target.value)
+                        setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
+                      }}
+                    />
+                  </div>
+                </td>
+                <th>기간검색</th>
+                <td colSpan={3}>
+                  <div className="form-flex-wrap">
+                    <div className="radio-wrap mr10">
+                      <div className="d-check-radio light mr10">
+                        <input
+                          type="radio"
+                          name="radio_ptype"
+                          id="radio_u"
+                          checked={stuffSearch?.schDateType === 'U' ? true : false}
+                          value={'U'}
+                          onChange={(e) => {
+                            setDateType(e.target.value)
+                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                          }}
+                        />
+                        <label htmlFor="radio_u">갱신일</label>
+                      </div>
+                      <div className="d-check-radio light">
+                        <input
+                          type="radio"
+                          name="radio_ptype"
+                          id="radio_r"
+                          checked={stuffSearch?.schDateType === 'R' ? true : false}
+                          value={'R'}
+                          onChange={(e) => {
+                            setDateType(e.target.value)
+                            setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
+                          }}
+                        />
+                        <label htmlFor="ra05">등록일</label>
+                      </div>
+                    </div>
+                    <div className="date-picker-wrap">
+                      <div className="date-picker" style={{ flex: 1 }}>
+                        <SingleDatePicker {...rangeDatePickerProps1} />
+                      </div>
+                      <span> ~ </span>
+                      <div className="date-picker" style={{ flex: 1 }}>
+                        <SingleDatePicker {...rangeDatePickerProps2} />
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      {/* 퍼블적용끝 */}
+      {/* <div align="right">
         <Link href="/management/stuff/tempdetail">
           <button type="button">물건신규등록</button>
         </Link>
@@ -300,7 +496,7 @@ export default function StuffSearchCondition() {
               )
             }
           })}
-      </div>
+      </div> */}
     </>
   )
 }