From f7310b53d5276f0622d7204c51889bb28020d33e Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 2 Oct 2024 13:51:31 +0900 Subject: [PATCH] =?UTF-8?q?-=20=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=20=EC=84=A4=EC=A0=95=20modal=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 16 ++- src/components/floor-plan/FloorPlan.jsx | 5 +- src/components/floor-plan/MenuDepth01.jsx | 3 +- .../outerlinesetting/WallLineSetting.jsx | 2 +- .../modal/placementShape/MaterialGuide.jsx | 17 +++ .../placementShape/PlacementShapeSetting.js | 120 ++++++++++++++++++ .../modal/placementShape/SizeGuide.jsx | 39 ++++++ .../modal/setting01/SettingModal01.jsx | 2 +- src/locales/ja.json | 17 +++ src/locales/ko.json | 17 +++ src/styles/_modal.scss | 2 - 11 files changed, 233 insertions(+), 7 deletions(-) create mode 100644 src/components/floor-plan/modal/placementShape/MaterialGuide.jsx create mode 100644 src/components/floor-plan/modal/placementShape/PlacementShapeSetting.js create mode 100644 src/components/floor-plan/modal/placementShape/SizeGuide.jsx diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 99b3e048..bda5a3ca 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -30,7 +30,7 @@ const canvasMenus = [ ] export default function CanvasMenu(props) { - const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props + const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, setShowPlaceShapeModal } = props const [menuNumber, setMenuNumber] = useState(null) const [type, setType] = useState('') @@ -54,6 +54,10 @@ export default function CanvasMenu(props) { setCurrentMenu(menu.title) switch (menu.index) { + case 1: + setType('placementShape') + onClickPlacementInitialMenu() + break case 2: setType('outline') break @@ -67,12 +71,16 @@ export default function CanvasMenu(props) { } const menuProps = { setShowOutlineModal, + setShowPlaceShapeModal, type, } const settingsModalOptions = useRecoilState(settingModalFirstOptionsState) useEffect(() => { + if (menuNumber === 1) { + onClickPlacementInitialMenu() + } if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false) }, [menuNumber, type]) @@ -81,6 +89,12 @@ export default function CanvasMenu(props) { saveCanvas(sessionState.userId) } + const onClickPlacementInitialMenu = () => { + setShowOutlineModal(false) + setShowCanvasSettingModal(false) + setShowPlaceShapeModal(true) + } + const handleClear = () => { setPoints([]) canvas?.clear() diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 9f7c6641..50ed672e 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -12,10 +12,12 @@ import CanvasLayout from '@/components/floor-plan/CanvasLayout' import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid' import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting' import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting' +import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) const [showOutlineModal, setShowOutlineModal] = useState(false) + const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false) const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -40,6 +42,7 @@ export default function FloorPlan() { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, + setShowPlaceShapeModal, } useEffect(() => { @@ -90,10 +93,10 @@ export default function FloorPlan() {
{showCanvasSettingModal && } - {/*{showOutlineModal && }*/} {showOutlineModal && } {showDotLineGridModal && } {showPropertiesSettingModal && } + {showPlaceShapeModal && }
diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index a6b12877..925978e6 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -7,7 +7,7 @@ import { currentMenuState } from '@/store/canvasAtom' import { useSetRecoilState } from 'recoil' export default function MenuDepth01(props) { - const { setShowOutlineModal, type } = props + const { setShowOutlineModal, type, setShowPlaceShapeModal } = props const { getMessage } = useMessage() const [activeMenu, setActiveMenu] = useState() const setCurrentMenu = useSetRecoilState(currentMenuState) @@ -16,6 +16,7 @@ export default function MenuDepth01(props) { setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) setCurrentMenu(menu) if (type === 'outline') { + setShowPlaceShapeModal(false) setShowOutlineModal(id === 0) } } diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx index 0cba88c2..d4b05967 100644 --- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx @@ -16,7 +16,7 @@ export default function WallLineSetting(props) { const { type, setType, handleFix, handleRollback } = useOuterLineWall() return ( - +

{getMessage('modal.cover.outline.drawing')}

diff --git a/src/components/floor-plan/modal/placementShape/MaterialGuide.jsx b/src/components/floor-plan/modal/placementShape/MaterialGuide.jsx new file mode 100644 index 00000000..eff09305 --- /dev/null +++ b/src/components/floor-plan/modal/placementShape/MaterialGuide.jsx @@ -0,0 +1,17 @@ +import { useMessage } from '@/hooks/useMessage' + +export default function MaterialGuide({ setShowMaterialGuidModal }) { + const { getMessage } = useMessage() + return ( +
+
+ +
+
+
{getMessage('modal.placement.initial.setting.roof.material.info')}
+
+
+ ) +} diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.js b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.js new file mode 100644 index 00000000..606f932d --- /dev/null +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.js @@ -0,0 +1,120 @@ +import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide' +import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useState } from 'react' +import { useMessage } from '@/hooks/useMessage' + +export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { + const [showSizeGuideModal, setShowSizeGuidModal] = useState(false) + const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false) + const { getMessage } = useMessage() + return ( + +
+
+

{getMessage('plan.menu.placement.surface.initial.setting')}

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
{getMessage('modal.placement.initial.setting.plan.drawing')}{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}
+ {getMessage('modal.placement.initial.setting.size')} + + +
+
+ + +
+
+ + +
+
+ + +
+
+
{getMessage('modal.placement.initial.setting.roof.angle.setting')} +
+
+ + +
+
+ + +
+
+
+ {getMessage('modal.placement.initial.setting.roof.material')} + + +
+
+ +
+
+ W +
+ +
+
+
+ L +
+ +
+
+
+ {getMessage('modal.placement.initial.setting.rafter')} +
+ +
+
+
+
+
+
+ +
+
+ {showSizeGuideModal && } + {showMaterialGuideModal && } +
+ + ) +} diff --git a/src/components/floor-plan/modal/placementShape/SizeGuide.jsx b/src/components/floor-plan/modal/placementShape/SizeGuide.jsx new file mode 100644 index 00000000..1f9d2770 --- /dev/null +++ b/src/components/floor-plan/modal/placementShape/SizeGuide.jsx @@ -0,0 +1,39 @@ +import { useMessage } from '@/hooks/useMessage' + +export default function SizeGuide({ setShowSizeGuidModal }) { + const { getMessage } = useMessage() + return ( +
+
+ +
+
+
{getMessage('modal.placement.initial.setting.size.info')}
+
+ + + + + + + + + + + + + + + + + + + +
{getMessage('modal.placement.initial.setting.size.roof')}{getMessage('modal.placement.initial.setting.size.roof.info')}
{getMessage('modal.placement.initial.setting.size.actual')}{getMessage('modal.placement.initial.setting.size.actual.info')}
{getMessage('modal.placement.initial.setting.size.none.pitch')}{getMessage('modal.placement.initial.setting.size.none.pitch.info')}
+
+
+
+ ) +} diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index 263fc924..9207bd76 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -13,7 +13,7 @@ export default function SettingModal01(props) { const { getMessage } = useMessage() return ( - +

{getMessage('modal.canvas.setting')}

diff --git a/src/locales/ja.json b/src/locales/ja.json index 06429bc6..a1285410 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -15,6 +15,22 @@ "header.stem": "ステム", "plan.menu.plan.drawing": "도면작성", "plan.menu.placement.surface.initial.setting": "配置面 初期設定", + "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成", + "modal.placement.initial.setting.plan.": "図面の作成方法", + "modal.placement.initial.setting.size": "寸法入力方法", + "modal.placement.initial.setting.size.info": "寸法入力方法案内", + "modal.placement.initial.setting.size.roof": "複視図入力", + "modal.placement.initial.setting.size.roof.info": "平面の外壁線と立面の屋根勾配に基づいて作画する場合に選択", + "modal.placement.initial.setting.size.actual": "実測値入力", + "modal.placement.initial.setting.size.actual.info": "現地屋根の外周寸法を入力して作画する場合選択", + "modal.placement.initial.setting.size.none.pitch": "陸上屋根", + "modal.placement.initial.setting.size.none.pitch.info": "傾斜のない平面形状の屋根にパネルを配置する場合に選択", + "modal.placement.initial.setting.roof.angle.setting": "屋根角度設定", + "modal.placement.initial.setting.roof.pitch": "傾斜", + "modal.placement.initial.setting.roof.angle": "角度", + "modal.placement.initial.setting.roof.material": "屋根材の選択(単位:mm)", + "modal.placement.initial.setting.roof.material.info": "対応可能な屋根材や足場は限定されますので、必ず事前マニュアルをご確認ください。", + "modal.placement.initial.setting.rafter": "垂木の間隔", "plan.menu.roof.cover": "지붕덮개", "plan.menu.roof.cover.outline.drawing": "外壁線を描", "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定", @@ -84,6 +100,7 @@ "modal.grid.copy.info": "間隔を設定し、コピー方向を選択します", "modal.grid.copy.length": "長さ", "modal.grid.copy.save": "保存", + "modal.common.save": "保存", "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更", "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更", "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更", diff --git a/src/locales/ko.json b/src/locales/ko.json index b3e2decd..cc84b9d7 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -15,6 +15,22 @@ "header.stem": "Stem", "plan.menu.plan.drawing": "도면작성", "plan.menu.placement.surface.initial.setting": "배치면 초기 설정", + "modal.placement.initial.setting.plan.drawing": "도면 작성방법", + "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성", + "modal.placement.initial.setting.size": "치수 입력방법", + "modal.placement.initial.setting.size.info": "치수 입력방법 안내", + "modal.placement.initial.setting.size.roof": "복시도 입력", + "modal.placement.initial.setting.size.roof.info": "평면의 외벽선과 입면의 지붕 구배를 바탕으로 작화할 경우 선택", + "modal.placement.initial.setting.size.actual": "실측값 입력", + "modal.placement.initial.setting.size.actual.info": "현지 지붕의 외주 치수를 입력하여 작화하는 경우 선택", + "modal.placement.initial.setting.size.none.pitch": "육지붕", + "modal.placement.initial.setting.size.none.pitch.info": "경사가 없는 평면 형태의 지붕에 패널을 배치할 경우 선택", + "modal.placement.initial.setting.roof.angle.setting": "지붕각도 설정", + "modal.placement.initial.setting.roof.pitch": "경사", + "modal.placement.initial.setting.roof.angle": "각도", + "modal.placement.initial.setting.roof.material": "지붕재 선택(단위: mm)", + "modal.placement.initial.setting.roof.material.info": "대응 가능한 지붕재 및 발판은 한정되므로 반드시 사전 매뉴얼을 확인하십시오.", + "modal.placement.initial.setting.rafter": "서까래", "plan.menu.roof.cover": "지붕덮개", "plan.menu.roof.cover.outline.drawing": "외벽선 그리기", "plan.menu.roof.cover.roof.shape.setting": "지붕형상 설정", @@ -85,6 +101,7 @@ "modal.grid.copy.info": "간격을 설정하고 복사 방향을 선택하십시오", "modal.grid.copy.length": "길이", "modal.grid.copy.save": "저장", + "modal.common.save": "저장", "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경", "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경", "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경", diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 28456176..88b63229 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -28,8 +28,6 @@ $alert-color: #101010; .modal-pop-wrap { position: fixed; - top: 200px; - right: 100px; width: 100%; min-width: 300px; height: -webkit-fit-content;