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

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -1,5 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -44,12 +45,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
+                  <input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
-                    type="text"
-                    className="input-origin block"
-                    readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
-                    ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
-                  />
                 </div>
               </div>
             </div>

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -1,5 +1,8 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
 
 const UP_DOWN_TYPE = {
   UP: 'up',
@@ -9,6 +12,7 @@ const UP_DOWN_TYPE = {
 export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(UP_DOWN_TYPE.UP)
+  const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
     if (type === UP_DOWN_TYPE.UP) {
@@ -44,7 +48,7 @@ export default function Updown({ UP_DOWN_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
+                  <input type="text" className="input-origin block" readOnly={true} ref={UP_DOWN_REF.UP_INPUT_REF} />
                 </div>
               </div>
             </div>

src/components/management/Stuff.jsx

@@ -240,7 +240,9 @@ export default function Stuff() {
           schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
           startRow: (pageNo - 1) * pageSize + 1,
           endRow: pageNo * pageSize,
-          schSelSaleStoreId: '',
+          schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+            ? stuffSearchParams.schOtherSelSaleStoreId
+            : stuffSearchParams.schSelSaleStoreId,
           schSortType: stuffSearchParams.schSortType,
         }
 
@@ -256,12 +258,12 @@ export default function Stuff() {
           })
         }
         fetchData()
-      } else {
+      } else if (stuffSearchParams?.code === 'M') {
         //메인화면에서 진입
         const params = {
           saleStoreId: sessionState?.storeId,
           schObjectNo: stuffSearchParams.schObjectNo,
-          schAddress: '',
+          schAddress: 'dfdfdfdfdf',
           schObjectName: '',
           schSaleStoreName: '',
           schReceiveUser: '',
@@ -271,25 +273,31 @@ export default function Stuff() {
           schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
           startRow: (pageNo - 1) * pageSize + 1,
           endRow: pageNo * pageSize,
-          schSelSaleStoreId: '',
+          schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId
+            ? stuffSearchParams.schOtherSelSaleStoreId
+            : stuffSearchParams.schSelSaleStoreId,
           schSortType: 'R',
         }
+        setStuffSearch({
+          ...params,
+        })
 
-        async function fetchData() {
+        // async function fetchData() {
-          const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
+        //   const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
-          await get({
+        //   await get({
-            url: apiUrl,
+        //     url: apiUrl,
-          }).then((res) => {
+        //   }).then((res) => {
-            if (!isEmptyArray(res)) {
+        //     if (!isEmptyArray(res)) {
-              setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
+        //       setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-              setTotalCount(res[0].totCnt)
+        //       setTotalCount(res[0].totCnt)
-            }
+        //     }
-          })
+        //   })
-        }
+        // }
-        fetchData()
+        // fetchData()
       }
     }
-  }, [pageNo, sessionState])
+    // }, [pageNo, sessionState, stuffSearchParams])
+  }, [pageNo, stuffSearchParams])
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
@@ -298,6 +306,7 @@ export default function Stuff() {
       stuffSearchParams.schSortType = defaultSortType
 
       setPageNo(1)
+
       //조회를 눌렀을때
       async function fetchData() {
         const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
@@ -320,10 +329,13 @@ export default function Stuff() {
     let startRow = (1 - 1) * e.target.value + 1
     stuffSearchParams.startRow = startRow
     stuffSearchParams.endRow = 1 * e.target.value
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setPageSize(e.target.value)
     setStuffSearch({
-      ...stuffSearch,
+      ...stuffSearchParams,
-      code: 'S',
+      // code: 'P',
       startRow: startRow,
       endRow: 1 * e.target.value,
     })
@@ -348,6 +360,9 @@ export default function Stuff() {
     stuffSearchParams.endRow = 1 * pageSize
 
     stuffSearchParams.schSortType = e.target.value
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setDefaultSortType(e.target.value)
     setStuffSearch({
       ...stuffSearch,
@@ -358,7 +373,6 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-
     const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
@@ -382,7 +396,9 @@ export default function Stuff() {
   // 페이징 현재페이지 변경
   const handleChangePage = (page) => {
     stuffSearchParams.code = 'S'
-
+    stuffSearchParams.schSelSaleStoreId = stuffSearchParams?.schOtherSelSaleStoreId
+      ? stuffSearchParams.schOtherSelSaleStoreId
+      : stuffSearchParams.schSelSaleStoreId
     setStuffSearch({
       ...stuffSearch,
       code: 'S',
@@ -405,10 +421,7 @@ export default function Stuff() {
                 {getMessage('stuff.search.grid.all')}
                 <span>{convertNumberToPriceDecimal(totalCount)}</span>
               </li>
-              <li>
+              <li></li>
-                {/* {getMessage('stuff.search.grid.selected')} */}
-                {/* <span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span> */}
-              </li>
             </ul>
           </div>
           <div className="left-unit-box">

src/components/management/StuffSearchCondition.jsx

@@ -15,12 +15,14 @@ import SingleDatePicker from '../common/datepicker/SingleDatePicker'
 import { sessionStore } from '@/store/commonAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { searchState } from '@/store/boardAtom'
 export default function StuffSearchCondition() {
   const sessionState = useRecoilValue(sessionStore)
   const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { getMessage } = useMessage()
   const ref = useRef()
+  const ref2 = useRef()
   const { get } = useAxios(globalLocaleState)
 
   const objectNoRef = useRef(null)
@@ -59,6 +61,10 @@ export default function StuffSearchCondition() {
   const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
   const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
   const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
+
+  const [otherSaleStoreList, setOtherSaleStoreList] = useState([]) //1차점 이외 판매점목록
+  const [otherSaleStoreId, setOtherSaleStoreId] = useState('')
+
   // 조회
   const onSubmit = () => {
     let diff = dayjs(endDate).diff(startDate, 'day')
@@ -73,7 +79,7 @@ export default function StuffSearchCondition() {
         schAddress: address ? address : stuffSearch?.schAddress,
         schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
         schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
-        schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
+        schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
         schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
         schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
         schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@@ -90,7 +96,7 @@ export default function StuffSearchCondition() {
         schAddress: address ? address : '',
         schObjectName: objectName ? objectName : '',
         schDispCompanyName: dispCompanyName ? dispCompanyName : '',
-        schSelSaleStoreId: schSelSaleStoreId ? schSelSaleStoreId : '',
+        schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
         schReceiveUser: receiveUser ? receiveUser : '',
         schDateType: dateType,
         schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@@ -105,6 +111,7 @@ export default function StuffSearchCondition() {
 
   //초기화
   const resetRecoil = () => {
+    //T01아니면 자동완성 초기화 막기
     objectNoRef.current.value = ''
     saleStoreNameRef.current.value = ''
     addressRef.current.value = ''
@@ -121,49 +128,144 @@ export default function StuffSearchCondition() {
     setDateType('U')
     setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
-    setSchSelSaleStoreId('')
+    if (sessionState?.storeId === 'T01') {
-    handleClear() //판매대리점선택 자동완성 클리어
+      setSchSelSaleStoreId('')
-    resetStuffRecoil()
+      handleClear1() //판매대리점선택 자동완성 클리어
+      resetStuffRecoil()
+      setStuffSearch({
+        ...stuffSearch,
+        code: 'C',
+        schSelSaleStoreId: '',
+        schOtherSelSaleStoreId: '',
+      })
+    } else {
+      if (otherSaleStoreList.length > 1) {
+        handleClear2()
+        setOtherSaleStoreId('')
+        stuffSearch.schObjectNo = ''
+        stuffSearch.schDateType = 'U'
+      } else {
+        stuffSearch.schObjectNo = ''
+        stuffSearch.schDateType = 'U'
+      }
+    }
   }
 
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
-      // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
+      // storeId가 T01 이거나 storeLvl이 1차점일때만 판매대리점 선택 활성화
       let url
       if (sessionState?.storeId === 'T01') {
-        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        //T01일떄
-        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+        url = `/api/object/saleStore/${sessionState?.storeId}/firstList?userId=${sessionState?.userId}`
       } else {
-        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+        if (sessionState.storeLvl === '1') {
+          //T01아닌 1차점일때
+          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        } else {
+          url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=1&userId=${sessionState?.userId}`
+        }
       }
+
       get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           res.map((row) => {
             row.value = row.saleStoreId
             row.label = row.saleStoreName
           })
-          const allList = res
-          const favList = res.filter((row) => row.priority !== 'B')
 
-          setSchSelSaleStoreList(allList)
+          let allList
-          setFavoriteStoreList(favList)
+          let favList
-          setShowSaleStoreList(favList)
+          let otherList
+          if (sessionState?.storeId === 'T01') {
+            allList = res
+            allList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = res.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSchSelSaleStoreList(allList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+            setSchSelSaleStoreId(sessionState?.storeId)
+            setStuffSearch({
+              ...stuffSearch,
+              code: 'S',
+              schSelSaleStoreId: sessionState?.storeId,
+            })
+
+            //T01일때 2차 판매점 호출하기
+            url = `/api/object/saleStore/${sessionState?.storeId}/list?firstFlg=0&userId=${sessionState?.userId}`
+
+            get({ url: url }).then((res) => {
+              if (!isEmptyArray(res)) {
+                res.map((row) => {
+                  row.value = row.saleStoreId
+                  row.label = row.saleStoreName
+                })
+
+                otherList = res
+                setOtherSaleStoreList(otherList)
+              } else {
+                setOtherSaleStoreList([])
+              }
+            })
+          } else {
+            if (sessionState?.storeLvl === '1') {
+              allList = res
+              favList = res.filter((row) => row.priority !== 'B')
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setSchSelSaleStoreList(allList)
+              setFavoriteStoreList(allList)
+              setShowSaleStoreList(allList)
+              setSchSelSaleStoreId(allList[0].saleStoreId)
+
+              setOtherSaleStoreList(otherList)
+
+              setStuffSearch({
+                ...stuffSearch,
+                code: 'S',
+                schSelSaleStoreId: allList[0].saleStoreId,
+              })
+            } else {
+              //201X112 그냥2차점
+              //2차점인데 34들고있는애 202X217
+              setSchSelSaleStoreList(res)
+              setFavoriteStoreList(res)
+              setShowSaleStoreList(res)
+              setSchSelSaleStoreId(res[0].saleStoreId)
+              otherList = res.filter((row) => row.firstAgentYn === 'N')
+              setOtherSaleStoreList(otherList)
+
+              //선택한 2차점 세션으로 자동셋팅
+              setOtherSaleStoreId(sessionState?.storeId)
+              setStuffSearch({
+                ...stuffSearch,
+                code: 'S',
+                schSelSaleStoreId: otherList[0].saleStoreId,
+              })
+            }
+          }
         }
       })
     }
   }, [sessionState])
 
-  //초기화 눌렀을 때 자동완성도..
+  //초기화 눌렀을 때 1차판매점 자동완성도..
-  const handleClear = () => {
+  const handleClear1 = () => {
     if (ref.current) {
       ref.current.clearValue()
     }
   }
 
+  const handleClear2 = () => {
+    if (ref2.current) {
+      ref2.current.clearValue()
+    }
+  }
+
   //자동완성 인풋
   const onInputChange = (key) => {
     if (key !== '') {
       setShowSaleStoreList(schSelSaleStoreList)
+      setOtherSaleStoreList([])
     } else {
       setShowSaleStoreList(favoriteStoreList)
     }
@@ -172,15 +274,47 @@ export default function StuffSearchCondition() {
   //판매대리점 자동완성 변경
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
+      setOtherSaleStoreId('')
       setSchSelSaleStoreId(key.saleStoreId)
-      setStuffSearch({
+      stuffSearch.schSelSaleStoreId = key.saleStoreId
-        ...stuffSearch,
+      //T01아닌 1차점은 본인으로 디폴트셋팅이고 수정할수없어서 여기안옴
-        code: 'S',
+      //고른 1차점의 saleStoreId로 2차점 API호출하기
-        schSelSaleStoreId: key.saleStoreId,
+      let url = `/api/object/saleStore/${key.saleStoreId}/list?firstFlg=0&userId=${sessionState?.userId}`
+      let otherList
+      get({ url: url }).then((res) => {
+        if (!isEmptyArray(res)) {
+          res.map((row) => {
+            row.value = row.saleStoreId
+            row.label = row.saleStoreName
+          })
+
+          otherList = res
+          setOtherSaleStoreList(otherList)
+        } else {
+          setOtherSaleStoreList([])
+        }
       })
     } else {
+      //X누름
       setSchSelSaleStoreId('')
-      setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
+      stuffSearch.schSelSaleStoreId = ''
+
+      //2차점 판매점목록비우기
+      setOtherSaleStoreList([])
+    }
+  }
+
+  //2차점 자동완성 변경
+  const onSelectionChange2 = (key) => {
+    if (isObjectNotEmpty(key)) {
+      setOtherSaleStoreId(key.saleStoreId)
+      stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
+    } else {
+      //X누르면 검색조건에 1차점으로 셋팅
+      setOtherSaleStoreId('')
+      setSchSelSaleStoreId(schSelSaleStoreId)
+      stuffSearch.schOtherSelSaleStoreId = ''
+      stuffSearch.schSelSaleStoreId = schSelSaleStoreId
     }
   }
 
@@ -235,6 +369,8 @@ export default function StuffSearchCondition() {
               <col />
               <col style={{ width: '160px' }} />
               <col />
+              <col style={{ width: '160px' }} />
+              <col />
             </colgroup>
             <tbody>
               <tr>
@@ -283,6 +419,21 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
+                <th>{getMessage('stuff.search.schDispCompanyName')}</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      ref={dispCompanyNameRef}
+                      className="input-light"
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
+                      onChange={(e) => {
+                        setDispCompanyName(dispCompanyNameRef.current.value)
+                      }}
+                      onKeyUp={handleByOnKeyUp}
+                    />
+                  </div>
+                </td>
               </tr>
               <tr>
                 <th>{getMessage('stuff.search.schObjectName')}</th>
@@ -300,63 +451,6 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.schDispCompanyName')}</th>
-                <td>
-                  <div className="input-wrap">
-                    <input
-                      type="text"
-                      ref={dispCompanyNameRef}
-                      className="input-light"
-                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
-                      onChange={(e) => {
-                        setDispCompanyName(dispCompanyNameRef.current.value)
-                      }}
-                      onKeyUp={handleByOnKeyUp}
-                    />
-                  </div>
-                </td>
-                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
-                <td>
-                  <div className="select-wrap">
-                    {schSelSaleStoreList?.length > 0 && (
-                      <Select
-                        id="long-value-select1"
-                        instanceId="long-value-select1"
-                        className="react-select-custom"
-                        classNamePrefix="custom"
-                        placeholder="Select"
-                        ref={ref}
-                        // options={schSelSaleStoreList}
-                        options={showSaleStoreList}
-                        onInputChange={onInputChange}
-                        onChange={onSelectionChange}
-                        getOptionLabel={(x) => x.saleStoreName}
-                        getOptionValue={(x) => x.saleStoreId}
-                        // value={schSelSaleStoreList.filter(function (option) {
-                        value={showSaleStoreList.filter(function (option) {
-                          // console.log('자동완성 value::::', option)
-                          if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
-                            return false
-                          } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
-                            return option.saleStoreId === schSelSaleStoreId
-                          } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
-                            return option.saleStoreId === schSelSaleStoreId
-                          } else {
-                            if (stuffSearch?.schSelSaleStoreId !== '') {
-                              return option.saleStoreId === stuffSearch.schSelSaleStoreId
-                            } else {
-                              return false
-                            }
-                          }
-                        })}
-                        isDisabled={sessionState?.storeLvl === '1' ? false : true}
-                        isClearable={true}
-                      />
-                    )}
-                  </div>
-                </td>
-              </tr>
-              <tr>
                 <th>{getMessage('stuff.search.schReceiveUser')}</th>
                 <td>
                   <div className="input-wrap">
@@ -372,8 +466,130 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.period')}</th>
+                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
                 <td colSpan={3}>
+                  <div className="form-flex-wrap">
+                    <div className="select-wrap mr5" style={{ flex: 1 }}>
+                      {sessionState?.storeId === 'T01' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList}
+                          onInputChange={onInputChange}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isClearable={true}
+                        />
+                      )}
+                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl === '1' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList[0]}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={sessionState?.storeLvl !== '1' ? true : sessionState?.storeId !== 'T01' ? true : false}
+                          isClearable={false}
+                        />
+                      )}
+                      {sessionState?.storeId !== 'T01' && sessionState?.storeLvl !== '1' && (
+                        <Select
+                          id="long-value-select1"
+                          instanceId="long-value-select1"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          placeholder="Select"
+                          ref={ref}
+                          options={showSaleStoreList[0]}
+                          onChange={onSelectionChange}
+                          getOptionLabel={(x) => x.saleStoreName}
+                          getOptionValue={(x) => x.saleStoreId}
+                          value={showSaleStoreList.filter(function (option) {
+                            if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                              return false
+                            } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                              return option.saleStoreId === schSelSaleStoreId
+                            } else {
+                              if (stuffSearch?.schSelSaleStoreId !== '') {
+                                return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                              } else {
+                                return false
+                              }
+                            }
+                          })}
+                          isDisabled={true}
+                          isClearable={false}
+                        />
+                      )}
+                    </div>
+                    <div className="select-wrap" style={{ flex: 1 }}>
+                      <Select
+                        id="long-value-select2"
+                        instanceId="long-value-select2"
+                        className="react-select-custom"
+                        classNamePrefix="custom"
+                        placeholder="Select"
+                        ref={ref2}
+                        options={otherSaleStoreList}
+                        onChange={onSelectionChange2}
+                        getOptionLabel={(x) => x.saleStoreName}
+                        getOptionValue={(x) => x.saleStoreId}
+                        isDisabled={otherSaleStoreList.length > 1 ? false : true}
+                        isClearable={true}
+                        value={otherSaleStoreList.filter(function (option) {
+                          return option.saleStoreId === otherSaleStoreId
+                        })}
+                      />
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>{getMessage('stuff.search.period')}</th>
+                <td colSpan={7}>
                   <div className="form-flex-wrap">
                     <div className="radio-wrap mr10">
                       <div className="d-check-radio light mr10">

src/hooks/roofcover/useMovementSetting.js

@@ -2,7 +2,8 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { useEvent } from '@/hooks/useEvent'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -11,6 +12,7 @@ export function useMovementSetting(id) {
     UP_DOWN: 'updown', //형 올림내림
   }
   const canvas = useRecoilValue(canvasState)
+  const { initEvent, addCanvasMouseEventListener } = useEvent()
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const buttonType = [
@@ -18,6 +20,7 @@ export function useMovementSetting(id) {
     { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
   ]
   const [type, setType] = useState(TYPE.FLOW_LINE)
+  const typeRef = useRef(type)
 
   const FLOW_LINE_REF = {
     DOWN_LEFT_INPUT_REF: useRef(null),
@@ -33,7 +36,96 @@ export function useMovementSetting(id) {
     DOWN_RADIO_REF: useRef(null),
   }
 
-  const handleSave = () => {}
+  useEffect(() => {
+    typeRef.current = type
+  }, [type])
+
+  useEffect(() => {
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
+    wallLines.forEach((line) => {
+      line.set({ visible: false })
+    })
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.bringToFront()
+      line.set({ selectable: true })
+    })
+
+    canvas.renderAll()
+    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
+    return () => {
+      initEvent()
+      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+      wallLines.forEach((line) => {
+        line.set({ visible: true })
+      })
+      canvas.renderAll()
+    }
+  }, [])
+
+  const mouseMoveEvent = (e) => {
+    if (typeRef.current === TYPE.FLOW_LINE) {
+      flowLineEvent(e)
+    } else {
+      updownEvent(e)
+    }
+  }
+  const flowLineEvent = (e) => {
+    console.log('flow')
+  }
+
+  const updownEvent = (e) => {
+    const target = canvas.getActiveObject()
+    if (!target) {
+      return
+    }
+    const direction = target.direction
+    const { top: targetTop, left: targetLeft } = target
+    const currentX = canvas.getPointer(e.e).x
+    const currentY = Math.floor(canvas.getPointer(e.e).y)
+
+    if (direction === 'left' || direction === 'right') {
+      if (targetTop > currentY) {
+        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
+        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      } else {
+        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
+      }
+    } else {
+      if (targetLeft > currentX) {
+        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
+        UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      } else {
+        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
+        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+
+        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+      }
+    }
+
+    canvas?.renderAll()
+  }
+
+  const getOnlyDecimal = function (_number, _length) {
+    let result
+
+    result = _number % 1
+
+    result = Number(result.toFixed(_length))
+
+    return result * 10
+  }
+
+  const handleSave = () => {
+    closePopup(id)
+  }
 
   return {
     TYPE,

src/store/stuffAtom.js

@@ -14,7 +14,8 @@ export const stuffSearchState = atom({
     schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'), //시작일
     schToDt: dayjs(new Date()).format('YYYY-MM-DD'), //종료일
     code: 'S',
-    schSelSaleStoreId: '', //판매대리점 선택
+    schSelSaleStoreId: '', //1차판매대리점 선택
+    schOtherSelSaleStoreId: '', //1차 이외 판매대리점 선택
     startRow: 1,
     endRow: 100,
     schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)