면형상 배치 팝업 추가

2024-10-04 11:21:56 +09:00 · 2024-10-04 11:21:56 +09:00 · 5d15336d84
commit 5d15336d84
parent 8f1b08e1f7
63 changed files with 2202 additions and 25 deletions
--- a/public/static/images/canvas/plane_arr.svg
+++ b/public/static/images/canvas/plane_arr.svg
@ -0,0 +1,3 @@
 <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path id="arrow" d="M6.53033 0.96967C6.23744 0.676777 5.76256 0.676777 5.46967 0.96967L0.696699 5.74264C0.403806 6.03553 0.403806 6.51041 0.696699 6.8033C0.989593 7.09619 1.46447 7.09619 1.75736 6.8033L6 2.56066L10.2426 6.8033C10.5355 7.09619 11.0104 7.09619 11.3033 6.8033C11.5962 6.51041 11.5962 6.03553 11.3033 5.74264L6.53033 0.96967ZM6.75 12.5L6.75 1.5H5.25L5.25 12.5H6.75Z" fill="#E4E4E4"/>
 </svg>
--- a/public/static/images/canvas/plane_arr_act.svg
+++ b/public/static/images/canvas/plane_arr_act.svg
@ -0,0 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6.53033 0.46967C6.23744 0.176777 5.76256 0.176777 5.46967 0.46967L0.696699 5.24264C0.403806 5.53553 0.403806 6.01041 0.696699 6.3033C0.989592 6.59619 1.46447 6.59619 1.75736 6.3033L6 2.06066L10.2426 6.3033C10.5355 6.59619 11.0104 6.59619 11.3033 6.3033C11.5962 6.01041 11.5962 5.53553 11.3033 5.24264L6.53033 0.46967ZM6.75 12L6.75 1H5.25L5.25 12H6.75Z" fill="#101010"/>
 </svg>
--- a/public/static/images/canvas/plane_shape01.svg
+++ b/public/static/images/canvas/plane_shape01.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape010.svg
+++ b/public/static/images/canvas/plane_shape010.svg
@ -0,0 +1,3 @@
 <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape011.svg
+++ b/public/static/images/canvas/plane_shape011.svg
@ -0,0 +1,3 @@
 <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape012.svg
+++ b/public/static/images/canvas/plane_shape012.svg
@ -0,0 +1,3 @@
 <svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape013.svg
+++ b/public/static/images/canvas/plane_shape013.svg
@ -0,0 +1,3 @@
 <svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape014.svg
+++ b/public/static/images/canvas/plane_shape014.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape015.svg
+++ b/public/static/images/canvas/plane_shape015.svg
@ -0,0 +1,3 @@
 <svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape016.svg
+++ b/public/static/images/canvas/plane_shape016.svg
@ -0,0 +1,5 @@
 <svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
 <path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
 <rect x="11" y="28" width="33" height="1" fill="#313131"/>
 </svg>
--- a/public/static/images/canvas/plane_shape017.svg
+++ b/public/static/images/canvas/plane_shape017.svg
@ -0,0 +1,3 @@
 <svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape018.svg
+++ b/public/static/images/canvas/plane_shape018.svg
@ -0,0 +1,3 @@
 <svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape02.svg
+++ b/public/static/images/canvas/plane_shape02.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape03.svg
+++ b/public/static/images/canvas/plane_shape03.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape04.svg
+++ b/public/static/images/canvas/plane_shape04.svg
@ -0,0 +1,3 @@
 <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape05.svg
+++ b/public/static/images/canvas/plane_shape05.svg
@ -0,0 +1,3 @@
 <svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape06.svg
+++ b/public/static/images/canvas/plane_shape06.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape07.svg
+++ b/public/static/images/canvas/plane_shape07.svg
@ -0,0 +1,3 @@
 <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape08.svg
+++ b/public/static/images/canvas/plane_shape08.svg
@ -0,0 +1,3 @@
 <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_shape09.svg
+++ b/public/static/images/canvas/plane_shape09.svg
@ -0,0 +1,3 @@
 <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
 </svg>
--- a/public/static/images/canvas/plane_tab01.svg
+++ b/public/static/images/canvas/plane_tab01.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="110" height="108" fill="#F3F3F3"/>
 <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>
--- a/public/static/images/canvas/plane_tab02.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab03.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab04.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab05.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab06.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab07.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab08.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab09.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab10.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab11.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab12.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab13.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab14.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab15.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab16.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab17.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/plane_tab18.svg
+++ b/public/static/images/canvas/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>
--- a/public/static/images/canvas/shape_labrary01.svg
+++ b/public/static/images/canvas/shape_labrary01.svg
@ -0,0 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.6065 1V3.19254C13.6065 3.39824 13.3493 3.49136 13.2176 3.33333C11.9358 1.90125 10.0732 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/public/static/images/canvas/shape_labrary02.svg
+++ b/public/static/images/canvas/shape_labrary02.svg
@ -0,0 +1,4 @@
 <svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.375 3.54993C9.64054 3.54993 10.7733 3.54993 11.5782 4.0831C11.666 4.14132 11.7501 4.20371 11.8298 4.26997C12.5601 4.87676 12.7203 5.83691 13.0407 7.75721L13.3529 9.62868C13.8048 12.3372 14.0308 13.6915 13.1402 14.5707C12.2496 15.4499 10.6518 15.4499 7.45635 15.4499H7.29365C4.09818 15.4499 2.50044 15.4499 1.60983 14.5707C0.719219 13.6915 0.945175 12.3372 1.39708 9.62868L1.70933 7.75721C2.02972 5.83691 2.18992 4.87676 2.92019 4.26997C2.99994 4.20371 3.08395 4.14132 3.17184 4.0831C3.97669 3.54993 5.10946 3.54993 7.375 3.54993Z" stroke="white" stroke-width="1.5"/>
 <path d="M7.375 18L7.375 1" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </svg>
--- a/public/static/images/canvas/shape_labrary03.svg
+++ b/public/static/images/canvas/shape_labrary03.svg
@ -0,0 +1,4 @@
 <svg width="19" height="15" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.55295 7.375C3.55295 5.10946 3.55295 3.97669 4.08612 3.17184C4.14434 3.08395 4.20673 2.99994 4.27299 2.92019C4.87978 2.18993 5.83993 2.02973 7.76023 1.70933L9.6317 1.39708C12.3402 0.945174 13.6945 0.71922 14.5737 1.60983C15.4529 2.50044 15.4529 4.09818 15.4529 7.29365V7.45635C15.4529 10.6518 15.4529 12.2496 14.5737 13.1402C13.6945 14.0308 12.3402 13.8048 9.6317 13.3529L7.76023 13.0407C5.83993 12.7203 4.87978 12.5601 4.27299 11.8298C4.20673 11.7501 4.14434 11.666 4.08612 11.5782C3.55295 10.7733 3.55295 9.64054 3.55295 7.375Z" stroke="white" stroke-width="1.5"/>
 <path d="M18 7.375L1 7.375" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </svg>
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@ -13,6 +13,7 @@ import GridMove from '@/components/canvas/modal/gridoption/GridMove'
 import GridOption from '@/components/canvas/modal/gridoption/GridOption'
 import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
 import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
 import ObjectOption from '@/components/canvas/modal/objectoption/ObjectOption'
 import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
 import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
 import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
@ -58,7 +59,7 @@ export default function CanvasPage() {
                    {/* <PropertiesSetting/> */}
                    {/* 지붕형상 설정 */}
-                    <RoofShapeOption/>
+                    {/* <RoofShapeOption/> */}
                    {/* 지붕형상 수동 설정 */}
                    {/* <ManualRoofShape/> */}
@ -90,7 +91,10 @@ export default function CanvasPage() {
                    {/* <ArrangementSetting/> */}
                    {/* 면형상 배치 */}
-                    {/* <PlaneShapeOption/> */}
+                    <PlaneShapeOption/>
                    {/* 오브젝트 배치*/}
                    {/* <ObjectOption/> */}
                </div>
            </div>
        </div>
--- a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
+++ b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx
@ -1,17 +1,24 @@
 import WithDraggable from "@/components/common/draggable/withDraggable";
 import Image from "next/image";
 import { useState } from "react";
-
+import PlaneShapeTab01 from "./planeshapetab/PlaneShapeTab01";
-const shapeMenu = [
+import PlaneShapeTab02 from "./planeshapetab/PlaneShapeTab02";
-    {id:1, name:'龍丸屋根'},
+import PlaneShapeTab03 from "./planeshapetab/PlaneShapeTab03";
-    {id:2, name:'Aパターン'},
+import PlaneShapeTab04 from "./planeshapetab/PlaneShapeTab04";
-    {id:3, name:'Bパターン'},
+import PlaneShapeTab05 from "./planeshapetab/PlaneShapeTab05";
-    {id:4, name:'別に設定'},
+import PlaneShapeTab06 from "./planeshapetab/PlaneShapeTab06";
-    {id:5, name:'立つ'},
+import PlaneShapeTab07 from "./planeshapetab/PlaneShapeTab07";
-    {id:6, name:'ドン'},
+import PlaneShapeTab08 from "./planeshapetab/PlaneShapeTab08";
-    {id:7, name:'M'},
+import PlaneShapeTab09 from "./planeshapetab/PlaneShapeTab09";
-    {id:8, name:'北'},
+import PlaneShapeTab10 from "./planeshapetab/PlaneShapeTab10";
-]
+import PlaneShapeTab11 from "./planeshapetab/PlaneShapeTab11";
 import PlaneShapeTab12 from "./planeshapetab/PlaneShapeTab12";
 import PlaneShapeTab13 from "./planeshapetab/PlaneShapeTab13";
 import PlaneShapeTab14 from "./planeshapetab/PlaneShapeTab14";
 import PlaneShapeTab15 from "./planeshapetab/PlaneShapeTab15";
 import PlaneShapeTab16 from "./planeshapetab/PlaneShapeTab16";
 import PlaneShapeTab17 from "./planeshapetab/PlaneShapeTab17";
 import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18";
 export default function PlaneShapeOption(){
    const [shapeNum, setShapeNum] = useState(1);
@ -19,21 +26,44 @@ export default function PlaneShapeOption(){
        <WithDraggable isShow={true}>
            <div className={`modal-pop-wrap l-2`}>
                <div className="modal-head">
-                    <h1 className="title">傾斜設定 </h1>
+                    <h1 className="title">屋根形状の設定 </h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
-                    <div className="roof-shape-menu plane">
+                    <div className="plane-shape-menu">
-                        {shapeMenu.map((item) => (
+                        {Array.from({length : 18}).map((_,idx) => (
-                            <button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act': ''}`} onClick={() => setShapeNum(item.id)}>
+                            <button key={idx + 1} className={`shape-menu-box ${shapeNum === idx + 1 ? 'act': ''}`} onClick={() => setShapeNum(idx + 1)}>
                                <div className="shape-box">
-                                    <Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
+                                    <Image src={`/static/images/canvas/plane_shape0${idx + 1}.svg`} alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                </div>
                            </button>
                        ))}
                    </div>
                    <div className="shape-library">
                        <button className="library-btn ico01"></button>
                        <button className="library-btn ico02"></button>
                        <button className="library-btn ico03"></button>
                    </div>
                    {shapeNum === 1 && <PlaneShapeTab01/>}
                    {shapeNum === 2 && <PlaneShapeTab02/>}
                    {shapeNum === 3 && <PlaneShapeTab03/>}
                    {shapeNum === 4 && <PlaneShapeTab04/>}
                    {shapeNum === 5 && <PlaneShapeTab05/>}
                    {shapeNum === 6 && <PlaneShapeTab06/>}
                    {shapeNum === 7 && <PlaneShapeTab07/>}
                    {shapeNum === 8 && <PlaneShapeTab08/>}
                    {shapeNum === 9 && <PlaneShapeTab09/>}
                    {shapeNum === 10 && <PlaneShapeTab10/>}
                    {shapeNum === 11 && <PlaneShapeTab11/>}
                    {shapeNum === 12 && <PlaneShapeTab12/>}
                    {shapeNum === 13 && <PlaneShapeTab13/>}
                    {shapeNum === 14 && <PlaneShapeTab14/>}
                    {shapeNum === 15 && <PlaneShapeTab15/>}
                    {shapeNum === 16 && <PlaneShapeTab16/>}
                    {shapeNum === 17 && <PlaneShapeTab17/>}
                    {shapeNum === 18 && <PlaneShapeTab18/>}
                    <div className="grid-btn-wrap">
-                        <button className="btn-frame modal act">保存</button>
+                        <button className="btn-frame modal act">作成</button>
                    </div>
                </div>
            </div>
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx
@ -0,0 +1,79 @@
 import Image from "next/image";
 export default function PlaneShapeTab01(){
    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_tab01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                        </div>
                        <div className="shape-data">
                            <div className="eaves-keraba-table">
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        ①
                                    </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={4500}/>
                                            </div>
                                            <span className="thin">mm</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        ②
                                    </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={2600}/>
                                            </div>
                                            <span className="thin">mm</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        斜めの長さ
                                    </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={3500}/>
                                            </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>
            <div className="plane-tab-guide">
                ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。
            </div>
        </>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx
@ -0,0 +1,61 @@
 import Image from "next/image";
 export default function PlaneShapeTab02(){
    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_tab02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx
@ -0,0 +1,74 @@
 import Image from "next/image";
 export default function PlaneShapeTab03(){
    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_tab03.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx
@ -0,0 +1,61 @@
 import Image from "next/image";
 export default function PlaneShapeTab04(){
    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_tab04.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx
@ -0,0 +1,74 @@
 import Image from "next/image";
 export default function PlaneShapeTab05(){
    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_tab05.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx
@ -0,0 +1,74 @@
 import Image from "next/image";
 export default function PlaneShapeTab06(){
    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_tab06.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx
@ -0,0 +1,100 @@
 import Image from "next/image";
 export default function PlaneShapeTab07(){
    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_tab07.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ⑤
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx
@ -0,0 +1,87 @@
 import Image from "next/image";
 export default function PlaneShapeTab08(){
    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_tab08.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx
@ -0,0 +1,100 @@
 import Image from "next/image";
 export default function PlaneShapeTab09(){
    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_tab09.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ⑤
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx
@ -0,0 +1,100 @@
 import Image from "next/image";
 export default function PlaneShapeTab10(){
    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_tab10.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ⑤
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx
@ -0,0 +1,100 @@
 import Image from "next/image";
 export default function PlaneShapeTab11(){
    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_tab11.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ⑤
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx
@ -0,0 +1,87 @@
 import Image from "next/image";
 export default function PlaneShapeTab12(){
    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_tab12.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx
@ -0,0 +1,87 @@
 import Image from "next/image";
 export default function PlaneShapeTab13(){
    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_tab13.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx
@ -0,0 +1,100 @@
 import Image from "next/image";
 export default function PlaneShapeTab14(){
    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_tab14.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ⑤
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx
@ -0,0 +1,74 @@
 import Image from "next/image";
 export default function PlaneShapeTab15(){
    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_tab15.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx
@ -0,0 +1,87 @@
 import Image from "next/image";
 export default function PlaneShapeTab16(){
    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_tab16.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx
@ -0,0 +1,87 @@
 import Image from "next/image";
 export default function PlaneShapeTab17(){
    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_tab17.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                ④
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx
+++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx
@ -0,0 +1,74 @@
 import Image from "next/image";
 export default function PlaneShapeTab18(){
    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_tab18.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                    </div>
                    <div className="shape-data">
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ①
                                </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={4500}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ②
                                </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={2600}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    ③
                                </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={2600}/>
                                        </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>
    )
 }
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@ -46,6 +46,9 @@ $alert-color: #101010;
    &.lr{
        width: 440px;
    }
    &.lrr{
        width: 480px;
    }
    &.ml{
        width: 530px;
    }
@ -642,7 +645,7 @@ $alert-color: #101010;
            padding-bottom: 14px;
        }
        .eaves-keraba-td{
-            padding-left: 15px;
+            padding-left: 10px;
        }
        .eaves-keraba-ico{
            display: flex;
@ -791,9 +794,178 @@ $alert-color: #101010;
 }
 // 면형상 배치
-.roof-shape-menu{
+.plane-shape-menu{
-    &.plane{
+    display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(6, 1fr);
-        grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: repeat(3, 90px);
    gap: 10px;
    margin-bottom: 10px;
    .shape-menu-box{
        border-radius: 2px;
        background-color: #3D3D3D;
        padding: 8px;
        transition: all .15s ease-in-out;
        .shape-box{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #313131;
            border-radius: 2px;
            img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        &.act,
        &:hover{
            background-color: #008BFF;
        }
    }
-}
+}
 .shape-library{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    background-color: #3D3D3D;
    margin-bottom: 24px;
    .library-btn{
        width: 30px;
        height: 30px;
        border: 1px solid #6C6C6C;
        border-radius: 2px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        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;
        }
    }
 }
 .plane-shape-wrapper{
    display: flex;
    gap: 10px;
    .plane-box{
        padding: 10px;
        border-radius: 2px;
        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%;
                        left: 50%;
                        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{
                                    padding-bottom: 0px;
                                }
                            }
                        }
                    }
                }
            }
        }
        &.direction-box{
            display: flex;
            flex-direction: column;
            flex: none;
            width: 180px;
            .plane-direction-box{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 10px 5px;
            }
        }
    }
 }
 .plane-direction{
    width: 150px;
    position: relative;
    height: 120px;
    span{
        position: absolute;
        font-size: 12px;
        font-weight: 500;
        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;
        height: 28px;
        background-color: #777777;
        background-image: url(../../public/static/images/canvas/plane_arr.svg);
        background-size: 12px 13px;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 50%;
        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;
            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
        }
    }
 }
 .plane-tab-guide{
    font-size: $pop-normal-size;
    font-weight: $pop-normal-weight;
    color: $pop-color;
    margin-top: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid #424242;
 }
 // 오브젝트 배치
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@ -410,6 +410,11 @@ input[type=text]{
        &:read-only{
            color: #AAA;
        }
        &.plane{
            font-family: 'Noto Sans JP', sans-serif;
            border: 1px solid #525252;
            background-color: transparent;
        }
    }
    &.input-light{
        display: block;