From 15af4655a3b76c8c6409aec21b5e1cfaf8eee94a Mon Sep 17 00:00:00 2001 From: minsik Date: Fri, 18 Oct 2024 13:36:32 +0900 Subject: [PATCH 1/6] =?UTF-8?q?popupManager=20=EA=B0=9C=EB=B0=9C=20?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.js | 2 + src/components/Roof2.jsx | 2 +- .../common/color-picker/ColorPicker.jsx | 23 +- .../common/color-picker/ColorPickerModal.jsx | 44 +++ src/components/common/font/FontSetting.jsx | 69 +++++ .../common/popupManager/PopupManager.jsx | 8 + src/components/floor-plan/CanvasFrame.jsx | 21 +- src/components/floor-plan/CanvasMenu.jsx | 25 +- src/components/floor-plan/FloorPlan.jsx | 23 +- .../modal/auxiliary/AuxiliaryDrawing.jsx | 4 +- .../modal/grid/GridColorSetting.jsx | 39 --- .../floor-plan/modal/setting01/GridOption.jsx | 41 ++- .../modal/setting01/SecondOption.jsx | 32 ++- .../modal/setting01/SettingModal01.jsx | 56 ++-- .../dimensionLine/DimensionLineSetting.jsx | 51 ++++ src/hooks/useCanvasEvent.js | 15 +- src/hooks/useContextMenu.js | 128 ++++++++- src/hooks/usePopup.js | 26 ++ src/locales/ja.json | 2 + src/locales/ko.json | 2 + src/store/popupAtom.js | 13 + src/styles/_modal.scss | 265 +++++++++++++++++- 22 files changed, 784 insertions(+), 107 deletions(-) create mode 100644 src/components/common/color-picker/ColorPickerModal.jsx create mode 100644 src/components/common/font/FontSetting.jsx create mode 100644 src/components/common/popupManager/PopupManager.jsx delete mode 100644 src/components/floor-plan/modal/grid/GridColorSetting.jsx create mode 100644 src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx create mode 100644 src/hooks/usePopup.js create mode 100644 src/store/popupAtom.js diff --git a/src/app/layout.js b/src/app/layout.js index d27522fe..0e9a797c 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -15,6 +15,7 @@ import './globals.css' import '../styles/style.scss' import '../styles/contents.scss' import Dimmed from '@/components/ui/Dimmed' +import PopupManager from '@/components/common/popupManager/PopupManager' // const inter = Inter({ subsets: ['latin'] }) @@ -81,6 +82,7 @@ export default async function RootLayout({ children }) { )} + diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index fbe61038..cc690ba9 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -39,7 +39,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen import InitSettingsModal from './InitSettingsModal' import GridSettingsModal from './GridSettingsModal' import { SurfaceShapeModal } from '@/components/ui/SurfaceShape' -import { changeAllHipAndGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils' +import { drawDirectionStringToArrow } from '@/util/qpolygon-utils' import ThumbnailList from '@/components/ui/ThumbnailLIst' import ObjectPlacement from '@/components/ui/ObjectPlacement' import { globalLocaleStore } from '@/store/localeAtom' diff --git a/src/components/common/color-picker/ColorPicker.jsx b/src/components/common/color-picker/ColorPicker.jsx index 7e774259..fe48272b 100644 --- a/src/components/common/color-picker/ColorPicker.jsx +++ b/src/components/common/color-picker/ColorPicker.jsx @@ -1,11 +1,30 @@ import { HexColorPicker } from 'react-colorful' +import { useMessage } from '@/hooks/useMessage' export default function ColorPicker(props) { const { color, setColor } = props - + const { getMessage } = useMessage() + const defaultColors = ['#EA575D', '#F29955', '#F2C957', '#32975D', '#3D7FED', '#828282', '#ffffff', '#000000'] return ( <> - +
+ +
+
+
HEX
+
+ setColor(e.target.value)} /> +
+
+
+
+
{getMessage('modal.color.picker.default.color')}
+
+ {defaultColors.map((color, index) => ( + + ))} +
+
) } diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx new file mode 100644 index 00000000..0f81d99f --- /dev/null +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -0,0 +1,44 @@ +import WithDraggable from '@/components/common/draggable/WithDraggable' +import ColorPicker from '@/components/common/color-picker/ColorPicker' +import { useMessage } from '@/hooks/useMessage' +import { useEffect, useState } from 'react' + +export default function ColorPickerModal(props) { + const { isShow, setIsShow, pos = { x: 800, y: -950 }, color = '#ff0000', setColor } = props + const { getMessage } = useMessage() + const [originColor, setOriginColor] = useState(color) + useEffect(() => { + setOriginColor(color) + }, [isShow]) + return ( + +
+
+

{getMessage('modal.color.picker.title')}

+ +
+
+
+
COLOR PICKER
+
+ +
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx new file mode 100644 index 00000000..aaeb7b02 --- /dev/null +++ b/src/components/common/font/FontSetting.jsx @@ -0,0 +1,69 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import QSelectBox from '@/components/common/select/QSelectBox' + +const SelectOption = [{ name: '原寸' }, { name: '原寸' }, { name: '原寸' }, { name: '原寸' }] +export default function FontSetting(props) { + const { setShowFontSettingModal } = props + console.log( + Array.from({ length: 10 }).map((_, index) => { + return { name: 5 + index } + }), + ) + return ( + +
+
+

フォント

+ +
+
+
+
+
+
文字(F)
+
+ +
+
+
+
フォントスタイル(Y)
+
+ +
+
+
+
サイズ(S)
+
+ { + return { id: index, name: 8 * (index + 1) } + })} + /> +
+
+
+
フォン
+
+ +
+
+
+
+
見る
+
+ Aaあぁアァ +
+
+
ントです。プリンタと画面 でも同じフォントを使用します.
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx new file mode 100644 index 00000000..cc6ce224 --- /dev/null +++ b/src/components/common/popupManager/PopupManager.jsx @@ -0,0 +1,8 @@ +'use client' +import { useRecoilState } from 'recoil' +import { popupState } from '@/store/popupAtom' + +export default function PopupManager() { + const [popup, setPopup] = useRecoilState(popupState) + return <>{popup.children?.map((child) => child.component)} +} diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index f34d1cb6..9b17b1f0 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -8,11 +8,18 @@ import QContextMenu from '@/components/common/context-menu/QContextMenu' import { useContextMenu } from '@/hooks/useContextMenu' import { useRecoilValue } from 'recoil' import { currentObjectState } from '@/store/canvasAtom' +import { useCanvasEvent } from '@/hooks/useCanvasEvent' export default function CanvasFrame({ plan }) { const canvasRef = useRef(null) const { canvas } = useCanvas('canvas') - const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu() + const { handleZoomClear } = useCanvasEvent() + const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({ + externalFn: { + handleZoomClear, + }, + }) + const currentObject = useRecoilValue(currentObjectState) useEffect(() => { @@ -44,7 +51,17 @@ export default function CanvasFrame({ plan }) { {contextMenu.map((menus, index) => (
    {menus.map((menu) => ( -
  • setCurrentContextMenu(menu)}>{menu.name}
    • +
  • { + if (menu.fn) { + menu.fn() + } + setCurrentContextMenu(menu) + }} + > + {menu.name} +
    • ))}
))} diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index ae8cc79d..61bfb0ae 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -19,6 +19,10 @@ import { MENU } from '@/common/common' import KO from '@/locales/ko.json' import JA from '@/locales/ja.json' import { settingModalFirstOptionsState } from '@/store/settingAtom' +import { useCanvasEvent } from '@/hooks/useCanvasEvent' +import { popupState } from '@/store/popupAtom' +import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' +import { usePopup } from '@/hooks/usePopup' const canvasMenus = [ { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, @@ -52,6 +56,7 @@ export default function CanvasMenu(props) { setShowPropertiesSettingModal, } = props + const { addPopup, closePopup } = usePopup() const [menuNumber, setMenuNumber] = useState(null) const [type, setType] = useState('') @@ -61,6 +66,7 @@ export default function CanvasMenu(props) { const setPoints = useSetRecoilState(outerLinePointsState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) + const { handleZoomClear } = useCanvasEvent() const globalLocale = useRecoilValue(globalLocaleStore) const canvas = useRecoilValue(canvasState) @@ -69,7 +75,7 @@ export default function CanvasMenu(props) { const { getMessage } = useMessage() const { saveCanvas } = usePlan() const { swalFire } = useSwal() - + const [popup, setPopup] = useRecoilState(popupState) const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (menu) => { setMenuNumber(menu.index) @@ -143,13 +149,13 @@ export default function CanvasMenu(props) { setPoints([]) canvas?.clear() } - - const handleZoomClear = () => { - setCanvasZoom(100) - canvas.set({ zoom: 1 }) - canvas.viewportTransform = [1, 0, 0, 1, 0, 0] - canvas.renderAll() - } + // + // const handleZoomClear = () => { + // setCanvasZoom(100) + // canvas.set({ zoom: 1 }) + // canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + // canvas.renderAll() + // } useEffect(() => { if (globalLocale === 'ko') { @@ -196,7 +202,8 @@ export default function CanvasMenu(props) {
- + {/**/} +
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index b8ea7784..4d70ee0c 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -1,19 +1,17 @@ 'use client' import { useEffect, useState } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { useAxios } from '@/hooks/useAxios' import { globalLocaleStore } from '@/store/localeAtom' -import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' +import { settingModalFirstOptionsState, settingModalGridOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import '@/styles/contents.scss' import CanvasMenu from '@/components/floor-plan/CanvasMenu' -import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' 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' -import GridColorSetting from './modal/grid/GridColorSetting' import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting' import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing' import Slope from '@/components/floor-plan/modal/Slope' @@ -28,6 +26,8 @@ import MovementSetting from '@/components/floor-plan/modal/movement/MovementSett import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting' import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting' +import FontSetting from '@/components/common/font/FontSetting' +import { gridColorState } from '@/store/gridAtom' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) @@ -58,10 +58,15 @@ export default function FloorPlan() { const [showGridCopyModal, setShowGridCopyModal] = useState(false) const [showGridMoveModal, setShowGridMoveModal] = useState(false) const [showColorPickerModal, setShowColorPickerModal] = useState(false) + const [color, setColor] = useRecoilState(gridColorState) + const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) + const [showFontSettingModal, setShowFontSettingModal] = useState(false) + const canvasSettingProps = { setShowCanvasSettingModal, setShowDotLineGridModal, setShowColorPickerModal, + setShowFontSettingModal, } const outlineProps = { @@ -127,6 +132,9 @@ export default function FloorPlan() { const gridColorProps = { setShowColorPickerModal, + color, + setColor, + setSettingModalGridOptions, } const propertiesSettingProps = { @@ -141,12 +149,13 @@ export default function FloorPlan() {
- {showCanvasSettingModal && } + {/*{showCanvasSettingModal && }*/} {showOutlineModal && } {showDotLineGridModal && } - {showColorPickerModal && } + {/*{showColorPickerModal && }*/} + {showFontSettingModal && } {showPropertiesSettingModal && } - + {/**/} {showPlaceShapeModal && } {showRoofShapeSettingModal && } {showRoofShapePassivitySettingModal && ( diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index d0f87114..2aa5cd84 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -1,4 +1,3 @@ -import { useState } from 'react' import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle' @@ -6,7 +5,6 @@ import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch' import Angle from '@/components/floor-plan/modal/lineTypes/Angle' import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal' import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' -import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing' @@ -152,7 +150,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) { {getMessage('modal.cover.outline.rollback')}
diff --git a/src/components/floor-plan/modal/grid/GridColorSetting.jsx b/src/components/floor-plan/modal/grid/GridColorSetting.jsx deleted file mode 100644 index 5b7b2ff6..00000000 --- a/src/components/floor-plan/modal/grid/GridColorSetting.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import WithDraggable from '@/components/common/draggable/WithDraggable' -import ColorPicker from '@/components/common/color-picker/ColorPicker' -import { useRecoilState, useSetRecoilState } from 'recoil' -import { gridColorState } from '@/store/gridAtom' -import { useMessage } from '@/hooks/useMessage' -import { useEffect } from 'react' -import { settingModalGridOptionsState } from '@/store/settingAtom' - -export default function GridColorSetting(props) { - const { setShowColorPickerModal } = props - const [color, setColor] = useRecoilState(gridColorState) - const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) - const { getMessage } = useMessage() - - useEffect(() => { - return () => { - setSettingModalGridOptions((prev) => { - const newSettingOptions = [...prev] - newSettingOptions[3].selected = false - return [...newSettingOptions] - }) - } - }, []) - return ( - -
-
-

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

- -
-
- -
-
- - ) -} diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index 39af3a10..efa7d099 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -1,27 +1,45 @@ -import React, { useEffect } from 'react' -import { useRecoilState } from 'recoil' +import React, { useEffect, useState } from 'react' +import { useRecoilState, useSetRecoilState } from 'recoil' import { settingModalGridOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' import { adsorptionPointAddModeState } from '@/store/canvasAtom' import { useTempGrid } from '@/hooks/useTempGrid' import { gridColorState } from '@/store/gridAtom' import { useColor } from 'react-color-palette' +import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal' export default function GridOption(props) { - const { setShowDotLineGridModal, setShowColorPickerModal } = props + const { setShowDotLineGridModal } = props const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState) - const [gridColor, setGridColor] = useRecoilState(gridColorState) const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState) + const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) const { getMessage } = useMessage() const { tempGridMode, setTempGridMode } = useTempGrid() - + const [gridColor, setGridColor] = useRecoilState(gridColorState) const [color, setColor] = useColor(gridColor) + const [showColorPickerModal, setShowColorPickerModal] = useState(false) useEffect(() => { console.log('GridOption useEffect 실행') + console.log(color) setGridColor(color.hex) }, [color]) + useEffect(() => { + gridOptions[3].selected = showColorPickerModal + setGridOptions([...gridOptions]) + }, [showColorPickerModal]) + + useEffect(() => { + return () => { + setSettingModalGridOptions((prev) => { + const newSettingOptions = [...prev] + newSettingOptions[3].selected = false + return [...newSettingOptions] + }) + } + }, []) + const onClickOption = (option) => { const newGridOptions = [...gridOptions] newGridOptions.map((item) => { @@ -54,6 +72,7 @@ export default function GridOption(props) { if (option.id === 4) { // 그리드 색 설정 + console.log(option) if (option.selected) { setShowColorPickerModal(true) } else { @@ -64,6 +83,17 @@ export default function GridOption(props) { setGridOptions(newGridOptions) } + const colorPickerProps = { + color: gridColor, + setColor: setGridColor, + isShow: showColorPickerModal, + setIsShow: setShowColorPickerModal, + pos: { + x: -515, + y: -214, + }, + } + return ( <>
@@ -77,6 +107,7 @@ export default function GridOption(props) { ))}
+ ) } diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index f6cf6e30..05d20c11 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -5,8 +5,9 @@ import React, { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom' +import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting' -export default function SecondOption() { +export default function SecondOption({ setShowFontSettingModal }) { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) @@ -18,6 +19,15 @@ export default function SecondOption() { const { getMessage } = useMessage() const { get, post } = useAxios() const { swalFire } = useSwal() + const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false) + const dimensionLineSettingProps = { + isShow: showDimensionLineSettingModal, + setIsShow: setShowDimensionLineSettingModal, + pos: { + x: -515, + y: -214, + }, + } // 데이터를 최초 한 번만 조회 useEffect(() => { @@ -31,7 +41,10 @@ export default function SecondOption() { const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] })) const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] })) - const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] })) + const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ + ...item, + selected: res[item.column], + })) const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item })) const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) @@ -51,7 +64,14 @@ export default function SecondOption() { const onClickOption = async (option) => { // option4에서 한 개만 선택 가능하도록 처리 - const updatedOption4 = option4.map((item) => (item.id === option.id ? { ...item, selected: true } : { ...item, selected: false })) + const updatedOption4 = option4.map((item) => + item.id === option.id + ? { ...item, selected: true } + : { + ...item, + selected: false, + }, + ) setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) setSettingModalSecondOptions({ option3, option4: updatedOption4 }) @@ -117,6 +137,7 @@ export default function SecondOption() { } setAdsorptionRange(option.range) } + return ( <>
@@ -124,7 +145,7 @@ export default function SecondOption() {
{settingModalSecondOptions && settingModalSecondOptions.option3.map((item) => ( - ))} @@ -142,7 +163,7 @@ export default function SecondOption() { ))}
-
+ ) } diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index 78511548..98542c36 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -10,7 +10,7 @@ import { canGridOptionSeletor } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' export default function SettingModal01(props) { - const { setShowCanvasSettingModal, setShowDotLineGridModal, setShowColorPickerModal } = props + const { setShowCanvasSettingModal, setShowDotLineGridModal, setShowFontSettingModal } = props const [buttonAct, setButtonAct] = useState(1) const { getMessage } = useMessage() const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor) @@ -20,34 +20,36 @@ export default function SettingModal01(props) { } return ( - -
-
-

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

- -
-
-
- - - - {canGridOptionSeletorValue && ( - - )}
- {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } +
+
+ + + + {canGridOptionSeletorValue && ( + + )} +
+ {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } +
-
- + + ) } diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx new file mode 100644 index 00000000..a17cc22e --- /dev/null +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -0,0 +1,51 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' + +export default function DimensionLineSetting(props) { + const { isShow, setIsShow, pos = { x: 800, y: -950 }, setShowFontSettingModal, setShowColorPickerModal } = props + return ( + +
+
+

寸法線 設定

+ +
+
+
+ +
+
+
+ 寸法線の線太さ +
+ +
+ pixel +
+
+ 寸法線の線の色 + +
+
+
+
見る
+
+
+
+ + 9,999 + + +
+
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index cf3b6244..4f041e79 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -1,15 +1,17 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' -import { canvasSizeState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom' +import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' // 캔버스에 필요한 이벤트 export function useCanvasEvent() { - const [canvas, setCanvasForEvent] = useState(null) + const canvas = useRecoilValue(canvasState) + const [canvasForEvent, setCanvasForEvent] = useState(null) const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) const canvasSize = useRecoilValue(canvasSizeState) const fontSize = useRecoilValue(fontSizeState) const fontFamily = useRecoilValue(fontFamilyState) + const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) // 기본적인 이벤트 필요시 추가 const attachDefaultEventOnCanvas = () => { @@ -167,7 +169,6 @@ export function useCanvasEvent() { const whiteList = ['mouseLine', 'guideLine'] if (whiteList.includes(e.target.name)) { - return } }, } @@ -336,8 +337,16 @@ export function useCanvasEvent() { }) } + const handleZoomClear = () => { + setCanvasZoom(100) + canvas.set({ zoom: 1 }) + canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + canvas.renderAll() + } + return { setCanvasForEvent, attachDefaultEventOnCanvas, + handleZoomClear, } } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 665617ef..3fb6f164 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -1,16 +1,18 @@ import { useRecoilValue } from 'recoil' -import { currentMenuState } from '@/store/canvasAtom' +import { currentMenuState, currentObjectState } from '@/store/canvasAtom' import { useEffect, useState } from 'react' import { MENU } from '@/common/common' import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove' import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize' -export function useContextMenu() { +export function useContextMenu({ externalFn }) { const currentMenu = useRecoilValue(currentMenuState) const [contextMenu, setContextMenu] = useState([[]]) const [currentContextMenu, setCurrentContextMenu] = useState(null) + const currentObject = useRecoilValue(currentObjectState) - useEffect(() => { + const currentMenuSetting = () => { + console.log(currentMenu) switch (currentMenu) { case MENU.PLAN_DRAWING: setContextMenu([ @@ -50,6 +52,13 @@ export function useContextMenu() { case MENU.ROOF_COVERING.DEFAULT: setContextMenu([ [ + { + id: 'refresh', + name: '새로고침', + fn: () => { + externalFn.handleZoomClear() + }, + }, { id: 'roofMaterialPlacement', name: '지붕재 배치', @@ -150,8 +159,121 @@ export function useContextMenu() { setContextMenu([]) break } + } + useEffect(() => { + currentMenuSetting() }, [currentMenu]) + useEffect(() => { + console.log('currentObject', currentObject) + console.log('currentMenu', currentMenu) + if (currentObject?.name) { + console.log(currentObject) + switch (currentObject.name) { + case 'triangleDormer': + setContextMenu([ + [ + { + id: 'sizeEdit', + name: '사이즈 변경', + }, + { + id: 'dormerRemove', + name: '삭제(D)', + }, + { + id: 'dormerMove', + name: '이동(M)', + }, + { + id: 'dormerCopy', + name: '복사(C)', + }, + { + id: 'roofMaterialEdit', + name: '지붕재 변경', + }, + { + id: 'dormerOffset', + name: '도머 오프셋', + }, + ], + ]) + break + case 'roof': + setContextMenu([ + [ + { + id: 'sizeEdit', + name: '사이즈 변경', + }, + { + id: 'roofMaterialRemove', + name: '삭제(D)', + }, + { + id: 'roofMaterialMove', + name: '이동(M)', + }, + { + id: 'roofMaterialCopy', + name: '복사(C)', + }, + ], + [ + { + id: 'roofMaterialEdit', + name: '지붕재 변경', + }, + { + id: 'linePropertyEdit', + name: '각 변 속성 변경', + }, + { + id: 'flowDirectionEdit', + name: '흐름 뱡향 변경', + }, + ], + ]) + break + case 'opening': + setContextMenu([ + [ + { + id: 'sizeEdit', + name: '사이즈 변경', + }, + { + id: 'openingRemove', + name: '삭제(D)', + }, + { + id: 'openingMove', + name: '이동(M)', + }, + { + id: 'openingCopy', + name: '복사(C)', + }, + { + id: 'openingOffset', + name: '개구 오프셋', + }, + ], + ]) + break + default: + currentMenuSetting() + } + } else { + currentMenuSetting() + } + }, [currentObject]) + + useEffect(() => { + console.log(currentContextMenu) + }, [currentContextMenu]) + return { contextMenu, currentContextMenu, diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js new file mode 100644 index 00000000..8a1fa876 --- /dev/null +++ b/src/hooks/usePopup.js @@ -0,0 +1,26 @@ +import { useRecoilState } from 'recoil' +import { popupState } from '@/store/popupAtom' +import { v4 as uuidv4 } from 'uuid' +import { useEffect } from 'react' + +export function usePopup() { + const [popup, setPopup] = useRecoilState(popupState) + useEffect(() => { + console.log(popup) + }, [popup]) + + const addPopup = (component) => { + setPopup({ children: [...popup.children, { id: uuidv4(), component: component }] }) + } + + const closePopup = (id) => { + setPopup({ children: popup.children.filter((child) => child.id !== id) }) + } + + return { + popup, + setPopup, + addPopup, + closePopup, + } +} diff --git a/src/locales/ja.json b/src/locales/ja.json index 980d1400..23e3b45c 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -247,6 +247,8 @@ "modal.object.setting.direction.select": "方向の選択", "modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。", "modal.placement.surface.setting.diagonal.length": "斜めの長さ", + "modal.color.picker.title": "色の設定", + "modal.color.picker.default.color": "基本色", "setting": "設定", "common.message.no.data": "No data", "common.message.no.dataDown": "ダウンロードするデータがありません", diff --git a/src/locales/ko.json b/src/locales/ko.json index 21aca2be..1ef504b2 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -252,6 +252,8 @@ "modal.object.setting.direction.select": "방향 선택", "modal.placement.surface.setting.info": "ⓘ ①의 길이 입력 후 대각선 길이를 입력하면 ②의 길이를 자동 계산합니다.", "modal.placement.surface.setting.diagonal.length": "대각선 길이", + "modal.color.picker.title": "색 설정", + "modal.color.picker.default.color": "기본색상", "setting": "설정", "common.message.no.data": "No data", "common.message.no.dataDown": "No data to download", diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js new file mode 100644 index 00000000..78de8660 --- /dev/null +++ b/src/store/popupAtom.js @@ -0,0 +1,13 @@ +import { atom } from 'recoil' + +/* + * id: uuid + * component: Popup Component + * */ +export const popupState = atom({ + key: 'popupState', + default: { + children: [], + }, + dangerouslyAllowMutability: true, +}) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9bd59e3d..f0966b04 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -34,6 +34,9 @@ $alert-color: #101010; border-radius: 4px; background-color: #272727; z-index: 9999999; + &.xsm{ + width: 200px; + } &.xxxm{ width: 240px; } @@ -1505,7 +1508,7 @@ $alert-color: #101010; width: 16px; height: 16px; &.pink{ - border: 2px solid #EA10AC; + border: 2px solid #ce1c9c; background-color: #16417D; } &.white{ @@ -1514,4 +1517,264 @@ $alert-color: #101010; } } } +} + +// color setting +.color-setting-wrap{ + padding-bottom: 15px; + border-bottom: 1px solid #424242; + .color-tit{ + font-size: 13px; + font-weight: 500; + color: #ffffff; + margin-bottom: 10px; + } + .color-picker{ + .react-colorful{ + width: 100%; + height: auto; + gap: 20px; + .react-colorful__pointer{ + width: 15px; + height: 15px; + border: 4px solid #Fff; + } + .react-colorful__saturation{ + border-radius: 2px; + height: 200px; + border-bottom: 5px solid #000; + } + .react-colorful__last-control{ + border-radius: 2px; + height: 10px; + } + } + .hex-color-box{ + display: flex; + align-items: center; + margin-top: 15px; + .color-box-tit{ + font-size: 12px; + color: #fff; + font-weight: 500; + margin-right: 10px; + } + .color-hex-input{ + width: 150px; + margin-right: 5px; + input{ + width: 100%; + } + } + .color-box{ + display: block; + width: 30px; + height: 30px; + border-radius: 4px; + } + } + .default-color-wrap{ + margin-top: 25px; + .default-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + .color-button-wrap{ + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 21px; + .default-color{ + display: block; + width: 100%; + height: 30px; + border-radius: 4px; + } + } + } + } +} + +// 글꼴 설정 팝업 +.font-option-warp{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 5px; + margin-bottom: 15px; + .font-option-item{ + .option-item-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + } +} +.font-ex-wrap{ + margin-bottom: 15px; + .font-ex-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + .font-ex-box{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 80px; + background-color: #fff; + } + +} + +// 치수선 설정 +.font-btn-wrap{ + margin-bottom: 15px; + button{ + width: 100%; + height: 30px; + line-height: 28px; + } +} + +.line-color-wrap{ + margin-bottom: 15px; + .color-btn{ + display: block; + width: 100%; + height: 30px; + border-radius: 2px; + } +} + +.form-box{ + width: 100%; + background-color: #fff; + padding: 10px 0 20px; + .line-form{ + position: relative; + width: 102px; + height: 40px; + margin: 0 auto; + border-left: 1px dashed #101010; + border-right: 1px dashed #101010; + .line-font-box{ + position: absolute; + bottom: -3px; + left: 0; + width: 100%; + text-align: center; + .font{ + display: block; + padding-bottom: 6px; + color: #101010; + } + .line{ + position: relative; + display: block; + width: 100%; + height: 1px; + border-radius: 30px; + &::before{ + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%) rotate(45deg); + left: 1px; + width: 9px; + height: 9px; + border: 1px solid; + border-color: inherit; + border-top: none; + border-right: none; + } + &::after{ + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%) rotate(45deg); + right: 1px; + width: 9px; + height: 9px; + border: 1px solid; + border-color: inherit; + border-bottom: none; + border-left: none; + } + } + } + } +} + +// 사이즈 변경 +.size-inner-warp{ + position: relative; +} +.size-check-wrap{ + position: relative; + display: block; + width: 132px; + height: 132px; + margin: 0 auto; + .size-btn{ + position: absolute; + width: 16px; + height: 16px; + border: 1px solid #fff; + border-radius: 50%; + &.act{ + &::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8px; + height: 8px; + background-color: #fff; + border-radius: 50%; + } + } + &:nth-child(1){ top: 0; left: 0; } + &:nth-child(2){ top: 0; right: 0; } + &:nth-child(3){ bottom: 0; left: 0; } + &:nth-child(4){ bottom: 0; right: 0; } + } + .size-box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + background-color: #fff; + } +} + +.size-option-top{ + margin-bottom: 15px; +} +.size-option-side{ + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} +.size-option-wrap{ + width: 88px; + margin: 0 auto; + .size-option{ + display: flex; + align-items: center; + input{ + width: 100%; + flex: 1; + } + span{ + flex: none; + } + } } \ No newline at end of file From b909006f7ab61efb1316f546a55cb1406142be00 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 18 Oct 2024 13:56:28 +0900 Subject: [PATCH 2/6] chore: modify .env variable --- .env | 12 ------------ .env.development | 6 ------ .env.production | 4 ---- 3 files changed, 22 deletions(-) diff --git a/.env b/.env index 50ab0d74..e69de29b 100644 --- a/.env +++ b/.env @@ -1,12 +0,0 @@ -# Environment variables declared in this file are automatically made available to Prisma. -# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema - -# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. -# See the documentation for all the connection string options: https://pris.ly/d/connection-strings - -# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" -# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" -#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0" -# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority" -# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" -DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest" \ No newline at end of file diff --git a/.env.development b/.env.development index 933db5d3..bb0e9585 100644 --- a/.env.development +++ b/.env.development @@ -1,10 +1,4 @@ -NEXT_PUBLIC_TEST="테스트변수입니다. development" - NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080" -# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080" -# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080" - -DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true" SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y=" diff --git a/.env.production b/.env.production index 9bad1719..bb0e9585 100644 --- a/.env.production +++ b/.env.production @@ -1,9 +1,5 @@ -NEXT_PUBLIC_TEST="테스트변수입니다. production" - NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080" -DATABASE_URL="" - SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y=" NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3" From d6fbea705fecf0e0e52dff31b9e22ae9a7f9a5f8 Mon Sep 17 00:00:00 2001 From: minsik Date: Fri, 18 Oct 2024 15:28:59 +0900 Subject: [PATCH 3/6] =?UTF-8?q?popupManager=20canvasSetting=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/color-picker/ColorPickerModal.jsx | 17 +++++++-- src/components/common/font/FontSetting.jsx | 19 +++++----- src/components/floor-plan/CanvasMenu.jsx | 9 +++-- src/components/floor-plan/FloorPlan.jsx | 28 --------------- .../floor-plan/modal/grid/DotLineGrid.jsx | 16 +++++++-- .../floor-plan/modal/setting01/GridOption.jsx | 16 +++++---- .../modal/setting01/SecondOption.jsx | 36 ++++++++++++------- .../modal/setting01/SettingModal01.jsx | 12 ++++--- .../dimensionLine/DimensionLineSetting.jsx | 15 ++++---- src/hooks/usePopup.js | 21 ++++++++--- 10 files changed, 112 insertions(+), 77 deletions(-) diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 0f81d99f..3e4997b6 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -2,20 +2,30 @@ import WithDraggable from '@/components/common/draggable/WithDraggable' import ColorPicker from '@/components/common/color-picker/ColorPicker' import { useMessage } from '@/hooks/useMessage' import { useEffect, useState } from 'react' +import { usePopup } from '@/hooks/usePopup' export default function ColorPickerModal(props) { - const { isShow, setIsShow, pos = { x: 800, y: -950 }, color = '#ff0000', setColor } = props + const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props const { getMessage } = useMessage() const [originColor, setOriginColor] = useState(color) + const { closePopup } = usePopup() + useEffect(() => { setOriginColor(color) }, [isShow]) + return ( - +

{getMessage('modal.color.picker.title')}

-
@@ -32,6 +42,7 @@ export default function ColorPickerModal(props) { onClick={() => { setColor(originColor) setIsShow(false) + closePopup(id) }} > {getMessage('common.message.save')} diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index aaeb7b02..a78bd97d 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -1,20 +1,23 @@ import WithDraggable from '@/components/common/draggable/withDraggable' import QSelectBox from '@/components/common/select/QSelectBox' +import { usePopup } from '@/hooks/usePopup' const SelectOption = [{ name: '原寸' }, { name: '原寸' }, { name: '原寸' }, { name: '原寸' }] export default function FontSetting(props) { - const { setShowFontSettingModal } = props - console.log( - Array.from({ length: 10 }).map((_, index) => { - return { name: 5 + index } - }), - ) + const { id, setShowFontSettingModal } = props + const { closePopup } = usePopup() return ( - +

フォント

-
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 61bfb0ae..14d8ee14 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -6,7 +6,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import MenuDepth01 from './MenuDepth01' import QSelectBox from '@/components/common/select/QSelectBox' - +import { v4 as uuidv4 } from 'uuid' import { useMessage } from '@/hooks/useMessage' import { usePlan } from '@/hooks/usePlan' import { useSwal } from '@/hooks/useSwal' @@ -157,6 +157,11 @@ export default function CanvasMenu(props) { // canvas.renderAll() // } + const handlePopup = () => { + const id = uuidv4() + addPopup(id, 1, ) + } + useEffect(() => { if (globalLocale === 'ko') { setAppMessageState(KO) @@ -203,7 +208,7 @@ export default function CanvasMenu(props) {
{/**/} - +
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 4d70ee0c..6f798f0a 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -8,7 +8,6 @@ import { settingModalFirstOptionsState, settingModalGridOptionsState, settingMod import '@/styles/contents.scss' import CanvasMenu from '@/components/floor-plan/CanvasMenu' 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' @@ -26,7 +25,6 @@ import MovementSetting from '@/components/floor-plan/modal/movement/MovementSett import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting' import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting' -import FontSetting from '@/components/common/font/FontSetting' import { gridColorState } from '@/store/gridAtom' export default function FloorPlan() { @@ -54,20 +52,10 @@ export default function FloorPlan() { const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const [showDotLineGridModal, setShowDotLineGridModal] = useState(false) const [showGridCopyModal, setShowGridCopyModal] = useState(false) const [showGridMoveModal, setShowGridMoveModal] = useState(false) - const [showColorPickerModal, setShowColorPickerModal] = useState(false) const [color, setColor] = useRecoilState(gridColorState) const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) - const [showFontSettingModal, setShowFontSettingModal] = useState(false) - - const canvasSettingProps = { - setShowCanvasSettingModal, - setShowDotLineGridModal, - setShowColorPickerModal, - setShowFontSettingModal, - } const outlineProps = { setShowOutlineModal, @@ -125,17 +113,6 @@ export default function FloorPlan() { console.error('Data fetching error:', error) } } - const dotLineProps = { - showDotLineGridModal, - setShowDotLineGridModal, - } - - const gridColorProps = { - setShowColorPickerModal, - color, - setColor, - setSettingModalGridOptions, - } const propertiesSettingProps = { setShowPropertiesSettingModal, @@ -149,13 +126,8 @@ export default function FloorPlan() {
- {/*{showCanvasSettingModal && }*/} {showOutlineModal && } - {showDotLineGridModal && } - {/*{showColorPickerModal && }*/} - {showFontSettingModal && } {showPropertiesSettingModal && } - {/**/} {showPlaceShapeModal && } {showRoofShapeSettingModal && } {showRoofShapePassivitySettingModal && ( diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index eb5a834e..4d839906 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -10,6 +10,7 @@ import { gridColorState } from '@/store/gridAtom' import { settingModalGridOptionsState } from '@/store/settingAtom' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' +import { usePopup } from '@/hooks/usePopup' const TYPE = { DOT: 'DOT', @@ -20,7 +21,7 @@ export default function DotLineGrid(props) { // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [close, setClose] = useState(false) - const { setShowDotLineGridModal } = props + const { id, setShowDotLineGridModal } = props const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) const gridColor = useRecoilValue(gridColorState) const canvas = useRecoilValue(canvasState) @@ -32,6 +33,7 @@ export default function DotLineGrid(props) { const { getMessage } = useMessage() const { get, post } = useAxios() const { swalFire } = useSwal() + const { closePopup } = usePopup() useEffect(() => { return () => { @@ -243,6 +245,8 @@ export default function DotLineGrid(props) { canvas.renderAll() }) + setShowDotLineGridModal(false) + closePopup(id) } catch (error) { swalFire({ text: getMessage(res.returnMessage), icon: 'error' }) } @@ -303,11 +307,17 @@ export default function DotLineGrid(props) { } return ( - +

{getMessage('modal.canvas.setting.grid.dot.line.setting')}

-
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index efa7d099..9b5e131e 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -7,9 +7,11 @@ import { useTempGrid } from '@/hooks/useTempGrid' import { gridColorState } from '@/store/gridAtom' import { useColor } from 'react-color-palette' import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal' +import { usePopup } from '@/hooks/usePopup' +import { v4 as uuidv4 } from 'uuid' +import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid' export default function GridOption(props) { - const { setShowDotLineGridModal } = props const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState) const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState) const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) @@ -18,6 +20,8 @@ export default function GridOption(props) { const [gridColor, setGridColor] = useRecoilState(gridColorState) const [color, setColor] = useColor(gridColor) const [showColorPickerModal, setShowColorPickerModal] = useState(false) + const [showDotLineGridModal, setShowDotLineGridModal] = useState(false) + const { addPopup } = usePopup() useEffect(() => { console.log('GridOption useEffect 실행') @@ -26,6 +30,7 @@ export default function GridOption(props) { }, [color]) useEffect(() => { + console.log(showColorPickerModal) gridOptions[3].selected = showColorPickerModal setGridOptions([...gridOptions]) }, [showColorPickerModal]) @@ -42,6 +47,7 @@ export default function GridOption(props) { const onClickOption = (option) => { const newGridOptions = [...gridOptions] + const id = uuidv4() newGridOptions.map((item) => { if (item.id === option.id) { item.selected = !item.selected @@ -59,6 +65,7 @@ export default function GridOption(props) { // 점.선 그리드 if (option.selected) { setShowDotLineGridModal(true) + addPopup(id, 2, ) } else { setShowDotLineGridModal(false) } @@ -75,6 +82,7 @@ export default function GridOption(props) { console.log(option) if (option.selected) { setShowColorPickerModal(true) + addPopup(id, 2, ) } else { setShowColorPickerModal(false) } @@ -88,10 +96,6 @@ export default function GridOption(props) { setColor: setGridColor, isShow: showColorPickerModal, setIsShow: setShowColorPickerModal, - pos: { - x: -515, - y: -214, - }, } return ( @@ -107,7 +111,7 @@ export default function GridOption(props) { ))}
- + {/**/} ) } diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 05d20c11..a4123fe3 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -6,8 +6,11 @@ import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom' import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting' +import { usePopup } from '@/hooks/usePopup' +import { v4 as uuidv4 } from 'uuid' +import FontSetting from '@/components/common/font/FontSetting' -export default function SecondOption({ setShowFontSettingModal }) { +export default function SecondOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) @@ -19,15 +22,9 @@ export default function SecondOption({ setShowFontSettingModal }) { const { getMessage } = useMessage() const { get, post } = useAxios() const { swalFire } = useSwal() + const { addPopup } = usePopup() + const [showFontSettingModal, setShowFontSettingModal] = useState(false) const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false) - const dimensionLineSettingProps = { - isShow: showDimensionLineSettingModal, - setIsShow: setShowDimensionLineSettingModal, - pos: { - x: -515, - y: -214, - }, - } // 데이터를 최초 한 번만 조회 useEffect(() => { @@ -138,6 +135,21 @@ export default function SecondOption({ setShowFontSettingModal }) { setAdsorptionRange(option.range) } + const handlePopup = (type) => { + const id = uuidv4() + + switch (type) { + case 'dimensionLine': + addPopup(id, 2, ) + break + case 'font1': //문자 글꼴변경 + case 'font2': //흐름 방향 글꼴 변경 + case 'font3': //치수 글꼴변경 + case 'font4': //회로번호 글꼴변경 + addPopup(id, 2, ) + } + } + return ( <>
@@ -145,7 +157,7 @@ export default function SecondOption({ setShowFontSettingModal }) {
{settingModalSecondOptions && settingModalSecondOptions.option3.map((item) => ( - ))} @@ -163,7 +175,8 @@ export default function SecondOption({ setShowFontSettingModal }) { ))}
-
- ) } diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index 98542c36..c5496f45 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -8,24 +8,26 @@ import { useMessage } from '@/hooks/useMessage' import GridOption from '@/components/floor-plan/modal/setting01/GridOption' import { canGridOptionSeletor } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' +import { usePopup } from '@/hooks/usePopup' export default function SettingModal01(props) { - const { setShowCanvasSettingModal, setShowDotLineGridModal, setShowFontSettingModal } = props + const { setShowDotLineGridModal, setShowFontSettingModal, id } = props + console.log(props) const [buttonAct, setButtonAct] = useState(1) const { getMessage } = useMessage() const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor) - + const { addPopup, closePopup } = usePopup() const handleBtnClick = (num) => { setButtonAct(num) } return ( <> - +

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

-
@@ -45,7 +47,7 @@ export default function SettingModal01(props) { )}
{buttonAct === 1 && } - {buttonAct === 2 && } + {buttonAct === 2 && } {buttonAct === 3 && }
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index a17cc22e..667e90c8 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -1,19 +1,22 @@ import WithDraggable from '@/components/common/draggable/withDraggable' +import { usePopup } from '@/hooks/usePopup' export default function DimensionLineSetting(props) { - const { isShow, setIsShow, pos = { x: 800, y: -950 }, setShowFontSettingModal, setShowColorPickerModal } = props + const { id, pos = { x: 970, y: -815 }, setShowColorPickerModal } = props + console.log(props) + const { closePopup } = usePopup() return ( - +

寸法線 設定

- +
- +
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js index 8a1fa876..f62fd6c5 100644 --- a/src/hooks/usePopup.js +++ b/src/hooks/usePopup.js @@ -1,20 +1,32 @@ import { useRecoilState } from 'recoil' import { popupState } from '@/store/popupAtom' -import { v4 as uuidv4 } from 'uuid' import { useEffect } from 'react' export function usePopup() { const [popup, setPopup] = useRecoilState(popupState) + useEffect(() => { console.log(popup) }, [popup]) - const addPopup = (component) => { - setPopup({ children: [...popup.children, { id: uuidv4(), component: component }] }) + const addPopup = (id, depth, component) => { + setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] }) } const closePopup = (id) => { - setPopup({ children: popup.children.filter((child) => child.id !== id) }) + setPopup({ children: [...popup.children.filter((child) => child.id !== id)] }) + } + + const closeAll = () => { + setPopup({ children: [] }) + } + + const closePrevPopup = () => { + setPopup({ children: [...popup.children.slice(popup.children.length - 1)] }) + } + + const filterDepth = (depth) => { + return [...popup.children.filter((child) => child.depth !== depth)] } return { @@ -22,5 +34,6 @@ export function usePopup() { setPopup, addPopup, closePopup, + closeAll, } } From 93ee8c14d9cfd45bc8acbab328b6b68e220b7cd2 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 21 Oct 2024 14:13:43 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=EA=B8=80=EA=BC=B4=20=EB=B0=8F=20=EB=8F=84?= =?UTF-8?q?=EB=A9=B4=20=ED=81=AC=EA=B8=B0=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/common/select_del.svg | 4 + .../common/color-picker/ColorPickerModal.jsx | 5 +- src/components/common/font/FontSetting.jsx | 89 ++++++++-- .../common/popupManager/PopupManager.jsx | 3 +- .../floor-plan/modal/setting01/GridOption.jsx | 16 +- .../modal/setting01/SecondOption.jsx | 30 +++- .../modal/setting01/SettingModal01.jsx | 4 +- .../dimensionLine/DimensionLineSetting.jsx | 152 ++++++++++++++++-- src/locales/ja.json | 4 + src/locales/ko.json | 4 + 10 files changed, 265 insertions(+), 46 deletions(-) create mode 100644 public/static/images/common/select_del.svg diff --git a/public/static/images/common/select_del.svg b/public/static/images/common/select_del.svg new file mode 100644 index 00000000..2376f16b --- /dev/null +++ b/public/static/images/common/select_del.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 3e4997b6..fe16896f 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -10,13 +10,14 @@ export default function ColorPickerModal(props) { const [originColor, setOriginColor] = useState(color) const { closePopup } = usePopup() + console.log(props) useEffect(() => { setOriginColor(color) }, [isShow]) - + return ( -
+

{getMessage('modal.color.picker.title')}

見る
- Aaあぁアァ + + Aaあぁアァ +
ントです。プリンタと画面 でも同じフォントを使用します.
- +
diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx index cc6ce224..aa4b6cae 100644 --- a/src/components/common/popupManager/PopupManager.jsx +++ b/src/components/common/popupManager/PopupManager.jsx @@ -1,8 +1,9 @@ 'use client' import { useRecoilState } from 'recoil' import { popupState } from '@/store/popupAtom' +import { Fragment } from 'react' export default function PopupManager() { const [popup, setPopup] = useRecoilState(popupState) - return <>{popup.children?.map((child) => child.component)} + return popup.children?.map((child) => {child.component}) } diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index 9b5e131e..ca8e4f92 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -11,7 +11,7 @@ import { usePopup } from '@/hooks/usePopup' import { v4 as uuidv4 } from 'uuid' import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid' -export default function GridOption(props) { +export default function GridOption() { const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState) const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState) const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) @@ -21,7 +21,8 @@ export default function GridOption(props) { const [color, setColor] = useColor(gridColor) const [showColorPickerModal, setShowColorPickerModal] = useState(false) const [showDotLineGridModal, setShowDotLineGridModal] = useState(false) - const { addPopup } = usePopup() + const { addPopup, closePopup } = usePopup() + let [colorId, dotLineId] = '' useEffect(() => { console.log('GridOption useEffect 실행') @@ -36,6 +37,8 @@ export default function GridOption(props) { }, [showColorPickerModal]) useEffect(() => { + colorId = uuidv4() + dotLineId = uuidv4() return () => { setSettingModalGridOptions((prev) => { const newSettingOptions = [...prev] @@ -47,7 +50,7 @@ export default function GridOption(props) { const onClickOption = (option) => { const newGridOptions = [...gridOptions] - const id = uuidv4() + newGridOptions.map((item) => { if (item.id === option.id) { item.selected = !item.selected @@ -65,9 +68,10 @@ export default function GridOption(props) { // 점.선 그리드 if (option.selected) { setShowDotLineGridModal(true) - addPopup(id, 2, ) + addPopup(dotLineId, 2, ) } else { setShowDotLineGridModal(false) + closePopup(dotLineId) } } @@ -79,12 +83,12 @@ export default function GridOption(props) { if (option.id === 4) { // 그리드 색 설정 - console.log(option) if (option.selected) { setShowColorPickerModal(true) - addPopup(id, 2, ) + addPopup(colorId, 2, ) } else { setShowColorPickerModal(false) + closePopup(colorId) } } diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index a4123fe3..0efb2aab 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -134,19 +134,43 @@ export default function SecondOption() { } setAdsorptionRange(option.range) } + const dimensionId = uuidv4() + const fontId = uuidv4() + const [pixel, setPixel] = useState(1) + const [color, setColor] = useState('#FF0000') + const [font, setFont] = useState(null) + const [fontSize, setFontSize] = useState('#FF0000') + const [fontColor, setFontColor] = useState('#FF0000') + + const dimensionProps = { + color, + setColor, + pixel, + setPixel, + font, + setFont, + fontSize, + setFontSize, + fontColor, + setFontColor, + id: dimensionId, + isShow: showDimensionLineSettingModal, + setIsShow: setShowDimensionLineSettingModal, + } const handlePopup = (type) => { const id = uuidv4() switch (type) { case 'dimensionLine': - addPopup(id, 2, ) + setShowDimensionLineSettingModal(true) + addPopup(dimensionId, 2, ) break case 'font1': //문자 글꼴변경 case 'font2': //흐름 방향 글꼴 변경 case 'font3': //치수 글꼴변경 case 'font4': //회로번호 글꼴변경 - addPopup(id, 2, ) + addPopup(fontId, 2, ) } } @@ -176,7 +200,7 @@ export default function SecondOption() {
{/*
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 667e90c8..0f532ae9 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -1,51 +1,171 @@ import WithDraggable from '@/components/common/draggable/withDraggable' import { usePopup } from '@/hooks/usePopup' - +import { v4 as uuidv4 } from 'uuid' +import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal' +import { useEffect, useState } from 'react' +import FontSetting from '@/components/common/font/FontSetting' +import QSelectBox from '@/components/common/select/QSelectBox' +import { useMessage } from '@/hooks/useMessage' +/* + color: 치수선 색 + fontColor: 글꼴 색 + fontSize: 치수선 치수 색 + pixel: 치수선 두깨 +*/ export default function DimensionLineSetting(props) { - const { id, pos = { x: 970, y: -815 }, setShowColorPickerModal } = props - console.log(props) - const { closePopup } = usePopup() + const { + color, + setColor, + font, + setFont, + fontColor, + setFontColor, + fontSize, + setFontSize, + pixel, + setPixel, + setIsShow, + id, + pos = { x: 985, y: 180 }, + } = props + const { addPopup, closePopup } = usePopup() + const pixels = Array.from({ length: 5 }).map((_, index) => { + return { name: index + 1, value: index + 1 } + }) + const [originColor, setOriginColor] = useState(color) + const [originFont, setOriginFont] = useState(font) + const [originFontColor, setOriginFontColor] = useState(fontColor) + const [originFontSize, setOriginFontSize] = useState(fontSize) + const [originPixel, setOriginPixel] = useState(pixel) + const fontModalId = uuidv4() + const colorModalId = uuidv4() + const [showColorPickerModal, setShowColorPickerModal] = useState(false) + const [showFontModal, setShowFontModal] = useState(false) + const { getMessage } = useMessage() + const colorPickerProps = { + isShow: showColorPickerModal, + setIsShow: setShowColorPickerModal, + color: originColor, + setColor: setOriginColor, + id: colorModalId, + pos: { + x: 480, + y: -815, + }, + } + + const fontProps = { + isShow: showFontModal, + setIsShow: setShowFontModal, + color: originColor, + setColor: setOriginColor, + font: originFont, + setFont: setOriginFont, + fontColor: 'black', + setFontColor: setOriginFontColor, + fontSize: originFontSize, + setFontSize: setOriginFontSize, + id: fontModalId, + pos: { + x: 480, + y: -815, + }, + } + const popupHandle = (type) => { + switch (type) { + case 'color': + closePopup(fontModalId) + addPopup(colorModalId, 3, ) + break + case 'font': + closePopup(colorModalId) + addPopup(fontModalId, 3, ) + break + } + } + + useEffect(() => { + console.log(pixel) + if (pixel) { + setOriginPixel(pixels?.filter((data) => data.value === pixel)[0]) + } + }, []) + return (
-

寸法線 設定

-
- +
- 寸法線の線太さ -
- + {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')} +
+ setOriginPixel(e)} />
pixel
- 寸法線の線の色 - + {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')} +
-
見る
+
{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}
- + 9,999 - +
- +
diff --git a/src/locales/ja.json b/src/locales/ja.json index 23e3b45c..92c592c8 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -156,6 +156,7 @@ "plan.menu.simulation.pdf": "PDF", "plan.mode.vertical.horizontal": "垂直水平モード", "plan.mode.free": "프리 모드(JA)", + "modal.font.setting": "フォント設定", "modal.canvas.setting": "Canvas設定", "modal.canvas.setting.display": "ディスプレイ設定", "modal.canvas.setting.font.plan": " フォントと図面サイズの設定", @@ -198,6 +199,9 @@ "modal.canvas.setting.font.plan.absorption.medium": "中", "modal.canvas.setting.font.plan.absorption.large": "ティーン", "modal.canvas.setting.font.plan.absorption.dimension.line": "寸法線の設定", + "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "寸法線の線太さ", + "modal.canvas.setting.font.plan.absorption.dimension.line.color": "寸法線の線の色", + "modal.canvas.setting.font.plan.absorption.dimension.display": "見る", "modal.canvas.setting.font.plan.absorption.plan.size.setting": "図面サイズの設定", "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。", "modal.canvas.setting.first.option.alloc": "할당표시", diff --git a/src/locales/ko.json b/src/locales/ko.json index 1ef504b2..bcc618fb 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -160,6 +160,7 @@ "plan.menu.simulation.pdf": "PDF", "plan.mode.vertical.horizontal": "수직 수평 모드", "plan.mode.free": "프리 모드", + "modal.font.setting": "글꼴 설정", "modal.canvas.setting": "Canvas 설정", "modal.canvas.setting.display": "디스플레이 설정", "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정", @@ -203,6 +204,9 @@ "modal.canvas.setting.font.plan.absorption.medium": "중", "modal.canvas.setting.font.plan.absorption.large": "대", "modal.canvas.setting.font.plan.absorption.dimension.line": "치수선 설정", + "modal.canvas.setting.font.plan.absorption.dimension.line.font.size": "치수선의 굵기", + "modal.canvas.setting.font.plan.absorption.dimension.line.color": "치수선의 색", + "modal.canvas.setting.font.plan.absorption.dimension.display": "보기", "modal.canvas.setting.font.plan.absorption.plan.size.setting": "도면크기 설정", "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.", "modal.canvas.setting.first.option.alloc": "할당표시", From 676a0bdc91640c7544ccfd24ed3ce53ef4c9998c Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 21 Oct 2024 14:13:54 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/_contents.scss | 96 ++++++++++++++++++++++++++++++--------- src/styles/_main.scss | 26 +++++------ src/styles/_modal.scss | 6 ++- src/styles/_reset.scss | 84 ++++++++++++++++++++++++++++++++++ 4 files changed, 175 insertions(+), 37 deletions(-) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 37233d13..ee823bab 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,29 +1,32 @@ // CanvasPage -.canvas-wrap{ - height: calc(100vh - 47px); - display: flex; - flex-direction: column; - .canvas-content{ - flex: 1 1 auto; - .canvas-layout{ - height: 100%; - } - } - &.sub-wrap{ - overflow: hidden; - .canvas-content{ - height: calc(100% - 47px); - } - } -} +// .canvas-wrap{ +// height: calc(100vh - 47px); +// display: flex; +// flex-direction: column; +// .canvas-content{ +// flex: 1 1 auto; +// .canvas-layout{ +// height: 100%; +// } +// } +// &.sub-wrap{ +// overflow: hidden; +// .canvas-content{ +// height: calc(100% - 47px); +// } +// } +// } // CanvasMenu .canvas-menu-wrap{ - position: relative; + position: fixed; + top: 46px; + left: 0; display: block; width: 100%; padding-bottom: 0; background-color: #383838; transition: padding .17s ease-in-out; + z-index: 999; .canvas-menu-inner{ position: relative; display: flex; @@ -302,12 +305,34 @@ } // canvas-layout +.canvas-content{ + padding-top: 46.8px; + transition: all .17s ease-in-out; + .canvas-frame{ + height: 86.3vh; + } + &.active{ + padding-top: calc(46.8px + 50px); + .canvas-frame{ + height: 81vh; + } + } +} .canvas-layout{ + padding-top: 37px; .canvas-page-list{ + position: fixed; + top: 92.8px; + left: 0; display: flex; background-color: #1C1C1C; border-top: 1px solid #000; width: 100%; + transition: all .17s ease-in-out; + z-index: 999; + &.active{ + top: calc(92.8px + 50px); + } .canvas-plane-wrap{ display: flex; align-items: center; @@ -383,9 +408,24 @@ .canvas-frame{ position: relative; - height: calc(100% - 36.5px); - background-color: #fff; + // height: calc(100% - 36.5px); + background-color: #F4F4F7; + overflow: auto; + transition: all .17s ease-in-out; + // &::-webkit-scrollbar { + // width: 10px; + // height: 10px; + // background-color: #fff; + // } + // &::-webkit-scrollbar-thumb { + // background-color: #C1CCD7; + // border-radius: 30px; + // } + // &::-webkit-scrollbar-track { + // background-color: #fff; + // } canvas{ + background-color: #fff; position: absolute; top: 0; left: 0; @@ -514,8 +554,6 @@ &.estimate{ display: flex; flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; padding-top: 0; .sub-content-inner{ flex: 1; @@ -1200,4 +1238,18 @@ background-color: #F4F4F7; } } +} + +.file-down-nodata{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 148px; + padding: 24px; + border-radius: 4px; + border: 1px solid #E5E5E5; + font-size: 16px; + font-weight: 500; + color: #344356; } \ No newline at end of file diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 37170a8b..ea9b8833 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -112,8 +112,8 @@ border-radius: 6px; background: #FFF; box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - &.item01{flex: 1; max-height: 400px;} - &.item02{flex: none; width: 451px; max-height: 400px;} + &.item01{flex: 1; height: 400px;} + &.item02{flex: none; width: 451px; height: 400px;} &.item03{flex: 1;} &.item04{flex: none; width: 351px;} &.item05{flex: none; width: 451px;} @@ -566,17 +566,17 @@ transition: background .05s ease-in-out; } } - } - input[type=checkbox]:checked + label::before{ - border-color: #A8B6C7; - background-color: #A8B6C7; - } - input[type=checkbox]:checked + label::after{ - border-color: #fff; - width: 7px; - height: 11px; - top: -2px; - left: 1px; + input[type=checkbox]:checked + label::before{ + border-color: #A8B6C7; + background-color: #A8B6C7; + } + input[type=checkbox]:checked + label::after{ + border-color: #fff; + width: 7px; + height: 11px; + top: -2px; + left: 1px; + } } } diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f0966b04..3901ba0f 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -26,6 +26,8 @@ $alert-color: #101010; .modal-pop-wrap{ position: fixed; + top: 0; + left: 0; width: 100%; height: -webkit-fit-content; height: -moz-fit-content; @@ -453,7 +455,7 @@ $alert-color: #101010; gap: 20px; } .select-wrap{ - div{ + .sort-select{ width: 100%; } } @@ -1624,7 +1626,7 @@ $alert-color: #101010; align-items: center; justify-content: center; width: 100%; - height: 80px; + min-height: 80px; background-color: #fff; } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index d345f643..d483c7b7 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -804,4 +804,88 @@ input[type=text]{ background-size: 14px 15px; cursor: pointer; } +} + +// react select +.react-select-custom{ + width: 100%; + .custom__control{ + height: 30px; + min-height: unset; + border-radius: 2px; + border-color: #EEE; + background-color: #fff; + &:hover{ + border-color: #EEE; + } + } + .custom__control--is-focused{ + border-color: #EEE; + box-shadow: unset; + &:hover{ + border-color: #EEE; + + } + } + .custom__value-container { + height: 100%; + padding: 0 10px; + } + .custom__placeholder, + .custom__single-value{ + margin: 0; + } + .custom__single-value{ + font-size: 13px; + color: #45576F; + font-weight: 400; + } + .custom__placeholder{ + font-size: 13px; + color: #bbbbbb; + font-weight: 400; + } + .custom__indicator{ + padding: 0; + svg{ + display: none; + } + } + .custom__clear-indicator{ + width: 30px; + height: 100%; + background: url(../../public/static/images/common/select_del.svg) no-repeat center; + background-size: 8px 8px; + } + .custom__dropdown-indicator{ + width: 30px; + height: 100%; + background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center; + } + + .custom__menu { + margin: 1px 0; + border-radius: 2px; + overflow: hidden; + } + .custom__menu-list { + padding: 0; + } + .custom__option{ + font-size: 13px; + padding: 7px 10px; + color: #45576F; + } + .custom__option--is-selected{ + color: #fff; + } + // disable + &.custom--is-disabled{ + .custom__control{ + background-color: #FAFAFA ; + } + .custom__single-value{ + color: #999999; + } + } } \ No newline at end of file From 82009ef28152643721be485f94e451bad893ed03 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 21 Oct 2024 16:27:19 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasFrame.jsx | 11 +++++------ src/components/floor-plan/CanvasMenu.jsx | 14 ++++++++++++++ src/components/floor-plan/FloorPlan.jsx | 4 ++-- src/components/floor-plan/modal/Slope.jsx | 2 +- .../modal/auxiliary/AuxiliaryDrawing.jsx | 2 +- .../floor-plan/modal/basic/BasicSetting.jsx | 2 +- .../circuitTrestle/CircuitTrestleSetting.jsx | 2 +- .../modal/eavesGable/EavesGableEdit.jsx | 3 +-- .../modal/movement/MovementSetting.jsx | 2 +- .../floor-plan/modal/object/ObjectSetting.jsx | 5 ++--- .../modal/outerlinesetting/PropertiesSetting.jsx | 2 +- .../modal/outerlinesetting/WallLineSetting.jsx | 2 +- .../placementShape/PlacementShapeDrawing.jsx | 3 +-- .../placementShape/PlacementShapeSetting.jsx | 16 +++++++++++++--- .../placementSurface/PlacementSurfaceSetting.jsx | 4 ++-- .../roofAllocation/RoofAllocationSetting.jsx | 3 +-- .../roofShape/RoofShapePassivitySetting.jsx | 2 +- .../modal/roofShape/RoofShapeSetting.jsx | 13 +++++++++++-- .../wallLineOffset/WallLineOffsetSetting.jsx | 3 +-- 19 files changed, 61 insertions(+), 34 deletions(-) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index d3cc9684..b7d9a5da 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -4,14 +4,15 @@ import { useEffect, useRef } from 'react' import { useCanvas } from '@/hooks/useCanvas' import { useEvent } from '@/hooks/useEvent' -import QContextMenu from '@/components/common/context-menu/QContextMenu' import { useContextMenu } from '@/hooks/useContextMenu' import { useRecoilValue } from 'recoil' import { currentObjectState } from '@/store/canvasAtom' import { useCanvasEvent } from '@/hooks/useCanvasEvent' +import QContextMenu from '@/components/common/context-menu/QContextMenu' export default function CanvasFrame({ plan }) { const canvasRef = useRef(null) + console.log(canvasRef) const { canvas } = useCanvas('canvas') const { handleZoomClear } = useCanvasEvent() const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({ @@ -42,10 +43,8 @@ export default function CanvasFrame({ plan }) { const onClickContextMenu = (index) => {} return ( -
-
- -
+
+ {contextMenu.map((menus, index) => ( @@ -62,7 +61,7 @@ export default function CanvasFrame({ plan }) { > {menu.name} - ))} + ))} ))} diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 1836f4df..54c82ce8 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -23,6 +23,7 @@ import { useCanvasEvent } from '@/hooks/useCanvasEvent' import { popupState } from '@/store/popupAtom' import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' import { usePopup } from '@/hooks/usePopup' +import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom' const canvasMenus = [ { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, @@ -79,6 +80,19 @@ export default function CanvasMenu(props) { const { swalFire } = useSwal() const [popup, setPopup] = useRecoilState(popupState) const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] + useEffect(() => { + console.log(canvas) + if (canvas) { + const circle = new fabric.Circle({ + left: 300, + top: 300, + radius: 5, + stroke: 'black', + }) + canvas.add(circle) + canvas.renderAll() + } + }, []) const onClickNav = (menu) => { setMenuNumber(menu.index) setCurrentMenu(menu.title) diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index b115ca48..21b90616 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -128,8 +128,8 @@ export default function FloorPlan() { <>
-
- +
+ {showOutlineModal && } {showPropertiesSettingModal && } {showPlaceShapeModal && } diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx index ba9ede2a..4e6d63aa 100644 --- a/src/components/floor-plan/modal/Slope.jsx +++ b/src/components/floor-plan/modal/Slope.jsx @@ -9,7 +9,7 @@ export default function Slope({ setShowSlopeSettingModal }) { const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState) const inputRef = useRef() return ( - +

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

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index 2aa5cd84..8ce885c4 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -121,7 +121,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) { setType(button.type) } return ( - +

{getMessage('modal.auxiliary.drawing')}

diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 555cdfcb..94ad7317 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -14,7 +14,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) { const [tabNum, setTabNum] = useState(1) const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) return ( - +

{getMessage('plan.menu.module.circuit.setting.default')}

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index f165bde0..6daf04b2 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -14,7 +14,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa setCircuitAllocationType, } return ( - +

{getMessage('modal.circuit.trestle.setting')}

diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx index bab1e696..b19f435e 100644 --- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -1,6 +1,5 @@ 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' @@ -35,7 +34,7 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) { } return ( - +

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

diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx index 569249d6..2e6bd7ec 100644 --- a/src/components/floor-plan/modal/movement/MovementSetting.jsx +++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx @@ -13,7 +13,7 @@ export default function MovementSetting({ setShowMovementModal }) { ] return ( - +

{getMessage('plan.menu.roof.cover.movement.shape.updown')}

diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx index 764535e3..d028e9a7 100644 --- a/src/components/floor-plan/modal/object/ObjectSetting.jsx +++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx @@ -1,9 +1,8 @@ 'use client' -import { useState, useRef, useEffect } from 'react' +import { useEffect, useRef, useState } from 'react' import { useRecoilValue } from 'recoil' import { useMessage } from '@/hooks/useMessage' -import { useEvent } from '@/hooks/useEvent' import { canvasState } from '@/store/canvasAtom' import { useSwal } from '@/hooks/useSwal' import { useObjectBatch } from '@/hooks/object/useObjectBatch' @@ -74,7 +73,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) { { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') }, ] return ( - +

{getMessage('plan.menu.placement.surface.object')}

diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx index d26b2ef3..a1e848be 100644 --- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx @@ -9,7 +9,7 @@ export default function PropertiesSetting(props) { const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal) return ( - +

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

diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx index 975a582a..84e59da4 100644 --- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx @@ -109,7 +109,7 @@ export default function WallLineSetting(props) { } return ( - +

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

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx index 0d2c301c..9374dbf9 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx @@ -5,7 +5,6 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle' import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch' import Angle from '@/components/floor-plan/modal/lineTypes/Angle' import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal' -import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing' @@ -120,7 +119,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) setType(button.type) } return ( - +

{getMessage('plan.menu.placement.surface.drawing')}

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 55cfcb6b..bc7ba2b7 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -1,7 +1,6 @@ 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 { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react' import { useRecoilState } from 'recoil' import { Fragment, useEffect, useState } from 'react' import { canvasSettingState } from '@/store/canvasAtom' @@ -18,7 +17,18 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { const [basicSetting, setBasicSettings] = useState({ roofSizeSet: 1, roofAngleSet: 'slope', - roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }], + roofs: [ + { + roofApply: true, + roofSeq: 1, + roofType: 1, + roofWidth: 200, + roofHeight: 200, + roofHajebichi: 200, + roofGap: 0, + roofLayout: 'parallel', + }, + ], }) const { getMessage } = useMessage() @@ -159,7 +169,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { } return ( - +

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

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index e667667e..90e05dbf 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -1,6 +1,6 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useEffect, useState, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import Image from 'next/image' import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface' import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch' @@ -239,7 +239,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting }, []) return ( - +

{getMessage('plan.menu.placement.surface.arrangement')}

diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 72599bbe..52ee2e3f 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -1,6 +1,5 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' import QSelectBox from '@/components/common/select/QSelectBox' import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting' @@ -10,7 +9,7 @@ export default function RoofAllocationSetting({ setShowRoofAllocationSettingModa useRoofAllocationSetting(setShowRoofAllocationSettingModal) return ( - +

{getMessage('plan.menu.estimate.roof.alloc')}

diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx index ec1684a6..9e9dc93f 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet } return ( - +

{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}

diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx index 60355848..d92ed807 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx @@ -67,10 +67,19 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) { handleRollBack, } - const directionProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth } + const directionProps = { + pitch, + setPitch, + eavesOffset, + setEavesOffset, + gableOffset, + setGableOffset, + shedWidth, + setShedWidth, + } return ( - +

{getMessage('modal.roof.shape.setting')}

diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx index 7e5230b1..1e421440 100644 --- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx @@ -1,6 +1,5 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine' import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset' import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting' @@ -38,7 +37,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa } return ( - +

{getMessage('modal.wallline.offset.setting')}