Merge branch 'dev' into dev-yj

src/app/QcastProvider.js

@@ -1,27 +1,24 @@
 'use client'
 
-import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 import ServerError from './error'
 
 import '@/styles/common.scss'
 
-import KO from '@/locales/ko.json'
+// import KO from '@/locales/ko.json'
-import JA from '@/locales/ja.json'
+// import JA from '@/locales/ja.json'
 
 export const QcastProvider = ({ children }) => {
-  const globalLocale = useRecoilValue(globalLocaleStore)
+  // const globalLocale = useRecoilValue(globalLocaleStore)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  // const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (globalLocale === 'ko') {
+  //   if (globalLocale === 'ko') {
-      setAppMessageState(KO)
+  //     setAppMessageState(KO)
-    } else {
+  //   } else {
-      setAppMessageState(JA)
+  //     setAppMessageState(JA)
-    }
+  //   }
-  }, [globalLocale])
+  // }, [globalLocale])
 
   return (
     <>

src/app/layout.js

@@ -16,6 +16,7 @@ import '../styles/style.scss'
 import '../styles/contents.scss'
 import Dimmed from '@/components/ui/Dimmed'
 import SessionProvider from './SessionProvider'
+import LocaleSwitch from '@/components/LocaleSwitch'
 
 // const inter = Inter({ subsets: ['latin'] })
 
@@ -76,8 +77,9 @@ export default async function RootLayout({ children }) {
                 </QcastProvider>
               </div>
               <footer>
-                <div className="footer-inner">
+                <div className="footer-inner flex justify-center">
                   <span>COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</span>
+                  <LocaleSwitch />
                 </div>
               </footer>
             </div>

src/components/LocaleSwitch.jsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { globalLocaleStore } from '@/store/localeAtom'
+import { useRecoilState } from 'recoil'
+
+export default function LocaleSwitch() {
+  const [globalLocale, setGlobalLocale] = useRecoilState(globalLocaleStore)
+
+  return (
+    <span
+      className="locale-switch"
+      onClick={() => {
+        if (globalLocale === 'ko') {
+          setGlobalLocale('ja')
+        } else {
+          setGlobalLocale('ko')
+        }
+      }}
+    >
+      {globalLocale.toUpperCase()}
+    </span>
+  )
+}

src/components/auth/AutoLogin.jsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useMessage } from '@/hooks/useMessage'
+
+export default function AutoLoginPage() {
+  const { getMessage } = useMessage()
+
+  return (
+    <div className="login-input-frame">
+      <div className="login-frame-tit ">
+        <span>{getMessage('site.name')}</span>
+        {getMessage('site.sub_name')}
+      </div>
+      <div className="login-input-wrap">
+        <div className="login-area id" style={{ fontWeight: 'bolder' }}>
+          {getMessage('login.auto.page.text')}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/auth/Login.jsx

@@ -15,6 +15,8 @@ import Cookies from 'js-cookie'
 
 import { useSearchParams } from 'next/navigation'
 
+import AutoLogin from './AutoLogin'
+
 export default function Login() {
   // 자동 로그인
   const initParams = useSearchParams()
@@ -180,8 +182,7 @@ export default function Login() {
         <Link href={'/login'} className="login-logo">
           <Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} styles={{ width: '236px', height: '43px' }} priority />
         </Link>
-
+        {!autoLoginParam && passwordReset === 1 && (
-        {passwordReset === 1 && (
           <>
             <div className="login-input-frame">
               <form onSubmit={loginProcess} className="space-y-6">
@@ -266,7 +267,7 @@ export default function Login() {
             </div>
           </>
         )}
-        {passwordReset === 2 && (
+        {!autoLoginParam && passwordReset === 2 && (
           <>
             <div className="login-input-frame">
               <div className="login-frame-tit pw-reset">
@@ -328,6 +329,7 @@ export default function Login() {
             </div>
           </>
         )}
+        {autoLoginParam && <AutoLogin />}
       </div>
       <div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
     </div>

src/components/community/Archive.jsx

@@ -61,7 +61,7 @@ export default function Archive() {
       <div className="sub-content">
         <div className="sub-content-inner">
           <div className="sub-table-box">
-            <Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={true} />
+            <Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={false} />
             <ArchiveTable clsCode={boardType.clsCode} />
           </div>
         </div>

src/components/community/ArchiveTable.jsx

@@ -45,7 +45,7 @@ export default function ArchiveTable({ clsCode }) {
     }
 
     fetchData()
-  }, [search.searchValue])
+  }, [search.searchValue, search.searchFlag])
 
   // 상세 파일 목록 조회
   const handleDetailFileListDown = async (noticeNo) => {
@@ -74,6 +74,7 @@ export default function ArchiveTable({ clsCode }) {
 
   return (
     <>
+      {boardList.length > 0 ? (
         <div className="file-down-list">
           {boardList?.map((board) => (
             <div key={board.noticeNo} className="file-down-item">
@@ -98,6 +99,9 @@ export default function ArchiveTable({ clsCode }) {
             </div>
           ))}
         </div>
+      ) : (
+        <div className="file-down-nodata">{getMessage('common.message.no.data')}</div>
+      )}
     </>
   )
 }

src/components/floor-plan/CanvasLayout.jsx

@@ -7,14 +7,11 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { sessionStore } from '@/store/commonAtom'
 import { SessionContext } from '@/app/SessionProvider'
 
 export default function CanvasLayout() {
   const { session } = useContext(SessionContext)
-  console.log('session >>> ', session)
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const sessionState = useRecoilValue(sessionStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
@@ -22,8 +19,7 @@ export default function CanvasLayout() {
   const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
-    console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
+    loadCanvasPlanData(session.userId, objectNo)
-    loadCanvasPlanData(sessionState.userId, objectNo)
   }, [])
 
   return (
@@ -34,7 +30,7 @@ export default function CanvasLayout() {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
+              onClick={() => handleCurrentPlan(session.userId, plan.id)}
             >
               <span>{plan.name}</span>
               <i
@@ -53,7 +49,7 @@ export default function CanvasLayout() {
           ))}
         </div>
         {plans.length < 10 && (
-          <button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
+          <button className="plane-add" onClick={() => handleAddPlan(session.userId, objectNo)}>
             <span></span>
           </button>
         )}

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -7,7 +7,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState
 import { onlyNumberInputChange } from '@/util/input-utils'
 import { fabric } from 'fabric'
 import { gridColorState } from '@/store/gridAtom'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
+import { gridDisplaySelector, settingModalGridOptionsState } from '@/store/settingAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 
@@ -24,6 +24,7 @@ export default function DotLineGrid(props) {
   const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
   const gridColor = useRecoilValue(gridColorState)
   const canvas = useRecoilValue(canvasState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
 
   const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
   const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
@@ -179,6 +180,7 @@ export default function DotLineGrid(props) {
               fill: pattern,
               selectable: false,
               name: 'dotGrid',
+              visible: isGridDisplay,
             },
           )
 
@@ -209,6 +211,7 @@ export default function DotLineGrid(props) {
                 strokeDashArray: [5, 2],
                 opacity: 0.3,
                 direction: 'horizontal',
+                visible: isGridDisplay,
               },
             )
             canvas.add(horizontalLine)
@@ -235,6 +238,7 @@ export default function DotLineGrid(props) {
                 strokeDashArray: [5, 2],
                 opacity: 0.3,
                 direction: 'vertical',
+                visible: isGridDisplay,
               },
             )
             canvas.add(verticalLine)

src/components/floor-plan/modal/setting01/FirstOption.jsx

@@ -1,14 +1,14 @@
 import { useRecoilState } from 'recoil'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
-import { adsorptionPointAddModeState } from '@/store/canvasAtom'
+import { useFirstOption } from '@/hooks/option/useFirstOption'
 
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option3, option4 } = settingModalSecondOptions

src/components/main/MainContents.jsx

@@ -34,7 +34,6 @@ export default function MainContents({ objectList, businessCharger, businessChar
         startRow: 1,
         endRow: 1,
       }
-      // const noticeApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=NOTICE&schTitle=&startRow=1&endRow=1`
       const noticeApiUrl = `api/board/list?${queryStringFormatter(param)}`
       const res = await get({ url: noticeApiUrl })
       //console.log('공지res::', res)
@@ -57,7 +56,6 @@ export default function MainContents({ objectList, businessCharger, businessChar
         startRow: 1,
         endRow: 3,
       }
-      // const faqApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=FAQ&schTitle=&startRow=1&endRow=1`
       const faqApiUrl = `api/board/list?${queryStringFormatter(param)}`
       const res = await get({ url: faqApiUrl })
       //console.log('FAQres::', res)

src/components/management/Stuff.jsx

@@ -245,7 +245,6 @@ export default function Stuff() {
         }
 
         async function fetchData() {
-          // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
           const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
           await get({
             url: apiUrl,
@@ -294,7 +293,6 @@ export default function Stuff() {
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
-      //console.log('조회누름::::::::', stuffSearchParams, sessionState)
       stuffSearchParams.startRow = 1
       stuffSearchParams.endRow = 1 * pageSize
       stuffSearchParams.schSortType = defaultSortType

src/components/management/StuffDetail.jsx

@@ -102,7 +102,6 @@ export default function StuffDetail() {
       // 도도부현API
       get({ url: '/api/object/prefecture/list' }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('신규화면 도도부현API 결과:::', res)
           setPrefCodeList(res)
         }
       })
@@ -348,9 +347,8 @@ export default function StuffDetail() {
       // 발전량시뮬레이션 지역 목록
       get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
         if (!isEmptyArray(res)) {
-          // console.log('발전량 시뮬레이션::::::::', res)
+          // form.setValue('areaId', res[0].areaId)
-          form.setValue('areaId', res[0].areaId)
+          // form.setValue('areaName', res[0].prefName)
-          form.setValue('areaName', res[0].prefName)
           setAreaIdList(res)
         }
       })
@@ -359,7 +357,8 @@ export default function StuffDetail() {
 
   // 발전량 시뮬레이션 변경
   const handleAreaIdOnChange = (e) => {
-    form.setValue('areaId', e.target.value)
+    form.setValue('areaId', e.areaId)
+    form.setValue('areaName', e.prefName)
   }
 
   //필수값 다 입력했을때
@@ -631,13 +630,28 @@ export default function StuffDetail() {
                       <div className="flx-box">
                         <div className="select-wrap" style={{ width: '200px' }}>
                           {prefCodeList?.length > 0 && (
-                            <select className="select-light" name="prefName" {...register('prefId')} disabled>
+                            // <select className="select-light" name="prefName" {...register('prefId')} disabled>
-                              {prefCodeList.map((row) => (
+                            //   {prefCodeList.map((row) => (
-                                <option key={row.prefId} value={row.prefId}>
+                            //     <option key={row.prefId} value={row.prefId}>
-                                  {row.prefName}
+                            //       {row.prefName}
-                                </option>
+                            //     </option>
-                              ))}
+                            //   ))}
-                            </select>
+                            // </select>
+                            <Select
+                              id="long-value-select3"
+                              instanceId="long-value-select3"
+                              className="react-select-custom"
+                              classNamePrefix="custom"
+                              placeholder="Select"
+                              options={prefCodeList}
+                              getOptionLabel={(x) => x.prefName}
+                              getOptionValue={(x) => x.prefId}
+                              isSearchable={false}
+                              value={prefCodeList.filter(function (option) {
+                                return option.prefId === prefValue
+                              })}
+                              isDisabled={true}
+                            />
                           )}
                         </div>
                         <div className="input-wrap mr5" style={{ width: '580px' }}>
@@ -652,7 +666,7 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="select-wrap" style={{ width: '200px' }}>
-                        <select
+                        {/* <select
                           className="select-light"
                           name="areaId"
                           disabled={areaIdList?.length > 0 ? false : true}
@@ -666,6 +680,23 @@ export default function StuffDetail() {
                             )
                             })}
                             </select>
+                          */}
+                        <Select
+                          id="long-value-select4"
+                          instanceId="long-value-select4"
+                          className="react-select-custom"
+                          classNamePrefix="custom"
+                          options={areaIdList}
+                          placeholder="Select"
+                          getOptionLabel={(x) => x.prefName}
+                          getOptionValue={(x) => x.areaId}
+                          isSearchable={false}
+                          onChange={handleAreaIdOnChange}
+                          value={areaIdList.filter(function (option) {
+                            return option.areaId === form.watch('areaId')
+                          })}
+                          isDisabled={areaIdList.length > 0 ? false : true}
+                        />
                       </div>
                     </td>
                   </tr>
@@ -794,9 +825,9 @@ export default function StuffDetail() {
                 </Button>
               )}
               <Link href="/management/stuff">
-                <Button type="button" className="btn-origin grey">
+                <button type="button" className="btn-origin grey">
                   NEW화면 물건목록이동
-                </Button>
+                </button>
               </Link>
             </div>
           </div>
@@ -911,9 +942,9 @@ export default function StuffDetail() {
           {objectNo.substring(0, 1) === 'R' ? (
             <>
               <Link href="/management/stuff">
-                <Button type="button" className="btn-origin grey mr5">
+                <button type="button" className="btn-origin grey mr5">
                   R상세:물건목록
-                </Button>
+                </button>
               </Link>
               <Button type="submit" className="btn-origin navy mr5">
                 R상세:저장
@@ -934,9 +965,9 @@ export default function StuffDetail() {
                 </Button>
               )}
               <Link href="/management/stuff">
-                <Button type="button" className="btn-origin grey">
+                <button type="button" className="btn-origin grey">
                   T상세:물건목록
-                </Button>
+                </button>
               </Link>
             </>
           )}

src/components/management/StuffSearchCondition.jsx

@@ -24,6 +24,13 @@ export default function StuffSearchCondition() {
   const ref = useRef()
   const { get } = useAxios(globalLocaleState)
 
+  const objectNoRef = useRef(null)
+  const saleStoreNameRef = useRef(null)
+  const addressRef = useRef(null)
+  const objectNameRef = useRef(null)
+  const dispCompanyNameRef = useRef(null)
+  const receiveUserRef = useRef(null)
+
   //달력 props 관련 날짜 셋팅
   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'))
@@ -42,13 +49,13 @@ export default function StuffSearchCondition() {
   const resetStuffRecoil = useResetRecoilState(stuffSearchState)
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
   const [objectNo, setObjectNo] = useState('') //물건번호
+  const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
   const [address, setAddress] = useState('') //물건주소
   const [objectName, setobjectName] = useState('') //물건명
-  const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
-  const [receiveUser, setReceiveUser] = useState('') //담당자
   const [dispCompanyName, setDispCompanyName] = useState('') //견적처
-  const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
   const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택
+  const [receiveUser, setReceiveUser] = useState('') //담당자
+  const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
 
   const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
   // 조회
@@ -58,26 +65,52 @@ export default function StuffSearchCondition() {
       return alert(getMessage('stuff.message.periodError'))
     }
 
+    if (stuffSearch.code === 'S') {
       setStuffSearch({
-      schObjectNo: stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo,
+        schObjectNo: objectNo ? objectNo : stuffSearch?.schObjectNo,
-      schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress : address,
+        schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch?.schSaleStoreName : saleStoreName,
-      schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName,
+        schAddress: address ? address : stuffSearch?.schAddress,
-      schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName,
+        schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
-      schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
+        schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
-      schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
+        schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
+        schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
         schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
         schFromDt: dayjs(startDate).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,
         endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
         schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
       })
+    } else {
+      setStuffSearch({
+        schObjectNo: objectNo ? objectNo : '',
+        schSaleStoreName: saleStoreName ? saleStoreName : '',
+        schAddress: address ? address : '',
+        schObjectName: objectName ? objectName : '',
+        schDispCompanyName: dispCompanyName ? dispCompanyName : '',
+        schSelSaleStoreId: schSelSaleStoreId ? schSelSaleStoreId : '',
+        schReceiveUser: receiveUser ? receiveUser : '',
+        schDateType: dateType,
+        schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
+        schToDt: dayjs(endDate).format('YYYY-MM-DD'),
+        code: 'E',
+        startRow: 1,
+        endRow: 100,
+        schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
+      })
+    }
   }
 
   //초기화
   const resetRecoil = () => {
+    objectNoRef.current.value = ''
+    saleStoreNameRef.current.value = ''
+    addressRef.current.value = ''
+    objectNameRef.current.value = ''
+    dispCompanyNameRef.current.value = ''
+    receiveUserRef.current.value = ''
+
     setObjectNo('')
     setAddress('')
     setobjectName('')
@@ -143,6 +176,13 @@ export default function StuffSearchCondition() {
     }
   }, [globalLocaleState])
 
+  // 엔터 이벤트
+  const handleByOnKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      onSubmit()
+    }
+  }
+
   return (
     <>
       {/* 퍼블적용시작 */}
@@ -182,12 +222,13 @@ export default function StuffSearchCondition() {
                   <div className="input-wrap">
                     <input
                       type="text"
+                      ref={objectNoRef}
                       className="input-light"
-                      value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
+                      defaultValue={stuffSearch.code === 'E' || stuffSearch.code === 'M' ? stuffSearch?.schObjectNo : objectNo}
                       onChange={(e) => {
-                        setObjectNo(e.target.value)
+                        setObjectNo(objectNoRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
                       }}
+                      onKeyUp={handleByOnKeyUp}
                     />
                   </div>
                 </td>
@@ -196,11 +237,11 @@ export default function StuffSearchCondition() {
                   <div className="input-wrap">
                     <input
                       type="text"
+                      ref={saleStoreNameRef}
                       className="input-light"
-                      value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schSaleStoreName : saleStoreName}
                       onChange={(e) => {
-                        setSaleStoreName(e.target.value)
+                        setSaleStoreName(saleStoreNameRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
                       }}
                     />
                   </div>
@@ -210,11 +251,11 @@ export default function StuffSearchCondition() {
                   <div className="input-wrap">
                     <input
                       type="text"
+                      ref={addressRef}
                       className="input-light"
-                      value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schAddress : address}
                       onChange={(e) => {
-                        setAddress(e.target.value)
+                        setAddress(addressRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
                       }}
                     />
                   </div>
@@ -226,11 +267,11 @@ export default function StuffSearchCondition() {
                   <div className="input-wrap">
                     <input
                       type="text"
+                      ref={objectNameRef}
                       className="input-light"
-                      value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schObjectName : objectName}
                       onChange={(e) => {
-                        setobjectName(e.target.value)
+                        setobjectName(objectNameRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
                       }}
                     />
                   </div>
@@ -240,11 +281,11 @@ export default function StuffSearchCondition() {
                   <div className="input-wrap">
                     <input
                       type="text"
+                      ref={dispCompanyNameRef}
                       className="input-light"
-                      value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
                       onChange={(e) => {
-                        setDispCompanyName(e.target.value)
+                        setDispCompanyName(dispCompanyNameRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
                       }}
                     />
                   </div>
@@ -293,10 +334,10 @@ export default function StuffSearchCondition() {
                     <input
                       type="text"
                       className="input-light"
-                      value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
+                      ref={receiveUserRef}
+                      defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schReceiveUser : receiveUser}
                       onChange={(e) => {
-                        setReceiveUser(e.target.value)
+                        setReceiveUser(receiveUserRef.current.value)
-                        setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
                       }}
                     />
                   </div>

src/hooks/option/useFirstOption.js

@@ -0,0 +1,23 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { useEffect } from 'react'
+import { settingModalFirstOptionsState } from '@/store/settingAtom'
+
+export function useFirstOption() {
+  const canvas = useRecoilValue(canvasState)
+
+  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+
+  useEffect(() => {
+    const option1 = settingModalFirstOptions.option1
+
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === '')
+      .forEach((obj) => {
+        obj.set({ visible: !obj.visible })
+      })
+  }, [settingModalFirstOptions])
+
+  return { settingModalFirstOptions, setSettingModalFirstOptions }
+}

src/hooks/roofcover/useOuterLineWall.js

@@ -30,6 +30,7 @@ import {
 import { calculateAngle } from '@/util/qpolygon-utils'
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
+import { outlineDisplaySelector } from '@/store/settingAtom'
 
 //외벽선 그리기
 export function useOuterLineWall(setShowOutlineModal) {
@@ -53,6 +54,8 @@ export function useOuterLineWall(setShowOutlineModal) {
   const adsorptionRange = useRecoilValue(adsorptionRangeState)
   const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
 
+  const isOutlineDisplay = useRecoilValue(outlineDisplaySelector)
+
   const length1Ref = useRef(null)
   const length2Ref = useRef(null)
   const angle1Ref = useRef(null)
@@ -253,6 +256,7 @@ export function useOuterLineWall(setShowOutlineModal) {
           strokeWidth: 1,
           selectable: false,
           name: 'helpGuideLine',
+          visible: isOutlineDisplay,
         })
       } else {
         const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
@@ -260,6 +264,7 @@ export function useOuterLineWall(setShowOutlineModal) {
           strokeWidth: 1,
           strokeDashArray: [1, 1, 1],
           name: 'helpGuideLine',
+          visible: isOutlineDisplay,
         })
 
         const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
@@ -267,6 +272,7 @@ export function useOuterLineWall(setShowOutlineModal) {
           strokeWidth: 1,
           strokeDashArray: [1, 1, 1],
           name: 'helpGuideLine',
+          visible: isOutlineDisplay,
         })
       }
     }
@@ -283,6 +289,7 @@ export function useOuterLineWall(setShowOutlineModal) {
       y1: point1.y,
       x2: point2.x,
       y2: point2.y,
+      visible: isOutlineDisplay,
     })
   }
 

src/hooks/useAdsorptionPoint.js

@@ -2,13 +2,14 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 import { useMouse } from '@/hooks/useMouse'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useAdsorptionPoint() {
   const canvas = useRecoilValue(canvasState)
   const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
   const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
-
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const { getIntersectMousePoint } = useMouse()
 
   const getAdsorptionPoints = () => {
@@ -28,6 +29,7 @@ export function useAdsorptionPoint() {
       y: pointer.y,
       selectable: true,
       name: 'adsorptionPoint',
+      visible: isGridDisplay,
     })
 
     canvas.add(adsorptionPoint)

src/hooks/useEvent.js

@@ -6,6 +6,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)

src/hooks/useMessage.js

@@ -1,14 +1,17 @@
+import { useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
-import { appMessageStore } from '@/store/localeAtom'
+import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
 
-// import KO from '@/locales/ko.json'
+import KO from '@/locales/ko.json'
-// import JA from '@/locales/ja.json'
+import JA from '@/locales/ja.json'
 
 const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE'
 
 export const useMessage = () => {
   // const globalLocale = useRecoilValue(globalLocaleState)
-  const appMessageState = useRecoilValue(appMessageStore)
+  // const appMessageState = useRecoilValue(appMessageStore)
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const appMessageState = globalLocale === 'ko' ? KO : JA
 
   const getMessage = (key, args = []) => {
     // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {

src/hooks/usePlan.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
@@ -269,15 +270,16 @@ export function usePlan() {
       : addPlan(userId, objectNo)
   }
   const addPlan = (userId, objectNo, canvasStatus = '') => {
+    const id = uuidv4()
     const newPlan = {
-      id: planNum,
+      id: id,
       name: `Plan ${planNum + 1}`,
       objectNo: objectNo,
       userId: userId,
       canvasStatus: canvasStatus,
     }
     setPlans([...plans, newPlan])
-    handleCurrentPlan(userId, planNum)
+    handleCurrentPlan(userId, id)
     setPlanNum(planNum + 1)
   }
 

src/hooks/useTempGrid.js

@@ -1,11 +1,13 @@
 import { canvasState, tempGridModeState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useTempGrid() {
   const canvas = useRecoilValue(canvasState)
   const gridColor = useRecoilValue(gridColorState)
   const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
     let pointer = canvas.getPointer(e.e)
@@ -22,6 +24,7 @@ export function useTempGrid() {
       strokeDashArray: [5, 2],
       opacity: 0.3,
       direction: 'vertical',
+      visible: isGridDisplay,
       name: 'tempGrid',
     })
 
@@ -48,6 +51,7 @@ export function useTempGrid() {
       strokeDashArray: [5, 2],
       opacity: 0.3,
       name: 'tempGrid',
+      visible: isGridDisplay,
       direction: 'horizontal',
     })
 

src/locales/client.js

@@ -1,18 +0,0 @@
-'use client'
-
-import { createI18nClient } from 'next-international/client'
-
-export const { useI18n, useScopedI18n, I18nProviderClient, useChangeLocale, defineLocale, useCurrentLocale } = createI18nClient(
-  {
-    ko: () => import('./ko'),
-    ja: () => import('./ja'),
-  },
-  {
-    // Uncomment to set base path
-    // basePath: '/base',
-    // Uncomment to use custom segment name
-    // segmentName: 'locale',
-    // Uncomment to set fallback locale
-    // fallbackLocale: en,
-  },
-)

src/locales/ja.js

@@ -1,90 +0,0 @@
-console.log('Loaded JA')
-
-export default {
-  hello: 'こんにちは',
-  welcome: 'こんにちは {name}!',
-  locale: '現在のロケールは {locale} です。',
-  common: {
-    require: '필수',
-  },
-  site: {
-    name: 'Q.CAST III',
-    sub_name: '태양광 발전 시스템 도면관리 사이트',
-  },
-  login: {
-    login: 'Login',
-    init_password: {
-      btn: '비밀번호 초기화',
-      title: '비밀번호 초기화',
-      sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
-    },
-  },
-  join: {
-    title: 'Q.CAST3 로그인ID 발행 신청',
-    sub1: {
-      title: '판매대리점 정보',
-      comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오.    (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
-      storeQcastNm: '판매대리점명',
-      storeQcastNm_placeholder: '株式会社エネルギア・ソリューション・アンド・サービス（2次店：山口住機販売有限会社）',
-      storeQcastNmKana: '판매대리점명 후리가나',
-      storeQcastNmKana_placeholder: 'カブシキガイシャエネルギア・ソリューション・アン',
-      postCd: '우편번호',
-      postCd_placeholder: '숫자 7자리',
-      addr: '주소',
-      addr_placeholder: '전각50자이내',
-      telNo: '전화번호',
-      telNo_placeholder: '00-0000-0000',
-      fax: 'FAX 번호',
-      fax_placeholder: '00-0000-0000',
-    },
-    sub2: {
-      title: '담당자 정보',
-      userNm: '담당자명',
-      userNmKana: '담당자명 후리가나',
-      userId: '신청 ID',
-      email: '이메일 주소',
-      telNo: '전화번호',
-      telNo_placeholder: '00-0000-0000',
-      fax: 'FAX 번호',
-      fax_placeholder: '00-0000-0000',
-      category: '부서명',
-    },
-    sub3: {
-      title: '견적서 제출용 회사정보',
-      qtCompNm: '회사명',
-      qtPostCd: '우편번호',
-      qtPostCd_placeholder: '숫자 7자리',
-      qtAddr: '주소',
-      qtAddr_placeholder: '전각50자이내',
-      qtEmail: '이메일 주소',
-      qtTelNo: '전화번호',
-      qtTelNo_placeholder: '00-0000-0000',
-      qtFax: 'FAX 번호',
-      qtFax_placeholder: '00-0000-0000',
-    },
-    btn: {
-      approval_request: 'ID 승인요청',
-    },
-    complete: {
-      title: 'Q.CAST3 로그인ID 발행신청 완료',
-      contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
-      email_comment: '담당자 이메일 주소',
-      email: 'test@naver.com',
-    },
-  },
-  stuff: {
-    gridHeader: {
-      lastEditDatetime: '갱신일시',
-      objectNo: '물건번호',
-      planTotCnt: '플랜 수',
-      objectName: '물건명',
-      saleStoreId: '대리점ID',
-      saleStoreName: '대리점명',
-      address: '물건주소',
-      dispCompanyName: '견적처',
-      receiveUser: '담당자',
-      specDate: '사양확인',
-      createDatetime: '등록일',
-    },
-  },
-}

src/locales/ja.json

@@ -385,6 +385,7 @@
   "myinfo.message.save": "パスワードが変更されました。",
   "myinfo.message.password.error": "パスワードが間違っています。",
   "login": "ログイン",
+  "login.auto.page.text": "自動ログイン中です。",
   "login.id.save": "ID保存",
   "login.id.placeholder": "IDを入力してください。",
   "login.password.placeholder": "パスワードを入力してください。",

src/locales/ko.js

@@ -1,91 +0,0 @@
-console.log('Loaded KO')
-
-export default {
-  hello: '안녕',
-  welcome: '안녕 {name}!',
-  locale: '현재 로케일은 {locale}입니다.',
-  common: {
-    require: '필수',
-  },
-  site: {
-    name: 'Q.CAST III',
-    sub_name: '태양광 발전 시스템 도면관리 사이트',
-  },
-  login: {
-    login: '로그인',
-    init_password: {
-      btn: '비밀번호 초기화',
-      title: '비밀번호 초기화',
-      sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
-      complete_message: '비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.',
-    },
-  },
-  join: {
-    title: 'Q.CAST3 로그인ID 발행 신청',
-    sub1: {
-      title: '판매대리점 정보',
-      comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
-      storeQcastNm: '판매대리점명',
-      storeQcastNm_placeholder: '주식회사 에너지 기어 솔루션 앤 서비스 (2차점: 야마구치 주기 판매 유한회사)',
-      storeQcastNmKana: '판매대리점명 후리가나',
-      storeQcastNmKana_placeholder: '주식회사 에너지 기어 솔루션',
-      postCd: '우편번호',
-      postCd_placeholder: '숫자 7자리',
-      addr: '주소',
-      addr_placeholder: '전각50자이내',
-      telNo: '전화번호',
-      telNo_placeholder: '00-0000-0000',
-      fax: 'FAX 번호',
-      fax_placeholder: '00-0000-0000',
-    },
-    sub2: {
-      title: '담당자 정보',
-      userNm: '담당자명',
-      userNmKana: '담당자명 후리가나',
-      userId: '신청 ID',
-      email: '이메일 주소',
-      telNo: '전화번호',
-      telNo_placeholder: '00-0000-0000',
-      fax: 'FAX 번호',
-      fax_placeholder: '00-0000-0000',
-      category: '부서명',
-    },
-    sub3: {
-      title: '견적서 제출용 회사정보',
-      qtCompNm: '회사명',
-      qtPostCd: '우편번호',
-      qtPostCd_placeholder: '숫자 7자리',
-      qtAddr: '주소',
-      qtAddr_placeholder: '전각50자이내',
-      qtEmail: '이메일 주소',
-      qtTelNo: '전화번호',
-      qtTelNo_placeholder: '00-0000-0000',
-      qtFax: 'FAX 번호',
-      qtFax_placeholder: '00-0000-0000',
-    },
-    btn: {
-      approval_request: 'ID 승인요청',
-    },
-    complete: {
-      title: 'Q.CAST3 로그인ID 발행신청 완료',
-      contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
-      email_comment: '담당자 이메일 주소',
-      email: 'test@naver.com',
-    },
-  },
-  stuff: {
-    gridHeader: {
-      lastEditDatetime: '갱신일시',
-      objectNo: '물건번호',
-      planTotCnt: '플랜 수',
-      objectName: '물건명',
-      saleStoreId: '대리점ID',
-      saleStoreName: '대리점명',
-      address: '물건주소',
-      dispCompanyName: '견적처',
-      receiveUser: '담당자',
-      specDate: '사양확인',
-      createDatetime: '등록일',
-    },
-  },
-}

src/locales/ko.json

@@ -390,6 +390,7 @@
   "myinfo.message.save": "비밀번호가 변경되었습니다.",
   "myinfo.message.password.error": "비밀번호가 틀렸습니다.",
   "login": "로그인",
+  "login.auto.page.text": "자동로그인 중 입니다.",
   "login.id.save": "ID Save",
   "login.id.placeholder": "아이디를 입력해주세요.",
   "login.password.placeholder": "비밀번호를 입력해주세요.",

src/locales/server.js

@@ -1,14 +0,0 @@
-import { createI18nServer } from 'next-international/server'
-
-export const { getI18n, getScopedI18n, getCurrentLocale, getStaticParams } = createI18nServer(
-  {
-    ko: () => import('./ko'),
-    ja: () => import('./ja'),
-  },
-  {
-    // Uncomment to use custom segment name
-    // segmentName: 'locale',
-    // Uncomment to set fallback locale
-    // fallbackLocale: en,
-  },
-)

src/store/settingAtom.js

@@ -15,12 +15,12 @@ export const settingModalFirstOptionsState = atom({
       { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
     ],
     dimensionDisplay: [
-      { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
+      { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
       { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
       { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
     ],
     option2: [
-      { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
+      { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true },
       { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
       { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
     ],
@@ -57,3 +57,102 @@ export const settingModalGridOptionsState = atom({
   ],
   dangerouslyAllowMutability: true,
 })
+
+// 디스플레이 설정 - 할당 표시
+export const allocDisplaySelector = selector({
+  key: 'allocDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'allocDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 외벽선 표시
+export const outlineDisplaySelector = selector({
+  key: 'outlineDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'outlineDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 그리드 표시
+export const gridDisplaySelector = selector({
+  key: 'gridDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'gridDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 지붕선 표시
+export const roofLineDisplaySelector = selector({
+  key: 'lineDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'lineDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 문자 표시
+export const wordDisplaySelector = selector({
+  key: 'wordDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'wordDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 회로번호 표시
+export const circuitNumDisplaySelector = selector({
+  key: 'circuitNumDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'circuitNumDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 흐름 방향 표시
+export const flowDisplaySelector = selector({
+  key: 'flowDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'flowDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 가대 표시
+export const trestleDisplaySelector = selector({
+  key: 'trestleDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'trestleDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 집계표 표시
+export const totalDisplaySelector = selector({
+  key: 'totalDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'totalDisplay').selected
+  },
+})
+
+// 디스플레이 설정 - 치수 표시
+export const corridorDimensionSelector = selector({
+  key: 'corridorDimensionSelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
+  },
+})
+
+// 디스플레이 설정 - 화면 표시
+export const realDimensionSelector = selector({
+  key: 'realDimensionSelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
+  },
+})

src/styles/_contents.scss

@@ -1,29 +1,32 @@
 // CanvasPage
-.canvas-wrap{
+// .canvas-wrap{
-    height: calc(100vh - 47px);
+//     height: calc(100vh - 47px);
-    display: flex;
+//     display: flex;
-    flex-direction: column;
+//     flex-direction: column;
-    .canvas-content{
+//     .canvas-content{
-        flex: 1 1 auto;
+//         flex: 1 1 auto;
-        .canvas-layout{
+//         .canvas-layout{
-            height: 100%;
+//             height: 100%;
-        }
+//         }
-    }
+//     }
-    &.sub-wrap{
+//     &.sub-wrap{
-        overflow: hidden;
+//         overflow: hidden;
-        .canvas-content{
+//         .canvas-content{
-            height: calc(100% - 47px);
+//             height: calc(100% - 47px);
-        }
+//         }
-    }
+//     }
-}
+// }
 // CanvasMenu
 .canvas-menu-wrap{
-    position: relative;
+    position: fixed;
+    top: 46px;
+    left: 0;
     display: block;
     width: 100%;
     padding-bottom: 0;
     background-color: #383838;
     transition: padding .17s ease-in-out;
+    z-index: 999;
     .canvas-menu-inner{
         position: relative;
         display: flex;
@@ -302,12 +305,34 @@
 }
 
 // canvas-layout
+.canvas-content{
+    padding-top: 46.8px;
+    transition: all .17s ease-in-out;
+    .canvas-frame{
+        height: 86.3vh;
+    }
+    &.active{
+        padding-top: calc(46.8px + 50px);
+        .canvas-frame{
+            height: 81vh;
+        }
+    }
+}
 .canvas-layout{
+    padding-top: 37px;
     .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         display: flex;
         background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
+        transition: all .17s ease-in-out;
+        z-index: 999;
+        &.active{
+            top: calc(92.8px + 50px);
+        }
         .canvas-plane-wrap{
             display: flex;
             align-items: center;
@@ -383,9 +408,24 @@
 
 .canvas-frame{
     position: relative;
-    height: calc(100% - 36.5px);
+    // height: calc(100% - 36.5px);
-    background-color: #fff;
+    background-color: #F4F4F7;
+    overflow: auto;
+    transition: all .17s ease-in-out;
+    // &::-webkit-scrollbar {
+    //     width: 10px;
+    //     height: 10px;
+    //     background-color: #fff;
+    // }
+    // &::-webkit-scrollbar-thumb {
+    //     background-color: #C1CCD7;
+    //     border-radius: 30px;
+    // }
+    // &::-webkit-scrollbar-track {
+    //     background-color: #fff;
+    // }
     canvas{
+        background-color: #fff;
         position: absolute;
         top: 0;
         left: 0;
@@ -514,8 +554,6 @@
     &.estimate{
         display: flex;
         flex-direction: column;
-        height: calc(100% - 36.5px);
-        overflow-y: auto;
         padding-top: 0;
         .sub-content-inner{
             flex: 1;
@@ -1201,3 +1239,17 @@
         }
     }
 }
+
+.file-down-nodata{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 148px;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    font-size: 16px;
+    font-weight: 500;
+    color: #344356;
+}

src/styles/_main.scss

@@ -112,8 +112,8 @@
             border-radius: 6px;
             background: #FFF;
             box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
+            &.item01{flex: 1; height: 400px;}
-            &.item02{flex: none; width: 451px; max-height: 400px;}
+            &.item02{flex: none; width: 451px; height: 400px;}
             &.item03{flex: 1;}
             &.item04{flex: none; width: 351px;}
             &.item05{flex: none; width: 451px;}
@@ -566,7 +566,6 @@
                 transition: background .05s ease-in-out;
             }
         }
-    }
         input[type=checkbox]:checked + label::before{
             border-color: #A8B6C7;
             background-color: #A8B6C7;
@@ -579,6 +578,7 @@
             left: 1px;
         }
     }
+}
 
 // 회원가입
 .center-page-wrap{

src/styles/_modal.scss

@@ -5,24 +5,12 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop{
-  from {
+    from{opacity: 0; scale: 0.95;}
-    opacity: 0;
+    to{opacity: 1; scale: 1;}
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
 }
 @keyframes unmountpop{
-  from {
+    from{opacity: 1; scale: 1;}
-    opacity: 1;
+    to{opacity: 0; scale: 0.95;}
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
 }
 
 .normal-font{
@@ -38,6 +26,8 @@ $alert-color: #101010;
 
 .modal-pop-wrap{
     position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: -webkit-fit-content;
     height: -moz-fit-content;
@@ -89,10 +79,10 @@ $alert-color: #101010;
         width: 800px;
     }
     &.mount{
-    animation: mountpop 0.17s ease-in-out forwards;
+        animation: mountpop .17s ease-in-out forwards;
     }
     &.unmount{
-    animation: unmountpop 0.17s ease-in-out forwards;
+        animation: unmountpop .17s ease-in-out forwards;
     }
     &.alert{
         position: absolute;
@@ -197,7 +187,7 @@ $alert-color: #101010;
         }
     }
     .outer-line-wrap{
-    border-top: 1px solid #3c3c3c;
+        border-top: 1px solid #3C3C3C;
         margin-top: 10px;
         padding-top: 15px;
         margin-bottom: 15px;
@@ -219,7 +209,7 @@ $alert-color: #101010;
 .adsorption-point{
     display: flex;
     align-items: center;
-  background-color: #3a3a3a;
+    background-color: #3A3A3A;
     border-radius: 3px;
     padding-left: 11px;
     overflow: hidden;
@@ -240,7 +230,7 @@ $alert-color: #101010;
     &.act{
         i{
             color: $pop-color;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -260,7 +250,7 @@ $alert-color: #101010;
         display: flex;
         align-items: center;
         background-color: transparent;
-    border: 1px solid #3d3d3d;
+        border: 1px solid #3D3D3D;
         border-radius: 2px;
         padding: 15px 10px;
         gap: 20px;
@@ -287,9 +277,7 @@ $alert-color: #101010;
     }
 }
 .select-form{
-  .sort-select {
+    .sort-select{width: 100%;}
-    width: 100%;
-  }
 }
 .grid-select{
     flex: 1;
@@ -334,6 +322,7 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
     padding-bottom: 15px;
+
 }
 .grid-direction{
     display: flex;
@@ -350,17 +339,11 @@ $alert-color: #101010;
     background-position: center;
     background-size: 16px 15px;
     border-radius: 50%;
-  transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
     opacity: 0.6;
-  &.down {
+    &.down{transform: rotate(180deg);}
-    transform: rotate(180deg);
+    &.left{transform: rotate(-90deg);}
-  }
+    &.right{transform: rotate(90deg);}
-  &.left {
-    transform: rotate(-90deg);
-  }
-  &.right {
-    transform: rotate(90deg);
-  }
     &:hover,
     &.act{
         opacity: 1;
@@ -436,11 +419,10 @@ $alert-color: #101010;
     }
     &.light{
         padding: 0;
-    th,
+        th,td{
-    td {
             color: $alert-color;
             border-bottom: none;
-      border-top: 1px solid #efefef;
+            border-top: 1px solid #EFEFEF;
         }
         th{
             padding: 14px 0;
@@ -564,7 +546,7 @@ $alert-color: #101010;
         align-items: center;
         justify-content: center;
         width: 50%;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
         border-radius: 2px ;
     }
 }
@@ -572,7 +554,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide{
     font-size: $pop-normal-size;
-  color: #aaa;
+    color: #AAA;
     font-weight: $pop-normal-weight;
     margin-bottom: 14px;
 }
@@ -601,17 +583,17 @@ $alert-color: #101010;
             color: #fff;
             font-weight: 700;
             border-radius: 2px;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.green{
                 background-color: #305941;
-        border: 1px solid #45cd7d;
+                border: 1px solid #45CD7D;
                 &:hover{
                     background-color: #3a6b4e;
                 }
             }
             &.blue{
-        background-color: #2e5360;
+                background-color: #2E5360;
-        border: 1px solid #3fbae6;
+                border: 1px solid #3FBAE6;
                 &:hover{
                     background-color: #365f6e;
                 }
@@ -633,8 +615,8 @@ $alert-color: #101010;
         justify-content: center;
         width: 100%;
         padding: 13px;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
-    transition: background 0.15s ease-in-out;
+        transition: background .15s ease-in-out;
         img{
             max-width: 100%;
         }
@@ -645,17 +627,13 @@ $alert-color: #101010;
         color: $pop-color;
         margin-top: 10px;
         text-align: center;
-    transition: color 0.15s ease-in-out;
+        transition: color .15s ease-in-out;
     }
     .shape-menu-box{
         &.act,
         &:hover{
-      .shape-box {
+            .shape-box{background-color: #008BFF;}
-        background-color: #008bff;
+            .shape-title{color: #008BFF;}
-      }
-      .shape-title {
-        color: #008bff;
-      }
         }
     }
 }
@@ -670,7 +648,7 @@ $alert-color: #101010;
 }
 .discrimination-box{
     padding: 16px 12px;
-  border: 1px solid #3d3d3d;
+    border: 1px solid #3D3D3D;
     border-radius: 2px;
 }
 
@@ -703,12 +681,12 @@ $alert-color: #101010;
             align-items: center;
             justify-content: center;
             padding: 5px;
-      background-color: #3d3d3d;
+            background-color: #3D3D3D;
-      border: 1px solid #3d3d3d;
+            border: 1px solid #3D3D3D;
             border-radius: 2px;
             cursor: pointer;
             &.act{
-        border: 1px solid #ed0004;
+                border: 1px solid #ED0004;
             }
         }
         &:last-child{
@@ -807,7 +785,7 @@ $alert-color: #101010;
         border: 1px solid #646464;
         border-radius: 2px;
         padding: 0 10px;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         i{
             height: 15px;
             display: block;
@@ -815,7 +793,7 @@ $alert-color: #101010;
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.allocation01{
                 background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
                 width: 15px;
@@ -857,9 +835,9 @@ $alert-color: #101010;
     margin-bottom: 10px;
     .shape-menu-box{
         border-radius: 2px;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
         padding: 8px;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         .shape-box{
             display: flex;
             justify-content: center;
@@ -872,7 +850,7 @@ $alert-color: #101010;
         }
         &.act,
         &:hover{
-      background-color: #008bff;
+            background-color: #008BFF;
         }
     }
 }
@@ -883,32 +861,23 @@ $alert-color: #101010;
     justify-content: center;
     gap: 5px;
     padding: 5px;
-  background-color: #3d3d3d;
+    background-color: #3D3D3D;
     margin-bottom: 24px;
     .library-btn{
         width: 30px;
         height: 30px;
-    border: 1px solid #6c6c6c;
+        border: 1px solid #6C6C6C;
         border-radius: 2px;
         background-color: transparent;
         background-repeat: no-repeat;
         background-position: center;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.ico01 {
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;}
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
-      background-size: 14px 14px;
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
-    }
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 13px 17px;
-    }
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 17px 13px;
-    }
         &:hover{
-      border-color: #1083e3;
+            border-color: #1083E3;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -919,7 +888,7 @@ $alert-color: #101010;
     .plane-box{
         padding: 10px;
         border-radius: 2px;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
         .plane-box-tit{
             font-size: $pop-normal-size;
             font-weight: 600;
@@ -991,27 +960,11 @@ $alert-color: #101010;
         position: absolute;
         font-size: 12px;
         font-weight: 500;
-    color: #b1b1b1;
+        color: #B1B1B1;
-    &.top {
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
-      top: 0;
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
-      left: 50%;
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
-    }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
     }
     .plane-btn{
         position: absolute;
@@ -1023,27 +976,11 @@ $alert-color: #101010;
         background-repeat: no-repeat;
         background-position: center;
         border-radius: 50%;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.up {
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
-      top: 22px;
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
-      left: 50%;
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
-    }
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
         &:hover,
         &.act{
             background-color: #fff;
@@ -1103,7 +1040,7 @@ $alert-color: #101010;
 .warning{
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
-  color: #ffafaf;
+    color: #FFAFAF;
 }
 
 // 각 변 속성 변경
@@ -1155,157 +1092,37 @@ $alert-color: #101010;
             top: 12.5px;
             left: 50%;
             font-size: 11px;
-      color: #8b8b8b;
+            color: #8B8B8B;
             font-weight: 500;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-use-select: none;
             user-select: none;
         }
-    &:nth-child(1) {
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-      transform: rotate(180deg) translate(-50%, -50%);
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-      i {
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        transform: translateX(-50%) rotate(180deg);
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-      }
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-    }
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-    &:nth-child(2) {
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-      transform: rotate(195deg) translate(-50%, -50%);
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-      i {
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        transform: translateX(-50%) rotate(165deg);
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-      }
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-    }
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-    &:nth-child(3) {
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-      transform: rotate(210deg) translate(-50%, -50%);
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-      i {
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        transform: translateX(-50%) rotate(150deg);
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-      }
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-    }
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-    &:nth-child(4) {
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-      transform: rotate(225deg) translate(-50%, -50%);
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-      i {
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        transform: translateX(-50%) rotate(135deg);
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-      }
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-    }
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
         &.act{
             &::after{
                 content: '';
@@ -1340,6 +1157,7 @@ $alert-color: #101010;
     }
 }
 
+
 // 지붕모듈선택
 .roof-module-tab{
     display: flex;
@@ -1354,13 +1172,13 @@ $alert-color: #101010;
         border-radius: 2px;
         background-color: transparent;
         font-size: 12px;
-    color: #aaa;
+        color: #AAA;
         text-align: center;
         cursor: default;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
-      background-color: #1083e3;
+            background-color: #1083E3;
-      border: 1px solid #1083e3;
+            border: 1px solid #1083E3;
             color: #fff;
             font-weight: 500;
         }
@@ -1373,7 +1191,7 @@ $alert-color: #101010;
         background-position: center;
         background-size: cover;
         background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
             background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
         }
@@ -1399,16 +1217,14 @@ $alert-color: #101010;
                     transform: translateX(-50%);
                     width: 1px;
                     height: 6px;
-          background-color: #8b8b8b;
+                    background-color: #8B8B8B;
                 }
             }
             i{
                 top: 32px;
             }
             &.act{
-        i {
+                i{color: #8B8B8B;}
-          color: #8b8b8b;
-        }
             }
         }
     }
@@ -1440,7 +1256,7 @@ $alert-color: #101010;
         height: 30px;
         font-size: 12px;
         font-weight: 400;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &:first-child{
             border-left: 1px solid #505050;
         }
@@ -1454,7 +1270,7 @@ $alert-color: #101010;
 
 .module-table-box{
     flex: 1;
-  background-color: #3d3d3d;
+    background-color: #3D3D3D;
     border-radius: 2px;
     .module-table-inner{
         padding: 10px;
@@ -1467,7 +1283,7 @@ $alert-color: #101010;
             padding: 10px 0;
             font-size: 12px;
             color: #fff;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .eaves-keraba-table{
             width: 100%;
@@ -1490,7 +1306,7 @@ $alert-color: #101010;
     .warning-guide{
         padding: 20px;
         .warning{
-      color: #ffcaca;
+            color: #FFCACA;
             max-height: 55px;
             overflow-y: auto;
             padding-right: 30px;
@@ -1499,7 +1315,7 @@ $alert-color: #101010;
                 background-color: transparent;
             }
             &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
+                background-color: #D9D9D9;
             }
             &::-webkit-scrollbar-track {
                 background-color: transparent;
@@ -1510,7 +1326,7 @@ $alert-color: #101010;
 
 .module-self-table{
     display: table;
-  border-top: 1px solid #4d4d4d;
+    border-top: 1px solid #4D4D4D;
     border-collapse: collapse;
     width: 100%;
     .self-table-item{
@@ -1519,7 +1335,7 @@ $alert-color: #101010;
         .self-item-th{
             display: table-cell;
             vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .self-item-th{
             width: 60px;
@@ -1547,7 +1363,7 @@ $alert-color: #101010;
 .hexagonal-wrap{
     .hexagonal-item{
         padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
+        border-bottom: 1px solid #4D4D4D;
         &:first-child{
             padding-top: 0;
         }
@@ -1585,7 +1401,7 @@ $alert-color: #101010;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1603,7 +1419,7 @@ $alert-color: #101010;
     gap: 5px;
     min-height: 60px;
     padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.20);
     span{
         display: inline-flex;
         align-items: center;
@@ -1636,7 +1452,7 @@ $alert-color: #101010;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -1695,10 +1511,10 @@ $alert-color: #101010;
             height: 16px;
             &.pink{
                 border: 2px solid #ce1c9c;
-        background-color: #16417d;
+                background-color: #16417D;
             }
             &.white{
-        border: 2px solid #fff;
+                border: 2px solid #FFF;
                 background-color: #001027;
             }
         }
@@ -1723,7 +1539,7 @@ $alert-color: #101010;
             .react-colorful__pointer{
                 width: 15px;
                 height: 15px;
-        border: 4px solid #fff;
+                border: 4px solid #Fff;
             }
             .react-colorful__saturation{
                 border-radius: 2px;
@@ -1810,9 +1626,10 @@ $alert-color: #101010;
         align-items: center;
         justify-content: center;
         width: 100%;
-    height: 80px;
+        min-height: 80px;
         background-color: #fff;
     }
+    
 }
 
 // 치수선 설정
@@ -1923,22 +1740,10 @@ $alert-color: #101010;
                 border-radius: 50%;
             }
         }
-    &:nth-child(1) {
+        &:nth-child(1){ top: 0; left: 0; }
-      top: 0;
+        &:nth-child(2){ top: 0; right: 0; }
-      left: 0;
+        &:nth-child(3){ bottom: 0; left: 0; }
-    }
+        &:nth-child(4){ bottom: 0; right: 0; }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
     }
     .size-box{
         position: absolute;

src/styles/_reset.scss

@@ -3,100 +3,29 @@
     -moz-text-size-adjust:none;
     -ms-text-size-adjust:none;
     text-size-adjust: none;
-  box-sizing: content-box;
+    box-sizing: content-box
 }
-*,
+*, ::after, ::before {
-::after,
-::before {
     box-sizing: border-box;
 }
-html,
+html, body{
-body {
     width: 100%;
     height: 100%;
     font-size: 16px;
 }
-html,
+html, body, div, span, applet, object, iframe,
-body,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-div,
+a, abbr, acronym, address, big, cite, code,
-span,
+del, dfn, em, img, ins, kbd, q, s, samp,
-applet,
+small, strike, strong, sub, sup, tt, var,
-object,
+b, u, i, center,
-iframe,
+dl, dt, dd, ol, ul, li,
-h1,
+fieldset, form, label, legend,
-h2,
+table, caption, tbody, tfoot, thead, tr, th, td,
-h3,
+article, aside, canvas, details, embed, 
-h4,
+figure, figcaption, footer, header, hgroup, 
-h5,
+menu, nav, output, ruby, section, summary,
-h6,
+time, mark, audio, video {
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
 	margin: 0;
 	padding: 0;
 	border: 0;
@@ -108,38 +37,23 @@ video {
     font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article,
+article, aside, details, figcaption, figure, 
-aside,
+footer, header, hgroup, menu, nav, section {
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
 	display: block;
 }
 body {
 	line-height: 1.4;
 }
-body:first-of-type caption {
+body:first-of-type caption { display:none;}
-  display: none;
-}
 
-ol,
+ol, ul {
-ul {
 	list-style: none;
 }
-blockquote,
+blockquote, q {
-q {
 	quotes: none;
 }
-blockquote:before,
+blockquote:before, blockquote:after,
-blockquote:after,
+q:before, q:after {
-q:before,
-q:after {
 	content: '';
 	content: none;
 }
@@ -149,9 +63,7 @@ table {
     border-spacing:0;
     border:0 none;
 }
-caption,
+caption, th, td {
-th,
-td {
     text-align:left;
     font-weight: normal;
     border:0;
@@ -161,38 +73,26 @@ a {
     cursor:pointer;
     color:#000;
 }
-a,
+a, a:hover, a:active {
-a:hover,
-a:active {
     text-decoration:none;
     -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input,
+input, select, textarea, button, a, label {
-select,
-textarea,
-button,
-a,
-label {
     -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
-button,
+button,input[type=text], input[type=button] {
-input[type='text'],
-input[type='button'] {
     -webkit-appearance: none;
     -webkit-border-radius: 0;
     -webkit-appearance:none;
     appearance: none;
-  border-radius: 0;
+    border-radius: 0
 }
-input[type='checkbox'],
+input[type=checkbox], input[type=radio] {
-input[type='radio'] {
     box-sizing: border-box;
     padding: 0;
 }
-input,
+input, select, button {
-select,
-button {
     border:0 none;
     outline:none;
     margin:0;
@@ -231,53 +131,24 @@ button {
 }
 
 // margin
-.mt5 {
+.mt5{margin-top: 5px !important;}
-  margin-top: 5px !important;
+.mt10{margin-top: 10px !important;}
-}
+.mt15{margin-top: 15px !important;}
-.mt10 {
+.mb5{margin-bottom: 5px !important;}
-  margin-top: 10px !important;
+.mb10{margin-bottom: 10px !important;}
-}
+.mb15{margin-bottom: 15px !important;}
-.mt15 {
+.mr5{margin-right: 5px !important;}
-  margin-top: 15px !important;
+.mr10{margin-right: 10px !important;}
-}
+.mr15{margin-right: 15px !important;}
-.mb5 {
+.ml5{margin-left: 5px !important;}
-  margin-bottom: 5px !important;
+.ml10{margin-left: 10px !important;}
-}
+.ml15{margin-left: 15px !important;}
-.mb10 {
-  margin-bottom: 10px !important;
-}
-.mb15 {
-  margin-bottom: 15px !important;
-}
-.mr5 {
-  margin-right: 5px !important;
-}
-.mr10 {
-  margin-right: 10px !important;
-}
-.mr15 {
-  margin-right: 15px !important;
-}
-.ml5 {
-  margin-left: 5px !important;
-}
-.ml10 {
-  margin-left: 10px !important;
-}
-.ml15 {
-  margin-left: 15px !important;
-}
 
 // align
-.al-l {
+.al-l{text-align: left !important;}
-  text-align: left !important;
+.al-r{text-align: right !important;}
-}
+.al-c{text-align: center !important;}
-.al-r {
+
-  text-align: right !important;
-}
-.al-c {
-  text-align: center !important;
-}
 
 // button
 .btn-frame{
@@ -292,7 +163,7 @@ button {
     border: 1px solid #000;
     text-align: center;
     font-family: 'Pretendard', sans-serif;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     cursor: pointer;
     &.block{
         width: 100%;
@@ -305,15 +176,15 @@ button {
     }
 
     &.deepgray{
-    background-color: #2c2c2c;
+        background-color: #2C2C2C;
         border: 1px solid #484848;
     }
     &.gray{
-    background-color: #3c3c3c;
+        background-color: #3C3C3C;
         border: 1px solid #545454;
     }
     &.dark{
-    background-color: #1c1c1c;
+        background-color: #1C1C1C;
         border: 1px solid #484848;
     }
     &.modal{
@@ -322,8 +193,8 @@ button {
         border: 1px solid #484848;
         color: #aaa;
         &:hover{
-      background-color: #1083e3;
+            background-color: #1083E3;
-      border: 1px solid #1083e3;
+            border: 1px solid #1083E3;
             color: #fff;
             font-weight: 500;
         }
@@ -333,13 +204,13 @@ button {
         padding: 0 10px;
         line-height: 28px;
         font-family: 'Noto Sans JP', sans-serif;
-    background-color: #2d2d2d;
+        background-color: #2D2D2D;
         border: 1px solid #393939;
         color: #aaa;
         &.act,
         &:hover{
-      background-color: #414e6c;
+            background-color: #414E6C;
-      border: 1px solid #414e6c;
+            border: 1px solid #414E6C;
             color: #fff;
             font-weight: 500;
         }
@@ -353,11 +224,11 @@ button {
         border: 1px solid #484848;
         color: #fff;
         &.blue{
-      background-color: #414e6c;
+            background-color: #414E6C;
-      border: 1px solid #414e6c;
+            border: 1px solid #414E6C;
             &:hover{
-        background-color: #414e6c;
+                background-color: #414E6C;
-        border: 1px solid #414e6c;
+                border: 1px solid #414E6C;
             }
         }
         &.white{
@@ -384,7 +255,7 @@ button {
         font-family: 'Noto Sans JP', sans-serif;
         background-color: transparent;
         border: 1px solid #676767;
-    color: #aaaaaa;
+        color: #AAAAAA;
         &:hover{
             background-color: #272727;
             border-color: #676767;
@@ -393,8 +264,8 @@ button {
     }
     &:hover,
     &.act{
-    background-color: #1083e3;
+        background-color: #1083E3;
-    border: 1px solid #1083e3;
+        border: 1px solid #1083E3;
         color: #fff;
         font-weight: 500;
     }
@@ -424,7 +295,7 @@ button {
     color: #fff;
     font-size: 13px;
     font-weight: 400;
-  transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
     &.navy{
         background-color: #304961;
         &:hover{
@@ -432,21 +303,21 @@ button {
         }
     }
     &.grey{
-    background-color: #94a0ad;
+        background-color: #94A0AD;
         &:hover{
-      background-color: #607f9a;
+            background-color: #607F9A;
         }
     }
     &.green{
-    background-color: #a6bba8;
+        background-color: #A6BBA8;
         &:hover{
             background-color: #98af9b;
         }
     }
     &.white{
-    border: 1px solid #94a0ad;
+        border: 1px solid #94A0AD;
         background-color: #fff;
-    color: #94a0ad;
+        color: #94A0AD;
         &:hover{
             background-color: #fff;
         }
@@ -462,7 +333,7 @@ button {
     line-height: 30px;
     padding: 0 25px 0 10px;
     background-color: #373737;
-  border: 1px solid #3f3f3f;
+    border: 1px solid #3F3F3F;
     border-radius: 2px;
     border-top-left-radius: 2px;
     color: #fff;
@@ -482,7 +353,7 @@ button {
         max-height: 100px;
         overflow-y: auto;
         background-color: #373737;
-    border: 1px solid #3f3f3f;
+        border: 1px solid #3F3F3F;
         border-radius: 2px;
         transition: all 0.17s ease-in-out;
         visibility: hidden;
@@ -492,19 +363,20 @@ button {
             align-items: center;
             padding: 8px 20px;
             line-height: 1.4;
-      transition: all 0.17s ease-in-out;
+            transition: all .17s ease-in-out;
             button{
                 font-size: 12px;
                 color: #fff;
                 line-height: 1.4;
             }
             &:hover{
-        background-color: #2c2c2c;
+                background-color: #2C2C2C;
             }
         }
         &::-webkit-scrollbar {
             width: 2px;
             background-color: transparent;
+            
         }
         &::-webkit-scrollbar-thumb {
             background-color: #5a5a5a;
@@ -524,7 +396,7 @@ button {
         height: 6px;
         background: url(/static/images/common/select-arr.svg) no-repeat center;
         background-size: cover;
-    transition: all 0.17s ease-in-out;
+        transition: all .17s ease-in-out;
     }
     &.active{
         .select-item-wrap{
@@ -542,17 +414,17 @@ button {
     display: block;
     width: 100%;
     height: 30px;
-  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
     background-size: 10px 6px;
     border: 1px solid #eee;
     padding: 0 30px 0 10px;
     font-size: 13px;
-  color: #45576f;
+    color: #45576F;
     font-family: 'Noto Sans JP', sans-serif;
     cursor: pointer;
     &:disabled{
         opacity: 1;
-    background-color: #fafafa;
+        background-color: #FAFAFA;
         color: #999;
         cursor: default;
     }
@@ -568,6 +440,7 @@ button {
     }
 }
 
+
 // input
 .form-input{
     label{
@@ -578,9 +451,9 @@ button {
         margin-bottom: 10px;
     }
 }
-input[type='password'],
+input[type=password],
-input[type='number'],
+input[type=number],
-input[type='text'] {
+input[type=text]{
     &.input-origin{
         display: inline-block;
         height: 30px;
@@ -603,7 +476,7 @@ input[type='text'] {
             width: 100%;
         }
         &:read-only{
-      color: #aaa;
+            color: #AAA;
         }
         &.plane{
             font-family: 'Noto Sans JP', sans-serif;
@@ -621,25 +494,27 @@ input[type='text'] {
         background-color: #fff;
         font-family: 'Noto Sans JP', sans-serif;
         font-size: 13px;
-    color: #45576f;
+        color: #45576F;
         font-weight: normal;
-    transition: border-color 0.17s ease-in-out;
+        transition: border-color .17s ease-in-out;
         text-align: left;
         &:read-only{
-      background-color: #fafafa;
+            background-color: #FAFAFA;
             color: #999999;
         }
     }
 }
 
+
+
 // check-btn
 .check-btn{
     display: flex;
     align-items: center;
     height: 30px;
-  background-color: #3a3a3a;
+    background-color: #3A3A3A;
     border-radius: 3px;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     .check-area{
         flex: none;
         width: 30px;
@@ -676,10 +551,10 @@ input[type='text'] {
     display: block;
     height: 30px;
     border-radius: 3px;
-  background-color: #3a3a3a;
+    background-color: #3A3A3A;
     padding: 0 11px;
     text-align: left;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     span{
         position: relative;
         font-size: 12px;
@@ -713,15 +588,15 @@ input[type='text'] {
         background-color: #272727;
         border: 1px solid #484848;
         span{
-      color: #fff;
+            color: #Fff;
             &:after{
                 background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
             }
         }
         &:hover,
         &.act{
-      background-color: #1083e3;
+            background-color: #1083E3;
-      border: 1px solid #1083e3;
+            border: 1px solid #1083E3;
         }
     }
 }
@@ -731,8 +606,8 @@ input[type='text'] {
 .d-check-box{
     line-height: 1.1;
     cursor: pointer;
-  input[type='checkbox'],
+    input[type=checkbox],
-  input[type='radio'] {
+    input[type=radio]{
         position: static;
         margin-left: 0;
         cursor: pointer;
@@ -755,7 +630,7 @@ input[type='text'] {
     }
     &.light{
         label{
-      color: #45576f;
+            color: #45576F;
         }
     }
     &.no-text{
@@ -769,7 +644,7 @@ input[type='text'] {
     label{
         &::before{
             cursor: pointer;
-      content: '';
+            content: "";
             display: inline-block;
             position: absolute;
             width: 17px;
@@ -783,13 +658,11 @@ input[type='text'] {
             text-align:center;
             font-size:13px;
             line-height:1.4;
-      transition:
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
         }
         &::after{
             cursor: pointer;
-      content: '';
+            content: "";
             display: inline-block;
             position: absolute;
             width: 9px;
@@ -805,22 +678,20 @@ input[type='text'] {
             line-height:1.4;
             opacity: 0;
             visibility: hidden;
-      transition:
+            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
-        opacity 0.15s ease-in-out,
-        color 0.15s ease-in-out;
         }
     }
     &.light{
         label{
             &:before{
-        border-color: #d6d6d7;
+                border-color: #D6D6D7;
             }
             &:after{
-        background-color: #697c8f;
+                background-color: #697C8F;
             }
         }
     }
-  input[type='radio']:checked + label::after {
+    input[type=radio]:checked + label::after{
         opacity: 1;
         visibility: visible;
     }
@@ -844,12 +715,10 @@ input[type='text'] {
 // check-box
 .d-check-box{
     label{
-    &.red {
+        &.red{color: #FFCACA;}
-      color: #ffcaca;
-    }
         &::before{
             cursor: pointer;
-      content: '';
+            content: "";
             display: inline-block;
             position: absolute;
             width: 17px;
@@ -857,36 +726,32 @@ input[type='text'] {
             top: 2px;
             left: 0;
             margin-left: -12px;
-      border: 1px solid #d6d6d7;
+            border: 1px solid #D6D6D7;
             background-color: #fff;
-      transition:
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
         }
         &:after{
             cursor: pointer;
-      content: '';
+            content: "";
             display: inline-block;
             position: absolute;
             width: 16px;
             height: 16px;
             top:0;
             left: 0;
-      margin-left: -0.8rem;
+            margin-left: -.8rem;
-      transition:
+            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
-        border 0.05s ease-in-out,
-        color 0.05s ease-in-out;
         }
     }
-  input[type='checkbox']:checked + label::after {
+    input[type=checkbox]:checked + label::after{
-    content: '';
+        content: "";
         display: inline-block;
         position: absolute;
         top: 1px;
         left: -1px;
         width: 5px;
         height: 8px;
-    border: 2px solid #697c8f;
+        border: 2px solid #697C8F;
         border-left: none;
         border-top: none;
         transform: translate(7.75px,4.5px) rotate(45deg);
@@ -898,7 +763,7 @@ input[type='text'] {
                 background-color: transparent;
             }
         }
-    input[type='checkbox']:checked + label::after {
+        input[type=checkbox]:checked + label::after{
             border-color: #fff;
         }
         &.no-text{
@@ -908,25 +773,23 @@ input[type='text'] {
         }
     }
     &.sel{
-    input[type='checkbox']:checked + label {
+        input[type=checkbox]:checked + label{
-      color: #d7c863;
+            color: #D7C863;
         }
-    input[type='checkbox']:checked + label::before,
+        input[type=checkbox]:checked + label::before,
-    input[type='checkbox']:checked + label::after {
+        input[type=checkbox]:checked + label::after{
-      border-color: #d7c863;
+            border-color: #D7C863;
         }
     }
 }
 
 // date-picker
 .date-picker{
-  svg {
+    svg{display: none;}
-    display: none;
-  }
     .react-datepicker-wrapper{
         width: 100%;
     }
-  input[type='text'] {
+    input[type=text]{
         display: block;
         width: 100%;
         height: 30px;
@@ -934,7 +797,7 @@ input[type='text'] {
         border-radius: 2px;
         border: 1px solid #eee;
         font-size: 13px;
-    color: #45576f;
+        color: #45576F;
         font-weight: normal;
         font-family: 'Noto Sans JP', sans-serif;
         background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
@@ -950,17 +813,18 @@ input[type='text'] {
         height: 30px;
         min-height: unset;
         border-radius: 2px;
-    border-color: #eee;
+        border-color: #EEE;
         background-color: #fff;
         &:hover{
-      border-color: #eee;
+            border-color: #EEE;
         }
     }
     .custom__control--is-focused{
-    border-color: #eee;
+        border-color: #EEE;
         box-shadow: unset;
         &:hover{
-      border-color: #eee;
+            border-color: #EEE;
+
         }
     }
     .custom__value-container {
@@ -973,7 +837,7 @@ input[type='text'] {
     }
     .custom__single-value{
         font-size: 13px;
-    color: #45576f;
+        color: #45576F;
         font-weight: 400;
     }
     .custom__placeholder{
@@ -1010,7 +874,7 @@ input[type='text'] {
     .custom__option{
         font-size: 13px;
         padding: 7px 10px;
-    color: #45576f;
+        color: #45576F;
     }
     .custom__option--is-selected{
         color: #fff;
@@ -1018,7 +882,7 @@ input[type='text'] {
     // disable
     &.custom--is-disabled{
         .custom__control{
-      background-color: #fafafa;
+            background-color: #FAFAFA ;
         }
         .custom__single-value{
             color: #999999;