diff --git a/public/static/images/canvas/shape_menu01.svg b/public/static/images/canvas/shape_menu01.svg new file mode 100644 index 0000000..6fbe44c --- /dev/null +++ b/public/static/images/canvas/shape_menu01.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu02.svg b/public/static/images/canvas/shape_menu02.svg new file mode 100644 index 0000000..36a5eb4 --- /dev/null +++ b/public/static/images/canvas/shape_menu02.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu03.svg b/public/static/images/canvas/shape_menu03.svg new file mode 100644 index 0000000..ae7701c --- /dev/null +++ b/public/static/images/canvas/shape_menu03.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu04.svg b/public/static/images/canvas/shape_menu04.svg new file mode 100644 index 0000000..e23282c --- /dev/null +++ b/public/static/images/canvas/shape_menu04.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu05.svg b/public/static/images/canvas/shape_menu05.svg new file mode 100644 index 0000000..500d6bc --- /dev/null +++ b/public/static/images/canvas/shape_menu05.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu06.svg b/public/static/images/canvas/shape_menu06.svg new file mode 100644 index 0000000..a13e1b6 --- /dev/null +++ b/public/static/images/canvas/shape_menu06.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu07.svg b/public/static/images/canvas/shape_menu07.svg new file mode 100644 index 0000000..08119e5 --- /dev/null +++ b/public/static/images/canvas/shape_menu07.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_menu08.svg b/public/static/images/canvas/shape_menu08.svg new file mode 100644 index 0000000..4588b3b --- /dev/null +++ b/public/static/images/canvas/shape_menu08.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 36844d3..eccb167 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -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 && } */} {/* 외벽선 그리기 */} - {/* {modalOption.outerwall && } */} + {modalOption.outerwall && } {/* 외벽선 속성 설정 */} - + {/* */} + + {/* 지붕형상 설정 */} + {/* */} diff --git a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx index 6b4a43e..352ba42 100644 --- a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx @@ -63,11 +63,14 @@ export default function OuterLineWall (){ 対角線 - {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } - {buttonAct === 4 && } - {buttonAct === 5 && } +
+
設定
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
diff --git a/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx b/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx new file mode 100644 index 0000000..28a3999 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/RoofShapeOption.jsx @@ -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( + +
+
+

屋根形状の設定

+ +
+
+
+ {shapeMenu.map((item) => ( + + ))} +
+
+
設定
+ {shapeNum === 1 && } + {shapeNum === 2 && } + {shapeNum === 3 && } + {shapeNum === 4 && } + {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && } +
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx b/src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx new file mode 100644 index 0000000..50ef502 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/ShapeTab01.jsx @@ -0,0 +1,20 @@ +export default function ShapeTab01() { + return( +
+
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx b/src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx new file mode 100644 index 0000000..dfcec05 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/ShapeTab02.jsx @@ -0,0 +1,27 @@ +export default function ShapeTab02() { + return( +
+
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ケラバ出幅 +
+ +
+ mm +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx b/src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx new file mode 100644 index 0000000..ca3d543 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/ShapeTab03.jsx @@ -0,0 +1,27 @@ +export default function ShapeTab03() { + return( +
+
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ケラバ出幅 +
+ +
+ mm +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx b/src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx new file mode 100644 index 0000000..742d327 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/ShapeTab04.jsx @@ -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( +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } + {buttonAct === 6 && } +
+
+ + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/ShapeTabPosition.jsx b/src/components/canvas/modal/roofshapeoption/ShapeTabPosition.jsx new file mode 100644 index 0000000..07fce91 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/ShapeTabPosition.jsx @@ -0,0 +1,34 @@ +export default function ShapeTabPosition() { + return( +
+
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ケラバ出幅 +
+ +
+ mm +
+
+ 漂流の出幅 +
+ +
+ mm +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab01.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab01.jsx new file mode 100644 index 0000000..577ee16 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab01.jsx @@ -0,0 +1,20 @@ +export default function DiscriminationTab01(){ + return( + <> +
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab02.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab02.jsx new file mode 100644 index 0000000..13c1d2e --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab02.jsx @@ -0,0 +1,13 @@ +export default function DiscriminationTab02(){ + return( + <> +
+ ケラバ出幅 +
+ +
+ 寸法 +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx new file mode 100644 index 0000000..06b941d --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx @@ -0,0 +1,17 @@ +export default function DiscriminationTab03(){ + return( + <> +
+ + +
+
+ 袖あり +
+ +
+ mm +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab04.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab04.jsx new file mode 100644 index 0000000..d31532f --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab04.jsx @@ -0,0 +1,27 @@ +export default function DiscriminationTab04(){ + return( + <> +
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ケラバ出幅 +
+ +
+ mm +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab05.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab05.jsx new file mode 100644 index 0000000..c7c4973 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab05.jsx @@ -0,0 +1,27 @@ +export default function DiscriminationTab05(){ + return( + <> +
+ ケラバ出幅 +
+ +
+ mm +
+
+ 半折先幅 +
+ +
+ mm +
+
+ 半折先傾斜 +
+ +
+ 寸法 +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab06.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab06.jsx new file mode 100644 index 0000000..5115151 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab06.jsx @@ -0,0 +1,13 @@ +export default function DiscriminationTab06(){ + return( + <> +
+ 片流幅 +
+ +
+ mm +
+ + ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f7f5dee..116a216 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -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; @@ -513,4 +532,53 @@ $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; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 2c5b1e2..dfce04f 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -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;