From 5d15336d84385da381d38cfb8844e6134c08bb0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Fri, 4 Oct 2024 11:21:56 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=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 --- public/static/images/canvas/plane_arr.svg | 3 + public/static/images/canvas/plane_arr_act.svg | 3 + public/static/images/canvas/plane_shape01.svg | 3 + .../static/images/canvas/plane_shape010.svg | 3 + .../static/images/canvas/plane_shape011.svg | 3 + .../static/images/canvas/plane_shape012.svg | 3 + .../static/images/canvas/plane_shape013.svg | 3 + .../static/images/canvas/plane_shape014.svg | 3 + .../static/images/canvas/plane_shape015.svg | 3 + .../static/images/canvas/plane_shape016.svg | 5 + .../static/images/canvas/plane_shape017.svg | 3 + .../static/images/canvas/plane_shape018.svg | 3 + public/static/images/canvas/plane_shape02.svg | 3 + public/static/images/canvas/plane_shape03.svg | 3 + public/static/images/canvas/plane_shape04.svg | 3 + public/static/images/canvas/plane_shape05.svg | 3 + public/static/images/canvas/plane_shape06.svg | 3 + public/static/images/canvas/plane_shape07.svg | 3 + public/static/images/canvas/plane_shape08.svg | 3 + public/static/images/canvas/plane_shape09.svg | 3 + public/static/images/canvas/plane_tab01.svg | 13 ++ public/static/images/canvas/plane_tab02.svg | 14 ++ public/static/images/canvas/plane_tab03.svg | 18 ++ public/static/images/canvas/plane_tab04.svg | 13 ++ public/static/images/canvas/plane_tab05.svg | 18 ++ public/static/images/canvas/plane_tab06.svg | 18 ++ public/static/images/canvas/plane_tab07.svg | 30 +++ public/static/images/canvas/plane_tab08.svg | 24 +++ public/static/images/canvas/plane_tab09.svg | 28 +++ public/static/images/canvas/plane_tab10.svg | 28 +++ public/static/images/canvas/plane_tab11.svg | 28 +++ public/static/images/canvas/plane_tab12.svg | 23 +++ public/static/images/canvas/plane_tab13.svg | 23 +++ public/static/images/canvas/plane_tab14.svg | 29 +++ public/static/images/canvas/plane_tab15.svg | 18 ++ public/static/images/canvas/plane_tab16.svg | 24 +++ public/static/images/canvas/plane_tab17.svg | 22 +++ public/static/images/canvas/plane_tab18.svg | 16 ++ .../static/images/canvas/shape_labrary01.svg | 3 + .../static/images/canvas/shape_labrary02.svg | 4 + .../static/images/canvas/shape_labrary03.svg | 4 + src/app/canvas/page.jsx | 8 +- .../planeshapeoption/PlaneShapeOption.jsx | 64 ++++-- .../planeshapetab/PlaneShapeTab01.jsx | 79 ++++++++ .../planeshapetab/PlaneShapeTab02.jsx | 61 ++++++ .../planeshapetab/PlaneShapeTab03.jsx | 74 +++++++ .../planeshapetab/PlaneShapeTab04.jsx | 61 ++++++ .../planeshapetab/PlaneShapeTab05.jsx | 74 +++++++ .../planeshapetab/PlaneShapeTab06.jsx | 74 +++++++ .../planeshapetab/PlaneShapeTab07.jsx | 100 ++++++++++ .../planeshapetab/PlaneShapeTab08.jsx | 87 +++++++++ .../planeshapetab/PlaneShapeTab09.jsx | 100 ++++++++++ .../planeshapetab/PlaneShapeTab10.jsx | 100 ++++++++++ .../planeshapetab/PlaneShapeTab11.jsx | 100 ++++++++++ .../planeshapetab/PlaneShapeTab12.jsx | 87 +++++++++ .../planeshapetab/PlaneShapeTab13.jsx | 87 +++++++++ .../planeshapetab/PlaneShapeTab14.jsx | 100 ++++++++++ .../planeshapetab/PlaneShapeTab15.jsx | 74 +++++++ .../planeshapetab/PlaneShapeTab16.jsx | 87 +++++++++ .../planeshapetab/PlaneShapeTab17.jsx | 87 +++++++++ .../planeshapetab/PlaneShapeTab18.jsx | 74 +++++++ src/styles/_modal.scss | 184 +++++++++++++++++- src/styles/_reset.scss | 5 + 63 files changed, 2202 insertions(+), 25 deletions(-) create mode 100644 public/static/images/canvas/plane_arr.svg create mode 100644 public/static/images/canvas/plane_arr_act.svg create mode 100644 public/static/images/canvas/plane_shape01.svg create mode 100644 public/static/images/canvas/plane_shape010.svg create mode 100644 public/static/images/canvas/plane_shape011.svg create mode 100644 public/static/images/canvas/plane_shape012.svg create mode 100644 public/static/images/canvas/plane_shape013.svg create mode 100644 public/static/images/canvas/plane_shape014.svg create mode 100644 public/static/images/canvas/plane_shape015.svg create mode 100644 public/static/images/canvas/plane_shape016.svg create mode 100644 public/static/images/canvas/plane_shape017.svg create mode 100644 public/static/images/canvas/plane_shape018.svg create mode 100644 public/static/images/canvas/plane_shape02.svg create mode 100644 public/static/images/canvas/plane_shape03.svg create mode 100644 public/static/images/canvas/plane_shape04.svg create mode 100644 public/static/images/canvas/plane_shape05.svg create mode 100644 public/static/images/canvas/plane_shape06.svg create mode 100644 public/static/images/canvas/plane_shape07.svg create mode 100644 public/static/images/canvas/plane_shape08.svg create mode 100644 public/static/images/canvas/plane_shape09.svg create mode 100644 public/static/images/canvas/plane_tab01.svg create mode 100644 public/static/images/canvas/plane_tab02.svg create mode 100644 public/static/images/canvas/plane_tab03.svg create mode 100644 public/static/images/canvas/plane_tab04.svg create mode 100644 public/static/images/canvas/plane_tab05.svg create mode 100644 public/static/images/canvas/plane_tab06.svg create mode 100644 public/static/images/canvas/plane_tab07.svg create mode 100644 public/static/images/canvas/plane_tab08.svg create mode 100644 public/static/images/canvas/plane_tab09.svg create mode 100644 public/static/images/canvas/plane_tab10.svg create mode 100644 public/static/images/canvas/plane_tab11.svg create mode 100644 public/static/images/canvas/plane_tab12.svg create mode 100644 public/static/images/canvas/plane_tab13.svg create mode 100644 public/static/images/canvas/plane_tab14.svg create mode 100644 public/static/images/canvas/plane_tab15.svg create mode 100644 public/static/images/canvas/plane_tab16.svg create mode 100644 public/static/images/canvas/plane_tab17.svg create mode 100644 public/static/images/canvas/plane_tab18.svg create mode 100644 public/static/images/canvas/shape_labrary01.svg create mode 100644 public/static/images/canvas/shape_labrary02.svg create mode 100644 public/static/images/canvas/shape_labrary03.svg create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx create mode 100644 src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx diff --git a/public/static/images/canvas/plane_arr.svg b/public/static/images/canvas/plane_arr.svg new file mode 100644 index 0000000..c3131c0 --- /dev/null +++ b/public/static/images/canvas/plane_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_arr_act.svg b/public/static/images/canvas/plane_arr_act.svg new file mode 100644 index 0000000..2c91a0b --- /dev/null +++ b/public/static/images/canvas/plane_arr_act.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape01.svg b/public/static/images/canvas/plane_shape01.svg new file mode 100644 index 0000000..a32d0c3 --- /dev/null +++ b/public/static/images/canvas/plane_shape01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape010.svg b/public/static/images/canvas/plane_shape010.svg new file mode 100644 index 0000000..a17616f --- /dev/null +++ b/public/static/images/canvas/plane_shape010.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape011.svg b/public/static/images/canvas/plane_shape011.svg new file mode 100644 index 0000000..4068d35 --- /dev/null +++ b/public/static/images/canvas/plane_shape011.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape012.svg b/public/static/images/canvas/plane_shape012.svg new file mode 100644 index 0000000..b713600 --- /dev/null +++ b/public/static/images/canvas/plane_shape012.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape013.svg b/public/static/images/canvas/plane_shape013.svg new file mode 100644 index 0000000..6ef6e1a --- /dev/null +++ b/public/static/images/canvas/plane_shape013.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape014.svg b/public/static/images/canvas/plane_shape014.svg new file mode 100644 index 0000000..68789f5 --- /dev/null +++ b/public/static/images/canvas/plane_shape014.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape015.svg b/public/static/images/canvas/plane_shape015.svg new file mode 100644 index 0000000..76e89b3 --- /dev/null +++ b/public/static/images/canvas/plane_shape015.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape016.svg b/public/static/images/canvas/plane_shape016.svg new file mode 100644 index 0000000..54b8259 --- /dev/null +++ b/public/static/images/canvas/plane_shape016.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/plane_shape017.svg b/public/static/images/canvas/plane_shape017.svg new file mode 100644 index 0000000..d0378c1 --- /dev/null +++ b/public/static/images/canvas/plane_shape017.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape018.svg b/public/static/images/canvas/plane_shape018.svg new file mode 100644 index 0000000..4e48f83 --- /dev/null +++ b/public/static/images/canvas/plane_shape018.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape02.svg b/public/static/images/canvas/plane_shape02.svg new file mode 100644 index 0000000..aa0a756 --- /dev/null +++ b/public/static/images/canvas/plane_shape02.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape03.svg b/public/static/images/canvas/plane_shape03.svg new file mode 100644 index 0000000..fb6c7d0 --- /dev/null +++ b/public/static/images/canvas/plane_shape03.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape04.svg b/public/static/images/canvas/plane_shape04.svg new file mode 100644 index 0000000..3cbf25c --- /dev/null +++ b/public/static/images/canvas/plane_shape04.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape05.svg b/public/static/images/canvas/plane_shape05.svg new file mode 100644 index 0000000..36f1448 --- /dev/null +++ b/public/static/images/canvas/plane_shape05.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape06.svg b/public/static/images/canvas/plane_shape06.svg new file mode 100644 index 0000000..a87e30b --- /dev/null +++ b/public/static/images/canvas/plane_shape06.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape07.svg b/public/static/images/canvas/plane_shape07.svg new file mode 100644 index 0000000..526c95b --- /dev/null +++ b/public/static/images/canvas/plane_shape07.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape08.svg b/public/static/images/canvas/plane_shape08.svg new file mode 100644 index 0000000..8ad3bf5 --- /dev/null +++ b/public/static/images/canvas/plane_shape08.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_shape09.svg b/public/static/images/canvas/plane_shape09.svg new file mode 100644 index 0000000..519294e --- /dev/null +++ b/public/static/images/canvas/plane_shape09.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/plane_tab01.svg b/public/static/images/canvas/plane_tab01.svg new file mode 100644 index 0000000..f768a20 --- /dev/null +++ b/public/static/images/canvas/plane_tab01.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab02.svg b/public/static/images/canvas/plane_tab02.svg new file mode 100644 index 0000000..6189124 --- /dev/null +++ b/public/static/images/canvas/plane_tab02.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab03.svg b/public/static/images/canvas/plane_tab03.svg new file mode 100644 index 0000000..295e0d8 --- /dev/null +++ b/public/static/images/canvas/plane_tab03.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab04.svg b/public/static/images/canvas/plane_tab04.svg new file mode 100644 index 0000000..894bb55 --- /dev/null +++ b/public/static/images/canvas/plane_tab04.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab05.svg b/public/static/images/canvas/plane_tab05.svg new file mode 100644 index 0000000..63b3c20 --- /dev/null +++ b/public/static/images/canvas/plane_tab05.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab06.svg b/public/static/images/canvas/plane_tab06.svg new file mode 100644 index 0000000..1bad98a --- /dev/null +++ b/public/static/images/canvas/plane_tab06.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab07.svg b/public/static/images/canvas/plane_tab07.svg new file mode 100644 index 0000000..a358f76 --- /dev/null +++ b/public/static/images/canvas/plane_tab07.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab08.svg b/public/static/images/canvas/plane_tab08.svg new file mode 100644 index 0000000..22a72ab --- /dev/null +++ b/public/static/images/canvas/plane_tab08.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab09.svg b/public/static/images/canvas/plane_tab09.svg new file mode 100644 index 0000000..756c3bf --- /dev/null +++ b/public/static/images/canvas/plane_tab09.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab10.svg b/public/static/images/canvas/plane_tab10.svg new file mode 100644 index 0000000..fe4073e --- /dev/null +++ b/public/static/images/canvas/plane_tab10.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab11.svg b/public/static/images/canvas/plane_tab11.svg new file mode 100644 index 0000000..0ac2cf5 --- /dev/null +++ b/public/static/images/canvas/plane_tab11.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab12.svg b/public/static/images/canvas/plane_tab12.svg new file mode 100644 index 0000000..a68e7a3 --- /dev/null +++ b/public/static/images/canvas/plane_tab12.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab13.svg b/public/static/images/canvas/plane_tab13.svg new file mode 100644 index 0000000..027e91e --- /dev/null +++ b/public/static/images/canvas/plane_tab13.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab14.svg b/public/static/images/canvas/plane_tab14.svg new file mode 100644 index 0000000..7a3cef8 --- /dev/null +++ b/public/static/images/canvas/plane_tab14.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab15.svg b/public/static/images/canvas/plane_tab15.svg new file mode 100644 index 0000000..c0c1b0b --- /dev/null +++ b/public/static/images/canvas/plane_tab15.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab16.svg b/public/static/images/canvas/plane_tab16.svg new file mode 100644 index 0000000..c66484e --- /dev/null +++ b/public/static/images/canvas/plane_tab16.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab17.svg b/public/static/images/canvas/plane_tab17.svg new file mode 100644 index 0000000..ae8ddd0 --- /dev/null +++ b/public/static/images/canvas/plane_tab17.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/plane_tab18.svg b/public/static/images/canvas/plane_tab18.svg new file mode 100644 index 0000000..12bd0ad --- /dev/null +++ b/public/static/images/canvas/plane_tab18.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/shape_labrary01.svg b/public/static/images/canvas/shape_labrary01.svg new file mode 100644 index 0000000..c55fecf --- /dev/null +++ b/public/static/images/canvas/shape_labrary01.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/shape_labrary02.svg b/public/static/images/canvas/shape_labrary02.svg new file mode 100644 index 0000000..88e1ead --- /dev/null +++ b/public/static/images/canvas/shape_labrary02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/shape_labrary03.svg b/public/static/images/canvas/shape_labrary03.svg new file mode 100644 index 0000000..194fd06 --- /dev/null +++ b/public/static/images/canvas/shape_labrary03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 1e40d0f..597824c 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -13,6 +13,7 @@ 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 ObjectOption from '@/components/canvas/modal/objectoption/ObjectOption' import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall' import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset' import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop' @@ -58,7 +59,7 @@ export default function CanvasPage() { {/* */} {/* 지붕형상 설정 */} - + {/* */} {/* 지붕형상 수동 설정 */} {/* */} @@ -90,7 +91,10 @@ export default function CanvasPage() { {/* */} {/* 면형상 배치 */} - {/* */} + + + {/* 오브젝트 배치*/} + {/* */} diff --git a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx index b74f509..19fa108 100644 --- a/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx +++ b/src/components/canvas/modal/planeshapeoption/PlaneShapeOption.jsx @@ -1,17 +1,24 @@ import WithDraggable from "@/components/common/draggable/withDraggable"; import Image from "next/image"; import { useState } from "react"; - -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:'北'}, -] +import PlaneShapeTab01 from "./planeshapetab/PlaneShapeTab01"; +import PlaneShapeTab02 from "./planeshapetab/PlaneShapeTab02"; +import PlaneShapeTab03 from "./planeshapetab/PlaneShapeTab03"; +import PlaneShapeTab04 from "./planeshapetab/PlaneShapeTab04"; +import PlaneShapeTab05 from "./planeshapetab/PlaneShapeTab05"; +import PlaneShapeTab06 from "./planeshapetab/PlaneShapeTab06"; +import PlaneShapeTab07 from "./planeshapetab/PlaneShapeTab07"; +import PlaneShapeTab08 from "./planeshapetab/PlaneShapeTab08"; +import PlaneShapeTab09 from "./planeshapetab/PlaneShapeTab09"; +import PlaneShapeTab10 from "./planeshapetab/PlaneShapeTab10"; +import PlaneShapeTab11 from "./planeshapetab/PlaneShapeTab11"; +import PlaneShapeTab12 from "./planeshapetab/PlaneShapeTab12"; +import PlaneShapeTab13 from "./planeshapetab/PlaneShapeTab13"; +import PlaneShapeTab14 from "./planeshapetab/PlaneShapeTab14"; +import PlaneShapeTab15 from "./planeshapetab/PlaneShapeTab15"; +import PlaneShapeTab16 from "./planeshapetab/PlaneShapeTab16"; +import PlaneShapeTab17 from "./planeshapetab/PlaneShapeTab17"; +import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18"; export default function PlaneShapeOption(){ const [shapeNum, setShapeNum] = useState(1); @@ -19,21 +26,44 @@ export default function PlaneShapeOption(){
-

傾斜設定

+

屋根形状の設定

-
- {shapeMenu.map((item) => ( - ))}
+
+ + + +
+ {shapeNum === 1 && } + {shapeNum === 2 && } + {shapeNum === 3 && } + {shapeNum === 4 && } + {shapeNum === 5 && } + {shapeNum === 6 && } + {shapeNum === 7 && } + {shapeNum === 8 && } + {shapeNum === 9 && } + {shapeNum === 10 && } + {shapeNum === 11 && } + {shapeNum === 12 && } + {shapeNum === 13 && } + {shapeNum === 14 && } + {shapeNum === 15 && } + {shapeNum === 16 && } + {shapeNum === 17 && } + {shapeNum === 18 && }
- +
diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx new file mode 100644 index 0000000..2de0f18 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab01.jsx @@ -0,0 +1,79 @@ +import Image from "next/image"; + +export default function PlaneShapeTab01(){ + return( + <> +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ 斜めの長さ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+
+ ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。 +
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx new file mode 100644 index 0000000..eabc9fd --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab02.jsx @@ -0,0 +1,61 @@ +import Image from "next/image"; + +export default function PlaneShapeTab02(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx new file mode 100644 index 0000000..8f60ca3 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab03.jsx @@ -0,0 +1,74 @@ +import Image from "next/image"; + +export default function PlaneShapeTab03(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx new file mode 100644 index 0000000..c4c0202 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab04.jsx @@ -0,0 +1,61 @@ +import Image from "next/image"; + +export default function PlaneShapeTab04(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx new file mode 100644 index 0000000..1cf056c --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab05.jsx @@ -0,0 +1,74 @@ +import Image from "next/image"; + +export default function PlaneShapeTab05(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx new file mode 100644 index 0000000..777ec6a --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab06.jsx @@ -0,0 +1,74 @@ +import Image from "next/image"; + +export default function PlaneShapeTab06(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx new file mode 100644 index 0000000..f378250 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab07.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function PlaneShapeTab07(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ⑤ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx new file mode 100644 index 0000000..84eca34 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab08.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function PlaneShapeTab08(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx new file mode 100644 index 0000000..af55de8 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab09.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function PlaneShapeTab09(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ⑤ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx new file mode 100644 index 0000000..70d7389 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab10.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function PlaneShapeTab10(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ⑤ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx new file mode 100644 index 0000000..b89ef95 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab11.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function PlaneShapeTab11(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ⑤ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx new file mode 100644 index 0000000..8d94829 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab12.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function PlaneShapeTab12(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx new file mode 100644 index 0000000..033c04f --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab13.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function PlaneShapeTab13(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx new file mode 100644 index 0000000..7729e97 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab14.jsx @@ -0,0 +1,100 @@ +import Image from "next/image"; + +export default function PlaneShapeTab14(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ⑤ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx new file mode 100644 index 0000000..2dcd129 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab15.jsx @@ -0,0 +1,74 @@ +import Image from "next/image"; + +export default function PlaneShapeTab15(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx new file mode 100644 index 0000000..d6a678f --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab16.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function PlaneShapeTab16(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx new file mode 100644 index 0000000..77da563 --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab17.jsx @@ -0,0 +1,87 @@ +import Image from "next/image"; + +export default function PlaneShapeTab17(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+ ④ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx new file mode 100644 index 0000000..e44dc0f --- /dev/null +++ b/src/components/canvas/modal/planeshapeoption/planeshapetab/PlaneShapeTab18.jsx @@ -0,0 +1,74 @@ +import Image from "next/image"; + +export default function PlaneShapeTab18(){ + return( +
+
+

設定

+
+
+ react +
+
+
+
+
+ ① +
+
+
+
+ +
+ mm +
+
+
+
+
+ ② +
+
+
+
+ +
+ mm +
+
+
+
+
+ ③ +
+
+
+
+ +
+ mm +
+
+
+
+
+
+
+
+

設定

+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9b11f34..e33315d 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -46,6 +46,9 @@ $alert-color: #101010; &.lr{ width: 440px; } + &.lrr{ + width: 480px; + } &.ml{ width: 530px; } @@ -642,7 +645,7 @@ $alert-color: #101010; padding-bottom: 14px; } .eaves-keraba-td{ - padding-left: 15px; + padding-left: 10px; } .eaves-keraba-ico{ display: flex; @@ -791,9 +794,178 @@ $alert-color: #101010; } // 면형상 배치 -.roof-shape-menu{ - &.plane{ - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; +.plane-shape-menu{ + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 90px); + gap: 10px; + margin-bottom: 10px; + .shape-menu-box{ + border-radius: 2px; + background-color: #3D3D3D; + padding: 8px; + transition: all .15s ease-in-out; + .shape-box{ + position: relative; + width: 100%; + height: 100%; + background-color: #313131; + border-radius: 2px; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + &.act, + &:hover{ + background-color: #008BFF; + } } -} \ No newline at end of file +} + +.shape-library{ + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + padding: 5px; + background-color: #3D3D3D; + margin-bottom: 24px; + .library-btn{ + width: 30px; + height: 30px; + border: 1px solid #6C6C6C; + border-radius: 2px; + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + transition: all .15s ease-in-out; + &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;} + &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;} + &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;} + &:hover{ + border-color: #1083E3; + background-color: #1083E3; + } + } +} + +.plane-shape-wrapper{ + display: flex; + gap: 10px; + .plane-box{ + padding: 10px; + border-radius: 2px; + background-color: #3D3D3D; + .plane-box-tit{ + font-size: $pop-normal-size; + font-weight: 600; + color: $pop-color; + margin-bottom: 10px; + } + &.shape-box{ + flex: 1; + .shape-box-inner{ + display: flex; + gap:10px; + min-height: 140px; + .shape-img{ + position: relative; + flex: 1; + background-color: #fff; + border-radius: 2px; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + .shape-data{ + flex: none; + width: 190px; + background-color: #313131; + border-radius: 2px; + padding: 15px; + .eaves-keraba-table{ + .eaves-keraba-item{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 10px; + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0px; + } + } + } + } + } + } + } + &.direction-box{ + display: flex; + flex-direction: column; + flex: none; + width: 180px; + .plane-direction-box{ + flex: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + padding: 10px 5px; + } + } + } +} +.plane-direction{ + width: 150px; + position: relative; + height: 120px; + span{ + position: absolute; + font-size: 12px; + font-weight: 500; + color: #B1B1B1; + &.top{top: 0; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 0; transform: translateY(-50%);} + &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);} + &.left{top: 50%; left: 0; transform: translateY(-50%);} + } + .plane-btn{ + position: absolute; + width: 28px; + height: 28px; + background-color: #777777; + background-image: url(../../public/static/images/canvas/plane_arr.svg); + background-size: 12px 13px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + transition: all .15s ease-in-out; + &.up{top: 22px; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);} + &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);} + &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);} + &:hover, + &.act{ + background-color: #fff; + background-image: url(../../public/static/images/canvas/plane_arr_act.svg); + } + } +} + +.plane-tab-guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; +} + +// 오브젝트 배치 diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 6d89945..c330c6d 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -410,6 +410,11 @@ input[type=text]{ &:read-only{ color: #AAA; } + &.plane{ + font-family: 'Noto Sans JP', sans-serif; + border: 1px solid #525252; + background-color: transparent; + } } &.input-light{ display: block;