외벽선 팝업 수정 및 지붕형상 추가
This commit is contained in:
parent
740bc2de3f
commit
99cb716880
34
public/static/images/canvas/shape_menu01.svg
Normal file
34
public/static/images/canvas/shape_menu01.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_783)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="18" y="18" width="1" height="25" fill="white"/>
|
||||
<path d="M64 0.5L43 18.5L63.5 37" stroke="white"/>
|
||||
<path d="M33 63.5L18 42.5L1 63.5" stroke="white"/>
|
||||
<rect x="19" y="18" width="24" height="1" fill="white"/>
|
||||
<path d="M1 1L18.5 20" stroke="white"/>
|
||||
<path d="M19 19L34 38" stroke="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_783">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
31
public/static/images/canvas/shape_menu02.svg
Normal file
31
public/static/images/canvas/shape_menu02.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_808)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="28" y="1" width="1" height="31" fill="white"/>
|
||||
<rect x="17.5" y="32.5" width="16" height="31" stroke="white"/>
|
||||
<rect x="18" y="37" width="15" height="1" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_808">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
31
public/static/images/canvas/shape_menu03.svg
Normal file
31
public/static/images/canvas/shape_menu03.svg
Normal file
@ -0,0 +1,31 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_830)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="28.5" y="16.5" width="35" height="21" stroke="white"/>
|
||||
<rect x="1" y="32" width="32" height="1" fill="white"/>
|
||||
<rect x="33" y="17" width="1" height="20" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_830">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
30
public/static/images/canvas/shape_menu04.svg
Normal file
30
public/static/images/canvas/shape_menu04.svg
Normal file
@ -0,0 +1,30 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_852)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="64" height="1" fill="white"/>
|
||||
<rect y="63" width="34" height="1" fill="white"/>
|
||||
<rect x="34" y="37" width="30" height="1" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect x="33" y="37" width="1" height="26" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect y="1" width="1" height="63" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="63" y="1" width="1" height="37" fill="white"/>
|
||||
<rect x="5" y="5" width="54" height="1" fill="#818181"/>
|
||||
<rect x="5" y="58" width="24" height="1" fill="#818181"/>
|
||||
<rect x="28" y="32" width="31" height="1" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="28" y="33" width="1" height="26" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="5" y="5" width="1" height="54" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="5" width="1" height="28" fill="#818181"/>
|
||||
<rect x="58" y="1" width="5" height="36" fill="white"/>
|
||||
<path d="M51.5303 19.5303C51.8232 19.2374 51.8232 18.7626 51.5303 18.4697L46.7574 13.6967C46.4645 13.4038 45.9896 13.4038 45.6967 13.6967C45.4038 13.9896 45.4038 14.4645 45.6967 14.7574L49.9393 19L45.6967 23.2426C45.4038 23.5355 45.4038 24.0104 45.6967 24.3033C45.9896 24.5962 46.4645 24.5962 46.7574 24.3033L51.5303 19.5303ZM40 19.75H51V18.25H40V19.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_852">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
29
public/static/images/canvas/shape_menu05.svg
Normal file
29
public/static/images/canvas/shape_menu05.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_874)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(-1 0 0 1 64 0)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(-1 0 0 1 64 63)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(-1 0 0 1 30 37)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 31 37)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 31 37)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(-1 0 0 1 64 1)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(-1 0 0 1 64 1)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(-1 0 0 1 21 1)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(-1 0 0 1 21 1)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(-1 0 0 1 59 58)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(-1 0 0 1 36 32)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 36 33)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(-1 0 0 1 36 33)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(-1 0 0 1 59 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(-1 0 0 1 26 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(-1 0 0 1 26 5)" fill="#818181"/>
|
||||
<path d="M4.46967 32.5303C4.17678 32.2374 4.17678 31.7626 4.46967 31.4697L9.24264 26.6967C9.53553 26.4038 10.0104 26.4038 10.3033 26.6967C10.5962 26.9896 10.5962 27.4645 10.3033 27.7574L6.06066 32L10.3033 36.2426C10.5962 36.5355 10.5962 37.0104 10.3033 37.3033C10.0104 37.5962 9.53553 37.5962 9.24264 37.3033L4.46967 32.5303ZM16 32.75H5V31.25H16V32.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_874">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu06.svg
Normal file
29
public/static/images/canvas/shape_menu06.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_894)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(1 0 0 -1 0 64)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(1 0 0 -1 0 1)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(1 0 0 -1 34 27)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 33 27)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 33 27)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(1 0 0 -1 0 63)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(1 0 0 -1 0 63)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(1 0 0 -1 43 63)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(1 0 0 -1 43 63)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(1 0 0 -1 5 6)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(1 0 0 -1 28 32)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 28 31)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(1 0 0 -1 28 31)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(1 0 0 -1 5 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(1 0 0 -1 38 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(1 0 0 -1 38 59)" fill="#818181"/>
|
||||
<path d="M59.5303 32.5303C59.8232 32.2374 59.8232 31.7626 59.5303 31.4697L54.7574 26.6967C54.4645 26.4038 53.9896 26.4038 53.6967 26.6967C53.4038 26.9896 53.4038 27.4645 53.6967 27.7574L57.9393 32L53.6967 36.2426C53.4038 36.5355 53.4038 37.0104 53.6967 37.3033C53.9896 37.5962 54.4645 37.5962 54.7574 37.3033L59.5303 32.5303ZM48 32.75H59V31.25H48V32.75Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_894">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu07.svg
Normal file
29
public/static/images/canvas/shape_menu07.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_914)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(0 1 1 0 0 0)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 1 1 0 63 0)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(0 1 1 0 37 34)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 37 33)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 37 33)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 1 1 0 1 0)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 1 1 0 1 0)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 1 1 0 1 43)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 1 1 0 1 43)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(0 1 1 0 58 5)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(0 1 1 0 32 28)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 33 28)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 1 1 0 33 28)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 1 1 0 5 5)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 1 1 0 5 38)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 1 1 0 5 38)" fill="#818181"/>
|
||||
<path d="M33.0303 59.0303C32.7374 59.3232 32.2626 59.3232 31.9697 59.0303L27.1967 54.2574C26.9038 53.9645 26.9038 53.4896 27.1967 53.1967C27.4896 52.9038 27.9645 52.9038 28.2574 53.1967L32.5 57.4393L36.7426 53.1967C37.0355 52.9038 37.5104 52.9038 37.8033 53.1967C38.0962 53.4896 38.0962 53.9645 37.8033 54.2574L33.0303 59.0303ZM33.25 47.5V58.5H31.75V47.5H33.25Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_914">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
29
public/static/images/canvas/shape_menu08.svg
Normal file
29
public/static/images/canvas/shape_menu08.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4049_934)">
|
||||
<rect width="64" height="64" fill="#313131"/>
|
||||
<rect width="44" height="1" transform="matrix(0 -1 -1 0 64 64)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 -1 -1 0 1 64)" fill="white"/>
|
||||
<rect width="10" height="1" transform="matrix(0 -1 -1 0 27 30)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 27 31)" fill="white"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 27 31)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 -1 -1 0 63 64)" fill="white"/>
|
||||
<rect width="1" height="63" transform="matrix(0 -1 -1 0 63 64)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 -1 -1 0 63 21)" fill="white"/>
|
||||
<rect width="1" height="37" transform="matrix(0 -1 -1 0 63 21)" fill="white"/>
|
||||
<rect width="34" height="1" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="24" height="1" transform="matrix(0 -1 -1 0 6 59)" fill="#818181"/>
|
||||
<rect width="11" height="1" transform="matrix(0 -1 -1 0 32 36)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 31 36)" fill="#818181"/>
|
||||
<rect width="1" height="26" transform="matrix(0 -1 -1 0 31 36)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="1" height="54" transform="matrix(0 -1 -1 0 59 59)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 -1 -1 0 59 26)" fill="#818181"/>
|
||||
<rect width="1" height="28" transform="matrix(0 -1 -1 0 59 26)" fill="#818181"/>
|
||||
<path d="M33.0303 4.96967C32.7374 4.67678 32.2626 4.67678 31.9697 4.96967L27.1967 9.74264C26.9038 10.0355 26.9038 10.5104 27.1967 10.8033C27.4896 11.0962 27.9645 11.0962 28.2574 10.8033L32.5 6.56066L36.7426 10.8033C37.0355 11.0962 37.5104 11.0962 37.8033 10.8033C38.0962 10.5104 38.0962 10.0355 37.8033 9.74264L33.0303 4.96967ZM33.25 16.5V5.5H31.75V16.5H33.25Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4049_934">
|
||||
<rect width="64" height="64" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -8,6 +8,7 @@ import GridOption from '@/components/canvas/modal/gridoption/GridOption'
|
||||
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
|
||||
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
|
||||
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
|
||||
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
|
||||
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
|
||||
import Header from '@/components/layout/Header'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
@ -39,10 +40,13 @@ export default function CanvasPage() {
|
||||
{/* {modalOption.gridmove && <GridMove/>} */}
|
||||
|
||||
{/* 외벽선 그리기 */}
|
||||
{/* {modalOption.outerwall && <OuterLineWall/>} */}
|
||||
{modalOption.outerwall && <OuterLineWall/>}
|
||||
|
||||
{/* 외벽선 속성 설정 */}
|
||||
<PropertiesSetting/>
|
||||
{/* <PropertiesSetting/> */}
|
||||
|
||||
{/* 지붕형상 설정 */}
|
||||
{/* <RoofShapeOption/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,11 +63,14 @@ export default function OuterLineWall (){
|
||||
対角線
|
||||
</button>
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">設定</div>
|
||||
{buttonAct === 1 && <Tab01/>}
|
||||
{buttonAct === 2 && <Tab02/>}
|
||||
{buttonAct === 3 && <Tab03/>}
|
||||
{buttonAct === 4 && <Tab04/>}
|
||||
{buttonAct === 5 && <Tab05/>}
|
||||
</div>
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5">一変戦に戻る</button>
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
import WithDraggable from "@/components/common/draggable/withDraggable";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import ShapeTab01 from "./ShapeTab01";
|
||||
import ShapeTab02 from "./ShapeTab02";
|
||||
import ShapeTab03 from "./ShapeTab03";
|
||||
import ShapeTab04 from "./ShapeTab04";
|
||||
import ShapeTabPosition from "./ShapeTabPosition";
|
||||
|
||||
const shapeMenu = [
|
||||
{id:1, name:'龍丸屋根'},
|
||||
{id:2, name:'Aパターン'},
|
||||
{id:3, name:'Bパターン'},
|
||||
{id:4, name:'別に設定'},
|
||||
{id:5, name:'立つ'},
|
||||
{id:6, name:'ドン'},
|
||||
{id:7, name:'M'},
|
||||
{id:8, name:'北'},
|
||||
]
|
||||
export default function RoofShapeOption() {
|
||||
const [shapeNum, setShapeNum] = useState(1);
|
||||
return(
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap lr`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">屋根形状の設定</h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="roof-shape-menu">
|
||||
{shapeMenu.map((item) => (
|
||||
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act': ''}`} onClick={() => setShapeNum(item.id)}>
|
||||
<div className="shape-box">
|
||||
<Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
|
||||
</div>
|
||||
<div className="shape-title">{item.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">設定</div>
|
||||
{shapeNum === 1 && <ShapeTab01/>}
|
||||
{shapeNum === 2 && <ShapeTab02/>}
|
||||
{shapeNum === 3 && <ShapeTab03/>}
|
||||
{shapeNum === 4 && <ShapeTab04/>}
|
||||
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <ShapeTabPosition/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">設定完了</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
20
src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx
Normal file
20
src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx
Normal file
@ -0,0 +1,20 @@
|
||||
export default function ShapeTab01() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={100}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx
Normal file
27
src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
export default function ShapeTab02() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
27
src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx
Normal file
27
src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
export default function ShapeTab03() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
48
src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx
Normal file
48
src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { useState } from "react"
|
||||
import DiscriminationTab01 from "./discriminationtab/DiscriminationTab01";
|
||||
import DiscriminationTab02 from "./discriminationtab/DiscriminationTab02";
|
||||
import DiscriminationTab04 from "./discriminationtab/DiscriminationTab04";
|
||||
import DiscriminationTab05 from "./discriminationtab/DiscriminationTab05";
|
||||
import DiscriminationTab06 from "./discriminationtab/DiscriminationTab06";
|
||||
import DiscriminationTab03 from "./discriminationtab/DiscriminationTab03";
|
||||
|
||||
const buttonMenu = [
|
||||
{id: 1, name: '軒'},
|
||||
{id: 2, name: 'ケラバ'},
|
||||
{id: 3, name: '壁'},
|
||||
{id: 4, name: '八作屋根'},
|
||||
{id: 5, name: '半折'},
|
||||
{id: 6, name: '片側の流れ'},
|
||||
]
|
||||
|
||||
export default function ShapeTab04() {
|
||||
const [buttonAct, setButtonAct] = useState(1);
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="discrimination-tab">
|
||||
<div className="modal-btn-wrap sub">
|
||||
{buttonMenu.map((item) => (
|
||||
<button
|
||||
className={`btn-frame sub-tab ${buttonAct === item.id ? 'act' : ''}`}
|
||||
onClick={() => setButtonAct(item.id)}
|
||||
>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box">
|
||||
{buttonAct === 1 && <DiscriminationTab01/>}
|
||||
{buttonAct === 2 && <DiscriminationTab02/>}
|
||||
{buttonAct === 3 && <DiscriminationTab03/>}
|
||||
{buttonAct === 4 && <DiscriminationTab04/>}
|
||||
{buttonAct === 5 && <DiscriminationTab05/>}
|
||||
{buttonAct === 6 && <DiscriminationTab06/>}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame sub-tab mr5">一変戦に戻る</button>
|
||||
<button className="btn-frame sub-tab act">適用</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
export default function ShapeTabPosition() {
|
||||
return(
|
||||
<div className="setting-box">
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>漂流の出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
export default function DiscriminationTab01(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '24px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '24px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
export default function DiscriminationTab02(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
export default function DiscriminationTab03(){
|
||||
return(
|
||||
<>
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" />
|
||||
<label htmlFor="ra01">袖なし</label>
|
||||
</div>
|
||||
<div className="outline-form" style={{paddingLeft: '22px'}}>
|
||||
<span className="mr10" style={{width: 'auto'}}>袖あり</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
export default function DiscriminationTab04(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>軒の</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={500}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
export default function DiscriminationTab05(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>ケラバ出幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={300}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form mb10">
|
||||
<span className="mr10" style={{width: '60px'}}>半折先幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={800}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{width: '60px'}}>半折先傾斜</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={4.5}/>
|
||||
</div>
|
||||
<span className="thin">寸法</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
export default function DiscriminationTab06(){
|
||||
return(
|
||||
<>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">片流幅</span>
|
||||
<div className="input-grid mr5" style={{width: '100px'}}>
|
||||
<input type="text" className="input-origin block" defaultValue={600}/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -30,6 +30,9 @@ $alert-color: #101010;
|
||||
&.r{
|
||||
width: 400px;
|
||||
}
|
||||
&.lr{
|
||||
width: 440px;
|
||||
}
|
||||
&.sm{
|
||||
width: 580px;
|
||||
}
|
||||
@ -107,6 +110,12 @@ $alert-color: #101010;
|
||||
button{
|
||||
flex: 1;
|
||||
}
|
||||
&.sub{
|
||||
button{
|
||||
flex: 1 1 auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-check-btn-wrap{
|
||||
margin-top: 15px;
|
||||
@ -403,6 +412,7 @@ $alert-color: #101010;
|
||||
// 외벽선 그리기
|
||||
.outline-wrap{
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid #424242;
|
||||
border-bottom: 1px solid #424242;
|
||||
.outline-inner{
|
||||
display: flex;
|
||||
@ -411,10 +421,12 @@ $alert-color: #101010;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.outline-form{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.outline-form{
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
@ -425,6 +437,9 @@ $alert-color: #101010;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-right: 10px;
|
||||
&.thin{
|
||||
font-weight: &$pop-normal-weight;
|
||||
}
|
||||
}
|
||||
.reset-btn{
|
||||
flex: none;
|
||||
@ -468,6 +483,7 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
|
||||
// 외벽선 속성 설정
|
||||
.properties-guide{
|
||||
font-size: $pop-normal-size;
|
||||
color: #AAA;
|
||||
@ -476,6 +492,9 @@ $alert-color: #101010;
|
||||
}
|
||||
|
||||
.properties-setting-wrap{
|
||||
&.outer{
|
||||
margin-top: 24px;
|
||||
}
|
||||
.setting-tit{
|
||||
font-size: 13px;
|
||||
color: $pop-color;
|
||||
@ -514,3 +533,52 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 지붕형상 설정
|
||||
.roof-shape-menu{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 24px 10px;
|
||||
margin-bottom: 24px;
|
||||
.shape-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background-color: #3D3D3D;
|
||||
transition: background .15s ease-in-out;
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.shape-title{
|
||||
font-size: $pop-normal-size;
|
||||
font-weight: $pop-bold-weight;
|
||||
color: $pop-color;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
.shape-menu-box{
|
||||
&.act,
|
||||
&:hover{
|
||||
.shape-box{background-color: #008BFF;}
|
||||
.shape-title{color: #008BFF;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-box{
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid #424242;
|
||||
border-bottom: 1px solid #424242;
|
||||
}
|
||||
|
||||
.discrimination-box{
|
||||
padding: 16px 12px;
|
||||
border: 1px solid #3D3D3D;
|
||||
border-radius: 2px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
@ -189,6 +189,22 @@ button{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.sub-tab{
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
line-height: 28px;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #393939;
|
||||
color: #aaa;
|
||||
&.act,
|
||||
&:hover{
|
||||
background-color: #414E6C;
|
||||
border: 1px solid #414E6C;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.act{
|
||||
background-color: #1083E3;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user