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,30 +74,34 @@ export default function ArchiveTable({ clsCode }) {
 
   return (
     <>
-      <div className="file-down-list">
+      {boardList.length > 0 ? (
-        {boardList?.map((board) => (
+        <div className="file-down-list">
-          <div key={board.noticeNo} className="file-down-item">
+          {boardList?.map((board) => (
-            <div className="file-item-info">
+            <div key={board.noticeNo} className="file-down-item">
-              <div className="item-num">
+              <div className="file-item-info">
-                {/* 번호 */}
+                <div className="item-num">
-                {board.rowNumber}
+                  {/* 번호 */}
+                  {board.rowNumber}
+                </div>
+                <div className="item-name">
+                  {/* 제목 */}
+                  {board.title}
+                </div>
+                <div className="item-date">
+                  {/* 등록일 */}
+                  {getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt}
+                </div>
               </div>
-              <div className="item-name">
+              <div className="file-down-box">
-                {/* 제목 */}
+                {/* 첨부파일 */}
-                {board.title}
+                <button type="button" className="file-down-btn" onClick={() => handleDetailFileListDown(board.noticeNo)}></button>
-              </div>
-              <div className="item-date">
-                {/* 등록일 */}
-                {getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt}
               </div>
             </div>
-            <div className="file-down-box">
+          ))}
-              {/* 첨부파일 */}
+        </div>
-              <button type="button" className="file-down-btn" onClick={() => handleDetailFileListDown(board.noticeNo)}></button>
+      ) : (
-            </div>
+        <div className="file-down-nodata">{getMessage('common.message.no.data')}</div>
-          </div>
+      )}
-        ))}
-      </div>
     </>
   )
 }

src/components/fabric/QPolygon.js

@@ -203,23 +203,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
 
       let midPoint
 
-      switch (this.direction) {
+      midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
-        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}
@@ -669,8 +678,25 @@ export default function StuffDetail() {
                                 {row.prefName}
                               </option>
                             )
+                            })}
+                            </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')
                           })}
-                        </select>
+                          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/_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,23 +800,46 @@ export function setSurfaceShapePattern(polygon) {
   ctx.strokeStyle = 'green'
   ctx.lineWidth = 0.4
 
-  for (let row = 0; row <= rows; row++) {
+  if (polygon.direction === 'east' || polygon.direction === 'west') {
-    const y = row * patternSize.height
+    offset = roofStyle === 1 ? 0 : patternSize.height / 2
-
-    ctx.beginPath()
-    ctx.moveTo(0, y) // 선 시작점
-    ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
-    ctx.stroke()
-
     for (let col = 0; col <= cols; col++) {
-      const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+      const x = col * patternSize.width
-      const yStart = row * patternSize.height
+      const yStart = 0
-      const yEnd = yStart + patternSize.height
+      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
+
+      ctx.beginPath()
+      ctx.moveTo(0, y) // 선 시작점
+      ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
+      ctx.stroke()
+
+      for (let col = 0; col <= cols; col++) {
+        const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+        const yStart = row * patternSize.height
+        const yEnd = yStart + patternSize.height
+
+        ctx.beginPath()
+        ctx.moveTo(x, yStart) // 선 시작점
+        ctx.lineTo(x, yEnd) // 선 끝점
+        ctx.stroke()
+      }
     }
   }