diff --git a/public/static/images/canvas/eaves_icon01.svg b/public/static/images/canvas/eaves_icon01.svg new file mode 100644 index 0000000..da52006 --- /dev/null +++ b/public/static/images/canvas/eaves_icon01.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon02.svg b/public/static/images/canvas/eaves_icon02.svg new file mode 100644 index 0000000..0addbc0 --- /dev/null +++ b/public/static/images/canvas/eaves_icon02.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon03.svg b/public/static/images/canvas/eaves_icon03.svg new file mode 100644 index 0000000..b95b49f --- /dev/null +++ b/public/static/images/canvas/eaves_icon03.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon04.svg b/public/static/images/canvas/eaves_icon04.svg new file mode 100644 index 0000000..ac08ce0 --- /dev/null +++ b/public/static/images/canvas/eaves_icon04.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon05.svg b/public/static/images/canvas/eaves_icon05.svg new file mode 100644 index 0000000..649a605 --- /dev/null +++ b/public/static/images/canvas/eaves_icon05.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon06.svg b/public/static/images/canvas/eaves_icon06.svg new file mode 100644 index 0000000..a2f1780 --- /dev/null +++ b/public/static/images/canvas/eaves_icon06.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon07.svg b/public/static/images/canvas/eaves_icon07.svg new file mode 100644 index 0000000..1f101d5 --- /dev/null +++ b/public/static/images/canvas/eaves_icon07.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon08.svg b/public/static/images/canvas/eaves_icon08.svg new file mode 100644 index 0000000..8a2529d --- /dev/null +++ b/public/static/images/canvas/eaves_icon08.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 61bf153..0200971 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -2,6 +2,8 @@ import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' +import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption' +import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption' import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' import GridMove from '@/components/canvas/modal/gridoption/GridMove' import GridOption from '@/components/canvas/modal/gridoption/GridOption' @@ -36,12 +38,12 @@ export default function CanvasPage() { {/* {modalOption.option && } */} {/* 점·선 그리드 설정 */} - {/* {modalOption.gridoption && } */} - {/* {modalOption.gridcopy && } */} - {/* {modalOption.gridmove && } */} + {modalOption.gridoption && } + {modalOption.gridcopy && } + {modalOption.gridmove && } {/* 외벽선 그리기 */} - {modalOption.outerwall && } + {/* {modalOption.outerwall && } */} {/* 외벽선 속성 설정 */} {/* */} @@ -51,6 +53,12 @@ export default function CanvasPage() { {/* 지붕형상 수동 설정 */} {/* */} + + {/* 보조선 작성 */} + {/* */} + + {/* 처마∙케라바 변경 */} + {/* */} diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx new file mode 100644 index 0000000..2d1b27c --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab01.jsx @@ -0,0 +1,24 @@ +export default function AuxiliaryTab01(){ + return( +
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx new file mode 100644 index 0000000..cb1e774 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab02.jsx @@ -0,0 +1,42 @@ +export default function AuxiliaryTab02(){ + return( +
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx new file mode 100644 index 0000000..61ae3e0 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab03.jsx @@ -0,0 +1,64 @@ +export default function AuxiliaryTab03(){ + return( + <> +
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx new file mode 100644 index 0000000..2bf3313 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab04.jsx @@ -0,0 +1,64 @@ +export default function AuxiliaryTab04(){ + return( + <> +
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+
+
+ 角度 +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx new file mode 100644 index 0000000..be8a48e --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliaryTab05.jsx @@ -0,0 +1,50 @@ +export default function AuxiliaryTab05(){ + return( +
+
+
+ 対角線の
長さ(mm) +
+ +
+ +
+
+
+
+ 長さ(mm) +
+ +
+ +
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+
+ 長さ(mm) +
+ +
+
+
+ 方向 (矢印) +
+ + + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx new file mode 100644 index 0000000..2dcfcb6 --- /dev/null +++ b/src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx @@ -0,0 +1,55 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import AuxiliaryTab01 from "./AuxiliaryTab01"; +import AuxiliaryTab02 from "./AuxiliaryTab02"; +import AuxiliaryTab03 from "./AuxiliaryTab03"; +import AuxiliaryTab04 from "./AuxiliaryTab04"; +import AuxiliaryTab05 from "./AuxiliaryTab05"; + +const buttonMenu = [ + {id: 1, name: 'ランダムライン'}, + {id: 2, name: '直角'}, + {id: 3, name: 'イ・グベ'}, + {id: 4, name: '角度'}, + {id: 5, name: '対角線'}, +] + +export default function AuxiliarylineOption(){ + const [buttonAct, setButtonAct] = useState(1); + + return( + +
+
+

補助線の作成

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
+
+ + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx new file mode 100644 index 0000000..f84ae02 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx @@ -0,0 +1,51 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { useState } from "react"; +import EavesKerabaTab01 from "./EavesKerabaTab01"; +import EavesKerabaTab02 from "./EavesKerabaTab02"; +import EavesKerabaTab03 from "./EavesKerabaTab03"; +import EavesKerabaTab04 from "./EavesKerabaTab04"; + +const buttonMenu = [ + {id: 1, name: '軒'}, + {id: 2, name: '直ケラバ角'}, + {id: 3, name: '壁取り'}, + {id: 4, name: '片側の流れ'}, +] + +export default function EvaseKerabaOption(){ + 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/eaves_keraba/EavesKerabaTab01.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx new file mode 100644 index 0000000..dc2d757 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab01.jsx @@ -0,0 +1,70 @@ +import Image from "next/image"; + +export default function EavesKerabaTab01(){ + return( + <> +
+
+ 傾斜 +
+ +
+ 傾斜 +
+
+ 出幅 +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ {/* 出幅 */} +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx new file mode 100644 index 0000000..ce68a25 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab02.jsx @@ -0,0 +1,79 @@ +import Image from "next/image"; + +export default function EavesKerabaTab02(){ + return( + <> +
+
+ 出幅 +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ 傾斜 +
+ +
+ 寸法 +
+
+
+
+ react +
+
+
+
+
+
+ 出幅 +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx new file mode 100644 index 0000000..7caa5f4 --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab03.jsx @@ -0,0 +1,57 @@ +import Image from "next/image"; + +export default function EavesKerabaTab03(){ + return( + <> +
+
+ 家屋などの壁に面する屋根を作成します。 +
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ 出幅 +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx new file mode 100644 index 0000000..eed549f --- /dev/null +++ b/src/components/canvas/modal/eaves_keraba/EavesKerabaTab04.jsx @@ -0,0 +1,17 @@ +import Image from "next/image"; + +export default function EavesKerabaTab04(){ + return( + <> +
+
+ 出幅 +
+ +
+ mm +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridMove.jsx b/src/components/canvas/modal/gridoption/GridMove.jsx index 6c4e4ee..6db1f80 100644 --- a/src/components/canvas/modal/gridoption/GridMove.jsx +++ b/src/components/canvas/modal/gridoption/GridMove.jsx @@ -20,7 +20,7 @@ export default function GridMove() {
-

グリッドのコピー

+

グリッド移動

diff --git a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx index 06b941d..efce901 100644 --- a/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx +++ b/src/components/canvas/modal/roofshapeoption/discriminationtab/DiscriminationTab03.jsx @@ -5,12 +5,14 @@ export default function DiscriminationTab03(){
-
- 袖あり -
- +
+
+ 袖あり +
+ +
+ mm
- mm
) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 7def4e8..d5688c2 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -27,24 +27,24 @@ $alert-color: #101010; background-color: #272727; z-index: 9999999; overflow: hidden; + &.xxm{ + width: 270px; + } + &.xm{ + width: 300px; + } + &.ssm{ + width: 380px; + } + &.sm{ + width: 580px; + } &.r{ width: 400px; } &.lr{ width: 440px; } - &.sm{ - width: 580px; - } - &.ssm{ - width: 380px; - } - &.xm{ - width: 300px; - } - &.xxm{ - width: 270px; - } &.l{ width: 800px; } @@ -210,19 +210,17 @@ $alert-color: #101010; align-items: center; gap: 15px; padding-bottom: 15px; - border-bottom: 1px solid #3C3C3C; } .grid-option-wrap{ - padding: 15px 0; - border-bottom: 1px solid #3C3C3C; .grid-option-box{ display: flex; align-items: center; - background-color: #3D3D3D; + background-color: transparent; + border: 1px solid #3D3D3D; border-radius: 2px; - padding: 10px; + padding: 15px 10px; gap: 20px; - margin-bottom: 5px; + margin-bottom: 10px; .grid-input-form{ display: flex; align-items: center; @@ -255,10 +253,7 @@ $alert-color: #101010; padding-top: 15px; text-align: right; button{ - padding: 0 20px; - } - &.bord{ - border-top: 1px solid #fff; + padding: 0 10px; } } @@ -268,7 +263,7 @@ $alert-color: #101010; color: $pop-color; font-weight: $pop-normal-weight; padding-bottom: 15px; - border-bottom: 1px solid #3C3C3C; + } .grid-direction{ display: flex; @@ -420,7 +415,7 @@ $alert-color: #101010; .outline-wrap{ padding: 24px 0; border-top: 1px solid #424242; - border-bottom: 1px solid #424242; + .outline-inner{ display: flex; align-items: center; @@ -433,6 +428,9 @@ $alert-color: #101010; margin-right: 15px; } } + &:last-child{ + border-bottom: 1px solid #424242; + } } .outline-form{ display: flex; @@ -448,6 +446,7 @@ $alert-color: #101010; &.thin{ width: auto; font-weight: $pop-normal-weight; + margin-right: 0; } } .reset-btn{ @@ -584,7 +583,9 @@ $alert-color: #101010; border-top: 1px solid #424242; border-bottom: 1px solid #424242; } - +.padding-form{ + padding-left: 23px; +} .discrimination-box{ padding: 16px 12px; border: 1px solid #3D3D3D; @@ -595,4 +596,46 @@ $alert-color: #101010; margin-top: 24px; padding-bottom: 14px; border-bottom: 1px solid #424242; +} + +// 처마∙케라바 변경 +.eaves-keraba-table{ + display: table; + border-collapse: collapse; + .eaves-keraba-item{ + display: table-row; + .eaves-keraba-th, + .eaves-keraba-td{ + display: table-cell; + vertical-align: middle; + padding-bottom: 14px; + } + .eaves-keraba-td{ + padding-left: 15px; + } + .eaves-keraba-ico{ + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + border-radius: 2px; + &.act{ + border: 1px solid #ED0004; + } + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0; + } + } + } +} +.guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-bottom: 24px; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index dfce04f..e6a9f50 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -133,12 +133,16 @@ button{ // margin .mt5{margin-top: 5px !important;} .mt10{margin-top: 10px !important;} +.mt15{margin-top: 15px !important;} .mb5{margin-bottom: 5px !important;} .mb10{margin-bottom: 10px !important;} +.mb15{margin-bottom: 15px !important;} .mr5{margin-right: 5px !important;} .mr10{margin-right: 10px !important;} +.mr15{margin-right: 15px !important;} .ml5{margin-left: 5px !important;} .ml10{margin-left: 10px !important;} +.ml15{margin-left: 15px !important;} // button .btn-frame{