diff --git a/public/static/images/canvas/eaves_icon01.svg b/public/static/images/canvas/eaves_icon01.svg new file mode 100644 index 0000000..da52006 --- /dev/null +++ b/public/static/images/canvas/eaves_icon01.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon02.svg b/public/static/images/canvas/eaves_icon02.svg new file mode 100644 index 0000000..0addbc0 --- /dev/null +++ b/public/static/images/canvas/eaves_icon02.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon03.svg b/public/static/images/canvas/eaves_icon03.svg new file mode 100644 index 0000000..b95b49f --- /dev/null +++ b/public/static/images/canvas/eaves_icon03.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon04.svg b/public/static/images/canvas/eaves_icon04.svg new file mode 100644 index 0000000..ac08ce0 --- /dev/null +++ b/public/static/images/canvas/eaves_icon04.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon05.svg b/public/static/images/canvas/eaves_icon05.svg new file mode 100644 index 0000000..649a605 --- /dev/null +++ b/public/static/images/canvas/eaves_icon05.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon06.svg b/public/static/images/canvas/eaves_icon06.svg new file mode 100644 index 0000000..a2f1780 --- /dev/null +++ b/public/static/images/canvas/eaves_icon06.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon07.svg b/public/static/images/canvas/eaves_icon07.svg new file mode 100644 index 0000000..1f101d5 --- /dev/null +++ b/public/static/images/canvas/eaves_icon07.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon08.svg b/public/static/images/canvas/eaves_icon08.svg new file mode 100644 index 0000000..8a2529d --- /dev/null +++ b/public/static/images/canvas/eaves_icon08.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + 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..6f300c8 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -2,12 +2,17 @@ import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' +import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption' +import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption' import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' 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 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' @@ -28,13 +33,13 @@ export default function CanvasPage() { {/* 배치면 초기 설정 */} - {/* */} + {/* 캔버스 기본 셋팅 */} {/* {modalOption.option && } */} {/* 점·선 그리드 설정 */} - {/* {modalOption.gridoption && } */} + {modalOption.gridoption && } {/* {modalOption.gridcopy && } */} {/* {modalOption.gridmove && } */} @@ -42,7 +47,22 @@ export default function CanvasPage() { {/* {modalOption.outerwall && } */} {/* 외벽선 속성 설정 */} - + {/* */} + + {/* 지붕형상 설정 */} + {/* */} + + {/* 지붕형상 수동 설정 */} + {/* */} + + {/* 보조선 작성 */} + {/* */} + + {/* 처마∙케라바 변경 */} + {/* */} + + {/* 동선이동∙형 올림 내림 */} + {/* */} diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx new file mode 100644 index 0000000..2d1b27c --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx @@ -0,0 +1,24 @@ +export default function AuxiliaryTab01(){ + return( +
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx new file mode 100644 index 0000000..cb1e774 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx @@ -0,0 +1,42 @@ +export default function AuxiliaryTab02(){ + return( +
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx new file mode 100644 index 0000000..61ae3e0 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx @@ -0,0 +1,64 @@ +export default function AuxiliaryTab03(){ + return( + <> +
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx new file mode 100644 index 0000000..2bf3313 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx @@ -0,0 +1,64 @@ +export default function AuxiliaryTab04(){ + return( + <> +
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx new file mode 100644 index 0000000..be8a48e --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx @@ -0,0 +1,50 @@ +export default function AuxiliaryTab05(){ + return( +
+
+
+ 対角線の
長さ(mm) +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+ 長さ(mm) +
+ +
+
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx new file mode 100644 index 0000000..2dcfcb6 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx @@ -0,0 +1,55 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import AuxiliaryTab01 from "./AuxiliaryTab01"; +import AuxiliaryTab02 from "./AuxiliaryTab02"; +import AuxiliaryTab03 from "./AuxiliaryTab03"; +import AuxiliaryTab04 from "./AuxiliaryTab04"; +import AuxiliaryTab05 from "./AuxiliaryTab05"; + +const buttonMenu = [ + {id: 1, name: 'ランダムライン'}, + {id: 2, name: '直角'}, + {id: 3, name: 'イ・グベ'}, + {id: 4, name: '角度'}, + {id: 5, name: '対角線'}, +] + +export default function AuxiliarylineOption(){ + const [buttonAct, setButtonAct] = useState(1); + + return( + +
+
+

補助線の作成

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
+
+ + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx new file mode 100644 index 0000000..f84ae02 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx @@ -0,0 +1,51 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import EavesKerabaTab01 from "./EavesKerabaTab01"; +import EavesKerabaTab02 from "./EavesKerabaTab02"; +import EavesKerabaTab03 from "./EavesKerabaTab03"; +import EavesKerabaTab04 from "./EavesKerabaTab04"; + +const buttonMenu = [ + {id: 1, name: '軒'}, + {id: 2, name: '直ケラバ角'}, + {id: 3, name: '壁取り'}, + {id: 4, name: '片側の流れ'}, +] + +export default function EvaseKerabaOption(){ + const [buttonAct, setButtonAct] = useState(1); + + return( + +
+
+

軒・ケラバ変更

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } +
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx new file mode 100644 index 0000000..dc2d757 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx @@ -0,0 +1,70 @@ +import Image from "next/image"; + +export default function EavesKerabaTab01(){ + return( + <> +
+
+ 傾斜 +
+ +
+ 傾斜 +
+
+ 出幅 +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ {/* 出幅 */} +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx new file mode 100644 index 0000000..ce68a25 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx @@ -0,0 +1,79 @@ +import Image from "next/image"; + +export default function EavesKerabaTab02(){ + return( + <> +
+
+ 出幅 +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ 傾斜 +
+ +
+ 寸法 +
+
+
+
+ react +
+
+
+
+
+
+ 出幅 +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx new file mode 100644 index 0000000..7caa5f4 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx @@ -0,0 +1,57 @@ +import Image from "next/image"; + +export default function EavesKerabaTab03(){ + return( + <> +
+
+ 家屋などの壁に面する屋根を作成します。 +
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ 出幅 +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx new file mode 100644 index 0000000..eed549f --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx @@ -0,0 +1,17 @@ +import Image from "next/image"; + +export default function EavesKerabaTab04(){ + return( + <> +
+
+ 出幅 +
+ +
+ mm +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridMove.jsx b/src/components/canvas/modal/gridoption/GridMove.jsx index 6c4e4ee..6db1f80 100644 --- a/src/components/canvas/modal/gridoption/GridMove.jsx +++ b/src/components/canvas/modal/gridoption/GridMove.jsx @@ -20,7 +20,7 @@ export default function GridMove() {
-

グリッドのコピー

+

グリッド移動

diff --git a/src/components/canvas/modal/gridoption/GridOption.jsx b/src/components/canvas/modal/gridoption/GridOption.jsx index b98c7ce..afcad25 100644 --- a/src/components/canvas/modal/gridoption/GridOption.jsx +++ b/src/components/canvas/modal/gridoption/GridOption.jsx @@ -9,7 +9,7 @@ export default function GridOption() { const [close, setClose] = useState(false) const SelectOption = [ - {name: 'オンライン保証シ',}, {name: 'ステム'} + {name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'} ] const HandleClickClose = () => { diff --git a/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx b/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx new file mode 100644 index 0000000..2bd9f05 --- /dev/null +++ b/src/components/canvas/modal/manualroofshape/ManualRoofShape.jsx @@ -0,0 +1,50 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import ManualTab01 from "./ManualTab01"; + +const buttonMenu = [ + {id: 1, name: '軒'}, + {id: 2, name: 'ケラバ'}, + {id: 3, name: '漂流'}, +] + +export default function ManualRoofShape(){ + const [buttonAct, setButtonAct] = useState(1); + return( + +
+
+

屋根形状の設定

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } +
+
+ + +
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/manualroofshape/ManualTab01.jsx b/src/components/canvas/modal/manualroofshape/ManualTab01.jsx new file mode 100644 index 0000000..254a984 --- /dev/null +++ b/src/components/canvas/modal/manualroofshape/ManualTab01.jsx @@ -0,0 +1,34 @@ +export default function ManualTab01() { + return( + <> +
+ 傾斜 +
+ +
+ 寸法 +
+
+ 軒の +
+ +
+ mm +
+
+ ケラバ 出幅 +
+ +
+ mm +
+
+ 片流幅 +
+ +
+ mm +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/movingupdown/MovingTab01.jsx b/src/components/canvas/modal/movingupdown/MovingTab01.jsx new file mode 100644 index 0000000..f2eb7d2 --- /dev/null +++ b/src/components/canvas/modal/movingupdown/MovingTab01.jsx @@ -0,0 +1,46 @@ +import Image from "next/image"; + +export default function MovingTab01(){ + return( + <> +
+
+ 家屋などの壁に面する屋根を作成します。 +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+ +
+ mm +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/movingupdown/MovingTab02.jsx b/src/components/canvas/modal/movingupdown/MovingTab02.jsx new file mode 100644 index 0000000..d2836eb --- /dev/null +++ b/src/components/canvas/modal/movingupdown/MovingTab02.jsx @@ -0,0 +1,46 @@ +import Image from "next/image"; + +export default function MovingTab02(){ + return( + <> +
+
+ を選択して幅を指定してください桁の異なる辺 +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+ +
+ mm +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/movingupdown/MovingUpDown.jsx b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx new file mode 100644 index 0000000..198558e --- /dev/null +++ b/src/components/canvas/modal/movingupdown/MovingUpDown.jsx @@ -0,0 +1,43 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import MovingTab01 from "./MovingTab01"; + +const buttonMenu = [ + {id: 1, name: '銅線の移動軒'}, + {id: 2, name: '型上げ・降り'}, +] + +export default function MovingUpDonw(){ + const [buttonAct, setButtonAct] = useState(1); + + return( +
+
+

軒・ケラバ変更

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {buttonAct === 1 && } +
+
+ +
+
+
+ // + // + ) +} \ No newline at end of file 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/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx index 1f50128..5b44bbd 100644 --- a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx +++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx @@ -1,9 +1,21 @@ import WithDraggable from "@/components/common/draggable/withDraggable"; import PlacementGuidePop from "./PlacementGuidePop"; import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop"; +import Qselect from "@/components/common/select/Qselect"; +const SelectOption01 = [ + {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'} +] +const SelectOption02 = [ + {name: '265',}, {name: '265'}, {name: '265'}, {name: '265'} +] +const SelectOption03 = [ + {name: '235',}, {name: '235'}, {name: '235'}, {name: '235'} +] +const SelectOption04 = [ + {name: '455'}, {name: '455'}, {name: '455'}, {name: '455'} +] export default function PlacementSettingPop(){ - return(
@@ -64,33 +76,25 @@ export default function PlacementSettingPop(){
-
- +
+
W -
- +
+
L -
- +
+
垂木の間隔 -
- +
+
@@ -104,8 +108,8 @@ export default function PlacementSettingPop(){
- - + {/* + */}
) 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..efce901 --- /dev/null +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx @@ -0,0 +1,19 @@ +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..2e0183a 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -26,18 +26,23 @@ $alert-color: #101010; border-radius: 4px; background-color: #272727; z-index: 9999999; - overflow: hidden; - &.r{ - width: 400px; + &.xxm{ + width: 270px; } - &.sm{ - width: 580px; + &.xm{ + width: 300px; } &.ssm{ width: 380px; } - &.xm{ - width: 300px; + &.sm{ + width: 580px; + } + &.r{ + width: 400px; + } + &.lr{ + width: 440px; } &.l{ width: 800px; @@ -84,6 +89,7 @@ $alert-color: #101010; align-items: center; padding: 10px 24px; background-color: #000; + // overflow: hidden; h1.title{ font-size: 13px; color: $pop-color; @@ -91,8 +97,8 @@ $alert-color: #101010; } .modal-close{ margin-left: auto; - color: $pop-color; - text-indent: -999999999px; + color: transparent; + font-size: 0; width: 10px; height: 10px; background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center; @@ -107,6 +113,13 @@ $alert-color: #101010; button{ flex: 1; } + &.sub{ + button{ + flex: 1 1 auto; + padding: 0; + } + margin-bottom: 14px; + } } .modal-check-btn-wrap{ margin-top: 15px; @@ -197,19 +210,17 @@ $alert-color: #101010; align-items: center; gap: 15px; padding-bottom: 15px; - border-bottom: 1px solid #3C3C3C; } .grid-option-wrap{ - padding: 15px 0; - border-bottom: 1px solid #3C3C3C; .grid-option-box{ display: flex; align-items: center; - background-color: #3D3D3D; + background-color: transparent; + border: 1px solid #3D3D3D; border-radius: 2px; - padding: 10px; + padding: 15px 10px; gap: 20px; - margin-bottom: 5px; + margin-bottom: 10px; .grid-input-form{ display: flex; align-items: center; @@ -236,13 +247,32 @@ $alert-color: #101010; .sort-select{ width: 100%; background-color: #313131; + min-width: auto; + font-size: 12px; + border: none; + p{ + font-size: 12px; + } + > ul{ + border: none; + } + } + &.right{ + p{ + text-align: right; + } + ul{ + li{ + justify-content: flex-end; + } + } } } .grid-btn-wrap{ padding-top: 15px; text-align: right; button{ - padding: 0 20px; + padding: 0 10px; } } @@ -252,7 +282,7 @@ $alert-color: #101010; color: $pop-color; font-weight: $pop-normal-weight; padding-bottom: 15px; - border-bottom: 1px solid #3C3C3C; + } .grid-direction{ display: flex; @@ -403,7 +433,8 @@ $alert-color: #101010; // 외벽선 그리기 .outline-wrap{ padding: 24px 0; - border-bottom: 1px solid #424242; + border-top: 1px solid #424242; + .outline-inner{ display: flex; align-items: center; @@ -411,13 +442,19 @@ $alert-color: #101010; &:last-child{ margin-bottom: 0; } + .outline-form{ + // width: 50%; + margin-right: 15px; + } + } + &:last-child{ + border-bottom: 1px solid #424242; } } .outline-form{ - width: 50%; display: flex; align-items: center; - margin-right: 15px; + span{ width: 60px; flex: none; @@ -425,6 +462,11 @@ $alert-color: #101010; font-weight: $pop-bold-weight; color: $pop-color; margin-right: 10px; + &.thin{ + width: auto; + font-weight: $pop-normal-weight; + margin-right: 0; + } } .reset-btn{ flex: none; @@ -468,6 +510,7 @@ $alert-color: #101010; } } +// 외벽선 속성 설정 .properties-guide{ font-size: $pop-normal-size; color: #AAA; @@ -475,12 +518,15 @@ $alert-color: #101010; margin-bottom: 14px; } +.setting-tit{ + font-size: 13px; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-bottom: 10px; +} .properties-setting-wrap{ - .setting-tit{ - font-size: 13px; - color: $pop-color; - font-weight: $pop-bold-weight; - margin-bottom: 10px; + &.outer{ + margin-top: 24px; } .setting-btn-wrap{ display: flex; @@ -513,4 +559,102 @@ $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; +} +.padding-form{ + padding-left: 23px; +} +.discrimination-box{ + padding: 16px 12px; + border: 1px solid #3D3D3D; + border-radius: 2px; +} + +.modal-bottom-border-bx{ + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; +} + +// 처마∙케라바 변경 +.eaves-keraba-table{ + display: table; + border-collapse: collapse; + .eaves-keraba-item{ + display: table-row; + .eaves-keraba-th, + .eaves-keraba-td{ + display: table-cell; + vertical-align: middle; + padding-bottom: 14px; + } + .eaves-keraba-td{ + padding-left: 15px; + } + .eaves-keraba-ico{ + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + border-radius: 2px; + &.act{ + border: 1px solid #ED0004; + } + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0; + } + } + } +} +.guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-bottom: 24px; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 2c5b1e2..a62ff48 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -133,12 +133,16 @@ button{ // margin .mt5{margin-top: 5px !important;} .mt10{margin-top: 10px !important;} +.mt15{margin-top: 15px !important;} .mb5{margin-bottom: 5px !important;} .mb10{margin-bottom: 10px !important;} +.mb15{margin-bottom: 15px !important;} .mr5{margin-right: 5px !important;} .mr10{margin-right: 10px !important;} +.mr15{margin-right: 15px !important;} .ml5{margin-left: 5px !important;} .ml10{margin-left: 10px !important;} +.ml15{margin-left: 15px !important;} // button .btn-frame{ @@ -189,6 +193,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; @@ -244,7 +264,7 @@ button{ min-width: 100px; height: 30px; line-height: 30px; - padding: 0 10px; + padding: 0 25px 0 10px; background-color: #373737; border: 1px solid #3F3F3F; border-radius: 2px;