From 0a5eb4c65c7fc07923c08c2647ff21a738790f64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 2 Oct 2024 11:00:58 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=EC=84=A4=EC=A0=95=20select=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/canvas/page.jsx | 10 ++-- .../canvas/modal/gridoption/GridOption.jsx | 2 +- .../canvas/modal/movingupdown/MovingTab01.jsx | 46 +++++++++++++++++++ .../canvas/modal/movingupdown/MovingTab02.jsx | 46 +++++++++++++++++++ .../modal/movingupdown/MovingUpDown.jsx | 43 +++++++++++++++++ .../placementsetting/PlacementSettingPop.jsx | 42 +++++++++-------- src/styles/_modal.scss | 25 ++++++++-- src/styles/_reset.scss | 2 +- 8 files changed, 189 insertions(+), 27 deletions(-) create mode 100644 src/components/canvas/modal/movingupdown/MovingTab01.jsx create mode 100644 src/components/canvas/modal/movingupdown/MovingTab02.jsx create mode 100644 src/components/canvas/modal/movingupdown/MovingUpDown.jsx diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 0200971..6f300c8 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -8,6 +8,7 @@ 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' @@ -32,15 +33,15 @@ export default function CanvasPage() { {/* 배치면 초기 설정 */} - {/* */} + {/* 캔버스 기본 셋팅 */} {/* {modalOption.option && } */} {/* 점·선 그리드 설정 */} {modalOption.gridoption && } - {modalOption.gridcopy && } - {modalOption.gridmove && } + {/* {modalOption.gridcopy && } */} + {/* {modalOption.gridmove && } */} {/* 외벽선 그리기 */} {/* {modalOption.outerwall && } */} @@ -59,6 +60,9 @@ export default function CanvasPage() { {/* 처마∙케라바 변경 */} {/* */} + + {/* 동선이동∙형 올림 내림 */} + {/* */} 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/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/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/styles/_modal.scss b/src/styles/_modal.scss index d5688c2..2e0183a 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -26,7 +26,6 @@ $alert-color: #101010; border-radius: 4px; background-color: #272727; z-index: 9999999; - overflow: hidden; &.xxm{ width: 270px; } @@ -90,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; @@ -97,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; @@ -247,6 +247,25 @@ $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{ diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index e6a9f50..a62ff48 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -264,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;