From cb1081210d77f3cce4f9a739667090569c9c1bf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Thu, 26 Sep 2024 13:49:14 +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=20=ED=8C=9D=EC=97=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/pop_tip.svg | 4 + .../static/images/common/select_dark_arr.svg | 3 + src/app/canvas/page.jsx | 12 +- src/app/inputwrap/page.jsx | 10 ++ .../modal/placementsetting/PlacementGuide.jsx | 39 +++++++ .../placementsetting/PlacementSettingPop.jsx | 108 ++++++++++++++++++ src/styles/_modal.scss | 69 +++++++++++ src/styles/_reset.scss | 7 ++ 8 files changed, 251 insertions(+), 1 deletion(-) create mode 100644 public/static/images/canvas/pop_tip.svg create mode 100644 public/static/images/common/select_dark_arr.svg create mode 100644 src/components/canvas/modal/placementsetting/PlacementGuide.jsx create mode 100644 src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx diff --git a/public/static/images/canvas/pop_tip.svg b/public/static/images/canvas/pop_tip.svg new file mode 100644 index 0000000..7e33336 --- /dev/null +++ b/public/static/images/canvas/pop_tip.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/common/select_dark_arr.svg b/public/static/images/common/select_dark_arr.svg new file mode 100644 index 0000000..aa74665 --- /dev/null +++ b/public/static/images/common/select_dark_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index ff7e7ea..48101ff 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -6,6 +6,8 @@ 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 OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall' +import PlacementGuide from '@/components/canvas/modal/placementsetting/PlacementGuide' +import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop' import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01' import Footer from '@/components/layout/Footer' import Header from '@/components/layout/Header' @@ -26,11 +28,19 @@ export default function CanvasPage() {
+ {/* 배치면 초기 설정 */} + + + + {/* 캔버스 기본 셋팅 */} {/* {modalOption.option && } */} - {/* {modalOption.outerwall && } 확인용 숨김처리 */} + {/* 점·선 그리드 설정 */} {/* {modalOption.gridoption && } */} {/* {modalOption.gridcopy && } */} {/* {modalOption.gridmove && } */} + + {/* 외벽선 그리기 */} + {/* {modalOption.outerwall && } */} diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index b37232f..ae6e1fc 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -125,6 +125,16 @@ export default function InputWrapPage (){ +
+ dark + +
diff --git a/src/components/canvas/modal/placementsetting/PlacementGuide.jsx b/src/components/canvas/modal/placementsetting/PlacementGuide.jsx new file mode 100644 index 0000000..f6c94aa --- /dev/null +++ b/src/components/canvas/modal/placementsetting/PlacementGuide.jsx @@ -0,0 +1,39 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function PlacementGuide(){ + + return( + +
+
+

寸法入力方法案内

+ +
+
+
+ + + + + + + + + + + + + + + + + + + +
複視図入力平面の外壁線と立面の屋根勾配に基づいて作画する場合に選択
実測値入力現地屋根の外周寸法を入力して作画する場合選択
陸上屋根傾斜のない平面形状の屋根にパネルを配置する場合に選択
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx new file mode 100644 index 0000000..541dfb7 --- /dev/null +++ b/src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx @@ -0,0 +1,108 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export default function PlacementSettingPop(){ + + return( + +
+
+

配置面初期設定

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
図面の作成方法寸法入力による物品作成
寸法入力方法 +
+
+ + +
+
+ + +
+
+ + +
+
+
屋根角度設定 +
+
+ + +
+
+ + +
+
+
+ 屋根材の選択(単位:mm) + + +
+
+ +
+
+ W +
+ +
+
+
+ L +
+ +
+
+
+ 垂木の間隔 +
+ +
+
+ +
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index cfd5582..0d2fea7 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -30,6 +30,9 @@ &.xm{ max-width: 300px; } + &.l{ + max-width: 800px; + } &.mount{ animation: mountpop .17s ease-in-out forwards; } @@ -257,4 +260,70 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; +} + +// 배치면 초기 설정 +.placement-table{ + padding: 9px; + table{ + table-layout: fixed; + tr{ + th{ + display: flex; + align-items: center; + font-size: 12px; + color: #fff; + font-weight: 500; + padding: 18px 0; + border-bottom: 1px solid #424242; + } + td{ + font-size: 12px; + color: #fff; + border-bottom: 1px solid #424242; + padding-left: 20px; + } + &:first-child{ + td, + th{ + padding-top: 0; + } + } + } + } + .tooltip{ + position: relative; + display: block; + width: 15px; + height: 15px; + margin-left: 5px; + background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center; + background-size: cover; + } +} + +.pop-form-radio{ + display: flex; + align-items: center; + gap: 10px; +} +.placement-option{ + display: flex; + align-items: center; + gap: 20px; +} +.select-wrap{ + div{ + width: 100%; + } +} +.flex-ment{ + display: flex; + align-items: center; + gap: 5px; + span{ + font-size: 12px; + color: #fff; + font-weight: 400; + } } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 7e36fd7..ed5d0d7 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -325,6 +325,13 @@ button{ &.black{ color: #101010; } + &.dark{ + background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat; + color: #898989; + font-size: 12px; + border-radius: 2px; + border: none; + } }