Merge branch 'dev' into dev-yj

public/static/images/canvas/arr_btn_ico_white.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.5L3.5 4L1 1.5" stroke="white" stroke-width="1.5"/>
+</svg>

public/static/images/canvas/ico-flx01.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 8.875L7 1.375M7 8.875C6.47483 8.875 5.49365 7.37927 5.125 7M7 8.875C7.52517 8.875 8.50635 7.37927 8.875 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 10.375C13 12.2365 12.6115 12.625 10.75 12.625H3.25C1.3885 12.625 1 12.2365 1 10.375" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/static/images/canvas/ico-flx02.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Icon" d="M3.625 12.25V8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H9.625C10.0392 8.125 10.375 8.46079 10.375 8.875V12.625M8.875 4L4.375 4C3.96079 4 3.625 3.66421 3.625 3.25L3.625 1M12.6234 3.62342L10.3766 1.37658C10.1355 1.13546 9.80844 1 9.46745 1H2.28571C1.57563 1 1 1.57563 1 2.28571V11.7143C1 12.4244 1.57563 13 2.28571 13H11.7143C12.4244 13 13 12.4244 13 11.7143V4.53255C13 4.19156 12.8645 3.86454 12.6234 3.62342Z" stroke="white" stroke-linecap="round"/>
+</g>
+</svg>

public/static/images/canvas/ico-flx03.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Vector" d="M11.8055 1V2.87932C11.8055 3.05563 11.5851 3.13545 11.4722 3C10.3736 1.7725 8.777 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

public/static/images/canvas/ico-flx04.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 1705" d="M9.99992 5.2C9.99853 3.42574 9.97165 2.50673 9.45523 1.87746C9.3555 1.75593 9.24407 1.64451 9.12254 1.54478C8.45873 1 7.47249 1 5.5 1C3.52751 1 2.54127 1 1.87746 1.54477C1.75593 1.6445 1.64451 1.75593 1.54478 1.87746C1 2.54127 1 3.52751 1 5.5C1 7.47249 1 8.45873 1.54477 9.12254C1.6445 9.24406 1.75593 9.35549 1.87746 9.45522C2.50672 9.97165 3.42574 9.99852 5.2 9.99992" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M8.20019 4.69995C7.92405 4.69995 7.70019 4.92381 7.70019 5.19995C7.70019 5.47609 7.92405 5.69995 8.20019 5.69995V4.69995ZM10.0002 5.69995C10.2763 5.69995 10.5002 5.47609 10.5002 5.19995C10.5002 4.92381 10.2763 4.69995 10.0002 4.69995V5.69995ZM5.7002 8.19995C5.7002 7.92381 5.47634 7.69995 5.2002 7.69995C4.92405 7.69995 4.7002 7.92381 4.7002 8.19995H5.7002ZM4.7002 9.99995C4.7002 10.2761 4.92405 10.5 5.2002 10.5C5.47634 10.5 5.7002 10.2761 5.7002 9.99995H4.7002ZM6.74147 5.69571C7.01527 5.6598 7.20812 5.40874 7.17222 5.13494C7.13631 4.86114 6.88525 4.66829 6.61145 4.7042L6.74147 5.69571ZM5.65369 5.57581L5.33604 5.18967L5.33604 5.18967L5.65369 5.57581ZM4.70999 6.30149C4.65561 6.57222 4.831 6.83578 5.10173 6.89016C5.37247 6.94454 5.63602 6.76915 5.6904 6.49841L4.70999 6.30149ZM12.51 6.49841C12.5644 6.76915 12.8279 6.94454 13.0987 6.89016C13.3694 6.83578 13.5448 6.57222 13.4904 6.30149L12.51 6.49841ZM12.5467 5.57581L12.2291 5.96194L12.2291 5.96194L12.5467 5.57581ZM11.5889 4.7042C11.3151 4.66829 11.0641 4.86114 11.0282 5.13494C10.9923 5.40874 11.1851 5.6598 11.4589 5.69571L11.5889 4.7042ZM11.4589 12.5042C11.1851 12.5401 10.9923 12.7912 11.0282 13.065C11.0641 13.3388 11.3151 13.5316 11.5889 13.4957L11.4589 12.5042ZM12.5467 12.6241L12.8644 13.0102L12.5467 12.6241ZM13.4904 11.8984C13.5448 11.6277 13.3694 11.3641 13.0987 11.3097C12.8279 11.2554 12.5644 11.4308 12.51 11.7015L13.4904 11.8984ZM5.6904 11.7015C5.63603 11.4308 5.37247 11.2554 5.10173 11.3097C4.831 11.3641 4.65561 11.6277 4.70999 11.8984L5.6904 11.7015ZM5.65369 12.6241L5.97133 12.238L5.97133 12.238L5.65369 12.6241ZM6.61145 13.4957C6.88525 13.5316 7.13631 13.3388 7.17222 13.065C7.20812 12.7912 7.01527 12.5401 6.74147 12.5042L6.61145 13.4957ZM8.2002 12.5C7.92405 12.5 7.7002 12.7238 7.7002 13C7.7002 13.2761 7.92405 13.5 8.2002 13.5V12.5ZM10.0002 13.5C10.2763 13.5 10.5002 13.2761 10.5002 13C10.5002 12.7238 10.2763 12.5 10.0002 12.5V13.5ZM13.5002 8.19995C13.5002 7.92381 13.2763 7.69995 13.0002 7.69995C12.7241 7.69995 12.5002 7.92381 12.5002 8.19995H13.5002ZM12.5002 9.99995C12.5002 10.2761 12.7241 10.5 13.0002 10.5C13.2763 10.5 13.5002 10.2761 13.5002 9.99995H12.5002ZM8.20019 5.69995H10.0002V4.69995H8.20019V5.69995ZM4.7002 8.19995V9.99995H5.7002V8.19995H4.7002ZM6.61145 4.7042C6.11761 4.76895 5.68947 4.89892 5.33604 5.18967L5.97133 5.96194C6.12045 5.83927 6.33772 5.74865 6.74147 5.69571L6.61145 4.7042ZM5.6904 6.49841C5.7466 6.21864 5.83549 6.07369 5.97133 5.96194L5.33604 5.18967C4.97719 5.48487 4.79851 5.86077 4.70999 6.30149L5.6904 6.49841ZM13.4904 6.30149C13.4019 5.86077 13.2232 5.48487 12.8644 5.18967L12.2291 5.96194C12.3649 6.07369 12.4538 6.21864 12.51 6.49841L13.4904 6.30149ZM11.4589 5.69571C11.8627 5.74865 12.0799 5.83927 12.2291 5.96194L12.8644 5.18967C12.5109 4.89892 12.0828 4.76895 11.5889 4.7042L11.4589 5.69571ZM11.5889 13.4957C12.0828 13.4309 12.5109 13.301 12.8644 13.0102L12.2291 12.238C12.0799 12.3606 11.8627 12.4513 11.4589 12.5042L11.5889 13.4957ZM12.51 11.7015C12.4538 11.9813 12.3649 12.1262 12.2291 12.238L12.8644 13.0102C13.2232 12.715 13.4019 12.3391 13.4904 11.8984L12.51 11.7015ZM4.70999 11.8984C4.79851 12.3391 4.97719 12.715 5.33604 13.0102L5.97133 12.238C5.83548 12.1262 5.7466 11.9813 5.6904 11.7015L4.70999 11.8984ZM6.74147 12.5042C6.33771 12.4512 6.12045 12.3606 5.97133 12.238L5.33604 13.0102C5.68947 13.301 6.11761 13.4309 6.61145 13.4957L6.74147 12.5042ZM8.2002 13.5H10.0002V12.5H8.2002V13.5ZM12.5002 8.19995V9.99995H13.5002V8.19995H12.5002Z" fill="white"/>
+</g>
+</svg>

src/components/Roof2.jsx

@@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen
 import InitSettingsModal from './InitSettingsModal'
 import GridSettingsModal from './GridSettingsModal'
 import { SurfaceShapeModal } from '@/components/ui/SurfaceShape'
-import { drawDirectionStringToArrow } from '@/util/qpolygon-utils'
+import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils'
 import ThumbnailList from '@/components/ui/ThumbnailLIst'
 import ObjectPlacement from '@/components/ui/ObjectPlacement'
 
@@ -627,6 +627,18 @@ export default function Roof2(props) {
   const setDirectionStringToArrow = () => {
     drawDirectionStringToArrow(canvas, globalCampass)
   }
+
+  const setAllGableRoof = () => {
+    let offset = Number(prompt('gable roof offset', '50'))
+    if (!isNaN(offset) && offset > 0) {
+      const polygon = canvas?.getObjects()
+      console.log('gable roof offset : ', offset)
+      console.log('polygon : ', polygon)
+      changeAllGableRoof(polygon, offset, canvas)
+    } else {
+      alert('offset 은 0 보다 커야 함')
+    }
+  }
   return (
     <>
       {canvas && (
@@ -753,6 +765,9 @@ export default function Roof2(props) {
                 </Button>
               </>
             )}
+            <Button className={'m-1 p-2'} onClick={setAllGableRoof}>
+              팔작지붕
+            </Button>
             <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
               저장
             </Button>

src/components/auth/Login.jsx

@@ -37,22 +37,41 @@ export default function Login(props) {
       pwd: formData.get('password'),
     }
 
-    await post({ url: '/api/login/v1.0/login', data: param }).then((res) => {
+    // await post({ url: '/api/login/v1.0/login', data: param }).then((res) => {
-      if (res) {
+    //   if (res) {
-        if (res.result.resultCode == 'S') {
+    //     if (res.result.resultCode == 'S') {
-          // console.log('res.data', res.data)
+    //       // console.log('res.data', res.data)
-          // 비밀번호 초기화가 필요한 경우
+    //       // 비밀번호 초기화가 필요한 경우
-          // if (res.data.pwdInitYn != 'Y') {
+    //       // if (res.data.pwdInitYn != 'Y') {
-          //   alert('비밀번호 초기화가 필요한 경우')
+    //       //   alert('비밀번호 초기화가 필요한 경우')
-          // } else {
+    //       // } else {
-          setSession(res.data)
+    //       setSession(res.data)
-          redirect('/')
+    //       redirect('/')
-          // }
+    //       // }
-        } else {
+    //     } else {
-          alert(res.result.resultMsg)
+    //       alert(res.result.resultMsg)
-        }
+    //     }
-      }
+    //   }
+    // })
+
+    // 임시 로그인 처리
+    setSession({
+      userId: 'NEW016610',
+      saleStoreId: null,
+      name: null,
+      mail: null,
+      tel: null,
+      storeId: 'TEMP02',
+      userNm: 'ㅇㅇ6610',
+      userNmKana: '신규사용자 16610',
+      category: '인상6610',
+      telNo: '336610',
+      fax: null,
+      email: 't10t@naver.com',
+      pwdInitYn: 'N',
     })
+    redirect('/')
+    // 임시 로그인 처리 끝
   }
 
   // 비밀번호 초기화 관련

src/components/fabric/QLine.js

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
-import { getDirection, getDirectionByPoint } from '@/util/canvas-util'
+import { getDirectionByPoint } from '@/util/canvas-util'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -52,6 +52,8 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     })
 
     this.on('modified', (e) => {
+      this.startPoint = { x: this.x1, y: this.y1 }
+      this.endPoint = { x: this.x2, y: this.y2 }
       this.addLengthText()
     })
 

src/components/fabric/QPolygon.js

@@ -2,15 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import {
+import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils'
-  calculateAngle,
-  drawDirectionArrow,
-  drawHippedRoof,
-  drawPolygonArrow,
-  inPolygon,
-  splitPolygonWithLines,
-  toGeoJSON,
-} from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
@@ -738,6 +730,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.addLengthText()
   },
   divideLine() {
-    splitPolygonWithLines(this)
+    // splitPolygonWithLines(this)
   },
 })

src/components/floor-plan/CanvasFrame.jsx

@@ -8,7 +8,7 @@ export default function CanvasFrame() {
   useEvent()
 
   return (
-    <div className="canvas-frame">
+    <div className="canvas-frame" style={{ display: 'flex', justifyContent: 'center' }}>
       <canvas ref={canvasRef} id={'canvas'}></canvas>
     </div>
   )

src/components/floor-plan/CanvasMenu.jsx

@@ -1,11 +1,16 @@
 'use client'
 import { useState } from 'react'
 import MenuDepth01 from './MenuDepth01'
+import { useRecoilState } from 'recoil'
+import { modalState } from '@/store/modalAtom'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
 
-export default function CanvasMenu({ setModalOpen }) {
+export default function CanvasMenu() {
+  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
   const [menuNumber, setMenuNumber] = useState(null)
   const [vertical, setVertical] = useState(true)
+  const { getMessage } = useMessage()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const onClickNav = (number) => {
     setMenuNumber(number)
@@ -14,83 +19,127 @@ export default function CanvasMenu({ setModalOpen }) {
     }
   }
   return (
-    <div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ''}`}>
+    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
       <div className="canvas-menu-inner">
         <ul className="canvas-menu-list">
           <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
             <button>
-              <span className="menu-icon con00"></span>配置面 初期設定
+              <span className="menu-icon con00"></span>
+              {getMessage('plan.menu.plan.drawing')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
             <button>
-              <span className="menu-icon con01"></span>配置面 初期設定
+              <span className="menu-icon con01"></span>
+              {getMessage('plan.menu.placement.surface.initial.setting')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
             <button>
-              <span className="menu-icon con02"></span>配置面 初期設定
+              <span className="menu-icon con02"></span>
+              {getMessage('plan.menu.root.cover')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
             <button>
-              <span className="menu-icon con03"></span>配置面
+              <span className="menu-icon con03"></span>
+              {getMessage('plan.menu.placement.surface')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
             <button>
-              <span className="menu-icon con04"></span>モジュール回路構成
+              <span className="menu-icon con04"></span>
+              {getMessage('plan.menu.module.circuit.setting')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
             <button>
-              <span className="menu-icon con06"></span>見積
+              <span className="menu-icon con06"></span>
+              {getMessage('plan.menu.estimate')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
             <button>
-              <span className="menu-icon con05"></span>発展シミュレーション
+              <span className="menu-icon con05"></span>
+              {getMessage('plan.menu.simulation')}
             </button>
           </li>
         </ul>
         <div className="canvas-side-btn-wrap">
-          <div className="btn-from">
+          {menuNumber !== 6 && menuNumber !== 5 && (
-            <button className="btn01 "></button>
+            <>
-            <button className="btn02 active"></button>
+              <div className="btn-from">
-            <button className="btn03"></button>
+                <button className="btn01"></button>
-          </div>
+                <button className="btn02 active"></button>
-          <div className="vertical-horizontal">
+                <button className="btn03 "></button>
-            <span>垂直水平モード</span>
+              </div>
-            <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
+              <div className={`vertical-horizontal ${vertical ? 'on' : ''}`}>
-          </div>
+                <span>{getMessage('plan.mode.vertical.horizontal')}</span>
-          <div className="select-box">
+                <button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
-            <QSelectBox title={'瓦53A'} option={SelectOption} />
+              </div>
-          </div>
+              <div className="select-box">
-          <div className="btn-from">
+                <QSelectBox title={'瓦53A'} option={SelectOption} />
-            <button className="btn04" onClick={() => setModalOpen('option')}></button>
+              </div>
-            <button className="btn05"></button>
+              <div className="btn-from">
-            <button className="btn06"></button>
+                <button className="btn04" onClick={() => setModalOption({ ...modalOption, option: true })}></button>
-          </div>
+                <button className="btn05"></button>
-          <div className="size-control">
+                <button className="btn06"></button>
-            <button className="control-btn minus"></button>
+              </div>
-            <span>100%</span>
+              <div className="size-control">
-            <button className="control-btn plus"></button>
+                <button className="control-btn minus"></button>
-          </div>
+                <span>100%</span>
-          <div className="btn-from">
+                <button className="control-btn plus"></button>
-            <button className="btn07"></button>
+              </div>
-            <button className="btn08"></button>
+              <div className="btn-from">
-            <button className="btn09"></button>
+                <button className="btn07"></button>
-          </div>
+                <button className="btn08"></button>
+                <button className="btn09"></button>
+              </div>
+            </>
+          )}
+
+          {menuNumber === 5 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx act">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.estimate.roof.alloc')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico02"></span>
+                  <span>{getMessage('plan.menu.estimate.save')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico03"></span>
+                  <span>{getMessage('plan.menu.estimate.reset')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico04"></span>
+                  <span>{getMessage('plan.menu.estimate.copy')}</span>
+                </button>
+              </div>
+            </>
+          )}
+          {menuNumber === 6 && (
+            <>
+              <div className="ico-btn-from">
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.excel')}</span>
+                </button>
+                <button className="btn-frame gray ico-flx">
+                  <span className="ico ico01"></span>
+                  <span>{getMessage('plan.menu.simulation.pdf')}</span>
+                </button>
+              </div>
+            </>
+          )}
         </div>
       </div>
-      <div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
+      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
-        {menuNumber === 0 && <MenuDepth01 />}
-        {menuNumber === 1 && <MenuDepth01 />}
         {menuNumber === 2 && <MenuDepth01 />}
         {menuNumber === 3 && <MenuDepth01 />}
         {menuNumber === 4 && <MenuDepth01 />}
-        {menuNumber === 5 && <MenuDepth01 />}
-        {menuNumber === 6 && <MenuDepth01 />}
       </div>
     </div>
   )

src/components/floor-plan/FloorPlan.jsx

@@ -1,9 +1,10 @@
 'use client'
 
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
-import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import SettingModal01 from '@/components/floor-plan/modal/settoing01/SettingModal01'
 import { useState } from 'react'
+import CanvasLayout from '@/components/floor-plan/CanvasLayout'
+import '@/styles/contents.scss'
 
 export default function FloorPlan() {
   const [modalOpen, setModalOpen] = useState('option')

src/components/floor-plan/MenuDepth01.jsx

@@ -1,8 +1,10 @@
 'use client'
 
 import { ToggleonMouse } from '@/components/header/Header'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function MenuDepth01() {
+  const { getMessage } = useMessage()
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
@@ -30,7 +32,7 @@ export default function MenuDepth01() {
       </ul>
       <ul className="canvas-depth2-btn-list">
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
-          <button>屋根面の割り当て</button>
+          <button>{getMessage('plan.menu.estimate.roof.alloc')}</button>
         </li>
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>
           <button>屋根材の設定と変更</button>

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

@@ -1,9 +1,11 @@
 import { useRecoilState } from 'recoil'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function FirstOption() {
   const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState)
   const { option1, option2 } = settingsModalOptions
+  const { getMessage } = useMessage()
   const onClickOption = (option) => {
     option.selected = !option.selected
 
@@ -13,23 +15,23 @@ export default function FirstOption() {
   return (
     <>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
+        <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
           {settingsModalOptions?.option1?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
-              <span className="title-area">{item.name}</span>
+              <span className="title-area">{getMessage(item.name)}</span>
             </button>
           ))}
         </div>
       </div>
       <div className="modal-check-btn-wrap">
-        <h3 className="check-wrap-title">画面表示</h3>
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
           {settingsModalOptions?.option2?.map((item) => (
             <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
               <span className="check-area"></span>
-              <span className="title-area">{item.name}</span>
+              <span className="title-area">{getMessage(item.name)}</span>
             </button>
           ))}
         </div>

src/components/floor-plan/modal/settoing01/SettingModal01.jsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import SecondOption from '@/components/floor-plan/modal/settoing01/SecondOption'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function SettingModal01({ modalOpen, setModalOpen }) {
   const [buttonAct, setButtonAct] = useState(1)
@@ -15,12 +16,13 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
       setClose(false)
     }, 180)
   }
+  const { getMessage } = useMessage()
 
   return (
     <WithDraggable isShow={true}>
       <div className={`modal-pop-wrap sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
         <div className="modal-head">
-          <h1 className="title">Canvas設定</h1>
+          <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
           <button className="modal-close" onClick={HandleClickClose}>
             닫기
           </button>
@@ -28,11 +30,11 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
         <div className="modal-body">
           <div className="modal-btn-wrap">
             <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => setButtonAct(1)}>
-              ディスプレイ設定
+              {getMessage('modal.canvas.setting.display')}
             </button>
 
             <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
-              フォントと図面サイズの設定
+              {getMessage('modal.canvas.setting.font.plan')}
             </button>
           </div>
           {buttonAct === 1 && <FirstOption />}

src/components/header/Header.jsx

@@ -2,6 +2,7 @@
 import Link from 'next/link'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePathname } from 'next/navigation'
+import { useMessage } from '@/hooks/useMessage'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -19,6 +20,7 @@ export const ToggleonMouse = (e, act, target) => {
 }
 
 export default function Header() {
+  const { getMessage } = useMessage()
   const pathName = usePathname()
   if (pathName.includes('login') || pathName.includes('join')) {
     return null
@@ -39,28 +41,28 @@ export default function Header() {
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <Link href={'#'}>ホームへ</Link>
+                <Link href={'#'}>{getMessage('header.menus.home')}</Link>
               </li>
               <li
                 className="nav-item"
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <button>物品及び図面管理</button>
+                <button>{getMessage('header.menus.management')}</button>
                 <ul className="nav-depth2">
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>新規物件登録</Link>
+                    <Link href={'#'}>{getMessage('header.menus.management.stuff')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>モノ/図面管理</Link>
+                    <Link href={'#'}>{getMessage('header.menus.management.plan')}</Link>
                   </li>
                 </ul>
               </li>
@@ -69,28 +71,28 @@ export default function Header() {
                 onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                 onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
               >
-                <button>コミュニティ</button>
+                <button>{getMessage('header.menus.community')}</button>
                 <ul className="nav-depth2">
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>お知らせ</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.notice')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>FAQ</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.faq')}</Link>
                   </li>
                   <li
                     className="nav-depth2-item"
                     onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                     onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                   >
-                    <Link href={'#'}>素材のダウンロード</Link>
+                    <Link href={'#'}>{getMessage('header.menus.community.archive')}</Link>
                   </li>
                 </ul>
               </li>
@@ -102,13 +104,13 @@ export default function Header() {
             <button className="profile">Kim Ji Young</button>
           </div>
           <div className="sign-out-box">
-            <button className="sign-out">ログアウト</button>
+            <button className="sign-out">{getMessage('header.logout')}</button>
           </div>
           <div className="select-box">
             <QSelectBox title={'Q.ORDER'} option={SelectOption} />
           </div>
           <div className="btn-wrap">
-            <button className="btn-frame small dark">移動</button>
+            <button className="btn-frame small dark">{getMessage('header.go')}</button>
           </div>
         </div>
       </div>

src/hooks/useMode.js

@@ -1509,6 +1509,7 @@ export function useMode() {
         return { x1: point.x, y1: point.y }
       }),
     )
+    roof.name = 'roofBase'
     roof.setWall(polygon)
     setRoof(roof)
     setWall(polygon)

src/locales/ja.json

@@ -1,6 +1,70 @@
 {
   "hi": "こんにちは",
   "welcome": "환영합니다. {0}님",
+  "header.menus.home": "ホームへv",
+  "header.menus.management": "物品及び図面管理",
+  "header.menus.management.stuff": "新規物件登録",
+  "header.menus.management.plan": "モノ/図面管理",
+  "header.menus.community": "コミュニティ",
+  "header.menus.community.notice": "お知らせ",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "素材のダウンロード",
+  "header.logout": "ログアウト",
+  "header.go": "移動",
+  "header.online.warranty.system": "オンライン保証シ",
+  "header.stem": "ステム",
+  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
+  "plan.menu.root.cover": "지붕덮개",
+  "plan.menu.root.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline": "외벽선",
+  "modal.cover.outline.right.angle": "직각",
+  "modal.cover.outline2": "이구배",
+  "modal.cover.outline.angle": "각도",
+  "modal.cover.outline.diagonal": "대각선",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.fix": "외벽선 확정",
+  "plan.menu.root.cover.roof.setting": "屋根形状設定",
+  "plan.menu.root.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.root.cover.sub.line": "補助線を描",
+  "plan.menu.placement.surface": "配置面",
+  "plan.menu.placement.surface.drawing": "배치면 그리기",
+  "plan.menu.placement.surface.surface": "면형상 배치",
+  "plan.menu.placement.surface.object": "오브젝트 배치",
+  "plan.menu.module.circuit.setting": "モジュール回路構成",
+  "plan.menu.module.circuit.setting.default": "기본 설정",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "plan.menu.estimate": "見積",
+  "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "plan.menu.estimate.save": "保存",
+  "plan.menu.estimate.reset": "初期化",
+  "plan.menu.estimate.copy": "コピー",
+  "plan.menu.simulation": "発展シミュレーション",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "垂直水平モード",
+  "modal.canvas.setting": "Canvas設定",
+  "modal.canvas.setting.display": "ディスプレイ設定",
+  "modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
+  "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.display": "画面表示",
+  "modal.canvas.setting.first.option.border": "ボーダーのみ",
+  "modal.canvas.setting.first.option.line": "ラインハッチ",
+  "modal.canvas.setting.first.option.all": "All painted",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
   "common.message.noData": "表示するデータがありません",
@@ -88,18 +152,14 @@
   "common.message.writeToConfirm": "作成解除を実行しますか？",
   "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
   "common.message.no.edit.save": "この文書は変更できません。",
-
   "common.require": "필수",
-
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
-
   "login": "로그인",
   "login.init_password.btn": "비밀번호 초기화 ja",
   "login.init_password.title": "비밀번호 초기화",
   "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
   "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
-
   "join.title": "Q.CAST3 로그인ID 발행 신청",
   "join.sub1.title": "판매대리점 정보",
   "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
@@ -141,7 +201,6 @@
   "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
   "join.complete.email_comment": "담당자 이메일 주소",
   "join.complete.email": "test@naver.com",
-
   "stuff.gridHeader.lastEditDatetime": "갱신일시",
   "stuff.gridHeader.objectNo": "물건번호",
   "stuff.gridHeader.planTotCnt": "플랜 수",

src/locales/ko.json

@@ -1,6 +1,70 @@
 {
   "hi": "안녕하세요",
   "welcome": "환영합니다. {0}님",
+  "header.menus.home": "Home",
+  "header.menus.management": "물건 및 도면 관리",
+  "header.menus.management.stuff": "신규 물건 등록",
+  "header.menus.management.plan": "사물/도면 관리",
+  "header.menus.community": "커뮤니티",
+  "header.menus.community.notice": "공지",
+  "header.menus.community.faq": "FAQ",
+  "header.menus.community.archive": "자료 다운로드",
+  "header.logout": "로그아웃",
+  "header.go": "이동",
+  "header.online.warranty.system": "온라인 보증 시스템",
+  "header.stem": "Stem",
+  "plan.menu.plan.drawing": "도면작성",
+  "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
+  "plan.menu.root.cover": "지붕덮개",
+  "plan.menu.root.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline.drawing": "외벽선 그리기",
+  "modal.cover.outline": "외벽선",
+  "modal.cover.outline.right.angle": "직각",
+  "modal.cover.outline2": "이구배",
+  "modal.cover.outline.angle": "각도",
+  "modal.cover.outline.diagonal": "대각선",
+  "modal.cover.outline.setting": "설정",
+  "modal.cover.outline.length": "길이",
+  "modal.cover.outline.arrow": "방향(화살표)",
+  "modal.cover.outline.fix": "외벽선 확정",
+  "plan.menu.root.cover.roof.setting": "지붕형상 설정",
+  "plan.menu.root.cover.roof.edit": "지붕형상 편집",
+  "plan.menu.root.cover.sub.line": "보조선 그리기",
+  "plan.menu.placement.surface": "배치면",
+  "plan.menu.placement.surface.drawing": "배치면 그리기",
+  "plan.menu.placement.surface.surface": "면형상 배치",
+  "plan.menu.placement.surface.object": "오브젝트 배치",
+  "plan.menu.module.circuit.setting": "모듈,회로 구성",
+  "plan.menu.module.circuit.setting.default": "기본 설정",
+  "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
+  "plan.menu.estimate": "견적서",
+  "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "plan.menu.estimate.save": "저장",
+  "plan.menu.estimate.reset": "초기화",
+  "plan.menu.estimate.copy": "복사",
+  "plan.menu.simulation": "발전 시뮬레이션",
+  "plan.menu.simulation.excel": "Excel",
+  "plan.menu.simulation.pdf": "PDF",
+  "plan.mode.vertical.horizontal": "수직 수평 모드",
+  "modal.canvas.setting": "Canvas 설정",
+  "modal.canvas.setting.display": "디스플레이 설정",
+  "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
+  "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.",
+  "modal.canvas.setting.first.option.alloc": "할당표시",
+  "modal.canvas.setting.first.option.outline": "외벽선표시",
+  "modal.canvas.setting.first.option.plan": "도면표시",
+  "modal.canvas.setting.first.option.roof.line": "지붕선표시",
+  "modal.canvas.setting.first.option.grid": "그리드표시",
+  "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시",
+  "modal.canvas.setting.first.option.word": "문자 표시",
+  "modal.canvas.setting.first.option.trestle": "가대 표시",
+  "modal.canvas.setting.first.option.flow": "흐름방향 표시",
+  "modal.canvas.setting.first.option.total": "집계표 표시",
+  "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시",
+  "modal.canvas.setting.first.option.display": "화면 표시",
+  "modal.canvas.setting.first.option.border": "테두리만",
+  "modal.canvas.setting.first.option.line": "라인해치",
+  "modal.canvas.setting.first.option.all": "All painted",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
   "common.message.noData": "No data to display",
@@ -88,18 +152,14 @@
   "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
   "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
   "common.message.no.edit.save": "This document cannot be changed.",
-
   "common.require": "필수",
-
   "site.name": "Q.CAST III",
   "site.sub_name": "태양광 발전 시스템 도면관리 사이트",
-
   "login": "로그인",
   "login.init_password.btn": "비밀번호 초기화",
   "login.init_password.title": "비밀번호 초기화",
   "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.",
   "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.",
-
   "join.title": "Q.CAST3 로그인ID 발행 신청",
   "join.sub1.title": "판매대리점 정보",
   "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)",
@@ -141,7 +201,6 @@
   "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
   "join.complete.email_comment": "담당자 이메일 주소",
   "join.complete.email": "test@naver.com",
-
   "stuff.gridHeader.lastEditDatetime": "갱신일시",
   "stuff.gridHeader.objectNo": "물건번호",
   "stuff.gridHeader.planTotCnt": "플랜 수",

src/store/canvasAtom.js

@@ -29,8 +29,8 @@ export const fontSizeState = atom({
 export const canvasSizeState = atom({
   key: 'canvasSize',
   default: {
-    vertical: 1500,
+    vertical: 1000,
-    horizontal: 1500,
+    horizontal: 1600,
   },
 })
 

src/store/settingAtom.js

@@ -4,22 +4,22 @@ export const settingModalFirstOptionsState = atom({
   key: 'settingModalFirstOptions',
   default: {
     option1: [
-      { id: 1, name: '割り当て表示', selected: false },
+      { id: 1, name: 'modal.canvas.setting.first.option.alloc', selected: false },
-      { id: 2, name: '実寸表示', selected: false },
+      { id: 2, name: 'modal.canvas.setting.first.option.outline', selected: false },
-      { id: 3, name: '図面表示', selected: false },
+      { id: 3, name: 'modal.canvas.setting.first.option.plan', selected: false },
-      { id: 4, name: '寸法表示なし', selected: false },
+      { id: 4, name: 'modal.canvas.setting.first.option.roof.line', selected: false },
-      { id: 5, name: 'グリッド表示', selected: false },
+      { id: 5, name: 'modal.canvas.setting.first.option.grid', selected: false },
-      { id: 6, name: '架台表示', selected: false },
+      { id: 6, name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
-      { id: 7, name: '文字表示', selected: false },
+      { id: 7, name: 'modal.canvas.setting.first.option.word', selected: false },
-      { id: 8, name: '座標表示', selected: false },
+      { id: 8, name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 9, name: '流れ方向表示', selected: false },
+      { id: 9, name: 'modal.canvas.setting.first.option.flow', selected: false },
-      { id: 10, name: '図面切替表示', selected: false },
+      { id: 10, name: 'modal.canvas.setting.first.option.total', selected: false },
-      { id: 11, name: 'ü廊下寸法表示', selected: false },
+      { id: 11, name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
     ],
     option2: [
-      { id: 1, name: 'ボーダーのみ', selected: false },
+      { id: 1, name: 'modal.canvas.setting.first.option.border', selected: false },
-      { id: 2, name: 'ラインハッチ', selected: false },
+      { id: 2, name: 'modal.canvas.setting.first.option.line', selected: false },
-      { id: 3, name: 'All painted', selected: false },
+      { id: 3, name: 'modal.canvas.setting.first.option.all', selected: false },
     ],
   },
   dangerouslyAllowMutability: true,

src/styles/_contents.scss

@@ -131,7 +131,7 @@
           transition: all .17s ease-in-out;
 
           &.btn01 {
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
           }
 
           &.btn02 {
@@ -139,7 +139,7 @@
           }
 
           &.btn03 {
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
           }
 
           &.btn04 {
@@ -176,6 +176,39 @@
         }
       }
 
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        button {
+          .ico {
+            display: block;
+            width: 14px;
+            height: 14px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+
+            &.ico01 {
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+            }
+
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
+          }
+        }
+      }
+
       .vertical-horizontal {
         display: flex;
         min-width: 170px;
@@ -200,6 +233,13 @@
           font-weight: 400;
           color: #fff;
           padding: 0 7.5px;
+          transition: all .17s ease-in-out;
+        }
+
+        &.on {
+          button {
+            background-color: #1083E3;
+          }
         }
       }
 

src/styles/_reset.scss

@@ -149,7 +149,7 @@ button {
 // button
 .btn-frame {
   display: inline-block;
-  padding: 0 10px;
+  padding: 0 9px;
   height: 34px;
   line-height: 34px;
   border-radius: 2px;
@@ -201,6 +201,7 @@ button {
     }
   }
 
+  &:hover,
   &.act {
     background-color: #1083E3;
     border: 1px solid #1083E3;
@@ -212,6 +213,20 @@ button {
     display: block;
     width: 100%;
   }
+
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+
+    .ico {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
 }
 
 // select
@@ -293,6 +308,16 @@ button {
 }
 
 // input
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
+
 input[type=text] {
   &.input-origin {
     display: inline-block;
@@ -305,9 +330,15 @@ input[type=text] {
     font-weight: 500;
     font-family: 'Pretendard', sans-serif;
     padding: 0 10px;
+    letter-spacing: 0px;
 
     &::placeholder {
       font-size: 12px;
+      letter-spacing: 0px;
+    }
+
+    &.block {
+      width: 100%;
     }
   }
 }
@@ -428,4 +459,24 @@ input[type=text] {
       }
     }
   }
+
+  &.dark {
+    text-align: center;
+    background-color: #272727;
+    border: 1px solid #484848;
+
+    span {
+      color: #Fff;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+      }
+    }
+
+    &:hover,
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+    }
+  }
 }

src/styles/common.scss

@@ -1,2 +1,3 @@
 @import 'fonts.scss';
-@import 'reset.scss';
+@import 'reset.scss';
+@import '_layout.scss';

src/styles/contents.scss

@@ -0,0 +1,2 @@
+@import '_contents.scss';
+@import '_modal.scss';

src/util/qpolygon-utils.js

@@ -967,6 +967,11 @@ export const splitPolygonWithLines = (polygon) => {
   const roofs = []
   const allLines = [...polygon.innerLines]
 
+  allLines.forEach((line) => {
+    line.startPoint = { x: line.x1, y: line.y1 }
+    line.endPoint = { x: line.x2, y: line.y2 }
+  })
+
   // allLines에 x1,y1,x2,y2를 비교해서 중복되는 값을 제거한다.
   allLines.forEach((line, index) => {
     const startPoint = line.startPoint
@@ -1207,7 +1212,7 @@ const drawRoofRidge = (polygon, chon) => {
 
   const walls = polygon.wall.lines // 외벽의 라인
   const roofs = polygon.lines // 지붕의 라인
-  const ridgeWall = []
+  let ridgeWall = []
   walls.forEach((wall, index) => {
     let currentRoof, prevWall, currentWall, nextWall
 
@@ -1227,7 +1232,7 @@ const drawRoofRidge = (polygon, chon) => {
       nextWall = walls[index + 1]
     }
 
-    if (getLineDirection(prevWall) !== getLineDirection(nextWall) && currentWall.length < currentRoof.length) {
+    if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) {
       ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length })
     }
   })
@@ -1503,6 +1508,7 @@ const drawRoofRidge = (polygon, chon) => {
             fontSize: polygon.fontSize,
             stroke: 'blue',
             strokeWidth: 1,
+            name: 'ridgeLine',
           },
         )
         polygon.canvas.add(ridge)
@@ -1657,6 +1663,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1686,6 +1693,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1715,6 +1723,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1744,6 +1753,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1814,6 +1824,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1839,6 +1850,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1868,6 +1880,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -1897,6 +1910,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2204,6 +2218,7 @@ const drawHips = (polygon) => {
             fontSize: polygon.fontSize,
             stroke: 'red',
             strokeWidth: 1,
+            name: 'hipLine',
           })
           polygon.canvas.add(hip)
           polygon.hips.push(hip)
@@ -2283,12 +2298,14 @@ const drawHips = (polygon) => {
         fontSize: polygon.fontSize,
         stroke: 'red',
         strokeWidth: 1,
+        name: 'hipLine',
       })
       polygon.canvas.add(hip)
       polygon.hips.push(hip)
       polygon.innerLines.push(hip)
     }
   })
+  console.log('polygon.hips : ', polygon.hips)
 }
 
 const getPointInPolygon = (polygon, point, isInclude = false) => {
@@ -2565,20 +2582,28 @@ const connectLinePoint = (polygon) => {
           fontSize: polygon.fontSize,
           stroke: 'blue',
           strokeWidth: 1,
+          name: 'ridgeLine',
         })
-        polygon.canvas.remove(ridge)
+        console.log('newRidge : ', newRidge)
-        polygon.canvas.remove(ridge2)
+        if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) {
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.canvas.remove(ridge)
-        polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.canvas.remove(ridge2)
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
-        polygon.innerLines = polygon.innerLines.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2))
+          polygon.innerLines = polygon.innerLines.filter(
+            (r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2),
+          )
 
-        polygon.canvas.add(newRidge)
+          polygon.canvas.add(newRidge)
-        polygon.ridges.push(newRidge)
+          polygon.ridges.push(newRidge)
-        polygon.innerLines.push(newRidge)
+          polygon.innerLines.push(newRidge)
+        }
       }
     })
   })
+
+  console.log('polygon : ', polygon)
 }
 
 /*
@@ -2654,6 +2679,310 @@ const getLineDirection = (line) => {
   }
 }
 
+export const changeAllGableRoof = (polygon, offset, canvas) => {
+  const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕
+  const roofLines = roof.lines // 지붕의 라인
+  const ridges = roof.ridges // 마루의 라인
+  const hips = roof.hips // 추녀마루의 라인
+
+  ridges.forEach((ridge) => {
+    let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1)
+    let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2)
+    let gableLines = []
+    if (ridgeHip1.length > 1) {
+      let x1 = ridgeHip1[0].x1,
+        y1 = ridgeHip1[0].y1,
+        x2 = ridgeHip1[1].x1,
+        y2 = ridgeHip1[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
+          (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
+        ) {
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip1[0], ridgeHip1[1], offset, canvas))
+        }
+      })
+    }
+    if (ridgeHip2.length > 1) {
+      let x1 = ridgeHip2[0].x1,
+        y1 = ridgeHip2[0].y1,
+        x2 = ridgeHip2[1].x1,
+        y2 = ridgeHip2[1].y1
+      roofLines.filter((roofLine) => {
+        if (
+          (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) ||
+          (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1)
+        ) {
+          gableLines.push(setGableRoof(polygon, ridge, ridgeHip2[0], ridgeHip2[1], offset, canvas))
+        }
+      })
+    }
+    gableLines.forEach((gableLine) => {
+      roof.innerLines.push(gableLine)
+    })
+  })
+
+  // splitPolygonWithLines(roof)
+}
+
+const setGableRoof = (polygon, ridge, hip1, hip2, offset, canvas) => {
+  let x1 = hip1.x1,
+    y1 = hip1.y1
+  let gableLine, diffOffset
+  if (ridge.direction === 'top') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+  }
+  if (ridge.direction === 'bottom') {
+    if (ridge.y1 > y1 && ridge.y2 > y1) {
+      offset = Math.abs(ridge.y1 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1 - offset,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1 - offset, ridge.y1, ridge.x1 + offset, ridge.y1], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 - offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 - offset,
+      })
+    }
+    if (ridge.y1 < y1 && ridge.y2 < y1) {
+      offset = Math.abs(ridge.y2 - y1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2 + offset,
+      })
+
+      gableLine = new QLine([ridge.x2 - offset, ridge.y2, ridge.x2 + offset, ridge.y2], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x1 < hip1.x2 ? hip1.x2 - offset : hip1.x2 + offset,
+        y2: hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x1 < hip2.x2 ? hip2.x2 - offset : hip2.x2 + offset,
+        y2: hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'right') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
+  if (ridge.direction === 'left') {
+    if (ridge.x1 > x1 && ridge.x2 > x1) {
+      offset = Math.abs(ridge.x1 - x1) - offset
+      ridge.set({
+        x1: ridge.x1,
+        y1: ridge.y1,
+        x2: ridge.x2 + offset,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x2, ridge.y2 - offset, ridge.x2, ridge.y2 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 + offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 + offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+    if (ridge.x1 < x1 && ridge.x2 < x1) {
+      offset = Math.abs(ridge.x2 - x1) - offset
+      ridge.set({
+        x1: ridge.x1 - offset,
+        y1: ridge.y1,
+        x2: ridge.x2,
+        y2: ridge.y2,
+      })
+      gableLine = new QLine([ridge.x1, ridge.y1 - offset, ridge.x1, ridge.y1 + offset], {
+        fontSize: polygon.fontSize,
+        stroke: 'blue',
+        strokeWidth: 1,
+        name: 'gableLine',
+      })
+      canvas?.add(gableLine)
+
+      hip1.set({
+        x1: hip1.x1,
+        y1: hip1.y1,
+        x2: hip1.x2 - offset,
+        y2: hip1.y1 < hip1.y2 ? hip1.y2 - offset : hip1.y2 + offset,
+      })
+
+      hip2.set({
+        x1: hip2.x1,
+        y1: hip2.y1,
+        x2: hip2.x2 - offset,
+        y2: hip2.y1 < hip2.y2 ? hip2.y2 - offset : hip2.y2 + offset,
+      })
+    }
+  }
+  canvas?.renderAll()
+  return gableLine
+}
+
 function arePointsEqual(point1, point2) {
   return point1.x === point2.x && point1.y === point2.y
 }