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

.env

@@ -1,12 +0,0 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
-# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
-#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0"
-# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority"
-# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
-DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest"

.env.development

@@ -1,10 +1,4 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. development"
-
 NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
-# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
-# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080"
-
-DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"
 
 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 

.env.production

@@ -1,9 +1,5 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. production"
-
 NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
 
-DATABASE_URL=""
-
 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
 NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"

public/static/images/common/select_del.svg

@@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/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/fabric/QPolygon.js

@@ -203,23 +203,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
       let midPoint
 
-      switch (this.direction) {
-        case 'north':
-          midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 - 30)
-          break
-        case 'west':
-          midPoint = new fabric.Point((start.x + end.x) / 2 - 30, (start.y + end.y) / 2)
-          break
-        case 'south':
-          midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 + 30)
-          break
-        case 'east':
-          midPoint = new fabric.Point((start.x + end.x) / 2 + 30, (start.y + end.y) / 2)
-          break
-        default:
       midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
-          break
-      }
 
       const degree = (Math.atan2(dy, dx) * 180) / Math.PI
 

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/object/ObjectSetting.jsx

@@ -46,6 +46,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
     heightRef: useRef(null),
     pitchRef: useRef(null),
     offsetRef: useRef(null),
+    offsetWidthRef: useRef(null),
     directionRef: useRef(null),
   }
 

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -1,8 +1,17 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
+import { forwardRef, useState } from 'react'
 
-export default function PentagonDormer() {
+const PentagonDormer = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const [direction, setDirection] = useState('down')
+  refs.directionRef.current = direction
+
+  const getDirection = (e) => {
+    setDirection(e.target.value)
+    refs.directionRef.current = e.target.value
+  }
+
   return (
     <>
       <div className="discrimination-box mb10">
@@ -18,7 +27,7 @@ export default function PentagonDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={2000} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -29,7 +38,7 @@ export default function PentagonDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={1000} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -40,18 +49,18 @@ export default function PentagonDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={4000} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
                 </div>
               </div>
               <div className="eaves-keraba-item">
-                <div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.depth')}</div>
+                <div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.width')}</div>
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={500} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -62,7 +71,7 @@ export default function PentagonDormer() {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" defaultValue={4} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
                     </div>
                     <span className="thin">寸</span>
                   </div>
@@ -80,13 +89,15 @@ export default function PentagonDormer() {
             <span className="right">{getMessage('commons.east')}</span>
             <span className="bottom">{getMessage('commons.south')}</span>
             <span className="left">{getMessage('commons.west')}</span>
-            <button className="plane-btn up"></button>
+            <button className={`plane-btn up ${direction === 'up' ? ' act' : ''}`} value="up" onClick={getDirection}></button>
-            <button className="plane-btn right"></button>
+            <button className={`plane-btn right ${direction === 'right' ? ' act' : ''}`} value="right" onClick={getDirection}></button>
-            <button className="plane-btn down act"></button>
+            <button className={`plane-btn down ${direction === 'down' ? ' act' : ''}`} value="down" onClick={getDirection}></button>
-            <button className="plane-btn left"></button>
+            <button className={`plane-btn left ${direction === 'left' ? ' act' : ''}`} value="left" onClick={getDirection}></button>
           </div>
         </div>
       </div>
     </>
   )
-}
+})
+
+export default PentagonDormer

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -5,7 +5,6 @@ import { forwardRef, useState } from 'react'
 const TriangleDormer = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [direction, setDirection] = useState('down')
-
   refs.directionRef.current = direction
 
   const getDirection = (e) => {

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/header/Header.jsx

@@ -132,7 +132,7 @@ export default function Header(props) {
           onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
         >
           {menu.children.length === 0 ? (
-            <Link key={`${menu.id}`} href={menu.url} scroll={false}>
+            <Link key={`${menu.id}`} href={menu.url}>
               {getMessage(menu.name)}
             </Link>
           ) : (
@@ -147,9 +147,7 @@ export default function Header(props) {
                       onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                       onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                     >
-                      <Link href={m.url} scroll={false}>
+                      <Link href={m.url}>{getMessage(m.name)}</Link>
-                        {getMessage(m.name)}
-                      </Link>
                     </li>
                   )
                 })}

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,9 +245,8 @@ export default function Stuff() {
         }
 
         async function fetchData() {
-          // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
+          // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
-          const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
+          const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
-
           await get({
             url: apiUrl,
           }).then((res) => {
@@ -303,8 +302,8 @@ export default function Stuff() {
       setPageNo(1)
 
       async function fetchData() {
-        const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+        // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
-        // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
         await get({ url: apiUrl }).then((res) => {
           if (!isEmptyArray(res)) {
             setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -333,8 +332,8 @@ export default function Stuff() {
     })
 
     setPageNo(1)
-    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
-    const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@@ -364,8 +363,8 @@ export default function Stuff() {
 
     setPageNo(1)
 
-    const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
-    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
     get({ url: apiUrl }).then((res) => {
       if (!isEmptyArray(res)) {
         setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })

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)
         }
       })
@@ -127,7 +126,7 @@ export default function StuffDetail() {
         }
       })
     }
-  }, [objectNo])
+  }, [objectNo, sessionState])
 
   useEffect(() => {
     if (isObjectNotEmpty(detailData)) {
@@ -303,7 +302,7 @@ export default function StuffDetail() {
       }
 
       // console.log('임시저장용::', errors)
-      setIsFormValid(Object.keys(errors).length === 0)
+      setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     } else {
       console.log('상세일때 폼체크')
     }
@@ -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,28 +357,18 @@ export default function StuffDetail() {
 
   // 발전량 시뮬레이션 변경
   const handleAreaIdOnChange = (e) => {
-    form.setValue('areaId', e.target.value)
+    form.setValue('areaId', e.areaId)
+    form.setValue('areaName', e.prefName)
   }
 
-  // useEffect(() => {
-  //   if (!isEmptyArray(areaIdList)) {
-  //     let _prefName = form.watch('prefName')
-  //     // console.log('기준풍속 가져오는 API', _prefName)
-  //     get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
-  //       // console.log('res::', res)
-  //       if (!isEmptyArray(res)) {
-  //         setWindSpeedList(res)
-  //       }
-  //     })
-  //   }
-  // }, [areaIdList])
-
   //필수값 다 입력했을때
-  const onValid = (data) => {
+  const onValid = (data, e) => {
+    const formData = form.getValues()
+    console.log('필수값 통과:::', data, formData)
+    // console.log('필수값 formData:::', formData)
     // 수정모드일때는 PUT
     // console.log('필수값 다 있고 저장')
     // console.log('data::::::', data)
-    const formData = form.getValues()
     // console.log('formData::::', formData)
     // const _dispCompanyName = watch('dispCompanyName')
     // const _objectStatusId = watch('objectStatusId')
@@ -408,6 +396,8 @@ export default function StuffDetail() {
 
   // 임시저장
   const onTempSave = async () => {
+    console.log('임시저장:::::')
+    return
     const formData = form.getValues()
     // console.log('formData::', formData)
     const params = {
@@ -487,9 +477,9 @@ export default function StuffDetail() {
                         <div className="input-wrap mr5" style={{ width: '200px' }}>
                           <input type="text" className="input-light" readOnly />
                         </div>
-                        <button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
+                        <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                           {getMessage('stuff.planReqPopup.title')}
-                        </button>
+                        </Button>
                       </div>
                     </td>
                   </tr>
@@ -555,6 +545,8 @@ export default function StuffDetail() {
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
                           <Select
+                            id="long-value-select1"
+                            instanceId="long-value-select1"
                             className="react-select-custom"
                             classNamePrefix="custom"
                             placeholder="Select"
@@ -587,6 +579,8 @@ export default function StuffDetail() {
                       <div className="flx-box">
                         <div className="select-wrap mr5" style={{ width: '567px' }}>
                           <Select
+                            id="long-value-select2"
+                            instanceId="long-value-select2"
                             className="react-select-custom"
                             classNamePrefix="custom"
                             placeholder="Select"
@@ -636,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' }}>
@@ -657,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}
@@ -671,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>
@@ -695,9 +721,9 @@ export default function StuffDetail() {
                           </select>
                         </div> */}
                         <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
-                        <button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
+                        <Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                           {getMessage('stuff.detail.btn.windSpeedPop')}
-                        </button>
+                        </Button>
                       </div>
                     </td>
                   </tr>
@@ -790,13 +816,13 @@ export default function StuffDetail() {
             </div>
             <div className="sub-table-footer">
               {!isFormValid ? (
-                <button className="btn-origin grey mr5" onClick={onTempSave}>
+                <Button className="btn-origin grey mr5" onClick={onTempSave}>
                   New화면 임시저장
-                </button>
+                </Button>
               ) : (
-                <button type="submit" className="btn-origin navy mr5">
+                <Button type="submit" className="btn-origin navy mr5">
                   NEW 화면 저장
-                </button>
+                </Button>
               )}
               <Link href="/management/stuff">
                 <button type="button" className="btn-origin grey">
@@ -827,9 +853,9 @@ export default function StuffDetail() {
                           <div className="input-wrap mr5" style={{ width: '200px' }}>
                             <input type="text" className="input-light" readOnly />
                           </div>
-                          <button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
+                          <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                             {getMessage('stuff.planReqPopup.title')}
-                          </button>
+                          </Button>
                         </div>
                       </td>
                     </tr>
@@ -920,23 +946,23 @@ export default function StuffDetail() {
                   R상세:물건목록
                 </button>
               </Link>
-              <button type="submit" className="btn-origin navy mr5">
+              <Button type="submit" className="btn-origin navy mr5">
                 R상세:저장
-              </button>
+              </Button>
-              <button type="submit" className="btn-origin navy" onClick={onDelete}>
+              <Button type="submit" className="btn-origin navy" onClick={onDelete}>
                 R상세:물건삭제
-              </button>
+              </Button>
             </>
           ) : (
             <>
               {!isFormValid ? (
-                <button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
+                <Button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
                   TEMP상세:임시저장
-                </button>
+                </Button>
               ) : (
-                <button type="submit" className="btn-origin navy mr5">
+                <Button type="submit" className="btn-origin navy mr5">
                   TEMP상세:저장
-                </button>
+                </Button>
               )}
               <Link href="/management/stuff">
                 <button type="button" className="btn-origin grey">
@@ -949,7 +975,14 @@ export default function StuffDetail() {
       )}
       {showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
       {showDesignRequestButtonValid && (
-        <PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} planReqInfo={setPlanReqInfo} />
+        <PlanRequestPop
+          setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
+          saleStoreId={form.watch('saleStoreId')}
+          saleStoreLevel={form.watch('saleStoreLevel')}
+          otherSaleStoreId={form.watch('otherSaleStoreId')}
+          otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
+          planReqInfo={setPlanReqInfo}
+        />
       )}
       {showWindSpeedButtonValid && (
         <WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />

src/components/management/StuffSearchCondition.jsx

@@ -254,6 +254,8 @@ export default function StuffSearchCondition() {
                   <div className="select-wrap">
                     {schSelSaleStoreList?.length > 0 && (
                       <Select
+                        id="long-value-select1"
+                        instanceId="long-value-select1"
                         className="react-select-custom"
                         classNamePrefix="custom"
                         placeholder="Select"

src/components/management/popup/PlanRequestPop.jsx

@@ -20,8 +20,6 @@ export default function PlanRequestPop(props) {
   const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
   const [totalCount, setTotalCount] = useState(0) //총 갯수
 
-  const sessionState = useRecoilValue(sessionStore)
-
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const [planReqObject, setPlanReqObject] = useState({})
@@ -103,10 +101,10 @@ export default function PlanRequestPop(props) {
   // 조회
   const onSubmit = (page, type) => {
     const params = {
-      saleStoreId: 'T100',
+      // saleStoreId: 'T100',
-      saleStoreLevel: '1',
+      // saleStoreLevel: '1',
-      // saleStoreId: sessionState?.storeId,
+      saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
-      // saleStoreLevel: sessionState?.storeLvl,
+      saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
       schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo,
       schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle,
       schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress,
@@ -114,8 +112,8 @@ export default function PlanRequestPop(props) {
       schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName,
       schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd,
       schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.schDateGbn : schDateGbn,
-      // schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
+      schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
-      // schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
+      schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
       startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
       endRow: type === 'S' ? 1 * pageSize : page * pageSize,
     }
@@ -124,6 +122,7 @@ export default function PlanRequestPop(props) {
     } else {
       setPageNo(page)
     }
+    // console.log(params)
 
     const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
     promiseGet({ url: apiUrl }).then((res) => {
@@ -363,6 +362,8 @@ export default function PlanRequestPop(props) {
                         <td>
                           <div className="select-wrap">
                             <Select
+                              id="long-value-select1"
+                              instanceId="long-value-select1"
                               className="react-select-custom"
                               classNamePrefix="custom"
                               ref={ref}

src/components/myInfo/UserInfoModal.jsx

@@ -150,7 +150,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.userId')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={userId} readOnly />
+                            <input type="text" className="input-light" value={userId || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -158,7 +158,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.nameKana')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.nameKana} readOnly />
+                            <input type="text" className="input-light" value={info?.nameKana || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -166,7 +166,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.name')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.name} readOnly />
+                            <input type="text" className="input-light" value={info?.name || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -235,7 +235,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.category')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.groupName} readOnly />
+                            <input type="text" className="input-light" value={info?.groupName || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -243,7 +243,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.tel')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.tel} readOnly />
+                            <input type="text" className="input-light" value={info?.tel || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -251,7 +251,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.fax')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.fax} readOnly />
+                            <input type="text" className="input-light" value={info?.fax || ''} readOnly />
                           </div>
                         </td>
                       </tr>
@@ -259,7 +259,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                         <th>{getMessage('myinfo.info.mail')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.mail} readOnly />
+                            <input type="text" className="input-light" value={info?.mail || ''} readOnly />
                           </div>
                         </td>
                       </tr>

src/hooks/object/useObjectBatch.js

@@ -4,14 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import {
+import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
-  polygonToTurfPolygon,
-  rectToPolygon,
-  triangleToPolygon,
-  pointsToTurfPolygon,
-  splitDormerTriangle,
-  setSurfaceShapePattern,
-} from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -211,11 +204,13 @@ export function useObjectBatch() {
     const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER
     const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP
     const height = dormerPlacement.heightRef.current.value / 10
+    const width = dormerPlacement.widthRef.current.value / 10
     const pitch = dormerPlacement.pitchRef.current.value
-    const directionRef = dormerPlacement.directionRef.current
     const offsetRef = dormerPlacement.offsetRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetRef.current.value) / 10
+    const offsetWidthRef = dormerPlacement.offsetWidthRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetWidthRef.current.value) / 10
+    const directionRef = dormerPlacement.directionRef.current
 
-    let dormer, dormerOffset, isDown, selectedSurface
+    let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints
 
     console.log('dormerPlacement', dormerPlacement)
 
@@ -229,8 +224,6 @@ export function useObjectBatch() {
       const bottomLength = height / (pitch * 0.25)
       const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)
 
-      console.log(bottomOffsetLength)
-
       addCanvasMouseEventListener('mouse:move', (e) => {
         isDown = true
         if (!isDown) return
@@ -305,16 +298,16 @@ export function useObjectBatch() {
 
       addCanvasMouseEventListener('mouse:up', (e) => {
         if (dormer) {
-          // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
-          // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
+          const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
-          // //지붕 밖으로 그렸을때
+          //지붕 밖으로 그렸을때
-          // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
+          if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
-          //   swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+            swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
-          //   //일단 지워
+            //일단 지워
-          //   deleteTempObjects()
+            deleteTempObjects()
-          //   return
+            return
-          // }
+          }
 
           //각도 추가
           let originAngle = 0 //기본 남쪽
@@ -387,6 +380,183 @@ export function useObjectBatch() {
           drawDirectionArrow(leftTriangle)
           drawDirectionArrow(rightTriangle)
 
+          isDown = false
+          initEvent()
+        }
+      })
+    } else if (buttonAct === 4) {
+      const heightLength = height - (width / 2) * (pitch * 0.25)
+      //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸)
+      const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
+
+      addCanvasMouseEventListener('mouse:move', (e) => {
+        isDown = true
+        if (!isDown) return
+
+        canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === dormerTempName)) //움직일때 일단 지워가면서 움직임
+        const pointer = canvas.getPointer(e.e)
+
+        surfaceShapePolygons.forEach((surface) => {
+          if (surface.inPolygon({ x: pointer.x, y: pointer.y })) {
+            selectedSurface = surface
+          }
+        })
+
+        let angle = 0
+        if (directionRef === 'left') {
+          //서
+          angle = 90
+        } else if (directionRef === 'right') {
+          //동
+          angle = 270
+        } else if (directionRef === 'up') {
+          //북
+          angle = 180
+        }
+
+        pentagonPoints = [
+          { x: pointer.x, y: pointer.y },
+          { x: pointer.x - width / 2, y: pointer.y + (height - heightLength) },
+          { x: pointer.x - width / 2, y: pointer.y + height },
+          { x: pointer.x + width / 2, y: pointer.y + height },
+          { x: pointer.x + width / 2, y: pointer.y + (height - heightLength) },
+        ]
+
+        pentagonOffsetPoints = [
+          { x: pointer.x, y: pointer.y },
+          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef },
+          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef },
+          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+        ]
+
+        dormer = new QPolygon(pentagonPoints, {
+          fill: 'white',
+          stroke: 'red',
+          strokeDashArray: [5, 5],
+          strokeWidth: 1,
+          selectable: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockRotation: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          name: dormerTempName,
+          originX: 'center',
+          originY: 'top',
+          angle: angle,
+        })
+        canvas?.add(dormer)
+
+        if (offsetRef > 0 || offsetWidthRef > 0) {
+          dormerOffset = new QPolygon(pentagonOffsetPoints, {
+            fill: 'gray',
+            stroke: 'red',
+            strokeDashArray: [5, 5],
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: dormerTempName,
+            originX: 'center',
+            originY: 'top',
+            angle: angle,
+          })
+          canvas?.add(dormerOffset)
+        }
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        if (dormer) {
+          // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
+
+          // //지붕 밖으로 그렸을때
+          // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
+          //   swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+          //   //일단 지워
+          //   deleteTempObjects()
+          //   return
+          // }
+
+          //각도 추가
+          let originAngle = 0 //기본 남쪽
+          let direction = 'south'
+
+          if (directionRef === 'left') {
+            //서
+            originAngle = 90
+            direction = 'west'
+          } else if (directionRef === 'right') {
+            //동
+            originAngle = 270
+            direction = 'east'
+          } else if (directionRef === 'up') {
+            //북
+            originAngle = 180
+            direction = 'north'
+          }
+
+          const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
+          let splitedPentagon =
+            offsetRef > 0 || offsetWidthRef > 0
+              ? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
+              : splitDormerPentagon(dormer, directionRef, offsetMode)
+          canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer)
+
+          if (offsetRef > 0)
+            dormer.set({
+              name: dormerName,
+              stroke: 'black',
+              strokeWidth: 1,
+              strokeDashArray: [0],
+            }) //오프셋이 있을땐 같이 도머로 만든다
+
+          const leftPentagon = new QPolygon(splitedPentagon[0], {
+            fill: 'transparent',
+            stroke: 'red',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          const rightPentagon = new QPolygon(splitedPentagon[1], {
+            fill: 'transparent',
+            stroke: 'red',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          canvas?.add(leftPentagon)
+          canvas?.add(rightPentagon)
+
+          //패턴
+          setSurfaceShapePattern(leftPentagon)
+          setSurfaceShapePattern(rightPentagon)
+          //방향
+          drawDirectionArrow(leftPentagon)
+          drawDirectionArrow(rightPentagon)
+
           isDown = false
           initEvent()
         }
@@ -408,8 +578,140 @@ export function useObjectBatch() {
     initEvent() //이벤트 초기화
   }
 
+  const splitDormerTriangle = (triangle, direction) => {
+    const halfWidth = triangle.width / 2
+
+    let leftPoints = []
+    let rightPoints = []
+
+    if (direction === 'down') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
+        { x: triangle.left, y: triangle.top + triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left, y: triangle.top + triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
+      ]
+    } else if (direction === 'up') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
+        { x: triangle.left, y: triangle.top - triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left, y: triangle.top - triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
+      ]
+    } else if (direction === 'left') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
+        { x: triangle.left - triangle.height, y: triangle.top },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
+      ]
+    } else if (direction === 'right') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+      ]
+    }
+
+    return [leftPoints, rightPoints]
+  }
+
+  const splitDormerPentagon = (pentagon, direction, offsetMode) => {
+    const points = pentagon.points
+
+    console.log(pentagon.points)
+
+    let leftPoints = []
+    let rightPoints = []
+
+    if (direction === 'down') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[1].x, y: points[1].y },
+        { x: points[2].x, y: points[2].y },
+        { x: points[0].x, y: points[3].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x, y: points[2].y },
+        { x: points[3].x, y: points[3].y },
+        { x: points[4].x, y: points[4].y },
+      ]
+    } else if (direction === 'up') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[1].x, y: points[0].y - (points[1].y - points[0].y) },
+        { x: points[2].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[3].x, y: points[0].y - (points[1].y - points[0].y) },
+        { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
+      ]
+    } else if (direction === 'left') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
+      ]
+    } else if (direction === 'right') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
+      ]
+    }
+
+    console.log(leftPoints, rightPoints)
+
+    return [leftPoints, rightPoints]
+  }
+
   return {
     applyOpeningAndShadow,
     applyDormers,
+    splitDormerTriangle,
+    splitDormerPentagon,
   }
 }

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/roofcover/useWallLineOffsetSetting.js

@@ -1,4 +1,4 @@
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useRecoilValue } from 'recoil'
 import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
@@ -21,6 +21,8 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
   const arrow1Ref = useRef(null)
   const arrow2Ref = useRef(null)
 
+  const currentObject = useRecoilValue(currentObjectState)
+
   const [isLoading, setIsLoading] = useState(false)
 
   const drawLine = (point1, point2, idx, direction = currentWallLineRef.current.direction) => {
@@ -87,6 +89,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
     if (!isLoading) {
       return
     }
+    canvas?.discardActiveObject()
     removeOuterLineEditCircle()
     addCanvasMouseEventListener('mouse:down', mouseDown)
     if (type === TYPES.WALL_LINE_EDIT) {
@@ -94,6 +97,20 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
     }
   }, [type])
 
+  useEffect(() => {
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'outerLine')
+      .forEach((line) => {
+        line.set({ stroke: 'black' })
+      })
+
+    if (currentObject?.name === 'outerLine') {
+      currentObject.set({ stroke: '#EA10AC' })
+      canvas.renderAll()
+    }
+  }, [currentObject])
+
   const removeOuterLineEditCircle = () => {
     canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'outerLineEditCircleStart' || obj.name === 'outerLineEditCircleEnd'))
   }
@@ -106,7 +123,6 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
     }
 
     currentWallLineRef.current = e.target
-    console.log(currentWallLineRef.current.idx, currentWallLineRef.current.direction)
     if (type === TYPES.WALL_LINE_EDIT) {
       addCircleByLine(currentWallLineRef.current)
     }

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/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/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/_main.scss

@@ -1,24 +1,24 @@
 // background img
-.background-bord{
+.background-bord {
   position: absolute;
   top: 46px;
   left: 0;
   width: 100%;
   height: 280px;
-    background: url(../../public/static/images/main/main_background.png)no-repeat center;
+  background: url(../../public/static/images/main/main_background.png) no-repeat center;
   background-size: cover;
   z-index: 0;
 }
 
 // main-wrap
-.main-contents{
+.main-contents {
   position: relative;
   z-index: 1;
   padding-bottom: 15px;
 }
 
 // contents
-.store-id-wrap{
+.store-id-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,12 +26,12 @@
   padding: 33.5px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   background-color: rgba(255, 255, 255, 0.05);
-    .store-id-title{
+  .store-id-title {
     position: relative;
     padding-left: 32px;
     font-size: 13px;
     color: #fff;
-        &::before{
+    &::before {
       content: '';
       position: absolute;
       top: 50%;
@@ -39,16 +39,16 @@
       transform: translateY(-50%);
       width: 20px;
       height: 20px;
-            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
+      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
     }
   }
-    .store-arr{
+  .store-arr {
     display: block;
     width: 7px;
     height: 10px;
     background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
   }
-    .store-id-name{
+  .store-id-name {
     font-size: 16px;
     color: #fff;
     font-weight: 600;
@@ -56,28 +56,28 @@
 }
 
 // main-search-form
-.main-search-wrap{
+.main-search-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 45px 0;
-    .search-raido-wrap{
+  .search-raido-wrap {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-right: 30px;
   }
 }
-.search-input-box{
+.search-input-box {
   display: flex;
   align-items: center;
   width: 580px;
   height: 45px;
   border-radius: 100px;
   padding: 0 20px;
-    border: 1px solid rgba(255, 255, 255, 0.30);
+  border: 1px solid rgba(255, 255, 255, 0.3);
-    background: rgba(31, 31, 31, 0.30);
+  background: rgba(31, 31, 31, 0.3);
-    .main-search{
+  .main-search {
     flex: 1;
     height: 100%;
     font-size: 13px;
@@ -87,7 +87,7 @@
     border: none;
     font-family: 'Noto Sans JP', sans-serif;
   }
-    .search-icon{
+  .search-icon {
     width: 20px;
     height: 100%;
     background-image: url(../../public/static/images/main/main_search.svg);
@@ -98,82 +98,107 @@
 }
 
 // main-contents-inner
-.main-product-list-wrap{
+.main-product-list-wrap {
   max-width: 1400px;
   margin: 0 auto;
-    .main-product-list{
+  .main-product-list {
     display: flex;
     gap: 24px;
     margin-bottom: 24px;
-        .product-item{
+    .product-item {
       display: flex;
       flex-direction: column;
       padding: 40px;
       border-radius: 6px;
-            background: #FFF;
+      background: #fff;
       box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
+      &.item01 {
-            &.item02{flex: none; width: 451px; max-height: 400px;}
+        flex: 1;
-            &.item03{flex: 1;}
+        height: 400px;
-            &.item04{flex: none; width: 351px;}
+      }
-            &.item05{flex: none; width: 451px;}
+      &.item02 {
-            .product-item-title-wrap{
+        flex: none;
+        width: 451px;
+        height: 400px;
+      }
+      &.item03 {
+        flex: 1;
+      }
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
+      .product-item-title-wrap {
         display: flex;
         align-items: center;
-                .product-item-title{
+        .product-item-title {
           display: flex;
           align-items: center;
           font-size: 16px;
           color: #101010;
           font-weight: 600;
-                    .item-logo{
+          .item-logo {
             display: block;
             width: 40px;
             height: 40px;
             border-radius: 50px;
-                        background: #14324F;
+            background: #14324f;
             margin-right: 12px;
             background-repeat: no-repeat;
             background-size: 22px 22px;
             background-position: center;
-                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
+            &.ico01 {
-                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
+              background-image: url(../../public/static/images/main/product_ico01.svg);
-                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
+            }
-                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
+            &.ico02 {
-                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
             }
           }
-                .more-btn{
+        }
+        .more-btn {
           display: block;
           width: 20px;
           height: 20px;
           margin-left: auto;
-                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
+          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
         }
       }
-            .product-item-content{
+      .product-item-content {
         margin-top: 30px;
         overflow: hidden;
-                .recently-list{
+        .recently-list {
-                    .recently-item{
+          .recently-item {
-                        border: 1px solid #F2F2F2;
+            border: 1px solid #f2f2f2;
             background-color: transparent;
             padding: 29.9px 20px;
             margin-bottom: 5px;
             cursor: pointer;
-                        .item-inner{
+            .item-inner {
               display: flex;
               align-items: center;
-                            span{
+              span {
                 position: relative;
                 display: block;
                 font-size: 13px;
                 color: #101010;
                 font-weight: 400;
                 padding: 0 10px;
-                                &.time{
+                &.time {
                   padding-left: 22px;
-                                    &::before{
+                  &::before {
                     content: '';
                     position: absolute;
                     top: 50%;
@@ -181,11 +206,11 @@
                     transform: translateY(-50%);
                     width: 14px;
                     height: 14px;
-                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
+                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
                     background-size: cover;
                   }
                 }
-                                &:after{
+                &:after {
                   content: '';
                   position: absolute;
                   top: 50%;
@@ -193,30 +218,30 @@
                   transform: translateY(-50%);
                   width: 1px;
                   height: 10px;
-                                    background-color: #BBB;
+                  background-color: #bbb;
                 }
-                                &:last-child{
+                &:last-child {
-                                    &:after{
+                  &:after {
                     display: none;
                   }
                 }
               }
             }
-                        &:last-child{
+            &:last-child {
               margin-bottom: 5px;
             }
           }
         }
-                .notice-box{
+        .notice-box {
           height: 100%;
           overflow-y: auto;
-                    .notice-day{
+          .notice-day {
             font-size: 13px;
             color: #666;
             font-weight: 400;
             margin-bottom: 7px;
           }
-                    .notice-title{
+          .notice-title {
             font-size: 14px;
             color: #101010;
             font-weight: 600;
@@ -224,16 +249,16 @@
             line-height: 24px;
             word-break: keep-all;
           }
-                    .notice-contents{
+          .notice-contents {
             font-size: 12px;
             color: #666;
             font-weight: 400;
             line-height: 22px;
-                        span{
+            span {
               position: relative;
               display: block;
               padding-left: 10px;
-                            &::before{
+              &::before {
                 content: '';
                 position: absolute;
                 top: 10px;
@@ -245,19 +270,25 @@
               }
             }
           }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
+          &::-webkit-scrollbar {
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+            width: 4px; /* 스크롤바의 너비 */
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
           }
-                .faq-item{
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
+        }
+        .faq-item {
           position: relative;
           margin-bottom: 10px;
           cursor: pointer;
-                    .faq-item-inner{
+          .faq-item-inner {
             display: flex;
             align-items: center;
 
-                        .faq-num{
+            .faq-num {
               flex: none;
               padding: 7px 12.5px;
               font-size: 13px;
@@ -267,7 +298,7 @@
               border: 1px solid rgba(242, 242, 242, 0.95);
               margin-right: 20px;
             }
-                        .faq-title{
+            .faq-title {
               width: 0;
               flex: 1 1 auto;
               font-size: 13px;
@@ -278,7 +309,7 @@
               text-overflow: ellipsis;
               overflow: hidden;
             }
-                        .faq-day{
+            .faq-day {
               position: absolute;
               top: 50%;
               right: 0;
@@ -288,29 +319,29 @@
               font-weight: 400;
             }
           }
-                    &:last-child{
+          &:last-child {
             margin-bottom: 0;
           }
         }
-                .data-download-wrap{
+        .data-download-wrap {
           width: 100%;
-                    .data-down{
+          .data-down {
             display: block;
             width: 100%;
             padding: 20px;
             text-align: left;
             border-radius: 4px;
-                        background-color: #697C8F;
+            background-color: #697c8f;
             margin-bottom: 5px;
-                        transition: background .17s ease-in-out;
+            transition: background 0.17s ease-in-out;
-                        span{
+            span {
               position: relative;
               display: block;
               padding-right: 30px;
               font-size: 13px;
               color: #fff;
               font-weight: 400;
-                            &:after{
+              &:after {
                 content: '';
                 position: absolute;
                 top: 50%;
@@ -318,34 +349,39 @@
                 transform: translateY(-50%);
                 width: 18px;
                 height: 16px;
-                                background: url(../../public/static/images/main/download.svg)no-repeat center;
+                background: url(../../public/static/images/main/download.svg) no-repeat center;
                 background-size: cover;
               }
             }
-                        &:last-child{
+            &:last-child {
               margin-bottom: 0;
             }
-                        &:hover{
+            &:hover {
               background-color: #859eb6;
             }
           }
         }
-                .contact-info-list{
+        .contact-info-list {
           padding: 25px 30px;
           border-radius: 4px;
-                    background-color: #F4F4F7;
+          background-color: #f4f4f7;
-                    .info-item{
+          .info-item {
             display: flex;
             align-items: center;
             padding: 15px 0;
             border-bottom: 1px solid #fff;
-                        &:first-child{padding-top: 0;}
+            &:first-child {
-                        &:last-child{padding-bottom: 0; border: none;}
+              padding-top: 0;
-                        .icon-box{
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
+            .icon-box {
               display: flex;
               margin-right: 12px;
             }
-                        .infor-data{
+            .infor-data {
               font-size: 13px;
               color: #101010;
               font-weight: 500;
@@ -354,14 +390,14 @@
         }
       }
     }
-        &:last-child{
+    &:last-child {
       margin-bottom: 0;
     }
   }
 }
 
 // loginpage
-.login-wrap{
+.login-wrap {
   position: relative;
   width: 100%;
   min-height: 100vh;
@@ -370,59 +406,59 @@
   justify-content: center;
   background: url(../../public/static/images/main/login_bg.png) no-repeat center;
   background-size: cover;
-    .login-inner{
+  .login-inner {
     max-width: 500px;
     width: 100%;
     margin: 0 auto;
-        .login-logo{
+    .login-logo {
       display: block;
       margin-bottom: 25px;
     }
-        .login-input-frame{
+    .login-input-frame {
       padding: 40px 50px;
       border-radius: 6px;
       background: rgba(255, 255, 255, 0.97);
       box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            .login-frame-tit{
+      .login-frame-tit {
         font-size: 18px;
         color: #364864;
         font-weight: 400;
         padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
+        border-bottom: 1px solid #e5e9ef;
-                span{
+        span {
           display: block;
           font-weight: 600;
           margin-bottom: 5px;
         }
-                &.pw-reset{
+        &.pw-reset {
           font-size: 13px;
         }
       }
-            .login-input-wrap{
+      .login-input-wrap {
         margin-top: 30px;
-                .login-area{
+        .login-area {
           position: relative;
           display: flex;
           align-items: center;
-                    border: 1px solid #E5E9EF;
+          border: 1px solid #e5e9ef;
           height: 45px;
           padding-left: 40px;
           padding-right: 15px;
           margin-bottom: 15px;
-                    .login-input{
+          .login-input {
             flex: 1;
             height: 100%;
             background-color: transparent;
             font-size: 13px;
             font-weight: 400;
             color: #6c819c;
-                        &::placeholder{
+            &::placeholder {
               font-size: 13px;
               font-weight: 400;
-                            color: #D1D7E0;
+              color: #d1d7e0;
             }
           }
-                    &::before{
+          &::before {
             content: '';
             position: absolute;
             top: 50%;
@@ -432,81 +468,81 @@
             height: 12px;
             background-size: cover;
           }
-                    button{
+          button {
             width: 20px;
             height: 100%;
             background-repeat: no-repeat;
             background-position: center;
           }
-                    &.id{
+          &.id {
-                        &::before{
+            &::before {
-                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
+              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
             }
-                        .id-delete{
+            .id-delete {
               background-image: url(../../public/static/images/main/id_delete.svg);
               background-size: 17px 17px;
             }
           }
-                    &.email{
+          &.email {
-                        &::before{
+            &::before {
-                            background: url(../../public/static/images/main/login_email.svg)no-repeat center;
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
               width: 12px;
               height: 9px;
             }
-                        .id-delete{
+            .id-delete {
               background-image: url(../../public/static/images/main/id_delete.svg);
               background-size: 17px 17px;
             }
           }
-                    &.password{
+          &.password {
             margin-bottom: 20px;
-                        &::before{
+            &::before {
-                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
+              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
             }
-                        .password-hidden{
+            .password-hidden {
               background-image: url(../../public/static/images/main/password_hidden.svg);
               background-size: 19px 13px;
-                            &.visible{
+              &.visible {
                 background-image: url(../../public/static/images/main/password_visible.svg);
               }
             }
           }
         }
-                .login-btn{
+        .login-btn {
           display: block;
           width: 100%;
           height: 45px;
-                    background-color: #5C6773;
+          background-color: #5c6773;
           color: #fff;
           font-size: 15px;
           font-weight: 600;
           border-radius: 4px;
-                    transition: background .15s ease-in-out;
+          transition: background 0.15s ease-in-out;
-                    &:hover{
+          &:hover {
             background-color: #717e8d;
           }
-                    &.light{
+          &.light {
             background-color: #fff;
-                        border: 1px solid #5C6773;
+            border: 1px solid #5c6773;
-                        color: #5C6773;
+            color: #5c6773;
           }
         }
-                .login-btn-box{
+        .login-btn-box {
           margin-bottom: 20px;
         }
-                .pwreset-btn-box{
+        .pwreset-btn-box {
           display: flex;
         }
-                .reset-password{
+        .reset-password {
           width: 100%;
           text-align: center;
-                    button{ 
+          button {
             position: relative;
             font-size: 13px;
             color: #364864;
             font-weight: 400;
             padding-right: 16px;
-                        &::before{
+            &::before {
               content: '';
               position: absolute;
               top: calc(50% + 1px);
@@ -514,13 +550,13 @@
               transform: translateY(-50%);
               width: 6px;
               height: 8px;
-                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
+              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
             }
           }
         }
       }
     }
-        .login-guide-wrap{
+    .login-guide-wrap {
       position: relative;
       margin-left: 10px;
       margin-top: 30px;
@@ -528,19 +564,19 @@
       font-size: 13px;
       color: #fff;
       line-height: 24px;
-            a{
+      a {
         color: #fff;
         font-weight: 600;
         text-decoration: underline;
       }
-            span{
+      span {
         position: absolute;
         top: 0;
         left: 0;
       }
     }
   }
-    .login-copyright{
+  .login-copyright {
     position: absolute;
     bottom: 40px;
     left: 50%;
@@ -551,101 +587,100 @@
   }
 }
 
-.d-check-box{
+.d-check-box {
-    &.login{
+  &.login {
     margin-bottom: 25px;
-        label{
+    label {
       padding-left: 20px;
       color: #364864;
-            &:before{
+      &:before {
         width: 22px;
         height: 22px;
         top: -1px;
-                border-color: #A8B6C7;
+        border-color: #a8b6c7;
         border-radius: 3px;
-                transition: background .05s ease-in-out;
+        transition: background 0.05s ease-in-out;
       }
     }
+    input[type='checkbox']:checked + label::before {
+      border-color: #a8b6c7;
+      background-color: #a8b6c7;
     }
-    input[type=checkbox]:checked + label::before{
+    input[type='checkbox']:checked + label::after {
-        border-color: #A8B6C7;
-        background-color: #A8B6C7;
-    }
-    input[type=checkbox]:checked + label::after{
       border-color: #fff;
       width: 7px;
       height: 11px;
       top: -2px;
       left: 1px;
     }
+  }
 }
 
 // 회원가입
-.center-page-wrap{
+.center-page-wrap {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   min-height: 100vh;
-    background-color: #F4F4F7;
+  background-color: #f4f4f7;
   overflow-x: hidden;
-    .center-page-inner{
+  .center-page-inner {
     width: 100%;
     max-width: 1720px;
     margin: 0 auto;
-        .center-page-tit{
+    .center-page-tit {
       font-size: 18px;
       font-weight: 600;
       color: #101010;
       margin-bottom: 24px;
     }
-        .sub-table-box{
+    .sub-table-box {
-            &.signup{
+      &.signup {
         margin-bottom: 20px;
       }
     }
-        .sign-up-btn-wrap{
+    .sign-up-btn-wrap {
       display: flex;
       justify-content: flex-end;
     }
-        &.complete{
+    &.complete {
       max-width: 1000px;
     }
   }
-    
 }
 
 // 회원가입 완료
-.complete-box-wrap{
+.complete-box-wrap {
   padding: 72px 80px;
-    .complete-tit{
+  .complete-tit {
     font-size: 18px;
     font-weight: 600;
     color: #101010;
     margin-bottom: 17px;
   }
-    .complete-txt{
+  .complete-txt {
     font-size: 13px;
     font-weight: 400;
     color: #101010;
     margin-bottom: 27px;
   }
-    .complete-email-wrap{
+  .complete-email-wrap {
     padding: 36px 30px;
     border-radius: 2px;
-        background: #F4F4F7;
+    background: #f4f4f7;
     margin-bottom: 20px;
-        .email-info{
+    .email-info {
       font-size: 13px;
       font-weight: 400;
       color: #000;
-            span{
+      span {
-                color: #204AF4;
+        color: #204af4;
         font-weight: 500;
       }
     }
   }
-    .complete-btn{
+  .complete-btn {
     display: flex;
     justify-content: flex-end;
   }

src/styles/_reset.scss

@@ -981,16 +981,18 @@ input[type='text'] {
     color: #bbbbbb;
     font-weight: 400;
   }
-  .custom__clear-indicator,
-  .custom__indicator-separator {
-    display: none;
-  }
   .custom__indicator {
     padding: 0;
     svg {
       display: none;
     }
   }
+  .custom__clear-indicator {
+    width: 30px;
+    height: 100%;
+    background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+    background-size: 8px 8px;
+  }
   .custom__dropdown-indicator {
     width: 30px;
     height: 100%;

src/util/canvas-util.js

@@ -744,67 +744,6 @@ export const polygonToTurfPolygon = (polygon) => {
   )
 }
 
-export const splitDormerTriangle = (triangle, direction) => {
-  const halfWidth = triangle.width / 2
-
-  let leftPoints = []
-  let rightPoints = []
-  let leftPointOffset = []
-  let rightPointOffset = []
-
-  if (direction === 'down') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
-      { x: triangle.left, y: triangle.top + triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left, y: triangle.top + triangle.height },
-      { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
-    ]
-  } else if (direction === 'up') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
-      { x: triangle.left, y: triangle.top - triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left, y: triangle.top - triangle.height },
-      { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
-    ]
-  } else if (direction === 'left') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
-      { x: triangle.left - triangle.height, y: triangle.top },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
-    ]
-  } else if (direction === 'right') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
-    ]
-  }
-
-  return [leftPoints, rightPoints]
-}
-
 export const triangleToPolygon = (triangle) => {
   const points = []
   const halfWidth = triangle.width / 2
@@ -853,7 +792,7 @@ export function setSurfaceShapePattern(polygon) {
   patternSourceCanvas.width = polygon.width * ratio
   patternSourceCanvas.height = polygon.height * ratio
   const ctx = patternSourceCanvas.getContext('2d')
-  const offset = roofStyle === 1 ? 0 : patternSize.width / 2
+  let offset = roofStyle === 1 ? 0 : patternSize.width / 2
 
   const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
   const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
@@ -861,6 +800,28 @@ export function setSurfaceShapePattern(polygon) {
   ctx.strokeStyle = 'green'
   ctx.lineWidth = 0.4
 
+  if (polygon.direction === 'east' || polygon.direction === 'west') {
+    offset = roofStyle === 1 ? 0 : patternSize.height / 2
+    for (let col = 0; col <= cols; col++) {
+      const x = col * patternSize.width
+      const yStart = 0
+      const yEnd = patternSourceCanvas.height
+      ctx.beginPath()
+      ctx.moveTo(x, yStart) // 선 시작점
+      ctx.lineTo(x, yEnd) // 선 끝점
+      ctx.stroke()
+
+      for (let row = 0; row <= rows; row++) {
+        const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
+        const xStart = col * patternSize.width
+        const xEnd = xStart + patternSize.width
+        ctx.beginPath()
+        ctx.moveTo(xStart, y) // 선 시작점
+        ctx.lineTo(xEnd, y) // 선 끝점
+        ctx.stroke()
+      }
+    }
+  } else {
     for (let row = 0; row <= rows; row++) {
       const y = row * patternSize.height
 
@@ -880,6 +841,7 @@ export function setSurfaceShapePattern(polygon) {
         ctx.stroke()
       }
     }
+  }
 
   // 패턴 생성
   const pattern = new fabric.Pattern({