canvas메뉴 영역 추가

This commit is contained in:
김창수 2024-09-06 09:02:51 +09:00
parent 5831c5b919
commit bff190828d
24 changed files with 394 additions and 6 deletions

View File

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

After

Width:  |  Height:  |  Size: 164 B

View File

@ -0,0 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.4 2V6.80001M2 4.4H6.80001" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.4004 14.7999L16.4004 5.9999M6.00039 16.3999H14.8004M14.8004 4.3999H10.0004M4.40039 9.99991V14.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.7998 4.39981C14.7998 3.64556 14.7998 3.26843 15.0341 3.03412C15.2684 2.7998 15.6456 2.7998 16.3998 2.7998C17.1541 2.7998 17.5312 2.7998 17.7655 3.03412C17.9998 3.26843 17.9998 3.64556 17.9998 4.39981C17.9998 5.15405 17.9998 5.53118 17.7655 5.76549C17.5312 5.99981 17.1541 5.99981 16.3998 5.99981C15.6456 5.99981 15.2684 5.99981 15.0341 5.76549C14.7998 5.53118 14.7998 5.15405 14.7998 4.39981Z" stroke="white" stroke-width="1.5"/>
<path d="M14.7998 16.4003C14.7998 15.646 14.7998 15.2689 15.0341 15.0346C15.2684 14.8003 15.6456 14.8003 16.3998 14.8003C17.1541 14.8003 17.5312 14.8003 17.7655 15.0346C17.9998 15.2689 17.9998 15.646 17.9998 16.4003C17.9998 17.1545 17.9998 17.5317 17.7655 17.766C17.5312 18.0003 17.1541 18.0003 16.3998 18.0003C15.6456 18.0003 15.2684 18.0003 15.0341 17.766C14.7998 17.5317 14.7998 17.1545 14.7998 16.4003Z" stroke="white" stroke-width="1.5"/>
<path d="M2.7998 16.4003C2.7998 15.646 2.7998 15.2689 3.03412 15.0346C3.26843 14.8003 3.64556 14.8003 4.39981 14.8003C5.15405 14.8003 5.53118 14.8003 5.76549 15.0346C5.99981 15.2689 5.99981 15.646 5.99981 16.4003C5.99981 17.1545 5.99981 17.5317 5.76549 17.766C5.53118 18.0003 5.15405 18.0003 4.39981 18.0003C3.64556 18.0003 3.26843 18.0003 3.03412 17.766C2.7998 17.5317 2.7998 17.1545 2.7998 16.4003Z" stroke="white" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8 10.8C16.3085 10.8 17.0627 10.8 17.5314 11.2686C18 11.7373 18 12.4915 18 14V14.8C18 16.3085 18 17.0627 17.5314 17.5314C17.0627 18 16.3085 18 14.8 18H6.8C4.53726 18 3.40589 18 2.70294 17.2971C2 16.5941 2 15.4627 2 13.2L2 5.2C2 3.69151 2 2.93726 2.46863 2.46863C2.93726 2 3.69151 2 5.2 2L6 2C7.50849 2 8.26274 2 8.73137 2.46863C9.2 2.93726 9.2 3.69151 9.2 5.2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.3996 10.0001C12.3996 11.3256 11.3251 12.4001 9.99961 12.4001C8.67413 12.4001 7.59961 11.3256 7.59961 10.0001C7.59961 8.67461 8.67413 7.6001 9.99961 7.6001C11.3251 7.6001 12.3996 8.67461 12.3996 10.0001Z" stroke="white" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 812 B

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.62197 10.7968C7.67129 9.79223 7.81092 9.14577 8.20615 8.65018C8.33692 8.48619 8.4857 8.33741 8.64969 8.20663C9.14528 7.81141 9.79175 7.67178 10.7964 7.62245M13.9977 7.6001C15.479 7.61895 16.3285 7.7152 16.9447 8.20663C17.1087 8.33741 17.2575 8.48619 17.3882 8.65018C17.9994 9.41651 17.9994 10.5436 17.9994 12.7977C17.9994 15.0518 17.9994 16.1789 17.3882 16.9452C17.2575 17.1092 17.1087 17.258 16.9447 17.3887C16.1784 17.9999 15.0513 17.9999 12.7972 17.9999C10.5431 17.9999 9.41602 17.9999 8.64969 17.3887C8.4857 17.258 8.33692 17.1092 8.20615 16.9452C7.71471 16.3289 7.61846 15.4794 7.59961 13.9982" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12.378 9.20316C12.3287 10.2078 12.1891 10.8542 11.7939 11.3498C11.6631 11.5138 11.5143 11.6626 11.3503 11.7934C10.8547 12.1886 10.2083 12.3282 9.20364 12.3775M6.00231 12.3999C4.52105 12.3811 3.67154 12.2848 3.0553 11.7934C2.89131 11.6626 2.74253 11.5138 2.61176 11.3498C2.00063 10.5835 2.00063 9.45644 2.00063 7.20232C2.00063 4.9482 2.00063 3.82114 2.61176 3.05481C2.74253 2.89083 2.89131 2.74205 3.0553 2.61127C3.82163 2.00014 4.94869 2.00014 7.20281 2.00014C9.45692 2.00014 10.584 2.00014 11.3503 2.61127C11.5143 2.74205 11.6631 2.89083 11.7939 3.05481C12.2853 3.67105 12.3815 4.52056 12.4004 6.00182" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0004 6.7998V9.9998M10.0004 9.9998H7.60039C6.0919 9.9998 5.33765 9.9998 4.86902 10.4684C4.40039 10.9371 4.40039 11.6913 4.40039 13.1998M10.0004 9.9998H12.4004C13.9089 9.9998 14.6631 9.9998 15.1318 10.4684C15.6004 10.9371 15.6004 11.6913 15.6004 13.1998" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 15.6002C2 14.4688 2 13.9031 2.35147 13.5517C2.70294 13.2002 3.26863 13.2002 4.4 13.2002C5.53137 13.2002 6.09706 13.2002 6.44853 13.5517C6.8 13.9031 6.8 14.4688 6.8 15.6002C6.8 16.7316 6.8 17.2973 6.44853 17.6487C6.09706 18.0002 5.53137 18.0002 4.4 18.0002C3.26863 18.0002 2.70294 18.0002 2.35147 17.6487C2 17.2973 2 16.7316 2 15.6002Z" stroke="white" stroke-width="1.5"/>
<path d="M13.2002 15.6002C13.2002 14.4688 13.2002 13.9031 13.5517 13.5517C13.9031 13.2002 14.4688 13.2002 15.6002 13.2002C16.7316 13.2002 17.2973 13.2002 17.6487 13.5517C18.0002 13.9031 18.0002 14.4688 18.0002 15.6002C18.0002 16.7316 18.0002 17.2973 17.6487 17.6487C17.2973 18.0002 16.7316 18.0002 15.6002 18.0002C14.4688 18.0002 13.9031 18.0002 13.5517 17.6487C13.2002 17.2973 13.2002 16.7316 13.2002 15.6002Z" stroke="white" stroke-width="1.5"/>
<path d="M8.62838 2H11.3712C13.0308 2 13.1998 2.88794 13.1998 4.4C13.1998 5.91206 13.0308 6.8 11.3712 6.8H8.62838C6.96876 6.8 6.7998 5.91206 6.7998 4.4C6.7998 2.88794 6.96876 2 8.62838 2Z" stroke="white" stroke-width="1.5"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7005 7.2C18.2242 5.38686 18.0772 3.81293 17.1321 2.86787C15.1328 0.86853 10.3188 2.44091 6.37987 6.37987C5.95908 6.80066 5.5653 7.23143 5.2 7.66769M14.8 12.3323C14.4347 12.7686 14.0409 13.1993 13.6201 13.6201C9.68116 17.5591 4.86721 19.1315 2.86787 17.1321C1.85395 16.1182 1.7586 14.3804 2.42464 12.4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5998 7.6001L9.04328 9.44041C8.85327 9.68678 8.75827 9.80997 8.81713 9.90503C8.87598 10.0001 9.04725 10.0001 9.38978 10.0001H10.6098C10.9524 10.0001 11.1236 10.0001 11.1825 10.0952C11.2413 10.1902 11.1463 10.3134 10.9563 10.5598L9.38978 12.4001" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 15.0719C7.45018 14.6323 6.90718 14.1474 6.37987 13.6201C2.44091 9.68116 0.868529 4.86721 2.86787 2.86787C3.88179 1.85395 5.61957 1.7586 7.6 2.42464M12 17.4317C14.145 18.25 16.0505 18.2138 17.1321 17.1321C19.1315 15.1328 17.5591 10.3188 13.6201 6.37987C13.0928 5.85256 12.5498 5.36766 12 4.92806" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.45 14C4.45 14.4142 4.78579 14.75 5.2 14.75C5.61421 14.75 5.95 14.4142 5.95 14H4.45ZM17.2971 2.70294L17.8274 2.17261V2.17261L17.2971 2.70294ZM13.3618 15.5877L14.0933 15.4222L13.3618 15.5877ZM2.13811 15.5877L1.4066 15.7532L2.13811 15.5877ZM2.15558 14.3005L2.74092 14.7694H2.74092L2.15558 14.3005ZM10 2.75H13.2V1.25H10V2.75ZM17.25 6.8V14.8H18.75V6.8H17.25ZM5.95 14V6.8H4.45V14H5.95ZM10 1.25C8.88983 1.25 7.98176 1.24841 7.26661 1.34456C6.52989 1.44361 5.88666 1.65857 5.37261 2.17261L6.43327 3.23327C6.62217 3.04438 6.8961 2.90787 7.46648 2.83118C8.05845 2.75159 8.84743 2.75 10 2.75V1.25ZM5.95 6.8C5.95 5.64743 5.95159 4.85845 6.03118 4.26648C6.10787 3.6961 6.24438 3.42217 6.43327 3.23327L5.37261 2.17261C4.85857 2.68666 4.64361 3.32989 4.54456 4.06661C4.44841 4.78176 4.45 5.68983 4.45 6.8H5.95ZM13.2 2.75C14.3526 2.75 15.1416 2.75159 15.7335 2.83118C16.3039 2.90787 16.5778 3.04438 16.7667 3.23327L17.8274 2.17261C17.3133 1.65857 16.6701 1.44361 15.9334 1.34456C15.2182 1.24841 14.3102 1.25 13.2 1.25V2.75ZM18.75 6.8C18.75 5.68983 18.7516 4.78176 18.6554 4.06661C18.5564 3.32989 18.3414 2.68666 17.8274 2.17261L16.7667 3.23327C16.9556 3.42217 17.0921 3.6961 17.1688 4.26648C17.2484 4.85845 17.25 5.64743 17.25 6.8H18.75ZM17.25 14.8C17.25 15.6146 17.1004 16.2461 16.8345 16.6514C16.6005 17.0081 16.2412 17.25 15.5949 17.25V18.75C16.7197 18.75 17.563 18.2756 18.0887 17.4741C18.5826 16.7212 18.75 15.7527 18.75 14.8H17.25ZM15.5949 17.25C15.2245 17.25 14.9402 17.0971 14.6944 16.799C14.4311 16.4796 14.2241 16.0005 14.0933 15.4222L12.6302 15.7532C12.7903 16.4608 13.071 17.1878 13.537 17.7532C14.0207 18.3398 14.7075 18.75 15.5949 18.75V17.25ZM4.37128 17.25C4.00083 17.25 3.71651 17.0971 3.47076 16.799C3.20748 16.4796 3.00046 16.0005 2.86962 15.4222L1.4066 15.7532C1.56669 16.4608 1.8473 17.1878 2.31339 17.7532C2.79701 18.3398 3.48381 18.75 4.37128 18.75V17.25ZM4.37128 18.75H15.5949V17.25H4.37128V18.75ZM3.5696 14.75H11.5865V13.25H3.5696V14.75ZM2.86962 15.4222C2.83154 15.2539 2.80233 15.1243 2.78122 15.0123C2.76011 14.9004 2.75195 14.8303 2.7503 14.7837C2.74879 14.7406 2.75365 14.7347 2.74983 14.7477C2.74486 14.7646 2.73725 14.774 2.74092 14.7694L1.57024 13.8316C1.31616 14.1487 1.23912 14.4926 1.25123 14.8365C1.26141 15.1253 1.33849 15.4521 1.4066 15.7532L2.86962 15.4222ZM3.5696 13.25C3.20461 13.25 2.8377 13.2476 2.53638 13.2977C2.19443 13.3547 1.8419 13.4924 1.57024 13.8316L2.74092 14.7694C2.70995 14.808 2.67333 14.7956 2.78267 14.7774C2.93262 14.7524 3.15237 14.75 3.5696 14.75V13.25ZM14.0933 15.4222C14.0033 15.0244 13.925 14.6747 13.8377 14.406C13.7543 14.1493 13.6206 13.8207 13.33 13.5888L12.3946 14.7614C12.3235 14.7047 12.3462 14.6699 12.411 14.8694C12.4719 15.0569 12.5336 15.326 12.6302 15.7532L14.0933 15.4222ZM11.5865 14.75C11.9556 14.75 12.172 14.751 12.3259 14.7676C12.4721 14.7833 12.4478 14.8039 12.3946 14.7614L13.33 13.5888C13.0572 13.3712 12.7471 13.3042 12.4863 13.2762C12.2333 13.249 11.9215 13.25 11.5865 13.25V14.75Z" fill="white"/>
<path d="M8.7998 6H14.3998" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M8.7998 9.2002H11.5998" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.40015 6.99998L4.60015 6.99998" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 7.00002C13 3.68631 10.3137 1.00001 7 1.00001C3.68629 1.00001 1 3.68631 1 7.00002C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7.00002Z" stroke="#A8A8A8"/>
</svg>

After

Width:  |  Height:  |  Size: 386 B

View File

@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.40015 6.99998L4.60015 6.99998" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.00015 4.6L7.00015 9.4" stroke="#A8A8A8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13 7.00002C13 3.68631 10.3137 1.00001 7 1.00001C3.68629 1.00001 1 3.68631 1 7.00002C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7.00002Z" stroke="#A8A8A8"/>
</svg>

After

Width:  |  Height:  |  Size: 487 B

View File

@ -0,0 +1,4 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6252 7.37502L14.1252 8.87502M10.0002 10L11.5002 11.5M7.37518 12.625L8.87518 14.125" stroke="white" stroke-linecap="round"/>
<path d="M7.40165 3.00825C8.42518 1.98472 8.93695 1.47295 9.50785 1.23648C10.2691 0.921175 11.1243 0.921175 11.8855 1.23648C12.4564 1.47295 12.9682 1.98472 13.9917 3.00825C15.0153 4.03179 15.527 4.54355 15.7635 5.11446C16.0788 5.87566 16.0788 6.73094 15.7635 7.49215C15.527 8.06305 15.0153 8.57482 13.9917 9.59835L9.59835 13.9917C8.57482 15.0153 8.06305 15.527 7.49215 15.7635C6.73094 16.0788 5.87566 16.0788 5.11446 15.7635C4.54355 15.527 4.03179 15.0153 3.00825 13.9917C1.98472 12.9682 1.47295 12.4564 1.23648 11.8855C0.921175 11.1243 0.921175 10.2691 1.23648 9.50785C1.47295 8.93695 1.98472 8.42518 3.00825 7.40165L7.40165 3.00825Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 940 B

View File

@ -0,0 +1,4 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.68431 12.4474H12.4475M12.4475 12.4474V9.6842M12.4475 12.4474L9.28958 9.28946M7.71063 7.71051L4.55273 4.55262M4.55273 4.55262H7.31589M4.55273 4.55262V7.31578" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 8.5C1 4.96447 1 3.1967 2.09835 2.09835C3.1967 1 4.96447 1 8.5 1C12.0355 1 13.8033 1 14.9017 2.09835C16 3.1967 16 4.96447 16 8.5C16 12.0355 16 13.8033 14.9017 14.9017C13.8033 16 12.0355 16 8.5 16C4.96447 16 3.1967 16 2.09835 14.9017C1 13.8033 1 12.0355 1 8.5Z" stroke="white"/>
</svg>

After

Width:  |  Height:  |  Size: 626 B

View File

@ -0,0 +1,8 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.4996 13L14.4996 4.00001M3.99963 14.5H12.9996M12.9996 2.50001H3.99963M2.49963 4.00001V13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.6785 5.74828L10.7919 5.26131L10.7919 5.26131L10.6785 5.74828ZM6.32116 5.74828L6.43458 6.23525L6.32116 5.74828ZM5.71277 5.98036L6.05306 6.3467H6.05306L5.71277 5.98036ZM4.99982 6.83332C4.99982 7.10946 5.22367 7.33332 5.49982 7.33332C5.77596 7.33332 5.99982 7.10946 5.99982 6.83332H4.99982ZM5.58784 6.13773L5.15386 5.88942L5.15386 5.88942L5.58784 6.13773ZM11.2869 5.98036L11.6271 5.61402L11.6271 5.61402L11.2869 5.98036ZM10.9998 6.83332C10.9998 7.10946 11.2237 7.33332 11.4998 7.33332C11.776 7.33332 11.9998 7.10946 11.9998 6.83332H10.9998ZM11.4118 6.13773L10.9778 6.38604L10.9778 6.38605L11.4118 6.13773ZM7.99982 11.5C7.99982 11.7761 8.22367 12 8.49982 12C8.77596 12 8.99982 11.7761 8.99982 11.5H7.99982ZM9.49982 12C9.77596 12 9.99982 11.7761 9.99982 11.5C9.99982 11.2238 9.77596 11 9.49982 11V12ZM7.49982 11C7.22367 11 6.99982 11.2238 6.99982 11.5C6.99982 11.7761 7.22367 12 7.49982 12V11ZM8.49982 5.99998C9.2144 5.99998 9.90651 6.08187 10.5651 6.23525L10.7919 5.26131C10.0591 5.09064 9.29089 4.99998 8.49982 4.99998V5.99998ZM6.43458 6.23525C7.09313 6.08187 7.78523 5.99998 8.49982 5.99998V4.99998C7.70874 4.99998 6.94053 5.09064 6.20775 5.26131L6.43458 6.23525ZM6.20775 5.26131C5.9342 5.32503 5.62067 5.38349 5.37249 5.61402L6.05306 6.3467C6.0545 6.34537 6.06111 6.33644 6.11146 6.31879C6.17602 6.29615 6.26506 6.27473 6.43458 6.23525L6.20775 5.26131ZM5.99982 6.83332C5.99982 6.64293 6.0004 6.5366 6.00832 6.45776C6.01183 6.42276 6.01592 6.40432 6.01843 6.39535C6.02048 6.38805 6.02163 6.38639 6.02182 6.38605L5.15386 5.88942C5.06358 6.04719 5.02861 6.20563 5.01332 6.3578C4.99924 6.498 4.99982 6.66255 4.99982 6.83332H5.99982ZM5.37249 5.61402C5.28951 5.6911 5.21011 5.79112 5.15386 5.88942L6.02182 6.38605C6.02789 6.37545 6.04411 6.35502 6.05306 6.3467L5.37249 5.61402ZM10.5651 6.23525C10.7346 6.27473 10.8236 6.29615 10.8882 6.31879C10.9385 6.33644 10.9451 6.34537 10.9466 6.3467L11.6271 5.61402C11.379 5.38349 11.0654 5.32503 10.7919 5.26131L10.5651 6.23525ZM11.9998 6.83332C11.9998 6.66255 12.0004 6.498 11.9863 6.3578C11.971 6.20563 11.936 6.04719 11.8458 5.88942L10.9778 6.38605C10.978 6.38639 10.9792 6.38805 10.9812 6.39535C10.9837 6.40432 10.9878 6.42276 10.9913 6.45776C10.9992 6.5366 10.9998 6.64293 10.9998 6.83332H11.9998ZM10.9466 6.3467C10.9555 6.35502 10.9717 6.37545 10.9778 6.38604L11.8458 5.88942C11.7895 5.79112 11.7101 5.6911 11.6271 5.61402L10.9466 6.3467ZM7.99982 5.49998V11.5H8.99982V5.49998H7.99982ZM9.49982 11H7.49982V12H9.49982V11Z" fill="white"/>
<rect x="12.9998" y="1" width="3" height="3" rx="1" stroke="white"/>
<rect x="1" y="1" width="3" height="3" rx="1" stroke="white"/>
<rect x="12.9998" y="13" width="3" height="3" rx="1" stroke="white"/>
<rect x="1" y="13" width="3" height="3" rx="1" stroke="white"/>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,4 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.1319 4.81727L14.7648 4.18031C14.4873 3.69859 14.3485 3.45773 14.1123 3.36169C13.8762 3.26564 13.6091 3.34143 13.075 3.493L12.1676 3.74857C11.8266 3.82721 11.4688 3.7826 11.1575 3.62262L10.907 3.47809C10.6399 3.30707 10.4346 3.05492 10.3209 2.75853L10.0726 2.01689C9.90929 1.52611 9.82765 1.28072 9.6333 1.14036C9.43894 1 9.18078 1 8.66447 1H7.83553C7.31922 1 7.06106 1 6.8667 1.14036C6.67235 1.28072 6.59071 1.52611 6.42744 2.01689L6.17911 2.75853C6.06543 3.05492 5.86006 3.30707 5.59304 3.47809L5.34254 3.62262C5.03117 3.7826 4.67339 3.82721 4.33238 3.74857L3.42502 3.493C2.89088 3.34143 2.62381 3.26564 2.38766 3.36169C2.15152 3.45773 2.01273 3.69859 1.73515 4.18031L1.36812 4.81727C1.10794 5.26881 0.977843 5.49458 1.00309 5.73493C1.02834 5.97527 1.2025 6.16895 1.55082 6.55631L2.31749 7.41345C2.50487 7.65068 2.63791 8.06408 2.63791 8.43576C2.63791 8.80767 2.50492 9.22097 2.31751 9.45823L1.55082 10.3154C1.2025 10.7027 1.02834 10.8964 1.00309 11.1368C0.977843 11.3771 1.10794 11.6029 1.36813 12.0544L1.73514 12.6914C2.01271 13.1731 2.15152 13.414 2.38766 13.51C2.62381 13.606 2.89089 13.5303 3.42504 13.3787L4.33234 13.1231C4.67342 13.0444 5.03126 13.0891 5.34268 13.2491L5.59314 13.3937C5.8601 13.5647 6.06543 13.8168 6.17909 14.1131L6.42744 14.8549C6.59071 15.3456 6.67235 15.591 6.8667 15.7314C7.06106 15.8718 7.31922 15.8718 7.83553 15.8718H8.66447C9.18078 15.8718 9.43894 15.8718 9.6333 15.7314C9.82765 15.591 9.90929 15.3456 10.0726 14.8549L10.3209 14.1131C10.4346 13.8168 10.6399 13.5647 10.9069 13.3937L11.1573 13.2491C11.4687 13.0891 11.8266 13.0444 12.1677 13.1231L13.075 13.3787C13.6091 13.5303 13.8762 13.606 14.1123 13.51C14.3485 13.414 14.4873 13.1731 14.7649 12.6914L15.1319 12.0544C15.3921 11.6029 15.5222 11.3771 15.4969 11.1368C15.4717 10.8964 15.2975 10.7027 14.9492 10.3154L14.1825 9.45823C13.9951 9.22097 13.8621 8.80767 13.8621 8.43576C13.8621 8.06408 13.9951 7.65068 14.1825 7.41345L14.9492 6.55631C15.2975 6.16895 15.4717 5.97527 15.4969 5.73493C15.5222 5.49458 15.3921 5.26881 15.1319 4.81727Z" stroke="white" stroke-linecap="round"/>
<path d="M10.8204 8.43006C10.8204 9.86741 9.65521 11.0326 8.21785 11.0326C6.7805 11.0326 5.6153 9.86741 5.6153 8.43006C5.6153 6.9927 6.7805 5.8275 8.21785 5.8275C9.65521 5.8275 10.8204 6.9927 10.8204 8.43006Z" stroke="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,4 @@
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.33344 1H8.33344C9.99029 1 11.3334 2.34315 11.3334 4C11.3334 5.65685 9.99029 7 8.33344 7H1.33344" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.66675 9L1.37385 7.70711C1.04052 7.37377 0.873855 7.20711 0.873855 7C0.873855 6.79289 1.04052 6.62623 1.37385 6.29289L2.66675 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 480 B

View File

@ -0,0 +1,4 @@
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66675 1H3.66675C2.00989 1 0.666748 2.34315 0.666748 4C0.666748 5.65685 2.00989 7 3.66675 7H10.6667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.33344 9L10.6263 7.70711C10.9597 7.37377 11.1263 7.20711 11.1263 7C11.1263 6.79289 10.9597 6.62623 10.6263 6.29289L9.33344 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 480 B

View File

@ -0,0 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.99915 9L1 1M1.00085 9L9 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 206 B

View File

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

After

Width:  |  Height:  |  Size: 565 B

View File

@ -0,0 +1,4 @@
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.1944 2.41667C4.29699 1.92185 4.46822 1.54853 4.75399 1.24851C5.46694 0.5 6.61442 0.5 8.90938 0.5C11.2043 0.5 12.3518 0.5 13.0648 1.24851C13.7777 1.99701 13.7777 3.20171 13.7777 5.61111V6.88889C13.7777 9.29829 13.7777 10.503 13.0648 11.2515C12.3518 12 11.2043 12 8.90938 12C6.61442 12 5.46694 12 4.75399 11.2515C4.46822 10.9515 4.29699 10.5782 4.1944 10.0833" stroke="white" stroke-linecap="round"/>
<path d="M1.00026 6.23385L8.6666 6.25001M1.00026 6.23385C0.995959 6.33775 1.03309 6.44227 1.11168 6.53538C1.60052 7.11451 2.87114 8.16667 2.87114 8.16667M1.00026 6.23385C1.00412 6.14068 1.0413 6.04802 1.11179 5.96454C1.60072 5.38552 2.87114 4.33334 2.87114 4.33334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 844 B

View File

@ -9,6 +9,7 @@ export default function CanvasPage() {
<div className="content">
<div className="canvas-wrap">
<CanvasMenu/>
asdasd
</div>
</div>
</div>

View File

@ -1,7 +1,74 @@
'use client'
import { useState } from "react";
import Qselect from "../common/select/Qselect";
import MenuDepth01 from "./MenuDepth01";
export default function CanvasMenu() {
const [menuNumber, setMenuNumber] = useState(null);
const SelectOption = [
{name: '瓦53A',}, {name: '瓦53A'}
]
const onClickNav = (number) => {
setMenuNumber(number)
if(menuNumber === number){
setMenuNumber(null)
}
}
return(
<div className="canvas-menu-wrap">
<div className="canvas-menu-inner">
<ul className="canvas-menu-list">
<li className={`canvas-menu-item ${menuNumber === 1 && 'active'}`} onClick={() => onClickNav(1)}>
<button><span className="menu-icon con01"></span>配置面 初期設定</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 2 && 'active'}`} onClick={() => onClickNav(2)}>
<button><span className="menu-icon con02"></span>配置面 初期設定</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 3 && 'active'}`} onClick={() => onClickNav(3)}>
<button><span className="menu-icon con03"></span>配置面</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 4 && 'active'}`} onClick={() => onClickNav(4)}>
<button><span className="menu-icon con04"></span>モジュール回路構成</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 5 && 'active'}`} onClick={() => onClickNav(5)}>
<button><span className="menu-icon con05"></span>発展シミュレーション</button>
</li>
<li className={`canvas-menu-item ${menuNumber === 6 && 'active'}`} onClick={() => onClickNav(6)}>
<button><span className="menu-icon con06"></span>見積</button>
</li>
</ul>
<div className="canvas-side-btn-wrap">
<div className="select-box">
<Qselect title={'瓦53A'} option={SelectOption}/>
</div>
<div className="btn-from">
<button className="btn01 "></button>
<button className="btn02 active"></button>
<button className="btn03"></button>
<button className="btn04"></button>
<button className="btn05"></button>
<button className="btn06"></button>
</div>
<div className="size-control">
<button className="control-btn minus"></button>
<span>100%</span>
<button className="control-btn plus"></button>
</div>
<div className="btn-from">
<button className="btn07"></button>
<button className="btn08"></button>
<button className="btn09"></button>
</div>
</div>
</div>
<div className={`canvas-depth2-wrap ${menuNumber !== null && 'active'}`}>
{menuNumber === 1 && <MenuDepth01/>}
{menuNumber === 2 && <MenuDepth01/>}
{menuNumber === 3 && <MenuDepth01/>}
{menuNumber === 4 && <MenuDepth01/>}
{menuNumber === 5 && <MenuDepth01/>}
{menuNumber === 6 && <MenuDepth01/>}
</div>
</div>
)
}

View File

@ -0,0 +1,26 @@
export default function MenuDepth01(){
return(
<div className="canvas-depth2-inner">
<ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>外壁線を描</button></li>
<li className="canvas-depth2-item"><button>補助線を描</button></li>
<li className="canvas-depth2-item"><button>屋根形状設定</button></li>
<li className="canvas-depth2-item"><button>軒下変更</button></li>
<li className="canvas-depth2-item"><button>外壁線の上げ下げ</button></li>
<li className="canvas-depth2-item"><button>銅線移動</button></li>
<li className="canvas-depth2-item"><button>特殊コーナー形状</button></li>
</ul>
<div className="canvas-depth2-btn-list">
<div className="depth2-btn-box">
<button>屋根面の割り当て</button>
</div>
<div className="depth2-btn-box">
<button>屋根材の設定と変更</button>
</div>
<div className="depth2-btn-box">
<button>屋根面全体削除</button>
</div>
</div>
</div>
)
}

View File

@ -1 +1,213 @@
// CanvasPage
// CanvasMenu
.canvas-menu-wrap{
display: block;
width: 100%;
background-color: #2C2C2C;
.canvas-menu-inner{
position: relative;
display: flex;
height: 46px;
align-items: center;
padding: 0 40px 0 20px;
background-color: inherit;
z-index: 999;
.canvas-menu-list{
display: flex;
align-items: center;
height: inherit;
.canvas-menu-item{
display: flex;
align-items: center;
height: inherit;
button{
display: flex;
align-items: center;
font-size: 12px;
height: inherit;
color: #fff;
font-weight: 600;
padding: 0 20px;
opacity: 0.55;
transition: all .17s ease-in-out;
.menu-icon{
display: block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-right: 10px;
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
&.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
&.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
&.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
&.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
}
}
&.active{
background-color: #383838;
button{
opacity: 1;
}
}
}
}
.canvas-side-btn-wrap{
display: flex;
align-items: center;
margin-left: auto;
.select-box{
width: 124px;
margin-right: 5px;
> div{
width: 100%;
}
}
.btn-from{
display: flex;
align-items: center;
gap: 5px;
button{
display: block;
width: 30px;
height: 30px;
border-radius: 2px;
background-color: #3D3D3D;
background-position: center;
background-repeat: no-repeat;
background-size: 15px 15px;
transition: all .17s ease-in-out;
&.btn01{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
&.btn03{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
&.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
&.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
&:hover{
background-color: #1083E3;
}
&.active{
background-color: #1083E3;
}
}
}
.size-control{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #3D3D3D;
border-radius: 2px;
width: 100px;
height: 30px;
margin: 0 5px;
span{
font-size: 13px;
color: #fff;
}
.control-btn{
display: block;
width: 12px;
height: 12px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.minus{
background-image: url(../../public/static/images/canvas/minus.svg);
}
&.plus{
background-image: url(../../public/static/images/canvas/plus.svg);
}
}
}
}
}
.canvas-depth2-wrap{
position: relative;
height: 50px;
background-color: #383838;
transform: translateY(-100%);
transition: all .17s ease-in-out;
.canvas-depth2-inner{
display: flex;
align-items: center;
padding: 0 40px;
height: 100%;
.canvas-depth2-list{
display: flex;
align-items: center ;
height: 100%;
.canvas-depth2-item{
display: flex;
align-items: center;
margin-right: 26px;
height: 100%;
button{
position: relative;
opacity: 0.55;
color: #fff;
font-size: 12px;
font-weight: normal;
height: 100%;
padding-right: 12px;
}
&.active{
button{
opacity: 1;
font-weight: 600;
&:after{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 5px;
height: 8px;
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
}
}
}
}
}
.canvas-depth2-btn-list{
display: flex;
align-items: center;
margin-left: auto;
.depth2-btn-box{
display: flex;
align-items: center;
margin-right: 34px;
button{
position: relative;
font-size: 12px;
font-weight: 400;
color: #fff;
padding-right: 12px;
&:after{
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 5px;
height: 8px;
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
}
}
&:last-child{
margin-right: 0;
}
}
}
}
&.active{
transform: translateY(0);
}
}
}

View File

@ -32,7 +32,7 @@ header{
height: 46px;
background-color: #1C1C1C;
border-bottom: 1px solid #000;
z-index: 9999;
.header-inner{
display: flex;
align-items: center;
@ -47,7 +47,7 @@ header{
display: block;
width: 232px;
height: 30px;
background: url(../../public/static/images/common/Logo.svg)no-repeat center;
background: url(/static/images/common/Logo.svg)no-repeat center;
background-size: contain;
}
}
@ -75,7 +75,7 @@ header{
transform: translateY(-50%);
width: 6px;
height: 10px;
background: url(../../public/static/images/common/nav-arr.svg)no-repeat center;
background: url(/static/images/common/nav-arr.svg)no-repeat center;
transition: all .17s ease-in-out;
}
}
@ -170,7 +170,7 @@ header{
left: 0;
width: 24px;
height: 24px;
background: url(../../public/static/images/common/profile_icon.svg)no-repeat center;
background: url(/static/images/common/profile_icon.svg)no-repeat center;
background-size: cover;
}
}

View File

@ -117,6 +117,7 @@ button{
border: none;
padding: 0;
margin: 0;
line-height: 1.4;
color: inherit;
outline: none;
cursor: pointer;
@ -204,7 +205,7 @@ button{
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/common/select-arr.svg) no-repeat center;
background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover;
transition: all .17s ease-in-out;
}