diff --git a/public/static/images/canvas/object_img01.svg b/public/static/images/canvas/object_img01.svg new file mode 100644 index 0000000..a4ebac9 --- /dev/null +++ b/public/static/images/canvas/object_img01.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/object_img02.svg b/public/static/images/canvas/object_img02.svg new file mode 100644 index 0000000..ab1e8f4 --- /dev/null +++ b/public/static/images/canvas/object_img02.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 597824c..2a4f7cb 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -91,10 +91,13 @@ export default function CanvasPage() { {/* */} {/* 면형상 배치 */} - + {/* */} {/* 오브젝트 배치*/} {/* */} + + {/* 표시변겅 */} + diff --git a/src/components/canvas/modal/objectoption/ObjectOption.jsx b/src/components/canvas/modal/objectoption/ObjectOption.jsx new file mode 100644 index 0000000..f3a8eb1 --- /dev/null +++ b/src/components/canvas/modal/objectoption/ObjectOption.jsx @@ -0,0 +1,50 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import ObjectOptionTab01 from "./ObjectOptionTab01"; +import ObjectOptionTab02 from "./ObjectOptionTab02"; +import ObjectOptionTab03 from "./ObjectOptionTab03"; +import ObjectOptionTab04 from "./ObjectOptionTab04"; + +const buttonMenu = [ + {id: 1, name: '開口部の配置'}, + {id: 2, name: '影の配置'}, + {id: 3, name: '三角形ドーマー'}, + {id: 4, name: '五角形ドーマー'}, +] + +export default function ObjectOption(){ + 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/objectoption/ObjectOptionTab01.jsx b/src/components/canvas/modal/objectoption/ObjectOptionTab01.jsx new file mode 100644 index 0000000..1fb47cf --- /dev/null +++ b/src/components/canvas/modal/objectoption/ObjectOptionTab01.jsx @@ -0,0 +1,54 @@ +export default function ObjectOptionTab01(){ + return( +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+ 横長 +
+
+
+
+ +
+ mm +
+
+
+
+
+ 縦長 +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/objectoption/ObjectOptionTab02.jsx b/src/components/canvas/modal/objectoption/ObjectOptionTab02.jsx new file mode 100644 index 0000000..0880995 --- /dev/null +++ b/src/components/canvas/modal/objectoption/ObjectOptionTab02.jsx @@ -0,0 +1,50 @@ +export default function ObjectOptionTab02(){ + return( +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+ 横長 +
+
+
+
+ +
+ mm +
+
+
+
+
+ 縦長 +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/objectoption/ObjectOptionTab03.jsx b/src/components/canvas/modal/objectoption/ObjectOptionTab03.jsx new file mode 100644 index 0000000..c4cf46a --- /dev/null +++ b/src/components/canvas/modal/objectoption/ObjectOptionTab03.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function ObjectOptionTab03(){ + return( + <> +
+
サイズ設定
+
+
+ react +
+
+
+
+
+ 同意の深さ +
+
+
+
+ +
+ mm +
+
+
+
+
+ 出幅 (深さ) +
+
+
+
+ +
+ mm +
+
+
+
+
+ 幅 +
+
+
+
+ +
+ mm +
+
+
+
+
+ 傾斜 +
+
+
+
+ +
+ 寸法 +
+
+
+
+
+
+
+
+
方向の選択
+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/objectoption/ObjectOptionTab04.jsx b/src/components/canvas/modal/objectoption/ObjectOptionTab04.jsx new file mode 100644 index 0000000..84ee9ea --- /dev/null +++ b/src/components/canvas/modal/objectoption/ObjectOptionTab04.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function ObjectOptionTab04(){ + return( + <> +
+
サイズ設定
+
+
+ react +
+
+
+
+
+ 同意の深さ +
+
+
+
+ +
+ mm +
+
+
+
+
+ 出幅 (深さ) +
+
+
+
+ +
+ mm +
+
+
+
+
+ 幅 +
+
+
+
+ +
+ mm +
+
+
+
+
+ 出幅 (幅) +
+
+
+
+ +
+ mm +
+
+
+
+
+ 傾斜 +
+
+
+
+ +
+ 寸法 +
+
+
+
+
+
+
+
+
方向の選択
+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index e33315d..2d934d7 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -969,3 +969,36 @@ $alert-color: #101010; } // 오브젝트 배치 +.mb-box{ + margin-bottom: 24px; +} + +.object-direction-wrap{ + display: flex; + align-items: center; + justify-content: center; +} +.discrimination-tit{ + font-size: 13px; + color: #fff; + font-weight: 500; +} + +.object-size-wrap{ + display: flex; + min-height: 206px; + gap: 24px; + margin-top: 14px; + .object-size-img{ + position: relative; + flex: none; + width: 200px; + background-color: #fff; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +} \ No newline at end of file