diff --git a/public/static/images/canvas/eaves_icon09.svg b/public/static/images/canvas/eaves_icon09.svg new file mode 100644 index 00000000..fe4512b1 --- /dev/null +++ b/public/static/images/canvas/eaves_icon09.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/canvas/eaves_icon10.svg b/public/static/images/canvas/eaves_icon10.svg new file mode 100644 index 00000000..99147480 --- /dev/null +++ b/public/static/images/canvas/eaves_icon10.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/canvas/module_tab_arr.svg b/public/static/images/canvas/module_tab_arr.svg new file mode 100644 index 00000000..f1da9ab2 --- /dev/null +++ b/public/static/images/canvas/module_tab_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/module_tab_arr_white.svg b/public/static/images/canvas/module_tab_arr_white.svg new file mode 100644 index 00000000..49ac4437 --- /dev/null +++ b/public/static/images/canvas/module_tab_arr_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/penal_arr.svg b/public/static/images/canvas/penal_arr.svg new file mode 100644 index 00000000..0bd7560c --- /dev/null +++ b/public/static/images/canvas/penal_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/penal_arr_white.svg b/public/static/images/canvas/penal_arr_white.svg new file mode 100644 index 00000000..e267fb93 --- /dev/null +++ b/public/static/images/canvas/penal_arr_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index b0fedf65..622320a8 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -41,6 +41,7 @@ export default function CanvasMenu(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, } = props const [menuNumber, setMenuNumber] = useState(null) @@ -88,6 +89,7 @@ export default function CanvasMenu(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, setShowSlopeSettingModal, setShowPlaceShapeDrawingModal, type, @@ -116,6 +118,7 @@ export default function CanvasMenu(props) { const onClickPlacementInitialMenu = () => { setShowOutlineModal(false) setShowCanvasSettingModal(false) + setShowEavesGableEditModal(false) setShowPlaceShapeModal(true) } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index debfa4da..2c9a99c9 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -19,6 +19,8 @@ import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/ import Slope from '@/components/floor-plan/modal/Slope' import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting' import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing' +import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit' +import Movement from '@/components/floor-plan/modal/movement/Movement' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) @@ -30,6 +32,7 @@ export default function FloorPlan() { const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false) const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false) const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false) + const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -62,6 +65,7 @@ export default function FloorPlan() { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, } useEffect(() => { @@ -128,6 +132,8 @@ export default function FloorPlan() { {showAuxiliaryModal && } {showSlopeSettingModal && } {showPlaceShapeDrawingModal && } + {showEavesGableEditModal && } + diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 4148ac5a..aa5c9f36 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -14,6 +14,7 @@ export default function MenuDepth01(props) { setShowRoofShapeSettingModal, setShowRoofShapePassivitySettingModal, setShowAuxiliaryModal, + setShowEavesGableEditModal, setShowSlopeSettingModal, setShowPlaceShapeDrawingModal, } = props @@ -31,6 +32,7 @@ export default function MenuDepth01(props) { setShowRoofShapeSettingModal(id === 1) setShowRoofShapePassivitySettingModal(id === 2) setShowAuxiliaryModal(id === 3) + setShowEavesGableEditModal(id === 4) setShowPlaceShapeDrawingModal(false) } diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx new file mode 100644 index 00000000..e144e717 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -0,0 +1,46 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useState } from 'react' +import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves' +import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable' +import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge' +import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed' + +export default function EavesGableEdit({ setShowEavesGableEditModal }) { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const buttonMenu = [ + { id: 1, name: getMessage('eaves') }, + { id: 2, name: getMessage('gable') }, + { id: 3, name: getMessage('wall.merge') }, + { id: 4, name: getMessage('shed') }, + ] + return ( + +
+
+

{getMessage('modal.eaves.gable.edit')}

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
{getMessage('setting')}
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx new file mode 100644 index 00000000..37ffd5e9 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx @@ -0,0 +1,81 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' +import { useState } from 'react' + +export default function Eaves() { + const { getMessage } = useMessage() + const [type, setType] = useState() + const onChange = (e) => { + console.log(e) + setType(e.target.value) + } + return ( + <> +
+
+ + {getMessage('slope')} + +
+ +
+ 寸 +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+
+
+
+ onChange(e)} /> + +
+
+
+
+ react +
+
+
+
+
+
+ onChange(e)} /> + +
+
+
+
+ react +
+
+
+
+
+
+
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx new file mode 100644 index 00000000..03a35f32 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx @@ -0,0 +1,87 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' + +export default function Gable() { + const { getMessage } = useMessage() + return ( + <> +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('slope')} + +
+ +
+ 寸 +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/Shed.jsx b/src/components/floor-plan/modal/eavesGable/type/Shed.jsx new file mode 100644 index 00000000..ebf20417 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/Shed.jsx @@ -0,0 +1,20 @@ +import { useMessage } from '@/hooks/useMessage' + +export default function Shed() { + const { getMessage } = useMessage() + return ( + <> +
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+ + ) +} diff --git a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx new file mode 100644 index 00000000..fbc335e6 --- /dev/null +++ b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx @@ -0,0 +1,59 @@ +import { useMessage } from '@/hooks/useMessage' +import Image from 'next/image' + +export default function WallMerge() { + const { getMessage } = useMessage() + return ( + <> +
+
{getMessage('modal.eaves.gable.edit.wall.merge.info')}
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + +
+
+
+
+ react +
+
+
+
+
+
+ + {getMessage('offset')} + +
+ +
+ mm +
+
+
+
+ react +
+
+
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/movement/Movement.jsx b/src/components/floor-plan/modal/movement/Movement.jsx new file mode 100644 index 00000000..a8a7cde4 --- /dev/null +++ b/src/components/floor-plan/modal/movement/Movement.jsx @@ -0,0 +1,40 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useState } from 'react' + +export default function Movement({}) { + const { getMessage } = useMessage() + const [buttonAct, setButtonAct] = useState(1) + const buttonMenu = [ + { id: 1, name: '銅線の移動軒' }, + { id: 2, name: '型上げ・降り' }, + ] + + return ( + +
+
+

軒・ケラバ変更

+ +
+
+
+ {buttonMenu.map((item) => ( + + ))} +
+
+
設定
+ {/*{buttonAct === 1 && }*/} + {/*{buttonAct === 2 && }*/} +
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx new file mode 100644 index 00000000..2bd4988a --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -0,0 +1,50 @@ +import { useState } from 'react' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import Eaves from '@/components/floor-plan/modal/roofShape/passivity/eaves' +import Gable from '@/components/floor-plan/modal/roofShape/passivity/gable' +import Shed from '@/components/floor-plan/modal/roofShape/passivity/shed' + +export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) { + const [buttonAct, setButtonAct] = useState(1) + const buttons = [ + { id: 1, name: '軒' }, + { id: 2, name: 'ケラバ' }, + { id: 3, name: '漂流' }, + ] + return ( + +
+
+

屋根形状の設定

+ +
+
+
+ {buttons.map((button) => ( + + ))} +
+
+
設定
+
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } +
+
+ + +
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx b/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx new file mode 100644 index 00000000..99286117 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/eaves.jsx @@ -0,0 +1,42 @@ +export default function Eaves() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/gable.jsx b/src/components/floor-plan/modal/roofShape/passivity/gable.jsx new file mode 100644 index 00000000..848d5d73 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/gable.jsx @@ -0,0 +1,42 @@ +export default function Gable() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +} diff --git a/src/components/floor-plan/modal/roofShape/passivity/shed.js b/src/components/floor-plan/modal/roofShape/passivity/shed.js new file mode 100644 index 00000000..8e767772 --- /dev/null +++ b/src/components/floor-plan/modal/roofShape/passivity/shed.js @@ -0,0 +1,42 @@ +export default function Shed() { + return ( + <> +
+ + 傾斜 + +
+ +
+ 寸法 +
+
+ + 軒の + +
+ +
+ mm +
+
+ + ケラバ 出幅 + +
+ +
+ mm +
+
+ + 片流幅 + +
+ +
+ mm +
+ + ) +} diff --git a/src/locales/ja.json b/src/locales/ja.json index d0bffc34..bfc322cf 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -144,6 +144,9 @@ "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。", "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定", "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定", + "modal.eaves.gable.edit": "軒・ケラバ変更", + "modal.eaves.gable.edit.basic": "通常", + "modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。", "setting": "設定", "common.message.no.data": "No data", "common.message.no.dataDown": "ダウンロードするデータがありません", @@ -301,11 +304,13 @@ "slope": "傾斜", "eaves.offset": "軒の", "gable.offset": "ケラバ出幅", + "offset": "出幅", "size": "寸", "size.angle": "寸(度)", "eaves": "軒", "gable": "ケラバ", "wall": "壁", + "wall.merge": "壁取り", "hajebichi": "ハゼビーチ", "straight.line": "直線", "right.angle": "直角", diff --git a/src/locales/ko.json b/src/locales/ko.json index 6914ffcf..daae4d24 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -151,6 +151,9 @@ "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n", "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정", "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정", + "modal.eaves.gable.edit": "처마・케라바 변경", + "modal.eaves.gable.edit.basic": "통상", + "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.", "setting": "설정", "common.message.no.data": "No data", "common.message.no.dataDown": "No data to download", @@ -308,11 +311,13 @@ "slope": "경사", "eaves.offset": "처마 출폭", "gable.offset": "케라바 출폭", + "offset": "출폭", "size": "치수", "size.angle": "寸(度)", "eaves": "처마", "gable": "케라바", "wall": "벽", + "wall.merge": "벽취합", "hajebichi": "하제비치", "straight.line": "직선", "right.angle": "직각", diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 3d503b0b..034955f5 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -842,4 +842,85 @@ color: #344356; font-weight: 500; } +} + +// 패널 배치 집계 + +.penal-wrap{ + position: fixed; + top: 200px; + left: 50px; + z-index: 999999; + width: 237px; + height: 40px; + line-height: 40px; + background-color: #fff; + border: 1px solid #DFDFDF; + padding: 0 34px 0 10px; + border-radius: 2px; + box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05); + cursor: pointer; + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 12px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center; + background-size: cover; + } + h2{ + font-size: 12px; + font-weight: 500; + color: #3D3D3D; + } + .penal-table-wrap{ + display: none; + position: absolute; + top: 100%; + left: -1px; + min-width: calc(100% + 2px); + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + padding: 20px; + .penal-table{ + table-layout: fixed; + border-collapse: collapse; + thead{ + th{ + text-align: center; + background-color:rgba(255, 255, 255, 0.05); + font-size: 12px; + font-weight: 500; + color: #fff; + border: 1px solid #505050; + } + } + tbody{ + td{ + font-size: 12px; + color: #fff; + font-weight: 400; + text-align: center; + padding: 0 10px; + border: 1px solid #505050; + } + } + } + } + &.act{ + border: 1px solid #3D3D3D; + background-color: #3D3D3D; + h2{ + color: #fff; + } + &::before{ + background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center; + } + .penal-table-wrap{ + display: block; + } + } } \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index be8b4185..705550d5 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -77,6 +77,10 @@ $alert-color: #101010; width: 640px; } + &.lx-2 { + width: 740px; + } + &.lx { width: 770px; } @@ -1543,3 +1547,115 @@ $alert-color: #101010; } } } + + +// 지붕모듈선택 +.roof-module-tab { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; + + .module-tab-bx { + flex: 1; + height: 34px; + line-height: 31px; + border: 1px solid #484848; + border-radius: 2px; + background-color: transparent; + font-size: 12px; + color: #AAA; + text-align: center; + cursor: default; + transition: all .15s ease-in-out; + + &.act { + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; + } + } + + .tab-arr { + display: block; + width: 9px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(../../public/static/images/canvas/module_tab_arr.svg); + transition: all .15s ease-in-out; + + &.act { + background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); + } + } +} + +.roof-module-compas { + margin-bottom: 24px; + + .compas-box-inner { + width: 280px; + height: 253px; + + .circle { + top: 86%; + + &:nth-child(1), + &:nth-child(7), + &:nth-child(13), + &:nth-child(19) { + &::before { + content: ''; + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 6px; + background-color: #8B8B8B; + } + } + + i { + top: 32px; + } + + &.act { + i { + color: #8B8B8B; + } + } + } + } +} + +.center-wrap { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.module-table-flex-wrap { + display: flex; + gap: 10px; +} + +.module-table-box { + flex: 1; + background-color: #3D3D3D; + border-radius: 2px; + + .module-table-inneer { + padding: 10px; + + .outline-form { + span { + width: auto; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 6d899458..7804b800 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -144,6 +144,12 @@ button{ .ml10{margin-left: 10px !important;} .ml15{margin-left: 15px !important;} +// align +.al-l{text-align: left !important;} +.al-r{text-align: right !important;} +.al-c{text-align: center !important;} + + // button .btn-frame{ display: inline-block; @@ -410,6 +416,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; diff --git a/src/styles/_table.scss b/src/styles/_table.scss index d3c207a7..a87bfc5b 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -174,4 +174,32 @@ table{ } } } +} + +.roof-module-table{ + table{ + border-collapse: collapse; + thead{ + th{ + height: 40px; + padding: 0 10px; + font-size: 12px; + color: #fff; + font-weight: 500; + border: 1px solid #505050; + vertical-align: middle; + background-color: rgba(255, 255, 255, 0.05); + text-align: center; + word-break: keep-all; + } + } + tbody{ + td{ + font-size: 12px; + color: #fff; + font-weight: 400; + border: 1px solid #505050; + } + } + } } \ No newline at end of file