Merge branch 'dev' into dev-yj

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({
-        async function fetchData() {
+          ...params,
-          const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
-          await get({
-            url: apiUrl,
-          }).then((res) => {
-            if (!isEmptyArray(res)) {
-              setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
-              setTotalCount(res[0].totCnt)
-            }
         })
-        }
+
-        fetchData()
+        // async function fetchData() {
+        //   const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
+        //   await get({
+        //     url: apiUrl,
+        //   }).then((res) => {
+        //     if (!isEmptyArray(res)) {
+        //       setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
+        //       setTotalCount(res[0].totCnt)
+        //     }
+        //   })
+        // }
+        // 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'))
+    if (sessionState?.storeId === 'T01') {
       setSchSelSaleStoreId('')
-    handleClear() //판매대리점선택 자동완성 클리어
+      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')
 
+          let allList
+          let 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:최근수정일)

src/styles/_contents.scss

@@ -26,14 +26,14 @@
   min-width: 1280px;
   padding-bottom: 0;
   background-color: #383838;
-    transition: padding .17s ease-in-out;
+  transition: padding 0.17s ease-in-out;
   z-index: 999;
   .canvas-menu-inner {
     position: relative;
     display: flex;
     align-items: center;
     padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
+    background-color: #2c2c2c;
     height: 46.8px;
     z-index: 999;
     .canvas-menu-list {
@@ -53,7 +53,7 @@
           font-weight: 600;
           padding: 15px 20px;
           opacity: 0.55;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           .menu-icon {
             display: block;
             width: 14px;
@@ -62,13 +62,27 @@
             background-position: center;
             background-size: contain;
             margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+            &.con00 {
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+              background-image: url(/static/images/canvas/menu_icon00.svg);
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+            }
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+            &.con01 {
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+              background-image: url(/static/images/canvas/menu_icon01.svg);
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+            }
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
           }
         }
         &.active {
@@ -100,25 +114,43 @@
           width: 30px;
           height: 30px;
           border-radius: 2px;
-                    background-color: #3D3D3D;
+          background-color: #3d3d3d;
           background-position: center;
           background-repeat: no-repeat;
           background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+          &.btn01 {
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+          }
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+          &.btn02 {
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+          }
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+          &.btn03 {
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
           &:hover {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
           &.active {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -134,10 +166,18 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
           }
           .name {
             font-size: 12px;
@@ -167,16 +207,16 @@
         button {
           margin-left: auto;
           height: 100%;
-                    background-color: #4B4B4B;
+          background-color: #4b4b4b;
           font-size: 13px;
           font-weight: 400;
           color: #fff;
           padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
         }
         &.on {
           button {
-                        background-color: #1083E3;
+            background-color: #1083e3;
           }
         }
       }
@@ -185,7 +225,7 @@
         align-items: center;
         justify-content: center;
         gap: 10px;
-                background-color: #3D3D3D;
+        background-color: #3d3d3d;
         border-radius: 2px;
         width: 100px;
         height: 30px;
@@ -218,7 +258,7 @@
     background-color: #383838;
     width: 100%;
     height: 50px;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
     .canvas-depth2-inner {
       display: flex;
       align-items: center;
@@ -270,7 +310,7 @@
           align-items: center;
           margin-right: 34px;
           height: 100%;
-                    transition: all .17s ease-in-out;
+          transition: all 0.17s ease-in-out;
           button {
             position: relative;
             font-size: 12px;
@@ -310,7 +350,7 @@
 // canvas-layout
 .canvas-content {
   padding-top: 46.8px;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   .canvas-frame {
     height: calc(100vh - 129.3px);
   }
@@ -328,11 +368,11 @@
     top: 92.8px;
     left: 0;
     display: flex;
-        background-color: #1C1C1C;
+    background-color: #1c1c1c;
     border-top: 1px solid #000;
     width: 100%;
     min-width: 1280px;
-        transition: all .17s ease-in-out;
+    transition: all 0.17s ease-in-out;
     z-index: 99;
     &.active {
       top: calc(92.8px + 50px);
@@ -348,14 +388,14 @@
         padding: 9.6px 20px;
         border-right: 1px solid #000;
         min-width: 0;
-                transition: all .17s ease-in-out;
+        transition: all 0.17s ease-in-out;
         span {
           display: flex;
           align-items: center;
           width: 100%;
           font-size: 12px;
           font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
+          color: #aaa;
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
@@ -393,9 +433,9 @@
       justify-content: center;
       width: 45px;
       padding: 13.5px 0;
-            background-color: #1C1C1C;
+      background-color: #1c1c1c;
       border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
+      transition: all 0.17s ease-in-out;
       span {
         display: block;
         width: 9px;
@@ -413,9 +453,9 @@
 .canvas-frame {
   position: relative;
   // height: calc(100% - 36.5px);
-    background-color: #F4F4F7;
+  background-color: #f4f4f7;
   overflow: auto;
-    transition: all .17s ease-in-out;
+  transition: all 0.17s ease-in-out;
   // &::-webkit-scrollbar {
   //     width: 10px;
   //     height: 10px;
@@ -450,7 +490,7 @@
   min-width: 1280px;
   height: 46px;
   border-bottom: 1px solid #000;
-    background: #2C2C2C;
+  background: #2c2c2c;
   z-index: 999;
   .sub-header-inner {
     display: flex;
@@ -473,7 +513,9 @@
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
           }
         }
         &:after {
@@ -484,7 +526,7 @@
           transform: translateY(-50%);
           width: 1px;
           height: 16px;
-                    background-color: #D9D9D9;
+          background-color: #d9d9d9;
         }
         &:first-child {
           padding-left: 0;
@@ -514,7 +556,7 @@
         span {
           display: flex;
           font-size: 12px;
-                    color: #AAA;
+          color: #aaa;
           font-weight: normal;
           cursor: default;
         }
@@ -572,8 +614,8 @@
 .sub-table-box {
   padding: 20px;
   border-radius: 6px;
-    border: 1px solid #E9EAED;
+  border: 1px solid #e9eaed;
-    background: #FFF;
+  background: #fff;
   box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
   .table-box-title-wrap {
     display: flex;
@@ -596,7 +638,7 @@
         position: relative;
         font-size: 15px;
         font-weight: 600;
-                color: #1083E3;
+        color: #1083e3;
         padding-left: 10px;
         &::before {
           content: '';
@@ -606,7 +648,7 @@
           transform: translateY(-50%);
           width: 1px;
           height: 11px;
-                    background-color: #D9D9D9;
+          background-color: #d9d9d9;
         }
       }
       .option {
@@ -627,7 +669,7 @@
           span {
             font-weight: 600;
             &.red {
-                            color: #E23D70;
+              color: #e23d70;
             }
           }
           &:after {
@@ -638,10 +680,17 @@
             transform: translateY(-50%);
             width: 1px;
             height: 11px;
-                        background-color: #D9D9D9;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
+            }
           }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
         }
       }
     }
@@ -734,7 +783,7 @@
       width: 105px;
       height: 30px;
       line-height: 30px;
-            background-color: #F4F4F7;
+      background-color: #f4f4f7;
       border-radius: 100px;
       text-align: center;
       font-size: 13px;
@@ -749,12 +798,12 @@
       &.blue {
         font-size: 16px;
         font-weight: 700;
-                color: #1083E3;
+        color: #1083e3;
       }
       &.red {
         font-size: 16px;
         font-weight: 700;
-                color: #D72A2A;
+        color: #d72a2a;
       }
     }
   }
@@ -768,11 +817,11 @@
   padding: 10px;
   .btn-area {
     padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
+    border-bottom: 1px solid #ecf0f4;
     .file-upload {
       display: inline-block;
       height: 30px;
-            background-color: #94A0AD;
+      background-color: #94a0ad;
       padding: 0 10px;
       border-radius: 2px;
       font-size: 13px;
@@ -780,9 +829,9 @@
       color: #fff;
       font-weight: 500;
       cursor: pointer;
-            transition: background .15s ease-in-out;
+      transition: background 0.15s ease-in-out;
       &:hover {
-                background-color: #607F9A;
+        background-color: #607f9a;
       }
     }
   }
@@ -806,7 +855,7 @@
       span {
         position: relative;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         white-space: nowrap;
         padding-right: 55px;
@@ -831,13 +880,13 @@
 .special-note-check-wrap {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
-    border: 1px solid #ECF0F4;
+  border: 1px solid #ecf0f4;
   border-radius: 3px;
   margin-bottom: 30px;
   .special-note-check-item {
     padding: 14px 10px;
-        border-right: 1px solid #ECF0F4;
+    border-right: 1px solid #ecf0f4;
-        border-top: 1px solid #ECF0F4;
+    border-top: 1px solid #ecf0f4;
     &:nth-child(5n) {
       border-right: none;
     }
@@ -845,13 +894,13 @@
       border-top: none;
     }
     &.act {
-            background-color: #F7F9FA;
+      background-color: #f7f9fa;
     }
   }
 }
 
 .calculation-estimate {
-    border: 1px solid #ECF0F4;
+  border: 1px solid #ecf0f4;
   border-radius: 3px;
   padding: 24px;
   max-height: 350px;
@@ -865,13 +914,13 @@
     dt {
       font-size: 13px;
       font-weight: 600;
-            color: #1083E3;
+      color: #1083e3;
       margin-bottom: 15px;
     }
     dd {
       font-size: 12px;
       font-weight: 400;
-            color: #45576F;
+      color: #45576f;
       margin-bottom: 8px;
       &:last-child {
         margin-bottom: 0;
@@ -903,7 +952,7 @@
     .product-price-tit {
       font-size: 13px;
       font-weight: 400;
-            color: #45576F;
+      color: #45576f;
       margin-right: 10px;
     }
     .select-wrap {
@@ -941,7 +990,7 @@
           transform: translateY(-50%);
           width: 1px;
           height: 12px;
-                    background-color: #D9D9D9;
+          background-color: #d9d9d9;
         }
         &:first-child {
           padding-left: 0;
@@ -953,7 +1002,7 @@
           padding-right: 0;
         }
         &.item01 {
-                    color: #3BBB48;
+          color: #3bbb48;
           span {
             background-image: url(../../public/static/images/sub/open_ico.svg);
           }
@@ -965,13 +1014,13 @@
           }
         }
         &.item03 {
-                    color: #0191C9;
+          color: #0191c9;
           span {
             background-image: url(../../public/static/images/sub/attachment_ico.svg);
           }
         }
         &.item04 {
-                    color: #F16A6A;
+          color: #f16a6a;
           span {
             background-image: url(../../public/static/images/sub/click_check_ico.svg);
           }
@@ -1033,23 +1082,23 @@
   table {
     table-layout: fixed;
     border-collapse: collapse;
-        border: 1px solid #ECF0F4;
+    border: 1px solid #ecf0f4;
     border-radius: 4px;
     thead {
       th {
         padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
+        border-bottom: 1px solid #ecf0f4;
         text-align: center;
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 500;
-                background-color: #F8F9FA;
+        background-color: #f8f9fa;
       }
     }
     tbody {
       td {
         font-size: 13px;
-                color: #45576F;
+        color: #45576f;
         text-align: center;
         padding: 4.5px 0;
       }
@@ -1063,13 +1112,13 @@
   .simulation-tit-wrap {
     flex: none;
     padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
+    border-right: 1px solid #eeeeee;
     span {
       display: block;
       position: relative;
       padding-left: 60px;
       font-size: 15px;
-            color: #14324F;
+      color: #14324f;
       font-weight: 600;
       &::before {
         content: '';
@@ -1097,7 +1146,7 @@
       }
       dd {
         font-size: 12px;
-                color: #45576F;
+        color: #45576f;
         font-weight: 400;
         line-height: 24px;
       }
@@ -1105,7 +1154,8 @@
         margin-bottom: 0;
       }
     }
-        ul, ol{
+    ul,
+    ol {
       list-style: unset;
     }
   }
@@ -1114,10 +1164,10 @@
 .module-total {
   display: flex;
   align-items: center;
-    background-color: #F8F9FA;
+  background-color: #f8f9fa;
   padding: 9px 0;
   margin-right: 4px;
-    border: 1px solid #ECF0F4;
+  border: 1px solid #ecf0f4;
   border-top: none;
   .total-title {
     flex: 1;
@@ -1140,7 +1190,7 @@
 .information-help-wrap {
   display: flex;
   padding: 24px;
-    background-color: #F4F4F4;
+  background-color: #f4f4f4;
   border-radius: 4px;
   margin-bottom: 15px;
   .information-help-tit-wrap {
@@ -1148,7 +1198,7 @@
     display: flex;
     align-items: center;
     padding-right: 40px;
-        border-right: 1px solid #E0E0E3;
+    border-right: 1px solid #e0e0e3;
     .help-tit-icon {
       width: 40px;
       height: 40px;
@@ -1160,7 +1210,7 @@
     .help-tit {
       font-size: 13px;
       font-weight: 600;
-            color: #45576F;
+      color: #45576f;
     }
   }
   .information-help-guide {
@@ -1169,7 +1219,7 @@
       display: block;
       font-size: 12px;
       font-weight: 400;
-            color: #45576F;
+      color: #45576f;
       margin-bottom: 7px;
       &:last-child {
         margin-bottom: 0;
@@ -1183,7 +1233,7 @@
   flex-direction: column;
   align-items: center;
   padding: 10px 0 30px 0;
-    border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid #e5e5e5;
   margin-bottom: 24px;
   .community-search-box {
     position: relative;
@@ -1202,7 +1252,7 @@
       font-weight: 400;
       color: #101010;
       &::placeholder {
-                color: #C8C8C8;
+        color: #c8c8c8;
       }
     }
     .community-search-ico {
@@ -1221,10 +1271,10 @@
   .community-search-keyword {
     font-size: 13px;
     font-weight: 400;
-        color: #45576F;
+    color: #45576f;
     span {
       font-weight: 600;
-            color: #F16A6A;
+      color: #f16a6a;
     }
   }
 }
@@ -1239,15 +1289,15 @@
     align-items: center;
     padding: 24px;
     border-radius: 4px;
-        border: 1px solid #E5E5E5;
+    border: 1px solid #e5e5e5;
-        background: #FFF; 
+    background: #fff;
-        transition: all .15s ease-in-out;
+    transition: all 0.15s ease-in-out;
     .file-item-info {
       .item-num {
         display: inline-block;
         padding: 6px 17.5px;
         border-radius: 60px;
-                background-color: #F4F4F7;
+        background-color: #f4f4f7;
         font-size: 13px;
         font-weight: 600;
         color: #101010;
@@ -1279,7 +1329,7 @@
       }
     }
     &:hover {
-            background-color: #F4F4F7;
+      background-color: #f4f4f7;
     }
   }
 }
@@ -1292,7 +1342,7 @@
   height: 148px;
   padding: 24px;
   border-radius: 4px;
-    border: 1px solid #E5E5E5;
+  border: 1px solid #e5e5e5;
   font-size: 16px;
   font-weight: 500;
   color: #344356;
@@ -1304,8 +1354,8 @@
   align-items: center;
   width: 200px;
   height: 30px;
-    background-color: #FAFAFA;
+  background-color: #fafafa;
-    border: 1px solid #EEE;
+  border: 1px solid #eee;
   padding: 0 10px;
   input {
     font-size: 13px;
@@ -1428,5 +1478,4 @@
       }
     }
   }
-    
 }