From 8e47b69266cbd322d020ea797fb2bf754c60bce4 Mon Sep 17 00:00:00 2001 From: basssy Date: Tue, 26 Nov 2024 15:05:50 +0900 Subject: [PATCH 01/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 39 +++++++++++-------- .../estimate/useEstimateController.js | 3 +- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 1846b2d5..94ad68ae 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -447,7 +447,6 @@ export default function Estimate({ params }) { }) //아이템들 중 조건에 맞는애들 뽑아서 상단 공급가액 부가세 총액 수정 setItemChangeYn(true) - } else { } } @@ -471,10 +470,15 @@ export default function Estimate({ params }) { updateList = estimateContextState.itemList.map((item) => { if (item.dispOrder === dispOrder) { return { ...item, ...updates } + } else if (item.paDispOrder === dispOrder) { + return { ...item, ...updates, amount: (item.bomAmount * amount?.replaceAll(',', '')).toLocaleString(), saleTotPrice: '0' } } else { return item } }) + + console.log('updateList::', updateList) + // return setEstimateContextState({ itemList: updateList, }) @@ -556,7 +560,6 @@ export default function Estimate({ params }) { return { ...item, ...updates } } else if (item.paDispOrder === dispOrder) { return { ...item, delFlg: '0' } - // return { ...item, delFlg: '1' } } else { return item } @@ -569,14 +572,16 @@ export default function Estimate({ params }) { bomItem.dispOrder = (index + 1 + maxItemDispOrder).toString() bomItem.paDispOrder = dispOrder bomItem.salePrice = '0' - //unitPrice는?? bomItem.saleTotPrice = '0' + bomItem.unitPrice = '0' + bomItem.amount = bomItem.bomAmount } else { bomItem.dispOrder = (index + 1 + Number(dispOrder)).toString() bomItem.paDispOrder = dispOrder bomItem.salePrice = '0' - //unitPrice는?? bomItem.saleTotPrice = '0' + bomItem.unitPrice = '0' + bomItem.amount = bomItem.bomAmount } bomItem.delFlg = '0' @@ -620,6 +625,8 @@ export default function Estimate({ params }) { } }) + console.log('updateList::', updateList) + let delCnt = 0 updateList.map((item) => { if (item.delFlg === '1') { @@ -696,15 +703,16 @@ export default function Estimate({ params }) { estimateContextState.itemList.map((item) => { if (item.delFlg === '0') { let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) - let price = Number(item.saleTotPrice?.replaceAll(',', '')) + console.log('amount::', amount) let salePrice = Number(item.salePrice?.replaceAll(',', '')) + let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', '')) if (isNaN(amount)) { amount = 0 } - if (isNaN(price)) { - price = 0 + if (isNaN(saleTotPrice)) { + saleTotPrice = 0 } if (isNaN(salePrice)) { @@ -715,9 +723,7 @@ export default function Estimate({ params }) { const volKw = (item.pnowW * amount) / 1000 totVolKw += volKw } - - // const price - supplyPrice += price + // const saleTotPrice totAmount += amount if (item.pkgMaterialFlg === '1') { const pkgPrice = amount * salePrice @@ -725,6 +731,7 @@ export default function Estimate({ params }) { //YJSS는 PKG제외상품들만(1) 모아서 수량 * 단가를 공급가액(supplyPrice)에 추가로 더해줌 addSupplyPrice += pkgPrice } + if (!item.paDispOrder) { //paDispOrder if (item.pkgMaterialFlg === '0') { @@ -735,7 +742,7 @@ export default function Estimate({ params }) { } }) - supplyPrice += addSupplyPrice + supplyPrice = addSupplyPrice + Number(estimateContextState.pkgTotPrice) vatPrice = supplyPrice * 0.1 totPrice = supplyPrice + vatPrice setEstimateContextState({ @@ -1145,15 +1152,15 @@ export default function Estimate({ params }) {
{getMessage('estimate.detail.sepcialEstimateProductInfo.supplyPrice')}
-
{convertNumberToPriceDecimalToFixed(estimateContextState?.supplyPrice, 2)}
+
{convertNumberToPriceDecimal(estimateContextState?.supplyPrice)}
{getMessage('estimate.detail.sepcialEstimateProductInfo.vatPrice')}
-
{convertNumberToPriceDecimalToFixed(estimateContextState?.vatPrice, 2)}
+
{convertNumberToPriceDecimal(estimateContextState?.vatPrice)}
{getMessage('estimate.detail.sepcialEstimateProductInfo.totPrice')}
-
{convertNumberToPriceDecimalToFixed(estimateContextState?.totPrice, 2)}
+
{convertNumberToPriceDecimal(estimateContextState?.totPrice)}
@@ -1189,7 +1196,7 @@ export default function Estimate({ params }) { {getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')} {convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)} {getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')} - {convertNumberToPriceDecimalToFixed(estimateContextState?.pkgTotPrice, 2)} + {convertNumberToPriceDecimal(estimateContextState?.pkgTotPrice)} @@ -1405,7 +1412,7 @@ export default function Estimate({ params }) { */} - {convertNumberToPriceDecimalToFixed(item?.saleTotPrice?.replaceAll(',', ''), 2)} + {convertNumberToPriceDecimal(item?.saleTotPrice?.replaceAll(',', ''))} {/* {item?.showSaleTotPrice === '0' ? ( ) : ( diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index c5b8537c..0bf4bad7 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -80,7 +80,7 @@ export const useEstimateController = (planNo) => { itemId: '', //제품번호 itemNo: '', itemName: '', //형명 - amount: '0', //수량 + amount: '', //수량 unitPrice: '0', unit: '', //단위 salePrice: '', //단가 @@ -88,6 +88,7 @@ export const useEstimateController = (planNo) => { itemChangeFlg: '1', //추가시 체인지플래그 1로 partAdd: '1', //NEW 체인지 플래그 delFlg: '0', //삭제 플래그 0 삭제하면 1 + // addFlg: '1', //제품추가해서 추가된건지 구분값 }, ], }) From e6b8c1a5eded9d09b41afa249a98459b1a091b13 Mon Sep 17 00:00:00 2001 From: basssy Date: Tue, 26 Nov 2024 15:37:12 +0900 Subject: [PATCH 02/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 8 +------- src/hooks/floorPlan/estimate/useEstimateController.js | 3 +-- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 94ad68ae..709c3448 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -477,8 +477,6 @@ export default function Estimate({ params }) { } }) - console.log('updateList::', updateList) - // return setEstimateContextState({ itemList: updateList, }) @@ -625,8 +623,6 @@ export default function Estimate({ params }) { } }) - console.log('updateList::', updateList) - let delCnt = 0 updateList.map((item) => { if (item.delFlg === '1') { @@ -655,11 +651,10 @@ export default function Estimate({ params }) { let totPrice = 0 let addSupplyPrice = 0 if (estimateContextState.estimateType === 'YJOD') { - console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList) - estimateContextState.itemList.sort((a, b) => { return a.dispOrder - b.dispOrder }) + console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList) estimateContextState.itemList.map((item) => { //delete item.showSalePrice @@ -703,7 +698,6 @@ export default function Estimate({ params }) { estimateContextState.itemList.map((item) => { if (item.delFlg === '0') { let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) - console.log('amount::', amount) let salePrice = Number(item.salePrice?.replaceAll(',', '')) let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', '')) diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 0bf4bad7..04dcd477 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -88,7 +88,6 @@ export const useEstimateController = (planNo) => { itemChangeFlg: '1', //추가시 체인지플래그 1로 partAdd: '1', //NEW 체인지 플래그 delFlg: '0', //삭제 플래그 0 삭제하면 1 - // addFlg: '1', //제품추가해서 추가된건지 구분값 }, ], }) @@ -174,7 +173,7 @@ export const useEstimateController = (planNo) => { //첨부파일저장끝 //제품라인 추가했는데 아이템 안고르고 저장하면itemId=''은 날리고 나머지 저장하기 - estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '') + estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '' && item.delFlg === '0') let delCnt = 0 estimateData.itemList.map((item) => { From db70b0aba326aa831aea1bfe3131effbafd2434a Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Tue, 26 Nov 2024 15:47:02 +0900 Subject: [PATCH 03/14] =?UTF-8?q?fix:=20useEvent=20context=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useContext로 전역으로 옮김 --- src/app/floor-plan/EventProvider.js | 34 +++++++++++++++++++ src/app/floor-plan/layout.js | 13 ++++--- .../common/context-menu/QContextMenu.jsx | 6 ++-- src/components/floor-plan/CanvasFrame.jsx | 7 ++-- src/components/floor-plan/CanvasMenu.jsx | 4 ++- .../floor-plan/modal/basic/BasicSetting.jsx | 6 ++-- .../lineProperty/LinePropertySetting.jsx | 6 ++-- .../floor-plan/modal/object/SizeSetting.jsx | 12 ++++--- .../modal/wallLineOffset/type/Offset.jsx | 6 ++-- .../modal/wallLineOffset/type/WallLine.jsx | 6 ++-- src/hooks/common/useCommonUtils.js | 10 +++--- src/hooks/module/useModuleBasicSetting.js | 7 ++-- src/hooks/object/useObjectBatch.js | 6 ++-- src/hooks/roofcover/useAuxiliaryDrawing.js | 6 ++-- src/hooks/roofcover/useEavesGableEdit.js | 6 ++-- src/hooks/roofcover/useMovementSetting.js | 6 ++-- src/hooks/roofcover/useOuterLineWall.js | 11 +++++- .../roofcover/useRoofShapePassivitySetting.js | 6 ++-- .../roofcover/useWallLineOffsetSetting.js | 6 ++-- src/hooks/surface/usePlacementShapeDrawing.js | 7 ++-- src/hooks/surface/useSurfaceShapeBatch.js | 5 ++- src/hooks/useEvent.js | 2 +- 22 files changed, 131 insertions(+), 47 deletions(-) create mode 100644 src/app/floor-plan/EventProvider.js diff --git a/src/app/floor-plan/EventProvider.js b/src/app/floor-plan/EventProvider.js new file mode 100644 index 00000000..991b19bb --- /dev/null +++ b/src/app/floor-plan/EventProvider.js @@ -0,0 +1,34 @@ +import { useEvent } from '@/hooks/useEvent' +import { createContext, useState } from 'react' + +export const EventContext = createContext({}) + +const EventProvider = ({ children }) => { + const { + addDocumentEventListener, + addCanvasMouseEventListener, + addTargetMouseEventListener, + removeAllMouseEventListeners, + removeAllDocumentEventListeners, + removeDocumentEvent, + removeMouseEvent, + removeMouseLine, + initEvent, + } = useEvent() + + const [value, setValue] = useState({ + addDocumentEventListener, + addCanvasMouseEventListener, + addTargetMouseEventListener, + removeAllMouseEventListeners, + removeAllDocumentEventListeners, + removeDocumentEvent, + removeMouseEvent, + removeMouseLine, + initEvent, + }) + + return {children} +} + +export default EventProvider diff --git a/src/app/floor-plan/layout.js b/src/app/floor-plan/layout.js index 2a6fb8fd..532a83d6 100644 --- a/src/app/floor-plan/layout.js +++ b/src/app/floor-plan/layout.js @@ -3,17 +3,20 @@ import FloorPlanProvider from './FloorPlanProvider' import FloorPlan from '@/components/floor-plan/FloorPlan' import CanvasLayout from '@/components/floor-plan/CanvasLayout' +import EventProvider from './EventProvider' export default function FloorPlanLayout({ children }) { console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:') return ( <> - - - {children} - - + + + + {children} + + + ) } diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx index f6665930..e7070aec 100644 --- a/src/components/common/context-menu/QContextMenu.jsx +++ b/src/components/common/context-menu/QContextMenu.jsx @@ -1,11 +1,12 @@ 'use client' -import { useEffect } from 'react' +import { useContext, useEffect } from 'react' import '@/styles/contents.scss' import { useRecoilState, useRecoilValue } from 'recoil' import { contextMenuListState, contextMenuState } from '@/store/contextMenu' import { useTempGrid } from '@/hooks/useTempGrid' import { useContextMenu } from '@/hooks/useContextMenu' import { useEvent } from '@/hooks/useEvent' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function QContextMenu(props) { const { contextRef, canvasProps } = props @@ -14,7 +15,8 @@ export default function QContextMenu(props) { const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴 const { tempGridMode, setTempGridMode } = useTempGrid() const { handleKeyup } = useContextMenu() - const { addDocumentEventListener, removeDocumentEvent } = useEvent() + // const { addDocumentEventListener, removeDocumentEvent } = useEvent() + const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext) let contextType = '' diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 9fcd5cfd..d43afc59 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useRef } from 'react' +import { useContext, useEffect, useRef } from 'react' import { useRecoilValue } from 'recoil' @@ -15,6 +15,7 @@ import { MENU } from '@/common/common' import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics' import { totalDisplaySelector } from '@/store/settingAtom' import ImgLoad from '@/components/floor-plan/modal/ImgLoad' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function CanvasFrame() { const canvasRef = useRef(null) @@ -24,7 +25,9 @@ export default function CanvasFrame() { const { contextMenu, handleClick } = useContextMenu() const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans, currentCanvasPlan } = usePlan() const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부 - useEvent() + // useEvent() + // const { initEvent } = useContext(EventContext) + // initEvent() const loadCanvas = () => { if (canvas) { diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index f6f2f481..65849256 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -41,6 +41,7 @@ import EstimateCopyPop from '../estimate/popup/EstimateCopyPop' import { floorPlanObjectState } from '@/store/floorPlanObjectAtom' import { pwrGnrSimTypeState } from '@/store/simulatorAtom' import { useAxios } from '@/hooks/useAxios' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function CanvasMenu(props) { const { menuNumber, setMenuNumber } = props @@ -70,7 +71,8 @@ export default function CanvasMenu(props) { const { getMessage } = useMessage() const { currentCanvasPlan, saveCanvas } = usePlan() const { swalFire } = useSwal() - const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent() + // const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent() + const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext) const commonUtils = useRecoilValue(commonUtilsState) const { commonFunctions } = useCommonUtils() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 6d9f2a42..68bb0a49 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -1,6 +1,6 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import Module from '@/components/floor-plan/modal/basic/step/Module' import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule' import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement' @@ -11,6 +11,7 @@ import { usePopup } from '@/hooks/usePopup' import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' import { useEvent } from '@/hooks/useEvent' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const { getMessage } = useMessage() @@ -18,7 +19,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const [tabNum, setTabNum] = useState(1) const canvasSetting = useRecoilValue(canvasSettingState) const orientationRef = useRef(null) - const { initEvent } = useEvent() + // const { initEvent } = useEvent() + const { initEvent } = useContext(EventContext) const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting() const handleBtnNextStep = () => { if (tabNum === 1) { diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx index ed84751c..789d048c 100644 --- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx +++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx @@ -3,10 +3,11 @@ import { useRecoilValue } from 'recoil' import { contextPopupPositionState } from '@/store/popupAtom' import { useMessage } from '@/hooks/useMessage' import { usePopup } from '@/hooks/usePopup' -import { useState, useEffect } from 'react' +import { useState, useEffect, useContext } from 'react' import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch' import { useEvent } from '@/hooks/useEvent' import { LINE_TYPE } from '@/common/common' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function LinePropertySetting(props) { const contextPopupPosition = useRecoilValue(contextPopupPositionState) @@ -14,7 +15,8 @@ export default function LinePropertySetting(props) { const { getMessage } = useMessage() const { closePopup } = usePopup() const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch() - const { initEvent } = useEvent() + // const { initEvent } = useEvent() + const { initEvent } = useContext(EventContext) const properties = [ { name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES }, diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx index cadfd461..bddc9f07 100644 --- a/src/components/floor-plan/modal/object/SizeSetting.jsx +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -5,11 +5,12 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' import { usePopup } from '@/hooks/usePopup' import { contextPopupPositionState } from '@/store/popupAtom' -import { useRef, useState, useEffect } from 'react' +import { useRef, useState, useEffect, useContext } from 'react' import { useObjectBatch } from '@/hooks/object/useObjectBatch' import { useEvent } from '@/hooks/useEvent' import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common' import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function SizeSetting(props) { const contextPopupPosition = useRecoilValue(contextPopupPositionState) @@ -22,11 +23,12 @@ export default function SizeSetting(props) { const widthRef = useRef(null) const heightRef = useRef(null) - const { initEvent } = useEvent() + // const { initEvent } = useEvent() + // const { initEvent } = useContext(EventContext) - useEffect(() => { - initEvent() - }, []) + // useEffect(() => { + // initEvent() + // }, []) const handleReSizeObject = () => { const width = widthRef.current.value diff --git a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx index 11fcd84f..d3afd459 100644 --- a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx @@ -1,10 +1,12 @@ import { useMessage } from '@/hooks/useMessage' -import { useEffect, useState } from 'react' +import { useContext, useEffect, useState } from 'react' import { useEvent } from '@/hooks/useEvent' +import { EventContext } from '@/app/floor-plan/EventProvider' export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) { const { getMessage } = useMessage() - const { addDocumentEventListener, initEvent } = useEvent() + // const { addDocumentEventListener, initEvent } = useEvent() + const { addDocumentEventListener, initEvent } = useContext(EventContext) useEffect(() => { addDocumentEventListener('keydown', document, keyDown) diff --git a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx index 15ccefa3..c736d397 100644 --- a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx @@ -1,10 +1,12 @@ import { useMessage } from '@/hooks/useMessage' -import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' +import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react' import { useEvent } from '@/hooks/useEvent' +import { EventContext } from '@/app/floor-plan/EventProvider' export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) { const { getMessage } = useMessage() - const { addDocumentEventListener, initEvent } = useEvent() + // const { addDocumentEventListener, initEvent } = useEvent() + const { addDocumentEventListener, initEvent } = useContext(EventContext) const [type, setType] = useState(1) const [arrow1, setArrow1] = useState('up') const [arrow2, setArrow2] = useState('up') diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index 594797bb..5c8fcfee 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -1,4 +1,4 @@ -import { useEffect } from 'react' +import { useContext, useEffect } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import { wordDisplaySelector } from '@/store/settingAtom' import { useEvent } from '@/hooks/useEvent' @@ -9,11 +9,13 @@ import { canvasState } from '@/store/canvasAtom' import { v4 as uuidv4 } from 'uuid' import { usePopup } from '@/hooks/usePopup' import Distance from '@/components/floor-plan/modal/distance/Distance' +import { EventContext } from '@/app/floor-plan/EventProvider' export function useCommonUtils() { const canvas = useRecoilValue(canvasState) const wordDisplay = useRecoilValue(wordDisplaySelector) - const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent() + // const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent() + const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext) const dimensionSettings = useRecoilValue(dimensionLineSettingsState) const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText')) const commonTextFont = useRecoilValue(fontSelector('commonText')) @@ -21,7 +23,7 @@ export function useCommonUtils() { const { addPopup } = usePopup() useEffect(() => { - initEvent() + // initEvent() if (commonUtils.text) { commonTextMode() } else if (commonUtils.dimension) { @@ -37,7 +39,7 @@ export function useCommonUtils() { commonTextKeyEvent() addCanvasMouseEventListener('mouse:down', (event) => { const pointer = canvas?.getPointer(event.e) - + textbox = new fabric.Textbox('', { left: pointer.x, top: pointer.y, diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 500568ac..eb6ac973 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useContext, useEffect, useState } from 'react' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState } from '@/store/canvasAtom' import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util' @@ -11,14 +11,15 @@ import { useEvent } from '@/hooks/useEvent' import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common' import * as turf from '@turf/turf' -import next from 'next' +import { EventContext } from '@/app/floor-plan/EventProvider' export function useModuleBasicSetting() { const canvas = useRecoilValue(canvasState) const roofDisplay = useRecoilValue(roofDisplaySelector) const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState) const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState) - const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent() + // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent() + const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext) let selectedModuleInstSurfaceArray = [] const makeModuleInstArea = () => { diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index 1820599b..2227e5db 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -1,5 +1,5 @@ 'use client' -import { useEffect } from 'react' +import { useContext, useEffect } from 'react' import { useMessage } from '@/hooks/useMessage' import { useRecoilValue } from 'recoil' import { canvasState } from '@/store/canvasAtom' @@ -12,11 +12,13 @@ import { usePolygon } from '@/hooks/usePolygon' import { QPolygon } from '@/components/fabric/QPolygon' import { v4 as uuidv4 } from 'uuid' import { fontSelector } from '@/store/fontAtom' +import { EventContext } from '@/app/floor-plan/EventProvider' export function useObjectBatch({ isHidden, setIsHidden }) { const { getMessage } = useMessage() const canvas = useRecoilValue(canvasState) - const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent() + // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent() + const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext) const { swalFire } = useSwal() const { drawDirectionArrow } = usePolygon() const lengthTextFont = useRecoilValue(fontSelector('lengthText')) diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js index 0d23fd44..6d5d384f 100644 --- a/src/hooks/roofcover/useAuxiliaryDrawing.js +++ b/src/hooks/roofcover/useAuxiliaryDrawing.js @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom' import { useEvent } from '@/hooks/useEvent' @@ -22,11 +22,13 @@ import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils' import { POLYGON_TYPE } from '@/common/common' +import { EventContext } from '@/app/floor-plan/EventProvider' // 보조선 작성 export function useAuxiliaryDrawing(id) { const canvas = useRecoilValue(canvasState) - const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent() + // const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent() + const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext) const { getIntersectMousePoint } = useMouse() const { addLine, removeLine } = useLine() const { tempGridMode } = useTempGrid() diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js index 5619abfb..2c2a9b27 100644 --- a/src/hooks/roofcover/useEavesGableEdit.js +++ b/src/hooks/roofcover/useEavesGableEdit.js @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useRecoilValue } from 'recoil' import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom' import { useMessage } from '@/hooks/useMessage' @@ -10,12 +10,14 @@ import { outerLineFixState } from '@/store/outerLineAtom' import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' import { getChonByDegree } from '@/util/canvas-util' +import { EventContext } from '@/app/floor-plan/EventProvider' // 처마.케라바 변경 export function useEavesGableEdit(id) { const canvas = useRecoilValue(canvasState) const { getMessage } = useMessage() - const { addCanvasMouseEventListener, initEvent } = useEvent() + // const { addCanvasMouseEventListener, initEvent } = useEvent() + const { addCanvasMouseEventListener, initEvent } = useContext(EventContext) const { closePopup } = usePopup() const TYPES = { EAVES: 'eaves', diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js index 34961ea0..7051fe49 100644 --- a/src/hooks/roofcover/useMovementSetting.js +++ b/src/hooks/roofcover/useMovementSetting.js @@ -2,11 +2,12 @@ import { useRecoilValue } from 'recoil' import { canvasState, currentObjectState } from '@/store/canvasAtom' import { usePopup } from '@/hooks/usePopup' import { useMessage } from '@/hooks/useMessage' -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useEvent } from '@/hooks/useEvent' import { POLYGON_TYPE } from '@/common/common' import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' import { QLine } from '@/components/fabric/QLine' +import { EventContext } from '@/app/floor-plan/EventProvider' //동선이동 형 올림 내림 export function useMovementSetting(id) { @@ -15,7 +16,8 @@ export function useMovementSetting(id) { UP_DOWN: 'updown', //형 올림내림 } const canvas = useRecoilValue(canvasState) - const { initEvent, addCanvasMouseEventListener } = useEvent() + // const { initEvent, addCanvasMouseEventListener } = useEvent() + const { initEvent, addCanvasMouseEventListener } = useContext(EventContext) const { closePopup } = usePopup() const { getMessage } = useMessage() const currentObject = useRecoilValue(currentObjectState) diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js index 7c4d5091..c668dd60 100644 --- a/src/hooks/roofcover/useOuterLineWall.js +++ b/src/hooks/roofcover/useOuterLineWall.js @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react' +import { useContext, useEffect, useRef } from 'react' import { distanceBetweenPoints } from '@/util/canvas-util' import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil' import { @@ -31,6 +31,7 @@ import { fabric } from 'fabric' import { outlineDisplaySelector } from '@/store/settingAtom' import { usePopup } from '@/hooks/usePopup' import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting' +import { EventContext } from '@/app/floor-plan/EventProvider' //외벽선 그리기 export function useOuterLineWall(id, propertiesId) { @@ -43,6 +44,14 @@ export function useOuterLineWall(id, propertiesId) { removeAllDocumentEventListeners, removeMouseEvent, } = useEvent() + // const { + // initEvent, + // // addCanvasMouseEventListener, + // // addDocumentEventListener, + // removeAllMouseEventListeners, + // removeAllDocumentEventListeners, + // removeMouseEvent, + // } = useContext(EventContext) const { getIntersectMousePoint } = useMouse() const { addLine, removeLine } = useLine() const { tempGridMode } = useTempGrid() diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js index e0af3205..656094f2 100644 --- a/src/hooks/roofcover/useRoofShapePassivitySetting.js +++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js @@ -1,6 +1,6 @@ import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useLine } from '@/hooks/useLine' import { useMessage } from '@/hooks/useMessage' import { useEvent } from '@/hooks/useEvent' @@ -11,6 +11,7 @@ import { outerLineFixState } from '@/store/outerLineAtom' import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' import { getChonByDegree } from '@/util/canvas-util' +import { EventContext } from '@/app/floor-plan/EventProvider' //지붕형상 수동 설정 export function useRoofShapePassivitySetting(id) { @@ -25,7 +26,8 @@ export function useRoofShapePassivitySetting(id) { const { getMessage } = useMessage() const { showLine, hideLine, addPitchTextsByOuterLines } = useLine() const { swalFire } = useSwal() - const { addCanvasMouseEventListener, initEvent } = useEvent() + // const { addCanvasMouseEventListener, initEvent } = useEvent() + const { addCanvasMouseEventListener, initEvent } = useContext(EventContext) const { drawRoofPolygon } = useMode() const { addPolygonByLines } = usePolygon() const currentObject = useRecoilValue(currentObjectState) diff --git a/src/hooks/roofcover/useWallLineOffsetSetting.js b/src/hooks/roofcover/useWallLineOffsetSetting.js index ba6453ef..b673bcc2 100644 --- a/src/hooks/roofcover/useWallLineOffsetSetting.js +++ b/src/hooks/roofcover/useWallLineOffsetSetting.js @@ -1,11 +1,12 @@ import { canvasState, currentObjectState } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' -import { useEffect, useRef, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { useEvent } from '@/hooks/useEvent' import { useLine } from '@/hooks/useLine' import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' +import { EventContext } from '@/app/floor-plan/EventProvider' // 외벽선 편집 및 오프셋 export function useWallLineOffsetSetting(id) { @@ -14,7 +15,8 @@ export function useWallLineOffsetSetting(id) { const { getMessage } = useMessage() const { closePopup } = usePopup() const { swalFire } = useSwal() - const { addCanvasMouseEventListener, initEvent } = useEvent() + // const { addCanvasMouseEventListener, initEvent } = useEvent() + const { addCanvasMouseEventListener, initEvent } = useContext(EventContext) const wallLineEditRef = useRef(null) const length1Ref = useRef(null) const length2Ref = useRef(null) diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js index 24f641fe..822ea5c9 100644 --- a/src/hooks/surface/usePlacementShapeDrawing.js +++ b/src/hooks/surface/usePlacementShapeDrawing.js @@ -12,7 +12,7 @@ import { useEvent } from '@/hooks/useEvent' import { useMouse } from '@/hooks/useMouse' import { useLine } from '@/hooks/useLine' import { useTempGrid } from '@/hooks/useTempGrid' -import { useEffect, useRef } from 'react' +import { useContext, useEffect, useRef } from 'react' import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util' import { fabric } from 'fabric' import { calculateAngle } from '@/util/qpolygon-utils' @@ -33,12 +33,15 @@ import { POLYGON_TYPE } from '@/common/common' import { usePopup } from '@/hooks/usePopup' import { roofDisplaySelector } from '@/store/settingAtom' +import { EventContext } from '@/app/floor-plan/EventProvider' // 면형상 배치 export function usePlacementShapeDrawing(id) { const canvas = useRecoilValue(canvasState) const roofDisplay = useRecoilValue(roofDisplaySelector) + // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } = + // useEvent() const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } = - useEvent() + useContext(EventContext) const { getIntersectMousePoint } = useMouse() const { addLine, removeLine } = useLine() const { addPolygonByLines, drawDirectionArrow } = usePolygon() diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index 3731443d..b0728ac8 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -15,6 +15,8 @@ import { usePolygon } from '@/hooks/usePolygon' import { fontSelector } from '@/store/fontAtom' import { slopeSelector } from '@/store/commonAtom' import { QLine } from '@/components/fabric/QLine' +import { EventContext } from '@/app/floor-plan/EventProvider' +import { useContext } from 'react' export function useSurfaceShapeBatch() { const { getMessage } = useMessage() @@ -26,7 +28,8 @@ export function useSurfaceShapeBatch() { const roofDisplay = useRecoilValue(roofDisplaySelector) const slope = useRecoilValue(slopeSelector(globalPitch)) const { swalFire } = useSwal() - const { addCanvasMouseEventListener, initEvent } = useEvent() + // const { addCanvasMouseEventListener, initEvent } = useEvent() + const { addCanvasMouseEventListener, initEvent } = useContext(EventContext) const { closePopup } = usePopup() const applySurfaceShape = (surfaceRefs, selectedType, id) => { diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index ba441b75..16d0896d 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react' +import { useCallback, useEffect, useRef } from 'react' import { useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { fabric } from 'fabric' From 6c75a2feb03643d2cdc27dabbba21b822fdc26ed Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Tue, 26 Nov 2024 16:30:49 +0900 Subject: [PATCH 04/14] =?UTF-8?q?refactor:=20plan=EC=9D=98=20=ED=91=9C?= =?UTF-8?q?=EC=B6=9C=20name=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasLayout.jsx | 12 ++++++---- src/hooks/usePlan.js | 27 ++++++++++++---------- 2 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 1e69ec40..fcaabb6f 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -1,6 +1,6 @@ 'use client' -import { useContext, useEffect, useState } from 'react' +import { useContext, useEffect } from 'react' import { useRecoilValue } from 'recoil' import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider' import { useMessage } from '@/hooks/useMessage' @@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) { const { getMessage } = useMessage() const { swalFire } = useSwal() - const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() + const { plans, initCanvasPlans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan() useEffect(() => { loadCanvasPlanData(session.userId, objectNo, pid) @@ -37,14 +37,18 @@ export default function CanvasLayout({ children }) { onClick={() => handleCurrentPlan(session.userId, plan.id)} > - {plan.name} + {!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) && 'New '} + {`Plan ${plan.ordering}`} {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'} swalFire({ - text: `${plan.name} ` + getMessage('plan.message.confirm.delete'), + text: + (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') + + `Plan ${plan.ordering} ` + + getMessage('plan.message.confirm.delete'), type: 'confirm', confirmFn: () => { handleDeletePlan(e, plan.id) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 946cc628..3bf86021 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -23,9 +23,6 @@ export function usePlan() { const { getMessage } = useMessage() const { get, promisePost, promisePut, promiseDel } = useAxios() - const planLabel = 'Plan ' - const newPlanLabel = 'New Plan ' - /** * 마우스 포인터의 가이드라인을 제거합니다. */ @@ -145,7 +142,9 @@ export function usePlan() { */ const checkUnsavedCanvasPlan = async (userId) => { swalFire({ - text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `, + text: + (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') + + `Plan ${plan.ordering}의 변경 사항을 저장하시겠습니까?`, type: 'confirm', confirmFn: async () => { initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id) @@ -185,20 +184,20 @@ export function usePlan() { */ const getCanvasByObjectNo = async (userId, objectNo) => { return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) => - res.map((item) => ({ + res.map((item, index) => ({ id: item.id, - name: planLabel + item.id, userId: item.userId, canvasStatus: dbToCanvasFormat(item.canvasStatus), isCurrent: false, bgImageName: item.bgImageName, mapPositionAddress: item.mapPositionAddress, + ordering: index + 1, })), ) } /** - * canvas 데이터를 추가 + * 신규 canvas 데이터를 저장 */ const postCanvasStatus = async (userId, canvasStatus) => { const planData = { @@ -216,7 +215,6 @@ export function usePlan() { ? { ...plan, id: res.data, - name: planLabel + res.data, canvasStatus: canvasStatus, } : plan, @@ -306,7 +304,10 @@ export function usePlan() { const handleAddPlan = (userId, objectNo) => { JSON.parse(currentCanvasData()).objects.length > 0 ? swalFire({ - text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'), + text: + (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') + + `Plan ${currentCanvasPlan.ordering} ` + + getMessage('plan.message.confirm.copy'), type: 'confirm', confirmFn: () => { addPlan(userId, objectNo, currentCanvasData()) @@ -321,10 +322,10 @@ export function usePlan() { const id = uuidv4() const newPlan = { id: id, - name: newPlanLabel + `${planNum + 1}`, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, + ordering: planNum + 1, } setPlans([...plans, newPlan]) handleCurrentPlan(userId, id) @@ -373,9 +374,10 @@ export function usePlan() { if (res.length > 0) { setInitCanvasPlans(res) setPlans(res) - updateCurrentPlan(Number(pid)) // last 데이터에 포커싱 + updateCurrentPlan(Number(pid)) + setPlanNum(res.length) } else { - addPlan(userId, objectNo) + addPlan(userId, objectNo, '') } }) } @@ -383,6 +385,7 @@ export function usePlan() { return { canvas, plans, + initCanvasPlans, selectedPlan, currentCanvasPlan, modifiedPlans, From 2f18a3d560b83db8b666473d2efbcfa7268f727f Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Tue, 26 Nov 2024 17:42:04 +0900 Subject: [PATCH 05/14] =?UTF-8?q?fix:=20plan=20=EC=B0=B8=EC=A1=B0=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=20=EB=8C=80=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePlan.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 3bf86021..7ed3fa6e 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -305,7 +305,7 @@ export function usePlan() { JSON.parse(currentCanvasData()).objects.length > 0 ? swalFire({ text: - (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') + + (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') + `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'), type: 'confirm', From cd1a32eaf9973538a83288d2cb383fbab648b18d Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Tue, 26 Nov 2024 18:01:53 +0900 Subject: [PATCH 06/14] =?UTF-8?q?Canvas=20=EC=84=A4=EC=A0=95=20=EA=B8=80?= =?UTF-8?q?=EA=BC=B4=20null=20=EC=B2=98=EB=A6=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/font/FontSetting.jsx | 21 +- .../modal/setting01/SecondOption.jsx | 28 +- .../dimensionLine/DimensionLineSetting.jsx | 36 +-- .../setting01/planSize/PlanSizeSetting.jsx | 15 +- src/hooks/common/useFont.js | 8 +- src/hooks/option/useCanvasSetting.js | 239 +++++++++--------- 6 files changed, 142 insertions(+), 205 deletions(-) diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index 4ebdcfeb..15f1146a 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -54,23 +54,6 @@ export default function FontSetting(props) { { id: 'gold', name: getMessage('color.gold'), value: 'gold' }, { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, ] - useEffect(() => { - if (font.fontFamily) { - setSelectedFont(fonts.filter((data) => data.value === font.fontFamily)[0]) - } - - if (font.fontWeight) { - setSelectedFontWeight(fontOptions.filter((data) => data.value === font.fontWeight)[0]) - } - - if (font.fontSize) { - setSelectedFontSize(fontSizes.filter((data) => data.value === font.fontSize)[0]) - } - - if (font.fontColor) { - setSelectedFontColor(fontColors.filter((data) => data.value === font.fontColor)[0]) - } - }, []) const handleSaveBtn = () => { onSave({ @@ -131,10 +114,10 @@ export default function FontSetting(props) {
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx index 7dbb2673..b5e9d98d 100644 --- a/src/components/floor-plan/modal/setting01/SecondOption.jsx +++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx @@ -25,11 +25,7 @@ export default function SecondOption() { const [planSizeId, setPlanSizeId] = useState(uuidv4()) const { - //horizon, setHorizon, vertical, setVertical, - // originHorizon, - // setOriginHorizon, - // originVertical, - // setOriginVertical, + fetchSettings, planSizeSettingMode, setPlanSizeSettingMode, settingModalSecondOptions, @@ -40,12 +36,9 @@ export default function SecondOption() { } = useCanvasSetting() const { option3, option4 } = settingModalSecondOptions - // const [horizon, setHorizon] = useState(originHorizon) - // const [vertical, setVertical] = useState(originVertical) - // 데이터를 최초 한 번만 조회 useEffect(() => { - console.log('SecondOption useEffect 실행', planSizeSettingMode) + console.log('SecondOption useEffect 실행') }, []) const handlePopup = (type) => { @@ -119,6 +112,7 @@ export default function SecondOption() { case 'planSize': { //도면크기 설정 if (!showPlanSizeSettingModal) { + fetchSettings() //화면 오픈 시 데이터 조회 setShowPlanSizeSettingModal(true) addPopup(planSizeId, 2, , true) } else { @@ -135,10 +129,14 @@ export default function SecondOption() { return { ...prev, [fontProps.type]: { - fontFamily: font.fontFamily.value, - fontWeight: font.fontWeight.value, - fontSize: font.fontSize.value, - fontColor: font.fontColor.value, + // fontFamily: font.fontFamily.value, + // fontWeight: font.fontWeight.value, + // fontSize: font.fontSize.value, + // fontColor: font.fontColor.value, + fontFamily: font.fontFamily, + fontWeight: font.fontWeight, + fontSize: font.fontSize, + fontColor: font.fontColor, }, fontFlag: true, } @@ -161,10 +159,6 @@ export default function SecondOption() { const planSizeProps = { id: planSizeId, - // horizon, - // setHorizon, - // vertical, - // setVertical, horizon: planSizeSettingMode.originHorizon, vertical: planSizeSettingMode.originVertical, isShow: showPlanSizeSettingModal, diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index f5753965..63581d5d 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -77,28 +77,9 @@ export default function DimensionLineSetting(props) { { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, ] - let originPixelView - useEffect(() => { if (originPixel) { setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0]) - originPixelView = originPixel - } - - if (globalFont.dimensionLineText.fontFamily) { - setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0]) - } - - if (globalFont.dimensionLineText.fontWeight) { - setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0]) - } - - if (globalFont.dimensionLineText.fontSize) { - setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0]) - } - - if (globalFont.dimensionLineText.fontColor) { - setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0]) } setIsShow(true) @@ -106,7 +87,6 @@ export default function DimensionLineSetting(props) { useEffect(() => { if (originPixel.name) { - originPixelView = originPixel.name setOriginPixel(originPixel) } }, [originPixel]) @@ -142,10 +122,10 @@ export default function DimensionLineSetting(props) { isShow: showFontModal, setIsShow: setShowFontModal, font: { - fontFamily: originFont?.value, - fontWeight: originFontWeight?.value, - fontSize: originFontSize?.value, - fontColor: originFontColor?.value, + fontFamily: originFont, + fontWeight: originFontWeight, + fontSize: originFontSize, + fontColor: originFontColor, }, onSave: handleFontSave, isConfig: true, @@ -172,10 +152,10 @@ export default function DimensionLineSetting(props) { return { ...prev, dimensionLineText: { - fontFamily: originFont.value, - fontWeight: originFontWeight.value, - fontSize: originFontSize.value, - fontColor: originFontColor.value, + fontFamily: originFont, + fontWeight: originFontWeight, + fontSize: originFontSize, + fontColor: originFontColor, }, fontFlag: true, } diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx index 5d4bde1c..a841efd5 100644 --- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx +++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx @@ -13,28 +13,19 @@ export default function PlanSizeSetting(props) { const { getMessage } = useMessage() const canvas = useRecoilValue(canvasState) - - // const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon) - // const [originVertical, setOriginVertical] = useCanvasSetting(vertical) - // const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting() const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting() // 데이터를 최초 한 번만 조회 useEffect(() => { console.log('PlanSizeSetting useEffect 실행') - console.log('11111', planSizeSettingMode) - //setOriginHorizon({ originHorizon: horizon, flag: false }) - //setOriginVertical({ originVertical: vertical, flag: false }) }, []) const onSave = () => { - console.log('22222', planSizeSettingMode) setPlanSizeSettingMode((prev) => { - console.log('4', prev) return { ...prev, - originHorizon: planSizeSettingMode.originHorizon, - originVertical: planSizeSettingMode.originVertical, + originHorizon: Number(planSizeSettingMode.originHorizon), + originVertical: Number(planSizeSettingMode.originVertical), flag: true, } }) @@ -53,7 +44,7 @@ export default function PlanSizeSetting(props) { setPlanSizeSettingMode((prev) => { return { ...prev, - [name]: value, + [name]: Number(value), flag: false, } }) diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js index bdcdaa4e..cb305565 100644 --- a/src/hooks/common/useFont.js +++ b/src/hooks/common/useFont.js @@ -12,7 +12,7 @@ export function useFont() { const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText')) useEffect(() => { - if (canvas && commonText.fontWeight?.value) { + if (canvas && commonText.fontWeight.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText') textObjs.forEach((obj) => { obj.set({ @@ -28,7 +28,7 @@ export function useFont() { }, [commonText]) useEffect(() => { - if (canvas && dimensionLineText.fontWeight?.value) { + if (canvas && dimensionLineText.fontWeight.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText') textObjs.forEach((obj) => { obj.set({ @@ -44,7 +44,7 @@ export function useFont() { }, [dimensionLineText]) useEffect(() => { - if (canvas && flowText.fontWeight?.value) { + if (canvas && flowText.fontWeight.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText') textObjs.forEach((obj) => { obj.set({ @@ -60,7 +60,7 @@ export function useFont() { }, [flowText]) useEffect(() => { - if (canvas && lengthText.fontWeight?.value) { + if (canvas && lengthText.fontWeight.value) { const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText') textObjs.forEach((obj) => { obj.set({ diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index ac03e054..fa3c42eb 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -32,7 +32,7 @@ export function useCanvasSetting() { const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState) - const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState) + const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState) //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState) const [selectedFont, setSelectedFont] = useState() @@ -40,13 +40,8 @@ export function useCanvasSetting() { const [selectedFontSize, setSelectedFontSize] = useState() const [selectedFontColor, setSelectedFontColor] = useState() const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom) - //const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState) - //const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false }) - //const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false }) - useEffect(() => { if (!canvas) { return @@ -97,9 +92,9 @@ export function useCanvasSetting() { console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo) if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) { onClickOption2() + frontSettings() fetchSettings() } - frontSettings() }, [settingModalFirstOptions, settingModalSecondOptions]) // 글꼴 변경 시 @@ -114,20 +109,81 @@ export function useCanvasSetting() { // 도명크기 변경 시 useEffect(() => { - console.log( - 'useCanvasSetting useEffect 실행5', - correntObjectNo, - planSizeSettingMode.flag, - planSizeSettingMode.originHorizon, - planSizeSettingMode.originVertical, - ) + console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo) if (planSizeSettingMode.flag) { onClickOption2() frontSettings() fetchSettings() } - }, [planSizeSettingMode.flag]) + }, [planSizeSettingMode]) + + const getFonts = (itemValue) => { + const data = [ + { id: 1, name: 'MS PGothic', value: 'MS PGothic' }, + { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' }, + { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' }, + { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' }, + { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' }, + ].filter((font) => font.value === itemValue)[0] + if (data.length !== 0) { + return data + } else { + return { id: 1, name: 'MS PGothic', value: 'MS PGothic' } + } + } + + const getFontSizes = (itemValue) => { + const data = [ + ...Array.from({ length: 4 }).map((_, index) => { + return { id: index + 8, name: index + 8, value: index + 8 } + }), + ...Array.from({ length: 9 }).map((_, index) => { + return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 } + }), + { id: 36, name: 36, value: 36 }, + { id: 48, name: 48, value: 48 }, + { id: 72, name: 72, value: 72 }, + ].filter((fontSize) => fontSize.value === itemValue)[0] + if (data.length !== 0) { + return data + } else { + return { id: 16, name: 16, value: 16 } + } + } + + const getFontStyles = (itemValue) => { + const data = [ + { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }, + { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' }, + { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' }, + { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, + ].filter((fontStyle) => fontStyle.value === itemValue)[0] + if (data.length !== 0) { + return data + } else { + return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' } + } + } + + const getFontColors = (itemValue) => { + const data = [ + { id: 'black', name: getMessage('color.black'), value: 'black' }, + { id: 'red', name: getMessage('color.red'), value: 'red' }, + { id: 'blue', name: getMessage('color.blue'), value: 'blue' }, + { id: 'gray', name: getMessage('color.gray'), value: 'gray' }, + { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' }, + { id: 'green', name: getMessage('color.green'), value: 'green' }, + { id: 'pink', name: getMessage('color.pink'), value: 'pink' }, + { id: 'gold', name: getMessage('color.gold'), value: 'gold' }, + { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, + ].filter((fontColor) => fontColor.value === itemValue)[0] + if (data.length !== 0) { + return data + } else { + return { id: 'black', name: getMessage('color.black'), value: 'black' } + } + } const fetchSettings = async () => { try { @@ -141,8 +197,6 @@ export function useCanvasSetting() { const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item })) - //setObjectNo(floorPlanState.objectNo) - //흡착점 ON/OFF setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false }) @@ -156,16 +210,6 @@ export function useCanvasSetting() { originVertical: res.originVertical, flag: false, }) - // setOriginHorizon({ - // ...originHorizon, - // originHorizon: res.originHorizon, - // flag: false, - // }) - // setOriginVertical({ - // ...originVertical, - // originVertical: res.originVertical, - // flag: false, - // }) // 데이터 설정 setSettingModalFirstOptions({ @@ -185,43 +229,43 @@ export function useCanvasSetting() { const fontPatternData = { commonText: { //문자 글꼴 조회 데이터 - fontFamily: res.wordFont, - fontWeight: res.wordFontStyle, - fontSize: res.wordFontSize, - fontColor: res.wordFontColor, + fontFamily: getFonts(res.wordFont), + fontWeight: getFontStyles(res.wordFontStyle), + fontSize: getFontSizes(res.wordFontSize), + fontColor: getFontColors(res.wordFontColor), }, flowText: { //흐름방향 글꼴 조회 데이터 - fontFamily: res.flowFont, - fontWeight: res.flowFontStyle, - fontSize: res.flowFontSize, - fontColor: res.flowFontColor, + fontFamily: getFonts(res.flowFont), + fontWeight: getFontStyles(res.flowFontStyle), + fontSize: getFontSizes(res.flowFontSize), + fontColor: getFontColors(res.flowFontColor), }, dimensionLineText: { //치수 글꼴 조회 데이터 - fontFamily: res.dimensioFont, - fontWeight: res.dimensioFontStyle, - fontSize: res.dimensioFontSize, - fontColor: res.dimensioFontColor, + fontFamily: getFonts(res.dimensioFont), + fontWeight: getFontStyles(res.dimensioFontStyle), + fontSize: getFontSizes(res.dimensioFontSize), + fontColor: getFontColors(res.dimensioFontColor), }, circuitNumberText: { //회로번호 글꼴 조회 데이터 - fontFamily: res.circuitNumFont, - fontWeight: res.circuitNumFontStyle, - fontSize: res.circuitNumFontSize, - fontColor: res.circuitNumFontColor, + fontFamily: getFonts(res.circuitNumFont), + fontWeight: getFontStyles(res.circuitNumFontStyle), + fontSize: getFontSizes(res.circuitNumFontSize), + fontColor: getFontColors(res.circuitNumFontColor), }, lengthText: { //치수선 글꼴 조회 데이터 - fontFamily: res.lengthFont, - fontWeight: res.lengthFontStyle, - fontSize: res.lengthFontSize, - fontColor: res.lengthFontColor, + fontFamily: getFonts(res.lengthFont), + fontWeight: getFontStyles(res.lengthFontStyle), + fontSize: getFontSizes(res.lengthFontSize), + fontColor: getFontColors(res.lengthFontColor), }, //글꼴 설정 Flag fontFlag: false, } - //console.log('fontPatternData', fontPatternData) + console.log('fontPatternData', fontPatternData) //조회된 글꼴 데이터 set setGlobalFont(fontPatternData) @@ -239,14 +283,6 @@ export function useCanvasSetting() { ...planSizeSettingMode, flag: false, }) - // setOriginHorizon({ - // ...originHorizon, - // flag: false, - // }) - // setOriginVertical({ - // ...originVertical, - // flag: false, - // }) // 데이터 설정 setSettingModalFirstOptions({ @@ -258,52 +294,7 @@ export function useCanvasSetting() { fontFlag: false, }) - //console.log('globalFont2', globalFont) - const fontPatternData = { - commonText: { - //문자 글꼴 - fontFamily: globalFont.commonText.fontFamily.value, - fontWeight: globalFont.commonText.fontWeight.value, - fontSize: globalFont.commonText.fontSize.value, - fontColor: globalFont.commonText.fontColor.value, - }, - flowText: { - //흐름방향 글꼴 - fontFamily: globalFont.flowText.fontFamily.value, - fontWeight: globalFont.flowText.fontWeight.value, - fontSize: globalFont.flowText.fontSize.value, - fontColor: globalFont.flowText.fontColor.value, - }, - dimensionLineText: { - //치수 글꼴 - fontFamily: globalFont.dimensionLineText.fontFamily.value, - fontWeight: globalFont.dimensionLineText.fontWeight.value, - fontSize: globalFont.dimensionLineText.fontSize.value, - fontColor: globalFont.dimensionLineText.fontColor.value, - }, - circuitNumberText: { - //회로번호 글꼴 - fontFamily: globalFont.circuitNumberText.fontFamily.value, - fontWeight: globalFont.circuitNumberText.fontWeight.value, - fontSize: globalFont.circuitNumberText.fontSize.value, - fontColor: globalFont.circuitNumberText.fontColor.value, - }, - lengthText: { - //치수선 글꼴 - fontFamily: globalFont.lengthText.fontFamily.value, - fontWeight: globalFont.lengthText.fontWeight.value, - fontSize: globalFont.lengthText.fontSize.value, - fontColor: globalFont.lengthText.fontColor.value, - }, - //글꼴 설정 Flag - fontFlag: false, - } - - //console.log('fontPatternData', fontPatternData) - - setGlobalFont(fontPatternData) - - //setGlobalFont({ ...globalFont, fontFlag: false }) + setGlobalFont({ ...globalFont, fontFlag: false }) } frontSettings() } catch (error) { @@ -332,7 +323,7 @@ export function useCanvasSetting() { selected: item.selected, })), } - + // console.log('globalFont', globalFont) const patternData = { //견적서 번호 objectNo: correntObjectNo, @@ -366,34 +357,34 @@ export function useCanvasSetting() { //글꼴 설정 //문자 글꼴 - wordFont: globalFont.commonText.fontFamily, - wordFontStyle: globalFont.commonText.fontWeight, - wordFontSize: globalFont.commonText.fontSize, - wordFontColor: globalFont.commonText.fontColor, + wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic', + wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal', + wordFontSize: globalFont.commonText.fontSize?.value ?? 16, + wordFontColor: globalFont.commonText.fontColor?.value ?? 'black', //흐름방향 글꼴 - flowFont: globalFont.flowText.fontFamily, - flowFontStyle: globalFont.flowText.fontWeight, - flowFontSize: globalFont.flowText.fontSize, - flowFontColor: globalFont.flowText.fontColor, + flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic', + flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal', + flowFontSize: globalFont.flowText.fontSize?.value ?? 16, + flowFontColor: globalFont.flowText.fontColor?.value ?? 'black', //치수 글꼴 - dimensioFont: globalFont.dimensionLineText.fontFamily, - dimensioFontStyle: globalFont.dimensionLineText.fontWeight, - dimensioFontSize: globalFont.dimensionLineText.fontSize, - dimensioFontColor: globalFont.dimensionLineText.fontColor, + dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic', + dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal', + dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16, + dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black', //회로번호 글꼴 - circuitNumFont: globalFont.circuitNumberText.fontFamily, - circuitNumFontStyle: globalFont.circuitNumberText.fontWeight, - circuitNumFontSize: globalFont.circuitNumberText.fontSize, - circuitNumFontColor: globalFont.circuitNumberText.fontColor, + circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic', + circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal', + circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16, + circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black', //치수선 글꼴 - lengthFont: globalFont.lengthText.fontFamily, - lengthFontStyle: globalFont.lengthText.fontWeight, - lengthFontSize: globalFont.lengthText.fontSize, - lengthFontColor: globalFont.lengthText.fontColor, + lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic', + lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal', + lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16, + lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black', //치수선 설정 originPixel: dimensionLineSettings.pixel, @@ -402,8 +393,6 @@ export function useCanvasSetting() { //치수선 설정 originHorizon: planSizeSettingMode.originHorizon, originVertical: planSizeSettingMode.originVertical, - // originHorizon: originHorizon.originHorizon, - // originVertical: originVertical.originVertical, } console.log('patternData ', patternData) From f4a4ac8e3679abf0ac312d0dab19866d41429944 Mon Sep 17 00:00:00 2001 From: basssy Date: Tue, 26 Nov 2024 18:29:34 +0900 Subject: [PATCH 07/14] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EC=83=81=EC=84=B8=20&?= =?UTF-8?q?=20=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=83=81=EC=84=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 101 ++++++++---------- .../estimate/popup/ProductFeaturesPop.jsx | 6 +- src/components/management/StuffDetail.jsx | 14 ++- .../estimate/useEstimateController.js | 35 ++++-- src/locales/ja.json | 4 +- src/locales/ko.json | 4 +- 6 files changed, 95 insertions(+), 69 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 709c3448..88e2fa1d 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -20,6 +20,7 @@ import ProductFeaturesPop from './popup/ProductFeaturesPop' import { v4 as uuidv4 } from 'uuid' export default function Estimate({ params }) { + const [handlePricingFlag, setHandlePricingFlag] = useState(false) const [specialNoteFirstFlg, setSpecialNoteFirstFlg] = useState(false) const fixedKey = 'itemKey' const [itemChangeYn, setItemChangeYn] = useState(false) @@ -63,6 +64,7 @@ export default function Estimate({ params }) { //견적특이사항 List const [specialNoteList, setSpecialNoteList] = useState([]) + const [popShowSpecialNoteList, setPopShowSpecialNoteList] = useState([]) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get, promisePost } = useAxios(globalLocaleState) @@ -98,22 +100,40 @@ export default function Estimate({ params }) { setDisplayItemList(res) } }) + //견적특이사항 API호출 + //여러개 선택하면 구분자로 (、) + //제품영역 팝업용 + let url = '/api/estimate/special-note-list' + get({ url: url }).then((res) => { + if (isNotEmptyArray(res)) { + setPopShowSpecialNoteList(res) + } + }) }, []) useEffect(() => { //견적특이사항 API호출 //여러개 선택하면 구분자로 (、) + //체크용 if (!specialNoteFirstFlg) { - let url = `/api/estimate/special-note-list` + let url = `/api/estimate/special-note-title-list` get({ url: url }).then((res) => { if (isNotEmptyArray(res)) { + //디테일 ATTR001、ATTR002、ATTR003、ATTR007、ATTR009、ATTR010、ATTR015、ATTR019 if (estimateContextState?.estimateOption) { res.map((row) => { let estimateOption = estimateContextState?.estimateOption?.split('、') row.check = false estimateOption.map((row2) => { - if (row2 === row.code) { - row.check = true + if (row.pkgYn === '0') { + if (row2 === row.code) { + row.check = true + } + } else { + if (row.code.includes(row2)) { + row.check = true + return + } } }) //detail과 상관없이 디폴트 체크목록 @@ -135,48 +155,6 @@ export default function Estimate({ params }) { } }, [estimateContextState?.estimateOption]) - //변경버전 - // useEffect(() => { - // //견적특이사항 API호출 - // //여러개 선택하면 구분자로 (、) - // let url = `/api/estimate/special-note-title-list` - // // let url = `/api/estimate/special-note-list` - // get({ url: url }).then((res) => { - // if (isNotEmptyArray(res)) { - // if (estimateContextState?.estimateOption) { - // res.map((row) => { - // // console.log('API결과:::', row) - // //ATTR001、ATTR002、ATTR009、ATTR010 - // let estimateOption = estimateContextState?.estimateOption?.split('、') - // row.check = false - // estimateOption.map((row2) => { - // if (row.pkgYn === '0') { - // if (row2 === row.code) { - // row.check = true - // } - // } else { - // if (row.code.includes(row2)) { - // row.check = true - // return - // } - // } - // }) - // //detail과 상관없이 디폴트 체크목록 - // //ATTR003,ATTR007 - // if (row.code === 'ATTR003') { - // row.check = true - // } - // if (row.code === 'ATTR007') { - // row.check = true - // } - // }) - - // setSpecialNoteList(res) - // } - // } - // }) - // }, [estimateContextState?.estimateOption]) - //API데이터로 견적일 셋팅 let begin = 1 useEffect(() => { @@ -276,7 +254,9 @@ export default function Estimate({ params }) { } //YJSS UNIT_PIRCE로 프라이싱 실행 - handlePricing('UNIT_PRICE') + if (handlePricingFlag) { + handlePricing('UNIT_PRICE') + } } else { if (specialNoteList.length > 0) { specialNoteList.map((item) => { @@ -293,7 +273,9 @@ export default function Estimate({ params }) { }) //YJOD로 돌아가도 UNIT_PRICE로 프라이싱 실행해서 정가로 셋팅 - handlePricing('UNIT_PRICE') + if (handlePricingFlag) { + handlePricing('UNIT_PRICE') + } } setItemChangeYn(true) @@ -543,6 +525,7 @@ export default function Estimate({ params }) { updates.itemGroup = res.itemGroup updates.delFlg = '0' // 삭제플래그 0 updates.saleTotPrice = (res.salePrice * estimateContextState.itemList[index].amount).toString() + updates.amount = '' if (estimateContextState.estimateType === 'YJSS') { if (res.pkgMaterialFlg === '0') { @@ -557,7 +540,8 @@ export default function Estimate({ params }) { if (item.dispOrder === dispOrder) { return { ...item, ...updates } } else if (item.paDispOrder === dispOrder) { - return { ...item, delFlg: '0' } + //봄제품을 바꿨을떄 + return { ...item, delFlg: '1' } } else { return item } @@ -572,14 +556,14 @@ export default function Estimate({ params }) { bomItem.salePrice = '0' bomItem.saleTotPrice = '0' bomItem.unitPrice = '0' - bomItem.amount = bomItem.bomAmount + // bomItem.amount = null } else { bomItem.dispOrder = (index + 1 + Number(dispOrder)).toString() bomItem.paDispOrder = dispOrder bomItem.salePrice = '0' bomItem.saleTotPrice = '0' bomItem.unitPrice = '0' - bomItem.amount = bomItem.bomAmount + // bomItem.amount = null } bomItem.delFlg = '0' @@ -717,6 +701,11 @@ export default function Estimate({ params }) { const volKw = (item.pnowW * amount) / 1000 totVolKw += volKw } + + setEstimateContextState({ + pkgTotPrice: estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw, + }) + //pkgTotPrice // const saleTotPrice totAmount += amount if (item.pkgMaterialFlg === '1') { @@ -735,7 +724,6 @@ export default function Estimate({ params }) { } } }) - supplyPrice = addSupplyPrice + Number(estimateContextState.pkgTotPrice) vatPrice = supplyPrice * 0.1 totPrice = supplyPrice + vatPrice @@ -905,6 +893,7 @@ export default function Estimate({ params }) { checked={estimateContextState?.estimateType === 'YJSS' ? true : false} onChange={(e) => { //주문분류 + setHandlePricingFlag(true) setEstimateContextState({ estimateType: e.target.value }) }} /> @@ -918,6 +907,7 @@ export default function Estimate({ params }) { value={'YJOD'} checked={estimateContextState?.estimateType === 'YJOD' ? true : false} onChange={(e) => { + setHandlePricingFlag(true) setEstimateContextState({ estimateType: e.target.value }) }} /> @@ -1101,7 +1091,9 @@ export default function Estimate({ params }) { settingShowContent(row.code, event) }} /> - +
) @@ -1188,7 +1180,7 @@ export default function Estimate({ params }) { {getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')} - {convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)} + {convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)} {getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')} {convertNumberToPriceDecimal(estimateContextState?.pkgTotPrice)} @@ -1222,6 +1214,7 @@ export default function Estimate({ params }) { type="button" className="btn-origin grey ml5" onClick={() => { + setHandlePricingFlag(true) handlePricing(showPriceCd) }} > @@ -1429,7 +1422,7 @@ export default function Estimate({ params }) { {productFeaturesPopupOpen && ( diff --git a/src/components/estimate/popup/ProductFeaturesPop.jsx b/src/components/estimate/popup/ProductFeaturesPop.jsx index d958e7e2..5b1af6aa 100644 --- a/src/components/estimate/popup/ProductFeaturesPop.jsx +++ b/src/components/estimate/popup/ProductFeaturesPop.jsx @@ -1,13 +1,13 @@ 'use client' import { useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' -export default function ProductFeaturesPop({ specialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) { +export default function ProductFeaturesPop({ popShowSpecialNoteList, showProductFeatureData, setProductFeaturesPopupOpen }) { const [showSpecialNoteList, setShowSpecialNoteList] = useState([]) const { getMessage } = useMessage() useEffect(() => { let pushData = [] - specialNoteList.map((row) => { + popShowSpecialNoteList.map((row) => { let option = showProductFeatureData.split('、') option.map((row2) => { if (row.code === row2) { @@ -16,7 +16,7 @@ export default function ProductFeaturesPop({ specialNoteList, showProductFeature }) }) setShowSpecialNoteList(pushData) - }, [specialNoteList]) + }, [popShowSpecialNoteList]) return (
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 87f07a8e..080a7cb6 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -142,6 +142,16 @@ export default function StuffDetail() { headerName: getMessage('stuff.detail.planGridHeader.capacity'), width: 120, cellStyle: { justifyContent: 'flex-end' /* 우측정렬*/ }, + cellRenderer: (params) => { + let origin = params.value + let capacity + if (origin) { + capacity = origin / 1000 + return capacity.toFixed(3) + } else { + return null + } + }, }, { field: 'roofMaterialIdMulti', @@ -170,8 +180,8 @@ export default function StuffDetail() { }, }, { - field: 'constructSpecification', - headerName: getMessage('stuff.detail.planGridHeader.constructSpecification'), + field: 'constructSpecificationMulti', + headerName: getMessage('stuff.detail.planGridHeader.constructSpecificationMulti'), wrapText: true, autoHeight: true, cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ }, diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 04dcd477..23636c4c 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -141,7 +141,6 @@ export const useEstimateController = (planNo) => { return alert(getMessage('estimate.detail.save.requiredEstimateDate')) } - // console.log('첨부파일:::::', estimateData.fileList) //첨부파일을 첨부안했는데 //아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼 let fileFlg = true @@ -159,8 +158,34 @@ export const useEstimateController = (planNo) => { }) } } + let itemFlg = true + estimateData.itemList.map((item) => { + item.amount = item.amount?.replaceAll(',', '') + item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2) + item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2) - if (flag && fileFlg) { + if (!item.paDispOrder) { + if (itemFlg) { + if (isNaN(item.amount)) { + item.amount = 0 + } else { + Number(item.amount) + } + + if (item.amount < 1) { + itemFlg = false + return alert(getMessage('estimate.detail.save.requiredAmount')) + } + + if (Number(item.salePrice) < 1) { + itemFlg = false + return alert(getMessage('estimate.detail.save.requiredSalePrice')) + } + } + } + }) + + if (flag && fileFlg && itemFlg) { //1. 첨부파일 저장시작 const formData = new FormData() formData.append('file', estimateData.fileList) @@ -186,12 +211,6 @@ export const useEstimateController = (planNo) => { } console.log('최종 아이템 정보::;', estimateData.itemList) - estimateData.itemList.map((item) => { - item.amount = item.amount?.replaceAll(',', '') - item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2) - item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2) - }) - console.log('최종 정보::;', estimateData) //2. 상세데이터 저장 // return diff --git a/src/locales/ja.json b/src/locales/ja.json index 9250fe50..03ec0aa7 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -729,7 +729,7 @@ "stuff.detail.planGridHeader.moduleModel": "モジュール", "stuff.detail.planGridHeader.capacity": "システム容量", "stuff.detail.planGridHeader.roofMaterialIdMulti": "屋根材", - "stuff.detail.planGridHeader.constructSpecification": "施工方法", + "stuff.detail.planGridHeader.constructSpecificationMulti": "施工方法", "stuff.detail.planGridHeader.supportMethodIdMulti": "架台", "stuff.detail.planGridHeader.pcTypeNo": "パワーコンディショナー", "stuff.detail.planGridHeader.management": "管理", @@ -895,6 +895,8 @@ "estimate.detail.save.requiredCharger": "担当者は必須です.", "estimate.detail.save.requiredObjectName": "案件名は必須です.", "estimate.detail.save.requiredEstimateDate": "見積日は必須です.", + "estimate.detail.save.requiredAmount": "数量は0より大きい値を入力してください.", + "estimate.detail.save.requiredSalePrice": "単価は0より大きい値を入力してください.", "estimate.detail.reset.confirmMsg": "保存した見積書情報が初期化され、図面情報が反映されます。本当に初期化しますか?", "simulator.title.sub1": "物件番号", "simulator.title.sub2": "作成日", diff --git a/src/locales/ko.json b/src/locales/ko.json index 023ccdc8..85994982 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -739,7 +739,7 @@ "stuff.detail.planGridHeader.moduleModel": "모듈", "stuff.detail.planGridHeader.capacity": "시스템용량", "stuff.detail.planGridHeader.roofMaterialIdMulti": "지붕재", - "stuff.detail.planGridHeader.constructSpecification": "시공방법", + "stuff.detail.planGridHeader.constructSpecificationMulti": "시공방법", "stuff.detail.planGridHeader.supportMethodIdMulti": "가대", "stuff.detail.planGridHeader.pcTypeNo": "파워컨디셔너", "stuff.detail.planGridHeader.management": "관리", @@ -905,6 +905,8 @@ "estimate.detail.save.requiredCharger": "담당자는 필수값 입니다.", "estimate.detail.save.requiredObjectName": "안건명은 필수값 입니다.", "estimate.detail.save.requiredEstimateDate": "견적일은 필수값 입니다.", + "estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.", + "estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.", "estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?", "simulator.title.sub1": "물건번호", "simulator.title.sub2": "작성일", From ccabc805526071ec06e983b0333139e1ca6b1896 Mon Sep 17 00:00:00 2001 From: minsik Date: Tue, 26 Nov 2024 18:37:51 +0900 Subject: [PATCH 08/14] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=84=A4=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?>=20=EB=AA=A8=EB=93=88=20=ED=8D=BC=EB=B8=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/basic/step/Module.jsx | 189 +- src/locales/ja.json | 4 +- src/locales/ko.json | 6 +- src/styles/_grid-detail.scss | 40 + src/styles/_modal.scss | 3734 ++++++++--------- src/styles/_reset.scss | 4 +- src/styles/_submodal.scss | 32 + 7 files changed, 2009 insertions(+), 2000 deletions(-) diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx index f50bb408..e3e5c7bc 100644 --- a/src/components/floor-plan/modal/basic/step/Module.jsx +++ b/src/components/floor-plan/modal/basic/step/Module.jsx @@ -32,6 +32,16 @@ export default function Module({}) { }, ], } + const surfaceTypes = [ + { id: 1, name: 'Ⅱ', value: 'Ⅱ' }, + { id: 2, name: 'Ⅲ ∙ Ⅳ', value: 'Ⅲ ∙ Ⅳ' }, + ] + const fiftingHeights = Array.from({ length: 16 }).map((data, index) => { + return { id: index, name: index + 5, value: index + 5 } + }) + const windSpeeds = Array.from({ length: 7 }).map((data, index) => { + return { id: index, name: index * 2 + 30, value: index * 2 + 30 } + }) return ( <>
@@ -47,11 +57,13 @@ export default function Module({}) { - {moduleData.header.map((data) => ( - - ))} + {moduleData.header.map((header) => { + return ( + + ) + })} @@ -88,37 +100,50 @@ export default function Module({}) { -
-
- - - - -
+
-
{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)
+
{getMessage('modal.module.basic.setting.module.stuff.info')}
-
{getMessage('modal.module.basic.setting.module.trestle.maker')}
+
{getMessage('modal.module.basic.setting.module.surface.type')}
-
- +
+
+ +
-
{getMessage('modal.module.basic.setting.module.construction.method')}
+
{getMessage('modal.module.basic.setting.module.fitting.height')}
-
- +
+
+ +
+ mm
-
{getMessage('modal.module.basic.setting.module.under.roof')}
+
{getMessage('modal.module.basic.setting.module.standard.wind.speed')}
-
- +
+
+ +
+ m/s +
+
+
+
+
{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}
+
+
+
+ +
+ mm
@@ -127,61 +152,93 @@ export default function Module({}) {
+
+ + + + +
-
-
- {getMessage('modal.module.basic.setting.module.cotton.classification')} -
- +
+
+
{getMessage('modal.module.basic.setting.module.roof.material')}：スレーツ（4寸）
+
+
+
{getMessage('modal.module.basic.setting.module.rafter.margin')}
+
+
+
+ +
+
+ 垂木の間隔 +
+ +
+
+
+
+
+
+
{getMessage('modal.module.basic.setting.module.trestle.maker')}
+
+
+ +
+
+
+
+
{getMessage('modal.module.basic.setting.module.construction.method')}
+
+
+ +
+
+
+
+
{getMessage('modal.module.basic.setting.module.under.roof')}
+
+
+ +
+
+
-
- {getMessage('modal.module.basic.setting.module.fitting.height')} -
- +
+
+ + + + +
-
-
- {getMessage('modal.module.basic.setting.module.standard.wind.speed')} -
- -
-
-
- {getMessage('modal.module.basic.setting.module.standard.snowfall.amount')} -
- +
+
+ + +
+
+ + +
-
-
-
- {getMessage('modal.module.basic.setting.module.setting.info1')} -
- {getMessage('modal.module.basic.setting.module.setting.info2')} -
+
+
+
+
+ {getMessage('modal.module.basic.setting.module.setting.info1')} +
+ {getMessage('modal.module.basic.setting.module.setting.info2')} +
-
-
- - - - - -
-
-
- - -
-
- - -
+ {/* 설정 오류시 노출 */} +
※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。
) diff --git a/src/locales/ja.json b/src/locales/ja.json index 9250fe50..2001c0a3 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -86,12 +86,14 @@ "modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力", "modal.module.basic.setting.module.roof.material": "屋根材", "modal.module.basic.setting.module.trestle.maker": "架台メーカー", + "modal.module.basic.setting.module.rafter.margin": "マンドンピッチ", "modal.module.basic.setting.module.construction.method": "工法", "modal.module.basic.setting.module.under.roof": "屋根の下", "modal.module.basic.setting.module.setting": "モジュールの選択", "modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。", "modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください", - "modal.module.basic.setting.module.cotton.classification": "綿調道区分", + "modal.module.basic.setting.module.stuff.info": "商品情報", + "modal.module.basic.setting.module.surface.type": "면조도구분(JA)", "modal.module.basic.setting.module.fitting.height": "設置高さ", "modal.module.basic.setting.module.standard.wind.speed": "基準風速", "modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量", diff --git a/src/locales/ko.json b/src/locales/ko.json index 023ccdc8..66b8c2c4 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -89,12 +89,14 @@ "modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력", "modal.module.basic.setting.module.roof.material": "지붕재", "modal.module.basic.setting.module.trestle.maker": "가대메이거", + "modal.module.basic.setting.module.rafter.margin": "서까래 간격", "modal.module.basic.setting.module.construction.method": "공법", "modal.module.basic.setting.module.under.roof": "지붕밑바탕", - "modal.module.basic.setting.module.setting": "모듈 설정", + "modal.module.basic.setting.module.setting": "모듈 선택", "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.", "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.", - "modal.module.basic.setting.module.cotton.classification": "면조도구분", + "modal.module.basic.setting.module.stuff.info": "물건정보", + "modal.module.basic.setting.module.surface.type": "면조도구분", "modal.module.basic.setting.module.fitting.height": "설치높이", "modal.module.basic.setting.module.standard.wind.speed": "기준 풍속", "modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량", diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss index d6f34b13..4bf432eb 100644 --- a/src/styles/_grid-detail.scss +++ b/src/styles/_grid-detail.scss @@ -59,6 +59,46 @@ .ag-icon-filter::before{ color: #fff; } + .ag-body-vertical-scroll{ + width: 4px !important; + max-width: 4px !important; + min-width: 4px !important; + .ag-body-vertical-scroll-viewport{ + width: 4px !important; + max-width: 4px !important; + min-width: 4px !important; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + } + .ag-body-horizontal-scroll{ + height: 4px !important; + max-height: 4px !important; + min-height: 4px !important; + .ag-body-horizontal-scroll-viewport{ + height: 4px !important; + max-height: 4px !important; + min-height: 4px !important; + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #C1CCD7; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + } } .copy-ico-wrap{ display: flex; diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 2914875d..b4987651 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -4,2128 +4,2004 @@ $pop-bold-weight: 500; $pop-normal-size: 12px; $alert-color: #101010; -@keyframes mountpop { - from { - opacity: 0; - scale: 0.95; - } - to { - opacity: 1; - scale: 1; - } +@keyframes mountpop{ + from{opacity: 0; scale: 0.95;} + to{opacity: 1; scale: 1;} } -@keyframes unmountpop { - from { - opacity: 1; - scale: 1; - } - to { - opacity: 0; - scale: 0.95; - } +@keyframes unmountpop{ + from{opacity: 1; scale: 1;} + to{opacity: 0; scale: 0.95;} } -.normal-font { - font-size: 12px; - font-weight: 400; - color: #fff; +.normal-font{ + font-size: 12px; + font-weight: 400; + color: #fff; } -.bold-font { - font-size: 12px; - font-weight: 500; - color: #fff; +.bold-font{ + font-size: 12px; + font-weight: 500; + color: #fff; } -.modal-pop-wrap { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - border: 1px solid #000; - border-radius: 4px; - background-color: #272727; - z-index: 9999999; - &.xsm { - width: 200px; - } - &.xxxm { - width: 240px; - } - &.xxm { - width: 270px; - } - &.xm { - width: 300px; - } - &.ssm { - width: 380px; - } - &.sm { - width: 580px; - } - &.r { - width: 400px; - } - &.lr { - width: 440px; - } - &.lr-2 { - width: 450px; - } - &.lrr { - width: 480px; - } - &.ml { - width: 530px; - } - &.l-2 { - width: 640px; - } - &.lx-2 { - width: 740px; - } - &.lx { - width: 770px; - } - &.l { - width: 800px; - } - &.mount { - animation: mountpop 0.17s ease-in-out forwards; - } - &.unmount { - animation: unmountpop 0.17s ease-in-out forwards; - } - &.alert { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: transparent; - border: none; - .modal-head { - background-color: transparent; - padding: 0 0 8px; - .modal-close { - width: 20px; - height: 20px; - background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center; - } +.modal-pop-wrap{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + border: 1px solid #000; + border-radius: 4px; + background-color: #272727; + z-index: 9999999; + &.xsm{ + width: 200px; } - .modal-body { - background-color: #fff; - padding: 22px; - border-radius: 4px; - border: 1px solid #101010; - color: $alert-color; - .alert-title { + &.xxxm{ + width: 240px; + } + &.xxm{ + width: 270px; + } + &.xm{ + width: 300px; + } + &.ssm{ + width: 380px; + } + &.sm{ + width: 580px; + } + &.r{ + width: 400px; + } + &.lr{ + width: 440px; + } + &.lr-2{ + width: 450px; + } + &.lrr{ + width: 480px; + } + &.ml{ + width: 530px; + } + &.l-2{ + width: 640px; + } + &.lx-2{ + width: 740px; + } + &.lx{ + width: 770px; + } + &.l{ + width: 800px; + } + &.mount{ + animation: mountpop .17s ease-in-out forwards; + } + &.unmount{ + animation: unmountpop .17s ease-in-out forwards; + } + &.alert{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: transparent; + border: none; + .modal-head{ + background-color: transparent; + padding: 0 0 8px; + .modal-close{ + width: 20px; + height: 20px; + background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center; + } + } + .modal-body{ + background-color: #fff; + padding: 22px; + border-radius: 4px; + border: 1px solid #101010; + color: $alert-color; + .alert-title{ + font-size: 13px; + font-weight: 700; + color: $alert-color; + margin-bottom: 15px; + } + } + } +} +.modal-head{ + display: flex; + align-items: center; + padding: 10px 24px; + background-color: #000; + // overflow: hidden; + h1.title{ font-size: 13px; + color: $pop-color; font-weight: 700; - color: $alert-color; + } + .modal-close{ + margin-left: auto; + color: transparent; + font-size: 0; + width: 10px; + height: 10px; + background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center; + } +} +.modal-body{ + padding: 24px; + .modal-btn-wrap{ + display: flex; + align-items: center; + gap: 5px; + button{ + flex: 1; + } + &.sub{ + button{ + flex: 1 1 auto; + padding: 0; + } + margin-bottom: 14px; + } + } + .modal-check-btn-wrap{ + margin-top: 15px; + .check-wrap-title{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: 600; + &.light{ + font-weight: $pop-normal-weight; + } + } + .flex-check-box{ + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 15px; + &.for2{ + justify-content: flex-end; + button{ + width: calc(50% - 5px); + } + &.btn{ + gap: 5px; + button{ + width: calc(50% - 2.5px); + } + } + } + &.for-line{ + button{ + flex: 1; + } + } + } + } + .outer-line-wrap{ + border-top: 1px solid #3C3C3C; + margin-top: 10px; + padding-top: 15px; margin-bottom: 15px; - } + > div{ + margin-bottom: 15px; + &:last-child{ + margin-bottom: 0; + } + } } - } -} -.modal-head { - display: flex; - align-items: center; - padding: 10px 24px; - background-color: #000; - // overflow: hidden; - h1.title { - font-size: 13px; - color: $pop-color; - font-weight: 700; - } - .modal-close { - margin-left: auto; - color: transparent; - font-size: 0; - width: 10px; - height: 10px; - background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center; - } -} -.modal-body { - padding: 24px; - .modal-btn-wrap { - display: flex; - align-items: center; - gap: 5px; - button { - flex: 1; - } - &.sub { - button { - flex: 1 1 auto; - padding: 0; - } - margin-bottom: 14px; - } - } - .modal-check-btn-wrap { - margin-top: 15px; - .check-wrap-title { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: 600; - &.light { + .modal-guide{ + display: block; + font-size: $pop-normal-size; + color: $alert-color; font-weight: $pop-normal-weight; - } } - .flex-check-box { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-top: 15px; - &.for2 { - justify-content: flex-end; - button { - width: calc(50% - 5px); - } - &.btn { - gap: 5px; - button { - width: calc(50% - 2.5px); - } - } - } - &.for-line { - button { - flex: 1; - } - } - } - } - .outer-line-wrap { - border-top: 1px solid #3c3c3c; - margin-top: 10px; - padding-top: 15px; - margin-bottom: 15px; - > div { - margin-bottom: 15px; - &:last-child { - margin-bottom: 0; - } - } - } - .modal-guide { - display: block; - font-size: $pop-normal-size; - color: $alert-color; - font-weight: $pop-normal-weight; - } } -.adsorption-point { - display: flex; - align-items: center; - background-color: #3a3a3a; - border-radius: 3px; - padding-left: 11px; - overflow: hidden; - transition: all 0.17s ease-in-out; - span { - font-size: $pop-normal-size; - color: #898989; - } - i { +.adsorption-point{ display: flex; align-items: center; - padding: 0 7px; - margin-left: auto; - height: 100%; - font-size: 13px; - color: #898989; - } - &.act { - i { - color: $pop-color; - background-color: #1083e3; + background-color: #3A3A3A; + border-radius: 3px; + padding-left: 11px; + overflow: hidden; + transition: all 0.17s ease-in-out; + span{ + font-size: $pop-normal-size; + color: #898989; + } + i{ + display: flex; + align-items: center; + padding: 0 7px; + margin-left: auto; + height: 100%; + font-size: 13px; + color: #898989; + } + &.act{ + i{ + color: $pop-color; + background-color: #1083E3; + } } - } } // grid-option -.grid-check-form { - display: flex; - align-items: center; - gap: 15px; - padding-bottom: 15px; - &.border { - border-bottom: 1px solid #424242; - } -} -.grid-option-wrap { - .grid-option-box { +.grid-check-form{ display: flex; align-items: center; - background-color: transparent; - border: 1px solid #3d3d3d; - border-radius: 2px; - padding: 15px 10px; - gap: 20px; - margin-bottom: 10px; - .grid-input-form { - display: flex; - align-items: center; - span { - flex: none; - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - } - .input-grid { - width: 54px; - input { - width: 100%; + gap: 15px; + padding-bottom: 15px; + &.border{ + border-bottom: 1px solid #424242; + } +} +.grid-option-wrap{ + .grid-option-box{ + display: flex; + align-items: center; + background-color: transparent; + border: 1px solid #3D3D3D; + border-radius: 2px; + padding: 15px 10px; + gap: 20px; + margin-bottom: 10px; + .grid-input-form{ + display: flex; + align-items: center; + span{ + flex: none; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + } + .input-grid{ + width: 54px; + input{ + width: 100%; + } + } + } + &:last-child{ + margin-bottom: 0; } - } } - &:last-child { - margin-bottom: 0; - } - } } -.select-form { - .sort-select { - width: 100%; - } +.select-form{ + .sort-select{width: 100%;} } -.grid-select { - flex: 1; - &.no-flx { - flex: unset; - } - .sort-select { - width: 100%; - background-color: #313131; - min-width: auto; - font-size: 12px; - border: none; - p { - font-size: 12px; +.grid-select{ + flex: 1; + &.no-flx{ + flex: unset; } - > ul { - border: none; + .sort-select{ + width: 100%; + background-color: #313131; + min-width: auto; + font-size: 12px; + border: none; + p{ + font-size: 12px; + } + > ul{ + border: none; + } } - } - &.right { - p { - text-align: right; + &.right{ + p{ + text-align: right; + } + ul{ + li{ + justify-content: flex-end; + } + } } - ul { - li { - justify-content: flex-end; - } - } - } } -.grid-btn-wrap { - padding-top: 15px; - text-align: right; - button { - padding: 0 10px; - } +.grid-btn-wrap{ + padding-top: 15px; + text-align: right; + button{ + padding: 0 10px; + } } // grid copy -.grid-option-tit { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - padding-bottom: 15px; +.grid-option-tit{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + padding-bottom: 15px; + } -.grid-direction { - display: flex; - align-items: center; - gap: 5px; - flex: 1; +.grid-direction{ + display: flex; + align-items: center; + gap: 5px; + flex: 1; } -.direction { - width: 22px; - height: 22px; - background-color: #757575; - background-image: url(../../public/static/images/canvas/grid_option_arr.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 16px 15px; - border-radius: 50%; - transition: all 0.15s ease-in-out; - opacity: 0.6; - &.down { - transform: rotate(180deg); - } - &.left { - transform: rotate(-90deg); - } - &.right { - transform: rotate(90deg); - } - &:hover, - &.act { - opacity: 1; - } +.direction{ + width: 22px; + height: 22px; + background-color: #757575; + background-image: url(../../public/static/images/canvas/grid_option_arr.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 16px 15px; + border-radius: 50%; + transition: all .15s ease-in-out; + opacity: 0.6; + &.down{transform: rotate(180deg);} + &.left{transform: rotate(-90deg);} + &.right{transform: rotate(90deg);} + &:hover, + &.act{ + opacity: 1; + } } // grid-move -.move-form { - width: 100%; - p { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - } -} -.input-move-wrap { - display: flex; - align-items: center; - gap: 5px; - span { - color: $pop-color; - font-size: $pop-normal-size; - } - .input-move { - width: 130px; - input { - width: 100%; - } - } -} -.direction-move-wrap { - flex: none; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 5px; - margin-left: auto; -} - -// 배치면 초기 설정 -.placement-table { - table { - table-layout: fixed; - tr { - th { +.move-form{ + width: 100%; + p{ font-size: $pop-normal-size; color: $pop-color; font-weight: $pop-bold-weight; - padding: 18px 0; - border-bottom: 1px solid #424242; - vertical-align: middle; - .tip-wrap { - display: flex; - align-items: center; - } - } - td { - font-size: $pop-normal-size; - color: $pop-color; - border-bottom: 1px solid #424242; - padding: 18px 0 18px 20px; - vertical-align: middle; - .flex-box { - display: flex; - align-items: center; - } - } - &:first-child { - td, - th { - padding-top: 0; - } - } } - } - .tooltip { - position: relative; - display: block; - width: 15px; - height: 15px; - margin-left: 5px; - background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center; - background-size: cover; - } - &.light { - padding: 0; - th, - td { - color: $alert-color; - border-bottom: none; - border-top: 1px solid #efefef; - } - th { - padding: 14px 0; - } - tr { - &:first-child { - td, - th { - padding-top: 14px; - } - } - &:last-child { - td, - th { - padding-bottom: 0px; - } - } - } - } } - -.pop-form-radio { - display: flex; - align-items: center; - gap: 10px; -} -.placement-option { - display: flex; - align-items: center; - gap: 20px; -} -.select-wrap { - .sort-select { - width: 100%; - } -} -.flex-ment { - display: flex; - align-items: center; - gap: 5px; - span { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - } -} - -.img-edit-wrap { - flex: none; - .img-edit-btn { +.input-move-wrap{ display: flex; align-items: center; - height: 30px; - padding: 0 10px; - font-size: 12px; - font-weight: 400; - color: #101010; - background-color: #fff; - border-radius: 2px; - cursor: pointer; - transition: all 0.15s ease-in-out; - .img-edit { - width: 16px; - height: 16px; - background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center; - background-size: cover; - margin-right: 5px; + gap: 5px; + span{ + color: $pop-color; + font-size: $pop-normal-size; } - &:hover { - background-color: #ebebeb; + .input-move{ + width: 130px; + input{ + width: 100%; + } } - } } -.img-name-wrap { - display: flex; - align-items: center; - width: 100%; - margin-left: 10px; - input { - flex: 1; - } - .img-check { +.direction-move-wrap{ flex: none; - width: 18px; - height: 18px; - margin-left: 5px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../../public/static/images/canvas/img_check_fail.svg); - } + display: grid; + grid-template-columns: 1fr 1fr; + gap: 5px; + margin-left: auto; } -.for-address { - input { - flex: 1; - } - .check-address { +// 배치면 초기 설정 +.placement-table{ + table{ + table-layout: fixed; + tr{ + th{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + padding: 18px 0; + border-bottom: 1px solid #424242; + vertical-align: middle; + .tip-wrap{ + display: flex; + align-items: center; + } + } + td{ + font-size: $pop-normal-size; + color: $pop-color; + border-bottom: 1px solid #424242; + padding: 18px 0 18px 20px; + vertical-align: middle; + .flex-box{ + display: flex; + align-items: center; + } + } + &:first-child{ + td, + th{ + padding-top: 0; + } + } + } + } + .tooltip{ + position: relative; + display: block; + width: 15px; + height: 15px; + margin-left: 5px; + background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center; + background-size: cover; + } + &.light{ + padding: 0; + th,td{ + color: $alert-color; + border-bottom: none; + border-top: 1px solid #EFEFEF; + } + th{ + padding: 14px 0; + } + tr{ + &:first-child{ + td, + th{ + padding-top: 14px; + } + } + &:last-child{ + td, + th{ + padding-bottom: 0px; + } + } + } + } +} + +.pop-form-radio{ + display: flex; + align-items: center; + gap: 10px; +} +.placement-option{ + display: flex; + align-items: center; + gap: 20px; +} +.select-wrap{ + .sort-select{ + width: 100%; + } +} +.flex-ment{ + display: flex; + align-items: center; + gap: 5px; + span{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + } + +} + +.img-edit-wrap{ flex: none; - width: 18px; - height: 18px; - margin-left: 5px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - &.fail { - background-image: url(../../public/static/images/canvas/img_check_fail.svg); + .img-edit-btn{ + display: flex; + align-items: center; + height: 30px; + padding: 0 10px; + font-size: 12px; + font-weight: 400; + color: #101010; + background-color: #fff; + border-radius: 2px; + cursor: pointer; + transition: all .15s ease-in-out; + .img-edit{ + width: 16px; + height: 16px; + background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center; + background-size: cover; + margin-right: 5px; + } + &:hover{ + background-color: #ebebeb; + } } - &.success { - background-image: url(../../public/static/images/canvas/img_check_success.svg); +} +.img-name-wrap{ + display: flex; + align-items: center; + width: 100%; + margin-left: 10px; + input{ + flex: 1; + + } + .img-check{ + flex: none; + width: 18px; + height: 18px; + margin-left: 5px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(../../public/static/images/canvas/img_check_fail.svg); + } +} + +.for-address{ + input{ + flex: 1; + } + .check-address{ + flex: none; + width: 18px; + height: 18px; + margin-left: 5px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);} + &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);} } - } } // 외벽선 그리기 -.outline-wrap { - padding: 24px 0; - border-top: 1px solid #424242; - - .outline-inner { +.outline-wrap{ + padding: 24px 0; + border-top: 1px solid #424242; + + .outline-inner{ + display: flex; + align-items: center; + margin-bottom: 14px; + &:last-child{ + margin-bottom: 0; + } + .outline-form{ + // width: 50%; + margin-right: 15px; + } + } + &:last-child{ + border-bottom: 1px solid #424242; + } +} +.outline-form{ display: flex; align-items: center; - margin-bottom: 14px; - &:last-child { - margin-bottom: 0; + + span{ + width: 60px; + flex: none; + font-size: $pop-normal-size; + font-weight: $pop-bold-weight; + color: $pop-color; + margin-right: 10px; + &.thin{ + width: auto; + font-weight: $pop-normal-weight; + margin-right: 0; + } } - .outline-form { - // width: 50%; - margin-right: 15px; - } - } - &:last-child { - border-bottom: 1px solid #424242; - } -} -.outline-form { - display: flex; - align-items: center; - span { - width: 60px; - flex: none; - font-size: $pop-normal-size; - font-weight: $pop-bold-weight; - color: $pop-color; - margin-right: 10px; - &.thin { - width: auto; - font-weight: $pop-normal-weight; - margin-right: 0; + .reset-btn{ + flex: none; + width: 30px; + height: 30px; + background: transparent; + border: 1px solid #484848; + border-radius: 2px; + margin-left: 5px; + background-image: url(../../public/static/images/canvas/reset_ico.svg); + background-repeat: no-repeat; + background-size: 12px 12px; + background-position: center; + } + &:last-child{ + margin-right: 0; } - } - - .reset-btn { - flex: none; - width: 30px; - height: 30px; - background: transparent; - border: 1px solid #484848; - border-radius: 2px; - margin-left: 5px; - background-image: url(../../public/static/images/canvas/reset_ico.svg); - background-repeat: no-repeat; - background-size: 12px 12px; - background-position: center; - } - &:last-child { - margin-right: 0; - } } -.cul-wrap { - display: flex; - .outline-box { - width: 50%; - margin-right: 15px; - .outline-form { - width: 100%; - margin-bottom: 14px; - margin-right: 0; - &:last-child { - margin-bottom: 0; - } - } - } - .cul-box { +.cul-wrap{ display: flex; - align-items: center; - justify-content: center; - width: 50%; - background-color: #3d3d3d; - border-radius: 2px; - } + .outline-box{ + width: 50%; + margin-right: 15px; + .outline-form{ + width: 100%; + margin-bottom: 14px; + margin-right: 0; + &:last-child{ + margin-bottom: 0; + } + } + } + .cul-box{ + display: flex; + align-items: center; + justify-content: center; + width: 50%; + background-color: #3D3D3D; + border-radius: 2px ; + } } // 외벽선 속성 설정 -.properties-guide { - font-size: $pop-normal-size; - color: #aaa; - font-weight: $pop-normal-weight; - margin-bottom: 14px; +.properties-guide{ + font-size: $pop-normal-size; + color: #AAA; + font-weight: $pop-normal-weight; + margin-bottom: 14px; } -.setting-tit { - font-size: 13px; - color: $pop-color; - font-weight: $pop-bold-weight; - margin-bottom: 10px; +.setting-tit{ + font-size: 13px; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-bottom: 10px; } -.properties-setting-wrap { - &.outer { - margin-top: 24px; - } - .setting-btn-wrap { - display: flex; - align-items: center; - padding: 14px 0; - border-top: 1px solid #424242; - border-bottom: 1px solid #424242; - .setting-btn { - display: block; - width: 100%; - height: 40px; - font-size: 13px; - color: #fff; - font-weight: 700; - border-radius: 2px; - transition: all 0.15s ease-in-out; - &.green { - background-color: #305941; - border: 1px solid #45cd7d; - &:hover { - background-color: #3a6b4e; - } - } - &.blue { - background-color: #2e5360; - border: 1px solid #3fbae6; - &:hover { - background-color: #365f6e; - } - } +.properties-setting-wrap{ + &.outer{ + margin-top: 24px; + } + .setting-btn-wrap{ + display: flex; + align-items: center; + padding: 14px 0; + border-top: 1px solid #424242; + border-bottom: 1px solid #424242; + .setting-btn{ + display: block; + width: 100%; + height: 40px; + font-size: 13px; + color: #fff; + font-weight: 700; + border-radius: 2px; + transition: all .15s ease-in-out; + &.green{ + background-color: #305941; + border: 1px solid #45CD7D; + &:hover{ + background-color: #3a6b4e; + } + } + &.blue{ + background-color: #2E5360; + border: 1px solid #3FBAE6; + &:hover{ + background-color: #365f6e; + } + } + } } - } } // 지붕형상 설정 -.roof-shape-menu { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; - gap: 24px 10px; - margin-bottom: 24px; - .shape-box { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - padding: 13px; - background-color: #3d3d3d; - transition: background 0.15s ease-in-out; - img { - max-width: 100%; - } - } - .shape-title { - font-size: $pop-normal-size; - font-weight: $pop-bold-weight; - color: $pop-color; - margin-top: 10px; - text-align: center; - transition: color 0.15s ease-in-out; - } - .shape-menu-box { - &.act, - &:hover { - .shape-box { - background-color: #008bff; - } - .shape-title { - color: #008bff; - } - } - } -} - -.setting-box { - padding: 14px 0; - border-top: 1px solid #424242; - border-bottom: 1px solid #424242; -} -.padding-form { - padding-left: 23px; -} -.discrimination-box { - padding: 16px 12px; - border: 1px solid #3d3d3d; - border-radius: 2px; -} - -.modal-bottom-border-bx { - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; -} - -// 처마∙케라바 변경 -.eaves-keraba-table { - display: table; - border-collapse: collapse; - .eaves-keraba-item { - display: table-row; - .eaves-keraba-th, - .eaves-keraba-td { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - display: table-cell; - vertical-align: middle; - padding-bottom: 14px; - } - .eaves-keraba-td { - padding-left: 10px; - } - .eaves-keraba-ico { - display: flex; - align-items: center; - justify-content: center; - padding: 5px; - background-color: #3d3d3d; - border: 1px solid #3d3d3d; - border-radius: 2px; - cursor: pointer; - &.act { - border: 1px solid #ed0004; - } - } - &:last-child { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 0; - } - } - } -} -.guide { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - margin-bottom: 24px; - &.sm { - margin-bottom: 15px; - } - span { - display: block; - } -} - -// 지붕면 할당 -.allocation-select-wrap { - display: flex; - align-items: center; - padding-bottom: 14px; - border-bottom: 1px solid #424242; - margin-bottom: 14px; - span { - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-bold-weight; - margin-right: 10px; - } - .allocation-edit { - display: flex; - align-items: center; - height: 30px; - padding: 0 10px; - margin-left: 5px; - font-size: $pop-normal-size; - color: $pop-color; - font-weight: $pop-normal-weight; - border: 1px solid #484848; - background-color: #323234; - i { - display: block; - width: 12px; - height: 12px; - margin-right: 5px; - background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center; - background-size: cover; - } - } -} - -.block-box { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 10px; - .flex-ment { - gap: 10px; - .dec { - text-decoration: underline; - } - .delete { - display: block; - width: 15px; - height: 15px; - background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center; - background-size: cover; - } - } - &:last-child { - margin-bottom: 0; - } -} - -.icon-btn-wrap { - flex: 1; - display: flex; - align-items: center; - gap: 5px; - button { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 30px; - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - border: 1px solid #646464; - border-radius: 2px; - padding: 0 10px; - transition: all 0.15s ease-in-out; - i { - height: 15px; - display: block; - margin-left: 10px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - transition: all 0.15s ease-in-out; - &.allocation01 { - background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); - width: 15px; - } - &.allocation02 { - background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); - width: 18px; - } - } - &.act, - &:hover { - color: #101010; - border: 1px solid #101010; - background-color: #fff; - i { - &.allocation01 { - background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); - } - &.allocation02 { - background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); - } - } - } - } -} - -// 경사설정 -.slope-wrap { - padding-bottom: 24px; - border-bottom: 1px solid #424242; -} - -// 면형상 배치 -.plane-frame-wrap { - display: flex; - gap: 10px; - .plane-shape-wrap { - flex: none; - width: 73px; - } -} - -.plane-shape-menu { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 5px; - .shape-menu-box { - border-radius: 2px; - width: 34px; - height: 34px; - background-color: #373737; - border: 1px solid #676767; - transition: - background 0.15s ease-in-out, - border 0.15s ease-in-out; - .shape-box { - display: flex; - justify-content: center; - align-items: center; - position: relative; - width: 100%; - height: 100%; - border-radius: 2px; - } - &.act, - &:hover { - border-color: #008bff; - background-color: #008bff; - } - } -} - -.shape-library { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 5px; - padding-top: 5px; - .library-btn { - width: 100%; - height: 34px; - border: 1px solid #6c6c6c; - border-radius: 2px; - background-color: #373737; - background-repeat: no-repeat; - background-position: center; - transition: all 0.15s ease-in-out; - &.ico01 { - background-image: url(../../public/static/images/canvas/shape_labrary01.svg); - background-size: 19px 18px; - } - &.ico02 { - background-image: url(../../public/static/images/canvas/shape_labrary02.svg); - background-size: 15px 20px; - } - &.ico03 { - background-image: url(../../public/static/images/canvas/shape_labrary03.svg); - background-size: 19px 16px; - } - &:hover { - border-color: #1083e3; - background-color: #1083e3; - } - } -} - -.plane-detail-wrap { - display: flex; - flex-direction: column; - flex: 1; -} -.plane-shape-wrapper { - flex: 1; - display: flex; - flex-direction: column; - gap: 10px; - .plane-box { - width: 100%; - padding: 10px 18px; - border-radius: 2px; - background-color: #313131; - border: 1px solid #484848; - .plane-box-tit { - font-size: $pop-normal-size; - font-weight: 600; - color: $pop-color; - margin-bottom: 10px; - } - &.shape-box { - .shape-box-inner { - display: flex; - gap: 15px; - min-height: 140px; - .shape-img { - position: relative; - flex: none; - width: 150px; - background-color: #fff; - border-radius: 2px; - img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - .shape-data { - flex: 1; - .eaves-keraba-table { - .eaves-keraba-item { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 10px; - } - &:last-child { - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 0px; - } - } - } - } - } - } - } - &.direction-box { - flex: 1; - display: flex; - flex-direction: column; - .plane-direction-box { - flex: 1; +.roof-shape-menu{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 24px 10px; + margin-bottom: 24px; + .shape-box{ display: flex; align-items: center; justify-content: center; width: 100%; - } + padding: 13px; + background-color: #3D3D3D; + transition: background .15s ease-in-out; + img{ + max-width: 100%; + } } - } -} -.plane-direction { - width: 150px; - position: relative; - height: 120px; - span { - position: absolute; - font-size: 12px; - font-weight: 500; - color: #b1b1b1; - &.top { - top: 0; - left: 50%; - transform: translateX(-50%); + .shape-title{ + font-size: $pop-normal-size; + font-weight: $pop-bold-weight; + color: $pop-color; + margin-top: 10px; + text-align: center; + transition: color .15s ease-in-out; } - &.right { - top: 50%; - right: 0; - transform: translateY(-50%); + .shape-menu-box{ + &.act, + &:hover{ + .shape-box{background-color: #008BFF;} + .shape-title{color: #008BFF;} + } } - &.bottom { - bottom: 0; - left: 50%; - transform: translateX(-50%); - } - &.left { - top: 50%; - left: 0; - transform: translateY(-50%); - } - } - .plane-btn { - position: absolute; - width: 28px; - height: 28px; - background-color: #777777; - background-image: url(../../public/static/images/canvas/plane_arr.svg); - background-size: 12px 13px; - background-repeat: no-repeat; - background-position: center; - border-radius: 50%; - transition: all 0.15s ease-in-out; - &.up { - top: 22px; - left: 50%; - transform: translateX(-50%); - } - &.right { - top: 50%; - right: 32px; - transform: translateY(-50%) rotate(90deg); - } - &.down { - bottom: 22px; - left: 50%; - transform: translateX(-50%) rotate(180deg); - } - &.left { - top: 50%; - left: 32px; - transform: translateY(-50%) rotate(270deg); - } - &:hover, - &.act { - background-color: #fff; - background-image: url(../../public/static/images/canvas/plane_arr_act.svg); - } - } } -.plane-tab-guide { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - margin-top: 10px; +.setting-box{ + padding: 14px 0; + border-top: 1px solid #424242; + border-bottom: 1px solid #424242; } -.plane-shape-btn { - padding-top: 10px; - margin-top: auto; - button { - display: block; - width: 100%; - } +.padding-form{ + padding-left: 23px; +} +.discrimination-box{ + padding: 16px 12px; + border: 1px solid #3D3D3D; + border-radius: 2px; } -// 오브젝트 배치 -.mb-box { - margin-bottom: 24px; +.modal-bottom-border-bx{ + margin-top: 24px; + padding-bottom: 14px; + border-bottom: 1px solid #424242; } -.object-direction-wrap { - display: flex; - align-items: center; - justify-content: center; -} -.discrimination-tit { - font-size: 13px; - color: #fff; - font-weight: 500; -} - -.object-size-wrap { - display: flex; - min-height: 206px; - gap: 24px; - margin-top: 14px; - .object-size-img { - position: relative; - flex: none; - width: 200px; - background-color: #fff; - img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +// 처마∙케라바 변경 +.eaves-keraba-table{ + display: table; + border-collapse: collapse; + .eaves-keraba-item{ + display: table-row; + .eaves-keraba-th, + .eaves-keraba-td{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + display: table-cell; + vertical-align: middle; + padding-bottom: 14px; + } + .eaves-keraba-td{ + padding-left: 10px; + } + .eaves-keraba-ico{ + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + background-color: #3D3D3D; + border: 1px solid #3D3D3D; + border-radius: 2px; + cursor: pointer; + &.act{ + border: 1px solid #ED0004; + } + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0; + } + } + } +} +.guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-bottom: 24px; + &.sm{ + margin-bottom: 15px; + } + span{ + display: block; } - } } -// 표시변경 -.display-change-wrap { - margin: 24px 0; -} -.warning { - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: #ffafaf; +// 지붕면 할당 +.allocation-select-wrap{ + display: flex; + align-items: center; + padding-bottom: 14px; + border-bottom: 1px solid #424242; + margin-bottom: 14px; + span{ + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-bold-weight; + margin-right: 10px; + } + .allocation-edit{ + display: flex; + align-items: center; + height: 30px; + padding: 0 10px; + margin-left: 5px; + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + border: 1px solid #484848; + background-color: #323234; + i{ + display: block; + width: 12px; + height: 12px; + margin-right: 5px; + background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center; + background-size: cover; + } + } } -// 각 변 속성 변경 -.radio-grid-wrap { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px 15px; +.block-box{ + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; + .flex-ment{ + gap: 10px; + .dec{ + text-decoration: underline; + } + .delete{ + display: block; + width: 15px; + height: 15px; + background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } } -// 면 흐름 설정 -.drawing-flow-wrap { - display: flex; - gap: 10px; - .discrimination-box { +.icon-btn-wrap{ + flex: 1; + display: flex; + align-items: center; + gap: 5px; + button{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 30px; + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + border: 1px solid #646464; + border-radius: 2px; + padding: 0 10px; + transition: all .15s ease-in-out; + i{ + height: 15px; + display: block; + margin-left: 10px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all .15s ease-in-out; + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); + width: 15px; + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg); + width: 18px; + } + } + &.act, + &:hover{ + color: #101010; + border: 1px solid #101010; + background-color: #fff; + i{ + &.allocation01{ + background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg); + } + &.allocation02{ + background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg); + } + } + } + } +} + +// 경사설정 +.slope-wrap{ + padding-bottom: 24px; + border-bottom: 1px solid #424242; +} + +// 면형상 배치 +.plane-frame-wrap{ + display: flex; + gap: 10px; + .plane-shape-wrap{ + flex: none; + width: 73px; + } +} + +.plane-shape-menu{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 5px; + .shape-menu-box{ + border-radius: 2px; + width: 34px; + height: 34px; + background-color: #373737; + border: 1px solid #676767; + transition: background .15s ease-in-out, border .15s ease-in-out; + .shape-box{ + display: flex; + justify-content: center; + align-items: center; + position: relative; + width: 100%; + height: 100%; + border-radius: 2px; + } + &.act, + &:hover{ + border-color: #008BFF; + background-color: #008BFF; + } + } +} + +.shape-library{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 5px; + padding-top: 5px; + .library-btn{ + width: 100%; + height: 34px; + border: 1px solid #6C6C6C; + border-radius: 2px; + background-color: #373737; + background-repeat: no-repeat; + background-position: center; + transition: all .15s ease-in-out; + &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;} + &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;} + &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;} + &:hover{ + border-color: #1083E3; + background-color: #1083E3; + } + } +} + +.plane-detail-wrap{ + display: flex; + flex-direction: column; + flex: 1; +} +.plane-shape-wrapper{ flex: 1; display: flex; flex-direction: column; - .object-direction-wrap { - flex: 1; + gap: 10px; + .plane-box{ + width: 100%; + padding: 10px 18px; + border-radius: 2px; + background-color: #313131; + border: 1px solid #484848; + .plane-box-tit{ + font-size: $pop-normal-size; + font-weight: 600; + color: $pop-color; + margin-bottom: 10px; + } + &.shape-box{ + .shape-box-inner{ + display: flex; + gap:15px; + min-height: 140px; + .shape-img{ + position: relative; + flex: none; + width: 150px; + background-color: #fff; + border-radius: 2px; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + .shape-data{ + flex: 1; + .eaves-keraba-table{ + .eaves-keraba-item{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 10px; + } + &:last-child{ + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 0px; + } + } + } + } + } + } + } + &.direction-box{ + flex: 1; + display: flex; + flex-direction: column; + .plane-direction-box{ + flex: 1; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + } + } } - &:first-child { - flex: none; - width: 195px; +} +.plane-direction{ + width: 150px; + position: relative; + height: 120px; + span{ + position: absolute; + font-size: 12px; + font-weight: 500; + color: #B1B1B1; + &.top{top: 0; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 0; transform: translateY(-50%);} + &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);} + &.left{top: 50%; left: 0; transform: translateY(-50%);} + } + .plane-btn{ + position: absolute; + width: 28px; + height: 28px; + background-color: #777777; + background-image: url(../../public/static/images/canvas/plane_arr.svg); + background-size: 12px 13px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + transition: all .15s ease-in-out; + &.up{top: 22px; left: 50%; transform: translateX(-50%);} + &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);} + &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);} + &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);} + &:hover, + &.act{ + background-color: #fff; + background-image: url(../../public/static/images/canvas/plane_arr_act.svg); + } } - } } -.compas-box { - display: flex; - align-items: center; - justify-content: center; +.plane-tab-guide{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-top: 10px; +} +.plane-shape-btn{ + padding-top: 10px; + margin-top: auto; + button{ + display: block; + width: 100%; + } +} + +// 오브젝트 배치 +.mb-box{ + margin-bottom: 24px; +} + +.object-direction-wrap{ + display: flex; + align-items: center; + justify-content: center; +} +.discrimination-tit{ + font-size: 13px; + color: #fff; + font-weight: 500; +} + +.object-size-wrap{ + display: flex; + min-height: 206px; + gap: 24px; + margin-top: 14px; + .object-size-img{ + position: relative; + flex: none; + width: 200px; + background-color: #fff; + img{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +} + +// 표시변경 +.display-change-wrap{ + margin: 24px 0; +} +.warning{ + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: #FFAFAF; +} + +// 각 변 속성 변경 +.radio-grid-wrap{ + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px 15px; +} + +// 면 흐름 설정 +.drawing-flow-wrap{ + display: flex; + gap: 10px; + .discrimination-box{ + flex: 1; + display: flex; + flex-direction: column; + .object-direction-wrap{ + flex: 1; + } + &:first-child{ + flex: none; + width: 195px; + } + } +} + +.compas-box{ + display: flex; + align-items: center; + justify-content: center; } .compas-box-inner { - position: relative; - width: 200px; - height: 200px; - border-radius: 50%; - - .circle { - position: absolute; - width: 12px; - height: 12px; - border: 1px solid #fff; + position: relative; + width: 200px; + height: 200px; border-radius: 50%; - top: 95%; - left: 50%; - transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ - cursor: pointer; - z-index: 3; - /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ - i { - position: absolute; - top: 12.5px; - left: 50%; - font-size: 11px; - color: #8b8b8b; - font-weight: 500; - -webkit-user-select: none; - -moz-user-select: none; - -ms-use-select: none; - user-select: none; + + .circle { + position: absolute; + width: 12px; + height: 12px; + border: 1px solid #fff; + border-radius: 50%; + top: 95%; + left: 50%; + transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */ + cursor:pointer; + z-index: 3; + /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */ + i{ + position: absolute; + top: 12.5px; + left: 50%; + font-size: 11px; + color: #8B8B8B; + font-weight: 500; + -webkit-user-select: none; + -moz-user-select: none; + -ms-use-select: none; + user-select: none; + } + &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}} + &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}} + &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}} + &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}} + &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}} + &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}} + &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}} + &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}} + &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}} + &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}} + &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}} + &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}} + &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}} + &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}} + &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}} + &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}} + &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}} + &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}} + &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}} + &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}} + &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}} + &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}} + &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}} + &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}} + &.act{ + &::after{ + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 5px; + height: 5px; + background-color: #fff; + border-radius: 50%; + } + i{ + color: #fff; + } + } } - &:nth-child(1) { - transform: rotate(180deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(180deg); - } - } - &:nth-child(2) { - transform: rotate(195deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(165deg); - } - } - &:nth-child(3) { - transform: rotate(210deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(150deg); - } - } - &:nth-child(4) { - transform: rotate(225deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(135deg); - } - } - &:nth-child(5) { - transform: rotate(240deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(120deg); - } - } - &:nth-child(6) { - transform: rotate(255deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(105deg); - } - } - &:nth-child(7) { - transform: rotate(270deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(90deg); - } - } - &:nth-child(8) { - transform: rotate(285deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(75deg); - } - } - &:nth-child(9) { - transform: rotate(300deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(60deg); - } - } - &:nth-child(10) { - transform: rotate(315deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(45deg); - } - } - &:nth-child(11) { - transform: rotate(330deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(30deg); - } - } - &:nth-child(12) { - transform: rotate(345deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(15deg); - } - } - &:nth-child(13) { - transform: rotate(0deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(0deg); - } - } - &:nth-child(14) { - transform: rotate(15deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-15deg); - } - } - &:nth-child(15) { - transform: rotate(30deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-30deg); - } - } - &:nth-child(16) { - transform: rotate(45deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-45deg); - } - } - &:nth-child(17) { - transform: rotate(60deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-60deg); - } - } - &:nth-child(18) { - transform: rotate(75deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-75deg); - } - } - &:nth-child(19) { - transform: rotate(90deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-90deg); - } - } - &:nth-child(20) { - transform: rotate(105deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-105deg); - } - } - &:nth-child(21) { - transform: rotate(120deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-120deg); - } - } - &:nth-child(22) { - transform: rotate(135deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-135deg); - } - } - &:nth-child(23) { - transform: rotate(150deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-150deg); - } - } - &:nth-child(24) { - transform: rotate(165deg) translate(-50%, -50%); - i { - transform: translateX(-50%) rotate(-165deg); - } - } - &.act { - &::after { - content: ''; + .compas{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 5px; - height: 5px; - background-color: #fff; + width: 148px; + height: 148px; + border: 4px solid #fff; border-radius: 50%; - } - i { - color: #fff; - } + .compas-arr{ + width: 100%; + height: 100%; + background: url(../../public/static/images/canvas/compas.svg)no-repeat center; + background-size: 122px 122px; + } } - } - .compas { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 148px; - height: 148px; - border: 4px solid #fff; - border-radius: 50%; - .compas-arr { - width: 100%; - height: 100%; - background: url(../../public/static/images/canvas/compas.svg) no-repeat center; - background-size: 122px 122px; - } - } } -.draw-flow-wrap { - margin: 10px 0; +.draw-flow-wrap{ + margin: 10px 0; } // 지붕모듈선택 -.roof-module-tab { - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 14px; - .module-tab-bx { +.roof-module-tab{ + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; + .module-tab-bx{ + flex: 1; + height: 34px; + line-height: 31px; + border: 1px solid #484848; + border-radius: 2px; + background-color: transparent; + font-size: 12px; + color: #AAA; + text-align: center; + cursor: default; + transition: all .15s ease-in-out; + &.act{ + background-color: #1083E3; + border: 1px solid #1083E3; + color: #fff; + font-weight: 500; + } + } + .tab-arr{ + display: block; + width: 9px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(../../public/static/images/canvas/module_tab_arr.svg); + transition: all .15s ease-in-out; + &.act{ + background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); + } + } +} + +.roof-module-compas{ + margin-bottom: 24px; + .compas-box-inner{ + width: 280px; + height: 253px; + .circle{ + top: 86%; + &:nth-child(1), + &:nth-child(7), + &:nth-child(13), + &:nth-child(19){ + &::before{ + content: ''; + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + width: 1px; + height: 6px; + background-color: #8B8B8B; + } + } + i{ + top: 32px; + } + &.act{ + i{color: #8B8B8B;} + } + } + } +} +.center-wrap{ + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.module-table-flex-wrap{ + display: flex; + gap: 10px; + .outline-form{ + flex: 1; + } +} + +.module-box-tab{ + display: flex; + .module-btn{ + flex: 1; + border-top: 1px solid #505050; + border-bottom: 1px solid #505050; + border-right: 1px solid #505050; + background-color: #454545; + color: #fff; + height: 30px; + font-size: 12px; + font-weight: 400; + transition: all .15s ease-in-out; + &:first-child{ + border-left: 1px solid #505050; + } + &.act{ + border-color: #fff; + background-color: #fff; + color: #101010; + } + } +} + +.module-table-box{ flex: 1; - height: 34px; - line-height: 31px; - border: 1px solid #484848; + background-color: #3D3D3D; border-radius: 2px; - background-color: transparent; - font-size: 12px; - color: #aaa; - text-align: center; - cursor: default; - transition: all 0.15s ease-in-out; - &.act { - background-color: #1083e3; - border: 1px solid #1083e3; - color: #fff; - font-weight: 500; - } - } - .tab-arr { - display: block; - width: 9px; - height: 14px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../../public/static/images/canvas/module_tab_arr.svg); - transition: all 0.15s ease-in-out; - &.act { - background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); - } - } -} - -.roof-module-compas { - margin-bottom: 24px; - .compas-box-inner { - width: 280px; - height: 253px; - .circle { - top: 86%; - &:nth-child(1), - &:nth-child(7), - &:nth-child(13), - &:nth-child(19) { - &::before { - content: ''; - position: absolute; - top: 20px; - left: 50%; - transform: translateX(-50%); - width: 1px; - height: 6px; - background-color: #8b8b8b; + .module-table-inner{ + padding: 10px; + .outline-form{ + span{ + width: auto; + } } - } - i { - top: 32px; - } - &.act { - i { - color: #8b8b8b; + .module-table-tit{ + padding: 10px 0; + font-size: 12px; + color: #fff; + border-bottom: 1px solid #4D4D4D; + } + .eaves-keraba-table{ + width: 100%; + margin-top: 15px; + .eaves-keraba-th{ + width: 72px; + } + .eaves-keraba-th, + .eaves-keraba-td{ + padding-bottom: 5px; + } + } + .self-table-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + padding-bottom: 15px; + } + } + .warning-guide{ + padding: 20px; + .warning{ + color: #FFCACA; + max-height: 55px; + overflow-y: auto; + padding-right: 30px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } } - } } - } -} -.center-wrap { - display: flex; - flex-direction: column; - align-items: center; - gap: 20px; } -.module-table-flex-wrap { - display: flex; - gap: 10px; - .outline-form { - flex: 1; - } +.module-self-table{ + display: table; + border-top: 1px solid #4D4D4D; + border-collapse: collapse; + width: 100%; + .self-table-item{ + display: table-row; + .self-item-td, + .self-item-th{ + display: table-cell; + vertical-align: middle; + border-bottom: 1px solid #4D4D4D; + } + .self-item-th{ + width: 60px; + font-size: 12px; + font-weight: 500; + color: #fff; + } + .self-item-td{ + font-size: 12px; + font-weight: 400; + color: #fff; + padding: 15px 20px; + } + } } -.module-box-tab { - display: flex; - .module-btn { - flex: 1; - border-top: 1px solid #505050; - border-bottom: 1px solid #505050; - border-right: 1px solid #505050; - background-color: #454545; - color: #fff; - height: 30px; - font-size: 12px; - font-weight: 400; - transition: all 0.15s ease-in-out; - &:first-child { - border-left: 1px solid #505050; - } - &.act { - border-color: #fff; - background-color: #fff; - color: #101010; - } - } -} - -.module-table-box { - flex: 1; - background-color: #3d3d3d; - border-radius: 2px; - .module-table-inner { - padding: 10px; - .outline-form { - span { - width: auto; - } - } - .module-table-tit { - padding: 10px 0; - font-size: 12px; - color: #fff; - border-bottom: 1px solid #4d4d4d; - } - .eaves-keraba-table { - width: 100%; - margin-top: 15px; - .eaves-keraba-th { - width: 72px; - } - .eaves-keraba-th, - .eaves-keraba-td { - padding-bottom: 5px; - } - } - .self-table-tit { - font-size: 12px; - font-weight: 500; - color: #fff; - padding-bottom: 15px; - } - } - .warning-guide { - padding: 20px; - .warning { - color: #ffcaca; - max-height: 55px; - overflow-y: auto; - padding-right: 30px; - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #d9d9d9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - } - } -} - -.module-self-table { - display: table; - border-top: 1px solid #4d4d4d; - border-collapse: collapse; - width: 100%; - .self-table-item { - display: table-row; - .self-item-td, - .self-item-th { - display: table-cell; - vertical-align: middle; - border-bottom: 1px solid #4d4d4d; - } - .self-item-th { - width: 60px; - font-size: 12px; - font-weight: 500; - color: #fff; - } - .self-item-td { - font-size: 12px; - font-weight: 400; - color: #fff; - padding: 15px 20px; - } - } -} - -.self-table-flx { - display: flex; - align-items: center; - margin-top: 15px; - button { - margin-left: auto; - } -} -.hexagonal-wrap { - .hexagonal-item { - padding: 15px 0; - border-bottom: 1px solid #4d4d4d; - &:first-child { - padding-top: 0; - } - &:last-child { - padding-bottom: 0; - border: none; - } - .hexagonal-flx-auto { - display: flex; - justify-content: space-between; - } - .hexagonal-flx { - display: flex; - align-items: center; - button { +.self-table-flx{ + display: flex; + align-items: center; + margin-top: 15px; + button{ margin-left: auto; - } } - } +} +.hexagonal-wrap{ + .hexagonal-item{ + padding: 15px 0; + border-bottom: 1px solid #4D4D4D; + &:first-child{ + padding-top: 0; + } + &:last-child{ + padding-bottom: 0; + border: none; + } + .hexagonal-flx-auto{ + display: flex; + justify-content: space-between; + } + .hexagonal-flx{ + display: flex; + align-items: center; + button{ + margin-left: auto; + } + } + } } // 회로 및 가대설정 -.circuit-check-inner { - padding: 5px 0; +.circuit-check-inner{ + padding: 5px 0; } -.x-scroll-table { - overflow-x: auto; - padding-bottom: 5px; - .roof-module-table { - min-width: 1200px; - } - &::-webkit-scrollbar { - height: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #d9d9d9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } -} - -.circuit-right-wrap { - display: flex; - justify-content: flex-end; -} - -.circuit-data-form { - display: flex; - flex-direction: column; - gap: 5px; - min-height: 60px; - padding: 12px; - border: 1px solid rgba(255, 255, 255, 0.2); - span { - display: inline-flex; - align-items: center; - .del { - display: block; - margin-left: 10px; - width: 15px; - height: 15px; - background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center; - background-size: cover; +.x-scroll-table{ + overflow-x: auto; + padding-bottom: 5px; + .roof-module-table{ + min-width: 1200px; + } + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; } - } -} -.circuit-table-tit { - color: #fff; - font-size: 12px; - font-weight: 600; - padding: 11px 10px; - background-color: #474747; - border: 1px solid #505050; - border-bottom: none; } -.circuit-overflow { - max-height: 400px; - overflow-y: auto; - margin-bottom: 15px; - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #d9d9d9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } +.circuit-right-wrap{ + display: flex; + justify-content: flex-end; } -.circuit-table-flx-wrap { - display: flex; - gap: 10px; - margin-bottom: 10px; - .circuit-table-flx-box { - flex: 1; +.circuit-data-form{ display: flex; flex-direction: column; - .bottom-wrap { - margin-top: auto; + gap: 5px; + min-height: 60px; + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.20); + span{ + display: inline-flex; + align-items: center; + .del{ + display: block; + margin-left: 10px; + width: 15px; + height: 15px; + background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center; + background-size: cover; + } } - .roof-module-table { - table { - table-layout: fixed; - } - } - } +} +.circuit-table-tit{ + color: #fff; + font-size: 12px; + font-weight: 600; + padding: 11px 10px; + background-color: #474747; + border: 1px solid #505050; + border-bottom: none; } -.circuit-count-input { - display: flex; - align-items: center; - gap: 10px; +.circuit-overflow{ + max-height: 400px; + overflow-y: auto; + margin-bottom: 15px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #D9D9D9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.circuit-table-flx-wrap{ + display: flex; + gap: 10px; + margin-bottom: 10px; + .circuit-table-flx-box{ + flex: 1; + display: flex; + flex-direction: column; + .bottom-wrap{ + margin-top: auto; + } + .roof-module-table{ + table{ + table-layout: fixed; + } + } + } +} + +.circuit-count-input{ + display: flex; + align-items: center; + gap: 10px; } // 모듈부가기능 -.additional-radio-wrap { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 15px 0; - margin-bottom: 24px; +.additional-radio-wrap{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 0; + margin-bottom: 24px; } -.additional-wrap { - padding: 24px 0; - border-top: 1px solid #424242; +.additional-wrap{ + padding: 24px 0; + border-top: 1px solid #424242; } -.additional-color-wrap { - display: flex; - align-items: center; - padding: 5px 0; - gap: 15px; - .additional-color-box { +.additional-color-wrap{ display: flex; align-items: center; - gap: 8px; - .additional-color { - display: block; - width: 16px; - height: 16px; - &.pink { - border: 2px solid #ce1c9c; - background-color: #16417d; - } - &.white { - border: 2px solid #fff; - background-color: #001027; - } + padding: 5px 0; + gap: 15px; + .additional-color-box{ + display: flex; + align-items: center; + gap: 8px; + .additional-color{ + display: block; + width: 16px; + height: 16px; + &.pink{ + border: 2px solid #ce1c9c; + background-color: #16417D; + } + &.white{ + border: 2px solid #FFF; + background-color: #001027; + } + } } - } } // 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; +.color-setting-wrap{ + padding-bottom: 15px; + border-bottom: 1px solid #424242; + .color-tit{ + font-size: 13px; 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; - } + color: #ffffff; + margin-bottom: 10px; } - .default-color-wrap { - margin-top: 25px; - .default-tit { + .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; - } - .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-box{ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 80px; + background-color: #fff; } - } -} -.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%; - min-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 15px 20px; - .line-form { - position: relative; - display: flex; - flex-direction: column; - justify-content: flex-end; - min-width: 102px; - min-height: 40px; - margin: 0 auto; - - &::before { - content: ''; - position: absolute; - bottom: 0px; - left: 0; - width: 100%; - height: 40px; - border-left: 1px dashed #101010; - border-right: 1px dashed #101010; +.font-btn-wrap{ + margin-bottom: 15px; + button{ + width: 100%; + height: 30px; + line-height: 28px; } - .line-font-box { - .font { - display: block; - padding-bottom: 15px; - color: #101010; - text-align: center; - line-height: 1; - } - .line { - position: relative; +} + +.line-color-wrap{ + margin-bottom: 15px; + .color-btn{ 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; - } - } + height: 30px; + border-radius: 2px; + } +} + +.form-box{ + width: 100%; + background-color: #fff; + padding: 10px 15px 20px; + .line-form{ + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + min-width: 102px; + min-height: 40px; + margin: 0 auto; + + &::before{ + content: ''; + position: absolute; + bottom: 0px; + left: 0; + width: 100%; + height: 40px; + border-left: 1px dashed #101010; + border-right: 1px dashed #101010; + } + .line-font-box{ + .font{ + display: block; + padding-bottom: 15px; + color: #101010; + text-align: center; + line-height: 1; + } + .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-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: ''; +.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: 8px; - height: 8px; + width: 100px; + height: 100px; 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-top{ + margin-bottom: 15px; } -.size-option-side { - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); +.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; +.size-option-wrap{ + width: 88px; + margin: 0 auto; + .size-option{ + display: flex; + align-items: center; + input{ + width: 100%; + flex: 1; + } + span{ + flex: none; + } } - span { - flex: none; - } - } } //이미지 크기 설정 -.range-wrap { - display: flex; - align-items: center; - input { - flex: 1; - margin-right: 10px; - } - label { - flex: none; - text-align: right; - width: 38px; - font-size: 13px; - color: #fff; - font-weight: 500; - } +.range-wrap{ + display: flex; + align-items: center; + input{ + flex: 1; + margin-right: 10px; + } + label{ + flex: none; + text-align: right; + width: 38px; + font-size: 13px; + color: #fff; + font-weight: 500; + } } // 이미지 불러오기 -.img-flex-box { - display: flex; - align-items: center; +.img-flex-box{ + display: flex; + align-items: center; } -.img-load-from { - margin-top: 20px; - .img-load-item { - border-top: 1px solid #424242; - padding: 18px 0; - .d-check-radio { - margin-bottom: 20px; +.img-load-from{ + margin-top: 20px; + .img-load-item{ + border-top: 1px solid #424242; + padding: 18px 0; + .d-check-radio{ + margin-bottom: 20px; + } } - } - border-bottom: 1px solid #424242; + border-bottom: 1px solid #424242; } + +// 지붕모듈선택 변경 +.module-table-box{ + &.none-flex{ + flex: none; + width: 230px; + } +} +.module-table-flex-wrap{ + &.tab2{ + margin-top: 10px; + gap: 15px; + + } + .module-flex-item{ + flex: 1; + .module-flex-item-tit{ + font-size: 12px; + font-weight: 500; + color: #fff; + padding-bottom: 10px; + border-bottom: 1px solid #4D4D4D; + } + .flex-item-btn-wrap{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 8px; + margin-bottom: 24px; + } + &.non-flex{ + display: flex; + flex-direction: column; + justify-content: flex-end; + flex: none; + width: 260px; + } + } +} + +.module-table-box{ + .module-table-inner{ + .module-table-flex-wrap{ + &.tab2{ + .eaves-keraba-table{ + .eaves-keraba-th{ + width: 90px; + } + .eaves-keraba-td{ + padding-left: 0; + padding-bottom: 5px; + } + } + } + } + } +} +.keraba-flex{ + display: flex; + align-items: center; + .grid-select{ + flex: none; + width: 110px; + } + .outline-form{ + justify-content: flex-end; + } +} +.module-bottom{ + padding-bottom: 15px; + border-bottom: 1px solid #4D4D4D; +} + +.reset-word{ + font-size: 12px; + color: #FFCACA; + font-weight: 400; + margin-top: 10px; +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 6c65fec7..d87bbc76 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -226,8 +226,8 @@ button{ border: 1px solid #484848; color: #fff; &.blue{ - background-color: #414E6C; - border: 1px solid #414E6C; + background-color: #4C6FBF; + border: 1px solid #4C6FBF; &:hover{ background-color: #414E6C; border: 1px solid #414E6C; diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss index de01ee36..de53d584 100644 --- a/src/styles/_submodal.scss +++ b/src/styles/_submodal.scss @@ -336,4 +336,36 @@ background-color: transparent; } } +} + +// 견적 복사 +.estimate-copy-info-item{ + margin-bottom: 20px; + &:last-child{ + margin-bottom: 0; + } + .estimate-copy-info-tit{ + font-size: 13px; + color: #101010; + font-weight: 500; + margin-bottom: 10px; + } + .estimate-copy-info-box{ + display: flex; + gap: 5px; + .estimate-copy-sel{ + flex: 1 1 auto; + } + .estimate-copy-id{ + flex: none; + display: flex; + align-items: center; + justify-content: center; + width: 150px; + background-color: #FAFAFA; + border: 1px solid #EEEEEE; + font-size: 13px; + color: #999; + } + } } \ No newline at end of file From 5fc977949070ef03ec9ae542589e6bc82a24bce1 Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 27 Nov 2024 10:03:48 +0900 Subject: [PATCH 09/14] =?UTF-8?q?=ED=8F=B0=ED=8A=B8=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/option/useCanvasSetting.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index fa3c42eb..c3155512 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -7,7 +7,7 @@ import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' import { POLYGON_TYPE } from '@/common/common' -import { fontSelector, globalFontAtom } from '@/store/fontAtom' +import { globalFontAtom } from '@/store/fontAtom' import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' let objectNo @@ -119,21 +119,23 @@ export function useCanvasSetting() { }, [planSizeSettingMode]) const getFonts = (itemValue) => { + if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' } const data = [ { id: 1, name: 'MS PGothic', value: 'MS PGothic' }, { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' }, { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' }, { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' }, { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' }, - ].filter((font) => font.value === itemValue)[0] + ].filter((font) => font.value === itemValue) if (data.length !== 0) { - return data + return data[0] } else { return { id: 1, name: 'MS PGothic', value: 'MS PGothic' } } } const getFontSizes = (itemValue) => { + if (!itemValue) return { id: 16, name: 16, value: 16 } const data = [ ...Array.from({ length: 4 }).map((_, index) => { return { id: index + 8, name: index + 8, value: index + 8 } @@ -144,29 +146,31 @@ export function useCanvasSetting() { { id: 36, name: 36, value: 36 }, { id: 48, name: 48, value: 48 }, { id: 72, name: 72, value: 72 }, - ].filter((fontSize) => fontSize.value === itemValue)[0] + ].filter((fontSize) => fontSize.value === itemValue) if (data.length !== 0) { - return data + return data[0] } else { return { id: 16, name: 16, value: 16 } } } const getFontStyles = (itemValue) => { + if (!itemValue) return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' } const data = [ { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }, { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' }, { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' }, { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' }, - ].filter((fontStyle) => fontStyle.value === itemValue)[0] + ].filter((fontStyle) => fontStyle.value === itemValue) if (data.length !== 0) { - return data + return data[0] } else { return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' } } } const getFontColors = (itemValue) => { + if (!itemValue) return { id: 'black', name: getMessage('color.black'), value: 'black' } const data = [ { id: 'black', name: getMessage('color.black'), value: 'black' }, { id: 'red', name: getMessage('color.red'), value: 'red' }, @@ -177,9 +181,9 @@ export function useCanvasSetting() { { id: 'pink', name: getMessage('color.pink'), value: 'pink' }, { id: 'gold', name: getMessage('color.gold'), value: 'gold' }, { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' }, - ].filter((fontColor) => fontColor.value === itemValue)[0] + ].filter((fontColor) => fontColor.value === itemValue) if (data.length !== 0) { - return data + return data[0] } else { return { id: 'black', name: getMessage('color.black'), value: 'black' } } From 5c3e4d76cf799b2a9bb76cccce42999c3190f3cd Mon Sep 17 00:00:00 2001 From: basssy Date: Wed, 27 Nov 2024 10:48:00 +0900 Subject: [PATCH 10/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 2 +- .../estimate/useEstimateController.js | 79 ++++++++++--------- 2 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 88e2fa1d..29fe5c84 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -315,7 +315,7 @@ export default function Estimate({ params }) { sapSalesStoreCd: session.custCd, docTpCd: estimateContextState.estimateType, priceCd: showPriceCd, - itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0'), + itemIdList: estimateContextState.itemList.filter((item) => item.delFlg === '0' && item.paDispOrder === null), } if (param.itemIdList.length > 0) { diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 23636c4c..b854bac7 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -126,6 +126,8 @@ export const useEstimateController = (planNo) => { const handleEstimateSubmit = async () => { //0. 필수체크 let flag = true + let fileFlg = true + let itemFlg = true if (estimateData.charger.trim().length === 0) { flag = false return alert(getMessage('estimate.detail.save.requiredCharger')) @@ -143,47 +145,50 @@ export const useEstimateController = (planNo) => { //첨부파일을 첨부안했는데 //아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼 - let fileFlg = true - if (estimateData.fileList.length < 1) { - if (estimateData.itemList.length > 1) { - estimateData.itemList.map((row) => { - if (row.fileUploadFlg === '1') { - if (fileFlg) { - if (estimateData.fileFlg === '0') { - fileFlg = false - return alert(getMessage('estimate.detail.save.requiredFileUpload')) + if (flag) { + if (estimateData.fileList.length < 1) { + if (estimateData.itemList.length > 1) { + estimateData.itemList.map((row) => { + if (row.fileUploadFlg === '1') { + if (fileFlg) { + if (estimateData.fileFlg === '0') { + fileFlg = false + return alert(getMessage('estimate.detail.save.requiredFileUpload')) + } } } - } - }) - } - } - let itemFlg = true - estimateData.itemList.map((item) => { - item.amount = item.amount?.replaceAll(',', '') - item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2) - item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2) - - if (!item.paDispOrder) { - if (itemFlg) { - if (isNaN(item.amount)) { - item.amount = 0 - } else { - Number(item.amount) - } - - if (item.amount < 1) { - itemFlg = false - return alert(getMessage('estimate.detail.save.requiredAmount')) - } - - if (Number(item.salePrice) < 1) { - itemFlg = false - return alert(getMessage('estimate.detail.save.requiredSalePrice')) - } + }) } } - }) + } + + if (fileFlg) { + estimateData.itemList.map((item) => { + item.amount = item.amount?.replaceAll(',', '') + item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2) + item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2) + + if (!item.paDispOrder) { + if (itemFlg) { + if (isNaN(item.amount)) { + item.amount = 0 + } else { + Number(item.amount) + } + + if (item.amount < 1) { + itemFlg = false + return alert(getMessage('estimate.detail.save.requiredAmount')) + } + + if (Number(item.salePrice) < 1) { + itemFlg = false + return alert(getMessage('estimate.detail.save.requiredSalePrice')) + } + } + } + }) + } if (flag && fileFlg && itemFlg) { //1. 첨부파일 저장시작 From b6873f4d27674e73b13ac1eb1a1fe287485cb90e Mon Sep 17 00:00:00 2001 From: basssy Date: Wed, 27 Nov 2024 11:24:26 +0900 Subject: [PATCH 11/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 8 +++++--- src/hooks/floorPlan/estimate/useEstimateController.js | 10 ++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 29fe5c84..bbe7c4e0 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -422,7 +422,8 @@ export default function Estimate({ params }) { //현재 PKG용량값 가져오기 let totVolKw = estimateContextState.totVolKw * 1000 - let pkgTotPrice = pkgAsp.replaceAll(',', '') * totVolKw + let pkgTotPrice = pkgAsp.replaceAll(',', '') * totVolKw * 1000 + setEstimateContextState({ pkgAsp: pkgAsp, pkgTotPrice: pkgTotPrice.toFixed(3), @@ -655,6 +656,7 @@ export default function Estimate({ params }) { if (item.moduleFlg === '1') { //용량(Kw)은 모듈플래그 1만 합산 const volKw = (item.pnowW * amount) / 1000 + // const volKw = item.pnowW * amount totVolKw += volKw } // const price @@ -699,11 +701,11 @@ export default function Estimate({ params }) { if (item.moduleFlg === '1') { //용량(Kw)은 모듈플래그 1만 합산 const volKw = (item.pnowW * amount) / 1000 + // const volKw = item.pnowW * amount totVolKw += volKw } - setEstimateContextState({ - pkgTotPrice: estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw, + pkgTotPrice: estimateContextState.pkgAsp.replaceAll(',', '') * totVolKw * 1000, }) //pkgTotPrice // const saleTotPrice diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index b854bac7..e7775408 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -173,7 +173,7 @@ export const useEstimateController = (planNo) => { if (isNaN(item.amount)) { item.amount = 0 } else { - Number(item.amount) + item.amount = Number(item.amount) } if (item.amount < 1) { @@ -181,7 +181,13 @@ export const useEstimateController = (planNo) => { return alert(getMessage('estimate.detail.save.requiredAmount')) } - if (Number(item.salePrice) < 1) { + if (isNaN(item.salePrice)) { + item.salePrice = 0 + } else { + item.salePrice = Number(item.salePrice) + } + + if (item.salePrice < 1) { itemFlg = false return alert(getMessage('estimate.detail.save.requiredSalePrice')) } From 19ed919cc107791694f17ce9defefaf6524dda22 Mon Sep 17 00:00:00 2001 From: basssy Date: Wed, 27 Nov 2024 11:50:41 +0900 Subject: [PATCH 12/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 6 ++--- .../estimate/useEstimateController.js | 22 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index bbe7c4e0..02bafff0 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -438,7 +438,7 @@ export default function Estimate({ params }) { //itemChangeFlg = 1, partAdd = 0 셋팅 let amount = Number(value.replace(/[^0-9]/g, '').replaceAll(',', '')) if (isNaN(amount)) { - amount = 0 + amount = '0' } else { amount = amount.toLocaleString() } @@ -647,7 +647,7 @@ export default function Estimate({ params }) { if (item.delFlg === '0') { let amount = Number(item?.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) if (isNaN(amount)) { - amount = 0 + amount = '0' } let price = Number(item?.saleTotPrice?.replaceAll(',', '')) if (isNaN(price)) { @@ -688,7 +688,7 @@ export default function Estimate({ params }) { let saleTotPrice = Number(item.saleTotPrice?.replaceAll(',', '')) if (isNaN(amount)) { - amount = 0 + amount = '0' } if (isNaN(saleTotPrice)) { diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index e7775408..171b01e1 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -171,9 +171,7 @@ export const useEstimateController = (planNo) => { if (!item.paDispOrder) { if (itemFlg) { if (isNaN(item.amount)) { - item.amount = 0 - } else { - item.amount = Number(item.amount) + item.amount = '0' } if (item.amount < 1) { @@ -181,15 +179,17 @@ export const useEstimateController = (planNo) => { return alert(getMessage('estimate.detail.save.requiredAmount')) } - if (isNaN(item.salePrice)) { - item.salePrice = 0 - } else { - item.salePrice = Number(item.salePrice) - } + console.log('상세::', estimateData) + if (estimateData.estimateType !== 'YJSS') { + console.log('아이템 체크::', item.salePrice) + if (isNaN(item.salePrice)) { + item.salePrice = '0' + } - if (item.salePrice < 1) { - itemFlg = false - return alert(getMessage('estimate.detail.save.requiredSalePrice')) + if (item.salePrice < 1) { + itemFlg = false + return alert(getMessage('estimate.detail.save.requiredSalePrice')) + } } } } From b728be3786ca0b4360d92d982cacdd2b2e974f68 Mon Sep 17 00:00:00 2001 From: basssy Date: Wed, 27 Nov 2024 12:13:07 +0900 Subject: [PATCH 13/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 27 +++++++++---------- .../estimate/useEstimateController.js | 2 -- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 02bafff0..7bb9c5ad 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -530,8 +530,8 @@ export default function Estimate({ params }) { if (estimateContextState.estimateType === 'YJSS') { if (res.pkgMaterialFlg === '0') { - //updates.showSalePrice = '0' - //updates.showSaleTotPrice = '0' + updates.showSalePrice = '0' + updates.showSaleTotPrice = '0' } } //104671 @@ -642,8 +642,8 @@ export default function Estimate({ params }) { console.log('YJOD 토탈만들어주기::::::::::', estimateContextState.itemList) estimateContextState.itemList.map((item) => { - //delete item.showSalePrice - //delete item.showSaleTotPrice + delete item.showSalePrice + delete item.showSaleTotPrice if (item.delFlg === '0') { let amount = Number(item?.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) if (isNaN(amount)) { @@ -720,8 +720,8 @@ export default function Estimate({ params }) { if (!item.paDispOrder) { //paDispOrder if (item.pkgMaterialFlg === '0') { - //item.showSalePrice = '0' - //item.showSaleTotPrice = '0' + item.showSalePrice = '0' + item.showSaleTotPrice = '0' } } } @@ -1271,7 +1271,7 @@ export default function Estimate({ params }) {
- + @@ -1397,16 +1397,13 @@ export default function Estimate({ params }) { /> {/*
- OPEN아이콘 처리 -
*/} + + */} - - {/* {item?.showSaleTotPrice === '0' ? ( - - ) : ( - - )} */} + ) } else { diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 171b01e1..9ac68243 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -179,9 +179,7 @@ export const useEstimateController = (planNo) => { return alert(getMessage('estimate.detail.save.requiredAmount')) } - console.log('상세::', estimateData) if (estimateData.estimateType !== 'YJSS') { - console.log('아이템 체크::', item.salePrice) if (isNaN(item.salePrice)) { item.salePrice = '0' } From 0ed7efb3af641d70c0a3bc7bf290f073c168dd36 Mon Sep 17 00:00:00 2001 From: basssy Date: Wed, 27 Nov 2024 12:44:44 +0900 Subject: [PATCH 14/14] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=ED=8A=B9?= =?UTF-8?q?=EC=9D=B4=EC=82=AC=ED=95=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 35 ++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 7bb9c5ad..3b5f72d7 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -1105,13 +1105,34 @@ export default function Estimate({ params }) {
{specialNoteList.map((row) => { if (row.code === showContentCode) { - return ( -
-
{row.codeNm}
- {/*
*/} -
-
- ) + let showcontent = popShowSpecialNoteList.find((item) => { + return item.code === showContentCode + }) + + if (isObjectNotEmpty(showcontent)) { + return ( +
+
{showcontent.codeNm}
+
+
+ ) + } else { + let pushData = [] + popShowSpecialNoteList.map((item) => { + let option = showContentCode.split(',') + option.map((item2) => { + if (item.code === item2) { + pushData.push(item) + } + }) + }) + return pushData.map((item) => ( +
+
{item.codeNm}
+
+
+ )) + } } })}
- {data.name} - + {header.name} +
{convertNumberToPriceDecimal(item?.saleTotPrice?.replaceAll(',', ''))}{convertNumberToPriceDecimalToFixed(item?.saleTotPrice?.replaceAll(',', ''), 2)} + {convertNumberToPriceDecimal(item?.showSaleTotPrice === '0' ? null : item?.saleTotPrice?.replaceAll(',', ''))} +