From 8aeaf572bb97386f349277db0a138e447ebbb811 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 8 Oct 2024 16:17:55 +0900
Subject: [PATCH 01/27] =?UTF-8?q?=EC=B2=98=EB=A7=88.=EC=BC=80=EB=9D=BC?=
 =?UTF-8?q?=EB=B0=94=EB=B3=80=EA=B2=BD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/roofcover/useEavesGableEdit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index 49943c04..d2c69303 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -45,6 +45,7 @@ export function useEavesGableEdit() {
     addCanvasMouseEventListener('mouse:down', mouseDownEvent)
 
     return () => {
+      canvas.discardActiveObject()
       wallLines.forEach((wallLine) => {
         convertLinesToPolygon(wallLine)
       })

From 875a3004fd5e9010c07c1e611da205981d1e67cc Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 16:18:21 +0900
Subject: [PATCH 02/27] =?UTF-8?q?refactor:=20QInput=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20useCallback=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/QInput.jsx | 32 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index 484d9859..aea2d66e 100644
--- a/src/components/common/input/QInput.jsx
+++ b/src/components/common/input/QInput.jsx
@@ -1,6 +1,8 @@
 'use client'
 
-export default function QInput({ type, readOnly = false, options, value, onChange }) {
+import { useCallback } from 'react'
+
+export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
   // options = options || [
   //   {
   //     id: 'one',
@@ -19,14 +21,24 @@ export default function QInput({ type, readOnly = false, options, value, onChang
   //   },
   // ]
 
-  const handleChange = (e, optionValue) => {
-    if (type === 'radio') {
+  const handleChange = useCallback(
+    (e, optionValue) => {
+      if (type === 'radio') {
+        onChange(e.target.value)
+      } else {
+        const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+        onChange(newValue)
+      }
+    },
+    [type, value, onChange],
+  )
+
+  const handleTextChange = useCallback(
+    (e) => {
       onChange(e.target.value)
-    } else {
-      const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
-      onChange(newValue)
-    }
-  }
+    },
+    [onChange],
+  )
 
   return (
     <div className="input-content light">
@@ -34,12 +46,12 @@ export default function QInput({ type, readOnly = false, options, value, onChang
         <div className="form-input">
           {type === 'text' ? (
             <div className="mb5">
-              <input type={type} className="input-light" readOnly={readOnly} value={value} onChange={(e) => onChange(e.target.value)} />
+              <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
             </div>
           ) : type === 'radio' || type === 'checkbox' ? (
             <div className="flx mb5">
               {options?.map((option) => (
-                <div className={`d-${type}-radio light mr5`}>
+                <div key={option.name} className={`d-${type}-radio light mr5`}>
                   <input
                     type={type}
                     name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}

From d406a2ea92af76f2d5709901cab9240df125f6bc Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 16:20:38 +0900
Subject: [PATCH 03/27] =?UTF-8?q?refactor:=20components>ui>QSelect.jsx=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/QSelect.jsx | 35 -----------------------------------
 1 file changed, 35 deletions(-)
 delete mode 100644 src/components/ui/QSelect.jsx

diff --git a/src/components/ui/QSelect.jsx b/src/components/ui/QSelect.jsx
deleted file mode 100644
index 198595d5..00000000
--- a/src/components/ui/QSelect.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Select, SelectItem } from '@nextui-org/react'
-import styles from './QSelect.module.css'
-import { useEffect } from 'react'
-
-const animals = [
-  { key: 'cat', label: 'Cat' },
-  { key: 'dog', label: 'Dog' },
-  { key: 'elephant', label: 'Elephant' },
-  { key: 'lion', label: 'Lion' },
-  { key: 'tiger', label: 'Tiger' },
-  { key: 'giraffe', label: 'Giraffe' },
-  { key: 'dolphin', label: 'Dolphin' },
-  { key: 'penguin', label: 'Penguin' },
-  { key: 'zebra', label: 'Zebra' },
-  { key: 'shark', label: 'Shark' },
-  { key: 'whale', label: 'Whale' },
-  { key: 'otter', label: 'Otter' },
-  { key: 'crocodile', label: 'Crocodile' },
-]
-
-export default function QSelect() {
-  useEffect(() => {}, [])
-  return (
-    <>
-      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <Select label="Select an animal" className="max-w-xs">
-          {animals.map((animal) => (
-            <SelectItem key={animal.key}>{animal.label}</SelectItem>
-          ))}
-        </Select>
-      </div>
-      <div className={styles.test}>test</div>
-    </>
-  )
-}

From f6a0a4318c26420f17f7d74115fa5719b3443b8a Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 16:21:43 +0900
Subject: [PATCH 04/27] =?UTF-8?q?feat:=20common=20select=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Playground.jsx            | 88 ++++++++++++++++++++++--
 src/components/common/select/QSelect.jsx | 40 +++++++++++
 2 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 src/components/common/select/QSelect.jsx

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index dbae066f..ad866506 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -11,14 +11,15 @@ import { useMessage } from '@/hooks/useMessage'
 import { convertDwgToPng } from '@/lib/cadAction'
 import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'
 
-import QSelect from '@/components/ui/QSelect'
 import { Button } from '@nextui-org/react'
 import ColorPicker from './common/color-picker/ColorPicker'
 import { useSwal } from '@/hooks/useSwal'
 
 import styles from './playground.module.css'
 import Image from 'next/image'
+
 import QInput from './common/input/Qinput'
+import QSelect from './common/select/QSelect'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -39,6 +40,7 @@ export default function Playground() {
   const [textInput, setTextInput] = useState('')
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
+  const [selectedValue, setSelectedValue] = useState('')
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
@@ -48,6 +50,9 @@ export default function Playground() {
   useEffect(() => {
     console.log('checkboxInput:', checkboxInput)
   }, [checkboxInput])
+  useEffect(() => {
+    console.log('selectedValue:', selectedValue)
+  }, [selectedValue])
 
   const handleUsers = async () => {
     // const users = await get('/api/user/find-all')
@@ -129,11 +134,28 @@ export default function Playground() {
     <>
       <div className="container mx-auto p-4 m-4 border">
         <div className={styles.test}>이 영역은 테스트입니다.</div>
-        <div>
-          <QInput type='text' value={textInput} onChange={setTextInput} />
-          <QInput type='text' value={textInput} onChange={setTextInput} readOnly={true} />
+        <div className="m-2">
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setTextInput('')
+            }}
+          >
+            QInput TextInput DATA RESET
+          </button>
+          <QInput type="text" value={textInput} onChange={setTextInput} />
+          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setRadioInput('')
+            }}
+          >
+            QInput Radio DATA RESET
+          </button>
           <QInput
-            type='radio'
+            type="radio"
             value={radioInput}
             onChange={setRadioInput}
             options={[
@@ -141,8 +163,17 @@ export default function Playground() {
               { id: 'r02', value: 'option2', name: 'Option 2' },
             ]}
           />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setCheckboxInput('')
+            }}
+          >
+            QInput Checkbox DATA RESET
+          </button>
           <QInput
-            type='checkbox'
+            type="checkbox"
             value={checkboxInput}
             onChange={setCheckboxInput}
             options={[
@@ -152,7 +183,50 @@ export default function Playground() {
           />
         </div>
         <div className="m-2">
-          <QSelect />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setSelectedValue([])
+            }}
+          >
+            QSelect DATA RESET
+          </button>
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+          />
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+            disabled="true"
+          />
+          <QSelect
+            value={selectedValue}
+            onChange={setSelectedValue}
+            placeholder="동물을 선택하세요"
+            options={[
+              { id: 's01', value: 'cat', name: '고양이' },
+              { id: 's02', value: 'dog', name: '개' },
+              { id: 's03', value: 'lion', name: '사자' },
+              { id: 's04', value: 'tiger', name: '호랑이' },
+            ]}
+            dark="true"
+          />
         </div>
         <div className="w-full bg-orange-300 m-2">{testVar}</div>
         <div>
diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelect.jsx
new file mode 100644
index 00000000..fcbbdc2c
--- /dev/null
+++ b/src/components/common/select/QSelect.jsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useCallback } from 'react'
+
+export default function QSelect({ placeholder = '', options, disabled = false, dark = false, value, onChange }) {
+  // const options = [
+  //   { id: 's01', value: 'cat', name: '고양이' },
+  //   { id: 's02', value: 'dog', name: '개' },
+  //   { id: 's03', value: 'lion', name: '사자' },
+  //   { id: 's04', value: 'tiger', name: '호랑이' },
+  // ]
+
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.target.value)
+    },
+    [onChange],
+  )
+
+  return (
+    <div className="input-content light">
+      <div className="input-wrap">
+        <div className="form-input">
+          <div className="mb5">
+            <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
+              <option value="" disabled hidden>
+                {placeholder}
+              </option>
+              {options.map((option) => (
+                <option key={option.name} value={option.value}>
+                  {option.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

From 8c165622921dd379b283bdcaa9318abc55d03f46 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 16:49:44 +0900
Subject: [PATCH 05/27] =?UTF-8?q?refactor:=20QSelect=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=B4=20placeholder=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=94=EB=84=90=20=EC=B2=98=EB=A6=AC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Playground.jsx            |  2 +-
 src/components/common/select/QSelect.jsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index ad866506..5d54c858 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -195,7 +195,7 @@ export default function Playground() {
           <QSelect
             value={selectedValue}
             onChange={setSelectedValue}
-            placeholder="동물을 선택하세요"
+            // placeholder="동물을 선택하세요"
             options={[
               { id: 's01', value: 'cat', name: '고양이' },
               { id: 's02', value: 'dog', name: '개' },
diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelect.jsx
index fcbbdc2c..ba89ef04 100644
--- a/src/components/common/select/QSelect.jsx
+++ b/src/components/common/select/QSelect.jsx
@@ -2,7 +2,7 @@
 
 import { useCallback } from 'react'
 
-export default function QSelect({ placeholder = '', options, disabled = false, dark = false, value, onChange }) {
+export default function QSelect({ placeholder, options, disabled = false, dark = false, value, onChange }) {
   // const options = [
   //   { id: 's01', value: 'cat', name: '고양이' },
   //   { id: 's02', value: 'dog', name: '개' },
@@ -23,9 +23,11 @@ export default function QSelect({ placeholder = '', options, disabled = false, d
         <div className="form-input">
           <div className="mb5">
             <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
-              <option value="" disabled hidden>
-                {placeholder}
-              </option>
+              {placeholder?.length > 0 ? (
+                <option value="" disabled hidden>
+                  {placeholder}
+                </option>
+              ) : null}
               {options.map((option) => (
                 <option key={option.name} value={option.value}>
                   {option.name}

From 763dc591474dcbfb3f7dc063715d874eb15efd3d Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Tue, 8 Oct 2024 17:39:21 +0900
Subject: [PATCH 06/27] =?UTF-8?q?-=20=EB=A9=B4=ED=98=95=EC=83=81=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/FloorPlan.jsx       |   2 +
 .../placementSurface/PlacementSurface.jsx     |  59 ++++
 .../PlacementSurfaceSetting.jsx               | 258 ++++++++++++++++++
 src/styles/_modal.scss                        | 182 +++++++++++-
 4 files changed, 493 insertions(+), 8 deletions(-)
 create mode 100644 src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
 create mode 100644 src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx

diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 070a8db7..baa2c1d3 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -22,6 +22,7 @@ import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryD
 import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
 import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
+import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -138,6 +139,7 @@ export default function FloorPlan() {
           {/*<Movement />*/}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
+          <PlacementSurfaceSetting />
         </div>
       </div>
     </>
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
new file mode 100644
index 00000000..79340b73
--- /dev/null
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -0,0 +1,59 @@
+import Image from 'next/image'
+
+export default function PlacementSurface(props) {
+  const { id, lines, hasDiagonal, info } = props
+  const num = ['①', '②', '③', '④', '⑤']
+  return (
+    <>
+      <div className="plane-shape-wrapper">
+        <div className="plane-box shape-box">
+          <h3 className="plane-box-tit">設定</h3>
+          <div className="shape-box-inner">
+            <div className="shape-img">
+              <Image
+                src={`/static/images/canvas/plane_tab${id < 10 ? '0' + id : id}.svg`}
+                alt="react"
+                width={0}
+                height={0}
+                style={{ width: 'auto', height: 'auto' }}
+              />
+            </div>
+            <div className="shape-data">
+              <div className="eaves-keraba-table">
+                {lines?.map((line, index) => (
+                  <div className="eaves-keraba-item">
+                    <div className="eaves-keraba-th">{line.isDiagonal ? '斜めの長さ' : num[index]}</div>
+                    <div className="eaves-keraba-td">
+                      <div className="outline-form">
+                        <div className="input-grid mr5" style={{ width: '57px' }}>
+                          <input type="text" className="input-origin plane block" defaultValue={line.value} />
+                        </div>
+                        <span className="thin">mm</span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="plane-box direction-box">
+          <h3 className="plane-box-tit">設定</h3>
+          <div className="plane-direction-box">
+            <div className="plane-direction">
+              <span className="top">北</span>
+              <span className="right">ドン</span>
+              <span className="bottom">南</span>
+              <span className="left">立つ</span>
+              <button className="plane-btn up"></button>
+              <button className="plane-btn right"></button>
+              <button className="plane-btn down act"></button>
+              <button className="plane-btn left"></button>
+            </div>
+          </div>
+        </div>
+      </div>
+      {info && <div className="plane-tab-guide">{info}</div>}
+    </>
+  )
+}
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
new file mode 100644
index 00000000..883e1d40
--- /dev/null
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -0,0 +1,258 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
+
+export default function PlacementSurfaceSetting({}) {
+  const { getMessage } = useMessage()
+  const [selectedType, setSelectedType] = useState()
+  const [rotate, setRotate] = useState(0)
+  const [sideInversion, setSideInversion] = useState(false)
+  const [upsideInversion, setUpsideInversion] = useState(false)
+  /* type
+   * a: line 2
+   * b: line 2 + diagonal 1
+   * c: line 3
+   * d: line 4
+   * e: line 5
+   * */
+  const types = [
+    {
+      id: 1,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        {
+          isDiagonal: true,
+          value: 3500,
+        },
+      ],
+      info: 'ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。',
+    },
+    {
+      id: 2,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 3,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 4,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 5,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 6,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+      lineAmount: 3,
+    },
+    {
+      id: 7,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 8,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 9,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 10,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 11,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 12,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 13,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 14,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 15,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 16,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 17,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+    {
+      id: 18,
+      lines: [
+        { isDiagonal: false, value: 4500 },
+        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 2600 },
+      ],
+    },
+  ]
+
+  const getInversionState = () => {
+    // return `${getScale()} rotate(${90 * rotate}deg)`
+    return `${getScale()} ${getRotate()}`
+    // return `${getScale()}`
+  }
+
+  const getScale = () => {
+    // if (rotate === 1 || rotate === 3) {
+    //   return `scale(${sideInversion ? 1 : -1}, ${upsideInversion ? 1 : -1} )`
+    // } else {
+    //   return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1} )`
+    // }
+    return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1})`
+  }
+
+  const getRotate = () => {
+    // return `rotate(${sideInversion && upsideInversion ? 90 * rotate : sideInversion || upsideInversion ? -90 * rotate : 90 * rotate}deg)`
+    if (sideInversion !== upsideInversion) {
+      ;`rotate(${90 * rotate - 180}deg)`
+    }
+    return `rotate(${90 * rotate}deg)`
+  }
+
+  useEffect(() => {
+    setSelectedType(types[0])
+  }, [])
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap l-2`}>
+        <div className="modal-head">
+          <h1 className="title">屋根形状の設定 </h1>
+          <button className="modal-close">닫기</button>
+        </div>
+        <div className="modal-body">
+          <div className="plane-shape-menu">
+            {types.map((type) => (
+              <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
+                <div className="shape-box">
+                  <Image
+                    src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
+                    alt="react"
+                    width={0}
+                    height={0}
+                    style={{
+                      width: 'auto',
+                      height: 'auto',
+                      transform: getInversionState(),
+                      transition: 'all .15s ease-in-out',
+                    }}
+                  />
+                </div>
+              </button>
+            ))}
+          </div>
+          <div className="shape-library">
+            <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button>
+            <button className="library-btn ico02" onClick={() => setSideInversion(!sideInversion)}></button>
+            <button className="library-btn ico03" onClick={() => setUpsideInversion(!upsideInversion)}></button>
+            x:{upsideInversion ? 1 : 0}
+            <br />
+            y:{sideInversion ? 1 : 0}
+            <br />
+            rotate:{rotate}
+          </div>
+          <PlacementSurface {...selectedType} />
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">作成</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 705550d5..b7bb20ec 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -26,6 +26,18 @@ $alert-color: #101010;
   }
 }
 
+.normal-font {
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
+}
+
+.bold-font {
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+}
+
 .modal-pop-wrap {
   position: fixed;
   width: 100%;
@@ -281,6 +293,10 @@ $alert-color: #101010;
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
+
+  &.border {
+    border-bottom: 1px solid #424242;
+  }
 }
 
 .grid-option-wrap {
@@ -977,18 +993,14 @@ $alert-color: #101010;
     transition: all .15s ease-in-out;
 
     .shape-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       position: relative;
       width: 100%;
       height: 100%;
       background-color: #313131;
       border-radius: 2px;
-
-      img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
     }
 
     &.act,
@@ -1642,6 +1654,36 @@ $alert-color: #101010;
 .module-table-flex-wrap {
   display: flex;
   gap: 10px;
+
+  .outline-form {
+    flex: 1;
+  }
+}
+
+.module-box-tab {
+  display: flex;
+
+  .module-btn {
+    flex: 1;
+    border-top: 1px solid #505050;
+    border-bottom: 1px solid #505050;
+    border-right: 1px solid #505050;
+    background-color: #454545;
+    color: #fff;
+    height: 30px;
+    font-size: 12px;
+    font-weight: 400;
+
+    &:first-child {
+      border-left: 1px solid #505050;
+    }
+
+    &.act {
+      border-color: #fff;
+      background-color: #fff;
+      color: #101010;
+    }
+  }
 }
 
 .module-table-box {
@@ -1649,7 +1691,7 @@ $alert-color: #101010;
   background-color: #3D3D3D;
   border-radius: 2px;
 
-  .module-table-inneer {
+  .module-table-inner {
     padding: 10px;
 
     .outline-form {
@@ -1657,5 +1699,129 @@ $alert-color: #101010;
         width: auto;
       }
     }
+
+    .module-table-tit {
+      padding: 10px 0;
+      font-size: 12px;
+      color: #fff;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .eaves-keraba-table {
+      width: 100%;
+      margin-top: 15px;
+
+      .eaves-keraba-th {
+        width: 72px;
+      }
+
+      .eaves-keraba-th,
+      .eaves-keraba-td {
+        padding-bottom: 5px;
+      }
+    }
+
+    .self-table-tit {
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+      padding-bottom: 15px;
+    }
+  }
+
+  .warning-guide {
+    padding: 20px;
+
+    .warning {
+      color: #FFCACA;
+      max-height: 55px;
+      overflow-y: auto;
+      padding-right: 30px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.module-self-table {
+  display: table;
+  border-top: 1px solid #4D4D4D;
+  border-collapse: collapse;
+  width: 100%;
+
+  .self-table-item {
+    display: table-row;
+
+    .self-item-td,
+    .self-item-th {
+      display: table-cell;
+      vertical-align: middle;
+      border-bottom: 1px solid #4D4D4D;
+    }
+
+    .self-item-th {
+      width: 60px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #fff;
+    }
+
+    .self-item-td {
+      font-size: 12px;
+      font-weight: 400;
+      color: #fff;
+      padding: 15px 20px;
+    }
+  }
+}
+
+.self-table-flx {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+
+  button {
+    margin-left: auto;
+  }
+}
+
+.hexagonal-wrap {
+  .hexagonal-item {
+    padding: 15px 0;
+    border-bottom: 1px solid #4D4D4D;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border: none;
+    }
+
+    .hexagonal-flx-auto {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .hexagonal-flx {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin-left: auto;
+      }
+    }
   }
 }
\ No newline at end of file

From a192c66c393514e28a05214300ba1562c8e076dc Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 8 Oct 2024 18:15:33 +0900
Subject: [PATCH 07/27] =?UTF-8?q?refactor:=20QInput,=20QSelect=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=20div=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/QInput.jsx   | 48 +++++++++++-------------
 src/components/common/select/QSelect.jsx | 32 ++++++----------
 2 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index aea2d66e..39b8be08 100644
--- a/src/components/common/input/QInput.jsx
+++ b/src/components/common/input/QInput.jsx
@@ -41,32 +41,28 @@ export default function QInput({ type, readOnly = false, options = [], value, on
   )
 
   return (
-    <div className="input-content light">
-      <div className="input-wrap">
-        <div className="form-input">
-          {type === 'text' ? (
-            <div className="mb5">
-              <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
-            </div>
-          ) : type === 'radio' || type === 'checkbox' ? (
-            <div className="flx mb5">
-              {options?.map((option) => (
-                <div key={option.name} className={`d-${type}-radio light mr5`}>
-                  <input
-                    type={type}
-                    name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
-                    value={option.value}
-                    id={option.id}
-                    checked={type === 'radio' ? value === option.value : value.includes(option.value)}
-                    onChange={(e) => handleChange(e, option.value)}
-                  />
-                  <label htmlFor={option.id}>{option.name}</label>
-                </div>
-              ))}
-            </div>
-          ) : null}
+    <>
+      {type === 'text' ? (
+        <div className="mb5">
+          <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
         </div>
-      </div>
-    </div>
+      ) : type === 'radio' || type === 'checkbox' ? (
+        <div className="flx mb5">
+          {options?.map((option) => (
+            <div key={option.name} className={`d-${type}-radio light mr5`}>
+              <input
+                type={type}
+                name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
+                value={option.value}
+                id={option.id}
+                checked={type === 'radio' ? value === option.value : value.includes(option.value)}
+                onChange={(e) => handleChange(e, option.value)}
+              />
+              <label htmlFor={option.id}>{option.name}</label>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </>
   )
 }
diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelect.jsx
index ba89ef04..acf0ac6b 100644
--- a/src/components/common/select/QSelect.jsx
+++ b/src/components/common/select/QSelect.jsx
@@ -18,25 +18,17 @@ export default function QSelect({ placeholder, options, disabled = false, dark =
   )
 
   return (
-    <div className="input-content light">
-      <div className="input-wrap">
-        <div className="form-input">
-          <div className="mb5">
-            <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
-              {placeholder?.length > 0 ? (
-                <option value="" disabled hidden>
-                  {placeholder}
-                </option>
-              ) : null}
-              {options.map((option) => (
-                <option key={option.name} value={option.value}>
-                  {option.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-      </div>
-    </div>
+    <select className={`select-light ${dark ? 'dark' : ''}`} value={value} onChange={handleChange} disabled={disabled ? true : false}>
+      {placeholder && (
+        <option value="" disabled hidden>
+          {placeholder}
+        </option>
+      )}
+      {options.map((option) => (
+        <option key={option.name} value={option.value}>
+          {option.name}
+        </option>
+      ))}
+    </select>
   )
 }

From 3ed3b228edc5350061223d4053881b32118bbfe5 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Tue, 8 Oct 2024 18:44:38 +0900
Subject: [PATCH 08/27] =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/ja.json | 10 +++++++++-
 src/locales/ko.json | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/locales/ja.json b/src/locales/ja.json
index 479c52b2..f497d2bb 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -351,5 +351,13 @@
   "shed.width": "片流幅",
   "windage": "漂流",
   "windage.width": "漂流の出幅",
-  "write": "作成"
+  "write": "作成",
+  "main.storeId": "販売店ID",
+  "main.storeName": "販売店名",
+  "main.objectNo": "物件番号",
+  "main.faq": "FAQ",
+  "main.content.objectList": "最近の更新物件一覧",
+  "main.content.notice": "お知らせ",
+  "main.content.download1": "操作マニュアル",
+  "main.content.download2": "屋根の説明書"
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 0599fb74..5a1abbe0 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -357,5 +357,13 @@
   "shed.width": "한쪽흐름 폭",
   "windage": "편류",
   "windage.width": "편류의 출폭",
-  "write": "작성"
+  "write": "작성",
+  "main.storeId": "판매점 ID",
+  "main.storeName": "판매점명",
+  "main.objectNo": "물건번호",
+  "main.faq": "FAQ",
+  "main.content.objectList": "최근 갱신 물건목록",
+  "main.content.notice": "공지사항",
+  "main.content.download1": "조작메뉴얼",
+  "main.content.download2": "지붕설명서"
 }

From 67c52106e707b2c950a262bc0a6b1fdba1d722ee Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Thu, 10 Oct 2024 11:12:32 +0900
Subject: [PATCH 09/27] =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=20=EB=AF=B8=EB=85=B8=EC=B6=9C=20=EC=98=A4=EB=A5=98=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/auth/Join.jsx                                  | 3 ++-
 src/components/auth/NewLogin.jsx                              | 4 ++--
 .../floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx           | 2 +-
 src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/auth/Join.jsx b/src/components/auth/Join.jsx
index 03fc8ecb..ae100e68 100644
--- a/src/components/auth/Join.jsx
+++ b/src/components/auth/Join.jsx
@@ -1,11 +1,12 @@
 'use client'
 
-import { post } from '@/lib/Axios'
+import { useAxios } from '@/hooks/useAxios'
 import { redirect } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
 
 export default function Join() {
   const { getMessage } = useMessage()
+  const { post } = useAxios()
 
   const joinProcess = async (formData) => {
     const param = {
diff --git a/src/components/auth/NewLogin.jsx b/src/components/auth/NewLogin.jsx
index 5b5bc83a..61c02abf 100644
--- a/src/components/auth/NewLogin.jsx
+++ b/src/components/auth/NewLogin.jsx
@@ -89,7 +89,7 @@ export default function NewLogin() {
       telNo: '336610',
       fax: null,
       email: 't10t@naver.com',
-      pwdInitYn: 'N',
+      pwdInitYn: 'Y',
     })
 
     setSessionState({
@@ -105,7 +105,7 @@ export default function NewLogin() {
       telNo: '336610',
       fax: null,
       email: 't10t@naver.com',
-      pwdInitYn: 'N',
+      pwdInitYn: 'Y',
     })
 
     // redirect('/')
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
index d2aa2c9f..1732f3f7 100644
--- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
+++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
 import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
 import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
index 8a8da385..1267fe98 100644
--- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
+++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
@@ -1,5 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import WithDraggable from '@/components/common/draggable/withDraggable'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
 import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
 import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'

From 816f711f5d875d03b4b5710864117c59ae1e3b51 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 10 Oct 2024 13:05:17 +0900
Subject: [PATCH 10/27] =?UTF-8?q?-=20=EB=A9=B4=ED=98=95=EC=83=81=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/shape/180deg/plane_tab01.svg       | 12 +++++
 .../canvas/shape/180deg/plane_tab02.svg       | 14 +++++
 .../canvas/shape/180deg/plane_tab03.svg       | 18 +++++++
 .../canvas/shape/180deg/plane_tab04.svg       | 13 +++++
 .../canvas/shape/180deg/plane_tab05.svg       | 18 +++++++
 .../canvas/shape/180deg/plane_tab06.svg       | 18 +++++++
 .../canvas/shape/180deg/plane_tab07.svg       | 30 +++++++++++
 .../canvas/shape/180deg/plane_tab08.svg       | 24 +++++++++
 .../canvas/shape/180deg/plane_tab09.svg       | 28 ++++++++++
 .../canvas/shape/180deg/plane_tab10.svg       | 28 ++++++++++
 .../canvas/shape/180deg/plane_tab11.svg       | 28 ++++++++++
 .../canvas/shape/180deg/plane_tab12.svg       | 23 ++++++++
 .../canvas/shape/180deg/plane_tab13.svg       | 23 ++++++++
 .../canvas/shape/180deg/plane_tab14.svg       | 29 ++++++++++
 .../canvas/shape/180deg/plane_tab15.svg       | 18 +++++++
 .../canvas/shape/180deg/plane_tab16.svg       | 24 +++++++++
 .../canvas/shape/180deg/plane_tab17.svg       | 22 ++++++++
 .../canvas/shape/180deg/plane_tab18.svg       | 16 ++++++
 .../canvas/shape/270deg/plane_tab01.svg       | 12 +++++
 .../canvas/shape/270deg/plane_tab02.svg       | 14 +++++
 .../canvas/shape/270deg/plane_tab03.svg       | 18 +++++++
 .../canvas/shape/270deg/plane_tab04.svg       | 13 +++++
 .../canvas/shape/270deg/plane_tab05.svg       | 18 +++++++
 .../canvas/shape/270deg/plane_tab06.svg       | 18 +++++++
 .../canvas/shape/270deg/plane_tab07.svg       | 30 +++++++++++
 .../canvas/shape/270deg/plane_tab08.svg       | 24 +++++++++
 .../canvas/shape/270deg/plane_tab09.svg       | 28 ++++++++++
 .../canvas/shape/270deg/plane_tab10.svg       | 28 ++++++++++
 .../canvas/shape/270deg/plane_tab11.svg       | 28 ++++++++++
 .../canvas/shape/270deg/plane_tab12.svg       | 23 ++++++++
 .../canvas/shape/270deg/plane_tab13.svg       | 23 ++++++++
 .../canvas/shape/270deg/plane_tab14.svg       | 29 ++++++++++
 .../canvas/shape/270deg/plane_tab15.svg       | 18 +++++++
 .../canvas/shape/270deg/plane_tab16.svg       | 24 +++++++++
 .../canvas/shape/270deg/plane_tab17.svg       | 22 ++++++++
 .../canvas/shape/270deg/plane_tab18.svg       | 16 ++++++
 .../images/canvas/shape/90deg/plane_tab01.svg | 12 +++++
 .../images/canvas/shape/90deg/plane_tab02.svg | 14 +++++
 .../images/canvas/shape/90deg/plane_tab03.svg | 18 +++++++
 .../images/canvas/shape/90deg/plane_tab04.svg | 13 +++++
 .../images/canvas/shape/90deg/plane_tab05.svg | 18 +++++++
 .../images/canvas/shape/90deg/plane_tab06.svg | 18 +++++++
 .../images/canvas/shape/90deg/plane_tab07.svg | 30 +++++++++++
 .../images/canvas/shape/90deg/plane_tab08.svg | 24 +++++++++
 .../images/canvas/shape/90deg/plane_tab09.svg | 28 ++++++++++
 .../images/canvas/shape/90deg/plane_tab10.svg | 28 ++++++++++
 .../images/canvas/shape/90deg/plane_tab11.svg | 28 ++++++++++
 .../images/canvas/shape/90deg/plane_tab12.svg | 23 ++++++++
 .../images/canvas/shape/90deg/plane_tab13.svg | 23 ++++++++
 .../images/canvas/shape/90deg/plane_tab14.svg | 29 ++++++++++
 .../images/canvas/shape/90deg/plane_tab15.svg | 18 +++++++
 .../images/canvas/shape/90deg/plane_tab16.svg | 24 +++++++++
 .../images/canvas/shape/90deg/plane_tab17.svg | 22 ++++++++
 .../images/canvas/shape/90deg/plane_tab18.svg | 16 ++++++
 .../canvas/shape/normal/plane_tab01.svg       | 12 +++++
 .../canvas/shape/normal/plane_tab02.svg       | 14 +++++
 .../canvas/shape/normal/plane_tab03.svg       | 18 +++++++
 .../canvas/shape/normal/plane_tab04.svg       | 13 +++++
 .../canvas/shape/normal/plane_tab05.svg       | 18 +++++++
 .../canvas/shape/normal/plane_tab06.svg       | 18 +++++++
 .../canvas/shape/normal/plane_tab07.svg       | 30 +++++++++++
 .../canvas/shape/normal/plane_tab08.svg       | 24 +++++++++
 .../canvas/shape/normal/plane_tab09.svg       | 28 ++++++++++
 .../canvas/shape/normal/plane_tab10.svg       | 28 ++++++++++
 .../canvas/shape/normal/plane_tab11.svg       | 28 ++++++++++
 .../canvas/shape/normal/plane_tab12.svg       | 23 ++++++++
 .../canvas/shape/normal/plane_tab13.svg       | 23 ++++++++
 .../canvas/shape/normal/plane_tab14.svg       | 29 ++++++++++
 .../canvas/shape/normal/plane_tab15.svg       | 18 +++++++
 .../canvas/shape/normal/plane_tab16.svg       | 24 +++++++++
 .../canvas/shape/normal/plane_tab17.svg       | 22 ++++++++
 .../canvas/shape/normal/plane_tab18.svg       | 16 ++++++
 .../canvas/shape/re_180deg/plane_tab01.svg    | 12 +++++
 .../canvas/shape/re_180deg/plane_tab02.svg    | 14 +++++
 .../canvas/shape/re_180deg/plane_tab03.svg    | 18 +++++++
 .../canvas/shape/re_180deg/plane_tab04.svg    | 13 +++++
 .../canvas/shape/re_180deg/plane_tab05.svg    | 18 +++++++
 .../canvas/shape/re_180deg/plane_tab06.svg    | 18 +++++++
 .../canvas/shape/re_180deg/plane_tab07.svg    | 30 +++++++++++
 .../canvas/shape/re_180deg/plane_tab08.svg    | 24 +++++++++
 .../canvas/shape/re_180deg/plane_tab09.svg    | 28 ++++++++++
 .../canvas/shape/re_180deg/plane_tab10.svg    | 28 ++++++++++
 .../canvas/shape/re_180deg/plane_tab11.svg    | 28 ++++++++++
 .../canvas/shape/re_180deg/plane_tab12.svg    | 23 ++++++++
 .../canvas/shape/re_180deg/plane_tab13.svg    | 23 ++++++++
 .../canvas/shape/re_180deg/plane_tab14.svg    | 29 ++++++++++
 .../canvas/shape/re_180deg/plane_tab15.svg    | 18 +++++++
 .../canvas/shape/re_180deg/plane_tab16.svg    | 24 +++++++++
 .../canvas/shape/re_180deg/plane_tab17.svg    | 22 ++++++++
 .../canvas/shape/re_180deg/plane_tab18.svg    | 16 ++++++
 .../canvas/shape/re_270deg/plane_tab01.svg    | 12 +++++
 .../canvas/shape/re_270deg/plane_tab02.svg    | 14 +++++
 .../canvas/shape/re_270deg/plane_tab03.svg    | 18 +++++++
 .../canvas/shape/re_270deg/plane_tab04.svg    | 13 +++++
 .../canvas/shape/re_270deg/plane_tab05.svg    | 18 +++++++
 .../canvas/shape/re_270deg/plane_tab06.svg    | 18 +++++++
 .../canvas/shape/re_270deg/plane_tab07.svg    | 30 +++++++++++
 .../canvas/shape/re_270deg/plane_tab08.svg    | 24 +++++++++
 .../canvas/shape/re_270deg/plane_tab09.svg    | 28 ++++++++++
 .../canvas/shape/re_270deg/plane_tab10.svg    | 28 ++++++++++
 .../canvas/shape/re_270deg/plane_tab11.svg    | 28 ++++++++++
 .../canvas/shape/re_270deg/plane_tab12.svg    | 23 ++++++++
 .../canvas/shape/re_270deg/plane_tab13.svg    | 23 ++++++++
 .../canvas/shape/re_270deg/plane_tab14.svg    | 29 ++++++++++
 .../canvas/shape/re_270deg/plane_tab15.svg    | 18 +++++++
 .../canvas/shape/re_270deg/plane_tab16.svg    | 24 +++++++++
 .../canvas/shape/re_270deg/plane_tab17.svg    | 22 ++++++++
 .../canvas/shape/re_270deg/plane_tab18.svg    | 16 ++++++
 .../canvas/shape/re_90deg/plane_tab01.svg     | 12 +++++
 .../canvas/shape/re_90deg/plane_tab02.svg     | 14 +++++
 .../canvas/shape/re_90deg/plane_tab03.svg     | 18 +++++++
 .../canvas/shape/re_90deg/plane_tab04.svg     | 13 +++++
 .../canvas/shape/re_90deg/plane_tab05.svg     | 18 +++++++
 .../canvas/shape/re_90deg/plane_tab06.svg     | 18 +++++++
 .../canvas/shape/re_90deg/plane_tab07.svg     | 30 +++++++++++
 .../canvas/shape/re_90deg/plane_tab08.svg     | 24 +++++++++
 .../canvas/shape/re_90deg/plane_tab09.svg     | 28 ++++++++++
 .../canvas/shape/re_90deg/plane_tab10.svg     | 28 ++++++++++
 .../canvas/shape/re_90deg/plane_tab11.svg     | 28 ++++++++++
 .../canvas/shape/re_90deg/plane_tab12.svg     | 23 ++++++++
 .../canvas/shape/re_90deg/plane_tab13.svg     | 23 ++++++++
 .../canvas/shape/re_90deg/plane_tab14.svg     | 29 ++++++++++
 .../canvas/shape/re_90deg/plane_tab15.svg     | 18 +++++++
 .../canvas/shape/re_90deg/plane_tab16.svg     | 24 +++++++++
 .../canvas/shape/re_90deg/plane_tab17.svg     | 22 ++++++++
 .../canvas/shape/re_90deg/plane_tab18.svg     | 16 ++++++
 .../canvas/shape/re_normal/plane_tab01.svg    | 14 +++++
 .../canvas/shape/re_normal/plane_tab02.svg    | 14 +++++
 .../canvas/shape/re_normal/plane_tab03.svg    | 18 +++++++
 .../canvas/shape/re_normal/plane_tab04.svg    | 13 +++++
 .../canvas/shape/re_normal/plane_tab05.svg    | 18 +++++++
 .../canvas/shape/re_normal/plane_tab06.svg    | 18 +++++++
 .../canvas/shape/re_normal/plane_tab07.svg    | 30 +++++++++++
 .../canvas/shape/re_normal/plane_tab08.svg    | 24 +++++++++
 .../canvas/shape/re_normal/plane_tab09.svg    | 28 ++++++++++
 .../canvas/shape/re_normal/plane_tab10.svg    | 28 ++++++++++
 .../canvas/shape/re_normal/plane_tab11.svg    | 28 ++++++++++
 .../canvas/shape/re_normal/plane_tab12.svg    | 23 ++++++++
 .../canvas/shape/re_normal/plane_tab13.svg    | 23 ++++++++
 .../canvas/shape/re_normal/plane_tab14.svg    | 29 ++++++++++
 .../canvas/shape/re_normal/plane_tab15.svg    | 18 +++++++
 .../canvas/shape/re_normal/plane_tab16.svg    | 24 +++++++++
 .../canvas/shape/re_normal/plane_tab17.svg    | 22 ++++++++
 .../canvas/shape/re_normal/plane_tab18.svg    | 16 ++++++
 src/components/floor-plan/CanvasMenu.jsx      |  2 +
 src/components/floor-plan/FloorPlan.jsx       |  4 +-
 src/components/floor-plan/MenuDepth01.jsx     |  2 +
 .../placementSurface/PlacementSurface.jsx     | 49 +++++++++++------
 .../PlacementSurfaceSetting.jsx               | 54 +++++++++----------
 src/locales/ja.json                           |  2 +
 src/locales/ko.json                           |  2 +
 151 files changed, 3160 insertions(+), 45 deletions(-)
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/180deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/270deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/90deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/normal/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/re_180deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/re_270deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/re_90deg/plane_tab18.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab01.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab02.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab03.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab04.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab05.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab06.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab07.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab08.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab09.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab10.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab11.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab12.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab13.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab14.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab15.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab16.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab17.svg
 create mode 100644 public/static/images/canvas/shape/re_normal/plane_tab18.svg

diff --git a/public/static/images/canvas/shape/180deg/plane_tab01.svg b/public/static/images/canvas/shape/180deg/plane_tab01.svg
new file mode 100644
index 00000000..84c22986
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 21L55.5 106L109 21" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21.5)" fill="#101010"/>
+<path d="M55 100L55 24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83L52.9431 5.83V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab02.svg b/public/static/images/canvas/shape/180deg/plane_tab02.svg
new file mode 100644
index 00000000..21cf9082
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 35)" fill="#101010"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 97)" fill="#1083E3"/>
+<rect width="2" height="60" transform="matrix(1 0 0 -1 0 95)" fill="#EA10AC"/>
+<rect width="2" height="60" transform="matrix(1 0 0 -1 108 95)" fill="#EA10AC"/>
+<path d="M55 94L55 36" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 22L110 22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="57.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="57.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 68.5V67.48C52.9931 66.9133 53.5365 66.3867 54.0031 65.9C54.4698 65.4133 54.8331 64.96 55.0931 64.54C55.3531 64.1133 55.4831 63.72 55.4831 63.36C55.4831 63.1333 55.4431 62.9433 55.3631 62.79C55.2898 62.63 55.1798 62.51 55.0331 62.43C54.8865 62.35 54.7131 62.31 54.5131 62.31C54.2598 62.31 54.0298 62.3833 53.8231 62.53C53.6231 62.67 53.4331 62.8367 53.2531 63.03L52.2831 62.07C52.6498 61.6767 53.0198 61.3867 53.3931 61.2C53.7731 61.0133 54.2265 60.92 54.7531 60.92C55.2331 60.92 55.6565 61.0167 56.0231 61.21C56.3898 61.4033 56.6765 61.6767 56.8831 62.03C57.0898 62.3767 57.1931 62.7867 57.1931 63.26C57.1931 63.6867 57.0831 64.1233 56.8631 64.57C56.6498 65.01 56.3731 65.4467 56.0331 65.88C55.6931 66.3067 55.3331 66.7133 54.9531 67.1C55.1398 67.0733 55.3465 67.05 55.5731 67.03C55.8065 67.01 56.0065 67 56.1731 67H57.5331V68.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="14.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="14.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 25.5V24.06H54.3131V19.83H52.9431V18.73C53.3431 18.6567 53.6831 18.5667 53.9631 18.46C54.2498 18.3533 54.5231 18.2167 54.7831 18.05H56.0931V24.06H57.4331V25.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab03.svg b/public/static/images/canvas/shape/180deg/plane_tab03.svg
new file mode 100644
index 00000000..46d3b5b2
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="70" height="2" transform="matrix(1 0 0 -1 20 89)" fill="#1083E3"/>
+<path d="M20 89H22L2 21H0L20 89Z" fill="#45CD7D"/>
+<path d="M88 89H90L110 21H108L88 89Z" fill="#45CD7D"/>
+<path d="M55 85L55 23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 57.5V56.48C52.9931 55.9133 53.5365 55.3867 54.0031 54.9C54.4698 54.4133 54.8331 53.96 55.0931 53.54C55.3531 53.1133 55.4831 52.72 55.4831 52.36C55.4831 52.1333 55.4431 51.9433 55.3631 51.79C55.2898 51.63 55.1798 51.51 55.0331 51.43C54.8865 51.35 54.7131 51.31 54.5131 51.31C54.2598 51.31 54.0298 51.3833 53.8231 51.53C53.6231 51.67 53.4331 51.8367 53.2531 52.03L52.2831 51.07C52.6498 50.6767 53.0198 50.3867 53.3931 50.2C53.7731 50.0133 54.2265 49.92 54.7531 49.92C55.2331 49.92 55.6565 50.0167 56.0231 50.21C56.3898 50.4033 56.6765 50.6767 56.8831 51.03C57.0898 51.3767 57.1931 51.7867 57.1931 52.26C57.1931 52.6867 57.0831 53.1233 56.8631 53.57C56.6498 54.01 56.3731 54.4467 56.0331 54.88C55.6931 55.3067 55.3331 55.7133 54.9531 56.1C55.1398 56.0733 55.3465 56.05 55.5731 56.03C55.8065 56.01 56.0065 56 56.1731 56H57.5331V57.5H52.3731Z" fill="#101010"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83L52.9431 5.83V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M1 100L110 100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M54.7431 103.64C54.3498 103.64 53.9931 103.597 53.6731 103.51C53.3598 103.423 53.0798 103.303 52.8331 103.15C52.5865 102.99 52.3731 102.807 52.1931 102.6L53.0131 101.48C53.2398 101.687 53.4831 101.86 53.7431 102C54.0031 102.133 54.2765 102.2 54.5631 102.2C54.7965 102.2 54.9965 102.17 55.1631 102.11C55.3365 102.043 55.4698 101.947 55.5631 101.82C55.6565 101.693 55.7031 101.537 55.7031 101.35C55.7031 101.137 55.6531 100.953 55.5531 100.8C55.4531 100.647 55.2665 100.53 54.9931 100.45C54.7198 100.37 54.3231 100.33 53.8031 100.33V99.07C54.2298 99.07 54.5631 99.03 54.8031 98.95C55.0431 98.87 55.2131 98.7567 55.3131 98.61C55.4198 98.4633 55.4731 98.2933 55.4731 98.1C55.4731 97.8467 55.3998 97.6533 55.2531 97.52C55.1065 97.38 54.8965 97.31 54.6231 97.31C54.3765 97.31 54.1498 97.3633 53.9431 97.47C53.7365 97.5767 53.5198 97.73 53.2931 97.93L52.3931 96.84C52.7398 96.5467 53.0998 96.32 53.4731 96.16C53.8531 96 54.2631 95.92 54.7031 95.92C55.2165 95.92 55.6631 96 56.0431 96.16C56.4298 96.3133 56.7265 96.5433 56.9331 96.85C57.1465 97.15 57.2531 97.5233 57.2531 97.97C57.2531 98.3367 57.1531 98.6633 56.9531 98.95C56.7531 99.23 56.4565 99.45 56.0631 99.61V99.66C56.3365 99.74 56.5798 99.8633 56.7931 100.03C57.0131 100.19 57.1831 100.39 57.3031 100.63C57.4298 100.87 57.4931 101.15 57.4931 101.47C57.4931 101.93 57.3665 102.323 57.1131 102.65C56.8598 102.97 56.5231 103.217 56.1031 103.39C55.6898 103.557 55.2365 103.64 54.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab04.svg b/public/static/images/canvas/shape/180deg/plane_tab04.svg
new file mode 100644
index 00000000..4b4ceafa
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="110" y="21" width="91" height="2" transform="rotate(-180 110 21)" fill="#101010"/>
+<path d="M21 108H19L108 21H110L21 108Z" fill="#45CD7D"/>
+<rect x="21" y="108" width="2" height="87" transform="rotate(-180 21 108)" fill="#EA10AC"/>
+<path d="M8 108L8 19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="55.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M5.37313 66.5V65.48C5.99313 64.9133 6.53646 64.3867 7.00313 63.9C7.46979 63.4133 7.83313 62.96 8.09313 62.54C8.35313 62.1133 8.48313 61.72 8.48313 61.36C8.48313 61.1333 8.44313 60.9433 8.36313 60.79C8.28979 60.63 8.17979 60.51 8.03313 60.43C7.88646 60.35 7.71313 60.31 7.51313 60.31C7.25979 60.31 7.02979 60.3833 6.82313 60.53C6.62313 60.67 6.43313 60.8367 6.25313 61.03L5.28312 60.07C5.64979 59.6767 6.01979 59.3867 6.39313 59.2C6.77313 59.0133 7.22646 58.92 7.75313 58.92C8.23313 58.92 8.65646 59.0167 9.02313 59.21C9.38979 59.4033 9.67646 59.6767 9.88313 60.03C10.0898 60.3767 10.1931 60.7867 10.1931 61.26C10.1931 61.6867 10.0831 62.1233 9.86313 62.57C9.64979 63.01 9.37313 63.4467 9.03313 63.88C8.69313 64.3067 8.33313 64.7133 7.95313 65.1C8.13979 65.0733 8.34646 65.05 8.57313 65.03C8.80646 65.01 9.00646 65 9.17313 65H10.5331V66.5H5.37313Z" fill="#101010"/>
+<path d="M109 8L20 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="56.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="56.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M61.7331 11.5V10.06H63.3131V5.83L61.9431 5.83V4.73C62.3431 4.65667 62.6831 4.56667 62.9631 4.46C63.2498 4.35333 63.5231 4.21667 63.7831 4.05H65.0931V10.06L66.4331 10.06V11.5L61.7331 11.5Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab05.svg b/public/static/images/canvas/shape/180deg/plane_tab05.svg
new file mode 100644
index 00000000..40d9d32b
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="90" y="21" width="71" height="2" transform="rotate(180 90 21)" fill="#101010"/>
+<rect x="90" y="73" width="2" height="52" transform="rotate(180 90 73)" fill="#EA10AC"/>
+<rect x="21" y="108" width="2" height="87" transform="rotate(180 21 108)" fill="#EA10AC"/>
+<path d="M90 73.5L21 108V106L90 71.5V73.5Z" fill="#45CD7D"/>
+<path d="M8 108V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="1.5" y="56.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="1.5" y="56.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M6.37313 67.5V66.48C6.99313 65.9133 7.53646 65.3867 8.00313 64.9C8.46979 64.4133 8.83313 63.96 9.09313 63.54C9.35313 63.1133 9.48313 62.72 9.48313 62.36C9.48313 62.1333 9.44313 61.9433 9.36313 61.79C9.28979 61.63 9.17979 61.51 9.03313 61.43C8.88646 61.35 8.71313 61.31 8.51313 61.31C8.25979 61.31 8.02979 61.3833 7.82313 61.53C7.62313 61.67 7.43313 61.8367 7.25313 62.03L6.28312 61.07C6.64979 60.6767 7.01979 60.3867 7.39313 60.2C7.77313 60.0133 8.22646 59.92 8.75313 59.92C9.23313 59.92 9.65646 60.0167 10.0231 60.21C10.3898 60.4033 10.6765 60.6767 10.8831 61.03C11.0898 61.3767 11.1931 61.7867 11.1931 62.26C11.1931 62.6867 11.0831 63.1233 10.8631 63.57C10.6498 64.01 10.3731 64.4467 10.0331 64.88C9.69313 65.3067 9.33313 65.7133 8.95313 66.1C9.13979 66.0733 9.34646 66.05 9.57313 66.03C9.80646 66.01 10.0065 66 10.1731 66H11.5331V67.5H6.37313Z" fill="#101010"/>
+<path d="M101 73V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="93.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="93.5" y="38.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M100.743 49.64C100.35 49.64 99.9931 49.5967 99.6731 49.51C99.3598 49.4233 99.0798 49.3033 98.8331 49.15C98.5865 48.99 98.3731 48.8067 98.1931 48.6L99.0131 47.48C99.2398 47.6867 99.4831 47.86 99.7431 48C100.003 48.1333 100.276 48.2 100.563 48.2C100.796 48.2 100.996 48.17 101.163 48.11C101.336 48.0433 101.47 47.9467 101.563 47.82C101.656 47.6933 101.703 47.5367 101.703 47.35C101.703 47.1367 101.653 46.9533 101.553 46.8C101.453 46.6467 101.266 46.53 100.993 46.45C100.72 46.37 100.323 46.33 99.8031 46.33V45.07C100.23 45.07 100.563 45.03 100.803 44.95C101.043 44.87 101.213 44.7567 101.313 44.61C101.42 44.4633 101.473 44.2933 101.473 44.1C101.473 43.8467 101.4 43.6533 101.253 43.52C101.106 43.38 100.896 43.31 100.623 43.31C100.376 43.31 100.15 43.3633 99.9431 43.47C99.7365 43.5767 99.5198 43.73 99.2931 43.93L98.3931 42.84C98.7398 42.5467 99.0998 42.32 99.4731 42.16C99.8531 42 100.263 41.92 100.703 41.92C101.216 41.92 101.663 42 102.043 42.16C102.43 42.3133 102.726 42.5433 102.933 42.85C103.146 43.15 103.253 43.5233 103.253 43.97C103.253 44.3367 103.153 44.6633 102.953 44.95C102.753 45.23 102.456 45.45 102.063 45.61V45.66C102.336 45.74 102.58 45.8633 102.793 46.03C103.013 46.19 103.183 46.39 103.303 46.63C103.43 46.87 103.493 47.15 103.493 47.47C103.493 47.93 103.366 48.3233 103.113 48.65C102.86 48.97 102.523 49.2167 102.103 49.39C101.69 49.5567 101.236 49.64 100.743 49.64Z" fill="#101010"/>
+<path d="M90 8L19 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M51.7331 11.5V10.06H53.3131V5.83H51.9431V4.73C52.3431 4.65667 52.6831 4.56667 52.9631 4.46C53.2498 4.35333 53.5231 4.21667 53.7831 4.05H55.0931V10.06H56.4331V11.5H51.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab06.svg b/public/static/images/canvas/shape/180deg/plane_tab06.svg
new file mode 100644
index 00000000..8c3e8f6e
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="97" y="26" width="70" height="2" transform="rotate(180 97 26)" fill="#1083E3"/>
+<path d="M70 92H68L95 26H97L70 92Z" fill="#45CD7D"/>
+<path d="M2 92H0L27 26H29L2 92Z" fill="#45CD7D"/>
+<path d="M70 92H0L0.786873 90H70V92Z" fill="#1083E3"/>
+<path d="M84 92L110 24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="88.5" y="50.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="88.5" y="50.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M95.7431 61.64C95.3498 61.64 94.9931 61.5967 94.6731 61.51C94.3598 61.4233 94.0798 61.3033 93.8331 61.15C93.5865 60.99 93.3731 60.8067 93.1931 60.6L94.0131 59.48C94.2398 59.6867 94.4831 59.86 94.7431 60C95.0031 60.1333 95.2765 60.2 95.5631 60.2C95.7965 60.2 95.9965 60.17 96.1631 60.11C96.3365 60.0433 96.4698 59.9467 96.5631 59.82C96.6565 59.6933 96.7031 59.5367 96.7031 59.35C96.7031 59.1367 96.6531 58.9533 96.5531 58.8C96.4531 58.6467 96.2665 58.53 95.9931 58.45C95.7198 58.37 95.3231 58.33 94.8031 58.33V57.07C95.2298 57.07 95.5631 57.03 95.8031 56.95C96.0431 56.87 96.2131 56.7567 96.3131 56.61C96.4198 56.4633 96.4731 56.2933 96.4731 56.1C96.4731 55.8467 96.3998 55.6533 96.2531 55.52C96.1065 55.38 95.8965 55.31 95.6231 55.31C95.3765 55.31 95.1498 55.3633 94.9431 55.47C94.7365 55.5767 94.5198 55.73 94.2931 55.93L93.3931 54.84C93.7398 54.5467 94.0998 54.32 94.4731 54.16C94.8531 54 95.2631 53.92 95.7031 53.92C96.2165 53.92 96.6631 54 97.0431 54.16C97.4298 54.3133 97.7265 54.5433 97.9331 54.85C98.1465 55.15 98.2531 55.5233 98.2531 55.97C98.2531 56.3367 98.1531 56.6633 97.9531 56.95C97.7531 57.23 97.4565 57.45 97.0631 57.61V57.66C97.3365 57.74 97.5798 57.8633 97.7931 58.03C98.0131 58.19 98.1831 58.39 98.3031 58.63C98.4298 58.87 98.4931 59.15 98.4931 59.47C98.4931 59.93 98.3665 60.3233 98.1131 60.65C97.8598 60.97 97.5231 61.2167 97.1031 61.39C96.6898 61.5567 96.2365 61.64 95.7431 61.64Z" fill="#101010"/>
+<path d="M90 13L19 13" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="5.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="5.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M51.7331 16.5V15.06H53.3131V10.83H51.9431V9.73C52.3431 9.65667 52.6831 9.56667 52.9631 9.46C53.2498 9.35333 53.5231 9.21667 53.7831 9.05H55.0931V15.06H56.4331V16.5H51.7331Z" fill="#101010"/>
+<path d="M47 88V28" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="40.5" y="50.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="40.5" y="50.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M45.3731 61.5V60.48C45.9931 59.9133 46.5365 59.3867 47.0031 58.9C47.4698 58.4133 47.8331 57.96 48.0931 57.54C48.3531 57.1133 48.4831 56.72 48.4831 56.36C48.4831 56.1333 48.4431 55.9433 48.3631 55.79C48.2898 55.63 48.1798 55.51 48.0331 55.43C47.8865 55.35 47.7131 55.31 47.5131 55.31C47.2598 55.31 47.0298 55.3833 46.8231 55.53C46.6231 55.67 46.4331 55.8367 46.2531 56.03L45.2831 55.07C45.6498 54.6767 46.0198 54.3867 46.3931 54.2C46.7731 54.0133 47.2265 53.92 47.7531 53.92C48.2331 53.92 48.6565 54.0167 49.0231 54.21C49.3898 54.4033 49.6765 54.6767 49.8831 55.03C50.0898 55.3767 50.1931 55.7867 50.1931 56.26C50.1931 56.6867 50.0831 57.1233 49.8631 57.57C49.6498 58.01 49.3731 58.4467 49.0331 58.88C48.6931 59.3067 48.3331 59.7133 47.9531 60.1C48.1398 60.0733 48.3465 60.05 48.5731 60.03C48.8065 60.01 49.0065 60 49.1731 60H50.5331V61.5H45.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab07.svg b/public/static/images/canvas/shape/180deg/plane_tab07.svg
new file mode 100644
index 00000000..aef6908b
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="114" y="108" width="110" height="2" transform="rotate(180 114 108)" fill="#1083E3"/>
+<rect x="86" y="48" width="54" height="2" transform="rotate(180 86 48)" fill="#101010"/>
+<rect x="114" y="21" width="30" height="2" transform="rotate(180 114 21)" fill="#101010"/>
+<rect x="34" y="21" width="30" height="2" transform="rotate(180 34 21)" fill="#101010"/>
+<rect x="114" y="106" width="2" height="85" transform="rotate(180 114 106)" fill="#EA10AC"/>
+<rect x="6" y="106" width="2" height="85" transform="rotate(180 6 106)" fill="#EA10AC"/>
+<rect x="34" y="48" width="2" height="27" transform="rotate(180 34 48)" fill="#EA10AC"/>
+<rect x="86" y="48" width="2" height="27" transform="rotate(180 86 48)" fill="#EA10AC"/>
+<path d="M58 105V48" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="51.5" y="69.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="51.5" y="69.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8031 80.5V76.2C58.8031 75.9667 58.8098 75.6933 58.8231 75.38C58.8431 75.06 58.8565 74.78 58.8631 74.54H58.8231C58.7298 74.7533 58.6331 74.9667 58.5331 75.18C58.4331 75.3933 58.3298 75.6067 58.2231 75.82L57.3731 77.29H61.2831V78.64H55.6731V77.41L58.2631 73.05H60.4631V80.5H58.8031Z" fill="#101010"/>
+<path d="M99 47V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="92.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M99.8031 38.64C99.4098 38.64 99.0531 38.5933 98.7331 38.5C98.4131 38.4133 98.1265 38.2933 97.8731 38.14C97.6265 37.98 97.4031 37.8033 97.2031 37.61L98.0131 36.49C98.1531 36.6233 98.3031 36.7433 98.4631 36.85C98.6231 36.9567 98.7931 37.0433 98.9731 37.11C99.1598 37.17 99.3498 37.2 99.5431 37.2C99.7831 37.2 99.9898 37.1567 100.163 37.07C100.336 36.9833 100.47 36.8533 100.563 36.68C100.663 36.5067 100.713 36.2933 100.713 36.04C100.713 35.6667 100.61 35.3833 100.403 35.19C100.203 34.99 99.9431 34.89 99.6231 34.89C99.4165 34.89 99.2431 34.9167 99.1031 34.97C98.9698 35.0167 98.7931 35.11 98.5731 35.25L97.7931 34.74L97.9831 31.05H102.163V32.54H99.5131L99.4031 33.8C99.5365 33.7467 99.6631 33.71 99.7831 33.69C99.9031 33.6633 100.033 33.65 100.173 33.65C100.593 33.65 100.98 33.7333 101.333 33.9C101.686 34.0667 101.966 34.3233 102.173 34.67C102.386 35.0167 102.493 35.46 102.493 36C102.493 36.5533 102.366 37.03 102.113 37.43C101.866 37.8233 101.54 38.1233 101.133 38.33C100.726 38.5367 100.283 38.64 99.8031 38.64Z" fill="#101010"/>
+<path d="M113 8L85 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="91.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="91.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M96.7331 11.5V10.06H98.3131V5.83H96.9431V4.73C97.3431 4.65667 97.6831 4.56667 97.9631 4.46C98.2498 4.35333 98.5231 4.21667 98.7831 4.05H100.093V10.06H101.433V11.5H96.7331Z" fill="#101010"/>
+<path d="M5 8L33 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="11.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="11.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M18.7431 11.64C18.3498 11.64 17.9931 11.5967 17.6731 11.51C17.3598 11.4233 17.0798 11.3033 16.8331 11.15C16.5865 10.99 16.3731 10.8067 16.1931 10.6L17.0131 9.48C17.2398 9.68667 17.4831 9.86 17.7431 10C18.0031 10.1333 18.2765 10.2 18.5631 10.2C18.7965 10.2 18.9965 10.17 19.1631 10.11C19.3365 10.0433 19.4698 9.94667 19.5631 9.82C19.6565 9.69333 19.7031 9.53667 19.7031 9.35C19.7031 9.13667 19.6531 8.95333 19.5531 8.8C19.4531 8.64667 19.2665 8.53 18.9931 8.45C18.7198 8.37 18.3231 8.33 17.8031 8.33V7.07C18.2298 7.07 18.5631 7.03 18.8031 6.95C19.0431 6.87 19.2131 6.75667 19.3131 6.61C19.4198 6.46333 19.4731 6.29333 19.4731 6.1C19.4731 5.84667 19.3998 5.65333 19.2531 5.52C19.1065 5.38 18.8965 5.31 18.6231 5.31C18.3765 5.31 18.1498 5.36333 17.9431 5.47C17.7365 5.57667 17.5198 5.73 17.2931 5.93L16.3931 4.84C16.7398 4.54667 17.0998 4.32 17.4731 4.16C17.8531 4 18.2631 3.92 18.7031 3.92C19.2165 3.92 19.6631 4 20.0431 4.16C20.4298 4.31333 20.7265 4.54333 20.9331 4.85C21.1465 5.15 21.2531 5.52333 21.2531 5.97C21.2531 6.33667 21.1531 6.66333 20.9531 6.95C20.7531 7.23 20.4565 7.45 20.0631 7.61V7.66C20.3365 7.74 20.5798 7.86333 20.7931 8.03C21.0131 8.19 21.1831 8.39 21.3031 8.63C21.4298 8.87 21.4931 9.15 21.4931 9.47C21.4931 9.93 21.3665 10.3233 21.1131 10.65C20.8598 10.97 20.5231 11.2167 20.1031 11.39C19.6898 11.5567 19.2365 11.64 18.7431 11.64Z" fill="#101010"/>
+<path d="M82 31L36 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="51.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="51.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M56.3731 34.5V33.48C56.9931 32.9133 57.5365 32.3867 58.0031 31.9C58.4698 31.4133 58.8331 30.96 59.0931 30.54C59.3531 30.1133 59.4831 29.72 59.4831 29.36C59.4831 29.1333 59.4431 28.9433 59.3631 28.79C59.2898 28.63 59.1798 28.51 59.0331 28.43C58.8865 28.35 58.7131 28.31 58.5131 28.31C58.2598 28.31 58.0298 28.3833 57.8231 28.53C57.6231 28.67 57.4331 28.8367 57.2531 29.03L56.2831 28.07C56.6498 27.6767 57.0198 27.3867 57.3931 27.2C57.7731 27.0133 58.2265 26.92 58.7531 26.92C59.2331 26.92 59.6565 27.0167 60.0231 27.21C60.3898 27.4033 60.6765 27.6767 60.8831 28.03C61.0898 28.3767 61.1931 28.7867 61.1931 29.26C61.1931 29.6867 61.0831 30.1233 60.8631 30.57C60.6498 31.01 60.3731 31.4467 60.0331 31.88C59.6931 32.3067 59.3331 32.7133 58.9531 33.1C59.1398 33.0733 59.3465 33.05 59.5731 33.03C59.8065 33.01 60.0065 33 60.1731 33H61.5331V34.5H56.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab08.svg b/public/static/images/canvas/shape/180deg/plane_tab08.svg
new file mode 100644
index 00000000..6d4b6949
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="46" y="108" width="46" height="2" transform="rotate(180 46 108)" fill="#1083E3"/>
+<rect x="108" y="83" width="64" height="2" transform="rotate(180 108 83)" fill="#1083E3"/>
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="110" y="83" width="2" height="62" transform="rotate(180 110 83)" fill="#EA10AC"/>
+<rect x="2" y="106" width="2" height="85" transform="rotate(180 2 106)" fill="#EA10AC"/>
+<rect x="46" y="108" width="2" height="27" transform="rotate(180 46 108)" fill="#EA10AC"/>
+<path d="M79 80V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="72.5" y="44.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="72.5" y="44.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M79.8031 55.5V51.2C79.8031 50.9667 79.8098 50.6933 79.8231 50.38C79.8431 50.06 79.8565 49.78 79.8631 49.54H79.8231C79.7298 49.7533 79.6331 49.9667 79.5331 50.18C79.4331 50.3933 79.3298 50.6067 79.2231 50.82L78.3731 52.29H82.2831V53.64H76.6731V52.41L79.2631 48.05H81.4631V55.5H79.8031Z" fill="#101010"/>
+<path d="M23 105V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="16.5" y="56.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="16.5" y="56.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M23.2431 67.64C22.8498 67.64 22.4931 67.5967 22.1731 67.51C21.8598 67.4233 21.5798 67.3033 21.3331 67.15C21.0865 66.99 20.8731 66.8067 20.6931 66.6L21.5131 65.48C21.7398 65.6867 21.9831 65.86 22.2431 66C22.5031 66.1333 22.7765 66.2 23.0631 66.2C23.2965 66.2 23.4965 66.17 23.6631 66.11C23.8365 66.0433 23.9698 65.9467 24.0631 65.82C24.1565 65.6933 24.2031 65.5367 24.2031 65.35C24.2031 65.1367 24.1531 64.9533 24.0531 64.8C23.9531 64.6467 23.7665 64.53 23.4931 64.45C23.2198 64.37 22.8231 64.33 22.3031 64.33V63.07C22.7298 63.07 23.0631 63.03 23.3031 62.95C23.5431 62.87 23.7131 62.7567 23.8131 62.61C23.9198 62.4633 23.9731 62.2933 23.9731 62.1C23.9731 61.8467 23.8998 61.6533 23.7531 61.52C23.6065 61.38 23.3965 61.31 23.1231 61.31C22.8765 61.31 22.6498 61.3633 22.4431 61.47C22.2365 61.5767 22.0198 61.73 21.7931 61.93L20.8931 60.84C21.2398 60.5467 21.5998 60.32 21.9731 60.16C22.3531 60 22.7631 59.92 23.2031 59.92C23.7165 59.92 24.1631 60 24.5431 60.16C24.9298 60.3133 25.2265 60.5433 25.4331 60.85C25.6465 61.15 25.7531 61.5233 25.7531 61.97C25.7531 62.3367 25.6531 62.6633 25.4531 62.95C25.2531 63.23 24.9565 63.45 24.5631 63.61V63.66C24.8365 63.74 25.0798 63.8633 25.2931 64.03C25.5131 64.19 25.6831 64.39 25.8031 64.63C25.9298 64.87 25.9931 65.15 25.9931 65.47C25.9931 65.93 25.8665 66.3233 25.6131 66.65C25.3598 66.97 25.0231 67.2167 24.6031 67.39C24.1898 67.5567 23.7365 67.64 23.2431 67.64Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M110 94H47" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="70.5" y="86.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="70.5" y="86.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M75.3731 97.5V96.48C75.9931 95.9133 76.5365 95.3867 77.0031 94.9C77.4698 94.4133 77.8331 93.96 78.0931 93.54C78.3531 93.1133 78.4831 92.72 78.4831 92.36C78.4831 92.1333 78.4431 91.9433 78.3631 91.79C78.2898 91.63 78.1798 91.51 78.0331 91.43C77.8865 91.35 77.7131 91.31 77.5131 91.31C77.2598 91.31 77.0298 91.3833 76.8231 91.53C76.6231 91.67 76.4331 91.8367 76.2531 92.03L75.2831 91.07C75.6498 90.6767 76.0198 90.3867 76.3931 90.2C76.7731 90.0133 77.2265 89.92 77.7531 89.92C78.2331 89.92 78.6565 90.0167 79.0231 90.21C79.3898 90.4033 79.6765 90.6767 79.8831 91.03C80.0898 91.3767 80.1931 91.7867 80.1931 92.26C80.1931 92.6867 80.0831 93.1233 79.8631 93.57C79.6498 94.01 79.3731 94.4467 79.0331 94.88C78.6931 95.3067 78.3331 95.7133 77.9531 96.1C78.1398 96.0733 78.3465 96.05 78.5731 96.03C78.8065 96.01 79.0065 96 79.1731 96H80.5331V97.5H75.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab09.svg b/public/static/images/canvas/shape/180deg/plane_tab09.svg
new file mode 100644
index 00000000..c135a87b
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="46" y="89" width="46" height="2" transform="rotate(180 46 89)" fill="#1083E3"/>
+<path d="M98 68H44V66H98.5L98 68Z" fill="#1083E3"/>
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<path d="M100 68H98L108 21H110L100 68Z" fill="#45CD7D"/>
+<rect x="2" y="89" width="2" height="68" transform="rotate(180 2 89)" fill="#EA10AC"/>
+<rect x="46" y="89" width="2" height="23" transform="rotate(180 46 89)" fill="#EA10AC"/>
+<path d="M79 65V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="72.5" y="36.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="72.5" y="36.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M79.3031 47.64C78.9098 47.64 78.5531 47.5933 78.2331 47.5C77.9131 47.4133 77.6265 47.2933 77.3731 47.14C77.1265 46.98 76.9031 46.8033 76.7031 46.61L77.5131 45.49C77.6531 45.6233 77.8031 45.7433 77.9631 45.85C78.1231 45.9567 78.2931 46.0433 78.4731 46.11C78.6598 46.17 78.8498 46.2 79.0431 46.2C79.2831 46.2 79.4898 46.1567 79.6631 46.07C79.8365 45.9833 79.9698 45.8533 80.0631 45.68C80.1631 45.5067 80.2131 45.2933 80.2131 45.04C80.2131 44.6667 80.1098 44.3833 79.9031 44.19C79.7031 43.99 79.4431 43.89 79.1231 43.89C78.9165 43.89 78.7431 43.9167 78.6031 43.97C78.4698 44.0167 78.2931 44.11 78.0731 44.25L77.2931 43.74L77.4831 40.05H81.6631V41.54H79.0131L78.9031 42.8C79.0365 42.7467 79.1631 42.71 79.2831 42.69C79.4031 42.6633 79.5331 42.65 79.6731 42.65C80.0931 42.65 80.4798 42.7333 80.8331 42.9C81.1865 43.0667 81.4665 43.3233 81.6731 43.67C81.8865 44.0167 81.9931 44.46 81.9931 45C81.9931 45.5533 81.8665 46.03 81.6131 46.43C81.3665 46.8233 81.0398 47.1233 80.6331 47.33C80.2265 47.5367 79.7831 47.64 79.3031 47.64Z" fill="#101010"/>
+<path d="M23 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="16.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="16.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M23.8031 57.5V53.2C23.8031 52.9667 23.8098 52.6933 23.8231 52.38C23.8431 52.06 23.8565 51.78 23.8631 51.54H23.8231C23.7298 51.7533 23.6331 51.9667 23.5331 52.18C23.4331 52.3933 23.3298 52.6067 23.2231 52.82L22.3731 54.29H26.2831V55.64H20.6731V54.41L23.2631 50.05H25.4631V57.5H23.8031Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M99 79H49" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="66.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="66.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M71.3731 82.5V81.48C71.9931 80.9133 72.5365 80.3867 73.0031 79.9C73.4698 79.4133 73.8331 78.96 74.0931 78.54C74.3531 78.1133 74.4831 77.72 74.4831 77.36C74.4831 77.1333 74.4431 76.9433 74.3631 76.79C74.2898 76.63 74.1798 76.51 74.0331 76.43C73.8865 76.35 73.7131 76.31 73.5131 76.31C73.2598 76.31 73.0298 76.3833 72.8231 76.53C72.6231 76.67 72.4331 76.8367 72.2531 77.03L71.2831 76.07C71.6498 75.6767 72.0198 75.3867 72.3931 75.2C72.7731 75.0133 73.2265 74.92 73.7531 74.92C74.2331 74.92 74.6565 75.0167 75.0231 75.21C75.3898 75.4033 75.6765 75.6767 75.8831 76.03C76.0898 76.3767 76.1931 76.7867 76.1931 77.26C76.1931 77.6867 76.0831 78.1233 75.8631 78.57C75.6498 79.01 75.3731 79.4467 75.0331 79.88C74.6931 80.3067 74.3331 80.7133 73.9531 81.1C74.1398 81.0733 74.3465 81.05 74.5731 81.03C74.8065 81.01 75.0065 81 75.1731 81H76.5331V82.5H71.3731Z" fill="#101010"/>
+<path d="M46 100H-7.45058e-07" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="15.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="15.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M22.7431 103.64C22.3498 103.64 21.9931 103.597 21.6731 103.51C21.3598 103.423 21.0798 103.303 20.8331 103.15C20.5865 102.99 20.3731 102.807 20.1931 102.6L21.0131 101.48C21.2398 101.687 21.4831 101.86 21.7431 102C22.0031 102.133 22.2765 102.2 22.5631 102.2C22.7965 102.2 22.9965 102.17 23.1631 102.11C23.3365 102.043 23.4698 101.947 23.5631 101.82C23.6565 101.693 23.7031 101.537 23.7031 101.35C23.7031 101.137 23.6531 100.953 23.5531 100.8C23.4531 100.647 23.2665 100.53 22.9931 100.45C22.7198 100.37 22.3231 100.33 21.8031 100.33V99.07C22.2298 99.07 22.5631 99.03 22.8031 98.95C23.0431 98.87 23.2131 98.7567 23.3131 98.61C23.4198 98.4633 23.4731 98.2933 23.4731 98.1C23.4731 97.8467 23.3998 97.6533 23.2531 97.52C23.1065 97.38 22.8965 97.31 22.6231 97.31C22.3765 97.31 22.1498 97.3633 21.9431 97.47C21.7365 97.5767 21.5198 97.73 21.2931 97.93L20.3931 96.84C20.7398 96.5467 21.0998 96.32 21.4731 96.16C21.8531 96 22.2631 95.92 22.7031 95.92C23.2165 95.92 23.6631 96 24.0431 96.16C24.4298 96.3133 24.7265 96.5433 24.9331 96.85C25.1465 97.15 25.2531 97.5233 25.2531 97.97C25.2531 98.3367 25.1531 98.6633 24.9531 98.95C24.7531 99.23 24.4565 99.45 24.0631 99.61V99.66C24.3365 99.74 24.5798 99.8633 24.7931 100.03C25.0131 100.19 25.1831 100.39 25.3031 100.63C25.4298 100.87 25.4931 101.15 25.4931 101.47C25.4931 101.93 25.3665 102.323 25.1131 102.65C24.8598 102.97 24.5231 103.217 24.1031 103.39C23.6898 103.557 23.2365 103.64 22.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab10.svg b/public/static/images/canvas/shape/180deg/plane_tab10.svg
new file mode 100644
index 00000000..6a9ede6f
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="56" y="89" width="46" height="2" transform="rotate(180 56 89)" fill="#1083E3"/>
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="110" y="66" width="56" height="2" transform="rotate(180 110 66)" fill="#1083E3"/>
+<path d="M12 89H10L0 21H2L12 89Z" fill="#45CD7D"/>
+<rect x="56" y="89" width="2" height="23" transform="rotate(180 56 89)" fill="#EA10AC"/>
+<rect x="110" y="64" width="2" height="43" transform="rotate(180 110 64)" fill="#EA10AC"/>
+<path d="M83 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="76.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="76.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M83.3031 46.64C82.9098 46.64 82.5531 46.5933 82.2331 46.5C81.9131 46.4133 81.6265 46.2933 81.3731 46.14C81.1265 45.98 80.9031 45.8033 80.7031 45.61L81.5131 44.49C81.6531 44.6233 81.8031 44.7433 81.9631 44.85C82.1231 44.9567 82.2931 45.0433 82.4731 45.11C82.6598 45.17 82.8498 45.2 83.0431 45.2C83.2831 45.2 83.4898 45.1567 83.6631 45.07C83.8365 44.9833 83.9698 44.8533 84.0631 44.68C84.1631 44.5067 84.2131 44.2933 84.2131 44.04C84.2131 43.6667 84.1098 43.3833 83.9031 43.19C83.7031 42.99 83.4431 42.89 83.1231 42.89C82.9165 42.89 82.7431 42.9167 82.6031 42.97C82.4698 43.0167 82.2931 43.11 82.0731 43.25L81.2931 42.74L81.4831 39.05H85.6631V40.54H83.0131L82.9031 41.8C83.0365 41.7467 83.1631 41.71 83.2831 41.69C83.4031 41.6633 83.5331 41.65 83.6731 41.65C84.0931 41.65 84.4798 41.7333 84.8331 41.9C85.1865 42.0667 85.4665 42.3233 85.6731 42.67C85.8865 43.0167 85.9931 43.46 85.9931 44C85.9931 44.5533 85.8665 45.03 85.6131 45.43C85.3665 45.8233 85.0398 46.1233 84.6331 46.33C84.2265 46.5367 83.7831 46.64 83.3031 46.64Z" fill="#101010"/>
+<path d="M33 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="26.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="26.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M33.8031 57.5V53.2C33.8031 52.9667 33.8098 52.6933 33.8231 52.38C33.8431 52.06 33.8565 51.78 33.8631 51.54H33.8231C33.7298 51.7533 33.6331 51.9667 33.5331 52.18C33.4331 52.3933 33.3298 52.6067 33.2231 52.82L32.3731 54.29H36.2831V55.64H30.6731V54.41L33.2631 50.05H35.4631V57.5H33.8031Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05L56.0931 4.05V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M108 79H58" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="75.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="75.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.3731 82.5V81.48C80.9931 80.9133 81.5365 80.3867 82.0031 79.9C82.4698 79.4133 82.8331 78.96 83.0931 78.54C83.3531 78.1133 83.4831 77.72 83.4831 77.36C83.4831 77.1333 83.4431 76.9433 83.3631 76.79C83.2898 76.63 83.1798 76.51 83.0331 76.43C82.8865 76.35 82.7131 76.31 82.5131 76.31C82.2598 76.31 82.0298 76.3833 81.8231 76.53C81.6231 76.67 81.4331 76.8367 81.2531 77.03L80.2831 76.07C80.6498 75.6767 81.0198 75.3867 81.3931 75.2C81.7731 75.0133 82.2265 74.92 82.7531 74.92C83.2331 74.92 83.6565 75.0167 84.0231 75.21C84.3898 75.4033 84.6765 75.6767 84.8831 76.03C85.0898 76.3767 85.1931 76.7867 85.1931 77.26C85.1931 77.6867 85.0831 78.1233 84.8631 78.57C84.6498 79.01 84.3731 79.4467 84.0331 79.88C83.6931 80.3067 83.3331 80.7133 82.9531 81.1C83.1398 81.0733 83.3465 81.05 83.5731 81.03C83.8065 81.01 84.0065 81 84.1731 81H85.5331V82.5H80.3731Z" fill="#101010"/>
+<path d="M56 100H10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="25.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="25.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.7431 103.64C32.3498 103.64 31.9931 103.597 31.6731 103.51C31.3598 103.423 31.0798 103.303 30.8331 103.15C30.5865 102.99 30.3731 102.807 30.1931 102.6L31.0131 101.48C31.2398 101.687 31.4831 101.86 31.7431 102C32.0031 102.133 32.2765 102.2 32.5631 102.2C32.7965 102.2 32.9965 102.17 33.1631 102.11C33.3365 102.043 33.4698 101.947 33.5631 101.82C33.6565 101.693 33.7031 101.537 33.7031 101.35C33.7031 101.137 33.6531 100.953 33.5531 100.8C33.4531 100.647 33.2665 100.53 32.9931 100.45C32.7198 100.37 32.3231 100.33 31.8031 100.33V99.07C32.2298 99.07 32.5631 99.03 32.8031 98.95C33.0431 98.87 33.2131 98.7567 33.3131 98.61C33.4198 98.4633 33.4731 98.2933 33.4731 98.1C33.4731 97.8467 33.3998 97.6533 33.2531 97.52C33.1065 97.38 32.8965 97.31 32.6231 97.31C32.3765 97.31 32.1498 97.3633 31.9431 97.47C31.7365 97.5767 31.5198 97.73 31.2931 97.93L30.3931 96.84C30.7398 96.5467 31.0998 96.32 31.4731 96.16C31.8531 96 32.2631 95.92 32.7031 95.92C33.2165 95.92 33.6631 96 34.0431 96.16C34.4298 96.3133 34.7265 96.5433 34.9331 96.85C35.1465 97.15 35.2531 97.5233 35.2531 97.97C35.2531 98.3367 35.1531 98.6633 34.9531 98.95C34.7531 99.23 34.4565 99.45 34.0631 99.61V99.66C34.3365 99.74 34.5798 99.8633 34.7931 100.03C35.0131 100.19 35.1831 100.39 35.3031 100.63C35.4298 100.87 35.4931 101.15 35.4931 101.47C35.4931 101.93 35.3665 102.323 35.1131 102.65C34.8598 102.97 34.5231 103.217 34.1031 103.39C33.6898 103.557 33.2365 103.64 32.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab11.svg b/public/static/images/canvas/shape/180deg/plane_tab11.svg
new file mode 100644
index 00000000..a84d6796
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="109" y="89" width="53" height="2" transform="rotate(180 109 89)" fill="#1083E3"/>
+<rect x="100" y="21" width="100" height="2" transform="rotate(180 100 21)" fill="#101010"/>
+<rect x="56" y="66" width="56" height="2" transform="rotate(180 56 66)" fill="#1083E3"/>
+<path d="M110 89H108L98 21H100L110 89Z" fill="#45CD7D"/>
+<rect x="56" y="89" width="2" height="23" transform="rotate(180 56 89)" fill="#EA10AC"/>
+<rect x="2" y="64" width="2" height="43" transform="rotate(180 2 64)" fill="#EA10AC"/>
+<path d="M27 63L27 22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="20.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="20.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M27.3031 46.64C26.9098 46.64 26.5531 46.5933 26.2331 46.5C25.9131 46.4133 25.6265 46.2933 25.3731 46.14C25.1265 45.98 24.9031 45.8033 24.7031 45.61L25.5131 44.49C25.6531 44.6233 25.8031 44.7433 25.9631 44.85C26.1231 44.9567 26.2931 45.0433 26.4731 45.11C26.6598 45.17 26.8498 45.2 27.0431 45.2C27.2831 45.2 27.4898 45.1567 27.6631 45.07C27.8365 44.9833 27.9698 44.8533 28.0631 44.68C28.1631 44.5067 28.2131 44.2933 28.2131 44.04C28.2131 43.6667 28.1098 43.3833 27.9031 43.19C27.7031 42.99 27.4431 42.89 27.1231 42.89C26.9165 42.89 26.7431 42.9167 26.6031 42.97C26.4698 43.0167 26.2931 43.11 26.0731 43.25L25.2931 42.74L25.4831 39.05H29.6631V40.54H27.0131L26.9031 41.8C27.0365 41.7467 27.1631 41.71 27.2831 41.69C27.4031 41.6633 27.5331 41.65 27.6731 41.65C28.0931 41.65 28.4798 41.7333 28.8331 41.9C29.1865 42.0667 29.4665 42.3233 29.6731 42.67C29.8865 43.0167 29.9931 43.46 29.9931 44C29.9931 44.5533 29.8665 45.03 29.6131 45.43C29.3665 45.8233 29.0398 46.1233 28.6331 46.33C28.2265 46.5367 27.7831 46.64 27.3031 46.64Z" fill="#101010"/>
+<path d="M81 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="74.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="74.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M81.8031 57.5V53.2C81.8031 52.9667 81.8098 52.6933 81.8231 52.38C81.8431 52.06 81.8565 51.78 81.8631 51.54H81.8231C81.7298 51.7533 81.6331 51.9667 81.5331 52.18C81.4331 52.3933 81.3298 52.6067 81.2231 52.82L80.3731 54.29H84.2831V55.64H78.6731V54.41L81.2631 50.05H83.4631V57.5H81.8031Z" fill="#101010"/>
+<path d="M109 8H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M52 79H2" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="19.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="19.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M24.3731 82.5V81.48C24.9931 80.9133 25.5365 80.3867 26.0031 79.9C26.4698 79.4133 26.8331 78.96 27.0931 78.54C27.3531 78.1133 27.4831 77.72 27.4831 77.36C27.4831 77.1333 27.4431 76.9433 27.3631 76.79C27.2898 76.63 27.1798 76.51 27.0331 76.43C26.8865 76.35 26.7131 76.31 26.5131 76.31C26.2598 76.31 26.0298 76.3833 25.8231 76.53C25.6231 76.67 25.4331 76.8367 25.2531 77.03L24.2831 76.07C24.6498 75.6767 25.0198 75.3867 25.3931 75.2C25.7731 75.0133 26.2265 74.92 26.7531 74.92C27.2331 74.92 27.6565 75.0167 28.0231 75.21C28.3898 75.4033 28.6765 75.6767 28.8831 76.03C29.0898 76.3767 29.1931 76.7867 29.1931 77.26C29.1931 77.6867 29.0831 78.1233 28.8631 78.57C28.6498 79.01 28.3731 79.4467 28.0331 79.88C27.6931 80.3067 27.3331 80.7133 26.9531 81.1C27.1398 81.0733 27.3465 81.05 27.5731 81.03C27.8065 81.01 28.0065 81 28.1731 81H29.5331V82.5H24.3731Z" fill="#101010"/>
+<path d="M108 100H54" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="73.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="73.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.7431 103.64C80.3498 103.64 79.9931 103.597 79.6731 103.51C79.3598 103.423 79.0798 103.303 78.8331 103.15C78.5865 102.99 78.3731 102.807 78.1931 102.6L79.0131 101.48C79.2398 101.687 79.4831 101.86 79.7431 102C80.0031 102.133 80.2765 102.2 80.5631 102.2C80.7965 102.2 80.9965 102.17 81.1631 102.11C81.3365 102.043 81.4698 101.947 81.5631 101.82C81.6565 101.693 81.7031 101.537 81.7031 101.35C81.7031 101.137 81.6531 100.953 81.5531 100.8C81.4531 100.647 81.2665 100.53 80.9931 100.45C80.7198 100.37 80.3231 100.33 79.8031 100.33V99.07C80.2298 99.07 80.5631 99.03 80.8031 98.95C81.0431 98.87 81.2131 98.7567 81.3131 98.61C81.4198 98.4633 81.4731 98.2933 81.4731 98.1C81.4731 97.8467 81.3998 97.6533 81.2531 97.52C81.1065 97.38 80.8965 97.31 80.6231 97.31C80.3765 97.31 80.1498 97.3633 79.9431 97.47C79.7365 97.5767 79.5198 97.73 79.2931 97.93L78.3931 96.84C78.7398 96.5467 79.0998 96.32 79.4731 96.16C79.8531 96 80.2631 95.92 80.7031 95.92C81.2165 95.92 81.6631 96 82.0431 96.16C82.4298 96.3133 82.7265 96.5433 82.9331 96.85C83.1465 97.15 83.2531 97.5233 83.2531 97.97C83.2531 98.3367 83.1531 98.6633 82.9531 98.95C82.7531 99.23 82.4565 99.45 82.0631 99.61V99.66C82.3365 99.74 82.5798 99.8633 82.7931 100.03C83.0131 100.19 83.1831 100.39 83.3031 100.63C83.4298 100.87 83.4931 101.15 83.4931 101.47C83.4931 101.93 83.3665 102.323 83.1131 102.65C82.8598 102.97 82.5231 103.217 82.1031 103.39C81.6898 103.557 81.2365 103.64 80.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab12.svg b/public/static/images/canvas/shape/180deg/plane_tab12.svg
new file mode 100644
index 00000000..15e01d3a
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="56" y="66" width="46" height="2" transform="rotate(180 56 66)" fill="#1083E3"/>
+<path d="M12 66H10L0 21H2L12 66Z" fill="#45CD7D"/>
+<path d="M81 108H83L110 21H108L81 108Z" fill="#45CD7D"/>
+<path d="M83 108H81L54 64H56L83 108Z" fill="#45CD7D"/>
+<path d="M34 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 46.5V42.2C34.8031 41.9667 34.8098 41.6933 34.8231 41.38C34.8431 41.06 34.8565 40.78 34.8631 40.54H34.8231C34.7298 40.7533 34.6331 40.9667 34.5331 41.18C34.4331 41.3933 34.3298 41.6067 34.2231 41.82L33.3731 43.29H37.2831V44.64H31.6731V43.41L34.2631 39.05H36.4631V46.5H34.8031Z" fill="#101010"/>
+<path d="M81 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="74.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="74.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M81.2431 65.64C80.8498 65.64 80.4931 65.5967 80.1731 65.51C79.8598 65.4233 79.5798 65.3033 79.3331 65.15C79.0865 64.99 78.8731 64.8067 78.6931 64.6L79.5131 63.48C79.7398 63.6867 79.9831 63.86 80.2431 64C80.5031 64.1333 80.7765 64.2 81.0631 64.2C81.2965 64.2 81.4965 64.17 81.6631 64.11C81.8365 64.0433 81.9698 63.9467 82.0631 63.82C82.1565 63.6933 82.2031 63.5367 82.2031 63.35C82.2031 63.1367 82.1531 62.9533 82.0531 62.8C81.9531 62.6467 81.7665 62.53 81.4931 62.45C81.2198 62.37 80.8231 62.33 80.3031 62.33V61.07C80.7298 61.07 81.0631 61.03 81.3031 60.95C81.5431 60.87 81.7131 60.7567 81.8131 60.61C81.9198 60.4633 81.9731 60.2933 81.9731 60.1C81.9731 59.8467 81.8998 59.6533 81.7531 59.52C81.6065 59.38 81.3965 59.31 81.1231 59.31C80.8765 59.31 80.6498 59.3633 80.4431 59.47C80.2365 59.5767 80.0198 59.73 79.7931 59.93L78.8931 58.84C79.2398 58.5467 79.5998 58.32 79.9731 58.16C80.3531 58 80.7631 57.92 81.2031 57.92C81.7165 57.92 82.1631 58 82.5431 58.16C82.9298 58.3133 83.2265 58.5433 83.4331 58.85C83.6465 59.15 83.7531 59.5233 83.7531 59.97C83.7531 60.3367 83.6531 60.6633 83.4531 60.95C83.2531 61.23 82.9565 61.45 82.5631 61.61V61.66C82.8365 61.74 83.0798 61.8633 83.2931 62.03C83.5131 62.19 83.6831 62.39 83.8031 62.63C83.9298 62.87 83.9931 63.15 83.9931 63.47C83.9931 63.93 83.8665 64.3233 83.6131 64.65C83.3598 64.97 83.0231 65.2167 82.6031 65.39C82.1898 65.5567 81.7365 65.64 81.2431 65.64Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05L56.0931 4.05V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M60 77H10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="27.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.3731 80.5V79.48C32.9931 78.9133 33.5365 78.3867 34.0031 77.9C34.4698 77.4133 34.8331 76.96 35.0931 76.54C35.3531 76.1133 35.4831 75.72 35.4831 75.36C35.4831 75.1333 35.4431 74.9433 35.3631 74.79C35.2898 74.63 35.1798 74.51 35.0331 74.43C34.8865 74.35 34.7131 74.31 34.5131 74.31C34.2598 74.31 34.0298 74.3833 33.8231 74.53C33.6231 74.67 33.4331 74.8367 33.2531 75.03L32.2831 74.07C32.6498 73.6767 33.0198 73.3867 33.3931 73.2C33.7731 73.0133 34.2265 72.92 34.7531 72.92C35.2331 72.92 35.6565 73.0167 36.0231 73.21C36.3898 73.4033 36.6765 73.6767 36.8831 74.03C37.0898 74.3767 37.1931 74.7867 37.1931 75.26C37.1931 75.6867 37.0831 76.1233 36.8631 76.57C36.6498 77.01 36.3731 77.4467 36.0331 77.88C35.6931 78.3067 35.3331 78.7133 34.9531 79.1C35.1398 79.0733 35.3465 79.05 35.5731 79.03C35.8065 79.01 36.0065 79 36.1731 79H37.5331V80.5H32.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab13.svg b/public/static/images/canvas/shape/180deg/plane_tab13.svg
new file mode 100644
index 00000000..48d8f87e
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="56" y="66" width="56" height="2" transform="rotate(180 56 66)" fill="#1083E3"/>
+<path d="M81 108H83L110 21H108L81 108Z" fill="#45CD7D"/>
+<path d="M83 108H81L54 64H56L83 108Z" fill="#45CD7D"/>
+<rect x="2" y="64" width="2" height="43" transform="rotate(180 2 64)" fill="#EA10AC"/>
+<path d="M34 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 46.5V42.2C34.8031 41.9667 34.8098 41.6933 34.8231 41.38C34.8431 41.06 34.8565 40.78 34.8631 40.54H34.8231C34.7298 40.7533 34.6331 40.9667 34.5331 41.18C34.4331 41.3933 34.3298 41.6067 34.2231 41.82L33.3731 43.29H37.2831V44.64H31.6731V43.41L34.2631 39.05H36.4631V46.5H34.8031Z" fill="#101010"/>
+<path d="M81 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="74.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="74.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M81.2431 65.64C80.8498 65.64 80.4931 65.5967 80.1731 65.51C79.8598 65.4233 79.5798 65.3033 79.3331 65.15C79.0865 64.99 78.8731 64.8067 78.6931 64.6L79.5131 63.48C79.7398 63.6867 79.9831 63.86 80.2431 64C80.5031 64.1333 80.7765 64.2 81.0631 64.2C81.2965 64.2 81.4965 64.17 81.6631 64.11C81.8365 64.0433 81.9698 63.9467 82.0631 63.82C82.1565 63.6933 82.2031 63.5367 82.2031 63.35C82.2031 63.1367 82.1531 62.9533 82.0531 62.8C81.9531 62.6467 81.7665 62.53 81.4931 62.45C81.2198 62.37 80.8231 62.33 80.3031 62.33V61.07C80.7298 61.07 81.0631 61.03 81.3031 60.95C81.5431 60.87 81.7131 60.7567 81.8131 60.61C81.9198 60.4633 81.9731 60.2933 81.9731 60.1C81.9731 59.8467 81.8998 59.6533 81.7531 59.52C81.6065 59.38 81.3965 59.31 81.1231 59.31C80.8765 59.31 80.6498 59.3633 80.4431 59.47C80.2365 59.5767 80.0198 59.73 79.7931 59.93L78.8931 58.84C79.2398 58.5467 79.5998 58.32 79.9731 58.16C80.3531 58 80.7631 57.92 81.2031 57.92C81.7165 57.92 82.1631 58 82.5431 58.16C82.9298 58.3133 83.2265 58.5433 83.4331 58.85C83.6465 59.15 83.7531 59.5233 83.7531 59.97C83.7531 60.3367 83.6531 60.6633 83.4531 60.95C83.2531 61.23 82.9565 61.45 82.5631 61.61V61.66C82.8365 61.74 83.0798 61.8633 83.2931 62.03C83.5131 62.19 83.6831 62.39 83.8031 62.63C83.9298 62.87 83.9931 63.15 83.9931 63.47C83.9931 63.93 83.8665 64.3233 83.6131 64.65C83.3598 64.97 83.0231 65.2167 82.6031 65.39C82.1898 65.5567 81.7365 65.64 81.2431 65.64Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05L56.0931 4.05V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M60 77H10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="27.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.3731 80.5V79.48C32.9931 78.9133 33.5365 78.3867 34.0031 77.9C34.4698 77.4133 34.8331 76.96 35.0931 76.54C35.3531 76.1133 35.4831 75.72 35.4831 75.36C35.4831 75.1333 35.4431 74.9433 35.3631 74.79C35.2898 74.63 35.1798 74.51 35.0331 74.43C34.8865 74.35 34.7131 74.31 34.5131 74.31C34.2598 74.31 34.0298 74.3833 33.8231 74.53C33.6231 74.67 33.4331 74.8367 33.2531 75.03L32.2831 74.07C32.6498 73.6767 33.0198 73.3867 33.3931 73.2C33.7731 73.0133 34.2265 72.92 34.7531 72.92C35.2331 72.92 35.6565 73.0167 36.0231 73.21C36.3898 73.4033 36.6765 73.6767 36.8831 74.03C37.0898 74.3767 37.1931 74.7867 37.1931 75.26C37.1931 75.6867 37.0831 76.1233 36.8631 76.57C36.6498 77.01 36.3731 77.4467 36.0331 77.88C35.6931 78.3067 35.3331 78.7133 34.9531 79.1C35.1398 79.0733 35.3465 79.05 35.5731 79.03C35.8065 79.01 36.0065 79 36.1731 79H37.5331V80.5H32.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab14.svg b/public/static/images/canvas/shape/180deg/plane_tab14.svg
new file mode 100644
index 00000000..e94c8459
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="110" y="21" width="42" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="42" y="21" width="42" height="2" transform="rotate(180 42 21)" fill="#101010"/>
+<rect x="110" y="89" width="110" height="2" transform="rotate(180 110 89)" fill="#1083E3"/>
+<path d="M54 45H56L70 21H68L54 45Z" fill="#45CD7D"/>
+<path d="M56 45H54L40 21H42L56 45Z" fill="#45CD7D"/>
+<rect x="2" y="87" width="2" height="66" transform="rotate(180 2 87)" fill="#EA10AC"/>
+<rect x="110" y="87" width="2" height="66" transform="rotate(180 110 87)" fill="#EA10AC"/>
+<path d="M55 86V46" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="48.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="48.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M55.3031 69.64C54.9098 69.64 54.5531 69.5933 54.2331 69.5C53.9131 69.4133 53.6265 69.2933 53.3731 69.14C53.1265 68.98 52.9031 68.8033 52.7031 68.61L53.5131 67.49C53.6531 67.6233 53.8031 67.7433 53.9631 67.85C54.1231 67.9567 54.2931 68.0433 54.4731 68.11C54.6598 68.17 54.8498 68.2 55.0431 68.2C55.2831 68.2 55.4898 68.1567 55.6631 68.07C55.8365 67.9833 55.9698 67.8533 56.0631 67.68C56.1631 67.5067 56.2131 67.2933 56.2131 67.04C56.2131 66.6667 56.1098 66.3833 55.9031 66.19C55.7031 65.99 55.4431 65.89 55.1231 65.89C54.9165 65.89 54.7431 65.9167 54.6031 65.97C54.4698 66.0167 54.2931 66.11 54.0731 66.25L53.2931 65.74L53.4831 62.05H57.6631V63.54H55.0131L54.9031 64.8C55.0365 64.7467 55.1631 64.71 55.2831 64.69C55.4031 64.6633 55.5331 64.65 55.6731 64.65C56.0931 64.65 56.4798 64.7333 56.8331 64.9C57.1865 65.0667 57.4665 65.3233 57.6731 65.67C57.8865 66.0167 57.9931 66.46 57.9931 67C57.9931 67.5533 57.8665 68.03 57.6131 68.43C57.3665 68.8233 57.0398 69.1233 56.6331 69.33C56.2265 69.5367 55.7831 69.64 55.3031 69.64Z" fill="#101010"/>
+<path d="M89 85V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="82.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="82.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M89.8031 57.5V53.2C89.8031 52.9667 89.8098 52.6933 89.8231 52.38C89.8431 52.06 89.8565 51.78 89.8631 51.54H89.8231C89.7298 51.7533 89.6331 51.9667 89.5331 52.18C89.4331 52.3933 89.3298 52.6067 89.2231 52.82L88.3731 54.29H92.2831V55.64H86.6731V54.41L89.2631 50.05H91.4631V57.5H89.8031Z" fill="#101010"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M110 8L70 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="82.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="82.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M87.3731 11.5V10.48C87.9931 9.91333 88.5365 9.38667 89.0031 8.9C89.4698 8.41333 89.8331 7.96 90.0931 7.54C90.3531 7.11333 90.4831 6.72 90.4831 6.36C90.4831 6.13333 90.4431 5.94333 90.3631 5.79C90.2898 5.63 90.1798 5.51 90.0331 5.43C89.8865 5.35 89.7131 5.31 89.5131 5.31C89.2598 5.31 89.0298 5.38333 88.8231 5.53C88.6231 5.67 88.4331 5.83667 88.2531 6.03L87.2831 5.07C87.6498 4.67667 88.0198 4.38667 88.3931 4.2C88.7731 4.01333 89.2265 3.92 89.7531 3.92C90.2331 3.92 90.6565 4.01667 91.0231 4.21C91.3898 4.40333 91.6765 4.67667 91.8831 5.03C92.0898 5.37667 92.1931 5.78667 92.1931 6.26C92.1931 6.68667 92.0831 7.12333 91.8631 7.57C91.6498 8.01 91.3731 8.44667 91.0331 8.88C90.6931 9.30667 90.3331 9.71333 89.9531 10.1C90.1398 10.0733 90.3465 10.05 90.5731 10.03C90.8065 10.01 91.0065 10 91.1731 10H92.5331V11.5H87.3731Z" fill="#101010"/>
+<path d="M40 8L-7.89762e-07 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="12.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="12.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M19.7431 11.64C19.3498 11.64 18.9931 11.5967 18.6731 11.51C18.3598 11.4233 18.0798 11.3033 17.8331 11.15C17.5865 10.99 17.3731 10.8067 17.1931 10.6L18.0131 9.48C18.2398 9.68667 18.4831 9.86 18.7431 10C19.0031 10.1333 19.2765 10.2 19.5631 10.2C19.7965 10.2 19.9965 10.17 20.1631 10.11C20.3365 10.0433 20.4698 9.94667 20.5631 9.82C20.6565 9.69333 20.7031 9.53667 20.7031 9.35C20.7031 9.13667 20.6531 8.95333 20.5531 8.8C20.4531 8.64667 20.2665 8.53 19.9931 8.45C19.7198 8.37 19.3231 8.33 18.8031 8.33V7.07C19.2298 7.07 19.5631 7.03 19.8031 6.95C20.0431 6.87 20.2131 6.75667 20.3131 6.61C20.4198 6.46333 20.4731 6.29333 20.4731 6.1C20.4731 5.84667 20.3998 5.65333 20.2531 5.52C20.1065 5.38 19.8965 5.31 19.6231 5.31C19.3765 5.31 19.1498 5.36333 18.9431 5.47C18.7365 5.57667 18.5198 5.73 18.2931 5.93L17.3931 4.84C17.7398 4.54667 18.0998 4.32 18.4731 4.16C18.8531 4 19.2631 3.92 19.7031 3.92C20.2165 3.92 20.6631 4 21.0431 4.16C21.4298 4.31333 21.7265 4.54333 21.9331 4.85C22.1465 5.15 22.2531 5.52333 22.2531 5.97C22.2531 6.33667 22.1531 6.66333 21.9531 6.95C21.7531 7.23 21.4565 7.45 21.0631 7.61V7.66C21.3365 7.74 21.5798 7.86333 21.7931 8.03C22.0131 8.19 22.1831 8.39 22.3031 8.63C22.4298 8.87 22.4931 9.15 22.4931 9.47C22.4931 9.93 22.3665 10.3233 22.1131 10.65C21.8598 10.97 21.5231 11.2167 21.1031 11.39C20.6898 11.5567 20.2365 11.64 19.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab15.svg b/public/static/images/canvas/shape/180deg/plane_tab15.svg
new file mode 100644
index 00000000..cc6f56f2
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="92" y="21" width="74" height="2" transform="rotate(180 92 21)" fill="#101010"/>
+<path d="M91 66.5L55.5 106L18.5 66.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="20" y="67" width="2" height="46" transform="rotate(180 20 67)" fill="#EA10AC"/>
+<rect x="92" y="67" width="2" height="46" transform="rotate(180 92 67)" fill="#EA10AC"/>
+<path d="M55 103V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="48.5" y="55.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="48.5" y="55.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M52.8731 66.5V65.48C53.4931 64.9133 54.0365 64.3867 54.5031 63.9C54.9698 63.4133 55.3331 62.96 55.5931 62.54C55.8531 62.1133 55.9831 61.72 55.9831 61.36C55.9831 61.1333 55.9431 60.9433 55.8631 60.79C55.7898 60.63 55.6798 60.51 55.5331 60.43C55.3865 60.35 55.2131 60.31 55.0131 60.31C54.7598 60.31 54.5298 60.3833 54.3231 60.53C54.1231 60.67 53.9331 60.8367 53.7531 61.03L52.7831 60.07C53.1498 59.6767 53.5198 59.3867 53.8931 59.2C54.2731 59.0133 54.7265 58.92 55.2531 58.92C55.7331 58.92 56.1565 59.0167 56.5231 59.21C56.8898 59.4033 57.1765 59.6767 57.3831 60.03C57.5898 60.3767 57.6931 60.7867 57.6931 61.26C57.6931 61.6867 57.5831 62.1233 57.3631 62.57C57.1498 63.01 56.8731 63.4467 56.5331 63.88C56.1931 64.3067 55.8331 64.7133 55.4531 65.1C55.6398 65.0733 55.8465 65.05 56.0731 65.03C56.3065 65.01 56.5065 65 56.6731 65H58.0331V66.5H52.8731Z" fill="#101010"/>
+<path d="M102 67V20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="95.5" y="36.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="95.5" y="36.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M102.243 47.64C101.85 47.64 101.493 47.5967 101.173 47.51C100.86 47.4233 100.58 47.3033 100.333 47.15C100.086 46.99 99.8731 46.8067 99.6931 46.6L100.513 45.48C100.74 45.6867 100.983 45.86 101.243 46C101.503 46.1333 101.776 46.2 102.063 46.2C102.296 46.2 102.496 46.17 102.663 46.11C102.836 46.0433 102.97 45.9467 103.063 45.82C103.156 45.6933 103.203 45.5367 103.203 45.35C103.203 45.1367 103.153 44.9533 103.053 44.8C102.953 44.6467 102.766 44.53 102.493 44.45C102.22 44.37 101.823 44.33 101.303 44.33V43.07C101.73 43.07 102.063 43.03 102.303 42.95C102.543 42.87 102.713 42.7567 102.813 42.61C102.92 42.4633 102.973 42.2933 102.973 42.1C102.973 41.8467 102.9 41.6533 102.753 41.52C102.606 41.38 102.396 41.31 102.123 41.31C101.876 41.31 101.65 41.3633 101.443 41.47C101.236 41.5767 101.02 41.73 100.793 41.93L99.8931 40.84C100.24 40.5467 100.6 40.32 100.973 40.16C101.353 40 101.763 39.92 102.203 39.92C102.716 39.92 103.163 40 103.543 40.16C103.93 40.3133 104.226 40.5433 104.433 40.85C104.646 41.15 104.753 41.5233 104.753 41.97C104.753 42.3367 104.653 42.6633 104.453 42.95C104.253 43.23 103.956 43.45 103.563 43.61V43.66C103.836 43.74 104.08 43.8633 104.293 44.03C104.513 44.19 104.683 44.39 104.803 44.63C104.93 44.87 104.993 45.15 104.993 45.47C104.993 45.93 104.866 46.3233 104.613 46.65C104.36 46.97 104.023 47.2167 103.603 47.39C103.19 47.5567 102.736 47.64 102.243 47.64Z" fill="#101010"/>
+<path d="M92 8L18 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05L56.0931 4.05V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab16.svg b/public/static/images/canvas/shape/180deg/plane_tab16.svg
new file mode 100644
index 00000000..42d6ad2e
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M109 20L84 39" stroke="#45CD7D" stroke-width="2"/>
+<path d="M1 20L26 39" stroke="#45CD7D" stroke-width="2"/>
+<rect x="110" y="21" width="110" height="2" transform="rotate(180 110 21)" fill="#101010"/>
+<rect x="85" y="89" width="60" height="2" transform="rotate(180 85 89)" fill="#1083E3"/>
+<rect x="85" y="87" width="2" height="49" transform="rotate(180 85 87)" fill="#EA10AC"/>
+<rect x="27" y="87" width="2" height="49" transform="rotate(180 27 87)" fill="#EA10AC"/>
+<path d="M55 86V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="48.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="48.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M55.2431 58.64C54.8498 58.64 54.4931 58.5967 54.1731 58.51C53.8598 58.4233 53.5798 58.3033 53.3331 58.15C53.0865 57.99 52.8731 57.8067 52.6931 57.6L53.5131 56.48C53.7398 56.6867 53.9831 56.86 54.2431 57C54.5031 57.1333 54.7765 57.2 55.0631 57.2C55.2965 57.2 55.4965 57.17 55.6631 57.11C55.8365 57.0433 55.9698 56.9467 56.0631 56.82C56.1565 56.6933 56.2031 56.5367 56.2031 56.35C56.2031 56.1367 56.1531 55.9533 56.0531 55.8C55.9531 55.6467 55.7665 55.53 55.4931 55.45C55.2198 55.37 54.8231 55.33 54.3031 55.33V54.07C54.7298 54.07 55.0631 54.03 55.3031 53.95C55.5431 53.87 55.7131 53.7567 55.8131 53.61C55.9198 53.4633 55.9731 53.2933 55.9731 53.1C55.9731 52.8467 55.8998 52.6533 55.7531 52.52C55.6065 52.38 55.3965 52.31 55.1231 52.31C54.8765 52.31 54.6498 52.3633 54.4431 52.47C54.2365 52.5767 54.0198 52.73 53.7931 52.93L52.8931 51.84C53.2398 51.5467 53.5998 51.32 53.9731 51.16C54.3531 51 54.7631 50.92 55.2031 50.92C55.7165 50.92 56.1631 51 56.5431 51.16C56.9298 51.3133 57.2265 51.5433 57.4331 51.85C57.6465 52.15 57.7531 52.5233 57.7531 52.97C57.7531 53.3367 57.6531 53.6633 57.4531 53.95C57.2531 54.23 56.9565 54.45 56.5631 54.61V54.66C56.8365 54.74 57.0798 54.8633 57.2931 55.03C57.5131 55.19 57.6831 55.39 57.8031 55.63C57.9298 55.87 57.9931 56.15 57.9931 56.47C57.9931 56.93 57.8665 57.3233 57.6131 57.65C57.3598 57.97 57.0231 58.2167 56.6031 58.39C56.1898 58.5567 55.7365 58.64 55.2431 58.64Z" fill="#101010"/>
+<path d="M96 89V42" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="89.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="89.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M96.8031 69.5V65.2C96.8031 64.9667 96.8098 64.6933 96.8231 64.38C96.8431 64.06 96.8565 63.78 96.8631 63.54H96.8231C96.7298 63.7533 96.6331 63.9667 96.5331 64.18C96.4331 64.3933 96.3298 64.6067 96.2231 64.82L95.3731 66.29H99.2831V67.64H93.6731V66.41L96.2631 62.05H98.4631V69.5H96.8031Z" fill="#101010"/>
+<path d="M109 8L1 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05L56.0931 4.05V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M85 100H25" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.8731 104V102.98C53.4931 102.413 54.0365 101.887 54.5031 101.4C54.9698 100.913 55.3331 100.46 55.5931 100.04C55.8531 99.6133 55.9831 99.22 55.9831 98.86C55.9831 98.6333 55.9431 98.4433 55.8631 98.29C55.7898 98.13 55.6798 98.01 55.5331 97.93C55.3865 97.85 55.2131 97.81 55.0131 97.81C54.7598 97.81 54.5298 97.8833 54.3231 98.03C54.1231 98.17 53.9331 98.3367 53.7531 98.53L52.7831 97.57C53.1498 97.1767 53.5198 96.8867 53.8931 96.7C54.2731 96.5133 54.7265 96.42 55.2531 96.42C55.7331 96.42 56.1565 96.5167 56.5231 96.71C56.8898 96.9033 57.1765 97.1767 57.3831 97.53C57.5898 97.8767 57.6931 98.2867 57.6931 98.76C57.6931 99.1867 57.5831 99.6233 57.3631 100.07C57.1498 100.51 56.8731 100.947 56.5331 101.38C56.1931 101.807 55.8331 102.213 55.4531 102.6C55.6398 102.573 55.8465 102.55 56.0731 102.53C56.3065 102.51 56.5065 102.5 56.6731 102.5H58.0331V104H52.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab17.svg b/public/static/images/canvas/shape/180deg/plane_tab17.svg
new file mode 100644
index 00000000..741f65d4
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.5 20L12.5 63L26 88.5" stroke="#45CD7D" stroke-width="2"/>
+<path d="M99 20L69 88.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="100" y="21" width="70" height="2" transform="rotate(180 100 21)" fill="#101010"/>
+<rect x="70" y="89" width="45" height="2" transform="rotate(180 70 89)" fill="#1083E3"/>
+<path d="M50 86V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M50.2431 58.64C49.8498 58.64 49.4931 58.5967 49.1731 58.51C48.8598 58.4233 48.5798 58.3033 48.3331 58.15C48.0865 57.99 47.8731 57.8067 47.6931 57.6L48.5131 56.48C48.7398 56.6867 48.9831 56.86 49.2431 57C49.5031 57.1333 49.7765 57.2 50.0631 57.2C50.2965 57.2 50.4965 57.17 50.6631 57.11C50.8365 57.0433 50.9698 56.9467 51.0631 56.82C51.1565 56.6933 51.2031 56.5367 51.2031 56.35C51.2031 56.1367 51.1531 55.9533 51.0531 55.8C50.9531 55.6467 50.7665 55.53 50.4931 55.45C50.2198 55.37 49.8231 55.33 49.3031 55.33V54.07C49.7298 54.07 50.0631 54.03 50.3031 53.95C50.5431 53.87 50.7131 53.7567 50.8131 53.61C50.9198 53.4633 50.9731 53.2933 50.9731 53.1C50.9731 52.8467 50.8998 52.6533 50.7531 52.52C50.6065 52.38 50.3965 52.31 50.1231 52.31C49.8765 52.31 49.6498 52.3633 49.4431 52.47C49.2365 52.5767 49.0198 52.73 48.7931 52.93L47.8931 51.84C48.2398 51.5467 48.5998 51.32 48.9731 51.16C49.3531 51 49.7631 50.92 50.2031 50.92C50.7165 50.92 51.1631 51 51.5431 51.16C51.9298 51.3133 52.2265 51.5433 52.4331 51.85C52.6465 52.15 52.7531 52.5233 52.7531 52.97C52.7531 53.3367 52.6531 53.6633 52.4531 53.95C52.2531 54.23 51.9565 54.45 51.5631 54.61V54.66C51.8365 54.74 52.0798 54.8633 52.2931 55.03C52.5131 55.19 52.6831 55.39 52.8031 55.63C52.9298 55.87 52.9931 56.15 52.9931 56.47C52.9931 56.93 52.8665 57.3233 52.6131 57.65C52.3598 57.97 52.0231 58.2167 51.6031 58.39C51.1898 58.5567 50.7365 58.64 50.2431 58.64Z" fill="#101010"/>
+<path d="M79.7651 88.6555L110.062 26.663" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="87.4995" y="50.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="87.4995" y="50.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M94.8026 61.5V57.2C94.8026 56.9667 94.8093 56.6933 94.8226 56.38C94.8426 56.06 94.856 55.78 94.8626 55.54H94.8226C94.7293 55.7533 94.6326 55.9667 94.5326 56.18C94.4326 56.3933 94.3293 56.6067 94.2226 56.82L93.3726 58.29H97.2826V59.64H91.6726V58.41L94.2626 54.05H96.4626V61.5H94.8026Z" fill="#101010"/>
+<path d="M100 8L30 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="57.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M62.7331 11.5V10.06H64.3131V5.83H62.9431V4.73C63.3431 4.65667 63.6831 4.56667 63.9631 4.46C64.2498 4.35333 64.5231 4.21667 64.7831 4.05L66.0931 4.05V10.06H67.4331V11.5H62.7331Z" fill="#101010"/>
+<path d="M70 100H26" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="40.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="40.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M45.8731 104V102.98C46.4931 102.413 47.0365 101.887 47.5031 101.4C47.9698 100.913 48.3331 100.46 48.5931 100.04C48.8531 99.6133 48.9831 99.22 48.9831 98.86C48.9831 98.6333 48.9431 98.4433 48.8631 98.29C48.7898 98.13 48.6798 98.01 48.5331 97.93C48.3865 97.85 48.2131 97.81 48.0131 97.81C47.7598 97.81 47.5298 97.8833 47.3231 98.03C47.1231 98.17 46.9331 98.3367 46.7531 98.53L45.7831 97.57C46.1498 97.1767 46.5198 96.8867 46.8931 96.7C47.2731 96.5133 47.7265 96.42 48.2531 96.42C48.7331 96.42 49.1565 96.5167 49.5231 96.71C49.8898 96.9033 50.1765 97.1767 50.3831 97.53C50.5898 97.8767 50.6931 98.2867 50.6931 98.76C50.6931 99.1867 50.5831 99.6233 50.3631 100.07C50.1498 100.51 49.8731 100.947 49.5331 101.38C49.1931 101.807 48.8331 102.213 48.4531 102.6C48.6398 102.573 48.8465 102.55 49.0731 102.53C49.3065 102.51 49.5065 102.5 49.6731 102.5H51.0331V104H45.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/180deg/plane_tab18.svg b/public/static/images/canvas/shape/180deg/plane_tab18.svg
new file mode 100644
index 00000000..c59192ca
--- /dev/null
+++ b/public/static/images/canvas/shape/180deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 20L51 106L2 74L33 20" stroke="#45CD7D" stroke-width="2"/>
+<rect x="101" y="21" width="69" height="2" transform="rotate(180 101 21)" fill="#101010"/>
+<path d="M50 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M47.8731 65.5V64.48C48.4931 63.9133 49.0365 63.3867 49.5031 62.9C49.9698 62.4133 50.3331 61.96 50.5931 61.54C50.8531 61.1133 50.9831 60.72 50.9831 60.36C50.9831 60.1333 50.9431 59.9433 50.8631 59.79C50.7898 59.63 50.6798 59.51 50.5331 59.43C50.3865 59.35 50.2131 59.31 50.0131 59.31C49.7598 59.31 49.5298 59.3833 49.3231 59.53C49.1231 59.67 48.9331 59.8367 48.7531 60.03L47.7831 59.07C48.1498 58.6767 48.5198 58.3867 48.8931 58.2C49.2731 58.0133 49.7265 57.92 50.2531 57.92C50.7331 57.92 51.1565 58.0167 51.5231 58.21C51.8898 58.4033 52.1765 58.6767 52.3831 59.03C52.5898 59.3767 52.6931 59.7867 52.6931 60.26C52.6931 60.6867 52.5831 61.1233 52.3631 61.57C52.1498 62.01 51.8731 62.4467 51.5331 62.88C51.1931 63.3067 50.8331 63.7133 50.4531 64.1C50.6398 64.0733 50.8465 64.05 51.0731 64.03C51.3065 64.01 51.5065 64 51.6731 64H53.0331V65.5H47.8731Z" fill="#101010"/>
+<path d="M61.0205 107.158L110.285 25.9297" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="78.4995" y="59.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="78.4995" y="59.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M85.2426 70.64C84.8493 70.64 84.4926 70.5967 84.1726 70.51C83.8593 70.4233 83.5793 70.3033 83.3326 70.15C83.086 69.99 82.8726 69.8067 82.6926 69.6L83.5126 68.48C83.7393 68.6867 83.9826 68.86 84.2426 69C84.5026 69.1333 84.776 69.2 85.0626 69.2C85.296 69.2 85.496 69.17 85.6626 69.11C85.836 69.0433 85.9693 68.9467 86.0626 68.82C86.156 68.6933 86.2026 68.5367 86.2026 68.35C86.2026 68.1367 86.1526 67.9533 86.0526 67.8C85.9526 67.6467 85.766 67.53 85.4926 67.45C85.2193 67.37 84.8226 67.33 84.3026 67.33V66.07C84.7293 66.07 85.0626 66.03 85.3026 65.95C85.5426 65.87 85.7126 65.7567 85.8126 65.61C85.9193 65.4633 85.9726 65.2933 85.9726 65.1C85.9726 64.8467 85.8993 64.6533 85.7526 64.52C85.606 64.38 85.396 64.31 85.1226 64.31C84.876 64.31 84.6493 64.3633 84.4426 64.47C84.236 64.5767 84.0193 64.73 83.7926 64.93L82.8926 63.84C83.2393 63.5467 83.5993 63.32 83.9726 63.16C84.3526 63 84.7626 62.92 85.2026 62.92C85.716 62.92 86.1626 63 86.5426 63.16C86.9293 63.3133 87.226 63.5433 87.4326 63.85C87.646 64.15 87.7526 64.5233 87.7526 64.97C87.7526 65.3367 87.6526 65.6633 87.4526 65.95C87.2526 66.23 86.956 66.45 86.5626 66.61V66.66C86.836 66.74 87.0793 66.8633 87.2926 67.03C87.5126 67.19 87.6826 67.39 87.8026 67.63C87.9293 67.87 87.9926 68.15 87.9926 68.47C87.9926 68.93 87.866 69.3233 87.6126 69.65C87.3593 69.97 87.0226 70.2167 86.6026 70.39C86.1893 70.5567 85.736 70.64 85.2426 70.64Z" fill="#101010"/>
+<path d="M101 8L31 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="58.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M63.7331 11.5V10.06H65.3131V5.83H63.9431V4.73C64.3431 4.65667 64.6831 4.56667 64.9631 4.46C65.2498 4.35333 65.5231 4.21667 65.7831 4.05L67.0931 4.05V10.06H68.4331V11.5H63.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab01.svg b/public/static/images/canvas/shape/270deg/plane_tab01.svg
new file mode 100644
index 00000000..22b32884
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87 109L2 54.5L87 1" stroke="#45CD7D" stroke-width="2"/>
+<rect x="86.5" y="110" width="110" height="2" transform="rotate(-90 86.5 110)" fill="#101010"/>
+<path d="M8 55L84 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 109L100 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="45.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="45.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M50.3731 58.5V57.48C50.9931 56.9133 51.5365 56.3867 52.0031 55.9C52.4698 55.4133 52.8331 54.96 53.0931 54.54C53.3531 54.1133 53.4831 53.72 53.4831 53.36C53.4831 53.1333 53.4431 52.9433 53.3631 52.79C53.2898 52.63 53.1798 52.51 53.0331 52.43C52.8865 52.35 52.7131 52.31 52.5131 52.31C52.2598 52.31 52.0298 52.3833 51.8231 52.53C51.6231 52.67 51.4331 52.8367 51.2531 53.03L50.2831 52.07C50.6498 51.6767 51.0198 51.3867 51.3931 51.2C51.7731 51.0133 52.2265 50.92 52.7531 50.92C53.2331 50.92 53.6565 51.0167 54.0231 51.21C54.3898 51.4033 54.6765 51.6767 54.8831 52.03C55.0898 52.3767 55.1931 52.7867 55.1931 53.26C55.1931 53.6867 55.0831 54.1233 54.8631 54.57C54.6498 55.01 54.3731 55.4467 54.0331 55.88C53.6931 56.3067 53.3331 56.7133 52.9531 57.1C53.1398 57.0733 53.3465 57.05 53.5731 57.03C53.8065 57.01 54.0065 57 54.1731 57H55.5331V58.5H50.3731Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab02.svg b/public/static/images/canvas/shape/270deg/plane_tab02.svg
new file mode 100644
index 00000000..105cf6f1
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="73" y="110" width="110" height="2" transform="rotate(-90 73 110)" fill="#101010"/>
+<rect x="11" y="110" width="110" height="2" transform="rotate(-90 11 110)" fill="#1083E3"/>
+<rect x="13" y="110" width="2" height="60" transform="rotate(-90 13 110)" fill="#EA10AC"/>
+<rect x="13" y="2" width="2" height="60" transform="rotate(-90 13 2)" fill="#EA10AC"/>
+<path d="M14 55H72" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M86 109L86 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="35.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M40.3731 58.5V57.48C40.9931 56.9133 41.5365 56.3867 42.0031 55.9C42.4698 55.4133 42.8331 54.96 43.0931 54.54C43.3531 54.1133 43.4831 53.72 43.4831 53.36C43.4831 53.1333 43.4431 52.9433 43.3631 52.79C43.2898 52.63 43.1798 52.51 43.0331 52.43C42.8865 52.35 42.7131 52.31 42.5131 52.31C42.2598 52.31 42.0298 52.3833 41.8231 52.53C41.6231 52.67 41.4331 52.8367 41.2531 53.03L40.2831 52.07C40.6498 51.6767 41.0198 51.3867 41.3931 51.2C41.7731 51.0133 42.2265 50.92 42.7531 50.92C43.2331 50.92 43.6565 51.0167 44.0231 51.21C44.3898 51.4033 44.6765 51.6767 44.8831 52.03C45.0898 52.3767 45.1931 52.7867 45.1931 53.26C45.1931 53.6867 45.0831 54.1233 44.8631 54.57C44.6498 55.01 44.3731 55.4467 44.0331 55.88C43.6931 56.3067 43.3331 56.7133 42.9531 57.1C43.1398 57.0733 43.3465 57.05 43.5731 57.03C43.8065 57.01 44.0065 57 44.1731 57H45.5331V58.5H40.3731Z" fill="#101010"/>
+<rect x="78.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="78.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M83.7331 58.5V57.06H85.3131V52.83H83.9431V51.73C84.3431 51.6567 84.6831 51.5667 84.9631 51.46C85.2498 51.3533 85.5231 51.2167 85.7831 51.05H87.0931V57.06H88.4331V58.5H83.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab03.svg b/public/static/images/canvas/shape/270deg/plane_tab03.svg
new file mode 100644
index 00000000..9f10a097
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="19" y="90" width="70" height="2" transform="rotate(-90 19 90)" fill="#1083E3"/>
+<path d="M19 90V88L87 108V110L19 90Z" fill="#45CD7D"/>
+<path d="M19 22V20L87 0V2L19 22Z" fill="#45CD7D"/>
+<path d="M23 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M51.3731 58.5V57.48C51.9931 56.9133 52.5365 56.3867 53.0031 55.9C53.4698 55.4133 53.8331 54.96 54.0931 54.54C54.3531 54.1133 54.4831 53.72 54.4831 53.36C54.4831 53.1333 54.4431 52.9433 54.3631 52.79C54.2898 52.63 54.1798 52.51 54.0331 52.43C53.8865 52.35 53.7131 52.31 53.5131 52.31C53.2598 52.31 53.0298 52.3833 52.8231 52.53C52.6231 52.67 52.4331 52.8367 52.2531 53.03L51.2831 52.07C51.6498 51.6767 52.0198 51.3867 52.3931 51.2C52.7731 51.0133 53.2265 50.92 53.7531 50.92C54.2331 50.92 54.6565 51.0167 55.0231 51.21C55.3898 51.4033 55.6765 51.6767 55.8831 52.03C56.0898 52.3767 56.1931 52.7867 56.1931 53.26C56.1931 53.6867 56.0831 54.1233 55.8631 54.57C55.6498 55.01 55.3731 55.4467 55.0331 55.88C54.6931 56.3067 54.3331 56.7133 53.9531 57.1C54.1398 57.0733 54.3465 57.05 54.5731 57.03C54.8065 57.01 55.0065 57 55.1731 57H56.5331V58.5H51.3731Z" fill="#101010"/>
+<path d="M100 109L100 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M8 109L8 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 58.64C7.34979 58.64 6.99313 58.5967 6.67313 58.51C6.35979 58.4233 6.07979 58.3033 5.83313 58.15C5.58646 57.99 5.37313 57.8067 5.19313 57.6L6.01313 56.48C6.23979 56.6867 6.48313 56.86 6.74313 57C7.00313 57.1333 7.27646 57.2 7.56313 57.2C7.79646 57.2 7.99646 57.17 8.16313 57.11C8.33646 57.0433 8.46979 56.9467 8.56313 56.82C8.65646 56.6933 8.70313 56.5367 8.70313 56.35C8.70313 56.1367 8.65313 55.9533 8.55313 55.8C8.45313 55.6467 8.26646 55.53 7.99313 55.45C7.71979 55.37 7.32313 55.33 6.80313 55.33V54.07C7.22979 54.07 7.56313 54.03 7.80313 53.95C8.04313 53.87 8.21313 53.7567 8.31313 53.61C8.41979 53.4633 8.47313 53.2933 8.47313 53.1C8.47313 52.8467 8.39979 52.6533 8.25313 52.52C8.10646 52.38 7.89646 52.31 7.62313 52.31C7.37646 52.31 7.14979 52.3633 6.94313 52.47C6.73646 52.5767 6.51979 52.73 6.29313 52.93L5.39313 51.84C5.73979 51.5467 6.09979 51.32 6.47313 51.16C6.85313 51 7.26313 50.92 7.70313 50.92C8.21646 50.92 8.66313 51 9.04313 51.16C9.42979 51.3133 9.72646 51.5433 9.93313 51.85C10.1465 52.15 10.2531 52.5233 10.2531 52.97C10.2531 53.3367 10.1531 53.6633 9.95312 53.95C9.75313 54.23 9.45646 54.45 9.06313 54.61V54.66C9.33646 54.74 9.57979 54.8633 9.79313 55.03C10.0131 55.19 10.1831 55.39 10.3031 55.63C10.4298 55.87 10.4931 56.15 10.4931 56.47C10.4931 56.93 10.3665 57.3233 10.1131 57.65C9.85979 57.97 9.52313 58.2167 9.10313 58.39C8.68979 58.5567 8.23646 58.64 7.74313 58.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab04.svg b/public/static/images/canvas/shape/270deg/plane_tab04.svg
new file mode 100644
index 00000000..46d682bc
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="110" width="91" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<path d="M0 21L0 19L87 108V110L0 21Z" fill="#45CD7D"/>
+<rect y="21" width="2" height="87" transform="rotate(-90 0 21)" fill="#EA10AC"/>
+<path d="M0 8L89 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="37.5" y="0.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M42.3731 11.5V10.48C42.9931 9.91333 43.5365 9.38667 44.0031 8.9C44.4698 8.41333 44.8331 7.96 45.0931 7.54C45.3531 7.11333 45.4831 6.72 45.4831 6.36C45.4831 6.13333 45.4431 5.94333 45.3631 5.79C45.2898 5.63 45.1798 5.51 45.0331 5.43C44.8865 5.35 44.7131 5.31 44.5131 5.31C44.2598 5.31 44.0298 5.38333 43.8231 5.53C43.6231 5.67 43.4331 5.83667 43.2531 6.03L42.2831 5.07C42.6498 4.67667 43.0198 4.38667 43.3931 4.2C43.7731 4.01333 44.2265 3.92 44.7531 3.92C45.2331 3.92 45.6565 4.01667 46.0231 4.21C46.3898 4.40333 46.6765 4.67667 46.8831 5.03C47.0898 5.37667 47.1931 5.78667 47.1931 6.26C47.1931 6.68667 47.0831 7.12333 46.8631 7.57C46.6498 8.01 46.3731 8.44667 46.0331 8.88C45.6931 9.30667 45.3331 9.71333 44.9531 10.1C45.1398 10.0733 45.3465 10.05 45.5731 10.03C45.8065 10.01 46.0065 10 46.1731 10H47.5331V11.5H42.3731Z" fill="#101010"/>
+<path d="M100 109L100 20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="56.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="56.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 67.5V66.06H99.3131V61.83H97.9431V60.73C98.3431 60.6567 98.6831 60.5667 98.9631 60.46C99.2498 60.3533 99.5231 60.2167 99.7831 60.05H101.093V66.06H102.433V67.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab05.svg b/public/static/images/canvas/shape/270deg/plane_tab05.svg
new file mode 100644
index 00000000..90be1d79
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="90" width="71" height="2" transform="rotate(-90 87 90)" fill="#101010"/>
+<rect x="35" y="90" width="2" height="52" transform="rotate(-90 35 90)" fill="#EA10AC"/>
+<rect y="21" width="2" height="87" transform="rotate(-90 0 21)" fill="#EA10AC"/>
+<path d="M34.5 90L0 21H2L36.5 90H34.5Z" fill="#45CD7D"/>
+<path d="M0 8L89 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="1.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="37.5" y="1.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3731 12.5V11.48C42.9931 10.9133 43.5365 10.3867 44.0031 9.9C44.4698 9.41333 44.8331 8.96 45.0931 8.54C45.3531 8.11333 45.4831 7.72 45.4831 7.36C45.4831 7.13333 45.4431 6.94333 45.3631 6.79C45.2898 6.63 45.1798 6.51 45.0331 6.43C44.8865 6.35 44.7131 6.31 44.5131 6.31C44.2598 6.31 44.0298 6.38333 43.8231 6.53C43.6231 6.67 43.4331 6.83667 43.2531 7.03L42.2831 6.07C42.6498 5.67667 43.0198 5.38667 43.3931 5.2C43.7731 5.01333 44.2265 4.92 44.7531 4.92C45.2331 4.92 45.6565 5.01667 46.0231 5.21C46.3898 5.40333 46.6765 5.67667 46.8831 6.03C47.0898 6.37667 47.1931 6.78667 47.1931 7.26C47.1931 7.68667 47.0831 8.12333 46.8631 8.57C46.6498 9.01 46.3731 9.44667 46.0331 9.88C45.6931 10.3067 45.3331 10.7133 44.9531 11.1C45.1398 11.0733 45.3465 11.05 45.5731 11.03C45.8065 11.01 46.0065 11 46.1731 11H47.5331V12.5H42.3731Z" fill="#101010"/>
+<path d="M35 101H89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="54.5" y="93.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="54.5" y="93.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M61.7431 104.64C61.3498 104.64 60.9931 104.597 60.6731 104.51C60.3598 104.423 60.0798 104.303 59.8331 104.15C59.5865 103.99 59.3731 103.807 59.1931 103.6L60.0131 102.48C60.2398 102.687 60.4831 102.86 60.7431 103C61.0031 103.133 61.2765 103.2 61.5631 103.2C61.7965 103.2 61.9965 103.17 62.1631 103.11C62.3365 103.043 62.4698 102.947 62.5631 102.82C62.6565 102.693 62.7031 102.537 62.7031 102.35C62.7031 102.137 62.6531 101.953 62.5531 101.8C62.4531 101.647 62.2665 101.53 61.9931 101.45C61.7198 101.37 61.3231 101.33 60.8031 101.33V100.07C61.2298 100.07 61.5631 100.03 61.8031 99.95C62.0431 99.87 62.2131 99.7567 62.3131 99.61C62.4198 99.4633 62.4731 99.2933 62.4731 99.1C62.4731 98.8467 62.3998 98.6533 62.2531 98.52C62.1065 98.38 61.8965 98.31 61.6231 98.31C61.3765 98.31 61.1498 98.3633 60.9431 98.47C60.7365 98.5767 60.5198 98.73 60.2931 98.93L59.3931 97.84C59.7398 97.5467 60.0998 97.32 60.4731 97.16C60.8531 97 61.2631 96.92 61.7031 96.92C62.2165 96.92 62.6631 97 63.0431 97.16C63.4298 97.3133 63.7265 97.5433 63.9331 97.85C64.1465 98.15 64.2531 98.5233 64.2531 98.97C64.2531 99.3367 64.1531 99.6633 63.9531 99.95C63.7531 100.23 63.4565 100.45 63.0631 100.61V100.66C63.3365 100.74 63.5798 100.863 63.7931 101.03C64.0131 101.19 64.1831 101.39 64.3031 101.63C64.4298 101.87 64.4931 102.15 64.4931 102.47C64.4931 102.93 64.3665 103.323 64.1131 103.65C63.8598 103.97 63.5231 104.217 63.1031 104.39C62.6898 104.557 62.2365 104.64 61.7431 104.64Z" fill="#101010"/>
+<path d="M100 90L100 19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="46.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 57.5V56.06H99.3131V51.83H97.9431V50.73C98.3431 50.6567 98.6831 50.5667 98.9631 50.46C99.2498 50.3533 99.5231 50.2167 99.7831 50.05H101.093V56.06H102.433V57.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab06.svg b/public/static/images/canvas/shape/270deg/plane_tab06.svg
new file mode 100644
index 00000000..4ac8ec72
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="82" y="97" width="70" height="2" transform="rotate(-90 82 97)" fill="#1083E3"/>
+<path d="M16 70V68L82 95V97L16 70Z" fill="#45CD7D"/>
+<path d="M16 2V0L82 27V29L16 2Z" fill="#45CD7D"/>
+<path d="M16 70L16 0L18 0.786873L18 70H16Z" fill="#1083E3"/>
+<path d="M16 84L84 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="42.5" y="88.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="42.5" y="88.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M49.7431 99.64C49.3498 99.64 48.9931 99.5967 48.6731 99.51C48.3598 99.4233 48.0798 99.3033 47.8331 99.15C47.5865 98.99 47.3731 98.8067 47.1931 98.6L48.0131 97.48C48.2398 97.6867 48.4831 97.86 48.7431 98C49.0031 98.1333 49.2765 98.2 49.5631 98.2C49.7965 98.2 49.9965 98.17 50.1631 98.11C50.3365 98.0433 50.4698 97.9467 50.5631 97.82C50.6565 97.6933 50.7031 97.5367 50.7031 97.35C50.7031 97.1367 50.6531 96.9533 50.5531 96.8C50.4531 96.6467 50.2665 96.53 49.9931 96.45C49.7198 96.37 49.3231 96.33 48.8031 96.33V95.07C49.2298 95.07 49.5631 95.03 49.8031 94.95C50.0431 94.87 50.2131 94.7567 50.3131 94.61C50.4198 94.4633 50.4731 94.2933 50.4731 94.1C50.4731 93.8467 50.3998 93.6533 50.2531 93.52C50.1065 93.38 49.8965 93.31 49.6231 93.31C49.3765 93.31 49.1498 93.3633 48.9431 93.47C48.7365 93.5767 48.5198 93.73 48.2931 93.93L47.3931 92.84C47.7398 92.5467 48.0998 92.32 48.4731 92.16C48.8531 92 49.2631 91.92 49.7031 91.92C50.2165 91.92 50.6631 92 51.0431 92.16C51.4298 92.3133 51.7265 92.5433 51.9331 92.85C52.1465 93.15 52.2531 93.5233 52.2531 93.97C52.2531 94.3367 52.1531 94.6633 51.9531 94.95C51.7531 95.23 51.4565 95.45 51.0631 95.61V95.66C51.3365 95.74 51.5798 95.8633 51.7931 96.03C52.0131 96.19 52.1831 96.39 52.3031 96.63C52.4298 96.87 52.4931 97.15 52.4931 97.47C52.4931 97.93 52.3665 98.3233 52.1131 98.65C51.8598 98.97 51.5231 99.2167 51.1031 99.39C50.6898 99.5567 50.2365 99.64 49.7431 99.64Z" fill="#101010"/>
+<path d="M95 90L95 19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="87.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="87.5" y="46.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M92.7331 57.5V56.06H94.3131V51.83H92.9431V50.73C93.3431 50.6567 93.6831 50.5667 93.9631 50.46C94.2498 50.3533 94.5231 50.2167 94.7831 50.05H96.0931V56.06H97.4331V57.5H92.7331Z" fill="#101010"/>
+<path d="M20 47L80 47" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="40.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="40.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M48.3731 51.5V50.48C48.9931 49.9133 49.5365 49.3867 50.0031 48.9C50.4698 48.4133 50.8331 47.96 51.0931 47.54C51.3531 47.1133 51.4831 46.72 51.4831 46.36C51.4831 46.1333 51.4431 45.9433 51.3631 45.79C51.2898 45.63 51.1798 45.51 51.0331 45.43C50.8865 45.35 50.7131 45.31 50.5131 45.31C50.2598 45.31 50.0298 45.3833 49.8231 45.53C49.6231 45.67 49.4331 45.8367 49.2531 46.03L48.2831 45.07C48.6498 44.6767 49.0198 44.3867 49.3931 44.2C49.7731 44.0133 50.2265 43.92 50.7531 43.92C51.2331 43.92 51.6565 44.0167 52.0231 44.21C52.3898 44.4033 52.6765 44.6767 52.8831 45.03C53.0898 45.3767 53.1931 45.7867 53.1931 46.26C53.1931 46.6867 53.0831 47.1233 52.8631 47.57C52.6498 48.01 52.3731 48.4467 52.0331 48.88C51.6931 49.3067 51.3331 49.7133 50.9531 50.1C51.1398 50.0733 51.3465 50.05 51.5731 50.03C51.8065 50.01 52.0065 50 52.1731 50H53.5331V51.5H48.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab07.svg b/public/static/images/canvas/shape/270deg/plane_tab07.svg
new file mode 100644
index 00000000..61ea3380
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="114" width="110" height="2" transform="rotate(-90 0 114)" fill="#1083E3"/>
+<rect x="60" y="86" width="54" height="2" transform="rotate(-90 60 86)" fill="#101010"/>
+<rect x="87" y="114" width="30" height="2" transform="rotate(-90 87 114)" fill="#101010"/>
+<rect x="87" y="34" width="30" height="2" transform="rotate(-90 87 34)" fill="#101010"/>
+<rect x="2" y="114" width="2" height="85" transform="rotate(-90 2 114)" fill="#EA10AC"/>
+<rect x="2" y="6" width="2" height="85" transform="rotate(-90 2 6)" fill="#EA10AC"/>
+<rect x="60" y="34" width="2" height="27" transform="rotate(-90 60 34)" fill="#EA10AC"/>
+<rect x="60" y="86" width="2" height="27" transform="rotate(-90 60 86)" fill="#EA10AC"/>
+<path d="M3 58H60" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="24.5" y="51.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="24.5" y="51.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M31.8031 62.5V58.2C31.8031 57.9667 31.8098 57.6933 31.8231 57.38C31.8431 57.06 31.8565 56.78 31.8631 56.54H31.8231C31.7298 56.7533 31.6331 56.9667 31.5331 57.18C31.4331 57.3933 31.3298 57.6067 31.2231 57.82L30.3731 59.29H34.2831V60.64H28.6731V59.41L31.2631 55.05H33.4631V62.5H31.8031Z" fill="#101010"/>
+<path d="M61 99H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="66.5" y="92.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="66.5" y="92.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M73.8031 103.64C73.4098 103.64 73.0531 103.593 72.7331 103.5C72.4131 103.413 72.1265 103.293 71.8731 103.14C71.6265 102.98 71.4031 102.803 71.2031 102.61L72.0131 101.49C72.1531 101.623 72.3031 101.743 72.4631 101.85C72.6231 101.957 72.7931 102.043 72.9731 102.11C73.1598 102.17 73.3498 102.2 73.5431 102.2C73.7831 102.2 73.9898 102.157 74.1631 102.07C74.3365 101.983 74.4698 101.853 74.5631 101.68C74.6631 101.507 74.7131 101.293 74.7131 101.04C74.7131 100.667 74.6098 100.383 74.4031 100.19C74.2031 99.99 73.9431 99.89 73.6231 99.89C73.4165 99.89 73.2431 99.9167 73.1031 99.97C72.9698 100.017 72.7931 100.11 72.5731 100.25L71.7931 99.74L71.9831 96.05H76.1631V97.54H73.5131L73.4031 98.8C73.5365 98.7467 73.6631 98.71 73.7831 98.69C73.9031 98.6633 74.0331 98.65 74.1731 98.65C74.5931 98.65 74.9798 98.7333 75.3331 98.9C75.6865 99.0667 75.9665 99.3233 76.1731 99.67C76.3865 100.017 76.4931 100.46 76.4931 101C76.4931 101.553 76.3665 102.03 76.1131 102.43C75.8665 102.823 75.5398 103.123 75.1331 103.33C74.7265 103.537 74.2831 103.64 73.8031 103.64Z" fill="#101010"/>
+<path d="M100 113V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="91.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="91.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 102.5V101.06H99.3131V96.83H97.9431V95.73C98.3431 95.6567 98.6831 95.5667 98.9631 95.46C99.2498 95.3533 99.5231 95.2167 99.7831 95.05H101.093V101.06H102.433V102.5H97.7331Z" fill="#101010"/>
+<path d="M100 33V5" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="11.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="11.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 22.64C99.3498 22.64 98.9931 22.5967 98.6731 22.51C98.3598 22.4233 98.0798 22.3033 97.8331 22.15C97.5865 21.99 97.3731 21.8067 97.1931 21.6L98.0131 20.48C98.2398 20.6867 98.4831 20.86 98.7431 21C99.0031 21.1333 99.2765 21.2 99.5631 21.2C99.7965 21.2 99.9965 21.17 100.163 21.11C100.336 21.0433 100.47 20.9467 100.563 20.82C100.656 20.6933 100.703 20.5367 100.703 20.35C100.703 20.1367 100.653 19.9533 100.553 19.8C100.453 19.6467 100.266 19.53 99.9931 19.45C99.7198 19.37 99.3231 19.33 98.8031 19.33V18.07C99.2298 18.07 99.5631 18.03 99.8031 17.95C100.043 17.87 100.213 17.7567 100.313 17.61C100.42 17.4633 100.473 17.2933 100.473 17.1C100.473 16.8467 100.4 16.6533 100.253 16.52C100.106 16.38 99.8965 16.31 99.6231 16.31C99.3765 16.31 99.1498 16.3633 98.9431 16.47C98.7365 16.5767 98.5198 16.73 98.2931 16.93L97.3931 15.84C97.7398 15.5467 98.0998 15.32 98.4731 15.16C98.8531 15 99.2631 14.92 99.7031 14.92C100.216 14.92 100.663 15 101.043 15.16C101.43 15.3133 101.726 15.5433 101.933 15.85C102.146 16.15 102.253 16.5233 102.253 16.97C102.253 17.3367 102.153 17.6633 101.953 17.95C101.753 18.23 101.456 18.45 101.063 18.61V18.66C101.336 18.74 101.58 18.8633 101.793 19.03C102.013 19.19 102.183 19.39 102.303 19.63C102.43 19.87 102.493 20.15 102.493 20.47C102.493 20.93 102.366 21.3233 102.113 21.65C101.86 21.97 101.523 22.2167 101.103 22.39C100.69 22.5567 100.236 22.64 99.7431 22.64Z" fill="#101010"/>
+<path d="M77 82V36" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="51.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="51.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M74.3731 62.5V61.48C74.9931 60.9133 75.5365 60.3867 76.0031 59.9C76.4698 59.4133 76.8331 58.96 77.0931 58.54C77.3531 58.1133 77.4831 57.72 77.4831 57.36C77.4831 57.1333 77.4431 56.9433 77.3631 56.79C77.2898 56.63 77.1798 56.51 77.0331 56.43C76.8865 56.35 76.7131 56.31 76.5131 56.31C76.2598 56.31 76.0298 56.3833 75.8231 56.53C75.6231 56.67 75.4331 56.8367 75.2531 57.03L74.2831 56.07C74.6498 55.6767 75.0198 55.3867 75.3931 55.2C75.7731 55.0133 76.2265 54.92 76.7531 54.92C77.2331 54.92 77.6565 55.0167 78.0231 55.21C78.3898 55.4033 78.6765 55.6767 78.8831 56.03C79.0898 56.3767 79.1931 56.7867 79.1931 57.26C79.1931 57.6867 79.0831 58.1233 78.8631 58.57C78.6498 59.01 78.3731 59.4467 78.0331 59.88C77.6931 60.3067 77.3331 60.7133 76.9531 61.1C77.1398 61.0733 77.3465 61.05 77.5731 61.03C77.8065 61.01 78.0065 61 78.1731 61H79.5331V62.5H74.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab08.svg b/public/static/images/canvas/shape/270deg/plane_tab08.svg
new file mode 100644
index 00000000..0d70143a
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="46" width="46" height="2" transform="rotate(-90 0 46)" fill="#1083E3"/>
+<rect x="25" y="108" width="64" height="2" transform="rotate(-90 25 108)" fill="#1083E3"/>
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="25" y="110" width="2" height="62" transform="rotate(-90 25 110)" fill="#EA10AC"/>
+<rect x="2" y="2" width="2" height="85" transform="rotate(-90 2 2)" fill="#EA10AC"/>
+<rect y="46" width="2" height="27" transform="rotate(-90 0 46)" fill="#EA10AC"/>
+<path d="M28 79H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="49.5" y="72.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="49.5" y="72.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M56.8031 83.5V79.2C56.8031 78.9667 56.8098 78.6933 56.8231 78.38C56.8431 78.06 56.8565 77.78 56.8631 77.54H56.8231C56.7298 77.7533 56.6331 77.9667 56.5331 78.18C56.4331 78.3933 56.3298 78.6067 56.2231 78.82L55.3731 80.29H59.2831V81.64H53.6731V80.41L56.2631 76.05H58.4631V83.5H56.8031Z" fill="#101010"/>
+<path d="M3 23L86 23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="16.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="37.5" y="16.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M44.2431 27.64C43.8498 27.64 43.4931 27.5967 43.1731 27.51C42.8598 27.4233 42.5798 27.3033 42.3331 27.15C42.0865 26.99 41.8731 26.8067 41.6931 26.6L42.5131 25.48C42.7398 25.6867 42.9831 25.86 43.2431 26C43.5031 26.1333 43.7765 26.2 44.0631 26.2C44.2965 26.2 44.4965 26.17 44.6631 26.11C44.8365 26.0433 44.9698 25.9467 45.0631 25.82C45.1565 25.6933 45.2031 25.5367 45.2031 25.35C45.2031 25.1367 45.1531 24.9533 45.0531 24.8C44.9531 24.6467 44.7665 24.53 44.4931 24.45C44.2198 24.37 43.8231 24.33 43.3031 24.33V23.07C43.7298 23.07 44.0631 23.03 44.3031 22.95C44.5431 22.87 44.7131 22.7567 44.8131 22.61C44.9198 22.4633 44.9731 22.2933 44.9731 22.1C44.9731 21.8467 44.8998 21.6533 44.7531 21.52C44.6065 21.38 44.3965 21.31 44.1231 21.31C43.8765 21.31 43.6498 21.3633 43.4431 21.47C43.2365 21.5767 43.0198 21.73 42.7931 21.93L41.8931 20.84C42.2398 20.5467 42.5998 20.32 42.9731 20.16C43.3531 20 43.7631 19.92 44.2031 19.92C44.7165 19.92 45.1631 20 45.5431 20.16C45.9298 20.3133 46.2265 20.5433 46.4331 20.85C46.6465 21.15 46.7531 21.5233 46.7531 21.97C46.7531 22.3367 46.6531 22.6633 46.4531 22.95C46.2531 23.23 45.9565 23.45 45.5631 23.61V23.66C45.8365 23.74 46.0798 23.8633 46.2931 24.03C46.5131 24.19 46.6831 24.39 46.8031 24.63C46.9298 24.87 46.9931 25.15 46.9931 25.47C46.9931 25.93 46.8665 26.3233 46.6131 26.65C46.3598 26.97 46.0231 27.2167 45.6031 27.39C45.1898 27.5567 44.7365 27.64 44.2431 27.64Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M14 110L14 47" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="6.5" y="70.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="6.5" y="70.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M11.3731 81.5V80.48C11.9931 79.9133 12.5365 79.3867 13.0031 78.9C13.4698 78.4133 13.8331 77.96 14.0931 77.54C14.3531 77.1133 14.4831 76.72 14.4831 76.36C14.4831 76.1333 14.4431 75.9433 14.3631 75.79C14.2898 75.63 14.1798 75.51 14.0331 75.43C13.8865 75.35 13.7131 75.31 13.5131 75.31C13.2598 75.31 13.0298 75.3833 12.8231 75.53C12.6231 75.67 12.4331 75.8367 12.2531 76.03L11.2831 75.07C11.6498 74.6767 12.0198 74.3867 12.3931 74.2C12.7731 74.0133 13.2265 73.92 13.7531 73.92C14.2331 73.92 14.6565 74.0167 15.0231 74.21C15.3898 74.4033 15.6765 74.6767 15.8831 75.03C16.0898 75.3767 16.1931 75.7867 16.1931 76.26C16.1931 76.6867 16.0831 77.1233 15.8631 77.57C15.6498 78.01 15.3731 78.4467 15.0331 78.88C14.6931 79.3067 14.3331 79.7133 13.9531 80.1C14.1398 80.0733 14.3465 80.05 14.5731 80.03C14.8065 80.01 15.0065 80 15.1731 80H16.5331V81.5H11.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab09.svg b/public/static/images/canvas/shape/270deg/plane_tab09.svg
new file mode 100644
index 00000000..11af80b9
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="19" y="46" width="46" height="2" transform="rotate(-90 19 46)" fill="#1083E3"/>
+<path d="M40 98V44H42V98.5L40 98Z" fill="#1083E3"/>
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<path d="M40 100V98L87 108V110L40 100Z" fill="#45CD7D"/>
+<rect x="19" y="2" width="2" height="68" transform="rotate(-90 19 2)" fill="#EA10AC"/>
+<rect x="19" y="46" width="2" height="23" transform="rotate(-90 19 46)" fill="#EA10AC"/>
+<path d="M43 79H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="72.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="57.5" y="72.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M64.3031 83.64C63.9098 83.64 63.5531 83.5933 63.2331 83.5C62.9131 83.4133 62.6265 83.2933 62.3731 83.14C62.1265 82.98 61.9031 82.8033 61.7031 82.61L62.5131 81.49C62.6531 81.6233 62.8031 81.7433 62.9631 81.85C63.1231 81.9567 63.2931 82.0433 63.4731 82.11C63.6598 82.17 63.8498 82.2 64.0431 82.2C64.2831 82.2 64.4898 82.1567 64.6631 82.07C64.8365 81.9833 64.9698 81.8533 65.0631 81.68C65.1631 81.5067 65.2131 81.2933 65.2131 81.04C65.2131 80.6667 65.1098 80.3833 64.9031 80.19C64.7031 79.99 64.4431 79.89 64.1231 79.89C63.9165 79.89 63.7431 79.9167 63.6031 79.97C63.4698 80.0167 63.2931 80.11 63.0731 80.25L62.2931 79.74L62.4831 76.05H66.6631V77.54H64.0131L63.9031 78.8C64.0365 78.7467 64.1631 78.71 64.2831 78.69C64.4031 78.6633 64.5331 78.65 64.6731 78.65C65.0931 78.65 65.4798 78.7333 65.8331 78.9C66.1865 79.0667 66.4665 79.3233 66.6731 79.67C66.8865 80.0167 66.9931 80.46 66.9931 81C66.9931 81.5533 66.8665 82.03 66.6131 82.43C66.3665 82.8233 66.0398 83.1233 65.6331 83.33C65.2265 83.5367 64.7831 83.64 64.3031 83.64Z" fill="#101010"/>
+<path d="M22 23L86 23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="16.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="16.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 27.5V23.2C54.8031 22.9667 54.8098 22.6933 54.8231 22.38C54.8431 22.06 54.8565 21.78 54.8631 21.54H54.8231C54.7298 21.7533 54.6331 21.9667 54.5331 22.18C54.4331 22.3933 54.3298 22.6067 54.2231 22.82L53.3731 24.29H57.2831V25.64H51.6731V24.41L54.2631 20.05H56.4631V27.5H54.8031Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M29 99L29 49" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="66.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="66.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 77.5V76.48C26.9931 75.9133 27.5365 75.3867 28.0031 74.9C28.4698 74.4133 28.8331 73.96 29.0931 73.54C29.3531 73.1133 29.4831 72.72 29.4831 72.36C29.4831 72.1333 29.4431 71.9433 29.3631 71.79C29.2898 71.63 29.1798 71.51 29.0331 71.43C28.8865 71.35 28.7131 71.31 28.5131 71.31C28.2598 71.31 28.0298 71.3833 27.8231 71.53C27.6231 71.67 27.4331 71.8367 27.2531 72.03L26.2831 71.07C26.6498 70.6767 27.0198 70.3867 27.3931 70.2C27.7731 70.0133 28.2265 69.92 28.7531 69.92C29.2331 69.92 29.6565 70.0167 30.0231 70.21C30.3898 70.4033 30.6765 70.6767 30.8831 71.03C31.0898 71.3767 31.1931 71.7867 31.1931 72.26C31.1931 72.6867 31.0831 73.1233 30.8631 73.57C30.6498 74.01 30.3731 74.4467 30.0331 74.88C29.6931 75.3067 29.3331 75.7133 28.9531 76.1C29.1398 76.0733 29.3465 76.05 29.5731 76.03C29.8065 76.01 30.0065 76 30.1731 76H31.5331V77.5H26.3731Z" fill="#101010"/>
+<path d="M8 46L8 -7.45058e-07" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="15.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="15.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 26.64C7.34979 26.64 6.99313 26.5967 6.67313 26.51C6.35979 26.4233 6.07979 26.3033 5.83313 26.15C5.58646 25.99 5.37313 25.8067 5.19313 25.6L6.01313 24.48C6.23979 24.6867 6.48313 24.86 6.74313 25C7.00313 25.1333 7.27646 25.2 7.56313 25.2C7.79646 25.2 7.99646 25.17 8.16313 25.11C8.33646 25.0433 8.46979 24.9467 8.56313 24.82C8.65646 24.6933 8.70313 24.5367 8.70313 24.35C8.70313 24.1367 8.65313 23.9533 8.55313 23.8C8.45313 23.6467 8.26646 23.53 7.99313 23.45C7.71979 23.37 7.32313 23.33 6.80313 23.33V22.07C7.22979 22.07 7.56313 22.03 7.80313 21.95C8.04313 21.87 8.21313 21.7567 8.31313 21.61C8.41979 21.4633 8.47313 21.2933 8.47313 21.1C8.47313 20.8467 8.39979 20.6533 8.25313 20.52C8.10646 20.38 7.89646 20.31 7.62313 20.31C7.37646 20.31 7.14979 20.3633 6.94313 20.47C6.73646 20.5767 6.51979 20.73 6.29313 20.93L5.39313 19.84C5.73979 19.5467 6.09979 19.32 6.47313 19.16C6.85313 19 7.26313 18.92 7.70313 18.92C8.21646 18.92 8.66313 19 9.04313 19.16C9.42979 19.3133 9.72646 19.5433 9.93313 19.85C10.1465 20.15 10.2531 20.5233 10.2531 20.97C10.2531 21.3367 10.1531 21.6633 9.95312 21.95C9.75313 22.23 9.45646 22.45 9.06313 22.61V22.66C9.33646 22.74 9.57979 22.8633 9.79313 23.03C10.0131 23.19 10.1831 23.39 10.3031 23.63C10.4298 23.87 10.4931 24.15 10.4931 24.47C10.4931 24.93 10.3665 25.3233 10.1131 25.65C9.85979 25.97 9.52313 26.2167 9.10313 26.39C8.68979 26.5567 8.23646 26.64 7.74313 26.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab10.svg b/public/static/images/canvas/shape/270deg/plane_tab10.svg
new file mode 100644
index 00000000..5b182179
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="19" y="56" width="46" height="2" transform="rotate(-90 19 56)" fill="#1083E3"/>
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="42" y="110" width="56" height="2" transform="rotate(-90 42 110)" fill="#1083E3"/>
+<path d="M19 12V10L87 0V2L19 12Z" fill="#45CD7D"/>
+<rect x="19" y="56" width="2" height="23" transform="rotate(-90 19 56)" fill="#EA10AC"/>
+<rect x="44" y="110" width="2" height="43" transform="rotate(-90 44 110)" fill="#EA10AC"/>
+<path d="M45 83H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="76.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="76.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 87.64C64.9098 87.64 64.5531 87.5933 64.2331 87.5C63.9131 87.4133 63.6265 87.2933 63.3731 87.14C63.1265 86.98 62.9031 86.8033 62.7031 86.61L63.5131 85.49C63.6531 85.6233 63.8031 85.7433 63.9631 85.85C64.1231 85.9567 64.2931 86.0433 64.4731 86.11C64.6598 86.17 64.8498 86.2 65.0431 86.2C65.2831 86.2 65.4898 86.1567 65.6631 86.07C65.8365 85.9833 65.9698 85.8533 66.0631 85.68C66.1631 85.5067 66.2131 85.2933 66.2131 85.04C66.2131 84.6667 66.1098 84.3833 65.9031 84.19C65.7031 83.99 65.4431 83.89 65.1231 83.89C64.9165 83.89 64.7431 83.9167 64.6031 83.97C64.4698 84.0167 64.2931 84.11 64.0731 84.25L63.2931 83.74L63.4831 80.05H67.6631V81.54H65.0131L64.9031 82.8C65.0365 82.7467 65.1631 82.71 65.2831 82.69C65.4031 82.6633 65.5331 82.65 65.6731 82.65C66.0931 82.65 66.4798 82.7333 66.8331 82.9C67.1865 83.0667 67.4665 83.3233 67.6731 83.67C67.8865 84.0167 67.9931 84.46 67.9931 85C67.9931 85.5533 67.8665 86.03 67.6131 86.43C67.3665 86.8233 67.0398 87.1233 66.6331 87.33C66.2265 87.5367 65.7831 87.64 65.3031 87.64Z" fill="#101010"/>
+<path d="M22 33L86 33" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="26.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="26.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 37.5V33.2C54.8031 32.9667 54.8098 32.6933 54.8231 32.38C54.8431 32.06 54.8565 31.78 54.8631 31.54H54.8231C54.7298 31.7533 54.6331 31.9667 54.5331 32.18C54.4331 32.3933 54.3298 32.6067 54.2231 32.82L53.3731 34.29H57.2831V35.64H51.6731V34.41L54.2631 30.05H56.4631V37.5H54.8031Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M29 108L29 58" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="75.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="75.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 86.5V85.48C26.9931 84.9133 27.5365 84.3867 28.0031 83.9C28.4698 83.4133 28.8331 82.96 29.0931 82.54C29.3531 82.1133 29.4831 81.72 29.4831 81.36C29.4831 81.1333 29.4431 80.9433 29.3631 80.79C29.2898 80.63 29.1798 80.51 29.0331 80.43C28.8865 80.35 28.7131 80.31 28.5131 80.31C28.2598 80.31 28.0298 80.3833 27.8231 80.53C27.6231 80.67 27.4331 80.8367 27.2531 81.03L26.2831 80.07C26.6498 79.6767 27.0198 79.3867 27.3931 79.2C27.7731 79.0133 28.2265 78.92 28.7531 78.92C29.2331 78.92 29.6565 79.0167 30.0231 79.21C30.3898 79.4033 30.6765 79.6767 30.8831 80.03C31.0898 80.3767 31.1931 80.7867 31.1931 81.26C31.1931 81.6867 31.0831 82.1233 30.8631 82.57C30.6498 83.01 30.3731 83.4467 30.0331 83.88C29.6931 84.3067 29.3331 84.7133 28.9531 85.1C29.1398 85.0733 29.3465 85.05 29.5731 85.03C29.8065 85.01 30.0065 85 30.1731 85H31.5331V86.5H26.3731Z" fill="#101010"/>
+<path d="M8 56L8 10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="25.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="25.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 36.64C7.34979 36.64 6.99313 36.5967 6.67313 36.51C6.35979 36.4233 6.07979 36.3033 5.83313 36.15C5.58646 35.99 5.37313 35.8067 5.19313 35.6L6.01313 34.48C6.23979 34.6867 6.48313 34.86 6.74313 35C7.00313 35.1333 7.27646 35.2 7.56313 35.2C7.79646 35.2 7.99646 35.17 8.16313 35.11C8.33646 35.0433 8.46979 34.9467 8.56313 34.82C8.65646 34.6933 8.70313 34.5367 8.70313 34.35C8.70313 34.1367 8.65313 33.9533 8.55313 33.8C8.45313 33.6467 8.26646 33.53 7.99313 33.45C7.71979 33.37 7.32313 33.33 6.80313 33.33V32.07C7.22979 32.07 7.56313 32.03 7.80313 31.95C8.04313 31.87 8.21313 31.7567 8.31313 31.61C8.41979 31.4633 8.47313 31.2933 8.47313 31.1C8.47313 30.8467 8.39979 30.6533 8.25313 30.52C8.10646 30.38 7.89646 30.31 7.62313 30.31C7.37646 30.31 7.14979 30.3633 6.94313 30.47C6.73646 30.5767 6.51979 30.73 6.29313 30.93L5.39313 29.84C5.73979 29.5467 6.09979 29.32 6.47313 29.16C6.85313 29 7.26313 28.92 7.70313 28.92C8.21646 28.92 8.66313 29 9.04313 29.16C9.42979 29.3133 9.72646 29.5433 9.93313 29.85C10.1465 30.15 10.2531 30.5233 10.2531 30.97C10.2531 31.3367 10.1531 31.6633 9.95312 31.95C9.75313 32.23 9.45646 32.45 9.06313 32.61V32.66C9.33646 32.74 9.57979 32.8633 9.79313 33.03C10.0131 33.19 10.1831 33.39 10.3031 33.63C10.4298 33.87 10.4931 34.15 10.4931 34.47C10.4931 34.93 10.3665 35.3233 10.1131 35.65C9.85979 35.97 9.52313 36.2167 9.10313 36.39C8.68979 36.5567 8.23646 36.64 7.74313 36.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab11.svg b/public/static/images/canvas/shape/270deg/plane_tab11.svg
new file mode 100644
index 00000000..b8f70b55
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="19" y="109" width="53" height="2" transform="rotate(-90 19 109)" fill="#1083E3"/>
+<rect x="87" y="100" width="100" height="2" transform="rotate(-90 87 100)" fill="#101010"/>
+<rect x="42" y="56" width="56" height="2" transform="rotate(-90 42 56)" fill="#1083E3"/>
+<path d="M19 110V108L87 98V100L19 110Z" fill="#45CD7D"/>
+<rect x="19" y="56" width="2" height="23" transform="rotate(-90 19 56)" fill="#EA10AC"/>
+<rect x="44" y="2" width="2" height="43" transform="rotate(-90 44 2)" fill="#EA10AC"/>
+<path d="M45 27L86 27" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="20.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="20.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 31.64C64.9098 31.64 64.5531 31.5933 64.2331 31.5C63.9131 31.4133 63.6265 31.2933 63.3731 31.14C63.1265 30.98 62.9031 30.8033 62.7031 30.61L63.5131 29.49C63.6531 29.6233 63.8031 29.7433 63.9631 29.85C64.1231 29.9567 64.2931 30.0433 64.4731 30.11C64.6598 30.17 64.8498 30.2 65.0431 30.2C65.2831 30.2 65.4898 30.1567 65.6631 30.07C65.8365 29.9833 65.9698 29.8533 66.0631 29.68C66.1631 29.5067 66.2131 29.2933 66.2131 29.04C66.2131 28.6667 66.1098 28.3833 65.9031 28.19C65.7031 27.99 65.4431 27.89 65.1231 27.89C64.9165 27.89 64.7431 27.9167 64.6031 27.97C64.4698 28.0167 64.2931 28.11 64.0731 28.25L63.2931 27.74L63.4831 24.05H67.6631V25.54H65.0131L64.9031 26.8C65.0365 26.7467 65.1631 26.71 65.2831 26.69C65.4031 26.6633 65.5331 26.65 65.6731 26.65C66.0931 26.65 66.4798 26.7333 66.8331 26.9C67.1865 27.0667 67.4665 27.3233 67.6731 27.67C67.8865 28.0167 67.9931 28.46 67.9931 29C67.9931 29.5533 67.8665 30.03 67.6131 30.43C67.3665 30.8233 67.0398 31.1233 66.6331 31.33C66.2265 31.5367 65.7831 31.64 65.3031 31.64Z" fill="#101010"/>
+<path d="M22 81H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 85.5V81.2C54.8031 80.9667 54.8098 80.6933 54.8231 80.38C54.8431 80.06 54.8565 79.78 54.8631 79.54H54.8231C54.7298 79.7533 54.6331 79.9667 54.5331 80.18C54.4331 80.3933 54.3298 80.6067 54.2231 80.82L53.3731 82.29H57.2831V83.64H51.6731V82.41L54.2631 78.05H56.4631V85.5H54.8031Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M29 52L29 2" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="19.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="19.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 30.5V29.48C26.9931 28.9133 27.5365 28.3867 28.0031 27.9C28.4698 27.4133 28.8331 26.96 29.0931 26.54C29.3531 26.1133 29.4831 25.72 29.4831 25.36C29.4831 25.1333 29.4431 24.9433 29.3631 24.79C29.2898 24.63 29.1798 24.51 29.0331 24.43C28.8865 24.35 28.7131 24.31 28.5131 24.31C28.2598 24.31 28.0298 24.3833 27.8231 24.53C27.6231 24.67 27.4331 24.8367 27.2531 25.03L26.2831 24.07C26.6498 23.6767 27.0198 23.3867 27.3931 23.2C27.7731 23.0133 28.2265 22.92 28.7531 22.92C29.2331 22.92 29.6565 23.0167 30.0231 23.21C30.3898 23.4033 30.6765 23.6767 30.8831 24.03C31.0898 24.3767 31.1931 24.7867 31.1931 25.26C31.1931 25.6867 31.0831 26.1233 30.8631 26.57C30.6498 27.01 30.3731 27.4467 30.0331 27.88C29.6931 28.3067 29.3331 28.7133 28.9531 29.1C29.1398 29.0733 29.3465 29.05 29.5731 29.03C29.8065 29.01 30.0065 29 30.1731 29H31.5331V30.5H26.3731Z" fill="#101010"/>
+<path d="M8 108L8 54" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="73.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="73.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 84.64C7.34979 84.64 6.99313 84.5967 6.67313 84.51C6.35979 84.4233 6.07979 84.3033 5.83313 84.15C5.58646 83.99 5.37313 83.8067 5.19313 83.6L6.01313 82.48C6.23979 82.6867 6.48313 82.86 6.74313 83C7.00313 83.1333 7.27646 83.2 7.56313 83.2C7.79646 83.2 7.99646 83.17 8.16313 83.11C8.33646 83.0433 8.46979 82.9467 8.56313 82.82C8.65646 82.6933 8.70313 82.5367 8.70313 82.35C8.70313 82.1367 8.65313 81.9533 8.55313 81.8C8.45313 81.6467 8.26646 81.53 7.99313 81.45C7.71979 81.37 7.32313 81.33 6.80313 81.33V80.07C7.22979 80.07 7.56313 80.03 7.80313 79.95C8.04313 79.87 8.21313 79.7567 8.31313 79.61C8.41979 79.4633 8.47313 79.2933 8.47313 79.1C8.47313 78.8467 8.39979 78.6533 8.25313 78.52C8.10646 78.38 7.89646 78.31 7.62313 78.31C7.37646 78.31 7.14979 78.3633 6.94313 78.47C6.73646 78.5767 6.51979 78.73 6.29313 78.93L5.39313 77.84C5.73979 77.5467 6.09979 77.32 6.47313 77.16C6.85313 77 7.26313 76.92 7.70313 76.92C8.21646 76.92 8.66313 77 9.04313 77.16C9.42979 77.3133 9.72646 77.5433 9.93313 77.85C10.1465 78.15 10.2531 78.5233 10.2531 78.97C10.2531 79.3367 10.1531 79.6633 9.95312 79.95C9.75313 80.23 9.45646 80.45 9.06313 80.61V80.66C9.33646 80.74 9.57979 80.8633 9.79313 81.03C10.0131 81.19 10.1831 81.39 10.3031 81.63C10.4298 81.87 10.4931 82.15 10.4931 82.47C10.4931 82.93 10.3665 83.3233 10.1131 83.65C9.85979 83.97 9.52313 84.2167 9.10313 84.39C8.68979 84.5567 8.23646 84.64 7.74313 84.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab12.svg b/public/static/images/canvas/shape/270deg/plane_tab12.svg
new file mode 100644
index 00000000..2a9d4ea6
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="42" y="56" width="46" height="2" transform="rotate(-90 42 56)" fill="#1083E3"/>
+<path d="M42 12V10L87 0V2L42 12Z" fill="#45CD7D"/>
+<path d="M0 81L0 83L87 110V108L0 81Z" fill="#45CD7D"/>
+<path d="M0 83L0 81L44 54V56L0 83Z" fill="#45CD7D"/>
+<path d="M45 34H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 38.5V34.2C65.8031 33.9667 65.8098 33.6933 65.8231 33.38C65.8431 33.06 65.8565 32.78 65.8631 32.54H65.8231C65.7298 32.7533 65.6331 32.9667 65.5331 33.18C65.4331 33.3933 65.3298 33.6067 65.2231 33.82L64.3731 35.29H68.2831V36.64H62.6731V35.41L65.2631 31.05H67.4631V38.5H65.8031Z" fill="#101010"/>
+<path d="M8 81H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="39.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M46.2431 85.64C45.8498 85.64 45.4931 85.5967 45.1731 85.51C44.8598 85.4233 44.5798 85.3033 44.3331 85.15C44.0865 84.99 43.8731 84.8067 43.6931 84.6L44.5131 83.48C44.7398 83.6867 44.9831 83.86 45.2431 84C45.5031 84.1333 45.7765 84.2 46.0631 84.2C46.2965 84.2 46.4965 84.17 46.6631 84.11C46.8365 84.0433 46.9698 83.9467 47.0631 83.82C47.1565 83.6933 47.2031 83.5367 47.2031 83.35C47.2031 83.1367 47.1531 82.9533 47.0531 82.8C46.9531 82.6467 46.7665 82.53 46.4931 82.45C46.2198 82.37 45.8231 82.33 45.3031 82.33V81.07C45.7298 81.07 46.0631 81.03 46.3031 80.95C46.5431 80.87 46.7131 80.7567 46.8131 80.61C46.9198 80.4633 46.9731 80.2933 46.9731 80.1C46.9731 79.8467 46.8998 79.6533 46.7531 79.52C46.6065 79.38 46.3965 79.31 46.1231 79.31C45.8765 79.31 45.6498 79.3633 45.4431 79.47C45.2365 79.5767 45.0198 79.73 44.7931 79.93L43.8931 78.84C44.2398 78.5467 44.5998 78.32 44.9731 78.16C45.3531 78 45.7631 77.92 46.2031 77.92C46.7165 77.92 47.1631 78 47.5431 78.16C47.9298 78.3133 48.2265 78.5433 48.4331 78.85C48.6465 79.15 48.7531 79.5233 48.7531 79.97C48.7531 80.3367 48.6531 80.6633 48.4531 80.95C48.2531 81.23 47.9565 81.45 47.5631 81.61V81.66C47.8365 81.74 48.0798 81.8633 48.2931 82.03C48.5131 82.19 48.6831 82.39 48.8031 82.63C48.9298 82.87 48.9931 83.15 48.9931 83.47C48.9931 83.93 48.8665 84.3233 48.6131 84.65C48.3598 84.97 48.0231 85.2167 47.6031 85.39C47.1898 85.5567 46.7365 85.64 46.2431 85.64Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M31 60L31 10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="27.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="27.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 38.5V37.48C28.9931 36.9133 29.5365 36.3867 30.0031 35.9C30.4698 35.4133 30.8331 34.96 31.0931 34.54C31.3531 34.1133 31.4831 33.72 31.4831 33.36C31.4831 33.1333 31.4431 32.9433 31.3631 32.79C31.2898 32.63 31.1798 32.51 31.0331 32.43C30.8865 32.35 30.7131 32.31 30.5131 32.31C30.2598 32.31 30.0298 32.3833 29.8231 32.53C29.6231 32.67 29.4331 32.8367 29.2531 33.03L28.2831 32.07C28.6498 31.6767 29.0198 31.3867 29.3931 31.2C29.7731 31.0133 30.2265 30.92 30.7531 30.92C31.2331 30.92 31.6565 31.0167 32.0231 31.21C32.3898 31.4033 32.6765 31.6767 32.8831 32.03C33.0898 32.3767 33.1931 32.7867 33.1931 33.26C33.1931 33.6867 33.0831 34.1233 32.8631 34.57C32.6498 35.01 32.3731 35.4467 32.0331 35.88C31.6931 36.3067 31.3331 36.7133 30.9531 37.1C31.1398 37.0733 31.3465 37.05 31.5731 37.03C31.8065 37.01 32.0065 37 32.1731 37H33.5331V38.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab13.svg b/public/static/images/canvas/shape/270deg/plane_tab13.svg
new file mode 100644
index 00000000..3200c6cc
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="42" y="56" width="56" height="2" transform="rotate(-90 42 56)" fill="#1083E3"/>
+<path d="M0 81L0 83L87 110V108L0 81Z" fill="#45CD7D"/>
+<path d="M0 83L0 81L44 54V56L0 83Z" fill="#45CD7D"/>
+<rect x="44" y="2" width="2" height="43" transform="rotate(-90 44 2)" fill="#EA10AC"/>
+<path d="M45 34H86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 38.5V34.2C65.8031 33.9667 65.8098 33.6933 65.8231 33.38C65.8431 33.06 65.8565 32.78 65.8631 32.54H65.8231C65.7298 32.7533 65.6331 32.9667 65.5331 33.18C65.4331 33.3933 65.3298 33.6067 65.2231 33.82L64.3731 35.29H68.2831V36.64H62.6731V35.41L65.2631 31.05H67.4631V38.5H65.8031Z" fill="#101010"/>
+<path d="M8 81H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="39.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M46.2431 85.64C45.8498 85.64 45.4931 85.5967 45.1731 85.51C44.8598 85.4233 44.5798 85.3033 44.3331 85.15C44.0865 84.99 43.8731 84.8067 43.6931 84.6L44.5131 83.48C44.7398 83.6867 44.9831 83.86 45.2431 84C45.5031 84.1333 45.7765 84.2 46.0631 84.2C46.2965 84.2 46.4965 84.17 46.6631 84.11C46.8365 84.0433 46.9698 83.9467 47.0631 83.82C47.1565 83.6933 47.2031 83.5367 47.2031 83.35C47.2031 83.1367 47.1531 82.9533 47.0531 82.8C46.9531 82.6467 46.7665 82.53 46.4931 82.45C46.2198 82.37 45.8231 82.33 45.3031 82.33V81.07C45.7298 81.07 46.0631 81.03 46.3031 80.95C46.5431 80.87 46.7131 80.7567 46.8131 80.61C46.9198 80.4633 46.9731 80.2933 46.9731 80.1C46.9731 79.8467 46.8998 79.6533 46.7531 79.52C46.6065 79.38 46.3965 79.31 46.1231 79.31C45.8765 79.31 45.6498 79.3633 45.4431 79.47C45.2365 79.5767 45.0198 79.73 44.7931 79.93L43.8931 78.84C44.2398 78.5467 44.5998 78.32 44.9731 78.16C45.3531 78 45.7631 77.92 46.2031 77.92C46.7165 77.92 47.1631 78 47.5431 78.16C47.9298 78.3133 48.2265 78.5433 48.4331 78.85C48.6465 79.15 48.7531 79.5233 48.7531 79.97C48.7531 80.3367 48.6531 80.6633 48.4531 80.95C48.2531 81.23 47.9565 81.45 47.5631 81.61V81.66C47.8365 81.74 48.0798 81.8633 48.2931 82.03C48.5131 82.19 48.6831 82.39 48.8031 82.63C48.9298 82.87 48.9931 83.15 48.9931 83.47C48.9931 83.93 48.8665 84.3233 48.6131 84.65C48.3598 84.97 48.0231 85.2167 47.6031 85.39C47.1898 85.5567 46.7365 85.64 46.2431 85.64Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M31 60L31 10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="27.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="27.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 38.5V37.48C28.9931 36.9133 29.5365 36.3867 30.0031 35.9C30.4698 35.4133 30.8331 34.96 31.0931 34.54C31.3531 34.1133 31.4831 33.72 31.4831 33.36C31.4831 33.1333 31.4431 32.9433 31.3631 32.79C31.2898 32.63 31.1798 32.51 31.0331 32.43C30.8865 32.35 30.7131 32.31 30.5131 32.31C30.2598 32.31 30.0298 32.3833 29.8231 32.53C29.6231 32.67 29.4331 32.8367 29.2531 33.03L28.2831 32.07C28.6498 31.6767 29.0198 31.3867 29.3931 31.2C29.7731 31.0133 30.2265 30.92 30.7531 30.92C31.2331 30.92 31.6565 31.0167 32.0231 31.21C32.3898 31.4033 32.6765 31.6767 32.8831 32.03C33.0898 32.3767 33.1931 32.7867 33.1931 33.26C33.1931 33.6867 33.0831 34.1233 32.8631 34.57C32.6498 35.01 32.3731 35.4467 32.0331 35.88C31.6931 36.3067 31.3331 36.7133 30.9531 37.1C31.1398 37.0733 31.3465 37.05 31.5731 37.03C31.8065 37.01 32.0065 37 32.1731 37H33.5331V38.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab14.svg b/public/static/images/canvas/shape/270deg/plane_tab14.svg
new file mode 100644
index 00000000..82fa8d99
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="110" width="42" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="87" y="42" width="42" height="2" transform="rotate(-90 87 42)" fill="#101010"/>
+<rect x="19" y="110" width="110" height="2" transform="rotate(-90 19 110)" fill="#1083E3"/>
+<path d="M63 54V56L87 70V68L63 54Z" fill="#45CD7D"/>
+<path d="M63 56V54L87 40V42L63 56Z" fill="#45CD7D"/>
+<rect x="21" y="2" width="2" height="66" transform="rotate(-90 21 2)" fill="#EA10AC"/>
+<rect x="21" y="110" width="2" height="66" transform="rotate(-90 21 110)" fill="#EA10AC"/>
+<path d="M22 55H62" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="48.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="48.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3031 59.64C41.9098 59.64 41.5531 59.5933 41.2331 59.5C40.9131 59.4133 40.6265 59.2933 40.3731 59.14C40.1265 58.98 39.9031 58.8033 39.7031 58.61L40.5131 57.49C40.6531 57.6233 40.8031 57.7433 40.9631 57.85C41.1231 57.9567 41.2931 58.0433 41.4731 58.11C41.6598 58.17 41.8498 58.2 42.0431 58.2C42.2831 58.2 42.4898 58.1567 42.6631 58.07C42.8365 57.9833 42.9698 57.8533 43.0631 57.68C43.1631 57.5067 43.2131 57.2933 43.2131 57.04C43.2131 56.6667 43.1098 56.3833 42.9031 56.19C42.7031 55.99 42.4431 55.89 42.1231 55.89C41.9165 55.89 41.7431 55.9167 41.6031 55.97C41.4698 56.0167 41.2931 56.11 41.0731 56.25L40.2931 55.74L40.4831 52.05H44.6631V53.54H42.0131L41.9031 54.8C42.0365 54.7467 42.1631 54.71 42.2831 54.69C42.4031 54.6633 42.5331 54.65 42.6731 54.65C43.0931 54.65 43.4798 54.7333 43.8331 54.9C44.1865 55.0667 44.4665 55.3233 44.6731 55.67C44.8865 56.0167 44.9931 56.46 44.9931 57C44.9931 57.5533 44.8665 58.03 44.6131 58.43C44.3665 58.8233 44.0398 59.1233 43.6331 59.33C43.2265 59.5367 42.7831 59.64 42.3031 59.64Z" fill="#101010"/>
+<path d="M23 89H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="82.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="82.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 93.5V89.2C54.8031 88.9667 54.8098 88.6933 54.8231 88.38C54.8431 88.06 54.8565 87.78 54.8631 87.54H54.8231C54.7298 87.7533 54.6331 87.9667 54.5331 88.18C54.4331 88.3933 54.3298 88.6067 54.2231 88.82L53.3731 90.29H57.2831V91.64H51.6731V90.41L54.2631 86.05H56.4631V93.5H54.8031Z" fill="#101010"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M100 110V70" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="82.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="82.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.3731 93.5V92.48C97.9931 91.9133 98.5365 91.3867 99.0031 90.9C99.4698 90.4133 99.8331 89.96 100.093 89.54C100.353 89.1133 100.483 88.72 100.483 88.36C100.483 88.1333 100.443 87.9433 100.363 87.79C100.29 87.63 100.18 87.51 100.033 87.43C99.8865 87.35 99.7131 87.31 99.5131 87.31C99.2598 87.31 99.0298 87.3833 98.8231 87.53C98.6231 87.67 98.4331 87.8367 98.2531 88.03L97.2831 87.07C97.6498 86.6767 98.0198 86.3867 98.3931 86.2C98.7731 86.0133 99.2265 85.92 99.7531 85.92C100.233 85.92 100.656 86.0167 101.023 86.21C101.39 86.4033 101.676 86.6767 101.883 87.03C102.09 87.3767 102.193 87.7867 102.193 88.26C102.193 88.6867 102.083 89.1233 101.863 89.57C101.65 90.01 101.373 90.4467 101.033 90.88C100.693 91.3067 100.333 91.7133 99.9531 92.1C100.14 92.0733 100.346 92.05 100.573 92.03C100.806 92.01 101.006 92 101.173 92H102.533V93.5H97.3731Z" fill="#101010"/>
+<path d="M100 40V-7.89762e-07" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="12.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="12.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 23.64C99.3498 23.64 98.9931 23.5967 98.6731 23.51C98.3598 23.4233 98.0798 23.3033 97.8331 23.15C97.5865 22.99 97.3731 22.8067 97.1931 22.6L98.0131 21.48C98.2398 21.6867 98.4831 21.86 98.7431 22C99.0031 22.1333 99.2765 22.2 99.5631 22.2C99.7965 22.2 99.9965 22.17 100.163 22.11C100.336 22.0433 100.47 21.9467 100.563 21.82C100.656 21.6933 100.703 21.5367 100.703 21.35C100.703 21.1367 100.653 20.9533 100.553 20.8C100.453 20.6467 100.266 20.53 99.9931 20.45C99.7198 20.37 99.3231 20.33 98.8031 20.33V19.07C99.2298 19.07 99.5631 19.03 99.8031 18.95C100.043 18.87 100.213 18.7567 100.313 18.61C100.42 18.4633 100.473 18.2933 100.473 18.1C100.473 17.8467 100.4 17.6533 100.253 17.52C100.106 17.38 99.8965 17.31 99.6231 17.31C99.3765 17.31 99.1498 17.3633 98.9431 17.47C98.7365 17.5767 98.5198 17.73 98.2931 17.93L97.3931 16.84C97.7398 16.5467 98.0998 16.32 98.4731 16.16C98.8531 16 99.2631 15.92 99.7031 15.92C100.216 15.92 100.663 16 101.043 16.16C101.43 16.3133 101.726 16.5433 101.933 16.85C102.146 17.15 102.253 17.5233 102.253 17.97C102.253 18.3367 102.153 18.6633 101.953 18.95C101.753 19.23 101.456 19.45 101.063 19.61V19.66C101.336 19.74 101.58 19.8633 101.793 20.03C102.013 20.19 102.183 20.39 102.303 20.63C102.43 20.87 102.493 21.15 102.493 21.47C102.493 21.93 102.366 22.3233 102.113 22.65C101.86 22.97 101.523 23.2167 101.103 23.39C100.69 23.5567 100.236 23.64 99.7431 23.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab15.svg b/public/static/images/canvas/shape/270deg/plane_tab15.svg
new file mode 100644
index 00000000..eb47001c
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="87" y="92" width="74" height="2" transform="rotate(-90 87 92)" fill="#101010"/>
+<path d="M41.5 91L2 55.5L41.5 18.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="41" y="20" width="2" height="46" transform="rotate(-90 41 20)" fill="#EA10AC"/>
+<rect x="41" y="92" width="2" height="46" transform="rotate(-90 41 92)" fill="#EA10AC"/>
+<path d="M5 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="38.5" y="48.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="38.5" y="48.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8731 59.5V58.48C43.4931 57.9133 44.0365 57.3867 44.5031 56.9C44.9698 56.4133 45.3331 55.96 45.5931 55.54C45.8531 55.1133 45.9831 54.72 45.9831 54.36C45.9831 54.1333 45.9431 53.9433 45.8631 53.79C45.7898 53.63 45.6798 53.51 45.5331 53.43C45.3865 53.35 45.2131 53.31 45.0131 53.31C44.7598 53.31 44.5298 53.3833 44.3231 53.53C44.1231 53.67 43.9331 53.8367 43.7531 54.03L42.7831 53.07C43.1498 52.6767 43.5198 52.3867 43.8931 52.2C44.2731 52.0133 44.7265 51.92 45.2531 51.92C45.7331 51.92 46.1565 52.0167 46.5231 52.21C46.8898 52.4033 47.1765 52.6767 47.3831 53.03C47.5898 53.3767 47.6931 53.7867 47.6931 54.26C47.6931 54.6867 47.5831 55.1233 47.3631 55.57C47.1498 56.01 46.8731 56.4467 46.5331 56.88C46.1931 57.3067 45.8331 57.7133 45.4531 58.1C45.6398 58.0733 45.8465 58.05 46.0731 58.03C46.3065 58.01 46.5065 58 46.6731 58H48.0331V59.5H42.8731Z" fill="#101010"/>
+<path d="M41 102H88" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="95.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="57.5" y="95.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M64.2431 106.64C63.8498 106.64 63.4931 106.597 63.1731 106.51C62.8598 106.423 62.5798 106.303 62.3331 106.15C62.0865 105.99 61.8731 105.807 61.6931 105.6L62.5131 104.48C62.7398 104.687 62.9831 104.86 63.2431 105C63.5031 105.133 63.7765 105.2 64.0631 105.2C64.2965 105.2 64.4965 105.17 64.6631 105.11C64.8365 105.043 64.9698 104.947 65.0631 104.82C65.1565 104.693 65.2031 104.537 65.2031 104.35C65.2031 104.137 65.1531 103.953 65.0531 103.8C64.9531 103.647 64.7665 103.53 64.4931 103.45C64.2198 103.37 63.8231 103.33 63.3031 103.33V102.07C63.7298 102.07 64.0631 102.03 64.3031 101.95C64.5431 101.87 64.7131 101.757 64.8131 101.61C64.9198 101.463 64.9731 101.293 64.9731 101.1C64.9731 100.847 64.8998 100.653 64.7531 100.52C64.6065 100.38 64.3965 100.31 64.1231 100.31C63.8765 100.31 63.6498 100.363 63.4431 100.47C63.2365 100.577 63.0198 100.73 62.7931 100.93L61.8931 99.84C62.2398 99.5467 62.5998 99.32 62.9731 99.16C63.3531 99 63.7631 98.92 64.2031 98.92C64.7165 98.92 65.1631 99 65.5431 99.16C65.9298 99.3133 66.2265 99.5433 66.4331 99.85C66.6465 100.15 66.7531 100.523 66.7531 100.97C66.7531 101.337 66.6531 101.663 66.4531 101.95C66.2531 102.23 65.9565 102.45 65.5631 102.61V102.66C65.8365 102.74 66.0798 102.863 66.2931 103.03C66.5131 103.19 66.6831 103.39 66.8031 103.63C66.9298 103.87 66.9931 104.15 66.9931 104.47C66.9931 104.93 66.8665 105.323 66.6131 105.65C66.3598 105.97 66.0231 106.217 65.6031 106.39C65.1898 106.557 64.7365 106.64 64.2431 106.64Z" fill="#101010"/>
+<path d="M100 92L100 18" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab16.svg b/public/static/images/canvas/shape/270deg/plane_tab16.svg
new file mode 100644
index 00000000..ff7b570d
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 109L69 84" stroke="#45CD7D" stroke-width="2"/>
+<path d="M88 1L69 26" stroke="#45CD7D" stroke-width="2"/>
+<rect x="87" y="110" width="110" height="2" transform="rotate(-90 87 110)" fill="#101010"/>
+<rect x="19" y="85" width="60" height="2" transform="rotate(-90 19 85)" fill="#1083E3"/>
+<rect x="21" y="85" width="2" height="49" transform="rotate(-90 21 85)" fill="#EA10AC"/>
+<rect x="21" y="27" width="2" height="49" transform="rotate(-90 21 27)" fill="#EA10AC"/>
+<path d="M22 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="48.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="48.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.2431 59.64C52.8498 59.64 52.4931 59.5967 52.1731 59.51C51.8598 59.4233 51.5798 59.3033 51.3331 59.15C51.0865 58.99 50.8731 58.8067 50.6931 58.6L51.5131 57.48C51.7398 57.6867 51.9831 57.86 52.2431 58C52.5031 58.1333 52.7765 58.2 53.0631 58.2C53.2965 58.2 53.4965 58.17 53.6631 58.11C53.8365 58.0433 53.9698 57.9467 54.0631 57.82C54.1565 57.6933 54.2031 57.5367 54.2031 57.35C54.2031 57.1367 54.1531 56.9533 54.0531 56.8C53.9531 56.6467 53.7665 56.53 53.4931 56.45C53.2198 56.37 52.8231 56.33 52.3031 56.33V55.07C52.7298 55.07 53.0631 55.03 53.3031 54.95C53.5431 54.87 53.7131 54.7567 53.8131 54.61C53.9198 54.4633 53.9731 54.2933 53.9731 54.1C53.9731 53.8467 53.8998 53.6533 53.7531 53.52C53.6065 53.38 53.3965 53.31 53.1231 53.31C52.8765 53.31 52.6498 53.3633 52.4431 53.47C52.2365 53.5767 52.0198 53.73 51.7931 53.93L50.8931 52.84C51.2398 52.5467 51.5998 52.32 51.9731 52.16C52.3531 52 52.7631 51.92 53.2031 51.92C53.7165 51.92 54.1631 52 54.5431 52.16C54.9298 52.3133 55.2265 52.5433 55.4331 52.85C55.6465 53.15 55.7531 53.5233 55.7531 53.97C55.7531 54.3367 55.6531 54.6633 55.4531 54.95C55.2531 55.23 54.9565 55.45 54.5631 55.61V55.66C54.8365 55.74 55.0798 55.8633 55.2931 56.03C55.5131 56.19 55.6831 56.39 55.8031 56.63C55.9298 56.87 55.9931 57.15 55.9931 57.47C55.9931 57.93 55.8665 58.3233 55.6131 58.65C55.3598 58.97 55.0231 59.2167 54.6031 59.39C54.1898 59.5567 53.7365 59.64 53.2431 59.64Z" fill="#101010"/>
+<path d="M19 96H66" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="89.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="89.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8031 100.5V96.2C42.8031 95.9667 42.8098 95.6933 42.8231 95.38C42.8431 95.06 42.8565 94.78 42.8631 94.54H42.8231C42.7298 94.7533 42.6331 94.9667 42.5331 95.18C42.4331 95.3933 42.3298 95.6067 42.2231 95.82L41.3731 97.29H45.2831V98.64H39.6731V97.41L42.2631 93.05H44.4631V100.5H42.8031Z" fill="#101010"/>
+<path d="M100 109L100 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M8 85L8 25" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.87313 59V57.98C6.49313 57.4133 7.03646 56.8867 7.50313 56.4C7.96979 55.9133 8.33313 55.46 8.59313 55.04C8.85313 54.6133 8.98313 54.22 8.98313 53.86C8.98313 53.6333 8.94313 53.4433 8.86313 53.29C8.78979 53.13 8.67979 53.01 8.53313 52.93C8.38646 52.85 8.21313 52.81 8.01313 52.81C7.75979 52.81 7.52979 52.8833 7.32313 53.03C7.12313 53.17 6.93313 53.3367 6.75313 53.53L5.78312 52.57C6.14979 52.1767 6.51979 51.8867 6.89313 51.7C7.27313 51.5133 7.72646 51.42 8.25313 51.42C8.73313 51.42 9.15646 51.5167 9.52313 51.71C9.88979 51.9033 10.1765 52.1767 10.3831 52.53C10.5898 52.8767 10.6931 53.2867 10.6931 53.76C10.6931 54.1867 10.5831 54.6233 10.3631 55.07C10.1498 55.51 9.87313 55.9467 9.53313 56.38C9.19313 56.8067 8.83313 57.2133 8.45313 57.6C8.63979 57.5733 8.84646 57.55 9.07313 57.53C9.30646 57.51 9.50646 57.5 9.67313 57.5H11.0331V59H5.87313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab17.svg b/public/static/images/canvas/shape/270deg/plane_tab17.svg
new file mode 100644
index 00000000..0ce3740a
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 31.5L45 12.5L19.5 26" stroke="#45CD7D" stroke-width="2"/>
+<path d="M88 99L19.5 69" stroke="#45CD7D" stroke-width="2"/>
+<rect x="87" y="100" width="70" height="2" transform="rotate(-90 87 100)" fill="#101010"/>
+<rect x="19" y="70" width="45" height="2" transform="rotate(-90 19 70)" fill="#1083E3"/>
+<path d="M22 50L85 50" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.2431 54.64C52.8498 54.64 52.4931 54.5967 52.1731 54.51C51.8598 54.4233 51.5798 54.3033 51.3331 54.15C51.0865 53.99 50.8731 53.8067 50.6931 53.6L51.5131 52.48C51.7398 52.6867 51.9831 52.86 52.2431 53C52.5031 53.1333 52.7765 53.2 53.0631 53.2C53.2965 53.2 53.4965 53.17 53.6631 53.11C53.8365 53.0433 53.9698 52.9467 54.0631 52.82C54.1565 52.6933 54.2031 52.5367 54.2031 52.35C54.2031 52.1367 54.1531 51.9533 54.0531 51.8C53.9531 51.6467 53.7665 51.53 53.4931 51.45C53.2198 51.37 52.8231 51.33 52.3031 51.33V50.07C52.7298 50.07 53.0631 50.03 53.3031 49.95C53.5431 49.87 53.7131 49.7567 53.8131 49.61C53.9198 49.4633 53.9731 49.2933 53.9731 49.1C53.9731 48.8467 53.8998 48.6533 53.7531 48.52C53.6065 48.38 53.3965 48.31 53.1231 48.31C52.8765 48.31 52.6498 48.3633 52.4431 48.47C52.2365 48.5767 52.0198 48.73 51.7931 48.93L50.8931 47.84C51.2398 47.5467 51.5998 47.32 51.9731 47.16C52.3531 47 52.7631 46.92 53.2031 46.92C53.7165 46.92 54.1631 47 54.5431 47.16C54.9298 47.3133 55.2265 47.5433 55.4331 47.85C55.6465 48.15 55.7531 48.5233 55.7531 48.97C55.7531 49.3367 55.6531 49.6633 55.4531 49.95C55.2531 50.23 54.9565 50.45 54.5631 50.61V50.66C54.8365 50.74 55.0798 50.8633 55.2931 51.03C55.5131 51.19 55.6831 51.39 55.8031 51.63C55.9298 51.87 55.9931 52.15 55.9931 52.47C55.9931 52.93 55.8665 53.3233 55.6131 53.65C55.3598 53.97 55.0231 54.2167 54.6031 54.39C54.1898 54.5567 53.7365 54.64 53.2431 54.64Z" fill="#101010"/>
+<path d="M19.3447 79.7651L81.3373 110.062" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="87.4995" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="87.4995" width="14" height="14" rx="7" stroke="black"/>
+<path d="M50.8031 98.4995V94.1995C50.8031 93.9662 50.8098 93.6928 50.8231 93.3795C50.8431 93.0595 50.8565 92.7795 50.8631 92.5395H50.8231C50.7298 92.7528 50.6331 92.9662 50.5331 93.1795C50.4331 93.3928 50.3298 93.6062 50.2231 93.8195L49.3731 95.2895H53.2831V96.6395H47.6731V95.4095L50.2631 91.0495H52.4631V98.4995H50.8031Z" fill="#101010"/>
+<path d="M100 100L100 30" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="57.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="57.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 68.5V67.06H99.3131V62.83H97.9431V61.73C98.3431 61.6567 98.6831 61.5667 98.9631 61.46C99.2498 61.3533 99.5231 61.2167 99.7831 61.05H101.093V67.06H102.433V68.5H97.7331Z" fill="#101010"/>
+<path d="M8 70L8 26" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="40.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="40.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.87313 52V50.98C6.49313 50.4133 7.03646 49.8867 7.50313 49.4C7.96979 48.9133 8.33313 48.46 8.59313 48.04C8.85313 47.6133 8.98313 47.22 8.98313 46.86C8.98313 46.6333 8.94313 46.4433 8.86313 46.29C8.78979 46.13 8.67979 46.01 8.53313 45.93C8.38646 45.85 8.21313 45.81 8.01313 45.81C7.75979 45.81 7.52979 45.8833 7.32313 46.03C7.12313 46.17 6.93313 46.3367 6.75313 46.53L5.78312 45.57C6.14979 45.1767 6.51979 44.8867 6.89313 44.7C7.27313 44.5133 7.72646 44.42 8.25313 44.42C8.73313 44.42 9.15646 44.5167 9.52313 44.71C9.88979 44.9033 10.1765 45.1767 10.3831 45.53C10.5898 45.8767 10.6931 46.2867 10.6931 46.76C10.6931 47.1867 10.5831 47.6233 10.3631 48.07C10.1498 48.51 9.87313 48.9467 9.53313 49.38C9.19313 49.8067 8.83313 50.2133 8.45313 50.6C8.63979 50.5733 8.84646 50.55 9.07313 50.53C9.30646 50.51 9.50646 50.5 9.67313 50.5H11.0331V52H5.87313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/270deg/plane_tab18.svg b/public/static/images/canvas/shape/270deg/plane_tab18.svg
new file mode 100644
index 00000000..b0cbc443
--- /dev/null
+++ b/public/static/images/canvas/shape/270deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 100L2 51L34 2L88 33" stroke="#45CD7D" stroke-width="2"/>
+<rect x="87" y="101" width="69" height="2" transform="rotate(-90 87 101)" fill="#101010"/>
+<path d="M8 50L85 50" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="39.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.8731 54.5V53.48C44.4931 52.9133 45.0365 52.3867 45.5031 51.9C45.9698 51.4133 46.3331 50.96 46.5931 50.54C46.8531 50.1133 46.9831 49.72 46.9831 49.36C46.9831 49.1333 46.9431 48.9433 46.8631 48.79C46.7898 48.63 46.6798 48.51 46.5331 48.43C46.3865 48.35 46.2131 48.31 46.0131 48.31C45.7598 48.31 45.5298 48.3833 45.3231 48.53C45.1231 48.67 44.9331 48.8367 44.7531 49.03L43.7831 48.07C44.1498 47.6767 44.5198 47.3867 44.8931 47.2C45.2731 47.0133 45.7265 46.92 46.2531 46.92C46.7331 46.92 47.1565 47.0167 47.5231 47.21C47.8898 47.4033 48.1765 47.6767 48.3831 48.03C48.5898 48.3767 48.6931 48.7867 48.6931 49.26C48.6931 49.6867 48.5831 50.1233 48.3631 50.57C48.1498 51.01 47.8731 51.4467 47.5331 51.88C47.1931 52.3067 46.8331 52.7133 46.4531 53.1C46.6398 53.0733 46.8465 53.05 47.0731 53.03C47.3065 53.01 47.5065 53 47.6731 53H49.0331V54.5H43.8731Z" fill="#101010"/>
+<path d="M0.841797 61.0205L82.0701 110.285" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="34.5" y="78.4995" width="14" height="14" rx="7" fill="white"/>
+<rect x="34.5" y="78.4995" width="14" height="14" rx="7" stroke="black"/>
+<path d="M41.2431 89.6395C40.8498 89.6395 40.4931 89.5962 40.1731 89.5095C39.8598 89.4228 39.5798 89.3028 39.3331 89.1495C39.0865 88.9895 38.8731 88.8062 38.6931 88.5995L39.5131 87.4795C39.7398 87.6862 39.9831 87.8595 40.2431 87.9995C40.5031 88.1328 40.7765 88.1995 41.0631 88.1995C41.2965 88.1995 41.4965 88.1695 41.6631 88.1095C41.8365 88.0428 41.9698 87.9462 42.0631 87.8195C42.1565 87.6928 42.2031 87.5362 42.2031 87.3495C42.2031 87.1362 42.1531 86.9528 42.0531 86.7995C41.9531 86.6462 41.7665 86.5295 41.4931 86.4495C41.2198 86.3695 40.8231 86.3295 40.3031 86.3295V85.0695C40.7298 85.0695 41.0631 85.0295 41.3031 84.9495C41.5431 84.8695 41.7131 84.7562 41.8131 84.6095C41.9198 84.4628 41.9731 84.2928 41.9731 84.0995C41.9731 83.8462 41.8998 83.6528 41.7531 83.5195C41.6065 83.3795 41.3965 83.3095 41.1231 83.3095C40.8765 83.3095 40.6498 83.3628 40.4431 83.4695C40.2365 83.5762 40.0198 83.7295 39.7931 83.9295L38.8931 82.8395C39.2398 82.5462 39.5998 82.3195 39.9731 82.1595C40.3531 81.9995 40.7631 81.9195 41.2031 81.9195C41.7165 81.9195 42.1631 81.9995 42.5431 82.1595C42.9298 82.3128 43.2265 82.5428 43.4331 82.8495C43.6465 83.1495 43.7531 83.5228 43.7531 83.9695C43.7531 84.3362 43.6531 84.6628 43.4531 84.9495C43.2531 85.2295 42.9565 85.4495 42.5631 85.6095V85.6595C42.8365 85.7395 43.0798 85.8628 43.2931 86.0295C43.5131 86.1895 43.6831 86.3895 43.8031 86.6295C43.9298 86.8695 43.9931 87.1495 43.9931 87.4695C43.9931 87.9295 43.8665 88.3228 43.6131 88.6495C43.3598 88.9695 43.0231 89.2162 42.6031 89.3895C42.1898 89.5562 41.7365 89.6395 41.2431 89.6395Z" fill="#101010"/>
+<path d="M100 101L100 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="58.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="58.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 69.5V68.06H99.3131V63.83H97.9431V62.73C98.3431 62.6567 98.6831 62.5667 98.9631 62.46C99.2498 62.3533 99.5231 62.2167 99.7831 62.05H101.093V68.06H102.433V69.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab01.svg b/public/static/images/canvas/shape/90deg/plane_tab01.svg
new file mode 100644
index 00000000..46476194
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 1L106 55.5L21 109" stroke="#45CD7D" stroke-width="2"/>
+<rect x="21.5" width="110" height="2" transform="rotate(90 21.5 0)" fill="#101010"/>
+<path d="M100 55L24 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab02.svg b/public/static/images/canvas/shape/90deg/plane_tab02.svg
new file mode 100644
index 00000000..74d5a79c
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="35" width="110" height="2" transform="rotate(90 35 0)" fill="#101010"/>
+<rect x="97" width="110" height="2" transform="rotate(90 97 0)" fill="#1083E3"/>
+<rect x="95" width="2" height="60" transform="rotate(90 95 0)" fill="#EA10AC"/>
+<rect x="95" y="108" width="2" height="60" transform="rotate(90 95 108)" fill="#EA10AC"/>
+<path d="M94 55H36" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M22 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="57.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M62.3731 58.5V57.48C62.9931 56.9133 63.5365 56.3867 64.0031 55.9C64.4698 55.4133 64.8331 54.96 65.0931 54.54C65.3531 54.1133 65.4831 53.72 65.4831 53.36C65.4831 53.1333 65.4431 52.9433 65.3631 52.79C65.2898 52.63 65.1798 52.51 65.0331 52.43C64.8865 52.35 64.7131 52.31 64.5131 52.31C64.2598 52.31 64.0298 52.3833 63.8231 52.53C63.6231 52.67 63.4331 52.8367 63.2531 53.03L62.2831 52.07C62.6498 51.6767 63.0198 51.3867 63.3931 51.2C63.7731 51.0133 64.2265 50.92 64.7531 50.92C65.2331 50.92 65.6565 51.0167 66.0231 51.21C66.3898 51.4033 66.6765 51.6767 66.8831 52.03C67.0898 52.3767 67.1931 52.7867 67.1931 53.26C67.1931 53.6867 67.0831 54.1233 66.8631 54.57C66.6498 55.01 66.3731 55.4467 66.0331 55.88C65.6931 56.3067 65.3331 56.7133 64.9531 57.1C65.1398 57.0733 65.3465 57.05 65.5731 57.03C65.8065 57.01 66.0065 57 66.1731 57H67.5331V58.5H62.3731Z" fill="#101010"/>
+<rect x="14.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="14.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M19.7331 58.5V57.06H21.3131V52.83H19.9431V51.73C20.3431 51.6567 20.6831 51.5667 20.9631 51.46C21.2498 51.3533 21.5231 51.2167 21.7831 51.05H23.0931V57.06H24.4331V58.5H19.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab03.svg b/public/static/images/canvas/shape/90deg/plane_tab03.svg
new file mode 100644
index 00000000..8a1cf359
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="89" y="20" width="70" height="2" transform="rotate(90 89 20)" fill="#1083E3"/>
+<path d="M89 20V22L21 2V0L89 20Z" fill="#45CD7D"/>
+<path d="M89 88V90L21 110V108L89 88Z" fill="#45CD7D"/>
+<path d="M85 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M51.3731 58.5V57.48C51.9931 56.9133 52.5365 56.3867 53.0031 55.9C53.4698 55.4133 53.8331 54.96 54.0931 54.54C54.3531 54.1133 54.4831 53.72 54.4831 53.36C54.4831 53.1333 54.4431 52.9433 54.3631 52.79C54.2898 52.63 54.1798 52.51 54.0331 52.43C53.8865 52.35 53.7131 52.31 53.5131 52.31C53.2598 52.31 53.0298 52.3833 52.8231 52.53C52.6231 52.67 52.4331 52.8367 52.2531 53.03L51.2831 52.07C51.6498 51.6767 52.0198 51.3867 52.3931 51.2C52.7731 51.0133 53.2265 50.92 53.7531 50.92C54.2331 50.92 54.6565 51.0167 55.0231 51.21C55.3898 51.4033 55.6765 51.6767 55.8831 52.03C56.0898 52.3767 56.1931 52.7867 56.1931 53.26C56.1931 53.6867 56.0831 54.1233 55.8631 54.57C55.6498 55.01 55.3731 55.4467 55.0331 55.88C54.6931 56.3067 54.3331 56.7133 53.9531 57.1C54.1398 57.0733 54.3465 57.05 54.5731 57.03C54.8065 57.01 55.0065 57 55.1731 57H56.5331V58.5H51.3731Z" fill="#101010"/>
+<path d="M8 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="15.5" y="47.5" width="15" height="15" rx="7.5" transform="rotate(90 15.5 47.5)" fill="white"/>
+<rect x="15.5" y="47.5" width="15" height="15" rx="7.5" transform="rotate(90 15.5 47.5)" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M100 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 58.64C99.3498 58.64 98.9931 58.5967 98.6731 58.51C98.3598 58.4233 98.0798 58.3033 97.8331 58.15C97.5865 57.99 97.3731 57.8067 97.1931 57.6L98.0131 56.48C98.2398 56.6867 98.4831 56.86 98.7431 57C99.0031 57.1333 99.2765 57.2 99.5631 57.2C99.7965 57.2 99.9965 57.17 100.163 57.11C100.336 57.0433 100.47 56.9467 100.563 56.82C100.656 56.6933 100.703 56.5367 100.703 56.35C100.703 56.1367 100.653 55.9533 100.553 55.8C100.453 55.6467 100.266 55.53 99.9931 55.45C99.7198 55.37 99.3231 55.33 98.8031 55.33V54.07C99.2298 54.07 99.5631 54.03 99.8031 53.95C100.043 53.87 100.213 53.7567 100.313 53.61C100.42 53.4633 100.473 53.2933 100.473 53.1C100.473 52.8467 100.4 52.6533 100.253 52.52C100.106 52.38 99.8965 52.31 99.6231 52.31C99.3765 52.31 99.1498 52.3633 98.9431 52.47C98.7365 52.5767 98.5198 52.73 98.2931 52.93L97.3931 51.84C97.7398 51.5467 98.0998 51.32 98.4731 51.16C98.8531 51 99.2631 50.92 99.7031 50.92C100.216 50.92 100.663 51 101.043 51.16C101.43 51.3133 101.726 51.5433 101.933 51.85C102.146 52.15 102.253 52.5233 102.253 52.97C102.253 53.3367 102.153 53.6633 101.953 53.95C101.753 54.23 101.456 54.45 101.063 54.61V54.66C101.336 54.74 101.58 54.8633 101.793 55.03C102.013 55.19 102.183 55.39 102.303 55.63C102.43 55.87 102.493 56.15 102.493 56.47C102.493 56.93 102.366 57.3233 102.113 57.65C101.86 57.97 101.523 58.2167 101.103 58.39C100.69 58.5567 100.236 58.64 99.7431 58.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab04.svg b/public/static/images/canvas/shape/90deg/plane_tab04.svg
new file mode 100644
index 00000000..b06f007f
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="91" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<path d="M108 89V91L21 2V0L108 89Z" fill="#45CD7D"/>
+<rect x="108" y="89" width="2" height="87" transform="rotate(90 108 89)" fill="#EA10AC"/>
+<path d="M108 102H19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="94.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="94.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M60.3731 105.5V104.48C60.9931 103.913 61.5365 103.387 62.0031 102.9C62.4698 102.413 62.8331 101.96 63.0931 101.54C63.3531 101.113 63.4831 100.72 63.4831 100.36C63.4831 100.133 63.4431 99.9433 63.3631 99.79C63.2898 99.63 63.1798 99.51 63.0331 99.43C62.8865 99.35 62.7131 99.31 62.5131 99.31C62.2598 99.31 62.0298 99.3833 61.8231 99.53C61.6231 99.67 61.4331 99.8367 61.2531 100.03L60.2831 99.07C60.6498 98.6767 61.0198 98.3867 61.3931 98.2C61.7731 98.0133 62.2265 97.92 62.7531 97.92C63.2331 97.92 63.6565 98.0167 64.0231 98.21C64.3898 98.4033 64.6765 98.6767 64.8831 99.03C65.0898 99.3767 65.1931 99.7867 65.1931 100.26C65.1931 100.687 65.0831 101.123 64.8631 101.57C64.6498 102.01 64.3731 102.447 64.0331 102.88C63.6931 103.307 63.3331 103.713 62.9531 104.1C63.1398 104.073 63.3465 104.05 63.5731 104.03C63.8065 104.01 64.0065 104 64.1731 104H65.5331V105.5H60.3731Z" fill="#101010"/>
+<path d="M8 1V90" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="38.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 49.5V48.06H7.31313V43.83H5.94313V42.73C6.34313 42.6567 6.68313 42.5667 6.96313 42.46C7.24979 42.3533 7.52313 42.2167 7.78313 42.05H9.09313V48.06H10.4331V49.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab05.svg b/public/static/images/canvas/shape/90deg/plane_tab05.svg
new file mode 100644
index 00000000..8f5be183
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" y="20" width="71" height="2" transform="rotate(90 21 20)" fill="#101010"/>
+<rect x="73" y="20" width="2" height="52" transform="rotate(90 73 20)" fill="#EA10AC"/>
+<rect x="108" y="89" width="2" height="87" transform="rotate(90 108 89)" fill="#EA10AC"/>
+<path d="M73.5 20L108 89H106L71.5 20H73.5Z" fill="#45CD7D"/>
+<path d="M108 102H19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="56.5" y="94.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="56.5" y="94.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M61.3731 105.5V104.48C61.9931 103.913 62.5365 103.387 63.0031 102.9C63.4698 102.413 63.8331 101.96 64.0931 101.54C64.3531 101.113 64.4831 100.72 64.4831 100.36C64.4831 100.133 64.4431 99.9433 64.3631 99.79C64.2898 99.63 64.1798 99.51 64.0331 99.43C63.8865 99.35 63.7131 99.31 63.5131 99.31C63.2598 99.31 63.0298 99.3833 62.8231 99.53C62.6231 99.67 62.4331 99.8367 62.2531 100.03L61.2831 99.07C61.6498 98.6767 62.0198 98.3867 62.3931 98.2C62.7731 98.0133 63.2265 97.92 63.7531 97.92C64.2331 97.92 64.6565 98.0167 65.0231 98.21C65.3898 98.4033 65.6765 98.6767 65.8831 99.03C66.0898 99.3767 66.1931 99.7867 66.1931 100.26C66.1931 100.687 66.0831 101.123 65.8631 101.57C65.6498 102.01 65.3731 102.447 65.0331 102.88C64.6931 103.307 64.3331 103.713 63.9531 104.1C64.1398 104.073 64.3465 104.05 64.5731 104.03C64.8065 104.01 65.0065 104 65.1731 104H66.5331V105.5H61.3731Z" fill="#101010"/>
+<path d="M73 9L19 9" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="38.5" y="1.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="1.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M45.7431 12.64C45.3498 12.64 44.9931 12.5967 44.6731 12.51C44.3598 12.4233 44.0798 12.3033 43.8331 12.15C43.5865 11.99 43.3731 11.8067 43.1931 11.6L44.0131 10.48C44.2398 10.6867 44.4831 10.86 44.7431 11C45.0031 11.1333 45.2765 11.2 45.5631 11.2C45.7965 11.2 45.9965 11.17 46.1631 11.11C46.3365 11.0433 46.4698 10.9467 46.5631 10.82C46.6565 10.6933 46.7031 10.5367 46.7031 10.35C46.7031 10.1367 46.6531 9.95333 46.5531 9.8C46.4531 9.64667 46.2665 9.53 45.9931 9.45C45.7198 9.37 45.3231 9.33 44.8031 9.33V8.07C45.2298 8.07 45.5631 8.03 45.8031 7.95C46.0431 7.87 46.2131 7.75667 46.3131 7.61C46.4198 7.46333 46.4731 7.29333 46.4731 7.1C46.4731 6.84667 46.3998 6.65333 46.2531 6.52C46.1065 6.38 45.8965 6.31 45.6231 6.31C45.3765 6.31 45.1498 6.36333 44.9431 6.47C44.7365 6.57667 44.5198 6.73 44.2931 6.93L43.3931 5.84C43.7398 5.54667 44.0998 5.32 44.4731 5.16C44.8531 5 45.2631 4.92 45.7031 4.92C46.2165 4.92 46.6631 5 47.0431 5.16C47.4298 5.31333 47.7265 5.54333 47.9331 5.85C48.1465 6.15 48.2531 6.52333 48.2531 6.97C48.2531 7.33667 48.1531 7.66333 47.9531 7.95C47.7531 8.23 47.4565 8.45 47.0631 8.61V8.66C47.3365 8.74 47.5798 8.86333 47.7931 9.03C48.0131 9.19 48.1831 9.39 48.3031 9.63C48.4298 9.87 48.4931 10.15 48.4931 10.47C48.4931 10.93 48.3665 11.3233 48.1131 11.65C47.8598 11.97 47.5231 12.2167 47.1031 12.39C46.6898 12.5567 46.2365 12.64 45.7431 12.64Z" fill="#101010"/>
+<path d="M8 20V91" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="48.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="48.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.23313 60V58.56H6.81313V54.33H5.44313V53.23C5.84313 53.1567 6.18313 53.0667 6.46313 52.96C6.74979 52.8533 7.02313 52.7167 7.28313 52.55H8.59313V58.56H9.93313V60H5.23313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab06.svg b/public/static/images/canvas/shape/90deg/plane_tab06.svg
new file mode 100644
index 00000000..d269faab
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="26" y="20" width="70" height="2" transform="rotate(90 26 20)" fill="#1083E3"/>
+<path d="M92 47V49L26 22V20L92 47Z" fill="#45CD7D"/>
+<path d="M92 115V117L26 90V88L92 115Z" fill="#45CD7D"/>
+<path d="M92 47V117L90 116.213V47H92Z" fill="#1083E3"/>
+<path d="M92 33L24 7" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="50.5" y="13.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="50.5" y="13.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M57.7431 24.64C57.3498 24.64 56.9931 24.5967 56.6731 24.51C56.3598 24.4233 56.0798 24.3033 55.8331 24.15C55.5865 23.99 55.3731 23.8067 55.1931 23.6L56.0131 22.48C56.2398 22.6867 56.4831 22.86 56.7431 23C57.0031 23.1333 57.2765 23.2 57.5631 23.2C57.7965 23.2 57.9965 23.17 58.1631 23.11C58.3365 23.0433 58.4698 22.9467 58.5631 22.82C58.6565 22.6933 58.7031 22.5367 58.7031 22.35C58.7031 22.1367 58.6531 21.9533 58.5531 21.8C58.4531 21.6467 58.2665 21.53 57.9931 21.45C57.7198 21.37 57.3231 21.33 56.8031 21.33V20.07C57.2298 20.07 57.5631 20.03 57.8031 19.95C58.0431 19.87 58.2131 19.7567 58.3131 19.61C58.4198 19.4633 58.4731 19.2933 58.4731 19.1C58.4731 18.8467 58.3998 18.6533 58.2531 18.52C58.1065 18.38 57.8965 18.31 57.6231 18.31C57.3765 18.31 57.1498 18.3633 56.9431 18.47C56.7365 18.5767 56.5198 18.73 56.2931 18.93L55.3931 17.84C55.7398 17.5467 56.0998 17.32 56.4731 17.16C56.8531 17 57.2631 16.92 57.7031 16.92C58.2165 16.92 58.6631 17 59.0431 17.16C59.4298 17.3133 59.7265 17.5433 59.9331 17.85C60.1465 18.15 60.2531 18.5233 60.2531 18.97C60.2531 19.3367 60.1531 19.6633 59.9531 19.95C59.7531 20.23 59.4565 20.45 59.0631 20.61V20.66C59.3365 20.74 59.5798 20.8633 59.7931 21.03C60.0131 21.19 60.1831 21.39 60.3031 21.63C60.4298 21.87 60.4931 22.15 60.4931 22.47C60.4931 22.93 60.3665 23.3233 60.1131 23.65C59.8598 23.97 59.5231 24.2167 59.1031 24.39C58.6898 24.5567 58.2365 24.64 57.7431 24.64Z" fill="#101010"/>
+<path d="M13 27V98" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="5.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="5.5" y="55.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M10.7331 66.5V65.06H12.3131V60.83H10.9431V59.73C11.3431 59.6567 11.6831 59.5667 11.9631 59.46C12.2498 59.3533 12.5231 59.2167 12.7831 59.05H14.0931V65.06H15.4331V66.5H10.7331Z" fill="#101010"/>
+<path d="M88 70H28" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="50.5" y="62.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="50.5" y="62.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M55.3731 73.5V72.48C55.9931 71.9133 56.5365 71.3867 57.0031 70.9C57.4698 70.4133 57.8331 69.96 58.0931 69.54C58.3531 69.1133 58.4831 68.72 58.4831 68.36C58.4831 68.1333 58.4431 67.9433 58.3631 67.79C58.2898 67.63 58.1798 67.51 58.0331 67.43C57.8865 67.35 57.7131 67.31 57.5131 67.31C57.2598 67.31 57.0298 67.3833 56.8231 67.53C56.6231 67.67 56.4331 67.8367 56.2531 68.03L55.2831 67.07C55.6498 66.6767 56.0198 66.3867 56.3931 66.2C56.7731 66.0133 57.2265 65.92 57.7531 65.92C58.2331 65.92 58.6565 66.0167 59.0231 66.21C59.3898 66.4033 59.6765 66.6767 59.8831 67.03C60.0898 67.3767 60.1931 67.7867 60.1931 68.26C60.1931 68.6867 60.0831 69.1233 59.8631 69.57C59.6498 70.01 59.3731 70.4467 59.0331 70.88C58.6931 71.3067 58.3331 71.7133 57.9531 72.1C58.1398 72.0733 58.3465 72.05 58.5731 72.03C58.8065 72.01 59.0065 72 59.1731 72H60.5331V73.5H55.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab07.svg b/public/static/images/canvas/shape/90deg/plane_tab07.svg
new file mode 100644
index 00000000..998629bd
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="108" y="3" width="110" height="2" transform="rotate(90 108 3)" fill="#1083E3"/>
+<rect x="48" y="31" width="54" height="2" transform="rotate(90 48 31)" fill="#101010"/>
+<rect x="21" y="3" width="30" height="2" transform="rotate(90 21 3)" fill="#101010"/>
+<rect x="21" y="83" width="30" height="2" transform="rotate(90 21 83)" fill="#101010"/>
+<rect x="106" y="3" width="2" height="85" transform="rotate(90 106 3)" fill="#EA10AC"/>
+<rect x="106" y="111" width="2" height="85" transform="rotate(90 106 111)" fill="#EA10AC"/>
+<rect x="48" y="83" width="2" height="27" transform="rotate(90 48 83)" fill="#EA10AC"/>
+<rect x="48" y="31" width="2" height="27" transform="rotate(90 48 31)" fill="#EA10AC"/>
+<path d="M105 59H48" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="51.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="69.5" y="51.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M76.8031 62.5V58.2C76.8031 57.9667 76.8098 57.6933 76.8231 57.38C76.8431 57.06 76.8565 56.78 76.8631 56.54H76.8231C76.7298 56.7533 76.6331 56.9667 76.5331 57.18C76.4331 57.3933 76.3298 57.6067 76.2231 57.82L75.3731 59.29H79.2831V60.64H73.6731V59.41L76.2631 55.05H78.4631V62.5H76.8031Z" fill="#101010"/>
+<path d="M47 18H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="10.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="10.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 21.64C34.4098 21.64 34.0531 21.5933 33.7331 21.5C33.4131 21.4133 33.1265 21.2933 32.8731 21.14C32.6265 20.98 32.4031 20.8033 32.2031 20.61L33.0131 19.49C33.1531 19.6233 33.3031 19.7433 33.4631 19.85C33.6231 19.9567 33.7931 20.0433 33.9731 20.11C34.1598 20.17 34.3498 20.2 34.5431 20.2C34.7831 20.2 34.9898 20.1567 35.1631 20.07C35.3365 19.9833 35.4698 19.8533 35.5631 19.68C35.6631 19.5067 35.7131 19.2933 35.7131 19.04C35.7131 18.6667 35.6098 18.3833 35.4031 18.19C35.2031 17.99 34.9431 17.89 34.6231 17.89C34.4165 17.89 34.2431 17.9167 34.1031 17.97C33.9698 18.0167 33.7931 18.11 33.5731 18.25L32.7931 17.74L32.9831 14.05H37.1631V15.54H34.5131L34.4031 16.8C34.5365 16.7467 34.6631 16.71 34.7831 16.69C34.9031 16.6633 35.0331 16.65 35.1731 16.65C35.5931 16.65 35.9798 16.7333 36.3331 16.9C36.6865 17.0667 36.9665 17.3233 37.1731 17.67C37.3865 18.0167 37.4931 18.46 37.4931 19C37.4931 19.5533 37.3665 20.03 37.1131 20.43C36.8665 20.8233 36.5398 21.1233 36.1331 21.33C35.7265 21.5367 35.2831 21.64 34.8031 21.64Z" fill="#101010"/>
+<path d="M8 4V32" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="10.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="10.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 21.5V20.06H7.31313V15.83H5.94313V14.73C6.34313 14.6567 6.68313 14.5667 6.96313 14.46C7.24979 14.3533 7.52313 14.2167 7.78313 14.05H9.09313V20.06H10.4331V21.5H5.73313Z" fill="#101010"/>
+<path d="M8 84V112" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="90.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="90.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 101.64C7.34979 101.64 6.99313 101.597 6.67313 101.51C6.35979 101.423 6.07979 101.303 5.83313 101.15C5.58646 100.99 5.37313 100.807 5.19313 100.6L6.01313 99.48C6.23979 99.6867 6.48313 99.86 6.74313 100C7.00313 100.133 7.27646 100.2 7.56313 100.2C7.79646 100.2 7.99646 100.17 8.16313 100.11C8.33646 100.043 8.46979 99.9467 8.56313 99.82C8.65646 99.6933 8.70313 99.5367 8.70313 99.35C8.70313 99.1367 8.65313 98.9533 8.55313 98.8C8.45313 98.6467 8.26646 98.53 7.99313 98.45C7.71979 98.37 7.32313 98.33 6.80313 98.33V97.07C7.22979 97.07 7.56313 97.03 7.80313 96.95C8.04313 96.87 8.21313 96.7567 8.31313 96.61C8.41979 96.4633 8.47313 96.2933 8.47313 96.1C8.47313 95.8467 8.39979 95.6533 8.25313 95.52C8.10646 95.38 7.89646 95.31 7.62313 95.31C7.37646 95.31 7.14979 95.3633 6.94313 95.47C6.73646 95.5767 6.51979 95.73 6.29313 95.93L5.39313 94.84C5.73979 94.5467 6.09979 94.32 6.47313 94.16C6.85313 94 7.26313 93.92 7.70313 93.92C8.21646 93.92 8.66313 94 9.04313 94.16C9.42979 94.3133 9.72646 94.5433 9.93313 94.85C10.1465 95.15 10.2531 95.5233 10.2531 95.97C10.2531 96.3367 10.1531 96.6633 9.95312 96.95C9.75313 97.23 9.45646 97.45 9.06313 97.61V97.66C9.33646 97.74 9.57979 97.8633 9.79313 98.03C10.0131 98.19 10.1831 98.39 10.3031 98.63C10.4298 98.87 10.4931 99.15 10.4931 99.47C10.4931 99.93 10.3665 100.323 10.1131 100.65C9.85979 100.97 9.52313 101.217 9.10313 101.39C8.68979 101.557 8.23646 101.64 7.74313 101.64Z" fill="#101010"/>
+<path d="M31 35V81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="50.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="50.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 61.5V60.48C28.9931 59.9133 29.5365 59.3867 30.0031 58.9C30.4698 58.4133 30.8331 57.96 31.0931 57.54C31.3531 57.1133 31.4831 56.72 31.4831 56.36C31.4831 56.1333 31.4431 55.9433 31.3631 55.79C31.2898 55.63 31.1798 55.51 31.0331 55.43C30.8865 55.35 30.7131 55.31 30.5131 55.31C30.2598 55.31 30.0298 55.3833 29.8231 55.53C29.6231 55.67 29.4331 55.8367 29.2531 56.03L28.2831 55.07C28.6498 54.6767 29.0198 54.3867 29.3931 54.2C29.7731 54.0133 30.2265 53.92 30.7531 53.92C31.2331 53.92 31.6565 54.0167 32.0231 54.21C32.3898 54.4033 32.6765 54.6767 32.8831 55.03C33.0898 55.3767 33.1931 55.7867 33.1931 56.26C33.1931 56.6867 33.0831 57.1233 32.8631 57.57C32.6498 58.01 32.3731 58.4467 32.0331 58.88C31.6931 59.3067 31.3331 59.7133 30.9531 60.1C31.1398 60.0733 31.3465 60.05 31.5731 60.03C31.8065 60.01 32.0065 60 32.1731 60H33.5331V61.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab08.svg b/public/static/images/canvas/shape/90deg/plane_tab08.svg
new file mode 100644
index 00000000..390997c4
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="108" y="64" width="46" height="2" transform="rotate(90 108 64)" fill="#1083E3"/>
+<rect x="83" y="2" width="64" height="2" transform="rotate(90 83 2)" fill="#1083E3"/>
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="83" width="2" height="62" transform="rotate(90 83 0)" fill="#EA10AC"/>
+<rect x="106" y="108" width="2" height="85" transform="rotate(90 106 108)" fill="#EA10AC"/>
+<rect x="108" y="64" width="2" height="27" transform="rotate(90 108 64)" fill="#EA10AC"/>
+<path d="M80 31L23 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="44.5" y="23.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="44.5" y="23.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M51.8031 34.5V30.2C51.8031 29.9667 51.8098 29.6933 51.8231 29.38C51.8431 29.06 51.8565 28.78 51.8631 28.54H51.8231C51.7298 28.7533 51.6331 28.9667 51.5331 29.18C51.4331 29.3933 51.3298 29.6067 51.2231 29.82L50.3731 31.29H54.2831V32.64H48.6731V31.41L51.2631 27.05H53.4631V34.5H51.8031Z" fill="#101010"/>
+<path d="M105 87H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="56.5" y="79.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="56.5" y="79.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M63.2431 90.64C62.8498 90.64 62.4931 90.5967 62.1731 90.51C61.8598 90.4233 61.5798 90.3033 61.3331 90.15C61.0865 89.99 60.8731 89.8067 60.6931 89.6L61.5131 88.48C61.7398 88.6867 61.9831 88.86 62.2431 89C62.5031 89.1333 62.7765 89.2 63.0631 89.2C63.2965 89.2 63.4965 89.17 63.6631 89.11C63.8365 89.0433 63.9698 88.9467 64.0631 88.82C64.1565 88.6933 64.2031 88.5367 64.2031 88.35C64.2031 88.1367 64.1531 87.9533 64.0531 87.8C63.9531 87.6467 63.7665 87.53 63.4931 87.45C63.2198 87.37 62.8231 87.33 62.3031 87.33V86.07C62.7298 86.07 63.0631 86.03 63.3031 85.95C63.5431 85.87 63.7131 85.7567 63.8131 85.61C63.9198 85.4633 63.9731 85.2933 63.9731 85.1C63.9731 84.8467 63.8998 84.6533 63.7531 84.52C63.6065 84.38 63.3965 84.31 63.1231 84.31C62.8765 84.31 62.6498 84.3633 62.4431 84.47C62.2365 84.5767 62.0198 84.73 61.7931 84.93L60.8931 83.84C61.2398 83.5467 61.5998 83.32 61.9731 83.16C62.3531 83 62.7631 82.92 63.2031 82.92C63.7165 82.92 64.1631 83 64.5431 83.16C64.9298 83.3133 65.2265 83.5433 65.4331 83.85C65.6465 84.15 65.7531 84.5233 65.7531 84.97C65.7531 85.3367 65.6531 85.6633 65.4531 85.95C65.2531 86.23 64.9565 86.45 64.5631 86.61V86.66C64.8365 86.74 65.0798 86.8633 65.2931 87.03C65.5131 87.19 65.6831 87.39 65.8031 87.63C65.9298 87.87 65.9931 88.15 65.9931 88.47C65.9931 88.93 65.8665 89.3233 65.6131 89.65C65.3598 89.97 65.0231 90.2167 64.6031 90.39C64.1898 90.5567 63.7365 90.64 63.2431 90.64Z" fill="#101010"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M94 0V63" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="86.5" y="24.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="86.5" y="24.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M91.3731 35.5V34.48C91.9931 33.9133 92.5365 33.3867 93.0031 32.9C93.4698 32.4133 93.8331 31.96 94.0931 31.54C94.3531 31.1133 94.4831 30.72 94.4831 30.36C94.4831 30.1333 94.4431 29.9433 94.3631 29.79C94.2898 29.63 94.1798 29.51 94.0331 29.43C93.8865 29.35 93.7131 29.31 93.5131 29.31C93.2598 29.31 93.0298 29.3833 92.8231 29.53C92.6231 29.67 92.4331 29.8367 92.2531 30.03L91.2831 29.07C91.6498 28.6767 92.0198 28.3867 92.3931 28.2C92.7731 28.0133 93.2265 27.92 93.7531 27.92C94.2331 27.92 94.6565 28.0167 95.0231 28.21C95.3898 28.4033 95.6765 28.6767 95.8831 29.03C96.0898 29.3767 96.1931 29.7867 96.1931 30.26C96.1931 30.6867 96.0831 31.1233 95.8631 31.57C95.6498 32.01 95.3731 32.4467 95.0331 32.88C94.6931 33.3067 94.3331 33.7133 93.9531 34.1C94.1398 34.0733 94.3465 34.05 94.5731 34.03C94.8065 34.01 95.0065 34 95.1731 34H96.5331V35.5H91.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab09.svg b/public/static/images/canvas/shape/90deg/plane_tab09.svg
new file mode 100644
index 00000000..bd4c9e53
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="89" y="64" width="46" height="2" transform="rotate(90 89 64)" fill="#1083E3"/>
+<path d="M68 12V66H66V11.5L68 12Z" fill="#1083E3"/>
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<path d="M68 10V12L21 2V0L68 10Z" fill="#45CD7D"/>
+<rect x="89" y="108" width="2" height="68" transform="rotate(90 89 108)" fill="#EA10AC"/>
+<rect x="89" y="64" width="2" height="23" transform="rotate(90 89 64)" fill="#EA10AC"/>
+<path d="M65 31L22 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="36.5" y="23.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="23.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.3031 34.64C42.9098 34.64 42.5531 34.5933 42.2331 34.5C41.9131 34.4133 41.6265 34.2933 41.3731 34.14C41.1265 33.98 40.9031 33.8033 40.7031 33.61L41.5131 32.49C41.6531 32.6233 41.8031 32.7433 41.9631 32.85C42.1231 32.9567 42.2931 33.0433 42.4731 33.11C42.6598 33.17 42.8498 33.2 43.0431 33.2C43.2831 33.2 43.4898 33.1567 43.6631 33.07C43.8365 32.9833 43.9698 32.8533 44.0631 32.68C44.1631 32.5067 44.2131 32.2933 44.2131 32.04C44.2131 31.6667 44.1098 31.3833 43.9031 31.19C43.7031 30.99 43.4431 30.89 43.1231 30.89C42.9165 30.89 42.7431 30.9167 42.6031 30.97C42.4698 31.0167 42.2931 31.11 42.0731 31.25L41.2931 30.74L41.4831 27.05H45.6631V28.54H43.0131L42.9031 29.8C43.0365 29.7467 43.1631 29.71 43.2831 29.69C43.4031 29.6633 43.5331 29.65 43.6731 29.65C44.0931 29.65 44.4798 29.7333 44.8331 29.9C45.1865 30.0667 45.4665 30.3233 45.6731 30.67C45.8865 31.0167 45.9931 31.46 45.9931 32C45.9931 32.5533 45.8665 33.03 45.6131 33.43C45.3665 33.8233 45.0398 34.1233 44.6331 34.33C44.2265 34.5367 43.7831 34.64 43.3031 34.64Z" fill="#101010"/>
+<path d="M86 87H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="79.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="79.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 90.5V86.2C53.8031 85.9667 53.8098 85.6933 53.8231 85.38C53.8431 85.06 53.8565 84.78 53.8631 84.54H53.8231C53.7298 84.7533 53.6331 84.9667 53.5331 85.18C53.4331 85.3933 53.3298 85.6067 53.2231 85.82L52.3731 87.29H56.2831V88.64H50.6731V87.41L53.2631 83.05H55.4631V90.5H53.8031Z" fill="#101010"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M79 11V61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="71.5" y="28.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="71.5" y="28.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.3731 39.5V38.48C76.9931 37.9133 77.5365 37.3867 78.0031 36.9C78.4698 36.4133 78.8331 35.96 79.0931 35.54C79.3531 35.1133 79.4831 34.72 79.4831 34.36C79.4831 34.1333 79.4431 33.9433 79.3631 33.79C79.2898 33.63 79.1798 33.51 79.0331 33.43C78.8865 33.35 78.7131 33.31 78.5131 33.31C78.2598 33.31 78.0298 33.3833 77.8231 33.53C77.6231 33.67 77.4331 33.8367 77.2531 34.03L76.2831 33.07C76.6498 32.6767 77.0198 32.3867 77.3931 32.2C77.7731 32.0133 78.2265 31.92 78.7531 31.92C79.2331 31.92 79.6565 32.0167 80.0231 32.21C80.3898 32.4033 80.6765 32.6767 80.8831 33.03C81.0898 33.3767 81.1931 33.7867 81.1931 34.26C81.1931 34.6867 81.0831 35.1233 80.8631 35.57C80.6498 36.01 80.3731 36.4467 80.0331 36.88C79.6931 37.3067 79.3331 37.7133 78.9531 38.1C79.1398 38.0733 79.3465 38.05 79.5731 38.03C79.8065 38.01 80.0065 38 80.1731 38H81.5331V39.5H76.3731Z" fill="#101010"/>
+<path d="M100 64V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="79.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="79.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 90.64C99.3498 90.64 98.9931 90.5967 98.6731 90.51C98.3598 90.4233 98.0798 90.3033 97.8331 90.15C97.5865 89.99 97.3731 89.8067 97.1931 89.6L98.0131 88.48C98.2398 88.6867 98.4831 88.86 98.7431 89C99.0031 89.1333 99.2765 89.2 99.5631 89.2C99.7965 89.2 99.9965 89.17 100.163 89.11C100.336 89.0433 100.47 88.9467 100.563 88.82C100.656 88.6933 100.703 88.5367 100.703 88.35C100.703 88.1367 100.653 87.9533 100.553 87.8C100.453 87.6467 100.266 87.53 99.9931 87.45C99.7198 87.37 99.3231 87.33 98.8031 87.33V86.07C99.2298 86.07 99.5631 86.03 99.8031 85.95C100.043 85.87 100.213 85.7567 100.313 85.61C100.42 85.4633 100.473 85.2933 100.473 85.1C100.473 84.8467 100.4 84.6533 100.253 84.52C100.106 84.38 99.8965 84.31 99.6231 84.31C99.3765 84.31 99.1498 84.3633 98.9431 84.47C98.7365 84.5767 98.5198 84.73 98.2931 84.93L97.3931 83.84C97.7398 83.5467 98.0998 83.32 98.4731 83.16C98.8531 83 99.2631 82.92 99.7031 82.92C100.216 82.92 100.663 83 101.043 83.16C101.43 83.3133 101.726 83.5433 101.933 83.85C102.146 84.15 102.253 84.5233 102.253 84.97C102.253 85.3367 102.153 85.6633 101.953 85.95C101.753 86.23 101.456 86.45 101.063 86.61V86.66C101.336 86.74 101.58 86.8633 101.793 87.03C102.013 87.19 102.183 87.39 102.303 87.63C102.43 87.87 102.493 88.15 102.493 88.47C102.493 88.93 102.366 89.3233 102.113 89.65C101.86 89.97 101.523 90.2167 101.103 90.39C100.69 90.5567 100.236 90.64 99.7431 90.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab10.svg b/public/static/images/canvas/shape/90deg/plane_tab10.svg
new file mode 100644
index 00000000..40417b53
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="90" y="54" width="46" height="2" transform="rotate(90 90 54)" fill="#1083E3"/>
+<rect x="22" width="110" height="2" transform="rotate(90 22 0)" fill="#101010"/>
+<rect x="67" width="56" height="2" transform="rotate(90 67 0)" fill="#1083E3"/>
+<path d="M90 98V100L22 110V108L90 98Z" fill="#45CD7D"/>
+<rect x="90" y="54" width="2" height="23" transform="rotate(90 90 54)" fill="#EA10AC"/>
+<rect x="65" width="2" height="43" transform="rotate(90 65 0)" fill="#EA10AC"/>
+<path d="M64 27L23 27" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="36.5" y="19.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="19.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.3031 30.64C42.9098 30.64 42.5531 30.5933 42.2331 30.5C41.9131 30.4133 41.6265 30.2933 41.3731 30.14C41.1265 29.98 40.9031 29.8033 40.7031 29.61L41.5131 28.49C41.6531 28.6233 41.8031 28.7433 41.9631 28.85C42.1231 28.9567 42.2931 29.0433 42.4731 29.11C42.6598 29.17 42.8498 29.2 43.0431 29.2C43.2831 29.2 43.4898 29.1567 43.6631 29.07C43.8365 28.9833 43.9698 28.8533 44.0631 28.68C44.1631 28.5067 44.2131 28.2933 44.2131 28.04C44.2131 27.6667 44.1098 27.3833 43.9031 27.19C43.7031 26.99 43.4431 26.89 43.1231 26.89C42.9165 26.89 42.7431 26.9167 42.6031 26.97C42.4698 27.0167 42.2931 27.11 42.0731 27.25L41.2931 26.74L41.4831 23.05H45.6631V24.54H43.0131L42.9031 25.8C43.0365 25.7467 43.1631 25.71 43.2831 25.69C43.4031 25.6633 43.5331 25.65 43.6731 25.65C44.0931 25.65 44.4798 25.7333 44.8331 25.9C45.1865 26.0667 45.4665 26.3233 45.6731 26.67C45.8865 27.0167 45.9931 27.46 45.9931 28C45.9931 28.5533 45.8665 29.03 45.6131 29.43C45.3665 29.8233 45.0398 30.1233 44.6331 30.33C44.2265 30.5367 43.7831 30.64 43.3031 30.64Z" fill="#101010"/>
+<path d="M87 77H23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="69.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="69.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 80.5V76.2C54.8031 75.9667 54.8098 75.6933 54.8231 75.38C54.8431 75.06 54.8565 74.78 54.8631 74.54H54.8231C54.7298 74.7533 54.6331 74.9667 54.5331 75.18C54.4331 75.3933 54.3298 75.6067 54.2231 75.82L53.3731 77.29H57.2831V78.64H51.6731V77.41L54.2631 73.05H56.4631V80.5H54.8031Z" fill="#101010"/>
+<path d="M9 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="1.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="1.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M6.73313 58.5V57.06H8.31313V52.83H6.94313V51.73C7.34313 51.6567 7.68313 51.5667 7.96313 51.46C8.24979 51.3533 8.52313 51.2167 8.78313 51.05H10.0931V57.06H11.4331V58.5H6.73313Z" fill="#101010"/>
+<path d="M80 2V52" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="72.5" y="19.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="72.5" y="19.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M77.3731 30.5V29.48C77.9931 28.9133 78.5365 28.3867 79.0031 27.9C79.4698 27.4133 79.8331 26.96 80.0931 26.54C80.3531 26.1133 80.4831 25.72 80.4831 25.36C80.4831 25.1333 80.4431 24.9433 80.3631 24.79C80.2898 24.63 80.1798 24.51 80.0331 24.43C79.8865 24.35 79.7131 24.31 79.5131 24.31C79.2598 24.31 79.0298 24.3833 78.8231 24.53C78.6231 24.67 78.4331 24.8367 78.2531 25.03L77.2831 24.07C77.6498 23.6767 78.0198 23.3867 78.3931 23.2C78.7731 23.0133 79.2265 22.92 79.7531 22.92C80.2331 22.92 80.6565 23.0167 81.0231 23.21C81.3898 23.4033 81.6765 23.6767 81.8831 24.03C82.0898 24.3767 82.1931 24.7867 82.1931 25.26C82.1931 25.6867 82.0831 26.1233 81.8631 26.57C81.6498 27.01 81.3731 27.4467 81.0331 27.88C80.6931 28.3067 80.3331 28.7133 79.9531 29.1C80.1398 29.0733 80.3465 29.05 80.5731 29.03C80.8065 29.01 81.0065 29 81.1731 29H82.5331V30.5H77.3731Z" fill="#101010"/>
+<path d="M101 54V100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="93.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="93.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M100.743 80.64C100.35 80.64 99.9931 80.5967 99.6731 80.51C99.3598 80.4233 99.0798 80.3033 98.8331 80.15C98.5865 79.99 98.3731 79.8067 98.1931 79.6L99.0131 78.48C99.2398 78.6867 99.4831 78.86 99.7431 79C100.003 79.1333 100.276 79.2 100.563 79.2C100.796 79.2 100.996 79.17 101.163 79.11C101.336 79.0433 101.47 78.9467 101.563 78.82C101.656 78.6933 101.703 78.5367 101.703 78.35C101.703 78.1367 101.653 77.9533 101.553 77.8C101.453 77.6467 101.266 77.53 100.993 77.45C100.72 77.37 100.323 77.33 99.8031 77.33V76.07C100.23 76.07 100.563 76.03 100.803 75.95C101.043 75.87 101.213 75.7567 101.313 75.61C101.42 75.4633 101.473 75.2933 101.473 75.1C101.473 74.8467 101.4 74.6533 101.253 74.52C101.106 74.38 100.896 74.31 100.623 74.31C100.376 74.31 100.15 74.3633 99.9431 74.47C99.7365 74.5767 99.5198 74.73 99.2931 74.93L98.3931 73.84C98.7398 73.5467 99.0998 73.32 99.4731 73.16C99.8531 73 100.263 72.92 100.703 72.92C101.216 72.92 101.663 73 102.043 73.16C102.43 73.3133 102.726 73.5433 102.933 73.85C103.146 74.15 103.253 74.5233 103.253 74.97C103.253 75.3367 103.153 75.6633 102.953 75.95C102.753 76.23 102.456 76.45 102.063 76.61V76.66C102.336 76.74 102.58 76.8633 102.793 77.03C103.013 77.19 103.183 77.39 103.303 77.63C103.43 77.87 103.493 78.15 103.493 78.47C103.493 78.93 103.366 79.3233 103.113 79.65C102.86 79.97 102.523 80.2167 102.103 80.39C101.69 80.5567 101.236 80.64 100.743 80.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab11.svg b/public/static/images/canvas/shape/90deg/plane_tab11.svg
new file mode 100644
index 00000000..8bb5290a
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="89" y="1" width="53" height="2" transform="rotate(90 89 1)" fill="#1083E3"/>
+<rect x="21" y="10" width="100" height="2" transform="rotate(90 21 10)" fill="#101010"/>
+<rect x="66" y="54" width="56" height="2" transform="rotate(90 66 54)" fill="#1083E3"/>
+<path d="M89 0V2L21 12V10L89 0Z" fill="#45CD7D"/>
+<rect x="89" y="54" width="2" height="23" transform="rotate(90 89 54)" fill="#EA10AC"/>
+<rect x="64" y="108" width="2" height="43" transform="rotate(90 64 108)" fill="#EA10AC"/>
+<path d="M63 83H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="75.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="75.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3031 86.64C41.9098 86.64 41.5531 86.5933 41.2331 86.5C40.9131 86.4133 40.6265 86.2933 40.3731 86.14C40.1265 85.98 39.9031 85.8033 39.7031 85.61L40.5131 84.49C40.6531 84.6233 40.8031 84.7433 40.9631 84.85C41.1231 84.9567 41.2931 85.0433 41.4731 85.11C41.6598 85.17 41.8498 85.2 42.0431 85.2C42.2831 85.2 42.4898 85.1567 42.6631 85.07C42.8365 84.9833 42.9698 84.8533 43.0631 84.68C43.1631 84.5067 43.2131 84.2933 43.2131 84.04C43.2131 83.6667 43.1098 83.3833 42.9031 83.19C42.7031 82.99 42.4431 82.89 42.1231 82.89C41.9165 82.89 41.7431 82.9167 41.6031 82.97C41.4698 83.0167 41.2931 83.11 41.0731 83.25L40.2931 82.74L40.4831 79.05H44.6631V80.54H42.0131L41.9031 81.8C42.0365 81.7467 42.1631 81.71 42.2831 81.69C42.4031 81.6633 42.5331 81.65 42.6731 81.65C43.0931 81.65 43.4798 81.7333 43.8331 81.9C44.1865 82.0667 44.4665 82.3233 44.6731 82.67C44.8865 83.0167 44.9931 83.46 44.9931 84C44.9931 84.5533 44.8665 85.03 44.6131 85.43C44.3665 85.8233 44.0398 86.1233 43.6331 86.33C43.2265 86.5367 42.7831 86.64 42.3031 86.64Z" fill="#101010"/>
+<path d="M86 29L22 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 32.5V28.2C53.8031 27.9667 53.8098 27.6933 53.8231 27.38C53.8431 27.06 53.8565 26.78 53.8631 26.54H53.8231C53.7298 26.7533 53.6331 26.9667 53.5331 27.18C53.4331 27.3933 53.3298 27.6067 53.2231 27.82L52.3731 29.29H56.2831V30.64H50.6731V29.41L53.2631 25.05H55.4631V32.5H53.8031Z" fill="#101010"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M79 58V108" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="71.5" y="75.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="71.5" y="75.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.3731 86.5V85.48C76.9931 84.9133 77.5365 84.3867 78.0031 83.9C78.4698 83.4133 78.8331 82.96 79.0931 82.54C79.3531 82.1133 79.4831 81.72 79.4831 81.36C79.4831 81.1333 79.4431 80.9433 79.3631 80.79C79.2898 80.63 79.1798 80.51 79.0331 80.43C78.8865 80.35 78.7131 80.31 78.5131 80.31C78.2598 80.31 78.0298 80.3833 77.8231 80.53C77.6231 80.67 77.4331 80.8367 77.2531 81.03L76.2831 80.07C76.6498 79.6767 77.0198 79.3867 77.3931 79.2C77.7731 79.0133 78.2265 78.92 78.7531 78.92C79.2331 78.92 79.6565 79.0167 80.0231 79.21C80.3898 79.4033 80.6765 79.6767 80.8831 80.03C81.0898 80.3767 81.1931 80.7867 81.1931 81.26C81.1931 81.6867 81.0831 82.1233 80.8631 82.57C80.6498 83.01 80.3731 83.4467 80.0331 83.88C79.6931 84.3067 79.3331 84.7133 78.9531 85.1C79.1398 85.0733 79.3465 85.05 79.5731 85.03C79.8065 85.01 80.0065 85 80.1731 85H81.5331V86.5H76.3731Z" fill="#101010"/>
+<path d="M100 2V56" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 32.64C99.3498 32.64 98.9931 32.5967 98.6731 32.51C98.3598 32.4233 98.0798 32.3033 97.8331 32.15C97.5865 31.99 97.3731 31.8067 97.1931 31.6L98.0131 30.48C98.2398 30.6867 98.4831 30.86 98.7431 31C99.0031 31.1333 99.2765 31.2 99.5631 31.2C99.7965 31.2 99.9965 31.17 100.163 31.11C100.336 31.0433 100.47 30.9467 100.563 30.82C100.656 30.6933 100.703 30.5367 100.703 30.35C100.703 30.1367 100.653 29.9533 100.553 29.8C100.453 29.6467 100.266 29.53 99.9931 29.45C99.7198 29.37 99.3231 29.33 98.8031 29.33V28.07C99.2298 28.07 99.5631 28.03 99.8031 27.95C100.043 27.87 100.213 27.7567 100.313 27.61C100.42 27.4633 100.473 27.2933 100.473 27.1C100.473 26.8467 100.4 26.6533 100.253 26.52C100.106 26.38 99.8965 26.31 99.6231 26.31C99.3765 26.31 99.1498 26.3633 98.9431 26.47C98.7365 26.5767 98.5198 26.73 98.2931 26.93L97.3931 25.84C97.7398 25.5467 98.0998 25.32 98.4731 25.16C98.8531 25 99.2631 24.92 99.7031 24.92C100.216 24.92 100.663 25 101.043 25.16C101.43 25.3133 101.726 25.5433 101.933 25.85C102.146 26.15 102.253 26.5233 102.253 26.97C102.253 27.3367 102.153 27.6633 101.953 27.95C101.753 28.23 101.456 28.45 101.063 28.61V28.66C101.336 28.74 101.58 28.8633 101.793 29.03C102.013 29.19 102.183 29.39 102.303 29.63C102.43 29.87 102.493 30.15 102.493 30.47C102.493 30.93 102.366 31.3233 102.113 31.65C101.86 31.97 101.523 32.2167 101.103 32.39C100.69 32.5567 100.236 32.64 99.7431 32.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab12.svg b/public/static/images/canvas/shape/90deg/plane_tab12.svg
new file mode 100644
index 00000000..bece8e29
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="22" width="110" height="2" transform="rotate(90 22 0)" fill="#101010"/>
+<rect x="67" y="54" width="46" height="2" transform="rotate(90 67 54)" fill="#1083E3"/>
+<path d="M67 98V100L22 110V108L67 98Z" fill="#45CD7D"/>
+<path d="M109 29V27L22 0V2L109 29Z" fill="#45CD7D"/>
+<path d="M109 27V29L65 56V54L109 27Z" fill="#45CD7D"/>
+<path d="M64 76H23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="36.5" y="68.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="68.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.8031 79.5V75.2C43.8031 74.9667 43.8098 74.6933 43.8231 74.38C43.8431 74.06 43.8565 73.78 43.8631 73.54H43.8231C43.7298 73.7533 43.6331 73.9667 43.5331 74.18C43.4331 74.3933 43.3298 74.6067 43.2231 74.82L42.3731 76.29H46.2831V77.64H40.6731V76.41L43.2631 72.05H45.4631V79.5H43.8031Z" fill="#101010"/>
+<path d="M101 29L24 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="55.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M62.2431 32.64C61.8498 32.64 61.4931 32.5967 61.1731 32.51C60.8598 32.4233 60.5798 32.3033 60.3331 32.15C60.0865 31.99 59.8731 31.8067 59.6931 31.6L60.5131 30.48C60.7398 30.6867 60.9831 30.86 61.2431 31C61.5031 31.1333 61.7765 31.2 62.0631 31.2C62.2965 31.2 62.4965 31.17 62.6631 31.11C62.8365 31.0433 62.9698 30.9467 63.0631 30.82C63.1565 30.6933 63.2031 30.5367 63.2031 30.35C63.2031 30.1367 63.1531 29.9533 63.0531 29.8C62.9531 29.6467 62.7665 29.53 62.4931 29.45C62.2198 29.37 61.8231 29.33 61.3031 29.33V28.07C61.7298 28.07 62.0631 28.03 62.3031 27.95C62.5431 27.87 62.7131 27.7567 62.8131 27.61C62.9198 27.4633 62.9731 27.2933 62.9731 27.1C62.9731 26.8467 62.8998 26.6533 62.7531 26.52C62.6065 26.38 62.3965 26.31 62.1231 26.31C61.8765 26.31 61.6498 26.3633 61.4431 26.47C61.2365 26.5767 61.0198 26.73 60.7931 26.93L59.8931 25.84C60.2398 25.5467 60.5998 25.32 60.9731 25.16C61.3531 25 61.7631 24.92 62.2031 24.92C62.7165 24.92 63.1631 25 63.5431 25.16C63.9298 25.3133 64.2265 25.5433 64.4331 25.85C64.6465 26.15 64.7531 26.5233 64.7531 26.97C64.7531 27.3367 64.6531 27.6633 64.4531 27.95C64.2531 28.23 63.9565 28.45 63.5631 28.61V28.66C63.8365 28.74 64.0798 28.8633 64.2931 29.03C64.5131 29.19 64.6831 29.39 64.8031 29.63C64.9298 29.87 64.9931 30.15 64.9931 30.47C64.9931 30.93 64.8665 31.3233 64.6131 31.65C64.3598 31.97 64.0231 32.2167 63.6031 32.39C63.1898 32.5567 62.7365 32.64 62.2431 32.64Z" fill="#101010"/>
+<path d="M9 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="1.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="1.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M6.73313 58.5V57.06H8.31313V52.83H6.94313V51.73C7.34313 51.6567 7.68313 51.5667 7.96313 51.46C8.24979 51.3533 8.52313 51.2167 8.78313 51.05H10.0931V57.06H11.4331V58.5H6.73313Z" fill="#101010"/>
+<path d="M78 50V100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="70.5" y="67.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="70.5" y="67.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M75.3731 78.5V77.48C75.9931 76.9133 76.5365 76.3867 77.0031 75.9C77.4698 75.4133 77.8331 74.96 78.0931 74.54C78.3531 74.1133 78.4831 73.72 78.4831 73.36C78.4831 73.1333 78.4431 72.9433 78.3631 72.79C78.2898 72.63 78.1798 72.51 78.0331 72.43C77.8865 72.35 77.7131 72.31 77.5131 72.31C77.2598 72.31 77.0298 72.3833 76.8231 72.53C76.6231 72.67 76.4331 72.8367 76.2531 73.03L75.2831 72.07C75.6498 71.6767 76.0198 71.3867 76.3931 71.2C76.7731 71.0133 77.2265 70.92 77.7531 70.92C78.2331 70.92 78.6565 71.0167 79.0231 71.21C79.3898 71.4033 79.6765 71.6767 79.8831 72.03C80.0898 72.3767 80.1931 72.7867 80.1931 73.26C80.1931 73.6867 80.0831 74.1233 79.8631 74.57C79.6498 75.01 79.3731 75.4467 79.0331 75.88C78.6931 76.3067 78.3331 76.7133 77.9531 77.1C78.1398 77.0733 78.3465 77.05 78.5731 77.03C78.8065 77.01 79.0065 77 79.1731 77H80.5331V78.5H75.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab13.svg b/public/static/images/canvas/shape/90deg/plane_tab13.svg
new file mode 100644
index 00000000..bcb4307e
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="66" y="54" width="56" height="2" transform="rotate(90 66 54)" fill="#1083E3"/>
+<path d="M108 29V27L21 0V2L108 29Z" fill="#45CD7D"/>
+<path d="M108 27V29L64 56V54L108 27Z" fill="#45CD7D"/>
+<rect x="64" y="108" width="2" height="43" transform="rotate(90 64 108)" fill="#EA10AC"/>
+<path d="M63 76H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="68.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="68.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8031 79.5V75.2C42.8031 74.9667 42.8098 74.6933 42.8231 74.38C42.8431 74.06 42.8565 73.78 42.8631 73.54H42.8231C42.7298 73.7533 42.6331 73.9667 42.5331 74.18C42.4331 74.3933 42.3298 74.6067 42.2231 74.82L41.3731 76.29H45.2831V77.64H39.6731V76.41L42.2631 72.05H44.4631V79.5H42.8031Z" fill="#101010"/>
+<path d="M100 29L23 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="54.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="54.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M61.2431 32.64C60.8498 32.64 60.4931 32.5967 60.1731 32.51C59.8598 32.4233 59.5798 32.3033 59.3331 32.15C59.0865 31.99 58.8731 31.8067 58.6931 31.6L59.5131 30.48C59.7398 30.6867 59.9831 30.86 60.2431 31C60.5031 31.1333 60.7765 31.2 61.0631 31.2C61.2965 31.2 61.4965 31.17 61.6631 31.11C61.8365 31.0433 61.9698 30.9467 62.0631 30.82C62.1565 30.6933 62.2031 30.5367 62.2031 30.35C62.2031 30.1367 62.1531 29.9533 62.0531 29.8C61.9531 29.6467 61.7665 29.53 61.4931 29.45C61.2198 29.37 60.8231 29.33 60.3031 29.33V28.07C60.7298 28.07 61.0631 28.03 61.3031 27.95C61.5431 27.87 61.7131 27.7567 61.8131 27.61C61.9198 27.4633 61.9731 27.2933 61.9731 27.1C61.9731 26.8467 61.8998 26.6533 61.7531 26.52C61.6065 26.38 61.3965 26.31 61.1231 26.31C60.8765 26.31 60.6498 26.3633 60.4431 26.47C60.2365 26.5767 60.0198 26.73 59.7931 26.93L58.8931 25.84C59.2398 25.5467 59.5998 25.32 59.9731 25.16C60.3531 25 60.7631 24.92 61.2031 24.92C61.7165 24.92 62.1631 25 62.5431 25.16C62.9298 25.3133 63.2265 25.5433 63.4331 25.85C63.6465 26.15 63.7531 26.5233 63.7531 26.97C63.7531 27.3367 63.6531 27.6633 63.4531 27.95C63.2531 28.23 62.9565 28.45 62.5631 28.61V28.66C62.8365 28.74 63.0798 28.8633 63.2931 29.03C63.5131 29.19 63.6831 29.39 63.8031 29.63C63.9298 29.87 63.9931 30.15 63.9931 30.47C63.9931 30.93 63.8665 31.3233 63.6131 31.65C63.3598 31.97 63.0231 32.2167 62.6031 32.39C62.1898 32.5567 61.7365 32.64 61.2431 32.64Z" fill="#101010"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M77 50V100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="67.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="67.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M74.3731 78.5V77.48C74.9931 76.9133 75.5365 76.3867 76.0031 75.9C76.4698 75.4133 76.8331 74.96 77.0931 74.54C77.3531 74.1133 77.4831 73.72 77.4831 73.36C77.4831 73.1333 77.4431 72.9433 77.3631 72.79C77.2898 72.63 77.1798 72.51 77.0331 72.43C76.8865 72.35 76.7131 72.31 76.5131 72.31C76.2598 72.31 76.0298 72.3833 75.8231 72.53C75.6231 72.67 75.4331 72.8367 75.2531 73.03L74.2831 72.07C74.6498 71.6767 75.0198 71.3867 75.3931 71.2C75.7731 71.0133 76.2265 70.92 76.7531 70.92C77.2331 70.92 77.6565 71.0167 78.0231 71.21C78.3898 71.4033 78.6765 71.6767 78.8831 72.03C79.0898 72.3767 79.1931 72.7867 79.1931 73.26C79.1931 73.6867 79.0831 74.1233 78.8631 74.57C78.6498 75.01 78.3731 75.4467 78.0331 75.88C77.6931 76.3067 77.3331 76.7133 76.9531 77.1C77.1398 77.0733 77.3465 77.05 77.5731 77.03C77.8065 77.01 78.0065 77 78.1731 77H79.5331V78.5H74.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab14.svg b/public/static/images/canvas/shape/90deg/plane_tab14.svg
new file mode 100644
index 00000000..8d79bf02
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="42" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="21" y="68" width="42" height="2" transform="rotate(90 21 68)" fill="#101010"/>
+<rect x="89" width="110" height="2" transform="rotate(90 89 0)" fill="#1083E3"/>
+<path d="M45 56V54L21 40V42L45 56Z" fill="#45CD7D"/>
+<path d="M45 54V56L21 70L21 68L45 54Z" fill="#45CD7D"/>
+<rect x="87" y="108" width="2" height="66" transform="rotate(90 87 108)" fill="#EA10AC"/>
+<rect x="87" width="2" height="66" transform="rotate(90 87 0)" fill="#EA10AC"/>
+<path d="M86 55H46" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 58.64C64.9098 58.64 64.5531 58.5933 64.2331 58.5C63.9131 58.4133 63.6265 58.2933 63.3731 58.14C63.1265 57.98 62.9031 57.8033 62.7031 57.61L63.5131 56.49C63.6531 56.6233 63.8031 56.7433 63.9631 56.85C64.1231 56.9567 64.2931 57.0433 64.4731 57.11C64.6598 57.17 64.8498 57.2 65.0431 57.2C65.2831 57.2 65.4898 57.1567 65.6631 57.07C65.8365 56.9833 65.9698 56.8533 66.0631 56.68C66.1631 56.5067 66.2131 56.2933 66.2131 56.04C66.2131 55.6667 66.1098 55.3833 65.9031 55.19C65.7031 54.99 65.4431 54.89 65.1231 54.89C64.9165 54.89 64.7431 54.9167 64.6031 54.97C64.4698 55.0167 64.2931 55.11 64.0731 55.25L63.2931 54.74L63.4831 51.05H67.6631V52.54H65.0131L64.9031 53.8C65.0365 53.7467 65.1631 53.71 65.2831 53.69C65.4031 53.6633 65.5331 53.65 65.6731 53.65C66.0931 53.65 66.4798 53.7333 66.8331 53.9C67.1865 54.0667 67.4665 54.3233 67.6731 54.67C67.8865 55.0167 67.9931 55.46 67.9931 56C67.9931 56.5533 67.8665 57.03 67.6131 57.43C67.3665 57.8233 67.0398 58.1233 66.6331 58.33C66.2265 58.5367 65.7831 58.64 65.3031 58.64Z" fill="#101010"/>
+<path d="M85 21L23 21" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="13.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="13.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 24.5V20.2C53.8031 19.9667 53.8098 19.6933 53.8231 19.38C53.8431 19.06 53.8565 18.78 53.8631 18.54H53.8231C53.7298 18.7533 53.6331 18.9667 53.5331 19.18C53.4331 19.3933 53.3298 19.6067 53.2231 19.82L52.3731 21.29H56.2831V22.64H50.6731V21.41L53.2631 17.05H55.4631V24.5H53.8031Z" fill="#101010"/>
+<path d="M100 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<path d="M8 0V40" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="12.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="12.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.37313 23.5V22.48C5.99313 21.9133 6.53646 21.3867 7.00313 20.9C7.46979 20.4133 7.83313 19.96 8.09313 19.54C8.35313 19.1133 8.48313 18.72 8.48313 18.36C8.48313 18.1333 8.44313 17.9433 8.36313 17.79C8.28979 17.63 8.17979 17.51 8.03313 17.43C7.88646 17.35 7.71313 17.31 7.51313 17.31C7.25979 17.31 7.02979 17.3833 6.82313 17.53C6.62313 17.67 6.43313 17.8367 6.25313 18.03L5.28312 17.07C5.64979 16.6767 6.01979 16.3867 6.39313 16.2C6.77313 16.0133 7.22646 15.92 7.75313 15.92C8.23313 15.92 8.65646 16.0167 9.02313 16.21C9.38979 16.4033 9.67646 16.6767 9.88313 17.03C10.0898 17.3767 10.1931 17.7867 10.1931 18.26C10.1931 18.6867 10.0831 19.1233 9.86313 19.57C9.64979 20.01 9.37313 20.4467 9.03313 20.88C8.69313 21.3067 8.33313 21.7133 7.95313 22.1C8.13979 22.0733 8.34646 22.05 8.57313 22.03C8.80646 22.01 9.00646 22 9.17313 22H10.5331V23.5H5.37313Z" fill="#101010"/>
+<path d="M8 70V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="82.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="82.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 93.64C7.34979 93.64 6.99313 93.5967 6.67313 93.51C6.35979 93.4233 6.07979 93.3033 5.83313 93.15C5.58646 92.99 5.37313 92.8067 5.19313 92.6L6.01313 91.48C6.23979 91.6867 6.48313 91.86 6.74313 92C7.00313 92.1333 7.27646 92.2 7.56313 92.2C7.79646 92.2 7.99646 92.17 8.16313 92.11C8.33646 92.0433 8.46979 91.9467 8.56313 91.82C8.65646 91.6933 8.70313 91.5367 8.70313 91.35C8.70313 91.1367 8.65313 90.9533 8.55313 90.8C8.45313 90.6467 8.26646 90.53 7.99313 90.45C7.71979 90.37 7.32313 90.33 6.80313 90.33V89.07C7.22979 89.07 7.56313 89.03 7.80313 88.95C8.04313 88.87 8.21313 88.7567 8.31313 88.61C8.41979 88.4633 8.47313 88.2933 8.47313 88.1C8.47313 87.8467 8.39979 87.6533 8.25313 87.52C8.10646 87.38 7.89646 87.31 7.62313 87.31C7.37646 87.31 7.14979 87.3633 6.94313 87.47C6.73646 87.5767 6.51979 87.73 6.29313 87.93L5.39313 86.84C5.73979 86.5467 6.09979 86.32 6.47313 86.16C6.85313 86 7.26313 85.92 7.70313 85.92C8.21646 85.92 8.66313 86 9.04313 86.16C9.42979 86.3133 9.72646 86.5433 9.93313 86.85C10.1465 87.15 10.2531 87.5233 10.2531 87.97C10.2531 88.3367 10.1531 88.6633 9.95312 88.95C9.75313 89.23 9.45646 89.45 9.06313 89.61V89.66C9.33646 89.74 9.57979 89.8633 9.79313 90.03C10.0131 90.19 10.1831 90.39 10.3031 90.63C10.4298 90.87 10.4931 91.15 10.4931 91.47C10.4931 91.93 10.3665 92.3233 10.1131 92.65C9.85979 92.97 9.52313 93.2167 9.10313 93.39C8.68979 93.5567 8.23646 93.64 7.74313 93.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab15.svg b/public/static/images/canvas/shape/90deg/plane_tab15.svg
new file mode 100644
index 00000000..4beac542
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" y="18" width="74" height="2" transform="rotate(90 21 18)" fill="#101010"/>
+<path d="M66.5 19L106 54.5L66.5 91.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="67" y="90" width="2" height="46" transform="rotate(90 67 90)" fill="#EA10AC"/>
+<rect x="67" y="18" width="2" height="46" transform="rotate(90 67 18)" fill="#EA10AC"/>
+<path d="M103 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="55.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M59.8731 58.5V57.48C60.4931 56.9133 61.0365 56.3867 61.5031 55.9C61.9698 55.4133 62.3331 54.96 62.5931 54.54C62.8531 54.1133 62.9831 53.72 62.9831 53.36C62.9831 53.1333 62.9431 52.9433 62.8631 52.79C62.7898 52.63 62.6798 52.51 62.5331 52.43C62.3865 52.35 62.2131 52.31 62.0131 52.31C61.7598 52.31 61.5298 52.3833 61.3231 52.53C61.1231 52.67 60.9331 52.8367 60.7531 53.03L59.7831 52.07C60.1498 51.6767 60.5198 51.3867 60.8931 51.2C61.2731 51.0133 61.7265 50.92 62.2531 50.92C62.7331 50.92 63.1565 51.0167 63.5231 51.21C63.8898 51.4033 64.1765 51.6767 64.3831 52.03C64.5898 52.3767 64.6931 52.7867 64.6931 53.26C64.6931 53.6867 64.5831 54.1233 64.3631 54.57C64.1498 55.01 63.8731 55.4467 63.5331 55.88C63.1931 56.3067 62.8331 56.7133 62.4531 57.1C62.6398 57.0733 62.8465 57.05 63.0731 57.03C63.3065 57.01 63.5065 57 63.6731 57H65.0331V58.5H59.8731Z" fill="#101010"/>
+<path d="M67 8L20 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="36.5" y="0.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="0.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.2431 11.64C42.8498 11.64 42.4931 11.5967 42.1731 11.51C41.8598 11.4233 41.5798 11.3033 41.3331 11.15C41.0865 10.99 40.8731 10.8067 40.6931 10.6L41.5131 9.48C41.7398 9.68667 41.9831 9.86 42.2431 10C42.5031 10.1333 42.7765 10.2 43.0631 10.2C43.2965 10.2 43.4965 10.17 43.6631 10.11C43.8365 10.0433 43.9698 9.94667 44.0631 9.82C44.1565 9.69333 44.2031 9.53667 44.2031 9.35C44.2031 9.13667 44.1531 8.95333 44.0531 8.8C43.9531 8.64667 43.7665 8.53 43.4931 8.45C43.2198 8.37 42.8231 8.33 42.3031 8.33V7.07C42.7298 7.07 43.0631 7.03 43.3031 6.95C43.5431 6.87 43.7131 6.75667 43.8131 6.61C43.9198 6.46333 43.9731 6.29333 43.9731 6.1C43.9731 5.84667 43.8998 5.65333 43.7531 5.52C43.6065 5.38 43.3965 5.31 43.1231 5.31C42.8765 5.31 42.6498 5.36333 42.4431 5.47C42.2365 5.57667 42.0198 5.73 41.7931 5.93L40.8931 4.84C41.2398 4.54667 41.5998 4.32 41.9731 4.16C42.3531 4 42.7631 3.92 43.2031 3.92C43.7165 3.92 44.1631 4 44.5431 4.16C44.9298 4.31333 45.2265 4.54333 45.4331 4.85C45.6465 5.15 45.7531 5.52333 45.7531 5.97C45.7531 6.33667 45.6531 6.66333 45.4531 6.95C45.2531 7.23 44.9565 7.45 44.5631 7.61V7.66C44.8365 7.74 45.0798 7.86333 45.2931 8.03C45.5131 8.19 45.6831 8.39 45.8031 8.63C45.9298 8.87 45.9931 9.15 45.9931 9.47C45.9931 9.93 45.8665 10.3233 45.6131 10.65C45.3598 10.97 45.0231 11.2167 44.6031 11.39C44.1898 11.5567 43.7365 11.64 43.2431 11.64Z" fill="#101010"/>
+<path d="M8 18V92" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab16.svg b/public/static/images/canvas/shape/90deg/plane_tab16.svg
new file mode 100644
index 00000000..ed0456df
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 1L39 26" stroke="#45CD7D" stroke-width="2"/>
+<path d="M20 109L39 84" stroke="#45CD7D" stroke-width="2"/>
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="89" y="25" width="60" height="2" transform="rotate(90 89 25)" fill="#1083E3"/>
+<rect x="87" y="25" width="2" height="49" transform="rotate(90 87 25)" fill="#EA10AC"/>
+<rect x="87" y="83" width="2" height="49" transform="rotate(90 87 83)" fill="#EA10AC"/>
+<path d="M86 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 58.64C53.8498 58.64 53.4931 58.5967 53.1731 58.51C52.8598 58.4233 52.5798 58.3033 52.3331 58.15C52.0865 57.99 51.8731 57.8067 51.6931 57.6L52.5131 56.48C52.7398 56.6867 52.9831 56.86 53.2431 57C53.5031 57.1333 53.7765 57.2 54.0631 57.2C54.2965 57.2 54.4965 57.17 54.6631 57.11C54.8365 57.0433 54.9698 56.9467 55.0631 56.82C55.1565 56.6933 55.2031 56.5367 55.2031 56.35C55.2031 56.1367 55.1531 55.9533 55.0531 55.8C54.9531 55.6467 54.7665 55.53 54.4931 55.45C54.2198 55.37 53.8231 55.33 53.3031 55.33V54.07C53.7298 54.07 54.0631 54.03 54.3031 53.95C54.5431 53.87 54.7131 53.7567 54.8131 53.61C54.9198 53.4633 54.9731 53.2933 54.9731 53.1C54.9731 52.8467 54.8998 52.6533 54.7531 52.52C54.6065 52.38 54.3965 52.31 54.1231 52.31C53.8765 52.31 53.6498 52.3633 53.4431 52.47C53.2365 52.5767 53.0198 52.73 52.7931 52.93L51.8931 51.84C52.2398 51.5467 52.5998 51.32 52.9731 51.16C53.3531 51 53.7631 50.92 54.2031 50.92C54.7165 50.92 55.1631 51 55.5431 51.16C55.9298 51.3133 56.2265 51.5433 56.4331 51.85C56.6465 52.15 56.7531 52.5233 56.7531 52.97C56.7531 53.3367 56.6531 53.6633 56.4531 53.95C56.2531 54.23 55.9565 54.45 55.5631 54.61V54.66C55.8365 54.74 56.0798 54.8633 56.2931 55.03C56.5131 55.19 56.6831 55.39 56.8031 55.63C56.9298 55.87 56.9931 56.15 56.9931 56.47C56.9931 56.93 56.8665 57.3233 56.6131 57.65C56.3598 57.97 56.0231 58.2167 55.6031 58.39C55.1898 58.5567 54.7365 58.64 54.2431 58.64Z" fill="#101010"/>
+<path d="M89 14L42 14" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="6.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="6.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 17.5V13.2C65.8031 12.9667 65.8098 12.6933 65.8231 12.38C65.8431 12.06 65.8565 11.78 65.8631 11.54H65.8231C65.7298 11.7533 65.6331 11.9667 65.5331 12.18C65.4331 12.3933 65.3298 12.6067 65.2231 12.82L64.3731 14.29H68.2831V15.64H62.6731V14.41L65.2631 10.05H67.4631V17.5H65.8031Z" fill="#101010"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<path d="M100 25V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.8731 59V57.98C98.4931 57.4133 99.0365 56.8867 99.5031 56.4C99.9698 55.9133 100.333 55.46 100.593 55.04C100.853 54.6133 100.983 54.22 100.983 53.86C100.983 53.6333 100.943 53.4433 100.863 53.29C100.79 53.13 100.68 53.01 100.533 52.93C100.386 52.85 100.213 52.81 100.013 52.81C99.7598 52.81 99.5298 52.8833 99.3231 53.03C99.1231 53.17 98.9331 53.3367 98.7531 53.53L97.7831 52.57C98.1498 52.1767 98.5198 51.8867 98.8931 51.7C99.2731 51.5133 99.7265 51.42 100.253 51.42C100.733 51.42 101.156 51.5167 101.523 51.71C101.89 51.9033 102.176 52.1767 102.383 52.53C102.59 52.8767 102.693 53.2867 102.693 53.76C102.693 54.1867 102.583 54.6233 102.363 55.07C102.15 55.51 101.873 55.9467 101.533 56.38C101.193 56.8067 100.833 57.2133 100.453 57.6C100.64 57.5733 100.846 57.55 101.073 57.53C101.306 57.51 101.506 57.5 101.673 57.5H103.033V59H97.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab17.svg b/public/static/images/canvas/shape/90deg/plane_tab17.svg
new file mode 100644
index 00000000..3fdb6160
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 79.5L63 98.5L88.5 85" stroke="#45CD7D" stroke-width="2"/>
+<path d="M20 12L88.5 42" stroke="#45CD7D" stroke-width="2"/>
+<rect x="21" y="11" width="70" height="2" transform="rotate(90 21 11)" fill="#101010"/>
+<rect x="89" y="41" width="45" height="2" transform="rotate(90 89 41)" fill="#1083E3"/>
+<path d="M86 61L23 61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="53.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="53.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 64.64C53.8498 64.64 53.4931 64.5967 53.1731 64.51C52.8598 64.4233 52.5798 64.3033 52.3331 64.15C52.0865 63.99 51.8731 63.8067 51.6931 63.6L52.5131 62.48C52.7398 62.6867 52.9831 62.86 53.2431 63C53.5031 63.1333 53.7765 63.2 54.0631 63.2C54.2965 63.2 54.4965 63.17 54.6631 63.11C54.8365 63.0433 54.9698 62.9467 55.0631 62.82C55.1565 62.6933 55.2031 62.5367 55.2031 62.35C55.2031 62.1367 55.1531 61.9533 55.0531 61.8C54.9531 61.6467 54.7665 61.53 54.4931 61.45C54.2198 61.37 53.8231 61.33 53.3031 61.33V60.07C53.7298 60.07 54.0631 60.03 54.3031 59.95C54.5431 59.87 54.7131 59.7567 54.8131 59.61C54.9198 59.4633 54.9731 59.2933 54.9731 59.1C54.9731 58.8467 54.8998 58.6533 54.7531 58.52C54.6065 58.38 54.3965 58.31 54.1231 58.31C53.8765 58.31 53.6498 58.3633 53.4431 58.47C53.2365 58.5767 53.0198 58.73 52.7931 58.93L51.8931 57.84C52.2398 57.5467 52.5998 57.32 52.9731 57.16C53.3531 57 53.7631 56.92 54.2031 56.92C54.7165 56.92 55.1631 57 55.5431 57.16C55.9298 57.3133 56.2265 57.5433 56.4331 57.85C56.6465 58.15 56.7531 58.5233 56.7531 58.97C56.7531 59.3367 56.6531 59.6633 56.4531 59.95C56.2531 60.23 55.9565 60.45 55.5631 60.61V60.66C55.8365 60.74 56.0798 60.8633 56.2931 61.03C56.5131 61.19 56.6831 61.39 56.8031 61.63C56.9298 61.87 56.9931 62.15 56.9931 62.47C56.9931 62.93 56.8665 63.3233 56.6131 63.65C56.3598 63.97 56.0231 64.2167 55.6031 64.39C55.1898 64.5567 54.7365 64.64 54.2431 64.64Z" fill="#101010"/>
+<path d="M88.6555 31.2347L26.663 0.93746" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="50.5" y="9.50049" width="14" height="14" rx="7" fill="white"/>
+<rect x="50.5" y="9.50049" width="14" height="14" rx="7" stroke="black"/>
+<path d="M57.8031 20.5005V16.2005C57.8031 15.9672 57.8098 15.6938 57.8231 15.3805C57.8431 15.0605 57.8565 14.7805 57.8631 14.5405H57.8231C57.7298 14.7538 57.6331 14.9672 57.5331 15.1805C57.4331 15.3938 57.3298 15.6072 57.2231 15.8205L56.3731 17.2905H60.2831V18.6405H54.6731V17.4105L57.2631 13.0505H59.4631V20.5005H57.8031Z" fill="#101010"/>
+<path d="M8 11V81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="38.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 49.5V48.06H7.31313V43.83H5.94313V42.73C6.34313 42.6567 6.68313 42.5667 6.96313 42.46C7.24979 42.3533 7.52313 42.2167 7.78313 42.05H9.09313V48.06H10.4331V49.5H5.73313Z" fill="#101010"/>
+<path d="M100 41V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="92.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="55.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.8731 67V65.98C98.4931 65.4133 99.0365 64.8867 99.5031 64.4C99.9698 63.9133 100.333 63.46 100.593 63.04C100.853 62.6133 100.983 62.22 100.983 61.86C100.983 61.6333 100.943 61.4433 100.863 61.29C100.79 61.13 100.68 61.01 100.533 60.93C100.386 60.85 100.213 60.81 100.013 60.81C99.7598 60.81 99.5298 60.8833 99.3231 61.03C99.1231 61.17 98.9331 61.3367 98.7531 61.53L97.7831 60.57C98.1498 60.1767 98.5198 59.8867 98.8931 59.7C99.2731 59.5133 99.7265 59.42 100.253 59.42C100.733 59.42 101.156 59.5167 101.523 59.71C101.89 59.9033 102.176 60.1767 102.383 60.53C102.59 60.8767 102.693 61.2867 102.693 61.76C102.693 62.1867 102.583 62.6233 102.363 63.07C102.15 63.51 101.873 63.9467 101.533 64.38C101.193 64.8067 100.833 65.2133 100.453 65.6C100.64 65.5733 100.846 65.55 101.073 65.53C101.306 65.51 101.506 65.5 101.673 65.5H103.033V67H97.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/90deg/plane_tab18.svg b/public/static/images/canvas/shape/90deg/plane_tab18.svg
new file mode 100644
index 00000000..2072da99
--- /dev/null
+++ b/public/static/images/canvas/shape/90deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11L106 60L74 109L20 78" stroke="#45CD7D" stroke-width="2"/>
+<rect x="21" y="10" width="69" height="2" transform="rotate(90 21 10)" fill="#101010"/>
+<path d="M100 61L23 61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="54.5" y="53.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="54.5" y="53.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8731 64.5V63.48C59.4931 62.9133 60.0365 62.3867 60.5031 61.9C60.9698 61.4133 61.3331 60.96 61.5931 60.54C61.8531 60.1133 61.9831 59.72 61.9831 59.36C61.9831 59.1333 61.9431 58.9433 61.8631 58.79C61.7898 58.63 61.6798 58.51 61.5331 58.43C61.3865 58.35 61.2131 58.31 61.0131 58.31C60.7598 58.31 60.5298 58.3833 60.3231 58.53C60.1231 58.67 59.9331 58.8367 59.7531 59.03L58.7831 58.07C59.1498 57.6767 59.5198 57.3867 59.8931 57.2C60.2731 57.0133 60.7265 56.92 61.2531 56.92C61.7331 56.92 62.1565 57.0167 62.5231 57.21C62.8898 57.4033 63.1765 57.6767 63.3831 58.03C63.5898 58.3767 63.6931 58.7867 63.6931 59.26C63.6931 59.6867 63.5831 60.1233 63.3631 60.57C63.1498 61.01 62.8731 61.4467 62.5331 61.88C62.1931 62.3067 61.8331 62.7133 61.4531 63.1C61.6398 63.0733 61.8465 63.05 62.0731 63.03C62.3065 63.01 62.5065 63 62.6731 63H64.0331V64.5H58.8731Z" fill="#101010"/>
+<path d="M107.158 49.9796L25.9299 0.715369" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="59.5" y="18.5005" width="14" height="14" rx="7" fill="white"/>
+<rect x="59.5" y="18.5005" width="14" height="14" rx="7" stroke="black"/>
+<path d="M66.2431 29.6405C65.8498 29.6405 65.4931 29.5972 65.1731 29.5105C64.8598 29.4238 64.5798 29.3038 64.3331 29.1505C64.0865 28.9905 63.8731 28.8072 63.6931 28.6005L64.5131 27.4805C64.7398 27.6872 64.9831 27.8605 65.2431 28.0005C65.5031 28.1338 65.7765 28.2005 66.0631 28.2005C66.2965 28.2005 66.4965 28.1705 66.6631 28.1105C66.8365 28.0438 66.9698 27.9472 67.0631 27.8205C67.1565 27.6938 67.2031 27.5372 67.2031 27.3505C67.2031 27.1372 67.1531 26.9538 67.0531 26.8005C66.9531 26.6472 66.7665 26.5305 66.4931 26.4505C66.2198 26.3705 65.8231 26.3305 65.3031 26.3305V25.0705C65.7298 25.0705 66.0631 25.0305 66.3031 24.9505C66.5431 24.8705 66.7131 24.7572 66.8131 24.6105C66.9198 24.4638 66.9731 24.2938 66.9731 24.1005C66.9731 23.8472 66.8998 23.6538 66.7531 23.5205C66.6065 23.3805 66.3965 23.3105 66.1231 23.3105C65.8765 23.3105 65.6498 23.3638 65.4431 23.4705C65.2365 23.5772 65.0198 23.7305 64.7931 23.9305L63.8931 22.8405C64.2398 22.5472 64.5998 22.3205 64.9731 22.1605C65.3531 22.0005 65.7631 21.9205 66.2031 21.9205C66.7165 21.9205 67.1631 22.0005 67.5431 22.1605C67.9298 22.3138 68.2265 22.5438 68.4331 22.8505C68.6465 23.1505 68.7531 23.5238 68.7531 23.9705C68.7531 24.3372 68.6531 24.6638 68.4531 24.9505C68.2531 25.2305 67.9565 25.4505 67.5631 25.6105V25.6605C67.8365 25.7405 68.0798 25.8638 68.2931 26.0305C68.5131 26.1905 68.6831 26.3905 68.8031 26.6305C68.9298 26.8705 68.9931 27.1505 68.9931 27.4705C68.9931 27.9305 68.8665 28.3238 68.6131 28.6505C68.3598 28.9705 68.0231 29.2172 67.6031 29.3905C67.1898 29.5572 66.7365 29.6405 66.2431 29.6405Z" fill="#101010"/>
+<path d="M8 10V80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="37.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="37.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 48.5V47.06H7.31313V42.83H5.94313V41.73C6.34313 41.6567 6.68313 41.5667 6.96313 41.46C7.24979 41.3533 7.52313 41.2167 7.78313 41.05H9.09313V47.06H10.4331V48.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab01.svg b/public/static/images/canvas/shape/normal/plane_tab01.svg
new file mode 100644
index 00000000..121b7025
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 87L55.5 2L109 87" stroke="#45CD7D" stroke-width="2"/>
+<rect y="86.5" width="110" height="2" fill="#101010"/>
+<path d="M55 8V84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="45.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="45.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 56.5V55.48C52.9931 54.9133 53.5365 54.3867 54.0031 53.9C54.4698 53.4133 54.8331 52.96 55.0931 52.54C55.3531 52.1133 55.4831 51.72 55.4831 51.36C55.4831 51.1333 55.4431 50.9433 55.3631 50.79C55.2898 50.63 55.1798 50.51 55.0331 50.43C54.8865 50.35 54.7131 50.31 54.5131 50.31C54.2598 50.31 54.0298 50.3833 53.8231 50.53C53.6231 50.67 53.4331 50.8367 53.2531 51.03L52.2831 50.07C52.6498 49.6767 53.0198 49.3867 53.3931 49.2C53.7731 49.0133 54.2265 48.92 54.7531 48.92C55.2331 48.92 55.6565 49.0167 56.0231 49.21C56.3898 49.4033 56.6765 49.6767 56.8831 50.03C57.0898 50.3767 57.1931 50.7867 57.1931 51.26C57.1931 51.6867 57.0831 52.1233 56.8631 52.57C56.6498 53.01 56.3731 53.4467 56.0331 53.88C55.6931 54.3067 55.3331 54.7133 54.9531 55.1C55.1398 55.0733 55.3465 55.05 55.5731 55.03C55.8065 55.01 56.0065 55 56.1731 55H57.5331V56.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab02.svg b/public/static/images/canvas/shape/normal/plane_tab02.svg
new file mode 100644
index 00000000..61891248
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="73" width="110" height="2" fill="#101010"/>
+<rect y="11" width="110" height="2" fill="#1083E3"/>
+<rect y="13" width="2" height="60" fill="#EA10AC"/>
+<rect x="108" y="13" width="2" height="60" fill="#EA10AC"/>
+<path d="M55 14V72" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 86H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="35.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="35.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 46.5V45.48C52.9931 44.9133 53.5365 44.3867 54.0031 43.9C54.4698 43.4133 54.8331 42.96 55.0931 42.54C55.3531 42.1133 55.4831 41.72 55.4831 41.36C55.4831 41.1333 55.4431 40.9433 55.3631 40.79C55.2898 40.63 55.1798 40.51 55.0331 40.43C54.8865 40.35 54.7131 40.31 54.5131 40.31C54.2598 40.31 54.0298 40.3833 53.8231 40.53C53.6231 40.67 53.4331 40.8367 53.2531 41.03L52.2831 40.07C52.6498 39.6767 53.0198 39.3867 53.3931 39.2C53.7731 39.0133 54.2265 38.92 54.7531 38.92C55.2331 38.92 55.6565 39.0167 56.0231 39.21C56.3898 39.4033 56.6765 39.6767 56.8831 40.03C57.0898 40.3767 57.1931 40.7867 57.1931 41.26C57.1931 41.6867 57.0831 42.1233 56.8631 42.57C56.6498 43.01 56.3731 43.4467 56.0331 43.88C55.6931 44.3067 55.3331 44.7133 54.9531 45.1C55.1398 45.0733 55.3465 45.05 55.5731 45.03C55.8065 45.01 56.0065 45 56.1731 45H57.5331V46.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="78.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="78.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 89.5V88.06H54.3131V83.83H52.9431V82.73C53.3431 82.6567 53.6831 82.5667 53.9631 82.46C54.2498 82.3533 54.5231 82.2167 54.7831 82.05H56.0931V88.06H57.4331V89.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab03.svg b/public/static/images/canvas/shape/normal/plane_tab03.svg
new file mode 100644
index 00000000..295e0d89
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="20" y="19" width="70" height="2" fill="#1083E3"/>
+<path d="M20 19H22L2 87H0L20 19Z" fill="#45CD7D"/>
+<path d="M88 19H90L110 87H108L88 19Z" fill="#45CD7D"/>
+<path d="M55 23V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 57.5V56.48C52.9931 55.9133 53.5365 55.3867 54.0031 54.9C54.4698 54.4133 54.8331 53.96 55.0931 53.54C55.3531 53.1133 55.4831 52.72 55.4831 52.36C55.4831 52.1333 55.4431 51.9433 55.3631 51.79C55.2898 51.63 55.1798 51.51 55.0331 51.43C54.8865 51.35 54.7131 51.31 54.5131 51.31C54.2598 51.31 54.0298 51.3833 53.8231 51.53C53.6231 51.67 53.4331 51.8367 53.2531 52.03L52.2831 51.07C52.6498 50.6767 53.0198 50.3867 53.3931 50.2C53.7731 50.0133 54.2265 49.92 54.7531 49.92C55.2331 49.92 55.6565 50.0167 56.0231 50.21C56.3898 50.4033 56.6765 50.6767 56.8831 51.03C57.0898 51.3767 57.1931 51.7867 57.1931 52.26C57.1931 52.6867 57.0831 53.1233 56.8631 53.57C56.6498 54.01 56.3731 54.4467 56.0331 54.88C55.6931 55.3067 55.3331 55.7133 54.9531 56.1C55.1398 56.0733 55.3465 56.05 55.5731 56.03C55.8065 56.01 56.0065 56 56.1731 56H57.5331V57.5H52.3731Z" fill="#101010"/>
+<path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M54.7431 11.64C54.3498 11.64 53.9931 11.5967 53.6731 11.51C53.3598 11.4233 53.0798 11.3033 52.8331 11.15C52.5865 10.99 52.3731 10.8067 52.1931 10.6L53.0131 9.48C53.2398 9.68667 53.4831 9.86 53.7431 10C54.0031 10.1333 54.2765 10.2 54.5631 10.2C54.7965 10.2 54.9965 10.17 55.1631 10.11C55.3365 10.0433 55.4698 9.94667 55.5631 9.82C55.6565 9.69333 55.7031 9.53667 55.7031 9.35C55.7031 9.13667 55.6531 8.95333 55.5531 8.8C55.4531 8.64667 55.2665 8.53 54.9931 8.45C54.7198 8.37 54.3231 8.33 53.8031 8.33V7.07C54.2298 7.07 54.5631 7.03 54.8031 6.95C55.0431 6.87 55.2131 6.75667 55.3131 6.61C55.4198 6.46333 55.4731 6.29333 55.4731 6.1C55.4731 5.84667 55.3998 5.65333 55.2531 5.52C55.1065 5.38 54.8965 5.31 54.6231 5.31C54.3765 5.31 54.1498 5.36333 53.9431 5.47C53.7365 5.57667 53.5198 5.73 53.2931 5.93L52.3931 4.84C52.7398 4.54667 53.0998 4.32 53.4731 4.16C53.8531 4 54.2631 3.92 54.7031 3.92C55.2165 3.92 55.6631 4 56.0431 4.16C56.4298 4.31333 56.7265 4.54333 56.9331 4.85C57.1465 5.15 57.2531 5.52333 57.2531 5.97C57.2531 6.33667 57.1531 6.66333 56.9531 6.95C56.7531 7.23 56.4565 7.45 56.0631 7.61V7.66C56.3365 7.74 56.5798 7.86333 56.7931 8.03C57.0131 8.19 57.1831 8.39 57.3031 8.63C57.4298 8.87 57.4931 9.15 57.4931 9.47C57.4931 9.93 57.3665 10.3233 57.1131 10.65C56.8598 10.97 56.5231 11.2167 56.1031 11.39C55.6898 11.5567 55.2365 11.64 54.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab04.svg b/public/static/images/canvas/shape/normal/plane_tab04.svg
new file mode 100644
index 00000000..894bb55c
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="91" height="2" fill="#101010"/>
+<path d="M89 0H91L2 87H0L89 0Z" fill="#45CD7D"/>
+<rect x="89" width="2" height="87" fill="#EA10AC"/>
+<path d="M102 0V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="94.5" y="37.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="94.5" y="37.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M99.3731 48.5V47.48C99.9931 46.9133 100.536 46.3867 101.003 45.9C101.47 45.4133 101.833 44.96 102.093 44.54C102.353 44.1133 102.483 43.72 102.483 43.36C102.483 43.1333 102.443 42.9433 102.363 42.79C102.29 42.63 102.18 42.51 102.033 42.43C101.886 42.35 101.713 42.31 101.513 42.31C101.26 42.31 101.03 42.3833 100.823 42.53C100.623 42.67 100.433 42.8367 100.253 43.03L99.2831 42.07C99.6498 41.6767 100.02 41.3867 100.393 41.2C100.773 41.0133 101.226 40.92 101.753 40.92C102.233 40.92 102.656 41.0167 103.023 41.21C103.39 41.4033 103.676 41.6767 103.883 42.03C104.09 42.3767 104.193 42.7867 104.193 43.26C104.193 43.6867 104.083 44.1233 103.863 44.57C103.65 45.01 103.373 45.4467 103.033 45.88C102.693 46.3067 102.333 46.7133 101.953 47.1C102.14 47.0733 102.346 47.05 102.573 47.03C102.806 47.01 103.006 47 103.173 47H104.533V48.5H99.3731Z" fill="#101010"/>
+<path d="M1 100H90" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="38.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M43.7331 103.5V102.06H45.3131V97.83H43.9431V96.73C44.3431 96.6567 44.6831 96.5667 44.9631 96.46C45.2498 96.3533 45.5231 96.2167 45.7831 96.05H47.0931V102.06H48.4331V103.5H43.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab05.svg b/public/static/images/canvas/shape/normal/plane_tab05.svg
new file mode 100644
index 00000000..63b3c201
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="20" y="87" width="71" height="2" fill="#101010"/>
+<rect x="20" y="35" width="2" height="52" fill="#EA10AC"/>
+<rect x="89" width="2" height="87" fill="#EA10AC"/>
+<path d="M20 34.5L89 0V2L20 36.5V34.5Z" fill="#45CD7D"/>
+<path d="M102 0V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="94.5" y="37.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="94.5" y="37.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M99.3731 48.5V47.48C99.9931 46.9133 100.536 46.3867 101.003 45.9C101.47 45.4133 101.833 44.96 102.093 44.54C102.353 44.1133 102.483 43.72 102.483 43.36C102.483 43.1333 102.443 42.9433 102.363 42.79C102.29 42.63 102.18 42.51 102.033 42.43C101.886 42.35 101.713 42.31 101.513 42.31C101.26 42.31 101.03 42.3833 100.823 42.53C100.623 42.67 100.433 42.8367 100.253 43.03L99.2831 42.07C99.6498 41.6767 100.02 41.3867 100.393 41.2C100.773 41.0133 101.226 40.92 101.753 40.92C102.233 40.92 102.656 41.0167 103.023 41.21C103.39 41.4033 103.676 41.6767 103.883 42.03C104.09 42.3767 104.193 42.7867 104.193 43.26C104.193 43.6867 104.083 44.1233 103.863 44.57C103.65 45.01 103.373 45.4467 103.033 45.88C102.693 46.3067 102.333 46.7133 101.953 47.1C102.14 47.0733 102.346 47.05 102.573 47.03C102.806 47.01 103.006 47 103.173 47H104.533V48.5H99.3731Z" fill="#101010"/>
+<path d="M9 35V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="1.5" y="54.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="1.5" y="54.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M8.74313 65.64C8.34979 65.64 7.99313 65.5967 7.67313 65.51C7.35979 65.4233 7.07979 65.3033 6.83313 65.15C6.58646 64.99 6.37313 64.8067 6.19313 64.6L7.01313 63.48C7.23979 63.6867 7.48313 63.86 7.74313 64C8.00313 64.1333 8.27646 64.2 8.56313 64.2C8.79646 64.2 8.99646 64.17 9.16313 64.11C9.33646 64.0433 9.46979 63.9467 9.56313 63.82C9.65646 63.6933 9.70313 63.5367 9.70313 63.35C9.70313 63.1367 9.65313 62.9533 9.55313 62.8C9.45313 62.6467 9.26646 62.53 8.99313 62.45C8.71979 62.37 8.32313 62.33 7.80313 62.33V61.07C8.22979 61.07 8.56313 61.03 8.80313 60.95C9.04313 60.87 9.21313 60.7567 9.31313 60.61C9.41979 60.4633 9.47313 60.2933 9.47313 60.1C9.47313 59.8467 9.39979 59.6533 9.25313 59.52C9.10646 59.38 8.89646 59.31 8.62313 59.31C8.37646 59.31 8.14979 59.3633 7.94313 59.47C7.73646 59.5767 7.51979 59.73 7.29313 59.93L6.39313 58.84C6.73979 58.5467 7.09979 58.32 7.47313 58.16C7.85313 58 8.26313 57.92 8.70313 57.92C9.21646 57.92 9.66313 58 10.0431 58.16C10.4298 58.3133 10.7265 58.5433 10.9331 58.85C11.1465 59.15 11.2531 59.5233 11.2531 59.97C11.2531 60.3367 11.1531 60.6633 10.9531 60.95C10.7531 61.23 10.4565 61.45 10.0631 61.61V61.66C10.3365 61.74 10.5798 61.8633 10.7931 62.03C11.0131 62.19 11.1831 62.39 11.3031 62.63C11.4298 62.87 11.4931 63.15 11.4931 63.47C11.4931 63.93 11.3665 64.3233 11.1131 64.65C10.8598 64.97 10.5231 65.2167 10.1031 65.39C9.68979 65.5567 9.23646 65.64 8.74313 65.64Z" fill="#101010"/>
+<path d="M20 100H91" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="48.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="48.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M53.7331 103.5V102.06H55.3131V97.83H53.9431V96.73C54.3431 96.6567 54.6831 96.5667 54.9631 96.46C55.2498 96.3533 55.5231 96.2167 55.7831 96.05H57.0931V102.06H58.4331V103.5H53.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab06.svg b/public/static/images/canvas/shape/normal/plane_tab06.svg
new file mode 100644
index 00000000..1bad98a0
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="20" y="82" width="70" height="2" fill="#1083E3"/>
+<path d="M47 16H49L22 82H20L47 16Z" fill="#45CD7D"/>
+<path d="M115 16H117L90 82H88L115 16Z" fill="#45CD7D"/>
+<path d="M47 16H117L116.213 18H47V16Z" fill="#1083E3"/>
+<path d="M33 16L7 84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="13.5" y="42.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="13.5" y="42.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M20.7431 53.64C20.3498 53.64 19.9931 53.5967 19.6731 53.51C19.3598 53.4233 19.0798 53.3033 18.8331 53.15C18.5865 52.99 18.3731 52.8067 18.1931 52.6L19.0131 51.48C19.2398 51.6867 19.4831 51.86 19.7431 52C20.0031 52.1333 20.2765 52.2 20.5631 52.2C20.7965 52.2 20.9965 52.17 21.1631 52.11C21.3365 52.0433 21.4698 51.9467 21.5631 51.82C21.6565 51.6933 21.7031 51.5367 21.7031 51.35C21.7031 51.1367 21.6531 50.9533 21.5531 50.8C21.4531 50.6467 21.2665 50.53 20.9931 50.45C20.7198 50.37 20.3231 50.33 19.8031 50.33V49.07C20.2298 49.07 20.5631 49.03 20.8031 48.95C21.0431 48.87 21.2131 48.7567 21.3131 48.61C21.4198 48.4633 21.4731 48.2933 21.4731 48.1C21.4731 47.8467 21.3998 47.6533 21.2531 47.52C21.1065 47.38 20.8965 47.31 20.6231 47.31C20.3765 47.31 20.1498 47.3633 19.9431 47.47C19.7365 47.5767 19.5198 47.73 19.2931 47.93L18.3931 46.84C18.7398 46.5467 19.0998 46.32 19.4731 46.16C19.8531 46 20.2631 45.92 20.7031 45.92C21.2165 45.92 21.6631 46 22.0431 46.16C22.4298 46.3133 22.7265 46.5433 22.9331 46.85C23.1465 47.15 23.2531 47.5233 23.2531 47.97C23.2531 48.3367 23.1531 48.6633 22.9531 48.95C22.7531 49.23 22.4565 49.45 22.0631 49.61V49.66C22.3365 49.74 22.5798 49.8633 22.7931 50.03C23.0131 50.19 23.1831 50.39 23.3031 50.63C23.4298 50.87 23.4931 51.15 23.4931 51.47C23.4931 51.93 23.3665 52.3233 23.1131 52.65C22.8598 52.97 22.5231 53.2167 22.1031 53.39C21.6898 53.5567 21.2365 53.64 20.7431 53.64Z" fill="#101010"/>
+<path d="M27 95H98" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="87.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="87.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M60.7331 98.5V97.06H62.3131V92.83H60.9431V91.73C61.3431 91.6567 61.6831 91.5667 61.9631 91.46C62.2498 91.3533 62.5231 91.2167 62.7831 91.05H64.0931V97.06H65.4331V98.5H60.7331Z" fill="#101010"/>
+<path d="M70 20V80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="62.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="62.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M67.3731 54.5V53.48C67.9931 52.9133 68.5365 52.3867 69.0031 51.9C69.4698 51.4133 69.8331 50.96 70.0931 50.54C70.3531 50.1133 70.4831 49.72 70.4831 49.36C70.4831 49.1333 70.4431 48.9433 70.3631 48.79C70.2898 48.63 70.1798 48.51 70.0331 48.43C69.8865 48.35 69.7131 48.31 69.5131 48.31C69.2598 48.31 69.0298 48.3833 68.8231 48.53C68.6231 48.67 68.4331 48.8367 68.2531 49.03L67.2831 48.07C67.6498 47.6767 68.0198 47.3867 68.3931 47.2C68.7731 47.0133 69.2265 46.92 69.7531 46.92C70.2331 46.92 70.6565 47.0167 71.0231 47.21C71.3898 47.4033 71.6765 47.6767 71.8831 48.03C72.0898 48.3767 72.1931 48.7867 72.1931 49.26C72.1931 49.6867 72.0831 50.1233 71.8631 50.57C71.6498 51.01 71.3731 51.4467 71.0331 51.88C70.6931 52.3067 70.3331 52.7133 69.9531 53.1C70.1398 53.0733 70.3465 53.05 70.5731 53.03C70.8065 53.01 71.0065 53 71.1731 53H72.5331V54.5H67.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab07.svg b/public/static/images/canvas/shape/normal/plane_tab07.svg
new file mode 100644
index 00000000..a358f766
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="110" height="2" fill="#1083E3"/>
+<rect x="31" y="60" width="54" height="2" fill="#101010"/>
+<rect x="3" y="87" width="30" height="2" fill="#101010"/>
+<rect x="83" y="87" width="30" height="2" fill="#101010"/>
+<rect x="3" y="2" width="2" height="85" fill="#EA10AC"/>
+<rect x="111" y="2" width="2" height="85" fill="#EA10AC"/>
+<rect x="83" y="60" width="2" height="27" fill="#EA10AC"/>
+<rect x="31" y="60" width="2" height="27" fill="#EA10AC"/>
+<path d="M59 3V60" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="51.5" y="24.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="51.5" y="24.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8031 35.5V31.2C58.8031 30.9667 58.8098 30.6933 58.8231 30.38C58.8431 30.06 58.8565 29.78 58.8631 29.54H58.8231C58.7298 29.7533 58.6331 29.9667 58.5331 30.18C58.4331 30.3933 58.3298 30.6067 58.2231 30.82L57.3731 32.29H61.2831V33.64H55.6731V32.41L58.2631 28.05H60.4631V35.5H58.8031Z" fill="#101010"/>
+<path d="M18 61V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="10.5" y="66.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="10.5" y="66.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M17.8031 77.64C17.4098 77.64 17.0531 77.5933 16.7331 77.5C16.4131 77.4133 16.1265 77.2933 15.8731 77.14C15.6265 76.98 15.4031 76.8033 15.2031 76.61L16.0131 75.49C16.1531 75.6233 16.3031 75.7433 16.4631 75.85C16.6231 75.9567 16.7931 76.0433 16.9731 76.11C17.1598 76.17 17.3498 76.2 17.5431 76.2C17.7831 76.2 17.9898 76.1567 18.1631 76.07C18.3365 75.9833 18.4698 75.8533 18.5631 75.68C18.6631 75.5067 18.7131 75.2933 18.7131 75.04C18.7131 74.6667 18.6098 74.3833 18.4031 74.19C18.2031 73.99 17.9431 73.89 17.6231 73.89C17.4165 73.89 17.2431 73.9167 17.1031 73.97C16.9698 74.0167 16.7931 74.11 16.5731 74.25L15.7931 73.74L15.9831 70.05H20.1631V71.54H17.5131L17.4031 72.8C17.5365 72.7467 17.6631 72.71 17.7831 72.69C17.9031 72.6633 18.0331 72.65 18.1731 72.65C18.5931 72.65 18.9798 72.7333 19.3331 72.9C19.6865 73.0667 19.9665 73.3233 20.1731 73.67C20.3865 74.0167 20.4931 74.46 20.4931 75C20.4931 75.5533 20.3665 76.03 20.1131 76.43C19.8665 76.8233 19.5398 77.1233 19.1331 77.33C18.7265 77.5367 18.2831 77.64 17.8031 77.64Z" fill="#101010"/>
+<path d="M4 100H32" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="10.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="10.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M15.7331 103.5V102.06H17.3131V97.83H15.9431V96.73C16.3431 96.6567 16.6831 96.5667 16.9631 96.46C17.2498 96.3533 17.5231 96.2167 17.7831 96.05H19.0931V102.06H20.4331V103.5H15.7331Z" fill="#101010"/>
+<path d="M84 100H112" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="90.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="90.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7431 103.64C97.3498 103.64 96.9931 103.597 96.6731 103.51C96.3598 103.423 96.0798 103.303 95.8331 103.15C95.5865 102.99 95.3731 102.807 95.1931 102.6L96.0131 101.48C96.2398 101.687 96.4831 101.86 96.7431 102C97.0031 102.133 97.2765 102.2 97.5631 102.2C97.7965 102.2 97.9965 102.17 98.1631 102.11C98.3365 102.043 98.4698 101.947 98.5631 101.82C98.6565 101.693 98.7031 101.537 98.7031 101.35C98.7031 101.137 98.6531 100.953 98.5531 100.8C98.4531 100.647 98.2665 100.53 97.9931 100.45C97.7198 100.37 97.3231 100.33 96.8031 100.33V99.07C97.2298 99.07 97.5631 99.03 97.8031 98.95C98.0431 98.87 98.2131 98.7567 98.3131 98.61C98.4198 98.4633 98.4731 98.2933 98.4731 98.1C98.4731 97.8467 98.3998 97.6533 98.2531 97.52C98.1065 97.38 97.8965 97.31 97.6231 97.31C97.3765 97.31 97.1498 97.3633 96.9431 97.47C96.7365 97.5767 96.5198 97.73 96.2931 97.93L95.3931 96.84C95.7398 96.5467 96.0998 96.32 96.4731 96.16C96.8531 96 97.2631 95.92 97.7031 95.92C98.2165 95.92 98.6631 96 99.0431 96.16C99.4298 96.3133 99.7265 96.5433 99.9331 96.85C100.146 97.15 100.253 97.5233 100.253 97.97C100.253 98.3367 100.153 98.6633 99.9531 98.95C99.7531 99.23 99.4565 99.45 99.0631 99.61V99.66C99.3365 99.74 99.5798 99.8633 99.7931 100.03C100.013 100.19 100.183 100.39 100.303 100.63C100.43 100.87 100.493 101.15 100.493 101.47C100.493 101.93 100.366 102.323 100.113 102.65C99.8598 102.97 99.5231 103.217 99.1031 103.39C98.6898 103.557 98.2365 103.64 97.7431 103.64Z" fill="#101010"/>
+<path d="M35 77H81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="50.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="50.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M55.3731 80.5V79.48C55.9931 78.9133 56.5365 78.3867 57.0031 77.9C57.4698 77.4133 57.8331 76.96 58.0931 76.54C58.3531 76.1133 58.4831 75.72 58.4831 75.36C58.4831 75.1333 58.4431 74.9433 58.3631 74.79C58.2898 74.63 58.1798 74.51 58.0331 74.43C57.8865 74.35 57.7131 74.31 57.5131 74.31C57.2598 74.31 57.0298 74.3833 56.8231 74.53C56.6231 74.67 56.4331 74.8367 56.2531 75.03L55.2831 74.07C55.6498 73.6767 56.0198 73.3867 56.3931 73.2C56.7731 73.0133 57.2265 72.92 57.7531 72.92C58.2331 72.92 58.6565 73.0167 59.0231 73.21C59.3898 73.4033 59.6765 73.6767 59.8831 74.03C60.0898 74.3767 60.1931 74.7867 60.1931 75.26C60.1931 75.6867 60.0831 76.1233 59.8631 76.57C59.6498 77.01 59.3731 77.4467 59.0331 77.88C58.6931 78.3067 58.3331 78.7133 57.9531 79.1C58.1398 79.0733 58.3465 79.05 58.5731 79.03C58.8065 79.01 59.0065 79 59.1731 79H60.5331V80.5H55.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab08.svg b/public/static/images/canvas/shape/normal/plane_tab08.svg
new file mode 100644
index 00000000..22a72ab6
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" width="46" height="2" fill="#1083E3"/>
+<rect x="2" y="25" width="64" height="2" fill="#1083E3"/>
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect y="25" width="2" height="62" fill="#EA10AC"/>
+<rect x="108" y="2" width="2" height="85" fill="#EA10AC"/>
+<rect x="64" width="2" height="27" fill="#EA10AC"/>
+<path d="M31 28V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="49.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="23.5" y="49.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M30.8031 60.5V56.2C30.8031 55.9667 30.8098 55.6933 30.8231 55.38C30.8431 55.06 30.8565 54.78 30.8631 54.54H30.8231C30.7298 54.7533 30.6331 54.9667 30.5331 55.18C30.4331 55.3933 30.3298 55.6067 30.2231 55.82L29.3731 57.29H33.2831V58.64H27.6731V57.41L30.2631 53.05H32.4631V60.5H30.8031Z" fill="#101010"/>
+<path d="M87 3V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="79.5" y="37.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="79.5" y="37.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M86.2431 48.64C85.8498 48.64 85.4931 48.5967 85.1731 48.51C84.8598 48.4233 84.5798 48.3033 84.3331 48.15C84.0865 47.99 83.8731 47.8067 83.6931 47.6L84.5131 46.48C84.7398 46.6867 84.9831 46.86 85.2431 47C85.5031 47.1333 85.7765 47.2 86.0631 47.2C86.2965 47.2 86.4965 47.17 86.6631 47.11C86.8365 47.0433 86.9698 46.9467 87.0631 46.82C87.1565 46.6933 87.2031 46.5367 87.2031 46.35C87.2031 46.1367 87.1531 45.9533 87.0531 45.8C86.9531 45.6467 86.7665 45.53 86.4931 45.45C86.2198 45.37 85.8231 45.33 85.3031 45.33V44.07C85.7298 44.07 86.0631 44.03 86.3031 43.95C86.5431 43.87 86.7131 43.7567 86.8131 43.61C86.9198 43.4633 86.9731 43.2933 86.9731 43.1C86.9731 42.8467 86.8998 42.6533 86.7531 42.52C86.6065 42.38 86.3965 42.31 86.1231 42.31C85.8765 42.31 85.6498 42.3633 85.4431 42.47C85.2365 42.5767 85.0198 42.73 84.7931 42.93L83.8931 41.84C84.2398 41.5467 84.5998 41.32 84.9731 41.16C85.3531 41 85.7631 40.92 86.2031 40.92C86.7165 40.92 87.1631 41 87.5431 41.16C87.9298 41.3133 88.2265 41.5433 88.4331 41.85C88.6465 42.15 88.7531 42.5233 88.7531 42.97C88.7531 43.3367 88.6531 43.6633 88.4531 43.95C88.2531 44.23 87.9565 44.45 87.5631 44.61V44.66C87.8365 44.74 88.0798 44.8633 88.2931 45.03C88.5131 45.19 88.6831 45.39 88.8031 45.63C88.9298 45.87 88.9931 46.15 88.9931 46.47C88.9931 46.93 88.8665 47.3233 88.6131 47.65C88.3598 47.97 88.0231 48.2167 87.6031 48.39C87.1898 48.5567 86.7365 48.64 86.2431 48.64Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M0 14L63 14" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="24.5" y="6.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="24.5" y="6.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M29.3731 17.5V16.48C29.9931 15.9133 30.5365 15.3867 31.0031 14.9C31.4698 14.4133 31.8331 13.96 32.0931 13.54C32.3531 13.1133 32.4831 12.72 32.4831 12.36C32.4831 12.1333 32.4431 11.9433 32.3631 11.79C32.2898 11.63 32.1798 11.51 32.0331 11.43C31.8865 11.35 31.7131 11.31 31.5131 11.31C31.2598 11.31 31.0298 11.3833 30.8231 11.53C30.6231 11.67 30.4331 11.8367 30.2531 12.03L29.2831 11.07C29.6498 10.6767 30.0198 10.3867 30.3931 10.2C30.7731 10.0133 31.2265 9.92 31.7531 9.92C32.2331 9.92 32.6565 10.0167 33.0231 10.21C33.3898 10.4033 33.6765 10.6767 33.8831 11.03C34.0898 11.3767 34.1931 11.7867 34.1931 12.26C34.1931 12.6867 34.0831 13.1233 33.8631 13.57C33.6498 14.01 33.3731 14.4467 33.0331 14.88C32.6931 15.3067 32.3331 15.7133 31.9531 16.1C32.1398 16.0733 32.3465 16.05 32.5731 16.03C32.8065 16.01 33.0065 16 33.1731 16H34.5331V17.5H29.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab09.svg b/public/static/images/canvas/shape/normal/plane_tab09.svg
new file mode 100644
index 00000000..756c3bfa
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="19" width="46" height="2" fill="#1083E3"/>
+<path d="M12 40H66V42H11.5L12 40Z" fill="#1083E3"/>
+<rect y="87" width="110" height="2" fill="#101010"/>
+<path d="M10 40H12L2 87H0L10 40Z" fill="#45CD7D"/>
+<rect x="108" y="19" width="2" height="68" fill="#EA10AC"/>
+<rect x="64" y="19" width="2" height="23" fill="#EA10AC"/>
+<path d="M31 43V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="57.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="23.5" y="57.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M30.3031 68.64C29.9098 68.64 29.5531 68.5933 29.2331 68.5C28.9131 68.4133 28.6265 68.2933 28.3731 68.14C28.1265 67.98 27.9031 67.8033 27.7031 67.61L28.5131 66.49C28.6531 66.6233 28.8031 66.7433 28.9631 66.85C29.1231 66.9567 29.2931 67.0433 29.4731 67.11C29.6598 67.17 29.8498 67.2 30.0431 67.2C30.2831 67.2 30.4898 67.1567 30.6631 67.07C30.8365 66.9833 30.9698 66.8533 31.0631 66.68C31.1631 66.5067 31.2131 66.2933 31.2131 66.04C31.2131 65.6667 31.1098 65.3833 30.9031 65.19C30.7031 64.99 30.4431 64.89 30.1231 64.89C29.9165 64.89 29.7431 64.9167 29.6031 64.97C29.4698 65.0167 29.2931 65.11 29.0731 65.25L28.2931 64.74L28.4831 61.05H32.6631V62.54H30.0131L29.9031 63.8C30.0365 63.7467 30.1631 63.71 30.2831 63.69C30.4031 63.6633 30.5331 63.65 30.6731 63.65C31.0931 63.65 31.4798 63.7333 31.8331 63.9C32.1865 64.0667 32.4665 64.3233 32.6731 64.67C32.8865 65.0167 32.9931 65.46 32.9931 66C32.9931 66.5533 32.8665 67.03 32.6131 67.43C32.3665 67.8233 32.0398 68.1233 31.6331 68.33C31.2265 68.5367 30.7831 68.64 30.3031 68.64Z" fill="#101010"/>
+<path d="M87 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="79.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="79.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M86.8031 58.5V54.2C86.8031 53.9667 86.8098 53.6933 86.8231 53.38C86.8431 53.06 86.8565 52.78 86.8631 52.54H86.8231C86.7298 52.7533 86.6331 52.9667 86.5331 53.18C86.4331 53.3933 86.3298 53.6067 86.2231 53.82L85.3731 55.29H89.2831V56.64H83.6731V55.41L86.2631 51.05H88.4631V58.5H86.8031Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M11 29L61 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="28.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="28.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M33.3731 32.5V31.48C33.9931 30.9133 34.5365 30.3867 35.0031 29.9C35.4698 29.4133 35.8331 28.96 36.0931 28.54C36.3531 28.1133 36.4831 27.72 36.4831 27.36C36.4831 27.1333 36.4431 26.9433 36.3631 26.79C36.2898 26.63 36.1798 26.51 36.0331 26.43C35.8865 26.35 35.7131 26.31 35.5131 26.31C35.2598 26.31 35.0298 26.3833 34.8231 26.53C34.6231 26.67 34.4331 26.8367 34.2531 27.03L33.2831 26.07C33.6498 25.6767 34.0198 25.3867 34.3931 25.2C34.7731 25.0133 35.2265 24.92 35.7531 24.92C36.2331 24.92 36.6565 25.0167 37.0231 25.21C37.3898 25.4033 37.6765 25.6767 37.8831 26.03C38.0898 26.3767 38.1931 26.7867 38.1931 27.26C38.1931 27.6867 38.0831 28.1233 37.8631 28.57C37.6498 29.01 37.3731 29.4467 37.0331 29.88C36.6931 30.3067 36.3331 30.7133 35.9531 31.1C36.1398 31.0733 36.3465 31.05 36.5731 31.03C36.8065 31.01 37.0065 31 37.1731 31H38.5331V32.5H33.3731Z" fill="#101010"/>
+<path d="M64 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="79.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="79.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M86.7431 11.64C86.3498 11.64 85.9931 11.5967 85.6731 11.51C85.3598 11.4233 85.0798 11.3033 84.8331 11.15C84.5865 10.99 84.3731 10.8067 84.1931 10.6L85.0131 9.48C85.2398 9.68667 85.4831 9.86 85.7431 10C86.0031 10.1333 86.2765 10.2 86.5631 10.2C86.7965 10.2 86.9965 10.17 87.1631 10.11C87.3365 10.0433 87.4698 9.94667 87.5631 9.82C87.6565 9.69333 87.7031 9.53667 87.7031 9.35C87.7031 9.13667 87.6531 8.95333 87.5531 8.8C87.4531 8.64667 87.2665 8.53 86.9931 8.45C86.7198 8.37 86.3231 8.33 85.8031 8.33V7.07C86.2298 7.07 86.5631 7.03 86.8031 6.95C87.0431 6.87 87.2131 6.75667 87.3131 6.61C87.4198 6.46333 87.4731 6.29333 87.4731 6.1C87.4731 5.84667 87.3998 5.65333 87.2531 5.52C87.1065 5.38 86.8965 5.31 86.6231 5.31C86.3765 5.31 86.1498 5.36333 85.9431 5.47C85.7365 5.57667 85.5198 5.73 85.2931 5.93L84.3931 4.84C84.7398 4.54667 85.0998 4.32 85.4731 4.16C85.8531 4 86.2631 3.92 86.7031 3.92C87.2165 3.92 87.6631 4 88.0431 4.16C88.4298 4.31333 88.7265 4.54333 88.9331 4.85C89.1465 5.15 89.2531 5.52333 89.2531 5.97C89.2531 6.33667 89.1531 6.66333 88.9531 6.95C88.7531 7.23 88.4565 7.45 88.0631 7.61V7.66C88.3365 7.74 88.5798 7.86333 88.7931 8.03C89.0131 8.19 89.1831 8.39 89.3031 8.63C89.4298 8.87 89.4931 9.15 89.4931 9.47C89.4931 9.93 89.3665 10.3233 89.1131 10.65C88.8598 10.97 88.5231 11.2167 88.1031 11.39C87.6898 11.5567 87.2365 11.64 86.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab10.svg b/public/static/images/canvas/shape/normal/plane_tab10.svg
new file mode 100644
index 00000000..fe4073ea
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="54" y="19" width="46" height="2" fill="#1083E3"/>
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect y="42" width="56" height="2" fill="#1083E3"/>
+<path d="M98 19H100L110 87H108L98 19Z" fill="#45CD7D"/>
+<rect x="54" y="19" width="2" height="23" fill="#EA10AC"/>
+<rect y="44" width="2" height="43" fill="#EA10AC"/>
+<path d="M27 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="19.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="19.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M26.3031 69.64C25.9098 69.64 25.5531 69.5933 25.2331 69.5C24.9131 69.4133 24.6265 69.2933 24.3731 69.14C24.1265 68.98 23.9031 68.8033 23.7031 68.61L24.5131 67.49C24.6531 67.6233 24.8031 67.7433 24.9631 67.85C25.1231 67.9567 25.2931 68.0433 25.4731 68.11C25.6598 68.17 25.8498 68.2 26.0431 68.2C26.2831 68.2 26.4898 68.1567 26.6631 68.07C26.8365 67.9833 26.9698 67.8533 27.0631 67.68C27.1631 67.5067 27.2131 67.2933 27.2131 67.04C27.2131 66.6667 27.1098 66.3833 26.9031 66.19C26.7031 65.99 26.4431 65.89 26.1231 65.89C25.9165 65.89 25.7431 65.9167 25.6031 65.97C25.4698 66.0167 25.2931 66.11 25.0731 66.25L24.2931 65.74L24.4831 62.05H28.6631V63.54H26.0131L25.9031 64.8C26.0365 64.7467 26.1631 64.71 26.2831 64.69C26.4031 64.6633 26.5331 64.65 26.6731 64.65C27.0931 64.65 27.4798 64.7333 27.8331 64.9C28.1865 65.0667 28.4665 65.3233 28.6731 65.67C28.8865 66.0167 28.9931 66.46 28.9931 67C28.9931 67.5533 28.8665 68.03 28.6131 68.43C28.3665 68.8233 28.0398 69.1233 27.6331 69.33C27.2265 69.5367 26.7831 69.64 26.3031 69.64Z" fill="#101010"/>
+<path d="M77 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="69.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M76.8031 58.5V54.2C76.8031 53.9667 76.8098 53.6933 76.8231 53.38C76.8431 53.06 76.8565 52.78 76.8631 52.54H76.8231C76.7298 52.7533 76.6331 52.9667 76.5331 53.18C76.4331 53.3933 76.3298 53.6067 76.2231 53.82L75.3731 55.29H79.2831V56.64H73.6731V55.41L76.2631 51.05H78.4631V58.5H76.8031Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M2 29L52 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="19.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="19.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M24.3731 32.5V31.48C24.9931 30.9133 25.5365 30.3867 26.0031 29.9C26.4698 29.4133 26.8331 28.96 27.0931 28.54C27.3531 28.1133 27.4831 27.72 27.4831 27.36C27.4831 27.1333 27.4431 26.9433 27.3631 26.79C27.2898 26.63 27.1798 26.51 27.0331 26.43C26.8865 26.35 26.7131 26.31 26.5131 26.31C26.2598 26.31 26.0298 26.3833 25.8231 26.53C25.6231 26.67 25.4331 26.8367 25.2531 27.03L24.2831 26.07C24.6498 25.6767 25.0198 25.3867 25.3931 25.2C25.7731 25.0133 26.2265 24.92 26.7531 24.92C27.2331 24.92 27.6565 25.0167 28.0231 25.21C28.3898 25.4033 28.6765 25.6767 28.8831 26.03C29.0898 26.3767 29.1931 26.7867 29.1931 27.26C29.1931 27.6867 29.0831 28.1233 28.8631 28.57C28.6498 29.01 28.3731 29.4467 28.0331 29.88C27.6931 30.3067 27.3331 30.7133 26.9531 31.1C27.1398 31.0733 27.3465 31.05 27.5731 31.03C27.8065 31.01 28.0065 31 28.1731 31H29.5331V32.5H24.3731Z" fill="#101010"/>
+<path d="M54 8L100 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.7431 11.64C76.3498 11.64 75.9931 11.5967 75.6731 11.51C75.3598 11.4233 75.0798 11.3033 74.8331 11.15C74.5865 10.99 74.3731 10.8067 74.1931 10.6L75.0131 9.48C75.2398 9.68667 75.4831 9.86 75.7431 10C76.0031 10.1333 76.2765 10.2 76.5631 10.2C76.7965 10.2 76.9965 10.17 77.1631 10.11C77.3365 10.0433 77.4698 9.94667 77.5631 9.82C77.6565 9.69333 77.7031 9.53667 77.7031 9.35C77.7031 9.13667 77.6531 8.95333 77.5531 8.8C77.4531 8.64667 77.2665 8.53 76.9931 8.45C76.7198 8.37 76.3231 8.33 75.8031 8.33V7.07C76.2298 7.07 76.5631 7.03 76.8031 6.95C77.0431 6.87 77.2131 6.75667 77.3131 6.61C77.4198 6.46333 77.4731 6.29333 77.4731 6.1C77.4731 5.84667 77.3998 5.65333 77.2531 5.52C77.1065 5.38 76.8965 5.31 76.6231 5.31C76.3765 5.31 76.1498 5.36333 75.9431 5.47C75.7365 5.57667 75.5198 5.73 75.2931 5.93L74.3931 4.84C74.7398 4.54667 75.0998 4.32 75.4731 4.16C75.8531 4 76.2631 3.92 76.7031 3.92C77.2165 3.92 77.6631 4 78.0431 4.16C78.4298 4.31333 78.7265 4.54333 78.9331 4.85C79.1465 5.15 79.2531 5.52333 79.2531 5.97C79.2531 6.33667 79.1531 6.66333 78.9531 6.95C78.7531 7.23 78.4565 7.45 78.0631 7.61V7.66C78.3365 7.74 78.5798 7.86333 78.7931 8.03C79.0131 8.19 79.1831 8.39 79.3031 8.63C79.4298 8.87 79.4931 9.15 79.4931 9.47C79.4931 9.93 79.3665 10.3233 79.1131 10.65C78.8598 10.97 78.5231 11.2167 78.1031 11.39C77.6898 11.5567 77.2365 11.64 76.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab11.svg b/public/static/images/canvas/shape/normal/plane_tab11.svg
new file mode 100644
index 00000000..0ac2cf59
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="19" width="53" height="2" fill="#1083E3"/>
+<rect x="10" y="87" width="100" height="2" fill="#101010"/>
+<rect x="54" y="42" width="56" height="2" fill="#1083E3"/>
+<path d="M0 19H2L12 87H10L0 19Z" fill="#45CD7D"/>
+<rect x="54" y="19" width="2" height="23" fill="#EA10AC"/>
+<rect x="108" y="44" width="2" height="43" fill="#EA10AC"/>
+<path d="M83 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="75.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="75.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M82.3031 69.64C81.9098 69.64 81.5531 69.5933 81.2331 69.5C80.9131 69.4133 80.6265 69.2933 80.3731 69.14C80.1265 68.98 79.9031 68.8033 79.7031 68.61L80.5131 67.49C80.6531 67.6233 80.8031 67.7433 80.9631 67.85C81.1231 67.9567 81.2931 68.0433 81.4731 68.11C81.6598 68.17 81.8498 68.2 82.0431 68.2C82.2831 68.2 82.4898 68.1567 82.6631 68.07C82.8365 67.9833 82.9698 67.8533 83.0631 67.68C83.1631 67.5067 83.2131 67.2933 83.2131 67.04C83.2131 66.6667 83.1098 66.3833 82.9031 66.19C82.7031 65.99 82.4431 65.89 82.1231 65.89C81.9165 65.89 81.7431 65.9167 81.6031 65.97C81.4698 66.0167 81.2931 66.11 81.0731 66.25L80.2931 65.74L80.4831 62.05H84.6631V63.54H82.0131L81.9031 64.8C82.0365 64.7467 82.1631 64.71 82.2831 64.69C82.4031 64.6633 82.5331 64.65 82.6731 64.65C83.0931 64.65 83.4798 64.7333 83.8331 64.9C84.1865 65.0667 84.4665 65.3233 84.6731 65.67C84.8865 66.0167 84.9931 66.46 84.9931 67C84.9931 67.5533 84.8665 68.03 84.6131 68.43C84.3665 68.8233 84.0398 69.1233 83.6331 69.33C83.2265 69.5367 82.7831 69.64 82.3031 69.64Z" fill="#101010"/>
+<path d="M29 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.8031 58.5V54.2C28.8031 53.9667 28.8098 53.6933 28.8231 53.38C28.8431 53.06 28.8565 52.78 28.8631 52.54H28.8231C28.7298 52.7533 28.6331 52.9667 28.5331 53.18C28.4331 53.3933 28.3298 53.6067 28.2231 53.82L27.3731 55.29H31.2831V56.64H25.6731V55.41L28.2631 51.05H30.4631V58.5H28.8031Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M58 29L108 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="75.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="75.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.3731 32.5V31.48C80.9931 30.9133 81.5365 30.3867 82.0031 29.9C82.4698 29.4133 82.8331 28.96 83.0931 28.54C83.3531 28.1133 83.4831 27.72 83.4831 27.36C83.4831 27.1333 83.4431 26.9433 83.3631 26.79C83.2898 26.63 83.1798 26.51 83.0331 26.43C82.8865 26.35 82.7131 26.31 82.5131 26.31C82.2598 26.31 82.0298 26.3833 81.8231 26.53C81.6231 26.67 81.4331 26.8367 81.2531 27.03L80.2831 26.07C80.6498 25.6767 81.0198 25.3867 81.3931 25.2C81.7731 25.0133 82.2265 24.92 82.7531 24.92C83.2331 24.92 83.6565 25.0167 84.0231 25.21C84.3898 25.4033 84.6765 25.6767 84.8831 26.03C85.0898 26.3767 85.1931 26.7867 85.1931 27.26C85.1931 27.6867 85.0831 28.1233 84.8631 28.57C84.6498 29.01 84.3731 29.4467 84.0331 29.88C83.6931 30.3067 83.3331 30.7133 82.9531 31.1C83.1398 31.0733 83.3465 31.05 83.5731 31.03C83.8065 31.01 84.0065 31 84.1731 31H85.5331V32.5H80.3731Z" fill="#101010"/>
+<path d="M2 8L56 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.7431 11.64C28.3498 11.64 27.9931 11.5967 27.6731 11.51C27.3598 11.4233 27.0798 11.3033 26.8331 11.15C26.5865 10.99 26.3731 10.8067 26.1931 10.6L27.0131 9.48C27.2398 9.68667 27.4831 9.86 27.7431 10C28.0031 10.1333 28.2765 10.2 28.5631 10.2C28.7965 10.2 28.9965 10.17 29.1631 10.11C29.3365 10.0433 29.4698 9.94667 29.5631 9.82C29.6565 9.69333 29.7031 9.53667 29.7031 9.35C29.7031 9.13667 29.6531 8.95333 29.5531 8.8C29.4531 8.64667 29.2665 8.53 28.9931 8.45C28.7198 8.37 28.3231 8.33 27.8031 8.33V7.07C28.2298 7.07 28.5631 7.03 28.8031 6.95C29.0431 6.87 29.2131 6.75667 29.3131 6.61C29.4198 6.46333 29.4731 6.29333 29.4731 6.1C29.4731 5.84667 29.3998 5.65333 29.2531 5.52C29.1065 5.38 28.8965 5.31 28.6231 5.31C28.3765 5.31 28.1498 5.36333 27.9431 5.47C27.7365 5.57667 27.5198 5.73 27.2931 5.93L26.3931 4.84C26.7398 4.54667 27.0998 4.32 27.4731 4.16C27.8531 4 28.2631 3.92 28.7031 3.92C29.2165 3.92 29.6631 4 30.0431 4.16C30.4298 4.31333 30.7265 4.54333 30.9331 4.85C31.1465 5.15 31.2531 5.52333 31.2531 5.97C31.2531 6.33667 31.1531 6.66333 30.9531 6.95C30.7531 7.23 30.4565 7.45 30.0631 7.61V7.66C30.3365 7.74 30.5798 7.86333 30.7931 8.03C31.0131 8.19 31.1831 8.39 31.3031 8.63C31.4298 8.87 31.4931 9.15 31.4931 9.47C31.4931 9.93 31.3665 10.3233 31.1131 10.65C30.8598 10.97 30.5231 11.2167 30.1031 11.39C29.6898 11.5567 29.2365 11.64 28.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab12.svg b/public/static/images/canvas/shape/normal/plane_tab12.svg
new file mode 100644
index 00000000..a68e7a39
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="54" y="42" width="46" height="2" fill="#1083E3"/>
+<path d="M98 42H100L110 87H108L98 42Z" fill="#45CD7D"/>
+<path d="M29 0H27L0 87H2L29 0Z" fill="#45CD7D"/>
+<path d="M27 0H29L56 44H54L27 0Z" fill="#45CD7D"/>
+<path d="M76 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="68.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="68.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M75.8031 69.5V65.2C75.8031 64.9667 75.8098 64.6933 75.8231 64.38C75.8431 64.06 75.8565 63.78 75.8631 63.54H75.8231C75.7298 63.7533 75.6331 63.9667 75.5331 64.18C75.4331 64.3933 75.3298 64.6067 75.2231 64.82L74.3731 66.29H78.2831V67.64H72.6731V66.41L75.2631 62.05H77.4631V69.5H75.8031Z" fill="#101010"/>
+<path d="M29 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="39.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="39.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.2431 50.64C27.8498 50.64 27.4931 50.5967 27.1731 50.51C26.8598 50.4233 26.5798 50.3033 26.3331 50.15C26.0865 49.99 25.8731 49.8067 25.6931 49.6L26.5131 48.48C26.7398 48.6867 26.9831 48.86 27.2431 49C27.5031 49.1333 27.7765 49.2 28.0631 49.2C28.2965 49.2 28.4965 49.17 28.6631 49.11C28.8365 49.0433 28.9698 48.9467 29.0631 48.82C29.1565 48.6933 29.2031 48.5367 29.2031 48.35C29.2031 48.1367 29.1531 47.9533 29.0531 47.8C28.9531 47.6467 28.7665 47.53 28.4931 47.45C28.2198 47.37 27.8231 47.33 27.3031 47.33V46.07C27.7298 46.07 28.0631 46.03 28.3031 45.95C28.5431 45.87 28.7131 45.7567 28.8131 45.61C28.9198 45.4633 28.9731 45.2933 28.9731 45.1C28.9731 44.8467 28.8998 44.6533 28.7531 44.52C28.6065 44.38 28.3965 44.31 28.1231 44.31C27.8765 44.31 27.6498 44.3633 27.4431 44.47C27.2365 44.5767 27.0198 44.73 26.7931 44.93L25.8931 43.84C26.2398 43.5467 26.5998 43.32 26.9731 43.16C27.3531 43 27.7631 42.92 28.2031 42.92C28.7165 42.92 29.1631 43 29.5431 43.16C29.9298 43.3133 30.2265 43.5433 30.4331 43.85C30.6465 44.15 30.7531 44.5233 30.7531 44.97C30.7531 45.3367 30.6531 45.6633 30.4531 45.95C30.2531 46.23 29.9565 46.45 29.5631 46.61V46.66C29.8365 46.74 30.0798 46.8633 30.2931 47.03C30.5131 47.19 30.6831 47.39 30.8031 47.63C30.9298 47.87 30.9931 48.15 30.9931 48.47C30.9931 48.93 30.8665 49.3233 30.6131 49.65C30.3598 49.97 30.0231 50.2167 29.6031 50.39C29.1898 50.5567 28.7365 50.64 28.2431 50.64Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M50 31L100 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="67.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="67.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M72.3731 34.5V33.48C72.9931 32.9133 73.5365 32.3867 74.0031 31.9C74.4698 31.4133 74.8331 30.96 75.0931 30.54C75.3531 30.1133 75.4831 29.72 75.4831 29.36C75.4831 29.1333 75.4431 28.9433 75.3631 28.79C75.2898 28.63 75.1798 28.51 75.0331 28.43C74.8865 28.35 74.7131 28.31 74.5131 28.31C74.2598 28.31 74.0298 28.3833 73.8231 28.53C73.6231 28.67 73.4331 28.8367 73.2531 29.03L72.2831 28.07C72.6498 27.6767 73.0198 27.3867 73.3931 27.2C73.7731 27.0133 74.2265 26.92 74.7531 26.92C75.2331 26.92 75.6565 27.0167 76.0231 27.21C76.3898 27.4033 76.6765 27.6767 76.8831 28.03C77.0898 28.3767 77.1931 28.7867 77.1931 29.26C77.1931 29.6867 77.0831 30.1233 76.8631 30.57C76.6498 31.01 76.3731 31.4467 76.0331 31.88C75.6931 32.3067 75.3331 32.7133 74.9531 33.1C75.1398 33.0733 75.3465 33.05 75.5731 33.03C75.8065 33.01 76.0065 33 76.1731 33H77.5331V34.5H72.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab13.svg b/public/static/images/canvas/shape/normal/plane_tab13.svg
new file mode 100644
index 00000000..027e91e8
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="54" y="42" width="56" height="2" fill="#1083E3"/>
+<path d="M29 0H27L0 87H2L29 0Z" fill="#45CD7D"/>
+<path d="M27 0H29L56 44H54L27 0Z" fill="#45CD7D"/>
+<rect x="108" y="44" width="2" height="43" fill="#EA10AC"/>
+<path d="M76 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="68.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="68.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M75.8031 69.5V65.2C75.8031 64.9667 75.8098 64.6933 75.8231 64.38C75.8431 64.06 75.8565 63.78 75.8631 63.54H75.8231C75.7298 63.7533 75.6331 63.9667 75.5331 64.18C75.4331 64.3933 75.3298 64.6067 75.2231 64.82L74.3731 66.29H78.2831V67.64H72.6731V66.41L75.2631 62.05H77.4631V69.5H75.8031Z" fill="#101010"/>
+<path d="M29 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="21.5" y="39.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="39.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.2431 50.64C27.8498 50.64 27.4931 50.5967 27.1731 50.51C26.8598 50.4233 26.5798 50.3033 26.3331 50.15C26.0865 49.99 25.8731 49.8067 25.6931 49.6L26.5131 48.48C26.7398 48.6867 26.9831 48.86 27.2431 49C27.5031 49.1333 27.7765 49.2 28.0631 49.2C28.2965 49.2 28.4965 49.17 28.6631 49.11C28.8365 49.0433 28.9698 48.9467 29.0631 48.82C29.1565 48.6933 29.2031 48.5367 29.2031 48.35C29.2031 48.1367 29.1531 47.9533 29.0531 47.8C28.9531 47.6467 28.7665 47.53 28.4931 47.45C28.2198 47.37 27.8231 47.33 27.3031 47.33V46.07C27.7298 46.07 28.0631 46.03 28.3031 45.95C28.5431 45.87 28.7131 45.7567 28.8131 45.61C28.9198 45.4633 28.9731 45.2933 28.9731 45.1C28.9731 44.8467 28.8998 44.6533 28.7531 44.52C28.6065 44.38 28.3965 44.31 28.1231 44.31C27.8765 44.31 27.6498 44.3633 27.4431 44.47C27.2365 44.5767 27.0198 44.73 26.7931 44.93L25.8931 43.84C26.2398 43.5467 26.5998 43.32 26.9731 43.16C27.3531 43 27.7631 42.92 28.2031 42.92C28.7165 42.92 29.1631 43 29.5431 43.16C29.9298 43.3133 30.2265 43.5433 30.4331 43.85C30.6465 44.15 30.7531 44.5233 30.7531 44.97C30.7531 45.3367 30.6531 45.6633 30.4531 45.95C30.2531 46.23 29.9565 46.45 29.5631 46.61V46.66C29.8365 46.74 30.0798 46.8633 30.2931 47.03C30.5131 47.19 30.6831 47.39 30.8031 47.63C30.9298 47.87 30.9931 48.15 30.9931 48.47C30.9931 48.93 30.8665 49.3233 30.6131 49.65C30.3598 49.97 30.0231 50.2167 29.6031 50.39C29.1898 50.5567 28.7365 50.64 28.2431 50.64Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M50 31L100 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="67.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="67.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M72.3731 34.5V33.48C72.9931 32.9133 73.5365 32.3867 74.0031 31.9C74.4698 31.4133 74.8331 30.96 75.0931 30.54C75.3531 30.1133 75.4831 29.72 75.4831 29.36C75.4831 29.1333 75.4431 28.9433 75.3631 28.79C75.2898 28.63 75.1798 28.51 75.0331 28.43C74.8865 28.35 74.7131 28.31 74.5131 28.31C74.2598 28.31 74.0298 28.3833 73.8231 28.53C73.6231 28.67 73.4331 28.8367 73.2531 29.03L72.2831 28.07C72.6498 27.6767 73.0198 27.3867 73.3931 27.2C73.7731 27.0133 74.2265 26.92 74.7531 26.92C75.2331 26.92 75.6565 27.0167 76.0231 27.21C76.3898 27.4033 76.6765 27.6767 76.8831 28.03C77.0898 28.3767 77.1931 28.7867 77.1931 29.26C77.1931 29.6867 77.0831 30.1233 76.8631 30.57C76.6498 31.01 76.3731 31.4467 76.0331 31.88C75.6931 32.3067 75.3331 32.7133 74.9531 33.1C75.1398 33.0733 75.3465 33.05 75.5731 33.03C75.8065 33.01 76.0065 33 76.1731 33H77.5331V34.5H72.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab14.svg b/public/static/images/canvas/shape/normal/plane_tab14.svg
new file mode 100644
index 00000000..7a3cef86
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="42" height="2" fill="#101010"/>
+<rect x="68" y="87" width="42" height="2" fill="#101010"/>
+<rect y="19" width="110" height="2" fill="#1083E3"/>
+<path d="M56 63H54L40 87H42L56 63Z" fill="#45CD7D"/>
+<path d="M54 63H56L70 87H68L54 63Z" fill="#45CD7D"/>
+<rect x="108" y="21" width="2" height="66" fill="#EA10AC"/>
+<rect y="21" width="2" height="66" fill="#EA10AC"/>
+<path d="M55 22V62" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.3031 46.64C53.9098 46.64 53.5531 46.5933 53.2331 46.5C52.9131 46.4133 52.6265 46.2933 52.3731 46.14C52.1265 45.98 51.9031 45.8033 51.7031 45.61L52.5131 44.49C52.6531 44.6233 52.8031 44.7433 52.9631 44.85C53.1231 44.9567 53.2931 45.0433 53.4731 45.11C53.6598 45.17 53.8498 45.2 54.0431 45.2C54.2831 45.2 54.4898 45.1567 54.6631 45.07C54.8365 44.9833 54.9698 44.8533 55.0631 44.68C55.1631 44.5067 55.2131 44.2933 55.2131 44.04C55.2131 43.6667 55.1098 43.3833 54.9031 43.19C54.7031 42.99 54.4431 42.89 54.1231 42.89C53.9165 42.89 53.7431 42.9167 53.6031 42.97C53.4698 43.0167 53.2931 43.11 53.0731 43.25L52.2931 42.74L52.4831 39.05H56.6631V40.54H54.0131L53.9031 41.8C54.0365 41.7467 54.1631 41.71 54.2831 41.69C54.4031 41.6633 54.5331 41.65 54.6731 41.65C55.0931 41.65 55.4798 41.7333 55.8331 41.9C56.1865 42.0667 56.4665 42.3233 56.6731 42.67C56.8865 43.0167 56.9931 43.46 56.9931 44C56.9931 44.5533 56.8665 45.03 56.6131 45.43C56.3665 45.8233 56.0398 46.1233 55.6331 46.33C55.2265 46.5367 54.7831 46.64 54.3031 46.64Z" fill="#101010"/>
+<path d="M21 23V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="13.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="13.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M20.8031 58.5V54.2C20.8031 53.9667 20.8098 53.6933 20.8231 53.38C20.8431 53.06 20.8565 52.78 20.8631 52.54H20.8231C20.7298 52.7533 20.6331 52.9667 20.5331 53.18C20.4331 53.3933 20.3298 53.6067 20.2231 53.82L19.3731 55.29H23.2831V56.64H17.6731V55.41L20.2631 51.05H22.4631V58.5H20.8031Z" fill="#101010"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<path d="M0 100H40" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="12.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="12.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M17.3731 103.5V102.48C17.9931 101.913 18.5365 101.387 19.0031 100.9C19.4698 100.413 19.8331 99.96 20.0931 99.54C20.3531 99.1133 20.4831 98.72 20.4831 98.36C20.4831 98.1333 20.4431 97.9433 20.3631 97.79C20.2898 97.63 20.1798 97.51 20.0331 97.43C19.8865 97.35 19.7131 97.31 19.5131 97.31C19.2598 97.31 19.0298 97.3833 18.8231 97.53C18.6231 97.67 18.4331 97.8367 18.2531 98.03L17.2831 97.07C17.6498 96.6767 18.0198 96.3867 18.3931 96.2C18.7731 96.0133 19.2265 95.92 19.7531 95.92C20.2331 95.92 20.6565 96.0167 21.0231 96.21C21.3898 96.4033 21.6765 96.6767 21.8831 97.03C22.0898 97.3767 22.1931 97.7867 22.1931 98.26C22.1931 98.6867 22.0831 99.1233 21.8631 99.57C21.6498 100.01 21.3731 100.447 21.0331 100.88C20.6931 101.307 20.3331 101.713 19.9531 102.1C20.1398 102.073 20.3465 102.05 20.5731 102.03C20.8065 102.01 21.0065 102 21.1731 102H22.5331V103.5H17.3731Z" fill="#101010"/>
+<path d="M70 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="82.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="82.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M89.7431 103.64C89.3498 103.64 88.9931 103.597 88.6731 103.51C88.3598 103.423 88.0798 103.303 87.8331 103.15C87.5865 102.99 87.3731 102.807 87.1931 102.6L88.0131 101.48C88.2398 101.687 88.4831 101.86 88.7431 102C89.0031 102.133 89.2765 102.2 89.5631 102.2C89.7965 102.2 89.9965 102.17 90.1631 102.11C90.3365 102.043 90.4698 101.947 90.5631 101.82C90.6565 101.693 90.7031 101.537 90.7031 101.35C90.7031 101.137 90.6531 100.953 90.5531 100.8C90.4531 100.647 90.2665 100.53 89.9931 100.45C89.7198 100.37 89.3231 100.33 88.8031 100.33V99.07C89.2298 99.07 89.5631 99.03 89.8031 98.95C90.0431 98.87 90.2131 98.7567 90.3131 98.61C90.4198 98.4633 90.4731 98.2933 90.4731 98.1C90.4731 97.8467 90.3998 97.6533 90.2531 97.52C90.1065 97.38 89.8965 97.31 89.6231 97.31C89.3765 97.31 89.1498 97.3633 88.9431 97.47C88.7365 97.5767 88.5198 97.73 88.2931 97.93L87.3931 96.84C87.7398 96.5467 88.0998 96.32 88.4731 96.16C88.8531 96 89.2631 95.92 89.7031 95.92C90.2165 95.92 90.6631 96 91.0431 96.16C91.4298 96.3133 91.7265 96.5433 91.9331 96.85C92.1465 97.15 92.2531 97.5233 92.2531 97.97C92.2531 98.3367 92.1531 98.6633 91.9531 98.95C91.7531 99.23 91.4565 99.45 91.0631 99.61V99.66C91.3365 99.74 91.5798 99.8633 91.7931 100.03C92.0131 100.19 92.1831 100.39 92.3031 100.63C92.4298 100.87 92.4931 101.15 92.4931 101.47C92.4931 101.93 92.3665 102.323 92.1131 102.65C91.8598 102.97 91.5231 103.217 91.1031 103.39C90.6898 103.557 90.2365 103.64 89.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab15.svg b/public/static/images/canvas/shape/normal/plane_tab15.svg
new file mode 100644
index 00000000..c0c1b0bb
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18" y="87" width="74" height="2" fill="#101010"/>
+<path d="M19 41.5L54.5 2L91.5 41.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="90" y="41" width="2" height="46" fill="#EA10AC"/>
+<rect x="18" y="41" width="2" height="46" fill="#EA10AC"/>
+<path d="M55 5V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="38.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="38.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M51.8731 49.5V48.48C52.4931 47.9133 53.0365 47.3867 53.5031 46.9C53.9698 46.4133 54.3331 45.96 54.5931 45.54C54.8531 45.1133 54.9831 44.72 54.9831 44.36C54.9831 44.1333 54.9431 43.9433 54.8631 43.79C54.7898 43.63 54.6798 43.51 54.5331 43.43C54.3865 43.35 54.2131 43.31 54.0131 43.31C53.7598 43.31 53.5298 43.3833 53.3231 43.53C53.1231 43.67 52.9331 43.8367 52.7531 44.03L51.7831 43.07C52.1498 42.6767 52.5198 42.3867 52.8931 42.2C53.2731 42.0133 53.7265 41.92 54.2531 41.92C54.7331 41.92 55.1565 42.0167 55.5231 42.21C55.8898 42.4033 56.1765 42.6767 56.3831 43.03C56.5898 43.3767 56.6931 43.7867 56.6931 44.26C56.6931 44.6867 56.5831 45.1233 56.3631 45.57C56.1498 46.01 55.8731 46.4467 55.5331 46.88C55.1931 47.3067 54.8331 47.7133 54.4531 48.1C54.6398 48.0733 54.8465 48.05 55.0731 48.03C55.3065 48.01 55.5065 48 55.6731 48H57.0331V49.5H51.8731Z" fill="#101010"/>
+<path d="M8 41V88" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="57.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="0.5" y="57.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M7.24313 68.64C6.84979 68.64 6.49313 68.5967 6.17313 68.51C5.85979 68.4233 5.57979 68.3033 5.33313 68.15C5.08646 67.99 4.87313 67.8067 4.69313 67.6L5.51313 66.48C5.73979 66.6867 5.98313 66.86 6.24313 67C6.50313 67.1333 6.77646 67.2 7.06313 67.2C7.29646 67.2 7.49646 67.17 7.66313 67.11C7.83646 67.0433 7.96979 66.9467 8.06313 66.82C8.15646 66.6933 8.20313 66.5367 8.20313 66.35C8.20313 66.1367 8.15313 65.9533 8.05313 65.8C7.95313 65.6467 7.76646 65.53 7.49313 65.45C7.21979 65.37 6.82313 65.33 6.30313 65.33V64.07C6.72979 64.07 7.06313 64.03 7.30313 63.95C7.54313 63.87 7.71313 63.7567 7.81313 63.61C7.91979 63.4633 7.97313 63.2933 7.97313 63.1C7.97313 62.8467 7.89979 62.6533 7.75313 62.52C7.60646 62.38 7.39646 62.31 7.12313 62.31C6.87646 62.31 6.64979 62.3633 6.44313 62.47C6.23646 62.5767 6.01979 62.73 5.79313 62.93L4.89313 61.84C5.23979 61.5467 5.59979 61.32 5.97313 61.16C6.35313 61 6.76313 60.92 7.20313 60.92C7.71646 60.92 8.16313 61 8.54313 61.16C8.92979 61.3133 9.22646 61.5433 9.43313 61.85C9.64646 62.15 9.75313 62.5233 9.75313 62.97C9.75313 63.3367 9.65313 63.6633 9.45312 63.95C9.25313 64.23 8.95646 64.45 8.56313 64.61V64.66C8.83646 64.74 9.07979 64.8633 9.29313 65.03C9.51313 65.19 9.68313 65.39 9.80313 65.63C9.92979 65.87 9.99313 66.15 9.99313 66.47C9.99313 66.93 9.86646 67.3233 9.61313 67.65C9.35979 67.97 9.02313 68.2167 8.60313 68.39C8.18979 68.5567 7.73646 68.64 7.24313 68.64Z" fill="#101010"/>
+<path d="M18 100H92" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab16.svg b/public/static/images/canvas/shape/normal/plane_tab16.svg
new file mode 100644
index 00000000..c66484e3
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 88L26 69" stroke="#45CD7D" stroke-width="2"/>
+<path d="M109 88L84 69" stroke="#45CD7D" stroke-width="2"/>
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="25" y="19" width="60" height="2" fill="#1083E3"/>
+<rect x="25" y="21" width="2" height="49" fill="#EA10AC"/>
+<rect x="83" y="21" width="2" height="49" fill="#EA10AC"/>
+<path d="M55 22V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 57.64C53.8498 57.64 53.4931 57.5967 53.1731 57.51C52.8598 57.4233 52.5798 57.3033 52.3331 57.15C52.0865 56.99 51.8731 56.8067 51.6931 56.6L52.5131 55.48C52.7398 55.6867 52.9831 55.86 53.2431 56C53.5031 56.1333 53.7765 56.2 54.0631 56.2C54.2965 56.2 54.4965 56.17 54.6631 56.11C54.8365 56.0433 54.9698 55.9467 55.0631 55.82C55.1565 55.6933 55.2031 55.5367 55.2031 55.35C55.2031 55.1367 55.1531 54.9533 55.0531 54.8C54.9531 54.6467 54.7665 54.53 54.4931 54.45C54.2198 54.37 53.8231 54.33 53.3031 54.33V53.07C53.7298 53.07 54.0631 53.03 54.3031 52.95C54.5431 52.87 54.7131 52.7567 54.8131 52.61C54.9198 52.4633 54.9731 52.2933 54.9731 52.1C54.9731 51.8467 54.8998 51.6533 54.7531 51.52C54.6065 51.38 54.3965 51.31 54.1231 51.31C53.8765 51.31 53.6498 51.3633 53.4431 51.47C53.2365 51.5767 53.0198 51.73 52.7931 51.93L51.8931 50.84C52.2398 50.5467 52.5998 50.32 52.9731 50.16C53.3531 50 53.7631 49.92 54.2031 49.92C54.7165 49.92 55.1631 50 55.5431 50.16C55.9298 50.3133 56.2265 50.5433 56.4331 50.85C56.6465 51.15 56.7531 51.5233 56.7531 51.97C56.7531 52.3367 56.6531 52.6633 56.4531 52.95C56.2531 53.23 55.9565 53.45 55.5631 53.61V53.66C55.8365 53.74 56.0798 53.8633 56.2931 54.03C56.5131 54.19 56.6831 54.39 56.8031 54.63C56.9298 54.87 56.9931 55.15 56.9931 55.47C56.9931 55.93 56.8665 56.3233 56.6131 56.65C56.3598 56.97 56.0231 57.2167 55.6031 57.39C55.1898 57.5567 54.7365 57.64 54.2431 57.64Z" fill="#101010"/>
+<path d="M14 19V66" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="6.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="6.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M13.8031 46.5V42.2C13.8031 41.9667 13.8098 41.6933 13.8231 41.38C13.8431 41.06 13.8565 40.78 13.8631 40.54H13.8231C13.7298 40.7533 13.6331 40.9667 13.5331 41.18C13.4331 41.3933 13.3298 41.6067 13.2231 41.82L12.3731 43.29H16.2831V44.64H10.6731V43.41L13.2631 39.05H15.4631V46.5H13.8031Z" fill="#101010"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<path d="M25 8L85 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.8731 12V10.98C53.4931 10.4133 54.0365 9.88667 54.5031 9.4C54.9698 8.91333 55.3331 8.46 55.5931 8.04C55.8531 7.61333 55.9831 7.22 55.9831 6.86C55.9831 6.63333 55.9431 6.44333 55.8631 6.29C55.7898 6.13 55.6798 6.01 55.5331 5.93C55.3865 5.85 55.2131 5.81 55.0131 5.81C54.7598 5.81 54.5298 5.88333 54.3231 6.03C54.1231 6.17 53.9331 6.33667 53.7531 6.53L52.7831 5.57C53.1498 5.17667 53.5198 4.88667 53.8931 4.7C54.2731 4.51333 54.7265 4.42 55.2531 4.42C55.7331 4.42 56.1565 4.51667 56.5231 4.71C56.8898 4.90333 57.1765 5.17667 57.3831 5.53C57.5898 5.87667 57.6931 6.28667 57.6931 6.76C57.6931 7.18667 57.5831 7.62333 57.3631 8.07C57.1498 8.51 56.8731 8.94667 56.5331 9.38C56.1931 9.80667 55.8331 10.2133 55.4531 10.6C55.6398 10.5733 55.8465 10.55 56.0731 10.53C56.3065 10.51 56.5065 10.5 56.6731 10.5H58.0331V12H52.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab17.svg b/public/static/images/canvas/shape/normal/plane_tab17.svg
new file mode 100644
index 00000000..ae8ddd0f
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M79.5 88L98.5 45L85 19.5" stroke="#45CD7D" stroke-width="2"/>
+<path d="M12 88L42 19.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="11" y="87" width="70" height="2" fill="#101010"/>
+<rect x="41" y="19" width="45" height="2" fill="#1083E3"/>
+<path d="M61 22V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="53.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="53.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M60.2431 57.64C59.8498 57.64 59.4931 57.5967 59.1731 57.51C58.8598 57.4233 58.5798 57.3033 58.3331 57.15C58.0865 56.99 57.8731 56.8067 57.6931 56.6L58.5131 55.48C58.7398 55.6867 58.9831 55.86 59.2431 56C59.5031 56.1333 59.7765 56.2 60.0631 56.2C60.2965 56.2 60.4965 56.17 60.6631 56.11C60.8365 56.0433 60.9698 55.9467 61.0631 55.82C61.1565 55.6933 61.2031 55.5367 61.2031 55.35C61.2031 55.1367 61.1531 54.9533 61.0531 54.8C60.9531 54.6467 60.7665 54.53 60.4931 54.45C60.2198 54.37 59.8231 54.33 59.3031 54.33V53.07C59.7298 53.07 60.0631 53.03 60.3031 52.95C60.5431 52.87 60.7131 52.7567 60.8131 52.61C60.9198 52.4633 60.9731 52.2933 60.9731 52.1C60.9731 51.8467 60.8998 51.6533 60.7531 51.52C60.6065 51.38 60.3965 51.31 60.1231 51.31C59.8765 51.31 59.6498 51.3633 59.4431 51.47C59.2365 51.5767 59.0198 51.73 58.7931 51.93L57.8931 50.84C58.2398 50.5467 58.5998 50.32 58.9731 50.16C59.3531 50 59.7631 49.92 60.2031 49.92C60.7165 49.92 61.1631 50 61.5431 50.16C61.9298 50.3133 62.2265 50.5433 62.4331 50.85C62.6465 51.15 62.7531 51.5233 62.7531 51.97C62.7531 52.3367 62.6531 52.6633 62.4531 52.95C62.2531 53.23 61.9565 53.45 61.5631 53.61V53.66C61.8365 53.74 62.0798 53.8633 62.2931 54.03C62.5131 54.19 62.6831 54.39 62.8031 54.63C62.9298 54.87 62.9931 55.15 62.9931 55.47C62.9931 55.93 62.8665 56.3233 62.6131 56.65C62.3598 56.97 62.0231 57.2167 61.6031 57.39C61.1898 57.5567 60.7365 57.64 60.2431 57.64Z" fill="#101010"/>
+<path d="M31.2344 19.3445L0.937094 81.337" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="9.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="9.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M16.8031 54.5V50.2C16.8031 49.9667 16.8098 49.6933 16.8231 49.38C16.8431 49.06 16.8565 48.78 16.8631 48.54H16.8231C16.7298 48.7533 16.6331 48.9667 16.5331 49.18C16.4331 49.3933 16.3298 49.6067 16.2231 49.82L15.3731 51.29H19.2831V52.64H13.6731V51.41L16.2631 47.05H18.4631V54.5H16.8031Z" fill="#101010"/>
+<path d="M11 100H81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="38.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M43.7331 103.5V102.06H45.3131V97.83H43.9431V96.73C44.3431 96.6567 44.6831 96.5667 44.9631 96.46C45.2498 96.3533 45.5231 96.2167 45.7831 96.05H47.0931V102.06H48.4331V103.5H43.7331Z" fill="#101010"/>
+<path d="M41 8L85 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M60.8731 12V10.98C61.4931 10.4133 62.0365 9.88667 62.5031 9.4C62.9698 8.91333 63.3331 8.46 63.5931 8.04C63.8531 7.61333 63.9831 7.22 63.9831 6.86C63.9831 6.63333 63.9431 6.44333 63.8631 6.29C63.7898 6.13 63.6798 6.01 63.5331 5.93C63.3865 5.85 63.2131 5.81 63.0131 5.81C62.7598 5.81 62.5298 5.88333 62.3231 6.03C62.1231 6.17 61.9331 6.33667 61.7531 6.53L60.7831 5.57C61.1498 5.17667 61.5198 4.88667 61.8931 4.7C62.2731 4.51333 62.7265 4.42 63.2531 4.42C63.7331 4.42 64.1565 4.51667 64.5231 4.71C64.8898 4.90333 65.1765 5.17667 65.3831 5.53C65.5898 5.87667 65.6931 6.28667 65.6931 6.76C65.6931 7.18667 65.5831 7.62333 65.3631 8.07C65.1498 8.51 64.8731 8.94667 64.5331 9.38C64.1931 9.80667 63.8331 10.2133 63.4531 10.6C63.6398 10.5733 63.8465 10.55 64.0731 10.53C64.3065 10.51 64.5065 10.5 64.6731 10.5H66.0331V12H60.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/normal/plane_tab18.svg b/public/static/images/canvas/shape/normal/plane_tab18.svg
new file mode 100644
index 00000000..12bd0ad3
--- /dev/null
+++ b/public/static/images/canvas/shape/normal/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 88L60 2L109 34L78 88" stroke="#45CD7D" stroke-width="2"/>
+<rect x="10" y="87" width="69" height="2" fill="#101010"/>
+<path d="M61 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="53.5" y="39.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="53.5" y="39.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M57.8731 50.5V49.48C58.4931 48.9133 59.0365 48.3867 59.5031 47.9C59.9698 47.4133 60.3331 46.96 60.5931 46.54C60.8531 46.1133 60.9831 45.72 60.9831 45.36C60.9831 45.1333 60.9431 44.9433 60.8631 44.79C60.7898 44.63 60.6798 44.51 60.5331 44.43C60.3865 44.35 60.2131 44.31 60.0131 44.31C59.7598 44.31 59.5298 44.3833 59.3231 44.53C59.1231 44.67 58.9331 44.8367 58.7531 45.03L57.7831 44.07C58.1498 43.6767 58.5198 43.3867 58.8931 43.2C59.2731 43.0133 59.7265 42.92 60.2531 42.92C60.7331 42.92 61.1565 43.0167 61.5231 43.21C61.8898 43.4033 62.1765 43.6767 62.3831 44.03C62.5898 44.3767 62.6931 44.7867 62.6931 45.26C62.6931 45.6867 62.5831 46.1233 62.3631 46.57C62.1498 47.01 61.8731 47.4467 61.5331 47.88C61.1931 48.3067 60.8331 48.7133 60.4531 49.1C60.6398 49.0733 60.8465 49.05 61.0731 49.03C61.3065 49.01 61.5065 49 61.6731 49H63.0331V50.5H57.8731Z" fill="#101010"/>
+<path d="M49.9795 0.842041L0.715247 82.0703" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="18.5" y="34.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="18.5" y="34.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M25.2431 45.64C24.8498 45.64 24.4931 45.5967 24.1731 45.51C23.8598 45.4233 23.5798 45.3033 23.3331 45.15C23.0865 44.99 22.8731 44.8067 22.6931 44.6L23.5131 43.48C23.7398 43.6867 23.9831 43.86 24.2431 44C24.5031 44.1333 24.7765 44.2 25.0631 44.2C25.2965 44.2 25.4965 44.17 25.6631 44.11C25.8365 44.0433 25.9698 43.9467 26.0631 43.82C26.1565 43.6933 26.2031 43.5367 26.2031 43.35C26.2031 43.1367 26.1531 42.9533 26.0531 42.8C25.9531 42.6467 25.7665 42.53 25.4931 42.45C25.2198 42.37 24.8231 42.33 24.3031 42.33V41.07C24.7298 41.07 25.0631 41.03 25.3031 40.95C25.5431 40.87 25.7131 40.7567 25.8131 40.61C25.9198 40.4633 25.9731 40.2933 25.9731 40.1C25.9731 39.8467 25.8998 39.6533 25.7531 39.52C25.6065 39.38 25.3965 39.31 25.1231 39.31C24.8765 39.31 24.6498 39.3633 24.4431 39.47C24.2365 39.5767 24.0198 39.73 23.7931 39.93L22.8931 38.84C23.2398 38.5467 23.5998 38.32 23.9731 38.16C24.3531 38 24.7631 37.92 25.2031 37.92C25.7165 37.92 26.1631 38 26.5431 38.16C26.9298 38.3133 27.2265 38.5433 27.4331 38.85C27.6465 39.15 27.7531 39.5233 27.7531 39.97C27.7531 40.3367 27.6531 40.6633 27.4531 40.95C27.2531 41.23 26.9565 41.45 26.5631 41.61V41.66C26.8365 41.74 27.0798 41.8633 27.2931 42.03C27.5131 42.19 27.6831 42.39 27.8031 42.63C27.9298 42.87 27.9931 43.15 27.9931 43.47C27.9931 43.93 27.8665 44.3233 27.6131 44.65C27.3598 44.97 27.0231 45.2167 26.6031 45.39C26.1898 45.5567 25.7365 45.64 25.2431 45.64Z" fill="#101010"/>
+<path d="M10 100H80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="37.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M42.7331 103.5V102.06H44.3131V97.83H42.9431V96.73C43.3431 96.6567 43.6831 96.5667 43.9631 96.46C44.2498 96.3533 44.5231 96.2167 44.7831 96.05H46.0931V102.06H47.4331V103.5H42.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab01.svg b/public/static/images/canvas/shape/re_180deg/plane_tab01.svg
new file mode 100644
index 00000000..aab78f30
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 21L55.5 106L109 21" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21.5)" fill="#101010"/>
+<path d="M55 100V24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab02.svg b/public/static/images/canvas/shape/re_180deg/plane_tab02.svg
new file mode 100644
index 00000000..53390298
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 35)" fill="#101010"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 97)" fill="#1083E3"/>
+<rect width="2" height="60" transform="matrix(1 0 0 -1 0 95)" fill="#EA10AC"/>
+<rect width="2" height="60" transform="matrix(1 0 0 -1 108 95)" fill="#EA10AC"/>
+<path d="M55 94V36" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 22L110 22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="57.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="57.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 68.5V67.48C52.9931 66.9133 53.5365 66.3867 54.0031 65.9C54.4698 65.4133 54.8331 64.96 55.0931 64.54C55.3531 64.1133 55.4831 63.72 55.4831 63.36C55.4831 63.1333 55.4431 62.9433 55.3631 62.79C55.2898 62.63 55.1798 62.51 55.0331 62.43C54.8865 62.35 54.7131 62.31 54.5131 62.31C54.2598 62.31 54.0298 62.3833 53.8231 62.53C53.6231 62.67 53.4331 62.8367 53.2531 63.03L52.2831 62.07C52.6498 61.6767 53.0198 61.3867 53.3931 61.2C53.7731 61.0133 54.2265 60.92 54.7531 60.92C55.2331 60.92 55.6565 61.0167 56.0231 61.21C56.3898 61.4033 56.6765 61.6767 56.8831 62.03C57.0898 62.3767 57.1931 62.7867 57.1931 63.26C57.1931 63.6867 57.0831 64.1233 56.8631 64.57C56.6498 65.01 56.3731 65.4467 56.0331 65.88C55.6931 66.3067 55.3331 66.7133 54.9531 67.1C55.1398 67.0733 55.3465 67.05 55.5731 67.03C55.8065 67.01 56.0065 67 56.1731 67H57.5331V68.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="14.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="14.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 25.5V24.06H54.3131V19.83H52.9431V18.73C53.3431 18.6567 53.6831 18.5667 53.9631 18.46C54.2498 18.3533 54.5231 18.2167 54.7831 18.05H56.0931V24.06H57.4331V25.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab03.svg b/public/static/images/canvas/shape/re_180deg/plane_tab03.svg
new file mode 100644
index 00000000..1e054827
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="70" height="2" transform="matrix(1 0 0 -1 20 89)" fill="#1083E3"/>
+<path d="M20 89H22L2 21H0L20 89Z" fill="#45CD7D"/>
+<path d="M88 89H90L110 21H108L88 89Z" fill="#45CD7D"/>
+<path d="M55 85V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 57.5V56.48C52.9931 55.9133 53.5365 55.3867 54.0031 54.9C54.4698 54.4133 54.8331 53.96 55.0931 53.54C55.3531 53.1133 55.4831 52.72 55.4831 52.36C55.4831 52.1333 55.4431 51.9433 55.3631 51.79C55.2898 51.63 55.1798 51.51 55.0331 51.43C54.8865 51.35 54.7131 51.31 54.5131 51.31C54.2598 51.31 54.0298 51.3833 53.8231 51.53C53.6231 51.67 53.4331 51.8367 53.2531 52.03L52.2831 51.07C52.6498 50.6767 53.0198 50.3867 53.3931 50.2C53.7731 50.0133 54.2265 49.92 54.7531 49.92C55.2331 49.92 55.6565 50.0167 56.0231 50.21C56.3898 50.4033 56.6765 50.6767 56.8831 51.03C57.0898 51.3767 57.1931 51.7867 57.1931 52.26C57.1931 52.6867 57.0831 53.1233 56.8631 53.57C56.6498 54.01 56.3731 54.4467 56.0331 54.88C55.6931 55.3067 55.3331 55.7133 54.9531 56.1C55.1398 56.0733 55.3465 56.05 55.5731 56.03C55.8065 56.01 56.0065 56 56.1731 56H57.5331V57.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M54.7431 103.64C54.3498 103.64 53.9931 103.597 53.6731 103.51C53.3598 103.423 53.0798 103.303 52.8331 103.15C52.5865 102.99 52.3731 102.807 52.1931 102.6L53.0131 101.48C53.2398 101.687 53.4831 101.86 53.7431 102C54.0031 102.133 54.2765 102.2 54.5631 102.2C54.7965 102.2 54.9965 102.17 55.1631 102.11C55.3365 102.043 55.4698 101.947 55.5631 101.82C55.6565 101.693 55.7031 101.537 55.7031 101.35C55.7031 101.137 55.6531 100.953 55.5531 100.8C55.4531 100.647 55.2665 100.53 54.9931 100.45C54.7198 100.37 54.3231 100.33 53.8031 100.33V99.07C54.2298 99.07 54.5631 99.03 54.8031 98.95C55.0431 98.87 55.2131 98.7567 55.3131 98.61C55.4198 98.4633 55.4731 98.2933 55.4731 98.1C55.4731 97.8467 55.3998 97.6533 55.2531 97.52C55.1065 97.38 54.8965 97.31 54.6231 97.31C54.3765 97.31 54.1498 97.3633 53.9431 97.47C53.7365 97.5767 53.5198 97.73 53.2931 97.93L52.3931 96.84C52.7398 96.5467 53.0998 96.32 53.4731 96.16C53.8531 96 54.2631 95.92 54.7031 95.92C55.2165 95.92 55.6631 96 56.0431 96.16C56.4298 96.3133 56.7265 96.5433 56.9331 96.85C57.1465 97.15 57.2531 97.5233 57.2531 97.97C57.2531 98.3367 57.1531 98.6633 56.9531 98.95C56.7531 99.23 56.4565 99.45 56.0631 99.61V99.66C56.3365 99.74 56.5798 99.8633 56.7931 100.03C57.0131 100.19 57.1831 100.39 57.3031 100.63C57.4298 100.87 57.4931 101.15 57.4931 101.47C57.4931 101.93 57.3665 102.323 57.1131 102.65C56.8598 102.97 56.5231 103.217 56.1031 103.39C55.6898 103.557 55.2365 103.64 54.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab04.svg b/public/static/images/canvas/shape/re_180deg/plane_tab04.svg
new file mode 100644
index 00000000..1144da35
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="91" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<path d="M89 108H91L2 21H0L89 108Z" fill="#45CD7D"/>
+<rect width="2" height="87" transform="matrix(1 0 0 -1 89 108)" fill="#EA10AC"/>
+<path d="M102 108V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L90 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="94.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="94.5" y="55.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M99.3731 66.5V65.48C99.9931 64.9133 100.536 64.3867 101.003 63.9C101.47 63.4133 101.833 62.96 102.093 62.54C102.353 62.1133 102.483 61.72 102.483 61.36C102.483 61.1333 102.443 60.9433 102.363 60.79C102.29 60.63 102.18 60.51 102.033 60.43C101.886 60.35 101.713 60.31 101.513 60.31C101.26 60.31 101.03 60.3833 100.823 60.53C100.623 60.67 100.433 60.8367 100.253 61.03L99.2831 60.07C99.6498 59.6767 100.02 59.3867 100.393 59.2C100.773 59.0133 101.226 58.92 101.753 58.92C102.233 58.92 102.656 59.0167 103.023 59.21C103.39 59.4033 103.676 59.6767 103.883 60.03C104.09 60.3767 104.193 60.7867 104.193 61.26C104.193 61.6867 104.083 62.1233 103.863 62.57C103.65 63.01 103.373 63.4467 103.033 63.88C102.693 64.3067 102.333 64.7133 101.953 65.1C102.14 65.0733 102.346 65.05 102.573 65.03C102.806 65.01 103.006 65 103.173 65H104.533V66.5H99.3731Z" fill="#101010"/>
+<rect x="38.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M43.7331 11.5V10.06H45.3131V5.83H43.9431V4.73C44.3431 4.65667 44.6831 4.56667 44.9631 4.46C45.2498 4.35333 45.5231 4.21667 45.7831 4.05H47.0931V10.06H48.4331V11.5H43.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab05.svg b/public/static/images/canvas/shape/re_180deg/plane_tab05.svg
new file mode 100644
index 00000000..14546582
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="71" height="2" transform="matrix(1 0 0 -1 20 21)" fill="#101010"/>
+<rect width="2" height="52" transform="matrix(1 0 0 -1 20 73)" fill="#EA10AC"/>
+<rect width="2" height="87" transform="matrix(1 0 0 -1 89 108)" fill="#EA10AC"/>
+<path d="M20 73.5L89 108V106L20 71.5V73.5Z" fill="#45CD7D"/>
+<path d="M102 108V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M9 73V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M20 8L91 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="94.5" y="56.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="94.5" y="56.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M99.3731 67.5V66.48C99.9931 65.9133 100.536 65.3867 101.003 64.9C101.47 64.4133 101.833 63.96 102.093 63.54C102.353 63.1133 102.483 62.72 102.483 62.36C102.483 62.1333 102.443 61.9433 102.363 61.79C102.29 61.63 102.18 61.51 102.033 61.43C101.886 61.35 101.713 61.31 101.513 61.31C101.26 61.31 101.03 61.3833 100.823 61.53C100.623 61.67 100.433 61.8367 100.253 62.03L99.2831 61.07C99.6498 60.6767 100.02 60.3867 100.393 60.2C100.773 60.0133 101.226 59.92 101.753 59.92C102.233 59.92 102.656 60.0167 103.023 60.21C103.39 60.4033 103.676 60.6767 103.883 61.03C104.09 61.3767 104.193 61.7867 104.193 62.26C104.193 62.6867 104.083 63.1233 103.863 63.57C103.65 64.01 103.373 64.4467 103.033 64.88C102.693 65.3067 102.333 65.7133 101.953 66.1C102.14 66.0733 102.346 66.05 102.573 66.03C102.806 66.01 103.006 66 103.173 66H104.533V67.5H99.3731Z" fill="#101010"/>
+<rect x="1.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="1.5" y="38.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M8.74313 49.64C8.34979 49.64 7.99313 49.5967 7.67313 49.51C7.35979 49.4233 7.07979 49.3033 6.83313 49.15C6.58646 48.99 6.37313 48.8067 6.19313 48.6L7.01313 47.48C7.23979 47.6867 7.48313 47.86 7.74313 48C8.00313 48.1333 8.27646 48.2 8.56313 48.2C8.79646 48.2 8.99646 48.17 9.16313 48.11C9.33646 48.0433 9.46979 47.9467 9.56313 47.82C9.65646 47.6933 9.70313 47.5367 9.70313 47.35C9.70313 47.1367 9.65313 46.9533 9.55313 46.8C9.45313 46.6467 9.26646 46.53 8.99313 46.45C8.71979 46.37 8.32313 46.33 7.80313 46.33V45.07C8.22979 45.07 8.56313 45.03 8.80313 44.95C9.04313 44.87 9.21313 44.7567 9.31313 44.61C9.41979 44.4633 9.47313 44.2933 9.47313 44.1C9.47313 43.8467 9.39979 43.6533 9.25313 43.52C9.10646 43.38 8.89646 43.31 8.62313 43.31C8.37646 43.31 8.14979 43.3633 7.94313 43.47C7.73646 43.5767 7.51979 43.73 7.29313 43.93L6.39313 42.84C6.73979 42.5467 7.09979 42.32 7.47313 42.16C7.85313 42 8.26313 41.92 8.70313 41.92C9.21646 41.92 9.66313 42 10.0431 42.16C10.4298 42.3133 10.7265 42.5433 10.9331 42.85C11.1465 43.15 11.2531 43.5233 11.2531 43.97C11.2531 44.3367 11.1531 44.6633 10.9531 44.95C10.7531 45.23 10.4565 45.45 10.0631 45.61V45.66C10.3365 45.74 10.5798 45.8633 10.7931 46.03C11.0131 46.19 11.1831 46.39 11.3031 46.63C11.4298 46.87 11.4931 47.15 11.4931 47.47C11.4931 47.93 11.3665 48.3233 11.1131 48.65C10.8598 48.97 10.5231 49.2167 10.1031 49.39C9.68979 49.5567 9.23646 49.64 8.74313 49.64Z" fill="#101010"/>
+<rect x="48.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="48.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M53.7331 11.5V10.06H55.3131V5.83H53.9431V4.73C54.3431 4.65667 54.6831 4.56667 54.9631 4.46C55.2498 4.35333 55.5231 4.21667 55.7831 4.05H57.0931V10.06H58.4331V11.5H53.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab06.svg b/public/static/images/canvas/shape/re_180deg/plane_tab06.svg
new file mode 100644
index 00000000..0eb57a1f
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="2" transform="matrix(1 0 0 -1 20 26)" fill="#1083E3"/>
+<path d="M47 92H49L22 26H20L47 92Z" fill="#45CD7D"/>
+<path d="M115 92H117L90 26H88L115 92Z" fill="#45CD7D"/>
+<path d="M47 92H117L116.213 90H47V92Z" fill="#1083E3"/>
+<path d="M33 92L7 24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M27 13L98 13" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M70 88V28" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="13.5" y="50.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="13.5" y="50.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M20.7431 61.64C20.3498 61.64 19.9931 61.5967 19.6731 61.51C19.3598 61.4233 19.0798 61.3033 18.8331 61.15C18.5865 60.99 18.3731 60.8067 18.1931 60.6L19.0131 59.48C19.2398 59.6867 19.4831 59.86 19.7431 60C20.0031 60.1333 20.2765 60.2 20.5631 60.2C20.7965 60.2 20.9965 60.17 21.1631 60.11C21.3365 60.0433 21.4698 59.9467 21.5631 59.82C21.6565 59.6933 21.7031 59.5367 21.7031 59.35C21.7031 59.1367 21.6531 58.9533 21.5531 58.8C21.4531 58.6467 21.2665 58.53 20.9931 58.45C20.7198 58.37 20.3231 58.33 19.8031 58.33V57.07C20.2298 57.07 20.5631 57.03 20.8031 56.95C21.0431 56.87 21.2131 56.7567 21.3131 56.61C21.4198 56.4633 21.4731 56.2933 21.4731 56.1C21.4731 55.8467 21.3998 55.6533 21.2531 55.52C21.1065 55.38 20.8965 55.31 20.6231 55.31C20.3765 55.31 20.1498 55.3633 19.9431 55.47C19.7365 55.5767 19.5198 55.73 19.2931 55.93L18.3931 54.84C18.7398 54.5467 19.0998 54.32 19.4731 54.16C19.8531 54 20.2631 53.92 20.7031 53.92C21.2165 53.92 21.6631 54 22.0431 54.16C22.4298 54.3133 22.7265 54.5433 22.9331 54.85C23.1465 55.15 23.2531 55.5233 23.2531 55.97C23.2531 56.3367 23.1531 56.6633 22.9531 56.95C22.7531 57.23 22.4565 57.45 22.0631 57.61V57.66C22.3365 57.74 22.5798 57.8633 22.7931 58.03C23.0131 58.19 23.1831 58.39 23.3031 58.63C23.4298 58.87 23.4931 59.15 23.4931 59.47C23.4931 59.93 23.3665 60.3233 23.1131 60.65C22.8598 60.97 22.5231 61.2167 22.1031 61.39C21.6898 61.5567 21.2365 61.64 20.7431 61.64Z" fill="#101010"/>
+<rect x="55.5" y="5.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="5.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M60.7331 16.5V15.06H62.3131V10.83H60.9431V9.73C61.3431 9.65667 61.6831 9.56667 61.9631 9.46C62.2498 9.35333 62.5231 9.21667 62.7831 9.05H64.0931V15.06H65.4331V16.5H60.7331Z" fill="#101010"/>
+<rect x="62.5" y="50.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="62.5" y="50.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M67.3731 61.5V60.48C67.9931 59.9133 68.5365 59.3867 69.0031 58.9C69.4698 58.4133 69.8331 57.96 70.0931 57.54C70.3531 57.1133 70.4831 56.72 70.4831 56.36C70.4831 56.1333 70.4431 55.9433 70.3631 55.79C70.2898 55.63 70.1798 55.51 70.0331 55.43C69.8865 55.35 69.7131 55.31 69.5131 55.31C69.2598 55.31 69.0298 55.3833 68.8231 55.53C68.6231 55.67 68.4331 55.8367 68.2531 56.03L67.2831 55.07C67.6498 54.6767 68.0198 54.3867 68.3931 54.2C68.7731 54.0133 69.2265 53.92 69.7531 53.92C70.2331 53.92 70.6565 54.0167 71.0231 54.21C71.3898 54.4033 71.6765 54.6767 71.8831 55.03C72.0898 55.3767 72.1931 55.7867 72.1931 56.26C72.1931 56.6867 72.0831 57.1233 71.8631 57.57C71.6498 58.01 71.3731 58.4467 71.0331 58.88C70.6931 59.3067 70.3331 59.7133 69.9531 60.1C70.1398 60.0733 70.3465 60.05 70.5731 60.03C70.8065 60.01 71.0065 60 71.1731 60H72.5331V61.5H67.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab07.svg b/public/static/images/canvas/shape/re_180deg/plane_tab07.svg
new file mode 100644
index 00000000..978ec35a
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 3 108)" fill="#1083E3"/>
+<rect width="54" height="2" transform="matrix(1 0 0 -1 31 48)" fill="#101010"/>
+<rect width="30" height="2" transform="matrix(1 0 0 -1 3 21)" fill="#101010"/>
+<rect width="30" height="2" transform="matrix(1 0 0 -1 83 21)" fill="#101010"/>
+<rect width="2" height="85" transform="matrix(1 0 0 -1 3 106)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(1 0 0 -1 111 106)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(1 0 0 -1 83 48)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(1 0 0 -1 31 48)" fill="#EA10AC"/>
+<path d="M59 105V48" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M18 47V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M4 8L32 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M84 8L112 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M35 31L81 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="51.5" y="69.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="51.5" y="69.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8031 80.5V76.2C58.8031 75.9667 58.8098 75.6933 58.8231 75.38C58.8431 75.06 58.8565 74.78 58.8631 74.54H58.8231C58.7298 74.7533 58.6331 74.9667 58.5331 75.18C58.4331 75.3933 58.3298 75.6067 58.2231 75.82L57.3731 77.29H61.2831V78.64H55.6731V77.41L58.2631 73.05H60.4631V80.5H58.8031Z" fill="#101010"/>
+<rect x="10.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="10.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M17.8031 38.64C17.4098 38.64 17.0531 38.5933 16.7331 38.5C16.4131 38.4133 16.1265 38.2933 15.8731 38.14C15.6265 37.98 15.4031 37.8033 15.2031 37.61L16.0131 36.49C16.1531 36.6233 16.3031 36.7433 16.4631 36.85C16.6231 36.9567 16.7931 37.0433 16.9731 37.11C17.1598 37.17 17.3498 37.2 17.5431 37.2C17.7831 37.2 17.9898 37.1567 18.1631 37.07C18.3365 36.9833 18.4698 36.8533 18.5631 36.68C18.6631 36.5067 18.7131 36.2933 18.7131 36.04C18.7131 35.6667 18.6098 35.3833 18.4031 35.19C18.2031 34.99 17.9431 34.89 17.6231 34.89C17.4165 34.89 17.2431 34.9167 17.1031 34.97C16.9698 35.0167 16.7931 35.11 16.5731 35.25L15.7931 34.74L15.9831 31.05H20.1631V32.54H17.5131L17.4031 33.8C17.5365 33.7467 17.6631 33.71 17.7831 33.69C17.9031 33.6633 18.0331 33.65 18.1731 33.65C18.5931 33.65 18.9798 33.7333 19.3331 33.9C19.6865 34.0667 19.9665 34.3233 20.1731 34.67C20.3865 35.0167 20.4931 35.46 20.4931 36C20.4931 36.5533 20.3665 37.03 20.1131 37.43C19.8665 37.8233 19.5398 38.1233 19.1331 38.33C18.7265 38.5367 18.2831 38.64 17.8031 38.64Z" fill="#101010"/>
+<rect x="10.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="10.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M15.7331 11.5V10.06H17.3131V5.83H15.9431V4.73C16.3431 4.65667 16.6831 4.56667 16.9631 4.46C17.2498 4.35333 17.5231 4.21667 17.7831 4.05H19.0931V10.06H20.4331V11.5H15.7331Z" fill="#101010"/>
+<rect x="90.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="90.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7431 11.64C97.3498 11.64 96.9931 11.5967 96.6731 11.51C96.3598 11.4233 96.0798 11.3033 95.8331 11.15C95.5865 10.99 95.3731 10.8067 95.1931 10.6L96.0131 9.48C96.2398 9.68667 96.4831 9.86 96.7431 10C97.0031 10.1333 97.2765 10.2 97.5631 10.2C97.7965 10.2 97.9965 10.17 98.1631 10.11C98.3365 10.0433 98.4698 9.94667 98.5631 9.82C98.6565 9.69333 98.7031 9.53667 98.7031 9.35C98.7031 9.13667 98.6531 8.95333 98.5531 8.8C98.4531 8.64667 98.2665 8.53 97.9931 8.45C97.7198 8.37 97.3231 8.33 96.8031 8.33V7.07C97.2298 7.07 97.5631 7.03 97.8031 6.95C98.0431 6.87 98.2131 6.75667 98.3131 6.61C98.4198 6.46333 98.4731 6.29333 98.4731 6.1C98.4731 5.84667 98.3998 5.65333 98.2531 5.52C98.1065 5.38 97.8965 5.31 97.6231 5.31C97.3765 5.31 97.1498 5.36333 96.9431 5.47C96.7365 5.57667 96.5198 5.73 96.2931 5.93L95.3931 4.84C95.7398 4.54667 96.0998 4.32 96.4731 4.16C96.8531 4 97.2631 3.92 97.7031 3.92C98.2165 3.92 98.6631 4 99.0431 4.16C99.4298 4.31333 99.7265 4.54333 99.9331 4.85C100.146 5.15 100.253 5.52333 100.253 5.97C100.253 6.33667 100.153 6.66333 99.9531 6.95C99.7531 7.23 99.4565 7.45 99.0631 7.61V7.66C99.3365 7.74 99.5798 7.86333 99.7931 8.03C100.013 8.19 100.183 8.39 100.303 8.63C100.43 8.87 100.493 9.15 100.493 9.47C100.493 9.93 100.366 10.3233 100.113 10.65C99.8598 10.97 99.5231 11.2167 99.1031 11.39C98.6898 11.5567 98.2365 11.64 97.7431 11.64Z" fill="#101010"/>
+<rect x="50.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="50.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M55.3731 34.5V33.48C55.9931 32.9133 56.5365 32.3867 57.0031 31.9C57.4698 31.4133 57.8331 30.96 58.0931 30.54C58.3531 30.1133 58.4831 29.72 58.4831 29.36C58.4831 29.1333 58.4431 28.9433 58.3631 28.79C58.2898 28.63 58.1798 28.51 58.0331 28.43C57.8865 28.35 57.7131 28.31 57.5131 28.31C57.2598 28.31 57.0298 28.3833 56.8231 28.53C56.6231 28.67 56.4331 28.8367 56.2531 29.03L55.2831 28.07C55.6498 27.6767 56.0198 27.3867 56.3931 27.2C56.7731 27.0133 57.2265 26.92 57.7531 26.92C58.2331 26.92 58.6565 27.0167 59.0231 27.21C59.3898 27.4033 59.6765 27.6767 59.8831 28.03C60.0898 28.3767 60.1931 28.7867 60.1931 29.26C60.1931 29.6867 60.0831 30.1233 59.8631 30.57C59.6498 31.01 59.3731 31.4467 59.0331 31.88C58.6931 32.3067 58.3331 32.7133 57.9531 33.1C58.1398 33.0733 58.3465 33.05 58.5731 33.03C58.8065 33.01 59.0065 33 59.1731 33H60.5331V34.5H55.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab08.svg b/public/static/images/canvas/shape/re_180deg/plane_tab08.svg
new file mode 100644
index 00000000..1de4559c
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(1 0 0 -1 64 108)" fill="#1083E3"/>
+<rect width="64" height="2" transform="matrix(1 0 0 -1 2 83)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="2" height="62" transform="matrix(1 0 0 -1 0 83)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(1 0 0 -1 108 106)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(1 0 0 -1 64 108)" fill="#EA10AC"/>
+<path d="M31 80V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M87 105V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M0 94H63" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="44.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="23.5" y="44.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M30.8031 55.5V51.2C30.8031 50.9667 30.8098 50.6933 30.8231 50.38C30.8431 50.06 30.8565 49.78 30.8631 49.54H30.8231C30.7298 49.7533 30.6331 49.9667 30.5331 50.18C30.4331 50.3933 30.3298 50.6067 30.2231 50.82L29.3731 52.29H33.2831V53.64H27.6731V52.41L30.2631 48.05H32.4631V55.5H30.8031Z" fill="#101010"/>
+<rect x="79.5" y="56.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="79.5" y="56.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M86.2431 67.64C85.8498 67.64 85.4931 67.5967 85.1731 67.51C84.8598 67.4233 84.5798 67.3033 84.3331 67.15C84.0865 66.99 83.8731 66.8067 83.6931 66.6L84.5131 65.48C84.7398 65.6867 84.9831 65.86 85.2431 66C85.5031 66.1333 85.7765 66.2 86.0631 66.2C86.2965 66.2 86.4965 66.17 86.6631 66.11C86.8365 66.0433 86.9698 65.9467 87.0631 65.82C87.1565 65.6933 87.2031 65.5367 87.2031 65.35C87.2031 65.1367 87.1531 64.9533 87.0531 64.8C86.9531 64.6467 86.7665 64.53 86.4931 64.45C86.2198 64.37 85.8231 64.33 85.3031 64.33V63.07C85.7298 63.07 86.0631 63.03 86.3031 62.95C86.5431 62.87 86.7131 62.7567 86.8131 62.61C86.9198 62.4633 86.9731 62.2933 86.9731 62.1C86.9731 61.8467 86.8998 61.6533 86.7531 61.52C86.6065 61.38 86.3965 61.31 86.1231 61.31C85.8765 61.31 85.6498 61.3633 85.4431 61.47C85.2365 61.5767 85.0198 61.73 84.7931 61.93L83.8931 60.84C84.2398 60.5467 84.5998 60.32 84.9731 60.16C85.3531 60 85.7631 59.92 86.2031 59.92C86.7165 59.92 87.1631 60 87.5431 60.16C87.9298 60.3133 88.2265 60.5433 88.4331 60.85C88.6465 61.15 88.7531 61.5233 88.7531 61.97C88.7531 62.3367 88.6531 62.6633 88.4531 62.95C88.2531 63.23 87.9565 63.45 87.5631 63.61V63.66C87.8365 63.74 88.0798 63.8633 88.2931 64.03C88.5131 64.19 88.6831 64.39 88.8031 64.63C88.9298 64.87 88.9931 65.15 88.9931 65.47C88.9931 65.93 88.8665 66.3233 88.6131 66.65C88.3598 66.97 88.0231 67.2167 87.6031 67.39C87.1898 67.5567 86.7365 67.64 86.2431 67.64Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="24.5" y="86.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="24.5" y="86.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M29.3731 97.5V96.48C29.9931 95.9133 30.5365 95.3867 31.0031 94.9C31.4698 94.4133 31.8331 93.96 32.0931 93.54C32.3531 93.1133 32.4831 92.72 32.4831 92.36C32.4831 92.1333 32.4431 91.9433 32.3631 91.79C32.2898 91.63 32.1798 91.51 32.0331 91.43C31.8865 91.35 31.7131 91.31 31.5131 91.31C31.2598 91.31 31.0298 91.3833 30.8231 91.53C30.6231 91.67 30.4331 91.8367 30.2531 92.03L29.2831 91.07C29.6498 90.6767 30.0198 90.3867 30.3931 90.2C30.7731 90.0133 31.2265 89.92 31.7531 89.92C32.2331 89.92 32.6565 90.0167 33.0231 90.21C33.3898 90.4033 33.6765 90.6767 33.8831 91.03C34.0898 91.3767 34.1931 91.7867 34.1931 92.26C34.1931 92.6867 34.0831 93.1233 33.8631 93.57C33.6498 94.01 33.3731 94.4467 33.0331 94.88C32.6931 95.3067 32.3331 95.7133 31.9531 96.1C32.1398 96.0733 32.3465 96.05 32.5731 96.03C32.8065 96.01 33.0065 96 33.1731 96H34.5331V97.5H29.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab09.svg b/public/static/images/canvas/shape/re_180deg/plane_tab09.svg
new file mode 100644
index 00000000..1f985b96
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(1 0 0 -1 64 89)" fill="#1083E3"/>
+<path d="M12 68H66V66H11.5L12 68Z" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<path d="M10 68H12L2 21H0L10 68Z" fill="#45CD7D"/>
+<rect width="2" height="68" transform="matrix(1 0 0 -1 108 89)" fill="#EA10AC"/>
+<rect width="2" height="23" transform="matrix(1 0 0 -1 64 89)" fill="#EA10AC"/>
+<path d="M31 65V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M87 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M11 79H61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M64 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="23.5" y="36.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="23.5" y="36.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M30.3031 47.64C29.9098 47.64 29.5531 47.5933 29.2331 47.5C28.9131 47.4133 28.6265 47.2933 28.3731 47.14C28.1265 46.98 27.9031 46.8033 27.7031 46.61L28.5131 45.49C28.6531 45.6233 28.8031 45.7433 28.9631 45.85C29.1231 45.9567 29.2931 46.0433 29.4731 46.11C29.6598 46.17 29.8498 46.2 30.0431 46.2C30.2831 46.2 30.4898 46.1567 30.6631 46.07C30.8365 45.9833 30.9698 45.8533 31.0631 45.68C31.1631 45.5067 31.2131 45.2933 31.2131 45.04C31.2131 44.6667 31.1098 44.3833 30.9031 44.19C30.7031 43.99 30.4431 43.89 30.1231 43.89C29.9165 43.89 29.7431 43.9167 29.6031 43.97C29.4698 44.0167 29.2931 44.11 29.0731 44.25L28.2931 43.74L28.4831 40.05H32.6631V41.54H30.0131L29.9031 42.8C30.0365 42.7467 30.1631 42.71 30.2831 42.69C30.4031 42.6633 30.5331 42.65 30.6731 42.65C31.0931 42.65 31.4798 42.7333 31.8331 42.9C32.1865 43.0667 32.4665 43.3233 32.6731 43.67C32.8865 44.0167 32.9931 44.46 32.9931 45C32.9931 45.5533 32.8665 46.03 32.6131 46.43C32.3665 46.8233 32.0398 47.1233 31.6331 47.33C31.2265 47.5367 30.7831 47.64 30.3031 47.64Z" fill="#101010"/>
+<rect x="79.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="79.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M86.8031 57.5V53.2C86.8031 52.9667 86.8098 52.6933 86.8231 52.38C86.8431 52.06 86.8565 51.78 86.8631 51.54H86.8231C86.7298 51.7533 86.6331 51.9667 86.5331 52.18C86.4331 52.3933 86.3298 52.6067 86.2231 52.82L85.3731 54.29H89.2831V55.64H83.6731V54.41L86.2631 50.05H88.4631V57.5H86.8031Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="28.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="28.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M33.3731 82.5V81.48C33.9931 80.9133 34.5365 80.3867 35.0031 79.9C35.4698 79.4133 35.8331 78.96 36.0931 78.54C36.3531 78.1133 36.4831 77.72 36.4831 77.36C36.4831 77.1333 36.4431 76.9433 36.3631 76.79C36.2898 76.63 36.1798 76.51 36.0331 76.43C35.8865 76.35 35.7131 76.31 35.5131 76.31C35.2598 76.31 35.0298 76.3833 34.8231 76.53C34.6231 76.67 34.4331 76.8367 34.2531 77.03L33.2831 76.07C33.6498 75.6767 34.0198 75.3867 34.3931 75.2C34.7731 75.0133 35.2265 74.92 35.7531 74.92C36.2331 74.92 36.6565 75.0167 37.0231 75.21C37.3898 75.4033 37.6765 75.6767 37.8831 76.03C38.0898 76.3767 38.1931 76.7867 38.1931 77.26C38.1931 77.6867 38.0831 78.1233 37.8631 78.57C37.6498 79.01 37.3731 79.4467 37.0331 79.88C36.6931 80.3067 36.3331 80.7133 35.9531 81.1C36.1398 81.0733 36.3465 81.05 36.5731 81.03C36.8065 81.01 37.0065 81 37.1731 81H38.5331V82.5H33.3731Z" fill="#101010"/>
+<rect x="79.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="79.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M86.7431 103.64C86.3498 103.64 85.9931 103.597 85.6731 103.51C85.3598 103.423 85.0798 103.303 84.8331 103.15C84.5865 102.99 84.3731 102.807 84.1931 102.6L85.0131 101.48C85.2398 101.687 85.4831 101.86 85.7431 102C86.0031 102.133 86.2765 102.2 86.5631 102.2C86.7965 102.2 86.9965 102.17 87.1631 102.11C87.3365 102.043 87.4698 101.947 87.5631 101.82C87.6565 101.693 87.7031 101.537 87.7031 101.35C87.7031 101.137 87.6531 100.953 87.5531 100.8C87.4531 100.647 87.2665 100.53 86.9931 100.45C86.7198 100.37 86.3231 100.33 85.8031 100.33V99.07C86.2298 99.07 86.5631 99.03 86.8031 98.95C87.0431 98.87 87.2131 98.7567 87.3131 98.61C87.4198 98.4633 87.4731 98.2933 87.4731 98.1C87.4731 97.8467 87.3998 97.6533 87.2531 97.52C87.1065 97.38 86.8965 97.31 86.6231 97.31C86.3765 97.31 86.1498 97.3633 85.9431 97.47C85.7365 97.5767 85.5198 97.73 85.2931 97.93L84.3931 96.84C84.7398 96.5467 85.0998 96.32 85.4731 96.16C85.8531 96 86.2631 95.92 86.7031 95.92C87.2165 95.92 87.6631 96 88.0431 96.16C88.4298 96.3133 88.7265 96.5433 88.9331 96.85C89.1465 97.15 89.2531 97.5233 89.2531 97.97C89.2531 98.3367 89.1531 98.6633 88.9531 98.95C88.7531 99.23 88.4565 99.45 88.0631 99.61V99.66C88.3365 99.74 88.5798 99.8633 88.7931 100.03C89.0131 100.19 89.1831 100.39 89.3031 100.63C89.4298 100.87 89.4931 101.15 89.4931 101.47C89.4931 101.93 89.3665 102.323 89.1131 102.65C88.8598 102.97 88.5231 103.217 88.1031 103.39C87.6898 103.557 87.2365 103.64 86.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab10.svg b/public/static/images/canvas/shape/re_180deg/plane_tab10.svg
new file mode 100644
index 00000000..b8c9f9f4
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(1 0 0 -1 54 89)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(1 0 0 -1 0 66)" fill="#1083E3"/>
+<path d="M98 89H100L110 21H108L98 89Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(1 0 0 -1 54 89)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(1 0 0 -1 0 64)" fill="#EA10AC"/>
+<path d="M27 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M77 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M2 79H52" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M54 100H100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="19.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="19.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M26.3031 46.64C25.9098 46.64 25.5531 46.5933 25.2331 46.5C24.9131 46.4133 24.6265 46.2933 24.3731 46.14C24.1265 45.98 23.9031 45.8033 23.7031 45.61L24.5131 44.49C24.6531 44.6233 24.8031 44.7433 24.9631 44.85C25.1231 44.9567 25.2931 45.0433 25.4731 45.11C25.6598 45.17 25.8498 45.2 26.0431 45.2C26.2831 45.2 26.4898 45.1567 26.6631 45.07C26.8365 44.9833 26.9698 44.8533 27.0631 44.68C27.1631 44.5067 27.2131 44.2933 27.2131 44.04C27.2131 43.6667 27.1098 43.3833 26.9031 43.19C26.7031 42.99 26.4431 42.89 26.1231 42.89C25.9165 42.89 25.7431 42.9167 25.6031 42.97C25.4698 43.0167 25.2931 43.11 25.0731 43.25L24.2931 42.74L24.4831 39.05H28.6631V40.54H26.0131L25.9031 41.8C26.0365 41.7467 26.1631 41.71 26.2831 41.69C26.4031 41.6633 26.5331 41.65 26.6731 41.65C27.0931 41.65 27.4798 41.7333 27.8331 41.9C28.1865 42.0667 28.4665 42.3233 28.6731 42.67C28.8865 43.0167 28.9931 43.46 28.9931 44C28.9931 44.5533 28.8665 45.03 28.6131 45.43C28.3665 45.8233 28.0398 46.1233 27.6331 46.33C27.2265 46.5367 26.7831 46.64 26.3031 46.64Z" fill="#101010"/>
+<rect x="69.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="69.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M76.8031 57.5V53.2C76.8031 52.9667 76.8098 52.6933 76.8231 52.38C76.8431 52.06 76.8565 51.78 76.8631 51.54H76.8231C76.7298 51.7533 76.6331 51.9667 76.5331 52.18C76.4331 52.3933 76.3298 52.6067 76.2231 52.82L75.3731 54.29H79.2831V55.64H73.6731V54.41L76.2631 50.05H78.4631V57.5H76.8031Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="19.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="19.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M24.3731 82.5V81.48C24.9931 80.9133 25.5365 80.3867 26.0031 79.9C26.4698 79.4133 26.8331 78.96 27.0931 78.54C27.3531 78.1133 27.4831 77.72 27.4831 77.36C27.4831 77.1333 27.4431 76.9433 27.3631 76.79C27.2898 76.63 27.1798 76.51 27.0331 76.43C26.8865 76.35 26.7131 76.31 26.5131 76.31C26.2598 76.31 26.0298 76.3833 25.8231 76.53C25.6231 76.67 25.4331 76.8367 25.2531 77.03L24.2831 76.07C24.6498 75.6767 25.0198 75.3867 25.3931 75.2C25.7731 75.0133 26.2265 74.92 26.7531 74.92C27.2331 74.92 27.6565 75.0167 28.0231 75.21C28.3898 75.4033 28.6765 75.6767 28.8831 76.03C29.0898 76.3767 29.1931 76.7867 29.1931 77.26C29.1931 77.6867 29.0831 78.1233 28.8631 78.57C28.6498 79.01 28.3731 79.4467 28.0331 79.88C27.6931 80.3067 27.3331 80.7133 26.9531 81.1C27.1398 81.0733 27.3465 81.05 27.5731 81.03C27.8065 81.01 28.0065 81 28.1731 81H29.5331V82.5H24.3731Z" fill="#101010"/>
+<rect x="69.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.7431 103.64C76.3498 103.64 75.9931 103.597 75.6731 103.51C75.3598 103.423 75.0798 103.303 74.8331 103.15C74.5865 102.99 74.3731 102.807 74.1931 102.6L75.0131 101.48C75.2398 101.687 75.4831 101.86 75.7431 102C76.0031 102.133 76.2765 102.2 76.5631 102.2C76.7965 102.2 76.9965 102.17 77.1631 102.11C77.3365 102.043 77.4698 101.947 77.5631 101.82C77.6565 101.693 77.7031 101.537 77.7031 101.35C77.7031 101.137 77.6531 100.953 77.5531 100.8C77.4531 100.647 77.2665 100.53 76.9931 100.45C76.7198 100.37 76.3231 100.33 75.8031 100.33V99.07C76.2298 99.07 76.5631 99.03 76.8031 98.95C77.0431 98.87 77.2131 98.7567 77.3131 98.61C77.4198 98.4633 77.4731 98.2933 77.4731 98.1C77.4731 97.8467 77.3998 97.6533 77.2531 97.52C77.1065 97.38 76.8965 97.31 76.6231 97.31C76.3765 97.31 76.1498 97.3633 75.9431 97.47C75.7365 97.5767 75.5198 97.73 75.2931 97.93L74.3931 96.84C74.7398 96.5467 75.0998 96.32 75.4731 96.16C75.8531 96 76.2631 95.92 76.7031 95.92C77.2165 95.92 77.6631 96 78.0431 96.16C78.4298 96.3133 78.7265 96.5433 78.9331 96.85C79.1465 97.15 79.2531 97.5233 79.2531 97.97C79.2531 98.3367 79.1531 98.6633 78.9531 98.95C78.7531 99.23 78.4565 99.45 78.0631 99.61V99.66C78.3365 99.74 78.5798 99.8633 78.7931 100.03C79.0131 100.19 79.1831 100.39 79.3031 100.63C79.4298 100.87 79.4931 101.15 79.4931 101.47C79.4931 101.93 79.3665 102.323 79.1131 102.65C78.8598 102.97 78.5231 103.217 78.1031 103.39C77.6898 103.557 77.2365 103.64 76.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab11.svg b/public/static/images/canvas/shape/re_180deg/plane_tab11.svg
new file mode 100644
index 00000000..353359a2
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="53" height="2" transform="matrix(1 0 0 -1 1 89)" fill="#1083E3"/>
+<rect width="100" height="2" transform="matrix(1 0 0 -1 10 21)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(1 0 0 -1 54 66)" fill="#1083E3"/>
+<path d="M0 89H2L12 21H10L0 89Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(1 0 0 -1 54 89)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(1 0 0 -1 108 64)" fill="#EA10AC"/>
+<path d="M83 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 86V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M58 79H108" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M2 100H56" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="75.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="75.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M82.3031 46.64C81.9098 46.64 81.5531 46.5933 81.2331 46.5C80.9131 46.4133 80.6265 46.2933 80.3731 46.14C80.1265 45.98 79.9031 45.8033 79.7031 45.61L80.5131 44.49C80.6531 44.6233 80.8031 44.7433 80.9631 44.85C81.1231 44.9567 81.2931 45.0433 81.4731 45.11C81.6598 45.17 81.8498 45.2 82.0431 45.2C82.2831 45.2 82.4898 45.1567 82.6631 45.07C82.8365 44.9833 82.9698 44.8533 83.0631 44.68C83.1631 44.5067 83.2131 44.2933 83.2131 44.04C83.2131 43.6667 83.1098 43.3833 82.9031 43.19C82.7031 42.99 82.4431 42.89 82.1231 42.89C81.9165 42.89 81.7431 42.9167 81.6031 42.97C81.4698 43.0167 81.2931 43.11 81.0731 43.25L80.2931 42.74L80.4831 39.05H84.6631V40.54H82.0131L81.9031 41.8C82.0365 41.7467 82.1631 41.71 82.2831 41.69C82.4031 41.6633 82.5331 41.65 82.6731 41.65C83.0931 41.65 83.4798 41.7333 83.8331 41.9C84.1865 42.0667 84.4665 42.3233 84.6731 42.67C84.8865 43.0167 84.9931 43.46 84.9931 44C84.9931 44.5533 84.8665 45.03 84.6131 45.43C84.3665 45.8233 84.0398 46.1233 83.6331 46.33C83.2265 46.5367 82.7831 46.64 82.3031 46.64Z" fill="#101010"/>
+<rect x="21.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.8031 57.5V53.2C28.8031 52.9667 28.8098 52.6933 28.8231 52.38C28.8431 52.06 28.8565 51.78 28.8631 51.54H28.8231C28.7298 51.7533 28.6331 51.9667 28.5331 52.18C28.4331 52.3933 28.3298 52.6067 28.2231 52.82L27.3731 54.29H31.2831V55.64H25.6731V54.41L28.2631 50.05H30.4631V57.5H28.8031Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="75.5" y="71.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="75.5" y="71.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.3731 82.5V81.48C80.9931 80.9133 81.5365 80.3867 82.0031 79.9C82.4698 79.4133 82.8331 78.96 83.0931 78.54C83.3531 78.1133 83.4831 77.72 83.4831 77.36C83.4831 77.1333 83.4431 76.9433 83.3631 76.79C83.2898 76.63 83.1798 76.51 83.0331 76.43C82.8865 76.35 82.7131 76.31 82.5131 76.31C82.2598 76.31 82.0298 76.3833 81.8231 76.53C81.6231 76.67 81.4331 76.8367 81.2531 77.03L80.2831 76.07C80.6498 75.6767 81.0198 75.3867 81.3931 75.2C81.7731 75.0133 82.2265 74.92 82.7531 74.92C83.2331 74.92 83.6565 75.0167 84.0231 75.21C84.3898 75.4033 84.6765 75.6767 84.8831 76.03C85.0898 76.3767 85.1931 76.7867 85.1931 77.26C85.1931 77.6867 85.0831 78.1233 84.8631 78.57C84.6498 79.01 84.3731 79.4467 84.0331 79.88C83.6931 80.3067 83.3331 80.7133 82.9531 81.1C83.1398 81.0733 83.3465 81.05 83.5731 81.03C83.8065 81.01 84.0065 81 84.1731 81H85.5331V82.5H80.3731Z" fill="#101010"/>
+<rect x="21.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.7431 103.64C28.3498 103.64 27.9931 103.597 27.6731 103.51C27.3598 103.423 27.0798 103.303 26.8331 103.15C26.5865 102.99 26.3731 102.807 26.1931 102.6L27.0131 101.48C27.2398 101.687 27.4831 101.86 27.7431 102C28.0031 102.133 28.2765 102.2 28.5631 102.2C28.7965 102.2 28.9965 102.17 29.1631 102.11C29.3365 102.043 29.4698 101.947 29.5631 101.82C29.6565 101.693 29.7031 101.537 29.7031 101.35C29.7031 101.137 29.6531 100.953 29.5531 100.8C29.4531 100.647 29.2665 100.53 28.9931 100.45C28.7198 100.37 28.3231 100.33 27.8031 100.33V99.07C28.2298 99.07 28.5631 99.03 28.8031 98.95C29.0431 98.87 29.2131 98.7567 29.3131 98.61C29.4198 98.4633 29.4731 98.2933 29.4731 98.1C29.4731 97.8467 29.3998 97.6533 29.2531 97.52C29.1065 97.38 28.8965 97.31 28.6231 97.31C28.3765 97.31 28.1498 97.3633 27.9431 97.47C27.7365 97.5767 27.5198 97.73 27.2931 97.93L26.3931 96.84C26.7398 96.5467 27.0998 96.32 27.4731 96.16C27.8531 96 28.2631 95.92 28.7031 95.92C29.2165 95.92 29.6631 96 30.0431 96.16C30.4298 96.3133 30.7265 96.5433 30.9331 96.85C31.1465 97.15 31.2531 97.5233 31.2531 97.97C31.2531 98.3367 31.1531 98.6633 30.9531 98.95C30.7531 99.23 30.4565 99.45 30.0631 99.61V99.66C30.3365 99.74 30.5798 99.8633 30.7931 100.03C31.0131 100.19 31.1831 100.39 31.3031 100.63C31.4298 100.87 31.4931 101.15 31.4931 101.47C31.4931 101.93 31.3665 102.323 31.1131 102.65C30.8598 102.97 30.5231 103.217 30.1031 103.39C29.6898 103.557 29.2365 103.64 28.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab12.svg b/public/static/images/canvas/shape/re_180deg/plane_tab12.svg
new file mode 100644
index 00000000..50e211f2
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="46" height="2" transform="matrix(1 0 0 -1 54 66)" fill="#1083E3"/>
+<path d="M98 66H100L110 21H108L98 66Z" fill="#45CD7D"/>
+<path d="M29 108H27L0 21H2L29 108Z" fill="#45CD7D"/>
+<path d="M27 108H29L56 64H54L27 108Z" fill="#45CD7D"/>
+<path d="M76 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M50 77H100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="68.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="68.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M75.8031 46.5V42.2C75.8031 41.9667 75.8098 41.6933 75.8231 41.38C75.8431 41.06 75.8565 40.78 75.8631 40.54H75.8231C75.7298 40.7533 75.6331 40.9667 75.5331 41.18C75.4331 41.3933 75.3298 41.6067 75.2231 41.82L74.3731 43.29H78.2831V44.64H72.6731V43.41L75.2631 39.05H77.4631V46.5H75.8031Z" fill="#101010"/>
+<rect x="21.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.2431 65.64C27.8498 65.64 27.4931 65.5967 27.1731 65.51C26.8598 65.4233 26.5798 65.3033 26.3331 65.15C26.0865 64.99 25.8731 64.8067 25.6931 64.6L26.5131 63.48C26.7398 63.6867 26.9831 63.86 27.2431 64C27.5031 64.1333 27.7765 64.2 28.0631 64.2C28.2965 64.2 28.4965 64.17 28.6631 64.11C28.8365 64.0433 28.9698 63.9467 29.0631 63.82C29.1565 63.6933 29.2031 63.5367 29.2031 63.35C29.2031 63.1367 29.1531 62.9533 29.0531 62.8C28.9531 62.6467 28.7665 62.53 28.4931 62.45C28.2198 62.37 27.8231 62.33 27.3031 62.33V61.07C27.7298 61.07 28.0631 61.03 28.3031 60.95C28.5431 60.87 28.7131 60.7567 28.8131 60.61C28.9198 60.4633 28.9731 60.2933 28.9731 60.1C28.9731 59.8467 28.8998 59.6533 28.7531 59.52C28.6065 59.38 28.3965 59.31 28.1231 59.31C27.8765 59.31 27.6498 59.3633 27.4431 59.47C27.2365 59.5767 27.0198 59.73 26.7931 59.93L25.8931 58.84C26.2398 58.5467 26.5998 58.32 26.9731 58.16C27.3531 58 27.7631 57.92 28.2031 57.92C28.7165 57.92 29.1631 58 29.5431 58.16C29.9298 58.3133 30.2265 58.5433 30.4331 58.85C30.6465 59.15 30.7531 59.5233 30.7531 59.97C30.7531 60.3367 30.6531 60.6633 30.4531 60.95C30.2531 61.23 29.9565 61.45 29.5631 61.61V61.66C29.8365 61.74 30.0798 61.8633 30.2931 62.03C30.5131 62.19 30.6831 62.39 30.8031 62.63C30.9298 62.87 30.9931 63.15 30.9931 63.47C30.9931 63.93 30.8665 64.3233 30.6131 64.65C30.3598 64.97 30.0231 65.2167 29.6031 65.39C29.1898 65.5567 28.7365 65.64 28.2431 65.64Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="67.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="67.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M72.3731 80.5V79.48C72.9931 78.9133 73.5365 78.3867 74.0031 77.9C74.4698 77.4133 74.8331 76.96 75.0931 76.54C75.3531 76.1133 75.4831 75.72 75.4831 75.36C75.4831 75.1333 75.4431 74.9433 75.3631 74.79C75.2898 74.63 75.1798 74.51 75.0331 74.43C74.8865 74.35 74.7131 74.31 74.5131 74.31C74.2598 74.31 74.0298 74.3833 73.8231 74.53C73.6231 74.67 73.4331 74.8367 73.2531 75.03L72.2831 74.07C72.6498 73.6767 73.0198 73.3867 73.3931 73.2C73.7731 73.0133 74.2265 72.92 74.7531 72.92C75.2331 72.92 75.6565 73.0167 76.0231 73.21C76.3898 73.4033 76.6765 73.6767 76.8831 74.03C77.0898 74.3767 77.1931 74.7867 77.1931 75.26C77.1931 75.6867 77.0831 76.1233 76.8631 76.57C76.6498 77.01 76.3731 77.4467 76.0331 77.88C75.6931 78.3067 75.3331 78.7133 74.9531 79.1C75.1398 79.0733 75.3465 79.05 75.5731 79.03C75.8065 79.01 76.0065 79 76.1731 79H77.5331V80.5H72.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab13.svg b/public/static/images/canvas/shape/re_180deg/plane_tab13.svg
new file mode 100644
index 00000000..de614d35
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(1 0 0 -1 54 66)" fill="#1083E3"/>
+<path d="M29 108H27L0 21H2L29 108Z" fill="#45CD7D"/>
+<path d="M27 108H29L56 64H54L27 108Z" fill="#45CD7D"/>
+<rect width="2" height="43" transform="matrix(1 0 0 -1 108 64)" fill="#EA10AC"/>
+<path d="M76 63V22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M50 77H100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="68.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="68.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M75.8031 46.5V42.2C75.8031 41.9667 75.8098 41.6933 75.8231 41.38C75.8431 41.06 75.8565 40.78 75.8631 40.54H75.8231C75.7298 40.7533 75.6331 40.9667 75.5331 41.18C75.4331 41.3933 75.3298 41.6067 75.2231 41.82L74.3731 43.29H78.2831V44.64H72.6731V43.41L75.2631 39.05H77.4631V46.5H75.8031Z" fill="#101010"/>
+<rect x="21.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="21.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M28.2431 65.64C27.8498 65.64 27.4931 65.5967 27.1731 65.51C26.8598 65.4233 26.5798 65.3033 26.3331 65.15C26.0865 64.99 25.8731 64.8067 25.6931 64.6L26.5131 63.48C26.7398 63.6867 26.9831 63.86 27.2431 64C27.5031 64.1333 27.7765 64.2 28.0631 64.2C28.2965 64.2 28.4965 64.17 28.6631 64.11C28.8365 64.0433 28.9698 63.9467 29.0631 63.82C29.1565 63.6933 29.2031 63.5367 29.2031 63.35C29.2031 63.1367 29.1531 62.9533 29.0531 62.8C28.9531 62.6467 28.7665 62.53 28.4931 62.45C28.2198 62.37 27.8231 62.33 27.3031 62.33V61.07C27.7298 61.07 28.0631 61.03 28.3031 60.95C28.5431 60.87 28.7131 60.7567 28.8131 60.61C28.9198 60.4633 28.9731 60.2933 28.9731 60.1C28.9731 59.8467 28.8998 59.6533 28.7531 59.52C28.6065 59.38 28.3965 59.31 28.1231 59.31C27.8765 59.31 27.6498 59.3633 27.4431 59.47C27.2365 59.5767 27.0198 59.73 26.7931 59.93L25.8931 58.84C26.2398 58.5467 26.5998 58.32 26.9731 58.16C27.3531 58 27.7631 57.92 28.2031 57.92C28.7165 57.92 29.1631 58 29.5431 58.16C29.9298 58.3133 30.2265 58.5433 30.4331 58.85C30.6465 59.15 30.7531 59.5233 30.7531 59.97C30.7531 60.3367 30.6531 60.6633 30.4531 60.95C30.2531 61.23 29.9565 61.45 29.5631 61.61V61.66C29.8365 61.74 30.0798 61.8633 30.2931 62.03C30.5131 62.19 30.6831 62.39 30.8031 62.63C30.9298 62.87 30.9931 63.15 30.9931 63.47C30.9931 63.93 30.8665 64.3233 30.6131 64.65C30.3598 64.97 30.0231 65.2167 29.6031 65.39C29.1898 65.5567 28.7365 65.64 28.2431 65.64Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="67.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="67.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M72.3731 80.5V79.48C72.9931 78.9133 73.5365 78.3867 74.0031 77.9C74.4698 77.4133 74.8331 76.96 75.0931 76.54C75.3531 76.1133 75.4831 75.72 75.4831 75.36C75.4831 75.1333 75.4431 74.9433 75.3631 74.79C75.2898 74.63 75.1798 74.51 75.0331 74.43C74.8865 74.35 74.7131 74.31 74.5131 74.31C74.2598 74.31 74.0298 74.3833 73.8231 74.53C73.6231 74.67 73.4331 74.8367 73.2531 75.03L72.2831 74.07C72.6498 73.6767 73.0198 73.3867 73.3931 73.2C73.7731 73.0133 74.2265 72.92 74.7531 72.92C75.2331 72.92 75.6565 73.0167 76.0231 73.21C76.3898 73.4033 76.6765 73.6767 76.8831 74.03C77.0898 74.3767 77.1931 74.7867 77.1931 75.26C77.1931 75.6867 77.0831 76.1233 76.8631 76.57C76.6498 77.01 76.3731 77.4467 76.0331 77.88C75.6931 78.3067 75.3331 78.7133 74.9531 79.1C75.1398 79.0733 75.3465 79.05 75.5731 79.03C75.8065 79.01 76.0065 79 76.1731 79H77.5331V80.5H72.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab14.svg b/public/static/images/canvas/shape/re_180deg/plane_tab14.svg
new file mode 100644
index 00000000..902506e5
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="42" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="42" height="2" transform="matrix(1 0 0 -1 68 21)" fill="#101010"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 89)" fill="#1083E3"/>
+<path d="M56 45H54L40 21H42L56 45Z" fill="#45CD7D"/>
+<path d="M54 45H56L70 21H68L54 45Z" fill="#45CD7D"/>
+<rect width="2" height="66" transform="matrix(1 0 0 -1 108 87)" fill="#EA10AC"/>
+<rect width="2" height="66" transform="matrix(1 0 0 -1 0 87)" fill="#EA10AC"/>
+<path d="M55 86V46" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M21 85V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M0 8L40 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M70 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.3031 69.64C53.9098 69.64 53.5531 69.5933 53.2331 69.5C52.9131 69.4133 52.6265 69.2933 52.3731 69.14C52.1265 68.98 51.9031 68.8033 51.7031 68.61L52.5131 67.49C52.6531 67.6233 52.8031 67.7433 52.9631 67.85C53.1231 67.9567 53.2931 68.0433 53.4731 68.11C53.6598 68.17 53.8498 68.2 54.0431 68.2C54.2831 68.2 54.4898 68.1567 54.6631 68.07C54.8365 67.9833 54.9698 67.8533 55.0631 67.68C55.1631 67.5067 55.2131 67.2933 55.2131 67.04C55.2131 66.6667 55.1098 66.3833 54.9031 66.19C54.7031 65.99 54.4431 65.89 54.1231 65.89C53.9165 65.89 53.7431 65.9167 53.6031 65.97C53.4698 66.0167 53.2931 66.11 53.0731 66.25L52.2931 65.74L52.4831 62.05H56.6631V63.54H54.0131L53.9031 64.8C54.0365 64.7467 54.1631 64.71 54.2831 64.69C54.4031 64.6633 54.5331 64.65 54.6731 64.65C55.0931 64.65 55.4798 64.7333 55.8331 64.9C56.1865 65.0667 56.4665 65.3233 56.6731 65.67C56.8865 66.0167 56.9931 66.46 56.9931 67C56.9931 67.5533 56.8665 68.03 56.6131 68.43C56.3665 68.8233 56.0398 69.1233 55.6331 69.33C55.2265 69.5367 54.7831 69.64 54.3031 69.64Z" fill="#101010"/>
+<rect x="13.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="13.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M20.8031 57.5V53.2C20.8031 52.9667 20.8098 52.6933 20.8231 52.38C20.8431 52.06 20.8565 51.78 20.8631 51.54H20.8231C20.7298 51.7533 20.6331 51.9667 20.5331 52.18C20.4331 52.3933 20.3298 52.6067 20.2231 52.82L19.3731 54.29H23.2831V55.64H17.6731V54.41L20.2631 50.05H22.4631V57.5H20.8031Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="12.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="12.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M17.3731 11.5V10.48C17.9931 9.91333 18.5365 9.38667 19.0031 8.9C19.4698 8.41333 19.8331 7.96 20.0931 7.54C20.3531 7.11333 20.4831 6.72 20.4831 6.36C20.4831 6.13333 20.4431 5.94333 20.3631 5.79C20.2898 5.63 20.1798 5.51 20.0331 5.43C19.8865 5.35 19.7131 5.31 19.5131 5.31C19.2598 5.31 19.0298 5.38333 18.8231 5.53C18.6231 5.67 18.4331 5.83667 18.2531 6.03L17.2831 5.07C17.6498 4.67667 18.0198 4.38667 18.3931 4.2C18.7731 4.01333 19.2265 3.92 19.7531 3.92C20.2331 3.92 20.6565 4.01667 21.0231 4.21C21.3898 4.40333 21.6765 4.67667 21.8831 5.03C22.0898 5.37667 22.1931 5.78667 22.1931 6.26C22.1931 6.68667 22.0831 7.12333 21.8631 7.57C21.6498 8.01 21.3731 8.44667 21.0331 8.88C20.6931 9.30667 20.3331 9.71333 19.9531 10.1C20.1398 10.0733 20.3465 10.05 20.5731 10.03C20.8065 10.01 21.0065 10 21.1731 10H22.5331V11.5H17.3731Z" fill="#101010"/>
+<rect x="82.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="82.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M89.7431 11.64C89.3498 11.64 88.9931 11.5967 88.6731 11.51C88.3598 11.4233 88.0798 11.3033 87.8331 11.15C87.5865 10.99 87.3731 10.8067 87.1931 10.6L88.0131 9.48C88.2398 9.68667 88.4831 9.86 88.7431 10C89.0031 10.1333 89.2765 10.2 89.5631 10.2C89.7965 10.2 89.9965 10.17 90.1631 10.11C90.3365 10.0433 90.4698 9.94667 90.5631 9.82C90.6565 9.69333 90.7031 9.53667 90.7031 9.35C90.7031 9.13667 90.6531 8.95333 90.5531 8.8C90.4531 8.64667 90.2665 8.53 89.9931 8.45C89.7198 8.37 89.3231 8.33 88.8031 8.33V7.07C89.2298 7.07 89.5631 7.03 89.8031 6.95C90.0431 6.87 90.2131 6.75667 90.3131 6.61C90.4198 6.46333 90.4731 6.29333 90.4731 6.1C90.4731 5.84667 90.3998 5.65333 90.2531 5.52C90.1065 5.38 89.8965 5.31 89.6231 5.31C89.3765 5.31 89.1498 5.36333 88.9431 5.47C88.7365 5.57667 88.5198 5.73 88.2931 5.93L87.3931 4.84C87.7398 4.54667 88.0998 4.32 88.4731 4.16C88.8531 4 89.2631 3.92 89.7031 3.92C90.2165 3.92 90.6631 4 91.0431 4.16C91.4298 4.31333 91.7265 4.54333 91.9331 4.85C92.1465 5.15 92.2531 5.52333 92.2531 5.97C92.2531 6.33667 92.1531 6.66333 91.9531 6.95C91.7531 7.23 91.4565 7.45 91.0631 7.61V7.66C91.3365 7.74 91.5798 7.86333 91.7931 8.03C92.0131 8.19 92.1831 8.39 92.3031 8.63C92.4298 8.87 92.4931 9.15 92.4931 9.47C92.4931 9.93 92.3665 10.3233 92.1131 10.65C91.8598 10.97 91.5231 11.2167 91.1031 11.39C90.6898 11.5567 90.2365 11.64 89.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab15.svg b/public/static/images/canvas/shape/re_180deg/plane_tab15.svg
new file mode 100644
index 00000000..81839b00
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="74" height="2" transform="matrix(1 0 0 -1 18 21)" fill="#101010"/>
+<path d="M19 66.5L54.5 106L91.5 66.5" stroke="#45CD7D" stroke-width="2"/>
+<rect width="2" height="46" transform="matrix(1 0 0 -1 90 67)" fill="#EA10AC"/>
+<rect width="2" height="46" transform="matrix(1 0 0 -1 18 67)" fill="#EA10AC"/>
+<path d="M55 103V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 67V20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M18 8L92 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="55.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="55.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M51.8731 66.5V65.48C52.4931 64.9133 53.0365 64.3867 53.5031 63.9C53.9698 63.4133 54.3331 62.96 54.5931 62.54C54.8531 62.1133 54.9831 61.72 54.9831 61.36C54.9831 61.1333 54.9431 60.9433 54.8631 60.79C54.7898 60.63 54.6798 60.51 54.5331 60.43C54.3865 60.35 54.2131 60.31 54.0131 60.31C53.7598 60.31 53.5298 60.3833 53.3231 60.53C53.1231 60.67 52.9331 60.8367 52.7531 61.03L51.7831 60.07C52.1498 59.6767 52.5198 59.3867 52.8931 59.2C53.2731 59.0133 53.7265 58.92 54.2531 58.92C54.7331 58.92 55.1565 59.0167 55.5231 59.21C55.8898 59.4033 56.1765 59.6767 56.3831 60.03C56.5898 60.3767 56.6931 60.7867 56.6931 61.26C56.6931 61.6867 56.5831 62.1233 56.3631 62.57C56.1498 63.01 55.8731 63.4467 55.5331 63.88C55.1931 64.3067 54.8331 64.7133 54.4531 65.1C54.6398 65.0733 54.8465 65.05 55.0731 65.03C55.3065 65.01 55.5065 65 55.6731 65H57.0331V66.5H51.8731Z" fill="#101010"/>
+<rect x="0.5" y="36.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="0.5" y="36.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M7.24313 47.64C6.84979 47.64 6.49313 47.5967 6.17313 47.51C5.85979 47.4233 5.57979 47.3033 5.33313 47.15C5.08646 46.99 4.87313 46.8067 4.69313 46.6L5.51313 45.48C5.73979 45.6867 5.98313 45.86 6.24313 46C6.50313 46.1333 6.77646 46.2 7.06313 46.2C7.29646 46.2 7.49646 46.17 7.66313 46.11C7.83646 46.0433 7.96979 45.9467 8.06313 45.82C8.15646 45.6933 8.20313 45.5367 8.20313 45.35C8.20313 45.1367 8.15313 44.9533 8.05313 44.8C7.95313 44.6467 7.76646 44.53 7.49313 44.45C7.21979 44.37 6.82313 44.33 6.30313 44.33V43.07C6.72979 43.07 7.06313 43.03 7.30313 42.95C7.54313 42.87 7.71313 42.7567 7.81313 42.61C7.91979 42.4633 7.97313 42.2933 7.97313 42.1C7.97313 41.8467 7.89979 41.6533 7.75313 41.52C7.60646 41.38 7.39646 41.31 7.12313 41.31C6.87646 41.31 6.64979 41.3633 6.44313 41.47C6.23646 41.5767 6.01979 41.73 5.79313 41.93L4.89313 40.84C5.23979 40.5467 5.59979 40.32 5.97313 40.16C6.35313 40 6.76313 39.92 7.20313 39.92C7.71646 39.92 8.16313 40 8.54313 40.16C8.92979 40.3133 9.22646 40.5433 9.43313 40.85C9.64646 41.15 9.75313 41.5233 9.75313 41.97C9.75313 42.3367 9.65313 42.6633 9.45312 42.95C9.25313 43.23 8.95646 43.45 8.56313 43.61V43.66C8.83646 43.74 9.07979 43.8633 9.29313 44.03C9.51313 44.19 9.68313 44.39 9.80313 44.63C9.92979 44.87 9.99313 45.15 9.99313 45.47C9.99313 45.93 9.86646 46.3233 9.61313 46.65C9.35979 46.97 9.02313 47.2167 8.60313 47.39C8.18979 47.5567 7.73646 47.64 7.24313 47.64Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab16.svg b/public/static/images/canvas/shape/re_180deg/plane_tab16.svg
new file mode 100644
index 00000000..df7fe001
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 20L26 39" stroke="#45CD7D" stroke-width="2"/>
+<path d="M109 20L84 39" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(1 0 0 -1 0 21)" fill="#101010"/>
+<rect width="60" height="2" transform="matrix(1 0 0 -1 25 89)" fill="#1083E3"/>
+<rect width="2" height="49" transform="matrix(1 0 0 -1 25 87)" fill="#EA10AC"/>
+<rect width="2" height="49" transform="matrix(1 0 0 -1 83 87)" fill="#EA10AC"/>
+<path d="M55 86V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M14 89V42" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M25 100H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 58.64C53.8498 58.64 53.4931 58.5967 53.1731 58.51C52.8598 58.4233 52.5798 58.3033 52.3331 58.15C52.0865 57.99 51.8731 57.8067 51.6931 57.6L52.5131 56.48C52.7398 56.6867 52.9831 56.86 53.2431 57C53.5031 57.1333 53.7765 57.2 54.0631 57.2C54.2965 57.2 54.4965 57.17 54.6631 57.11C54.8365 57.0433 54.9698 56.9467 55.0631 56.82C55.1565 56.6933 55.2031 56.5367 55.2031 56.35C55.2031 56.1367 55.1531 55.9533 55.0531 55.8C54.9531 55.6467 54.7665 55.53 54.4931 55.45C54.2198 55.37 53.8231 55.33 53.3031 55.33V54.07C53.7298 54.07 54.0631 54.03 54.3031 53.95C54.5431 53.87 54.7131 53.7567 54.8131 53.61C54.9198 53.4633 54.9731 53.2933 54.9731 53.1C54.9731 52.8467 54.8998 52.6533 54.7531 52.52C54.6065 52.38 54.3965 52.31 54.1231 52.31C53.8765 52.31 53.6498 52.3633 53.4431 52.47C53.2365 52.5767 53.0198 52.73 52.7931 52.93L51.8931 51.84C52.2398 51.5467 52.5998 51.32 52.9731 51.16C53.3531 51 53.7631 50.92 54.2031 50.92C54.7165 50.92 55.1631 51 55.5431 51.16C55.9298 51.3133 56.2265 51.5433 56.4331 51.85C56.6465 52.15 56.7531 52.5233 56.7531 52.97C56.7531 53.3367 56.6531 53.6633 56.4531 53.95C56.2531 54.23 55.9565 54.45 55.5631 54.61V54.66C55.8365 54.74 56.0798 54.8633 56.2931 55.03C56.5131 55.19 56.6831 55.39 56.8031 55.63C56.9298 55.87 56.9931 56.15 56.9931 56.47C56.9931 56.93 56.8665 57.3233 56.6131 57.65C56.3598 57.97 56.0231 58.2167 55.6031 58.39C55.1898 58.5567 54.7365 58.64 54.2431 58.64Z" fill="#101010"/>
+<rect x="6.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="6.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M13.8031 69.5V65.2C13.8031 64.9667 13.8098 64.6933 13.8231 64.38C13.8431 64.06 13.8565 63.78 13.8631 63.54H13.8231C13.7298 63.7533 13.6331 63.9667 13.5331 64.18C13.4331 64.3933 13.3298 64.6067 13.2231 64.82L12.3731 66.29H16.2831V67.64H10.6731V66.41L13.2631 62.05H15.4631V69.5H13.8031Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.8731 104V102.98C53.4931 102.413 54.0365 101.887 54.5031 101.4C54.9698 100.913 55.3331 100.46 55.5931 100.04C55.8531 99.6133 55.9831 99.22 55.9831 98.86C55.9831 98.6333 55.9431 98.4433 55.8631 98.29C55.7898 98.13 55.6798 98.01 55.5331 97.93C55.3865 97.85 55.2131 97.81 55.0131 97.81C54.7598 97.81 54.5298 97.8833 54.3231 98.03C54.1231 98.17 53.9331 98.3367 53.7531 98.53L52.7831 97.57C53.1498 97.1767 53.5198 96.8867 53.8931 96.7C54.2731 96.5133 54.7265 96.42 55.2531 96.42C55.7331 96.42 56.1565 96.5167 56.5231 96.71C56.8898 96.9033 57.1765 97.1767 57.3831 97.53C57.5898 97.8767 57.6931 98.2867 57.6931 98.76C57.6931 99.1867 57.5831 99.6233 57.3631 100.07C57.1498 100.51 56.8731 100.947 56.5331 101.38C56.1931 101.807 55.8331 102.213 55.4531 102.6C55.6398 102.573 55.8465 102.55 56.0731 102.53C56.3065 102.51 56.5065 102.5 56.6731 102.5H58.0331V104H52.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab17.svg b/public/static/images/canvas/shape/re_180deg/plane_tab17.svg
new file mode 100644
index 00000000..a684fd04
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M79.5 20L98.5 63L85 88.5" stroke="#45CD7D" stroke-width="2"/>
+<path d="M12 20L42 88.5" stroke="#45CD7D" stroke-width="2"/>
+<rect width="70" height="2" transform="matrix(1 0 0 -1 11 21)" fill="#101010"/>
+<rect width="45" height="2" transform="matrix(1 0 0 -1 41 89)" fill="#1083E3"/>
+<path d="M61 86V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M31.2344 88.6555L0.937094 26.663" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M11 8L81 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M41 100H85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="53.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="53.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M60.2431 58.64C59.8498 58.64 59.4931 58.5967 59.1731 58.51C58.8598 58.4233 58.5798 58.3033 58.3331 58.15C58.0865 57.99 57.8731 57.8067 57.6931 57.6L58.5131 56.48C58.7398 56.6867 58.9831 56.86 59.2431 57C59.5031 57.1333 59.7765 57.2 60.0631 57.2C60.2965 57.2 60.4965 57.17 60.6631 57.11C60.8365 57.0433 60.9698 56.9467 61.0631 56.82C61.1565 56.6933 61.2031 56.5367 61.2031 56.35C61.2031 56.1367 61.1531 55.9533 61.0531 55.8C60.9531 55.6467 60.7665 55.53 60.4931 55.45C60.2198 55.37 59.8231 55.33 59.3031 55.33V54.07C59.7298 54.07 60.0631 54.03 60.3031 53.95C60.5431 53.87 60.7131 53.7567 60.8131 53.61C60.9198 53.4633 60.9731 53.2933 60.9731 53.1C60.9731 52.8467 60.8998 52.6533 60.7531 52.52C60.6065 52.38 60.3965 52.31 60.1231 52.31C59.8765 52.31 59.6498 52.3633 59.4431 52.47C59.2365 52.5767 59.0198 52.73 58.7931 52.93L57.8931 51.84C58.2398 51.5467 58.5998 51.32 58.9731 51.16C59.3531 51 59.7631 50.92 60.2031 50.92C60.7165 50.92 61.1631 51 61.5431 51.16C61.9298 51.3133 62.2265 51.5433 62.4331 51.85C62.6465 52.15 62.7531 52.5233 62.7531 52.97C62.7531 53.3367 62.6531 53.6633 62.4531 53.95C62.2531 54.23 61.9565 54.45 61.5631 54.61V54.66C61.8365 54.74 62.0798 54.8633 62.2931 55.03C62.5131 55.19 62.6831 55.39 62.8031 55.63C62.9298 55.87 62.9931 56.15 62.9931 56.47C62.9931 56.93 62.8665 57.3233 62.6131 57.65C62.3598 57.97 62.0231 58.2167 61.6031 58.39C61.1898 58.5567 60.7365 58.64 60.2431 58.64Z" fill="#101010"/>
+<rect x="9.5" y="50.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="9.5" y="50.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M16.8031 61.5V57.2C16.8031 56.9667 16.8098 56.6933 16.8231 56.38C16.8431 56.06 16.8565 55.78 16.8631 55.54H16.8231C16.7298 55.7533 16.6331 55.9667 16.5331 56.18C16.4331 56.3933 16.3298 56.6067 16.2231 56.82L15.3731 58.29H19.2831V59.64H13.6731V58.41L16.2631 54.05H18.4631V61.5H16.8031Z" fill="#101010"/>
+<rect x="38.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M43.7331 11.5V10.06H45.3131V5.83H43.9431V4.73C44.3431 4.65667 44.6831 4.56667 44.9631 4.46C45.2498 4.35333 45.5231 4.21667 45.7831 4.05H47.0931V10.06H48.4331V11.5H43.7331Z" fill="#101010"/>
+<rect x="55.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M60.8731 104V102.98C61.4931 102.413 62.0365 101.887 62.5031 101.4C62.9698 100.913 63.3331 100.46 63.5931 100.04C63.8531 99.6133 63.9831 99.22 63.9831 98.86C63.9831 98.6333 63.9431 98.4433 63.8631 98.29C63.7898 98.13 63.6798 98.01 63.5331 97.93C63.3865 97.85 63.2131 97.81 63.0131 97.81C62.7598 97.81 62.5298 97.8833 62.3231 98.03C62.1231 98.17 61.9331 98.3367 61.7531 98.53L60.7831 97.57C61.1498 97.1767 61.5198 96.8867 61.8931 96.7C62.2731 96.5133 62.7265 96.42 63.2531 96.42C63.7331 96.42 64.1565 96.5167 64.5231 96.71C64.8898 96.9033 65.1765 97.1767 65.3831 97.53C65.5898 97.8767 65.6931 98.2867 65.6931 98.76C65.6931 99.1867 65.5831 99.6233 65.3631 100.07C65.1498 100.51 64.8731 100.947 64.5331 101.38C64.1931 101.807 63.8331 102.213 63.4531 102.6C63.6398 102.573 63.8465 102.55 64.0731 102.53C64.3065 102.51 64.5065 102.5 64.6731 102.5H66.0331V104H60.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_180deg/plane_tab18.svg b/public/static/images/canvas/shape/re_180deg/plane_tab18.svg
new file mode 100644
index 00000000..a3259150
--- /dev/null
+++ b/public/static/images/canvas/shape/re_180deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 20L60 106L109 74L78 20" stroke="#45CD7D" stroke-width="2"/>
+<rect width="69" height="2" transform="matrix(1 0 0 -1 10 21)" fill="#101010"/>
+<path d="M61 100V23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M49.9795 107.158L0.715247 25.9297" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M10 8L80 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="53.5" y="54.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="53.5" y="54.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M57.8731 65.5V64.48C58.4931 63.9133 59.0365 63.3867 59.5031 62.9C59.9698 62.4133 60.3331 61.96 60.5931 61.54C60.8531 61.1133 60.9831 60.72 60.9831 60.36C60.9831 60.1333 60.9431 59.9433 60.8631 59.79C60.7898 59.63 60.6798 59.51 60.5331 59.43C60.3865 59.35 60.2131 59.31 60.0131 59.31C59.7598 59.31 59.5298 59.3833 59.3231 59.53C59.1231 59.67 58.9331 59.8367 58.7531 60.03L57.7831 59.07C58.1498 58.6767 58.5198 58.3867 58.8931 58.2C59.2731 58.0133 59.7265 57.92 60.2531 57.92C60.7331 57.92 61.1565 58.0167 61.5231 58.21C61.8898 58.4033 62.1765 58.6767 62.3831 59.03C62.5898 59.3767 62.6931 59.7867 62.6931 60.26C62.6931 60.6867 62.5831 61.1233 62.3631 61.57C62.1498 62.01 61.8731 62.4467 61.5331 62.88C61.1931 63.3067 60.8331 63.7133 60.4531 64.1C60.6398 64.0733 60.8465 64.05 61.0731 64.03C61.3065 64.01 61.5065 64 61.6731 64H63.0331V65.5H57.8731Z" fill="#101010"/>
+<rect x="18.5" y="59.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="18.5" y="59.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M25.2431 70.64C24.8498 70.64 24.4931 70.5967 24.1731 70.51C23.8598 70.4233 23.5798 70.3033 23.3331 70.15C23.0865 69.99 22.8731 69.8067 22.6931 69.6L23.5131 68.48C23.7398 68.6867 23.9831 68.86 24.2431 69C24.5031 69.1333 24.7765 69.2 25.0631 69.2C25.2965 69.2 25.4965 69.17 25.6631 69.11C25.8365 69.0433 25.9698 68.9467 26.0631 68.82C26.1565 68.6933 26.2031 68.5367 26.2031 68.35C26.2031 68.1367 26.1531 67.9533 26.0531 67.8C25.9531 67.6467 25.7665 67.53 25.4931 67.45C25.2198 67.37 24.8231 67.33 24.3031 67.33V66.07C24.7298 66.07 25.0631 66.03 25.3031 65.95C25.5431 65.87 25.7131 65.7567 25.8131 65.61C25.9198 65.4633 25.9731 65.2933 25.9731 65.1C25.9731 64.8467 25.8998 64.6533 25.7531 64.52C25.6065 64.38 25.3965 64.31 25.1231 64.31C24.8765 64.31 24.6498 64.3633 24.4431 64.47C24.2365 64.5767 24.0198 64.73 23.7931 64.93L22.8931 63.84C23.2398 63.5467 23.5998 63.32 23.9731 63.16C24.3531 63 24.7631 62.92 25.2031 62.92C25.7165 62.92 26.1631 63 26.5431 63.16C26.9298 63.3133 27.2265 63.5433 27.4331 63.85C27.6465 64.15 27.7531 64.5233 27.7531 64.97C27.7531 65.3367 27.6531 65.6633 27.4531 65.95C27.2531 66.23 26.9565 66.45 26.5631 66.61V66.66C26.8365 66.74 27.0798 66.8633 27.2931 67.03C27.5131 67.19 27.6831 67.39 27.8031 67.63C27.9298 67.87 27.9931 68.15 27.9931 68.47C27.9931 68.93 27.8665 69.3233 27.6131 69.65C27.3598 69.97 27.0231 70.2167 26.6031 70.39C26.1898 70.5567 25.7365 70.64 25.2431 70.64Z" fill="#101010"/>
+<rect x="37.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="37.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M42.7331 11.5V10.06H44.3131V5.83H42.9431V4.73C43.3431 4.65667 43.6831 4.56667 43.9631 4.46C44.2498 4.35333 44.5231 4.21667 44.7831 4.05H46.0931V10.06H47.4331V11.5H42.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab01.svg b/public/static/images/canvas/shape/re_270deg/plane_tab01.svg
new file mode 100644
index 00000000..c225ea23
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M87 1L2 55.5L87 109" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 86.5 0)" fill="#101010"/>
+<path d="M8 55L84 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="45.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="45.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M50.3731 58.5V57.48C50.9931 56.9133 51.5365 56.3867 52.0031 55.9C52.4698 55.4133 52.8331 54.96 53.0931 54.54C53.3531 54.1133 53.4831 53.72 53.4831 53.36C53.4831 53.1333 53.4431 52.9433 53.3631 52.79C53.2898 52.63 53.1798 52.51 53.0331 52.43C52.8865 52.35 52.7131 52.31 52.5131 52.31C52.2598 52.31 52.0298 52.3833 51.8231 52.53C51.6231 52.67 51.4331 52.8367 51.2531 53.03L50.2831 52.07C50.6498 51.6767 51.0198 51.3867 51.3931 51.2C51.7731 51.0133 52.2265 50.92 52.7531 50.92C53.2331 50.92 53.6565 51.0167 54.0231 51.21C54.3898 51.4033 54.6765 51.6767 54.8831 52.03C55.0898 52.3767 55.1931 52.7867 55.1931 53.26C55.1931 53.6867 55.0831 54.1233 54.8631 54.57C54.6498 55.01 54.3731 55.4467 54.0331 55.88C53.6931 56.3067 53.3331 56.7133 52.9531 57.1C53.1398 57.0733 53.3465 57.05 53.5731 57.03C53.8065 57.01 54.0065 57 54.1731 57H55.5331V58.5H50.3731Z" fill="#101010"/>
+<rect x="92.5" y="62.5" width="15" height="15" rx="7.5" transform="rotate(-90 92.5 62.5)" fill="white"/>
+<rect x="92.5" y="62.5" width="15" height="15" rx="7.5" transform="rotate(-90 92.5 62.5)" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab02.svg b/public/static/images/canvas/shape/re_270deg/plane_tab02.svg
new file mode 100644
index 00000000..01b79908
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 1 1 0 73 0)" fill="#101010"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 11 0)" fill="#1083E3"/>
+<rect width="2" height="60" transform="matrix(0 1 1 0 13 0)" fill="#EA10AC"/>
+<rect width="2" height="60" transform="matrix(0 1 1 0 13 108)" fill="#EA10AC"/>
+<path d="M14 55L72 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M86 1L86 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="35.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M40.3731 58.5V57.48C40.9931 56.9133 41.5365 56.3867 42.0031 55.9C42.4698 55.4133 42.8331 54.96 43.0931 54.54C43.3531 54.1133 43.4831 53.72 43.4831 53.36C43.4831 53.1333 43.4431 52.9433 43.3631 52.79C43.2898 52.63 43.1798 52.51 43.0331 52.43C42.8865 52.35 42.7131 52.31 42.5131 52.31C42.2598 52.31 42.0298 52.3833 41.8231 52.53C41.6231 52.67 41.4331 52.8367 41.2531 53.03L40.2831 52.07C40.6498 51.6767 41.0198 51.3867 41.3931 51.2C41.7731 51.0133 42.2265 50.92 42.7531 50.92C43.2331 50.92 43.6565 51.0167 44.0231 51.21C44.3898 51.4033 44.6765 51.6767 44.8831 52.03C45.0898 52.3767 45.1931 52.7867 45.1931 53.26C45.1931 53.6867 45.0831 54.1233 44.8631 54.57C44.6498 55.01 44.3731 55.4467 44.0331 55.88C43.6931 56.3067 43.3331 56.7133 42.9531 57.1C43.1398 57.0733 43.3465 57.05 43.5731 57.03C43.8065 57.01 44.0065 57 44.1731 57H45.5331V58.5H40.3731Z" fill="#101010"/>
+<rect x="78.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="78.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M83.7331 58.5V57.06H85.3131V52.83H83.9431V51.73C84.3431 51.6567 84.6831 51.5667 84.9631 51.46C85.2498 51.3533 85.5231 51.2167 85.7831 51.05H87.0931V57.06H88.4331V58.5H83.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab03.svg b/public/static/images/canvas/shape/re_270deg/plane_tab03.svg
new file mode 100644
index 00000000..dc0c23e7
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="70" height="2" transform="matrix(0 1 1 0 19 20)" fill="#1083E3"/>
+<path d="M19 20V22L87 2V0L19 20Z" fill="#45CD7D"/>
+<path d="M19 88V90L87 110V108L19 88Z" fill="#45CD7D"/>
+<path d="M23 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 1L8 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M51.3731 58.5V57.48C51.9931 56.9133 52.5365 56.3867 53.0031 55.9C53.4698 55.4133 53.8331 54.96 54.0931 54.54C54.3531 54.1133 54.4831 53.72 54.4831 53.36C54.4831 53.1333 54.4431 52.9433 54.3631 52.79C54.2898 52.63 54.1798 52.51 54.0331 52.43C53.8865 52.35 53.7131 52.31 53.5131 52.31C53.2598 52.31 53.0298 52.3833 52.8231 52.53C52.6231 52.67 52.4331 52.8367 52.2531 53.03L51.2831 52.07C51.6498 51.6767 52.0198 51.3867 52.3931 51.2C52.7731 51.0133 53.2265 50.92 53.7531 50.92C54.2331 50.92 54.6565 51.0167 55.0231 51.21C55.3898 51.4033 55.6765 51.6767 55.8831 52.03C56.0898 52.3767 56.1931 52.7867 56.1931 53.26C56.1931 53.6867 56.0831 54.1233 55.8631 54.57C55.6498 55.01 55.3731 55.4467 55.0331 55.88C54.6931 56.3067 54.3331 56.7133 53.9531 57.1C54.1398 57.0733 54.3465 57.05 54.5731 57.03C54.8065 57.01 55.0065 57 55.1731 57H56.5331V58.5H51.3731Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 58.64C7.34979 58.64 6.99313 58.5967 6.67313 58.51C6.35979 58.4233 6.07979 58.3033 5.83313 58.15C5.58646 57.99 5.37313 57.8067 5.19313 57.6L6.01313 56.48C6.23979 56.6867 6.48313 56.86 6.74313 57C7.00313 57.1333 7.27646 57.2 7.56313 57.2C7.79646 57.2 7.99646 57.17 8.16313 57.11C8.33646 57.0433 8.46979 56.9467 8.56313 56.82C8.65646 56.6933 8.70313 56.5367 8.70313 56.35C8.70313 56.1367 8.65313 55.9533 8.55313 55.8C8.45313 55.6467 8.26646 55.53 7.99313 55.45C7.71979 55.37 7.32313 55.33 6.80313 55.33V54.07C7.22979 54.07 7.56313 54.03 7.80313 53.95C8.04313 53.87 8.21313 53.7567 8.31313 53.61C8.41979 53.4633 8.47313 53.2933 8.47313 53.1C8.47313 52.8467 8.39979 52.6533 8.25313 52.52C8.10646 52.38 7.89646 52.31 7.62313 52.31C7.37646 52.31 7.14979 52.3633 6.94313 52.47C6.73646 52.5767 6.51979 52.73 6.29313 52.93L5.39313 51.84C5.73979 51.5467 6.09979 51.32 6.47313 51.16C6.85313 51 7.26313 50.92 7.70313 50.92C8.21646 50.92 8.66313 51 9.04313 51.16C9.42979 51.3133 9.72646 51.5433 9.93313 51.85C10.1465 52.15 10.2531 52.5233 10.2531 52.97C10.2531 53.3367 10.1531 53.6633 9.95312 53.95C9.75313 54.23 9.45646 54.45 9.06313 54.61V54.66C9.33646 54.74 9.57979 54.8633 9.79313 55.03C10.0131 55.19 10.1831 55.39 10.3031 55.63C10.4298 55.87 10.4931 56.15 10.4931 56.47C10.4931 56.93 10.3665 57.3233 10.1131 57.65C9.85979 57.97 9.52313 58.2167 9.10313 58.39C8.68979 58.5567 8.23646 58.64 7.74313 58.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab04.svg b/public/static/images/canvas/shape/re_270deg/plane_tab04.svg
new file mode 100644
index 00000000..5f61b284
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="91" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<path d="M0 89L0 91L87 2V0L0 89Z" fill="#45CD7D"/>
+<rect width="2" height="87" transform="matrix(0 1 1 0 0 89)" fill="#EA10AC"/>
+<path d="M0 102L89 102" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 90" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="94.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="37.5" y="94.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M42.3731 105.5V104.48C42.9931 103.913 43.5365 103.387 44.0031 102.9C44.4698 102.413 44.8331 101.96 45.0931 101.54C45.3531 101.113 45.4831 100.72 45.4831 100.36C45.4831 100.133 45.4431 99.9433 45.3631 99.79C45.2898 99.63 45.1798 99.51 45.0331 99.43C44.8865 99.35 44.7131 99.31 44.5131 99.31C44.2598 99.31 44.0298 99.3833 43.8231 99.53C43.6231 99.67 43.4331 99.8367 43.2531 100.03L42.2831 99.07C42.6498 98.6767 43.0198 98.3867 43.3931 98.2C43.7731 98.0133 44.2265 97.92 44.7531 97.92C45.2331 97.92 45.6565 98.0167 46.0231 98.21C46.3898 98.4033 46.6765 98.6767 46.8831 99.03C47.0898 99.3767 47.1931 99.7867 47.1931 100.26C47.1931 100.687 47.0831 101.123 46.8631 101.57C46.6498 102.01 46.3731 102.447 46.0331 102.88C45.6931 103.307 45.3331 103.713 44.9531 104.1C45.1398 104.073 45.3465 104.05 45.5731 104.03C45.8065 104.01 46.0065 104 46.1731 104H47.5331V105.5H42.3731Z" fill="#101010"/>
+<rect x="92.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="38.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 49.5V48.06H99.3131V43.83H97.9431V42.73C98.3431 42.6567 98.6831 42.5667 98.9631 42.46C99.2498 42.3533 99.5231 42.2167 99.7831 42.05H101.093V48.06H102.433V49.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab05.svg b/public/static/images/canvas/shape/re_270deg/plane_tab05.svg
new file mode 100644
index 00000000..d02eb0fb
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="71" height="2" transform="matrix(0 1 1 0 87 20)" fill="#101010"/>
+<rect width="2" height="52" transform="matrix(0 1 1 0 35 20)" fill="#EA10AC"/>
+<rect width="2" height="87" transform="matrix(0 1 1 0 0 89)" fill="#EA10AC"/>
+<path d="M34.5 20L0 89H2L36.5 20H34.5Z" fill="#45CD7D"/>
+<path d="M0 102L89 102" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M35 9L89 9" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 20L100 91" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="37.5" y="94.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="37.5" y="94.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3731 105.5V104.48C42.9931 103.913 43.5365 103.387 44.0031 102.9C44.4698 102.413 44.8331 101.96 45.0931 101.54C45.3531 101.113 45.4831 100.72 45.4831 100.36C45.4831 100.133 45.4431 99.9433 45.3631 99.79C45.2898 99.63 45.1798 99.51 45.0331 99.43C44.8865 99.35 44.7131 99.31 44.5131 99.31C44.2598 99.31 44.0298 99.3833 43.8231 99.53C43.6231 99.67 43.4331 99.8367 43.2531 100.03L42.2831 99.07C42.6498 98.6767 43.0198 98.3867 43.3931 98.2C43.7731 98.0133 44.2265 97.92 44.7531 97.92C45.2331 97.92 45.6565 98.0167 46.0231 98.21C46.3898 98.4033 46.6765 98.6767 46.8831 99.03C47.0898 99.3767 47.1931 99.7867 47.1931 100.26C47.1931 100.687 47.0831 101.123 46.8631 101.57C46.6498 102.01 46.3731 102.447 46.0331 102.88C45.6931 103.307 45.3331 103.713 44.9531 104.1C45.1398 104.073 45.3465 104.05 45.5731 104.03C45.8065 104.01 46.0065 104 46.1731 104H47.5331V105.5H42.3731Z" fill="#101010"/>
+<rect x="54.5" y="1.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="54.5" y="1.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M61.7431 12.64C61.3498 12.64 60.9931 12.5967 60.6731 12.51C60.3598 12.4233 60.0798 12.3033 59.8331 12.15C59.5865 11.99 59.3731 11.8067 59.1931 11.6L60.0131 10.48C60.2398 10.6867 60.4831 10.86 60.7431 11C61.0031 11.1333 61.2765 11.2 61.5631 11.2C61.7965 11.2 61.9965 11.17 62.1631 11.11C62.3365 11.0433 62.4698 10.9467 62.5631 10.82C62.6565 10.6933 62.7031 10.5367 62.7031 10.35C62.7031 10.1367 62.6531 9.95333 62.5531 9.8C62.4531 9.64667 62.2665 9.53 61.9931 9.45C61.7198 9.37 61.3231 9.33 60.8031 9.33V8.07C61.2298 8.07 61.5631 8.03 61.8031 7.95C62.0431 7.87 62.2131 7.75667 62.3131 7.61C62.4198 7.46333 62.4731 7.29333 62.4731 7.1C62.4731 6.84667 62.3998 6.65333 62.2531 6.52C62.1065 6.38 61.8965 6.31 61.6231 6.31C61.3765 6.31 61.1498 6.36333 60.9431 6.47C60.7365 6.57667 60.5198 6.73 60.2931 6.93L59.3931 5.84C59.7398 5.54667 60.0998 5.32 60.4731 5.16C60.8531 5 61.2631 4.92 61.7031 4.92C62.2165 4.92 62.6631 5 63.0431 5.16C63.4298 5.31333 63.7265 5.54333 63.9331 5.85C64.1465 6.15 64.2531 6.52333 64.2531 6.97C64.2531 7.33667 64.1531 7.66333 63.9531 7.95C63.7531 8.23 63.4565 8.45 63.0631 8.61V8.66C63.3365 8.74 63.5798 8.86333 63.7931 9.03C64.0131 9.19 64.1831 9.39 64.3031 9.63C64.4298 9.87 64.4931 10.15 64.4931 10.47C64.4931 10.93 64.3665 11.3233 64.1131 11.65C63.8598 11.97 63.5231 12.2167 63.1031 12.39C62.6898 12.5567 62.2365 12.64 61.7431 12.64Z" fill="#101010"/>
+<rect x="92.5" y="48.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="48.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 59.5V58.06H99.3131V53.83H97.9431V52.73C98.3431 52.6567 98.6831 52.5667 98.9631 52.46C99.2498 52.3533 99.5231 52.2167 99.7831 52.05H101.093V58.06H102.433V59.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab06.svg b/public/static/images/canvas/shape/re_270deg/plane_tab06.svg
new file mode 100644
index 00000000..d1ddabf5
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="2" transform="matrix(0 1 1 0 82 20)" fill="#1083E3"/>
+<path d="M16 47V49L82 22V20L16 47Z" fill="#45CD7D"/>
+<path d="M16 115V117L82 90V88L16 115Z" fill="#45CD7D"/>
+<path d="M16 47L16 117L18 116.213L18 47H16Z" fill="#1083E3"/>
+<path d="M16 33L84 7" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M95 27L95 98" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M20 70L80 70" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="42.5" y="13.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="42.5" y="13.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M49.7431 24.64C49.3498 24.64 48.9931 24.5967 48.6731 24.51C48.3598 24.4233 48.0798 24.3033 47.8331 24.15C47.5865 23.99 47.3731 23.8067 47.1931 23.6L48.0131 22.48C48.2398 22.6867 48.4831 22.86 48.7431 23C49.0031 23.1333 49.2765 23.2 49.5631 23.2C49.7965 23.2 49.9965 23.17 50.1631 23.11C50.3365 23.0433 50.4698 22.9467 50.5631 22.82C50.6565 22.6933 50.7031 22.5367 50.7031 22.35C50.7031 22.1367 50.6531 21.9533 50.5531 21.8C50.4531 21.6467 50.2665 21.53 49.9931 21.45C49.7198 21.37 49.3231 21.33 48.8031 21.33V20.07C49.2298 20.07 49.5631 20.03 49.8031 19.95C50.0431 19.87 50.2131 19.7567 50.3131 19.61C50.4198 19.4633 50.4731 19.2933 50.4731 19.1C50.4731 18.8467 50.3998 18.6533 50.2531 18.52C50.1065 18.38 49.8965 18.31 49.6231 18.31C49.3765 18.31 49.1498 18.3633 48.9431 18.47C48.7365 18.5767 48.5198 18.73 48.2931 18.93L47.3931 17.84C47.7398 17.5467 48.0998 17.32 48.4731 17.16C48.8531 17 49.2631 16.92 49.7031 16.92C50.2165 16.92 50.6631 17 51.0431 17.16C51.4298 17.3133 51.7265 17.5433 51.9331 17.85C52.1465 18.15 52.2531 18.5233 52.2531 18.97C52.2531 19.3367 52.1531 19.6633 51.9531 19.95C51.7531 20.23 51.4565 20.45 51.0631 20.61V20.66C51.3365 20.74 51.5798 20.8633 51.7931 21.03C52.0131 21.19 52.1831 21.39 52.3031 21.63C52.4298 21.87 52.4931 22.15 52.4931 22.47C52.4931 22.93 52.3665 23.3233 52.1131 23.65C51.8598 23.97 51.5231 24.2167 51.1031 24.39C50.6898 24.5567 50.2365 24.64 49.7431 24.64Z" fill="#101010"/>
+<rect x="87.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="87.5" y="55.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M92.7331 66.5V65.06H94.3131V60.83H92.9431V59.73C93.3431 59.6567 93.6831 59.5667 93.9631 59.46C94.2498 59.3533 94.5231 59.2167 94.7831 59.05H96.0931V65.06H97.4331V66.5H92.7331Z" fill="#101010"/>
+<rect x="43.5" y="62.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="62.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M48.3731 73.5V72.48C48.9931 71.9133 49.5365 71.3867 50.0031 70.9C50.4698 70.4133 50.8331 69.96 51.0931 69.54C51.3531 69.1133 51.4831 68.72 51.4831 68.36C51.4831 68.1333 51.4431 67.9433 51.3631 67.79C51.2898 67.63 51.1798 67.51 51.0331 67.43C50.8865 67.35 50.7131 67.31 50.5131 67.31C50.2598 67.31 50.0298 67.3833 49.8231 67.53C49.6231 67.67 49.4331 67.8367 49.2531 68.03L48.2831 67.07C48.6498 66.6767 49.0198 66.3867 49.3931 66.2C49.7731 66.0133 50.2265 65.92 50.7531 65.92C51.2331 65.92 51.6565 66.0167 52.0231 66.21C52.3898 66.4033 52.6765 66.6767 52.8831 67.03C53.0898 67.3767 53.1931 67.7867 53.1931 68.26C53.1931 68.6867 53.0831 69.1233 52.8631 69.57C52.6498 70.01 52.3731 70.4467 52.0331 70.88C51.6931 71.3067 51.3331 71.7133 50.9531 72.1C51.1398 72.0733 51.3465 72.05 51.5731 72.03C51.8065 72.01 52.0065 72 52.1731 72H53.5331V73.5H48.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab07.svg b/public/static/images/canvas/shape/re_270deg/plane_tab07.svg
new file mode 100644
index 00000000..bf213a02
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 1 1 0 0 3)" fill="#1083E3"/>
+<rect width="54" height="2" transform="matrix(0 1 1 0 60 31)" fill="#101010"/>
+<rect width="30" height="2" transform="matrix(0 1 1 0 87 3)" fill="#101010"/>
+<rect width="30" height="2" transform="matrix(0 1 1 0 87 83)" fill="#101010"/>
+<rect width="2" height="85" transform="matrix(0 1 1 0 2 3)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(0 1 1 0 2 111)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(0 1 1 0 60 83)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(0 1 1 0 60 31)" fill="#EA10AC"/>
+<path d="M3 59L60 59" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M61 18L86 18" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 4V32" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 84V112" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M77 35L77 81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="24.5" y="51.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="24.5" y="51.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M31.8031 62.5V58.2C31.8031 57.9667 31.8098 57.6933 31.8231 57.38C31.8431 57.06 31.8565 56.78 31.8631 56.54H31.8231C31.7298 56.7533 31.6331 56.9667 31.5331 57.18C31.4331 57.3933 31.3298 57.6067 31.2231 57.82L30.3731 59.29H34.2831V60.64H28.6731V59.41L31.2631 55.05H33.4631V62.5H31.8031Z" fill="#101010"/>
+<rect x="66.5" y="10.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="66.5" y="10.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M73.8031 21.64C73.4098 21.64 73.0531 21.5933 72.7331 21.5C72.4131 21.4133 72.1265 21.2933 71.8731 21.14C71.6265 20.98 71.4031 20.8033 71.2031 20.61L72.0131 19.49C72.1531 19.6233 72.3031 19.7433 72.4631 19.85C72.6231 19.9567 72.7931 20.0433 72.9731 20.11C73.1598 20.17 73.3498 20.2 73.5431 20.2C73.7831 20.2 73.9898 20.1567 74.1631 20.07C74.3365 19.9833 74.4698 19.8533 74.5631 19.68C74.6631 19.5067 74.7131 19.2933 74.7131 19.04C74.7131 18.6667 74.6098 18.3833 74.4031 18.19C74.2031 17.99 73.9431 17.89 73.6231 17.89C73.4165 17.89 73.2431 17.9167 73.1031 17.97C72.9698 18.0167 72.7931 18.11 72.5731 18.25L71.7931 17.74L71.9831 14.05H76.1631V15.54H73.5131L73.4031 16.8C73.5365 16.7467 73.6631 16.71 73.7831 16.69C73.9031 16.6633 74.0331 16.65 74.1731 16.65C74.5931 16.65 74.9798 16.7333 75.3331 16.9C75.6865 17.0667 75.9665 17.3233 76.1731 17.67C76.3865 18.0167 76.4931 18.46 76.4931 19C76.4931 19.5533 76.3665 20.03 76.1131 20.43C75.8665 20.8233 75.5398 21.1233 75.1331 21.33C74.7265 21.5367 74.2831 21.64 73.8031 21.64Z" fill="#101010"/>
+<rect x="92.5" y="10.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="10.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 21.5V20.06H99.3131V15.83H97.9431V14.73C98.3431 14.6567 98.6831 14.5667 98.9631 14.46C99.2498 14.3533 99.5231 14.2167 99.7831 14.05H101.093V20.06H102.433V21.5H97.7331Z" fill="#101010"/>
+<rect x="92.5" y="90.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="90.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 101.64C99.3498 101.64 98.9931 101.597 98.6731 101.51C98.3598 101.423 98.0798 101.303 97.8331 101.15C97.5865 100.99 97.3731 100.807 97.1931 100.6L98.0131 99.48C98.2398 99.6867 98.4831 99.86 98.7431 100C99.0031 100.133 99.2765 100.2 99.5631 100.2C99.7965 100.2 99.9965 100.17 100.163 100.11C100.336 100.043 100.47 99.9467 100.563 99.82C100.656 99.6933 100.703 99.5367 100.703 99.35C100.703 99.1367 100.653 98.9533 100.553 98.8C100.453 98.6467 100.266 98.53 99.9931 98.45C99.7198 98.37 99.3231 98.33 98.8031 98.33V97.07C99.2298 97.07 99.5631 97.03 99.8031 96.95C100.043 96.87 100.213 96.7567 100.313 96.61C100.42 96.4633 100.473 96.2933 100.473 96.1C100.473 95.8467 100.4 95.6533 100.253 95.52C100.106 95.38 99.8965 95.31 99.6231 95.31C99.3765 95.31 99.1498 95.3633 98.9431 95.47C98.7365 95.5767 98.5198 95.73 98.2931 95.93L97.3931 94.84C97.7398 94.5467 98.0998 94.32 98.4731 94.16C98.8531 94 99.2631 93.92 99.7031 93.92C100.216 93.92 100.663 94 101.043 94.16C101.43 94.3133 101.726 94.5433 101.933 94.85C102.146 95.15 102.253 95.5233 102.253 95.97C102.253 96.3367 102.153 96.6633 101.953 96.95C101.753 97.23 101.456 97.45 101.063 97.61V97.66C101.336 97.74 101.58 97.8633 101.793 98.03C102.013 98.19 102.183 98.39 102.303 98.63C102.43 98.87 102.493 99.15 102.493 99.47C102.493 99.93 102.366 100.323 102.113 100.65C101.86 100.97 101.523 101.217 101.103 101.39C100.69 101.557 100.236 101.64 99.7431 101.64Z" fill="#101010"/>
+<rect x="69.5" y="50.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="50.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M74.3731 61.5V60.48C74.9931 59.9133 75.5365 59.3867 76.0031 58.9C76.4698 58.4133 76.8331 57.96 77.0931 57.54C77.3531 57.1133 77.4831 56.72 77.4831 56.36C77.4831 56.1333 77.4431 55.9433 77.3631 55.79C77.2898 55.63 77.1798 55.51 77.0331 55.43C76.8865 55.35 76.7131 55.31 76.5131 55.31C76.2598 55.31 76.0298 55.3833 75.8231 55.53C75.6231 55.67 75.4331 55.8367 75.2531 56.03L74.2831 55.07C74.6498 54.6767 75.0198 54.3867 75.3931 54.2C75.7731 54.0133 76.2265 53.92 76.7531 53.92C77.2331 53.92 77.6565 54.0167 78.0231 54.21C78.3898 54.4033 78.6765 54.6767 78.8831 55.03C79.0898 55.3767 79.1931 55.7867 79.1931 56.26C79.1931 56.6867 79.0831 57.1233 78.8631 57.57C78.6498 58.01 78.3731 58.4467 78.0331 58.88C77.6931 59.3067 77.3331 59.7133 76.9531 60.1C77.1398 60.0733 77.3465 60.05 77.5731 60.03C77.8065 60.01 78.0065 60 78.1731 60H79.5331V61.5H74.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab08.svg b/public/static/images/canvas/shape/re_270deg/plane_tab08.svg
new file mode 100644
index 00000000..cd9858e8
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 1 1 0 0 64)" fill="#1083E3"/>
+<rect width="64" height="2" transform="matrix(0 1 1 0 25 2)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="2" height="62" transform="matrix(0 1 1 0 25 0)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(0 1 1 0 2 108)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(0 1 1 0 0 64)" fill="#EA10AC"/>
+<path d="M28 31L85 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M3 87L86 87" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M14 0L14 63" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="49.5" y="23.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="49.5" y="23.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M56.8031 34.5V30.2C56.8031 29.9667 56.8098 29.6933 56.8231 29.38C56.8431 29.06 56.8565 28.78 56.8631 28.54H56.8231C56.7298 28.7533 56.6331 28.9667 56.5331 29.18C56.4331 29.3933 56.3298 29.6067 56.2231 29.82L55.3731 31.29H59.2831V32.64H53.6731V31.41L56.2631 27.05H58.4631V34.5H56.8031Z" fill="#101010"/>
+<rect x="37.5" y="79.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="37.5" y="79.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M44.2431 90.64C43.8498 90.64 43.4931 90.5967 43.1731 90.51C42.8598 90.4233 42.5798 90.3033 42.3331 90.15C42.0865 89.99 41.8731 89.8067 41.6931 89.6L42.5131 88.48C42.7398 88.6867 42.9831 88.86 43.2431 89C43.5031 89.1333 43.7765 89.2 44.0631 89.2C44.2965 89.2 44.4965 89.17 44.6631 89.11C44.8365 89.0433 44.9698 88.9467 45.0631 88.82C45.1565 88.6933 45.2031 88.5367 45.2031 88.35C45.2031 88.1367 45.1531 87.9533 45.0531 87.8C44.9531 87.6467 44.7665 87.53 44.4931 87.45C44.2198 87.37 43.8231 87.33 43.3031 87.33V86.07C43.7298 86.07 44.0631 86.03 44.3031 85.95C44.5431 85.87 44.7131 85.7567 44.8131 85.61C44.9198 85.4633 44.9731 85.2933 44.9731 85.1C44.9731 84.8467 44.8998 84.6533 44.7531 84.52C44.6065 84.38 44.3965 84.31 44.1231 84.31C43.8765 84.31 43.6498 84.3633 43.4431 84.47C43.2365 84.5767 43.0198 84.73 42.7931 84.93L41.8931 83.84C42.2398 83.5467 42.5998 83.32 42.9731 83.16C43.3531 83 43.7631 82.92 44.2031 82.92C44.7165 82.92 45.1631 83 45.5431 83.16C45.9298 83.3133 46.2265 83.5433 46.4331 83.85C46.6465 84.15 46.7531 84.5233 46.7531 84.97C46.7531 85.3367 46.6531 85.6633 46.4531 85.95C46.2531 86.23 45.9565 86.45 45.5631 86.61V86.66C45.8365 86.74 46.0798 86.8633 46.2931 87.03C46.5131 87.19 46.6831 87.39 46.8031 87.63C46.9298 87.87 46.9931 88.15 46.9931 88.47C46.9931 88.93 46.8665 89.3233 46.6131 89.65C46.3598 89.97 46.0231 90.2167 45.6031 90.39C45.1898 90.5567 44.7365 90.64 44.2431 90.64Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="6.5" y="24.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="6.5" y="24.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M11.3731 35.5V34.48C11.9931 33.9133 12.5365 33.3867 13.0031 32.9C13.4698 32.4133 13.8331 31.96 14.0931 31.54C14.3531 31.1133 14.4831 30.72 14.4831 30.36C14.4831 30.1333 14.4431 29.9433 14.3631 29.79C14.2898 29.63 14.1798 29.51 14.0331 29.43C13.8865 29.35 13.7131 29.31 13.5131 29.31C13.2598 29.31 13.0298 29.3833 12.8231 29.53C12.6231 29.67 12.4331 29.8367 12.2531 30.03L11.2831 29.07C11.6498 28.6767 12.0198 28.3867 12.3931 28.2C12.7731 28.0133 13.2265 27.92 13.7531 27.92C14.2331 27.92 14.6565 28.0167 15.0231 28.21C15.3898 28.4033 15.6765 28.6767 15.8831 29.03C16.0898 29.3767 16.1931 29.7867 16.1931 30.26C16.1931 30.6867 16.0831 31.1233 15.8631 31.57C15.6498 32.01 15.3731 32.4467 15.0331 32.88C14.6931 33.3067 14.3331 33.7133 13.9531 34.1C14.1398 34.0733 14.3465 34.05 14.5731 34.03C14.8065 34.01 15.0065 34 15.1731 34H16.5331V35.5H11.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab09.svg b/public/static/images/canvas/shape/re_270deg/plane_tab09.svg
new file mode 100644
index 00000000..f82ee8cc
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 1 1 0 19 64)" fill="#1083E3"/>
+<path d="M40 12L40 66H42L42 11.5L40 12Z" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<path d="M40 10L40 12L87 2V0L40 10Z" fill="#45CD7D"/>
+<rect width="2" height="68" transform="matrix(0 1 1 0 19 108)" fill="#EA10AC"/>
+<rect width="2" height="23" transform="matrix(0 1 1 0 19 64)" fill="#EA10AC"/>
+<path d="M43 31L86 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M22 87L86 87" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 11L29 61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 64L8 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="23.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="57.5" y="23.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M64.3031 34.64C63.9098 34.64 63.5531 34.5933 63.2331 34.5C62.9131 34.4133 62.6265 34.2933 62.3731 34.14C62.1265 33.98 61.9031 33.8033 61.7031 33.61L62.5131 32.49C62.6531 32.6233 62.8031 32.7433 62.9631 32.85C63.1231 32.9567 63.2931 33.0433 63.4731 33.11C63.6598 33.17 63.8498 33.2 64.0431 33.2C64.2831 33.2 64.4898 33.1567 64.6631 33.07C64.8365 32.9833 64.9698 32.8533 65.0631 32.68C65.1631 32.5067 65.2131 32.2933 65.2131 32.04C65.2131 31.6667 65.1098 31.3833 64.9031 31.19C64.7031 30.99 64.4431 30.89 64.1231 30.89C63.9165 30.89 63.7431 30.9167 63.6031 30.97C63.4698 31.0167 63.2931 31.11 63.0731 31.25L62.2931 30.74L62.4831 27.05H66.6631V28.54H64.0131L63.9031 29.8C64.0365 29.7467 64.1631 29.71 64.2831 29.69C64.4031 29.6633 64.5331 29.65 64.6731 29.65C65.0931 29.65 65.4798 29.7333 65.8331 29.9C66.1865 30.0667 66.4665 30.3233 66.6731 30.67C66.8865 31.0167 66.9931 31.46 66.9931 32C66.9931 32.5533 66.8665 33.03 66.6131 33.43C66.3665 33.8233 66.0398 34.1233 65.6331 34.33C65.2265 34.5367 64.7831 34.64 64.3031 34.64Z" fill="#101010"/>
+<rect x="47.5" y="79.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="79.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 90.5V86.2C54.8031 85.9667 54.8098 85.6933 54.8231 85.38C54.8431 85.06 54.8565 84.78 54.8631 84.54H54.8231C54.7298 84.7533 54.6331 84.9667 54.5331 85.18C54.4331 85.3933 54.3298 85.6067 54.2231 85.82L53.3731 87.29H57.2831V88.64H51.6731V87.41L54.2631 83.05H56.4631V90.5H54.8031Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="21.5" y="28.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="28.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 39.5V38.48C26.9931 37.9133 27.5365 37.3867 28.0031 36.9C28.4698 36.4133 28.8331 35.96 29.0931 35.54C29.3531 35.1133 29.4831 34.72 29.4831 34.36C29.4831 34.1333 29.4431 33.9433 29.3631 33.79C29.2898 33.63 29.1798 33.51 29.0331 33.43C28.8865 33.35 28.7131 33.31 28.5131 33.31C28.2598 33.31 28.0298 33.3833 27.8231 33.53C27.6231 33.67 27.4331 33.8367 27.2531 34.03L26.2831 33.07C26.6498 32.6767 27.0198 32.3867 27.3931 32.2C27.7731 32.0133 28.2265 31.92 28.7531 31.92C29.2331 31.92 29.6565 32.0167 30.0231 32.21C30.3898 32.4033 30.6765 32.6767 30.8831 33.03C31.0898 33.3767 31.1931 33.7867 31.1931 34.26C31.1931 34.6867 31.0831 35.1233 30.8631 35.57C30.6498 36.01 30.3731 36.4467 30.0331 36.88C29.6931 37.3067 29.3331 37.7133 28.9531 38.1C29.1398 38.0733 29.3465 38.05 29.5731 38.03C29.8065 38.01 30.0065 38 30.1731 38H31.5331V39.5H26.3731Z" fill="#101010"/>
+<rect x="0.5" y="79.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="79.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 90.64C7.34979 90.64 6.99313 90.5967 6.67313 90.51C6.35979 90.4233 6.07979 90.3033 5.83313 90.15C5.58646 89.99 5.37313 89.8067 5.19313 89.6L6.01313 88.48C6.23979 88.6867 6.48313 88.86 6.74313 89C7.00313 89.1333 7.27646 89.2 7.56313 89.2C7.79646 89.2 7.99646 89.17 8.16313 89.11C8.33646 89.0433 8.46979 88.9467 8.56313 88.82C8.65646 88.6933 8.70313 88.5367 8.70313 88.35C8.70313 88.1367 8.65313 87.9533 8.55313 87.8C8.45313 87.6467 8.26646 87.53 7.99313 87.45C7.71979 87.37 7.32313 87.33 6.80313 87.33V86.07C7.22979 86.07 7.56313 86.03 7.80313 85.95C8.04313 85.87 8.21313 85.7567 8.31313 85.61C8.41979 85.4633 8.47313 85.2933 8.47313 85.1C8.47313 84.8467 8.39979 84.6533 8.25313 84.52C8.10646 84.38 7.89646 84.31 7.62313 84.31C7.37646 84.31 7.14979 84.3633 6.94313 84.47C6.73646 84.5767 6.51979 84.73 6.29313 84.93L5.39313 83.84C5.73979 83.5467 6.09979 83.32 6.47313 83.16C6.85313 83 7.26313 82.92 7.70313 82.92C8.21646 82.92 8.66313 83 9.04313 83.16C9.42979 83.3133 9.72646 83.5433 9.93313 83.85C10.1465 84.15 10.2531 84.5233 10.2531 84.97C10.2531 85.3367 10.1531 85.6633 9.95312 85.95C9.75313 86.23 9.45646 86.45 9.06313 86.61V86.66C9.33646 86.74 9.57979 86.8633 9.79313 87.03C10.0131 87.19 10.1831 87.39 10.3031 87.63C10.4298 87.87 10.4931 88.15 10.4931 88.47C10.4931 88.93 10.3665 89.3233 10.1131 89.65C9.85979 89.97 9.52313 90.2167 9.10313 90.39C8.68979 90.5567 8.23646 90.64 7.74313 90.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab10.svg b/public/static/images/canvas/shape/re_270deg/plane_tab10.svg
new file mode 100644
index 00000000..64444c46
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 1 1 0 19 54)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 1 1 0 42 0)" fill="#1083E3"/>
+<path d="M19 98V100L87 110V108L19 98Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(0 1 1 0 19 54)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(0 1 1 0 44 0)" fill="#EA10AC"/>
+<path d="M45 27L86 27" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M22 77L86 77" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 2L29 52" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 54L8 100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="19.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="19.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 30.64C64.9098 30.64 64.5531 30.5933 64.2331 30.5C63.9131 30.4133 63.6265 30.2933 63.3731 30.14C63.1265 29.98 62.9031 29.8033 62.7031 29.61L63.5131 28.49C63.6531 28.6233 63.8031 28.7433 63.9631 28.85C64.1231 28.9567 64.2931 29.0433 64.4731 29.11C64.6598 29.17 64.8498 29.2 65.0431 29.2C65.2831 29.2 65.4898 29.1567 65.6631 29.07C65.8365 28.9833 65.9698 28.8533 66.0631 28.68C66.1631 28.5067 66.2131 28.2933 66.2131 28.04C66.2131 27.6667 66.1098 27.3833 65.9031 27.19C65.7031 26.99 65.4431 26.89 65.1231 26.89C64.9165 26.89 64.7431 26.9167 64.6031 26.97C64.4698 27.0167 64.2931 27.11 64.0731 27.25L63.2931 26.74L63.4831 23.05H67.6631V24.54H65.0131L64.9031 25.8C65.0365 25.7467 65.1631 25.71 65.2831 25.69C65.4031 25.6633 65.5331 25.65 65.6731 25.65C66.0931 25.65 66.4798 25.7333 66.8331 25.9C67.1865 26.0667 67.4665 26.3233 67.6731 26.67C67.8865 27.0167 67.9931 27.46 67.9931 28C67.9931 28.5533 67.8665 29.03 67.6131 29.43C67.3665 29.8233 67.0398 30.1233 66.6331 30.33C66.2265 30.5367 65.7831 30.64 65.3031 30.64Z" fill="#101010"/>
+<rect x="47.5" y="69.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="69.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 80.5V76.2C54.8031 75.9667 54.8098 75.6933 54.8231 75.38C54.8431 75.06 54.8565 74.78 54.8631 74.54H54.8231C54.7298 74.7533 54.6331 74.9667 54.5331 75.18C54.4331 75.3933 54.3298 75.6067 54.2231 75.82L53.3731 77.29H57.2831V78.64H51.6731V77.41L54.2631 73.05H56.4631V80.5H54.8031Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="21.5" y="19.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="19.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 30.5V29.48C26.9931 28.9133 27.5365 28.3867 28.0031 27.9C28.4698 27.4133 28.8331 26.96 29.0931 26.54C29.3531 26.1133 29.4831 25.72 29.4831 25.36C29.4831 25.1333 29.4431 24.9433 29.3631 24.79C29.2898 24.63 29.1798 24.51 29.0331 24.43C28.8865 24.35 28.7131 24.31 28.5131 24.31C28.2598 24.31 28.0298 24.3833 27.8231 24.53C27.6231 24.67 27.4331 24.8367 27.2531 25.03L26.2831 24.07C26.6498 23.6767 27.0198 23.3867 27.3931 23.2C27.7731 23.0133 28.2265 22.92 28.7531 22.92C29.2331 22.92 29.6565 23.0167 30.0231 23.21C30.3898 23.4033 30.6765 23.6767 30.8831 24.03C31.0898 24.3767 31.1931 24.7867 31.1931 25.26C31.1931 25.6867 31.0831 26.1233 30.8631 26.57C30.6498 27.01 30.3731 27.4467 30.0331 27.88C29.6931 28.3067 29.3331 28.7133 28.9531 29.1C29.1398 29.0733 29.3465 29.05 29.5731 29.03C29.8065 29.01 30.0065 29 30.1731 29H31.5331V30.5H26.3731Z" fill="#101010"/>
+<rect x="0.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 80.64C7.34979 80.64 6.99313 80.5967 6.67313 80.51C6.35979 80.4233 6.07979 80.3033 5.83313 80.15C5.58646 79.99 5.37313 79.8067 5.19313 79.6L6.01313 78.48C6.23979 78.6867 6.48313 78.86 6.74313 79C7.00313 79.1333 7.27646 79.2 7.56313 79.2C7.79646 79.2 7.99646 79.17 8.16313 79.11C8.33646 79.0433 8.46979 78.9467 8.56313 78.82C8.65646 78.6933 8.70313 78.5367 8.70313 78.35C8.70313 78.1367 8.65313 77.9533 8.55313 77.8C8.45313 77.6467 8.26646 77.53 7.99313 77.45C7.71979 77.37 7.32313 77.33 6.80313 77.33V76.07C7.22979 76.07 7.56313 76.03 7.80313 75.95C8.04313 75.87 8.21313 75.7567 8.31313 75.61C8.41979 75.4633 8.47313 75.2933 8.47313 75.1C8.47313 74.8467 8.39979 74.6533 8.25313 74.52C8.10646 74.38 7.89646 74.31 7.62313 74.31C7.37646 74.31 7.14979 74.3633 6.94313 74.47C6.73646 74.5767 6.51979 74.73 6.29313 74.93L5.39313 73.84C5.73979 73.5467 6.09979 73.32 6.47313 73.16C6.85313 73 7.26313 72.92 7.70313 72.92C8.21646 72.92 8.66313 73 9.04313 73.16C9.42979 73.3133 9.72646 73.5433 9.93313 73.85C10.1465 74.15 10.2531 74.5233 10.2531 74.97C10.2531 75.3367 10.1531 75.6633 9.95312 75.95C9.75313 76.23 9.45646 76.45 9.06313 76.61V76.66C9.33646 76.74 9.57979 76.8633 9.79313 77.03C10.0131 77.19 10.1831 77.39 10.3031 77.63C10.4298 77.87 10.4931 78.15 10.4931 78.47C10.4931 78.93 10.3665 79.3233 10.1131 79.65C9.85979 79.97 9.52313 80.2167 9.10313 80.39C8.68979 80.5567 8.23646 80.64 7.74313 80.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab11.svg b/public/static/images/canvas/shape/re_270deg/plane_tab11.svg
new file mode 100644
index 00000000..bbd8fb3a
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="53" height="2" transform="matrix(0 1 1 0 19 1)" fill="#1083E3"/>
+<rect width="100" height="2" transform="matrix(0 1 1 0 87 10)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 1 1 0 42 54)" fill="#1083E3"/>
+<path d="M19 0V2L87 12V10L19 0Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(0 1 1 0 19 54)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(0 1 1 0 44 108)" fill="#EA10AC"/>
+<path d="M45 83L86 83" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M22 29L86 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M29 58L29 108" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 2L8 56" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="75.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="75.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 86.64C64.9098 86.64 64.5531 86.5933 64.2331 86.5C63.9131 86.4133 63.6265 86.2933 63.3731 86.14C63.1265 85.98 62.9031 85.8033 62.7031 85.61L63.5131 84.49C63.6531 84.6233 63.8031 84.7433 63.9631 84.85C64.1231 84.9567 64.2931 85.0433 64.4731 85.11C64.6598 85.17 64.8498 85.2 65.0431 85.2C65.2831 85.2 65.4898 85.1567 65.6631 85.07C65.8365 84.9833 65.9698 84.8533 66.0631 84.68C66.1631 84.5067 66.2131 84.2933 66.2131 84.04C66.2131 83.6667 66.1098 83.3833 65.9031 83.19C65.7031 82.99 65.4431 82.89 65.1231 82.89C64.9165 82.89 64.7431 82.9167 64.6031 82.97C64.4698 83.0167 64.2931 83.11 64.0731 83.25L63.2931 82.74L63.4831 79.05H67.6631V80.54H65.0131L64.9031 81.8C65.0365 81.7467 65.1631 81.71 65.2831 81.69C65.4031 81.6633 65.5331 81.65 65.6731 81.65C66.0931 81.65 66.4798 81.7333 66.8331 81.9C67.1865 82.0667 67.4665 82.3233 67.6731 82.67C67.8865 83.0167 67.9931 83.46 67.9931 84C67.9931 84.5533 67.8665 85.03 67.6131 85.43C67.3665 85.8233 67.0398 86.1233 66.6331 86.33C66.2265 86.5367 65.7831 86.64 65.3031 86.64Z" fill="#101010"/>
+<rect x="47.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.8031 32.5V28.2C54.8031 27.9667 54.8098 27.6933 54.8231 27.38C54.8431 27.06 54.8565 26.78 54.8631 26.54H54.8231C54.7298 26.7533 54.6331 26.9667 54.5331 27.18C54.4331 27.3933 54.3298 27.6067 54.2231 27.82L53.3731 29.29H57.2831V30.64H51.6731V29.41L54.2631 25.05H56.4631V32.5H54.8031Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="21.5" y="75.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="21.5" y="75.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M26.3731 86.5V85.48C26.9931 84.9133 27.5365 84.3867 28.0031 83.9C28.4698 83.4133 28.8331 82.96 29.0931 82.54C29.3531 82.1133 29.4831 81.72 29.4831 81.36C29.4831 81.1333 29.4431 80.9433 29.3631 80.79C29.2898 80.63 29.1798 80.51 29.0331 80.43C28.8865 80.35 28.7131 80.31 28.5131 80.31C28.2598 80.31 28.0298 80.3833 27.8231 80.53C27.6231 80.67 27.4331 80.8367 27.2531 81.03L26.2831 80.07C26.6498 79.6767 27.0198 79.3867 27.3931 79.2C27.7731 79.0133 28.2265 78.92 28.7531 78.92C29.2331 78.92 29.6565 79.0167 30.0231 79.21C30.3898 79.4033 30.6765 79.6767 30.8831 80.03C31.0898 80.3767 31.1931 80.7867 31.1931 81.26C31.1931 81.6867 31.0831 82.1233 30.8631 82.57C30.6498 83.01 30.3731 83.4467 30.0331 83.88C29.6931 84.3067 29.3331 84.7133 28.9531 85.1C29.1398 85.0733 29.3465 85.05 29.5731 85.03C29.8065 85.01 30.0065 85 30.1731 85H31.5331V86.5H26.3731Z" fill="#101010"/>
+<rect x="0.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 32.64C7.34979 32.64 6.99313 32.5967 6.67313 32.51C6.35979 32.4233 6.07979 32.3033 5.83313 32.15C5.58646 31.99 5.37313 31.8067 5.19313 31.6L6.01313 30.48C6.23979 30.6867 6.48313 30.86 6.74313 31C7.00313 31.1333 7.27646 31.2 7.56313 31.2C7.79646 31.2 7.99646 31.17 8.16313 31.11C8.33646 31.0433 8.46979 30.9467 8.56313 30.82C8.65646 30.6933 8.70313 30.5367 8.70313 30.35C8.70313 30.1367 8.65313 29.9533 8.55313 29.8C8.45313 29.6467 8.26646 29.53 7.99313 29.45C7.71979 29.37 7.32313 29.33 6.80313 29.33V28.07C7.22979 28.07 7.56313 28.03 7.80313 27.95C8.04313 27.87 8.21313 27.7567 8.31313 27.61C8.41979 27.4633 8.47313 27.2933 8.47313 27.1C8.47313 26.8467 8.39979 26.6533 8.25313 26.52C8.10646 26.38 7.89646 26.31 7.62313 26.31C7.37646 26.31 7.14979 26.3633 6.94313 26.47C6.73646 26.5767 6.51979 26.73 6.29313 26.93L5.39313 25.84C5.73979 25.5467 6.09979 25.32 6.47313 25.16C6.85313 25 7.26313 24.92 7.70313 24.92C8.21646 24.92 8.66313 25 9.04313 25.16C9.42979 25.3133 9.72646 25.5433 9.93313 25.85C10.1465 26.15 10.2531 26.5233 10.2531 26.97C10.2531 27.3367 10.1531 27.6633 9.95312 27.95C9.75313 28.23 9.45646 28.45 9.06313 28.61V28.66C9.33646 28.74 9.57979 28.8633 9.79313 29.03C10.0131 29.19 10.1831 29.39 10.3031 29.63C10.4298 29.87 10.4931 30.15 10.4931 30.47C10.4931 30.93 10.3665 31.3233 10.1131 31.65C9.85979 31.97 9.52313 32.2167 9.10313 32.39C8.68979 32.5567 8.23646 32.64 7.74313 32.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab12.svg b/public/static/images/canvas/shape/re_270deg/plane_tab12.svg
new file mode 100644
index 00000000..77321b0c
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="46" height="2" transform="matrix(0 1 1 0 42 54)" fill="#1083E3"/>
+<path d="M42 98V100L87 110V108L42 98Z" fill="#45CD7D"/>
+<path d="M0 29L0 27L87 0V2L0 29Z" fill="#45CD7D"/>
+<path d="M0 27L0 29L44 56V54L0 27Z" fill="#45CD7D"/>
+<path d="M45 76L86 76" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 29L85 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M31 50L31 100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="68.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="68.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 79.5V75.2C65.8031 74.9667 65.8098 74.6933 65.8231 74.38C65.8431 74.06 65.8565 73.78 65.8631 73.54H65.8231C65.7298 73.7533 65.6331 73.9667 65.5331 74.18C65.4331 74.3933 65.3298 74.6067 65.2231 74.82L64.3731 76.29H68.2831V77.64H62.6731V76.41L65.2631 72.05H67.4631V79.5H65.8031Z" fill="#101010"/>
+<rect x="39.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M46.2431 32.64C45.8498 32.64 45.4931 32.5967 45.1731 32.51C44.8598 32.4233 44.5798 32.3033 44.3331 32.15C44.0865 31.99 43.8731 31.8067 43.6931 31.6L44.5131 30.48C44.7398 30.6867 44.9831 30.86 45.2431 31C45.5031 31.1333 45.7765 31.2 46.0631 31.2C46.2965 31.2 46.4965 31.17 46.6631 31.11C46.8365 31.0433 46.9698 30.9467 47.0631 30.82C47.1565 30.6933 47.2031 30.5367 47.2031 30.35C47.2031 30.1367 47.1531 29.9533 47.0531 29.8C46.9531 29.6467 46.7665 29.53 46.4931 29.45C46.2198 29.37 45.8231 29.33 45.3031 29.33V28.07C45.7298 28.07 46.0631 28.03 46.3031 27.95C46.5431 27.87 46.7131 27.7567 46.8131 27.61C46.9198 27.4633 46.9731 27.2933 46.9731 27.1C46.9731 26.8467 46.8998 26.6533 46.7531 26.52C46.6065 26.38 46.3965 26.31 46.1231 26.31C45.8765 26.31 45.6498 26.3633 45.4431 26.47C45.2365 26.5767 45.0198 26.73 44.7931 26.93L43.8931 25.84C44.2398 25.5467 44.5998 25.32 44.9731 25.16C45.3531 25 45.7631 24.92 46.2031 24.92C46.7165 24.92 47.1631 25 47.5431 25.16C47.9298 25.3133 48.2265 25.5433 48.4331 25.85C48.6465 26.15 48.7531 26.5233 48.7531 26.97C48.7531 27.3367 48.6531 27.6633 48.4531 27.95C48.2531 28.23 47.9565 28.45 47.5631 28.61V28.66C47.8365 28.74 48.0798 28.8633 48.2931 29.03C48.5131 29.19 48.6831 29.39 48.8031 29.63C48.9298 29.87 48.9931 30.15 48.9931 30.47C48.9931 30.93 48.8665 31.3233 48.6131 31.65C48.3598 31.97 48.0231 32.2167 47.6031 32.39C47.1898 32.5567 46.7365 32.64 46.2431 32.64Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="23.5" y="67.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="67.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 78.5V77.48C28.9931 76.9133 29.5365 76.3867 30.0031 75.9C30.4698 75.4133 30.8331 74.96 31.0931 74.54C31.3531 74.1133 31.4831 73.72 31.4831 73.36C31.4831 73.1333 31.4431 72.9433 31.3631 72.79C31.2898 72.63 31.1798 72.51 31.0331 72.43C30.8865 72.35 30.7131 72.31 30.5131 72.31C30.2598 72.31 30.0298 72.3833 29.8231 72.53C29.6231 72.67 29.4331 72.8367 29.2531 73.03L28.2831 72.07C28.6498 71.6767 29.0198 71.3867 29.3931 71.2C29.7731 71.0133 30.2265 70.92 30.7531 70.92C31.2331 70.92 31.6565 71.0167 32.0231 71.21C32.3898 71.4033 32.6765 71.6767 32.8831 72.03C33.0898 72.3767 33.1931 72.7867 33.1931 73.26C33.1931 73.6867 33.0831 74.1233 32.8631 74.57C32.6498 75.01 32.3731 75.4467 32.0331 75.88C31.6931 76.3067 31.3331 76.7133 30.9531 77.1C31.1398 77.0733 31.3465 77.05 31.5731 77.03C31.8065 77.01 32.0065 77 32.1731 77H33.5331V78.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab13.svg b/public/static/images/canvas/shape/re_270deg/plane_tab13.svg
new file mode 100644
index 00000000..9e0fd3bb
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 1 1 0 42 54)" fill="#1083E3"/>
+<path d="M0 29L0 27L87 0V2L0 29Z" fill="#45CD7D"/>
+<path d="M0 27L0 29L44 56V54L0 27Z" fill="#45CD7D"/>
+<rect width="2" height="43" transform="matrix(0 1 1 0 44 108)" fill="#EA10AC"/>
+<path d="M45 76L86 76" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 29L85 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M31 50L31 100" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="68.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="68.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 79.5V75.2C65.8031 74.9667 65.8098 74.6933 65.8231 74.38C65.8431 74.06 65.8565 73.78 65.8631 73.54H65.8231C65.7298 73.7533 65.6331 73.9667 65.5331 74.18C65.4331 74.3933 65.3298 74.6067 65.2231 74.82L64.3731 76.29H68.2831V77.64H62.6731V76.41L65.2631 72.05H67.4631V79.5H65.8031Z" fill="#101010"/>
+<rect x="39.5" y="21.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="21.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M46.2431 32.64C45.8498 32.64 45.4931 32.5967 45.1731 32.51C44.8598 32.4233 44.5798 32.3033 44.3331 32.15C44.0865 31.99 43.8731 31.8067 43.6931 31.6L44.5131 30.48C44.7398 30.6867 44.9831 30.86 45.2431 31C45.5031 31.1333 45.7765 31.2 46.0631 31.2C46.2965 31.2 46.4965 31.17 46.6631 31.11C46.8365 31.0433 46.9698 30.9467 47.0631 30.82C47.1565 30.6933 47.2031 30.5367 47.2031 30.35C47.2031 30.1367 47.1531 29.9533 47.0531 29.8C46.9531 29.6467 46.7665 29.53 46.4931 29.45C46.2198 29.37 45.8231 29.33 45.3031 29.33V28.07C45.7298 28.07 46.0631 28.03 46.3031 27.95C46.5431 27.87 46.7131 27.7567 46.8131 27.61C46.9198 27.4633 46.9731 27.2933 46.9731 27.1C46.9731 26.8467 46.8998 26.6533 46.7531 26.52C46.6065 26.38 46.3965 26.31 46.1231 26.31C45.8765 26.31 45.6498 26.3633 45.4431 26.47C45.2365 26.5767 45.0198 26.73 44.7931 26.93L43.8931 25.84C44.2398 25.5467 44.5998 25.32 44.9731 25.16C45.3531 25 45.7631 24.92 46.2031 24.92C46.7165 24.92 47.1631 25 47.5431 25.16C47.9298 25.3133 48.2265 25.5433 48.4331 25.85C48.6465 26.15 48.7531 26.5233 48.7531 26.97C48.7531 27.3367 48.6531 27.6633 48.4531 27.95C48.2531 28.23 47.9565 28.45 47.5631 28.61V28.66C47.8365 28.74 48.0798 28.8633 48.2931 29.03C48.5131 29.19 48.6831 29.39 48.8031 29.63C48.9298 29.87 48.9931 30.15 48.9931 30.47C48.9931 30.93 48.8665 31.3233 48.6131 31.65C48.3598 31.97 48.0231 32.2167 47.6031 32.39C47.1898 32.5567 46.7365 32.64 46.2431 32.64Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="23.5" y="67.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="67.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 78.5V77.48C28.9931 76.9133 29.5365 76.3867 30.0031 75.9C30.4698 75.4133 30.8331 74.96 31.0931 74.54C31.3531 74.1133 31.4831 73.72 31.4831 73.36C31.4831 73.1333 31.4431 72.9433 31.3631 72.79C31.2898 72.63 31.1798 72.51 31.0331 72.43C30.8865 72.35 30.7131 72.31 30.5131 72.31C30.2598 72.31 30.0298 72.3833 29.8231 72.53C29.6231 72.67 29.4331 72.8367 29.2531 73.03L28.2831 72.07C28.6498 71.6767 29.0198 71.3867 29.3931 71.2C29.7731 71.0133 30.2265 70.92 30.7531 70.92C31.2331 70.92 31.6565 71.0167 32.0231 71.21C32.3898 71.4033 32.6765 71.6767 32.8831 72.03C33.0898 72.3767 33.1931 72.7867 33.1931 73.26C33.1931 73.6867 33.0831 74.1233 32.8631 74.57C32.6498 75.01 32.3731 75.4467 32.0331 75.88C31.6931 76.3067 31.3331 76.7133 30.9531 77.1C31.1398 77.0733 31.3465 77.05 31.5731 77.03C31.8065 77.01 32.0065 77 32.1731 77H33.5331V78.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab14.svg b/public/static/images/canvas/shape/re_270deg/plane_tab14.svg
new file mode 100644
index 00000000..921db3d0
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="42" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="42" height="2" transform="matrix(0 1 1 0 87 68)" fill="#101010"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 19 0)" fill="#1083E3"/>
+<path d="M63 56V54L87 40V42L63 56Z" fill="#45CD7D"/>
+<path d="M63 54V56L87 70L87 68L63 54Z" fill="#45CD7D"/>
+<rect width="2" height="66" transform="matrix(0 1 1 0 21 108)" fill="#EA10AC"/>
+<rect width="2" height="66" transform="matrix(0 1 1 0 21 0)" fill="#EA10AC"/>
+<path d="M22 55L62 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M23 21L85 21" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 1L8 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 0L100 40" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 70L100 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" transform="matrix(0 1 1 0 35 47)" fill="white"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" transform="matrix(0 1 1 0 35 47)" stroke="black"/>
+<path d="M46.64 54.3031C46.64 53.9098 46.5933 53.5531 46.5 53.2331C46.4133 52.9131 46.2933 52.6265 46.14 52.3731C45.98 52.1265 45.8033 51.9031 45.61 51.7031L44.49 52.5131C44.6233 52.6531 44.7433 52.8031 44.85 52.9631C44.9567 53.1231 45.0433 53.2931 45.11 53.4731C45.17 53.6598 45.2 53.8498 45.2 54.0431C45.2 54.2831 45.1567 54.4898 45.07 54.6631C44.9833 54.8365 44.8533 54.9698 44.68 55.0631C44.5067 55.1631 44.2933 55.2131 44.04 55.2131C43.6667 55.2131 43.3833 55.1098 43.19 54.9031C42.99 54.7031 42.89 54.4431 42.89 54.1231C42.89 53.9165 42.9167 53.7431 42.97 53.6031C43.0167 53.4698 43.11 53.2931 43.25 53.0731L42.74 52.2931L39.05 52.4831V56.6631H40.54V54.0131L41.8 53.9031C41.7467 54.0365 41.71 54.1631 41.69 54.2831C41.6633 54.4031 41.65 54.5331 41.65 54.6731C41.65 55.0931 41.7333 55.4798 41.9 55.8331C42.0667 56.1865 42.3233 56.4665 42.67 56.6731C43.0167 56.8865 43.46 56.9931 44 56.9931C44.5533 56.9931 45.03 56.8665 45.43 56.6131C45.8233 56.3665 46.1233 56.0398 46.33 55.6331C46.5367 55.2265 46.64 54.7831 46.64 54.3031Z" fill="#101010"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" transform="matrix(0 1 1 0 47 13)" fill="white"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="7" transform="matrix(0 1 1 0 47 13)" stroke="black"/>
+<path d="M58.5 20.8031L54.2 20.8031C53.9667 20.8031 53.6933 20.8098 53.38 20.8231C53.06 20.8431 52.78 20.8565 52.54 20.8631V20.8231C52.7533 20.7298 52.9667 20.6331 53.18 20.5331C53.3933 20.4331 53.6067 20.3298 53.82 20.2231L55.29 19.3731V23.2831H56.64V17.6731H55.41L51.05 20.2631V22.4631H58.5V20.8031Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="92.5" y="12.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="12.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.3731 23.5V22.48C97.9931 21.9133 98.5365 21.3867 99.0031 20.9C99.4698 20.4133 99.8331 19.96 100.093 19.54C100.353 19.1133 100.483 18.72 100.483 18.36C100.483 18.1333 100.443 17.9433 100.363 17.79C100.29 17.63 100.18 17.51 100.033 17.43C99.8865 17.35 99.7131 17.31 99.5131 17.31C99.2598 17.31 99.0298 17.3833 98.8231 17.53C98.6231 17.67 98.4331 17.8367 98.2531 18.03L97.2831 17.07C97.6498 16.6767 98.0198 16.3867 98.3931 16.2C98.7731 16.0133 99.2265 15.92 99.7531 15.92C100.233 15.92 100.656 16.0167 101.023 16.21C101.39 16.4033 101.676 16.6767 101.883 17.03C102.09 17.3767 102.193 17.7867 102.193 18.26C102.193 18.6867 102.083 19.1233 101.863 19.57C101.65 20.01 101.373 20.4467 101.033 20.88C100.693 21.3067 100.333 21.7133 99.9531 22.1C100.14 22.0733 100.346 22.05 100.573 22.03C100.806 22.01 101.006 22 101.173 22H102.533V23.5H97.3731Z" fill="#101010"/>
+<rect x="92.5" y="82.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="82.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 93.64C99.3498 93.64 98.9931 93.5967 98.6731 93.51C98.3598 93.4233 98.0798 93.3033 97.8331 93.15C97.5865 92.99 97.3731 92.8067 97.1931 92.6L98.0131 91.48C98.2398 91.6867 98.4831 91.86 98.7431 92C99.0031 92.1333 99.2765 92.2 99.5631 92.2C99.7965 92.2 99.9965 92.17 100.163 92.11C100.336 92.0433 100.47 91.9467 100.563 91.82C100.656 91.6933 100.703 91.5367 100.703 91.35C100.703 91.1367 100.653 90.9533 100.553 90.8C100.453 90.6467 100.266 90.53 99.9931 90.45C99.7198 90.37 99.3231 90.33 98.8031 90.33V89.07C99.2298 89.07 99.5631 89.03 99.8031 88.95C100.043 88.87 100.213 88.7567 100.313 88.61C100.42 88.4633 100.473 88.2933 100.473 88.1C100.473 87.8467 100.4 87.6533 100.253 87.52C100.106 87.38 99.8965 87.31 99.6231 87.31C99.3765 87.31 99.1498 87.3633 98.9431 87.47C98.7365 87.5767 98.5198 87.73 98.2931 87.93L97.3931 86.84C97.7398 86.5467 98.0998 86.32 98.4731 86.16C98.8531 86 99.2631 85.92 99.7031 85.92C100.216 85.92 100.663 86 101.043 86.16C101.43 86.3133 101.726 86.5433 101.933 86.85C102.146 87.15 102.253 87.5233 102.253 87.97C102.253 88.3367 102.153 88.6633 101.953 88.95C101.753 89.23 101.456 89.45 101.063 89.61V89.66C101.336 89.74 101.58 89.8633 101.793 90.03C102.013 90.19 102.183 90.39 102.303 90.63C102.43 90.87 102.493 91.15 102.493 91.47C102.493 91.93 102.366 92.3233 102.113 92.65C101.86 92.97 101.523 93.2167 101.103 93.39C100.69 93.5567 100.236 93.64 99.7431 93.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab15.svg b/public/static/images/canvas/shape/re_270deg/plane_tab15.svg
new file mode 100644
index 00000000..caaad067
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="74" height="2" transform="matrix(0 1 1 0 87 18)" fill="#101010"/>
+<path d="M41.5 19L2 54.5L41.5 91.5" stroke="#45CD7D" stroke-width="2"/>
+<rect width="2" height="46" transform="matrix(0 1 1 0 41 90)" fill="#EA10AC"/>
+<rect width="2" height="46" transform="matrix(0 1 1 0 41 18)" fill="#EA10AC"/>
+<path d="M5 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M41 8L88 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 18L100 92" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="38.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="38.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8731 58.5V57.48C43.4931 56.9133 44.0365 56.3867 44.5031 55.9C44.9698 55.4133 45.3331 54.96 45.5931 54.54C45.8531 54.1133 45.9831 53.72 45.9831 53.36C45.9831 53.1333 45.9431 52.9433 45.8631 52.79C45.7898 52.63 45.6798 52.51 45.5331 52.43C45.3865 52.35 45.2131 52.31 45.0131 52.31C44.7598 52.31 44.5298 52.3833 44.3231 52.53C44.1231 52.67 43.9331 52.8367 43.7531 53.03L42.7831 52.07C43.1498 51.6767 43.5198 51.3867 43.8931 51.2C44.2731 51.0133 44.7265 50.92 45.2531 50.92C45.7331 50.92 46.1565 51.0167 46.5231 51.21C46.8898 51.4033 47.1765 51.6767 47.3831 52.03C47.5898 52.3767 47.6931 52.7867 47.6931 53.26C47.6931 53.6867 47.5831 54.1233 47.3631 54.57C47.1498 55.01 46.8731 55.4467 46.5331 55.88C46.1931 56.3067 45.8331 56.7133 45.4531 57.1C45.6398 57.0733 45.8465 57.05 46.0731 57.03C46.3065 57.01 46.5065 57 46.6731 57H48.0331V58.5H42.8731Z" fill="#101010"/>
+<rect x="57.5" y="0.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="57.5" y="0.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M64.2431 11.64C63.8498 11.64 63.4931 11.5967 63.1731 11.51C62.8598 11.4233 62.5798 11.3033 62.3331 11.15C62.0865 10.99 61.8731 10.8067 61.6931 10.6L62.5131 9.48C62.7398 9.68667 62.9831 9.86 63.2431 10C63.5031 10.1333 63.7765 10.2 64.0631 10.2C64.2965 10.2 64.4965 10.17 64.6631 10.11C64.8365 10.0433 64.9698 9.94667 65.0631 9.82C65.1565 9.69333 65.2031 9.53667 65.2031 9.35C65.2031 9.13667 65.1531 8.95333 65.0531 8.8C64.9531 8.64667 64.7665 8.53 64.4931 8.45C64.2198 8.37 63.8231 8.33 63.3031 8.33V7.07C63.7298 7.07 64.0631 7.03 64.3031 6.95C64.5431 6.87 64.7131 6.75667 64.8131 6.61C64.9198 6.46333 64.9731 6.29333 64.9731 6.1C64.9731 5.84667 64.8998 5.65333 64.7531 5.52C64.6065 5.38 64.3965 5.31 64.1231 5.31C63.8765 5.31 63.6498 5.36333 63.4431 5.47C63.2365 5.57667 63.0198 5.73 62.7931 5.93L61.8931 4.84C62.2398 4.54667 62.5998 4.32 62.9731 4.16C63.3531 4 63.7631 3.92 64.2031 3.92C64.7165 3.92 65.1631 4 65.5431 4.16C65.9298 4.31333 66.2265 4.54333 66.4331 4.85C66.6465 5.15 66.7531 5.52333 66.7531 5.97C66.7531 6.33667 66.6531 6.66333 66.4531 6.95C66.2531 7.23 65.9565 7.45 65.5631 7.61V7.66C65.8365 7.74 66.0798 7.86333 66.2931 8.03C66.5131 8.19 66.6831 8.39 66.8031 8.63C66.9298 8.87 66.9931 9.15 66.9931 9.47C66.9931 9.93 66.8665 10.3233 66.6131 10.65C66.3598 10.97 66.0231 11.2167 65.6031 11.39C65.1898 11.5567 64.7365 11.64 64.2431 11.64Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab16.svg b/public/static/images/canvas/shape/re_270deg/plane_tab16.svg
new file mode 100644
index 00000000..4fb31cf5
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 1L69 26" stroke="#45CD7D" stroke-width="2"/>
+<path d="M88 109L69 84" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(0 1 1 0 87 0)" fill="#101010"/>
+<rect width="60" height="2" transform="matrix(0 1 1 0 19 25)" fill="#1083E3"/>
+<rect width="2" height="49" transform="matrix(0 1 1 0 21 25)" fill="#EA10AC"/>
+<rect width="2" height="49" transform="matrix(0 1 1 0 21 83)" fill="#EA10AC"/>
+<path d="M22 55L85 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M19 14L66 14" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 25L8 85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.2431 58.64C52.8498 58.64 52.4931 58.5967 52.1731 58.51C51.8598 58.4233 51.5798 58.3033 51.3331 58.15C51.0865 57.99 50.8731 57.8067 50.6931 57.6L51.5131 56.48C51.7398 56.6867 51.9831 56.86 52.2431 57C52.5031 57.1333 52.7765 57.2 53.0631 57.2C53.2965 57.2 53.4965 57.17 53.6631 57.11C53.8365 57.0433 53.9698 56.9467 54.0631 56.82C54.1565 56.6933 54.2031 56.5367 54.2031 56.35C54.2031 56.1367 54.1531 55.9533 54.0531 55.8C53.9531 55.6467 53.7665 55.53 53.4931 55.45C53.2198 55.37 52.8231 55.33 52.3031 55.33V54.07C52.7298 54.07 53.0631 54.03 53.3031 53.95C53.5431 53.87 53.7131 53.7567 53.8131 53.61C53.9198 53.4633 53.9731 53.2933 53.9731 53.1C53.9731 52.8467 53.8998 52.6533 53.7531 52.52C53.6065 52.38 53.3965 52.31 53.1231 52.31C52.8765 52.31 52.6498 52.3633 52.4431 52.47C52.2365 52.5767 52.0198 52.73 51.7931 52.93L50.8931 51.84C51.2398 51.5467 51.5998 51.32 51.9731 51.16C52.3531 51 52.7631 50.92 53.2031 50.92C53.7165 50.92 54.1631 51 54.5431 51.16C54.9298 51.3133 55.2265 51.5433 55.4331 51.85C55.6465 52.15 55.7531 52.5233 55.7531 52.97C55.7531 53.3367 55.6531 53.6633 55.4531 53.95C55.2531 54.23 54.9565 54.45 54.5631 54.61V54.66C54.8365 54.74 55.0798 54.8633 55.2931 55.03C55.5131 55.19 55.6831 55.39 55.8031 55.63C55.9298 55.87 55.9931 56.15 55.9931 56.47C55.9931 56.93 55.8665 57.3233 55.6131 57.65C55.3598 57.97 55.0231 58.2167 54.6031 58.39C54.1898 58.5567 53.7365 58.64 53.2431 58.64Z" fill="#101010"/>
+<rect x="35.5" y="6.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="6.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8031 17.5V13.2C42.8031 12.9667 42.8098 12.6933 42.8231 12.38C42.8431 12.06 42.8565 11.78 42.8631 11.54H42.8231C42.7298 11.7533 42.6331 11.9667 42.5331 12.18C42.4331 12.3933 42.3298 12.6067 42.2231 12.82L41.3731 14.29H45.2831V15.64H39.6731V14.41L42.2631 10.05H44.4631V17.5H42.8031Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.87313 59L5.87313 57.98C6.49313 57.4133 7.03646 56.8867 7.50313 56.4C7.96979 55.9133 8.33313 55.46 8.59313 55.04C8.85313 54.6133 8.98313 54.22 8.98313 53.86C8.98313 53.6333 8.94313 53.4433 8.86313 53.29C8.78979 53.13 8.67979 53.01 8.53313 52.93C8.38646 52.85 8.21313 52.81 8.01313 52.81C7.75979 52.81 7.52979 52.8833 7.32313 53.03C7.12313 53.17 6.93313 53.3367 6.75313 53.53L5.78312 52.57C6.14979 52.1767 6.51979 51.8867 6.89313 51.7C7.27313 51.5133 7.72646 51.42 8.25313 51.42C8.73313 51.42 9.15646 51.5167 9.52313 51.71C9.88979 51.9033 10.1765 52.1767 10.3831 52.53C10.5898 52.8767 10.6931 53.2867 10.6931 53.76C10.6931 54.1867 10.5831 54.6233 10.3631 55.07C10.1498 55.51 9.87313 55.9467 9.53313 56.38C9.19313 56.8067 8.83313 57.2133 8.45313 57.6C8.63979 57.5733 8.84646 57.55 9.07313 57.53C9.30646 57.51 9.50646 57.5 9.67313 57.5H11.0331V59H5.87313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab17.svg b/public/static/images/canvas/shape/re_270deg/plane_tab17.svg
new file mode 100644
index 00000000..56465c10
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 79.5L45 98.5L19.5 85" stroke="#45CD7D" stroke-width="2"/>
+<path d="M88 12L19.5 42" stroke="#45CD7D" stroke-width="2"/>
+<rect width="70" height="2" transform="matrix(0 1 1 0 87 11)" fill="#101010"/>
+<rect width="45" height="2" transform="matrix(0 1 1 0 19 41)" fill="#1083E3"/>
+<path d="M22 61L85 61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M19.3447 31.2347L81.3373 0.93746" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 11L100 81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 41L8 85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="53.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="53.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.2431 64.64C52.8498 64.64 52.4931 64.5967 52.1731 64.51C51.8598 64.4233 51.5798 64.3033 51.3331 64.15C51.0865 63.99 50.8731 63.8067 50.6931 63.6L51.5131 62.48C51.7398 62.6867 51.9831 62.86 52.2431 63C52.5031 63.1333 52.7765 63.2 53.0631 63.2C53.2965 63.2 53.4965 63.17 53.6631 63.11C53.8365 63.0433 53.9698 62.9467 54.0631 62.82C54.1565 62.6933 54.2031 62.5367 54.2031 62.35C54.2031 62.1367 54.1531 61.9533 54.0531 61.8C53.9531 61.6467 53.7665 61.53 53.4931 61.45C53.2198 61.37 52.8231 61.33 52.3031 61.33V60.07C52.7298 60.07 53.0631 60.03 53.3031 59.95C53.5431 59.87 53.7131 59.7567 53.8131 59.61C53.9198 59.4633 53.9731 59.2933 53.9731 59.1C53.9731 58.8467 53.8998 58.6533 53.7531 58.52C53.6065 58.38 53.3965 58.31 53.1231 58.31C52.8765 58.31 52.6498 58.3633 52.4431 58.47C52.2365 58.5767 52.0198 58.73 51.7931 58.93L50.8931 57.84C51.2398 57.5467 51.5998 57.32 51.9731 57.16C52.3531 57 52.7631 56.92 53.2031 56.92C53.7165 56.92 54.1631 57 54.5431 57.16C54.9298 57.3133 55.2265 57.5433 55.4331 57.85C55.6465 58.15 55.7531 58.5233 55.7531 58.97C55.7531 59.3367 55.6531 59.6633 55.4531 59.95C55.2531 60.23 54.9565 60.45 54.5631 60.61V60.66C54.8365 60.74 55.0798 60.8633 55.2931 61.03C55.5131 61.19 55.6831 61.39 55.8031 61.63C55.9298 61.87 55.9931 62.15 55.9931 62.47C55.9931 62.93 55.8665 63.3233 55.6131 63.65C55.3598 63.97 55.0231 64.2167 54.6031 64.39C54.1898 64.5567 53.7365 64.64 53.2431 64.64Z" fill="#101010"/>
+<rect x="43.5" y="9.50049" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="9.50049" width="14" height="14" rx="7" stroke="black"/>
+<path d="M50.8031 20.5005V16.2005C50.8031 15.9672 50.8098 15.6938 50.8231 15.3805C50.8431 15.0605 50.8565 14.7805 50.8631 14.5405H50.8231C50.7298 14.7538 50.6331 14.9672 50.5331 15.1805C50.4331 15.3938 50.3298 15.6072 50.2231 15.8205L49.3731 17.2905H53.2831V18.6405H47.6731V17.4105L50.2631 13.0505H52.4631V20.5005H50.8031Z" fill="#101010"/>
+<rect x="92.5" y="38.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="38.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 49.5V48.06H99.3131V43.83H97.9431V42.73C98.3431 42.6567 98.6831 42.5667 98.9631 42.46C99.2498 42.3533 99.5231 42.2167 99.7831 42.05H101.093V48.06H102.433V49.5H97.7331Z" fill="#101010"/>
+<rect x="0.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="55.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.87313 67L5.87313 65.98C6.49313 65.4133 7.03646 64.8867 7.50313 64.4C7.96979 63.9133 8.33313 63.46 8.59313 63.04C8.85313 62.6133 8.98313 62.22 8.98313 61.86C8.98313 61.6333 8.94313 61.4433 8.86313 61.29C8.78979 61.13 8.67979 61.01 8.53313 60.93C8.38646 60.85 8.21313 60.81 8.01313 60.81C7.75979 60.81 7.52979 60.8833 7.32313 61.03C7.12313 61.17 6.93313 61.3367 6.75313 61.53L5.78312 60.57C6.14979 60.1767 6.51979 59.8867 6.89313 59.7C7.27313 59.5133 7.72646 59.42 8.25313 59.42C8.73313 59.42 9.15646 59.5167 9.52313 59.71C9.88979 59.9033 10.1765 60.1767 10.3831 60.53C10.5898 60.8767 10.6931 61.2867 10.6931 61.76C10.6931 62.1867 10.5831 62.6233 10.3631 63.07C10.1498 63.51 9.87313 63.9467 9.53313 64.38C9.19313 64.8067 8.83313 65.2133 8.45313 65.6C8.63979 65.5733 8.84646 65.55 9.07313 65.53C9.30646 65.51 9.50646 65.5 9.67313 65.5H11.0331V67H5.87313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_270deg/plane_tab18.svg b/public/static/images/canvas/shape/re_270deg/plane_tab18.svg
new file mode 100644
index 00000000..83868560
--- /dev/null
+++ b/public/static/images/canvas/shape/re_270deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88 11L2 60L34 109L88 78" stroke="#45CD7D" stroke-width="2"/>
+<rect width="69" height="2" transform="matrix(0 1 1 0 87 10)" fill="#101010"/>
+<path d="M8 61L85 61" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M0.841797 49.9796L82.0701 0.715369" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 10L100 80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="39.5" y="53.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="39.5" y="53.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.8731 64.5V63.48C44.4931 62.9133 45.0365 62.3867 45.5031 61.9C45.9698 61.4133 46.3331 60.96 46.5931 60.54C46.8531 60.1133 46.9831 59.72 46.9831 59.36C46.9831 59.1333 46.9431 58.9433 46.8631 58.79C46.7898 58.63 46.6798 58.51 46.5331 58.43C46.3865 58.35 46.2131 58.31 46.0131 58.31C45.7598 58.31 45.5298 58.3833 45.3231 58.53C45.1231 58.67 44.9331 58.8367 44.7531 59.03L43.7831 58.07C44.1498 57.6767 44.5198 57.3867 44.8931 57.2C45.2731 57.0133 45.7265 56.92 46.2531 56.92C46.7331 56.92 47.1565 57.0167 47.5231 57.21C47.8898 57.4033 48.1765 57.6767 48.3831 58.03C48.5898 58.3767 48.6931 58.7867 48.6931 59.26C48.6931 59.6867 48.5831 60.1233 48.3631 60.57C48.1498 61.01 47.8731 61.4467 47.5331 61.88C47.1931 62.3067 46.8331 62.7133 46.4531 63.1C46.6398 63.0733 46.8465 63.05 47.0731 63.03C47.3065 63.01 47.5065 63 47.6731 63H49.0331V64.5H43.8731Z" fill="#101010"/>
+<rect x="34.5" y="18.5005" width="14" height="14" rx="7" fill="white"/>
+<rect x="34.5" y="18.5005" width="14" height="14" rx="7" stroke="black"/>
+<path d="M41.2431 29.6405C40.8498 29.6405 40.4931 29.5972 40.1731 29.5105C39.8598 29.4238 39.5798 29.3038 39.3331 29.1505C39.0865 28.9905 38.8731 28.8072 38.6931 28.6005L39.5131 27.4805C39.7398 27.6872 39.9831 27.8605 40.2431 28.0005C40.5031 28.1338 40.7765 28.2005 41.0631 28.2005C41.2965 28.2005 41.4965 28.1705 41.6631 28.1105C41.8365 28.0438 41.9698 27.9472 42.0631 27.8205C42.1565 27.6938 42.2031 27.5372 42.2031 27.3505C42.2031 27.1372 42.1531 26.9538 42.0531 26.8005C41.9531 26.6472 41.7665 26.5305 41.4931 26.4505C41.2198 26.3705 40.8231 26.3305 40.3031 26.3305V25.0705C40.7298 25.0705 41.0631 25.0305 41.3031 24.9505C41.5431 24.8705 41.7131 24.7572 41.8131 24.6105C41.9198 24.4638 41.9731 24.2938 41.9731 24.1005C41.9731 23.8472 41.8998 23.6538 41.7531 23.5205C41.6065 23.3805 41.3965 23.3105 41.1231 23.3105C40.8765 23.3105 40.6498 23.3638 40.4431 23.4705C40.2365 23.5772 40.0198 23.7305 39.7931 23.9305L38.8931 22.8405C39.2398 22.5472 39.5998 22.3205 39.9731 22.1605C40.3531 22.0005 40.7631 21.9205 41.2031 21.9205C41.7165 21.9205 42.1631 22.0005 42.5431 22.1605C42.9298 22.3138 43.2265 22.5438 43.4331 22.8505C43.6465 23.1505 43.7531 23.5238 43.7531 23.9705C43.7531 24.3372 43.6531 24.6638 43.4531 24.9505C43.2531 25.2305 42.9565 25.4505 42.5631 25.6105V25.6605C42.8365 25.7405 43.0798 25.8638 43.2931 26.0305C43.5131 26.1905 43.6831 26.3905 43.8031 26.6305C43.9298 26.8705 43.9931 27.1505 43.9931 27.4705C43.9931 27.9305 43.8665 28.3238 43.6131 28.6505C43.3598 28.9705 43.0231 29.2172 42.6031 29.3905C42.1898 29.5572 41.7365 29.6405 41.2431 29.6405Z" fill="#101010"/>
+<rect x="92.5" y="37.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="37.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 48.5V47.06H99.3131V42.83H97.9431V41.73C98.3431 41.6567 98.6831 41.5667 98.9631 41.46C99.2498 41.3533 99.5231 41.2167 99.7831 41.05H101.093V47.06H102.433V48.5H97.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab01.svg b/public/static/images/canvas/shape/re_90deg/plane_tab01.svg
new file mode 100644
index 00000000..36c1d46b
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab01.svg
@@ -0,0 +1,12 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 109L106 54.5L21 1" stroke="#45CD7D" stroke-width="2"/>
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21.5 110)" fill="#101010"/>
+<path d="M100 55L24 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab02.svg b/public/static/images/canvas/shape/re_90deg/plane_tab02.svg
new file mode 100644
index 00000000..74d5a79c
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="35" width="110" height="2" transform="rotate(90 35 0)" fill="#101010"/>
+<rect x="97" width="110" height="2" transform="rotate(90 97 0)" fill="#1083E3"/>
+<rect x="95" width="2" height="60" transform="rotate(90 95 0)" fill="#EA10AC"/>
+<rect x="95" y="108" width="2" height="60" transform="rotate(90 95 108)" fill="#EA10AC"/>
+<path d="M94 55H36" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M22 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="57.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="57.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M62.3731 58.5V57.48C62.9931 56.9133 63.5365 56.3867 64.0031 55.9C64.4698 55.4133 64.8331 54.96 65.0931 54.54C65.3531 54.1133 65.4831 53.72 65.4831 53.36C65.4831 53.1333 65.4431 52.9433 65.3631 52.79C65.2898 52.63 65.1798 52.51 65.0331 52.43C64.8865 52.35 64.7131 52.31 64.5131 52.31C64.2598 52.31 64.0298 52.3833 63.8231 52.53C63.6231 52.67 63.4331 52.8367 63.2531 53.03L62.2831 52.07C62.6498 51.6767 63.0198 51.3867 63.3931 51.2C63.7731 51.0133 64.2265 50.92 64.7531 50.92C65.2331 50.92 65.6565 51.0167 66.0231 51.21C66.3898 51.4033 66.6765 51.6767 66.8831 52.03C67.0898 52.3767 67.1931 52.7867 67.1931 53.26C67.1931 53.6867 67.0831 54.1233 66.8631 54.57C66.6498 55.01 66.3731 55.4467 66.0331 55.88C65.6931 56.3067 65.3331 56.7133 64.9531 57.1C65.1398 57.0733 65.3465 57.05 65.5731 57.03C65.8065 57.01 66.0065 57 66.1731 57H67.5331V58.5H62.3731Z" fill="#101010"/>
+<rect x="14.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="14.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M19.7331 58.5V57.06H21.3131V52.83H19.9431V51.73C20.3431 51.6567 20.6831 51.5667 20.9631 51.46C21.2498 51.3533 21.5231 51.2167 21.7831 51.05H23.0931V57.06H24.4331V58.5H19.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab03.svg b/public/static/images/canvas/shape/re_90deg/plane_tab03.svg
new file mode 100644
index 00000000..7db0ea6e
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="89" y="20" width="70" height="2" transform="rotate(90 89 20)" fill="#1083E3"/>
+<path d="M89 20V22L21 2V0L89 20Z" fill="#45CD7D"/>
+<path d="M89 88V90L21 110V108L89 88Z" fill="#45CD7D"/>
+<path d="M85 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M51.3731 58.5V57.48C51.9931 56.9133 52.5365 56.3867 53.0031 55.9C53.4698 55.4133 53.8331 54.96 54.0931 54.54C54.3531 54.1133 54.4831 53.72 54.4831 53.36C54.4831 53.1333 54.4431 52.9433 54.3631 52.79C54.2898 52.63 54.1798 52.51 54.0331 52.43C53.8865 52.35 53.7131 52.31 53.5131 52.31C53.2598 52.31 53.0298 52.3833 52.8231 52.53C52.6231 52.67 52.4331 52.8367 52.2531 53.03L51.2831 52.07C51.6498 51.6767 52.0198 51.3867 52.3931 51.2C52.7731 51.0133 53.2265 50.92 53.7531 50.92C54.2331 50.92 54.6565 51.0167 55.0231 51.21C55.3898 51.4033 55.6765 51.6767 55.8831 52.03C56.0898 52.3767 56.1931 52.7867 56.1931 53.26C56.1931 53.6867 56.0831 54.1233 55.8631 54.57C55.6498 55.01 55.3731 55.4467 55.0331 55.88C54.6931 56.3067 54.3331 56.7133 53.9531 57.1C54.1398 57.0733 54.3465 57.05 54.5731 57.03C54.8065 57.01 55.0065 57 55.1731 57H56.5331V58.5H51.3731Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 58.64C99.3498 58.64 98.9931 58.5967 98.6731 58.51C98.3598 58.4233 98.0798 58.3033 97.8331 58.15C97.5865 57.99 97.3731 57.8067 97.1931 57.6L98.0131 56.48C98.2398 56.6867 98.4831 56.86 98.7431 57C99.0031 57.1333 99.2765 57.2 99.5631 57.2C99.7965 57.2 99.9965 57.17 100.163 57.11C100.336 57.0433 100.47 56.9467 100.563 56.82C100.656 56.6933 100.703 56.5367 100.703 56.35C100.703 56.1367 100.653 55.9533 100.553 55.8C100.453 55.6467 100.266 55.53 99.9931 55.45C99.7198 55.37 99.3231 55.33 98.8031 55.33V54.07C99.2298 54.07 99.5631 54.03 99.8031 53.95C100.043 53.87 100.213 53.7567 100.313 53.61C100.42 53.4633 100.473 53.2933 100.473 53.1C100.473 52.8467 100.4 52.6533 100.253 52.52C100.106 52.38 99.8965 52.31 99.6231 52.31C99.3765 52.31 99.1498 52.3633 98.9431 52.47C98.7365 52.5767 98.5198 52.73 98.2931 52.93L97.3931 51.84C97.7398 51.5467 98.0998 51.32 98.4731 51.16C98.8531 51 99.2631 50.92 99.7031 50.92C100.216 50.92 100.663 51 101.043 51.16C101.43 51.3133 101.726 51.5433 101.933 51.85C102.146 52.15 102.253 52.5233 102.253 52.97C102.253 53.3367 102.153 53.6633 101.953 53.95C101.753 54.23 101.456 54.45 101.063 54.61V54.66C101.336 54.74 101.58 54.8633 101.793 55.03C102.013 55.19 102.183 55.39 102.303 55.63C102.43 55.87 102.493 56.15 102.493 56.47C102.493 56.93 102.366 57.3233 102.113 57.65C101.86 57.97 101.523 58.2167 101.103 58.39C100.69 58.5567 100.236 58.64 99.7431 58.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab04.svg b/public/static/images/canvas/shape/re_90deg/plane_tab04.svg
new file mode 100644
index 00000000..19194f44
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="91" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<path d="M108 21V19L21 108V110L108 21Z" fill="#45CD7D"/>
+<rect width="2" height="87" transform="matrix(0 -1 -1 0 108 21)" fill="#EA10AC"/>
+<path d="M108 8L19 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="55.5" y="0.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M60.3731 11.5V10.48C60.9931 9.91333 61.5365 9.38667 62.0031 8.9C62.4698 8.41333 62.8331 7.96 63.0931 7.54C63.3531 7.11333 63.4831 6.72 63.4831 6.36C63.4831 6.13333 63.4431 5.94333 63.3631 5.79C63.2898 5.63 63.1798 5.51 63.0331 5.43C62.8865 5.35 62.7131 5.31 62.5131 5.31C62.2598 5.31 62.0298 5.38333 61.8231 5.53C61.6231 5.67 61.4331 5.83667 61.2531 6.03L60.2831 5.07C60.6498 4.67667 61.0198 4.38667 61.3931 4.2C61.7731 4.01333 62.2265 3.92 62.7531 3.92C63.2331 3.92 63.6565 4.01667 64.0231 4.21C64.3898 4.40333 64.6765 4.67667 64.8831 5.03C65.0898 5.37667 65.1931 5.78667 65.1931 6.26C65.1931 6.68667 65.0831 7.12333 64.8631 7.57C64.6498 8.01 64.3731 8.44667 64.0331 8.88C63.6931 9.30667 63.3331 9.71333 62.9531 10.1C63.1398 10.0733 63.3465 10.05 63.5731 10.03C63.8065 10.01 64.0065 10 64.1731 10H65.5331V11.5H60.3731Z" fill="#101010"/>
+<rect x="0.5" y="56.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="56.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 67.5L5.73313 66.06H7.31313V61.83H5.94313V60.73C6.34313 60.6567 6.68313 60.5667 6.96313 60.46C7.24979 60.3533 7.52313 60.2167 7.78313 60.05H9.09313V66.06H10.4331V67.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab05.svg b/public/static/images/canvas/shape/re_90deg/plane_tab05.svg
new file mode 100644
index 00000000..787b4dd2
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="71" height="2" transform="matrix(0 -1 -1 0 21 90)" fill="#101010"/>
+<rect width="2" height="52" transform="matrix(0 -1 -1 0 73 90)" fill="#EA10AC"/>
+<rect width="2" height="87" transform="matrix(0 -1 -1 0 108 21)" fill="#EA10AC"/>
+<path d="M73.5 90L108 21H106L71.5 90H73.5Z" fill="#45CD7D"/>
+<path d="M108 8L19 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M73 101H19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 90V19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="56.5" y="1.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="56.5" y="1.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M61.3731 12.5V11.48C61.9931 10.9133 62.5365 10.3867 63.0031 9.9C63.4698 9.41333 63.8331 8.96 64.0931 8.54C64.3531 8.11333 64.4831 7.72 64.4831 7.36C64.4831 7.13333 64.4431 6.94333 64.3631 6.79C64.2898 6.63 64.1798 6.51 64.0331 6.43C63.8865 6.35 63.7131 6.31 63.5131 6.31C63.2598 6.31 63.0298 6.38333 62.8231 6.53C62.6231 6.67 62.4331 6.83667 62.2531 7.03L61.2831 6.07C61.6498 5.67667 62.0198 5.38667 62.3931 5.2C62.7731 5.01333 63.2265 4.92 63.7531 4.92C64.2331 4.92 64.6565 5.01667 65.0231 5.21C65.3898 5.40333 65.6765 5.67667 65.8831 6.03C66.0898 6.37667 66.1931 6.78667 66.1931 7.26C66.1931 7.68667 66.0831 8.12333 65.8631 8.57C65.6498 9.01 65.3731 9.44667 65.0331 9.88C64.6931 10.3067 64.3331 10.7133 63.9531 11.1C64.1398 11.0733 64.3465 11.05 64.5731 11.03C64.8065 11.01 65.0065 11 65.1731 11H66.5331V12.5H61.3731Z" fill="#101010"/>
+<rect x="38.5" y="93.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="38.5" y="93.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M45.7431 104.64C45.3498 104.64 44.9931 104.597 44.6731 104.51C44.3598 104.423 44.0798 104.303 43.8331 104.15C43.5865 103.99 43.3731 103.807 43.1931 103.6L44.0131 102.48C44.2398 102.687 44.4831 102.86 44.7431 103C45.0031 103.133 45.2765 103.2 45.5631 103.2C45.7965 103.2 45.9965 103.17 46.1631 103.11C46.3365 103.043 46.4698 102.947 46.5631 102.82C46.6565 102.693 46.7031 102.537 46.7031 102.35C46.7031 102.137 46.6531 101.953 46.5531 101.8C46.4531 101.647 46.2665 101.53 45.9931 101.45C45.7198 101.37 45.3231 101.33 44.8031 101.33V100.07C45.2298 100.07 45.5631 100.03 45.8031 99.95C46.0431 99.87 46.2131 99.7567 46.3131 99.61C46.4198 99.4633 46.4731 99.2933 46.4731 99.1C46.4731 98.8467 46.3998 98.6533 46.2531 98.52C46.1065 98.38 45.8965 98.31 45.6231 98.31C45.3765 98.31 45.1498 98.3633 44.9431 98.47C44.7365 98.5767 44.5198 98.73 44.2931 98.93L43.3931 97.84C43.7398 97.5467 44.0998 97.32 44.4731 97.16C44.8531 97 45.2631 96.92 45.7031 96.92C46.2165 96.92 46.6631 97 47.0431 97.16C47.4298 97.3133 47.7265 97.5433 47.9331 97.85C48.1465 98.15 48.2531 98.5233 48.2531 98.97C48.2531 99.3367 48.1531 99.6633 47.9531 99.95C47.7531 100.23 47.4565 100.45 47.0631 100.61V100.66C47.3365 100.74 47.5798 100.863 47.7931 101.03C48.0131 101.19 48.1831 101.39 48.3031 101.63C48.4298 101.87 48.4931 102.15 48.4931 102.47C48.4931 102.93 48.3665 103.323 48.1131 103.65C47.8598 103.97 47.5231 104.217 47.1031 104.39C46.6898 104.557 46.2365 104.64 45.7431 104.64Z" fill="#101010"/>
+<rect x="0.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="46.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 57.5V56.06H7.31313V51.83H5.94313V50.73C6.34313 50.6567 6.68313 50.5667 6.96313 50.46C7.24979 50.3533 7.52313 50.2167 7.78313 50.05H9.09313V56.06H10.4331V57.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab06.svg b/public/static/images/canvas/shape/re_90deg/plane_tab06.svg
new file mode 100644
index 00000000..311178db
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="2" transform="matrix(0 1 1 0 82 20)" fill="#1083E3"/>
+<path d="M16 47V49L82 22V20L16 47Z" fill="#45CD7D"/>
+<path d="M16 115V117L82 90V88L16 115Z" fill="#45CD7D"/>
+<path d="M16 47L16 117L18 116.213L18 47H16Z" fill="#1083E3"/>
+<path d="M16 33L84 7" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M95 27V98" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M20 70H80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="42.5" y="13.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="42.5" y="13.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M49.7431 24.64C49.3498 24.64 48.9931 24.5967 48.6731 24.51C48.3598 24.4233 48.0798 24.3033 47.8331 24.15C47.5865 23.99 47.3731 23.8067 47.1931 23.6L48.0131 22.48C48.2398 22.6867 48.4831 22.86 48.7431 23C49.0031 23.1333 49.2765 23.2 49.5631 23.2C49.7965 23.2 49.9965 23.17 50.1631 23.11C50.3365 23.0433 50.4698 22.9467 50.5631 22.82C50.6565 22.6933 50.7031 22.5367 50.7031 22.35C50.7031 22.1367 50.6531 21.9533 50.5531 21.8C50.4531 21.6467 50.2665 21.53 49.9931 21.45C49.7198 21.37 49.3231 21.33 48.8031 21.33V20.07C49.2298 20.07 49.5631 20.03 49.8031 19.95C50.0431 19.87 50.2131 19.7567 50.3131 19.61C50.4198 19.4633 50.4731 19.2933 50.4731 19.1C50.4731 18.8467 50.3998 18.6533 50.2531 18.52C50.1065 18.38 49.8965 18.31 49.6231 18.31C49.3765 18.31 49.1498 18.3633 48.9431 18.47C48.7365 18.5767 48.5198 18.73 48.2931 18.93L47.3931 17.84C47.7398 17.5467 48.0998 17.32 48.4731 17.16C48.8531 17 49.2631 16.92 49.7031 16.92C50.2165 16.92 50.6631 17 51.0431 17.16C51.4298 17.3133 51.7265 17.5433 51.9331 17.85C52.1465 18.15 52.2531 18.5233 52.2531 18.97C52.2531 19.3367 52.1531 19.6633 51.9531 19.95C51.7531 20.23 51.4565 20.45 51.0631 20.61V20.66C51.3365 20.74 51.5798 20.8633 51.7931 21.03C52.0131 21.19 52.1831 21.39 52.3031 21.63C52.4298 21.87 52.4931 22.15 52.4931 22.47C52.4931 22.93 52.3665 23.3233 52.1131 23.65C51.8598 23.97 51.5231 24.2167 51.1031 24.39C50.6898 24.5567 50.2365 24.64 49.7431 24.64Z" fill="#101010"/>
+<rect x="87.5" y="55.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="87.5" y="55.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M92.7331 66.5V65.06H94.3131V60.83H92.9431V59.73C93.3431 59.6567 93.6831 59.5667 93.9631 59.46C94.2498 59.3533 94.5231 59.2167 94.7831 59.05H96.0931V65.06H97.4331V66.5H92.7331Z" fill="#101010"/>
+<rect x="43.5" y="62.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="62.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M48.3731 73.5V72.48C48.9931 71.9133 49.5365 71.3867 50.0031 70.9C50.4698 70.4133 50.8331 69.96 51.0931 69.54C51.3531 69.1133 51.4831 68.72 51.4831 68.36C51.4831 68.1333 51.4431 67.9433 51.3631 67.79C51.2898 67.63 51.1798 67.51 51.0331 67.43C50.8865 67.35 50.7131 67.31 50.5131 67.31C50.2598 67.31 50.0298 67.3833 49.8231 67.53C49.6231 67.67 49.4331 67.8367 49.2531 68.03L48.2831 67.07C48.6498 66.6767 49.0198 66.3867 49.3931 66.2C49.7731 66.0133 50.2265 65.92 50.7531 65.92C51.2331 65.92 51.6565 66.0167 52.0231 66.21C52.3898 66.4033 52.6765 66.6767 52.8831 67.03C53.0898 67.3767 53.1931 67.7867 53.1931 68.26C53.1931 68.6867 53.0831 69.1233 52.8631 69.57C52.6498 70.01 52.3731 70.4467 52.0331 70.88C51.6931 71.3067 51.3331 71.7133 50.9531 72.1C51.1398 72.0733 51.3465 72.05 51.5731 72.03C51.8065 72.01 52.0065 72 52.1731 72H53.5331V73.5H48.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab07.svg b/public/static/images/canvas/shape/re_90deg/plane_tab07.svg
new file mode 100644
index 00000000..91d6dc11
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="108" height="117" viewBox="0 0 108 117" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="108" y="3" width="110" height="2" transform="rotate(90 108 3)" fill="#1083E3"/>
+<rect x="48" y="31" width="54" height="2" transform="rotate(90 48 31)" fill="#101010"/>
+<rect x="21" y="3" width="30" height="2" transform="rotate(90 21 3)" fill="#101010"/>
+<rect x="21" y="83" width="30" height="2" transform="rotate(90 21 83)" fill="#101010"/>
+<rect x="106" y="3" width="2" height="85" transform="rotate(90 106 3)" fill="#EA10AC"/>
+<rect x="106" y="111" width="2" height="85" transform="rotate(90 106 111)" fill="#EA10AC"/>
+<rect x="48" y="83" width="2" height="27" transform="rotate(90 48 83)" fill="#EA10AC"/>
+<rect x="48" y="31" width="2" height="27" transform="rotate(90 48 31)" fill="#EA10AC"/>
+<path d="M105 59H48" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M47 18H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 4V32" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 84V112" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M31 35V81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="69.5" y="51.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="69.5" y="51.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M76.8031 62.5V58.2C76.8031 57.9667 76.8098 57.6933 76.8231 57.38C76.8431 57.06 76.8565 56.78 76.8631 56.54H76.8231C76.7298 56.7533 76.6331 56.9667 76.5331 57.18C76.4331 57.3933 76.3298 57.6067 76.2231 57.82L75.3731 59.29H79.2831V60.64H73.6731V59.41L76.2631 55.05H78.4631V62.5H76.8031Z" fill="#101010"/>
+<rect x="27.5" y="10.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="10.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 21.64C34.4098 21.64 34.0531 21.5933 33.7331 21.5C33.4131 21.4133 33.1265 21.2933 32.8731 21.14C32.6265 20.98 32.4031 20.8033 32.2031 20.61L33.0131 19.49C33.1531 19.6233 33.3031 19.7433 33.4631 19.85C33.6231 19.9567 33.7931 20.0433 33.9731 20.11C34.1598 20.17 34.3498 20.2 34.5431 20.2C34.7831 20.2 34.9898 20.1567 35.1631 20.07C35.3365 19.9833 35.4698 19.8533 35.5631 19.68C35.6631 19.5067 35.7131 19.2933 35.7131 19.04C35.7131 18.6667 35.6098 18.3833 35.4031 18.19C35.2031 17.99 34.9431 17.89 34.6231 17.89C34.4165 17.89 34.2431 17.9167 34.1031 17.97C33.9698 18.0167 33.7931 18.11 33.5731 18.25L32.7931 17.74L32.9831 14.05H37.1631V15.54H34.5131L34.4031 16.8C34.5365 16.7467 34.6631 16.71 34.7831 16.69C34.9031 16.6633 35.0331 16.65 35.1731 16.65C35.5931 16.65 35.9798 16.7333 36.3331 16.9C36.6865 17.0667 36.9665 17.3233 37.1731 17.67C37.3865 18.0167 37.4931 18.46 37.4931 19C37.4931 19.5533 37.3665 20.03 37.1131 20.43C36.8665 20.8233 36.5398 21.1233 36.1331 21.33C35.7265 21.5367 35.2831 21.64 34.8031 21.64Z" fill="#101010"/>
+<rect x="0.5" y="10.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="10.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 21.5V20.06H7.31313V15.83H5.94313V14.73C6.34313 14.6567 6.68313 14.5667 6.96313 14.46C7.24979 14.3533 7.52313 14.2167 7.78313 14.05H9.09313V20.06H10.4331V21.5H5.73313Z" fill="#101010"/>
+<rect x="0.5" y="90.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="90.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 101.64C7.34979 101.64 6.99313 101.597 6.67313 101.51C6.35979 101.423 6.07979 101.303 5.83313 101.15C5.58646 100.99 5.37313 100.807 5.19313 100.6L6.01313 99.48C6.23979 99.6867 6.48313 99.86 6.74313 100C7.00313 100.133 7.27646 100.2 7.56313 100.2C7.79646 100.2 7.99646 100.17 8.16313 100.11C8.33646 100.043 8.46979 99.9467 8.56313 99.82C8.65646 99.6933 8.70313 99.5367 8.70313 99.35C8.70313 99.1367 8.65313 98.9533 8.55313 98.8C8.45313 98.6467 8.26646 98.53 7.99313 98.45C7.71979 98.37 7.32313 98.33 6.80313 98.33V97.07C7.22979 97.07 7.56313 97.03 7.80313 96.95C8.04313 96.87 8.21313 96.7567 8.31313 96.61C8.41979 96.4633 8.47313 96.2933 8.47313 96.1C8.47313 95.8467 8.39979 95.6533 8.25313 95.52C8.10646 95.38 7.89646 95.31 7.62313 95.31C7.37646 95.31 7.14979 95.3633 6.94313 95.47C6.73646 95.5767 6.51979 95.73 6.29313 95.93L5.39313 94.84C5.73979 94.5467 6.09979 94.32 6.47313 94.16C6.85313 94 7.26313 93.92 7.70313 93.92C8.21646 93.92 8.66313 94 9.04313 94.16C9.42979 94.3133 9.72646 94.5433 9.93313 94.85C10.1465 95.15 10.2531 95.5233 10.2531 95.97C10.2531 96.3367 10.1531 96.6633 9.95312 96.95C9.75313 97.23 9.45646 97.45 9.06313 97.61V97.66C9.33646 97.74 9.57979 97.8633 9.79313 98.03C10.0131 98.19 10.1831 98.39 10.3031 98.63C10.4298 98.87 10.4931 99.15 10.4931 99.47C10.4931 99.93 10.3665 100.323 10.1131 100.65C9.85979 100.97 9.52313 101.217 9.10313 101.39C8.68979 101.557 8.23646 101.64 7.74313 101.64Z" fill="#101010"/>
+<rect x="23.5" y="50.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="23.5" y="50.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M28.3731 61.5V60.48C28.9931 59.9133 29.5365 59.3867 30.0031 58.9C30.4698 58.4133 30.8331 57.96 31.0931 57.54C31.3531 57.1133 31.4831 56.72 31.4831 56.36C31.4831 56.1333 31.4431 55.9433 31.3631 55.79C31.2898 55.63 31.1798 55.51 31.0331 55.43C30.8865 55.35 30.7131 55.31 30.5131 55.31C30.2598 55.31 30.0298 55.3833 29.8231 55.53C29.6231 55.67 29.4331 55.8367 29.2531 56.03L28.2831 55.07C28.6498 54.6767 29.0198 54.3867 29.3931 54.2C29.7731 54.0133 30.2265 53.92 30.7531 53.92C31.2331 53.92 31.6565 54.0167 32.0231 54.21C32.3898 54.4033 32.6765 54.6767 32.8831 55.03C33.0898 55.3767 33.1931 55.7867 33.1931 56.26C33.1931 56.6867 33.0831 57.1233 32.8631 57.57C32.6498 58.01 32.3731 58.4467 32.0331 58.88C31.6931 59.3067 31.3331 59.7133 30.9531 60.1C31.1398 60.0733 31.3465 60.05 31.5731 60.03C31.8065 60.01 32.0065 60 32.1731 60H33.5331V61.5H28.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab08.svg b/public/static/images/canvas/shape/re_90deg/plane_tab08.svg
new file mode 100644
index 00000000..05cebb84
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 -1 -1 0 108 46)" fill="#1083E3"/>
+<rect width="64" height="2" transform="matrix(0 -1 -1 0 83 108)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<rect width="2" height="62" transform="matrix(0 -1 -1 0 83 110)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(0 -1 -1 0 106 2)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(0 -1 -1 0 108 46)" fill="#EA10AC"/>
+<path d="M80 79H23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M105 23L22 23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M94 110L94 47" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="44.5" y="72.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="44.5" y="72.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M51.8031 83.5V79.2C51.8031 78.9667 51.8098 78.6933 51.8231 78.38C51.8431 78.06 51.8565 77.78 51.8631 77.54H51.8231C51.7298 77.7533 51.6331 77.9667 51.5331 78.18C51.4331 78.3933 51.3298 78.6067 51.2231 78.82L50.3731 80.29H54.2831V81.64H48.6731V80.41L51.2631 76.05H53.4631V83.5H51.8031Z" fill="#101010"/>
+<rect x="56.5" y="16.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="56.5" y="16.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M63.2431 27.64C62.8498 27.64 62.4931 27.5967 62.1731 27.51C61.8598 27.4233 61.5798 27.3033 61.3331 27.15C61.0865 26.99 60.8731 26.8067 60.6931 26.6L61.5131 25.48C61.7398 25.6867 61.9831 25.86 62.2431 26C62.5031 26.1333 62.7765 26.2 63.0631 26.2C63.2965 26.2 63.4965 26.17 63.6631 26.11C63.8365 26.0433 63.9698 25.9467 64.0631 25.82C64.1565 25.6933 64.2031 25.5367 64.2031 25.35C64.2031 25.1367 64.1531 24.9533 64.0531 24.8C63.9531 24.6467 63.7665 24.53 63.4931 24.45C63.2198 24.37 62.8231 24.33 62.3031 24.33V23.07C62.7298 23.07 63.0631 23.03 63.3031 22.95C63.5431 22.87 63.7131 22.7567 63.8131 22.61C63.9198 22.4633 63.9731 22.2933 63.9731 22.1C63.9731 21.8467 63.8998 21.6533 63.7531 21.52C63.6065 21.38 63.3965 21.31 63.1231 21.31C62.8765 21.31 62.6498 21.3633 62.4431 21.47C62.2365 21.5767 62.0198 21.73 61.7931 21.93L60.8931 20.84C61.2398 20.5467 61.5998 20.32 61.9731 20.16C62.3531 20 62.7631 19.92 63.2031 19.92C63.7165 19.92 64.1631 20 64.5431 20.16C64.9298 20.3133 65.2265 20.5433 65.4331 20.85C65.6465 21.15 65.7531 21.5233 65.7531 21.97C65.7531 22.3367 65.6531 22.6633 65.4531 22.95C65.2531 23.23 64.9565 23.45 64.5631 23.61V23.66C64.8365 23.74 65.0798 23.8633 65.2931 24.03C65.5131 24.19 65.6831 24.39 65.8031 24.63C65.9298 24.87 65.9931 25.15 65.9931 25.47C65.9931 25.93 65.8665 26.3233 65.6131 26.65C65.3598 26.97 65.0231 27.2167 64.6031 27.39C64.1898 27.5567 63.7365 27.64 63.2431 27.64Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="86.5" y="70.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="86.5" y="70.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M91.3731 81.5V80.48C91.9931 79.9133 92.5365 79.3867 93.0031 78.9C93.4698 78.4133 93.8331 77.96 94.0931 77.54C94.3531 77.1133 94.4831 76.72 94.4831 76.36C94.4831 76.1333 94.4431 75.9433 94.3631 75.79C94.2898 75.63 94.1798 75.51 94.0331 75.43C93.8865 75.35 93.7131 75.31 93.5131 75.31C93.2598 75.31 93.0298 75.3833 92.8231 75.53C92.6231 75.67 92.4331 75.8367 92.2531 76.03L91.2831 75.07C91.6498 74.6767 92.0198 74.3867 92.3931 74.2C92.7731 74.0133 93.2265 73.92 93.7531 73.92C94.2331 73.92 94.6565 74.0167 95.0231 74.21C95.3898 74.4033 95.6765 74.6767 95.8831 75.03C96.0898 75.3767 96.1931 75.7867 96.1931 76.26C96.1931 76.6867 96.0831 77.1233 95.8631 77.57C95.6498 78.01 95.3731 78.4467 95.0331 78.88C94.6931 79.3067 94.3331 79.7133 93.9531 80.1C94.1398 80.0733 94.3465 80.05 94.5731 80.03C94.8065 80.01 95.0065 80 95.1731 80H96.5331V81.5H91.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab09.svg b/public/static/images/canvas/shape/re_90deg/plane_tab09.svg
new file mode 100644
index 00000000..917eb40e
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 -1 -1 0 89 46)" fill="#1083E3"/>
+<path d="M68 98V44H66V98.5L68 98Z" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<path d="M68 100V98L21 108V110L68 100Z" fill="#45CD7D"/>
+<rect width="2" height="68" transform="matrix(0 -1 -1 0 89 2)" fill="#EA10AC"/>
+<rect width="2" height="23" transform="matrix(0 -1 -1 0 89 46)" fill="#EA10AC"/>
+<path d="M65 79H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M86 23L22 23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M79 99V49" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 46V-7.45058e-07" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="36.5" y="72.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="72.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.3031 83.64C42.9098 83.64 42.5531 83.5933 42.2331 83.5C41.9131 83.4133 41.6265 83.2933 41.3731 83.14C41.1265 82.98 40.9031 82.8033 40.7031 82.61L41.5131 81.49C41.6531 81.6233 41.8031 81.7433 41.9631 81.85C42.1231 81.9567 42.2931 82.0433 42.4731 82.11C42.6598 82.17 42.8498 82.2 43.0431 82.2C43.2831 82.2 43.4898 82.1567 43.6631 82.07C43.8365 81.9833 43.9698 81.8533 44.0631 81.68C44.1631 81.5067 44.2131 81.2933 44.2131 81.04C44.2131 80.6667 44.1098 80.3833 43.9031 80.19C43.7031 79.99 43.4431 79.89 43.1231 79.89C42.9165 79.89 42.7431 79.9167 42.6031 79.97C42.4698 80.0167 42.2931 80.11 42.0731 80.25L41.2931 79.74L41.4831 76.05H45.6631V77.54H43.0131L42.9031 78.8C43.0365 78.7467 43.1631 78.71 43.2831 78.69C43.4031 78.6633 43.5331 78.65 43.6731 78.65C44.0931 78.65 44.4798 78.7333 44.8331 78.9C45.1865 79.0667 45.4665 79.3233 45.6731 79.67C45.8865 80.0167 45.9931 80.46 45.9931 81C45.9931 81.5533 45.8665 82.03 45.6131 82.43C45.3665 82.8233 45.0398 83.1233 44.6331 83.33C44.2265 83.5367 43.7831 83.64 43.3031 83.64Z" fill="#101010"/>
+<rect x="46.5" y="16.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="16.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 27.5V23.2C53.8031 22.9667 53.8098 22.6933 53.8231 22.38C53.8431 22.06 53.8565 21.78 53.8631 21.54H53.8231C53.7298 21.7533 53.6331 21.9667 53.5331 22.18C53.4331 22.3933 53.3298 22.6067 53.2231 22.82L52.3731 24.29H56.2831V25.64H50.6731V24.41L53.2631 20.05H55.4631V27.5H53.8031Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="71.5" y="66.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="71.5" y="66.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.3731 77.5V76.48C76.9931 75.9133 77.5365 75.3867 78.0031 74.9C78.4698 74.4133 78.8331 73.96 79.0931 73.54C79.3531 73.1133 79.4831 72.72 79.4831 72.36C79.4831 72.1333 79.4431 71.9433 79.3631 71.79C79.2898 71.63 79.1798 71.51 79.0331 71.43C78.8865 71.35 78.7131 71.31 78.5131 71.31C78.2598 71.31 78.0298 71.3833 77.8231 71.53C77.6231 71.67 77.4331 71.8367 77.2531 72.03L76.2831 71.07C76.6498 70.6767 77.0198 70.3867 77.3931 70.2C77.7731 70.0133 78.2265 69.92 78.7531 69.92C79.2331 69.92 79.6565 70.0167 80.0231 70.21C80.3898 70.4033 80.6765 70.6767 80.8831 71.03C81.0898 71.3767 81.1931 71.7867 81.1931 72.26C81.1931 72.6867 81.0831 73.1233 80.8631 73.57C80.6498 74.01 80.3731 74.4467 80.0331 74.88C79.6931 75.3067 79.3331 75.7133 78.9531 76.1C79.1398 76.0733 79.3465 76.05 79.5731 76.03C79.8065 76.01 80.0065 76 80.1731 76H81.5331V77.5H76.3731Z" fill="#101010"/>
+<rect x="92.5" y="15.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="15.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 26.64C99.3498 26.64 98.9931 26.5967 98.6731 26.51C98.3598 26.4233 98.0798 26.3033 97.8331 26.15C97.5865 25.99 97.3731 25.8067 97.1931 25.6L98.0131 24.48C98.2398 24.6867 98.4831 24.86 98.7431 25C99.0031 25.1333 99.2765 25.2 99.5631 25.2C99.7965 25.2 99.9965 25.17 100.163 25.11C100.336 25.0433 100.47 24.9467 100.563 24.82C100.656 24.6933 100.703 24.5367 100.703 24.35C100.703 24.1367 100.653 23.9533 100.553 23.8C100.453 23.6467 100.266 23.53 99.9931 23.45C99.7198 23.37 99.3231 23.33 98.8031 23.33V22.07C99.2298 22.07 99.5631 22.03 99.8031 21.95C100.043 21.87 100.213 21.7567 100.313 21.61C100.42 21.4633 100.473 21.2933 100.473 21.1C100.473 20.8467 100.4 20.6533 100.253 20.52C100.106 20.38 99.8965 20.31 99.6231 20.31C99.3765 20.31 99.1498 20.3633 98.9431 20.47C98.7365 20.5767 98.5198 20.73 98.2931 20.93L97.3931 19.84C97.7398 19.5467 98.0998 19.32 98.4731 19.16C98.8531 19 99.2631 18.92 99.7031 18.92C100.216 18.92 100.663 19 101.043 19.16C101.43 19.3133 101.726 19.5433 101.933 19.85C102.146 20.15 102.253 20.5233 102.253 20.97C102.253 21.3367 102.153 21.6633 101.953 21.95C101.753 22.23 101.456 22.45 101.063 22.61V22.66C101.336 22.74 101.58 22.8633 101.793 23.03C102.013 23.19 102.183 23.39 102.303 23.63C102.43 23.87 102.493 24.15 102.493 24.47C102.493 24.93 102.366 25.3233 102.113 25.65C101.86 25.97 101.523 26.2167 101.103 26.39C100.69 26.5567 100.236 26.64 99.7431 26.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab10.svg b/public/static/images/canvas/shape/re_90deg/plane_tab10.svg
new file mode 100644
index 00000000..964f6b05
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(0 -1 -1 0 89 56)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 -1 -1 0 66 110)" fill="#1083E3"/>
+<path d="M89 12V10L21 0V2L89 12Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(0 -1 -1 0 89 56)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(0 -1 -1 0 64 110)" fill="#EA10AC"/>
+<path d="M63 83H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M86 33L22 33" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109V1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M79 108V58" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 56V10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="76.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="76.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3031 87.64C41.9098 87.64 41.5531 87.5933 41.2331 87.5C40.9131 87.4133 40.6265 87.2933 40.3731 87.14C40.1265 86.98 39.9031 86.8033 39.7031 86.61L40.5131 85.49C40.6531 85.6233 40.8031 85.7433 40.9631 85.85C41.1231 85.9567 41.2931 86.0433 41.4731 86.11C41.6598 86.17 41.8498 86.2 42.0431 86.2C42.2831 86.2 42.4898 86.1567 42.6631 86.07C42.8365 85.9833 42.9698 85.8533 43.0631 85.68C43.1631 85.5067 43.2131 85.2933 43.2131 85.04C43.2131 84.6667 43.1098 84.3833 42.9031 84.19C42.7031 83.99 42.4431 83.89 42.1231 83.89C41.9165 83.89 41.7431 83.9167 41.6031 83.97C41.4698 84.0167 41.2931 84.11 41.0731 84.25L40.2931 83.74L40.4831 80.05H44.6631V81.54H42.0131L41.9031 82.8C42.0365 82.7467 42.1631 82.71 42.2831 82.69C42.4031 82.6633 42.5331 82.65 42.6731 82.65C43.0931 82.65 43.4798 82.7333 43.8331 82.9C44.1865 83.0667 44.4665 83.3233 44.6731 83.67C44.8865 84.0167 44.9931 84.46 44.9931 85C44.9931 85.5533 44.8665 86.03 44.6131 86.43C44.3665 86.8233 44.0398 87.1233 43.6331 87.33C43.2265 87.5367 42.7831 87.64 42.3031 87.64Z" fill="#101010"/>
+<rect x="46.5" y="26.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="26.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 37.5V33.2C53.8031 32.9667 53.8098 32.6933 53.8231 32.38C53.8431 32.06 53.8565 31.78 53.8631 31.54H53.8231C53.7298 31.7533 53.6331 31.9667 53.5331 32.18C53.4331 32.3933 53.3298 32.6067 53.2231 32.82L52.3731 34.29H56.2831V35.64H50.6731V34.41L53.2631 30.05H55.4631V37.5H53.8031Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="71.5" y="75.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="71.5" y="75.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.3731 86.5V85.48C76.9931 84.9133 77.5365 84.3867 78.0031 83.9C78.4698 83.4133 78.8331 82.96 79.0931 82.54C79.3531 82.1133 79.4831 81.72 79.4831 81.36C79.4831 81.1333 79.4431 80.9433 79.3631 80.79C79.2898 80.63 79.1798 80.51 79.0331 80.43C78.8865 80.35 78.7131 80.31 78.5131 80.31C78.2598 80.31 78.0298 80.3833 77.8231 80.53C77.6231 80.67 77.4331 80.8367 77.2531 81.03L76.2831 80.07C76.6498 79.6767 77.0198 79.3867 77.3931 79.2C77.7731 79.0133 78.2265 78.92 78.7531 78.92C79.2331 78.92 79.6565 79.0167 80.0231 79.21C80.3898 79.4033 80.6765 79.6767 80.8831 80.03C81.0898 80.3767 81.1931 80.7867 81.1931 81.26C81.1931 81.6867 81.0831 82.1233 80.8631 82.57C80.6498 83.01 80.3731 83.4467 80.0331 83.88C79.6931 84.3067 79.3331 84.7133 78.9531 85.1C79.1398 85.0733 79.3465 85.05 79.5731 85.03C79.8065 85.01 80.0065 85 80.1731 85H81.5331V86.5H76.3731Z" fill="#101010"/>
+<rect x="92.5" y="25.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="25.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 36.64C99.3498 36.64 98.9931 36.5967 98.6731 36.51C98.3598 36.4233 98.0798 36.3033 97.8331 36.15C97.5865 35.99 97.3731 35.8067 97.1931 35.6L98.0131 34.48C98.2398 34.6867 98.4831 34.86 98.7431 35C99.0031 35.1333 99.2765 35.2 99.5631 35.2C99.7965 35.2 99.9965 35.17 100.163 35.11C100.336 35.0433 100.47 34.9467 100.563 34.82C100.656 34.6933 100.703 34.5367 100.703 34.35C100.703 34.1367 100.653 33.9533 100.553 33.8C100.453 33.6467 100.266 33.53 99.9931 33.45C99.7198 33.37 99.3231 33.33 98.8031 33.33V32.07C99.2298 32.07 99.5631 32.03 99.8031 31.95C100.043 31.87 100.213 31.7567 100.313 31.61C100.42 31.4633 100.473 31.2933 100.473 31.1C100.473 30.8467 100.4 30.6533 100.253 30.52C100.106 30.38 99.8965 30.31 99.6231 30.31C99.3765 30.31 99.1498 30.3633 98.9431 30.47C98.7365 30.5767 98.5198 30.73 98.2931 30.93L97.3931 29.84C97.7398 29.5467 98.0998 29.32 98.4731 29.16C98.8531 29 99.2631 28.92 99.7031 28.92C100.216 28.92 100.663 29 101.043 29.16C101.43 29.3133 101.726 29.5433 101.933 29.85C102.146 30.15 102.253 30.5233 102.253 30.97C102.253 31.3367 102.153 31.6633 101.953 31.95C101.753 32.23 101.456 32.45 101.063 32.61V32.66C101.336 32.74 101.58 32.8633 101.793 33.03C102.013 33.19 102.183 33.39 102.303 33.63C102.43 33.87 102.493 34.15 102.493 34.47C102.493 34.93 102.366 35.3233 102.113 35.65C101.86 35.97 101.523 36.2167 101.103 36.39C100.69 36.5567 100.236 36.64 99.7431 36.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab11.svg b/public/static/images/canvas/shape/re_90deg/plane_tab11.svg
new file mode 100644
index 00000000..0e8112eb
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="53" height="2" transform="matrix(0 -1 -1 0 89 109)" fill="#1083E3"/>
+<rect width="100" height="2" transform="matrix(0 -1 -1 0 21 100)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 -1 -1 0 66 56)" fill="#1083E3"/>
+<path d="M89 110V108L21 98V100L89 110Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(0 -1 -1 0 89 56)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(0 -1 -1 0 64 2)" fill="#EA10AC"/>
+<path d="M63 27L22 27" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M86 81H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M79 52V2" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 108V54" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="20.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="20.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.3031 31.64C41.9098 31.64 41.5531 31.5933 41.2331 31.5C40.9131 31.4133 40.6265 31.2933 40.3731 31.14C40.1265 30.98 39.9031 30.8033 39.7031 30.61L40.5131 29.49C40.6531 29.6233 40.8031 29.7433 40.9631 29.85C41.1231 29.9567 41.2931 30.0433 41.4731 30.11C41.6598 30.17 41.8498 30.2 42.0431 30.2C42.2831 30.2 42.4898 30.1567 42.6631 30.07C42.8365 29.9833 42.9698 29.8533 43.0631 29.68C43.1631 29.5067 43.2131 29.2933 43.2131 29.04C43.2131 28.6667 43.1098 28.3833 42.9031 28.19C42.7031 27.99 42.4431 27.89 42.1231 27.89C41.9165 27.89 41.7431 27.9167 41.6031 27.97C41.4698 28.0167 41.2931 28.11 41.0731 28.25L40.2931 27.74L40.4831 24.05H44.6631V25.54H42.0131L41.9031 26.8C42.0365 26.7467 42.1631 26.71 42.2831 26.69C42.4031 26.6633 42.5331 26.65 42.6731 26.65C43.0931 26.65 43.4798 26.7333 43.8331 26.9C44.1865 27.0667 44.4665 27.3233 44.6731 27.67C44.8865 28.0167 44.9931 28.46 44.9931 29C44.9931 29.5533 44.8665 30.03 44.6131 30.43C44.3665 30.8233 44.0398 31.1233 43.6331 31.33C43.2265 31.5367 42.7831 31.64 42.3031 31.64Z" fill="#101010"/>
+<rect x="46.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 85.5V81.2C53.8031 80.9667 53.8098 80.6933 53.8231 80.38C53.8431 80.06 53.8565 79.78 53.8631 79.54H53.8231C53.7298 79.7533 53.6331 79.9667 53.5331 80.18C53.4331 80.3933 53.3298 80.6067 53.2231 80.82L52.3731 82.29H56.2831V83.64H50.6731V82.41L53.2631 78.05H55.4631V85.5H53.8031Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="71.5" y="19.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="71.5" y="19.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M76.3731 30.5V29.48C76.9931 28.9133 77.5365 28.3867 78.0031 27.9C78.4698 27.4133 78.8331 26.96 79.0931 26.54C79.3531 26.1133 79.4831 25.72 79.4831 25.36C79.4831 25.1333 79.4431 24.9433 79.3631 24.79C79.2898 24.63 79.1798 24.51 79.0331 24.43C78.8865 24.35 78.7131 24.31 78.5131 24.31C78.2598 24.31 78.0298 24.3833 77.8231 24.53C77.6231 24.67 77.4331 24.8367 77.2531 25.03L76.2831 24.07C76.6498 23.6767 77.0198 23.3867 77.3931 23.2C77.7731 23.0133 78.2265 22.92 78.7531 22.92C79.2331 22.92 79.6565 23.0167 80.0231 23.21C80.3898 23.4033 80.6765 23.6767 80.8831 24.03C81.0898 24.3767 81.1931 24.7867 81.1931 25.26C81.1931 25.6867 81.0831 26.1233 80.8631 26.57C80.6498 27.01 80.3731 27.4467 80.0331 27.88C79.6931 28.3067 79.3331 28.7133 78.9531 29.1C79.1398 29.0733 79.3465 29.05 79.5731 29.03C79.8065 29.01 80.0065 29 80.1731 29H81.5331V30.5H76.3731Z" fill="#101010"/>
+<rect x="92.5" y="73.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="73.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M99.7431 84.64C99.3498 84.64 98.9931 84.5967 98.6731 84.51C98.3598 84.4233 98.0798 84.3033 97.8331 84.15C97.5865 83.99 97.3731 83.8067 97.1931 83.6L98.0131 82.48C98.2398 82.6867 98.4831 82.86 98.7431 83C99.0031 83.1333 99.2765 83.2 99.5631 83.2C99.7965 83.2 99.9965 83.17 100.163 83.11C100.336 83.0433 100.47 82.9467 100.563 82.82C100.656 82.6933 100.703 82.5367 100.703 82.35C100.703 82.1367 100.653 81.9533 100.553 81.8C100.453 81.6467 100.266 81.53 99.9931 81.45C99.7198 81.37 99.3231 81.33 98.8031 81.33V80.07C99.2298 80.07 99.5631 80.03 99.8031 79.95C100.043 79.87 100.213 79.7567 100.313 79.61C100.42 79.4633 100.473 79.2933 100.473 79.1C100.473 78.8467 100.4 78.6533 100.253 78.52C100.106 78.38 99.8965 78.31 99.6231 78.31C99.3765 78.31 99.1498 78.3633 98.9431 78.47C98.7365 78.5767 98.5198 78.73 98.2931 78.93L97.3931 77.84C97.7398 77.5467 98.0998 77.32 98.4731 77.16C98.8531 77 99.2631 76.92 99.7031 76.92C100.216 76.92 100.663 77 101.043 77.16C101.43 77.3133 101.726 77.5433 101.933 77.85C102.146 78.15 102.253 78.5233 102.253 78.97C102.253 79.3367 102.153 79.6633 101.953 79.95C101.753 80.23 101.456 80.45 101.063 80.61V80.66C101.336 80.74 101.58 80.8633 101.793 81.03C102.013 81.19 102.183 81.39 102.303 81.63C102.43 81.87 102.493 82.15 102.493 82.47C102.493 82.93 102.366 83.3233 102.113 83.65C101.86 83.97 101.523 84.2167 101.103 84.39C100.69 84.5567 100.236 84.64 99.7431 84.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab12.svg b/public/static/images/canvas/shape/re_90deg/plane_tab12.svg
new file mode 100644
index 00000000..6481f3fe
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<rect width="46" height="2" transform="matrix(0 -1 -1 0 66 56)" fill="#1083E3"/>
+<path d="M66 12V10L21 0V2L66 12Z" fill="#45CD7D"/>
+<path d="M108 81V83L21 110V108L108 81Z" fill="#45CD7D"/>
+<path d="M108 83V81L64 54V56L108 83Z" fill="#45CD7D"/>
+<path d="M63 34H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 81H23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M77 60V10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8031 38.5V34.2C42.8031 33.9667 42.8098 33.6933 42.8231 33.38C42.8431 33.06 42.8565 32.78 42.8631 32.54H42.8231C42.7298 32.7533 42.6331 32.9667 42.5331 33.18C42.4331 33.3933 42.3298 33.6067 42.2231 33.82L41.3731 35.29H45.2831V36.64H39.6731V35.41L42.2631 31.05H44.4631V38.5H42.8031Z" fill="#101010"/>
+<rect x="54.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="54.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M61.2431 85.64C60.8498 85.64 60.4931 85.5967 60.1731 85.51C59.8598 85.4233 59.5798 85.3033 59.3331 85.15C59.0865 84.99 58.8731 84.8067 58.6931 84.6L59.5131 83.48C59.7398 83.6867 59.9831 83.86 60.2431 84C60.5031 84.1333 60.7765 84.2 61.0631 84.2C61.2965 84.2 61.4965 84.17 61.6631 84.11C61.8365 84.0433 61.9698 83.9467 62.0631 83.82C62.1565 83.6933 62.2031 83.5367 62.2031 83.35C62.2031 83.1367 62.1531 82.9533 62.0531 82.8C61.9531 82.6467 61.7665 82.53 61.4931 82.45C61.2198 82.37 60.8231 82.33 60.3031 82.33V81.07C60.7298 81.07 61.0631 81.03 61.3031 80.95C61.5431 80.87 61.7131 80.7567 61.8131 80.61C61.9198 80.4633 61.9731 80.2933 61.9731 80.1C61.9731 79.8467 61.8998 79.6533 61.7531 79.52C61.6065 79.38 61.3965 79.31 61.1231 79.31C60.8765 79.31 60.6498 79.3633 60.4431 79.47C60.2365 79.5767 60.0198 79.73 59.7931 79.93L58.8931 78.84C59.2398 78.5467 59.5998 78.32 59.9731 78.16C60.3531 78 60.7631 77.92 61.2031 77.92C61.7165 77.92 62.1631 78 62.5431 78.16C62.9298 78.3133 63.2265 78.5433 63.4331 78.85C63.6465 79.15 63.7531 79.5233 63.7531 79.97C63.7531 80.3367 63.6531 80.6633 63.4531 80.95C63.2531 81.23 62.9565 81.45 62.5631 81.61V81.66C62.8365 81.74 63.0798 81.8633 63.2931 82.03C63.5131 82.19 63.6831 82.39 63.8031 82.63C63.9298 82.87 63.9931 83.15 63.9931 83.47C63.9931 83.93 63.8665 84.3233 63.6131 84.65C63.3598 84.97 63.0231 85.2167 62.6031 85.39C62.1898 85.5567 61.7365 85.64 61.2431 85.64Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="69.5" y="27.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="27.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M74.3731 38.5V37.48C74.9931 36.9133 75.5365 36.3867 76.0031 35.9C76.4698 35.4133 76.8331 34.96 77.0931 34.54C77.3531 34.1133 77.4831 33.72 77.4831 33.36C77.4831 33.1333 77.4431 32.9433 77.3631 32.79C77.2898 32.63 77.1798 32.51 77.0331 32.43C76.8865 32.35 76.7131 32.31 76.5131 32.31C76.2598 32.31 76.0298 32.3833 75.8231 32.53C75.6231 32.67 75.4331 32.8367 75.2531 33.03L74.2831 32.07C74.6498 31.6767 75.0198 31.3867 75.3931 31.2C75.7731 31.0133 76.2265 30.92 76.7531 30.92C77.2331 30.92 77.6565 31.0167 78.0231 31.21C78.3898 31.4033 78.6765 31.6767 78.8831 32.03C79.0898 32.3767 79.1931 32.7867 79.1931 33.26C79.1931 33.6867 79.0831 34.1233 78.8631 34.57C78.6498 35.01 78.3731 35.4467 78.0331 35.88C77.6931 36.3067 77.3331 36.7133 76.9531 37.1C77.1398 37.0733 77.3465 37.05 77.5731 37.03C77.8065 37.01 78.0065 37 78.1731 37H79.5331V38.5H74.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab13.svg b/public/static/images/canvas/shape/re_90deg/plane_tab13.svg
new file mode 100644
index 00000000..6c7a85fb
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(0 -1 -1 0 21 110)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(0 -1 -1 0 66 56)" fill="#1083E3"/>
+<path d="M108 81V83L21 110V108L108 81Z" fill="#45CD7D"/>
+<path d="M108 83V81L64 54V56L108 83Z" fill="#45CD7D"/>
+<rect width="2" height="43" transform="matrix(0 -1 -1 0 64 2)" fill="#EA10AC"/>
+<path d="M63 34H22" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 81H23" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 109L8 1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M77 60V10" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="35.5" y="27.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="35.5" y="27.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M42.8031 38.5V34.2C42.8031 33.9667 42.8098 33.6933 42.8231 33.38C42.8431 33.06 42.8565 32.78 42.8631 32.54H42.8231C42.7298 32.7533 42.6331 32.9667 42.5331 33.18C42.4331 33.3933 42.3298 33.6067 42.2231 33.82L41.3731 35.29H45.2831V36.64H39.6731V35.41L42.2631 31.05H44.4631V38.5H42.8031Z" fill="#101010"/>
+<rect x="54.5" y="74.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="54.5" y="74.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M61.2431 85.64C60.8498 85.64 60.4931 85.5967 60.1731 85.51C59.8598 85.4233 59.5798 85.3033 59.3331 85.15C59.0865 84.99 58.8731 84.8067 58.6931 84.6L59.5131 83.48C59.7398 83.6867 59.9831 83.86 60.2431 84C60.5031 84.1333 60.7765 84.2 61.0631 84.2C61.2965 84.2 61.4965 84.17 61.6631 84.11C61.8365 84.0433 61.9698 83.9467 62.0631 83.82C62.1565 83.6933 62.2031 83.5367 62.2031 83.35C62.2031 83.1367 62.1531 82.9533 62.0531 82.8C61.9531 82.6467 61.7665 82.53 61.4931 82.45C61.2198 82.37 60.8231 82.33 60.3031 82.33V81.07C60.7298 81.07 61.0631 81.03 61.3031 80.95C61.5431 80.87 61.7131 80.7567 61.8131 80.61C61.9198 80.4633 61.9731 80.2933 61.9731 80.1C61.9731 79.8467 61.8998 79.6533 61.7531 79.52C61.6065 79.38 61.3965 79.31 61.1231 79.31C60.8765 79.31 60.6498 79.3633 60.4431 79.47C60.2365 79.5767 60.0198 79.73 59.7931 79.93L58.8931 78.84C59.2398 78.5467 59.5998 78.32 59.9731 78.16C60.3531 78 60.7631 77.92 61.2031 77.92C61.7165 77.92 62.1631 78 62.5431 78.16C62.9298 78.3133 63.2265 78.5433 63.4331 78.85C63.6465 79.15 63.7531 79.5233 63.7531 79.97C63.7531 80.3367 63.6531 80.6633 63.4531 80.95C63.2531 81.23 62.9565 81.45 62.5631 81.61V81.66C62.8365 81.74 63.0798 81.8633 63.2931 82.03C63.5131 82.19 63.6831 82.39 63.8031 82.63C63.9298 82.87 63.9931 83.15 63.9931 83.47C63.9931 83.93 63.8665 84.3233 63.6131 84.65C63.3598 84.97 63.0231 85.2167 62.6031 85.39C62.1898 85.5567 61.7365 85.64 61.2431 85.64Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="69.5" y="27.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="69.5" y="27.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M74.3731 38.5V37.48C74.9931 36.9133 75.5365 36.3867 76.0031 35.9C76.4698 35.4133 76.8331 34.96 77.0931 34.54C77.3531 34.1133 77.4831 33.72 77.4831 33.36C77.4831 33.1333 77.4431 32.9433 77.3631 32.79C77.2898 32.63 77.1798 32.51 77.0331 32.43C76.8865 32.35 76.7131 32.31 76.5131 32.31C76.2598 32.31 76.0298 32.3833 75.8231 32.53C75.6231 32.67 75.4331 32.8367 75.2531 33.03L74.2831 32.07C74.6498 31.6767 75.0198 31.3867 75.3931 31.2C75.7731 31.0133 76.2265 30.92 76.7531 30.92C77.2331 30.92 77.6565 31.0167 78.0231 31.21C78.3898 31.4033 78.6765 31.6767 78.8831 32.03C79.0898 32.3767 79.1931 32.7867 79.1931 33.26C79.1931 33.6867 79.0831 34.1233 78.8631 34.57C78.6498 35.01 78.3731 35.4467 78.0331 35.88C77.6931 36.3067 77.3331 36.7133 76.9531 37.1C77.1398 37.0733 77.3465 37.05 77.5731 37.03C77.8065 37.01 78.0065 37 78.1731 37H79.5331V38.5H74.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab14.svg b/public/static/images/canvas/shape/re_90deg/plane_tab14.svg
new file mode 100644
index 00000000..32f8d9a9
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="21" width="42" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="21" y="68" width="42" height="2" transform="rotate(90 21 68)" fill="#101010"/>
+<rect x="89" width="110" height="2" transform="rotate(90 89 0)" fill="#1083E3"/>
+<path d="M45 56V54L21 40V42L45 56Z" fill="#45CD7D"/>
+<path d="M45 54V56L21 70L21 68L45 54Z" fill="#45CD7D"/>
+<rect x="87" y="108" width="2" height="66" transform="rotate(90 87 108)" fill="#EA10AC"/>
+<rect x="87" width="2" height="66" transform="rotate(90 87 0)" fill="#EA10AC"/>
+<path d="M86 55H46" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M85 21L23 21" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 1L100 109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 0L8 40" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 70L8 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="58.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.3031 58.64C64.9098 58.64 64.5531 58.5933 64.2331 58.5C63.9131 58.4133 63.6265 58.2933 63.3731 58.14C63.1265 57.98 62.9031 57.8033 62.7031 57.61L63.5131 56.49C63.6531 56.6233 63.8031 56.7433 63.9631 56.85C64.1231 56.9567 64.2931 57.0433 64.4731 57.11C64.6598 57.17 64.8498 57.2 65.0431 57.2C65.2831 57.2 65.4898 57.1567 65.6631 57.07C65.8365 56.9833 65.9698 56.8533 66.0631 56.68C66.1631 56.5067 66.2131 56.2933 66.2131 56.04C66.2131 55.6667 66.1098 55.3833 65.9031 55.19C65.7031 54.99 65.4431 54.89 65.1231 54.89C64.9165 54.89 64.7431 54.9167 64.6031 54.97C64.4698 55.0167 64.2931 55.11 64.0731 55.25L63.2931 54.74L63.4831 51.05H67.6631V52.54H65.0131L64.9031 53.8C65.0365 53.7467 65.1631 53.71 65.2831 53.69C65.4031 53.6633 65.5331 53.65 65.6731 53.65C66.0931 53.65 66.4798 53.7333 66.8331 53.9C67.1865 54.0667 67.4665 54.3233 67.6731 54.67C67.8865 55.0167 67.9931 55.46 67.9931 56C67.9931 56.5533 67.8665 57.03 67.6131 57.43C67.3665 57.8233 67.0398 58.1233 66.6331 58.33C66.2265 58.5367 65.7831 58.64 65.3031 58.64Z" fill="#101010"/>
+<rect x="46.5" y="13.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="46.5" y="13.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M53.8031 24.5V20.2C53.8031 19.9667 53.8098 19.6933 53.8231 19.38C53.8431 19.06 53.8565 18.78 53.8631 18.54H53.8231C53.7298 18.7533 53.6331 18.9667 53.5331 19.18C53.4331 19.3933 53.3298 19.6067 53.2231 19.82L52.3731 21.29H56.2831V22.64H50.6731V21.41L53.2631 17.05H55.4631V24.5H53.8031Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
+<rect x="0.5" y="12.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="12.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.37313 23.5V22.48C5.99313 21.9133 6.53646 21.3867 7.00313 20.9C7.46979 20.4133 7.83313 19.96 8.09313 19.54C8.35313 19.1133 8.48313 18.72 8.48313 18.36C8.48313 18.1333 8.44313 17.9433 8.36313 17.79C8.28979 17.63 8.17979 17.51 8.03313 17.43C7.88646 17.35 7.71313 17.31 7.51313 17.31C7.25979 17.31 7.02979 17.3833 6.82313 17.53C6.62313 17.67 6.43313 17.8367 6.25313 18.03L5.28312 17.07C5.64979 16.6767 6.01979 16.3867 6.39313 16.2C6.77313 16.0133 7.22646 15.92 7.75313 15.92C8.23313 15.92 8.65646 16.0167 9.02313 16.21C9.38979 16.4033 9.67646 16.6767 9.88313 17.03C10.0898 17.3767 10.1931 17.7867 10.1931 18.26C10.1931 18.6867 10.0831 19.1233 9.86313 19.57C9.64979 20.01 9.37313 20.4467 9.03313 20.88C8.69313 21.3067 8.33313 21.7133 7.95313 22.1C8.13979 22.0733 8.34646 22.05 8.57313 22.03C8.80646 22.01 9.00646 22 9.17313 22H10.5331V23.5H5.37313Z" fill="#101010"/>
+<rect x="0.5" y="82.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="82.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M7.74313 93.64C7.34979 93.64 6.99313 93.5967 6.67313 93.51C6.35979 93.4233 6.07979 93.3033 5.83313 93.15C5.58646 92.99 5.37313 92.8067 5.19313 92.6L6.01313 91.48C6.23979 91.6867 6.48313 91.86 6.74313 92C7.00313 92.1333 7.27646 92.2 7.56313 92.2C7.79646 92.2 7.99646 92.17 8.16313 92.11C8.33646 92.0433 8.46979 91.9467 8.56313 91.82C8.65646 91.6933 8.70313 91.5367 8.70313 91.35C8.70313 91.1367 8.65313 90.9533 8.55313 90.8C8.45313 90.6467 8.26646 90.53 7.99313 90.45C7.71979 90.37 7.32313 90.33 6.80313 90.33V89.07C7.22979 89.07 7.56313 89.03 7.80313 88.95C8.04313 88.87 8.21313 88.7567 8.31313 88.61C8.41979 88.4633 8.47313 88.2933 8.47313 88.1C8.47313 87.8467 8.39979 87.6533 8.25313 87.52C8.10646 87.38 7.89646 87.31 7.62313 87.31C7.37646 87.31 7.14979 87.3633 6.94313 87.47C6.73646 87.5767 6.51979 87.73 6.29313 87.93L5.39313 86.84C5.73979 86.5467 6.09979 86.32 6.47313 86.16C6.85313 86 7.26313 85.92 7.70313 85.92C8.21646 85.92 8.66313 86 9.04313 86.16C9.42979 86.3133 9.72646 86.5433 9.93313 86.85C10.1465 87.15 10.2531 87.5233 10.2531 87.97C10.2531 88.3367 10.1531 88.6633 9.95312 88.95C9.75313 89.23 9.45646 89.45 9.06313 89.61V89.66C9.33646 89.74 9.57979 89.8633 9.79313 90.03C10.0131 90.19 10.1831 90.39 10.3031 90.63C10.4298 90.87 10.4931 91.15 10.4931 91.47C10.4931 91.93 10.3665 92.3233 10.1131 92.65C9.85979 92.97 9.52313 93.2167 9.10313 93.39C8.68979 93.5567 8.23646 93.64 7.74313 93.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab15.svg b/public/static/images/canvas/shape/re_90deg/plane_tab15.svg
new file mode 100644
index 00000000..07217d6c
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="74" height="2" transform="matrix(0 -1 -1 0 21 92)" fill="#101010"/>
+<path d="M66.5 91L106 55.5L66.5 18.5" stroke="#45CD7D" stroke-width="2"/>
+<rect width="2" height="46" transform="matrix(0 -1 -1 0 67 20)" fill="#EA10AC"/>
+<rect width="2" height="46" transform="matrix(0 -1 -1 0 67 92)" fill="#EA10AC"/>
+<path d="M103 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M67 102H20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 92L8 18" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="55.5" y="48.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="55.5" y="48.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M59.8731 59.5V58.48C60.4931 57.9133 61.0365 57.3867 61.5031 56.9C61.9698 56.4133 62.3331 55.96 62.5931 55.54C62.8531 55.1133 62.9831 54.72 62.9831 54.36C62.9831 54.1333 62.9431 53.9433 62.8631 53.79C62.7898 53.63 62.6798 53.51 62.5331 53.43C62.3865 53.35 62.2131 53.31 62.0131 53.31C61.7598 53.31 61.5298 53.3833 61.3231 53.53C61.1231 53.67 60.9331 53.8367 60.7531 54.03L59.7831 53.07C60.1498 52.6767 60.5198 52.3867 60.8931 52.2C61.2731 52.0133 61.7265 51.92 62.2531 51.92C62.7331 51.92 63.1565 52.0167 63.5231 52.21C63.8898 52.4033 64.1765 52.6767 64.3831 53.03C64.5898 53.3767 64.6931 53.7867 64.6931 54.26C64.6931 54.6867 64.5831 55.1233 64.3631 55.57C64.1498 56.01 63.8731 56.4467 63.5331 56.88C63.1931 57.3067 62.8331 57.7133 62.4531 58.1C62.6398 58.0733 62.8465 58.05 63.0731 58.03C63.3065 58.01 63.5065 58 63.6731 58H65.0331V59.5H59.8731Z" fill="#101010"/>
+<rect x="36.5" y="95.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="36.5" y="95.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M43.2431 106.64C42.8498 106.64 42.4931 106.597 42.1731 106.51C41.8598 106.423 41.5798 106.303 41.3331 106.15C41.0865 105.99 40.8731 105.807 40.6931 105.6L41.5131 104.48C41.7398 104.687 41.9831 104.86 42.2431 105C42.5031 105.133 42.7765 105.2 43.0631 105.2C43.2965 105.2 43.4965 105.17 43.6631 105.11C43.8365 105.043 43.9698 104.947 44.0631 104.82C44.1565 104.693 44.2031 104.537 44.2031 104.35C44.2031 104.137 44.1531 103.953 44.0531 103.8C43.9531 103.647 43.7665 103.53 43.4931 103.45C43.2198 103.37 42.8231 103.33 42.3031 103.33V102.07C42.7298 102.07 43.0631 102.03 43.3031 101.95C43.5431 101.87 43.7131 101.757 43.8131 101.61C43.9198 101.463 43.9731 101.293 43.9731 101.1C43.9731 100.847 43.8998 100.653 43.7531 100.52C43.6065 100.38 43.3965 100.31 43.1231 100.31C42.8765 100.31 42.6498 100.363 42.4431 100.47C42.2365 100.577 42.0198 100.73 41.7931 100.93L40.8931 99.84C41.2398 99.5467 41.5998 99.32 41.9731 99.16C42.3531 99 42.7631 98.92 43.2031 98.92C43.7165 98.92 44.1631 99 44.5431 99.16C44.9298 99.3133 45.2265 99.5433 45.4331 99.85C45.6465 100.15 45.7531 100.523 45.7531 100.97C45.7531 101.337 45.6531 101.663 45.4531 101.95C45.2531 102.23 44.9565 102.45 44.5631 102.61V102.66C44.8365 102.74 45.0798 102.863 45.2931 103.03C45.5131 103.19 45.6831 103.39 45.8031 103.63C45.9298 103.87 45.9931 104.15 45.9931 104.47C45.9931 104.93 45.8665 105.323 45.6131 105.65C45.3598 105.97 45.0231 106.217 44.6031 106.39C44.1898 106.557 43.7365 106.64 43.2431 106.64Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab16.svg b/public/static/images/canvas/shape/re_90deg/plane_tab16.svg
new file mode 100644
index 00000000..b9c7230b
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 1L39 26" stroke="#45CD7D" stroke-width="2"/>
+<path d="M20 109L39 84" stroke="#45CD7D" stroke-width="2"/>
+<rect x="21" width="110" height="2" transform="rotate(90 21 0)" fill="#101010"/>
+<rect x="89" y="25" width="60" height="2" transform="rotate(90 89 25)" fill="#1083E3"/>
+<rect x="87" y="25" width="2" height="49" transform="rotate(90 87 25)" fill="#EA10AC"/>
+<rect x="87" y="83" width="2" height="49" transform="rotate(90 87 83)" fill="#EA10AC"/>
+<path d="M86 55L23 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M89 14L42 14" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 1V109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 25V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 58.64C53.8498 58.64 53.4931 58.5967 53.1731 58.51C52.8598 58.4233 52.5798 58.3033 52.3331 58.15C52.0865 57.99 51.8731 57.8067 51.6931 57.6L52.5131 56.48C52.7398 56.6867 52.9831 56.86 53.2431 57C53.5031 57.1333 53.7765 57.2 54.0631 57.2C54.2965 57.2 54.4965 57.17 54.6631 57.11C54.8365 57.0433 54.9698 56.9467 55.0631 56.82C55.1565 56.6933 55.2031 56.5367 55.2031 56.35C55.2031 56.1367 55.1531 55.9533 55.0531 55.8C54.9531 55.6467 54.7665 55.53 54.4931 55.45C54.2198 55.37 53.8231 55.33 53.3031 55.33V54.07C53.7298 54.07 54.0631 54.03 54.3031 53.95C54.5431 53.87 54.7131 53.7567 54.8131 53.61C54.9198 53.4633 54.9731 53.2933 54.9731 53.1C54.9731 52.8467 54.8998 52.6533 54.7531 52.52C54.6065 52.38 54.3965 52.31 54.1231 52.31C53.8765 52.31 53.6498 52.3633 53.4431 52.47C53.2365 52.5767 53.0198 52.73 52.7931 52.93L51.8931 51.84C52.2398 51.5467 52.5998 51.32 52.9731 51.16C53.3531 51 53.7631 50.92 54.2031 50.92C54.7165 50.92 55.1631 51 55.5431 51.16C55.9298 51.3133 56.2265 51.5433 56.4331 51.85C56.6465 52.15 56.7531 52.5233 56.7531 52.97C56.7531 53.3367 56.6531 53.6633 56.4531 53.95C56.2531 54.23 55.9565 54.45 55.5631 54.61V54.66C55.8365 54.74 56.0798 54.8633 56.2931 55.03C56.5131 55.19 56.6831 55.39 56.8031 55.63C56.9298 55.87 56.9931 56.15 56.9931 56.47C56.9931 56.93 56.8665 57.3233 56.6131 57.65C56.3598 57.97 56.0231 58.2167 55.6031 58.39C55.1898 58.5567 54.7365 58.64 54.2431 58.64Z" fill="#101010"/>
+<rect x="58.5" y="6.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="58.5" y="6.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M65.8031 17.5V13.2C65.8031 12.9667 65.8098 12.6933 65.8231 12.38C65.8431 12.06 65.8565 11.78 65.8631 11.54H65.8231C65.7298 11.7533 65.6331 11.9667 65.5331 12.18C65.4331 12.3933 65.3298 12.6067 65.2231 12.82L64.3731 14.29H68.2831V15.64H62.6731V14.41L65.2631 10.05H67.4631V17.5H65.8031Z" fill="#101010"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.8731 59V57.98C98.4931 57.4133 99.0365 56.8867 99.5031 56.4C99.9698 55.9133 100.333 55.46 100.593 55.04C100.853 54.6133 100.983 54.22 100.983 53.86C100.983 53.6333 100.943 53.4433 100.863 53.29C100.79 53.13 100.68 53.01 100.533 52.93C100.386 52.85 100.213 52.81 100.013 52.81C99.7598 52.81 99.5298 52.8833 99.3231 53.03C99.1231 53.17 98.9331 53.3367 98.7531 53.53L97.7831 52.57C98.1498 52.1767 98.5198 51.8867 98.8931 51.7C99.2731 51.5133 99.7265 51.42 100.253 51.42C100.733 51.42 101.156 51.5167 101.523 51.71C101.89 51.9033 102.176 52.1767 102.383 52.53C102.59 52.8767 102.693 53.2867 102.693 53.76C102.693 54.1867 102.583 54.6233 102.363 55.07C102.15 55.51 101.873 55.9467 101.533 56.38C101.193 56.8067 100.833 57.2133 100.453 57.6C100.64 57.5733 100.846 57.55 101.073 57.53C101.306 57.51 101.506 57.5 101.673 57.5H103.033V59H97.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab17.svg b/public/static/images/canvas/shape/re_90deg/plane_tab17.svg
new file mode 100644
index 00000000..f36070a0
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 31.5L63 12.5L88.5 26" stroke="#45CD7D" stroke-width="2"/>
+<path d="M20 99L88.5 69" stroke="#45CD7D" stroke-width="2"/>
+<rect width="70" height="2" transform="matrix(0 -1 -1 0 21 100)" fill="#101010"/>
+<rect width="45" height="2" transform="matrix(0 -1 -1 0 89 70)" fill="#1083E3"/>
+<path d="M86 50L23 50" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M88.6553 79.7651L26.6627 110.062" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 100V30" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 70V26" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 54.64C53.8498 54.64 53.4931 54.5967 53.1731 54.51C52.8598 54.4233 52.5798 54.3033 52.3331 54.15C52.0865 53.99 51.8731 53.8067 51.6931 53.6L52.5131 52.48C52.7398 52.6867 52.9831 52.86 53.2431 53C53.5031 53.1333 53.7765 53.2 54.0631 53.2C54.2965 53.2 54.4965 53.17 54.6631 53.11C54.8365 53.0433 54.9698 52.9467 55.0631 52.82C55.1565 52.6933 55.2031 52.5367 55.2031 52.35C55.2031 52.1367 55.1531 51.9533 55.0531 51.8C54.9531 51.6467 54.7665 51.53 54.4931 51.45C54.2198 51.37 53.8231 51.33 53.3031 51.33V50.07C53.7298 50.07 54.0631 50.03 54.3031 49.95C54.5431 49.87 54.7131 49.7567 54.8131 49.61C54.9198 49.4633 54.9731 49.2933 54.9731 49.1C54.9731 48.8467 54.8998 48.6533 54.7531 48.52C54.6065 48.38 54.3965 48.31 54.1231 48.31C53.8765 48.31 53.6498 48.3633 53.4431 48.47C53.2365 48.5767 53.0198 48.73 52.7931 48.93L51.8931 47.84C52.2398 47.5467 52.5998 47.32 52.9731 47.16C53.3531 47 53.7631 46.92 54.2031 46.92C54.7165 46.92 55.1631 47 55.5431 47.16C55.9298 47.3133 56.2265 47.5433 56.4331 47.85C56.6465 48.15 56.7531 48.5233 56.7531 48.97C56.7531 49.3367 56.6531 49.6633 56.4531 49.95C56.2531 50.23 55.9565 50.45 55.5631 50.61V50.66C55.8365 50.74 56.0798 50.8633 56.2931 51.03C56.5131 51.19 56.6831 51.39 56.8031 51.63C56.9298 51.87 56.9931 52.15 56.9931 52.47C56.9931 52.93 56.8665 53.3233 56.6131 53.65C56.3598 53.97 56.0231 54.2167 55.6031 54.39C55.1898 54.5567 54.7365 54.64 54.2431 54.64Z" fill="#101010"/>
+<rect x="50.5" y="87.4995" width="14" height="14" rx="7" fill="white"/>
+<rect x="50.5" y="87.4995" width="14" height="14" rx="7" stroke="black"/>
+<path d="M57.8031 98.4995V94.1995C57.8031 93.9662 57.8098 93.6928 57.8231 93.3795C57.8431 93.0595 57.8565 92.7795 57.8631 92.5395H57.8231C57.7298 92.7528 57.6331 92.9662 57.5331 93.1795C57.4331 93.3928 57.3298 93.6062 57.2231 93.8195L56.3731 95.2895H60.2831V96.6395H54.6731V95.4095L57.2631 91.0495H59.4631V98.4995H57.8031Z" fill="#101010"/>
+<rect x="0.5" y="57.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="57.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 68.5V67.06H7.31313V62.83H5.94313V61.73C6.34313 61.6567 6.68313 61.5667 6.96313 61.46C7.24979 61.3533 7.52313 61.2167 7.78313 61.05H9.09313V67.06H10.4331V68.5H5.73313Z" fill="#101010"/>
+<rect x="92.5" y="40.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="92.5" y="40.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.8731 52V50.98C98.4931 50.4133 99.0365 49.8867 99.5031 49.4C99.9698 48.9133 100.333 48.46 100.593 48.04C100.853 47.6133 100.983 47.22 100.983 46.86C100.983 46.6333 100.943 46.4433 100.863 46.29C100.79 46.13 100.68 46.01 100.533 45.93C100.386 45.85 100.213 45.81 100.013 45.81C99.7598 45.81 99.5298 45.8833 99.3231 46.03C99.1231 46.17 98.9331 46.3367 98.7531 46.53L97.7831 45.57C98.1498 45.1767 98.5198 44.8867 98.8931 44.7C99.2731 44.5133 99.7265 44.42 100.253 44.42C100.733 44.42 101.156 44.5167 101.523 44.71C101.89 44.9033 102.176 45.1767 102.383 45.53C102.59 45.8767 102.693 46.2867 102.693 46.76C102.693 47.1867 102.583 47.6233 102.363 48.07C102.15 48.51 101.873 48.9467 101.533 49.38C101.193 49.8067 100.833 50.2133 100.453 50.6C100.64 50.5733 100.846 50.55 101.073 50.53C101.306 50.51 101.506 50.5 101.673 50.5H103.033V52H97.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_90deg/plane_tab18.svg b/public/static/images/canvas/shape/re_90deg/plane_tab18.svg
new file mode 100644
index 00000000..33bc4549
--- /dev/null
+++ b/public/static/images/canvas/shape/re_90deg/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="108" height="111" viewBox="0 0 108 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 100L106 51L74 2L20 33" stroke="#45CD7D" stroke-width="2"/>
+<rect width="69" height="2" transform="matrix(0 -1 -1 0 21 101)" fill="#101010"/>
+<path d="M100 50L23 50" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M107.158 61.0205L25.9299 110.285" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 101V31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="54.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="54.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8731 54.5V53.48C59.4931 52.9133 60.0365 52.3867 60.5031 51.9C60.9698 51.4133 61.3331 50.96 61.5931 50.54C61.8531 50.1133 61.9831 49.72 61.9831 49.36C61.9831 49.1333 61.9431 48.9433 61.8631 48.79C61.7898 48.63 61.6798 48.51 61.5331 48.43C61.3865 48.35 61.2131 48.31 61.0131 48.31C60.7598 48.31 60.5298 48.3833 60.3231 48.53C60.1231 48.67 59.9331 48.8367 59.7531 49.03L58.7831 48.07C59.1498 47.6767 59.5198 47.3867 59.8931 47.2C60.2731 47.0133 60.7265 46.92 61.2531 46.92C61.7331 46.92 62.1565 47.0167 62.5231 47.21C62.8898 47.4033 63.1765 47.6767 63.3831 48.03C63.5898 48.3767 63.6931 48.7867 63.6931 49.26C63.6931 49.6867 63.5831 50.1233 63.3631 50.57C63.1498 51.01 62.8731 51.4467 62.5331 51.88C62.1931 52.3067 61.8331 52.7133 61.4531 53.1C61.6398 53.0733 61.8465 53.05 62.0731 53.03C62.3065 53.01 62.5065 53 62.6731 53H64.0331V54.5H58.8731Z" fill="#101010"/>
+<rect x="59.5" y="78.4995" width="14" height="14" rx="7" fill="white"/>
+<rect x="59.5" y="78.4995" width="14" height="14" rx="7" stroke="black"/>
+<path d="M66.2431 89.1395C65.8498 89.1395 65.4931 89.0962 65.1731 89.0095C64.8598 88.9228 64.5798 88.8028 64.3331 88.6495C64.0865 88.4895 63.8731 88.3062 63.6931 88.0995L64.5131 86.9795C64.7398 87.1862 64.9831 87.3595 65.2431 87.4995C65.5031 87.6328 65.7765 87.6995 66.0631 87.6995C66.2965 87.6995 66.4965 87.6695 66.6631 87.6095C66.8365 87.5428 66.9698 87.4462 67.0631 87.3195C67.1565 87.1928 67.2031 87.0362 67.2031 86.8495C67.2031 86.6362 67.1531 86.4528 67.0531 86.2995C66.9531 86.1462 66.7665 86.0295 66.4931 85.9495C66.2198 85.8695 65.8231 85.8295 65.3031 85.8295V84.5695C65.7298 84.5695 66.0631 84.5295 66.3031 84.4495C66.5431 84.3695 66.7131 84.2562 66.8131 84.1095C66.9198 83.9628 66.9731 83.7928 66.9731 83.5995C66.9731 83.3462 66.8998 83.1528 66.7531 83.0195C66.6065 82.8795 66.3965 82.8095 66.1231 82.8095C65.8765 82.8095 65.6498 82.8628 65.4431 82.9695C65.2365 83.0762 65.0198 83.2295 64.7931 83.4295L63.8931 82.3395C64.2398 82.0462 64.5998 81.8195 64.9731 81.6595C65.3531 81.4995 65.7631 81.4195 66.2031 81.4195C66.7165 81.4195 67.1631 81.4995 67.5431 81.6595C67.9298 81.8128 68.2265 82.0428 68.4331 82.3495C68.6465 82.6495 68.7531 83.0228 68.7531 83.4695C68.7531 83.8362 68.6531 84.1628 68.4531 84.4495C68.2531 84.7295 67.9565 84.9495 67.5631 85.1095V85.1595C67.8365 85.2395 68.0798 85.3628 68.2931 85.5295C68.5131 85.6895 68.6831 85.8895 68.8031 86.1295C68.9298 86.3695 68.9931 86.6495 68.9931 86.9695C68.9931 87.4295 68.8665 87.8228 68.6131 88.1495C68.3598 88.4695 68.0231 88.7162 67.6031 88.8895C67.1898 89.0562 66.7365 89.1395 66.2431 89.1395Z" fill="#101010"/>
+<rect x="0.5" y="58.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="58.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M5.73313 69.5V68.06H7.31313V63.83H5.94313V62.73C6.34313 62.6567 6.68313 62.5667 6.96313 62.46C7.24979 62.3533 7.52313 62.2167 7.78313 62.05H9.09313V68.06H10.4331V69.5H5.73313Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab01.svg b/public/static/images/canvas/shape/re_normal/plane_tab01.svg
new file mode 100644
index 00000000..8fc73ac0
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab01.svg
@@ -0,0 +1,14 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1 87L55.5 2L109 87" stroke="#45CD7D" stroke-width="2"/>
+    <rect y="86.5" width="110" height="2" fill="#101010"/>
+    <path d="M55 8V84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+    <path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+    <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" fill="white"/>
+    <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" stroke="black"/>
+    <path d="M52.3731 56.5V55.48C52.9931 54.9133 53.5365 54.3867 54.0031 53.9C54.4698 53.4133 54.8331 52.96 55.0931 52.54C55.3531 52.1133 55.4831 51.72 55.4831 51.36C55.4831 51.1333 55.4431 50.9433 55.3631 50.79C55.2898 50.63 55.1798 50.51 55.0331 50.43C54.8865 50.35 54.7131 50.31 54.5131 50.31C54.2598 50.31 54.0298 50.3833 53.8231 50.53C53.6231 50.67 53.4331 50.8367 53.2531 51.03L52.2831 50.07C52.6498 49.6767 53.0198 49.3867 53.3931 49.2C53.7731 49.0133 54.2265 48.92 54.7531 48.92C55.2331 48.92 55.6565 49.0167 56.0231 49.21C56.3898 49.4033 56.6765 49.6767 56.8831 50.03C57.0898 50.3767 57.1931 50.7867 57.1931 51.26C57.1931 51.6867 57.0831 52.1233 56.8631 52.57C56.6498 53.01 56.3731 53.4467 56.0331 53.88C55.6931 54.3067 55.3331 54.7133 54.9531 55.1C55.1398 55.0733 55.3465 55.05 55.5731 55.03C55.8065 55.01 56.0065 55 56.1731 55H57.5331V56.5H52.3731Z"
+          fill="#101010"/>
+    <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+    <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+    <path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z"
+          fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab02.svg b/public/static/images/canvas/shape/re_normal/plane_tab02.svg
new file mode 100644
index 00000000..61891248
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab02.svg
@@ -0,0 +1,14 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="73" width="110" height="2" fill="#101010"/>
+<rect y="11" width="110" height="2" fill="#1083E3"/>
+<rect y="13" width="2" height="60" fill="#EA10AC"/>
+<rect x="108" y="13" width="2" height="60" fill="#EA10AC"/>
+<path d="M55 14V72" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 86H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="35.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="35.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 46.5V45.48C52.9931 44.9133 53.5365 44.3867 54.0031 43.9C54.4698 43.4133 54.8331 42.96 55.0931 42.54C55.3531 42.1133 55.4831 41.72 55.4831 41.36C55.4831 41.1333 55.4431 40.9433 55.3631 40.79C55.2898 40.63 55.1798 40.51 55.0331 40.43C54.8865 40.35 54.7131 40.31 54.5131 40.31C54.2598 40.31 54.0298 40.3833 53.8231 40.53C53.6231 40.67 53.4331 40.8367 53.2531 41.03L52.2831 40.07C52.6498 39.6767 53.0198 39.3867 53.3931 39.2C53.7731 39.0133 54.2265 38.92 54.7531 38.92C55.2331 38.92 55.6565 39.0167 56.0231 39.21C56.3898 39.4033 56.6765 39.6767 56.8831 40.03C57.0898 40.3767 57.1931 40.7867 57.1931 41.26C57.1931 41.6867 57.0831 42.1233 56.8631 42.57C56.6498 43.01 56.3731 43.4467 56.0331 43.88C55.6931 44.3067 55.3331 44.7133 54.9531 45.1C55.1398 45.0733 55.3465 45.05 55.5731 45.03C55.8065 45.01 56.0065 45 56.1731 45H57.5331V46.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="78.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="78.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 89.5V88.06H54.3131V83.83H52.9431V82.73C53.3431 82.6567 53.6831 82.5667 53.9631 82.46C54.2498 82.3533 54.5231 82.2167 54.7831 82.05H56.0931V88.06H57.4331V89.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab03.svg b/public/static/images/canvas/shape/re_normal/plane_tab03.svg
new file mode 100644
index 00000000..c6a52c40
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab03.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="20" y="19" width="70" height="2" fill="#1083E3"/>
+<path d="M20 19H22L2 87H0L20 19Z" fill="#45CD7D"/>
+<path d="M88 19H90L110 87H108L88 19Z" fill="#45CD7D"/>
+<path d="M55 23V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="46.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M52.3731 57.5V56.48C52.9931 55.9133 53.5365 55.3867 54.0031 54.9C54.4698 54.4133 54.8331 53.96 55.0931 53.54C55.3531 53.1133 55.4831 52.72 55.4831 52.36C55.4831 52.1333 55.4431 51.9433 55.3631 51.79C55.2898 51.63 55.1798 51.51 55.0331 51.43C54.8865 51.35 54.7131 51.31 54.5131 51.31C54.2598 51.31 54.0298 51.3833 53.8231 51.53C53.6231 51.67 53.4331 51.8367 53.2531 52.03L52.2831 51.07C52.6498 50.6767 53.0198 50.3867 53.3931 50.2C53.7731 50.0133 54.2265 49.92 54.7531 49.92C55.2331 49.92 55.6565 50.0167 56.0231 50.21C56.3898 50.4033 56.6765 50.6767 56.8831 51.03C57.0898 51.3767 57.1931 51.7867 57.1931 52.26C57.1931 52.6867 57.0831 53.1233 56.8631 53.57C56.6498 54.01 56.3731 54.4467 56.0331 54.88C55.6931 55.3067 55.3331 55.7133 54.9531 56.1C55.1398 56.0733 55.3465 56.05 55.5731 56.03C55.8065 56.01 56.0065 56 56.1731 56H57.5331V57.5H52.3731Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M54.7431 11.64C54.3498 11.64 53.9931 11.5967 53.6731 11.51C53.3598 11.4233 53.0798 11.3033 52.8331 11.15C52.5865 10.99 52.3731 10.8067 52.1931 10.6L53.0131 9.48C53.2398 9.68667 53.4831 9.86 53.7431 10C54.0031 10.1333 54.2765 10.2 54.5631 10.2C54.7965 10.2 54.9965 10.17 55.1631 10.11C55.3365 10.0433 55.4698 9.94667 55.5631 9.82C55.6565 9.69333 55.7031 9.53667 55.7031 9.35C55.7031 9.13667 55.6531 8.95333 55.5531 8.8C55.4531 8.64667 55.2665 8.53 54.9931 8.45C54.7198 8.37 54.3231 8.33 53.8031 8.33V7.07C54.2298 7.07 54.5631 7.03 54.8031 6.95C55.0431 6.87 55.2131 6.75667 55.3131 6.61C55.4198 6.46333 55.4731 6.29333 55.4731 6.1C55.4731 5.84667 55.3998 5.65333 55.2531 5.52C55.1065 5.38 54.8965 5.31 54.6231 5.31C54.3765 5.31 54.1498 5.36333 53.9431 5.47C53.7365 5.57667 53.5198 5.73 53.2931 5.93L52.3931 4.84C52.7398 4.54667 53.0998 4.32 53.4731 4.16C53.8531 4 54.2631 3.92 54.7031 3.92C55.2165 3.92 55.6631 4 56.0431 4.16C56.4298 4.31333 56.7265 4.54333 56.9331 4.85C57.1465 5.15 57.2531 5.52333 57.2531 5.97C57.2531 6.33667 57.1531 6.66333 56.9531 6.95C56.7531 7.23 56.4565 7.45 56.0631 7.61V7.66C56.3365 7.74 56.5798 7.86333 56.7931 8.03C57.0131 8.19 57.1831 8.39 57.3031 8.63C57.4298 8.87 57.4931 9.15 57.4931 9.47C57.4931 9.93 57.3665 10.3233 57.1131 10.65C56.8598 10.97 56.5231 11.2167 56.1031 11.39C55.6898 11.5567 55.2365 11.64 54.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab04.svg b/public/static/images/canvas/shape/re_normal/plane_tab04.svg
new file mode 100644
index 00000000..71f194d0
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab04.svg
@@ -0,0 +1,13 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="91" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<path d="M21 0H19L108 87H110L21 0Z" fill="#45CD7D"/>
+<rect width="2" height="87" transform="matrix(-1 0 0 1 21 0)" fill="#EA10AC"/>
+<path d="M8 0V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H20" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="0.5" y="37.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="0.5" y="37.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M5.37313 48.5V47.48C5.99313 46.9133 6.53646 46.3867 7.00313 45.9C7.46979 45.4133 7.83313 44.96 8.09313 44.54C8.35313 44.1133 8.48313 43.72 8.48313 43.36C8.48313 43.1333 8.44313 42.9433 8.36313 42.79C8.28979 42.63 8.17979 42.51 8.03313 42.43C7.88646 42.35 7.71313 42.31 7.51313 42.31C7.25979 42.31 7.02979 42.3833 6.82313 42.53C6.62313 42.67 6.43313 42.8367 6.25313 43.03L5.28312 42.07C5.64979 41.6767 6.01979 41.3867 6.39313 41.2C6.77313 41.0133 7.22646 40.92 7.75313 40.92C8.23313 40.92 8.65646 41.0167 9.02313 41.21C9.38979 41.4033 9.67646 41.6767 9.88313 42.03C10.0898 42.3767 10.1931 42.7867 10.1931 43.26C10.1931 43.6867 10.0831 44.1233 9.86313 44.57C9.64979 45.01 9.37313 45.4467 9.03313 45.88C8.69313 46.3067 8.33313 46.7133 7.95313 47.1C8.13979 47.0733 8.34646 47.05 8.57313 47.03C8.80646 47.01 9.00646 47 9.17313 47H10.5331V48.5H5.37313Z" fill="#101010"/>
+<rect x="56.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="56.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M61.7331 103.5V102.06H63.3131V97.83H61.9431V96.73C62.3431 96.6567 62.6831 96.5667 62.9631 96.46C63.2498 96.3533 63.5231 96.2167 63.7831 96.05H65.0931V102.06H66.4331V103.5H61.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab05.svg b/public/static/images/canvas/shape/re_normal/plane_tab05.svg
new file mode 100644
index 00000000..8abc166e
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab05.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="71" height="2" transform="matrix(-1 0 0 1 90 87)" fill="#101010"/>
+<rect width="2" height="52" transform="matrix(-1 0 0 1 90 35)" fill="#EA10AC"/>
+<rect width="2" height="87" transform="matrix(-1 0 0 1 21 0)" fill="#EA10AC"/>
+<path d="M90 34.5L21 0V2L90 36.5V34.5Z" fill="#45CD7D"/>
+<path d="M8 0V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M101 35V89" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M90 100H19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="1.5" y="37.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="1.5" y="37.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M6.37313 48.5V47.48C6.99313 46.9133 7.53646 46.3867 8.00313 45.9C8.46979 45.4133 8.83313 44.96 9.09313 44.54C9.35313 44.1133 9.48313 43.72 9.48313 43.36C9.48313 43.1333 9.44313 42.9433 9.36313 42.79C9.28979 42.63 9.17979 42.51 9.03313 42.43C8.88646 42.35 8.71313 42.31 8.51313 42.31C8.25979 42.31 8.02979 42.3833 7.82313 42.53C7.62313 42.67 7.43313 42.8367 7.25313 43.03L6.28312 42.07C6.64979 41.6767 7.01979 41.3867 7.39313 41.2C7.77313 41.0133 8.22646 40.92 8.75313 40.92C9.23313 40.92 9.65646 41.0167 10.0231 41.21C10.3898 41.4033 10.6765 41.6767 10.8831 42.03C11.0898 42.3767 11.1931 42.7867 11.1931 43.26C11.1931 43.6867 11.0831 44.1233 10.8631 44.57C10.6498 45.01 10.3731 45.4467 10.0331 45.88C9.69313 46.3067 9.33313 46.7133 8.95313 47.1C9.13979 47.0733 9.34646 47.05 9.57313 47.03C9.80646 47.01 10.0065 47 10.1731 47H11.5331V48.5H6.37313Z" fill="#101010"/>
+<rect x="93.5" y="54.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="93.5" y="54.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M100.743 65.64C100.35 65.64 99.9931 65.5967 99.6731 65.51C99.3598 65.4233 99.0798 65.3033 98.8331 65.15C98.5865 64.99 98.3731 64.8067 98.1931 64.6L99.0131 63.48C99.2398 63.6867 99.4831 63.86 99.7431 64C100.003 64.1333 100.276 64.2 100.563 64.2C100.796 64.2 100.996 64.17 101.163 64.11C101.336 64.0433 101.47 63.9467 101.563 63.82C101.656 63.6933 101.703 63.5367 101.703 63.35C101.703 63.1367 101.653 62.9533 101.553 62.8C101.453 62.6467 101.266 62.53 100.993 62.45C100.72 62.37 100.323 62.33 99.8031 62.33V61.07C100.23 61.07 100.563 61.03 100.803 60.95C101.043 60.87 101.213 60.7567 101.313 60.61C101.42 60.4633 101.473 60.2933 101.473 60.1C101.473 59.8467 101.4 59.6533 101.253 59.52C101.106 59.38 100.896 59.31 100.623 59.31C100.376 59.31 100.15 59.3633 99.9431 59.47C99.7365 59.5767 99.5198 59.73 99.2931 59.93L98.3931 58.84C98.7398 58.5467 99.0998 58.32 99.4731 58.16C99.8531 58 100.263 57.92 100.703 57.92C101.216 57.92 101.663 58 102.043 58.16C102.43 58.3133 102.726 58.5433 102.933 58.85C103.146 59.15 103.253 59.5233 103.253 59.97C103.253 60.3367 103.153 60.6633 102.953 60.95C102.753 61.23 102.456 61.45 102.063 61.61V61.66C102.336 61.74 102.58 61.8633 102.793 62.03C103.013 62.19 103.183 62.39 103.303 62.63C103.43 62.87 103.493 63.15 103.493 63.47C103.493 63.93 103.366 64.3233 103.113 64.65C102.86 64.97 102.523 65.2167 102.103 65.39C101.69 65.5567 101.236 65.64 100.743 65.64Z" fill="#101010"/>
+<rect x="46.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M51.7331 103.5V102.06H53.3131V97.83H51.9431V96.73C52.3431 96.6567 52.6831 96.5667 52.9631 96.46C53.2498 96.3533 53.5231 96.2167 53.7831 96.05H55.0931V102.06H56.4331V103.5H51.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab06.svg b/public/static/images/canvas/shape/re_normal/plane_tab06.svg
new file mode 100644
index 00000000..6aca72a5
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab06.svg
@@ -0,0 +1,18 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="2" transform="matrix(-1 0 0 1 97 82)" fill="#1083E3"/>
+<path d="M70 16H68L95 82H97L70 16Z" fill="#45CD7D"/>
+<path d="M2 16H0L27 82H29L2 16Z" fill="#45CD7D"/>
+<path d="M70 16H0L0.786873 18H70V16Z" fill="#1083E3"/>
+<path d="M84 16L110 84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M90 95H19" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M47 20V80" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="88.5" y="42.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="88.5" y="42.5" width="15" height="15" rx="7.5" stroke="black"/>
+<path d="M95.7431 53.64C95.3498 53.64 94.9931 53.5967 94.6731 53.51C94.3598 53.4233 94.0798 53.3033 93.8331 53.15C93.5865 52.99 93.3731 52.8067 93.1931 52.6L94.0131 51.48C94.2398 51.6867 94.4831 51.86 94.7431 52C95.0031 52.1333 95.2765 52.2 95.5631 52.2C95.7965 52.2 95.9965 52.17 96.1631 52.11C96.3365 52.0433 96.4698 51.9467 96.5631 51.82C96.6565 51.6933 96.7031 51.5367 96.7031 51.35C96.7031 51.1367 96.6531 50.9533 96.5531 50.8C96.4531 50.6467 96.2665 50.53 95.9931 50.45C95.7198 50.37 95.3231 50.33 94.8031 50.33V49.07C95.2298 49.07 95.5631 49.03 95.8031 48.95C96.0431 48.87 96.2131 48.7567 96.3131 48.61C96.4198 48.4633 96.4731 48.2933 96.4731 48.1C96.4731 47.8467 96.3998 47.6533 96.2531 47.52C96.1065 47.38 95.8965 47.31 95.6231 47.31C95.3765 47.31 95.1498 47.3633 94.9431 47.47C94.7365 47.5767 94.5198 47.73 94.2931 47.93L93.3931 46.84C93.7398 46.5467 94.0998 46.32 94.4731 46.16C94.8531 46 95.2631 45.92 95.7031 45.92C96.2165 45.92 96.6631 46 97.0431 46.16C97.4298 46.3133 97.7265 46.5433 97.9331 46.85C98.1465 47.15 98.2531 47.5233 98.2531 47.97C98.2531 48.3367 98.1531 48.6633 97.9531 48.95C97.7531 49.23 97.4565 49.45 97.0631 49.61V49.66C97.3365 49.74 97.5798 49.8633 97.7931 50.03C98.0131 50.19 98.1831 50.39 98.3031 50.63C98.4298 50.87 98.4931 51.15 98.4931 51.47C98.4931 51.93 98.3665 52.3233 98.1131 52.65C97.8598 52.97 97.5231 53.2167 97.1031 53.39C96.6898 53.5567 96.2365 53.64 95.7431 53.64Z" fill="#101010"/>
+<rect x="46.5" y="87.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="46.5" y="87.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M51.7331 98.5V97.06H53.3131V92.83H51.9431V91.73C52.3431 91.6567 52.6831 91.5667 52.9631 91.46C53.2498 91.3533 53.5231 91.2167 53.7831 91.05H55.0931V97.06H56.4331V98.5H51.7331Z" fill="#101010"/>
+<rect x="40.5" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="40.5" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M45.3731 54.5V53.48C45.9931 52.9133 46.5365 52.3867 47.0031 51.9C47.4698 51.4133 47.8331 50.96 48.0931 50.54C48.3531 50.1133 48.4831 49.72 48.4831 49.36C48.4831 49.1333 48.4431 48.9433 48.3631 48.79C48.2898 48.63 48.1798 48.51 48.0331 48.43C47.8865 48.35 47.7131 48.31 47.5131 48.31C47.2598 48.31 47.0298 48.3833 46.8231 48.53C46.6231 48.67 46.4331 48.8367 46.2531 49.03L45.2831 48.07C45.6498 47.6767 46.0198 47.3867 46.3931 47.2C46.7731 47.0133 47.2265 46.92 47.7531 46.92C48.2331 46.92 48.6565 47.0167 49.0231 47.21C49.3898 47.4033 49.6765 47.6767 49.8831 48.03C50.0898 48.3767 50.1931 48.7867 50.1931 49.26C50.1931 49.6867 50.0831 50.1233 49.8631 50.57C49.6498 51.01 49.3731 51.4467 49.0331 51.88C48.6931 52.3067 48.3331 52.7133 47.9531 53.1C48.1398 53.0733 48.3465 53.05 48.5731 53.03C48.8065 53.01 49.0065 53 49.1731 53H50.5331V54.5H45.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab07.svg b/public/static/images/canvas/shape/re_normal/plane_tab07.svg
new file mode 100644
index 00000000..577ae1b1
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab07.svg
@@ -0,0 +1,30 @@
+<svg width="117" height="108" viewBox="0 0 117 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" width="110" height="2" fill="#1083E3"/>
+<rect x="31" y="60" width="54" height="2" fill="#101010"/>
+<rect x="3" y="87" width="30" height="2" fill="#101010"/>
+<rect x="83" y="87" width="30" height="2" fill="#101010"/>
+<rect x="3" y="2" width="2" height="85" fill="#EA10AC"/>
+<rect x="111" y="2" width="2" height="85" fill="#EA10AC"/>
+<rect x="83" y="60" width="2" height="27" fill="#EA10AC"/>
+<rect x="31" y="60" width="2" height="27" fill="#EA10AC"/>
+<path d="M59 3V60" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M18 61V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M4 100H32" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M84 100H112" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M35 77H81" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="51.5" y="24.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="51.5" y="24.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M58.8031 35.5V31.2C58.8031 30.9667 58.8098 30.6933 58.8231 30.38C58.8431 30.06 58.8565 29.78 58.8631 29.54H58.8231C58.7298 29.7533 58.6331 29.9667 58.5331 30.18C58.4331 30.3933 58.3298 30.6067 58.2231 30.82L57.3731 32.29H61.2831V33.64H55.6731V32.41L58.2631 28.05H60.4631V35.5H58.8031Z" fill="#101010"/>
+<rect x="10.5" y="66.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="10.5" y="66.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M17.8031 77.64C17.4098 77.64 17.0531 77.5933 16.7331 77.5C16.4131 77.4133 16.1265 77.2933 15.8731 77.14C15.6265 76.98 15.4031 76.8033 15.2031 76.61L16.0131 75.49C16.1531 75.6233 16.3031 75.7433 16.4631 75.85C16.6231 75.9567 16.7931 76.0433 16.9731 76.11C17.1598 76.17 17.3498 76.2 17.5431 76.2C17.7831 76.2 17.9898 76.1567 18.1631 76.07C18.3365 75.9833 18.4698 75.8533 18.5631 75.68C18.6631 75.5067 18.7131 75.2933 18.7131 75.04C18.7131 74.6667 18.6098 74.3833 18.4031 74.19C18.2031 73.99 17.9431 73.89 17.6231 73.89C17.4165 73.89 17.2431 73.9167 17.1031 73.97C16.9698 74.0167 16.7931 74.11 16.5731 74.25L15.7931 73.74L15.9831 70.05H20.1631V71.54H17.5131L17.4031 72.8C17.5365 72.7467 17.6631 72.71 17.7831 72.69C17.9031 72.6633 18.0331 72.65 18.1731 72.65C18.5931 72.65 18.9798 72.7333 19.3331 72.9C19.6865 73.0667 19.9665 73.3233 20.1731 73.67C20.3865 74.0167 20.4931 74.46 20.4931 75C20.4931 75.5533 20.3665 76.03 20.1131 76.43C19.8665 76.8233 19.5398 77.1233 19.1331 77.33C18.7265 77.5367 18.2831 77.64 17.8031 77.64Z" fill="#101010"/>
+<rect x="10.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="10.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M15.7331 103.5V102.06H17.3131V97.83H15.9431V96.73C16.3431 96.6567 16.6831 96.5667 16.9631 96.46C17.2498 96.3533 17.5231 96.2167 17.7831 96.05H19.0931V102.06H20.4331V103.5H15.7331Z" fill="#101010"/>
+<rect x="90.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="90.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M97.7431 103.64C97.3498 103.64 96.9931 103.597 96.6731 103.51C96.3598 103.423 96.0798 103.303 95.8331 103.15C95.5865 102.99 95.3731 102.807 95.1931 102.6L96.0131 101.48C96.2398 101.687 96.4831 101.86 96.7431 102C97.0031 102.133 97.2765 102.2 97.5631 102.2C97.7965 102.2 97.9965 102.17 98.1631 102.11C98.3365 102.043 98.4698 101.947 98.5631 101.82C98.6565 101.693 98.7031 101.537 98.7031 101.35C98.7031 101.137 98.6531 100.953 98.5531 100.8C98.4531 100.647 98.2665 100.53 97.9931 100.45C97.7198 100.37 97.3231 100.33 96.8031 100.33V99.07C97.2298 99.07 97.5631 99.03 97.8031 98.95C98.0431 98.87 98.2131 98.7567 98.3131 98.61C98.4198 98.4633 98.4731 98.2933 98.4731 98.1C98.4731 97.8467 98.3998 97.6533 98.2531 97.52C98.1065 97.38 97.8965 97.31 97.6231 97.31C97.3765 97.31 97.1498 97.3633 96.9431 97.47C96.7365 97.5767 96.5198 97.73 96.2931 97.93L95.3931 96.84C95.7398 96.5467 96.0998 96.32 96.4731 96.16C96.8531 96 97.2631 95.92 97.7031 95.92C98.2165 95.92 98.6631 96 99.0431 96.16C99.4298 96.3133 99.7265 96.5433 99.9331 96.85C100.146 97.15 100.253 97.5233 100.253 97.97C100.253 98.3367 100.153 98.6633 99.9531 98.95C99.7531 99.23 99.4565 99.45 99.0631 99.61V99.66C99.3365 99.74 99.5798 99.8633 99.7931 100.03C100.013 100.19 100.183 100.39 100.303 100.63C100.43 100.87 100.493 101.15 100.493 101.47C100.493 101.93 100.366 102.323 100.113 102.65C99.8598 102.97 99.5231 103.217 99.1031 103.39C98.6898 103.557 98.2365 103.64 97.7431 103.64Z" fill="#101010"/>
+<rect x="50.5" y="69.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="50.5" y="69.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M55.3731 80.5V79.48C55.9931 78.9133 56.5365 78.3867 57.0031 77.9C57.4698 77.4133 57.8331 76.96 58.0931 76.54C58.3531 76.1133 58.4831 75.72 58.4831 75.36C58.4831 75.1333 58.4431 74.9433 58.3631 74.79C58.2898 74.63 58.1798 74.51 58.0331 74.43C57.8865 74.35 57.7131 74.31 57.5131 74.31C57.2598 74.31 57.0298 74.3833 56.8231 74.53C56.6231 74.67 56.4331 74.8367 56.2531 75.03L55.2831 74.07C55.6498 73.6767 56.0198 73.3867 56.3931 73.2C56.7731 73.0133 57.2265 72.92 57.7531 72.92C58.2331 72.92 58.6565 73.0167 59.0231 73.21C59.3898 73.4033 59.6765 73.6767 59.8831 74.03C60.0898 74.3767 60.1931 74.7867 60.1931 75.26C60.1931 75.6867 60.0831 76.1233 59.8631 76.57C59.6498 77.01 59.3731 77.4467 59.0331 77.88C58.6931 78.3067 58.3331 78.7133 57.9531 79.1C58.1398 79.0733 58.3465 79.05 58.5731 79.03C58.8065 79.01 59.0065 79 59.1731 79H60.5331V80.5H55.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab08.svg b/public/static/images/canvas/shape/re_normal/plane_tab08.svg
new file mode 100644
index 00000000..d9f3f324
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab08.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(-1 0 0 1 46 0)" fill="#1083E3"/>
+<rect width="64" height="2" transform="matrix(-1 0 0 1 108 25)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<rect width="2" height="62" transform="matrix(-1 0 0 1 110 25)" fill="#EA10AC"/>
+<rect width="2" height="85" transform="matrix(-1 0 0 1 2 2)" fill="#EA10AC"/>
+<rect width="2" height="27" transform="matrix(-1 0 0 1 46 0)" fill="#EA10AC"/>
+<path d="M79 28V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M23 3V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M110 14L47 14" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="72.5" y="49.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="72.5" y="49.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M79.8031 60.5V56.2C79.8031 55.9667 79.8098 55.6933 79.8231 55.38C79.8431 55.06 79.8565 54.78 79.8631 54.54H79.8231C79.7298 54.7533 79.6331 54.9667 79.5331 55.18C79.4331 55.3933 79.3298 55.6067 79.2231 55.82L78.3731 57.29H82.2831V58.64H76.6731V57.41L79.2631 53.05H81.4631V60.5H79.8031Z" fill="#101010"/>
+<rect x="16.5" y="37.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="16.5" y="37.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M23.2431 48.64C22.8498 48.64 22.4931 48.5967 22.1731 48.51C21.8598 48.4233 21.5798 48.3033 21.3331 48.15C21.0865 47.99 20.8731 47.8067 20.6931 47.6L21.5131 46.48C21.7398 46.6867 21.9831 46.86 22.2431 47C22.5031 47.1333 22.7765 47.2 23.0631 47.2C23.2965 47.2 23.4965 47.17 23.6631 47.11C23.8365 47.0433 23.9698 46.9467 24.0631 46.82C24.1565 46.6933 24.2031 46.5367 24.2031 46.35C24.2031 46.1367 24.1531 45.9533 24.0531 45.8C23.9531 45.6467 23.7665 45.53 23.4931 45.45C23.2198 45.37 22.8231 45.33 22.3031 45.33V44.07C22.7298 44.07 23.0631 44.03 23.3031 43.95C23.5431 43.87 23.7131 43.7567 23.8131 43.61C23.9198 43.4633 23.9731 43.2933 23.9731 43.1C23.9731 42.8467 23.8998 42.6533 23.7531 42.52C23.6065 42.38 23.3965 42.31 23.1231 42.31C22.8765 42.31 22.6498 42.3633 22.4431 42.47C22.2365 42.5767 22.0198 42.73 21.7931 42.93L20.8931 41.84C21.2398 41.5467 21.5998 41.32 21.9731 41.16C22.3531 41 22.7631 40.92 23.2031 40.92C23.7165 40.92 24.1631 41 24.5431 41.16C24.9298 41.3133 25.2265 41.5433 25.4331 41.85C25.6465 42.15 25.7531 42.5233 25.7531 42.97C25.7531 43.3367 25.6531 43.6633 25.4531 43.95C25.2531 44.23 24.9565 44.45 24.5631 44.61V44.66C24.8365 44.74 25.0798 44.8633 25.2931 45.03C25.5131 45.19 25.6831 45.39 25.8031 45.63C25.9298 45.87 25.9931 46.15 25.9931 46.47C25.9931 46.93 25.8665 47.3233 25.6131 47.65C25.3598 47.97 25.0231 48.2167 24.6031 48.39C24.1898 48.5567 23.7365 48.64 23.2431 48.64Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="70.5" y="6.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="70.5" y="6.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M75.3731 17.5V16.48C75.9931 15.9133 76.5365 15.3867 77.0031 14.9C77.4698 14.4133 77.8331 13.96 78.0931 13.54C78.3531 13.1133 78.4831 12.72 78.4831 12.36C78.4831 12.1333 78.4431 11.9433 78.3631 11.79C78.2898 11.63 78.1798 11.51 78.0331 11.43C77.8865 11.35 77.7131 11.31 77.5131 11.31C77.2598 11.31 77.0298 11.3833 76.8231 11.53C76.6231 11.67 76.4331 11.8367 76.2531 12.03L75.2831 11.07C75.6498 10.6767 76.0198 10.3867 76.3931 10.2C76.7731 10.0133 77.2265 9.92 77.7531 9.92C78.2331 9.92 78.6565 10.0167 79.0231 10.21C79.3898 10.4033 79.6765 10.6767 79.8831 11.03C80.0898 11.3767 80.1931 11.7867 80.1931 12.26C80.1931 12.6867 80.0831 13.1233 79.8631 13.57C79.6498 14.01 79.3731 14.4467 79.0331 14.88C78.6931 15.3067 78.3331 15.7133 77.9531 16.1C78.1398 16.0733 78.3465 16.05 78.5731 16.03C78.8065 16.01 79.0065 16 79.1731 16H80.5331V17.5H75.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab09.svg b/public/static/images/canvas/shape/re_normal/plane_tab09.svg
new file mode 100644
index 00000000..94f2ea1c
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab09.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(-1 0 0 1 46 19)" fill="#1083E3"/>
+<path d="M98 40H44V42H98.5L98 40Z" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<path d="M100 40H98L108 87H110L100 40Z" fill="#45CD7D"/>
+<rect width="2" height="68" transform="matrix(-1 0 0 1 2 19)" fill="#EA10AC"/>
+<rect width="2" height="23" transform="matrix(-1 0 0 1 46 19)" fill="#EA10AC"/>
+<path d="M79 43V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M23 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M99 29L49 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M46 8L-7.45058e-07 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="72.5" y="57.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="72.5" y="57.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M79.3031 68.64C78.9098 68.64 78.5531 68.5933 78.2331 68.5C77.9131 68.4133 77.6265 68.2933 77.3731 68.14C77.1265 67.98 76.9031 67.8033 76.7031 67.61L77.5131 66.49C77.6531 66.6233 77.8031 66.7433 77.9631 66.85C78.1231 66.9567 78.2931 67.0433 78.4731 67.11C78.6598 67.17 78.8498 67.2 79.0431 67.2C79.2831 67.2 79.4898 67.1567 79.6631 67.07C79.8365 66.9833 79.9698 66.8533 80.0631 66.68C80.1631 66.5067 80.2131 66.2933 80.2131 66.04C80.2131 65.6667 80.1098 65.3833 79.9031 65.19C79.7031 64.99 79.4431 64.89 79.1231 64.89C78.9165 64.89 78.7431 64.9167 78.6031 64.97C78.4698 65.0167 78.2931 65.11 78.0731 65.25L77.2931 64.74L77.4831 61.05H81.6631V62.54H79.0131L78.9031 63.8C79.0365 63.7467 79.1631 63.71 79.2831 63.69C79.4031 63.6633 79.5331 63.65 79.6731 63.65C80.0931 63.65 80.4798 63.7333 80.8331 63.9C81.1865 64.0667 81.4665 64.3233 81.6731 64.67C81.8865 65.0167 81.9931 65.46 81.9931 66C81.9931 66.5533 81.8665 67.03 81.6131 67.43C81.3665 67.8233 81.0398 68.1233 80.6331 68.33C80.2265 68.5367 79.7831 68.64 79.3031 68.64Z" fill="#101010"/>
+<rect x="16.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="16.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M23.8031 58.5V54.2C23.8031 53.9667 23.8098 53.6933 23.8231 53.38C23.8431 53.06 23.8565 52.78 23.8631 52.54H23.8231C23.7298 52.7533 23.6331 52.9667 23.5331 53.18C23.4331 53.3933 23.3298 53.6067 23.2231 53.82L22.3731 55.29H26.2831V56.64H20.6731V55.41L23.2631 51.05H25.4631V58.5H23.8031Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="66.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="66.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M71.3731 32.5V31.48C71.9931 30.9133 72.5365 30.3867 73.0031 29.9C73.4698 29.4133 73.8331 28.96 74.0931 28.54C74.3531 28.1133 74.4831 27.72 74.4831 27.36C74.4831 27.1333 74.4431 26.9433 74.3631 26.79C74.2898 26.63 74.1798 26.51 74.0331 26.43C73.8865 26.35 73.7131 26.31 73.5131 26.31C73.2598 26.31 73.0298 26.3833 72.8231 26.53C72.6231 26.67 72.4331 26.8367 72.2531 27.03L71.2831 26.07C71.6498 25.6767 72.0198 25.3867 72.3931 25.2C72.7731 25.0133 73.2265 24.92 73.7531 24.92C74.2331 24.92 74.6565 25.0167 75.0231 25.21C75.3898 25.4033 75.6765 25.6767 75.8831 26.03C76.0898 26.3767 76.1931 26.7867 76.1931 27.26C76.1931 27.6867 76.0831 28.1233 75.8631 28.57C75.6498 29.01 75.3731 29.4467 75.0331 29.88C74.6931 30.3067 74.3331 30.7133 73.9531 31.1C74.1398 31.0733 74.3465 31.05 74.5731 31.03C74.8065 31.01 75.0065 31 75.1731 31H76.5331V32.5H71.3731Z" fill="#101010"/>
+<rect x="15.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="15.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M22.7431 11.64C22.3498 11.64 21.9931 11.5967 21.6731 11.51C21.3598 11.4233 21.0798 11.3033 20.8331 11.15C20.5865 10.99 20.3731 10.8067 20.1931 10.6L21.0131 9.48C21.2398 9.68667 21.4831 9.86 21.7431 10C22.0031 10.1333 22.2765 10.2 22.5631 10.2C22.7965 10.2 22.9965 10.17 23.1631 10.11C23.3365 10.0433 23.4698 9.94667 23.5631 9.82C23.6565 9.69333 23.7031 9.53667 23.7031 9.35C23.7031 9.13667 23.6531 8.95333 23.5531 8.8C23.4531 8.64667 23.2665 8.53 22.9931 8.45C22.7198 8.37 22.3231 8.33 21.8031 8.33V7.07C22.2298 7.07 22.5631 7.03 22.8031 6.95C23.0431 6.87 23.2131 6.75667 23.3131 6.61C23.4198 6.46333 23.4731 6.29333 23.4731 6.1C23.4731 5.84667 23.3998 5.65333 23.2531 5.52C23.1065 5.38 22.8965 5.31 22.6231 5.31C22.3765 5.31 22.1498 5.36333 21.9431 5.47C21.7365 5.57667 21.5198 5.73 21.2931 5.93L20.3931 4.84C20.7398 4.54667 21.0998 4.32 21.4731 4.16C21.8531 4 22.2631 3.92 22.7031 3.92C23.2165 3.92 23.6631 4 24.0431 4.16C24.4298 4.31333 24.7265 4.54333 24.9331 4.85C25.1465 5.15 25.2531 5.52333 25.2531 5.97C25.2531 6.33667 25.1531 6.66333 24.9531 6.95C24.7531 7.23 24.4565 7.45 24.0631 7.61V7.66C24.3365 7.74 24.5798 7.86333 24.7931 8.03C25.0131 8.19 25.1831 8.39 25.3031 8.63C25.4298 8.87 25.4931 9.15 25.4931 9.47C25.4931 9.93 25.3665 10.3233 25.1131 10.65C24.8598 10.97 24.5231 11.2167 24.1031 11.39C23.6898 11.5567 23.2365 11.64 22.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab10.svg b/public/static/images/canvas/shape/re_normal/plane_tab10.svg
new file mode 100644
index 00000000..0b051e22
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab10.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="46" height="2" transform="matrix(-1 0 0 1 56 19)" fill="#1083E3"/>
+<rect width="110" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(-1 0 0 1 110 42)" fill="#1083E3"/>
+<path d="M12 19H10L0 87H2L12 19Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(-1 0 0 1 56 19)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(-1 0 0 1 110 44)" fill="#EA10AC"/>
+<path d="M83 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M33 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M108 29L58 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M56 8L10 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="76.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="76.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M83.3031 69.64C82.9098 69.64 82.5531 69.5933 82.2331 69.5C81.9131 69.4133 81.6265 69.2933 81.3731 69.14C81.1265 68.98 80.9031 68.8033 80.7031 68.61L81.5131 67.49C81.6531 67.6233 81.8031 67.7433 81.9631 67.85C82.1231 67.9567 82.2931 68.0433 82.4731 68.11C82.6598 68.17 82.8498 68.2 83.0431 68.2C83.2831 68.2 83.4898 68.1567 83.6631 68.07C83.8365 67.9833 83.9698 67.8533 84.0631 67.68C84.1631 67.5067 84.2131 67.2933 84.2131 67.04C84.2131 66.6667 84.1098 66.3833 83.9031 66.19C83.7031 65.99 83.4431 65.89 83.1231 65.89C82.9165 65.89 82.7431 65.9167 82.6031 65.97C82.4698 66.0167 82.2931 66.11 82.0731 66.25L81.2931 65.74L81.4831 62.05H85.6631V63.54H83.0131L82.9031 64.8C83.0365 64.7467 83.1631 64.71 83.2831 64.69C83.4031 64.6633 83.5331 64.65 83.6731 64.65C84.0931 64.65 84.4798 64.7333 84.8331 64.9C85.1865 65.0667 85.4665 65.3233 85.6731 65.67C85.8865 66.0167 85.9931 66.46 85.9931 67C85.9931 67.5533 85.8665 68.03 85.6131 68.43C85.3665 68.8233 85.0398 69.1233 84.6331 69.33C84.2265 69.5367 83.7831 69.64 83.3031 69.64Z" fill="#101010"/>
+<rect x="26.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="26.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M33.8031 58.5V54.2C33.8031 53.9667 33.8098 53.6933 33.8231 53.38C33.8431 53.06 33.8565 52.78 33.8631 52.54H33.8231C33.7298 52.7533 33.6331 52.9667 33.5331 53.18C33.4331 53.3933 33.3298 53.6067 33.2231 53.82L32.3731 55.29H36.2831V56.64H30.6731V55.41L33.2631 51.05H35.4631V58.5H33.8031Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="75.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="75.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.3731 32.5V31.48C80.9931 30.9133 81.5365 30.3867 82.0031 29.9C82.4698 29.4133 82.8331 28.96 83.0931 28.54C83.3531 28.1133 83.4831 27.72 83.4831 27.36C83.4831 27.1333 83.4431 26.9433 83.3631 26.79C83.2898 26.63 83.1798 26.51 83.0331 26.43C82.8865 26.35 82.7131 26.31 82.5131 26.31C82.2598 26.31 82.0298 26.3833 81.8231 26.53C81.6231 26.67 81.4331 26.8367 81.2531 27.03L80.2831 26.07C80.6498 25.6767 81.0198 25.3867 81.3931 25.2C81.7731 25.0133 82.2265 24.92 82.7531 24.92C83.2331 24.92 83.6565 25.0167 84.0231 25.21C84.3898 25.4033 84.6765 25.6767 84.8831 26.03C85.0898 26.3767 85.1931 26.7867 85.1931 27.26C85.1931 27.6867 85.0831 28.1233 84.8631 28.57C84.6498 29.01 84.3731 29.4467 84.0331 29.88C83.6931 30.3067 83.3331 30.7133 82.9531 31.1C83.1398 31.0733 83.3465 31.05 83.5731 31.03C83.8065 31.01 84.0065 31 84.1731 31H85.5331V32.5H80.3731Z" fill="#101010"/>
+<rect x="25.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="25.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.7431 11.64C32.3498 11.64 31.9931 11.5967 31.6731 11.51C31.3598 11.4233 31.0798 11.3033 30.8331 11.15C30.5865 10.99 30.3731 10.8067 30.1931 10.6L31.0131 9.48C31.2398 9.68667 31.4831 9.86 31.7431 10C32.0031 10.1333 32.2765 10.2 32.5631 10.2C32.7965 10.2 32.9965 10.17 33.1631 10.11C33.3365 10.0433 33.4698 9.94667 33.5631 9.82C33.6565 9.69333 33.7031 9.53667 33.7031 9.35C33.7031 9.13667 33.6531 8.95333 33.5531 8.8C33.4531 8.64667 33.2665 8.53 32.9931 8.45C32.7198 8.37 32.3231 8.33 31.8031 8.33V7.07C32.2298 7.07 32.5631 7.03 32.8031 6.95C33.0431 6.87 33.2131 6.75667 33.3131 6.61C33.4198 6.46333 33.4731 6.29333 33.4731 6.1C33.4731 5.84667 33.3998 5.65333 33.2531 5.52C33.1065 5.38 32.8965 5.31 32.6231 5.31C32.3765 5.31 32.1498 5.36333 31.9431 5.47C31.7365 5.57667 31.5198 5.73 31.2931 5.93L30.3931 4.84C30.7398 4.54667 31.0998 4.32 31.4731 4.16C31.8531 4 32.2631 3.92 32.7031 3.92C33.2165 3.92 33.6631 4 34.0431 4.16C34.4298 4.31333 34.7265 4.54333 34.9331 4.85C35.1465 5.15 35.2531 5.52333 35.2531 5.97C35.2531 6.33667 35.1531 6.66333 34.9531 6.95C34.7531 7.23 34.4565 7.45 34.0631 7.61V7.66C34.3365 7.74 34.5798 7.86333 34.7931 8.03C35.0131 8.19 35.1831 8.39 35.3031 8.63C35.4298 8.87 35.4931 9.15 35.4931 9.47C35.4931 9.93 35.3665 10.3233 35.1131 10.65C34.8598 10.97 34.5231 11.2167 34.1031 11.39C33.6898 11.5567 33.2365 11.64 32.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab11.svg b/public/static/images/canvas/shape/re_normal/plane_tab11.svg
new file mode 100644
index 00000000..64b6796d
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab11.svg
@@ -0,0 +1,28 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="53" height="2" transform="matrix(-1 0 0 1 109 19)" fill="#1083E3"/>
+<rect width="100" height="2" transform="matrix(-1 0 0 1 100 87)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(-1 0 0 1 56 42)" fill="#1083E3"/>
+<path d="M110 19H108L98 87H100L110 19Z" fill="#45CD7D"/>
+<rect width="2" height="23" transform="matrix(-1 0 0 1 56 19)" fill="#EA10AC"/>
+<rect width="2" height="43" transform="matrix(-1 0 0 1 2 44)" fill="#EA10AC"/>
+<path d="M27 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M81 22V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M52 29L2 29" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M108 8L54 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="20.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="20.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M27.3031 69.64C26.9098 69.64 26.5531 69.5933 26.2331 69.5C25.9131 69.4133 25.6265 69.2933 25.3731 69.14C25.1265 68.98 24.9031 68.8033 24.7031 68.61L25.5131 67.49C25.6531 67.6233 25.8031 67.7433 25.9631 67.85C26.1231 67.9567 26.2931 68.0433 26.4731 68.11C26.6598 68.17 26.8498 68.2 27.0431 68.2C27.2831 68.2 27.4898 68.1567 27.6631 68.07C27.8365 67.9833 27.9698 67.8533 28.0631 67.68C28.1631 67.5067 28.2131 67.2933 28.2131 67.04C28.2131 66.6667 28.1098 66.3833 27.9031 66.19C27.7031 65.99 27.4431 65.89 27.1231 65.89C26.9165 65.89 26.7431 65.9167 26.6031 65.97C26.4698 66.0167 26.2931 66.11 26.0731 66.25L25.2931 65.74L25.4831 62.05H29.6631V63.54H27.0131L26.9031 64.8C27.0365 64.7467 27.1631 64.71 27.2831 64.69C27.4031 64.6633 27.5331 64.65 27.6731 64.65C28.0931 64.65 28.4798 64.7333 28.8331 64.9C29.1865 65.0667 29.4665 65.3233 29.6731 65.67C29.8865 66.0167 29.9931 66.46 29.9931 67C29.9931 67.5533 29.8665 68.03 29.6131 68.43C29.3665 68.8233 29.0398 69.1233 28.6331 69.33C28.2265 69.5367 27.7831 69.64 27.3031 69.64Z" fill="#101010"/>
+<rect x="74.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="74.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M81.8031 58.5V54.2C81.8031 53.9667 81.8098 53.6933 81.8231 53.38C81.8431 53.06 81.8565 52.78 81.8631 52.54H81.8231C81.7298 52.7533 81.6331 52.9667 81.5331 53.18C81.4331 53.3933 81.3298 53.6067 81.2231 53.82L80.3731 55.29H84.2831V56.64H78.6731V55.41L81.2631 51.05H83.4631V58.5H81.8031Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="19.5" y="21.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="19.5" y="21.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M24.3731 32.5V31.48C24.9931 30.9133 25.5365 30.3867 26.0031 29.9C26.4698 29.4133 26.8331 28.96 27.0931 28.54C27.3531 28.1133 27.4831 27.72 27.4831 27.36C27.4831 27.1333 27.4431 26.9433 27.3631 26.79C27.2898 26.63 27.1798 26.51 27.0331 26.43C26.8865 26.35 26.7131 26.31 26.5131 26.31C26.2598 26.31 26.0298 26.3833 25.8231 26.53C25.6231 26.67 25.4331 26.8367 25.2531 27.03L24.2831 26.07C24.6498 25.6767 25.0198 25.3867 25.3931 25.2C25.7731 25.0133 26.2265 24.92 26.7531 24.92C27.2331 24.92 27.6565 25.0167 28.0231 25.21C28.3898 25.4033 28.6765 25.6767 28.8831 26.03C29.0898 26.3767 29.1931 26.7867 29.1931 27.26C29.1931 27.6867 29.0831 28.1233 28.8631 28.57C28.6498 29.01 28.3731 29.4467 28.0331 29.88C27.6931 30.3067 27.3331 30.7133 26.9531 31.1C27.1398 31.0733 27.3465 31.05 27.5731 31.03C27.8065 31.01 28.0065 31 28.1731 31H29.5331V32.5H24.3731Z" fill="#101010"/>
+<rect x="73.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="73.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M80.7431 11.64C80.3498 11.64 79.9931 11.5967 79.6731 11.51C79.3598 11.4233 79.0798 11.3033 78.8331 11.15C78.5865 10.99 78.3731 10.8067 78.1931 10.6L79.0131 9.48C79.2398 9.68667 79.4831 9.86 79.7431 10C80.0031 10.1333 80.2765 10.2 80.5631 10.2C80.7965 10.2 80.9965 10.17 81.1631 10.11C81.3365 10.0433 81.4698 9.94667 81.5631 9.82C81.6565 9.69333 81.7031 9.53667 81.7031 9.35C81.7031 9.13667 81.6531 8.95333 81.5531 8.8C81.4531 8.64667 81.2665 8.53 80.9931 8.45C80.7198 8.37 80.3231 8.33 79.8031 8.33V7.07C80.2298 7.07 80.5631 7.03 80.8031 6.95C81.0431 6.87 81.2131 6.75667 81.3131 6.61C81.4198 6.46333 81.4731 6.29333 81.4731 6.1C81.4731 5.84667 81.3998 5.65333 81.2531 5.52C81.1065 5.38 80.8965 5.31 80.6231 5.31C80.3765 5.31 80.1498 5.36333 79.9431 5.47C79.7365 5.57667 79.5198 5.73 79.2931 5.93L78.3931 4.84C78.7398 4.54667 79.0998 4.32 79.4731 4.16C79.8531 4 80.2631 3.92 80.7031 3.92C81.2165 3.92 81.6631 4 82.0431 4.16C82.4298 4.31333 82.7265 4.54333 82.9331 4.85C83.1465 5.15 83.2531 5.52333 83.2531 5.97C83.2531 6.33667 83.1531 6.66333 82.9531 6.95C82.7531 7.23 82.4565 7.45 82.0631 7.61V7.66C82.3365 7.74 82.5798 7.86333 82.7931 8.03C83.0131 8.19 83.1831 8.39 83.3031 8.63C83.4298 8.87 83.4931 9.15 83.4931 9.47C83.4931 9.93 83.3665 10.3233 83.1131 10.65C82.8598 10.97 82.5231 11.2167 82.1031 11.39C81.6898 11.5567 81.2365 11.64 80.7431 11.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab12.svg b/public/static/images/canvas/shape/re_normal/plane_tab12.svg
new file mode 100644
index 00000000..8885243b
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab12.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<rect width="46" height="2" transform="matrix(-1 0 0 1 56 42)" fill="#1083E3"/>
+<path d="M12 42H10L0 87H2L12 42Z" fill="#45CD7D"/>
+<path d="M81 0H83L110 87H108L81 0Z" fill="#45CD7D"/>
+<path d="M83 0H81L54 44H56L83 0Z" fill="#45CD7D"/>
+<path d="M34 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M81 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M60 31L10 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 69.5V65.2C34.8031 64.9667 34.8098 64.6933 34.8231 64.38C34.8431 64.06 34.8565 63.78 34.8631 63.54H34.8231C34.7298 63.7533 34.6331 63.9667 34.5331 64.18C34.4331 64.3933 34.3298 64.6067 34.2231 64.82L33.3731 66.29H37.2831V67.64H31.6731V66.41L34.2631 62.05H36.4631V69.5H34.8031Z" fill="#101010"/>
+<rect x="0.5" y="-0.5" width="14" height="14" rx="7" transform="matrix(1 0 0 -1 74 53)" fill="white"/>
+<rect x="0.5" y="-0.5" width="14" height="14" rx="7" transform="matrix(1 0 0 -1 74 53)" stroke="black"/>
+<path d="M81.2431 42.36C80.8498 42.36 80.4931 42.4033 80.1731 42.49C79.8598 42.5767 79.5798 42.6967 79.3331 42.85C79.0865 43.01 78.8731 43.1933 78.6931 43.4L79.5131 44.52C79.7398 44.3133 79.9831 44.14 80.2431 44C80.5031 43.8667 80.7765 43.8 81.0631 43.8C81.2965 43.8 81.4965 43.83 81.6631 43.89C81.8365 43.9567 81.9698 44.0533 82.0631 44.18C82.1565 44.3067 82.2031 44.4633 82.2031 44.65C82.2031 44.8633 82.1531 45.0467 82.0531 45.2C81.9531 45.3533 81.7665 45.47 81.4931 45.55C81.2198 45.63 80.8231 45.67 80.3031 45.67V46.93C80.7298 46.93 81.0631 46.97 81.3031 47.05C81.5431 47.13 81.7131 47.2433 81.8131 47.39C81.9198 47.5367 81.9731 47.7067 81.9731 47.9C81.9731 48.1533 81.8998 48.3467 81.7531 48.48C81.6065 48.62 81.3965 48.69 81.1231 48.69C80.8765 48.69 80.6498 48.6367 80.4431 48.53C80.2365 48.4233 80.0198 48.27 79.7931 48.07L78.8931 49.16C79.2398 49.4533 79.5998 49.68 79.9731 49.84C80.3531 50 80.7631 50.08 81.2031 50.08C81.7165 50.08 82.1631 50 82.5431 49.84C82.9298 49.6867 83.2265 49.4567 83.4331 49.15C83.6465 48.85 83.7531 48.4767 83.7531 48.03C83.7531 47.6633 83.6531 47.3367 83.4531 47.05C83.2531 46.77 82.9565 46.55 82.5631 46.39V46.34C82.8365 46.26 83.0798 46.1367 83.2931 45.97C83.5131 45.81 83.6831 45.61 83.8031 45.37C83.9298 45.13 83.9931 44.85 83.9931 44.53C83.9931 44.07 83.8665 43.6767 83.6131 43.35C83.3598 43.03 83.0231 42.7833 82.6031 42.61C82.1898 42.4433 81.7365 42.36 81.2431 42.36Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="27.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="27.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.3731 34.5V33.48C32.9931 32.9133 33.5365 32.3867 34.0031 31.9C34.4698 31.4133 34.8331 30.96 35.0931 30.54C35.3531 30.1133 35.4831 29.72 35.4831 29.36C35.4831 29.1333 35.4431 28.9433 35.3631 28.79C35.2898 28.63 35.1798 28.51 35.0331 28.43C34.8865 28.35 34.7131 28.31 34.5131 28.31C34.2598 28.31 34.0298 28.3833 33.8231 28.53C33.6231 28.67 33.4331 28.8367 33.2531 29.03L32.2831 28.07C32.6498 27.6767 33.0198 27.3867 33.3931 27.2C33.7731 27.0133 34.2265 26.92 34.7531 26.92C35.2331 26.92 35.6565 27.0167 36.0231 27.21C36.3898 27.4033 36.6765 27.6767 36.8831 28.03C37.0898 28.3767 37.1931 28.7867 37.1931 29.26C37.1931 29.6867 37.0831 30.1233 36.8631 30.57C36.6498 31.01 36.3731 31.4467 36.0331 31.88C35.6931 32.3067 35.3331 32.7133 34.9531 33.1C35.1398 33.0733 35.3465 33.05 35.5731 33.03C35.8065 33.01 36.0065 33 36.1731 33H37.5331V34.5H32.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab13.svg b/public/static/images/canvas/shape/re_normal/plane_tab13.svg
new file mode 100644
index 00000000..3537d722
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab13.svg
@@ -0,0 +1,23 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="110" height="2" transform="matrix(-1 0 0 1 110 87)" fill="#101010"/>
+<rect width="56" height="2" transform="matrix(-1 0 0 1 56 42)" fill="#1083E3"/>
+<path d="M81 0H83L110 87H108L81 0Z" fill="#45CD7D"/>
+<path d="M83 0H81L54 44H56L83 0Z" fill="#45CD7D"/>
+<rect width="2" height="43" transform="matrix(-1 0 0 1 2 44)" fill="#EA10AC"/>
+<path d="M34 45V86" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M81 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M109 100H1" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M60 31L10 31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="27.5" y="58.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="27.5" y="58.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M34.8031 69.5V65.2C34.8031 64.9667 34.8098 64.6933 34.8231 64.38C34.8431 64.06 34.8565 63.78 34.8631 63.54H34.8231C34.7298 63.7533 34.6331 63.9667 34.5331 64.18C34.4331 64.3933 34.3298 64.6067 34.2231 64.82L33.3731 66.29H37.2831V67.64H31.6731V66.41L34.2631 62.05H36.4631V69.5H34.8031Z" fill="#101010"/>
+<rect x="74.5" y="39.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="74.5" y="39.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M81.2431 50.64C80.8498 50.64 80.4931 50.5967 80.1731 50.51C79.8598 50.4233 79.5798 50.3033 79.3331 50.15C79.0865 49.99 78.8731 49.8067 78.6931 49.6L79.5131 48.48C79.7398 48.6867 79.9831 48.86 80.2431 49C80.5031 49.1333 80.7765 49.2 81.0631 49.2C81.2965 49.2 81.4965 49.17 81.6631 49.11C81.8365 49.0433 81.9698 48.9467 82.0631 48.82C82.1565 48.6933 82.2031 48.5367 82.2031 48.35C82.2031 48.1367 82.1531 47.9533 82.0531 47.8C81.9531 47.6467 81.7665 47.53 81.4931 47.45C81.2198 47.37 80.8231 47.33 80.3031 47.33V46.07C80.7298 46.07 81.0631 46.03 81.3031 45.95C81.5431 45.87 81.7131 45.7567 81.8131 45.61C81.9198 45.4633 81.9731 45.2933 81.9731 45.1C81.9731 44.8467 81.8998 44.6533 81.7531 44.52C81.6065 44.38 81.3965 44.31 81.1231 44.31C80.8765 44.31 80.6498 44.3633 80.4431 44.47C80.2365 44.5767 80.0198 44.73 79.7931 44.93L78.8931 43.84C79.2398 43.5467 79.5998 43.32 79.9731 43.16C80.3531 43 80.7631 42.92 81.2031 42.92C81.7165 42.92 82.1631 43 82.5431 43.16C82.9298 43.3133 83.2265 43.5433 83.4331 43.85C83.6465 44.15 83.7531 44.5233 83.7531 44.97C83.7531 45.3367 83.6531 45.6633 83.4531 45.95C83.2531 46.23 82.9565 46.45 82.5631 46.61V46.66C82.8365 46.74 83.0798 46.8633 83.2931 47.03C83.5131 47.19 83.6831 47.39 83.8031 47.63C83.9298 47.87 83.9931 48.15 83.9931 48.47C83.9931 48.93 83.8665 49.3233 83.6131 49.65C83.3598 49.97 83.0231 50.2167 82.6031 50.39C82.1898 50.5567 81.7365 50.64 81.2431 50.64Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="27.5" y="23.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="27.5" y="23.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M32.3731 34.5V33.48C32.9931 32.9133 33.5365 32.3867 34.0031 31.9C34.4698 31.4133 34.8331 30.96 35.0931 30.54C35.3531 30.1133 35.4831 29.72 35.4831 29.36C35.4831 29.1333 35.4431 28.9433 35.3631 28.79C35.2898 28.63 35.1798 28.51 35.0331 28.43C34.8865 28.35 34.7131 28.31 34.5131 28.31C34.2598 28.31 34.0298 28.3833 33.8231 28.53C33.6231 28.67 33.4331 28.8367 33.2531 29.03L32.2831 28.07C32.6498 27.6767 33.0198 27.3867 33.3931 27.2C33.7731 27.0133 34.2265 26.92 34.7531 26.92C35.2331 26.92 35.6565 27.0167 36.0231 27.21C36.3898 27.4033 36.6765 27.6767 36.8831 28.03C37.0898 28.3767 37.1931 28.7867 37.1931 29.26C37.1931 29.6867 37.0831 30.1233 36.8631 30.57C36.6498 31.01 36.3731 31.4467 36.0331 31.88C35.6931 32.3067 35.3331 32.7133 34.9531 33.1C35.1398 33.0733 35.3465 33.05 35.5731 33.03C35.8065 33.01 36.0065 33 36.1731 33H37.5331V34.5H32.3731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab14.svg b/public/static/images/canvas/shape/re_normal/plane_tab14.svg
new file mode 100644
index 00000000..440f09d1
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab14.svg
@@ -0,0 +1,29 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="87" width="42" height="2" fill="#101010"/>
+<rect x="68" y="87" width="42" height="2" fill="#101010"/>
+<rect y="19" width="110" height="2" fill="#1083E3"/>
+<path d="M56 63H54L40 87H42L56 63Z" fill="#45CD7D"/>
+<path d="M54 63H56L70 87H68L54 63Z" fill="#45CD7D"/>
+<rect x="108" y="21" width="2" height="66" fill="#EA10AC"/>
+<rect y="21" width="2" height="66" fill="#EA10AC"/>
+<path d="M55 22V62" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M21 23V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 8L109 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M0 100H40" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M70 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.3031 46.64C53.9098 46.64 53.5531 46.5933 53.2331 46.5C52.9131 46.4133 52.6265 46.2933 52.3731 46.14C52.1265 45.98 51.9031 45.8033 51.7031 45.61L52.5131 44.49C52.6531 44.6233 52.8031 44.7433 52.9631 44.85C53.1231 44.9567 53.2931 45.0433 53.4731 45.11C53.6598 45.17 53.8498 45.2 54.0431 45.2C54.2831 45.2 54.4898 45.1567 54.6631 45.07C54.8365 44.9833 54.9698 44.8533 55.0631 44.68C55.1631 44.5067 55.2131 44.2933 55.2131 44.04C55.2131 43.6667 55.1098 43.3833 54.9031 43.19C54.7031 42.99 54.4431 42.89 54.1231 42.89C53.9165 42.89 53.7431 42.9167 53.6031 42.97C53.4698 43.0167 53.2931 43.11 53.0731 43.25L52.2931 42.74L52.4831 39.05H56.6631V40.54H54.0131L53.9031 41.8C54.0365 41.7467 54.1631 41.71 54.2831 41.69C54.4031 41.6633 54.5331 41.65 54.6731 41.65C55.0931 41.65 55.4798 41.7333 55.8331 41.9C56.1865 42.0667 56.4665 42.3233 56.6731 42.67C56.8865 43.0167 56.9931 43.46 56.9931 44C56.9931 44.5533 56.8665 45.03 56.6131 45.43C56.3665 45.8233 56.0398 46.1233 55.6331 46.33C55.2265 46.5367 54.7831 46.64 54.3031 46.64Z" fill="#101010"/>
+<rect x="13.5" y="47.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="13.5" y="47.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M20.8031 58.5V54.2C20.8031 53.9667 20.8098 53.6933 20.8231 53.38C20.8431 53.06 20.8565 52.78 20.8631 52.54H20.8231C20.7298 52.7533 20.6331 52.9667 20.5331 53.18C20.4331 53.3933 20.3298 53.6067 20.2231 53.82L19.3731 55.29H23.2831V56.64H17.6731V55.41L20.2631 51.05H22.4631V58.5H20.8031Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
+<rect x="12.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="12.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M17.3731 103.5V102.48C17.9931 101.913 18.5365 101.387 19.0031 100.9C19.4698 100.413 19.8331 99.96 20.0931 99.54C20.3531 99.1133 20.4831 98.72 20.4831 98.36C20.4831 98.1333 20.4431 97.9433 20.3631 97.79C20.2898 97.63 20.1798 97.51 20.0331 97.43C19.8865 97.35 19.7131 97.31 19.5131 97.31C19.2598 97.31 19.0298 97.3833 18.8231 97.53C18.6231 97.67 18.4331 97.8367 18.2531 98.03L17.2831 97.07C17.6498 96.6767 18.0198 96.3867 18.3931 96.2C18.7731 96.0133 19.2265 95.92 19.7531 95.92C20.2331 95.92 20.6565 96.0167 21.0231 96.21C21.3898 96.4033 21.6765 96.6767 21.8831 97.03C22.0898 97.3767 22.1931 97.7867 22.1931 98.26C22.1931 98.6867 22.0831 99.1233 21.8631 99.57C21.6498 100.01 21.3731 100.447 21.0331 100.88C20.6931 101.307 20.3331 101.713 19.9531 102.1C20.1398 102.073 20.3465 102.05 20.5731 102.03C20.8065 102.01 21.0065 102 21.1731 102H22.5331V103.5H17.3731Z" fill="#101010"/>
+<rect x="82.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="82.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M89.7431 103.64C89.3498 103.64 88.9931 103.597 88.6731 103.51C88.3598 103.423 88.0798 103.303 87.8331 103.15C87.5865 102.99 87.3731 102.807 87.1931 102.6L88.0131 101.48C88.2398 101.687 88.4831 101.86 88.7431 102C89.0031 102.133 89.2765 102.2 89.5631 102.2C89.7965 102.2 89.9965 102.17 90.1631 102.11C90.3365 102.043 90.4698 101.947 90.5631 101.82C90.6565 101.693 90.7031 101.537 90.7031 101.35C90.7031 101.137 90.6531 100.953 90.5531 100.8C90.4531 100.647 90.2665 100.53 89.9931 100.45C89.7198 100.37 89.3231 100.33 88.8031 100.33V99.07C89.2298 99.07 89.5631 99.03 89.8031 98.95C90.0431 98.87 90.2131 98.7567 90.3131 98.61C90.4198 98.4633 90.4731 98.2933 90.4731 98.1C90.4731 97.8467 90.3998 97.6533 90.2531 97.52C90.1065 97.38 89.8965 97.31 89.6231 97.31C89.3765 97.31 89.1498 97.3633 88.9431 97.47C88.7365 97.5767 88.5198 97.73 88.2931 97.93L87.3931 96.84C87.7398 96.5467 88.0998 96.32 88.4731 96.16C88.8531 96 89.2631 95.92 89.7031 95.92C90.2165 95.92 90.6631 96 91.0431 96.16C91.4298 96.3133 91.7265 96.5433 91.9331 96.85C92.1465 97.15 92.2531 97.5233 92.2531 97.97C92.2531 98.3367 92.1531 98.6633 91.9531 98.95C91.7531 99.23 91.4565 99.45 91.0631 99.61V99.66C91.3365 99.74 91.5798 99.8633 91.7931 100.03C92.0131 100.19 92.1831 100.39 92.3031 100.63C92.4298 100.87 92.4931 101.15 92.4931 101.47C92.4931 101.93 92.3665 102.323 92.1131 102.65C91.8598 102.97 91.5231 103.217 91.1031 103.39C90.6898 103.557 90.2365 103.64 89.7431 103.64Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab15.svg b/public/static/images/canvas/shape/re_normal/plane_tab15.svg
new file mode 100644
index 00000000..ff005996
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab15.svg
@@ -0,0 +1,18 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="18" y="87" width="74" height="2" fill="#101010"/>
+<path d="M19 41.5L54.5 2L91.5 41.5" stroke="#45CD7D" stroke-width="2"/>
+<rect x="90" y="41" width="2" height="46" fill="#EA10AC"/>
+<rect x="18" y="41" width="2" height="46" fill="#EA10AC"/>
+<path d="M55 5V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M8 41V88" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M18 100H92" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="38.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="38.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M51.8731 49.5V48.48C52.4931 47.9133 53.0365 47.3867 53.5031 46.9C53.9698 46.4133 54.3331 45.96 54.5931 45.54C54.8531 45.1133 54.9831 44.72 54.9831 44.36C54.9831 44.1333 54.9431 43.9433 54.8631 43.79C54.7898 43.63 54.6798 43.51 54.5331 43.43C54.3865 43.35 54.2131 43.31 54.0131 43.31C53.7598 43.31 53.5298 43.3833 53.3231 43.53C53.1231 43.67 52.9331 43.8367 52.7531 44.03L51.7831 43.07C52.1498 42.6767 52.5198 42.3867 52.8931 42.2C53.2731 42.0133 53.7265 41.92 54.2531 41.92C54.7331 41.92 55.1565 42.0167 55.5231 42.21C55.8898 42.4033 56.1765 42.6767 56.3831 43.03C56.5898 43.3767 56.6931 43.7867 56.6931 44.26C56.6931 44.6867 56.5831 45.1233 56.3631 45.57C56.1498 46.01 55.8731 46.4467 55.5331 46.88C55.1931 47.3067 54.8331 47.7133 54.4531 48.1C54.6398 48.0733 54.8465 48.05 55.0731 48.03C55.3065 48.01 55.5065 48 55.6731 48H57.0331V49.5H51.8731Z" fill="#101010"/>
+<rect x="0.5" y="57.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="0.5" y="57.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M7.24313 68.64C6.84979 68.64 6.49313 68.5967 6.17313 68.51C5.85979 68.4233 5.57979 68.3033 5.33313 68.15C5.08646 67.99 4.87313 67.8067 4.69313 67.6L5.51313 66.48C5.73979 66.6867 5.98313 66.86 6.24313 67C6.50313 67.1333 6.77646 67.2 7.06313 67.2C7.29646 67.2 7.49646 67.17 7.66313 67.11C7.83646 67.0433 7.96979 66.9467 8.06313 66.82C8.15646 66.6933 8.20313 66.5367 8.20313 66.35C8.20313 66.1367 8.15313 65.9533 8.05313 65.8C7.95313 65.6467 7.76646 65.53 7.49313 65.45C7.21979 65.37 6.82313 65.33 6.30313 65.33V64.07C6.72979 64.07 7.06313 64.03 7.30313 63.95C7.54313 63.87 7.71313 63.7567 7.81313 63.61C7.91979 63.4633 7.97313 63.2933 7.97313 63.1C7.97313 62.8467 7.89979 62.6533 7.75313 62.52C7.60646 62.38 7.39646 62.31 7.12313 62.31C6.87646 62.31 6.64979 62.3633 6.44313 62.47C6.23646 62.5767 6.01979 62.73 5.79313 62.93L4.89313 61.84C5.23979 61.5467 5.59979 61.32 5.97313 61.16C6.35313 61 6.76313 60.92 7.20313 60.92C7.71646 60.92 8.16313 61 8.54313 61.16C8.92979 61.3133 9.22646 61.5433 9.43313 61.85C9.64646 62.15 9.75313 62.5233 9.75313 62.97C9.75313 63.3367 9.65313 63.6633 9.45312 63.95C9.25313 64.23 8.95646 64.45 8.56313 64.61V64.66C8.83646 64.74 9.07979 64.8633 9.29313 65.03C9.51313 65.19 9.68313 65.39 9.80313 65.63C9.92979 65.87 9.99313 66.15 9.99313 66.47C9.99313 66.93 9.86646 67.3233 9.61313 67.65C9.35979 67.97 9.02313 68.2167 8.60313 68.39C8.18979 68.5567 7.73646 68.64 7.24313 68.64Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab16.svg b/public/static/images/canvas/shape/re_normal/plane_tab16.svg
new file mode 100644
index 00000000..4ac68a72
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab16.svg
@@ -0,0 +1,24 @@
+<svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 88L26 69" stroke="#45CD7D" stroke-width="2"/>
+<path d="M109 88L84 69" stroke="#45CD7D" stroke-width="2"/>
+<rect y="87" width="110" height="2" fill="#101010"/>
+<rect x="25" y="19" width="60" height="2" fill="#1083E3"/>
+<rect x="25" y="21" width="2" height="49" fill="#EA10AC"/>
+<rect x="83" y="21" width="2" height="49" fill="#EA10AC"/>
+<path d="M55 22V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M14 19V66" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M1 100H109" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M25 8L85 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="47.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="47.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M54.2431 57.64C53.8498 57.64 53.4931 57.5967 53.1731 57.51C52.8598 57.4233 52.5798 57.3033 52.3331 57.15C52.0865 56.99 51.8731 56.8067 51.6931 56.6L52.5131 55.48C52.7398 55.6867 52.9831 55.86 53.2431 56C53.5031 56.1333 53.7765 56.2 54.0631 56.2C54.2965 56.2 54.4965 56.17 54.6631 56.11C54.8365 56.0433 54.9698 55.9467 55.0631 55.82C55.1565 55.6933 55.2031 55.5367 55.2031 55.35C55.2031 55.1367 55.1531 54.9533 55.0531 54.8C54.9531 54.6467 54.7665 54.53 54.4931 54.45C54.2198 54.37 53.8231 54.33 53.3031 54.33V53.07C53.7298 53.07 54.0631 53.03 54.3031 52.95C54.5431 52.87 54.7131 52.7567 54.8131 52.61C54.9198 52.4633 54.9731 52.2933 54.9731 52.1C54.9731 51.8467 54.8998 51.6533 54.7531 51.52C54.6065 51.38 54.3965 51.31 54.1231 51.31C53.8765 51.31 53.6498 51.3633 53.4431 51.47C53.2365 51.5767 53.0198 51.73 52.7931 51.93L51.8931 50.84C52.2398 50.5467 52.5998 50.32 52.9731 50.16C53.3531 50 53.7631 49.92 54.2031 49.92C54.7165 49.92 55.1631 50 55.5431 50.16C55.9298 50.3133 56.2265 50.5433 56.4331 50.85C56.6465 51.15 56.7531 51.5233 56.7531 51.97C56.7531 52.3367 56.6531 52.6633 56.4531 52.95C56.2531 53.23 55.9565 53.45 55.5631 53.61V53.66C55.8365 53.74 56.0798 53.8633 56.2931 54.03C56.5131 54.19 56.6831 54.39 56.8031 54.63C56.9298 54.87 56.9931 55.15 56.9931 55.47C56.9931 55.93 56.8665 56.3233 56.6131 56.65C56.3598 56.97 56.0231 57.2167 55.6031 57.39C55.1898 57.5567 54.7365 57.64 54.2431 57.64Z" fill="#101010"/>
+<rect x="6.5" y="35.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="6.5" y="35.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M13.8031 46.5V42.2C13.8031 41.9667 13.8098 41.6933 13.8231 41.38C13.8431 41.06 13.8565 40.78 13.8631 40.54H13.8231C13.7298 40.7533 13.6331 40.9667 13.5331 41.18C13.4331 41.3933 13.3298 41.6067 13.2231 41.82L12.3731 43.29H16.2831V44.64H10.6731V43.41L13.2631 39.05H15.4631V46.5H13.8031Z" fill="#101010"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M52.8731 12V10.98C53.4931 10.4133 54.0365 9.88667 54.5031 9.4C54.9698 8.91333 55.3331 8.46 55.5931 8.04C55.8531 7.61333 55.9831 7.22 55.9831 6.86C55.9831 6.63333 55.9431 6.44333 55.8631 6.29C55.7898 6.13 55.6798 6.01 55.5331 5.93C55.3865 5.85 55.2131 5.81 55.0131 5.81C54.7598 5.81 54.5298 5.88333 54.3231 6.03C54.1231 6.17 53.9331 6.33667 53.7531 6.53L52.7831 5.57C53.1498 5.17667 53.5198 4.88667 53.8931 4.7C54.2731 4.51333 54.7265 4.42 55.2531 4.42C55.7331 4.42 56.1565 4.51667 56.5231 4.71C56.8898 4.90333 57.1765 5.17667 57.3831 5.53C57.5898 5.87667 57.6931 6.28667 57.6931 6.76C57.6931 7.18667 57.5831 7.62333 57.3631 8.07C57.1498 8.51 56.8731 8.94667 56.5331 9.38C56.1931 9.80667 55.8331 10.2133 55.4531 10.6C55.6398 10.5733 55.8465 10.55 56.0731 10.53C56.3065 10.51 56.5065 10.5 56.6731 10.5H58.0331V12H52.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab17.svg b/public/static/images/canvas/shape/re_normal/plane_tab17.svg
new file mode 100644
index 00000000..81b89809
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab17.svg
@@ -0,0 +1,22 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.5 88L12.5 45L26 19.5" stroke="#45CD7D" stroke-width="2"/>
+<path d="M99 88L69 19.5" stroke="#45CD7D" stroke-width="2"/>
+<rect width="70" height="2" transform="matrix(-1 0 0 1 100 87)" fill="#101010"/>
+<rect width="45" height="2" transform="matrix(-1 0 0 1 70 19)" fill="#1083E3"/>
+<path d="M50 22V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M79.7651 19.3445L110.062 81.337" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M100 100H30" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M70 8L26 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="46.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="46.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M50.2431 57.64C49.8498 57.64 49.4931 57.5967 49.1731 57.51C48.8598 57.4233 48.5798 57.3033 48.3331 57.15C48.0865 56.99 47.8731 56.8067 47.6931 56.6L48.5131 55.48C48.7398 55.6867 48.9831 55.86 49.2431 56C49.5031 56.1333 49.7765 56.2 50.0631 56.2C50.2965 56.2 50.4965 56.17 50.6631 56.11C50.8365 56.0433 50.9698 55.9467 51.0631 55.82C51.1565 55.6933 51.2031 55.5367 51.2031 55.35C51.2031 55.1367 51.1531 54.9533 51.0531 54.8C50.9531 54.6467 50.7665 54.53 50.4931 54.45C50.2198 54.37 49.8231 54.33 49.3031 54.33V53.07C49.7298 53.07 50.0631 53.03 50.3031 52.95C50.5431 52.87 50.7131 52.7567 50.8131 52.61C50.9198 52.4633 50.9731 52.2933 50.9731 52.1C50.9731 51.8467 50.8998 51.6533 50.7531 51.52C50.6065 51.38 50.3965 51.31 50.1231 51.31C49.8765 51.31 49.6498 51.3633 49.4431 51.47C49.2365 51.5767 49.0198 51.73 48.7931 51.93L47.8931 50.84C48.2398 50.5467 48.5998 50.32 48.9731 50.16C49.3531 50 49.7631 49.92 50.2031 49.92C50.7165 49.92 51.1631 50 51.5431 50.16C51.9298 50.3133 52.2265 50.5433 52.4331 50.85C52.6465 51.15 52.7531 51.5233 52.7531 51.97C52.7531 52.3367 52.6531 52.6633 52.4531 52.95C52.2531 53.23 51.9565 53.45 51.5631 53.61V53.66C51.8365 53.74 52.0798 53.8633 52.2931 54.03C52.5131 54.19 52.6831 54.39 52.8031 54.63C52.9298 54.87 52.9931 55.15 52.9931 55.47C52.9931 55.93 52.8665 56.3233 52.6131 56.65C52.3598 56.97 52.0231 57.2167 51.6031 57.39C51.1898 57.5567 50.7365 57.64 50.2431 57.64Z" fill="#101010"/>
+<rect x="87.4995" y="43.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="87.4995" y="43.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M94.8026 54.5V50.2C94.8026 49.9667 94.8093 49.6933 94.8226 49.38C94.8426 49.06 94.856 48.78 94.8626 48.54H94.8226C94.7293 48.7533 94.6326 48.9667 94.5326 49.18C94.4326 49.3933 94.3293 49.6067 94.2226 49.82L93.3726 51.29H97.2826V52.64H91.6726V51.41L94.2626 47.05H96.4626V54.5H94.8026Z" fill="#101010"/>
+<rect x="57.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="57.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M62.7331 103.5V102.06H64.3131V97.83H62.9431V96.73C63.3431 96.6567 63.6831 96.5667 63.9631 96.46C64.2498 96.3533 64.5231 96.2167 64.7831 96.05H66.0931V102.06H67.4331V103.5H62.7331Z" fill="#101010"/>
+<rect x="40.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="40.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M45.8731 12V10.98C46.4931 10.4133 47.0365 9.88667 47.5031 9.4C47.9698 8.91333 48.3331 8.46 48.5931 8.04C48.8531 7.61333 48.9831 7.22 48.9831 6.86C48.9831 6.63333 48.9431 6.44333 48.8631 6.29C48.7898 6.13 48.6798 6.01 48.5331 5.93C48.3865 5.85 48.2131 5.81 48.0131 5.81C47.7598 5.81 47.5298 5.88333 47.3231 6.03C47.1231 6.17 46.9331 6.33667 46.7531 6.53L45.7831 5.57C46.1498 5.17667 46.5198 4.88667 46.8931 4.7C47.2731 4.51333 47.7265 4.42 48.2531 4.42C48.7331 4.42 49.1565 4.51667 49.5231 4.71C49.8898 4.90333 50.1765 5.17667 50.3831 5.53C50.5898 5.87667 50.6931 6.28667 50.6931 6.76C50.6931 7.18667 50.5831 7.62333 50.3631 8.07C50.1498 8.51 49.8731 8.94667 49.5331 9.38C49.1931 9.80667 48.8331 10.2133 48.4531 10.6C48.6398 10.5733 48.8465 10.55 49.0731 10.53C49.3065 10.51 49.5065 10.5 49.6731 10.5H51.0331V12H45.8731Z" fill="#101010"/>
+</svg>
diff --git a/public/static/images/canvas/shape/re_normal/plane_tab18.svg b/public/static/images/canvas/shape/re_normal/plane_tab18.svg
new file mode 100644
index 00000000..34d44490
--- /dev/null
+++ b/public/static/images/canvas/shape/re_normal/plane_tab18.svg
@@ -0,0 +1,16 @@
+<svg width="111" height="108" viewBox="0 0 111 108" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100 88L51 2L2 34L33 88" stroke="#45CD7D" stroke-width="2"/>
+<rect width="69" height="2" transform="matrix(-1 0 0 1 101 87)" fill="#101010"/>
+<path d="M50 8V85" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M61.0205 0.842041L110.285 82.0703" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<path d="M101 100H31" stroke="#9F9F9F" stroke-dasharray="4 4"/>
+<rect x="43.5" y="39.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="43.5" y="39.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M47.8731 50.5V49.48C48.4931 48.9133 49.0365 48.3867 49.5031 47.9C49.9698 47.4133 50.3331 46.96 50.5931 46.54C50.8531 46.1133 50.9831 45.72 50.9831 45.36C50.9831 45.1333 50.9431 44.9433 50.8631 44.79C50.7898 44.63 50.6798 44.51 50.5331 44.43C50.3865 44.35 50.2131 44.31 50.0131 44.31C49.7598 44.31 49.5298 44.3833 49.3231 44.53C49.1231 44.67 48.9331 44.8367 48.7531 45.03L47.7831 44.07C48.1498 43.6767 48.5198 43.3867 48.8931 43.2C49.2731 43.0133 49.7265 42.92 50.2531 42.92C50.7331 42.92 51.1565 43.0167 51.5231 43.21C51.8898 43.4033 52.1765 43.6767 52.3831 44.03C52.5898 44.3767 52.6931 44.7867 52.6931 45.26C52.6931 45.6867 52.5831 46.1233 52.3631 46.57C52.1498 47.01 51.8731 47.4467 51.5331 47.88C51.1931 48.3067 50.8331 48.7133 50.4531 49.1C50.6398 49.0733 50.8465 49.05 51.0731 49.03C51.3065 49.01 51.5065 49 51.6731 49H53.0331V50.5H47.8731Z" fill="#101010"/>
+<rect x="78.5" y="34.5" width="14" height="14" rx="7" fill="white"/>
+<rect x="78.5" y="34.5" width="14" height="14" rx="7" stroke="black"/>
+<path d="M85.2431 45.64C84.8498 45.64 84.4931 45.5967 84.1731 45.51C83.8598 45.4233 83.5798 45.3033 83.3331 45.15C83.0865 44.99 82.8731 44.8067 82.6931 44.6L83.5131 43.48C83.7398 43.6867 83.9831 43.86 84.2431 44C84.5031 44.1333 84.7765 44.2 85.0631 44.2C85.2965 44.2 85.4965 44.17 85.6631 44.11C85.8365 44.0433 85.9698 43.9467 86.0631 43.82C86.1565 43.6933 86.2031 43.5367 86.2031 43.35C86.2031 43.1367 86.1531 42.9533 86.0531 42.8C85.9531 42.6467 85.7665 42.53 85.4931 42.45C85.2198 42.37 84.8231 42.33 84.3031 42.33V41.07C84.7298 41.07 85.0631 41.03 85.3031 40.95C85.5431 40.87 85.7131 40.7567 85.8131 40.61C85.9198 40.4633 85.9731 40.2933 85.9731 40.1C85.9731 39.8467 85.8998 39.6533 85.7531 39.52C85.6065 39.38 85.3965 39.31 85.1231 39.31C84.8765 39.31 84.6498 39.3633 84.4431 39.47C84.2365 39.5767 84.0198 39.73 83.7931 39.93L82.8931 38.84C83.2398 38.5467 83.5998 38.32 83.9731 38.16C84.3531 38 84.7631 37.92 85.2031 37.92C85.7165 37.92 86.1631 38 86.5431 38.16C86.9298 38.3133 87.2265 38.5433 87.4331 38.85C87.6465 39.15 87.7531 39.5233 87.7531 39.97C87.7531 40.3367 87.6531 40.6633 87.4531 40.95C87.2531 41.23 86.9565 41.45 86.5631 41.61V41.66C86.8365 41.74 87.0798 41.8633 87.2931 42.03C87.5131 42.19 87.6831 42.39 87.8031 42.63C87.9298 42.87 87.9931 43.15 87.9931 43.47C87.9931 43.93 87.8665 44.3233 87.6131 44.65C87.3598 44.97 87.0231 45.2167 86.6031 45.39C86.1898 45.5567 85.7365 45.64 85.2431 45.64Z" fill="#101010"/>
+<rect x="58.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
+<rect x="58.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
+<path d="M63.7331 103.5V102.06H65.3131V97.83H63.9431V96.73C64.3431 96.6567 64.6831 96.5667 64.9631 96.46C65.2498 96.3533 65.5231 96.2167 65.7831 96.05H67.0931V102.06H68.4331V103.5H63.7331Z" fill="#101010"/>
+</svg>
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 485b536e..ba9abb92 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -37,6 +37,7 @@ export default function CanvasMenu(props) {
     setShowOutlineModal,
     setShowPlaceShapeModal,
     setShowSlopeSettingModal,
+    setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowRoofShapeSettingModal,
     setShowObjectSettingModal,
@@ -93,6 +94,7 @@ export default function CanvasMenu(props) {
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
     setShowSlopeSettingModal,
+    setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
     setShowObjectSettingModal,
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index baa2c1d3..dc032ab0 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -33,6 +33,7 @@ export default function FloorPlan() {
   const [showRoofShapePassivitySettingModal, setShowRoofShapePassivitySettingModal] = useState(false)
   const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
   const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
+  const [showPlacementSurfaceSettingModal, setShowPlacementSurfaceSettingModal] = useState(false)
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
@@ -65,6 +66,7 @@ export default function FloorPlan() {
     setShowOutlineModal,
     setShowPlaceShapeModal,
     setShowSlopeSettingModal,
+    setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowRoofShapeSettingModal,
     setShowObjectSettingModal,
@@ -139,7 +141,7 @@ export default function FloorPlan() {
           {/*<Movement />*/}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
-          <PlacementSurfaceSetting />
+          {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
         </div>
       </div>
     </>
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 64ba320d..e5394610 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -16,6 +16,7 @@ export default function MenuDepth01(props) {
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
     setShowSlopeSettingModal,
+    setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
     setShowObjectSettingModal,
@@ -42,6 +43,7 @@ export default function MenuDepth01(props) {
     if (type === 'surface') {
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
+      setShowPlacementSurfaceSettingModal(id === 2)
       setShowObjectSettingModal(id === 3)
     }
   }
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index 79340b73..9ac285c0 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -1,28 +1,45 @@
 import Image from 'next/image'
+import { useMessage } from '@/hooks/useMessage'
 
 export default function PlacementSurface(props) {
-  const { id, lines, hasDiagonal, info } = props
+  const { getMessage } = useMessage()
+  const { id, lines, info, rotate, xInversion, yInversion } = props
   const num = ['①', '②', '③', '④', '⑤']
+  const getImageUrl = () => {
+    if (xInversion && !yInversion) {
+      return `/static/images/canvas/shape/re_${(rotate - 2) % 4 !== 0 ? Math.abs((rotate - 2) % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+    }
+
+    if (!xInversion && yInversion) {
+      return `/static/images/canvas/shape/re_${rotate % 4 !== 0 ? Math.abs(rotate % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+    }
+
+    if (xInversion && yInversion) {
+      return `/static/images/canvas/shape/${(rotate + 2) % 4 !== 0 ? Math.abs((rotate + 2) % 4) * 90 + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+    }
+
+    if (rotate < 0) {
+      return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs((rotate + 4) * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+    }
+
+    return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs(rotate * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
+  }
   return (
     <>
       <div className="plane-shape-wrapper">
         <div className="plane-box shape-box">
-          <h3 className="plane-box-tit">設定</h3>
+          <h3 className="plane-box-tit">{getMessage('setting')}</h3>
           <div className="shape-box-inner">
             <div className="shape-img">
-              <Image
-                src={`/static/images/canvas/plane_tab${id < 10 ? '0' + id : id}.svg`}
-                alt="react"
-                width={0}
-                height={0}
-                style={{ width: 'auto', height: 'auto' }}
-              />
+              <Image src={getImageUrl()} alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
             </div>
             <div className="shape-data">
               <div className="eaves-keraba-table">
                 {lines?.map((line, index) => (
-                  <div className="eaves-keraba-item">
-                    <div className="eaves-keraba-th">{line.isDiagonal ? '斜めの長さ' : num[index]}</div>
+                  <div className="eaves-keraba-item" id={index}>
+                    <div className="eaves-keraba-th">
+                      {line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
+                    </div>
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
                         <div className="input-grid mr5" style={{ width: '57px' }}>
@@ -38,13 +55,13 @@ export default function PlacementSurface(props) {
           </div>
         </div>
         <div className="plane-box direction-box">
-          <h3 className="plane-box-tit">設定</h3>
+          <h3 className="plane-box-tit">{getMessage('setting')}</h3>
           <div className="plane-direction-box">
             <div className="plane-direction">
-              <span className="top">北</span>
-              <span className="right">ドン</span>
-              <span className="bottom">南</span>
-              <span className="left">立つ</span>
+              <span className="top">{getMessage('commons.north')}</span>
+              <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 right"></button>
               <button className="plane-btn down act"></button>
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index 883e1d40..06af2237 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
 
-export default function PlacementSurfaceSetting({}) {
+export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSettingModal }) {
   const { getMessage } = useMessage()
   const [selectedType, setSelectedType] = useState()
   const [rotate, setRotate] = useState(0)
-  const [sideInversion, setSideInversion] = useState(false)
-  const [upsideInversion, setUpsideInversion] = useState(false)
+  const [xInversion, setXInversion] = useState(false)
+  const [yInversion, setYInversion] = useState(false)
   /* type
    * a: line 2
    * b: line 2 + diagonal 1
@@ -28,7 +28,7 @@ export default function PlacementSurfaceSetting({}) {
           value: 3500,
         },
       ],
-      info: 'ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。',
+      info: getMessage('modal.placement.surface.setting.info'),
     },
     {
       id: 2,
@@ -181,30 +181,32 @@ export default function PlacementSurfaceSetting({}) {
       ],
     },
   ]
+  const placementSurfaceProps = {
+    ...selectedType,
+    rotate,
+    xInversion,
+    yInversion,
+  }
 
   const getInversionState = () => {
-    // return `${getScale()} rotate(${90 * rotate}deg)`
     return `${getScale()} ${getRotate()}`
-    // return `${getScale()}`
   }
 
   const getScale = () => {
-    // if (rotate === 1 || rotate === 3) {
-    //   return `scale(${sideInversion ? 1 : -1}, ${upsideInversion ? 1 : -1} )`
-    // } else {
-    //   return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1} )`
-    // }
-    return `scale(${sideInversion ? -1 : 1}, ${upsideInversion ? -1 : 1})`
+    return `scale(${yInversion ? -1 : 1}, ${xInversion ? -1 : 1})`
   }
 
   const getRotate = () => {
-    // return `rotate(${sideInversion && upsideInversion ? 90 * rotate : sideInversion || upsideInversion ? -90 * rotate : 90 * rotate}deg)`
-    if (sideInversion !== upsideInversion) {
-      ;`rotate(${90 * rotate - 180}deg)`
-    }
     return `rotate(${90 * rotate}deg)`
   }
 
+  const onClick = () => {
+    if (xInversion !== yInversion) {
+    } else {
+      setRotate((rotate + 1) % 4)
+    }
+  }
+
   useEffect(() => {
     setSelectedType(types[0])
   }, [])
@@ -213,8 +215,10 @@ export default function PlacementSurfaceSetting({}) {
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap l-2`}>
         <div className="modal-head">
-          <h1 className="title">屋根形状の設定 </h1>
-          <button className="modal-close">닫기</button>
+          <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
+          <button className="modal-close" onClick={() => setShowPlacementSurfaceSettingModal(false)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="plane-shape-menu">
@@ -230,7 +234,6 @@ export default function PlacementSurfaceSetting({}) {
                       width: 'auto',
                       height: 'auto',
                       transform: getInversionState(),
-                      transition: 'all .15s ease-in-out',
                     }}
                   />
                 </div>
@@ -238,16 +241,11 @@ export default function PlacementSurfaceSetting({}) {
             ))}
           </div>
           <div className="shape-library">
-            <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button>
-            <button className="library-btn ico02" onClick={() => setSideInversion(!sideInversion)}></button>
-            <button className="library-btn ico03" onClick={() => setUpsideInversion(!upsideInversion)}></button>
-            x:{upsideInversion ? 1 : 0}
-            <br />
-            y:{sideInversion ? 1 : 0}
-            <br />
-            rotate:{rotate}
+            <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+            <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
+            <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
           </div>
-          <PlacementSurface {...selectedType} />
+          <PlacementSurface {...placementSurfaceProps} />
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act">作成</button>
           </div>
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 479c52b2..01a85eaa 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -168,6 +168,8 @@
   "modal.object.setting.offset.depth": "出幅 (深さ)",
   "modal.object.setting.offset.width": "出幅 (幅)",
   "modal.object.setting.direction.select": "方向の選択",
+  "modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。",
+  "modal.placement.surface.setting.diagonal.length": "斜めの長さ",
   "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 0599fb74..2ef54c74 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -174,6 +174,8 @@
   "modal.object.setting.offset.depth": "출폭(깊이)",
   "modal.object.setting.offset.width": "출폭(폭)",
   "modal.object.setting.direction.select": "방향 선택",
+  "modal.placement.surface.setting.info": "ⓘ ①의 길이 입력 후 대각선 길이를 입력하면 ②의 길이를 자동 계산합니다.",
+  "modal.placement.surface.setting.diagonal.length": "대각선 길이",
   "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",

From 0978626a03d1a54e9399912da3ec826bc1fdac79 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 10 Oct 2024 14:04:40 +0900
Subject: [PATCH 11/27] =?UTF-8?q?-=20=EC=A7=80=EB=B6=95=ED=98=95=EC=83=81?=
 =?UTF-8?q?=20=EC=88=98=EB=8F=99=EC=84=A4=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/FloorPlan.jsx        |  5 +++++
 .../modal/roofShape/passivity/Eaves.jsx        | 18 ------------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index dc032ab0..4e848143 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -23,6 +23,7 @@ import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableE
 import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
+import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -132,8 +133,12 @@ export default function FloorPlan() {
           {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
           {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
+
           {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
           {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
+          {showRoofShapePassivitySettingModal && (
+            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
+          )}
           {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
diff --git a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
index 963cfa63..22e15a34 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
@@ -22,24 +22,6 @@ export default function Eaves() {
         </div>
         <span className="thin">mm</span>
       </div>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('gable.offset')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
-        </div>
-        <span className="thin">mm</span>
-      </div>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('shed.width')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
-        </div>
-        <span className="thin">mm</span>
-      </div>
     </>
   )
 }

From 1c5747fdddc729c0e6f37b8a21ddf3200385686a Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Thu, 10 Oct 2024 14:42:10 +0900
Subject: [PATCH 12/27] =?UTF-8?q?QCast=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=84=20=20=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=A4=91=20(=20pwdInitYn=20:=20'Y')=20=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=9D=80=20=EC=9E=84=EC=8B=9C=20=ED=8C=A8?=
 =?UTF-8?q?=EC=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main.jsx                       | 296 +++++++++++++++++-
 src/components/main/MainContents.jsx          | 166 ++++++++++
 src/components/main/ProductItem.jsx           |  35 +++
 src/components/management/Stuff.jsx           |  51 ++-
 .../management/StuffSearchCondition.jsx       |   5 +-
 5 files changed, 547 insertions(+), 6 deletions(-)
 create mode 100644 src/components/main/MainContents.jsx
 create mode 100644 src/components/main/ProductItem.jsx

diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index 4546f32d..807f3c49 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -1,9 +1,303 @@
 'use client'
+import React, { useEffect, useState } from 'react'
+
+import { useRouter } from 'next/navigation'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { modalContent, modalState, modalProps } from '@/store/modalAtom'
+import { sessionStore } from '@/store/commonAtom'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+import MainContents from './main/MainContents'
+import { useMessage } from '@/hooks/useMessage'
+import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
+import { stuffSearchState } from '@/store/stuffAtom'
 
 export default function MainPage(props) {
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+  const [open, setOpen] = useRecoilState(modalState)
+  const setContent = useSetRecoilState(modalContent)
+  const setModalProps = useSetRecoilState(modalProps)
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { get, patch } = useAxios(globalLocaleState)
+  const router = useRouter()
+  const { getMessage } = useMessage()
+
+  const [searchTxt, setSearchTxt] = useState('')
+
+  const [searchRadioType, setSearchRadioType] = useState('object')
+  //컨텐츠 관련
+  const [saleStoreId, setSaleStoreId] = useState('')
+  const [saleStoreName, setSaleStoreName] = useState('')
+
+  const [objectList, setObjectList] = useState([])
+  const [businessCharger, setBusinessCharger] = useState('')
+  const [businessChargerMail, setBusinessChargerMail] = useState('')
+  const [businessChargerTel, setBusinessChargerTel] = useState('')
+
+  const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
+
+  //비밀번호 변경
+  const updateProcess = async (formData) => {
+    const pwd1 = formData.get('password1')
+    const pwd2 = formData.get('password2')
+
+    if (pwd1 !== pwd2) {
+      alert('입력한 패스워드가 다릅니다')
+      return false
+    }
+
+    //패스워드 길이수 체크
+    if (checkLength(pwd1) > 10) {
+      alert('반각10자이내로 입력')
+    }
+
+    const param = {
+      loginId: sessionState.userId,
+      chgType: 'I',
+      chgPwd: formData.get('password1'),
+    }
+
+    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode === 'S') {
+          alert('비밀번호가 변경되었습니다.')
+          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+          setOpen(false)
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  //자리수체크
+  const checkLength = (pwd1) => {
+    let str = new String(pwd1)
+    let _byte = 0
+    if (str.length !== 0) {
+      for (let i = 0; i < str.length; i++) {
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
+  }
+
+  //공백제거
+  const checkValue = (e) => {
+    let spaceChk = /\s/
+    if (spaceChk.exec(e.target.value)) {
+      e.target.value = e.target.value.replace(/\s|/gi, '')
+      return false
+    }
+  }
+
+  useEffect(() => {
+    if (sessionState.pwdInitYn === 'N') {
+      setOpen(true)
+      setContent(html)
+      setModalProps({
+        closeOnOverlayClick: false,
+        closeOnEsc: false,
+        showCloseIcon: false,
+      })
+    } else {
+      fetchObjectList()
+    }
+  }, [sessionState])
+
+  const fetchObjectList = async () => {
+    try {
+      // const apiUrl = `/api/main-page/object/X167/list`
+      const apiUrl = `/api/main-page/object/${sessionState?.storeId}/list`
+      const res = await get({ url: apiUrl })
+      if (res) {
+        setSaleStoreId(res.saleStoreId)
+        setSaleStoreName(res.saleStoreName)
+        setObjectList(res.objectList)
+        setBusinessCharger(res.businessCharger)
+        setBusinessChargerMail(res.businessChargerMail)
+        setBusinessChargerTel(res.businessChargerTel)
+      }
+    } catch (error) {
+      console.error('MAIN API fetching error:', error)
+    }
+  }
+
+  // 모달팝업 컨텐츠
+  const html = (
+    <>
+      <p className="text-2xl">비밀번호 변경</p>
+      <p>* 초기화된 비밀번호로 로그인한 경우, 비밀번호를 변경해야 사이트 이용이 가능합니다.</p>
+      <p>비밀번호를 변경하지 않을 경우, 로그인 화면으로 이동합니다.</p>
+      <form action={updateProcess}>
+        <table>
+          <colgroup>
+            <col style={{ width: '200px' }} />
+            <col />
+          </colgroup>
+          <tbody>
+            <tr>
+              <th>
+                신규비밀번호 입력 <span className="important">*</span>
+              </th>
+              <td>
+                <div className="input-wrap" style={{ width: '500px' }}>
+                  <input
+                    type="text"
+                    className="input-origin"
+                    name="password1"
+                    required
+                    autoComplete="off"
+                    onChange={checkValue}
+                    onKeyUp={checkValue}
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th>
+                신규비밀번호 재입력 <span className="important">*</span>
+              </th>
+              <td>
+                <div className="input-wrap" style={{ width: '500px' }}>
+                  <input
+                    type="text"
+                    className="input-origin"
+                    name="password2"
+                    required
+                    autoComplete="off"
+                    onChange={checkValue}
+                    onKeyUp={checkValue}
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <button type="submit" className="btn-origin navy mr5">
+          변경
+        </button>
+        <button
+          className="btn-origin grey"
+          onClick={() => {
+            router.push('/login')
+            setOpen(false)
+          }}
+        >
+          변경안함
+        </button>
+      </form>
+    </>
+  )
+
+  // 엔터 이벤트
+  const handleByOnKeyUp = (e) => {
+    if (e.key === 'Enter') {
+      //물건번호 일떄
+      if (searchRadioType === 'object') {
+        setStuffSearch({
+          ...stuffSearch,
+          schObjectNo: searchTxt,
+          code: 'M',
+        })
+        router.push('/management/stuff')
+      } else {
+        alert('작업중')
+        return
+
+        //FAQ일떄
+        //faq리코일에
+        //searchValue= e.target.value
+        //mainFlag:'Y'
+        // router.push('/community/faq')
+      }
+    }
+  }
+
+  // 라디오 변경 이벤트
+  const handleOnChangeRadio = (e) => {
+    setSearchRadioType(e.target.value)
+  }
+
+  // 돋보기 클릭
+  const handleOnSubmit = () => {
+    if (searchRadioType === 'object') {
+      setStuffSearch({
+        ...stuffSearch,
+        schObjectNo: searchTxt,
+        code: 'M',
+      })
+
+      router.push('/management/stuff')
+    } else {
+      alert('작업중')
+      return
+      //FAQ일떄
+      //faq리코일에
+      //searchValue= e.target.value
+      //mainFlag:'Y'
+      // router.push('/community/faq')
+    }
+  }
+
   return (
     <>
-      <h1>Main page</h1>
+      {sessionState.pwdInitYn === 'Y' && (
+        <>
+          <div className="background-bord"></div>
+          <div className="main-contents">
+            <div className="store-id-wrap">
+              <div className="store-id-box">
+                <div className="store-id-title">
+                  {getMessage('main.storeId')}/ {getMessage('main.storeName')}
+                </div>
+              </div>
+              <span className="store-arr"></span>
+              <div className="store-id-name">
+                {saleStoreId} / {saleStoreName}
+              </div>
+            </div>
+            <div className="main-search-wrap">
+              <div className="search-raido-wrap">
+                <div className="d-check-radio">
+                  <input type="radio" name="radio01" id="object" value="object" defaultChecked onChange={handleOnChangeRadio} />
+                  <label htmlFor="object">{getMessage('main.objectNo')}</label>
+                </div>
+                <div className="d-check-radio">
+                  <input type="radio" name="radio01" id="faq" value="faq" onChange={handleOnChangeRadio} />
+                  <label htmlFor="faq">{getMessage('main.faq')}</label>
+                </div>
+              </div>
+              <div className="search-input-box">
+                <input
+                  type="text"
+                  className="main-search"
+                  placeholder=""
+                  onKeyUp={handleByOnKeyUp}
+                  onChange={(e) => {
+                    setSearchTxt(e.target.value)
+                  }}
+                />
+                <button className="search-icon" onClick={handleOnSubmit}></button>
+              </div>
+            </div>
+            <MainContents
+              objectList={objectList}
+              businessCharger={businessCharger}
+              businessChargerMail={businessChargerMail}
+              businessChargerTel={businessChargerTel}
+            />
+          </div>
+        </>
+      )}
     </>
   )
 }
diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx
new file mode 100644
index 00000000..ee9d1ab4
--- /dev/null
+++ b/src/components/main/MainContents.jsx
@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react'
+import ProductItem from './ProductItem'
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+import dayjs from 'dayjs'
+import { useAxios } from '@/hooks/useAxios'
+import { useRecoilValue } from 'recoil'
+import { useRouter } from 'next/navigation'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { queryStringFormatter } from '@/util/common-utils'
+export default function MainContents({ objectList, businessCharger, businessChargerMail, businessChargerTel }) {
+  const { getMessage } = useMessage()
+  const router = useRouter()
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get } = useAxios(globalLocaleState)
+
+  //공지사항
+  const [recentNoticeList, setRecentNoticeList] = useState([])
+
+  //FAQ
+  const [recentFaqList, setRecentFaqList] = useState([])
+
+  useEffect(() => {
+    fetchNoticeList()
+    fetchFaqList()
+  }, [])
+
+  //공지사항 호출
+  const fetchNoticeList = async () => {
+    try {
+      const param = {
+        schNoticeTpCd: 'QC',
+        schNoticeClsCd: 'NOTICE',
+        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)
+      if (res) {
+        if (res.data.length > 0) {
+          setRecentNoticeList(res.data)
+        }
+      }
+    } catch (error) {
+      console.error('NOTICE fetching error:', error)
+    }
+  }
+
+  //FAQ 호출
+  const fetchFaqList = async () => {
+    try {
+      const param = {
+        schNoticeTpCd: 'QC',
+        schNoticeClsCd: 'FAQ',
+        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)
+      if (res) {
+        if (res.data.length > 0) {
+          setRecentFaqList(res.data)
+        }
+      }
+    } catch (error) {
+      console.error('FAQ fetching error:', error)
+    }
+  }
+
+  return (
+    <div className="main-product-list-wrap">
+      <div className="main-product-list">
+        <ProductItem num={1} name={getMessage('main.content.objectList')}>
+          <ul className="recently-list">
+            {objectList?.length > 0 ? (
+              <>
+                {objectList.map((row) => {
+                  return (
+                    <li
+                      key={row.objectNo}
+                      className="recently-item"
+                      onClick={() => {
+                        if (row.objectNo.substring(0, 1) === 'R') {
+                          router.push(`/management/stuff/detail?objectNo=${row.objectNo.toString()}`)
+                        } else {
+                          router.push(`/management/stuff/tempdetail?objectNo=${row.objectNo.toString()}`)
+                        }
+                      }}
+                    >
+                      <div className="item-inner">
+                        <span className="time">{dayjs(row.lastEditDatetime).format('YYYY.MM.DD HH:mm:ss')}</span>
+                        <span>{row.objectNo}</span>
+                        <span>{row.objectName}</span>
+                        <span>{row.saleStoreName}</span>
+                      </div>
+                    </li>
+                  )
+                })}
+              </>
+            ) : (
+              <>
+                <li>
+                  <div className="item-inner">최근 갱신 물건이 없습니다</div>
+                </li>
+              </>
+            )}
+          </ul>
+        </ProductItem>
+        <ProductItem num={2} name={getMessage('main.content.notice')}>
+          <div className="notice-box">
+            <div className="notice-day pre">{dayjs(recentNoticeList[0]?.regDt).format('YYYY.MM.DD')}</div>
+            <div className="notice-title">{recentNoticeList[0]?.title}</div>
+            <div className="notice-contents">{recentNoticeList[0]?.contents}</div>
+          </div>
+        </ProductItem>
+      </div>
+      <div className="main-product-list">
+        <ProductItem num={3} name={getMessage('main.faq')}>
+          <ul className="faq-list">
+            {recentFaqList.map((row, index) => {
+              return (
+                <li key={row.rowNumber} className="faq-item">
+                  <div className="faq-item-inner">
+                    <div className="faq-num pre">FAQ {row.noticeNo}</div>
+                    <div className="faq-title pre">{row.title}</div>
+                    <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        </ProductItem>
+        <ProductItem num={4} name={'Data Download'}>
+          <div className="data-download-wrap">
+            <button className="data-down">
+              <span>{getMessage('main.content.download1')}</span>
+            </button>
+            <button className="data-down">
+              <span>{getMessage('main.content.download2')}</span>
+            </button>
+          </div>
+        </ProductItem>
+        <ProductItem num={5} name={'Sales Contact info'}>
+          <ul className="contact-info-list">
+            <li className="info-item">
+              <div className="icon-box">
+                <Image src="/static/images/main/user.svg" alt="react" width={20} height={20} />
+              </div>
+              <div className="infor-data">{businessCharger}</div>
+            </li>
+            <li className="info-item">
+              <div className="icon-box">
+                <Image src="/static/images/main/mail.svg" alt="react" width={20} height={20} />
+              </div>
+              <div className="infor-data pre">{businessChargerMail}</div>
+            </li>
+          </ul>
+        </ProductItem>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/main/ProductItem.jsx b/src/components/main/ProductItem.jsx
new file mode 100644
index 00000000..928bc269
--- /dev/null
+++ b/src/components/main/ProductItem.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { useRouter } from 'next/navigation'
+export default function ProductItem({ num, name, children }) {
+  const router = useRouter()
+
+  // 더보기 페이지 이동
+  const pageMove = (num) => {
+    if (num === 1) {
+      router.push('/management/stuff')
+    } else if (num === 2) {
+      router.push('/community/notice')
+    } else {
+      router.push('/community/faq')
+    }
+  }
+  return (
+    <div className={`product-item item0${num}`}>
+      <div className="product-item-title-wrap">
+        <h2 className="product-item-title">
+          <span className={`item-logo ico0${num}`}></span>
+          {name}
+        </h2>
+        {num !== 4 && num !== 5 && (
+          <button
+            className="more-btn"
+            onClick={() => {
+              pageMove(num)
+            }}
+          ></button>
+        )}
+      </div>
+      <div className="product-item-content">{children}</div>
+    </div>
+  )
+}
diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index 4e899bb8..02f44561 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -278,6 +278,54 @@ export default function Stuff() {
           // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
           // const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
           const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
+
+          await get({
+            url: apiUrl,
+          }).then((res) => {
+            if (!isEmptyArray(res)) {
+              setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
+              setGridCount(res[0].totCnt)
+            }
+          })
+        }
+        fetchData()
+      } else {
+        const params = {
+          schObjectNo: '',
+          schAddress: '',
+          schObjectName: '',
+          schSaleStoreName: '',
+          schReceiveUser: '',
+          schDispCompanyName: '',
+          schDateType: 'U',
+          schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
+          schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
+          startRow: (curPage - 1) * defaultSize + 1,
+          endRow: curPage * defaultSize,
+          schSelSaleStoreId: '',
+          schSortType: 'R',
+        }
+
+        async function fetchData() {
+          //api에 넘길값 startRow, endRow
+          // let startRow
+          // let endRow
+          // startRow = (curPage - 1) * size + 1
+          // endRow = curPage * size
+          // console.log('startrow::', startRow)
+          // console.log('endRow::', endRow)
+
+          // let curPage
+          // let totalpage
+          // let totalCount
+          // let size
+          // let pageCount
+
+          // console.log('화면진입 세션정보::::::::::', sessionState)
+          // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
+          // const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
+          const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
+
           await get({
             url: apiUrl,
           }).then((res) => {
@@ -294,10 +342,10 @@ export default function Stuff() {
 
   useEffect(() => {
     if (stuffSearchParams?.code === 'E') {
+      //console.log('조회누름::::::::', stuffSearchParams)
       stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
       stuffSearchParams.endRow = curPage * defaultSize
       stuffSearchParams.schSortType = defaultSortType
-      // console.log('조회누름::::::::', stuffSearchParams)
       async function fetchData() {
         // console.log('조회누름 세션정보:::::::::::::', sessionState)
         // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
@@ -378,6 +426,7 @@ export default function Stuff() {
       setAppMessageState(JA)
     }
   }, [globalLocaleState])
+
   return (
     <>
       {/* 퍼블시작 */}
diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx
index 97de5079..21b84dd8 100644
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@@ -182,7 +182,7 @@ export default function StuffSearchCondition() {
                       type="text"
                       className="input-light"
                       placeholder="물건번호 입력"
-                      value={stuffSearch?.code === 'E' ? stuffSearch.schObjectNo : objectNo}
+                      value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
                       onChange={(e) => {
                         setObjectNo(e.target.value)
                         setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
@@ -255,9 +255,6 @@ export default function StuffSearchCondition() {
                 </td>
                 <th>판매대리점 선택</th>
                 <td>
-                  {/* <div className="select-wrap">
-                    <select className="select-light" name="" id=""></select>
-                  </div> */}
                   {schSelSaleStoreList?.length > 0 && (
                     <Select
                       options={schSelSaleStoreList}

From 1574a784f4114102278437a6d7e7eacc81f9ef66 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Thu, 10 Oct 2024 15:31:22 +0900
Subject: [PATCH 13/27] =?UTF-8?q?QCAST=20=EB=A9=94=EC=9D=B8=20dayjs=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainContents.jsx | 36 +++++++++++++++++-----------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx
index ee9d1ab4..ba9a8d77 100644
--- a/src/components/main/MainContents.jsx
+++ b/src/components/main/MainContents.jsx
@@ -112,26 +112,34 @@ export default function MainContents({ objectList, businessCharger, businessChar
         </ProductItem>
         <ProductItem num={2} name={getMessage('main.content.notice')}>
           <div className="notice-box">
-            <div className="notice-day pre">{dayjs(recentNoticeList[0]?.regDt).format('YYYY.MM.DD')}</div>
-            <div className="notice-title">{recentNoticeList[0]?.title}</div>
-            <div className="notice-contents">{recentNoticeList[0]?.contents}</div>
+            {recentNoticeList.length > 0 ? (
+              <>
+                <div className="notice-day pre">{dayjs(recentNoticeList[0]?.regDt).format('YYYY.MM.DD')}</div>
+                <div className="notice-title">{recentNoticeList[0]?.title}</div>
+                <div className="notice-contents">{recentNoticeList[0]?.contents}</div>
+              </>
+            ) : null}
           </div>
         </ProductItem>
       </div>
       <div className="main-product-list">
         <ProductItem num={3} name={getMessage('main.faq')}>
           <ul className="faq-list">
-            {recentFaqList.map((row, index) => {
-              return (
-                <li key={row.rowNumber} className="faq-item">
-                  <div className="faq-item-inner">
-                    <div className="faq-num pre">FAQ {row.noticeNo}</div>
-                    <div className="faq-title pre">{row.title}</div>
-                    <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
-                  </div>
-                </li>
-              )
-            })}
+            {recentFaqList.length > 0 ? (
+              <>
+                {recentFaqList.map((row) => {
+                  return (
+                    <li key={row.rowNumber} className="faq-item">
+                      <div className="faq-item-inner">
+                        <div className="faq-num pre">FAQ {row.noticeNo}</div>
+                        <div className="faq-title pre">{row.title}</div>
+                        <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
+                      </div>
+                    </li>
+                  )
+                })}
+              </>
+            ) : null}
           </ul>
         </ProductItem>
         <ProductItem num={4} name={'Data Download'}>

From 1fd5acc5933b2458288dbf8d7901d48c887c0e90 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 10 Oct 2024 17:52:50 +0900
Subject: [PATCH 14/27] =?UTF-8?q?-=20=EB=A9=94=EB=89=B4=EB=B3=84=20Context?=
 =?UTF-8?q?Menu=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/context-menu/QContextMenu.jsx      |  38 ++---
 src/components/floor-plan/CanvasFrame.jsx     | 141 +++++++++++++++++-
 .../roofShape/RoofShapePassivitySetting.jsx   |   2 +-
 src/styles/_canvasside.scss                   | 106 +++++++++++++
 src/styles/_contents.scss                     |  86 +----------
 src/styles/contents.scss                      |   3 +-
 src/styles/style.scss                         |   3 +-
 7 files changed, 277 insertions(+), 102 deletions(-)
 create mode 100644 src/styles/_canvasside.scss

diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index 9654c514..bb721810 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -1,5 +1,6 @@
 'use client'
-import { Children, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import '@/styles/contents.scss'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps } = props
@@ -7,7 +8,7 @@ export default function QContextMenu(props) {
   //   const children = useRecoilValue(modalContent)
   const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
 
-  const activeObject = canvasProps.getActiveObject() //액티브된 객체를 가져옴
+  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
 
   let contextType = ''
 
@@ -26,7 +27,8 @@ export default function QContextMenu(props) {
     const handleContextMenu = (e) => {
       e.preventDefault() //기존 contextmenu 막고
       setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
-      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+      console.log(111, canvasProps)
+      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
     const handleClick = (e) => {
@@ -41,7 +43,7 @@ export default function QContextMenu(props) {
       }
     }
 
-    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
     document.addEventListener('click', handleOutsideClick)
 
@@ -57,7 +59,7 @@ export default function QContextMenu(props) {
       lockMovementY: false, // Y 축 이동 잠금
     })
 
-    canvasProps.on('object:modified', function (e) {
+    canvasProps?.on('object:modified', function (e) {
       activeObject.set({
         lockMovementX: true, // X 축 이동 잠금
         lockMovementY: true, // Y 축 이동 잠금
@@ -89,19 +91,19 @@ export default function QContextMenu(props) {
   return (
     <>
       {contextMenu.visible && (
-        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
-          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
-              이동
-            </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
-              삭제
-            </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
-              복사
-            </li>
-            {props.children}
-          </ul>
+        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+          {/*<ul>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
+          {/*  이동*/}
+          {/*</li>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
+          {/*  삭제*/}
+          {/*</li>*/}
+          {/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
+          {/*  복사*/}
+          {/*</li>*/}
+          {/*</ul>*/}
+          {props.children}
         </div>
       )}
     </>
diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 9c8c9d38..3b823460 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -1,13 +1,19 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
+import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import { useRecoilValue } from 'recoil'
+import { currentMenuState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
+  const currentMenu = useRecoilValue(currentMenuState)
+  const [contextMenu, setContextMenu] = useState([[]])
   useEvent()
 
   const loadCanvas = () => {
@@ -25,9 +31,142 @@ export default function CanvasFrame({ plan }) {
     loadCanvas()
   }, [plan])
 
+  useEffect(() => {
+    switch (currentMenu) {
+      case MENU.PLAN_DRAWING:
+        setContextMenu([
+          [
+            {
+              name: '그리드 이동',
+            },
+            {
+              name: '그리드 복사',
+            },
+            {
+              name: '그리드 색 변경',
+            },
+            {
+              name: '삭제',
+            },
+            {
+              name: '전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
+      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
+      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
+      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
+      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
+      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
+      case MENU.ROOF_COVERING.DEFAULT:
+        console.log('지붕덮개')
+        setContextMenu([
+          [
+            {
+              name: '지붕재 배치',
+            },
+            {
+              name: '지붕재 삭제',
+            },
+            {
+              name: '지붕재 전체 삭제',
+            },
+            {
+              name: '선택・이동',
+            },
+            {
+              name: '외벽선 삭제',
+            },
+          ],
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '보조선 이동(M)',
+            },
+            {
+              name: '보조선 복사(C)',
+            },
+            {
+              name: '보조선 삭제(D)',
+            },
+            {
+              name: '보조선 수직이등분선',
+            },
+            {
+              name: '보조선 절삭',
+            },
+            {
+              name: '보조선 전체 삭제',
+            },
+          ],
+        ])
+        break
+      case MENU.BATCH_CANVAS.SLOPE_SETTING:
+      case MENU.BATCH_CANVAS.BATCH_DRAWING:
+      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
+      case MENU.BATCH_CANVAS.OBJECT_BATCH:
+      case MENU.BATCH_CANVAS.ALL_REMOVE:
+      case MENU.BATCH_CANVAS.DEFAULT:
+        console.log('배치면')
+        setContextMenu([
+          [
+            {
+              name: '사이즈 변경',
+            },
+            {
+              name: '삭제(D)',
+            },
+            {
+              name: '이동(M)',
+            },
+            {
+              name: '복사(C)',
+            },
+          ],
+          [
+            {
+              name: '지붕재 변경',
+            },
+            {
+              name: '각 변 속성 변경',
+            },
+            {
+              name: '흐름 방향 변경',
+            },
+          ],
+        ])
+        break
+      default:
+        console.log('default')
+        setContextMenu([])
+        break
+    }
+  }, [currentMenu])
+
+  useEffect(() => {
+    console.log('currentMenu', currentMenu)
+    console.log('contextMenu', contextMenu)
+  }, [contextMenu])
+
   return (
     <div className="canvas-frame flex justify-center">
       <canvas ref={canvasRef} id={'canvas'}></canvas>
+      <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
+        {contextMenu.map((menus, index) => (
+          <ul key={index}>
+            {menus.map((menu) => (
+              <li>{menu.name}</li>
+            ))}
+          </ul>
+        ))}
+      </QContextMenu>
     </div>
   )
 }
diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
index ccab2321..ebdc6bb9 100644
--- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
+++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
@@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
         <div className="modal-body">
           <div className="modal-btn-wrap">
             {buttons.map((button) => (
-              <button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+              <button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
                 {button.name}
               </button>
             ))}
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
new file mode 100644
index 00000000..66bba83d
--- /dev/null
+++ b/src/styles/_canvasside.scss
@@ -0,0 +1,106 @@
+// 패널 배치 집계
+.penal-wrap{
+    position: fixed;
+    top: 200px;
+    left: 50px;
+    z-index: 999999;
+    width: 237px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #fff;
+    border: 1px solid #DFDFDF;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
+        background-size: cover;
+    }
+    h2{
+        font-size: 12px;
+        font-weight: 500;
+        color: #3D3D3D;
+    }
+    .penal-table-wrap{
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        min-width: calc(100% + 2px);
+        background-color: #3D3D3D;
+        border: 1px solid #3D3D3D;
+        padding: 20px;
+        .penal-table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                th{
+                    text-align: center;
+                    background-color:rgba(255, 255, 255, 0.05);
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #fff;
+                    border: 1px solid #505050;
+                }
+            }
+            tbody{
+                td{
+                    font-size: 12px;
+                    color: #fff;
+                    font-weight: 400;
+                    text-align: center;
+                    padding: 0 10px;
+                    border: 1px solid #505050;
+                }
+            }
+        }
+    }
+    &.act{
+        border: 1px solid #3D3D3D;
+        background-color: #3D3D3D;
+        h2{
+            color: #fff;
+        }
+        &::before{
+            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+        }
+        .penal-table-wrap{
+            display: block;
+        }
+    }
+}
+
+// context menu
+.context-menu-wrap{
+    min-width: 238px;
+    border-radius: 4px;
+    border: 1px solid #E9E9E9;
+    background: #FFF;
+    box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+    ul{
+        padding: 17px 0;
+        border-bottom: 1px solid #E9E9E9;
+        &:last-child{
+            border: none;
+        }
+        li{
+            padding: 4px 30px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 400;
+            color: #101010;
+            &:hover{
+                color: #fff;
+                background-color: #0D99FF;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 034955f5..7e087a87 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -543,6 +543,12 @@
                 font-weight: 600;
                 margin-right: 14px;
             }
+            .option{
+                padding-left: 5px;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+            }
             .info-wrap{
                 display: flex;
                 align-items: center;
@@ -844,83 +850,3 @@
     }
 }
 
-// 패널 배치 집계
-
-.penal-wrap{
-    position: fixed;
-    top: 200px;
-    left: 50px;
-    z-index: 999999;
-    width: 237px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #fff;
-    border: 1px solid #DFDFDF;
-    padding: 0 34px 0 10px;
-    border-radius: 2px;
-    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    &::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 12px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
-        background-size: cover;
-    }
-    h2{
-        font-size: 12px;
-        font-weight: 500;
-        color: #3D3D3D;
-    }
-    .penal-table-wrap{
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        min-width: calc(100% + 2px);
-        background-color: #3D3D3D;
-        border: 1px solid #3D3D3D;
-        padding: 20px;
-        .penal-table{
-            table-layout: fixed;
-            border-collapse: collapse;
-            thead{
-                th{
-                    text-align: center;
-                    background-color:rgba(255, 255, 255, 0.05);
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #fff;
-                    border: 1px solid #505050;
-                }
-            }
-            tbody{
-                td{
-                    font-size: 12px;
-                    color: #fff;
-                    font-weight: 400;
-                    text-align: center;
-                    padding: 0 10px;
-                    border: 1px solid #505050;
-                }
-            }
-        }
-    }
-    &.act{
-        border: 1px solid #3D3D3D;
-        background-color: #3D3D3D;
-        h2{
-            color: #fff;
-        }
-        &::before{
-            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
-        }
-        .penal-table-wrap{
-            display: block;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 3e82124a..38e7ff83 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -1,3 +1,4 @@
 @import '_contents.scss';
 @import '_modal.scss';
-@import '_table.scss';
\ No newline at end of file
+@import '_table.scss';
+@import '_canvasside.scss';
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 1841ebb9..b3b49ed9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1 +1,2 @@
-@import '_main.scss';
\ No newline at end of file
+@import '_main.scss';
+@import '_contents';
\ No newline at end of file

From 637f5e232674878a680f7bfac24697f733805db7 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 10:15:58 +0900
Subject: [PATCH 15/27] =?UTF-8?q?-=20=EB=8F=99=EC=84=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99.=20=ED=98=95=EC=98=AC=EB=A6=BC=EB=82=B4=EB=A6=BC=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx      |  3 ++
 src/components/floor-plan/FloorPlan.jsx       |  5 +-
 src/components/floor-plan/MenuDepth01.jsx     | 13 +++++-
 .../{Movement.jsx => MovementSetting.jsx}     | 22 +++++----
 .../modal/movement/type/FlowLine.jsx          | 46 +++++++++++++++++++
 .../floor-plan/modal/movement/type/Updown.jsx | 46 +++++++++++++++++++
 src/locales/ja.json                           | 15 +++++-
 src/locales/ko.json                           |  8 ++++
 8 files changed, 144 insertions(+), 14 deletions(-)
 rename src/components/floor-plan/modal/movement/{Movement.jsx => MovementSetting.jsx} (53%)
 create mode 100644 src/components/floor-plan/modal/movement/type/FlowLine.jsx
 create mode 100644 src/components/floor-plan/modal/movement/type/Updown.jsx

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index ba9abb92..eceef021 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -44,6 +44,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
   } = props
 
@@ -93,6 +94,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
@@ -125,6 +127,7 @@ export default function CanvasMenu(props) {
     setShowOutlineModal(false)
     setShowCanvasSettingModal(false)
     setShowEavesGableEditModal(false)
+    setShowMovementModal(false)
     setShowPlaceShapeModal(true)
   }
 
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 4e848143..9e6a541e 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -24,6 +24,7 @@ import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
 import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
+import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -38,6 +39,7 @@ export default function FloorPlan() {
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
+  const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
@@ -74,6 +76,7 @@ export default function FloorPlan() {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
   }
 
@@ -143,7 +146,7 @@ export default function FloorPlan() {
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
-          {/*<Movement />*/}
+          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index e5394610..9ce635ef 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -15,6 +15,7 @@ export default function MenuDepth01(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
@@ -28,19 +29,27 @@ export default function MenuDepth01(props) {
     setActiveMenu(menu)
     setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
-
+    setShowPlaceShapeModal(false)
     if (type === 'outline') {
-      setShowPlaceShapeModal(false)
       setShowOutlineModal(id === 0)
       setShowRoofShapeSettingModal(id === 1)
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
       setShowEavesGableEditModal(id === 4)
+      setShowMovementModal(id === 5)
       setShowWallLineOffsetSettingModal(id === 6)
       setShowPlaceShapeDrawingModal(false)
     }
 
     if (type === 'surface') {
+      setShowOutlineModal(false)
+      setShowRoofShapeSettingModal(false)
+      setShowRoofShapePassivitySettingModal(false)
+      setShowAuxiliaryModal(false)
+      setShowEavesGableEditModal(false)
+      setShowMovementModal(false)
+      setShowWallLineOffsetSettingModal(false)
+      
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)
diff --git a/src/components/floor-plan/modal/movement/Movement.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx
similarity index 53%
rename from src/components/floor-plan/modal/movement/Movement.jsx
rename to src/components/floor-plan/modal/movement/MovementSetting.jsx
index a8a7cde4..569249d6 100644
--- a/src/components/floor-plan/modal/movement/Movement.jsx
+++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx
@@ -1,21 +1,25 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
+import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
+import Updown from '@/components/floor-plan/modal/movement/type/Updown'
 
-export default function Movement({}) {
+export default function MovementSetting({ setShowMovementModal }) {
   const { getMessage } = useMessage()
   const [buttonAct, setButtonAct] = useState(1)
   const buttonMenu = [
-    { id: 1, name: '銅線の移動軒' },
-    { id: 2, name: '型上げ・降り' },
+    { id: 1, name: getMessage('modal.movement.flow.line.move') },
+    { id: 2, name: getMessage('modal.movement.flow.line.updown') },
   ]
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
-          <h1 className="title">軒・ケラバ変更</h1>
-          <button className="modal-close">닫기</button>
+          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
+          <button className="modal-close" onClick={() => setShowMovementModal(false)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
@@ -26,12 +30,12 @@ export default function Movement({}) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">設定</div>
-            {/*{buttonAct === 1 && <MovingTab01 />}*/}
-            {/*{buttonAct === 2 && <MovingTab02 />}*/}
+            <div className="setting-tit">{getMessage('setting')}</div>
+            {buttonAct === 1 && <FlowLine />}
+            {buttonAct === 2 && <Updown />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>
diff --git a/src/components/floor-plan/modal/movement/type/FlowLine.jsx b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
new file mode 100644
index 00000000..d1bf8023
--- /dev/null
+++ b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function FlowLine({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/floor-plan/modal/movement/type/Updown.jsx b/src/components/floor-plan/modal/movement/type/Updown.jsx
new file mode 100644
index 00000000..2650ca4a
--- /dev/null
+++ b/src/components/floor-plan/modal/movement/type/Updown.jsx
@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Updown({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.updown.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 01a85eaa..fb925f64 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -40,9 +40,20 @@
   "plan.menu.roof.cover.outline.drawing": "外壁線を描",
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
   "plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状設定",
-  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
+  "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림(JA)",
+  "modal.movement.flow.line.move": "銅線の移動軒",
+  "modal.movement.flow.line.updown": "型上げ・降り",
+  "modal.movement.flow.line.updown.info": "を選択して幅を指定してください桁の異なる辺。",
+  "modal.movement.flow.line.updown.up": "桁を上げる",
+  "modal.movement.flow.line.updown.down": "桁数を下げる",
+  "modal.movement.flow.line.info": "家屋などの壁に面する屋根を作成します。",
+  "modal.movement.flow.line.bottom.left": "高さ変更：下、左",
+  "modal.movement.flow.line.top.right": "高さ変更：上、右",
+  "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋(JA)",
+  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당(JA)",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집(JA)",
   "plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描",
-  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "modal.cover.outline.drawing": "外壁線を描",
   "modal.cover.outline": "外壁線",
   "modal.cover.outline.right.angle": "直角",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 2ef54c74..cf63e56c 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -42,6 +42,14 @@
   "plan.menu.roof.cover.roof.shape.passivity.setting": "지붕형상 수동 설정",
   "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
   "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림",
+  "modal.movement.flow.line.move": "동선 이동",
+  "modal.movement.flow.line.updown": "형 올림·내림",
+  "modal.movement.flow.line.updown.info": "자릿수가 다른 변을 선택하고 폭을 지정하십시오.",
+  "modal.movement.flow.line.updown.up": "자릿수를 올리다",
+  "modal.movement.flow.line.updown.down": "자릿수를 낮추다",
+  "modal.movement.flow.line.info": "동선을 선택하고 이동 폭을 지정하십시오",
+  "modal.movement.flow.line.bottom.left": "높이 변경: 아래, 왼쪽",
+  "modal.movement.flow.line.top.right": "높이 변경: 위, 오른쪽",
   "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋",
   "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",

From b379ec670dcf82aa02377f18a797e738188b5ff8 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 11 Oct 2024 12:35:48 +0900
Subject: [PATCH 16/27] =?UTF-8?q?1.=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=9B=84?=
 =?UTF-8?q?=20=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20=EC=9E=91=EC=97=85=20?=
 =?UTF-8?q?2.layout.js=20QModal=20=EB=AF=B8=EC=82=AC=EC=9A=A9=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC=203.=20?=
 =?UTF-8?q?=ED=8D=BC=EB=B8=94=2010/11=2011=EC=8B=9C26=EB=B6=84=20=EA=B9=8C?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/static/images/main/login_email.svg     |   10 +
 public/static/images/sub/address_search.svg   |   11 +
 public/static/images/sub/information_help.svg |    4 +
 src/app/layout.js                             |    2 +-
 src/components/Main.jsx                       |  156 +-
 src/components/main/ChangePasswordPop.jsx     |  168 ++
 src/locales/ja.json                           |   13 +-
 src/locales/ko.json                           |   13 +-
 src/styles/_canvasside.scss                   |  196 +-
 src/styles/_contents.scss                     | 1717 +++++++++--------
 src/styles/_main.scss                         | 1160 ++++++-----
 src/styles/_modal.scss                        |  498 ++---
 src/styles/_reset.scss                        | 1465 ++++++++------
 src/styles/_submodal.scss                     |  198 ++
 src/styles/_table.scss                        |  466 +++--
 src/styles/contents.scss                      |    3 +-
 16 files changed, 3366 insertions(+), 2714 deletions(-)
 create mode 100644 public/static/images/main/login_email.svg
 create mode 100644 public/static/images/sub/address_search.svg
 create mode 100644 public/static/images/sub/information_help.svg
 create mode 100644 src/components/main/ChangePasswordPop.jsx
 create mode 100644 src/styles/_submodal.scss

diff --git a/public/static/images/main/login_email.svg b/public/static/images/main/login_email.svg
new file mode 100644
index 00000000..1ea1a274
--- /dev/null
+++ b/public/static/images/main/login_email.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_4212_2156)">
+<path id="Vector" d="M1.125 0C0.503906 0 0 0.503906 0 1.125C0 1.47891 0.166406 1.81172 0.45 2.025L5.55 5.85C5.81719 6.04922 6.18281 6.04922 6.45 5.85L11.55 2.025C11.8336 1.81172 12 1.47891 12 1.125C12 0.503906 11.4961 0 10.875 0H1.125ZM0 2.625V7.5C0 8.32734 0.672656 9 1.5 9H10.5C11.3273 9 12 8.32734 12 7.5V2.625L6.9 6.45C6.36562 6.85078 5.63438 6.85078 5.1 6.45L0 2.625Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_4212_2156">
+<rect width="12" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/sub/address_search.svg b/public/static/images/sub/address_search.svg
new file mode 100644
index 00000000..4c0e2d1e
--- /dev/null
+++ b/public/static/images/sub/address_search.svg
@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4220_3331)">
+<path d="M17.8789 17.9736L19.8789 19.9736" stroke="#364864" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.98926 18.4036C14.6837 18.4036 18.4893 14.5986 18.4893 9.90494C18.4893 5.21124 14.6837 1.40625 9.98926 1.40625C5.29484 1.40625 1.48926 5.21124 1.48926 9.90494C1.48926 14.5986 5.29484 18.4036 9.98926 18.4036Z" stroke="#364864" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_4220_3331">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/sub/information_help.svg b/public/static/images/sub/information_help.svg
new file mode 100644
index 00000000..9eb16941
--- /dev/null
+++ b/public/static/images/sub/information_help.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9598 10.4707C21.0134 11.3009 21.0134 12.1606 20.9598 12.9908C20.6856 17.2332 17.3536 20.6124 13.1706 20.8905C11.7435 20.9853 10.2536 20.9851 8.8294 20.8905C8.33896 20.8579 7.8044 20.7408 7.34401 20.5512C6.83177 20.3402 6.5756 20.2347 6.44544 20.2507C6.31527 20.2668 6.1264 20.406 5.74868 20.6846C5.08268 21.1757 4.24367 21.5284 2.99943 21.4981C2.37026 21.4828 2.05568 21.4751 1.91484 21.235C1.77401 20.9949 1.94941 20.6625 2.30021 19.9978C2.78674 19.0758 3.09501 18.0202 2.62791 17.1745C1.82343 15.9665 1.1401 14.5359 1.04024 12.9908C0.986587 12.1606 0.986587 11.3009 1.04024 10.4707C1.31441 6.22831 4.64639 2.84907 8.8294 2.57101C10.0318 2.49108 10.2812 2.4785 11.5 2.53362" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9996 5C20.9996 6.933 19.4326 8.5 17.4996 8.5C15.5666 8.5 13.9996 6.933 13.9996 5C13.9996 3.067 15.5666 1.5 17.4996 1.5C19.4326 1.5 20.9996 3.067 20.9996 5Z" stroke="#45576F" stroke-width="1.5"/>
+</svg>
diff --git a/src/app/layout.js b/src/app/layout.js
index 6c04bbec..f7aafcd0 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -75,7 +75,7 @@ export default async function RootLayout({ children }) {
             <QcastProvider>{children}</QcastProvider>
           )}
           <ToastContainer />
-          <QModal />
+          {/* <QModal /> */}
         </body>
       </html>
     </RecoilRootWrapper>
diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index 807f3c49..be72673f 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -9,18 +9,16 @@ import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
 import MainContents from './main/MainContents'
 import { useMessage } from '@/hooks/useMessage'
-import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
 import { stuffSearchState } from '@/store/stuffAtom'
-
-export default function MainPage(props) {
+import { useForm } from 'react-hook-form'
+import '@/styles/contents.scss'
+import ChangePasswordPop from './main/ChangePasswordPop'
+export default function MainPage() {
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
-  const [open, setOpen] = useRecoilState(modalState)
-  const setContent = useSetRecoilState(modalContent)
-  const setModalProps = useSetRecoilState(modalProps)
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
-  const { get, patch } = useAxios(globalLocaleState)
+  const { get } = useAxios(globalLocaleState)
   const router = useRouter()
   const { getMessage } = useMessage()
 
@@ -38,76 +36,8 @@ export default function MainPage(props) {
 
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
 
-  //비밀번호 변경
-  const updateProcess = async (formData) => {
-    const pwd1 = formData.get('password1')
-    const pwd2 = formData.get('password2')
-
-    if (pwd1 !== pwd2) {
-      alert('입력한 패스워드가 다릅니다')
-      return false
-    }
-
-    //패스워드 길이수 체크
-    if (checkLength(pwd1) > 10) {
-      alert('반각10자이내로 입력')
-    }
-
-    const param = {
-      loginId: sessionState.userId,
-      chgType: 'I',
-      chgPwd: formData.get('password1'),
-    }
-
-    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
-      if (res) {
-        if (res.result.resultCode === 'S') {
-          alert('비밀번호가 변경되었습니다.')
-          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
-          setOpen(false)
-        } else {
-          alert(res.result.resultMsg)
-        }
-      }
-    })
-  }
-
-  //자리수체크
-  const checkLength = (pwd1) => {
-    let str = new String(pwd1)
-    let _byte = 0
-    if (str.length !== 0) {
-      for (let i = 0; i < str.length; i++) {
-        let str2 = str.charAt(i)
-        if (encodeURIComponent(str2).length > 4) {
-          _byte += 2
-        } else {
-          _byte++
-        }
-      }
-    }
-    return _byte
-  }
-
-  //공백제거
-  const checkValue = (e) => {
-    let spaceChk = /\s/
-    if (spaceChk.exec(e.target.value)) {
-      e.target.value = e.target.value.replace(/\s|/gi, '')
-      return false
-    }
-  }
-
   useEffect(() => {
-    if (sessionState.pwdInitYn === 'N') {
-      setOpen(true)
-      setContent(html)
-      setModalProps({
-        closeOnOverlayClick: false,
-        closeOnEsc: false,
-        showCloseIcon: false,
-      })
-    } else {
+    if (sessionState.pwdInitYn === 'Y') {
       fetchObjectList()
     }
   }, [sessionState])
@@ -130,74 +60,6 @@ export default function MainPage(props) {
     }
   }
 
-  // 모달팝업 컨텐츠
-  const html = (
-    <>
-      <p className="text-2xl">비밀번호 변경</p>
-      <p>* 초기화된 비밀번호로 로그인한 경우, 비밀번호를 변경해야 사이트 이용이 가능합니다.</p>
-      <p>비밀번호를 변경하지 않을 경우, 로그인 화면으로 이동합니다.</p>
-      <form action={updateProcess}>
-        <table>
-          <colgroup>
-            <col style={{ width: '200px' }} />
-            <col />
-          </colgroup>
-          <tbody>
-            <tr>
-              <th>
-                신규비밀번호 입력 <span className="important">*</span>
-              </th>
-              <td>
-                <div className="input-wrap" style={{ width: '500px' }}>
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name="password1"
-                    required
-                    autoComplete="off"
-                    onChange={checkValue}
-                    onKeyUp={checkValue}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>
-                신규비밀번호 재입력 <span className="important">*</span>
-              </th>
-              <td>
-                <div className="input-wrap" style={{ width: '500px' }}>
-                  <input
-                    type="text"
-                    className="input-origin"
-                    name="password2"
-                    required
-                    autoComplete="off"
-                    onChange={checkValue}
-                    onKeyUp={checkValue}
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <button type="submit" className="btn-origin navy mr5">
-          변경
-        </button>
-        <button
-          className="btn-origin grey"
-          onClick={() => {
-            router.push('/login')
-            setOpen(false)
-          }}
-        >
-          변경안함
-        </button>
-      </form>
-    </>
-  )
-
   // 엔터 이벤트
   const handleByOnKeyUp = (e) => {
     if (e.key === 'Enter') {
@@ -250,7 +112,7 @@ export default function MainPage(props) {
 
   return (
     <>
-      {sessionState.pwdInitYn === 'Y' && (
+      {(sessionState.pwdInitYn === 'Y' && (
         <>
           <div className="background-bord"></div>
           <div className="main-contents">
@@ -297,6 +159,10 @@ export default function MainPage(props) {
             />
           </div>
         </>
+      )) || (
+        <>
+          <ChangePasswordPop />
+        </>
       )}
     </>
   )
diff --git a/src/components/main/ChangePasswordPop.jsx b/src/components/main/ChangePasswordPop.jsx
new file mode 100644
index 00000000..45685c26
--- /dev/null
+++ b/src/components/main/ChangePasswordPop.jsx
@@ -0,0 +1,168 @@
+import React from 'react'
+import { useMessage } from '@/hooks/useMessage'
+import { useForm } from 'react-hook-form'
+import { sessionStore } from '@/store/commonAtom'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { useAxios } from '@/hooks/useAxios'
+import { globalLocaleStore } from '@/store/localeAtom'
+
+export default function ChangePasswordPop() {
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+
+  const { patch } = useAxios(globalLocaleState)
+  const { getMessage } = useMessage()
+  const [sessionState, setSessionState] = useRecoilState(sessionStore)
+
+  const formInitValue = {
+    password1: '',
+    password2: '',
+  }
+  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
+    defaultValues: formInitValue,
+  })
+
+  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }
+
+  //자리수체크
+  const checkLength = (pwd1) => {
+    let str = new String(pwd1)
+    let _byte = 0
+    if (str.length !== 0) {
+      for (let i = 0; i < str.length; i++) {
+        let str2 = str.charAt(i)
+        if (encodeURIComponent(str2).length > 4) {
+          _byte += 2
+        } else {
+          _byte++
+        }
+      }
+    }
+    return _byte
+  }
+
+  //공백제거
+  const checkValue = (e) => {
+    let spaceChk = /\s/
+    if (spaceChk.exec(e.target.value)) {
+      e.target.value = e.target.value.replace(/\s|/gi, '')
+      return false
+    }
+  }
+
+  //비밀번호 변경
+  const updateProcess = async () => {
+    const _password1 = form.watch('password1')
+    const _password2 = form.watch('password2')
+
+    if (_password1 !== _password2) {
+      alert(getMessage('main.popup.login.validate1'))
+      return false
+    }
+
+    //패스워드 길이수 체크
+    if (checkLength(_password1) > 10) {
+      alert(getMessage('main.popup.login.validate2'))
+    }
+
+    const param = {
+      loginId: sessionState.userId,
+      chgType: 'I',
+      chgPwd: _password1,
+    }
+    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
+      if (res) {
+        if (res.result.resultCode === 'S') {
+          alert(getMessage('main.popup.login.success'))
+          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+        } else {
+          alert(res.result.resultMsg)
+        }
+      }
+    })
+  }
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h1 className="title">{getMessage('main.popup.login.popupTitle')}</h1>
+          </div>
+          <div className="modal-body">
+            <div className="modal-body-inner">
+              <div className="change-password-box">
+                <div className="form-table">
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword1')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password1')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="table-item">
+                    <div className="table-item-th">
+                      <div className="change-password-tit">
+                        <div className="tit-b">
+                          {getMessage('main.popup.login.newPassword2')}
+                          <span className="important">*</span>
+                        </div>
+                        <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
+                      </div>
+                    </div>
+                    <div className="table-item-td">
+                      <div className="change-password-input">
+                        <input
+                          type="text"
+                          className="change-password"
+                          {...form.register('password2')}
+                          autoComplete="off"
+                          onChange={checkValue}
+                          onKeyUp={checkValue}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="change-password-guide">
+                <span>{getMessage('main.popup.login.guide1')}</span>
+                <span>{getMessage('main.popup.login.guide2')}</span>
+              </div>
+            </div>
+            <div className="footer-btn-wrap">
+              <button type="sumbit" className="btn-origin navy mr5" onClick={updateProcess}>
+                {getMessage('main.popup.login.btn1')}
+              </button>
+              <button
+                type="button"
+                className="btn-origin grey"
+                onClick={() => {
+                  router.push('/login')
+                  setOpen(false)
+                }}
+              >
+                {getMessage('main.popup.login.btn2')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 2a07e89b..a1172800 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -372,5 +372,16 @@
   "main.content.objectList": "最近の更新物件一覧",
   "main.content.notice": "お知らせ",
   "main.content.download1": "操作マニュアル",
-  "main.content.download2": "屋根の説明書"
+  "main.content.download2": "屋根の説明書",
+  "main.popup.login.popupTitle": "パスワード変更",
+  "main.popup.login.newPassword1": "新しいパスワードを入力",
+  "main.popup.login.newPassword2": "新規パスワード再入力",
+  "main.popup.login.placeholder": "半角10文字以内 ",
+  "main.popup.login.guide1": "初期化されたパスワードでログインした場合、パスワードを変更しなければサイト利用が可能です。",
+  "main.popup.login.guide2": "パスワードを変更しない場合は、ログイン画面に進みます。",
+  "main.popup.login.btn1": "変更",
+  "main.popup.login.btn2": "変更しない",
+  "main.popup.login.validate1": "入力したパスワードが異なります。",
+  "main.popup.login.validate2": "半角10文字以内で入力してください。",
+  "main.popup.login.success": "パスワードが変更されました。"
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 742dd27a..f1f596f7 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -375,5 +375,16 @@
   "main.content.objectList": "최근 갱신 물건목록",
   "main.content.notice": "공지사항",
   "main.content.download1": "조작메뉴얼",
-  "main.content.download2": "지붕설명서"
+  "main.content.download2": "지붕설명서",
+  "main.popup.login.popupTitle": "비밀번호변경",
+  "main.popup.login.newPassword1": "새 비밀번호 입력",
+  "main.popup.login.newPassword2": "새 비밀번호 재입력",
+  "main.popup.login.placeholder": "반각 10자 이내",
+  "main.popup.login.guide1": "초기화된 비밀번호로 로그인한 경우 비밀번호를 변경하지 않으면 사이트 이용이 가능합니다.",
+  "main.popup.login.guide2": "비밀번호를 변경하지 않으려면 로그인 화면으로 이동합니다.",
+  "main.popup.login.btn1": "변경",
+  "main.popup.login.btn2": "변경안함",
+  "main.popup.login.validate1": "입력한 패스워드가 다릅니다.",
+  "main.popup.login.validate2": "반각 10자 이내로 입력해주세요.",
+  "main.popup.login.success": "비밀번호가 변경되었습니다."
 }
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
index 66bba83d..8ef0c762 100644
--- a/src/styles/_canvasside.scss
+++ b/src/styles/_canvasside.scss
@@ -1,106 +1,106 @@
 // 패널 배치 집계
-.penal-wrap{
-    position: fixed;
-    top: 200px;
-    left: 50px;
-    z-index: 999999;
-    width: 237px;
-    height: 40px;
-    line-height: 40px;
-    background-color: #fff;
-    border: 1px solid #DFDFDF;
-    padding: 0 34px 0 10px;
-    border-radius: 2px;
-    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-    cursor: pointer;
-    &::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 12px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
-        background-size: cover;
-    }
-    h2{
-        font-size: 12px;
-        font-weight: 500;
-        color: #3D3D3D;
-    }
-    .penal-table-wrap{
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        min-width: calc(100% + 2px);
-        background-color: #3D3D3D;
-        border: 1px solid #3D3D3D;
-        padding: 20px;
-        .penal-table{
-            table-layout: fixed;
-            border-collapse: collapse;
-            thead{
-                th{
-                    text-align: center;
-                    background-color:rgba(255, 255, 255, 0.05);
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #fff;
-                    border: 1px solid #505050;
-                }
-            }
-            tbody{
-                td{
-                    font-size: 12px;
-                    color: #fff;
-                    font-weight: 400;
-                    text-align: center;
-                    padding: 0 10px;
-                    border: 1px solid #505050;
-                }
-            }
+.penal-wrap {
+  position: fixed;
+  top: 200px;
+  left: 50px;
+  z-index: 999999;
+  width: 237px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  border: 1px solid #dfdfdf;
+  padding: 0 34px 0 10px;
+  border-radius: 2px;
+  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
+    background-size: cover;
+  }
+  h2 {
+    font-size: 12px;
+    font-weight: 500;
+    color: #3d3d3d;
+  }
+  .penal-table-wrap {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    min-width: calc(100% + 2px);
+    background-color: #3d3d3d;
+    border: 1px solid #3d3d3d;
+    padding: 20px;
+    .penal-table {
+      table-layout: fixed;
+      border-collapse: collapse;
+      thead {
+        th {
+          text-align: center;
+          background-color: rgba(255, 255, 255, 0.05);
+          font-size: 12px;
+          font-weight: 500;
+          color: #fff;
+          border: 1px solid #505050;
         }
+      }
+      tbody {
+        td {
+          font-size: 12px;
+          color: #fff;
+          font-weight: 400;
+          text-align: center;
+          padding: 0 10px;
+          border: 1px solid #505050;
+        }
+      }
     }
-    &.act{
-        border: 1px solid #3D3D3D;
-        background-color: #3D3D3D;
-        h2{
-            color: #fff;
-        }
-        &::before{
-            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
-        }
-        .penal-table-wrap{
-            display: block;
-        }
+  }
+  &.act {
+    border: 1px solid #3d3d3d;
+    background-color: #3d3d3d;
+    h2 {
+      color: #fff;
     }
+    &::before {
+      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
+    }
+    .penal-table-wrap {
+      display: block;
+    }
+  }
 }
 
 // context menu
-.context-menu-wrap{
-    min-width: 238px;
-    border-radius: 4px;
-    border: 1px solid #E9E9E9;
-    background: #FFF;
-    box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
-    ul{
-        padding: 17px 0;
-        border-bottom: 1px solid #E9E9E9;
-        &:last-child{
-            border: none;
-        }
-        li{
-            padding: 4px 30px;
-            cursor: pointer;
-            font-size: 12px;
-            font-weight: 400;
-            color: #101010;
-            &:hover{
-                color: #fff;
-                background-color: #0D99FF;
-            }
-        }
+.context-menu-wrap {
+  min-width: 238px;
+  border-radius: 4px;
+  border: 1px solid #e9e9e9;
+  background: #fff;
+  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+  ul {
+    padding: 17px 0;
+    border-bottom: 1px solid #e9e9e9;
+    &:last-child {
+      border: none;
     }
-}
\ No newline at end of file
+    li {
+      padding: 4px 30px;
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 400;
+      color: #101010;
+      &:hover {
+        color: #fff;
+        background-color: #0d99ff;
+      }
+    }
+  }
+}
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 7e087a87..275a917f 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1,852 +1,953 @@
 // CanvasPage
-.canvas-wrap{
-    height: calc(100vh - 47px);
-    display: flex;
-    flex-direction: column;
-    .canvas-content{
-        flex: 1 1 auto;
-        .canvas-layout{
-            height: 100%;
-        }
+.canvas-wrap {
+  height: calc(100vh - 47px);
+  display: flex;
+  flex-direction: column;
+  .canvas-content {
+    flex: 1 1 auto;
+    .canvas-layout {
+      height: 100%;
     }
-    &.sub-wrap{
-        overflow: hidden;
-        .canvas-content{
-            height: calc(100% - 47px);
-        }
+  }
+  &.sub-wrap {
+    overflow: hidden;
+    .canvas-content {
+      height: calc(100% - 47px);
     }
+  }
 }
 // CanvasMenu
-.canvas-menu-wrap{
+.canvas-menu-wrap {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 0;
+  background-color: #383838;
+  transition: padding 0.17s ease-in-out;
+  .canvas-menu-inner {
     position: relative;
-    display: block;
-    width: 100%;
-    padding-bottom: 0;
-    background-color: #383838;
-    transition: padding .17s ease-in-out;
-    .canvas-menu-inner{
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
-        z-index: 999;
-        .canvas-menu-list{
-            display: flex;
-            align-items: center;
-            height: 100%;
-            .canvas-menu-item{
-                display: flex;
-                align-items: center;
-                height: 100%;
-                button{
-                    display: flex;
-                    align-items: center;
-                    font-size: 12px;
-                    height: 100%;
-                    color: #fff;
-                    font-weight: 600;
-                    padding: 15px 20px;
-                    opacity: 0.55;
-                    transition: all .17s ease-in-out;
-                    .menu-icon{
-                        display: block;
-                        width: 16px;
-                        height: 16px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: cover;
-                        margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
-                    }
-                }
-                &.active{
-                    background-color: #383838;
-                    button{
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-        .canvas-side-btn-wrap{
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-            .select-box{
-                width: 124px;
-                margin-right: 5px;
-                > div{
-                    width: 100%;
-                }
-            }
-            .btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    display: block;
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 2px;
-                    background-color: #3D3D3D;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
-                    &:hover{
-                        background-color: #1083E3;
-                    }
-                    &.active{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .ico-btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    .ico{
-                        display: block;
-                        width: 15px;
-                        height: 15px;
-                        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);}
-                    }
-                    .name{
-                        font-size: 12px;
-                        color: #fff;
-                    }
-                }
-                &.form06{
-                    .name{
-                        font-size: 13px;
-                    }
-                }
-            }
-            .vertical-horizontal{
-                display: flex;
-                min-width: 170px;
-                height: 28px;
-                margin: 0 5px;
-                border-radius: 2px;
-                background: #373737;
-                line-height: 28px;
-                overflow: hidden;
-                span{
-                    padding: 0 10px;
-                    font-size: 13px;
-                    color: #fff;
-                }
-                button{
-                    margin-left: auto;
-                    height: 100%;
-                    background-color: #4B4B4B;
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #fff;
-                    padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
-                }
-                &.on{
-                    button{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .size-control{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 10px;
-                background-color: #3D3D3D;
-                border-radius: 2px;
-                width: 100px;
-                height: 30px;
-                margin: 0 5px;
-                span{
-                    font-size: 13px;
-                    color: #fff;
-                }
-                .control-btn{
-                    display: block;
-                    width: 12px;
-                    height: 12px;
-                    background-repeat: no-repeat;
-                    background-size: cover;
-                    background-position: center;
-                    &.minus{
-                        background-image: url(../../public/static/images/canvas/minus.svg);
-                    }
-                    &.plus{
-                        background-image: url(../../public/static/images/canvas/plus.svg);
-                    }
-                }
-            }
-        }
-    }
-    .canvas-depth2-wrap{
-        position: absolute;
-        top: -100%;
-        left: 0;
-        background-color: #383838;
-        width: 100%;
-        height: 50px;
-        transition: all .17s ease-in-out;
-        .canvas-depth2-inner{
-            display: flex;
-            align-items: center;
-            padding: 0 40px;
-            height: 100%;
-            .canvas-depth2-list{
-                display: flex;
-                align-items: center ;
-                height: 100%;
-                .canvas-depth2-item{
-                    display: flex; 
-                    align-items: center;
-                    margin-right: 26px;
-                    height: 100%;
-                    button{
-                        position: relative;
-                        opacity: 0.55;
-                        color: #fff;
-                        font-size: 12px;
-                        font-weight: normal;
-                        height: 100%;
-                        padding-right: 12px;
-                    }
-                    &.active{
-                        button{
-                            opacity: 1;
-                            font-weight: 600;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 5px;
-                                height: 8px;
-                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                            }
-                        }
-                    }
-                }
-            }
-            .canvas-depth2-btn-list{
-                display: flex;
-                align-items: center;
-                margin-left: auto;
-                height: 100%;
-                .depth2-btn-box{
-                    display: flex;
-                    align-items: center;
-                    margin-right: 34px;
-                    height: 100%;
-                    transition: all .17s ease-in-out;
-                    button{
-                        position: relative;
-                        font-size: 12px;
-                        font-weight: 400;
-                        height: 100%;
-                        color: #fff;
-                        padding-right: 12px;
-                        &:after{
-                            content: '';
-                            position: absolute;
-                            top: 50%;
-                            right: 0;
-                            transform: translateY(-50%);
-                            width: 5px;
-                            height: 8px;
-                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                        }
-                    }
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                    &.mouse{
-                        opacity: 0.55;
-                    }
-                }
-            }
-        }
-        &.active{
-            top: 47px;
-        }
-    }
-    &.active{
-        padding-bottom: 50px;
-    }
-}
-
-// canvas-layout
-.canvas-layout{
-    .canvas-page-list{
-        display: flex;
-        background-color: #1C1C1C;
-        border-top: 1px solid #000;
-        width: 100%;
-        .canvas-plane-wrap{
-            display: flex;
-            align-items: center;
-            max-width: calc(100% - 45px);
-            .canvas-page-box{
-                display: flex;
-                align-items: center;
-                background-color: #1c1c1c;
-                padding: 9.6px 20px;
-                border-right:1px solid #000;
-                min-width: 0;
-                transition: all .17s ease-in-out;
-                span{
-                    display: flex;
-                    align-items: center;
-                    width: 100%;
-                    font-size: 12px;
-                    font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .close{
-                    flex: none;
-                    display: block;
-                    width: 7px;
-                    height: 8px;
-                    margin-left: 15px;
-                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
-                    background-size: cover;
-                }
-                &.on{
-                    background-color: #fff;
-                    span{
-                        font-weight: 600;
-                        color: #101010;
-                    }
-                    .close{
-                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
-                    }
-                    &:hover{
-                        background-color: #fff;
-                    }
-                }
-                &:hover{
-                    background-color: #000;
-                }
-            }
-        }
-        .plane-add{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            padding: 13.5px 0;
-            background-color: #1C1C1C;
-            border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
-            span{
-                display: block;
-                width: 9px;
-                height: 9px;
-                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
-                background-size: cover;
-            }
-            &:hover{
-                background-color: #000;
-            }
-        }
-    }
-}
-
-.canvas-frame{
-    position: relative;
-    height: calc(100% - 36.5px);
-    background-color: #fff;
-    canvas{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-
-// sub-page
-.sub-header{
-    position: fixed;
-    top: 46px;
-    left: 0;
-    width: 100%;
-    height: 46px;
-    border-bottom: 1px solid #000;
-    background: #2C2C2C;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 20px;
+    background-color: #2c2c2c;
     z-index: 999;
-    .sub-header-inner{
+    .canvas-menu-list {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .canvas-menu-item {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 100px;
-        .sub-header-title-wrap{
-            display: flex;
-            align-items: center;
-            .title-item{
-                position: relative;
-                padding: 0 24px;
-                a{
-                    display: flex;
-                    align-items: center;
-                    .icon{
-                        width: 22px;
-                        height: 22px;
-                        margin-right: 8px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
-                    }
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 16px;
-                    background-color: #D9D9D9;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    &:after{
-                        display: none;
-                    }
-                }
+        button {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          height: 100%;
+          color: #fff;
+          font-weight: 600;
+          padding: 15px 20px;
+          opacity: 0.55;
+          transition: all 0.17s ease-in-out;
+          .menu-icon {
+            display: block;
+            width: 16px;
+            height: 16px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            margin-right: 10px;
+            &.con00 {
+              background-image: url(/static/images/canvas/menu_icon00.svg);
             }
+            &.con01 {
+              background-image: url(/static/images/canvas/menu_icon01.svg);
+            }
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
+          }
         }
-        .sub-header-title{
-            font-size: 16px;
+        &.active {
+          background-color: #383838;
+          button {
+            opacity: 1;
+          }
+        }
+      }
+    }
+    .canvas-side-btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      .select-box {
+        width: 124px;
+        margin-right: 5px;
+        > div {
+          width: 100%;
+        }
+      }
+      .btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          display: block;
+          width: 30px;
+          height: 30px;
+          border-radius: 2px;
+          background-color: #3d3d3d;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 15px 15px;
+          transition: all 0.17s ease-in-out;
+          &.btn01 {
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+          }
+          &.btn02 {
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+          }
+          &.btn03 {
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
+          &:hover {
+            background-color: #1083e3;
+          }
+          &.active {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          .ico {
+            display: block;
+            width: 15px;
+            height: 15px;
+            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);
+            }
+          }
+          .name {
+            font-size: 12px;
             color: #fff;
-            font-weight: 600;
+          }
         }
-        .sub-header-location{
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            .location-item{
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 0 10px;
-                span{
-                    display: flex;
-                    font-size: 12px;
-                    color: #AAA;
-                    font-weight: normal;
-                    cursor: default;
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 4px;
-                    height: 6px;
-                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    span{
-                        color: #fff;
-                    }
-                    &:after{
-                        display: none;
-                    }
-                }
-            }
+        &.form06 {
+          .name {
+            font-size: 13px;
+          }
         }
-    }
-}
-
-// sub content
-.sub-content{
-    padding-top: 46px;
-    .sub-content-inner{
-        max-width: 1720px;
-        margin: 0 auto;
-        padding-top: 20px;
-        .sub-content-box{
-            margin-bottom: 20px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    &.estimate{
+      }
+      .vertical-horizontal {
         display: flex;
-        flex-direction: column;
-        height: calc(100% - 36.5px);
-        overflow-y: auto;
-        padding-top: 0;
-        .sub-content-inner{
-            flex: 1;
-            width: 100%;
+        min-width: 170px;
+        height: 28px;
+        margin: 0 5px;
+        border-radius: 2px;
+        background: #373737;
+        line-height: 28px;
+        overflow: hidden;
+        span {
+          padding: 0 10px;
+          font-size: 13px;
+          color: #fff;
         }
-    }
-}
-.sub-table-box{
-    padding: 20px;
-    border-radius: 6px; 
-    border: 1px solid #E9EAED;
-    background: #FFF;
-    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-    .table-box-title-wrap{
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        .title-wrap{
-            display: flex;
-            align-items: center;
-            h3{
-                display: block;
-                font-size: 15px;
-                color: #101010;
-                font-weight: 600;
-                margin-right: 14px;
-            }
-            .option{
-                padding-left: 5px;
-                font-size: 13px;
-                color: #101010;
-                font-weight: 400;
-            }
-            .info-wrap{
-                display: flex;
-                align-items: center;
-                li{
-                    position: relative;
-                    padding: 0 6px;
-                    font-size: 12px;
-                    color: #101010;
-                    font-weight: normal;
-                    span{
-                        font-weight: 600;
-                        &.red{
-                            color: #E23D70;
-                        }
-                    }
-                    &:after{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        right: 0;
-                        transform: translateY(-50%);
-                        width: 1px;
-                        height: 11px;
-                        background-color: #D9D9D9;
-                    }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
-                }
-            }
+        button {
+          margin-left: auto;
+          height: 100%;
+          background-color: #4b4b4b;
+          font-size: 13px;
+          font-weight: 400;
+          color: #fff;
+          padding: 0 7.5px;
+          transition: all 0.17s ease-in-out;
         }
-    }
-    .left-unit-box{
-        margin-left: auto;
-        display: flex;
-        align-items: center;
-    }
-    .promise-gudie{
-        display: block;
-        font-size: 13px;
-        font-weight: 700;
-        color: #101010;
-        margin-bottom: 20px;
-    }
-    .important{
-        color: #f00;
-    }
-    .sub-table-footer{
+        &.on {
+          button {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .size-control {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 20px;
-    }
-    .pagination-wrap{
-        margin-top: 24px;
-    }
-}
-
-.infomation-box-wrap{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    .sub-table-box{
-        flex: 1 ;
-    }
-    .info-title{
-        font-size: 14px;
-        font-weight: 500;
-        color: #344356;
-        margin-bottom: 10px;
-    }
-    .info-inner{
-        position: relative;
-        font-size: 13px;
-        color: #344356;
-        .copy-ico{
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 16px;
-            height: 16px;
-            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
-            background-size: cover;
+        gap: 10px;
+        background-color: #3d3d3d;
+        border-radius: 2px;
+        width: 100px;
+        height: 30px;
+        margin: 0 5px;
+        span {
+          font-size: 13px;
+          color: #fff;
         }
+        .control-btn {
+          display: block;
+          width: 12px;
+          height: 12px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          &.minus {
+            background-image: url(../../public/static/images/canvas/minus.svg);
+          }
+          &.plus {
+            background-image: url(../../public/static/images/canvas/plus.svg);
+          }
+        }
+      }
     }
-}
-
-// 견적서
-.estimate-list-wrap{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    .estimate-box{
-        flex: 1 ;
+  }
+  .canvas-depth2-wrap {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    background-color: #383838;
+    width: 100%;
+    height: 50px;
+    transition: all 0.17s ease-in-out;
+    .canvas-depth2-inner {
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      height: 100%;
+      .canvas-depth2-list {
         display: flex;
         align-items: center;
-        &:last-child{
-            flex: none;
-            min-width: 220px;
-        }
-        .estimate-tit{
-            width: 105px;
-            height: 30px;
-            line-height: 30px;
-            background-color: #F4F4F7;
-            border-radius: 100px;
-            text-align: center;
-            font-size: 13px;
-            font-weight: 500;
-            color: #344356;
-        }
-        .estimate-name{
-            font-size: 13px;
-            color: #344356;
-            margin-left: 14px;
-            font-weight: 400;
-        }
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
-// file drag box
-.drag-file-box{
-    padding: 10px;
-    .btn-area{
-        padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
-    }
-    .drag-file-area{
-        position: relative;
-        margin-top: 15px;
-        p{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 13px;
-            color: #ccc;
-            font-weight: 400;
-            cursor: default;
-        }
-    }
-    .file-list{
-        .file-item{
-            margin-bottom: 15px;
-            span{
-                position: relative;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 400;
-                white-space: nowrap;
-                padding-right: 55px;
-                button{
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 15px;
-                    height: 15px;
-                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
-                    background-size: cover;
-                }
-            }
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-// 발전시물레이션
-.chart-wrap{
-    display: flex;
-    gap: 20px;
-    width: 100%;
-    .sub-table-box{
         height: 100%;
-    }
-    .chart-inner{
-        flex: 1;
-        .chart-box{
-            margin-bottom: 30px;
-        }
-    }
-    .chart-table-wrap{
-        display: flex;
-        flex-direction: column;
-        flex: none;
-        width: 650px;
-        .sub-table-box{
-            flex: 1;
-            &:first-child{
-                margin-bottom: 20px;
-            }
-        }
-    }
-}
-
-.chart-month-table{
-    table{
-        table-layout: fixed;
-        border-collapse:collapse;
-        border: 1px solid #ECF0F4;
-        border-radius: 4px;
-        thead{
-            th{
-                padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
-                text-align: center;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 500;
-                background-color: #F8F9FA;
-            }
-        }
-        tbody{
-            td{
-                font-size: 13px;
-                color: #45576F;
-                text-align: center;
-                padding: 4.5px 0;
-            }
-        }
-    }
-}
-
-.simulation-guide-wrap{
-    display: flex;
-    padding: 20px;
-    .simulation-tit-wrap{
-        padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
-        span{
-            display: block;
+        .canvas-depth2-item {
+          display: flex;
+          align-items: center;
+          margin-right: 26px;
+          height: 100%;
+          button {
             position: relative;
-            padding-left: 60px;
-            font-size: 15px;
-            color: #14324F;
-            font-weight: 600;
-            &::before{
+            opacity: 0.55;
+            color: #fff;
+            font-size: 12px;
+            font-weight: normal;
+            height: 100%;
+            padding-right: 12px;
+          }
+          &.active {
+            button {
+              opacity: 1;
+              font-weight: 600;
+              &:after {
                 content: '';
                 position: absolute;
                 top: 50%;
-                left: 0;
+                right: 0;
                 transform: translateY(-50%);
-                width: 40px;
-                height: 40px;
-                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
-                background-size: cover;
+                width: 5px;
+                height: 8px;
+                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+              }
             }
+          }
         }
-    }
-    .simulation-guide-box{
-        padding-left: 40px;
-        dl{
-            margin-bottom: 25px;
-            dt{
-                font-size: 13px;
-                color: #101010;
-                font-weight: 600;
-                margin-bottom: 5px;
-            }
-            dd{
-                font-size: 12px;
-                color: #45576F;
-                font-weight: 400;
-                line-height: 24px;
-            }
-            &:last-child{
-                margin-bottom: 0;
+      }
+      .canvas-depth2-btn-list {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        height: 100%;
+        .depth2-btn-box {
+          display: flex;
+          align-items: center;
+          margin-right: 34px;
+          height: 100%;
+          transition: all 0.17s ease-in-out;
+          button {
+            position: relative;
+            font-size: 12px;
+            font-weight: 400;
+            height: 100%;
+            color: #fff;
+            padding-right: 12px;
+            &:after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              width: 5px;
+              height: 8px;
+              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
             }
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+          &.mouse {
+            opacity: 0.55;
+          }
         }
+      }
     }
+    &.active {
+      top: 47px;
+    }
+  }
+  &.active {
+    padding-bottom: 50px;
+  }
 }
 
-.module-total{
+// canvas-layout
+.canvas-layout {
+  .canvas-page-list {
+    display: flex;
+    background-color: #1c1c1c;
+    border-top: 1px solid #000;
+    width: 100%;
+    .canvas-plane-wrap {
+      display: flex;
+      align-items: center;
+      max-width: calc(100% - 45px);
+      .canvas-page-box {
+        display: flex;
+        align-items: center;
+        background-color: #1c1c1c;
+        padding: 9.6px 20px;
+        border-right: 1px solid #000;
+        min-width: 0;
+        transition: all 0.17s ease-in-out;
+        span {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          font-size: 12px;
+          font-family: 'Pretendard', sans-serif;
+          color: #aaa;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .close {
+          flex: none;
+          display: block;
+          width: 7px;
+          height: 8px;
+          margin-left: 15px;
+          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
+          background-size: cover;
+        }
+        &.on {
+          background-color: #fff;
+          span {
+            font-weight: 600;
+            color: #101010;
+          }
+          .close {
+            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
+          }
+          &:hover {
+            background-color: #fff;
+          }
+        }
+        &:hover {
+          background-color: #000;
+        }
+      }
+    }
+    .plane-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      padding: 13.5px 0;
+      background-color: #1c1c1c;
+      border-right: 1px solid #000;
+      transition: all 0.17s ease-in-out;
+      span {
+        display: block;
+        width: 9px;
+        height: 9px;
+        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
+        background-size: cover;
+      }
+      &:hover {
+        background-color: #000;
+      }
+    }
+  }
+}
+
+.canvas-frame {
+  position: relative;
+  height: calc(100% - 36.5px);
+  background-color: #fff;
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1600px;
+    height: 1000px;
+  }
+}
+
+// sub-page
+.sub-header {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  height: 46px;
+  border-bottom: 1px solid #000;
+  background: #2c2c2c;
+  z-index: 999;
+  .sub-header-inner {
     display: flex;
     align-items: center;
-    background-color: #F8F9FA;
-    padding: 9px 0;
-    margin-right: 4px;
-    border: 1px solid #ECF0F4;
-    border-top: none;
-    .total-title{
-        flex: 1;
-        text-align: center;
-        font-size: 13px;
-        color: #344356;
-        font-weight: 500;
+    height: 100%;
+    padding: 0 100px;
+    .sub-header-title-wrap {
+      display: flex;
+      align-items: center;
+      .title-item {
+        position: relative;
+        padding: 0 24px;
+        a {
+          display: flex;
+          align-items: center;
+          .icon {
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
+          }
+        }
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 16px;
+          background-color: #d9d9d9;
+        }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          &:after {
+            display: none;
+          }
+        }
+      }
     }
-    .total-num{
-        flex: none;
-        width: 121px;
-        text-align: center;
-        font-size: 15px;
-        color: #344356;
-        font-weight: 500;
+    .sub-header-title {
+      font-size: 16px;
+      color: #fff;
+      font-weight: 600;
     }
+    .sub-header-location {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      .location-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        span {
+          display: flex;
+          font-size: 12px;
+          color: #aaa;
+          font-weight: normal;
+          cursor: default;
+        }
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 6px;
+          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
+        }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          span {
+            color: #fff;
+          }
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
 
+// sub content
+.sub-content {
+  padding-top: 46px;
+  .sub-content-inner {
+    max-width: 1720px;
+    margin: 0 auto;
+    padding-top: 20px;
+    .sub-content-box {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &.estimate {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 36.5px);
+    overflow-y: auto;
+    padding-top: 0;
+    .sub-content-inner {
+      flex: 1;
+      width: 100%;
+    }
+  }
+}
+.sub-table-box {
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid #e9eaed;
+  background: #fff;
+  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+  .table-box-title-wrap {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .title-wrap {
+      display: flex;
+      align-items: center;
+      h3 {
+        display: block;
+        font-size: 15px;
+        color: #101010;
+        font-weight: 600;
+        margin-right: 14px;
+      }
+      .option {
+        padding-left: 5px;
+        font-size: 13px;
+        color: #101010;
+        font-weight: 400;
+      }
+      .info-wrap {
+        display: flex;
+        align-items: center;
+        li {
+          position: relative;
+          padding: 0 6px;
+          font-size: 12px;
+          color: #101010;
+          font-weight: normal;
+          span {
+            font-weight: 600;
+            &.red {
+              color: #e23d70;
+            }
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 11px;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+  .left-unit-box {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+  .promise-gudie {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: #101010;
+    margin-bottom: 20px;
+  }
+  .important {
+    color: #f00;
+  }
+  .sub-center-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  .sub-right-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+  .pagination-wrap {
+    margin-top: 24px;
+  }
+}
+
+.infomation-wrap {
+  margin-bottom: 30px;
+}
+
+.infomation-box-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  .sub-table-box {
+    flex: 1;
+  }
+  .info-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #344356;
+    margin-bottom: 10px;
+  }
+  .info-inner {
+    position: relative;
+    font-size: 13px;
+    color: #344356;
+    .copy-ico {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+// 견적서
+.estimate-list-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .estimate-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    &:last-child {
+      flex: none;
+      min-width: 220px;
+    }
+    .estimate-tit {
+      width: 105px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #f4f4f7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .estimate-name {
+      font-size: 13px;
+      color: #344356;
+      margin-left: 14px;
+      font-weight: 400;
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// file drag box
+.drag-file-box {
+  padding: 10px;
+  .btn-area {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ecf0f4;
+  }
+  .drag-file-area {
+    position: relative;
+    margin-top: 15px;
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 13px;
+      color: #ccc;
+      font-weight: 400;
+      cursor: default;
+    }
+  }
+  .file-list {
+    .file-item {
+      margin-bottom: 15px;
+      span {
+        position: relative;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 400;
+        white-space: nowrap;
+        padding-right: 55px;
+        button {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 15px;
+          height: 15px;
+          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// 발전시물레이션
+.chart-wrap {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  .sub-table-box {
+    height: 100%;
+  }
+  .chart-inner {
+    flex: 1;
+    .chart-box {
+      margin-bottom: 30px;
+    }
+  }
+  .chart-table-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    width: 650px;
+    .sub-table-box {
+      flex: 1;
+      &:first-child {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.chart-month-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    border: 1px solid #ecf0f4;
+    border-radius: 4px;
+    thead {
+      th {
+        padding: 4.5px 0;
+        border-bottom: 1px solid #ecf0f4;
+        text-align: center;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 500;
+        background-color: #f8f9fa;
+      }
+    }
+    tbody {
+      td {
+        font-size: 13px;
+        color: #45576f;
+        text-align: center;
+        padding: 4.5px 0;
+      }
+    }
+  }
+}
+
+.simulation-guide-wrap {
+  display: flex;
+  padding: 20px;
+  .simulation-tit-wrap {
+    padding-right: 40px;
+    border-right: 1px solid #eeeeee;
+    span {
+      display: block;
+      position: relative;
+      padding-left: 60px;
+      font-size: 15px;
+      color: #14324f;
+      font-weight: 600;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
+        background-size: cover;
+      }
+    }
+  }
+  .simulation-guide-box {
+    padding-left: 40px;
+    dl {
+      margin-bottom: 25px;
+      dt {
+        font-size: 13px;
+        color: #101010;
+        font-weight: 600;
+        margin-bottom: 5px;
+      }
+      dd {
+        font-size: 12px;
+        color: #45576f;
+        font-weight: 400;
+        line-height: 24px;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.module-total {
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  padding: 9px 0;
+  margin-right: 4px;
+  border: 1px solid #ecf0f4;
+  border-top: none;
+  .total-title {
+    flex: 1;
+    text-align: center;
+    font-size: 13px;
+    color: #344356;
+    font-weight: 500;
+  }
+  .total-num {
+    flex: none;
+    width: 121px;
+    text-align: center;
+    font-size: 15px;
+    color: #344356;
+    font-weight: 500;
+  }
+}
+
+// 물건상세
+.information-help-wrap {
+  display: flex;
+  padding: 24px;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  .information-help-tit-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+    border-right: 1px solid #e0e0e3;
+    .help-tit-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 10px;
+      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
+      background-size: 20px 20px;
+    }
+    .help-tit {
+      font-size: 13px;
+      font-weight: 600;
+      color: #45576f;
+    }
+  }
+  .information-help-guide {
+    padding-left: 40px;
+    span {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 7px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 334a0485..e80d8b83 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -1,557 +1,687 @@
 // background img
-.background-bord{
-    position: absolute;
-    top: 46px;
-    left: 0;
-    width: 100%;
-    height: 280px;
-    background: url(../../public/static/images/main/main_background.png)no-repeat center;
-    background-size: cover;
-    z-index: 0;
+.background-bord {
+  position: absolute;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  height: 280px;
+  background: url(../../public/static/images/main/main_background.png) no-repeat center;
+  background-size: cover;
+  z-index: 0;
 }
 
 // main-wrap
-.main-contents{
-    position: relative;
-    z-index: 1;
-    padding-bottom: 15px;
+.main-contents {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 15px;
 }
 
 // contents
-.store-id-wrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 33.5px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    background-color: rgba(255, 255, 255, 0.05);
-    .store-id-title{
-        position: relative;
-        padding-left: 32px;
-        font-size: 13px;
-        color: #fff;
-        &::before{
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 0;
-            transform: translateY(-50%);
-            width: 20px;
-            height: 20px;
-            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
-        }
-    }
-    .store-arr{
-        display: block;
-        width: 7px;
-        height: 10px;
-        background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
-    }
-    .store-id-name{
-        font-size: 16px;
-        color: #fff;
-        font-weight: 600;
+.store-id-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 33.5px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background-color: rgba(255, 255, 255, 0.05);
+  .store-id-title {
+    position: relative;
+    padding-left: 32px;
+    font-size: 13px;
+    color: #fff;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
     }
+  }
+  .store-arr {
+    display: block;
+    width: 7px;
+    height: 10px;
+    background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
+  }
+  .store-id-name {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+  }
 }
 
 // main-search-form
-.main-search-wrap{
+.main-search-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 45px 0;
+  .search-raido-wrap {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: 45px 0;
-    .search-raido-wrap{
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        margin-right: 30px;
-    }
+    gap: 16px;
+    margin-right: 30px;
+  }
 }
-.search-input-box{
-    display: flex;
-    align-items: center;
-    width: 580px;
-    height: 45px;
-    border-radius: 100px;
-    padding: 0 20px;
-    border: 1px solid rgba(255, 255, 255, 0.30);
-    background: rgba(31, 31, 31, 0.30);
-    .main-search{
-        flex: 1;
-        height: 100%;
-        font-size: 13px;
-        color: #fff;
-        background-color: transparent;
-        outline: none;
-        border: none;
-        font-family: 'Noto Sans JP', sans-serif;
-    }
-    .search-icon{
-        width: 20px;
-        height: 100%;
-        background-image: url(../../public/static/images/main/main_search.svg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 21px 21px;
-    }
+.search-input-box {
+  display: flex;
+  align-items: center;
+  width: 580px;
+  height: 45px;
+  border-radius: 100px;
+  padding: 0 20px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(31, 31, 31, 0.3);
+  .main-search {
+    flex: 1;
+    height: 100%;
+    font-size: 13px;
+    color: #fff;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+  .search-icon {
+    width: 20px;
+    height: 100%;
+    background-image: url(../../public/static/images/main/main_search.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 21px 21px;
+  }
 }
 
 // main-contents-inner
-.main-product-list-wrap{
-    max-width: 1400px;
-    margin: 0 auto;
-    .main-product-list{
+.main-product-list-wrap {
+  max-width: 1400px;
+  margin: 0 auto;
+  .main-product-list {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+    .product-item {
+      display: flex;
+      flex-direction: column;
+      padding: 40px;
+      border-radius: 6px;
+      background: #fff;
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+      &.item01 {
+        flex: 1;
+        max-height: 400px;
+      }
+      &.item02 {
+        flex: none;
+        width: 451px;
+        max-height: 400px;
+      }
+      &.item03 {
+        flex: 1;
+      }
+      &.item04 {
+        flex: none;
+        width: 351px;
+      }
+      &.item05 {
+        flex: none;
+        width: 451px;
+      }
+      .product-item-title-wrap {
         display: flex;
-        gap: 24px;
-        margin-bottom: 24px;
-        .product-item{
+        align-items: center;
+        .product-item-title {
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+          color: #101010;
+          font-weight: 600;
+          .item-logo {
+            display: block;
+            width: 40px;
+            height: 40px;
+            border-radius: 50px;
+            background: #14324f;
+            margin-right: 12px;
+            background-repeat: no-repeat;
+            background-size: 22px 22px;
+            background-position: center;
+            &.ico01 {
+              background-image: url(../../public/static/images/main/product_ico01.svg);
+            }
+            &.ico02 {
+              background-image: url(../../public/static/images/main/product_ico02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/main/product_ico03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/main/product_ico04.svg);
+            }
+            &.ico05 {
+              background-image: url(../../public/static/images/main/product_ico05.svg);
+            }
+          }
+        }
+        .more-btn {
+          display: block;
+          width: 20px;
+          height: 20px;
+          margin-left: auto;
+          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
+        }
+      }
+      .product-item-content {
+        margin-top: 30px;
+        overflow: hidden;
+        .recently-list {
+          .recently-item {
+            border: 1px solid #f2f2f2;
+            background-color: transparent;
+            padding: 29.9px 20px;
+            margin-bottom: 5px;
+            cursor: pointer;
+            .item-inner {
+              display: flex;
+              align-items: center;
+              span {
+                position: relative;
+                display: block;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+                padding: 0 10px;
+                &.time {
+                  padding-left: 22px;
+                  &::before {
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 14px;
+                    height: 14px;
+                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
+                    background-size: cover;
+                  }
+                }
+                &:after {
+                  content: '';
+                  position: absolute;
+                  top: 50%;
+                  right: 0;
+                  transform: translateY(-50%);
+                  width: 1px;
+                  height: 10px;
+                  background-color: #bbb;
+                }
+                &:last-child {
+                  &:after {
+                    display: none;
+                  }
+                }
+              }
+            }
+            &:last-child {
+              margin-bottom: 5px;
+            }
+          }
+        }
+        .notice-box {
+          height: 100%;
+          overflow-y: auto;
+          .notice-day {
+            font-size: 13px;
+            color: #666;
+            font-weight: 400;
+            margin-bottom: 7px;
+          }
+          .notice-title {
+            font-size: 14px;
+            color: #101010;
+            font-weight: 600;
+            margin-bottom: 25px;
+            line-height: 24px;
+            word-break: keep-all;
+          }
+          .notice-contents {
+            font-size: 12px;
+            color: #666;
+            font-weight: 400;
+            line-height: 22px;
+            span {
+              position: relative;
+              display: block;
+              padding-left: 10px;
+              &::before {
+                content: '';
+                position: absolute;
+                top: 10px;
+                left: 3px;
+                width: 3px;
+                height: 3px;
+                border-radius: 100%;
+                background-color: #666;
+              }
+            }
+          }
+          &::-webkit-scrollbar {
+            width: 4px; /* 스크롤바의 너비 */
+          }
+          &::-webkit-scrollbar-thumb {
+            background: #697c8f; /* 스크롤바의 색상 */
+          }
+          &::-webkit-scrollbar-track {
+            background: transparent; /*스크롤바 뒷 배경 색상*/
+          }
+        }
+        .faq-item {
+          position: relative;
+          margin-bottom: 10px;
+          cursor: pointer;
+          .faq-item-inner {
             display: flex;
-            flex-direction: column;
-            padding: 40px;
-            border-radius: 6px;
-            background: #FFF;
-            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            &.item01{flex: 1; max-height: 400px;}
-            &.item02{flex: none; width: 451px; max-height: 400px;}
-            &.item03{flex: 1;}
-            &.item04{flex: none; width: 351px;}
-            &.item05{flex: none; width: 451px;}
-            .product-item-title-wrap{
-                display: flex;
-                align-items: center;
-                .product-item-title{
-                    display: flex;
-                    align-items: center;
-                    font-size: 16px;
-                    color: #101010;
-                    font-weight: 600;
-                    .item-logo{
-                        display: block;
-                        width: 40px;
-                        height: 40px;
-                        border-radius: 50px;
-                        background: #14324F;
-                        margin-right: 12px;
-                        background-repeat: no-repeat;
-                        background-size: 22px 22px;
-                        background-position: center;
-                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
-                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
-                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
-                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
-                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
-                    }
-                }
-                .more-btn{
-                    display: block;
-                    width: 20px;
-                    height: 20px;
-                    margin-left: auto;
-                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
-                }
+            align-items: center;
+
+            .faq-num {
+              flex: none;
+              padding: 7px 12.5px;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 600;
+              border-radius: 110px;
+              border: 1px solid rgba(242, 242, 242, 0.95);
+              margin-right: 20px;
             }
-            .product-item-content{
-                margin-top: 30px;
-                overflow: hidden;
-                .recently-list{
-                    .recently-item{
-                        border: 1px solid #F2F2F2;
-                        background-color: transparent;
-                        padding: 29.9px 20px;
-                        margin-bottom: 5px;
-                        cursor: pointer;
-                        .item-inner{
-                            display: flex;
-                            align-items: center;
-                            span{
-                                position: relative;
-                                display: block;
-                                font-size: 13px;
-                                color: #101010;
-                                font-weight: 400;
-                                padding: 0 10px;
-                                &.time{
-                                    padding-left: 22px;
-                                    &::before{
-                                        content: '';
-                                        position: absolute;
-                                        top: 50%;
-                                        left: 0;
-                                        transform: translateY(-50%);
-                                        width: 14px;
-                                        height: 14px;
-                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
-                                        background-size: cover;
-                                    }
-                                }
-                                &:after{
-                                    content: '';
-                                    position: absolute;
-                                    top: 50%;
-                                    right: 0;
-                                    transform: translateY(-50%);
-                                    width: 1px;
-                                    height: 10px;
-                                    background-color: #BBB;
-                                }
-                                &:last-child{
-                                    &:after{
-                                        display: none;
-                                    }
-                                }
-                            }
-                        }
-                        &:last-child{
-                            margin-bottom: 5px;
-                        }
-                    }
-                }
-                .notice-box{
-                    height: 100%;
-                    overflow-y: auto;
-                    .notice-day{
-                        font-size: 13px;
-                        color: #666;
-                        font-weight: 400;
-                        margin-bottom: 7px;
-                    }
-                    .notice-title{
-                        font-size: 14px;
-                        color: #101010;
-                        font-weight: 600;
-                        margin-bottom: 25px;
-                        line-height: 24px;
-                        word-break: keep-all;
-                    }
-                    .notice-contents{
-                        font-size: 12px;
-                        color: #666;
-                        font-weight: 400;
-                        line-height: 22px;
-                        span{
-                            position: relative;
-                            display: block;
-                            padding-left: 10px;
-                            &::before{
-                                content: '';
-                                position: absolute;
-                                top: 10px;
-                                left: 3px;
-                                width: 3px;
-                                height: 3px;
-                                border-radius: 100%;
-                                background-color: #666;
-                            }
-                        }
-                    }
-                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
-                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
-                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
-                }
-                .faq-item{
-                    position: relative;
-                    margin-bottom: 10px;
-                    cursor: pointer;
-                    .faq-item-inner{
-                        display: flex;
-                        align-items: center;
-                        
-                        .faq-num{
-                            flex: none;
-                            padding: 7px 12.5px;
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 600;
-                            border-radius: 110px;
-                            border: 1px solid rgba(242, 242, 242, 0.95);
-                            margin-right: 20px;
-                        }
-                        .faq-title{
-                            width: 0;
-                            flex: 1 1 auto;
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 500;
-                            padding-right: 96px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-                        .faq-day{
-                            position: absolute;
-                            top: 50%;
-                            right: 0;
-                            transform: translateY(-50%);
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 400;
-                        }
-                    }
-                    &:last-child{
-                        margin-bottom: 0;
-                    }
-                }
-                .data-download-wrap{
-                    width: 100%;
-                    .data-down{
-                        display: block;
-                        width: 100%;
-                        padding: 20px;
-                        text-align: left;
-                        border-radius: 4px;
-                        background-color: #697C8F;
-                        margin-bottom: 5px;
-                        transition: background .17s ease-in-out;
-                        span{
-                            position: relative;
-                            display: block;
-                            padding-right: 30px;
-                            font-size: 13px;
-                            color: #fff;
-                            font-weight: 400;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 18px;
-                                height: 16px;
-                                background: url(../../public/static/images/main/download.svg)no-repeat center;
-                                background-size: cover;
-                            }
-                        }
-                        &:last-child{
-                            margin-bottom: 0;
-                        }
-                        &:hover{
-                            background-color: #859eb6;
-                        }
-                    }
-                }
-                .contact-info-list{
-                    padding: 25px 30px;
-                    border-radius: 4px;
-                    background-color: #F4F4F7;
-                    .info-item{
-                        display: flex;
-                        align-items: center;
-                        padding: 15px 0;
-                        border-bottom: 1px solid #fff;
-                        &:first-child{padding-top: 0;}
-                        &:last-child{padding-bottom: 0; border: none;}
-                        .icon-box{
-                            display: flex;
-                            margin-right: 12px;
-                        }
-                        .infor-data{
-                            font-size: 13px;
-                            color: #101010;
-                            font-weight: 500;
-                        }
-                    }
-                }
+            .faq-title {
+              width: 0;
+              flex: 1 1 auto;
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+              padding-right: 96px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
             }
-        }
-        &:last-child{
+            .faq-day {
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              font-size: 13px;
+              color: #101010;
+              font-weight: 400;
+            }
+          }
+          &:last-child {
             margin-bottom: 0;
+          }
         }
+        .data-download-wrap {
+          width: 100%;
+          .data-down {
+            display: block;
+            width: 100%;
+            padding: 20px;
+            text-align: left;
+            border-radius: 4px;
+            background-color: #697c8f;
+            margin-bottom: 5px;
+            transition: background 0.17s ease-in-out;
+            span {
+              position: relative;
+              display: block;
+              padding-right: 30px;
+              font-size: 13px;
+              color: #fff;
+              font-weight: 400;
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 18px;
+                height: 16px;
+                background: url(../../public/static/images/main/download.svg) no-repeat center;
+                background-size: cover;
+              }
+            }
+            &:last-child {
+              margin-bottom: 0;
+            }
+            &:hover {
+              background-color: #859eb6;
+            }
+          }
+        }
+        .contact-info-list {
+          padding: 25px 30px;
+          border-radius: 4px;
+          background-color: #f4f4f7;
+          .info-item {
+            display: flex;
+            align-items: center;
+            padding: 15px 0;
+            border-bottom: 1px solid #fff;
+            &:first-child {
+              padding-top: 0;
+            }
+            &:last-child {
+              padding-bottom: 0;
+              border: none;
+            }
+            .icon-box {
+              display: flex;
+              margin-right: 12px;
+            }
+            .infor-data {
+              font-size: 13px;
+              color: #101010;
+              font-weight: 500;
+            }
+          }
+        }
+      }
     }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // loginpage
-.login-wrap{
-    position: relative;
+.login-wrap {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: url(../../public/static/images/main/login_bg.png) no-repeat center;
+  background-size: cover;
+  .login-inner {
+    max-width: 500px;
     width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    background: url(../../public/static/images/main/login_bg.png) no-repeat center;
-    background-size: cover;
-    .login-inner{
-        max-width: 500px;
-        width: 100%;
-        margin: 0 auto;
-        .login-logo{
-            display: block;
-            margin-bottom: 25px;
+    margin: 0 auto;
+    .login-logo {
+      display: block;
+      margin-bottom: 25px;
+    }
+    .login-input-frame {
+      padding: 40px 50px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 0.97);
+      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+      .login-frame-tit {
+        font-size: 18px;
+        color: #364864;
+        font-weight: 400;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #e5e9ef;
+        span {
+          display: block;
+          font-weight: 600;
+          margin-bottom: 5px;
         }
-        .login-input-frame{
-            padding: 40px 50px;
-            border-radius: 6px;
-            background: rgba(255, 255, 255, 0.97);
-            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-            .login-frame-tit{
-                font-size: 18px;
-                color: #364864;
-                font-weight: 400;
-                padding-bottom: 30px;
-                border-bottom: 1px solid #E5E9EF;
-                span{
-                    display: block;
-                    font-weight: 600;
-                    margin-bottom: 5px;
-                }
-            }
-            .login-input-wrap{
-                margin-top: 30px;
-                .login-area{
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    border: 1px solid #E5E9EF;
-                    height: 45px;
-                    padding-left: 40px;
-                    padding-right: 15px;
-                    margin-bottom: 15px;
-                    .login-input{
-                        flex: 1;
-                        height: 100%;
-                        background-color: transparent;
-                        font-size: 13px;
-                        font-weight: 400;
-                        color: #D1D7E0;
-                        &::placeholder{
-                            color: #D1D7E0;
-                        }
-                    }
-                    &::before{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        left: 15px;
-                        transform: translateY(-50%);
-                        width: 10px;
-                        height: 12px;
-                        background-size: cover;
-                    }
-                    button{
-                        width: 20px;
-                        height: 100%;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                    }
-                    &.id{
-                        &::before{
-                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
-                        }
-                        .id-delete{
-                            background-image: url(../../public/static/images/main/id_delete.svg);
-                            background-size: 17px 17px;
-                        }
-                    }
-                    &.password{
-                        margin-bottom: 20px;
-                        &::before{
-                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
-                        }
-                        .password-hidden{
-                            background-image: url(../../public/static/images/main/password_hidden.svg);
-                            background-size: 19px 13px;
-                            &.visible{
-                                background-image: url(../../public/static/images/main/password_visible.svg);
-                            }
-                        }
-                    }
-                }
-                .login-btn-box{
-                    margin-bottom: 20px;
-                    .login-btn{
-                        display: block;
-                        width: 100%;
-                        height: 45px;
-                        background-color: #5C6773;
-                        color: #fff;
-                        font-size: 15px;
-                        font-weight: 600;
-                        border-radius: 4px;
-                        transition: background .15s ease-in-out;
-                        &:hover{
-                            background-color: #717e8d;
-                        }
-                    }
-                }
-                .reset-password{
-                    width: 100%;
-                    text-align: center;
-                    a{ 
-                        position: relative;
-                        font-size: 13px;
-                        color: #364864;
-                        font-weight: 400;
-                        padding-right: 16px;
-                        &::before{
-                            content: '';
-                            position: absolute;
-                            top: calc(50% + 1px);
-                            right: 0;
-                            transform: translateY(-50%);
-                            width: 6px;
-                            height: 8px;
-                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
-                        }
-                    }
-                }
-            }
+        &.pw-reset {
+          font-size: 13px;
         }
-        .login-guide-wrap{
-            position: relative;
-            margin-left: 10px;
-            margin-top: 30px;
-            padding-left: 15px;
+      }
+      .login-input-wrap {
+        margin-top: 30px;
+        .login-area {
+          position: relative;
+          display: flex;
+          align-items: center;
+          border: 1px solid #e5e9ef;
+          height: 45px;
+          padding-left: 40px;
+          padding-right: 15px;
+          margin-bottom: 15px;
+          .login-input {
+            flex: 1;
+            height: 100%;
+            background-color: transparent;
             font-size: 13px;
-            color: #fff;
-            line-height: 24px;
-            a{
-                color: #fff;
-                font-weight: 600;
-                text-decoration: underline;
+            font-weight: 400;
+            color: #6c819c;
+            &::placeholder {
+              font-size: 13px;
+              font-weight: 400;
+              color: #d1d7e0;
             }
-            span{
-                position: absolute;
-                top: 0;
-                left: 0;
+          }
+          &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 15px;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 12px;
+            background-size: cover;
+          }
+          button {
+            width: 20px;
+            height: 100%;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+          &.id {
+            &::before {
+              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
             }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+          &.email {
+            &::before {
+              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
+              width: 12px;
+              height: 9px;
+            }
+            .id-delete {
+              background-image: url(../../public/static/images/main/id_delete.svg);
+              background-size: 17px 17px;
+            }
+          }
+          &.password {
+            margin-bottom: 20px;
+            &::before {
+              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
+            }
+            .password-hidden {
+              background-image: url(../../public/static/images/main/password_hidden.svg);
+              background-size: 19px 13px;
+              &.visible {
+                background-image: url(../../public/static/images/main/password_visible.svg);
+              }
+            }
+          }
         }
+        .login-btn {
+          display: block;
+          width: 100%;
+          height: 45px;
+          background-color: #5c6773;
+          color: #fff;
+          font-size: 15px;
+          font-weight: 600;
+          border-radius: 4px;
+          transition: background 0.15s ease-in-out;
+          &:hover {
+            background-color: #717e8d;
+          }
+          &.light {
+            background-color: #fff;
+            border: 1px solid #5c6773;
+            color: #5c6773;
+          }
+        }
+        .login-btn-box {
+          margin-bottom: 20px;
+        }
+        .pwreset-btn-box {
+          display: flex;
+        }
+        .reset-password {
+          width: 100%;
+          text-align: center;
+          button {
+            position: relative;
+            font-size: 13px;
+            color: #364864;
+            font-weight: 400;
+            padding-right: 16px;
+            &::before {
+              content: '';
+              position: absolute;
+              top: calc(50% + 1px);
+              right: 0;
+              transform: translateY(-50%);
+              width: 6px;
+              height: 8px;
+              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
+            }
+          }
+        }
+      }
     }
-    .login-copyright{
-        position: absolute;
-        bottom: 40px;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 11px;
+    .login-guide-wrap {
+      position: relative;
+      margin-left: 10px;
+      margin-top: 30px;
+      padding-left: 15px;
+      font-size: 13px;
+      color: #fff;
+      line-height: 24px;
+      a {
         color: #fff;
-        font-weight: 500;
+        font-weight: 600;
+        text-decoration: underline;
+      }
+      span {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
     }
+  }
+  .login-copyright {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    color: #fff;
+    font-weight: 500;
+  }
 }
 
-.d-check-box{
-    &.login{
-        margin-bottom: 25px;
-        label{
-            padding-left: 20px;
-            color: #364864;
-            &:before{
-                width: 22px;
-                height: 22px;
-                top: -1px;
-                border-color: #A8B6C7;
-                border-radius: 3px;
-                transition: background .05s ease-in-out;
-            }
-        }
+.d-check-box {
+  &.login {
+    margin-bottom: 25px;
+    label {
+      padding-left: 20px;
+      color: #364864;
+      &:before {
+        width: 22px;
+        height: 22px;
+        top: -1px;
+        border-color: #a8b6c7;
+        border-radius: 3px;
+        transition: background 0.05s ease-in-out;
+      }
     }
-    input[type=checkbox]:checked + label::before{
-        border-color: #A8B6C7;
-        background-color: #A8B6C7;
+  }
+  input[type='checkbox']:checked + label::before {
+    border-color: #a8b6c7;
+    background-color: #a8b6c7;
+  }
+  input[type='checkbox']:checked + label::after {
+    border-color: #fff;
+    width: 7px;
+    height: 11px;
+    top: -2px;
+    left: 1px;
+  }
+}
+
+// 회원가입
+.center-page-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f4f4f7;
+  overflow-x: hidden;
+  .center-page-inner {
+    width: 100%;
+    max-width: 1720px;
+    margin: 0 auto;
+    .center-page-tit {
+      font-size: 18px;
+      font-weight: 600;
+      color: #101010;
+      margin-bottom: 24px;
     }
-    input[type=checkbox]:checked + label::after{
-        border-color: #fff;
-        width: 7px;
-        height: 11px;
-        top: -2px;
-        left: 1px;
+    .sub-table-box {
+      &.signup {
+        margin-bottom: 20px;
+      }
     }
-}
\ No newline at end of file
+    .sign-up-btn-wrap {
+      display: flex;
+      justify-content: flex-end;
+    }
+    &.complete {
+      max-width: 1000px;
+    }
+  }
+}
+
+// 회원가입 완료
+.complete-box-wrap {
+  padding: 72px 80px;
+  .complete-tit {
+    font-size: 18px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 17px;
+  }
+  .complete-txt {
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    margin-bottom: 27px;
+  }
+  .complete-email-wrap {
+    padding: 36px 30px;
+    border-radius: 2px;
+    background: #f4f4f7;
+    margin-bottom: 20px;
+    .email-info {
+      font-size: 13px;
+      font-weight: 400;
+      color: #000;
+      span {
+        color: #204af4;
+        font-weight: 500;
+      }
+    }
+  }
+  .complete-btn {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index b7bb20ec..9343ae23 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -14,7 +14,6 @@ $alert-color: #101010;
     scale: 1;
   }
 }
-
 @keyframes unmountpop {
   from {
     opacity: 1;
@@ -31,7 +30,6 @@ $alert-color: #101010;
   font-weight: 400;
   color: #fff;
 }
-
 .bold-font {
   font-size: 12px;
   font-weight: 500;
@@ -40,6 +38,8 @@ $alert-color: #101010;
 
 .modal-pop-wrap {
   position: fixed;
+  top: 200px;
+  right: 100px;
   width: 100%;
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -48,67 +48,51 @@ $alert-color: #101010;
   border-radius: 4px;
   background-color: #272727;
   z-index: 9999999;
-
   &.xxxm {
     width: 240px;
   }
-
   &.xxm {
     width: 270px;
   }
-
   &.xm {
     width: 300px;
   }
-
   &.ssm {
     width: 380px;
   }
-
   &.sm {
     width: 580px;
   }
-
   &.r {
     width: 400px;
   }
-
   &.lr {
     width: 440px;
   }
-
   &.lrr {
     width: 480px;
   }
-
   &.ml {
     width: 530px;
   }
-
   &.l-2 {
     width: 640px;
   }
-
   &.lx-2 {
     width: 740px;
   }
-
   &.lx {
     width: 770px;
   }
-
   &.l {
     width: 800px;
   }
-
   &.mount {
-    animation: mountpop .17s ease-in-out forwards;
+    animation: mountpop 0.17s ease-in-out forwards;
   }
-
   &.unmount {
-    animation: unmountpop .17s ease-in-out forwards;
+    animation: unmountpop 0.17s ease-in-out forwards;
   }
-
   &.alert {
     position: absolute;
     top: 50%;
@@ -116,25 +100,21 @@ $alert-color: #101010;
     transform: translate(-50%, -50%);
     background-color: transparent;
     border: none;
-
     .modal-head {
       background-color: transparent;
       padding: 0 0 8px;
-
       .modal-close {
         width: 20px;
         height: 20px;
         background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
       }
     }
-
     .modal-body {
       background-color: #fff;
       padding: 22px;
       border-radius: 4px;
       border: 1px solid #101010;
       color: $alert-color;
-
       .alert-title {
         font-size: 13px;
         font-weight: 700;
@@ -144,7 +124,6 @@ $alert-color: #101010;
     }
   }
 }
-
 .modal-head {
   display: flex;
   align-items: center;
@@ -156,7 +135,6 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: 700;
   }
-
   .modal-close {
     margin-left: auto;
     color: transparent;
@@ -166,64 +144,50 @@ $alert-color: #101010;
     background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
   }
 }
-
 .modal-body {
   padding: 24px;
-
   .modal-btn-wrap {
     display: flex;
     align-items: center;
     gap: 5px;
-
     button {
       flex: 1;
     }
-
     &.sub {
       button {
         flex: 1 1 auto;
         padding: 0;
       }
-
       margin-bottom: 14px;
     }
   }
-
   .modal-check-btn-wrap {
     margin-top: 15px;
-
     .check-wrap-title {
       font-size: $pop-normal-size;
       color: $pop-color;
       font-weight: 600;
-
       &.light {
         font-weight: $pop-normal-weight;
       }
     }
-
     .flex-check-box {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 15px;
-
       &.for2 {
         justify-content: flex-end;
-
         button {
           width: calc(50% - 5px);
         }
-
         &.btn {
           gap: 5px;
-
           button {
             width: calc(50% - 2.5px);
           }
         }
       }
-
       &.for-line {
         button {
           flex: 1;
@@ -231,22 +195,18 @@ $alert-color: #101010;
       }
     }
   }
-
   .outer-line-wrap {
-    border-top: 1px solid #3C3C3C;
+    border-top: 1px solid #3c3c3c;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
-
     > div {
       margin-bottom: 15px;
-
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
-
   .modal-guide {
     display: block;
     font-size: $pop-normal-size;
@@ -258,17 +218,15 @@ $alert-color: #101010;
 .adsorption-point {
   display: flex;
   align-items: center;
-  background-color: #3A3A3A;
+  background-color: #3a3a3a;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
   transition: all 0.17s ease-in-out;
-
   span {
     font-size: $pop-normal-size;
     color: #898989;
   }
-
   i {
     display: flex;
     align-items: center;
@@ -278,11 +236,10 @@ $alert-color: #101010;
     font-size: 13px;
     color: #898989;
   }
-
   &.act {
     i {
       color: $pop-color;
-      background-color: #1083E3;
+      background-color: #1083e3;
     }
   }
 }
@@ -293,83 +250,68 @@ $alert-color: #101010;
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
-
   &.border {
     border-bottom: 1px solid #424242;
   }
 }
-
 .grid-option-wrap {
   .grid-option-box {
     display: flex;
     align-items: center;
     background-color: transparent;
-    border: 1px solid #3D3D3D;
+    border: 1px solid #3d3d3d;
     border-radius: 2px;
     padding: 15px 10px;
     gap: 20px;
     margin-bottom: 10px;
-
     .grid-input-form {
       display: flex;
       align-items: center;
-
       span {
         flex: none;
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
       }
-
       .input-grid {
         width: 54px;
-
         input {
           width: 100%;
         }
       }
     }
-
     &:last-child {
       margin-bottom: 0;
     }
   }
 }
-
 .select-form {
   .sort-select {
     width: 100%;
   }
 }
-
 .grid-select {
   flex: 1;
-
   &.no-flx {
     flex: unset;
   }
-
   .sort-select {
     width: 100%;
     background-color: #313131;
     min-width: auto;
     font-size: 12px;
     border: none;
-
     p {
       font-size: 12px;
     }
-
     > ul {
       border: none;
     }
   }
-
   &.right {
     p {
       text-align: right;
     }
-
     ul {
       li {
         justify-content: flex-end;
@@ -377,11 +319,9 @@ $alert-color: #101010;
     }
   }
 }
-
 .grid-btn-wrap {
   padding-top: 15px;
   text-align: right;
-
   button {
     padding: 0 10px;
   }
@@ -393,16 +333,13 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
-
 }
-
 .grid-direction {
   display: flex;
   align-items: center;
   gap: 5px;
   flex: 1;
 }
-
 .direction {
   width: 22px;
   height: 22px;
@@ -412,21 +349,17 @@ $alert-color: #101010;
   background-position: center;
   background-size: 16px 15px;
   border-radius: 50%;
-  transition: all .15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   opacity: 0.6;
-
   &.down {
     transform: rotate(180deg);
   }
-
   &.left {
     transform: rotate(-90deg);
   }
-
   &.right {
     transform: rotate(90deg);
   }
-
   &:hover,
   &.act {
     opacity: 1;
@@ -441,26 +374,21 @@ $alert-color: #101010;
     font-weight: $pop-bold-weight;
   }
 }
-
 .input-move-wrap {
   display: flex;
   align-items: center;
   gap: 5px;
-
   span {
     color: $pop-color;
     font-size: $pop-normal-size;
   }
-
   .input-move {
     width: 130px;
-
     input {
       width: 100%;
     }
   }
 }
-
 .direction-move-wrap {
   flex: none;
   display: grid;
@@ -472,7 +400,6 @@ $alert-color: #101010;
 .placement-table {
   table {
     table-layout: fixed;
-
     tr {
       th {
         display: flex;
@@ -483,14 +410,12 @@ $alert-color: #101010;
         padding: 18px 0;
         border-bottom: 1px solid #424242;
       }
-
       td {
         font-size: $pop-normal-size;
         color: $pop-color;
         border-bottom: 1px solid #424242;
         padding-left: 20px;
       }
-
       &:first-child {
         td,
         th {
@@ -499,7 +424,6 @@ $alert-color: #101010;
       }
     }
   }
-
   .tooltip {
     position: relative;
     display: block;
@@ -509,20 +433,17 @@ $alert-color: #101010;
     background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
     background-size: cover;
   }
-
   &.light {
     padding: 0;
-
-    th, td {
+    th,
+    td {
       color: $alert-color;
       border-bottom: none;
-      border-top: 1px solid #EFEFEF;
+      border-top: 1px solid #efefef;
     }
-
     th {
       padding: 14px 0;
     }
-
     tr {
       &:first-child {
         td,
@@ -530,7 +451,6 @@ $alert-color: #101010;
           padding-top: 14px;
         }
       }
-
       &:last-child {
         td,
         th {
@@ -546,24 +466,20 @@ $alert-color: #101010;
   align-items: center;
   gap: 10px;
 }
-
 .placement-option {
   display: flex;
   align-items: center;
   gap: 20px;
 }
-
 .select-wrap {
   div {
     width: 100%;
   }
 }
-
 .flex-ment {
   display: flex;
   align-items: center;
   gap: 5px;
-
   span {
     font-size: $pop-normal-size;
     color: $pop-color;
@@ -580,22 +496,18 @@ $alert-color: #101010;
     display: flex;
     align-items: center;
     margin-bottom: 14px;
-
     &:last-child {
       margin-bottom: 0;
     }
-
     .outline-form {
       // width: 50%;
       margin-right: 15px;
     }
   }
-
   &:last-child {
     border-bottom: 1px solid #424242;
   }
 }
-
 .outline-form {
   display: flex;
   align-items: center;
@@ -607,7 +519,6 @@ $alert-color: #101010;
     font-weight: $pop-bold-weight;
     color: $pop-color;
     margin-right: 10px;
-
     &.thin {
       width: auto;
       font-weight: $pop-normal-weight;
@@ -628,7 +539,6 @@ $alert-color: #101010;
     background-size: 12px 12px;
     background-position: center;
   }
-
   &:last-child {
     margin-right: 0;
   }
@@ -636,28 +546,24 @@ $alert-color: #101010;
 
 .cul-wrap {
   display: flex;
-
   .outline-box {
     width: 50%;
     margin-right: 15px;
-
     .outline-form {
       width: 100%;
       margin-bottom: 14px;
       margin-right: 0;
-
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
-
   .cul-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50%;
-    background-color: #3D3D3D;
+    background-color: #3d3d3d;
     border-radius: 2px;
   }
 }
@@ -665,7 +571,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-  color: #AAA;
+  color: #aaa;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -676,19 +582,16 @@ $alert-color: #101010;
   font-weight: $pop-bold-weight;
   margin-bottom: 10px;
 }
-
 .properties-setting-wrap {
   &.outer {
     margin-top: 24px;
   }
-
   .setting-btn-wrap {
     display: flex;
     align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
-
     .setting-btn {
       display: block;
       width: 100%;
@@ -697,21 +600,17 @@ $alert-color: #101010;
       color: #fff;
       font-weight: 700;
       border-radius: 2px;
-      transition: all .15s ease-in-out;
-
+      transition: all 0.15s ease-in-out;
       &.green {
         background-color: #305941;
-        border: 1px solid #45CD7D;
-
+        border: 1px solid #45cd7d;
         &:hover {
           background-color: #3a6b4e;
         }
       }
-
       &.blue {
-        background-color: #2E5360;
-        border: 1px solid #3FBAE6;
-
+        background-color: #2e5360;
+        border: 1px solid #3fbae6;
         &:hover {
           background-color: #365f6e;
         }
@@ -727,39 +626,34 @@ $alert-color: #101010;
   grid-template-rows: 1fr 1fr;
   gap: 24px 10px;
   margin-bottom: 24px;
-
   .shape-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 13px;
-    background-color: #3D3D3D;
-    transition: background .15s ease-in-out;
-
+    background-color: #3d3d3d;
+    transition: background 0.15s ease-in-out;
     img {
       max-width: 100%;
     }
   }
-
   .shape-title {
     font-size: $pop-normal-size;
     font-weight: $pop-bold-weight;
     color: $pop-color;
     margin-top: 10px;
     text-align: center;
-    transition: color .15s ease-in-out;
+    transition: color 0.15s ease-in-out;
   }
-
   .shape-menu-box {
     &.act,
     &:hover {
       .shape-box {
-        background-color: #008BFF;
+        background-color: #008bff;
       }
-
       .shape-title {
-        color: #008BFF;
+        color: #008bff;
       }
     }
   }
@@ -770,14 +664,12 @@ $alert-color: #101010;
   border-top: 1px solid #424242;
   border-bottom: 1px solid #424242;
 }
-
 .padding-form {
   padding-left: 23px;
 }
-
 .discrimination-box {
   padding: 16px 12px;
-  border: 1px solid #3D3D3D;
+  border: 1px solid #3d3d3d;
   border-radius: 2px;
 }
 
@@ -791,10 +683,8 @@ $alert-color: #101010;
 .eaves-keraba-table {
   display: table;
   border-collapse: collapse;
-
   .eaves-keraba-item {
     display: table-row;
-
     .eaves-keraba-th,
     .eaves-keraba-td {
       font-size: $pop-normal-size;
@@ -804,26 +694,22 @@ $alert-color: #101010;
       vertical-align: middle;
       padding-bottom: 14px;
     }
-
     .eaves-keraba-td {
       padding-left: 10px;
     }
-
     .eaves-keraba-ico {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 5px;
-      background-color: #3D3D3D;
-      border: 1px solid #3D3D3D;
+      background-color: #3d3d3d;
+      border: 1px solid #3d3d3d;
       border-radius: 2px;
       cursor: pointer;
-
       &.act {
-        border: 1px solid #ED0004;
+        border: 1px solid #ed0004;
       }
     }
-
     &:last-child {
       .eaves-keraba-th,
       .eaves-keraba-td {
@@ -832,17 +718,14 @@ $alert-color: #101010;
     }
   }
 }
-
 .guide {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
   color: $pop-color;
   margin-bottom: 24px;
-
   &.sm {
     margin-bottom: 15px;
   }
-
   span {
     display: block;
   }
@@ -855,14 +738,12 @@ $alert-color: #101010;
   padding-bottom: 14px;
   border-bottom: 1px solid #424242;
   margin-bottom: 14px;
-
   span {
     font-size: $pop-normal-size;
     color: $pop-color;
     font-weight: $pop-bold-weight;
     margin-right: 10px;
   }
-
   .allocation-edit {
     display: flex;
     align-items: center;
@@ -874,7 +755,6 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
     border: 1px solid #484848;
     background-color: #323234;
-
     i {
       display: block;
       width: 12px;
@@ -891,14 +771,11 @@ $alert-color: #101010;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
-
   .flex-ment {
     gap: 10px;
-
     .dec {
       text-decoration: underline;
     }
-
     .delete {
       display: block;
       width: 15px;
@@ -907,7 +784,6 @@ $alert-color: #101010;
       background-size: cover;
     }
   }
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -918,7 +794,6 @@ $alert-color: #101010;
   display: flex;
   align-items: center;
   gap: 5px;
-
   button {
     display: flex;
     align-items: center;
@@ -931,8 +806,7 @@ $alert-color: #101010;
     border: 1px solid #646464;
     border-radius: 2px;
     padding: 0 10px;
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     i {
       height: 15px;
       display: block;
@@ -940,30 +814,25 @@ $alert-color: #101010;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
-      transition: all .15s ease-in-out;
-
+      transition: all 0.15s ease-in-out;
       &.allocation01 {
         background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
         width: 15px;
       }
-
       &.allocation02 {
         background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
         width: 18px;
       }
     }
-
     &.act,
     &:hover {
       color: #101010;
       border: 1px solid #101010;
       background-color: #fff;
-
       i {
         &.allocation01 {
           background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
         }
-
         &.allocation02 {
           background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
         }
@@ -985,13 +854,11 @@ $alert-color: #101010;
   grid-template-rows: repeat(3, 90px);
   gap: 10px;
   margin-bottom: 10px;
-
   .shape-menu-box {
     border-radius: 2px;
-    background-color: #3D3D3D;
+    background-color: #3d3d3d;
     padding: 8px;
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     .shape-box {
       display: flex;
       justify-content: center;
@@ -1002,10 +869,9 @@ $alert-color: #101010;
       background-color: #313131;
       border-radius: 2px;
     }
-
     &.act,
     &:hover {
-      background-color: #008BFF;
+      background-color: #008bff;
     }
   }
 }
@@ -1016,37 +882,32 @@ $alert-color: #101010;
   justify-content: center;
   gap: 5px;
   padding: 5px;
-  background-color: #3D3D3D;
+  background-color: #3d3d3d;
   margin-bottom: 24px;
-
   .library-btn {
     width: 30px;
     height: 30px;
-    border: 1px solid #6C6C6C;
+    border: 1px solid #6c6c6c;
     border-radius: 2px;
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     &.ico01 {
       background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
       background-size: 14px 14px;
     }
-
     &.ico02 {
       background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
       background-size: 13px 17px;
     }
-
     &.ico03 {
       background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
       background-size: 17px 13px;
     }
-
     &:hover {
-      border-color: #1083E3;
-      background-color: #1083E3;
+      border-color: #1083e3;
+      background-color: #1083e3;
     }
   }
 }
@@ -1054,33 +915,27 @@ $alert-color: #101010;
 .plane-shape-wrapper {
   display: flex;
   gap: 10px;
-
   .plane-box {
     padding: 10px;
     border-radius: 2px;
-    background-color: #3D3D3D;
-
+    background-color: #3d3d3d;
     .plane-box-tit {
       font-size: $pop-normal-size;
       font-weight: 600;
       color: $pop-color;
       margin-bottom: 10px;
     }
-
     &.shape-box {
       flex: 1;
-
       .shape-box-inner {
         display: flex;
         gap: 10px;
         min-height: 140px;
-
         .shape-img {
           position: relative;
           flex: 1;
           background-color: #fff;
           border-radius: 2px;
-
           img {
             position: absolute;
             top: 50%;
@@ -1088,21 +943,18 @@ $alert-color: #101010;
             transform: translate(-50%, -50%);
           }
         }
-
         .shape-data {
           flex: none;
           width: 190px;
           background-color: #313131;
           border-radius: 2px;
           padding: 15px;
-
           .eaves-keraba-table {
             .eaves-keraba-item {
               .eaves-keraba-th,
               .eaves-keraba-td {
                 padding-bottom: 10px;
               }
-
               &:last-child {
                 .eaves-keraba-th,
                 .eaves-keraba-td {
@@ -1114,13 +966,11 @@ $alert-color: #101010;
         }
       }
     }
-
     &.direction-box {
       display: flex;
       flex-direction: column;
       flex: none;
       width: 180px;
-
       .plane-direction-box {
         flex: 1;
         display: flex;
@@ -1132,43 +982,36 @@ $alert-color: #101010;
     }
   }
 }
-
 .plane-direction {
   width: 150px;
   position: relative;
   height: 120px;
-
   span {
     position: absolute;
     font-size: 12px;
     font-weight: 500;
-    color: #B1B1B1;
-
+    color: #b1b1b1;
     &.top {
       top: 0;
       left: 50%;
       transform: translateX(-50%);
     }
-
     &.right {
       top: 50%;
       right: 0;
       transform: translateY(-50%);
     }
-
     &.bottom {
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
     }
-
     &.left {
       top: 50%;
       left: 0;
       transform: translateY(-50%);
     }
   }
-
   .plane-btn {
     position: absolute;
     width: 28px;
@@ -1179,32 +1022,27 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     &.up {
       top: 22px;
       left: 50%;
       transform: translateX(-50%);
     }
-
     &.right {
       top: 50%;
       right: 32px;
       transform: translateY(-50%) rotate(90deg);
     }
-
     &.down {
       bottom: 22px;
       left: 50%;
       transform: translateX(-50%) rotate(180deg);
     }
-
     &.left {
       top: 50%;
       left: 32px;
       transform: translateY(-50%) rotate(270deg);
     }
-
     &:hover,
     &.act {
       background-color: #fff;
@@ -1232,7 +1070,6 @@ $alert-color: #101010;
   align-items: center;
   justify-content: center;
 }
-
 .discrimination-tit {
   font-size: 13px;
   color: #fff;
@@ -1244,13 +1081,11 @@ $alert-color: #101010;
   min-height: 206px;
   gap: 24px;
   margin-top: 14px;
-
   .object-size-img {
     position: relative;
     flex: none;
     width: 200px;
     background-color: #fff;
-
     img {
       position: absolute;
       top: 50%;
@@ -1264,11 +1099,10 @@ $alert-color: #101010;
 .display-change-wrap {
   margin: 24px 0;
 }
-
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-  color: #FFAFAF;
+  color: #ffafaf;
 }
 
 // 각 변 속성 변경
@@ -1282,12 +1116,10 @@ $alert-color: #101010;
 .drawing-flow-wrap {
   display: flex;
   gap: 10px;
-
   .discrimination-box {
     flex: 1;
     display: flex;
     flex-direction: column;
-
     .object-direction-wrap {
       flex: 1;
     }
@@ -1299,7 +1131,6 @@ $alert-color: #101010;
   align-items: center;
   justify-content: center;
 }
-
 .compas-box-inner {
   position: relative;
   width: 200px;
@@ -1323,206 +1154,157 @@ $alert-color: #101010;
       top: 12.5px;
       left: 50%;
       font-size: 11px;
-      color: #8B8B8B;
+      color: #8b8b8b;
       font-weight: 500;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-use-select: none;
       user-select: none;
     }
-
     &:nth-child(1) {
       transform: rotate(180deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(180deg);
       }
     }
-
     &:nth-child(2) {
       transform: rotate(195deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(165deg);
       }
     }
-
     &:nth-child(3) {
       transform: rotate(210deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(150deg);
       }
     }
-
     &:nth-child(4) {
       transform: rotate(225deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(135deg);
       }
     }
-
     &:nth-child(5) {
       transform: rotate(240deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(120deg);
       }
     }
-
     &:nth-child(6) {
       transform: rotate(255deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(105deg);
       }
     }
-
     &:nth-child(7) {
       transform: rotate(270deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(90deg);
       }
     }
-
     &:nth-child(8) {
       transform: rotate(285deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(75deg);
       }
     }
-
     &:nth-child(9) {
       transform: rotate(300deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(60deg);
       }
     }
-
     &:nth-child(10) {
       transform: rotate(315deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(45deg);
       }
     }
-
     &:nth-child(11) {
       transform: rotate(330deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(30deg);
       }
     }
-
     &:nth-child(12) {
       transform: rotate(345deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(15deg);
       }
     }
-
     &:nth-child(13) {
       transform: rotate(0deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(0deg);
       }
     }
-
     &:nth-child(14) {
       transform: rotate(15deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-15deg);
       }
     }
-
     &:nth-child(15) {
       transform: rotate(30deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-30deg);
       }
     }
-
     &:nth-child(16) {
       transform: rotate(45deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-45deg);
       }
     }
-
     &:nth-child(17) {
       transform: rotate(60deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-60deg);
       }
     }
-
     &:nth-child(18) {
       transform: rotate(75deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-75deg);
       }
     }
-
     &:nth-child(19) {
       transform: rotate(90deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-90deg);
       }
     }
-
     &:nth-child(20) {
       transform: rotate(105deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-105deg);
       }
     }
-
     &:nth-child(21) {
       transform: rotate(120deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-120deg);
       }
     }
-
     &:nth-child(22) {
       transform: rotate(135deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-135deg);
       }
     }
-
     &:nth-child(23) {
       transform: rotate(150deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-150deg);
       }
     }
-
     &:nth-child(24) {
       transform: rotate(165deg) translate(-50%, -50%);
-
       i {
         transform: translateX(-50%) rotate(-165deg);
       }
     }
-
     &.act {
       &::after {
         content: '';
@@ -1534,13 +1316,11 @@ $alert-color: #101010;
         height: 5px;
         background-color: #fff;
       }
-
       i {
         color: #fff;
       }
     }
   }
-
   .compas {
     position: absolute;
     top: 50%;
@@ -1550,7 +1330,6 @@ $alert-color: #101010;
     height: 148px;
     border: 4px solid #fff;
     border-radius: 50%;
-
     .compas-arr {
       width: 100%;
       height: 100%;
@@ -1560,14 +1339,12 @@ $alert-color: #101010;
   }
 }
 
-
 // 지붕모듈선택
 .roof-module-tab {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
-
   .module-tab-bx {
     flex: 1;
     height: 34px;
@@ -1576,19 +1353,17 @@ $alert-color: #101010;
     border-radius: 2px;
     background-color: transparent;
     font-size: 12px;
-    color: #AAA;
+    color: #aaa;
     text-align: center;
     cursor: default;
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     &.act {
-      background-color: #1083E3;
-      border: 1px solid #1083E3;
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
       color: #fff;
       font-weight: 500;
     }
   }
-
   .tab-arr {
     display: block;
     width: 9px;
@@ -1597,8 +1372,7 @@ $alert-color: #101010;
     background-position: center;
     background-size: cover;
     background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all .15s ease-in-out;
-
+    transition: all 0.15s ease-in-out;
     &.act {
       background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
@@ -1607,14 +1381,11 @@ $alert-color: #101010;
 
 .roof-module-compas {
   margin-bottom: 24px;
-
   .compas-box-inner {
     width: 280px;
     height: 253px;
-
     .circle {
       top: 86%;
-
       &:nth-child(1),
       &:nth-child(7),
       &:nth-child(13),
@@ -1627,23 +1398,20 @@ $alert-color: #101010;
           transform: translateX(-50%);
           width: 1px;
           height: 6px;
-          background-color: #8B8B8B;
+          background-color: #8b8b8b;
         }
       }
-
       i {
         top: 32px;
       }
-
       &.act {
         i {
-          color: #8B8B8B;
+          color: #8b8b8b;
         }
       }
     }
   }
 }
-
 .center-wrap {
   display: flex;
   flex-direction: column;
@@ -1654,7 +1422,6 @@ $alert-color: #101010;
 .module-table-flex-wrap {
   display: flex;
   gap: 10px;
-
   .outline-form {
     flex: 1;
   }
@@ -1662,7 +1429,6 @@ $alert-color: #101010;
 
 .module-box-tab {
   display: flex;
-
   .module-btn {
     flex: 1;
     border-top: 1px solid #505050;
@@ -1673,11 +1439,10 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
-
+    transition: all 0.15s ease-in-out;
     &:first-child {
       border-left: 1px solid #505050;
     }
-
     &.act {
       border-color: #fff;
       background-color: #fff;
@@ -1688,39 +1453,32 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-  background-color: #3D3D3D;
+  background-color: #3d3d3d;
   border-radius: 2px;
-
   .module-table-inner {
     padding: 10px;
-
     .outline-form {
       span {
         width: auto;
       }
     }
-
     .module-table-tit {
       padding: 10px 0;
       font-size: 12px;
       color: #fff;
-      border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
-
     .eaves-keraba-table {
       width: 100%;
       margin-top: 15px;
-
       .eaves-keraba-th {
         width: 72px;
       }
-
       .eaves-keraba-th,
       .eaves-keraba-td {
         padding-bottom: 5px;
       }
     }
-
     .self-table-tit {
       font-size: 12px;
       font-weight: 500;
@@ -1728,25 +1486,20 @@ $alert-color: #101010;
       padding-bottom: 15px;
     }
   }
-
   .warning-guide {
     padding: 20px;
-
     .warning {
-      color: #FFCACA;
+      color: #ffcaca;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
-
       &::-webkit-scrollbar {
         width: 4px;
         background-color: transparent;
       }
-
       &::-webkit-scrollbar-thumb {
-        background-color: #D9D9D9;
+        background-color: #d9d9d9;
       }
-
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
@@ -1756,27 +1509,23 @@ $alert-color: #101010;
 
 .module-self-table {
   display: table;
-  border-top: 1px solid #4D4D4D;
+  border-top: 1px solid #4d4d4d;
   border-collapse: collapse;
   width: 100%;
-
   .self-table-item {
     display: table-row;
-
     .self-item-td,
     .self-item-th {
       display: table-cell;
       vertical-align: middle;
-      border-bottom: 1px solid #4D4D4D;
+      border-bottom: 1px solid #4d4d4d;
     }
-
     .self-item-th {
       width: 60px;
       font-size: 12px;
       font-weight: 500;
       color: #fff;
     }
-
     .self-item-td {
       font-size: 12px;
       font-weight: 400;
@@ -1790,38 +1539,155 @@ $alert-color: #101010;
   display: flex;
   align-items: center;
   margin-top: 15px;
-
   button {
     margin-left: auto;
   }
 }
-
 .hexagonal-wrap {
   .hexagonal-item {
     padding: 15px 0;
-    border-bottom: 1px solid #4D4D4D;
-
+    border-bottom: 1px solid #4d4d4d;
     &:first-child {
       padding-top: 0;
     }
-
     &:last-child {
       padding-bottom: 0;
       border: none;
     }
-
     .hexagonal-flx-auto {
       display: flex;
       justify-content: space-between;
     }
-
     .hexagonal-flx {
       display: flex;
       align-items: center;
-
       button {
         margin-left: auto;
       }
     }
   }
-}
\ No newline at end of file
+}
+
+// 회로 및 가대설정
+.circuit-check-inner {
+  padding: 5px 0;
+}
+
+.x-scroll-table {
+  overflow-x: auto;
+  padding-bottom: 5px;
+  .roof-module-table {
+    min-width: 1200px;
+  }
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  max-height: 560px;
+  overflow-y: auto;
+  margin-bottom: 15px;
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .bottom-wrap {
+      margin-top: auto;
+    }
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+}
+
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+  .additional-color-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .additional-color {
+      display: block;
+      width: 16px;
+      height: 16px;
+      &.pink {
+        border: 2px solid #ea10ac;
+        background-color: #16417d;
+      }
+      &.white {
+        border: 2px solid #fff;
+        background-color: #001027;
+      }
+    }
+  }
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 7804b800..c288c8e1 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,725 +1,924 @@
 * {
-    -webkit-text-size-adjust:none;
-    -moz-text-size-adjust:none;
-    -ms-text-size-adjust:none;
-    text-size-adjust: none;
-    box-sizing: content-box
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+  box-sizing: content-box;
 }
-*, ::after, ::before {
-    box-sizing: border-box;
+*,
+::after,
+::before {
+  box-sizing: border-box;
 }
-html, body{
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
 }
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font: inherit;
-	vertical-align: baseline;
-    font-family: 'Noto Sans JP', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smooth: never;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  font-family: 'Noto Sans JP', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1.4;
+  line-height: 1.4;
+}
+body:first-of-type caption {
+  display: none;
 }
-body:first-of-type caption { display:none;}
 
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing:0;
-    border:0 none;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0 none;
 }
-caption, th, td {
-    text-align:left;
-    font-weight: normal;
-    border:0;
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: normal;
+  border: 0;
 }
 
-a { 
-    cursor:pointer;
-    color:#000;
+a {
+  cursor: pointer;
+  color: #000;
 }
-a, a:hover, a:active {
-    text-decoration:none;
-    -webkit-tap-highlight-color: transparent;
+a,
+a:hover,
+a:active {
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input, select, textarea, button, a, label {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
+input,
+select,
+textarea,
+button,
+a,
+label {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-button,input[type=text], input[type=button] {
-    -webkit-appearance: none;
-    -webkit-border-radius: 0;
-    -webkit-appearance:none;
-    appearance: none;
-    border-radius: 0
+button,
+input[type='text'],
+input[type='button'] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0;
 }
-input[type=checkbox], input[type=radio] {
-    box-sizing: border-box;
-    padding: 0;
+input[type='checkbox'],
+input[type='radio'] {
+  box-sizing: border-box;
+  padding: 0;
 }
-input, select, button {
-    border:0 none;
-    outline:none;
-    margin:0;
+input,
+select,
+button {
+  border: 0 none;
+  outline: none;
+  margin: 0;
 }
 select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 select::-ms-expand {
-    display: none;
+  display: none;
 }
 ::-webkit-input-placeholder {
-    line-height:1;
-    font-weight:300;
-    font-size:0.938rem;
-    letter-spacing:-0.6px;
-    color:#8b8b8b;
+  line-height: 1;
+  font-weight: 300;
+  font-size: 0.938rem;
+  letter-spacing: -0.6px;
+  color: #8b8b8b;
 }
-.log-box ::-webkit-input-placeholder{
-    color:#8b8b8b;
+.log-box ::-webkit-input-placeholder {
+  color: #8b8b8b;
 }
-button{
-    background: transparent;
-    font-family: 'Noto Sans JP', sans-serif;
-    border: none;
-    padding: 0;
-    margin: 0;
-    line-height: 1.4;
-    color: inherit;
-    outline: none;
-    cursor: pointer;
+button {
+  background: transparent;
+  font-family: 'Noto Sans JP', sans-serif;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.4;
+  color: inherit;
+  outline: none;
+  cursor: pointer;
 }
-.pre{
-    font-family: 'Pretendard', sans-serif !important;
+.pre {
+  font-family: 'Pretendard', sans-serif !important;
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
-.mt10{margin-top: 10px !important;}
-.mt15{margin-top: 15px !important;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mb15{margin-bottom: 15px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.mr15{margin-right: 15px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !important;}
-.ml15{margin-left: 15px !important;}
-
-// align
-.al-l{text-align: left !important;}
-.al-r{text-align: right !important;}
-.al-c{text-align: center !important;}
-
-
-// button
-.btn-frame{
-    display: inline-block;
-    padding: 0 7px;
-    height: 34px;
-    line-height: 34px;
-    border-radius: 2px;
-    color: #fff;
-    font-size: 12px;
-    font-weight: 400;
-    border: 1px solid #000;
-    text-align: center;
-    font-family: 'Pretendard', sans-serif;
-    transition: all .17s ease-in-out;
-    cursor: pointer;
-    &.block{
-        width: 100%;
-    }
-    &.small{
-        font-family: 'Noto Sans JP', sans-serif;
-        height: 30px;
-        line-height: 30px;
-        font-size: 13px;
-    }
-
-    &.deepgray{
-        background-color: #2C2C2C;
-        border: 1px solid #484848;
-    }
-    &.gray{
-        background-color: #3C3C3C;
-        border: 1px solid #545454;
-    }
-    &.dark{
-        background-color: #1C1C1C;
-        border: 1px solid #484848;
-    }
-    &.modal{
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #272727;
-        border: 1px solid #484848;
-        color: #aaa;
-        &:hover{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &.sub-tab{
-        height: 30px;
-        padding: 0 10px;
-        line-height: 28px;
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #2D2D2D;
-        border: 1px solid #393939;
-        color: #aaa;
-        &.act,
-        &:hover{
-            background-color: #414E6C;
-            border: 1px solid #414E6C;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &:hover,
-    &.act{
-        background-color: #1083E3;
-        border: 1px solid #1083E3;
-        color: #fff;
-        font-weight: 500;
-    }
-    &.block{
-        display: block;
-        width: 100%;
-    }
-    &.ico-flx{
-        display: flex;
-        align-items: center;
-        .ico{
-            margin-right: 10px;
-        }
-        &:hover,
-        &.act{
-            font-weight: 400;
-        }
-    }    
+.mt5 {
+  margin-top: 5px !important;
+}
+.mt10 {
+  margin-top: 10px !important;
+}
+.mt15 {
+  margin-top: 15px !important;
+}
+.mb5 {
+  margin-bottom: 5px !important;
+}
+.mb10 {
+  margin-bottom: 10px !important;
+}
+.mb15 {
+  margin-bottom: 15px !important;
+}
+.mr5 {
+  margin-right: 5px !important;
+}
+.mr10 {
+  margin-right: 10px !important;
+}
+.mr15 {
+  margin-right: 15px !important;
+}
+.ml5 {
+  margin-left: 5px !important;
+}
+.ml10 {
+  margin-left: 10px !important;
+}
+.ml15 {
+  margin-left: 15px !important;
 }
 
-.btn-origin{
-    display: inline-block;
+// align
+.al-l {
+  text-align: left !important;
+}
+.al-r {
+  text-align: right !important;
+}
+.al-c {
+  text-align: center !important;
+}
+
+// button
+.btn-frame {
+  display: inline-block;
+  padding: 0 7px;
+  height: 34px;
+  line-height: 34px;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  border: 1px solid #000;
+  text-align: center;
+  font-family: 'Pretendard', sans-serif;
+  transition: all 0.17s ease-in-out;
+  cursor: pointer;
+  &.block {
+    width: 100%;
+  }
+  &.small {
+    font-family: 'Noto Sans JP', sans-serif;
     height: 30px;
-    padding: 0 14px;
-    border-radius: 2px;
-    background-color: #101010;
-    color: #fff;
+    line-height: 30px;
     font-size: 13px;
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-    &.navy{
-        background-color: #304961;
-        &:hover{
-            background-color: #1083E3;
-        }
+  }
+
+  &.deepgray {
+    background-color: #2c2c2c;
+    border: 1px solid #484848;
+  }
+  &.gray {
+    background-color: #3c3c3c;
+    border: 1px solid #545454;
+  }
+  &.dark {
+    background-color: #1c1c1c;
+    border: 1px solid #484848;
+  }
+  &.modal {
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #272727;
+    border: 1px solid #484848;
+    color: #aaa;
+    &:hover {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
+      color: #fff;
+      font-weight: 500;
     }
-    &.grey{
-        background-color: #94A0AD;
-        &:hover{
-            background-color: #607F9A;
-        }
+  }
+  &.sub-tab {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #2d2d2d;
+    border: 1px solid #393939;
+    color: #aaa;
+    &.act,
+    &:hover {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      color: #fff;
+      font-weight: 500;
     }
+  }
+  &.roof {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #484848;
+    color: #fff;
+    &.blue {
+      background-color: #414e6c;
+      border: 1px solid #414e6c;
+      &:hover {
+        background-color: #414e6c;
+        border: 1px solid #414e6c;
+      }
+    }
+    &.white {
+      background-color: #fff;
+      border: 1px solid #fff;
+      color: #101010;
+      &:hover {
+        background-color: #fff;
+        border: 1px solid #fff;
+        color: #101010;
+      }
+    }
+    &:hover {
+      font-weight: 400;
+      background-color: transparent;
+      border: 1px solid #484848;
+      color: #fff;
+    }
+  }
+  &.self {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: transparent;
+    border: 1px solid #676767;
+    color: #aaaaaa;
+    &:hover {
+      background-color: #272727;
+      border-color: #676767;
+      font-weight: 400;
+    }
+  }
+  &:hover,
+  &.act {
+    background-color: #1083e3;
+    border: 1px solid #1083e3;
+    color: #fff;
+    font-weight: 500;
+  }
+  &.block {
+    display: block;
+    width: 100%;
+  }
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+    .ico {
+      margin-right: 10px;
+    }
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
+}
+
+.btn-origin {
+  display: inline-block;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 2px;
+  background-color: #101010;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  transition: all 0.15s ease-in-out;
+  &.navy {
+    background-color: #304961;
+    &:hover {
+      background-color: #233546;
+    }
+  }
+  &.grey {
+    background-color: #94a0ad;
+    &:hover {
+      background-color: #607f9a;
+    }
+  }
 }
 
 // select
-.sort-select{
-    position: relative;
-    display: inline-block;
-    min-width: 100px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 25px 0 10px;
-    background-color: #373737;
-    border: 1px solid #3F3F3F;
-    border-radius: 2px;
-    border-top-left-radius: 2px;
+.sort-select {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 25px 0 10px;
+  background-color: #373737;
+  border: 1px solid #3f3f3f;
+  border-radius: 2px;
+  border-top-left-radius: 2px;
+  color: #fff;
+  cursor: pointer;
+  p {
+    font-size: 13px;
     color: #fff;
-    cursor: pointer;
-    p{
-        font-size: 13px;
+    height: 100%;
+  }
+  .select-item-wrap {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    clip-path: inset(0 0 100% 0);
+    width: calc(100% + 2px);
+    padding: 8px 0;
+    max-height: 100px;
+    overflow-y: auto;
+    background-color: #373737;
+    border: 1px solid #3f3f3f;
+    border-radius: 2px;
+    transition: all 0.17s ease-in-out;
+    visibility: hidden;
+    z-index: 999;
+    .select-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 20px;
+      line-height: 1.4;
+      transition: all 0.17s ease-in-out;
+      button {
+        font-size: 12px;
         color: #fff;
-        height: 100%;
+        line-height: 1.4;
+      }
+      &:hover {
+        background-color: #2c2c2c;
+      }
     }
-    .select-item-wrap{
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        clip-path:inset(0 0 100% 0);
-        width: calc(100% + 2px);
-        padding: 8px 0;
-        max-height: 100px;
-        overflow-y: auto;
-        background-color: #373737;
-        border: 1px solid #3F3F3F;
-        border-radius: 2px;
-        transition: all 0.17s ease-in-out;
-        visibility: hidden;
-        z-index: 999;
-        .select-item{
-            display: flex;
-            align-items: center;
-            padding: 8px 20px;
-            line-height: 1.4;
-            transition: all .17s ease-in-out;
-            button{
-                font-size: 12px;
-                color: #fff;
-                line-height: 1.4;
-            }
-            &:hover{
-                background-color: #2C2C2C;
-            }
-        }
-        &::-webkit-scrollbar {
-            width: 2px;
-            background-color: transparent;
-            
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: #5a5a5a;
-            border-radius: 10px;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
+    &::-webkit-scrollbar {
+      width: 2px;
+      background-color: transparent;
     }
-    &::after{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 7px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(/static/images/common/select-arr.svg) no-repeat center;
-        background-size: cover;
-        transition: all .17s ease-in-out;
+    &::-webkit-scrollbar-thumb {
+      background-color: #5a5a5a;
+      border-radius: 10px;
     }
-    &.active{
-        .select-item-wrap{
-            clip-path: inset(0 0 0 0);
-            visibility: visible;
-        }
-        &:after{
-            transform: translateY(-50%) rotate(-180deg);
-        }
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
     }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 7px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(/static/images/common/select-arr.svg) no-repeat center;
+    background-size: cover;
+    transition: all 0.17s ease-in-out;
+  }
+  &.active {
+    .select-item-wrap {
+      clip-path: inset(0 0 0 0);
+      visibility: visible;
+    }
+    &:after {
+      transform: translateY(-50%) rotate(-180deg);
+    }
+  }
 }
 
-.select-light{
-    position: relative;
+.select-light {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 30px;
+  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background-size: 10px 6px;
+  border: 1px solid #eee;
+  padding: 0 30px 0 10px;
+  font-size: 13px;
+  color: #45576f;
+  font-family: 'Noto Sans JP', sans-serif;
+  cursor: pointer;
+  &:disabled {
+    opacity: 1;
+    background-color: #fafafa;
+    color: #999;
+    cursor: default;
+  }
+  &.black {
+    color: #101010;
+  }
+  &.dark {
+    background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+    color: #898989;
+    font-size: 12px;
+    border-radius: 2px;
+    border: none;
+  }
+}
+
+// input
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+}
+input[type='number'],
+input[type='text'] {
+  &.input-origin {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+    background-color: #323234;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: 'Pretendard', sans-serif;
+    padding: 0 10px;
+    letter-spacing: 0px;
+    text-align: right;
+    &::placeholder {
+      opacity: 1;
+      font-size: 12px;
+      letter-spacing: 0px;
+    }
+    &.block {
+      width: 100%;
+    }
+    &:read-only {
+      color: #aaa;
+    }
+    &.plane {
+      font-family: 'Noto Sans JP', sans-serif;
+      border: 1px solid #525252;
+      background-color: transparent;
+    }
+  }
+  &.input-light {
     display: block;
     width: 100%;
     height: 30px;
-    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
-    background-size: 10px 6px;
+    padding: 0 10px;
     border: 1px solid #eee;
-    padding: 0 30px 0 10px;
-    font-size: 13px;
-    color: #45576F;
+    border-radius: 2px;
+    background-color: #fff;
     font-family: 'Noto Sans JP', sans-serif;
-    cursor: pointer;
-    &:disabled{
-        opacity: 1;
-        background-color: #FAFAFA;
-        color: #999;
-        cursor: default;
-    }
-    &.black{
-        color: #101010;
-    }
-    &.dark{
-        background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
-        color: #898989;
-        font-size: 12px;
-        border-radius: 2px;
-        border: none;
+    font-size: 13px;
+    color: #45576f;
+    font-weight: normal;
+    transition: border-color 0.17s ease-in-out;
+    text-align: left;
+    &:read-only {
+      background-color: #fafafa;
+      color: #999999;
     }
+  }
 }
 
-
-// input
-.form-input{
-    label{
-        display: block;
-        color: #aaa;
-        font-size: 12px;
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-}
-input[type=number],
-input[type=text]{
-    &.input-origin{
-        display: inline-block;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 2px;
-        background-color: #323234;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 500;
-        font-family: 'Pretendard', sans-serif;
-        padding: 0 10px;
-        letter-spacing: 0px;
-        text-align: right;
-        &::placeholder{
-            opacity: 1;
-            font-size: 12px;
-            letter-spacing: 0px;
-        }
-        &.block{
-            width: 100%;
-        }
-        &:read-only{
-            color: #AAA;
-        }
-        &.plane{
-            font-family: 'Noto Sans JP', sans-serif;
-            border: 1px solid #525252;
-            background-color: transparent;
-        }
-    }
-    &.input-light{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 10px;
-        border: 1px solid #eee;
-        border-radius: 2px;
-        background-color: #fff;
-        font-family: 'Noto Sans JP', sans-serif;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        transition: border-color .17s ease-in-out;
-        text-align: left;
-        &:read-only{
-            background-color: #FAFAFA;
-            color: #999999;
-        }
-    }
-}
-
-
-
 // check-btn
-.check-btn{
-    display: flex;
-    align-items: center;
-    height: 30px;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    transition: all .17s ease-in-out;
-    .check-area{
-        flex: none;
-        width: 30px;
-        height: 100%;
-        border-right: 1px solid #272727;
-        background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
-        background-size: 11px 9px;
+.check-btn {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  background-color: #3a3a3a;
+  border-radius: 3px;
+  transition: all 0.17s ease-in-out;
+  .check-area {
+    flex: none;
+    width: 30px;
+    height: 100%;
+    border-right: 1px solid #272727;
+    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+    background-size: 11px 9px;
+  }
+  .title-area {
+    padding: 0 10px;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+  }
+  &.block {
+    width: 100%;
+  }
+  &:hover,
+  &.act {
+    background-color: #fff;
+    .check-area {
+      border-right: 1px solid #101010;
+      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
     }
-    .title-area{
-        padding: 0 10px;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-    }
-    &.block{
-        width: 100%;
-    }
-    &:hover,
-    &.act{
-        background-color: #fff;
-        .check-area{
-            border-right: 1px solid #101010;
-            background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
-        }
-        .title-area{
-            color: #101010;
-            font-weight: 600;
-        }
+    .title-area {
+      color: #101010;
+      font-weight: 600;
     }
+  }
 }
 
 // arr-btn
-.arr-btn{
-    display: block;
-    height: 30px;
-    border-radius: 3px;
-    background-color: #3A3A3A;
-    padding: 0 11px;
-    text-align: left;
-    transition: all .17s ease-in-out;
-    span{
-        position: relative;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-        padding-right: 15px;
-        &:after{
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 5px;
-            height: 8px;
-            background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
-        }
+.arr-btn {
+  display: block;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #3a3a3a;
+  padding: 0 11px;
+  text-align: left;
+  transition: all 0.17s ease-in-out;
+  span {
+    position: relative;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+    padding-right: 15px;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 5px;
+      height: 8px;
+      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+    }
+  }
+  &:hover,
+  &.act {
+    background-color: #fff;
+    span {
+      color: #101010;
+      font-weight: 500;
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+      }
+    }
+  }
+  &.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: #fff;
-        span{
-            color: #101010;
-            font-weight: 500;
-            &:after{
-                background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
-            }
-        }
-    }
-    &.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;
-        }
+    &.act {
+      background-color: #1083e3;
+      border: 1px solid #1083e3;
     }
+  }
 }
 
 // radio
 .d-check-radio,
-.d-check-box{
-    line-height: 1.1;
+.d-check-box {
+  line-height: 1.1;
+  cursor: pointer;
+  input[type='checkbox'],
+  input[type='radio'] {
+    position: static;
+    margin-left: 0;
     cursor: pointer;
-    input[type=checkbox],
-    input[type=radio]{
-        position: static;
-        margin-left: 0;
-        cursor: pointer;
-        opacity: 0;
-        z-index: 1;
-        flex: 0 0 auto;
+    opacity: 0;
+    z-index: 1;
+    flex: 0 0 auto;
+  }
+  label {
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 0;
+    word-break: break-all;
+    line-height: 1.2;
+    display: inline;
+    vertical-align: top;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+  &.light {
+    label {
+      color: #45576f;
     }
-    label{
-        position: relative;
-        padding-left: 10px;
-        margin-bottom: 0;
-        word-break: break-all;
-        line-height: 1.2;
-        display: inline;
-        vertical-align: top;
-        color: #fff;
-        font-size: 13px;
-        font-weight: 400;
-        cursor: pointer;
-    }
-    &.light{
-        label{
-            color: #45576F;
-        }
-    }
-    &.no-text{
-        label{
-            padding-left: 0;
-        }
+  }
+  &.no-text {
+    label {
+      padding-left: 0;
     }
+  }
 }
 
 .d-check-radio {
-    label{
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top:2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #999999;
-            border-radius: 100%;
-            background-color: transparent;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &::after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 9px;
-            height: 9px;
-            top:6px;
-            left: 4px;
-            margin-left: -12px;
-            border: none;
-            border-radius: 100%;
-            background-color: #fff;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
+  label {
+    &::before {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #999999;
+      border-radius: 100%;
+      background-color: transparent;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    &.light{
-        label{
-            &:before{
-                border-color: #D6D6D7;
-            }
-            &:after{
-                background-color: #697C8F;
-            }
-        }
+    &::after {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      top: 6px;
+      left: 4px;
+      margin-left: -12px;
+      border: none;
+      border-radius: 100%;
+      background-color: #fff;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      opacity: 0;
+      visibility: hidden;
+      transition:
+        opacity 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    input[type=radio]:checked + label::after{
-        opacity: 1;
-        visibility: visible;
+  }
+  &.light {
+    label {
+      &:before {
+        border-color: #d6d6d7;
+      }
+      &:after {
+        background-color: #697c8f;
+      }
     }
-    &.pop{
-        label{
-            font-size: 12px;
-            &:before{
-                width: 16px;
-                height: 16px;
-                border-color: #fff;
-            }
-            &:after{
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-            }
-        }
+  }
+  input[type='radio']:checked + label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+  &.pop {
+    label {
+      font-size: 12px;
+      &:before {
+        width: 16px;
+        height: 16px;
+        border-color: #fff;
+      }
+      &:after {
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+      }
     }
+  }
 }
 
 // check-box
-.d-check-box{
-    label{
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top: 2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #D6D6D7;
-            background-color: transparent;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &:after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            top:0;
-            left: 0;
-            margin-left: -.8rem;
-            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
-        }
+.d-check-box {
+  label {
+    &.red {
+      color: #ffcaca;
     }
-    input[type=checkbox]:checked + label::after{
-        content: "";
-        display: inline-block;
-        position: absolute;
-        top: 1px;
-        left: -1px;
-        width: 5px;
-        height: 8px;
-        border: 2px solid #697C8F;
-        border-left: none;
-        border-top: none;
-        transform: translate(7.75px,4.5px) rotate(45deg);
-        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+    &::before {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #d6d6d7;
+      background-color: transparent;
+      transition:
+        border 0.15s ease-in-out,
+        color 0.15s ease-in-out;
     }
-    &.pop{
-        input[type=checkbox]:checked + label::after{
-            border-color: #fff;
-        }
+    &:after {
+      cursor: pointer;
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 0;
+      left: 0;
+      margin-left: -0.8rem;
+      transition:
+        border 0.05s ease-in-out,
+        color 0.05s ease-in-out;
     }
+  }
+  input[type='checkbox']:checked + label::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 1px;
+    left: -1px;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #697c8f;
+    border-left: none;
+    border-top: none;
+    transform: translate(7.75px, 4.5px) rotate(45deg);
+    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+  }
+  &.pop {
+    input[type='checkbox']:checked + label::after {
+      border-color: #fff;
+    }
+    &.no-text {
+      label {
+        padding-left: 0;
+      }
+    }
+  }
+  &.sel {
+    input[type='checkbox']:checked + label {
+      color: #d7c863;
+    }
+    input[type='checkbox']:checked + label::before,
+    input[type='checkbox']:checked + label::after {
+      border-color: #d7c863;
+    }
+  }
 }
 
 // date-picker
-.date-picker{
-    svg{display: none;}
-    .react-datepicker-wrapper{
-        width: 100%;
-    }
-    input[type=text]{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 34px 0 10px;
-        border-radius: 2px;
-        border: 1px solid #eee;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        font-family: 'Noto Sans JP', sans-serif;
-        background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
-        background-size: 14px 15px;
-        cursor: pointer;
-    }
-}
\ No newline at end of file
+.date-picker {
+  svg {
+    display: none;
+  }
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
+  input[type='text'] {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    border: 1px solid #eee;
+    font-size: 13px;
+    color: #45576f;
+    font-weight: normal;
+    font-family: 'Noto Sans JP', sans-serif;
+    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+    background-size: 14px 15px;
+    cursor: pointer;
+  }
+}
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
new file mode 100644
index 00000000..aa50dcdd
--- /dev/null
+++ b/src/styles/_submodal.scss
@@ -0,0 +1,198 @@
+.modal-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.75);
+  z-index: 110000;
+  .modal-dialog {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - (1.5rem * 2));
+    width: 680px;
+    z-index: 200000;
+    margin: 1.5rem auto;
+    pointer-events: none;
+    &.middle {
+      width: 800px;
+    }
+    &.big {
+      width: 1000px;
+    }
+    .modal-content {
+      flex: 1;
+      position: relative;
+      background-clip: padding-box;
+      background-color: transparent;
+      outline: 0 none;
+      pointer-events: auto;
+      border-radius: 4px;
+      .modal-header {
+        display: flex;
+        align-items: center;
+        padding: 10px 24px;
+        background-color: #7992ba;
+        border-radius: 4px 4px 0px 0px;
+        // overflow: hidden;
+        h1.title {
+          font-size: 13px;
+          color: $pop-color;
+          font-weight: 700;
+        }
+        .modal-close {
+          margin-left: auto;
+          color: transparent;
+          font-size: 0;
+          width: 10px;
+          height: 10px;
+          background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+        }
+      }
+      .modal-body {
+        padding: 30px;
+        background-color: #fff;
+        border-radius: 0px 0px 4px 4px;
+        .modal-body-inner {
+          margin-bottom: 20px;
+          &.border {
+            padding-bottom: 20px;
+            border-bottom: 1px solid #ecf0f4;
+          }
+        }
+        .footer-btn-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}
+
+// modal-contents
+
+//  비밀번호 변경
+.change-password-guide {
+  span {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #101010;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.change-password-box {
+  padding: 30px;
+  border-radius: 4px;
+  background: #f4f4f7;
+  margin-bottom: 20px;
+  .change-password-tit {
+    .tit-b {
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .tit-s {
+      font-size: 12px;
+      font-weight: 400;
+      color: #898989;
+    }
+  }
+  .change-password-input {
+    width: 100%;
+    .change-password {
+      width: 100%;
+      height: 45px;
+      border-radius: 4px;
+      border: 1px solid #e9e9e9;
+      background-color: #fff;
+      padding: 0 10px;
+      font-size: 12px;
+      color: #364864;
+      font-family: 'Noto Sans JP', sans-serif;
+      &::placeholder {
+        font-size: 12px;
+      }
+    }
+  }
+  .table-item-th {
+    width: 145px;
+  }
+}
+.form-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  .table-item {
+    display: table-row;
+    .table-item-th,
+    .table-item-td {
+      display: table-cell;
+      vertical-align: middle;
+      padding-bottom: 10px;
+    }
+    &:last-child {
+      .table-item-th,
+      .table-item-td {
+        padding-bottom: 0;
+      }
+    }
+    .table-item-td {
+      padding-left: 10px;
+    }
+  }
+}
+
+// 주소찾기 팝업
+.address-input-wrap {
+  position: relative;
+  height: 45px;
+  padding: 0 40px 0 15px;
+  border-radius: 4px;
+  border: 1px solid #e9e9e9;
+  background: #fff;
+  margin-bottom: 20px;
+  input {
+    width: 100%;
+    height: 100%;
+    font-size: 13px;
+    font-weight: 400;
+    font-family: 'Noto Sans JP' sans-serif;
+    color: #868686;
+    &::placeholder {
+      color: #aeaeae;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+  .search-btn {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    width: 21px;
+    height: 100%;
+    background: url(../../public/static/images/sub/address_search.svg) no-repeat center;
+    background-size: 21px 21px;
+  }
+}
+
+// 설계의뢰 불러오기
+.design-request-table {
+  margin-bottom: 20px;
+}
+.design-request-grid {
+  .design-request-grid-tit {
+    font-size: 13px;
+    font-weight: 600;
+    color: #101010;
+    margin-bottom: 15px;
+  }
+}
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index a87bfc5b..e6b46a7c 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -1,205 +1,281 @@
-@mixin flexbox(){
-    display: flex;
-    align-items: center;
+@mixin flexbox() {
+  display: flex;
+  align-items: center;
 }
 
-table{
-    .overflow-lab{
+table {
+  .overflow-lab {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .al-l {
+    text-align: left !important;
+  }
+}
+
+.flx-box {
+  @include flexbox;
+}
+
+.common-table {
+  table {
+    table-layout: fixed;
+    border: 1px solid #ecf0f4;
+    border-radius: 3px;
+    border-collapse: collapse;
+    tbody {
+      th {
+        font-size: 13px;
+        font-weight: 500;
+        color: #344356;
+        padding: 14px 12px;
+        border: 1px solid #ecf0f4;
+        background-color: #f7f9fa;
+        vertical-align: middle;
+      }
+      td {
+        padding: 9px;
+        border: 1px solid #ecf0f4;
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576f;
+        vertical-align: middle;
+        .radio-wrap {
+          flex: none;
+          @include flexbox;
+        }
+        .form-flex-wrap {
+          @include flexbox;
+        }
+        .date-picker-wrap {
+          width: 100%;
+          @include flexbox;
+          span {
+            margin: 0 4px;
+          }
+        }
+      }
+    }
+  }
+  &.bt-able {
+    margin-bottom: 30px;
+  }
+}
+
+.infomation-table {
+  table {
+    border-top: 1px solid #dee3ea;
+    border-bottom: 1px solid #dee3ea;
+    border-collapse: collapse;
+    tbody {
+      tr {
+        th {
+          font-size: 13px;
+          color: #344356;
+          font-weight: 500;
+          padding: 18px 0;
+          border-bottom: 1px solid #f4f4f7;
+          .title {
+            margin-right: 8px;
+          }
+        }
+        td {
+          padding: 0 0 0 15px;
+          border-bottom: 1px solid #f4f4f7;
+
+          .guide {
+            font-size: 13px;
+            color: #697c8f;
+            font-weight: normal;
+            margin-left: 15px;
+            margin-bottom: 0;
+          }
+          span {
+            font-size: 13px;
+            color: #697c8f;
+            font-weight: normal;
+          }
+        }
+        &:last-child {
+          th,
+          td {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+  .tooltips {
+    display: block;
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
+    background-size: cover;
+    cursor: pointer;
+  }
+}
+
+.module-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    thead {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+      th {
+        padding: 13px 0;
+        font-size: 13px;
+        color: #344356;
+        font-weight: 500;
+        border-bottom: 2px solid #e0e5eb;
+        text-align: center;
+      }
+    }
+    tbody {
+      display: block;
+      overflow-y: auto;
+      tr {
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+        border: 1px solid #ecf0f4;
+        td {
+          padding: 10px 0px;
+          font-size: 13px;
+          color: #45576f;
+          font-weight: 400;
+          text-align: center;
+        }
+      }
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: #c1ccd7;
+      }
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    }
+    &.small {
+      tbody {
+        height: 120px;
+      }
+    }
+    &.big {
+      td,
+      th {
+        &:nth-child(2) {
+          width: 121px;
+        }
+      }
+      tbody {
+        height: 160px;
+        td {
+          padding: 10px 20px;
+        }
+      }
+    }
+  }
+}
+
+.roof-module-table {
+  table {
+    border-collapse: collapse;
+    thead {
+      th {
+        height: 40px;
+        padding: 0px 10px;
+        font-size: 12px;
+        line-height: 1.1;
+        color: #fff;
+        font-weight: 500;
+        border: 1px solid #505050;
+        vertical-align: middle;
+        background-color: rgba(255, 255, 255, 0.05);
+        text-align: center;
+        word-break: keep-all;
+        .d-check-box {
+          opacity: 0.5;
+        }
+      }
+    }
+    tbody {
+      tr {
+        cursor: pointer;
+        &.on {
+          background-color: #272727;
+        }
+      }
+      td {
+        height: 40px;
+        vertical-align: middle;
+        font-size: 12px;
+        color: #fff;
+        font-weight: 400;
+        border: 1px solid #505050;
+        padding: 0 10px;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        .warning {
+          color: PCSオプションマスター;
+        }
+        .color-wrap {
+          display: flex;
+          align-items: center;
+          .color-box {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+          }
+          .name {
+            width: 0;
+            flex: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+        }
+      }
     }
-    .al-l{
-        text-align: left !important;
-    }
-}
-
-.common-table{
-    table{
+  }
+  &.overflow-y {
+    table {
+      table-layout: fixed;
+      border-collapse: collapse;
+      thead {
+        display: table;
         table-layout: fixed;
-        border: 1px solid #ECF0F4;
-        border-radius: 3px;
-        border-collapse:collapse;
-        tbody{
-            th{
-                font-size: 13px;
-                font-weight: 500;
-                color: #344356;
-                padding: 14px 12px;
-                border: 1px solid #ECF0F4 ;
-                background-color: #F7F9FA;
-                vertical-align: middle;
-            }
-            td{
-                padding: 9px;
-                border: 1px solid #ECF0F4 ;
-                font-size: 13px;
-                font-weight: 400;
-                color: #45576F;
-                vertical-align: middle;
-                .radio-wrap{
-                    flex: none;
-                    @include flexbox;
-                }
-                .form-flex-wrap{
-                    @include flexbox;
-                }
-                .date-picker-wrap{
-                    width: 100%;
-                    @include flexbox;
-                    span{
-                        margin: 0 4px;
-                    }
-                }
-            }
-        }
-    }
-    &.bt-able{
-        margin-bottom: 30px;
-    }
-}
-
-.infomation-table{
-    table{
-        border-top: 1px solid #DEE3EA;
-        border-bottom: 1px solid #DEE3EA;
-        border-collapse:collapse;
-        tbody{
-            tr{
-                th{
-                    font-size: 13px;
-                    color: #344356;
-                    font-weight: 500;
-                    padding: 18px 0;
-                    border-bottom: 1px solid #F4F4F7;
-                    .title{
-                        margin-right: 8px;
-                    }
-                }
-                td{
-                    padding: 0 0 0 15px;
-                    border-bottom: 1px solid #F4F4F7;
-                    
-                    .guide{
-                        font-size: 13px;
-                        color: #697C8F;
-                        font-weight: normal;
-                        margin-left: 15px;
-                    }
-                    span{
-                        font-size: 13px;
-                        color: #697C8F;
-                        font-weight: normal;
-                    }
-                }
-                &:last-child{
-                    th,td{border-bottom: none;}
-                }
-            }
-        }
-        .flx-box{
-            @include flexbox;
-        }
-    }
-    .tooltips{
+        width: 100%;
+        border-collapse: collapse;
+      }
+      tbody {
         display: block;
-        width: 14px;
-        height: 14px;
-        display: inline-block;
-        background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
-        background-size: cover;
-        cursor: pointer;
+        max-height: 81px;
+        overflow-y: auto;
+        tr {
+          display: table;
+          table-layout: fixed;
+          width: 100%;
+          border-collapse: collapse;
+          margin-top: -1px;
+        }
+        &::-webkit-scrollbar {
+          width: 2px;
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: #c1ccd7;
+        }
+        &::-webkit-scrollbar-track {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+      }
     }
+  }
 }
-
-.module-table{
-    table{
-        table-layout: fixed;
-        border-collapse: collapse;
-        thead{
-            display: table;
-            table-layout: fixed;
-            width: 100%;
-            th{
-                padding: 13px 0;
-                font-size: 13px;
-                color: #344356;
-                font-weight: 500;
-                border-bottom: 2px solid #E0E5EB;
-                text-align: center;
-            }
-        }
-        tbody{
-            display: block;
-            overflow-y: auto;
-            tr{
-                display: table;
-                table-layout: fixed;
-                width: 100%;
-                border: 1px solid #ECF0F4;
-                td{
-                    padding: 10px 0px;
-                    font-size: 13px;
-                    color: #45576F;
-                    font-weight: 400;
-                    text-align: center;
-                }
-            }
-            &::-webkit-scrollbar {
-                width: 4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                background-color: #C1CCD7;
-            }
-            &::-webkit-scrollbar-track {
-                background-color: transparent;
-            }
-        }
-        &.small{
-            tbody{height: 120px;}
-        }
-        &.big{
-            td,
-            th{
-                &:nth-child(2){
-                    width: 121px;
-                }
-            }
-            tbody{
-                height: 160px;
-                td{
-                    padding: 10px 20px;
-                }
-            }
-        }
-    }
-}
-
-.roof-module-table{
-    table{
-        border-collapse: collapse;
-        thead{
-            th{
-                height: 40px;
-                padding: 0 10px;
-                font-size: 12px;
-                color: #fff;
-                font-weight: 500;
-                border: 1px solid #505050;
-                vertical-align: middle;
-                background-color: rgba(255, 255, 255, 0.05);
-                text-align: center;
-                word-break: keep-all;
-            }
-        }
-        tbody{
-            td{
-                font-size: 12px;
-                color: #fff;
-                font-weight: 400;
-                border: 1px solid #505050;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 38e7ff83..08c322e9 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -1,4 +1,5 @@
 @import '_contents.scss';
 @import '_modal.scss';
+@import '_submodal.scss';
 @import '_table.scss';
-@import '_canvasside.scss';
\ No newline at end of file
+@import '_canvasside.scss';

From 7214e5bb5907efad56f403b6ba7b3c0070ae6906 Mon Sep 17 00:00:00 2001
From: basssy <basssy@interplug.co.kr>
Date: Fri, 11 Oct 2024 12:58:35 +0900
Subject: [PATCH 17/27] =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Main.jsx b/src/components/Main.jsx
index be72673f..69c90071 100644
--- a/src/components/Main.jsx
+++ b/src/components/Main.jsx
@@ -112,7 +112,7 @@ export default function MainPage() {
 
   return (
     <>
-      {(sessionState.pwdInitYn === 'Y' && (
+      {(sessionState?.pwdInitYn !== 'N' && (
         <>
           <div className="background-bord"></div>
           <div className="main-contents">

From e2e1c63885c71a67625546fb0105537e222294e4 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 14:41:39 +0900
Subject: [PATCH 18/27] =?UTF-8?q?-=20=EC=A7=80=EB=B6=95=EB=A9=B4=20?=
 =?UTF-8?q?=ED=95=A0=EB=8B=B9=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasMenu.jsx      |   2 +
 src/components/floor-plan/FloorPlan.jsx       |   4 +
 src/components/floor-plan/MenuDepth01.jsx     |   5 +-
 .../roofAllocation/RoofAllocationSetting.jsx  | 222 ++++++++++++++++++
 src/locales/ja.json                           |   6 +
 src/locales/ko.json                           |   6 +
 6 files changed, 244 insertions(+), 1 deletion(-)
 create mode 100644 src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index eceef021..d8b7510c 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -46,6 +46,7 @@ export default function CanvasMenu(props) {
     setShowEavesGableEditModal,
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -99,6 +100,7 @@ export default function CanvasMenu(props) {
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     type,
   }
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index 9e6a541e..2902fcf0 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/src/components/floor-plan/FloorPlan.jsx
@@ -25,6 +25,7 @@ import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
 import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
 import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -41,6 +42,7 @@ export default function FloorPlan() {
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
   const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
+  const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -78,6 +80,7 @@ export default function FloorPlan() {
     setShowEavesGableEditModal,
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   }
 
   useEffect(() => {
@@ -147,6 +150,7 @@ export default function FloorPlan() {
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
           {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
+          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx
index 9ce635ef..8cb10b38 100644
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@@ -20,6 +20,7 @@ export default function MenuDepth01(props) {
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
   } = props
   const { getMessage } = useMessage()
@@ -38,6 +39,7 @@ export default function MenuDepth01(props) {
       setShowEavesGableEditModal(id === 4)
       setShowMovementModal(id === 5)
       setShowWallLineOffsetSettingModal(id === 6)
+      setShowRoofAllocationSettingModal(id === 7)
       setShowPlaceShapeDrawingModal(false)
     }
 
@@ -49,7 +51,8 @@ export default function MenuDepth01(props) {
       setShowEavesGableEditModal(false)
       setShowMovementModal(false)
       setShowWallLineOffsetSettingModal(false)
-      
+      setShowRoofAllocationSettingModal(false)
+
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
new file mode 100644
index 00000000..d42f7fb2
--- /dev/null
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -0,0 +1,222 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) {
+  const { getMessage } = useMessage()
+  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(null)
+  const [values, setValues] = useState([
+    {
+      id: '1',
+      type: 'A',
+      roofMaterial: { name: '기와1' },
+      width: { name: '200' },
+      length: { name: '250' },
+      rafter: { name: '300' },
+      alignType: 'stairs',
+    },
+  ])
+
+  const roofMaterials = [
+    {
+      id: 'A',
+      name: '기와1',
+      type: 'A',
+      width: '200',
+      length: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'B',
+      name: '기와2',
+      type: 'B',
+      rafter: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'C',
+      name: '기와3',
+      type: 'C',
+      hajebichi: '200',
+      alignType: 'stairs',
+    },
+    {
+      id: 'D',
+      name: '기와4',
+      type: 'D',
+      length: '200',
+      alignType: 'stairs',
+    },
+  ]
+  const widths = [
+    { name: '200', id: 'q' },
+    { name: '250', id: 'q1' },
+    { name: '300', id: 'q2' },
+  ]
+  const lengths = [
+    { name: '200', id: 'w' },
+    { name: '250', id: 'w1' },
+    { name: '300', id: 'w2' },
+  ]
+  const rafters = [
+    { name: '200', id: 'e' },
+    { name: '250', id: 'e1' },
+    { name: '300', id: 'e2' },
+  ]
+
+  const onAddRoofMaterial = () => {
+    setValues([...values, selectedRoofMaterial])
+  }
+
+  const onDeleteRoofMaterial = (id) => {
+    setValues(values.filter((value) => value.id !== id))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap ml`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <button className="modal-close" onClick={() => setShowRoofAllocationSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+          <div className="allocation-select-wrap">
+            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+            <div className="grid-select">
+              <QSelectBox options={roofMaterials} value={selectedRoofMaterial} onChange={(e) => setSelectedRoofMaterial(e)} />
+            </div>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.common.add')}
+            </button>
+          </div>
+          <div className="grid-option-wrap">
+            {values.map((value, index) => (
+              <div className="grid-option-box" key={index}>
+                <div className="d-check-radio pop no-text">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01"></label>
+                </div>
+                <div className="grid-option-block-form">
+                  <div className="block-box">
+                    <div className="flex-ment">
+                      <div className="grid-select" style={{ width: '248px' }}>
+                        <QSelectBox options={roofMaterials} value={value} />
+                      </div>
+                      {index === 0 && <span className="dec">基本屋根材</span>}
+                      {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(value.id)}></button>}
+                    </div>
+                  </div>
+                  <div className="block-box">
+                    {value.type === 'A' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>W</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>235</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>455</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'B' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'C' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'D' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                  <div className="block-box">
+                    <div className="icon-btn-wrap">
+                      <button className={value.alignType === 'parallel' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.parallel')}
+                        <i className="allocation01"></i>
+                      </button>
+                      <button className={value.alignType === 'stairs' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.roof.alloc.apply')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index fb925f64..46891fce 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -84,6 +84,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。",
+  "modal.roof.alloc.select.roof.material": "屋根材の選択",
+  "modal.roof.alloc.select.parallel": "並列式",
+  "modal.roof.alloc.select.stairs": "カスケード",
+  "modal.roof.alloc.apply": "選択した屋根材として割り当て",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "コピー",
@@ -120,6 +125,7 @@
   "modal.grid.copy.length": "長さ",
   "modal.grid.copy.save": "保存",
   "modal.common.save": "保存",
+  "modal.common.add": "追加",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index cf63e56c..b9616eb8 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -87,6 +87,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나,  지붕재를 추가하여 할당할 수 있습니다.",
+  "modal.roof.alloc.select.roof.material": "지붕재 선택",
+  "modal.roof.alloc.select.parallel": "병렬식",
+  "modal.roof.alloc.select.stairs": "계단식",
+  "modal.roof.alloc.apply": "선택한 지붕재로 할당",
   "plan.menu.estimate.save": "저장",
   "plan.menu.estimate.reset": "초기화",
   "plan.menu.estimate.copy": "복사",
@@ -123,6 +128,7 @@
   "modal.grid.copy.length": "길이",
   "modal.grid.copy.save": "저장",
   "modal.common.save": "저장",
+  "modal.common.add": "추가",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",

From a82dafaa064024ecc119df142f6f17e17fabe57d Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Fri, 11 Oct 2024 15:04:22 +0900
Subject: [PATCH 19/27] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20=EC=9E=91=EC=97=85=20=EC=A7=84=ED=96=89=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementSurface/PlacementSurface.jsx     |  46 +-
 .../PlacementSurfaceSetting.jsx               | 167 ++---
 src/hooks/surface/useSurfaceShapeBatch.js     | 633 ++++++++++++++++++
 src/locales/ja.json                           |   9 +-
 src/locales/ko.json                           |   9 +-
 5 files changed, 779 insertions(+), 85 deletions(-)
 create mode 100644 src/hooks/surface/useSurfaceShapeBatch.js

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index 9ac285c0..d6d08675 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -1,9 +1,14 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
+import { forwardRef, useState } from 'react'
 
-export default function PlacementSurface(props) {
+const PlacementSurface = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const { id, lines, info, rotate, xInversion, yInversion } = props
+  let { length1, length2, length3, length4, length5, lengthetc, azimuth } = refs
+
+  const [azimuthDirection, setAzimuthDirection] = useState(azimuth.current)
+
   const num = ['①', '②', '③', '④', '⑤']
   const getImageUrl = () => {
     if (xInversion && !yInversion) {
@@ -24,6 +29,12 @@ export default function PlacementSurface(props) {
 
     return `/static/images/canvas/shape/${rotate !== 0 ? Math.abs(rotate * 90) + 'deg' : 'normal'}/plane_tab${id < 10 ? '0' + id : id}.svg`
   }
+
+  const azimuthButton = (direction, e) => {
+    setAzimuthDirection(direction)
+    azimuth.current = direction
+  }
+
   return (
     <>
       <div className="plane-shape-wrapper">
@@ -36,14 +47,31 @@ export default function PlacementSurface(props) {
             <div className="shape-data">
               <div className="eaves-keraba-table">
                 {lines?.map((line, index) => (
-                  <div className="eaves-keraba-item" id={index}>
+                  <div className="eaves-keraba-item" id={index} key={index}>
                     <div className="eaves-keraba-th">
                       {line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
                     </div>
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
                         <div className="input-grid mr5" style={{ width: '57px' }}>
-                          <input type="text" className="input-origin plane block" defaultValue={line.value} />
+                          <input
+                            type="text"
+                            className="input-origin plane block"
+                            defaultValue={line.value}
+                            ref={
+                              line.isDiagonal
+                                ? lengthetc
+                                : index === 0
+                                  ? length1
+                                  : index === 1
+                                    ? length2
+                                    : index === 2
+                                      ? length3
+                                      : index === 3
+                                        ? length4
+                                        : length5
+                            }
+                          />
                         </div>
                         <span className="thin">mm</span>
                       </div>
@@ -62,10 +90,10 @@ export default function PlacementSurface(props) {
               <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 right"></button>
-              <button className="plane-btn down act"></button>
-              <button className="plane-btn left"></button>
+              <button className={`plane-btn up ${azimuthDirection === 'up' ? ' act' : ''}`} onClick={() => azimuthButton('up')}></button>
+              <button className={`plane-btn right ${azimuthDirection === 'right' ? ' act' : ''}`} onClick={() => azimuthButton('right')}></button>
+              <button className={`plane-btn down ${azimuthDirection === 'down' ? ' act' : ''}`} onClick={() => azimuthButton('down')}></button>
+              <button className={`plane-btn left ${azimuthDirection === 'left' ? ' act' : ''}`} onClick={() => azimuthButton('left')}></button>
             </div>
           </div>
         </div>
@@ -73,4 +101,6 @@ export default function PlacementSurface(props) {
       {info && <div className="plane-tab-guide">{info}</div>}
     </>
   )
-}
+})
+
+export default PlacementSurface
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index 06af2237..d2c3022a 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -1,15 +1,30 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import Image from 'next/image'
 import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
+import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 
 export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSettingModal }) {
   const { getMessage } = useMessage()
+
   const [selectedType, setSelectedType] = useState()
   const [rotate, setRotate] = useState(0)
   const [xInversion, setXInversion] = useState(false)
   const [yInversion, setYInversion] = useState(false)
+
+  const { applySurfaceShape } = useSurfaceShapeBatch()
+
+  const surfaceRefs = {
+    length1: useRef(null),
+    length2: useRef(null),
+    length3: useRef(null),
+    length4: useRef(null),
+    length5: useRef(null),
+    lengthetc: useRef(null),
+    azimuth: useRef('down'),
+  }
+
   /* type
    * a: line 2
    * b: line 2 + diagonal 1
@@ -21,11 +36,11 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
     {
       id: 1,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
         {
           isDiagonal: true,
-          value: 3500,
+          value: 0,
         },
       ],
       info: getMessage('modal.placement.surface.setting.info'),
@@ -33,151 +48,151 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
     {
       id: 2,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 3,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 4,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 5,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 6,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
       lineAmount: 3,
     },
     {
       id: 7,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 8,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 9,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 10,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 11,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 12,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 13,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 14,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 15,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 16,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 17,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
     {
       id: 18,
       lines: [
-        { isDiagonal: false, value: 4500 },
-        { isDiagonal: false, value: 2600 },
-        { isDiagonal: false, value: 2600 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
+        { isDiagonal: false, value: 0 },
       ],
     },
   ]
@@ -200,11 +215,11 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
     return `rotate(${90 * rotate}deg)`
   }
 
-  const onClick = () => {
-    if (xInversion !== yInversion) {
-    } else {
-      setRotate((rotate + 1) % 4)
-    }
+  const applySurfaces = () => {
+    surfaceRefs.xInversion = xInversion //좌우반전
+    surfaceRefs.yInversion = yInversion //상하반전
+    surfaceRefs.rotate = rotate * 90 //앵글
+    applySurfaceShape(surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal)
   }
 
   useEffect(() => {
@@ -245,9 +260,11 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
             <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
             <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
           </div>
-          <PlacementSurface {...placementSurfaceProps} />
+          <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">作成</button>
+            <button className="btn-frame modal act" onClick={applySurfaces}>
+              {getMessage('write')}
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
new file mode 100644
index 00000000..e612a463
--- /dev/null
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -0,0 +1,633 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { MENU } from '@/common/common'
+import { getIntersectionPoint } from '@/util/canvas-util'
+import { degreesToRadians } from '@turf/turf'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { fabric } from 'fabric'
+import { useSwal } from '@/hooks/useSwal'
+import { useMessage } from '@/hooks/useMessage'
+
+export function useSurfaceShapeBatch() {
+  const { getMessage } = useMessage()
+
+  const canvas = useRecoilValue(canvasState)
+  const { swalFire } = useSwal()
+
+  const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => {
+    let length1, length2, length3, length4, length5
+    const surfaceId = selectedType?.id
+    const azimuth = surfaceRefs.azimuth.current
+
+    if (surfaceId === 1) {
+      length1 = surfaceRefs.length1.current.value
+      length2 = surfaceRefs.length2.current.value
+      length3 = surfaceRefs.lengthetc.current.value //대각선
+    } else if ([2, 4].includes(surfaceId)) {
+      length1 = surfaceRefs.length1.current.value
+      length2 = surfaceRefs.length2.current.value
+    } else if ([3, 5, 6, 15, 18].includes(surfaceId)) {
+      length1 = surfaceRefs.length1.current.value
+      length2 = surfaceRefs.length2.current.value
+      length3 = surfaceRefs.length3.current.value
+    } else if ([8, 12, 13, 16, 17].includes(surfaceId)) {
+      length1 = surfaceRefs.length1.current.value
+      length2 = surfaceRefs.length2.current.value
+      length3 = surfaceRefs.length3.current.value
+      length4 = surfaceRefs.length4.current.value
+    } else if ([7, 9, 10, 11, 14].includes(surfaceId)) {
+      length1 = surfaceRefs.length1.current.value
+      length2 = surfaceRefs.length2.current.value
+      length3 = surfaceRefs.length3.current.value
+      length4 = surfaceRefs.length4.current.value
+      length5 = surfaceRefs.length5.current.value
+    }
+
+    length1 = parseInt(length1 === undefined ? 0 : length1 / 10)
+    length2 = parseInt(length2 === undefined ? 0 : length2 / 10)
+    length3 = parseInt(length3 === undefined ? 0 : length3 / 10)
+    length4 = parseInt(length4 === undefined ? 0 : length4 / 10)
+    length5 = parseInt(length5 === undefined ? 0 : length5 / 10)
+
+    let isDrawing = true
+    let obj = null
+    let points = []
+    if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
+      setShowPlacementSurfaceSettingModal(false)
+      canvas?.on('mouse:move', (e) => {
+        console.log('asdfasdfasdfasdfasdfsdfasdfsdf')
+
+        if (!isDrawing) {
+          return
+        }
+        const pointer = canvas?.getPointer(e.e)
+        canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP))
+        points = getSurfaceShape(surfaceId, pointer, { length1, length2, length3, length4, length5 })
+
+        const options = {
+          fill: 'transparent',
+          stroke: 'black',
+          strokeWidth: 1,
+          strokeDasharray: [10, 4],
+          fontSize: 12,
+          selectable: true,
+          lockMovementX: true, // X 축 이동 잠금
+          lockMovementY: true, // Y 축 이동 잠금
+          lockRotation: true, // 회전 잠금
+          lockScalingX: true, // X 축 크기 조정 잠금
+          lockScalingY: true, // Y 축 크기 조정 잠금
+          name: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH_TEMP,
+          flipX: surfaceRefs.yInversion,
+          flipY: surfaceRefs.xInversion,
+          angle: surfaceRefs.rotate,
+          originX: 'center',
+          originY: 'center',
+        }
+
+        obj = new QPolygon(points, options)
+        obj.setCoords() //좌표 변경 적용
+
+        canvas?.add(obj)
+
+        //각도 추가
+        let originAngle = 0 //기본 남쪽
+        let direction = 'south'
+        if (azimuth === 'left') {
+          //서
+          originAngle = 90
+          direction = 'west'
+        } else if (azimuth === 'right') {
+          //동
+          originAngle = 270
+          direction = 'east'
+        } else if (azimuth === 'up') {
+          //북
+          originAngle = 180
+          direction = 'north'
+        }
+
+        obj.set({ direction: direction })
+        obj.set({ originAngle: originAngle })
+
+        // setCurrentPattern(obj)
+        canvas?.renderAll()
+      })
+
+      canvas?.on('mouse:down', (e) => {
+        isDrawing = false
+        obj.set('name', MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH)
+        canvas?.off('mouse:down')
+        canvas.off('mouse:move')
+        setSurfaceShapePattern(obj)
+        setShowPlacementSurfaceSettingModal(true)
+      })
+    }
+  }
+
+  //면형상 입력 validate
+  const checkSurfaceShape = (surfaceId, lengths) => {
+    const { length1, length2, length3, length4, length5 } = lengths
+    let check = true
+
+    if (surfaceId === 1) {
+      if (length1 === 0) {
+        swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+        check = false
+      }
+      if (length2 === 0) {
+        if (length3 === 0) {
+          swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+          check = false
+        }
+      }
+    } else if ([2, 4].includes(surfaceId)) {
+      if (length1 === 0 || length2 === 0) {
+        swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+        check = false
+      }
+    } else if ([3, 5, 6, 15, 18].includes(surfaceId)) {
+      if (length1 === 0 || length2 === 0 || length3 === 0) {
+        swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+        check = false
+      }
+      if (surfaceId === 3 && length3 > length1) {
+        swalFire({ text: getMessage('surface.shape.validate.size.1to3'), icon: 'error' })
+        check = false
+      }
+
+      if (surfaceId === 5 || surfaceId === 15) {
+        if (length3 >= length2) {
+          swalFire({ text: getMessage('surface.shape.validate.size.2to3'), icon: 'error' })
+          check = false
+        }
+      }
+      if (surfaceId === 18) {
+        if (length1 >= length2) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
+          check = false
+        }
+        if (length4 >= length3) {
+          swalFire({ text: getMessage('surface.shape.validate.size.3to4'), icon: 'error' })
+          check = false
+        }
+      }
+    } else if ([8, 12, 13, 16, 17].includes(surfaceId)) {
+      if (length1 === 0 || length2 === 0 || length3 === 0 || length4 === 0) {
+        swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+        check = false
+      }
+
+      if (surfaceId === 8) {
+        if (length2 >= length1) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
+          check = false
+        }
+        if (length4 >= length3) {
+          swalFire({ text: getMessage('surface.shape.validate.size.3to4'), icon: 'error' })
+          check = false
+        }
+      }
+
+      if (surfaceId === 12 || surfaceId === 13 || surfaceId === 16 || surfaceId === 17) {
+        if (length2 >= length1) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
+          check = false
+        }
+
+        if (length4 >= length3) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to2'), icon: 'error' })
+          check = false
+        }
+      }
+    } else if ([7, 9, 10, 11, 14].includes(surfaceId)) {
+      if (length1 === 0 || length2 === 0 || length3 === 0 || length4 === 0 || length5 === 0) {
+        swalFire({ text: getMessage('surface.shape.validate.size'), icon: 'error' })
+        check = false
+      }
+      if (surfaceId === 9 || surfaceId === 10 || surfaceId === 11) {
+        if (length2 + length3 >= length1) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to23'), icon: 'error' })
+          check = false
+        }
+        if (length5 >= length4) {
+          swalFire({ text: getMessage('surface.shape.validate.size.4to5'), icon: 'error' })
+          check = false
+        }
+      }
+
+      if (surfaceId === 14) {
+        if (length2 + length3 >= length1) {
+          swalFire({ text: getMessage('surface.shape.validate.size.1to23'), icon: 'error' })
+          check = false
+        }
+        if (length5 >= length4) {
+          swalFire({ text: getMessage('surface.shape.validate.size.4to5'), icon: 'error' })
+          check = false
+        }
+      }
+    }
+    return check
+  }
+
+  //면형상 가져오기
+  const getSurfaceShape = (surfaceId, pointer, lengths) => {
+    let points = []
+    const { length1, length2, length3, length4, length5 } = lengths
+
+    switch (surfaceId) {
+      case 1: {
+        let newLength2 = length2
+
+        if (length3 !== 0) {
+          newLength2 = Math.sqrt(length3 ** 2 - (length1 / 2) ** 2)
+        }
+
+        points = [
+          { x: pointer.x, y: pointer.y - parseInt(newLength2) / 2 },
+          { x: pointer.x - parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+          { x: pointer.x + parseInt(length1) / 2, y: pointer.y + parseInt(newLength2) / 2 },
+        ]
+
+        break
+      }
+      case 2: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y - length2 / 2 },
+        ]
+
+        break
+      }
+      case 3: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length3 / 2, y: pointer.y - length2 / 2 },
+          { x: pointer.x - length3 / 2, y: pointer.y - length2 / 2 },
+        ]
+
+        break
+      }
+      case 4: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y - length2 / 2 },
+        ]
+
+        break
+      }
+      case 5: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y - length3 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 - length2 },
+        ]
+
+        break
+      }
+      case 6: {
+        const angleInRadians = Math.asin(length2 / length3)
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+          { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
+        ]
+
+        break
+      }
+      case 7: {
+        points = [
+          { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
+          { x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
+          { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
+          {
+            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
+            y: pointer.y + (length4 + length5) / 2 - length5 + length5,
+          },
+          {
+            x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
+            y: pointer.y + (length4 + length5) / 2 - length5 + length5 - (length4 + length5),
+          },
+        ]
+
+        break
+      }
+      case 8: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
+          { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
+          { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
+          { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
+        ]
+
+        break
+      }
+      case 9: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+          { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+        ]
+        break
+      }
+      case 10: {
+        points = [
+          { x: pointer.x + length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
+          { x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
+          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
+          { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+        ]
+        break
+      }
+      case 11: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
+          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
+          { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+          { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+        ]
+        break
+      }
+      case 12: {
+        const leftHypotenuse = Math.sqrt(((length1 - length2) / 2) ** 2 + length3 ** 2)
+        const rightHypotenuse = (length4 / length3) * leftHypotenuse
+
+        const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
+
+        points = [
+          { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
+          { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
+          {
+            x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle),
+            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
+          },
+          {
+            x: pointer.x + length1 / 2 - rightHypotenuse * Math.cos(leftAngle) - length2,
+            y: pointer.y + length3 / 2 - rightHypotenuse * Math.sin(leftAngle),
+          },
+        ]
+
+        break
+      }
+      case 13: {
+        const pointsArray = [
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+        ]
+
+        const tmpPolygon = new QPolygon(
+          [
+            { x: 0, y: length3 },
+            { x: length1 - length2, y: length3 },
+            { x: (length1 - length2) / 2, y: length3 - length3 },
+          ],
+          {
+            fill: 'transparent',
+            stroke: 'black', //black
+            strokeWidth: 2,
+            selectable: true,
+            fontSize: 0,
+          },
+        )
+
+        const coord = getIntersectionPoint(tmpPolygon.lines[1].startPoint, tmpPolygon.lines[2].startPoint, length3 - length4)
+        const scale = (length1 - length2) / coord.x
+
+        tmpPolygon.set({ scaleX: scale })
+
+        pointsArray[0].x = 0
+        pointsArray[0].y = length3 //바닥면부터 시작하게
+        pointsArray[1].x = pointsArray[0].x + length1
+        pointsArray[1].y = pointsArray[0].y
+        pointsArray[2].x = pointsArray[1].x
+        pointsArray[2].y = pointsArray[1].y - length4
+        pointsArray[3].x = pointsArray[2].x - length2
+        pointsArray[3].y = pointsArray[2].y
+        pointsArray[4].x = tmpPolygon.getCurrentPoints()[2].x
+        pointsArray[4].y = tmpPolygon.getCurrentPoints()[2].y
+
+        points = [
+          {
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y + length4 / 2,
+          },
+          {
+            x: pointer.x + length1 / 2,
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - (length2 - length1 / 2),
+            y: pointer.y - length4 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + pointsArray[4].x,
+            y: pointer.y - length3 + length4 / 2,
+          },
+        ]
+
+        break
+      }
+      case 14: {
+        points = [
+          { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
+          { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
+          { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
+          { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
+        ]
+        break
+      }
+
+      case 15: {
+        points = [
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 },
+          { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
+          { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 },
+          { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 },
+        ]
+        break
+      }
+
+      case 16: {
+        points = [
+          {
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+            y: pointer.y + length3 / 2 - (length3 - length4),
+          },
+          {
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+          },
+          {
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4,
+          },
+          {
+            x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2,
+            y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4,
+          },
+          {
+            x: pointer.x - length1 / 2 + length1,
+            y: pointer.y + length3 / 2,
+          },
+        ]
+        break
+      }
+      case 17: {
+        const angle = (Math.asin(length3 / length4) * 180) / Math.PI // 높이와 빗변으로 먼저 각도구하기
+
+        const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이
+
+        points = [
+          {
+            x: pointer.x - length1 / 2 + length1,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2,
+            y: pointer.y + length3 / 2,
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(angle),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2,
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)),
+          },
+          {
+            x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)),
+            y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)),
+          },
+        ]
+        break
+      }
+
+      case 18: {
+        const a = Math.sqrt(length3 * length3 - length2 * length2) // 입력된 밑변과 높이
+
+        const sinA = a / length3
+        const angleInRadians = Math.asin(sinA)
+        const angleInDegrees = angleInRadians * (180 / Math.PI)
+        const b = a - length1 / 2
+
+        const c = b / Math.tan(angleInRadians)
+        const d = Math.sqrt(b * b + c * c)
+        const newAngleInRadians = (90 - angleInDegrees) * (Math.PI / 180)
+        points = [
+          { x: pointer.x - (length1 + b) / 2, y: pointer.y + length2 / 2 },
+          { x: pointer.x + length1 / 2 - b / 2, y: pointer.y + length2 / 2 },
+          {
+            x: pointer.x + length1 / 2 - b / 2 + d * Math.cos(newAngleInRadians),
+            y: pointer.y + length2 / 2 - d * Math.sin(newAngleInRadians),
+          },
+          {
+            x: pointer.x - (length1 + b) / 2 + length3 * Math.cos(newAngleInRadians),
+            y: pointer.y + length2 / 2 - length3 * Math.sin(newAngleInRadians),
+          },
+        ]
+        break
+      }
+    }
+
+    return points
+  }
+
+  //면형상 선택 클릭시 지붕 패턴 입히기
+  const setSurfaceShapePattern = (polygon) => {
+    const ratio = window.devicePixelRatio || 1
+
+    let width = 265 / 10
+    let height = 150 / 10
+    let roofStyle = 2
+    const inputPatternSize = { width: width, height: height } //임시 사이즈
+    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+
+    if (polygon.direction === 'east' || polygon.direction === 'west') {
+      //세로형이면 width height를 바꿈
+      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
+    }
+
+    // 패턴 소스를 위한 임시 캔버스 생성
+    const patternSourceCanvas = document.createElement('canvas')
+    patternSourceCanvas.width = polygon.width * ratio
+    patternSourceCanvas.height = polygon.height * ratio
+    const ctx = patternSourceCanvas.getContext('2d')
+    const offset = roofStyle === 1 ? 0 : patternSize.width / 2
+
+    const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
+    const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
+
+    ctx.strokeStyle = 'green'
+    ctx.lineWidth = 0.4
+
+    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()
+      }
+    }
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: patternSourceCanvas,
+      repeat: 'repeat',
+    })
+
+    polygon.set('fill', null)
+    polygon.set('fill', pattern)
+    canvas?.renderAll()
+  }
+
+  return {
+    applySurfaceShape,
+  }
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index cbda8988..faddd395 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -361,5 +361,12 @@
   "main.content.objectList": "最近の更新物件一覧",
   "main.content.notice": "お知らせ",
   "main.content.download1": "操作マニュアル",
-  "main.content.download2": "屋根の説明書"
+  "main.content.download2": "屋根の説明書",
+  "surface.shape.validate.size": "寸法を入力してください.",
+  "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.1to3": "①길이는 ③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
 }
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 6f3d3aca..3f5dd119 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -367,5 +367,12 @@
   "main.content.objectList": "최근 갱신 물건목록",
   "main.content.notice": "공지사항",
   "main.content.download1": "조작메뉴얼",
-  "main.content.download2": "지붕설명서"
+  "main.content.download2": "지붕설명서",
+  "surface.shape.validate.size": "사이즈를 입력해 주세요.",
+  "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.1to3": "①길이는 ③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.1to23": "①길이는 ②+③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.2to3": "②길이는 ③보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.3to4": "③길이는 ④보다 큰 값을 넣어주세요.",
+  "surface.shape.validate.size.4to5": "④길이는 ⑤보다 큰 값을 넣어주세요."
 }

From 63cb5abfddb27ef1eccc3c15d08ffae84d40eb14 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 15:10:58 +0900
Subject: [PATCH 20/27] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/canvas/additional-edit01.svg       | 115 ++++++++++
 .../images/canvas/additional-edit02.svg       | 115 ++++++++++
 .../images/canvas/additional_bundle-del01.svg | 106 ++++++++++
 .../images/canvas/additional_bundle-del02.svg | 106 ++++++++++
 .../images/canvas/additional_bundle-del03.svg | 115 ++++++++++
 .../images/canvas/additional_bundle-del04.svg |  97 +++++++++
 .../canvas/additional_bundle-edit01.svg       | 124 +++++++++++
 .../canvas/additional_bundle-edit02.svg       | 124 +++++++++++
 .../static/images/canvas/additional_del01.svg | 103 +++++++++
 .../static/images/canvas/additional_del02.svg | 103 +++++++++
 .../static/images/canvas/additional_del03.svg | 112 ++++++++++
 .../static/images/canvas/additional_del04.svg |  94 +++++++++
 public/static/images/main/login_email.svg     |  10 +
 public/static/images/sub/address_search.svg   |  11 +
 public/static/images/sub/information_help.svg |   4 +
 src/styles/_contents.scss                     |  60 +++++-
 src/styles/_grid-detail.scss                  |   3 +
 src/styles/_main.scss                         | 127 +++++++++--
 src/styles/_modal.scss                        | 141 +++++++++++++
 src/styles/_reset.scss                        |  66 +++++-
 src/styles/_submodal.scss                     | 199 ++++++++++++++++++
 src/styles/_table.scss                        |  85 +++++++-
 src/styles/contents.scss                      |   1 +
 src/styles/style.scss                         |   3 +-
 24 files changed, 1996 insertions(+), 28 deletions(-)
 create mode 100644 public/static/images/canvas/additional-edit01.svg
 create mode 100644 public/static/images/canvas/additional-edit02.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del01.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del02.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del03.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del04.svg
 create mode 100644 public/static/images/canvas/additional_bundle-edit01.svg
 create mode 100644 public/static/images/canvas/additional_bundle-edit02.svg
 create mode 100644 public/static/images/canvas/additional_del01.svg
 create mode 100644 public/static/images/canvas/additional_del02.svg
 create mode 100644 public/static/images/canvas/additional_del03.svg
 create mode 100644 public/static/images/canvas/additional_del04.svg
 create mode 100644 public/static/images/main/login_email.svg
 create mode 100644 public/static/images/sub/address_search.svg
 create mode 100644 public/static/images/sub/information_help.svg
 create mode 100644 src/styles/_submodal.scss

diff --git a/public/static/images/canvas/additional-edit01.svg b/public/static/images/canvas/additional-edit01.svg
new file mode 100644
index 00000000..2e8ce52c
--- /dev/null
+++ b/public/static/images/canvas/additional-edit01.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3427)">
+<mask id="mask0_4200_3427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3427)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3427" fill="white">
+<path d="M31 26H102.25V78H31V26Z"/>
+</mask>
+<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3427)"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" fill="#001027"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
+<rect x="176" y="28.5" width="66.25" height="47" fill="#16417D"/>
+<rect x="176" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-44-inside-2_4200_3427" fill="white">
+<path d="M244.75 26H316V78H244.75V26Z"/>
+</mask>
+<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3427)"/>
+<mask id="path-46-inside-3_4200_3427" fill="white">
+<path d="M31 78H102.25V130H31V78Z"/>
+</mask>
+<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3427)"/>
+<mask id="path-48-inside-4_4200_3427" fill="white">
+<path d="M102.25 78H173.5V130H102.25V78Z"/>
+</mask>
+<path d="M102.25 78H173.5V130H102.25V78Z" fill="#001027"/>
+<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="white" mask="url(#path-48-inside-4_4200_3427)"/>
+<mask id="path-50-inside-5_4200_3427" fill="white">
+<path d="M173.5 78H244.75V130H173.5V78Z"/>
+</mask>
+<path d="M173.5 78H244.75V130H173.5V78Z" fill="#16417D"/>
+<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="#EA10AC" mask="url(#path-50-inside-5_4200_3427)"/>
+<mask id="path-52-inside-6_4200_3427" fill="white">
+<path d="M244.75 78H316V130H244.75V78Z"/>
+</mask>
+<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3427)"/>
+<mask id="path-54-inside-7_4200_3427" fill="white">
+<path d="M31 130H102.25V182H31V130Z"/>
+</mask>
+<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3427)"/>
+<mask id="path-56-inside-8_4200_3427" fill="white">
+<path d="M102.25 130H173.5V182H102.25V130Z"/>
+</mask>
+<path d="M102.25 130H173.5V182H102.25V130Z" fill="#001027"/>
+<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="white" mask="url(#path-56-inside-8_4200_3427)"/>
+<mask id="path-58-inside-9_4200_3427" fill="white">
+<path d="M173.5 130H244.75V182H173.5V130Z"/>
+</mask>
+<path d="M173.5 130H244.75V182H173.5V130Z" fill="#16417D"/>
+<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="#EA10AC" mask="url(#path-58-inside-9_4200_3427)"/>
+<mask id="path-60-inside-10_4200_3427" fill="white">
+<path d="M244.75 130H316V182H244.75V130Z"/>
+</mask>
+<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3427)"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" stroke="white"/>
+<path d="M59.2929 155.293C58.9024 155.683 58.9024 156.317 59.2929 156.707L65.6569 163.071C66.0474 163.462 66.6805 163.462 67.0711 163.071C67.4616 162.681 67.4616 162.047 67.0711 161.657L61.4142 156L67.0711 150.343C67.4616 149.953 67.4616 149.319 67.0711 148.929C66.6805 148.538 66.0474 148.538 65.6569 148.929L59.2929 155.293ZM74 155H60V157H74V155Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" stroke="white"/>
+<path d="M59.2929 103.293C58.9024 103.683 58.9024 104.317 59.2929 104.707L65.6569 111.071C66.0474 111.462 66.6805 111.462 67.0711 111.071C67.4616 110.681 67.4616 110.047 67.0711 109.657L61.4142 104L67.0711 98.3431C67.4616 97.9526 67.4616 97.3195 67.0711 96.9289C66.6805 96.5384 66.0474 96.5384 65.6569 96.9289L59.2929 103.293ZM74 103H60V105H74V103Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" stroke="white"/>
+<path d="M59.2929 51.2929C58.9024 51.6834 58.9024 52.3166 59.2929 52.7071L65.6569 59.0711C66.0474 59.4616 66.6805 59.4616 67.0711 59.0711C67.4616 58.6805 67.4616 58.0474 67.0711 57.6569L61.4142 52L67.0711 46.3431C67.4616 45.9526 67.4616 45.3195 67.0711 44.9289C66.6805 44.5384 66.0474 44.5384 65.6569 44.9289L59.2929 51.2929ZM74 51H60V53H74V51Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3427">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional-edit02.svg b/public/static/images/canvas/additional-edit02.svg
new file mode 100644
index 00000000..5d3a03cd
--- /dev/null
+++ b/public/static/images/canvas/additional-edit02.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3217)">
+<mask id="mask0_4200_3217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3217)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3217" fill="white">
+<path d="M31 26H102.25V78H31V26Z"/>
+</mask>
+<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3217)"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" fill="#16417D"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
+<rect x="176" y="28.5" width="66.25" height="47" fill="#001027"/>
+<rect x="176" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
+<mask id="path-44-inside-2_4200_3217" fill="white">
+<path d="M244.75 26H316V78H244.75V26Z"/>
+</mask>
+<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3217)"/>
+<mask id="path-46-inside-3_4200_3217" fill="white">
+<path d="M31 78H102.25V130H31V78Z"/>
+</mask>
+<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3217)"/>
+<mask id="path-48-inside-4_4200_3217" fill="white">
+<path d="M102.25 78H173.5V130H102.25V78Z"/>
+</mask>
+<path d="M102.25 78H173.5V130H102.25V78Z" fill="#16417D"/>
+<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="#EA10AC" mask="url(#path-48-inside-4_4200_3217)"/>
+<mask id="path-50-inside-5_4200_3217" fill="white">
+<path d="M173.5 78H244.75V130H173.5V78Z"/>
+</mask>
+<path d="M173.5 78H244.75V130H173.5V78Z" fill="#001027"/>
+<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="white" mask="url(#path-50-inside-5_4200_3217)"/>
+<mask id="path-52-inside-6_4200_3217" fill="white">
+<path d="M244.75 78H316V130H244.75V78Z"/>
+</mask>
+<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3217)"/>
+<mask id="path-54-inside-7_4200_3217" fill="white">
+<path d="M31 130H102.25V182H31V130Z"/>
+</mask>
+<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3217)"/>
+<mask id="path-56-inside-8_4200_3217" fill="white">
+<path d="M102.25 130H173.5V182H102.25V130Z"/>
+</mask>
+<path d="M102.25 130H173.5V182H102.25V130Z" fill="#16417D"/>
+<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="#EA10AC" mask="url(#path-56-inside-8_4200_3217)"/>
+<mask id="path-58-inside-9_4200_3217" fill="white">
+<path d="M173.5 130H244.75V182H173.5V130Z"/>
+</mask>
+<path d="M173.5 130H244.75V182H173.5V130Z" fill="#001027"/>
+<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="white" mask="url(#path-58-inside-9_4200_3217)"/>
+<mask id="path-60-inside-10_4200_3217" fill="white">
+<path d="M244.75 130H316V182H244.75V130Z"/>
+</mask>
+<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3217)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" stroke="white"/>
+<path d="M287.707 52.7071C288.098 52.3166 288.098 51.6834 287.707 51.2929L281.343 44.9289C280.953 44.5384 280.319 44.5384 279.929 44.9289C279.538 45.3195 279.538 45.9526 279.929 46.3431L285.586 52L279.929 57.6569C279.538 58.0474 279.538 58.6805 279.929 59.0711C280.319 59.4616 280.953 59.4616 281.343 59.0711L287.707 52.7071ZM273 53H287V51H273V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" stroke="white"/>
+<path d="M287.707 104.707C288.098 104.317 288.098 103.683 287.707 103.293L281.343 96.9289C280.953 96.5384 280.319 96.5384 279.929 96.9289C279.538 97.3195 279.538 97.9526 279.929 98.3431L285.586 104L279.929 109.657C279.538 110.047 279.538 110.681 279.929 111.071C280.319 111.462 280.953 111.462 281.343 111.071L287.707 104.707ZM273 105H287V103H273V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" stroke="white"/>
+<path d="M287.707 156.707C288.098 156.317 288.098 155.683 287.707 155.293L281.343 148.929C280.953 148.538 280.319 148.538 279.929 148.929C279.538 149.319 279.538 149.953 279.929 150.343L285.586 156L279.929 161.657C279.538 162.047 279.538 162.681 279.929 163.071C280.319 163.462 280.953 163.462 281.343 163.071L287.707 156.707ZM273 157H287V155H273V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3217">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del01.svg b/public/static/images/canvas/additional_bundle-del01.svg
new file mode 100644
index 00000000..29ad58c0
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del01.svg
@@ -0,0 +1,106 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3872)">
+<mask id="mask0_4200_3872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3872)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3872" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3872)"/>
+<mask id="path-42-inside-2_4200_3872" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3872)"/>
+<mask id="path-44-inside-3_4200_3872" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3872)"/>
+<mask id="path-46-inside-4_4200_3872" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3872)"/>
+<mask id="path-48-inside-5_4200_3872" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3872)"/>
+<mask id="path-50-inside-6_4200_3872" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3872)"/>
+<mask id="path-52-inside-7_4200_3872" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3872)"/>
+<mask id="path-54-inside-8_4200_3872" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3872)"/>
+<mask id="path-56-inside-9_4200_3872" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3872)"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
+<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
+<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
+<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3872">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del02.svg b/public/static/images/canvas/additional_bundle-del02.svg
new file mode 100644
index 00000000..797adf82
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del02.svg
@@ -0,0 +1,106 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4066)">
+<mask id="mask0_4200_4066" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4066)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_4066" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4066)"/>
+<mask id="path-42-inside-2_4200_4066" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4066)"/>
+<mask id="path-44-inside-3_4200_4066" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4066)"/>
+<mask id="path-46-inside-4_4200_4066" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4066)"/>
+<mask id="path-48-inside-5_4200_4066" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4066)"/>
+<mask id="path-50-inside-6_4200_4066" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4066)"/>
+<mask id="path-52-inside-7_4200_4066" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4066)"/>
+<mask id="path-54-inside-8_4200_4066" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4066)"/>
+<mask id="path-56-inside-9_4200_4066" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4066)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
+<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
+<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
+<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4066">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del03.svg b/public/static/images/canvas/additional_bundle-del03.svg
new file mode 100644
index 00000000..082cae56
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del03.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4260)">
+<mask id="mask0_4200_4260" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4260)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_4260" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4260)"/>
+<mask id="path-42-inside-2_4200_4260" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4260)"/>
+<mask id="path-44-inside-3_4200_4260" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4260)"/>
+<mask id="path-46-inside-4_4200_4260" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4260)"/>
+<mask id="path-48-inside-5_4200_4260" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4260)"/>
+<mask id="path-50-inside-6_4200_4260" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4260)"/>
+<mask id="path-52-inside-7_4200_4260" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4260)"/>
+<mask id="path-54-inside-8_4200_4260" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4260)"/>
+<mask id="path-56-inside-9_4200_4260" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4260)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
+<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
+<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
+<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
+<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
+<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
+<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4260">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del04.svg b/public/static/images/canvas/additional_bundle-del04.svg
new file mode 100644
index 00000000..4f28a719
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del04.svg
@@ -0,0 +1,97 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3677)">
+<mask id="mask0_4200_3677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3677)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3677" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3677)"/>
+<mask id="path-42-inside-2_4200_3677" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3677)"/>
+<mask id="path-44-inside-3_4200_3677" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3677)"/>
+<mask id="path-46-inside-4_4200_3677" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3677)"/>
+<mask id="path-48-inside-5_4200_3677" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3677)"/>
+<mask id="path-50-inside-6_4200_3677" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3677)"/>
+<mask id="path-52-inside-7_4200_3677" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3677)"/>
+<mask id="path-54-inside-8_4200_3677" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3677)"/>
+<mask id="path-56-inside-9_4200_3677" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3677)"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3677">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-edit01.svg b/public/static/images/canvas/additional_bundle-edit01.svg
new file mode 100644
index 00000000..38c3846c
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-edit01.svg
@@ -0,0 +1,124 @@
+<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4645)">
+<mask id="mask0_4200_4645" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4645)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-43-inside-1_4200_4645" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4645)"/>
+<mask id="path-45-inside-2_4200_4645" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4645)"/>
+<mask id="path-47-inside-3_4200_4645" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4645)"/>
+<mask id="path-49-inside-4_4200_4645" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#001027"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="white" mask="url(#path-49-inside-4_4200_4645)"/>
+<mask id="path-51-inside-5_4200_4645" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#001027"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="white" mask="url(#path-51-inside-5_4200_4645)"/>
+<mask id="path-53-inside-6_4200_4645" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#001027"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="white" mask="url(#path-53-inside-6_4200_4645)"/>
+<mask id="path-55-inside-7_4200_4645" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="#EA10AC" mask="url(#path-55-inside-7_4200_4645)"/>
+<mask id="path-57-inside-8_4200_4645" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="#EA10AC" mask="url(#path-57-inside-8_4200_4645)"/>
+<mask id="path-59-inside-9_4200_4645" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="#EA10AC" mask="url(#path-59-inside-9_4200_4645)"/>
+<mask id="path-61-inside-10_4200_4645" fill="white">
+<path d="M31 182H126V234H31V182Z"/>
+</mask>
+<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
+<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4645)"/>
+<mask id="path-63-inside-11_4200_4645" fill="white">
+<path d="M126 182H221V234H126V182Z"/>
+</mask>
+<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
+<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4645)"/>
+<mask id="path-65-inside-12_4200_4645" fill="white">
+<path d="M221 182H316V234H221V182Z"/>
+</mask>
+<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
+<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4645)"/>
+<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" fill="#16417D"/>
+<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" stroke="white"/>
+<path d="M76.2929 46.2929C76.6834 45.9024 77.3166 45.9024 77.7071 46.2929L84.0711 52.6569C84.4616 53.0474 84.4616 53.6805 84.0711 54.0711C83.6805 54.4616 83.0474 54.4616 82.6569 54.0711L77 48.4142L71.3431 54.0711C70.9526 54.4616 70.3195 54.4616 69.9289 54.0711C69.5384 53.6805 69.5384 53.0474 69.9289 52.6569L76.2929 46.2929ZM76 61V47H78V61H76Z" fill="white"/>
+<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" fill="#16417D"/>
+<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" stroke="white"/>
+<path d="M170.293 46.2929C170.683 45.9024 171.317 45.9024 171.707 46.2929L178.071 52.6569C178.462 53.0474 178.462 53.6805 178.071 54.0711C177.681 54.4616 177.047 54.4616 176.657 54.0711L171 48.4142L165.343 54.0711C164.953 54.4616 164.319 54.4616 163.929 54.0711C163.538 53.6805 163.538 53.0474 163.929 52.6569L170.293 46.2929ZM170 61V47H172V61H170Z" fill="white"/>
+<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" fill="#16417D"/>
+<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" stroke="white"/>
+<path d="M266.293 46.2929C266.683 45.9024 267.317 45.9024 267.707 46.2929L274.071 52.6569C274.462 53.0474 274.462 53.6805 274.071 54.0711C273.681 54.4616 273.047 54.4616 272.657 54.0711L267 48.4142L261.343 54.0711C260.953 54.4616 260.319 54.4616 259.929 54.0711C259.538 53.6805 259.538 53.0474 259.929 52.6569L266.293 46.2929ZM266 61V47H268V61H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4645">
+<rect width="352" height="257" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-edit02.svg b/public/static/images/canvas/additional_bundle-edit02.svg
new file mode 100644
index 00000000..8b2c9f7b
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-edit02.svg
@@ -0,0 +1,124 @@
+<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4454)">
+<mask id="mask0_4200_4454" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4454)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-43-inside-1_4200_4454" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4454)"/>
+<mask id="path-45-inside-2_4200_4454" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4454)"/>
+<mask id="path-47-inside-3_4200_4454" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4454)"/>
+<mask id="path-49-inside-4_4200_4454" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-49-inside-4_4200_4454)"/>
+<mask id="path-51-inside-5_4200_4454" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-51-inside-5_4200_4454)"/>
+<mask id="path-53-inside-6_4200_4454" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-53-inside-6_4200_4454)"/>
+<mask id="path-55-inside-7_4200_4454" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#001027"/>
+<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="white" mask="url(#path-55-inside-7_4200_4454)"/>
+<mask id="path-57-inside-8_4200_4454" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#001027"/>
+<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="white" mask="url(#path-57-inside-8_4200_4454)"/>
+<mask id="path-59-inside-9_4200_4454" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#001027"/>
+<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="white" mask="url(#path-59-inside-9_4200_4454)"/>
+<mask id="path-61-inside-10_4200_4454" fill="white">
+<path d="M31 182H126V234H31V182Z"/>
+</mask>
+<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
+<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4454)"/>
+<mask id="path-63-inside-11_4200_4454" fill="white">
+<path d="M126 182H221V234H126V182Z"/>
+</mask>
+<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
+<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4454)"/>
+<mask id="path-65-inside-12_4200_4454" fill="white">
+<path d="M221 182H316V234H221V182Z"/>
+</mask>
+<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
+<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4454)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" stroke="white"/>
+<path d="M76.2929 215.707C76.6834 216.098 77.3166 216.098 77.7071 215.707L84.0711 209.343C84.4616 208.953 84.4616 208.319 84.0711 207.929C83.6805 207.538 83.0474 207.538 82.6569 207.929L77 213.586L71.3431 207.929C70.9526 207.538 70.3195 207.538 69.9289 207.929C69.5384 208.319 69.5384 208.953 69.9289 209.343L76.2929 215.707ZM76 201V215H78V201H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" stroke="white"/>
+<path d="M170.293 215.707C170.683 216.098 171.317 216.098 171.707 215.707L178.071 209.343C178.462 208.953 178.462 208.319 178.071 207.929C177.681 207.538 177.047 207.538 176.657 207.929L171 213.586L165.343 207.929C164.953 207.538 164.319 207.538 163.929 207.929C163.538 208.319 163.538 208.953 163.929 209.343L170.293 215.707ZM170 201V215H172V201H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" stroke="white"/>
+<path d="M266.293 215.707C266.683 216.098 267.317 216.098 267.707 215.707L274.071 209.343C274.462 208.953 274.462 208.319 274.071 207.929C273.681 207.538 273.047 207.538 272.657 207.929L267 213.586L261.343 207.929C260.953 207.538 260.319 207.538 259.929 207.929C259.538 208.319 259.538 208.953 259.929 209.343L266.293 215.707ZM266 201V215H268V201H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4454">
+<rect width="352" height="257" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del01.svg b/public/static/images/canvas/additional_del01.svg
new file mode 100644
index 00000000..17e8cea0
--- /dev/null
+++ b/public/static/images/canvas/additional_del01.svg
@@ -0,0 +1,103 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2642)">
+<mask id="mask0_4200_2642" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2642)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2642" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2642)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2642" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2642)"/>
+<mask id="path-45-inside-3_4200_2642" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2642)"/>
+<mask id="path-47-inside-4_4200_2642" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2642)"/>
+<mask id="path-49-inside-5_4200_2642" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2642)"/>
+<mask id="path-51-inside-6_4200_2642" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2642)"/>
+<mask id="path-53-inside-7_4200_2642" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2642)"/>
+<mask id="path-55-inside-8_4200_2642" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2642)"/>
+<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 52.7071C260.902 52.3166 260.902 51.6834 261.293 51.2929L267.657 44.9289C268.047 44.5384 268.681 44.5384 269.071 44.9289C269.462 45.3195 269.462 45.9526 269.071 46.3431L263.414 52L269.071 57.6569C269.462 58.0474 269.462 58.6805 269.071 59.0711C268.681 59.4616 268.047 59.4616 267.657 59.0711L261.293 52.7071ZM276 53H262V51H276V53Z" fill="white"/>
+<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 104.707C260.902 104.317 260.902 103.683 261.293 103.293L267.657 96.9289C268.047 96.5384 268.681 96.5384 269.071 96.9289C269.462 97.3195 269.462 97.9526 269.071 98.3431L263.414 104L269.071 109.657C269.462 110.047 269.462 110.681 269.071 111.071C268.681 111.462 268.047 111.462 267.657 111.071L261.293 104.707ZM276 105H262V103H276V105Z" fill="white"/>
+<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 156.707C260.902 156.317 260.902 155.683 261.293 155.293L267.657 148.929C268.047 148.538 268.681 148.538 269.071 148.929C269.462 149.319 269.462 149.953 269.071 150.343L263.414 156L269.071 161.657C269.462 162.047 269.462 162.681 269.071 163.071C268.681 163.462 268.047 163.462 267.657 163.071L261.293 156.707ZM276 157H262V155H276V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2642">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del02.svg b/public/static/images/canvas/additional_del02.svg
new file mode 100644
index 00000000..575dae2b
--- /dev/null
+++ b/public/static/images/canvas/additional_del02.svg
@@ -0,0 +1,103 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2835)">
+<mask id="mask0_4200_2835" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2835)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2835" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2835)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2835" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2835)"/>
+<mask id="path-45-inside-3_4200_2835" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2835)"/>
+<mask id="path-47-inside-4_4200_2835" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2835)"/>
+<mask id="path-49-inside-5_4200_2835" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2835)"/>
+<mask id="path-51-inside-6_4200_2835" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2835)"/>
+<mask id="path-53-inside-7_4200_2835" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2835)"/>
+<mask id="path-55-inside-8_4200_2835" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2835)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
+<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
+<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
+<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2835">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del03.svg b/public/static/images/canvas/additional_del03.svg
new file mode 100644
index 00000000..2d071afd
--- /dev/null
+++ b/public/static/images/canvas/additional_del03.svg
@@ -0,0 +1,112 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3022)">
+<mask id="mask0_4200_3022" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3022)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3022" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3022)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_3022" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_3022)"/>
+<mask id="path-45-inside-3_4200_3022" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_3022)"/>
+<mask id="path-47-inside-4_4200_3022" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_3022)"/>
+<mask id="path-49-inside-5_4200_3022" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_3022)"/>
+<mask id="path-51-inside-6_4200_3022" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_3022)"/>
+<mask id="path-53-inside-7_4200_3022" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_3022)"/>
+<mask id="path-55-inside-8_4200_3022" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_3022)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
+<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
+<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
+<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" stroke="white"/>
+<path d="M261.293 155.293C260.902 155.683 260.902 156.317 261.293 156.707L267.657 163.071C268.047 163.462 268.681 163.462 269.071 163.071C269.462 162.681 269.462 162.047 269.071 161.657L263.414 156L269.071 150.343C269.462 149.953 269.462 149.319 269.071 148.929C268.681 148.538 268.047 148.538 267.657 148.929L261.293 155.293ZM276 155H262V157H276V155Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" stroke="white"/>
+<path d="M261.293 103.293C260.902 103.683 260.902 104.317 261.293 104.707L267.657 111.071C268.047 111.462 268.681 111.462 269.071 111.071C269.462 110.681 269.462 110.047 269.071 109.657L263.414 104L269.071 98.3431C269.462 97.9526 269.462 97.3195 269.071 96.9289C268.681 96.5384 268.047 96.5384 267.657 96.9289L261.293 103.293ZM276 103H262V105H276V103Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" stroke="white"/>
+<path d="M261.293 51.2929C260.902 51.6834 260.902 52.3166 261.293 52.7071L267.657 59.0711C268.047 59.4616 268.681 59.4616 269.071 59.0711C269.462 58.6805 269.462 58.0474 269.071 57.6569L263.414 52L269.071 46.3431C269.462 45.9526 269.462 45.3195 269.071 44.9289C268.681 44.5384 268.047 44.5384 267.657 44.9289L261.293 51.2929ZM276 51H262V53H276V51Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3022">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del04.svg b/public/static/images/canvas/additional_del04.svg
new file mode 100644
index 00000000..b5dc6431
--- /dev/null
+++ b/public/static/images/canvas/additional_del04.svg
@@ -0,0 +1,94 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2449)">
+<mask id="mask0_4200_2449" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2449)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2449" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2449)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2449" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2449)"/>
+<mask id="path-45-inside-3_4200_2449" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2449)"/>
+<mask id="path-47-inside-4_4200_2449" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2449)"/>
+<mask id="path-49-inside-5_4200_2449" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2449)"/>
+<mask id="path-51-inside-6_4200_2449" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2449)"/>
+<mask id="path-53-inside-7_4200_2449" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2449)"/>
+<mask id="path-55-inside-8_4200_2449" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2449)"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2449">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/main/login_email.svg b/public/static/images/main/login_email.svg
new file mode 100644
index 00000000..1ea1a274
--- /dev/null
+++ b/public/static/images/main/login_email.svg
@@ -0,0 +1,10 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_4212_2156)">
+<path id="Vector" d="M1.125 0C0.503906 0 0 0.503906 0 1.125C0 1.47891 0.166406 1.81172 0.45 2.025L5.55 5.85C5.81719 6.04922 6.18281 6.04922 6.45 5.85L11.55 2.025C11.8336 1.81172 12 1.47891 12 1.125C12 0.503906 11.4961 0 10.875 0H1.125ZM0 2.625V7.5C0 8.32734 0.672656 9 1.5 9H10.5C11.3273 9 12 8.32734 12 7.5V2.625L6.9 6.45C6.36562 6.85078 5.63438 6.85078 5.1 6.45L0 2.625Z" fill="#A8B6C7"/>
+</g>
+<defs>
+<clipPath id="clip0_4212_2156">
+<rect width="12" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/sub/address_search.svg b/public/static/images/sub/address_search.svg
new file mode 100644
index 00000000..4c0e2d1e
--- /dev/null
+++ b/public/static/images/sub/address_search.svg
@@ -0,0 +1,11 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4220_3331)">
+<path d="M17.8789 17.9736L19.8789 19.9736" stroke="#364864" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M9.98926 18.4036C14.6837 18.4036 18.4893 14.5986 18.4893 9.90494C18.4893 5.21124 14.6837 1.40625 9.98926 1.40625C5.29484 1.40625 1.48926 5.21124 1.48926 9.90494C1.48926 14.5986 5.29484 18.4036 9.98926 18.4036Z" stroke="#364864" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_4220_3331">
+<rect width="21" height="21" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/sub/information_help.svg b/public/static/images/sub/information_help.svg
new file mode 100644
index 00000000..9eb16941
--- /dev/null
+++ b/public/static/images/sub/information_help.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9598 10.4707C21.0134 11.3009 21.0134 12.1606 20.9598 12.9908C20.6856 17.2332 17.3536 20.6124 13.1706 20.8905C11.7435 20.9853 10.2536 20.9851 8.8294 20.8905C8.33896 20.8579 7.8044 20.7408 7.34401 20.5512C6.83177 20.3402 6.5756 20.2347 6.44544 20.2507C6.31527 20.2668 6.1264 20.406 5.74868 20.6846C5.08268 21.1757 4.24367 21.5284 2.99943 21.4981C2.37026 21.4828 2.05568 21.4751 1.91484 21.235C1.77401 20.9949 1.94941 20.6625 2.30021 19.9978C2.78674 19.0758 3.09501 18.0202 2.62791 17.1745C1.82343 15.9665 1.1401 14.5359 1.04024 12.9908C0.986587 12.1606 0.986587 11.3009 1.04024 10.4707C1.31441 6.22831 4.64639 2.84907 8.8294 2.57101C10.0318 2.49108 10.2812 2.4785 11.5 2.53362" stroke="#45576F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9996 5C20.9996 6.933 19.4326 8.5 17.4996 8.5C15.5666 8.5 13.9996 6.933 13.9996 5C13.9996 3.067 15.5666 1.5 17.4996 1.5C19.4326 1.5 20.9996 3.067 20.9996 5Z" stroke="#45576F" stroke-width="1.5"/>
+</svg>
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 7e087a87..271ebc20 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -388,9 +388,10 @@
     canvas{
         position: absolute;
         top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 1000px;
     }
 }
 
@@ -595,17 +596,27 @@
     .important{
         color: #f00;
     }
-    .sub-table-footer{
+    .sub-center-footer{
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
     }
+    .sub-right-footer{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
     .pagination-wrap{
         margin-top: 24px;
     }
 }
 
+.infomation-wrap{
+    margin-bottom: 30px;
+}
+
 .infomation-box-wrap{
     display: flex;
     align-items: center;
@@ -850,3 +861,44 @@
     }
 }
 
+// 물건상세
+.information-help-wrap{
+    display: flex;
+    padding: 24px;
+    background-color: #F4F4F4;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    .information-help-tit-wrap{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-right: 40px;
+        border-right: 1px solid #E0E0E3;
+        .help-tit-icon{
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
+            background-size: 20px 20px;
+        }
+        .help-tit{
+            font-size: 13px;
+            font-weight: 600;
+            color: #45576F;
+        }
+    }
+    .information-help-guide{
+        padding-left: 40px;
+        span{
+            display: block;
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 7px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index a673236a..4cf9d3b2 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -36,6 +36,9 @@
             &:nth-child(2n){
                 background-color: #F7F9FA;
             }
+            &.important_row{
+                background-color: #e7e7e7;
+            }
         }
         .ag-cell{
             font-size: 13px;
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 334a0485..37170a8b 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -394,6 +394,9 @@
                     font-weight: 600;
                     margin-bottom: 5px;
                 }
+                &.pw-reset{
+                    font-size: 13px;
+                }
             }
             .login-input-wrap{
                 margin-top: 30px;
@@ -412,8 +415,10 @@
                         background-color: transparent;
                         font-size: 13px;
                         font-weight: 400;
-                        color: #D1D7E0;
+                        color: #6c819c;
                         &::placeholder{
+                            font-size: 13px;
+                            font-weight: 400;
                             color: #D1D7E0;
                         }
                     }
@@ -442,6 +447,17 @@
                             background-size: 17px 17px;
                         }
                     }
+                    &.email{
+                        &::before{
+                            background: url(../../public/static/images/main/login_email.svg)no-repeat center;
+                            width: 12px;
+                            height: 9px;
+                        }
+                        .id-delete{
+                            background-image: url(../../public/static/images/main/id_delete.svg);
+                            background-size: 17px 17px;
+                        }
+                    }
                     &.password{
                         margin-bottom: 20px;
                         &::before{
@@ -456,27 +472,35 @@
                         }
                     }
                 }
+                .login-btn{
+                    display: block;
+                    width: 100%;
+                    height: 45px;
+                    background-color: #5C6773;
+                    color: #fff;
+                    font-size: 15px;
+                    font-weight: 600;
+                    border-radius: 4px;
+                    transition: background .15s ease-in-out;
+                    &:hover{
+                        background-color: #717e8d;
+                    }
+                    &.light{
+                        background-color: #fff;
+                        border: 1px solid #5C6773;
+                        color: #5C6773;
+                    }
+                }
                 .login-btn-box{
                     margin-bottom: 20px;
-                    .login-btn{
-                        display: block;
-                        width: 100%;
-                        height: 45px;
-                        background-color: #5C6773;
-                        color: #fff;
-                        font-size: 15px;
-                        font-weight: 600;
-                        border-radius: 4px;
-                        transition: background .15s ease-in-out;
-                        &:hover{
-                            background-color: #717e8d;
-                        }
-                    }
+                }
+                .pwreset-btn-box{
+                    display: flex;
                 }
                 .reset-password{
                     width: 100%;
                     text-align: center;
-                    a{ 
+                    button{ 
                         position: relative;
                         font-size: 13px;
                         color: #364864;
@@ -554,4 +578,75 @@
         top: -2px;
         left: 1px;
     }
+}
+
+// 회원가입
+.center-page-wrap{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    min-height: 100vh;
+    background-color: #F4F4F7;
+    overflow-x: hidden;
+    .center-page-inner{
+        width: 100%;
+        max-width: 1720px;
+        margin: 0 auto;
+        .center-page-tit{
+            font-size: 18px;
+            font-weight: 600;
+            color: #101010;
+            margin-bottom: 24px;
+        }
+        .sub-table-box{
+            &.signup{
+                margin-bottom: 20px;
+            }
+        }
+        .sign-up-btn-wrap{
+            display: flex;
+            justify-content: flex-end;
+        }
+        &.complete{
+            max-width: 1000px;
+        }
+    }
+    
+}
+
+// 회원가입 완료
+.complete-box-wrap{
+    padding: 72px 80px;
+    .complete-tit{
+        font-size: 18px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 17px;
+    }
+    .complete-txt{
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        margin-bottom: 27px;
+    }
+    .complete-email-wrap{
+        padding: 36px 30px;
+        border-radius: 2px;
+        background: #F4F4F7;
+        margin-bottom: 20px;
+        .email-info{
+            font-size: 13px;
+            font-weight: 400;
+            color: #000;
+            span{
+                color: #204AF4;
+                font-weight: 500;
+            }
+        }
+    }
+    .complete-btn{
+        display: flex;
+        justify-content: flex-end;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index b7bb20ec..d70732b8 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1673,6 +1673,7 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
+    transition: all .15s ease-in-out;
 
     &:first-child {
       border-left: 1px solid #505050;
@@ -1824,4 +1825,144 @@ $alert-color: #101010;
       }
     }
   }
+}
+
+// 회로 및 가대설정
+.circuit-check-inner {
+  padding: 5px 0;
+}
+
+.x-scroll-table {
+  overflow-x: auto;
+  padding-bottom: 5px;
+
+  .roof-module-table {
+    min-width: 1200px;
+  }
+
+  &::-webkit-scrollbar {
+    height: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-right-wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.circuit-data-form {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 60px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.20);
+}
+
+.circuit-table-tit {
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 11px 10px;
+  background-color: #474747;
+  border: 1px solid #505050;
+  border-bottom: none;
+}
+
+.circuit-overflow {
+  max-height: 560px;
+  overflow-y: auto;
+  margin-bottom: 15px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #D9D9D9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.circuit-table-flx-wrap {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+
+  .circuit-table-flx-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .bottom-wrap {
+      margin-top: auto;
+    }
+
+    .roof-module-table {
+      table {
+        table-layout: fixed;
+      }
+    }
+  }
+}
+
+.circuit-count-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+// 모듈부가기능
+.additional-radio-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 15px 0;
+  margin-bottom: 24px;
+}
+
+.additional-wrap {
+  padding: 24px 0;
+  border-top: 1px solid #424242;
+}
+
+.additional-color-wrap {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  gap: 15px;
+
+  .additional-color-box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .additional-color {
+      display: block;
+      width: 16px;
+      height: 16px;
+
+      &.pink {
+        border: 2px solid #EA10AC;
+        background-color: #16417D;
+      }
+
+      &.white {
+        border: 2px solid #FFF;
+        background-color: #001027;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 7804b800..70c05a9e 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -215,6 +215,53 @@ button{
             font-weight: 500;
         }
     }
+    &.roof{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #484848;
+        color: #fff;
+        &.blue{
+            background-color: #414E6C;
+            border: 1px solid #414E6C;
+            &:hover{
+                background-color: #414E6C;
+                border: 1px solid #414E6C;
+            }
+        }
+        &.white{
+            background-color: #fff;
+            border: 1px solid #fff;
+            color: #101010;
+            &:hover{
+                background-color: #fff;
+                border: 1px solid #fff;
+                color: #101010;
+            }
+        }
+        &:hover{
+            font-weight: 400;
+            background-color: transparent;
+            border: 1px solid #484848;
+            color: #fff;
+        }
+    }
+    &.self{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #676767;
+        color: #AAAAAA;
+        &:hover{
+            background-color: #272727;
+            border-color: #676767;
+            font-weight: 400;
+        }
+    }
     &:hover,
     &.act{
         background-color: #1083E3;
@@ -242,7 +289,7 @@ button{
 .btn-origin{
     display: inline-block;
     height: 30px;
-    padding: 0 14px;
+    padding: 0 10px;
     border-radius: 2px;
     background-color: #101010;
     color: #fff;
@@ -252,7 +299,7 @@ button{
     &.navy{
         background-color: #304961;
         &:hover{
-            background-color: #1083E3;
+            background-color: #233546;
         }
     }
     &.grey{
@@ -653,6 +700,7 @@ input[type=text]{
 // check-box
 .d-check-box{
     label{
+        &.red{color: #FFCACA;}
         &::before{
             cursor: pointer;
             content: "";
@@ -698,6 +746,20 @@ input[type=text]{
         input[type=checkbox]:checked + label::after{
             border-color: #fff;
         }
+        &.no-text{
+            label{
+                padding-left: 0;
+            }
+        }
+    }
+    &.sel{
+        input[type=checkbox]:checked + label{
+            color: #D7C863;
+        }
+        input[type=checkbox]:checked + label::before,
+        input[type=checkbox]:checked + label::after{
+            border-color: #D7C863;
+        }
     }
 }
 
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
new file mode 100644
index 00000000..34d0e9ce
--- /dev/null
+++ b/src/styles/_submodal.scss
@@ -0,0 +1,199 @@
+.modal-popup{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background:rgba(0,0,0,.75);
+    z-index:110000;
+    .modal-dialog {
+        position: relative;
+        display: flex;
+        align-items: center;
+        min-height: calc(100% - (1.5rem * 2));
+        width: 680px;
+        z-index:200000;
+        margin: 1.5rem auto;
+        pointer-events: none;
+        &.middle{
+            width: 800px;
+        }
+        &.big{
+            width: 1000px;
+        }
+        .modal-content{
+            flex:1;
+            position: relative;
+            background-clip: padding-box;
+            background-color: transparent;
+            outline: 0 none;
+            pointer-events: auto;
+            border-radius: 4px;
+            .modal-header{
+                display: flex;
+                align-items: center;
+                padding: 10px 24px;
+                background-color: #7992ba;
+                border-radius: 4px 4px 0px 0px;
+                // overflow: hidden;
+                h1.title{
+                    font-size: 13px;
+                    color: $pop-color;
+                    font-weight: 700;
+                }
+                .modal-close{
+                    margin-left: auto;
+                    color: transparent;
+                    font-size: 0;
+                    width: 10px;
+                    height: 10px;
+                    background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+                }
+            }
+            .modal-body{
+                padding: 30px;
+                background-color: #fff;
+                border-radius: 0px 0px 4px 4px;
+                .modal-body-inner{
+                    margin-bottom: 20px;
+                    &.border{
+                        padding-bottom: 20px;
+                        border-bottom: 1px solid #ECF0F4;
+                    }
+                }
+                .footer-btn-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                }
+            }
+        }
+    }
+}
+
+// modal-contents
+
+//  비밀번호 변경
+.change-password-guide{
+
+    span{
+        display: block;
+        margin-bottom: 5px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+}
+
+.change-password-box{
+    padding: 30px;
+    border-radius: 4px;
+    background: #F4F4F7;
+    margin-bottom: 20px;
+    .change-password-tit{
+        .tit-b{
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .tit-s{
+            font-size: 12px;
+            font-weight: 400;
+            color: #898989;
+        }
+    }
+    .change-password-input{
+        width: 100%;
+        .change-password{
+            width: 100%;
+            height: 45px;
+            border-radius: 4px;
+            border: 1px solid #E9E9E9;
+            background-color: #fff;
+            padding: 0 10px;
+            font-size: 12px;
+            color: #364864;
+            font-family: 'Noto Sans JP', sans-serif;
+            &::placeholder{
+                font-size: 12px;
+            }
+        }
+    }
+    .table-item-th{
+        width: 145px;
+    }
+}
+.form-table{
+    display: table;
+    table-layout: auto;
+    width: 100%;
+    .table-item{
+        display: table-row;
+        .table-item-th,
+        .table-item-td{
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 10px;
+        }
+        &:last-child{
+            .table-item-th,
+            .table-item-td{
+                padding-bottom: 0;
+            }
+        }
+        .table-item-td{
+            padding-left: 10px;
+        }
+    }
+}
+
+// 주소찾기 팝업
+.address-input-wrap{
+    position: relative;
+    height: 45px;
+    padding: 0 40px 0 15px;
+    border-radius: 4px;
+    border: 1px solid #E9E9E9;
+    background: #FFF;
+    margin-bottom: 20px;
+    input{
+        width: 100%;
+        height: 100%;
+        font-size: 13px;
+        font-weight: 400;
+        font-family: "Noto Sans JP" sans-serif;
+        color: #868686;
+        &::placeholder{
+            color: #AEAEAE;
+            font-size: 13px;
+            font-weight: 400;
+        }
+    }
+    .search-btn{
+        position: absolute;
+        top: 0;
+        right: 15px;
+        width: 21px;
+        height: 100%;
+        background: url(../../public/static/images/sub/address_search.svg)no-repeat center;
+        background-size: 21px 21px;
+    }
+}
+
+// 설계의뢰 불러오기
+.design-request-table{
+    margin-bottom: 20px;
+}
+.design-request-grid{
+    .design-request-grid-tit{
+        font-size: 13px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 15px;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index a87bfc5b..5aa068d0 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -14,6 +14,10 @@ table{
     }
 }
 
+.flx-box{
+    @include flexbox;
+}
+
 .common-table{
     table{
         table-layout: fixed;
@@ -85,6 +89,7 @@ table{
                         color: #697C8F;
                         font-weight: normal;
                         margin-left: 15px;
+                        margin-bottom: 0;
                     }
                     span{
                         font-size: 13px;
@@ -97,11 +102,10 @@ table{
                 }
             }
         }
-        .flx-box{
-            @include flexbox;
-        }
+        
     }
     .tooltips{
+        position: relative;
         display: block;
         width: 14px;
         height: 14px;
@@ -109,6 +113,10 @@ table{
         background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
         background-size: cover;
         cursor: pointer;
+        span{
+            position: absolute;
+            white-space: nowrap;
+        }
     }
 }
 
@@ -182,8 +190,9 @@ table{
         thead{
             th{
                 height: 40px;
-                padding: 0 10px;
+                padding: 0px 10px;
                 font-size: 12px;
+                line-height: 1.1;
                 color: #fff;
                 font-weight: 500;
                 border: 1px solid #505050;
@@ -191,14 +200,82 @@ table{
                 background-color: rgba(255, 255, 255, 0.05);
                 text-align: center;
                 word-break: keep-all;
+                .d-check-box{
+                    opacity: 0.5;
+                }
             }
         }
         tbody{
+            tr{
+                cursor: pointer;
+                &.on{
+                    background-color: #272727;
+                }
+            }
             td{
+                height: 40px;
+                vertical-align: middle;
                 font-size: 12px;
                 color: #fff;
                 font-weight: 400;
                 border: 1px solid #505050;
+                padding: 0 10px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                .warning{
+                    color: PCSオプションマスター;
+                }
+                .color-wrap{
+                    display: flex;
+                    align-items: center;
+                    .color-box{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                    .name{
+                        width: 0;
+                        flex: 1;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+            }
+        }
+    }
+    &.overflow-y{
+        table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                border-collapse: collapse;
+            }
+            tbody{
+                display: block;
+                max-height: 81px;
+                overflow-y: auto;
+                tr{
+                    display: table;
+                    table-layout: fixed;
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-top: -1px;
+                }
+                &::-webkit-scrollbar {
+                    width: 2px;
+                    background-color: rgba(255, 255, 255, 0.05);
+                }
+                &::-webkit-scrollbar-thumb {
+                    background-color: #C1CCD7;
+                }
+                &::-webkit-scrollbar-track {
+                    background-color: rgba(255, 255, 255, 0.05);
+                }
             }
         }
     }
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 38e7ff83..613c0644 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -1,4 +1,5 @@
 @import '_contents.scss';
 @import '_modal.scss';
+@import '_submodal.scss';
 @import '_table.scss';
 @import '_canvasside.scss';
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b3b49ed9..1841ebb9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,2 +1 @@
-@import '_main.scss';
-@import '_contents';
\ No newline at end of file
+@import '_main.scss';
\ No newline at end of file

From f84d3a912f6ec15736ee6416980ad1a694fd3019 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Fri, 11 Oct 2024 15:19:31 +0900
Subject: [PATCH 21/27] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=B0=BD=20css=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/surface/useSurfaceShapeBatch.js | 2 --
 src/styles/_modal.scss                    | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index e612a463..b52781b6 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -58,8 +58,6 @@ export function useSurfaceShapeBatch() {
     if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
       setShowPlacementSurfaceSettingModal(false)
       canvas?.on('mouse:move', (e) => {
-        console.log('asdfasdfasdfasdfasdfsdfasdfsdf')
-
         if (!isDrawing) {
           return
         }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9343ae23..579e1334 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -38,8 +38,6 @@ $alert-color: #101010;
 
 .modal-pop-wrap {
   position: fixed;
-  top: 200px;
-  right: 100px;
   width: 100%;
   height: -webkit-fit-content;
   height: -moz-fit-content;

From 1bbba2817f0b616f7aed4f9591ed59d59b26e8aa Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 15:40:24 +0900
Subject: [PATCH 22/27] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/canvas/additional-edit01.svg       |  115 +
 .../images/canvas/additional-edit02.svg       |    0
 .../images/canvas/additional_bundle-del01.svg |    0
 .../images/canvas/additional_bundle-del02.svg |  106 +
 .../images/canvas/additional_bundle-del03.svg |    0
 .../images/canvas/additional_bundle-del04.svg |   97 +
 .../canvas/additional_bundle-edit01.svg       |    0
 .../canvas/additional_bundle-edit02.svg       |    0
 .../static/images/canvas/additional_del01.svg |  103 +
 .../static/images/canvas/additional_del02.svg |    0
 .../static/images/canvas/additional_del03.svg |    0
 .../static/images/canvas/additional_del04.svg |    0
 src/styles/_canvasside.scss                   |  196 +-
 src/styles/_contents.scss                     | 1874 +++++++++--------
 src/styles/_grid-detail.scss                  |    3 +
 src/styles/_main.scss                         | 1277 ++++++-----
 src/styles/_modal.scss                        |  401 +++-
 src/styles/_reset.scss                        | 1504 ++++++-------
 src/styles/_submodal.scss                     |  343 +--
 src/styles/_table.scss                        |  547 ++---
 src/styles/contents.scss                      |    2 +-
 src/styles/style.scss                         |    3 +-
 22 files changed, 3623 insertions(+), 2948 deletions(-)
 create mode 100644 public/static/images/canvas/additional-edit01.svg
 create mode 100644 public/static/images/canvas/additional-edit02.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del01.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del02.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del03.svg
 create mode 100644 public/static/images/canvas/additional_bundle-del04.svg
 create mode 100644 public/static/images/canvas/additional_bundle-edit01.svg
 create mode 100644 public/static/images/canvas/additional_bundle-edit02.svg
 create mode 100644 public/static/images/canvas/additional_del01.svg
 create mode 100644 public/static/images/canvas/additional_del02.svg
 create mode 100644 public/static/images/canvas/additional_del03.svg
 create mode 100644 public/static/images/canvas/additional_del04.svg

diff --git a/public/static/images/canvas/additional-edit01.svg b/public/static/images/canvas/additional-edit01.svg
new file mode 100644
index 00000000..2e8ce52c
--- /dev/null
+++ b/public/static/images/canvas/additional-edit01.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3427)">
+<mask id="mask0_4200_3427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3427)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3427" fill="white">
+<path d="M31 26H102.25V78H31V26Z"/>
+</mask>
+<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3427)"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" fill="#001027"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
+<rect x="176" y="28.5" width="66.25" height="47" fill="#16417D"/>
+<rect x="176" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-44-inside-2_4200_3427" fill="white">
+<path d="M244.75 26H316V78H244.75V26Z"/>
+</mask>
+<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3427)"/>
+<mask id="path-46-inside-3_4200_3427" fill="white">
+<path d="M31 78H102.25V130H31V78Z"/>
+</mask>
+<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3427)"/>
+<mask id="path-48-inside-4_4200_3427" fill="white">
+<path d="M102.25 78H173.5V130H102.25V78Z"/>
+</mask>
+<path d="M102.25 78H173.5V130H102.25V78Z" fill="#001027"/>
+<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="white" mask="url(#path-48-inside-4_4200_3427)"/>
+<mask id="path-50-inside-5_4200_3427" fill="white">
+<path d="M173.5 78H244.75V130H173.5V78Z"/>
+</mask>
+<path d="M173.5 78H244.75V130H173.5V78Z" fill="#16417D"/>
+<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="#EA10AC" mask="url(#path-50-inside-5_4200_3427)"/>
+<mask id="path-52-inside-6_4200_3427" fill="white">
+<path d="M244.75 78H316V130H244.75V78Z"/>
+</mask>
+<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3427)"/>
+<mask id="path-54-inside-7_4200_3427" fill="white">
+<path d="M31 130H102.25V182H31V130Z"/>
+</mask>
+<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3427)"/>
+<mask id="path-56-inside-8_4200_3427" fill="white">
+<path d="M102.25 130H173.5V182H102.25V130Z"/>
+</mask>
+<path d="M102.25 130H173.5V182H102.25V130Z" fill="#001027"/>
+<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="white" mask="url(#path-56-inside-8_4200_3427)"/>
+<mask id="path-58-inside-9_4200_3427" fill="white">
+<path d="M173.5 130H244.75V182H173.5V130Z"/>
+</mask>
+<path d="M173.5 130H244.75V182H173.5V130Z" fill="#16417D"/>
+<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="#EA10AC" mask="url(#path-58-inside-9_4200_3427)"/>
+<mask id="path-60-inside-10_4200_3427" fill="white">
+<path d="M244.75 130H316V182H244.75V130Z"/>
+</mask>
+<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3427)"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" stroke="white"/>
+<path d="M59.2929 155.293C58.9024 155.683 58.9024 156.317 59.2929 156.707L65.6569 163.071C66.0474 163.462 66.6805 163.462 67.0711 163.071C67.4616 162.681 67.4616 162.047 67.0711 161.657L61.4142 156L67.0711 150.343C67.4616 149.953 67.4616 149.319 67.0711 148.929C66.6805 148.538 66.0474 148.538 65.6569 148.929L59.2929 155.293ZM74 155H60V157H74V155Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" stroke="white"/>
+<path d="M59.2929 103.293C58.9024 103.683 58.9024 104.317 59.2929 104.707L65.6569 111.071C66.0474 111.462 66.6805 111.462 67.0711 111.071C67.4616 110.681 67.4616 110.047 67.0711 109.657L61.4142 104L67.0711 98.3431C67.4616 97.9526 67.4616 97.3195 67.0711 96.9289C66.6805 96.5384 66.0474 96.5384 65.6569 96.9289L59.2929 103.293ZM74 103H60V105H74V103Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" stroke="white"/>
+<path d="M59.2929 51.2929C58.9024 51.6834 58.9024 52.3166 59.2929 52.7071L65.6569 59.0711C66.0474 59.4616 66.6805 59.4616 67.0711 59.0711C67.4616 58.6805 67.4616 58.0474 67.0711 57.6569L61.4142 52L67.0711 46.3431C67.4616 45.9526 67.4616 45.3195 67.0711 44.9289C66.6805 44.5384 66.0474 44.5384 65.6569 44.9289L59.2929 51.2929ZM74 51H60V53H74V51Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3427">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional-edit02.svg b/public/static/images/canvas/additional-edit02.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_bundle-del01.svg b/public/static/images/canvas/additional_bundle-del01.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_bundle-del02.svg b/public/static/images/canvas/additional_bundle-del02.svg
new file mode 100644
index 00000000..797adf82
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del02.svg
@@ -0,0 +1,106 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4066)">
+<mask id="mask0_4200_4066" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4066)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_4066" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4066)"/>
+<mask id="path-42-inside-2_4200_4066" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4066)"/>
+<mask id="path-44-inside-3_4200_4066" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4066)"/>
+<mask id="path-46-inside-4_4200_4066" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4066)"/>
+<mask id="path-48-inside-5_4200_4066" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4066)"/>
+<mask id="path-50-inside-6_4200_4066" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4066)"/>
+<mask id="path-52-inside-7_4200_4066" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4066)"/>
+<mask id="path-54-inside-8_4200_4066" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4066)"/>
+<mask id="path-56-inside-9_4200_4066" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4066)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
+<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
+<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
+<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4066">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del03.svg b/public/static/images/canvas/additional_bundle-del03.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_bundle-del04.svg b/public/static/images/canvas/additional_bundle-del04.svg
new file mode 100644
index 00000000..4f28a719
--- /dev/null
+++ b/public/static/images/canvas/additional_bundle-del04.svg
@@ -0,0 +1,97 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3677)">
+<mask id="mask0_4200_3677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3677)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3677" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3677)"/>
+<mask id="path-42-inside-2_4200_3677" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3677)"/>
+<mask id="path-44-inside-3_4200_3677" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3677)"/>
+<mask id="path-46-inside-4_4200_3677" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3677)"/>
+<mask id="path-48-inside-5_4200_3677" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3677)"/>
+<mask id="path-50-inside-6_4200_3677" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3677)"/>
+<mask id="path-52-inside-7_4200_3677" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3677)"/>
+<mask id="path-54-inside-8_4200_3677" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3677)"/>
+<mask id="path-56-inside-9_4200_3677" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3677)"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3677">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-edit01.svg b/public/static/images/canvas/additional_bundle-edit01.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_bundle-edit02.svg b/public/static/images/canvas/additional_bundle-edit02.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_del01.svg b/public/static/images/canvas/additional_del01.svg
new file mode 100644
index 00000000..17e8cea0
--- /dev/null
+++ b/public/static/images/canvas/additional_del01.svg
@@ -0,0 +1,103 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2642)">
+<mask id="mask0_4200_2642" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2642)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2642" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2642)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2642" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2642)"/>
+<mask id="path-45-inside-3_4200_2642" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2642)"/>
+<mask id="path-47-inside-4_4200_2642" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2642)"/>
+<mask id="path-49-inside-5_4200_2642" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2642)"/>
+<mask id="path-51-inside-6_4200_2642" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2642)"/>
+<mask id="path-53-inside-7_4200_2642" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2642)"/>
+<mask id="path-55-inside-8_4200_2642" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2642)"/>
+<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 52.7071C260.902 52.3166 260.902 51.6834 261.293 51.2929L267.657 44.9289C268.047 44.5384 268.681 44.5384 269.071 44.9289C269.462 45.3195 269.462 45.9526 269.071 46.3431L263.414 52L269.071 57.6569C269.462 58.0474 269.462 58.6805 269.071 59.0711C268.681 59.4616 268.047 59.4616 267.657 59.0711L261.293 52.7071ZM276 53H262V51H276V53Z" fill="white"/>
+<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 104.707C260.902 104.317 260.902 103.683 261.293 103.293L267.657 96.9289C268.047 96.5384 268.681 96.5384 269.071 96.9289C269.462 97.3195 269.462 97.9526 269.071 98.3431L263.414 104L269.071 109.657C269.462 110.047 269.462 110.681 269.071 111.071C268.681 111.462 268.047 111.462 267.657 111.071L261.293 104.707ZM276 105H262V103H276V105Z" fill="white"/>
+<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" fill="#16417D"/>
+<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path d="M261.293 156.707C260.902 156.317 260.902 155.683 261.293 155.293L267.657 148.929C268.047 148.538 268.681 148.538 269.071 148.929C269.462 149.319 269.462 149.953 269.071 150.343L263.414 156L269.071 161.657C269.462 162.047 269.462 162.681 269.071 163.071C268.681 163.462 268.047 163.462 267.657 163.071L261.293 156.707ZM276 157H262V155H276V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2642">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del02.svg b/public/static/images/canvas/additional_del02.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_del03.svg b/public/static/images/canvas/additional_del03.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/public/static/images/canvas/additional_del04.svg b/public/static/images/canvas/additional_del04.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss
index 8ef0c762..66bba83d 100644
--- a/src/styles/_canvasside.scss
+++ b/src/styles/_canvasside.scss
@@ -1,106 +1,106 @@
 // 패널 배치 집계
-.penal-wrap {
-  position: fixed;
-  top: 200px;
-  left: 50px;
-  z-index: 999999;
-  width: 237px;
-  height: 40px;
-  line-height: 40px;
-  background-color: #fff;
-  border: 1px solid #dfdfdf;
-  padding: 0 34px 0 10px;
-  border-radius: 2px;
-  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    transform: translateY(-50%);
-    width: 10px;
-    height: 6px;
-    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
-    background-size: cover;
-  }
-  h2 {
-    font-size: 12px;
-    font-weight: 500;
-    color: #3d3d3d;
-  }
-  .penal-table-wrap {
-    display: none;
-    position: absolute;
-    top: 100%;
-    left: -1px;
-    min-width: calc(100% + 2px);
-    background-color: #3d3d3d;
-    border: 1px solid #3d3d3d;
-    padding: 20px;
-    .penal-table {
-      table-layout: fixed;
-      border-collapse: collapse;
-      thead {
-        th {
-          text-align: center;
-          background-color: rgba(255, 255, 255, 0.05);
-          font-size: 12px;
-          font-weight: 500;
-          color: #fff;
-          border: 1px solid #505050;
+.penal-wrap{
+    position: fixed;
+    top: 200px;
+    left: 50px;
+    z-index: 999999;
+    width: 237px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #fff;
+    border: 1px solid #DFDFDF;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    &::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 12px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
+        background-size: cover;
+    }
+    h2{
+        font-size: 12px;
+        font-weight: 500;
+        color: #3D3D3D;
+    }
+    .penal-table-wrap{
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        min-width: calc(100% + 2px);
+        background-color: #3D3D3D;
+        border: 1px solid #3D3D3D;
+        padding: 20px;
+        .penal-table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                th{
+                    text-align: center;
+                    background-color:rgba(255, 255, 255, 0.05);
+                    font-size: 12px;
+                    font-weight: 500;
+                    color: #fff;
+                    border: 1px solid #505050;
+                }
+            }
+            tbody{
+                td{
+                    font-size: 12px;
+                    color: #fff;
+                    font-weight: 400;
+                    text-align: center;
+                    padding: 0 10px;
+                    border: 1px solid #505050;
+                }
+            }
         }
-      }
-      tbody {
-        td {
-          font-size: 12px;
-          color: #fff;
-          font-weight: 400;
-          text-align: center;
-          padding: 0 10px;
-          border: 1px solid #505050;
+    }
+    &.act{
+        border: 1px solid #3D3D3D;
+        background-color: #3D3D3D;
+        h2{
+            color: #fff;
+        }
+        &::before{
+            background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
+        }
+        .penal-table-wrap{
+            display: block;
         }
-      }
     }
-  }
-  &.act {
-    border: 1px solid #3d3d3d;
-    background-color: #3d3d3d;
-    h2 {
-      color: #fff;
-    }
-    &::before {
-      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
-    }
-    .penal-table-wrap {
-      display: block;
-    }
-  }
 }
 
 // context menu
-.context-menu-wrap {
-  min-width: 238px;
-  border-radius: 4px;
-  border: 1px solid #e9e9e9;
-  background: #fff;
-  box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
-  ul {
-    padding: 17px 0;
-    border-bottom: 1px solid #e9e9e9;
-    &:last-child {
-      border: none;
+.context-menu-wrap{
+    min-width: 238px;
+    border-radius: 4px;
+    border: 1px solid #E9E9E9;
+    background: #FFF;
+    box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
+    ul{
+        padding: 17px 0;
+        border-bottom: 1px solid #E9E9E9;
+        &:last-child{
+            border: none;
+        }
+        li{
+            padding: 4px 30px;
+            cursor: pointer;
+            font-size: 12px;
+            font-weight: 400;
+            color: #101010;
+            &:hover{
+                color: #fff;
+                background-color: #0D99FF;
+            }
+        }
     }
-    li {
-      padding: 4px 30px;
-      cursor: pointer;
-      font-size: 12px;
-      font-weight: 400;
-      color: #101010;
-      &:hover {
-        color: #fff;
-        background-color: #0d99ff;
-      }
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 275a917f..dc02fc85 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1,953 +1,1093 @@
 // CanvasPage
-.canvas-wrap {
-  height: calc(100vh - 47px);
-  display: flex;
-  flex-direction: column;
-  .canvas-content {
-    flex: 1 1 auto;
-    .canvas-layout {
-      height: 100%;
+.canvas-wrap{
+    height: calc(100vh - 47px);
+    display: flex;
+    flex-direction: column;
+    .canvas-content{
+        flex: 1 1 auto;
+        .canvas-layout{
+            height: 100%;
+        }
     }
-  }
-  &.sub-wrap {
-    overflow: hidden;
-    .canvas-content {
-      height: calc(100% - 47px);
+    &.sub-wrap{
+        overflow: hidden;
+        .canvas-content{
+            height: calc(100% - 47px);
+        }
     }
-  }
 }
 // CanvasMenu
-.canvas-menu-wrap {
-  position: relative;
-  display: block;
-  width: 100%;
-  padding-bottom: 0;
-  background-color: #383838;
-  transition: padding 0.17s ease-in-out;
-  .canvas-menu-inner {
+.canvas-menu-wrap{
     position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 40px 0 20px;
-    background-color: #2c2c2c;
-    z-index: 999;
-    .canvas-menu-list {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      .canvas-menu-item {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        button {
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          height: 100%;
-          color: #fff;
-          font-weight: 600;
-          padding: 15px 20px;
-          opacity: 0.55;
-          transition: all 0.17s ease-in-out;
-          .menu-icon {
-            display: block;
-            width: 16px;
-            height: 16px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            margin-right: 10px;
-            &.con00 {
-              background-image: url(/static/images/canvas/menu_icon00.svg);
-            }
-            &.con01 {
-              background-image: url(/static/images/canvas/menu_icon01.svg);
-            }
-            &.con02 {
-              background-image: url(/static/images/canvas/menu_icon02.svg);
-            }
-            &.con03 {
-              background-image: url(/static/images/canvas/menu_icon03.svg);
-            }
-            &.con04 {
-              background-image: url(/static/images/canvas/menu_icon04.svg);
-            }
-            &.con05 {
-              background-image: url(/static/images/canvas/menu_icon05.svg);
-            }
-            &.con06 {
-              background-image: url(/static/images/canvas/menu_icon06.svg);
-            }
-          }
-        }
-        &.active {
-          background-color: #383838;
-          button {
-            opacity: 1;
-          }
-        }
-      }
-    }
-    .canvas-side-btn-wrap {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-      .select-box {
-        width: 124px;
-        margin-right: 5px;
-        > div {
-          width: 100%;
-        }
-      }
-      .btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          display: block;
-          width: 30px;
-          height: 30px;
-          border-radius: 2px;
-          background-color: #3d3d3d;
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: 15px 15px;
-          transition: all 0.17s ease-in-out;
-          &.btn01 {
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-          }
-          &.btn02 {
-            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-          }
-          &.btn03 {
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-          }
-          &.btn04 {
-            background-image: url(../../public/static/images/canvas/side_icon04.svg);
-          }
-          &.btn05 {
-            background-image: url(../../public/static/images/canvas/side_icon05.svg);
-          }
-          &.btn06 {
-            background-image: url(../../public/static/images/canvas/side_icon06.svg);
-          }
-          &.btn07 {
-            background-image: url(../../public/static/images/canvas/side_icon07.svg);
-          }
-          &.btn08 {
-            background-image: url(../../public/static/images/canvas/side_icon08.svg);
-          }
-          &.btn09 {
-            background-image: url(../../public/static/images/canvas/side_icon09.svg);
-          }
-          &:hover {
-            background-color: #1083e3;
-          }
-          &.active {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .ico-btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          .ico {
-            display: block;
-            width: 15px;
-            height: 15px;
-            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);
-            }
-          }
-          .name {
-            font-size: 12px;
-            color: #fff;
-          }
-        }
-        &.form06 {
-          .name {
-            font-size: 13px;
-          }
-        }
-      }
-      .vertical-horizontal {
-        display: flex;
-        min-width: 170px;
-        height: 28px;
-        margin: 0 5px;
-        border-radius: 2px;
-        background: #373737;
-        line-height: 28px;
-        overflow: hidden;
-        span {
-          padding: 0 10px;
-          font-size: 13px;
-          color: #fff;
-        }
-        button {
-          margin-left: auto;
-          height: 100%;
-          background-color: #4b4b4b;
-          font-size: 13px;
-          font-weight: 400;
-          color: #fff;
-          padding: 0 7.5px;
-          transition: all 0.17s ease-in-out;
-        }
-        &.on {
-          button {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .size-control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        background-color: #3d3d3d;
-        border-radius: 2px;
-        width: 100px;
-        height: 30px;
-        margin: 0 5px;
-        span {
-          font-size: 13px;
-          color: #fff;
-        }
-        .control-btn {
-          display: block;
-          width: 12px;
-          height: 12px;
-          background-repeat: no-repeat;
-          background-size: cover;
-          background-position: center;
-          &.minus {
-            background-image: url(../../public/static/images/canvas/minus.svg);
-          }
-          &.plus {
-            background-image: url(../../public/static/images/canvas/plus.svg);
-          }
-        }
-      }
-    }
-  }
-  .canvas-depth2-wrap {
-    position: absolute;
-    top: -100%;
-    left: 0;
-    background-color: #383838;
+    display: block;
     width: 100%;
-    height: 50px;
-    transition: all 0.17s ease-in-out;
-    .canvas-depth2-inner {
-      display: flex;
-      align-items: center;
-      padding: 0 40px;
-      height: 100%;
-      .canvas-depth2-list {
+    padding-bottom: 0;
+    background-color: #383838;
+    transition: padding .17s ease-in-out;
+    .canvas-menu-inner{
+        position: relative;
         display: flex;
         align-items: center;
-        height: 100%;
-        .canvas-depth2-item {
-          display: flex;
-          align-items: center;
-          margin-right: 26px;
-          height: 100%;
-          button {
-            position: relative;
-            opacity: 0.55;
-            color: #fff;
-            font-size: 12px;
-            font-weight: normal;
+        padding: 0 40px 0 20px;
+        background-color: #2C2C2C;
+        z-index: 999;
+        .canvas-menu-list{
+            display: flex;
+            align-items: center;
             height: 100%;
-            padding-right: 12px;
-          }
-          &.active {
-            button {
-              opacity: 1;
-              font-weight: 600;
-              &:after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                width: 5px;
-                height: 8px;
-                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-              }
+            .canvas-menu-item{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                button{
+                    display: flex;
+                    align-items: center;
+                    font-size: 12px;
+                    height: 100%;
+                    color: #fff;
+                    font-weight: 600;
+                    padding: 15px 20px;
+                    opacity: 0.55;
+                    transition: all .17s ease-in-out;
+                    .menu-icon{
+                        display: block;
+                        width: 16px;
+                        height: 16px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: cover;
+                        margin-right: 10px;
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+                    }
+                }
+                &.active{
+                    background-color: #383838;
+                    button{
+                        opacity: 1;
+                    }
+                }
             }
-          }
         }
-      }
-      .canvas-depth2-btn-list {
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        height: 100%;
-        .depth2-btn-box {
-          display: flex;
-          align-items: center;
-          margin-right: 34px;
-          height: 100%;
-          transition: all 0.17s ease-in-out;
-          button {
-            position: relative;
-            font-size: 12px;
-            font-weight: 400;
+        .canvas-side-btn-wrap{
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            .select-box{
+                width: 124px;
+                margin-right: 5px;
+                > div{
+                    width: 100%;
+                }
+            }
+            .btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    display: block;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 2px;
+                    background-color: #3D3D3D;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 15px 15px;
+                    transition: all .17s ease-in-out;
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+                    &:hover{
+                        background-color: #1083E3;
+                    }
+                    &.active{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .ico-btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    .ico{
+                        display: block;
+                        width: 15px;
+                        height: 15px;
+                        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);}
+                    }
+                    .name{
+                        font-size: 12px;
+                        color: #fff;
+                    }
+                }
+                &.form06{
+                    .name{
+                        font-size: 13px;
+                    }
+                }
+            }
+            .vertical-horizontal{
+                display: flex;
+                min-width: 170px;
+                height: 28px;
+                margin: 0 5px;
+                border-radius: 2px;
+                background: #373737;
+                line-height: 28px;
+                overflow: hidden;
+                span{
+                    padding: 0 10px;
+                    font-size: 13px;
+                    color: #fff;
+                }
+                button{
+                    margin-left: auto;
+                    height: 100%;
+                    background-color: #4B4B4B;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #fff;
+                    padding: 0 7.5px;
+                    transition: all .17s ease-in-out;
+                }
+                &.on{
+                    button{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .size-control{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+                background-color: #3D3D3D;
+                border-radius: 2px;
+                width: 100px;
+                height: 30px;
+                margin: 0 5px;
+                span{
+                    font-size: 13px;
+                    color: #fff;
+                }
+                .control-btn{
+                    display: block;
+                    width: 12px;
+                    height: 12px;
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    background-position: center;
+                    &.minus{
+                        background-image: url(../../public/static/images/canvas/minus.svg);
+                    }
+                    &.plus{
+                        background-image: url(../../public/static/images/canvas/plus.svg);
+                    }
+                }
+            }
+        }
+    }
+    .canvas-depth2-wrap{
+        position: absolute;
+        top: -100%;
+        left: 0;
+        background-color: #383838;
+        width: 100%;
+        height: 50px;
+        transition: all .17s ease-in-out;
+        .canvas-depth2-inner{
+            display: flex;
+            align-items: center;
+            padding: 0 40px;
             height: 100%;
-            color: #fff;
-            padding-right: 12px;
-            &:after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              width: 5px;
-              height: 8px;
-              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+            .canvas-depth2-list{
+                display: flex;
+                align-items: center ;
+                height: 100%;
+                .canvas-depth2-item{
+                    display: flex; 
+                    align-items: center;
+                    margin-right: 26px;
+                    height: 100%;
+                    button{
+                        position: relative;
+                        opacity: 0.55;
+                        color: #fff;
+                        font-size: 12px;
+                        font-weight: normal;
+                        height: 100%;
+                        padding-right: 12px;
+                    }
+                    &.active{
+                        button{
+                            opacity: 1;
+                            font-weight: 600;
+                            &:after{
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                width: 5px;
+                                height: 8px;
+                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                            }
+                        }
+                    }
+                }
+            }
+            .canvas-depth2-btn-list{
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                height: 100%;
+                .depth2-btn-box{
+                    display: flex;
+                    align-items: center;
+                    margin-right: 34px;
+                    height: 100%;
+                    transition: all .17s ease-in-out;
+                    button{
+                        position: relative;
+                        font-size: 12px;
+                        font-weight: 400;
+                        height: 100%;
+                        color: #fff;
+                        padding-right: 12px;
+                        &:after{
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            right: 0;
+                            transform: translateY(-50%);
+                            width: 5px;
+                            height: 8px;
+                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                        }
+                    }
+                    &:last-child{
+                        margin-right: 0;
+                    }
+                    &.mouse{
+                        opacity: 0.55;
+                    }
+                }
             }
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-          &.mouse {
-            opacity: 0.55;
-          }
         }
-      }
+        &.active{
+            top: 47px;
+        }
     }
-    &.active {
-      top: 47px;
+    &.active{
+        padding-bottom: 50px;
     }
-  }
-  &.active {
-    padding-bottom: 50px;
-  }
 }
 
 // canvas-layout
-.canvas-layout {
-  .canvas-page-list {
-    display: flex;
-    background-color: #1c1c1c;
-    border-top: 1px solid #000;
-    width: 100%;
-    .canvas-plane-wrap {
-      display: flex;
-      align-items: center;
-      max-width: calc(100% - 45px);
-      .canvas-page-box {
+.canvas-layout{
+    .canvas-page-list{
         display: flex;
-        align-items: center;
-        background-color: #1c1c1c;
-        padding: 9.6px 20px;
-        border-right: 1px solid #000;
-        min-width: 0;
-        transition: all 0.17s ease-in-out;
-        span {
-          display: flex;
-          align-items: center;
-          width: 100%;
-          font-size: 12px;
-          font-family: 'Pretendard', sans-serif;
-          color: #aaa;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
+        background-color: #1C1C1C;
+        border-top: 1px solid #000;
+        width: 100%;
+        .canvas-plane-wrap{
+            display: flex;
+            align-items: center;
+            max-width: calc(100% - 45px);
+            .canvas-page-box{
+                display: flex;
+                align-items: center;
+                background-color: #1c1c1c;
+                padding: 9.6px 20px;
+                border-right:1px solid #000;
+                min-width: 0;
+                transition: all .17s ease-in-out;
+                span{
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    font-size: 12px;
+                    font-family: 'Pretendard', sans-serif;
+                    color: #AAA;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .close{
+                    flex: none;
+                    display: block;
+                    width: 7px;
+                    height: 8px;
+                    margin-left: 15px;
+                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
+                    background-size: cover;
+                }
+                &.on{
+                    background-color: #fff;
+                    span{
+                        font-weight: 600;
+                        color: #101010;
+                    }
+                    .close{
+                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
+                    }
+                    &:hover{
+                        background-color: #fff;
+                    }
+                }
+                &:hover{
+                    background-color: #000;
+                }
+            }
         }
-        .close {
-          flex: none;
-          display: block;
-          width: 7px;
-          height: 8px;
-          margin-left: 15px;
-          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
-          background-size: cover;
+        .plane-add{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            padding: 13.5px 0;
+            background-color: #1C1C1C;
+            border-right: 1px solid #000;
+            transition: all .17s ease-in-out;
+            span{
+                display: block;
+                width: 9px;
+                height: 9px;
+                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
+                background-size: cover;
+            }
+            &:hover{
+                background-color: #000;
+            }
         }
-        &.on {
-          background-color: #fff;
-          span {
-            font-weight: 600;
-            color: #101010;
-          }
-          .close {
-            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
-          }
-          &:hover {
-            background-color: #fff;
-          }
-        }
-        &:hover {
-          background-color: #000;
-        }
-      }
     }
-    .plane-add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 45px;
-      padding: 13.5px 0;
-      background-color: #1c1c1c;
-      border-right: 1px solid #000;
-      transition: all 0.17s ease-in-out;
-      span {
-        display: block;
-        width: 9px;
-        height: 9px;
-        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
-        background-size: cover;
-      }
-      &:hover {
-        background-color: #000;
-      }
-    }
-  }
 }
 
-.canvas-frame {
-  position: relative;
-  height: calc(100% - 36.5px);
-  background-color: #fff;
-  canvas {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 1600px;
-    height: 1000px;
-  }
+.canvas-frame{
+    position: relative;
+    height: calc(100% - 36.5px);
+    background-color: #fff;
+    canvas{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 // sub-page
-.sub-header {
-  position: fixed;
-  top: 46px;
-  left: 0;
-  width: 100%;
-  height: 46px;
-  border-bottom: 1px solid #000;
-  background: #2c2c2c;
-  z-index: 999;
-  .sub-header-inner {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 100px;
-    .sub-header-title-wrap {
-      display: flex;
-      align-items: center;
-      .title-item {
-        position: relative;
-        padding: 0 24px;
-        a {
-          display: flex;
-          align-items: center;
-          .icon {
-            width: 22px;
-            height: 22px;
-            margin-right: 8px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            &.drawing {
-              background-image: url(../../public/static/images/main/drawing_icon.svg);
-            }
-          }
-        }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 16px;
-          background-color: #d9d9d9;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          &:after {
-            display: none;
-          }
-        }
-      }
-    }
-    .sub-header-title {
-      font-size: 16px;
-      color: #fff;
-      font-weight: 600;
-    }
-    .sub-header-location {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      .location-item {
-        position: relative;
+.sub-header{
+    position: fixed;
+    top: 46px;
+    left: 0;
+    width: 100%;
+    height: 46px;
+    border-bottom: 1px solid #000;
+    background: #2C2C2C;
+    z-index: 999;
+    .sub-header-inner{
         display: flex;
         align-items: center;
-        padding: 0 10px;
-        span {
-          display: flex;
-          font-size: 12px;
-          color: #aaa;
-          font-weight: normal;
-          cursor: default;
+        height: 100%;
+        padding: 0 100px;
+        .sub-header-title-wrap{
+            display: flex;
+            align-items: center;
+            .title-item{
+                position: relative;
+                padding: 0 24px;
+                a{
+                    display: flex;
+                    align-items: center;
+                    .icon{
+                        width: 22px;
+                        height: 22px;
+                        margin-right: 8px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: cover;
+                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+                    }
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 16px;
+                    background-color: #D9D9D9;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 6px;
-          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          span {
+        .sub-header-title{
+            font-size: 16px;
             color: #fff;
-          }
-          &:after {
-            display: none;
-          }
+            font-weight: 600;
+        }
+        .sub-header-location{
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            .location-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                span{
+                    display: flex;
+                    font-size: 12px;
+                    color: #AAA;
+                    font-weight: normal;
+                    cursor: default;
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 4px;
+                    height: 6px;
+                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    span{
+                        color: #fff;
+                    }
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // sub content
-.sub-content {
-  padding-top: 46px;
-  .sub-content-inner {
-    max-width: 1720px;
-    margin: 0 auto;
-    padding-top: 20px;
-    .sub-content-box {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
+.sub-content{
+    padding-top: 46px;
+    .sub-content-inner{
+        max-width: 1720px;
+        margin: 0 auto;
+        padding-top: 20px;
+        .sub-content-box{
+            margin-bottom: 20px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  &.estimate {
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 36.5px);
-    overflow-y: auto;
-    padding-top: 0;
-    .sub-content-inner {
-      flex: 1;
-      width: 100%;
+    &.estimate{
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - 36.5px);
+        overflow-y: auto;
+        padding-top: 0;
+        .sub-content-inner{
+            flex: 1;
+            width: 100%;
+        }
     }
-  }
 }
-.sub-table-box {
-  padding: 20px;
-  border-radius: 6px;
-  border: 1px solid #e9eaed;
-  background: #fff;
-  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-  .table-box-title-wrap {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .title-wrap {
-      display: flex;
-      align-items: center;
-      h3 {
-        display: block;
-        font-size: 15px;
-        color: #101010;
-        font-weight: 600;
-        margin-right: 14px;
-      }
-      .option {
-        padding-left: 5px;
-        font-size: 13px;
-        color: #101010;
-        font-weight: 400;
-      }
-      .info-wrap {
+.sub-table-box{
+    padding: 20px;
+    border-radius: 6px; 
+    border: 1px solid #E9EAED;
+    background: #FFF;
+    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+    .table-box-title-wrap{
         display: flex;
         align-items: center;
-        li {
-          position: relative;
-          padding: 0 6px;
-          font-size: 12px;
-          color: #101010;
-          font-weight: normal;
-          span {
-            font-weight: 600;
-            &.red {
-              color: #e23d70;
+        margin-bottom: 15px;
+        .title-wrap{
+            display: flex;
+            align-items: center;
+            h3{
+                display: block;
+                font-size: 15px;
+                color: #101010;
+                font-weight: 600;
+                margin-right: 14px;
+                &.product{
+                    margin-right: 10px;
+                }
             }
-          }
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 1px;
-            height: 11px;
-            background-color: #d9d9d9;
-          }
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-            &::after {
-              display: none;
+            .product_tit{
+                position: relative;
+                font-size: 15px;
+                font-weight: 600;
+                color: #1083E3;
+                padding-left: 10px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 11px;
+                    background-color: #D9D9D9;
+                }
+            }
+            .option{
+                padding-left: 5px;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+            }
+            .info-wrap{
+                display: flex;
+                align-items: center;
+                li{
+                    position: relative;
+                    padding: 0 6px;
+                    font-size: 12px;
+                    color: #101010;
+                    font-weight: normal;
+                    span{
+                        font-weight: 600;
+                        &.red{
+                            color: #E23D70;
+                        }
+                    }
+                    &:after{
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        right: 0;
+                        transform: translateY(-50%);
+                        width: 1px;
+                        height: 11px;
+                        background-color: #D9D9D9;
+                    }
+                    &:first-child{padding-left: 0;}
+                    &:last-child{padding-right: 0;&::after{display: none;}}
+                }
             }
-          }
         }
-      }
     }
-  }
-  .left-unit-box {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-  }
-  .promise-gudie {
-    display: block;
-    font-size: 13px;
-    font-weight: 700;
-    color: #101010;
-    margin-bottom: 20px;
-  }
-  .important {
-    color: #f00;
-  }
-  .sub-center-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  .sub-right-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
-  .pagination-wrap {
-    margin-top: 24px;
-  }
+    .left-unit-box{
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+    }
+    .promise-gudie{
+        display: block;
+        font-size: 13px;
+        font-weight: 700;
+        color: #101010;
+        margin-bottom: 20px;
+    }
+    .important{
+        color: #f00;
+    }
+    .sub-center-footer{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+    }
+    .sub-right-footer{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+    .pagination-wrap{
+        margin-top: 24px;
+    }
 }
 
-.infomation-wrap {
-  margin-bottom: 30px;
+.infomation-wrap{
+    margin-bottom: 30px;
 }
 
-.infomation-box-wrap {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  .sub-table-box {
-    flex: 1;
-  }
-  .info-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #344356;
-    margin-bottom: 10px;
-  }
-  .info-inner {
-    position: relative;
-    font-size: 13px;
-    color: #344356;
-    .copy-ico {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
-      background-size: cover;
+.infomation-box-wrap{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    .sub-table-box{
+        flex: 1 ;
+    }
+    .info-title{
+        font-size: 14px;
+        font-weight: 500;
+        color: #344356;
+        margin-bottom: 10px;
+    }
+    .info-inner{
+        position: relative;
+        font-size: 13px;
+        color: #344356;
+        .copy-ico{
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-  }
 }
 
 // 견적서
-.estimate-list-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  .estimate-box {
-    flex: 1;
+.estimate-list-wrap{
     display: flex;
     align-items: center;
-    &:last-child {
-      flex: none;
-      min-width: 220px;
+    margin-bottom: 10px;
+    &.one{
+        .estimate-box{
+            &:last-child{
+                min-width: unset;
+            }
+        }
     }
-    .estimate-tit {
-      width: 105px;
-      height: 30px;
-      line-height: 30px;
-      background-color: #f4f4f7;
-      border-radius: 100px;
-      text-align: center;
-      font-size: 13px;
-      font-weight: 500;
-      color: #344356;
+    .estimate-box{
+        flex: 1 ;
+        display: flex;
+        align-items: center;
+        &:last-child{
+            flex: none;
+            min-width: 220px;
+        }
+        .estimate-tit{
+            width: 105px;
+            height: 30px;
+            line-height: 30px;
+            background-color: #F4F4F7;
+            border-radius: 100px;
+            text-align: center;
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .estimate-name{
+            font-size: 13px;
+            color: #344356;
+            margin-left: 14px;
+            font-weight: 400;
+            &.blue{
+                font-size: 16px;
+                font-weight: 700;
+                color: #1083E3;
+            }
+            &.red{
+                font-size: 16px;
+                font-weight: 700;
+                color: #D72A2A;
+            }
+        }
     }
-    .estimate-name {
-      font-size: 13px;
-      color: #344356;
-      margin-left: 14px;
-      font-weight: 400;
+    &:last-child{
+        margin-bottom: 0;
     }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 // file drag box
-.drag-file-box {
-  padding: 10px;
-  .btn-area {
-    padding-bottom: 15px;
-    border-bottom: 1px solid #ecf0f4;
-  }
-  .drag-file-area {
-    position: relative;
-    margin-top: 15px;
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 13px;
-      color: #ccc;
-      font-weight: 400;
-      cursor: default;
+.drag-file-box{
+    padding: 10px;
+    .btn-area{
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ECF0F4;
     }
-  }
-  .file-list {
-    .file-item {
-      margin-bottom: 15px;
-      span {
+    .drag-file-area{
         position: relative;
-        font-size: 13px;
-        color: #45576f;
-        font-weight: 400;
-        white-space: nowrap;
-        padding-right: 55px;
-        button {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 15px;
-          height: 15px;
-          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
-          background-size: cover;
+        margin-top: 15px;
+        p{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 13px;
+            color: #ccc;
+            font-weight: 400;
+            cursor: default;
         }
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
-  }
+    .file-list{
+        .file-item{
+            margin-bottom: 15px;
+            span{
+                position: relative;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 400;
+                white-space: nowrap;
+                padding-right: 55px;
+                button{
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 15px;
+                    height: 15px;
+                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.special-note-check-wrap{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    margin-bottom: 30px;
+    .special-note-check-item{
+        padding: 14px 10px;
+        border-right: 1px solid #ECF0F4;
+        border-top: 1px solid #ECF0F4;
+        &:nth-child(5n){
+            border-right: none;
+        }
+        &:nth-child(-n+5){
+            border-top: none;
+        }
+        &.act{
+            background-color: #F7F9FA;
+        }
+    }
+}
+
+.calculation-estimate{
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    padding: 24px;
+    max-height: 350px;
+    overflow-y: auto;
+    margin-bottom: 30px;
+    dl{
+        margin-bottom: 35px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        dt{
+            font-size: 13px;
+            font-weight: 600;
+            color: #1083E3;
+            margin-bottom: 15px;
+        }
+        dd{
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 5px;
+        }
+    }
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #d9dee2;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+.esimate-wrap{
+    margin-bottom: 20px;
+}
+
+.estimate-product-option{
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .product-price-wrap{
+        display: flex;
+        align-items: center;
+        .product-price-tit{
+            font-size: 13px;
+            font-weight: 400;
+            color: #45576F;
+            margin-right: 10px;
+        }
+        .select-wrap{
+            width: 110px;
+        }
+    }
+    .product-edit-wrap{
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        .product-edit-explane{
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .attachment-required{
+                position: relative;
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+                font-weight: 400;
+                color: #45576F;
+                padding-right: 10px;
+                .ico{
+                    width: 23px;
+                    height: 23px;
+                    margin-right: 5px;
+                    background: url(../../public/static/images/sub/attachment_ico.svg)no-repeat center;
+                    background-size: cover;
+                }
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 12px;
+                    background-color: #D9D9D9;
+                }
+            }
+            .click-check{
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+                font-weight: 400;
+                color: #F16A6A ;
+                padding-left: 10px;
+                .ico{
+                    width: 14px;
+                    height: 14px;
+                    margin-right: 5px;
+                    background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+        }
+        .product-edit-btn{
+            display: flex;
+            align-items: center;
+            button{
+                display: flex;
+                align-items: center;
+                span{
+                    width: 13px;
+                    height: 13px;
+                    margin-right: 5px;
+                    background-size: cover;
+                    &.plus{
+                        background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
+                    }
+                    &.minus{
+                        background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
+                    }
+                }
+            }
+        }
+    }
+    
 }
 
 // 발전시물레이션
-.chart-wrap {
-  display: flex;
-  gap: 20px;
-  width: 100%;
-  .sub-table-box {
-    height: 100%;
-  }
-  .chart-inner {
-    flex: 1;
-    .chart-box {
-      margin-bottom: 30px;
-    }
-  }
-  .chart-table-wrap {
+.chart-wrap{
     display: flex;
-    flex-direction: column;
-    flex: none;
-    width: 650px;
-    .sub-table-box {
-      flex: 1;
-      &:first-child {
-        margin-bottom: 20px;
-      }
+    gap: 20px;
+    width: 100%;
+    .sub-table-box{
+        height: 100%;
+    }
+    .chart-inner{
+        flex: 1;
+        .chart-box{
+            margin-bottom: 30px;
+        }
+    }
+    .chart-table-wrap{
+        display: flex;
+        flex-direction: column;
+        flex: none;
+        width: 650px;
+        .sub-table-box{
+            flex: 1;
+            &:first-child{
+                margin-bottom: 20px;
+            }
+        }
     }
-  }
 }
 
-.chart-month-table {
-  table {
-    table-layout: fixed;
-    border-collapse: collapse;
-    border: 1px solid #ecf0f4;
-    border-radius: 4px;
-    thead {
-      th {
-        padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+.chart-month-table{
+    table{
+        table-layout: fixed;
+        border-collapse:collapse;
+        border: 1px solid #ECF0F4;
+        border-radius: 4px;
+        thead{
+            th{
+                padding: 4.5px 0;
+                border-bottom: 1px solid #ECF0F4;
+                text-align: center;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 500;
+                background-color: #F8F9FA;
+            }
+        }
+        tbody{
+            td{
+                font-size: 13px;
+                color: #45576F;
+                text-align: center;
+                padding: 4.5px 0;
+            }
+        }
+    }
+}
+
+.simulation-guide-wrap{
+    display: flex;
+    padding: 20px;
+    .simulation-tit-wrap{
+        padding-right: 40px;
+        border-right: 1px solid #EEEEEE;
+        span{
+            display: block;
+            position: relative;
+            padding-left: 60px;
+            font-size: 15px;
+            color: #14324F;
+            font-weight: 600;
+            &::before{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                width: 40px;
+                height: 40px;
+                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+    }
+    .simulation-guide-box{
+        padding-left: 40px;
+        dl{
+            margin-bottom: 25px;
+            dt{
+                font-size: 13px;
+                color: #101010;
+                font-weight: 600;
+                margin-bottom: 5px;
+            }
+            dd{
+                font-size: 12px;
+                color: #45576F;
+                font-weight: 400;
+                line-height: 24px;
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.module-total{
+    display: flex;
+    align-items: center;
+    background-color: #F8F9FA;
+    padding: 9px 0;
+    margin-right: 4px;
+    border: 1px solid #ECF0F4;
+    border-top: none;
+    .total-title{
+        flex: 1;
         text-align: center;
         font-size: 13px;
-        color: #45576f;
+        color: #344356;
         font-weight: 500;
-        background-color: #f8f9fa;
-      }
     }
-    tbody {
-      td {
-        font-size: 13px;
-        color: #45576f;
+    .total-num{
+        flex: none;
+        width: 121px;
         text-align: center;
-        padding: 4.5px 0;
-      }
+        font-size: 15px;
+        color: #344356;
+        font-weight: 500;
     }
-  }
-}
-
-.simulation-guide-wrap {
-  display: flex;
-  padding: 20px;
-  .simulation-tit-wrap {
-    padding-right: 40px;
-    border-right: 1px solid #eeeeee;
-    span {
-      display: block;
-      position: relative;
-      padding-left: 60px;
-      font-size: 15px;
-      color: #14324f;
-      font-weight: 600;
-      &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
-        background-size: cover;
-      }
-    }
-  }
-  .simulation-guide-box {
-    padding-left: 40px;
-    dl {
-      margin-bottom: 25px;
-      dt {
-        font-size: 13px;
-        color: #101010;
-        font-weight: 600;
-        margin-bottom: 5px;
-      }
-      dd {
-        font-size: 12px;
-        color: #45576f;
-        font-weight: 400;
-        line-height: 24px;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-.module-total {
-  display: flex;
-  align-items: center;
-  background-color: #f8f9fa;
-  padding: 9px 0;
-  margin-right: 4px;
-  border: 1px solid #ecf0f4;
-  border-top: none;
-  .total-title {
-    flex: 1;
-    text-align: center;
-    font-size: 13px;
-    color: #344356;
-    font-weight: 500;
-  }
-  .total-num {
-    flex: none;
-    width: 121px;
-    text-align: center;
-    font-size: 15px;
-    color: #344356;
-    font-weight: 500;
-  }
 }
 
 // 물건상세
-.information-help-wrap {
-  display: flex;
-  padding: 24px;
-  background-color: #f4f4f4;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  .information-help-tit-wrap {
-    position: relative;
+.information-help-wrap{
     display: flex;
-    align-items: center;
-    padding-right: 40px;
-    border-right: 1px solid #e0e0e3;
-    .help-tit-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      margin-right: 10px;
-      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
-      background-size: 20px 20px;
+    padding: 24px;
+    background-color: #F4F4F4;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    .information-help-tit-wrap{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-right: 40px;
+        border-right: 1px solid #E0E0E3;
+        .help-tit-icon{
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
+            background-size: 20px 20px;
+        }
+        .help-tit{
+            font-size: 13px;
+            font-weight: 600;
+            color: #45576F;
+        }
     }
-    .help-tit {
-      font-size: 13px;
-      font-weight: 600;
-      color: #45576f;
+    .information-help-guide{
+        padding-left: 40px;
+        span{
+            display: block;
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 7px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  .information-help-guide {
-    padding-left: 40px;
-    span {
-      display: block;
-      font-size: 12px;
-      font-weight: 400;
-      color: #45576f;
-      margin-bottom: 7px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
+}
\ No newline at end of file
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index a673236a..4cf9d3b2 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -36,6 +36,9 @@
             &:nth-child(2n){
                 background-color: #F7F9FA;
             }
+            &.important_row{
+                background-color: #e7e7e7;
+            }
         }
         .ag-cell{
             font-size: 13px;
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index e80d8b83..37170a8b 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -1,687 +1,652 @@
 // background img
-.background-bord {
-  position: absolute;
-  top: 46px;
-  left: 0;
-  width: 100%;
-  height: 280px;
-  background: url(../../public/static/images/main/main_background.png) no-repeat center;
-  background-size: cover;
-  z-index: 0;
+.background-bord{
+    position: absolute;
+    top: 46px;
+    left: 0;
+    width: 100%;
+    height: 280px;
+    background: url(../../public/static/images/main/main_background.png)no-repeat center;
+    background-size: cover;
+    z-index: 0;
 }
 
 // main-wrap
-.main-contents {
-  position: relative;
-  z-index: 1;
-  padding-bottom: 15px;
+.main-contents{
+    position: relative;
+    z-index: 1;
+    padding-bottom: 15px;
 }
 
 // contents
-.store-id-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 33.5px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background-color: rgba(255, 255, 255, 0.05);
-  .store-id-title {
-    position: relative;
-    padding-left: 32px;
-    font-size: 13px;
-    color: #fff;
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-      width: 20px;
-      height: 20px;
-      background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
-    }
-  }
-  .store-arr {
-    display: block;
-    width: 7px;
-    height: 10px;
-    background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
-  }
-  .store-id-name {
-    font-size: 16px;
-    color: #fff;
-    font-weight: 600;
-  }
-}
-
-// main-search-form
-.main-search-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 45px 0;
-  .search-raido-wrap {
+.store-id-wrap{
     display: flex;
     align-items: center;
-    gap: 16px;
-    margin-right: 30px;
-  }
-}
-.search-input-box {
-  display: flex;
-  align-items: center;
-  width: 580px;
-  height: 45px;
-  border-radius: 100px;
-  padding: 0 20px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  background: rgba(31, 31, 31, 0.3);
-  .main-search {
-    flex: 1;
-    height: 100%;
-    font-size: 13px;
-    color: #fff;
-    background-color: transparent;
-    outline: none;
-    border: none;
-    font-family: 'Noto Sans JP', sans-serif;
-  }
-  .search-icon {
-    width: 20px;
-    height: 100%;
-    background-image: url(../../public/static/images/main/main_search.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 21px 21px;
-  }
-}
-
-// main-contents-inner
-.main-product-list-wrap {
-  max-width: 1400px;
-  margin: 0 auto;
-  .main-product-list {
-    display: flex;
-    gap: 24px;
-    margin-bottom: 24px;
-    .product-item {
-      display: flex;
-      flex-direction: column;
-      padding: 40px;
-      border-radius: 6px;
-      background: #fff;
-      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-      &.item01 {
-        flex: 1;
-        max-height: 400px;
-      }
-      &.item02 {
-        flex: none;
-        width: 451px;
-        max-height: 400px;
-      }
-      &.item03 {
-        flex: 1;
-      }
-      &.item04 {
-        flex: none;
-        width: 351px;
-      }
-      &.item05 {
-        flex: none;
-        width: 451px;
-      }
-      .product-item-title-wrap {
-        display: flex;
-        align-items: center;
-        .product-item-title {
-          display: flex;
-          align-items: center;
-          font-size: 16px;
-          color: #101010;
-          font-weight: 600;
-          .item-logo {
-            display: block;
-            width: 40px;
-            height: 40px;
-            border-radius: 50px;
-            background: #14324f;
-            margin-right: 12px;
-            background-repeat: no-repeat;
-            background-size: 22px 22px;
-            background-position: center;
-            &.ico01 {
-              background-image: url(../../public/static/images/main/product_ico01.svg);
-            }
-            &.ico02 {
-              background-image: url(../../public/static/images/main/product_ico02.svg);
-            }
-            &.ico03 {
-              background-image: url(../../public/static/images/main/product_ico03.svg);
-            }
-            &.ico04 {
-              background-image: url(../../public/static/images/main/product_ico04.svg);
-            }
-            &.ico05 {
-              background-image: url(../../public/static/images/main/product_ico05.svg);
-            }
-          }
-        }
-        .more-btn {
-          display: block;
-          width: 20px;
-          height: 20px;
-          margin-left: auto;
-          background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
-        }
-      }
-      .product-item-content {
-        margin-top: 30px;
-        overflow: hidden;
-        .recently-list {
-          .recently-item {
-            border: 1px solid #f2f2f2;
-            background-color: transparent;
-            padding: 29.9px 20px;
-            margin-bottom: 5px;
-            cursor: pointer;
-            .item-inner {
-              display: flex;
-              align-items: center;
-              span {
-                position: relative;
-                display: block;
-                font-size: 13px;
-                color: #101010;
-                font-weight: 400;
-                padding: 0 10px;
-                &.time {
-                  padding-left: 22px;
-                  &::before {
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translateY(-50%);
-                    width: 14px;
-                    height: 14px;
-                    background: url(../../public/static/images/main/clock.svg) no-repeat center;
-                    background-size: cover;
-                  }
-                }
-                &:after {
-                  content: '';
-                  position: absolute;
-                  top: 50%;
-                  right: 0;
-                  transform: translateY(-50%);
-                  width: 1px;
-                  height: 10px;
-                  background-color: #bbb;
-                }
-                &:last-child {
-                  &:after {
-                    display: none;
-                  }
-                }
-              }
-            }
-            &:last-child {
-              margin-bottom: 5px;
-            }
-          }
-        }
-        .notice-box {
-          height: 100%;
-          overflow-y: auto;
-          .notice-day {
-            font-size: 13px;
-            color: #666;
-            font-weight: 400;
-            margin-bottom: 7px;
-          }
-          .notice-title {
-            font-size: 14px;
-            color: #101010;
-            font-weight: 600;
-            margin-bottom: 25px;
-            line-height: 24px;
-            word-break: keep-all;
-          }
-          .notice-contents {
-            font-size: 12px;
-            color: #666;
-            font-weight: 400;
-            line-height: 22px;
-            span {
-              position: relative;
-              display: block;
-              padding-left: 10px;
-              &::before {
-                content: '';
-                position: absolute;
-                top: 10px;
-                left: 3px;
-                width: 3px;
-                height: 3px;
-                border-radius: 100%;
-                background-color: #666;
-              }
-            }
-          }
-          &::-webkit-scrollbar {
-            width: 4px; /* 스크롤바의 너비 */
-          }
-          &::-webkit-scrollbar-thumb {
-            background: #697c8f; /* 스크롤바의 색상 */
-          }
-          &::-webkit-scrollbar-track {
-            background: transparent; /*스크롤바 뒷 배경 색상*/
-          }
-        }
-        .faq-item {
-          position: relative;
-          margin-bottom: 10px;
-          cursor: pointer;
-          .faq-item-inner {
-            display: flex;
-            align-items: center;
-
-            .faq-num {
-              flex: none;
-              padding: 7px 12.5px;
-              font-size: 13px;
-              color: #101010;
-              font-weight: 600;
-              border-radius: 110px;
-              border: 1px solid rgba(242, 242, 242, 0.95);
-              margin-right: 20px;
-            }
-            .faq-title {
-              width: 0;
-              flex: 1 1 auto;
-              font-size: 13px;
-              color: #101010;
-              font-weight: 500;
-              padding-right: 96px;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-            }
-            .faq-day {
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              font-size: 13px;
-              color: #101010;
-              font-weight: 400;
-            }
-          }
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-        .data-download-wrap {
-          width: 100%;
-          .data-down {
-            display: block;
-            width: 100%;
-            padding: 20px;
-            text-align: left;
-            border-radius: 4px;
-            background-color: #697c8f;
-            margin-bottom: 5px;
-            transition: background 0.17s ease-in-out;
-            span {
-              position: relative;
-              display: block;
-              padding-right: 30px;
-              font-size: 13px;
-              color: #fff;
-              font-weight: 400;
-              &:after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                width: 18px;
-                height: 16px;
-                background: url(../../public/static/images/main/download.svg) no-repeat center;
-                background-size: cover;
-              }
-            }
-            &:last-child {
-              margin-bottom: 0;
-            }
-            &:hover {
-              background-color: #859eb6;
-            }
-          }
-        }
-        .contact-info-list {
-          padding: 25px 30px;
-          border-radius: 4px;
-          background-color: #f4f4f7;
-          .info-item {
-            display: flex;
-            align-items: center;
-            padding: 15px 0;
-            border-bottom: 1px solid #fff;
-            &:first-child {
-              padding-top: 0;
-            }
-            &:last-child {
-              padding-bottom: 0;
-              border: none;
-            }
-            .icon-box {
-              display: flex;
-              margin-right: 12px;
-            }
-            .infor-data {
-              font-size: 13px;
-              color: #101010;
-              font-weight: 500;
-            }
-          }
-        }
-      }
-    }
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-// loginpage
-.login-wrap {
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  background: url(../../public/static/images/main/login_bg.png) no-repeat center;
-  background-size: cover;
-  .login-inner {
-    max-width: 500px;
-    width: 100%;
-    margin: 0 auto;
-    .login-logo {
-      display: block;
-      margin-bottom: 25px;
-    }
-    .login-input-frame {
-      padding: 40px 50px;
-      border-radius: 6px;
-      background: rgba(255, 255, 255, 0.97);
-      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-      .login-frame-tit {
-        font-size: 18px;
-        color: #364864;
-        font-weight: 400;
-        padding-bottom: 30px;
-        border-bottom: 1px solid #e5e9ef;
-        span {
-          display: block;
-          font-weight: 600;
-          margin-bottom: 5px;
-        }
-        &.pw-reset {
-          font-size: 13px;
-        }
-      }
-      .login-input-wrap {
-        margin-top: 30px;
-        .login-area {
-          position: relative;
-          display: flex;
-          align-items: center;
-          border: 1px solid #e5e9ef;
-          height: 45px;
-          padding-left: 40px;
-          padding-right: 15px;
-          margin-bottom: 15px;
-          .login-input {
-            flex: 1;
-            height: 100%;
-            background-color: transparent;
-            font-size: 13px;
-            font-weight: 400;
-            color: #6c819c;
-            &::placeholder {
-              font-size: 13px;
-              font-weight: 400;
-              color: #d1d7e0;
-            }
-          }
-          &::before {
+    justify-content: center;
+    gap: 12px;
+    padding: 33.5px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    background-color: rgba(255, 255, 255, 0.05);
+    .store-id-title{
+        position: relative;
+        padding-left: 32px;
+        font-size: 13px;
+        color: #fff;
+        &::before{
             content: '';
             position: absolute;
             top: 50%;
-            left: 15px;
+            left: 0;
             transform: translateY(-50%);
-            width: 10px;
-            height: 12px;
-            background-size: cover;
-          }
-          button {
             width: 20px;
-            height: 100%;
-            background-repeat: no-repeat;
-            background-position: center;
-          }
-          &.id {
-            &::before {
-              background: url(../../public/static/images/main/login_id.svg) no-repeat center;
-            }
-            .id-delete {
-              background-image: url(../../public/static/images/main/id_delete.svg);
-              background-size: 17px 17px;
-            }
-          }
-          &.email {
-            &::before {
-              background: url(../../public/static/images/main/login_email.svg) no-repeat center;
-              width: 12px;
-              height: 9px;
-            }
-            .id-delete {
-              background-image: url(../../public/static/images/main/id_delete.svg);
-              background-size: 17px 17px;
-            }
-          }
-          &.password {
-            margin-bottom: 20px;
-            &::before {
-              background: url(../../public/static/images/main/login_password.svg) no-repeat center;
-            }
-            .password-hidden {
-              background-image: url(../../public/static/images/main/password_hidden.svg);
-              background-size: 19px 13px;
-              &.visible {
-                background-image: url(../../public/static/images/main/password_visible.svg);
-              }
-            }
-          }
+            height: 20px;
+            background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
         }
-        .login-btn {
-          display: block;
-          width: 100%;
-          height: 45px;
-          background-color: #5c6773;
-          color: #fff;
-          font-size: 15px;
-          font-weight: 600;
-          border-radius: 4px;
-          transition: background 0.15s ease-in-out;
-          &:hover {
-            background-color: #717e8d;
-          }
-          &.light {
-            background-color: #fff;
-            border: 1px solid #5c6773;
-            color: #5c6773;
-          }
-        }
-        .login-btn-box {
-          margin-bottom: 20px;
-        }
-        .pwreset-btn-box {
-          display: flex;
-        }
-        .reset-password {
-          width: 100%;
-          text-align: center;
-          button {
-            position: relative;
-            font-size: 13px;
-            color: #364864;
-            font-weight: 400;
-            padding-right: 16px;
-            &::before {
-              content: '';
-              position: absolute;
-              top: calc(50% + 1px);
-              right: 0;
-              transform: translateY(-50%);
-              width: 6px;
-              height: 8px;
-              background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
-            }
-          }
-        }
-      }
     }
-    .login-guide-wrap {
-      position: relative;
-      margin-left: 10px;
-      margin-top: 30px;
-      padding-left: 15px;
-      font-size: 13px;
-      color: #fff;
-      line-height: 24px;
-      a {
+    .store-arr{
+        display: block;
+        width: 7px;
+        height: 10px;
+        background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
+    }
+    .store-id-name{
+        font-size: 16px;
         color: #fff;
         font-weight: 600;
-        text-decoration: underline;
-      }
-      span {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
     }
-  }
-  .login-copyright {
-    position: absolute;
-    bottom: 40px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 11px;
-    color: #fff;
-    font-weight: 500;
-  }
 }
 
-.d-check-box {
-  &.login {
-    margin-bottom: 25px;
-    label {
-      padding-left: 20px;
-      color: #364864;
-      &:before {
-        width: 22px;
-        height: 22px;
-        top: -1px;
-        border-color: #a8b6c7;
-        border-radius: 3px;
-        transition: background 0.05s ease-in-out;
-      }
+// main-search-form
+.main-search-wrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 45px 0;
+    .search-raido-wrap{
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-right: 30px;
+    }
+}
+.search-input-box{
+    display: flex;
+    align-items: center;
+    width: 580px;
+    height: 45px;
+    border-radius: 100px;
+    padding: 0 20px;
+    border: 1px solid rgba(255, 255, 255, 0.30);
+    background: rgba(31, 31, 31, 0.30);
+    .main-search{
+        flex: 1;
+        height: 100%;
+        font-size: 13px;
+        color: #fff;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        font-family: 'Noto Sans JP', sans-serif;
+    }
+    .search-icon{
+        width: 20px;
+        height: 100%;
+        background-image: url(../../public/static/images/main/main_search.svg);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 21px 21px;
+    }
+}
+
+// main-contents-inner
+.main-product-list-wrap{
+    max-width: 1400px;
+    margin: 0 auto;
+    .main-product-list{
+        display: flex;
+        gap: 24px;
+        margin-bottom: 24px;
+        .product-item{
+            display: flex;
+            flex-direction: column;
+            padding: 40px;
+            border-radius: 6px;
+            background: #FFF;
+            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+            &.item01{flex: 1; max-height: 400px;}
+            &.item02{flex: none; width: 451px; max-height: 400px;}
+            &.item03{flex: 1;}
+            &.item04{flex: none; width: 351px;}
+            &.item05{flex: none; width: 451px;}
+            .product-item-title-wrap{
+                display: flex;
+                align-items: center;
+                .product-item-title{
+                    display: flex;
+                    align-items: center;
+                    font-size: 16px;
+                    color: #101010;
+                    font-weight: 600;
+                    .item-logo{
+                        display: block;
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50px;
+                        background: #14324F;
+                        margin-right: 12px;
+                        background-repeat: no-repeat;
+                        background-size: 22px 22px;
+                        background-position: center;
+                        &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
+                        &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
+                        &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
+                        &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
+                        &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
+                    }
+                }
+                .more-btn{
+                    display: block;
+                    width: 20px;
+                    height: 20px;
+                    margin-left: auto;
+                    background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
+                }
+            }
+            .product-item-content{
+                margin-top: 30px;
+                overflow: hidden;
+                .recently-list{
+                    .recently-item{
+                        border: 1px solid #F2F2F2;
+                        background-color: transparent;
+                        padding: 29.9px 20px;
+                        margin-bottom: 5px;
+                        cursor: pointer;
+                        .item-inner{
+                            display: flex;
+                            align-items: center;
+                            span{
+                                position: relative;
+                                display: block;
+                                font-size: 13px;
+                                color: #101010;
+                                font-weight: 400;
+                                padding: 0 10px;
+                                &.time{
+                                    padding-left: 22px;
+                                    &::before{
+                                        content: '';
+                                        position: absolute;
+                                        top: 50%;
+                                        left: 0;
+                                        transform: translateY(-50%);
+                                        width: 14px;
+                                        height: 14px;
+                                        background:url(../../public/static/images/main/clock.svg)no-repeat center;
+                                        background-size: cover;
+                                    }
+                                }
+                                &:after{
+                                    content: '';
+                                    position: absolute;
+                                    top: 50%;
+                                    right: 0;
+                                    transform: translateY(-50%);
+                                    width: 1px;
+                                    height: 10px;
+                                    background-color: #BBB;
+                                }
+                                &:last-child{
+                                    &:after{
+                                        display: none;
+                                    }
+                                }
+                            }
+                        }
+                        &:last-child{
+                            margin-bottom: 5px;
+                        }
+                    }
+                }
+                .notice-box{
+                    height: 100%;
+                    overflow-y: auto;
+                    .notice-day{
+                        font-size: 13px;
+                        color: #666;
+                        font-weight: 400;
+                        margin-bottom: 7px;
+                    }
+                    .notice-title{
+                        font-size: 14px;
+                        color: #101010;
+                        font-weight: 600;
+                        margin-bottom: 25px;
+                        line-height: 24px;
+                        word-break: keep-all;
+                    }
+                    .notice-contents{
+                        font-size: 12px;
+                        color: #666;
+                        font-weight: 400;
+                        line-height: 22px;
+                        span{
+                            position: relative;
+                            display: block;
+                            padding-left: 10px;
+                            &::before{
+                                content: '';
+                                position: absolute;
+                                top: 10px;
+                                left: 3px;
+                                width: 3px;
+                                height: 3px;
+                                border-radius: 100%;
+                                background-color: #666;
+                            }
+                        }
+                    }
+                    &::-webkit-scrollbar {width: 4px;  /* 스크롤바의 너비 */}
+                    &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+                    &::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}
+                }
+                .faq-item{
+                    position: relative;
+                    margin-bottom: 10px;
+                    cursor: pointer;
+                    .faq-item-inner{
+                        display: flex;
+                        align-items: center;
+                        
+                        .faq-num{
+                            flex: none;
+                            padding: 7px 12.5px;
+                            font-size: 13px;
+                            color: #101010;
+                            font-weight: 600;
+                            border-radius: 110px;
+                            border: 1px solid rgba(242, 242, 242, 0.95);
+                            margin-right: 20px;
+                        }
+                        .faq-title{
+                            width: 0;
+                            flex: 1 1 auto;
+                            font-size: 13px;
+                            color: #101010;
+                            font-weight: 500;
+                            padding-right: 96px;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                        }
+                        .faq-day{
+                            position: absolute;
+                            top: 50%;
+                            right: 0;
+                            transform: translateY(-50%);
+                            font-size: 13px;
+                            color: #101010;
+                            font-weight: 400;
+                        }
+                    }
+                    &:last-child{
+                        margin-bottom: 0;
+                    }
+                }
+                .data-download-wrap{
+                    width: 100%;
+                    .data-down{
+                        display: block;
+                        width: 100%;
+                        padding: 20px;
+                        text-align: left;
+                        border-radius: 4px;
+                        background-color: #697C8F;
+                        margin-bottom: 5px;
+                        transition: background .17s ease-in-out;
+                        span{
+                            position: relative;
+                            display: block;
+                            padding-right: 30px;
+                            font-size: 13px;
+                            color: #fff;
+                            font-weight: 400;
+                            &:after{
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                width: 18px;
+                                height: 16px;
+                                background: url(../../public/static/images/main/download.svg)no-repeat center;
+                                background-size: cover;
+                            }
+                        }
+                        &:last-child{
+                            margin-bottom: 0;
+                        }
+                        &:hover{
+                            background-color: #859eb6;
+                        }
+                    }
+                }
+                .contact-info-list{
+                    padding: 25px 30px;
+                    border-radius: 4px;
+                    background-color: #F4F4F7;
+                    .info-item{
+                        display: flex;
+                        align-items: center;
+                        padding: 15px 0;
+                        border-bottom: 1px solid #fff;
+                        &:first-child{padding-top: 0;}
+                        &:last-child{padding-bottom: 0; border: none;}
+                        .icon-box{
+                            display: flex;
+                            margin-right: 12px;
+                        }
+                        .infor-data{
+                            font-size: 13px;
+                            color: #101010;
+                            font-weight: 500;
+                        }
+                    }
+                }
+            }
+        }
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+}
+
+// loginpage
+.login-wrap{
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: url(../../public/static/images/main/login_bg.png) no-repeat center;
+    background-size: cover;
+    .login-inner{
+        max-width: 500px;
+        width: 100%;
+        margin: 0 auto;
+        .login-logo{
+            display: block;
+            margin-bottom: 25px;
+        }
+        .login-input-frame{
+            padding: 40px 50px;
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.97);
+            box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+            .login-frame-tit{
+                font-size: 18px;
+                color: #364864;
+                font-weight: 400;
+                padding-bottom: 30px;
+                border-bottom: 1px solid #E5E9EF;
+                span{
+                    display: block;
+                    font-weight: 600;
+                    margin-bottom: 5px;
+                }
+                &.pw-reset{
+                    font-size: 13px;
+                }
+            }
+            .login-input-wrap{
+                margin-top: 30px;
+                .login-area{
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    border: 1px solid #E5E9EF;
+                    height: 45px;
+                    padding-left: 40px;
+                    padding-right: 15px;
+                    margin-bottom: 15px;
+                    .login-input{
+                        flex: 1;
+                        height: 100%;
+                        background-color: transparent;
+                        font-size: 13px;
+                        font-weight: 400;
+                        color: #6c819c;
+                        &::placeholder{
+                            font-size: 13px;
+                            font-weight: 400;
+                            color: #D1D7E0;
+                        }
+                    }
+                    &::before{
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        left: 15px;
+                        transform: translateY(-50%);
+                        width: 10px;
+                        height: 12px;
+                        background-size: cover;
+                    }
+                    button{
+                        width: 20px;
+                        height: 100%;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                    }
+                    &.id{
+                        &::before{
+                            background: url(../../public/static/images/main/login_id.svg)no-repeat center;
+                        }
+                        .id-delete{
+                            background-image: url(../../public/static/images/main/id_delete.svg);
+                            background-size: 17px 17px;
+                        }
+                    }
+                    &.email{
+                        &::before{
+                            background: url(../../public/static/images/main/login_email.svg)no-repeat center;
+                            width: 12px;
+                            height: 9px;
+                        }
+                        .id-delete{
+                            background-image: url(../../public/static/images/main/id_delete.svg);
+                            background-size: 17px 17px;
+                        }
+                    }
+                    &.password{
+                        margin-bottom: 20px;
+                        &::before{
+                            background: url(../../public/static/images/main/login_password.svg)no-repeat center;
+                        }
+                        .password-hidden{
+                            background-image: url(../../public/static/images/main/password_hidden.svg);
+                            background-size: 19px 13px;
+                            &.visible{
+                                background-image: url(../../public/static/images/main/password_visible.svg);
+                            }
+                        }
+                    }
+                }
+                .login-btn{
+                    display: block;
+                    width: 100%;
+                    height: 45px;
+                    background-color: #5C6773;
+                    color: #fff;
+                    font-size: 15px;
+                    font-weight: 600;
+                    border-radius: 4px;
+                    transition: background .15s ease-in-out;
+                    &:hover{
+                        background-color: #717e8d;
+                    }
+                    &.light{
+                        background-color: #fff;
+                        border: 1px solid #5C6773;
+                        color: #5C6773;
+                    }
+                }
+                .login-btn-box{
+                    margin-bottom: 20px;
+                }
+                .pwreset-btn-box{
+                    display: flex;
+                }
+                .reset-password{
+                    width: 100%;
+                    text-align: center;
+                    button{ 
+                        position: relative;
+                        font-size: 13px;
+                        color: #364864;
+                        font-weight: 400;
+                        padding-right: 16px;
+                        &::before{
+                            content: '';
+                            position: absolute;
+                            top: calc(50% + 1px);
+                            right: 0;
+                            transform: translateY(-50%);
+                            width: 6px;
+                            height: 8px;
+                            background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
+                        }
+                    }
+                }
+            }
+        }
+        .login-guide-wrap{
+            position: relative;
+            margin-left: 10px;
+            margin-top: 30px;
+            padding-left: 15px;
+            font-size: 13px;
+            color: #fff;
+            line-height: 24px;
+            a{
+                color: #fff;
+                font-weight: 600;
+                text-decoration: underline;
+            }
+            span{
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+    .login-copyright{
+        position: absolute;
+        bottom: 40px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 11px;
+        color: #fff;
+        font-weight: 500;
+    }
+}
+
+.d-check-box{
+    &.login{
+        margin-bottom: 25px;
+        label{
+            padding-left: 20px;
+            color: #364864;
+            &:before{
+                width: 22px;
+                height: 22px;
+                top: -1px;
+                border-color: #A8B6C7;
+                border-radius: 3px;
+                transition: background .05s ease-in-out;
+            }
+        }
+    }
+    input[type=checkbox]:checked + label::before{
+        border-color: #A8B6C7;
+        background-color: #A8B6C7;
+    }
+    input[type=checkbox]:checked + label::after{
+        border-color: #fff;
+        width: 7px;
+        height: 11px;
+        top: -2px;
+        left: 1px;
     }
-  }
-  input[type='checkbox']:checked + label::before {
-    border-color: #a8b6c7;
-    background-color: #a8b6c7;
-  }
-  input[type='checkbox']:checked + label::after {
-    border-color: #fff;
-    width: 7px;
-    height: 11px;
-    top: -2px;
-    left: 1px;
-  }
 }
 
 // 회원가입
-.center-page-wrap {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  min-height: 100vh;
-  background-color: #f4f4f7;
-  overflow-x: hidden;
-  .center-page-inner {
+.center-page-wrap{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     width: 100%;
-    max-width: 1720px;
-    margin: 0 auto;
-    .center-page-tit {
-      font-size: 18px;
-      font-weight: 600;
-      color: #101010;
-      margin-bottom: 24px;
+    min-height: 100vh;
+    background-color: #F4F4F7;
+    overflow-x: hidden;
+    .center-page-inner{
+        width: 100%;
+        max-width: 1720px;
+        margin: 0 auto;
+        .center-page-tit{
+            font-size: 18px;
+            font-weight: 600;
+            color: #101010;
+            margin-bottom: 24px;
+        }
+        .sub-table-box{
+            &.signup{
+                margin-bottom: 20px;
+            }
+        }
+        .sign-up-btn-wrap{
+            display: flex;
+            justify-content: flex-end;
+        }
+        &.complete{
+            max-width: 1000px;
+        }
     }
-    .sub-table-box {
-      &.signup {
-        margin-bottom: 20px;
-      }
-    }
-    .sign-up-btn-wrap {
-      display: flex;
-      justify-content: flex-end;
-    }
-    &.complete {
-      max-width: 1000px;
-    }
-  }
+    
 }
 
 // 회원가입 완료
-.complete-box-wrap {
-  padding: 72px 80px;
-  .complete-tit {
-    font-size: 18px;
-    font-weight: 600;
-    color: #101010;
-    margin-bottom: 17px;
-  }
-  .complete-txt {
-    font-size: 13px;
-    font-weight: 400;
-    color: #101010;
-    margin-bottom: 27px;
-  }
-  .complete-email-wrap {
-    padding: 36px 30px;
-    border-radius: 2px;
-    background: #f4f4f7;
-    margin-bottom: 20px;
-    .email-info {
-      font-size: 13px;
-      font-weight: 400;
-      color: #000;
-      span {
-        color: #204af4;
-        font-weight: 500;
-      }
+.complete-box-wrap{
+    padding: 72px 80px;
+    .complete-tit{
+        font-size: 18px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 17px;
     }
-  }
-  .complete-btn {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
+    .complete-txt{
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        margin-bottom: 27px;
+    }
+    .complete-email-wrap{
+        padding: 36px 30px;
+        border-radius: 2px;
+        background: #F4F4F7;
+        margin-bottom: 20px;
+        .email-info{
+            font-size: 13px;
+            font-weight: 400;
+            color: #000;
+            span{
+                color: #204AF4;
+                font-weight: 500;
+            }
+        }
+    }
+    .complete-btn{
+        display: flex;
+        justify-content: flex-end;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 579e1334..d70732b8 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -14,6 +14,7 @@ $alert-color: #101010;
     scale: 1;
   }
 }
+
 @keyframes unmountpop {
   from {
     opacity: 1;
@@ -30,6 +31,7 @@ $alert-color: #101010;
   font-weight: 400;
   color: #fff;
 }
+
 .bold-font {
   font-size: 12px;
   font-weight: 500;
@@ -46,51 +48,67 @@ $alert-color: #101010;
   border-radius: 4px;
   background-color: #272727;
   z-index: 9999999;
+
   &.xxxm {
     width: 240px;
   }
+
   &.xxm {
     width: 270px;
   }
+
   &.xm {
     width: 300px;
   }
+
   &.ssm {
     width: 380px;
   }
+
   &.sm {
     width: 580px;
   }
+
   &.r {
     width: 400px;
   }
+
   &.lr {
     width: 440px;
   }
+
   &.lrr {
     width: 480px;
   }
+
   &.ml {
     width: 530px;
   }
+
   &.l-2 {
     width: 640px;
   }
+
   &.lx-2 {
     width: 740px;
   }
+
   &.lx {
     width: 770px;
   }
+
   &.l {
     width: 800px;
   }
+
   &.mount {
-    animation: mountpop 0.17s ease-in-out forwards;
+    animation: mountpop .17s ease-in-out forwards;
   }
+
   &.unmount {
-    animation: unmountpop 0.17s ease-in-out forwards;
+    animation: unmountpop .17s ease-in-out forwards;
   }
+
   &.alert {
     position: absolute;
     top: 50%;
@@ -98,21 +116,25 @@ $alert-color: #101010;
     transform: translate(-50%, -50%);
     background-color: transparent;
     border: none;
+
     .modal-head {
       background-color: transparent;
       padding: 0 0 8px;
+
       .modal-close {
         width: 20px;
         height: 20px;
         background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
       }
     }
+
     .modal-body {
       background-color: #fff;
       padding: 22px;
       border-radius: 4px;
       border: 1px solid #101010;
       color: $alert-color;
+
       .alert-title {
         font-size: 13px;
         font-weight: 700;
@@ -122,6 +144,7 @@ $alert-color: #101010;
     }
   }
 }
+
 .modal-head {
   display: flex;
   align-items: center;
@@ -133,6 +156,7 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: 700;
   }
+
   .modal-close {
     margin-left: auto;
     color: transparent;
@@ -142,50 +166,64 @@ $alert-color: #101010;
     background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
   }
 }
+
 .modal-body {
   padding: 24px;
+
   .modal-btn-wrap {
     display: flex;
     align-items: center;
     gap: 5px;
+
     button {
       flex: 1;
     }
+
     &.sub {
       button {
         flex: 1 1 auto;
         padding: 0;
       }
+
       margin-bottom: 14px;
     }
   }
+
   .modal-check-btn-wrap {
     margin-top: 15px;
+
     .check-wrap-title {
       font-size: $pop-normal-size;
       color: $pop-color;
       font-weight: 600;
+
       &.light {
         font-weight: $pop-normal-weight;
       }
     }
+
     .flex-check-box {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 15px;
+
       &.for2 {
         justify-content: flex-end;
+
         button {
           width: calc(50% - 5px);
         }
+
         &.btn {
           gap: 5px;
+
           button {
             width: calc(50% - 2.5px);
           }
         }
       }
+
       &.for-line {
         button {
           flex: 1;
@@ -193,18 +231,22 @@ $alert-color: #101010;
       }
     }
   }
+
   .outer-line-wrap {
-    border-top: 1px solid #3c3c3c;
+    border-top: 1px solid #3C3C3C;
     margin-top: 10px;
     padding-top: 15px;
     margin-bottom: 15px;
+
     > div {
       margin-bottom: 15px;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
+
   .modal-guide {
     display: block;
     font-size: $pop-normal-size;
@@ -216,15 +258,17 @@ $alert-color: #101010;
 .adsorption-point {
   display: flex;
   align-items: center;
-  background-color: #3a3a3a;
+  background-color: #3A3A3A;
   border-radius: 3px;
   padding-left: 11px;
   overflow: hidden;
   transition: all 0.17s ease-in-out;
+
   span {
     font-size: $pop-normal-size;
     color: #898989;
   }
+
   i {
     display: flex;
     align-items: center;
@@ -234,10 +278,11 @@ $alert-color: #101010;
     font-size: 13px;
     color: #898989;
   }
+
   &.act {
     i {
       color: $pop-color;
-      background-color: #1083e3;
+      background-color: #1083E3;
     }
   }
 }
@@ -248,68 +293,83 @@ $alert-color: #101010;
   align-items: center;
   gap: 15px;
   padding-bottom: 15px;
+
   &.border {
     border-bottom: 1px solid #424242;
   }
 }
+
 .grid-option-wrap {
   .grid-option-box {
     display: flex;
     align-items: center;
     background-color: transparent;
-    border: 1px solid #3d3d3d;
+    border: 1px solid #3D3D3D;
     border-radius: 2px;
     padding: 15px 10px;
     gap: 20px;
     margin-bottom: 10px;
+
     .grid-input-form {
       display: flex;
       align-items: center;
+
       span {
         flex: none;
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
       }
+
       .input-grid {
         width: 54px;
+
         input {
           width: 100%;
         }
       }
     }
+
     &:last-child {
       margin-bottom: 0;
     }
   }
 }
+
 .select-form {
   .sort-select {
     width: 100%;
   }
 }
+
 .grid-select {
   flex: 1;
+
   &.no-flx {
     flex: unset;
   }
+
   .sort-select {
     width: 100%;
     background-color: #313131;
     min-width: auto;
     font-size: 12px;
     border: none;
+
     p {
       font-size: 12px;
     }
+
     > ul {
       border: none;
     }
   }
+
   &.right {
     p {
       text-align: right;
     }
+
     ul {
       li {
         justify-content: flex-end;
@@ -317,9 +377,11 @@ $alert-color: #101010;
     }
   }
 }
+
 .grid-btn-wrap {
   padding-top: 15px;
   text-align: right;
+
   button {
     padding: 0 10px;
   }
@@ -331,13 +393,16 @@ $alert-color: #101010;
   color: $pop-color;
   font-weight: $pop-normal-weight;
   padding-bottom: 15px;
+
 }
+
 .grid-direction {
   display: flex;
   align-items: center;
   gap: 5px;
   flex: 1;
 }
+
 .direction {
   width: 22px;
   height: 22px;
@@ -347,17 +412,21 @@ $alert-color: #101010;
   background-position: center;
   background-size: 16px 15px;
   border-radius: 50%;
-  transition: all 0.15s ease-in-out;
+  transition: all .15s ease-in-out;
   opacity: 0.6;
+
   &.down {
     transform: rotate(180deg);
   }
+
   &.left {
     transform: rotate(-90deg);
   }
+
   &.right {
     transform: rotate(90deg);
   }
+
   &:hover,
   &.act {
     opacity: 1;
@@ -372,21 +441,26 @@ $alert-color: #101010;
     font-weight: $pop-bold-weight;
   }
 }
+
 .input-move-wrap {
   display: flex;
   align-items: center;
   gap: 5px;
+
   span {
     color: $pop-color;
     font-size: $pop-normal-size;
   }
+
   .input-move {
     width: 130px;
+
     input {
       width: 100%;
     }
   }
 }
+
 .direction-move-wrap {
   flex: none;
   display: grid;
@@ -398,6 +472,7 @@ $alert-color: #101010;
 .placement-table {
   table {
     table-layout: fixed;
+
     tr {
       th {
         display: flex;
@@ -408,12 +483,14 @@ $alert-color: #101010;
         padding: 18px 0;
         border-bottom: 1px solid #424242;
       }
+
       td {
         font-size: $pop-normal-size;
         color: $pop-color;
         border-bottom: 1px solid #424242;
         padding-left: 20px;
       }
+
       &:first-child {
         td,
         th {
@@ -422,6 +499,7 @@ $alert-color: #101010;
       }
     }
   }
+
   .tooltip {
     position: relative;
     display: block;
@@ -431,17 +509,20 @@ $alert-color: #101010;
     background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
     background-size: cover;
   }
+
   &.light {
     padding: 0;
-    th,
-    td {
+
+    th, td {
       color: $alert-color;
       border-bottom: none;
-      border-top: 1px solid #efefef;
+      border-top: 1px solid #EFEFEF;
     }
+
     th {
       padding: 14px 0;
     }
+
     tr {
       &:first-child {
         td,
@@ -449,6 +530,7 @@ $alert-color: #101010;
           padding-top: 14px;
         }
       }
+
       &:last-child {
         td,
         th {
@@ -464,20 +546,24 @@ $alert-color: #101010;
   align-items: center;
   gap: 10px;
 }
+
 .placement-option {
   display: flex;
   align-items: center;
   gap: 20px;
 }
+
 .select-wrap {
   div {
     width: 100%;
   }
 }
+
 .flex-ment {
   display: flex;
   align-items: center;
   gap: 5px;
+
   span {
     font-size: $pop-normal-size;
     color: $pop-color;
@@ -494,18 +580,22 @@ $alert-color: #101010;
     display: flex;
     align-items: center;
     margin-bottom: 14px;
+
     &:last-child {
       margin-bottom: 0;
     }
+
     .outline-form {
       // width: 50%;
       margin-right: 15px;
     }
   }
+
   &:last-child {
     border-bottom: 1px solid #424242;
   }
 }
+
 .outline-form {
   display: flex;
   align-items: center;
@@ -517,6 +607,7 @@ $alert-color: #101010;
     font-weight: $pop-bold-weight;
     color: $pop-color;
     margin-right: 10px;
+
     &.thin {
       width: auto;
       font-weight: $pop-normal-weight;
@@ -537,6 +628,7 @@ $alert-color: #101010;
     background-size: 12px 12px;
     background-position: center;
   }
+
   &:last-child {
     margin-right: 0;
   }
@@ -544,24 +636,28 @@ $alert-color: #101010;
 
 .cul-wrap {
   display: flex;
+
   .outline-box {
     width: 50%;
     margin-right: 15px;
+
     .outline-form {
       width: 100%;
       margin-bottom: 14px;
       margin-right: 0;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
   }
+
   .cul-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50%;
-    background-color: #3d3d3d;
+    background-color: #3D3D3D;
     border-radius: 2px;
   }
 }
@@ -569,7 +665,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide {
   font-size: $pop-normal-size;
-  color: #aaa;
+  color: #AAA;
   font-weight: $pop-normal-weight;
   margin-bottom: 14px;
 }
@@ -580,16 +676,19 @@ $alert-color: #101010;
   font-weight: $pop-bold-weight;
   margin-bottom: 10px;
 }
+
 .properties-setting-wrap {
   &.outer {
     margin-top: 24px;
   }
+
   .setting-btn-wrap {
     display: flex;
     align-items: center;
     padding: 14px 0;
     border-top: 1px solid #424242;
     border-bottom: 1px solid #424242;
+
     .setting-btn {
       display: block;
       width: 100%;
@@ -598,17 +697,21 @@ $alert-color: #101010;
       color: #fff;
       font-weight: 700;
       border-radius: 2px;
-      transition: all 0.15s ease-in-out;
+      transition: all .15s ease-in-out;
+
       &.green {
         background-color: #305941;
-        border: 1px solid #45cd7d;
+        border: 1px solid #45CD7D;
+
         &:hover {
           background-color: #3a6b4e;
         }
       }
+
       &.blue {
-        background-color: #2e5360;
-        border: 1px solid #3fbae6;
+        background-color: #2E5360;
+        border: 1px solid #3FBAE6;
+
         &:hover {
           background-color: #365f6e;
         }
@@ -624,34 +727,39 @@ $alert-color: #101010;
   grid-template-rows: 1fr 1fr;
   gap: 24px 10px;
   margin-bottom: 24px;
+
   .shape-box {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 13px;
-    background-color: #3d3d3d;
-    transition: background 0.15s ease-in-out;
+    background-color: #3D3D3D;
+    transition: background .15s ease-in-out;
+
     img {
       max-width: 100%;
     }
   }
+
   .shape-title {
     font-size: $pop-normal-size;
     font-weight: $pop-bold-weight;
     color: $pop-color;
     margin-top: 10px;
     text-align: center;
-    transition: color 0.15s ease-in-out;
+    transition: color .15s ease-in-out;
   }
+
   .shape-menu-box {
     &.act,
     &:hover {
       .shape-box {
-        background-color: #008bff;
+        background-color: #008BFF;
       }
+
       .shape-title {
-        color: #008bff;
+        color: #008BFF;
       }
     }
   }
@@ -662,12 +770,14 @@ $alert-color: #101010;
   border-top: 1px solid #424242;
   border-bottom: 1px solid #424242;
 }
+
 .padding-form {
   padding-left: 23px;
 }
+
 .discrimination-box {
   padding: 16px 12px;
-  border: 1px solid #3d3d3d;
+  border: 1px solid #3D3D3D;
   border-radius: 2px;
 }
 
@@ -681,8 +791,10 @@ $alert-color: #101010;
 .eaves-keraba-table {
   display: table;
   border-collapse: collapse;
+
   .eaves-keraba-item {
     display: table-row;
+
     .eaves-keraba-th,
     .eaves-keraba-td {
       font-size: $pop-normal-size;
@@ -692,22 +804,26 @@ $alert-color: #101010;
       vertical-align: middle;
       padding-bottom: 14px;
     }
+
     .eaves-keraba-td {
       padding-left: 10px;
     }
+
     .eaves-keraba-ico {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 5px;
-      background-color: #3d3d3d;
-      border: 1px solid #3d3d3d;
+      background-color: #3D3D3D;
+      border: 1px solid #3D3D3D;
       border-radius: 2px;
       cursor: pointer;
+
       &.act {
-        border: 1px solid #ed0004;
+        border: 1px solid #ED0004;
       }
     }
+
     &:last-child {
       .eaves-keraba-th,
       .eaves-keraba-td {
@@ -716,14 +832,17 @@ $alert-color: #101010;
     }
   }
 }
+
 .guide {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
   color: $pop-color;
   margin-bottom: 24px;
+
   &.sm {
     margin-bottom: 15px;
   }
+
   span {
     display: block;
   }
@@ -736,12 +855,14 @@ $alert-color: #101010;
   padding-bottom: 14px;
   border-bottom: 1px solid #424242;
   margin-bottom: 14px;
+
   span {
     font-size: $pop-normal-size;
     color: $pop-color;
     font-weight: $pop-bold-weight;
     margin-right: 10px;
   }
+
   .allocation-edit {
     display: flex;
     align-items: center;
@@ -753,6 +874,7 @@ $alert-color: #101010;
     font-weight: $pop-normal-weight;
     border: 1px solid #484848;
     background-color: #323234;
+
     i {
       display: block;
       width: 12px;
@@ -769,11 +891,14 @@ $alert-color: #101010;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
+
   .flex-ment {
     gap: 10px;
+
     .dec {
       text-decoration: underline;
     }
+
     .delete {
       display: block;
       width: 15px;
@@ -782,6 +907,7 @@ $alert-color: #101010;
       background-size: cover;
     }
   }
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -792,6 +918,7 @@ $alert-color: #101010;
   display: flex;
   align-items: center;
   gap: 5px;
+
   button {
     display: flex;
     align-items: center;
@@ -804,7 +931,8 @@ $alert-color: #101010;
     border: 1px solid #646464;
     border-radius: 2px;
     padding: 0 10px;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     i {
       height: 15px;
       display: block;
@@ -812,25 +940,30 @@ $alert-color: #101010;
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
-      transition: all 0.15s ease-in-out;
+      transition: all .15s ease-in-out;
+
       &.allocation01 {
         background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
         width: 15px;
       }
+
       &.allocation02 {
         background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
         width: 18px;
       }
     }
+
     &.act,
     &:hover {
       color: #101010;
       border: 1px solid #101010;
       background-color: #fff;
+
       i {
         &.allocation01 {
           background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
         }
+
         &.allocation02 {
           background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
         }
@@ -852,11 +985,13 @@ $alert-color: #101010;
   grid-template-rows: repeat(3, 90px);
   gap: 10px;
   margin-bottom: 10px;
+
   .shape-menu-box {
     border-radius: 2px;
-    background-color: #3d3d3d;
+    background-color: #3D3D3D;
     padding: 8px;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     .shape-box {
       display: flex;
       justify-content: center;
@@ -867,9 +1002,10 @@ $alert-color: #101010;
       background-color: #313131;
       border-radius: 2px;
     }
+
     &.act,
     &:hover {
-      background-color: #008bff;
+      background-color: #008BFF;
     }
   }
 }
@@ -880,32 +1016,37 @@ $alert-color: #101010;
   justify-content: center;
   gap: 5px;
   padding: 5px;
-  background-color: #3d3d3d;
+  background-color: #3D3D3D;
   margin-bottom: 24px;
+
   .library-btn {
     width: 30px;
     height: 30px;
-    border: 1px solid #6c6c6c;
+    border: 1px solid #6C6C6C;
     border-radius: 2px;
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     &.ico01 {
       background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
       background-size: 14px 14px;
     }
+
     &.ico02 {
       background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
       background-size: 13px 17px;
     }
+
     &.ico03 {
       background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
       background-size: 17px 13px;
     }
+
     &:hover {
-      border-color: #1083e3;
-      background-color: #1083e3;
+      border-color: #1083E3;
+      background-color: #1083E3;
     }
   }
 }
@@ -913,27 +1054,33 @@ $alert-color: #101010;
 .plane-shape-wrapper {
   display: flex;
   gap: 10px;
+
   .plane-box {
     padding: 10px;
     border-radius: 2px;
-    background-color: #3d3d3d;
+    background-color: #3D3D3D;
+
     .plane-box-tit {
       font-size: $pop-normal-size;
       font-weight: 600;
       color: $pop-color;
       margin-bottom: 10px;
     }
+
     &.shape-box {
       flex: 1;
+
       .shape-box-inner {
         display: flex;
         gap: 10px;
         min-height: 140px;
+
         .shape-img {
           position: relative;
           flex: 1;
           background-color: #fff;
           border-radius: 2px;
+
           img {
             position: absolute;
             top: 50%;
@@ -941,18 +1088,21 @@ $alert-color: #101010;
             transform: translate(-50%, -50%);
           }
         }
+
         .shape-data {
           flex: none;
           width: 190px;
           background-color: #313131;
           border-radius: 2px;
           padding: 15px;
+
           .eaves-keraba-table {
             .eaves-keraba-item {
               .eaves-keraba-th,
               .eaves-keraba-td {
                 padding-bottom: 10px;
               }
+
               &:last-child {
                 .eaves-keraba-th,
                 .eaves-keraba-td {
@@ -964,11 +1114,13 @@ $alert-color: #101010;
         }
       }
     }
+
     &.direction-box {
       display: flex;
       flex-direction: column;
       flex: none;
       width: 180px;
+
       .plane-direction-box {
         flex: 1;
         display: flex;
@@ -980,36 +1132,43 @@ $alert-color: #101010;
     }
   }
 }
+
 .plane-direction {
   width: 150px;
   position: relative;
   height: 120px;
+
   span {
     position: absolute;
     font-size: 12px;
     font-weight: 500;
-    color: #b1b1b1;
+    color: #B1B1B1;
+
     &.top {
       top: 0;
       left: 50%;
       transform: translateX(-50%);
     }
+
     &.right {
       top: 50%;
       right: 0;
       transform: translateY(-50%);
     }
+
     &.bottom {
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
     }
+
     &.left {
       top: 50%;
       left: 0;
       transform: translateY(-50%);
     }
   }
+
   .plane-btn {
     position: absolute;
     width: 28px;
@@ -1020,27 +1179,32 @@ $alert-color: #101010;
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 50%;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     &.up {
       top: 22px;
       left: 50%;
       transform: translateX(-50%);
     }
+
     &.right {
       top: 50%;
       right: 32px;
       transform: translateY(-50%) rotate(90deg);
     }
+
     &.down {
       bottom: 22px;
       left: 50%;
       transform: translateX(-50%) rotate(180deg);
     }
+
     &.left {
       top: 50%;
       left: 32px;
       transform: translateY(-50%) rotate(270deg);
     }
+
     &:hover,
     &.act {
       background-color: #fff;
@@ -1068,6 +1232,7 @@ $alert-color: #101010;
   align-items: center;
   justify-content: center;
 }
+
 .discrimination-tit {
   font-size: 13px;
   color: #fff;
@@ -1079,11 +1244,13 @@ $alert-color: #101010;
   min-height: 206px;
   gap: 24px;
   margin-top: 14px;
+
   .object-size-img {
     position: relative;
     flex: none;
     width: 200px;
     background-color: #fff;
+
     img {
       position: absolute;
       top: 50%;
@@ -1097,10 +1264,11 @@ $alert-color: #101010;
 .display-change-wrap {
   margin: 24px 0;
 }
+
 .warning {
   font-size: $pop-normal-size;
   font-weight: $pop-normal-weight;
-  color: #ffafaf;
+  color: #FFAFAF;
 }
 
 // 각 변 속성 변경
@@ -1114,10 +1282,12 @@ $alert-color: #101010;
 .drawing-flow-wrap {
   display: flex;
   gap: 10px;
+
   .discrimination-box {
     flex: 1;
     display: flex;
     flex-direction: column;
+
     .object-direction-wrap {
       flex: 1;
     }
@@ -1129,6 +1299,7 @@ $alert-color: #101010;
   align-items: center;
   justify-content: center;
 }
+
 .compas-box-inner {
   position: relative;
   width: 200px;
@@ -1152,157 +1323,206 @@ $alert-color: #101010;
       top: 12.5px;
       left: 50%;
       font-size: 11px;
-      color: #8b8b8b;
+      color: #8B8B8B;
       font-weight: 500;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-use-select: none;
       user-select: none;
     }
+
     &:nth-child(1) {
       transform: rotate(180deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(180deg);
       }
     }
+
     &:nth-child(2) {
       transform: rotate(195deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(165deg);
       }
     }
+
     &:nth-child(3) {
       transform: rotate(210deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(150deg);
       }
     }
+
     &:nth-child(4) {
       transform: rotate(225deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(135deg);
       }
     }
+
     &:nth-child(5) {
       transform: rotate(240deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(120deg);
       }
     }
+
     &:nth-child(6) {
       transform: rotate(255deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(105deg);
       }
     }
+
     &:nth-child(7) {
       transform: rotate(270deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(90deg);
       }
     }
+
     &:nth-child(8) {
       transform: rotate(285deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(75deg);
       }
     }
+
     &:nth-child(9) {
       transform: rotate(300deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(60deg);
       }
     }
+
     &:nth-child(10) {
       transform: rotate(315deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(45deg);
       }
     }
+
     &:nth-child(11) {
       transform: rotate(330deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(30deg);
       }
     }
+
     &:nth-child(12) {
       transform: rotate(345deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(15deg);
       }
     }
+
     &:nth-child(13) {
       transform: rotate(0deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(0deg);
       }
     }
+
     &:nth-child(14) {
       transform: rotate(15deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-15deg);
       }
     }
+
     &:nth-child(15) {
       transform: rotate(30deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-30deg);
       }
     }
+
     &:nth-child(16) {
       transform: rotate(45deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-45deg);
       }
     }
+
     &:nth-child(17) {
       transform: rotate(60deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-60deg);
       }
     }
+
     &:nth-child(18) {
       transform: rotate(75deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-75deg);
       }
     }
+
     &:nth-child(19) {
       transform: rotate(90deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-90deg);
       }
     }
+
     &:nth-child(20) {
       transform: rotate(105deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-105deg);
       }
     }
+
     &:nth-child(21) {
       transform: rotate(120deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-120deg);
       }
     }
+
     &:nth-child(22) {
       transform: rotate(135deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-135deg);
       }
     }
+
     &:nth-child(23) {
       transform: rotate(150deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-150deg);
       }
     }
+
     &:nth-child(24) {
       transform: rotate(165deg) translate(-50%, -50%);
+
       i {
         transform: translateX(-50%) rotate(-165deg);
       }
     }
+
     &.act {
       &::after {
         content: '';
@@ -1314,11 +1534,13 @@ $alert-color: #101010;
         height: 5px;
         background-color: #fff;
       }
+
       i {
         color: #fff;
       }
     }
   }
+
   .compas {
     position: absolute;
     top: 50%;
@@ -1328,6 +1550,7 @@ $alert-color: #101010;
     height: 148px;
     border: 4px solid #fff;
     border-radius: 50%;
+
     .compas-arr {
       width: 100%;
       height: 100%;
@@ -1337,12 +1560,14 @@ $alert-color: #101010;
   }
 }
 
+
 // 지붕모듈선택
 .roof-module-tab {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
+
   .module-tab-bx {
     flex: 1;
     height: 34px;
@@ -1351,17 +1576,19 @@ $alert-color: #101010;
     border-radius: 2px;
     background-color: transparent;
     font-size: 12px;
-    color: #aaa;
+    color: #AAA;
     text-align: center;
     cursor: default;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     &.act {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
       color: #fff;
       font-weight: 500;
     }
   }
+
   .tab-arr {
     display: block;
     width: 9px;
@@ -1370,7 +1597,8 @@ $alert-color: #101010;
     background-position: center;
     background-size: cover;
     background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     &.act {
       background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
     }
@@ -1379,11 +1607,14 @@ $alert-color: #101010;
 
 .roof-module-compas {
   margin-bottom: 24px;
+
   .compas-box-inner {
     width: 280px;
     height: 253px;
+
     .circle {
       top: 86%;
+
       &:nth-child(1),
       &:nth-child(7),
       &:nth-child(13),
@@ -1396,20 +1627,23 @@ $alert-color: #101010;
           transform: translateX(-50%);
           width: 1px;
           height: 6px;
-          background-color: #8b8b8b;
+          background-color: #8B8B8B;
         }
       }
+
       i {
         top: 32px;
       }
+
       &.act {
         i {
-          color: #8b8b8b;
+          color: #8B8B8B;
         }
       }
     }
   }
 }
+
 .center-wrap {
   display: flex;
   flex-direction: column;
@@ -1420,6 +1654,7 @@ $alert-color: #101010;
 .module-table-flex-wrap {
   display: flex;
   gap: 10px;
+
   .outline-form {
     flex: 1;
   }
@@ -1427,6 +1662,7 @@ $alert-color: #101010;
 
 .module-box-tab {
   display: flex;
+
   .module-btn {
     flex: 1;
     border-top: 1px solid #505050;
@@ -1437,10 +1673,12 @@ $alert-color: #101010;
     height: 30px;
     font-size: 12px;
     font-weight: 400;
-    transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
+
     &:first-child {
       border-left: 1px solid #505050;
     }
+
     &.act {
       border-color: #fff;
       background-color: #fff;
@@ -1451,32 +1689,39 @@ $alert-color: #101010;
 
 .module-table-box {
   flex: 1;
-  background-color: #3d3d3d;
+  background-color: #3D3D3D;
   border-radius: 2px;
+
   .module-table-inner {
     padding: 10px;
+
     .outline-form {
       span {
         width: auto;
       }
     }
+
     .module-table-tit {
       padding: 10px 0;
       font-size: 12px;
       color: #fff;
-      border-bottom: 1px solid #4d4d4d;
+      border-bottom: 1px solid #4D4D4D;
     }
+
     .eaves-keraba-table {
       width: 100%;
       margin-top: 15px;
+
       .eaves-keraba-th {
         width: 72px;
       }
+
       .eaves-keraba-th,
       .eaves-keraba-td {
         padding-bottom: 5px;
       }
     }
+
     .self-table-tit {
       font-size: 12px;
       font-weight: 500;
@@ -1484,20 +1729,25 @@ $alert-color: #101010;
       padding-bottom: 15px;
     }
   }
+
   .warning-guide {
     padding: 20px;
+
     .warning {
-      color: #ffcaca;
+      color: #FFCACA;
       max-height: 55px;
       overflow-y: auto;
       padding-right: 30px;
+
       &::-webkit-scrollbar {
         width: 4px;
         background-color: transparent;
       }
+
       &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
+        background-color: #D9D9D9;
       }
+
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
@@ -1507,23 +1757,27 @@ $alert-color: #101010;
 
 .module-self-table {
   display: table;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid #4D4D4D;
   border-collapse: collapse;
   width: 100%;
+
   .self-table-item {
     display: table-row;
+
     .self-item-td,
     .self-item-th {
       display: table-cell;
       vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
+      border-bottom: 1px solid #4D4D4D;
     }
+
     .self-item-th {
       width: 60px;
       font-size: 12px;
       font-weight: 500;
       color: #fff;
     }
+
     .self-item-td {
       font-size: 12px;
       font-weight: 400;
@@ -1537,28 +1791,35 @@ $alert-color: #101010;
   display: flex;
   align-items: center;
   margin-top: 15px;
+
   button {
     margin-left: auto;
   }
 }
+
 .hexagonal-wrap {
   .hexagonal-item {
     padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4D4D4D;
+
     &:first-child {
       padding-top: 0;
     }
+
     &:last-child {
       padding-bottom: 0;
       border: none;
     }
+
     .hexagonal-flx-auto {
       display: flex;
       justify-content: space-between;
     }
+
     .hexagonal-flx {
       display: flex;
       align-items: center;
+
       button {
         margin-left: auto;
       }
@@ -1574,16 +1835,20 @@ $alert-color: #101010;
 .x-scroll-table {
   overflow-x: auto;
   padding-bottom: 5px;
+
   .roof-module-table {
     min-width: 1200px;
   }
+
   &::-webkit-scrollbar {
     height: 4px;
     background-color: transparent;
   }
+
   &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+    background-color: #D9D9D9;
   }
+
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
@@ -1600,8 +1865,9 @@ $alert-color: #101010;
   gap: 5px;
   min-height: 60px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.20);
 }
+
 .circuit-table-tit {
   color: #fff;
   font-size: 12px;
@@ -1616,13 +1882,16 @@ $alert-color: #101010;
   max-height: 560px;
   overflow-y: auto;
   margin-bottom: 15px;
+
   &::-webkit-scrollbar {
     width: 4px;
     background-color: transparent;
   }
+
   &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+    background-color: #D9D9D9;
   }
+
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
@@ -1632,13 +1901,16 @@ $alert-color: #101010;
   display: flex;
   gap: 10px;
   margin-bottom: 10px;
+
   .circuit-table-flx-box {
     flex: 1;
     display: flex;
     flex-direction: column;
+
     .bottom-wrap {
       margin-top: auto;
     }
+
     .roof-module-table {
       table {
         table-layout: fixed;
@@ -1660,6 +1932,7 @@ $alert-color: #101010;
   gap: 15px 0;
   margin-bottom: 24px;
 }
+
 .additional-wrap {
   padding: 24px 0;
   border-top: 1px solid #424242;
@@ -1670,22 +1943,26 @@ $alert-color: #101010;
   align-items: center;
   padding: 5px 0;
   gap: 15px;
+
   .additional-color-box {
     display: flex;
     align-items: center;
     gap: 8px;
+
     .additional-color {
       display: block;
       width: 16px;
       height: 16px;
+
       &.pink {
-        border: 2px solid #ea10ac;
-        background-color: #16417d;
+        border: 2px solid #EA10AC;
+        background-color: #16417D;
       }
+
       &.white {
-        border: 2px solid #fff;
+        border: 2px solid #FFF;
         background-color: #001027;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index c288c8e1..b575113b 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,924 +1,792 @@
 * {
-  -webkit-text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  text-size-adjust: none;
-  box-sizing: content-box;
+    -webkit-text-size-adjust:none;
+    -moz-text-size-adjust:none;
+    -ms-text-size-adjust:none;
+    text-size-adjust: none;
+    box-sizing: content-box
 }
-*,
-::after,
-::before {
-  box-sizing: border-box;
+*, ::after, ::before {
+    box-sizing: border-box;
 }
-html,
-body {
-  width: 100%;
-  height: 100%;
-  font-size: 16px;
+html, body{
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
 }
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-  font-family: 'Noto Sans JP', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-smooth: never;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+    font-family: 'Noto Sans JP', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
 }
 body {
-  line-height: 1.4;
-}
-body:first-of-type caption {
-  display: none;
+	line-height: 1.4;
 }
+body:first-of-type caption { display:none;}
 
-ol,
-ul {
-  list-style: none;
+ol, ul {
+	list-style: none;
 }
-blockquote,
-q {
-  quotes: none;
+blockquote, q {
+	quotes: none;
 }
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
 }
 table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: 0 none;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing:0;
+    border:0 none;
 }
-caption,
-th,
-td {
-  text-align: left;
-  font-weight: normal;
-  border: 0;
+caption, th, td {
+    text-align:left;
+    font-weight: normal;
+    border:0;
 }
 
-a {
-  cursor: pointer;
-  color: #000;
+a { 
+    cursor:pointer;
+    color:#000;
 }
-a,
-a:hover,
-a:active {
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
+a, a:hover, a:active {
+    text-decoration:none;
+    -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input,
-select,
-textarea,
-button,
-a,
-label {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+input, select, textarea, button, a, label {
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
-button,
-input[type='text'],
-input[type='button'] {
-  -webkit-appearance: none;
-  -webkit-border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0;
+button,input[type=text], input[type=button] {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    -webkit-appearance:none;
+    appearance: none;
+    border-radius: 0
 }
-input[type='checkbox'],
-input[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
+input[type=checkbox], input[type=radio] {
+    box-sizing: border-box;
+    padding: 0;
 }
-input,
-select,
-button {
-  border: 0 none;
-  outline: none;
-  margin: 0;
+input, select, button {
+    border:0 none;
+    outline:none;
+    margin:0;
 }
 select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 }
 select::-ms-expand {
-  display: none;
+    display: none;
 }
 ::-webkit-input-placeholder {
-  line-height: 1;
-  font-weight: 300;
-  font-size: 0.938rem;
-  letter-spacing: -0.6px;
-  color: #8b8b8b;
+    line-height:1;
+    font-weight:300;
+    font-size:0.938rem;
+    letter-spacing:-0.6px;
+    color:#8b8b8b;
 }
-.log-box ::-webkit-input-placeholder {
-  color: #8b8b8b;
+.log-box ::-webkit-input-placeholder{
+    color:#8b8b8b;
 }
-button {
-  background: transparent;
-  font-family: 'Noto Sans JP', sans-serif;
-  border: none;
-  padding: 0;
-  margin: 0;
-  line-height: 1.4;
-  color: inherit;
-  outline: none;
-  cursor: pointer;
+button{
+    background: transparent;
+    font-family: 'Noto Sans JP', sans-serif;
+    border: none;
+    padding: 0;
+    margin: 0;
+    line-height: 1.4;
+    color: inherit;
+    outline: none;
+    cursor: pointer;
 }
-.pre {
-  font-family: 'Pretendard', sans-serif !important;
+.pre{
+    font-family: 'Pretendard', sans-serif !important;
 }
 
 // margin
-.mt5 {
-  margin-top: 5px !important;
-}
-.mt10 {
-  margin-top: 10px !important;
-}
-.mt15 {
-  margin-top: 15px !important;
-}
-.mb5 {
-  margin-bottom: 5px !important;
-}
-.mb10 {
-  margin-bottom: 10px !important;
-}
-.mb15 {
-  margin-bottom: 15px !important;
-}
-.mr5 {
-  margin-right: 5px !important;
-}
-.mr10 {
-  margin-right: 10px !important;
-}
-.mr15 {
-  margin-right: 15px !important;
-}
-.ml5 {
-  margin-left: 5px !important;
-}
-.ml10 {
-  margin-left: 10px !important;
-}
-.ml15 {
-  margin-left: 15px !important;
-}
+.mt5{margin-top: 5px !important;}
+.mt10{margin-top: 10px !important;}
+.mt15{margin-top: 15px !important;}
+.mb5{margin-bottom: 5px !important;}
+.mb10{margin-bottom: 10px !important;}
+.mb15{margin-bottom: 15px !important;}
+.mr5{margin-right: 5px !important;}
+.mr10{margin-right: 10px !important;}
+.mr15{margin-right: 15px !important;}
+.ml5{margin-left: 5px !important;}
+.ml10{margin-left: 10px !important;}
+.ml15{margin-left: 15px !important;}
 
 // align
-.al-l {
-  text-align: left !important;
-}
-.al-r {
-  text-align: right !important;
-}
-.al-c {
-  text-align: center !important;
-}
+.al-l{text-align: left !important;}
+.al-r{text-align: right !important;}
+.al-c{text-align: center !important;}
+
 
 // button
-.btn-frame {
-  display: inline-block;
-  padding: 0 7px;
-  height: 34px;
-  line-height: 34px;
-  border-radius: 2px;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 400;
-  border: 1px solid #000;
-  text-align: center;
-  font-family: 'Pretendard', sans-serif;
-  transition: all 0.17s ease-in-out;
-  cursor: pointer;
-  &.block {
-    width: 100%;
-  }
-  &.small {
-    font-family: 'Noto Sans JP', sans-serif;
-    height: 30px;
-    line-height: 30px;
-    font-size: 13px;
-  }
+.btn-frame{
+    display: inline-block;
+    padding: 0 7px;
+    height: 34px;
+    line-height: 34px;
+    border-radius: 2px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 400;
+    border: 1px solid #000;
+    text-align: center;
+    font-family: 'Pretendard', sans-serif;
+    transition: all .17s ease-in-out;
+    cursor: pointer;
+    &.block{
+        width: 100%;
+    }
+    &.small{
+        font-family: 'Noto Sans JP', sans-serif;
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+    }
 
-  &.deepgray {
-    background-color: #2c2c2c;
-    border: 1px solid #484848;
-  }
-  &.gray {
-    background-color: #3c3c3c;
-    border: 1px solid #545454;
-  }
-  &.dark {
-    background-color: #1c1c1c;
-    border: 1px solid #484848;
-  }
-  &.modal {
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: #272727;
-    border: 1px solid #484848;
-    color: #aaa;
-    &:hover {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
-      color: #fff;
-      font-weight: 500;
+    &.deepgray{
+        background-color: #2C2C2C;
+        border: 1px solid #484848;
     }
-  }
-  &.sub-tab {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: #2d2d2d;
-    border: 1px solid #393939;
-    color: #aaa;
-    &.act,
-    &:hover {
-      background-color: #414e6c;
-      border: 1px solid #414e6c;
-      color: #fff;
-      font-weight: 500;
+    &.gray{
+        background-color: #3C3C3C;
+        border: 1px solid #545454;
     }
-  }
-  &.roof {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: transparent;
-    border: 1px solid #484848;
-    color: #fff;
-    &.blue {
-      background-color: #414e6c;
-      border: 1px solid #414e6c;
-      &:hover {
-        background-color: #414e6c;
-        border: 1px solid #414e6c;
-      }
+    &.dark{
+        background-color: #1C1C1C;
+        border: 1px solid #484848;
     }
-    &.white {
-      background-color: #fff;
-      border: 1px solid #fff;
-      color: #101010;
-      &:hover {
-        background-color: #fff;
-        border: 1px solid #fff;
-        color: #101010;
-      }
+    &.modal{
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: #272727;
+        border: 1px solid #484848;
+        color: #aaa;
+        &:hover{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+            color: #fff;
+            font-weight: 500;
+        }
     }
-    &:hover {
-      font-weight: 400;
-      background-color: transparent;
-      border: 1px solid #484848;
-      color: #fff;
+    &.sub-tab{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: #2D2D2D;
+        border: 1px solid #393939;
+        color: #aaa;
+        &.act,
+        &:hover{
+            background-color: #414E6C;
+            border: 1px solid #414E6C;
+            color: #fff;
+            font-weight: 500;
+        }
     }
-  }
-  &.self {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: transparent;
-    border: 1px solid #676767;
-    color: #aaaaaa;
-    &:hover {
-      background-color: #272727;
-      border-color: #676767;
-      font-weight: 400;
+    &.roof{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #484848;
+        color: #fff;
+        &.blue{
+            background-color: #414E6C;
+            border: 1px solid #414E6C;
+            &:hover{
+                background-color: #414E6C;
+                border: 1px solid #414E6C;
+            }
+        }
+        &.white{
+            background-color: #fff;
+            border: 1px solid #fff;
+            color: #101010;
+            &:hover{
+                background-color: #fff;
+                border: 1px solid #fff;
+                color: #101010;
+            }
+        }
+        &:hover{
+            font-weight: 400;
+            background-color: transparent;
+            border: 1px solid #484848;
+            color: #fff;
+        }
     }
-  }
-  &:hover,
-  &.act {
-    background-color: #1083e3;
-    border: 1px solid #1083e3;
-    color: #fff;
-    font-weight: 500;
-  }
-  &.block {
-    display: block;
-    width: 100%;
-  }
-  &.ico-flx {
-    display: flex;
-    align-items: center;
-    .ico {
-      margin-right: 10px;
+    &.self{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #676767;
+        color: #AAAAAA;
+        &:hover{
+            background-color: #272727;
+            border-color: #676767;
+            font-weight: 400;
+        }
     }
     &:hover,
-    &.act {
-      font-weight: 400;
+    &.act{
+        background-color: #1083E3;
+        border: 1px solid #1083E3;
+        color: #fff;
+        font-weight: 500;
     }
-  }
+    &.block{
+        display: block;
+        width: 100%;
+    }
+    &.ico-flx{
+        display: flex;
+        align-items: center;
+        .ico{
+            margin-right: 10px;
+        }
+        &:hover,
+        &.act{
+            font-weight: 400;
+        }
+    }    
 }
 
-.btn-origin {
-  display: inline-block;
-  height: 30px;
-  padding: 0 10px;
-  border-radius: 2px;
-  background-color: #101010;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 400;
-  transition: all 0.15s ease-in-out;
-  &.navy {
-    background-color: #304961;
-    &:hover {
-      background-color: #233546;
+.btn-origin{
+    display: inline-block;
+    height: 30px;
+    padding: 0 10px;
+    border-radius: 2px;
+    background-color: #101010;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    transition: all .15s ease-in-out;
+    &.navy{
+        background-color: #304961;
+        &:hover{
+            background-color: #233546;
+        }
     }
-  }
-  &.grey {
-    background-color: #94a0ad;
-    &:hover {
-      background-color: #607f9a;
+    &.grey{
+        background-color: #94A0AD;
+        &:hover{
+            background-color: #607F9A;
+        }
     }
-  }
 }
 
 // select
-.sort-select {
-  position: relative;
-  display: inline-block;
-  min-width: 100px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 25px 0 10px;
-  background-color: #373737;
-  border: 1px solid #3f3f3f;
-  border-radius: 2px;
-  border-top-left-radius: 2px;
-  color: #fff;
-  cursor: pointer;
-  p {
-    font-size: 13px;
-    color: #fff;
-    height: 100%;
-  }
-  .select-item-wrap {
-    position: absolute;
-    top: 100%;
-    left: -1px;
-    clip-path: inset(0 0 100% 0);
-    width: calc(100% + 2px);
-    padding: 8px 0;
-    max-height: 100px;
-    overflow-y: auto;
-    background-color: #373737;
-    border: 1px solid #3f3f3f;
-    border-radius: 2px;
-    transition: all 0.17s ease-in-out;
-    visibility: hidden;
-    z-index: 999;
-    .select-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 20px;
-      line-height: 1.4;
-      transition: all 0.17s ease-in-out;
-      button {
-        font-size: 12px;
-        color: #fff;
-        line-height: 1.4;
-      }
-      &:hover {
-        background-color: #2c2c2c;
-      }
-    }
-    &::-webkit-scrollbar {
-      width: 2px;
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #5a5a5a;
-      border-radius: 10px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 7px;
-    transform: translateY(-50%);
-    width: 10px;
-    height: 6px;
-    background: url(/static/images/common/select-arr.svg) no-repeat center;
-    background-size: cover;
-    transition: all 0.17s ease-in-out;
-  }
-  &.active {
-    .select-item-wrap {
-      clip-path: inset(0 0 0 0);
-      visibility: visible;
-    }
-    &:after {
-      transform: translateY(-50%) rotate(-180deg);
-    }
-  }
-}
-
-.select-light {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 30px;
-  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
-  background-size: 10px 6px;
-  border: 1px solid #eee;
-  padding: 0 30px 0 10px;
-  font-size: 13px;
-  color: #45576f;
-  font-family: 'Noto Sans JP', sans-serif;
-  cursor: pointer;
-  &:disabled {
-    opacity: 1;
-    background-color: #fafafa;
-    color: #999;
-    cursor: default;
-  }
-  &.black {
-    color: #101010;
-  }
-  &.dark {
-    background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
-    color: #898989;
-    font-size: 12px;
-    border-radius: 2px;
-    border: none;
-  }
-}
-
-// input
-.form-input {
-  label {
-    display: block;
-    color: #aaa;
-    font-size: 12px;
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-}
-input[type='number'],
-input[type='text'] {
-  &.input-origin {
+.sort-select{
+    position: relative;
     display: inline-block;
+    min-width: 100px;
     height: 30px;
     line-height: 30px;
+    padding: 0 25px 0 10px;
+    background-color: #373737;
+    border: 1px solid #3F3F3F;
     border-radius: 2px;
-    background-color: #323234;
+    border-top-left-radius: 2px;
     color: #fff;
-    font-size: 12px;
-    font-weight: 500;
-    font-family: 'Pretendard', sans-serif;
-    padding: 0 10px;
-    letter-spacing: 0px;
-    text-align: right;
-    &::placeholder {
-      opacity: 1;
-      font-size: 12px;
-      letter-spacing: 0px;
+    cursor: pointer;
+    p{
+        font-size: 13px;
+        color: #fff;
+        height: 100%;
     }
-    &.block {
-      width: 100%;
+    .select-item-wrap{
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        clip-path:inset(0 0 100% 0);
+        width: calc(100% + 2px);
+        padding: 8px 0;
+        max-height: 100px;
+        overflow-y: auto;
+        background-color: #373737;
+        border: 1px solid #3F3F3F;
+        border-radius: 2px;
+        transition: all 0.17s ease-in-out;
+        visibility: hidden;
+        z-index: 999;
+        .select-item{
+            display: flex;
+            align-items: center;
+            padding: 8px 20px;
+            line-height: 1.4;
+            transition: all .17s ease-in-out;
+            button{
+                font-size: 12px;
+                color: #fff;
+                line-height: 1.4;
+            }
+            &:hover{
+                background-color: #2C2C2C;
+            }
+        }
+        &::-webkit-scrollbar {
+            width: 2px;
+            background-color: transparent;
+            
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #5a5a5a;
+            border-radius: 10px;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
     }
-    &:read-only {
-      color: #aaa;
+    &::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 7px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(/static/images/common/select-arr.svg) no-repeat center;
+        background-size: cover;
+        transition: all .17s ease-in-out;
     }
-    &.plane {
-      font-family: 'Noto Sans JP', sans-serif;
-      border: 1px solid #525252;
-      background-color: transparent;
+    &.active{
+        .select-item-wrap{
+            clip-path: inset(0 0 0 0);
+            visibility: visible;
+        }
+        &:after{
+            transform: translateY(-50%) rotate(-180deg);
+        }
     }
-  }
-  &.input-light {
+}
+
+.select-light{
+    position: relative;
     display: block;
     width: 100%;
     height: 30px;
-    padding: 0 10px;
+    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+    background-size: 10px 6px;
     border: 1px solid #eee;
-    border-radius: 2px;
-    background-color: #fff;
-    font-family: 'Noto Sans JP', sans-serif;
+    padding: 0 30px 0 10px;
     font-size: 13px;
-    color: #45576f;
-    font-weight: normal;
-    transition: border-color 0.17s ease-in-out;
-    text-align: left;
-    &:read-only {
-      background-color: #fafafa;
-      color: #999999;
+    color: #45576F;
+    font-family: 'Noto Sans JP', sans-serif;
+    cursor: pointer;
+    &:disabled{
+        opacity: 1;
+        background-color: #FAFAFA;
+        color: #999;
+        cursor: default;
+    }
+    &.black{
+        color: #101010;
+    }
+    &.dark{
+        background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+        color: #898989;
+        font-size: 12px;
+        border-radius: 2px;
+        border: none;
     }
-  }
 }
 
+
+// input
+.form-input{
+    label{
+        display: block;
+        color: #aaa;
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+}
+input[type=number],
+input[type=text]{
+    &.input-origin{
+        display: inline-block;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 2px;
+        background-color: #323234;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 500;
+        font-family: 'Pretendard', sans-serif;
+        padding: 0 10px;
+        letter-spacing: 0px;
+        text-align: right;
+        &::placeholder{
+            opacity: 1;
+            font-size: 12px;
+            letter-spacing: 0px;
+        }
+        &.block{
+            width: 100%;
+        }
+        &:read-only{
+            color: #AAA;
+        }
+        &.plane{
+            font-family: 'Noto Sans JP', sans-serif;
+            border: 1px solid #525252;
+            background-color: transparent;
+        }
+    }
+    &.input-light{
+        display: block;
+        width: 100%;
+        height: 30px;
+        padding: 0 10px;
+        border: 1px solid #eee;
+        border-radius: 2px;
+        background-color: #fff;
+        font-family: 'Noto Sans JP', sans-serif;
+        font-size: 13px;
+        color: #45576F;
+        font-weight: normal;
+        transition: border-color .17s ease-in-out;
+        text-align: left;
+        &:read-only{
+            background-color: #FAFAFA;
+            color: #999999;
+        }
+    }
+}
+
+
+
 // check-btn
-.check-btn {
-  display: flex;
-  align-items: center;
-  height: 30px;
-  background-color: #3a3a3a;
-  border-radius: 3px;
-  transition: all 0.17s ease-in-out;
-  .check-area {
-    flex: none;
-    width: 30px;
-    height: 100%;
-    border-right: 1px solid #272727;
-    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
-    background-size: 11px 9px;
-  }
-  .title-area {
-    padding: 0 10px;
-    font-size: 12px;
-    color: #898989;
-    font-weight: 400;
-  }
-  &.block {
-    width: 100%;
-  }
-  &:hover,
-  &.act {
-    background-color: #fff;
-    .check-area {
-      border-right: 1px solid #101010;
-      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
+.check-btn{
+    display: flex;
+    align-items: center;
+    height: 30px;
+    background-color: #3A3A3A;
+    border-radius: 3px;
+    transition: all .17s ease-in-out;
+    .check-area{
+        flex: none;
+        width: 30px;
+        height: 100%;
+        border-right: 1px solid #272727;
+        background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
+        background-size: 11px 9px;
     }
-    .title-area {
-      color: #101010;
-      font-weight: 600;
+    .title-area{
+        padding: 0 10px;
+        font-size: 12px;
+        color: #898989;
+        font-weight: 400;
+    }
+    &.block{
+        width: 100%;
+    }
+    &:hover,
+    &.act{
+        background-color: #fff;
+        .check-area{
+            border-right: 1px solid #101010;
+            background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
+        }
+        .title-area{
+            color: #101010;
+            font-weight: 600;
+        }
     }
-  }
 }
 
 // arr-btn
-.arr-btn {
-  display: block;
-  height: 30px;
-  border-radius: 3px;
-  background-color: #3a3a3a;
-  padding: 0 11px;
-  text-align: left;
-  transition: all 0.17s ease-in-out;
-  span {
-    position: relative;
-    font-size: 12px;
-    color: #898989;
-    font-weight: 400;
-    padding-right: 15px;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-      width: 5px;
-      height: 8px;
-      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
-    }
-  }
-  &:hover,
-  &.act {
-    background-color: #fff;
-    span {
-      color: #101010;
-      font-weight: 500;
-      &:after {
-        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
-      }
-    }
-  }
-  &.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;
-      }
+.arr-btn{
+    display: block;
+    height: 30px;
+    border-radius: 3px;
+    background-color: #3A3A3A;
+    padding: 0 11px;
+    text-align: left;
+    transition: all .17s ease-in-out;
+    span{
+        position: relative;
+        font-size: 12px;
+        color: #898989;
+        font-weight: 400;
+        padding-right: 15px;
+        &:after{
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 5px;
+            height: 8px;
+            background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
+        }
     }
     &:hover,
-    &.act {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
+    &.act{
+        background-color: #fff;
+        span{
+            color: #101010;
+            font-weight: 500;
+            &:after{
+                background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
+            }
+        }
+    }
+    &.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;
+        }
     }
-  }
 }
 
 // radio
 .d-check-radio,
-.d-check-box {
-  line-height: 1.1;
-  cursor: pointer;
-  input[type='checkbox'],
-  input[type='radio'] {
-    position: static;
-    margin-left: 0;
+.d-check-box{
+    line-height: 1.1;
     cursor: pointer;
-    opacity: 0;
-    z-index: 1;
-    flex: 0 0 auto;
-  }
-  label {
-    position: relative;
-    padding-left: 10px;
-    margin-bottom: 0;
-    word-break: break-all;
-    line-height: 1.2;
-    display: inline;
-    vertical-align: top;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 400;
-    cursor: pointer;
-  }
-  &.light {
-    label {
-      color: #45576f;
+    input[type=checkbox],
+    input[type=radio]{
+        position: static;
+        margin-left: 0;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1;
+        flex: 0 0 auto;
     }
-  }
-  &.no-text {
-    label {
-      padding-left: 0;
+    label{
+        position: relative;
+        padding-left: 10px;
+        margin-bottom: 0;
+        word-break: break-all;
+        line-height: 1.2;
+        display: inline;
+        vertical-align: top;
+        color: #fff;
+        font-size: 13px;
+        font-weight: 400;
+        cursor: pointer;
+    }
+    &.light{
+        label{
+            color: #45576F;
+        }
+    }
+    &.no-text{
+        label{
+            padding-left: 0;
+        }
     }
-  }
 }
 
 .d-check-radio {
-  label {
-    &::before {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 17px;
-      height: 17px;
-      top: 2px;
-      left: 0;
-      margin-left: -12px;
-      border: 1px solid #999999;
-      border-radius: 100%;
-      background-color: transparent;
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      transition:
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    label{
+        &::before{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 17px;
+            height: 17px;
+            top:2px;
+            left: 0;
+            margin-left: -12px;
+            border: 1px solid #999999;
+            border-radius: 100%;
+            background-color: transparent;
+            text-align:center;
+            font-size:13px;
+            line-height:1.4;
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
+        &::after{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 9px;
+            height: 9px;
+            top:6px;
+            left: 4px;
+            margin-left: -12px;
+            border: none;
+            border-radius: 100%;
+            background-color: #fff;
+            text-align:center;
+            font-size:13px;
+            line-height:1.4;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
     }
-    &::after {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 9px;
-      height: 9px;
-      top: 6px;
-      left: 4px;
-      margin-left: -12px;
-      border: none;
-      border-radius: 100%;
-      background-color: #fff;
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      opacity: 0;
-      visibility: hidden;
-      transition:
-        opacity 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    &.light{
+        label{
+            &:before{
+                border-color: #D6D6D7;
+            }
+            &:after{
+                background-color: #697C8F;
+            }
+        }
     }
-  }
-  &.light {
-    label {
-      &:before {
-        border-color: #d6d6d7;
-      }
-      &:after {
-        background-color: #697c8f;
-      }
+    input[type=radio]:checked + label::after{
+        opacity: 1;
+        visibility: visible;
     }
-  }
-  input[type='radio']:checked + label::after {
-    opacity: 1;
-    visibility: visible;
-  }
-  &.pop {
-    label {
-      font-size: 12px;
-      &:before {
-        width: 16px;
-        height: 16px;
-        border-color: #fff;
-      }
-      &:after {
-        width: 8px;
-        height: 8px;
-        background-color: #fff;
-      }
+    &.pop{
+        label{
+            font-size: 12px;
+            &:before{
+                width: 16px;
+                height: 16px;
+                border-color: #fff;
+            }
+            &:after{
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+            }
+        }
     }
-  }
 }
 
 // check-box
-.d-check-box {
-  label {
-    &.red {
-      color: #ffcaca;
+.d-check-box{
+    label{
+        &.red{color: #FFCACA;}
+        &::before{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 17px;
+            height: 17px;
+            top: 2px;
+            left: 0;
+            margin-left: -12px;
+            border: 1px solid #D6D6D7;
+            background-color: #fff;
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
+        &:after{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            top:0;
+            left: 0;
+            margin-left: -.8rem;
+            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+        }
     }
-    &::before {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 17px;
-      height: 17px;
-      top: 2px;
-      left: 0;
-      margin-left: -12px;
-      border: 1px solid #d6d6d7;
-      background-color: transparent;
-      transition:
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    input[type=checkbox]:checked + label::after{
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: 1px;
+        left: -1px;
+        width: 5px;
+        height: 8px;
+        border: 2px solid #697C8F;
+        border-left: none;
+        border-top: none;
+        transform: translate(7.75px,4.5px) rotate(45deg);
+        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
     }
-    &:after {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      top: 0;
-      left: 0;
-      margin-left: -0.8rem;
-      transition:
-        border 0.05s ease-in-out,
-        color 0.05s ease-in-out;
+    &.pop{
+        label{
+            &:before{
+                background-color: transparent;
+            }
+        }
+        input[type=checkbox]:checked + label::after{
+            border-color: #fff;
+        }
+        &.no-text{
+            label{
+                padding-left: 0;
+            }
+        }
     }
-  }
-  input[type='checkbox']:checked + label::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 1px;
-    left: -1px;
-    width: 5px;
-    height: 8px;
-    border: 2px solid #697c8f;
-    border-left: none;
-    border-top: none;
-    transform: translate(7.75px, 4.5px) rotate(45deg);
-    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
-  }
-  &.pop {
-    input[type='checkbox']:checked + label::after {
-      border-color: #fff;
+    &.sel{
+        input[type=checkbox]:checked + label{
+            color: #D7C863;
+        }
+        input[type=checkbox]:checked + label::before,
+        input[type=checkbox]:checked + label::after{
+            border-color: #D7C863;
+        }
     }
-    &.no-text {
-      label {
-        padding-left: 0;
-      }
-    }
-  }
-  &.sel {
-    input[type='checkbox']:checked + label {
-      color: #d7c863;
-    }
-    input[type='checkbox']:checked + label::before,
-    input[type='checkbox']:checked + label::after {
-      border-color: #d7c863;
-    }
-  }
 }
 
 // date-picker
-.date-picker {
-  svg {
-    display: none;
-  }
-  .react-datepicker-wrapper {
-    width: 100%;
-  }
-  input[type='text'] {
-    display: block;
-    width: 100%;
-    height: 30px;
-    padding: 0 34px 0 10px;
-    border-radius: 2px;
-    border: 1px solid #eee;
-    font-size: 13px;
-    color: #45576f;
-    font-weight: normal;
-    font-family: 'Noto Sans JP', sans-serif;
-    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
-    background-size: 14px 15px;
-    cursor: pointer;
-  }
-}
+.date-picker{
+    svg{display: none;}
+    .react-datepicker-wrapper{
+        width: 100%;
+    }
+    input[type=text]{
+        display: block;
+        width: 100%;
+        height: 30px;
+        padding: 0 34px 0 10px;
+        border-radius: 2px;
+        border: 1px solid #eee;
+        font-size: 13px;
+        color: #45576F;
+        font-weight: normal;
+        font-family: 'Noto Sans JP', sans-serif;
+        background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+        background-size: 14px 15px;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index aa50dcdd..34d0e9ce 100644
--- a/src/styles/_submodal.scss
+++ b/src/styles/_submodal.scss
@@ -1,198 +1,199 @@
-.modal-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: rgba(0, 0, 0, 0.75);
-  z-index: 110000;
-  .modal-dialog {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: calc(100% - (1.5rem * 2));
-    width: 680px;
-    z-index: 200000;
-    margin: 1.5rem auto;
-    pointer-events: none;
-    &.middle {
-      width: 800px;
-    }
-    &.big {
-      width: 1000px;
-    }
-    .modal-content {
-      flex: 1;
-      position: relative;
-      background-clip: padding-box;
-      background-color: transparent;
-      outline: 0 none;
-      pointer-events: auto;
-      border-radius: 4px;
-      .modal-header {
+.modal-popup{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background:rgba(0,0,0,.75);
+    z-index:110000;
+    .modal-dialog {
+        position: relative;
         display: flex;
         align-items: center;
-        padding: 10px 24px;
-        background-color: #7992ba;
-        border-radius: 4px 4px 0px 0px;
-        // overflow: hidden;
-        h1.title {
-          font-size: 13px;
-          color: $pop-color;
-          font-weight: 700;
+        min-height: calc(100% - (1.5rem * 2));
+        width: 680px;
+        z-index:200000;
+        margin: 1.5rem auto;
+        pointer-events: none;
+        &.middle{
+            width: 800px;
         }
-        .modal-close {
-          margin-left: auto;
-          color: transparent;
-          font-size: 0;
-          width: 10px;
-          height: 10px;
-          background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+        &.big{
+            width: 1000px;
         }
-      }
-      .modal-body {
-        padding: 30px;
-        background-color: #fff;
-        border-radius: 0px 0px 4px 4px;
-        .modal-body-inner {
-          margin-bottom: 20px;
-          &.border {
-            padding-bottom: 20px;
-            border-bottom: 1px solid #ecf0f4;
-          }
+        .modal-content{
+            flex:1;
+            position: relative;
+            background-clip: padding-box;
+            background-color: transparent;
+            outline: 0 none;
+            pointer-events: auto;
+            border-radius: 4px;
+            .modal-header{
+                display: flex;
+                align-items: center;
+                padding: 10px 24px;
+                background-color: #7992ba;
+                border-radius: 4px 4px 0px 0px;
+                // overflow: hidden;
+                h1.title{
+                    font-size: 13px;
+                    color: $pop-color;
+                    font-weight: 700;
+                }
+                .modal-close{
+                    margin-left: auto;
+                    color: transparent;
+                    font-size: 0;
+                    width: 10px;
+                    height: 10px;
+                    background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+                }
+            }
+            .modal-body{
+                padding: 30px;
+                background-color: #fff;
+                border-radius: 0px 0px 4px 4px;
+                .modal-body-inner{
+                    margin-bottom: 20px;
+                    &.border{
+                        padding-bottom: 20px;
+                        border-bottom: 1px solid #ECF0F4;
+                    }
+                }
+                .footer-btn-wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                }
+            }
         }
-        .footer-btn-wrap {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-        }
-      }
     }
-  }
 }
 
 // modal-contents
 
 //  비밀번호 변경
-.change-password-guide {
-  span {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 13px;
-    font-weight: 400;
-    color: #101010;
-    &:last-child {
-      margin-bottom: 0;
+.change-password-guide{
+
+    span{
+        display: block;
+        margin-bottom: 5px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        &:last-child{
+            margin-bottom: 0;
+        }
     }
-  }
 }
 
-.change-password-box {
-  padding: 30px;
-  border-radius: 4px;
-  background: #f4f4f7;
-  margin-bottom: 20px;
-  .change-password-tit {
-    .tit-b {
-      font-size: 13px;
-      font-weight: 500;
-      color: #344356;
+.change-password-box{
+    padding: 30px;
+    border-radius: 4px;
+    background: #F4F4F7;
+    margin-bottom: 20px;
+    .change-password-tit{
+        .tit-b{
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .tit-s{
+            font-size: 12px;
+            font-weight: 400;
+            color: #898989;
+        }
     }
-    .tit-s {
-      font-size: 12px;
-      font-weight: 400;
-      color: #898989;
+    .change-password-input{
+        width: 100%;
+        .change-password{
+            width: 100%;
+            height: 45px;
+            border-radius: 4px;
+            border: 1px solid #E9E9E9;
+            background-color: #fff;
+            padding: 0 10px;
+            font-size: 12px;
+            color: #364864;
+            font-family: 'Noto Sans JP', sans-serif;
+            &::placeholder{
+                font-size: 12px;
+            }
+        }
     }
-  }
-  .change-password-input {
-    width: 100%;
-    .change-password {
-      width: 100%;
-      height: 45px;
-      border-radius: 4px;
-      border: 1px solid #e9e9e9;
-      background-color: #fff;
-      padding: 0 10px;
-      font-size: 12px;
-      color: #364864;
-      font-family: 'Noto Sans JP', sans-serif;
-      &::placeholder {
-        font-size: 12px;
-      }
+    .table-item-th{
+        width: 145px;
     }
-  }
-  .table-item-th {
-    width: 145px;
-  }
 }
-.form-table {
-  display: table;
-  table-layout: auto;
-  width: 100%;
-  .table-item {
-    display: table-row;
-    .table-item-th,
-    .table-item-td {
-      display: table-cell;
-      vertical-align: middle;
-      padding-bottom: 10px;
+.form-table{
+    display: table;
+    table-layout: auto;
+    width: 100%;
+    .table-item{
+        display: table-row;
+        .table-item-th,
+        .table-item-td{
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 10px;
+        }
+        &:last-child{
+            .table-item-th,
+            .table-item-td{
+                padding-bottom: 0;
+            }
+        }
+        .table-item-td{
+            padding-left: 10px;
+        }
     }
-    &:last-child {
-      .table-item-th,
-      .table-item-td {
-        padding-bottom: 0;
-      }
-    }
-    .table-item-td {
-      padding-left: 10px;
-    }
-  }
 }
 
 // 주소찾기 팝업
-.address-input-wrap {
-  position: relative;
-  height: 45px;
-  padding: 0 40px 0 15px;
-  border-radius: 4px;
-  border: 1px solid #e9e9e9;
-  background: #fff;
-  margin-bottom: 20px;
-  input {
-    width: 100%;
-    height: 100%;
-    font-size: 13px;
-    font-weight: 400;
-    font-family: 'Noto Sans JP' sans-serif;
-    color: #868686;
-    &::placeholder {
-      color: #aeaeae;
-      font-size: 13px;
-      font-weight: 400;
+.address-input-wrap{
+    position: relative;
+    height: 45px;
+    padding: 0 40px 0 15px;
+    border-radius: 4px;
+    border: 1px solid #E9E9E9;
+    background: #FFF;
+    margin-bottom: 20px;
+    input{
+        width: 100%;
+        height: 100%;
+        font-size: 13px;
+        font-weight: 400;
+        font-family: "Noto Sans JP" sans-serif;
+        color: #868686;
+        &::placeholder{
+            color: #AEAEAE;
+            font-size: 13px;
+            font-weight: 400;
+        }
+    }
+    .search-btn{
+        position: absolute;
+        top: 0;
+        right: 15px;
+        width: 21px;
+        height: 100%;
+        background: url(../../public/static/images/sub/address_search.svg)no-repeat center;
+        background-size: 21px 21px;
     }
-  }
-  .search-btn {
-    position: absolute;
-    top: 0;
-    right: 15px;
-    width: 21px;
-    height: 100%;
-    background: url(../../public/static/images/sub/address_search.svg) no-repeat center;
-    background-size: 21px 21px;
-  }
 }
 
 // 설계의뢰 불러오기
-.design-request-table {
-  margin-bottom: 20px;
-}
-.design-request-grid {
-  .design-request-grid-tit {
-    font-size: 13px;
-    font-weight: 600;
-    color: #101010;
-    margin-bottom: 15px;
-  }
+.design-request-table{
+    margin-bottom: 20px;
 }
+.design-request-grid{
+    .design-request-grid-tit{
+        font-size: 13px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 15px;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index e6b46a7c..5aa068d0 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -1,281 +1,282 @@
-@mixin flexbox() {
-  display: flex;
-  align-items: center;
+@mixin flexbox(){
+    display: flex;
+    align-items: center;
 }
 
-table {
-  .overflow-lab {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .al-l {
-    text-align: left !important;
-  }
-}
-
-.flx-box {
-  @include flexbox;
-}
-
-.common-table {
-  table {
-    table-layout: fixed;
-    border: 1px solid #ecf0f4;
-    border-radius: 3px;
-    border-collapse: collapse;
-    tbody {
-      th {
-        font-size: 13px;
-        font-weight: 500;
-        color: #344356;
-        padding: 14px 12px;
-        border: 1px solid #ecf0f4;
-        background-color: #f7f9fa;
-        vertical-align: middle;
-      }
-      td {
-        padding: 9px;
-        border: 1px solid #ecf0f4;
-        font-size: 13px;
-        font-weight: 400;
-        color: #45576f;
-        vertical-align: middle;
-        .radio-wrap {
-          flex: none;
-          @include flexbox;
-        }
-        .form-flex-wrap {
-          @include flexbox;
-        }
-        .date-picker-wrap {
-          width: 100%;
-          @include flexbox;
-          span {
-            margin: 0 4px;
-          }
-        }
-      }
-    }
-  }
-  &.bt-able {
-    margin-bottom: 30px;
-  }
-}
-
-.infomation-table {
-  table {
-    border-top: 1px solid #dee3ea;
-    border-bottom: 1px solid #dee3ea;
-    border-collapse: collapse;
-    tbody {
-      tr {
-        th {
-          font-size: 13px;
-          color: #344356;
-          font-weight: 500;
-          padding: 18px 0;
-          border-bottom: 1px solid #f4f4f7;
-          .title {
-            margin-right: 8px;
-          }
-        }
-        td {
-          padding: 0 0 0 15px;
-          border-bottom: 1px solid #f4f4f7;
-
-          .guide {
-            font-size: 13px;
-            color: #697c8f;
-            font-weight: normal;
-            margin-left: 15px;
-            margin-bottom: 0;
-          }
-          span {
-            font-size: 13px;
-            color: #697c8f;
-            font-weight: normal;
-          }
-        }
-        &:last-child {
-          th,
-          td {
-            border-bottom: none;
-          }
-        }
-      }
-    }
-  }
-  .tooltips {
-    display: block;
-    width: 14px;
-    height: 14px;
-    display: inline-block;
-    background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
-    background-size: cover;
-    cursor: pointer;
-  }
-}
-
-.module-table {
-  table {
-    table-layout: fixed;
-    border-collapse: collapse;
-    thead {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-      th {
-        padding: 13px 0;
-        font-size: 13px;
-        color: #344356;
-        font-weight: 500;
-        border-bottom: 2px solid #e0e5eb;
-        text-align: center;
-      }
-    }
-    tbody {
-      display: block;
-      overflow-y: auto;
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-        border: 1px solid #ecf0f4;
-        td {
-          padding: 10px 0px;
-          font-size: 13px;
-          color: #45576f;
-          font-weight: 400;
-          text-align: center;
-        }
-      }
-      &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #c1ccd7;
-      }
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-    }
-    &.small {
-      tbody {
-        height: 120px;
-      }
-    }
-    &.big {
-      td,
-      th {
-        &:nth-child(2) {
-          width: 121px;
-        }
-      }
-      tbody {
-        height: 160px;
-        td {
-          padding: 10px 20px;
-        }
-      }
-    }
-  }
-}
-
-.roof-module-table {
-  table {
-    border-collapse: collapse;
-    thead {
-      th {
-        height: 40px;
-        padding: 0px 10px;
-        font-size: 12px;
-        line-height: 1.1;
-        color: #fff;
-        font-weight: 500;
-        border: 1px solid #505050;
-        vertical-align: middle;
-        background-color: rgba(255, 255, 255, 0.05);
-        text-align: center;
-        word-break: keep-all;
-        .d-check-box {
-          opacity: 0.5;
-        }
-      }
-    }
-    tbody {
-      tr {
-        cursor: pointer;
-        &.on {
-          background-color: #272727;
-        }
-      }
-      td {
-        height: 40px;
-        vertical-align: middle;
-        font-size: 12px;
-        color: #fff;
-        font-weight: 400;
-        border: 1px solid #505050;
-        padding: 0 10px;
+table{
+    .overflow-lab{
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        .warning {
-          color: PCSオプションマスター;
-        }
-        .color-wrap {
-          display: flex;
-          align-items: center;
-          .color-box {
-            width: 14px;
-            height: 14px;
-            margin-right: 8px;
-          }
-          .name {
-            width: 0;
-            flex: 1;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-          }
-        }
-      }
     }
-  }
-  &.overflow-y {
-    table {
-      table-layout: fixed;
-      border-collapse: collapse;
-      thead {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-        border-collapse: collapse;
-      }
-      tbody {
-        display: block;
-        max-height: 81px;
-        overflow-y: auto;
-        tr {
-          display: table;
-          table-layout: fixed;
-          width: 100%;
-          border-collapse: collapse;
-          margin-top: -1px;
-        }
-        &::-webkit-scrollbar {
-          width: 2px;
-          background-color: rgba(255, 255, 255, 0.05);
-        }
-        &::-webkit-scrollbar-thumb {
-          background-color: #c1ccd7;
-        }
-        &::-webkit-scrollbar-track {
-          background-color: rgba(255, 255, 255, 0.05);
-        }
-      }
+    .al-l{
+        text-align: left !important;
     }
-  }
 }
+
+.flx-box{
+    @include flexbox;
+}
+
+.common-table{
+    table{
+        table-layout: fixed;
+        border: 1px solid #ECF0F4;
+        border-radius: 3px;
+        border-collapse:collapse;
+        tbody{
+            th{
+                font-size: 13px;
+                font-weight: 500;
+                color: #344356;
+                padding: 14px 12px;
+                border: 1px solid #ECF0F4 ;
+                background-color: #F7F9FA;
+                vertical-align: middle;
+            }
+            td{
+                padding: 9px;
+                border: 1px solid #ECF0F4 ;
+                font-size: 13px;
+                font-weight: 400;
+                color: #45576F;
+                vertical-align: middle;
+                .radio-wrap{
+                    flex: none;
+                    @include flexbox;
+                }
+                .form-flex-wrap{
+                    @include flexbox;
+                }
+                .date-picker-wrap{
+                    width: 100%;
+                    @include flexbox;
+                    span{
+                        margin: 0 4px;
+                    }
+                }
+            }
+        }
+    }
+    &.bt-able{
+        margin-bottom: 30px;
+    }
+}
+
+.infomation-table{
+    table{
+        border-top: 1px solid #DEE3EA;
+        border-bottom: 1px solid #DEE3EA;
+        border-collapse:collapse;
+        tbody{
+            tr{
+                th{
+                    font-size: 13px;
+                    color: #344356;
+                    font-weight: 500;
+                    padding: 18px 0;
+                    border-bottom: 1px solid #F4F4F7;
+                    .title{
+                        margin-right: 8px;
+                    }
+                }
+                td{
+                    padding: 0 0 0 15px;
+                    border-bottom: 1px solid #F4F4F7;
+                    
+                    .guide{
+                        font-size: 13px;
+                        color: #697C8F;
+                        font-weight: normal;
+                        margin-left: 15px;
+                        margin-bottom: 0;
+                    }
+                    span{
+                        font-size: 13px;
+                        color: #697C8F;
+                        font-weight: normal;
+                    }
+                }
+                &:last-child{
+                    th,td{border-bottom: none;}
+                }
+            }
+        }
+        
+    }
+    .tooltips{
+        position: relative;
+        display: block;
+        width: 14px;
+        height: 14px;
+        display: inline-block;
+        background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
+        background-size: cover;
+        cursor: pointer;
+        span{
+            position: absolute;
+            white-space: nowrap;
+        }
+    }
+}
+
+.module-table{
+    table{
+        table-layout: fixed;
+        border-collapse: collapse;
+        thead{
+            display: table;
+            table-layout: fixed;
+            width: 100%;
+            th{
+                padding: 13px 0;
+                font-size: 13px;
+                color: #344356;
+                font-weight: 500;
+                border-bottom: 2px solid #E0E5EB;
+                text-align: center;
+            }
+        }
+        tbody{
+            display: block;
+            overflow-y: auto;
+            tr{
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                border: 1px solid #ECF0F4;
+                td{
+                    padding: 10px 0px;
+                    font-size: 13px;
+                    color: #45576F;
+                    font-weight: 400;
+                    text-align: center;
+                }
+            }
+            &::-webkit-scrollbar {
+                width: 4px;
+                background-color: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: #C1CCD7;
+            }
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+        }
+        &.small{
+            tbody{height: 120px;}
+        }
+        &.big{
+            td,
+            th{
+                &:nth-child(2){
+                    width: 121px;
+                }
+            }
+            tbody{
+                height: 160px;
+                td{
+                    padding: 10px 20px;
+                }
+            }
+        }
+    }
+}
+
+.roof-module-table{
+    table{
+        border-collapse: collapse;
+        thead{
+            th{
+                height: 40px;
+                padding: 0px 10px;
+                font-size: 12px;
+                line-height: 1.1;
+                color: #fff;
+                font-weight: 500;
+                border: 1px solid #505050;
+                vertical-align: middle;
+                background-color: rgba(255, 255, 255, 0.05);
+                text-align: center;
+                word-break: keep-all;
+                .d-check-box{
+                    opacity: 0.5;
+                }
+            }
+        }
+        tbody{
+            tr{
+                cursor: pointer;
+                &.on{
+                    background-color: #272727;
+                }
+            }
+            td{
+                height: 40px;
+                vertical-align: middle;
+                font-size: 12px;
+                color: #fff;
+                font-weight: 400;
+                border: 1px solid #505050;
+                padding: 0 10px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                .warning{
+                    color: PCSオプションマスター;
+                }
+                .color-wrap{
+                    display: flex;
+                    align-items: center;
+                    .color-box{
+                        width: 14px;
+                        height: 14px;
+                        margin-right: 8px;
+                    }
+                    .name{
+                        width: 0;
+                        flex: 1;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                    }
+                }
+            }
+        }
+    }
+    &.overflow-y{
+        table{
+            table-layout: fixed;
+            border-collapse: collapse;
+            thead{
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                border-collapse: collapse;
+            }
+            tbody{
+                display: block;
+                max-height: 81px;
+                overflow-y: auto;
+                tr{
+                    display: table;
+                    table-layout: fixed;
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-top: -1px;
+                }
+                &::-webkit-scrollbar {
+                    width: 2px;
+                    background-color: rgba(255, 255, 255, 0.05);
+                }
+                &::-webkit-scrollbar-thumb {
+                    background-color: #C1CCD7;
+                }
+                &::-webkit-scrollbar-track {
+                    background-color: rgba(255, 255, 255, 0.05);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 08c322e9..613c0644 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -2,4 +2,4 @@
 @import '_modal.scss';
 @import '_submodal.scss';
 @import '_table.scss';
-@import '_canvasside.scss';
+@import '_canvasside.scss';
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index b3b49ed9..1841ebb9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,2 +1 @@
-@import '_main.scss';
-@import '_contents';
\ No newline at end of file
+@import '_main.scss';
\ No newline at end of file

From f357ada22e3f6b0e3d65cc3d97d00ab2c6a94f8f Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 15:42:57 +0900
Subject: [PATCH 23/27] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/canvas/additional-edit02.svg       | 115 ++++++++++++++++
 .../images/canvas/additional_bundle-del01.svg | 106 +++++++++++++++
 .../images/canvas/additional_bundle-del03.svg | 115 ++++++++++++++++
 .../canvas/additional_bundle-edit01.svg       | 124 ++++++++++++++++++
 .../canvas/additional_bundle-edit02.svg       | 124 ++++++++++++++++++
 .../static/images/canvas/additional_del02.svg | 103 +++++++++++++++
 .../static/images/canvas/additional_del03.svg | 112 ++++++++++++++++
 .../static/images/canvas/additional_del04.svg |  94 +++++++++++++
 public/static/images/sub/attachment_ico.svg   |  11 ++
 public/static/images/sub/click_check_ico.svg  |   4 +
 public/static/images/sub/minus_btn.svg        |   6 +
 public/static/images/sub/plus_btn.svg         |   5 +
 12 files changed, 919 insertions(+)
 create mode 100644 public/static/images/sub/attachment_ico.svg
 create mode 100644 public/static/images/sub/click_check_ico.svg
 create mode 100644 public/static/images/sub/minus_btn.svg
 create mode 100644 public/static/images/sub/plus_btn.svg

diff --git a/public/static/images/canvas/additional-edit02.svg b/public/static/images/canvas/additional-edit02.svg
index e69de29b..5d3a03cd 100644
--- a/public/static/images/canvas/additional-edit02.svg
+++ b/public/static/images/canvas/additional-edit02.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3217)">
+<mask id="mask0_4200_3217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3217)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3217" fill="white">
+<path d="M31 26H102.25V78H31V26Z"/>
+</mask>
+<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3217)"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" fill="#16417D"/>
+<rect x="104.75" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
+<rect x="176" y="28.5" width="66.25" height="47" fill="#001027"/>
+<rect x="176" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
+<mask id="path-44-inside-2_4200_3217" fill="white">
+<path d="M244.75 26H316V78H244.75V26Z"/>
+</mask>
+<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3217)"/>
+<mask id="path-46-inside-3_4200_3217" fill="white">
+<path d="M31 78H102.25V130H31V78Z"/>
+</mask>
+<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3217)"/>
+<mask id="path-48-inside-4_4200_3217" fill="white">
+<path d="M102.25 78H173.5V130H102.25V78Z"/>
+</mask>
+<path d="M102.25 78H173.5V130H102.25V78Z" fill="#16417D"/>
+<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="#EA10AC" mask="url(#path-48-inside-4_4200_3217)"/>
+<mask id="path-50-inside-5_4200_3217" fill="white">
+<path d="M173.5 78H244.75V130H173.5V78Z"/>
+</mask>
+<path d="M173.5 78H244.75V130H173.5V78Z" fill="#001027"/>
+<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="white" mask="url(#path-50-inside-5_4200_3217)"/>
+<mask id="path-52-inside-6_4200_3217" fill="white">
+<path d="M244.75 78H316V130H244.75V78Z"/>
+</mask>
+<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3217)"/>
+<mask id="path-54-inside-7_4200_3217" fill="white">
+<path d="M31 130H102.25V182H31V130Z"/>
+</mask>
+<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3217)"/>
+<mask id="path-56-inside-8_4200_3217" fill="white">
+<path d="M102.25 130H173.5V182H102.25V130Z"/>
+</mask>
+<path d="M102.25 130H173.5V182H102.25V130Z" fill="#16417D"/>
+<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="#EA10AC" mask="url(#path-56-inside-8_4200_3217)"/>
+<mask id="path-58-inside-9_4200_3217" fill="white">
+<path d="M173.5 130H244.75V182H173.5V130Z"/>
+</mask>
+<path d="M173.5 130H244.75V182H173.5V130Z" fill="#001027"/>
+<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="white" mask="url(#path-58-inside-9_4200_3217)"/>
+<mask id="path-60-inside-10_4200_3217" fill="white">
+<path d="M244.75 130H316V182H244.75V130Z"/>
+</mask>
+<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3217)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 41)" stroke="white"/>
+<path d="M287.707 52.7071C288.098 52.3166 288.098 51.6834 287.707 51.2929L281.343 44.9289C280.953 44.5384 280.319 44.5384 279.929 44.9289C279.538 45.3195 279.538 45.9526 279.929 46.3431L285.586 52L279.929 57.6569C279.538 58.0474 279.538 58.6805 279.929 59.0711C280.319 59.4616 280.953 59.4616 281.343 59.0711L287.707 52.7071ZM273 53H287V51H273V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 93)" stroke="white"/>
+<path d="M287.707 104.707C288.098 104.317 288.098 103.683 287.707 103.293L281.343 96.9289C280.953 96.5384 280.319 96.5384 279.929 96.9289C279.538 97.3195 279.538 97.9526 279.929 98.3431L285.586 104L279.929 109.657C279.538 110.047 279.538 110.681 279.929 111.071C280.319 111.462 280.953 111.462 281.343 111.071L287.707 104.707ZM273 105H287V103H273V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 290 145)" stroke="white"/>
+<path d="M287.707 156.707C288.098 156.317 288.098 155.683 287.707 155.293L281.343 148.929C280.953 148.538 280.319 148.538 279.929 148.929C279.538 149.319 279.538 149.953 279.929 150.343L285.586 156L279.929 161.657C279.538 162.047 279.538 162.681 279.929 163.071C280.319 163.462 280.953 163.462 281.343 163.071L287.707 156.707ZM273 157H287V155H273V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3217">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del01.svg b/public/static/images/canvas/additional_bundle-del01.svg
index e69de29b..29ad58c0 100644
--- a/public/static/images/canvas/additional_bundle-del01.svg
+++ b/public/static/images/canvas/additional_bundle-del01.svg
@@ -0,0 +1,106 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3872)">
+<mask id="mask0_4200_3872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3872)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3872" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3872)"/>
+<mask id="path-42-inside-2_4200_3872" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3872)"/>
+<mask id="path-44-inside-3_4200_3872" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3872)"/>
+<mask id="path-46-inside-4_4200_3872" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3872)"/>
+<mask id="path-48-inside-5_4200_3872" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3872)"/>
+<mask id="path-50-inside-6_4200_3872" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3872)"/>
+<mask id="path-52-inside-7_4200_3872" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3872)"/>
+<mask id="path-54-inside-8_4200_3872" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3872)"/>
+<mask id="path-56-inside-9_4200_3872" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3872)"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
+<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
+<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
+<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3872">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-del03.svg b/public/static/images/canvas/additional_bundle-del03.svg
index e69de29b..082cae56 100644
--- a/public/static/images/canvas/additional_bundle-del03.svg
+++ b/public/static/images/canvas/additional_bundle-del03.svg
@@ -0,0 +1,115 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4260)">
+<mask id="mask0_4200_4260" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4260)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_4260" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4260)"/>
+<mask id="path-42-inside-2_4200_4260" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4260)"/>
+<mask id="path-44-inside-3_4200_4260" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4260)"/>
+<mask id="path-46-inside-4_4200_4260" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4260)"/>
+<mask id="path-48-inside-5_4200_4260" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4260)"/>
+<mask id="path-50-inside-6_4200_4260" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4260)"/>
+<mask id="path-52-inside-7_4200_4260" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4260)"/>
+<mask id="path-54-inside-8_4200_4260" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4260)"/>
+<mask id="path-56-inside-9_4200_4260" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4260)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
+<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
+<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
+<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" fill="#16417D"/>
+<rect x="87.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 145.5)" stroke="white"/>
+<path d="M76.2929 148.293C76.6834 147.902 77.3166 147.902 77.7071 148.293L84.0711 154.657C84.4616 155.047 84.4616 155.681 84.0711 156.071C83.6805 156.462 83.0474 156.462 82.6569 156.071L77 150.414L71.3431 156.071C70.9526 156.462 70.3195 156.462 69.9289 156.071C69.5384 155.681 69.5384 155.047 69.9289 154.657L76.2929 148.293ZM76 163V149H78V163H76Z" fill="white"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" fill="#16417D"/>
+<rect x="181.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 145.5)" stroke="white"/>
+<path d="M170.293 148.293C170.683 147.902 171.317 147.902 171.707 148.293L178.071 154.657C178.462 155.047 178.462 155.681 178.071 156.071C177.681 156.462 177.047 156.462 176.657 156.071L171 150.414L165.343 156.071C164.953 156.462 164.319 156.462 163.929 156.071C163.538 155.681 163.538 155.047 163.929 154.657L170.293 148.293ZM170 163V149H172V163H170Z" fill="white"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" fill="#16417D"/>
+<rect x="277.5" y="145.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 145.5)" stroke="white"/>
+<path d="M266.293 148.293C266.683 147.902 267.317 147.902 267.707 148.293L274.071 154.657C274.462 155.047 274.462 155.681 274.071 156.071C273.681 156.462 273.047 156.462 272.657 156.071L267 150.414L261.343 156.071C260.953 156.462 260.319 156.462 259.929 156.071C259.538 155.681 259.538 155.047 259.929 154.657L266.293 148.293ZM266 163V149H268V163H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4260">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-edit01.svg b/public/static/images/canvas/additional_bundle-edit01.svg
index e69de29b..38c3846c 100644
--- a/public/static/images/canvas/additional_bundle-edit01.svg
+++ b/public/static/images/canvas/additional_bundle-edit01.svg
@@ -0,0 +1,124 @@
+<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4645)">
+<mask id="mask0_4200_4645" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4645)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-43-inside-1_4200_4645" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4645)"/>
+<mask id="path-45-inside-2_4200_4645" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4645)"/>
+<mask id="path-47-inside-3_4200_4645" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4645)"/>
+<mask id="path-49-inside-4_4200_4645" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#001027"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="white" mask="url(#path-49-inside-4_4200_4645)"/>
+<mask id="path-51-inside-5_4200_4645" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#001027"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="white" mask="url(#path-51-inside-5_4200_4645)"/>
+<mask id="path-53-inside-6_4200_4645" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#001027"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="white" mask="url(#path-53-inside-6_4200_4645)"/>
+<mask id="path-55-inside-7_4200_4645" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="#EA10AC" mask="url(#path-55-inside-7_4200_4645)"/>
+<mask id="path-57-inside-8_4200_4645" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="#EA10AC" mask="url(#path-57-inside-8_4200_4645)"/>
+<mask id="path-59-inside-9_4200_4645" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="#EA10AC" mask="url(#path-59-inside-9_4200_4645)"/>
+<mask id="path-61-inside-10_4200_4645" fill="white">
+<path d="M31 182H126V234H31V182Z"/>
+</mask>
+<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
+<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4645)"/>
+<mask id="path-63-inside-11_4200_4645" fill="white">
+<path d="M126 182H221V234H126V182Z"/>
+</mask>
+<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
+<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4645)"/>
+<mask id="path-65-inside-12_4200_4645" fill="white">
+<path d="M221 182H316V234H221V182Z"/>
+</mask>
+<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
+<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4645)"/>
+<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" fill="#16417D"/>
+<rect x="87.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 87.5 43.5)" stroke="white"/>
+<path d="M76.2929 46.2929C76.6834 45.9024 77.3166 45.9024 77.7071 46.2929L84.0711 52.6569C84.4616 53.0474 84.4616 53.6805 84.0711 54.0711C83.6805 54.4616 83.0474 54.4616 82.6569 54.0711L77 48.4142L71.3431 54.0711C70.9526 54.4616 70.3195 54.4616 69.9289 54.0711C69.5384 53.6805 69.5384 53.0474 69.9289 52.6569L76.2929 46.2929ZM76 61V47H78V61H76Z" fill="white"/>
+<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" fill="#16417D"/>
+<rect x="181.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 181.5 43.5)" stroke="white"/>
+<path d="M170.293 46.2929C170.683 45.9024 171.317 45.9024 171.707 46.2929L178.071 52.6569C178.462 53.0474 178.462 53.6805 178.071 54.0711C177.681 54.4616 177.047 54.4616 176.657 54.0711L171 48.4142L165.343 54.0711C164.953 54.4616 164.319 54.4616 163.929 54.0711C163.538 53.6805 163.538 53.0474 163.929 52.6569L170.293 46.2929ZM170 61V47H172V61H170Z" fill="white"/>
+<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" fill="#16417D"/>
+<rect x="277.5" y="43.5" width="21" height="21" rx="10.5" transform="rotate(90 277.5 43.5)" stroke="white"/>
+<path d="M266.293 46.2929C266.683 45.9024 267.317 45.9024 267.707 46.2929L274.071 52.6569C274.462 53.0474 274.462 53.6805 274.071 54.0711C273.681 54.4616 273.047 54.4616 272.657 54.0711L267 48.4142L261.343 54.0711C260.953 54.4616 260.319 54.4616 259.929 54.0711C259.538 53.6805 259.538 53.0474 259.929 52.6569L266.293 46.2929ZM266 61V47H268V61H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4645">
+<rect width="352" height="257" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_bundle-edit02.svg b/public/static/images/canvas/additional_bundle-edit02.svg
index e69de29b..8b2c9f7b 100644
--- a/public/static/images/canvas/additional_bundle-edit02.svg
+++ b/public/static/images/canvas/additional_bundle-edit02.svg
@@ -0,0 +1,124 @@
+<svg width="352" height="257" viewBox="0 0 352 257" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_4454)">
+<mask id="mask0_4200_4454" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_4454)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="224" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="240" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="256" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="240" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-43-inside-1_4200_4454" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-43-inside-1_4200_4454)"/>
+<mask id="path-45-inside-2_4200_4454" fill="white">
+<path d="M126 26H221V78H126V26Z"/>
+</mask>
+<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
+<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-45-inside-2_4200_4454)"/>
+<mask id="path-47-inside-3_4200_4454" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-47-inside-3_4200_4454)"/>
+<mask id="path-49-inside-4_4200_4454" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-49-inside-4_4200_4454)"/>
+<mask id="path-51-inside-5_4200_4454" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-51-inside-5_4200_4454)"/>
+<mask id="path-53-inside-6_4200_4454" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-53-inside-6_4200_4454)"/>
+<mask id="path-55-inside-7_4200_4454" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#001027"/>
+<path d="M31 130V125H26V130H31ZM126 130H131V125H126V130ZM126 182V187H131V182H126ZM31 182H26V187H31V182ZM31 135H126V125H31V135ZM121 130V182H131V130H121ZM126 177H31V187H126V177ZM36 182V130H26V182H36Z" fill="white" mask="url(#path-55-inside-7_4200_4454)"/>
+<mask id="path-57-inside-8_4200_4454" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#001027"/>
+<path d="M221 130H226V125H221V130ZM221 182V187H226V182H221ZM126 135H221V125H126V135ZM216 130V182H226V130H216ZM221 177H126V187H221V177Z" fill="white" mask="url(#path-57-inside-8_4200_4454)"/>
+<mask id="path-59-inside-9_4200_4454" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#001027"/>
+<path d="M316 130H321V125H316V130ZM316 182V187H321V182H316ZM221 135H316V125H221V135ZM311 130V182H321V130H311ZM316 177H221V187H316V177Z" fill="white" mask="url(#path-59-inside-9_4200_4454)"/>
+<mask id="path-61-inside-10_4200_4454" fill="white">
+<path d="M31 182H126V234H31V182Z"/>
+</mask>
+<path d="M31 182H126V234H31V182Z" fill="#16417D"/>
+<path d="M31 234H30V235H31V234ZM126 233H31V235H126V233ZM32 234V182H30V234H32Z" fill="#00183B" mask="url(#path-61-inside-10_4200_4454)"/>
+<mask id="path-63-inside-11_4200_4454" fill="white">
+<path d="M126 182H221V234H126V182Z"/>
+</mask>
+<path d="M126 182H221V234H126V182Z" fill="#16417D"/>
+<path d="M221 234V235H222V234H221ZM126 234H125V235H126V234ZM220 182V234H222V182H220ZM221 233H126V235H221V233ZM127 234V182H125V234H127Z" fill="#00183B" mask="url(#path-63-inside-11_4200_4454)"/>
+<mask id="path-65-inside-12_4200_4454" fill="white">
+<path d="M221 182H316V234H221V182Z"/>
+</mask>
+<path d="M221 182H316V234H221V182Z" fill="#16417D"/>
+<path d="M316 234V235H317V234H316ZM315 182V234H317V182H315ZM316 233H221V235H316V233Z" fill="#00183B" mask="url(#path-65-inside-12_4200_4454)"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 218)" stroke="white"/>
+<path d="M76.2929 215.707C76.6834 216.098 77.3166 216.098 77.7071 215.707L84.0711 209.343C84.4616 208.953 84.4616 208.319 84.0711 207.929C83.6805 207.538 83.0474 207.538 82.6569 207.929L77 213.586L71.3431 207.929C70.9526 207.538 70.3195 207.538 69.9289 207.929C69.5384 208.319 69.5384 208.953 69.9289 209.343L76.2929 215.707ZM76 201V215H78V201H76Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 218)" stroke="white"/>
+<path d="M170.293 215.707C170.683 216.098 171.317 216.098 171.707 215.707L178.071 209.343C178.462 208.953 178.462 208.319 178.071 207.929C177.681 207.538 177.047 207.538 176.657 207.929L171 213.586L165.343 207.929C164.953 207.538 164.319 207.538 163.929 207.929C163.538 208.319 163.538 208.953 163.929 209.343L170.293 215.707ZM170 201V215H172V201H170Z" fill="white"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" fill="#16417D"/>
+<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 218)" stroke="white"/>
+<path d="M266.293 215.707C266.683 216.098 267.317 216.098 267.707 215.707L274.071 209.343C274.462 208.953 274.462 208.319 274.071 207.929C273.681 207.538 273.047 207.538 272.657 207.929L267 213.586L261.343 207.929C260.953 207.538 260.319 207.538 259.929 207.929C259.538 208.319 259.538 208.953 259.929 209.343L266.293 215.707ZM266 201V215H268V201H266Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_4454">
+<rect width="352" height="257" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del02.svg b/public/static/images/canvas/additional_del02.svg
index e69de29b..575dae2b 100644
--- a/public/static/images/canvas/additional_del02.svg
+++ b/public/static/images/canvas/additional_del02.svg
@@ -0,0 +1,103 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2835)">
+<mask id="mask0_4200_2835" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2835)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2835" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2835)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2835" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2835)"/>
+<mask id="path-45-inside-3_4200_2835" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2835)"/>
+<mask id="path-47-inside-4_4200_2835" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2835)"/>
+<mask id="path-49-inside-5_4200_2835" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2835)"/>
+<mask id="path-51-inside-6_4200_2835" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2835)"/>
+<mask id="path-53-inside-7_4200_2835" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2835)"/>
+<mask id="path-55-inside-8_4200_2835" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2835)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
+<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
+<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
+<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2835">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del03.svg b/public/static/images/canvas/additional_del03.svg
index e69de29b..2d071afd 100644
--- a/public/static/images/canvas/additional_del03.svg
+++ b/public/static/images/canvas/additional_del03.svg
@@ -0,0 +1,112 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_3022)">
+<mask id="mask0_4200_3022" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_3022)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_3022" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3022)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_3022" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_3022)"/>
+<mask id="path-45-inside-3_4200_3022" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_3022)"/>
+<mask id="path-47-inside-4_4200_3022" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_3022)"/>
+<mask id="path-49-inside-5_4200_3022" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_3022)"/>
+<mask id="path-51-inside-6_4200_3022" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_3022)"/>
+<mask id="path-53-inside-7_4200_3022" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_3022)"/>
+<mask id="path-55-inside-8_4200_3022" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_3022)"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 41)" stroke="white"/>
+<path d="M86.7071 52.7071C87.0976 52.3166 87.0976 51.6834 86.7071 51.2929L80.3431 44.9289C79.9526 44.5384 79.3195 44.5384 78.9289 44.9289C78.5384 45.3195 78.5384 45.9526 78.9289 46.3431L84.5858 52L78.9289 57.6569C78.5384 58.0474 78.5384 58.6805 78.9289 59.0711C79.3195 59.4616 79.9526 59.4616 80.3431 59.0711L86.7071 52.7071ZM72 53H86V51H72V53Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 93)" stroke="white"/>
+<path d="M86.7071 104.707C87.0976 104.317 87.0976 103.683 86.7071 103.293L80.3431 96.9289C79.9526 96.5384 79.3195 96.5384 78.9289 96.9289C78.5384 97.3195 78.5384 97.9526 78.9289 98.3431L84.5858 104L78.9289 109.657C78.5384 110.047 78.5384 110.681 78.9289 111.071C79.3195 111.462 79.9526 111.462 80.3431 111.071L86.7071 104.707ZM72 105H86V103H72V105Z" fill="white"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" fill="#16417D"/>
+<rect x="-0.5" y="0.5" width="21" height="21" rx="10.5" transform="matrix(-1 0 0 1 89 145)" stroke="white"/>
+<path d="M86.7071 156.707C87.0976 156.317 87.0976 155.683 86.7071 155.293L80.3431 148.929C79.9526 148.538 79.3195 148.538 78.9289 148.929C78.5384 149.319 78.5384 149.953 78.9289 150.343L84.5858 156L78.9289 161.657C78.5384 162.047 78.5384 162.681 78.9289 163.071C79.3195 163.462 79.9526 163.462 80.3431 163.071L86.7071 156.707ZM72 157H86V155H72V157Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 166)" stroke="white"/>
+<path d="M261.293 155.293C260.902 155.683 260.902 156.317 261.293 156.707L267.657 163.071C268.047 163.462 268.681 163.462 269.071 163.071C269.462 162.681 269.462 162.047 269.071 161.657L263.414 156L269.071 150.343C269.462 149.953 269.462 149.319 269.071 148.929C268.681 148.538 268.047 148.538 267.657 148.929L261.293 155.293ZM276 155H262V157H276V155Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 114)" stroke="white"/>
+<path d="M261.293 103.293C260.902 103.683 260.902 104.317 261.293 104.707L267.657 111.071C268.047 111.462 268.681 111.462 269.071 111.071C269.462 110.681 269.462 110.047 269.071 109.657L263.414 104L269.071 98.3431C269.462 97.9526 269.462 97.3195 269.071 96.9289C268.681 96.5384 268.047 96.5384 267.657 96.9289L261.293 103.293ZM276 103H262V105H276V103Z" fill="white"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" fill="#16417D"/>
+<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 258 62)" stroke="white"/>
+<path d="M261.293 51.2929C260.902 51.6834 260.902 52.3166 261.293 52.7071L267.657 59.0711C268.047 59.4616 268.681 59.4616 269.071 59.0711C269.462 58.6805 269.462 58.0474 269.071 57.6569L263.414 52L269.071 46.3431C269.462 45.9526 269.462 45.3195 269.071 44.9289C268.681 44.5384 268.047 44.5384 267.657 44.9289L261.293 51.2929ZM276 51H262V53H276V51Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_3022">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/canvas/additional_del04.svg b/public/static/images/canvas/additional_del04.svg
index e69de29b..b5dc6431 100644
--- a/public/static/images/canvas/additional_del04.svg
+++ b/public/static/images/canvas/additional_del04.svg
@@ -0,0 +1,94 @@
+<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4200_2449)">
+<mask id="mask0_4200_2449" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
+<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
+<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
+</mask>
+<g mask="url(#mask0_4200_2449)">
+<rect x="-41" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
+<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
+<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
+<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
+<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
+<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
+<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
+<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
+<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
+<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
+<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
+<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
+<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
+<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
+<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
+<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
+<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
+<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
+<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
+<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
+<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
+<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
+<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
+<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
+</g>
+<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
+<mask id="path-40-inside-1_4200_2449" fill="white">
+<path d="M31 26H126V78H31V26Z"/>
+</mask>
+<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
+<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2449)"/>
+<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
+<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
+<mask id="path-43-inside-2_4200_2449" fill="white">
+<path d="M221 26H316V78H221V26Z"/>
+</mask>
+<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
+<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2449)"/>
+<mask id="path-45-inside-3_4200_2449" fill="white">
+<path d="M31 78H126V130H31V78Z"/>
+</mask>
+<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
+<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2449)"/>
+<mask id="path-47-inside-4_4200_2449" fill="white">
+<path d="M126 78H221V130H126V78Z"/>
+</mask>
+<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
+<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2449)"/>
+<mask id="path-49-inside-5_4200_2449" fill="white">
+<path d="M221 78H316V130H221V78Z"/>
+</mask>
+<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
+<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2449)"/>
+<mask id="path-51-inside-6_4200_2449" fill="white">
+<path d="M31 130H126V182H31V130Z"/>
+</mask>
+<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
+<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2449)"/>
+<mask id="path-53-inside-7_4200_2449" fill="white">
+<path d="M126 130H221V182H126V130Z"/>
+</mask>
+<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
+<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2449)"/>
+<mask id="path-55-inside-8_4200_2449" fill="white">
+<path d="M221 130H316V182H221V130Z"/>
+</mask>
+<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
+<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2449)"/>
+</g>
+<defs>
+<clipPath id="clip0_4200_2449">
+<rect width="352" height="209" rx="2" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/images/sub/attachment_ico.svg b/public/static/images/sub/attachment_ico.svg
new file mode 100644
index 00000000..7e622a4e
--- /dev/null
+++ b/public/static/images/sub/attachment_ico.svg
@@ -0,0 +1,11 @@
+<svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ico">
+<circle id="Ellipse 2012" cx="11.5" cy="12" r="11.5" fill="#45576F"/>
+<g id="elements">
+<path id="Vector" d="M9.66678 12.8193C9.7612 12.9739 9.87323 13.1202 10.0029 13.2552C10.8079 14.093 12.0349 14.224 12.9718 13.6481C13.1454 13.5414 13.3091 13.4104 13.4582 13.2552L15.6178 11.0076C16.572 10.0145 16.572 8.40447 15.6178 7.41141C14.6637 6.41836 13.1166 6.41836 12.1625 7.41142L11.6868 7.90648" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_2" d="M10.313 16.0933L9.83718 16.5885C8.88301 17.5816 7.33598 17.5816 6.3818 16.5885C5.42762 15.5955 5.42762 13.9854 6.3818 12.9924L8.54141 10.7448C9.49559 9.75174 11.0426 9.75174 11.9968 10.7448C12.1264 10.8797 12.2384 11.026 12.3328 11.1806" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_3" d="M17.0003 14.6666H15.6143M13.6669 18L13.6669 16.614" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M5 9.33333H6.38593M8.33333 6L8.33333 7.38593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
diff --git a/public/static/images/sub/click_check_ico.svg b/public/static/images/sub/click_check_ico.svg
new file mode 100644
index 00000000..4fc2dae1
--- /dev/null
+++ b/public/static/images/sub/click_check_ico.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7.5" r="6.5" fill="white" stroke="#F16A6A"/>
+<path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#F16A6A"/>
+</svg>
diff --git a/public/static/images/sub/minus_btn.svg b/public/static/images/sub/minus_btn.svg
new file mode 100644
index 00000000..e31ddaf9
--- /dev/null
+++ b/public/static/images/sub/minus_btn.svg
@@ -0,0 +1,6 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ico">
+<circle id="Ellipse 2011" cx="6.5" cy="7" r="6.5" fill="white"/>
+<rect id="Rectangle 17867" x="4" y="7.5" width="1" height="5" transform="rotate(-90 4 7.5)" fill="#94A0AD"/>
+</g>
+</svg>
diff --git a/public/static/images/sub/plus_btn.svg b/public/static/images/sub/plus_btn.svg
new file mode 100644
index 00000000..7f17a1f1
--- /dev/null
+++ b/public/static/images/sub/plus_btn.svg
@@ -0,0 +1,5 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.5" cy="7" r="6.5" fill="white"/>
+<rect x="6" y="4.5" width="1" height="5" fill="#304961"/>
+<rect x="4" y="7.5" width="1" height="5" transform="rotate(-90 4 7.5)" fill="#304961"/>
+</svg>

From 0c6bd177105afaabdf7b3c032a3bfb3e0354ef77 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Fri, 11 Oct 2024 15:47:16 +0900
Subject: [PATCH 24/27] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_contents.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 3e5ab0df..dc02fc85 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -388,10 +388,9 @@
     canvas{
         position: absolute;
         top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 1600px;
-        height: 1000px;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
 }
 

From c9ae8f87e0274102c1d5d49c54a92170282bf8a5 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Fri, 11 Oct 2024 16:35:36 +0900
Subject: [PATCH 25/27] =?UTF-8?q?refactor:=20canvas=20plan=20=EC=A0=80?=
 =?UTF-8?q?=EC=9E=A5=20=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=8F=99?=
 =?UTF-8?q?=EA=B8=B0=ED=99=94=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasLayout.jsx | 43 +++++++-------------
 src/hooks/usePlan.js                       | 47 +++++++++++++++++-----
 src/store/canvasAtom.js                    |  6 +++
 3 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 98f5f36d..7a3e9323 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -7,15 +7,15 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const [plans, setPlans] = useState([])
   const [planNum, setPlanNum] = useState(0)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [plans, setPlans] = useRecoilState(plansState)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const sessionState = useRecoilValue(sessionStore)
 
@@ -32,40 +32,25 @@ export default function CanvasLayout() {
           html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
           type: 'confirm',
           confirmFn: async () => {
-            saveCanvas(sessionState.userId)
-            /**
-             * TODO: 신규 canvas plan 저장 시 id, name 등 데이터 동기화 필요 (40~51Line)
-             */
-            initCanvasPlans.map((initPlan) => {
-              if ('isNew' in initPlan) {
-                // console.log('================ isNew initPlan: ', initPlan)
-                setPlans((plans) =>
-                  plans.map((plan) => {
-                    initPlan.isNew === plan.id
-                      ? { ...plan, id: initPlan.id, name: initPlan.name, canvasStatus: initPlan.canvasStatus, isCurrent: plan.id === newCurrentId }
-                      : { ...plan, isCurrent: plan.id === newCurrentId }
-                  }),
-                )
-              }
-            })
+            await saveCanvas(sessionState.userId)
+            updateCurrentPlan(newCurrentId)
           },
           denyFn: () => {
-            setPlans((plans) =>
-              plans.map((plan) => {
-                return { ...plan, isCurrent: plan.id === newCurrentId }
-              }),
-            )
+            updateCurrentPlan(newCurrentId)
           },
         })
       } else {
-        setPlans((plans) =>
-          plans.map((plan) => {
-            return { ...plan, isCurrent: plan.id === newCurrentId }
-          }),
-        )
+        updateCurrentPlan(newCurrentId)
       }
     }
   }
+  const updateCurrentPlan = (newCurrentId) => {
+    setPlans((plans) =>
+      plans.map((plan) => {
+        return { ...plan, isCurrent: plan.id === newCurrentId }
+      }),
+    )
+  }
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
   }, [plans])
@@ -86,7 +71,7 @@ export default function CanvasLayout() {
           // console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
         })
     } else {
-      setPlans(plans.filter((plan) => plan.id !== id))
+      setPlans((plans) => plans.filter((plan) => plan.id !== id))
       swalFire({ text: getMessage('common.message.delete') })
     }
 
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index e861f9f8..c7f6620e 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -1,5 +1,5 @@
 import { useRecoilState } from 'recoil'
-import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -8,6 +8,7 @@ export function usePlan() {
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [plans, setPlans] = useRecoilState(plansState)
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -77,11 +78,12 @@ export function usePlan() {
     removeMouseLines()
     const canvasStr = addCanvas()
     const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr))
-    if (JSON.parse(canvasStr).objects.length === 0 && currentCanvasPlan.canvasStatus === undefined) {
-      // 빈 캔버스
+    const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
+    if (JSON.parse(canvasStr).objects.length === 0 && initPlanData === undefined) {
+      // 저장 안 된 빈 캔버스
       return false
-    } else if (canvasStatus === currentCanvasPlan.canvasStatus) {
-      // 변경사항 없는 캔버스
+    } else if (initPlanData && canvasStatus === initPlanData.canvasStatus) {
+      // 저장 되어있고 변경사항 없는 캔버스
       return false
     } else {
       return true
@@ -121,13 +123,16 @@ export function usePlan() {
         canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
-      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
           swalFire({ text: getMessage('common.message.save') })
           // console.log('[PUT] canvas-statuses res :::::::: %o', res)
           setInitCanvasPlans((initCanvasPlans) =>
             initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
           )
+          setPlans((plans) =>
+            plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
+          )
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })
@@ -142,14 +147,34 @@ export function usePlan() {
         canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
-      await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
           swalFire({ text: getMessage('common.message.save') })
-          setInitCanvasPlans([
-            ...initCanvasPlans,
-            { id: res.data, name: currentCanvasPlan.objectNo + '-' + res.data, userId: userId, canvasStatus: canvasStatus, isNew: currentCanvasPlan.id },
-          ])
           // console.log('[POST] canvas-statuses response :::::::: %o', res)
+          setInitCanvasPlans((initCanvasPlans) => [
+            ...initCanvasPlans,
+            {
+              id: res.data,
+              name: currentCanvasPlan.objectNo + '-' + res.data,
+              userId: userId,
+              canvasStatus: canvasStatus,
+              isNew: currentCanvasPlan.id,
+            },
+          ])
+          setPlans((plans) =>
+            plans.map((plan) =>
+              plan.id === currentCanvasPlan.id
+                ? {
+                    ...plan,
+                    id: res.data,
+                    name: currentCanvasPlan.objectNo + '-' + res.data,
+                    userId: userId,
+                    canvasStatus: canvasStatus,
+                    isNew: currentCanvasPlan.id,
+                  }
+                : plan,
+            ),
+          )
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 9fb440c6..c622283b 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -264,6 +264,12 @@ export const currentCanvasPlanState = atom({
   default: {},
 })
 
+// 전체 canvas plan
+export const plansState = atom({
+  key: 'plan',
+  default: [],
+})
+
 export const tempGridModeState = atom({
   key: 'tempGridModeState',
   default: false,

From 9cabff9a08c54d29e44c423cf03ad8c3fbcf20ce Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Fri, 11 Oct 2024 17:39:23 +0900
Subject: [PATCH 26/27] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=9E=84?=
 =?UTF-8?q?=EC=8B=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/common/common.js b/src/common/common.js
index f9ca6fff..ae96db06 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -17,6 +17,7 @@ export const MENU = {
     SLOPE_SETTING: 'slopeSetting', // 경사 설정
     BATCH_DRAWING: 'batchDrawing', // 배치면 그리기
     SURFACE_SHAPE_BATCH: 'surfaceShapeBatch', // 면형상 배치
+    SURFACE_SHAPE_BATCH_TEMP: 'surfaceShapeBatchTemp', // 면형상 배치 임시
     OBJECT_BATCH: 'objectBatch', // 오브젝트 배치
     ALL_REMOVE: 'allRemove', // 전체 삭제
     DEFAULT: 'batchCanvasDefault', // default

From 090458c7d0938fe6830e478004236424472e9332 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Fri, 11 Oct 2024 18:07:06 +0900
Subject: [PATCH 27/27] =?UTF-8?q?=EC=9A=B0=ED=81=B4=EB=A6=AD=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A3=BC=EC=84=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/context-menu/QContextMenu.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx
index bb721810..a86e40af 100644
--- a/src/components/common/context-menu/QContextMenu.jsx
+++ b/src/components/common/context-menu/QContextMenu.jsx
@@ -25,19 +25,19 @@ export default function QContextMenu(props) {
     if (!contextRef.current) return
 
     const handleContextMenu = (e) => {
-      e.preventDefault() //기존 contextmenu 막고
+      // e.preventDefault() //기존 contextmenu 막고
       setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
       console.log(111, canvasProps)
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
 
     const handleClick = (e) => {
-      e.preventDefault()
+      // e.preventDefault()
       setContextMenu({ ...contextMenu, visible: false })
     }
 
     const handleOutsideClick = (e) => {
-      e.preventDefault()
+      // e.preventDefault()
       if (contextMenu.visible && !ref.current.contains(e.target)) {
         setContextMenu({ ...contextMenu, visible: false })
       }