From dca7ce829d4f62aba254f80fbe98f5e85a881af1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Mon, 7 Oct 2024 17:20:45 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9C=A1=EC=A7=80=EB=B6=95=20=EB=AA=A8?= =?UTF-8?q?=EB=93=88=20=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/canvas/page.jsx | 6 +- .../HexagonalRoofOption.jsx | 31 ++++ .../HexagonalRoofTab01.jsx | 64 ++++++++ .../HexagonalRoofTab02.jsx | 69 +++++++++ .../HexagonalRoofTab03.jsx | 137 ++++++++++++++++++ .../roofmoduleoption/RoofModuleOption.jsx | 2 +- src/styles/_modal.scss | 35 +++++ 7 files changed, 342 insertions(+), 2 deletions(-) create mode 100644 src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx create mode 100644 src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx create mode 100644 src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx create mode 100644 src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 287eaed..1797bc9 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -39,6 +39,7 @@ import { useRecoilValue } from 'recoil' import Penal03 from '@/components/canvas/penal/Penal03' import Penal04 from '@/components/canvas/penal/Penal04' import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption' +import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption' export default function CanvasPage() { const modalOption = useRecoilValue(modalState); @@ -128,7 +129,10 @@ export default function CanvasPage() { {/* */} {/* 지붕모듈선택 */} - + {/* */} + + {/* 육지붕모듈 선택 */} + diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx new file mode 100644 index 0000000..8be92bd --- /dev/null +++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption.jsx @@ -0,0 +1,31 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import HexagonalRoofTab01 from "./HexagonalRoofTab01"; +import HexagonalRoofTab02 from "./HexagonalRoofTab02"; +import HexagonalRoofTab03 from "./HexagonalRoofTab03"; + +export default function HexagonalRoofOption(){ + const [tabNum, setTabNum] = useState(1); + return( + +
+
+

基本設定

+ +
+
+
+
防衛設定
+ +
モジュール設定
+ +
モジュールの配置
+
+ {tabNum === 1 && } + {tabNum === 2 && } + {tabNum === 3 && } +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx new file mode 100644 index 0000000..91f2ff8 --- /dev/null +++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab01.jsx @@ -0,0 +1,64 @@ +import { useState } from "react"; + +export default function HexagonalRoofTab01({setTabNum}){ + const [compasDeg, setCompasDeg] = useState(0); + return( + <> +
+
方位設定
+
+
※シミュレーション計算用方位を指定します。南の方位を設定してください。
+
+
+
+
setCompasDeg(180)}>180°
+
setCompasDeg(195)}>
+
setCompasDeg(210)}>
+
setCompasDeg(225)}>
+
setCompasDeg(240)}>
+
setCompasDeg(255)}>
+
setCompasDeg(270)}>270°
+
setCompasDeg(285)}>
+
setCompasDeg(300)}>
+
setCompasDeg(315)}>
+
setCompasDeg(330)}>
+
setCompasDeg(345)}>
+
setCompasDeg(0)}>0°
+
setCompasDeg(15)}>
+
setCompasDeg(30)}>
+
setCompasDeg(45)}>
+
setCompasDeg(60)}>
+
setCompasDeg(75)}>
+
setCompasDeg(90)}>90°
+
setCompasDeg(105)}>
+
setCompasDeg(120)}>
+
setCompasDeg(135)}>
+
setCompasDeg(150)}>
+
setCompasDeg(165)}>
+
+
+
+
+
+
+
+
+ + +
+
+
+ +
+ ° +
+
+
+
+
+ + +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx new file mode 100644 index 0000000..234d249 --- /dev/null +++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab02.jsx @@ -0,0 +1,69 @@ +import Qselect from "@/components/common/select/Qselect"; + +const SelectOption01 = [ + {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'} +] + +export default function HexagonalRoofTab02({setTabNum}){ + return( + <> +
+
+
+ モジュールの選択 +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
モジュール高さ
(mm)		幅
(mm)		出力
(W)
+
+ + Re.RISE-G3 440 +
+ 		11341722440
+
+ + Re.RISE MS-G3 290 +
+ 		11341722440
+
+
+
+
+ + + +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx new file mode 100644 index 0000000..adb258d --- /dev/null +++ b/src/components/canvas/modal/hexagonalroofoption/HexagonalRoofTab03.jsx @@ -0,0 +1,137 @@ + +export default function HexagonalRoofTab03({setTabNum}){ + return( + <> +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ 		モジュール出力 (W)
+
+ + +
+ 		+
+ + Re.RISE-G3 440 +
+ 		430
+
+ + +
+ 		+
+ + Re.RISE MS-G3 290 +
+ 		290
+
+
+
+
+
+
+
+
配置基準の設定
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
割り当て設定
+
+
+
+
+ 単数 +
+ +
+ 寸法 +
+
+ 上下間隔 +
+ +
+ 寸法 +
+
+ 熱水 +
+ +
+ 寸法 +
+
+ 左右間隔 +
+ +
+ 寸法 +
+
+
+
+
+
※バッチパネルの種類が1種類の場合にのみ使用できます。
+ +
+
+
+
+
+
+ + + +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx index 1a5d552..a507fc5 100644 --- a/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx +++ b/src/components/canvas/modal/roofmoduleoption/RoofModuleOption.jsx @@ -5,7 +5,7 @@ import RoofModuleOptionTab02 from "./RoofModuleOptionTab02"; import RoofModuleOptionTab03 from "./RoofModuleOptionTab03"; export default function RoofModuleOption(){ - const [tabNum, setTabNum] = useState(3); + const [tabNum, setTabNum] = useState(1); return(
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index dec9e94..7d91664 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -13,6 +13,17 @@ $alert-color: #101010; to{opacity: 0; scale: 0.95;} } +.normal-font{ + font-size: 12px; + font-weight: 400; + color: #fff; +} +.bold-font{ + font-size: 12px; + font-weight: 500; + color: #fff; +} + .modal-pop-wrap{ position: fixed; top: 200px; @@ -1347,4 +1358,28 @@ $alert-color: #101010; button{ margin-left: auto; } +} +.hexagonal-wrap{ + .hexagonal-item{ + padding: 15px 0; + border-bottom: 1px solid #4D4D4D; + &:first-child{ + padding-top: 0; + } + &:last-child{ + padding-bottom: 0; + border: none; + } + .hexagonal-flx-auto{ + display: flex; + justify-content: space-between; + } + .hexagonal-flx{ + display: flex; + align-items: center; + button{ + margin-left: auto; + } + } + } } \ No newline at end of file