diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 66c0e0b7..0f3b1b99 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -33,9 +33,9 @@ export default function ColorPickerModal(props) { }, [isShow]) return ( - +
-
+

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

+
) diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx index 76656837..732d8ff7 100644 --- a/src/components/common/draggable/WithDraggable.jsx +++ b/src/components/common/draggable/WithDraggable.jsx @@ -20,7 +20,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handleOnDrag(e, data)} - handle={handle === '' ? '.modal-head' : handle} + handle={handle === '' ? '.modal-handle' : handle} > {children} diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index 15f1146a..26d07ea7 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -67,9 +67,9 @@ export default function FontSetting(props) { } return ( - +
-
+

{getMessage('modal.font')}

+
) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 5ef2c9da..21e87620 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -99,7 +99,9 @@ export default function Estimate({}) { const initEstimate = (currPid = currentPid) => { console.log('๐Ÿš€ ~ initEstimate ~ currPid:', currPid) + closeAll() setMenuNumber(5) + setObjectNo(objectRecoil.floorPlanObjectNo) setPlanNo(currPid) @@ -137,7 +139,6 @@ export default function Estimate({}) { }, [selectedPlan]) useEffect(() => { - closeAll() initEstimate() }, []) @@ -619,7 +620,7 @@ export default function Estimate({}) { updates.partAdd = '0' updates.saleTotPrice = (Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].salePrice.replaceAll(',', '')).toLocaleString() updates.showSaleTotPrice = ( - Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].showSalePrice?.replaceAll(',', '') + Number(amount.replaceAll(',', '')) * estimateContextState.itemList[index].salePrice?.replaceAll(',', '') ).toLocaleString() updateList = estimateContextState.itemList.map((item) => { @@ -681,7 +682,6 @@ export default function Estimate({}) { let updateList = [] let updates = {} get({ url: apiUrl }).then((res) => { - // console.log('์•„์ดํ…œ๋””ํ…Œ์ผ::::::::', res) updates.objectNo = objectNo updates.planNo = planNo updates.itemId = res.itemId @@ -706,7 +706,6 @@ export default function Estimate({}) { updates.openFlg = res.openFlg if (estimateContextState.estimateType === 'YJSS') { - // console.log('YJSS:::,', res.pkgMaterialFlg) if (res.pkgMaterialFlg === '0') { updates.showSalePrice = '0' updates.showSaleTotPrice = '0' @@ -721,14 +720,19 @@ export default function Estimate({}) { //104671 let bomList = res.itemBomList - // console.log('updates::', updates) updateList = estimateContextState.itemList.map((item) => { if (item.dispOrder === dispOrder) { if (item?.addFlg) { return { ...item, ...updates, saleTotPrice: '' } } else { if (estimateContextState.estimateType === 'YJSS') { - return { ...item, ...updates, salePrice: '', saleTotPrice: '' } + // return { ...item, ...updates, salePrice: '', saleTotPrice: '' } + //ํ™•์ธ + if (updates.pkgMaterialFlg === '1') { + return { ...item, ...updates, showSalePrice: updates.salePrice } + } else { + return { ...item, ...updates, salePrice: '', saleTotPrice: '' } + } } else { return { ...item, ...updates } } @@ -739,7 +743,6 @@ export default function Estimate({}) { return item } }) - //paDispOrder if (bomList) { bomList.map((bomItem, index) => { @@ -879,7 +882,6 @@ export default function Estimate({}) { } const calculateYJSSTotals = (itemList) => { - // console.log(':::itemList::', itemList) itemList.sort((a, b) => a.dispOrder - b.dispOrder) makeUniqueSpecialNoteCd(itemList) itemList.forEach((item) => { @@ -918,7 +920,6 @@ export default function Estimate({}) { } } }) - // console.log('itemList::', itemList) let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0 totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000 @@ -949,30 +950,138 @@ export default function Estimate({}) { setItemChangeYn(false) } else { - estimateContextState.itemList.forEach((item) => { - if (estimateContextState.estimateType === 'YJSS' && !item.paDispOrder && item.pkgMaterialFlg === '0') { - item.showSalePrice = '0' - item.showSaleTotPrice = '0' - } - if (estimateContextState.estimateType === 'YJSS' && item.openFlg === '1') { - item.showSalePrice = '0' - item.showSaleTotPrice = '0' - } - if (estimateContextState.estimateType === 'YJSS' && item.paDispOrder) { - item.showSalePrice = '0' - item.showSaleTotPrice = '0' - } - }) - estimateContextState.itemList.forEach((item) => { - if (estimateContextState.estimateType === 'YJOD' && item.openFlg === '1') { - item.showSalePrice = '0' - item.showSaleTotPrice = '0' - } - if (estimateContextState.estimateType === 'YJOD' && item.paDispOrder) { - item.showSalePrice = '0' - item.showSaleTotPrice = '0' - } - }) + let totals = { + totAmount: 0, + totVolKw: 0, + supplyPrice: 0, + vatPrice: 0, + totPrice: 0, + addSupplyPrice: 0, + pkgTotPrice: 0, + } + estimateContextState.itemList.sort((a, b) => a.dispOrder - b.dispOrder) + makeUniqueSpecialNoteCd(estimateContextState.itemList) + + if (estimateContextState.estimateType === 'YJSS') { + estimateContextState.itemList.forEach((item) => { + if (estimateContextState.estimateType === 'YJSS' && !item.paDispOrder && item.pkgMaterialFlg === '0') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + if (estimateContextState.estimateType === 'YJSS' && item.openFlg === '1') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + if (estimateContextState.estimateType === 'YJSS' && item.paDispOrder) { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + }) + + estimateContextState.itemList.forEach((item) => { + if (item.delFlg === '0') { + let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0 + let salePrice + if (item.moduleFlg === '1') { + const volKw = (item.pnowW * amount) / 1000 + totals.totVolKw += volKw + } + if (amount === 0) { + salePrice = 0 + } else { + salePrice = Number(item.salePrice?.replaceAll(',', '')) || 0 + } + + totals.totAmount += amount + if (item.pkgMaterialFlg === '1') { + const saleTotPrice = amount * salePrice + totals.addSupplyPrice += saleTotPrice + } + + if (!item.paDispOrder) { + if (item.pkgMaterialFlg === '0') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + } else { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + + if (item.openFlg === '1') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + } + }) + let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0 + + totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000 + totals.supplyPrice = totals.addSupplyPrice + totals.pkgTotPrice + totals.vatPrice = totals.supplyPrice * 0.1 + totals.totPrice = totals.supplyPrice + totals.vatPrice + + setEstimateContextState({ + pkgTotPrice: totals.pkgTotPrice, + totAmount: totals.totAmount, + totVolKw: totals.totVolKw.toFixed(2), + supplyPrice: totals.supplyPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + vatPrice: totals.vatPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + totPrice: totals.totPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + }) + } else { + estimateContextState.itemList.forEach((item) => { + if (estimateContextState.estimateType === 'YJOD' && item.openFlg === '1') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + if (estimateContextState.estimateType === 'YJOD' && item.paDispOrder) { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + }) + + estimateContextState.itemList.forEach((item) => { + delete item.showSalePrice + delete item.showSaleTotPrice + if (item.delFlg === '0') { + let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0 + let price + if (amount === 0) { + price = 0 + } else { + price = Number(item.saleTotPrice?.replaceAll(',', '')) || 0 + } + + if (item.moduleFlg === '1') { + const volKw = (item.pnowW * amount) / 1000 + totals.totVolKw += volKw + } + totals.supplyPrice += price + totals.totAmount += amount + + if (item.paDispOrder) { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + if (item.openFlg === '1') { + item.showSalePrice = '0' + item.showSaleTotPrice = '0' + } + } + }) + + totals.vatPrice = totals.supplyPrice * 0.1 + totals.totPrice = totals.supplyPrice + totals.vatPrice + + setEstimateContextState({ + totAmount: totals.totAmount, + totVolKw: totals.totVolKw.toFixed(2), + supplyPrice: totals.supplyPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + vatPrice: totals.vatPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + totPrice: totals.totPrice.toFixed(0), //์†Œ์ˆ˜์ฒซ์ž๋ฆฌ์—์„œ ๋ฐ˜์˜ฌ๋ฆผ + }) + } } }, [itemChangeYn, estimateContextState.itemList]) @@ -1006,7 +1115,7 @@ export default function Estimate({}) {
{getMessage('estimate.detail.objectNo')}
{/* {objectNo} (Plan No: {estimateContextState.planNo}) */} - {objectNo} (Plan No: {planNo}) + {currentObjectNo} (Plan No: {planNo})
@@ -1076,7 +1185,6 @@ export default function Estimate({}) {
- {/* */}
- {/* */} { const url = '/api/estimate/excel-download' @@ -168,14 +171,14 @@ export default function CanvasMenu(props) { break case 5: // let pid = urlParams.get('pid') - promiseGet({ url: `/api/estimate/${objectNo}/${pid}/detail` }).then((res) => { + promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => { if (res.status === 200) { const estimateDetail = res.data - if (estimateDetail.docNo) { + if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) { setMenuNumber(menu.index) setCurrentMenu(menu.title) setFloorPlanObjectNo({ floorPlanObjectNo: objectNo }) - router.push(`/floor-plan/estimate/5?pid=${pid}&objectNo=${objectNo}`) + router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`) } else { swalFire({ text: getMessage('estimate.menu.move.valid1') }) } @@ -183,13 +186,13 @@ export default function CanvasMenu(props) { }) break case 6: - promiseGet({ url: `/api/estimate/${objectNo}/${pid}/detail` }).then((res) => { + promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => { if (res.status === 200) { const estimateDetail = res.data - if (estimateDetail.docNo) { + if (estimateDetail.tempFlg === '0') { setMenuNumber(menu.index) setCurrentMenu(menu.title) - router.push(`/floor-plan/simulator/${menu.index}?pid=${pid}&objectNo=${objectNo}`) + router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`) } else { swalFire({ text: getMessage('simulator.menu.move.valid1') }) } @@ -203,7 +206,11 @@ export default function CanvasMenu(props) { setCurrentMenu(menu.title) } - if (pathname !== '/floor-plan') router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`) + if (pathname !== '/floor-plan') { + if (menu.index !== 0) { + router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`) + } + } } const changeSelectedRoofMaterial = (e) => { diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx index 42b8be64..58ccec4d 100644 --- a/src/components/floor-plan/modal/Slope.jsx +++ b/src/components/floor-plan/modal/Slope.jsx @@ -15,7 +15,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index 609ff975..b85d76c6 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -126,7 +126,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx index 07fc9e46..e0f3522b 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx @@ -46,7 +46,7 @@ export default function AuxiliaryEdit(props) { return (
-
+

{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')}

+
) diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx index e984be57..1afdd7ec 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx @@ -14,7 +14,7 @@ export default function AuxiliarySize(props) { return (
-
+

{getMessage('modal.auxiliary.size.edit')}

+
) diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 392c1eda..49aabd0d 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -51,7 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx index 06bf2b8f..9f98e83b 100644 --- a/src/components/floor-plan/modal/basic/step/Module.jsx +++ b/src/components/floor-plan/modal/basic/step/Module.jsx @@ -40,12 +40,18 @@ export default function Module({ setTabNum }) { const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ตœ์ข… ๋ฐ์ดํ„ฐ const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState) - const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) + const currentCanvasPlan = useRecoilValue(currentCanvasPlanState) const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => { return { ...prevState, ...nextState } }, moduleSelectionData) + useEffect(() => { + if (moduleSelectionDataPlanList) { + setModuleSelectionData(moduleSelectionDataPlanList[currentCanvasPlan.id]) + } + }, []) + useEffect(() => { handleChangeInstallHeight(debouncedInstallHeight) }, [debouncedInstallHeight]) @@ -72,16 +78,6 @@ export default function Module({ setTabNum }) { rows: [], } - useEffect(() => { - console.log('currentCanvasPlan', currentCanvasPlan) - }, []) - - useEffect(() => {}, [roofTab]) - - useEffect(() => { - setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: moduleSelectionData }) - }, [moduleSelectionData]) - const handleRoofTab = (tab) => { setRoofTab(tab) } @@ -242,11 +238,12 @@ export default function Module({ setTabNum }) { index={index} addRoof={roof} roofTab={index} - moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]} - setModuleSelectionData={setModuleSelectionData} + moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]} tempModuleSelectionData={tempModuleSelectionData} setTempModuleSelectionData={setTempModuleSelectionData} selectedModule={selectedModules} + moduleSelectionDataPlanList={moduleSelectionDataPlanList} + setModuleSelectionDataPlanList={setModuleSelectionDataPlanList} />
))} diff --git a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx index 3fee925e..9d835389 100644 --- a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx +++ b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx @@ -1,6 +1,6 @@ import { useEffect, useState, useRef } from 'react' import { useRecoilValue } from 'recoil' -import { pitchTextSelector } from '@/store/canvasAtom' +import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom' import { useMessage } from '@/hooks/useMessage' import { useMasterController } from '@/hooks/common/useMasterController' import { useCommonCode } from '@/hooks/common/useCommonCode' @@ -12,14 +12,16 @@ export default function ModuleTabContents({ addRoof, roofTab, moduleConstructionSelectionData, - setModuleSelectionData, tempModuleSelectionData, setTempModuleSelectionData, selectedModule, + moduleSelectionDataPlanList, + setModuleSelectionDataPlanList, }) { const { getMessage } = useMessage() const [roofMaterial, setRoofMaterial] = useState(addRoof) //์ง€๋ถ•์žฌ` const globalPitchText = useRecoilValue(pitchTextSelector) //ํ”ผ์น˜ ํ…์ŠคํŠธ + const currentCanvasPlan = useRecoilValue(currentCanvasPlanState) const { findCommonCode } = useCommonCode() const [raftCodes, setRaftCodes] = useState([]) //๊ฐ€๋Œ€ ๋ชฉ๋ก @@ -162,6 +164,8 @@ export default function ModuleTabContents({ } useEffect(() => { + console.log('tempModuleSelectionData', tempModuleSelectionData) + if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) { const newRoofConstructions = { roofIndex: roofTab, @@ -169,6 +173,7 @@ export default function ModuleTabContents({ trestle: selectedRoofBase, construction: selectedConstruction, } + const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab) if (index > -1) { @@ -241,6 +246,7 @@ export default function ModuleTabContents({ if (isModuleLoaded) { setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd }) setConstructionList([]) + setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule }) if (isObjectNotEmpty(moduleConstructionSelectionData)) { //๊ธฐ์กด์— ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์œผ๋ฉด @@ -249,11 +255,11 @@ export default function ModuleTabContents({ setCvrChecked(moduleConstructionSelectionData.construction.setupCover) setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover) setIsExistData(true) + + setTempModuleSelectionData({ roofConstructions: [{ ...moduleConstructionSelectionData }] }) } } } - - setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule }) }, [moduleSelectionInitParams]) useEffect(() => { @@ -282,7 +288,8 @@ export default function ModuleTabContents({ useEffect(() => { if (isObjectNotEmpty(tempModuleSelectionData)) { - setModuleSelectionData(tempModuleSelectionData) + setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData }) + // setModuleSelectionData(tempModuleSelectionData) } }, [tempModuleSelectionData]) diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx index d400881a..de23ec82 100644 --- a/src/components/floor-plan/modal/basic/step/Placement.jsx +++ b/src/components/floor-plan/modal/basic/step/Placement.jsx @@ -1,15 +1,16 @@ import { forwardRef, useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' -import { checkedModuleState } from '@/store/canvasAtom' -import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil' -import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions' +import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom' +import { useRecoilValue, useSetRecoilState } from 'recoil' +import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions' import { useModulePlace } from '@/hooks/module/useModulePlace' const Placement = forwardRef((props, refs) => { const { getMessage } = useMessage() const [isChidori, setIsChidori] = useState(false) const [isChidoriNotAble, setIsChidoriNotAble] = useState(false) + const currentCanvasPlan = useRecoilValue(currentCanvasPlanState) const [setupLocation, setSetupLocation] = useState('center') const [isMaxSetup, setIsMaxSetup] = useState('false') @@ -19,16 +20,18 @@ const Placement = forwardRef((props, refs) => { const { selectedModules } = useModulePlace() const setCheckedModules = useSetRecoilState(checkedModuleState) - const moduleSelectionData = useRecoilValue(moduleSelectionDataState) + const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //๋ชจ๋“ˆ ๋ฐฐ์น˜๋ฉด ์ƒ์„ฑ useEffect(() => { makeModuleInstArea() - //1๊ฐœ๋ผ๋„ ์น˜๋„๋ฆฌ ๋ถˆ๊ฐ€๊ฐ€ ์žˆ์œผ๋ฉด ์น˜๋„๋ฆฌ ๋ถˆ๊ฐ€ - const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N') - if (isChidroriValue) { - setIsChidoriNotAble(true) + if (moduleSelectionDataPlanList) { + //1๊ฐœ๋ผ๋„ ์น˜๋„๋ฆฌ ๋ถˆ๊ฐ€๊ฐ€ ์žˆ์œผ๋ฉด ์น˜๋„๋ฆฌ ๋ถˆ๊ฐ€ + const isChidroriValue = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions.some((item) => item.construction.plvrYn === 'N') + if (isChidroriValue) { + setIsChidoriNotAble(true) + } } }, []) diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 75dba1a3..450d15b9 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -133,7 +133,7 @@ export default function CircuitTrestleSetting({ id }) { return (
-
+

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

)}
+
) diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx index 59c0ead4..1ec3684e 100644 --- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx @@ -85,7 +85,7 @@ export default function DimensionLineSetting(props) { return (
-
+

{getMessage('contextmenu.display.edit')}

+
) diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx index ac65c1e5..d37302b6 100644 --- a/src/components/floor-plan/modal/distance/Distance.jsx +++ b/src/components/floor-plan/modal/distance/Distance.jsx @@ -18,7 +18,7 @@ export default function Distance(props) { return (
-
+

{getMessage('modal.distance')}

+
) diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx index 2b5a7079..56e88ba8 100644 --- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -40,7 +40,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx index 18eef849..14c40310 100644 --- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx +++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx @@ -65,7 +65,7 @@ export default function FlowDirectionSetting(props) { return (
-
+

{getMessage('modal.shape.flow.direction.setting')}

+
) diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index da41fdcf..c19f4c26 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -179,7 +179,7 @@ export default function DotLineGrid(props) { return (
-
+

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

+
) } diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx index 2f768406..0d34b3d4 100644 --- a/src/components/floor-plan/modal/grid/GridCopy.jsx +++ b/src/components/floor-plan/modal/grid/GridCopy.jsx @@ -22,7 +22,7 @@ export default function GridCopy(props) { return (
-
+

{getMessage('modal.grid.copy')}

+
) diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx index f853f135..e28d8564 100644 --- a/src/components/floor-plan/modal/grid/GridMove.jsx +++ b/src/components/floor-plan/modal/grid/GridMove.jsx @@ -75,7 +75,7 @@ export default function GridMove(props) { return (
-
+

{getMessage('modal.grid.move')}

+
) diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx index 13a00b06..1ad351eb 100644 --- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx +++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx @@ -52,7 +52,7 @@ export default function LinePropertySetting(props) { return (
-
+

{getMessage('contextmenu.line.property.edit')}

+
) diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx index 3157fe51..62a0baaf 100644 --- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx +++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx @@ -16,7 +16,7 @@ export default function CircuitNumberEdit(props) { return (
-
+

{getMessage('modal.module.circuit.number.edit')}

+
) diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx index a6d1d4f9..8e1f9fac 100644 --- a/src/components/floor-plan/modal/module/PanelEdit.jsx +++ b/src/components/floor-plan/modal/module/PanelEdit.jsx @@ -84,7 +84,7 @@ export default function PanelEdit(props) { return (
-
+

{getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '}

@@ -139,6 +139,7 @@ export default function PanelEdit(props) {
+
) diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx index 56f9a66c..03b5b4e0 100644 --- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx +++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx @@ -26,7 +26,7 @@ export default function ColumnInsert(props) { return (
-
+

{getMessage('modal.panel.column.insert')}

+
) diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx index a18d7982..95cdd942 100644 --- a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx +++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx @@ -29,7 +29,7 @@ export default function ColumnRemove(props) { return (
-
+

{getMessage('modal.panel.column.remove')}

+
) diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx index 613fb180..fa3c2fff 100644 --- a/src/components/floor-plan/modal/module/row/RowInsert.jsx +++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx @@ -26,7 +26,7 @@ export default function RowInsert(props) { return (
-
+

{getMessage('modal.row.insert')}

+
) diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx index bb1f41cf..70c57c24 100644 --- a/src/components/floor-plan/modal/module/row/RowRemove.jsx +++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx @@ -29,7 +29,7 @@ export default function RowRemove(props) { return (
-
+

{getMessage('modal.row.remove')}

+
) diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx index 416afba8..a4dcf3fc 100644 --- a/src/components/floor-plan/modal/movement/MovementSetting.jsx +++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx @@ -18,7 +18,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx index 191a94ea..a1534891 100644 --- a/src/components/floor-plan/modal/object/DormerOffset.jsx +++ b/src/components/floor-plan/modal/object/DormerOffset.jsx @@ -42,7 +42,7 @@ export default function DormerOffset(props) { return (
-
+

{title}

+
) diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx index ee6ab256..97cd02f8 100644 --- a/src/components/floor-plan/modal/object/ObjectSetting.jsx +++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx @@ -77,7 +77,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx index 015ace3e..815175ce 100644 --- a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx +++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx @@ -23,7 +23,7 @@ export default function RoofMaterialSetting(props) { return (
-
+

{getMessage('modal.roof.material.edit')}

+
) diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx index 3466e2ed..ebb925a6 100644 --- a/src/components/floor-plan/modal/object/SizeSetting.jsx +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -47,7 +47,7 @@ export default function SizeSetting(props) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx index 6c2c8d3f..86724267 100644 --- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx @@ -10,7 +10,7 @@ export default function PropertiesSetting(props) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx index 70ff2150..84107dae 100644 --- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx @@ -116,7 +116,7 @@ export default function WallLineSetting(props) { return (
-
+

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

@@ -184,6 +184,7 @@ export default function WallLineSetting(props) {
+
) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx index 304d0169..fd435b8b 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx @@ -123,7 +123,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index a9619c2f..844cb87e 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -56,20 +56,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set ] // ๋ฐ์ดํ„ฐ๋ฅผ ์ตœ์ดˆ ํ•œ ๋ฒˆ๋งŒ ์กฐํšŒ - useEffect(() => { - if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return - const raftCodeList = findCommonCode('203800') - setRaftCodes(raftCodeList) + // useEffect(() => { + // if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return + // const raftCodeList = findCommonCode('203800') + // setRaftCodes(raftCodeList) + // console.log('๐Ÿš€ ~ useEffect ~ >>>>>>>>>>>>> raftCodeList 11 :', raftCodeList) - if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { - setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) - } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { - setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet }) - } - }, []) + // if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { + // setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) + // } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { + // setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet }) + // } + // }, []) useEffect(() => { if (addedRoofs.length > 0) { + const raftCodeList = findCommonCode('203800') + setRaftCodes(raftCodeList) + setCurrentRoof({ ...addedRoofs[0] }) } }, [addedRoofs]) @@ -155,20 +159,20 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set ...roofInfo, }, //roofs: addedRoofs, - roofsData: { - roofApply: true, - roofSeq: 0, - roofMatlCd: currentRoof.roofMatlCd, - roofWidth: currentRoof.width, - roofHeight: currentRoof.length, - roofHajebichi: currentRoof.hajebichi, - roofGap: currentRoof.raft, - roofLayout: currentRoof.layout, - roofSizeSet: currentRoof.roofSizeSet, - roofAngleSet: currentRoof.roofAngleSet, - roofPitch: currentRoof.pitch, - roofAngle: currentRoof.angle, - }, + // roofsData: { + // roofApply: true, + // roofSeq: 0, + // roofMatlCd: currentRoof.roofMatlCd, + // roofWidth: currentRoof.width, + // roofHeight: currentRoof.length, + // roofHajebichi: currentRoof.hajebichi, + // roofGap: currentRoof.raft, + // roofLayout: currentRoof.layout, + // roofSizeSet: currentRoof.roofSizeSet, + // roofAngleSet: currentRoof.roofAngleSet, + // roofPitch: currentRoof.pitch, + // roofAngle: currentRoof.angle, + // }, }) basicSettingSave() @@ -177,7 +181,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx index edca1208..d9456bbd 100644 --- a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx @@ -63,7 +63,7 @@ export default function ActualSizeSetting(props) { return (
-
+

{getMessage('modal.actual.size.setting')}

+
) diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx index e8942948..5bfad3e4 100644 --- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx @@ -45,7 +45,7 @@ export default function ContextRoofAllocationSetting(props) { return (
-
+

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

- {currentRoofList.map((roof, index) => { - return ( -
-
- - -
-
-
-
-
- handleChangeRoofMaterial(e, index)} - /> -
- {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} - {index !== 0 && } -
+ {currentRoofList.length > 0 && + currentRoofList.map((roof, index) => { + return ( +
+
+ +
-
-
- {getMessage('slope')} -
- { - handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) - }} - defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} - /> +
+
+
+
+ handleChangeRoofMaterial(e, index)} + /> +
+ {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} + {index !== 0 && }
- {pitchText}
-
- {(roof.widAuth || roof.lenAuth) && (
- {roof.widAuth && ( -
- W -
- -
+
+ {getMessage('slope')} +
+ { + handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) + }} + defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} + />
- )} - {roof.lenAuth && ( -
- L -
- -
-
- )} + {pitchText} +
- )} - {(roof.raftAuth || roof.roofPchAuth) && ( -
- {roof.raftAuth && ( -
+ {(roof.widAuth || roof.lenAuth) && ( +
+ {roof.widAuth && (
- {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( -
- -
- )} -
-
- )} - {roof.roofPchAuth && ( -
-
- {getMessage('hajebichi')} -
- + W +
+
-
- )} -
- )} -
-
- - + )} + {roof.lenAuth && ( +
+ L +
+ +
+
+ )} +
+ )} + {(roof.raftAuth || roof.roofPchAuth) && ( +
+ {roof.raftAuth && ( +
+
+ {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && ( +
+ +
+ )} +
+
+ )} + {roof.roofPchAuth && ( +
+
+ {getMessage('hajebichi')} +
+ +
+
+
+ )} +
+ )} +
+
+ + +
-
- ) - })} + ) + })}
+
) diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 4118db79..0142a329 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -49,7 +49,7 @@ export default function RoofAllocationSetting(props) {
{currentRoofList && ( <> -
+

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

)} +
) diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx index 090eec0a..b47d2356 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -31,7 +31,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx index b43bdd18..1efbb767 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx @@ -90,7 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index f5e6e3ca..0ccd337a 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -75,7 +75,7 @@ export default function SettingModal01(props) { <>
-
+

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

+
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 571741ed..9aae056b 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -192,7 +192,7 @@ export default function DimensionLineSetting(props) { return (
-
+

{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}

+
) diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx index 0691046d..708897c0 100644 --- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx +++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx @@ -57,7 +57,7 @@ export default function PlanSizeSetting(props) { return (
-
+

{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}

+
) diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx index 0edafff9..5e01918d 100644 --- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx @@ -41,7 +41,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) { return (
-
+

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

+
) diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx index f55815fb..987be2f1 100644 --- a/src/components/management/Stuff.jsx +++ b/src/components/management/Stuff.jsx @@ -219,6 +219,10 @@ export default function Stuff() { pageSize: stuffSearchParams?.pageSize ? stuffSearchParams.pageSize : 100, } + if (!params.saleStoreId) { + params.saleStoreId = session.storeId + } + async function fetchData() { const apiUrl = `/api/object/list?${queryStringFormatter(params)}` await get({ @@ -271,6 +275,10 @@ export default function Stuff() { stuffSearchParams.schSortType = defaultSortType stuffSearchParams.pageNo = stuffSearchParams.pageNo + if (!stuffSearchParams.saleStoreId) { + stuffSearchParams.saleStoreId = session.storeId + } + async function fetchData() { const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}` await get({ url: apiUrl }).then((res) => { @@ -301,6 +309,9 @@ export default function Stuff() { stuffSearchParams.schSortType = defaultSortType setPageNo(1) + if (!params.saleStoreId) { + stuffSearchParams.saleStoreId = session.storeId + } async function fetchData() { const apiUrl = `/api/object/list?${queryStringFormatter(stuffSearchParams)}` await get({ url: apiUrl }).then((res) => { diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 15ea41fc..6b57e111 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -304,6 +304,7 @@ export default function StuffDetail() { //mid:5(๊ฒฌ์ ์„œ), /pid:ํ”Œ๋žœ๋ฒˆํ˜ธ setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo }) setIsGlobalLoading(true) + setMenuNumber(5) router.push(`/floor-plan/estimate/5?pid=${params.data.planNo}&objectNo=${params.data.objectNo}`) }} > @@ -1357,7 +1358,7 @@ export default function StuffDetail() { //๋กœ๊ทธ์ธ์ด 2์ฐจ์ ์ธ๋ฐ otherSaleStoreId๊ฐ€ ์—†์œผ๋ฉด ์•Œ๋Ÿฟ if (session.storeLvl !== '1') { if (params.saleStoreLevel === '1') { - return swalFire({ text: getMessage('stuff.detail.tempSave.message4'), type: 'alert' }) + return swalFire({ text: getMessage('stuff.detail.tempSave.message3'), type: 'alert' }) } } @@ -1447,6 +1448,13 @@ export default function StuffDetail() { params.saleStoreLevel = session.storeLvl } + if (session.storeLvl !== '1') { + //๋กœ๊ทธ์ธ์ด 1์ฐจ์ ์ด ์•„๋‹Œ๋ฐ 2์ฐจ์ ์„ ์•ˆ๊ณจ๋ผ์„œ saleStoreLevel = 1๋กœ ์…‹ํŒ…๋˜์–ด์žˆ์œผ๋ฉด ์•Œ๋Ÿฟ + if (params.saleStoreLevel === '1') { + return swalFire({ text: getMessage('stuff.detail.tempSave.message3'), type: 'alert' }) + } + } + // ๋‹ด๋‹น์ž ์ž๋ฆฌ์ˆ˜ ์ฒดํฌ if (params?.receiveUser !== '') { if (params?.receiveUser.trim().length > 10) { diff --git a/src/components/management/StuffSubHeader.jsx b/src/components/management/StuffSubHeader.jsx index 6dc316cb..18bd5969 100644 --- a/src/components/management/StuffSubHeader.jsx +++ b/src/components/management/StuffSubHeader.jsx @@ -40,8 +40,8 @@ export default function StuffSubHeader({ type }) { if (isObjectNotEmpty(managementState)) { if (managementState.createUser === 'T01') { if (session.userId !== 'T01') { - //๋„๋ฉด ์ž‘์„ฑ์€ ์ด๋™ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณ€๊ฒฝ #457 - // setButtonStyle('none') + //๋„๋ฉด ์ž‘์„ฑ์€ ์ด๋™ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณ€๊ฒฝ #457 ๋‹ค์‹œ ๋ชปํ•˜๋„๋ก ๋ณ€๊ฒฝ#474 + setButtonStyle('none') } } } diff --git a/src/components/management/popup/PlanRequestPop.jsx b/src/components/management/popup/PlanRequestPop.jsx index 23a041be..38df870f 100644 --- a/src/components/management/popup/PlanRequestPop.jsx +++ b/src/components/management/popup/PlanRequestPop.jsx @@ -8,19 +8,12 @@ import SingleDatePicker from '@/components/common/datepicker/SingleDatePicker' import dayjs from 'dayjs' import PlanRequestPopQGrid from './PlanRequestPopQGrid' import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils' -import { useCommonCode } from '@/hooks/common/useCommonCode' -import Select from 'react-select' import QPagination from '@/components/common/pagination/QPagination' export default function PlanRequestPop(props) { const [pageNo, setPageNo] = useState(1) //ํ˜„์žฌ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ const [pageSize, setPageSize] = useState(20) //ํŽ˜์ด์ง€ ๋‹น ๊ฒŒ์‹œ๋ฌผ ๊ฐœ์ˆ˜ const [totalCount, setTotalCount] = useState(0) //์ด ๊ฐฏ์ˆ˜ - //๊ณตํ†ต์ฝ”๋“œ - const { commonCode, findCommonCode } = useCommonCode() - - // const [planStatCdList, setPlanStatCdList] = useState([]) - const globalLocaleState = useRecoilValue(globalLocaleStore) const [planReqObject, setPlanReqObject] = useState({}) @@ -71,16 +64,6 @@ export default function PlanRequestPop(props) { } } - // ์ƒํƒœ ๊ฒ€์ƒ‰์กฐ๊ฑด ๋ณ€๊ฒฝ - const onSelectionChange = (key) => { - if (isObjectNotEmpty(key)) { - setSchPlanStatCd(key.clCode) - } else { - //X๋ˆ„๋ฆ„ - setSchPlanStatCd('') - } - } - // ์กฐํšŒ const onSubmit = (page, type) => { const params = { @@ -194,7 +177,8 @@ export default function PlanRequestPop(props) { { field: 'title', headerName: getMessage('stuff.planReqPopup.gridHeader.title'), - minWidth: 150, + minWidth: 250, + cellStyle: { textAlign: 'left' }, }, { field: 'address1', @@ -234,13 +218,6 @@ export default function PlanRequestPop(props) { } } - // useEffect(() => { - // const code1 = findCommonCode(115800) //์ƒํƒœ - // if (code1 != null) { - // setPlanStatCdList(code1) - // } - // }, [commonCode]) - useEffect(() => { onSubmit(pageNo, 'S') }, []) @@ -431,9 +408,11 @@ export default function PlanRequestPop(props) {
- -
- +
+ +
+ +
diff --git a/src/components/management/popup/PlanRequestPopQGrid.jsx b/src/components/management/popup/PlanRequestPopQGrid.jsx index f7dbba0f..0e5117e3 100644 --- a/src/components/management/popup/PlanRequestPopQGrid.jsx +++ b/src/components/management/popup/PlanRequestPopQGrid.jsx @@ -22,8 +22,8 @@ export default function PlanRequestPopQGrid(props) { flex: 1, minWidth: 100, sortable: false, - suppressMovable: false, - resizable: false, + suppressMovable: true, + resizable: true, suppressSizeToFit: false, } }, []) @@ -58,6 +58,7 @@ export default function PlanRequestPopQGrid(props) { defaultColDef={defaultColDef} pagination={isPageable} onSelectionChanged={onSelectionChanged} + autoSizeAllColumns={true} overlayNoRowsTemplate={`${getMessage('stuff.grid.noData')}`} />
diff --git a/src/components/simulator/Simulator.jsx b/src/components/simulator/Simulator.jsx index ef752582..249398c4 100644 --- a/src/components/simulator/Simulator.jsx +++ b/src/components/simulator/Simulator.jsx @@ -16,26 +16,18 @@ import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' import { convertNumberToPriceDecimal } from '@/util/common-utils' import { usePlan } from '@/hooks/usePlan' -import { usePopup } from '@/hooks/usePopup' -// import { useSearchParams } from 'next/navigation' +import { usePopup, closeAll } from '@/hooks/usePopup' export default function Simulator() { const { floorPlanState } = useContext(FloorPlanContext) const { objectNo, pid } = floorPlanState - - // const searchParams = useSearchParams() - // const objectNo = searchParams.get('objectNo') - // const pid = searchParams.get('pid') const { selectedPlan } = usePlan() const chartRef = useRef(null) // ์บ”๋ฒ„์Šค ๋ฉ”๋‰ด ๋„˜๋ฒ„ ์…‹ํŒ… const { setMenuNumber } = useCanvasMenu() - - useEffect(() => { - setMenuNumber(6) - }, []) + const { closeAll } = usePopup() const { get } = useAxios() const { getMessage } = useMessage() @@ -43,12 +35,6 @@ export default function Simulator() { // ์ฐจํŠธ ๊ด€๋ จ const [chartData, setChartData] = useState([]) - const { closeAll } = usePopup() - - useEffect(() => { - closeAll() - }, []) - const data = { labels: ['1ๆœˆ', '2ๆœˆ', '3ๆœˆ', '4ๆœˆ', '5ๆœˆ', '6ๆœˆ', '7ๆœˆ', '8ๆœˆ', '9ๆœˆ', '10ๆœˆ', '11ๆœˆ', '12ๆœˆ'], datasets: [ @@ -114,7 +100,6 @@ export default function Simulator() { } useEffect(() => { - console.log('๐Ÿš€ ~ useEffect ~ selectedPlan:', selectedPlan) /* ์ดˆ๊ธฐํ™” ์ž‘์—… */ setChartData([]) setObjectDetail({}) @@ -125,11 +110,13 @@ export default function Simulator() { setHatsudenryouPeakcutAll([]) setHatsudenryouPeakcutAllSnow([]) - if (objectNo) { - fetchObjectDetail(objectNo) + if (objectNo && pid && selectedPlan) { + fetchObjectDetail(objectNo, selectedPlan.ordering) fetchSimulatorNotice() setPwrGnrSimType('D') setPwrRecoil({ ...pwrRecoil, type: 'D' }) + setMenuNumber(6) + closeAll() } }, [objectNo, pid, selectedPlan]) @@ -148,8 +135,8 @@ export default function Simulator() { const [hatsudenryouPeakcutAll, setHatsudenryouPeakcutAll] = useState([]) const [hatsudenryouPeakcutAllSnow, setHatsudenryouPeakcutAllSnow] = useState([]) - const fetchObjectDetail = async (objectNo) => { - const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${pid}` + const fetchObjectDetail = async (objectNo, currentPid) => { + const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${currentPid}` const resultData = await get({ url: apiUrl }) if (resultData) { @@ -234,7 +221,7 @@ export default function Simulator() {
{/* ์‹œ์Šคํ…œ์šฉ๋Ÿ‰ */}
-
{getMessage('simulator.title.sub3')}
+
{getMessage('simulator.title.sub3')}
{objectDetail.capacity ? `${convertNumberToPriceDecimal(objectDetail.capacity)} kW` : ''}
{/* ์—ฐ๊ฐ„์˜ˆ์ธก๋ฐœ์ „๋Ÿ‰ */} @@ -257,7 +244,7 @@ export default function Simulator() { {/* ์ ์„ค์กฐ๊ฑด */}
{getMessage('simulator.title.sub7')}
-
{objectDetail.snowfall} cm
+
{objectDetail.snowfall ? `${objectDetail.snowfall}cm` : ''}
{/* ํ’์†์กฐ๊ฑด */}
@@ -356,7 +343,10 @@ export default function Simulator() { {/* ์ง€๋ถ•๋ฉด */} {moduleInfo.roofSurface} {/* ๊ฒฝ์‚ฌ๊ฐ */} - {convertNumberToPriceDecimal(moduleInfo.slopeAngle)}{moduleInfo.classType == 0 ? "ๅฏธ":"ยบ"} + + {convertNumberToPriceDecimal(moduleInfo.slopeAngle)} + {moduleInfo.classType == 0 ? 'ๅฏธ' : 'ยบ'} + {/* ๋ฐฉ์œ„๊ฐ(๋„) */} {convertNumberToPriceDecimal(moduleInfo.azimuth)} {/* ํƒœ์–‘์ „์ง€๋ชจ๋“ˆ */} diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index cc22140a..d9b1cec0 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -56,9 +56,9 @@ export function useMasterController() { */ const getTrestleList = async (params) => { const paramString = getQueryString(params) - console.log('๐Ÿš€๐Ÿš€ ~ getTrestleList ~ paramString:', paramString) + // console.log('๐Ÿš€๐Ÿš€ ~ getTrestleList ~ paramString:', paramString) return await get({ url: '/api/v1/master/getTrestleList' + paramString }).then((res) => { - console.log('๐Ÿš€๐Ÿš€ ~ getTrestleList ~ res:', res) + // console.log('๐Ÿš€๐Ÿš€ ~ getTrestleList ~ res:', res) return res }) } @@ -82,9 +82,9 @@ export function useMasterController() { */ const getConstructionList = async (params) => { const paramString = getQueryString(params) - console.log('๐Ÿš€๐Ÿš€ ~ getConstructionList ~ paramString:', paramString) + // console.log('๐Ÿš€๐Ÿš€ ~ getConstructionList ~ paramString:', paramString) return await get({ url: '/api/v1/master/getConstructionList' + paramString }).then((res) => { - console.log('๐Ÿš€๐Ÿš€ ~ getConstructionList ~ res:', res) + // console.log('๐Ÿš€๐Ÿš€ ~ getConstructionList ~ res:', res) return res }) } diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js index 40eb7b2f..84416370 100644 --- a/src/hooks/common/useRoofFn.js +++ b/src/hooks/common/useRoofFn.js @@ -22,8 +22,8 @@ export function useRoofFn() { const ratio = window.devicePixelRatio || 1 const layout = roofMaterial.layout - let width = (roofMaterial.width ?? 226) / 10 - let height = (roofMaterial.length ?? 158) / 10 + let width = (roofMaterial.width || 226) / 10 + let height = (roofMaterial.length || 158) / 10 const index = roofMaterial.index ?? 0 let roofStyle = 2 const inputPatternSize = { width: width, height: height } //์ž„์‹œ ์‚ฌ์ด์ฆˆ diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 66b0974c..ebd1ad88 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -80,6 +80,7 @@ export const useEstimateController = (planNo) => { res.data.pkgAsp = roundedNumber.toString() } + setEstimateContextState(res.data) } } @@ -384,7 +385,7 @@ export const useEstimateController = (planNo) => { if (res.status === 201) { estimateData.newFileList = [] swalFire({ text: getMessage('estimate.detail.save.alertMsg'), type: 'alert' }) - fetchSetting(objectRecoil.floorPlanObjectNo, estimateData.planNo) + fetchSetting(estimateData.objectNo, estimateData.planNo) } }) } catch (e) { @@ -409,7 +410,7 @@ export const useEstimateController = (planNo) => { const params = { saleStoreId: session.storeId, sapSalesStoreCd: session.custCd, - objectNo: objectRecoil.floorPlanObjectNo, + objectNo: estimateData.objectNo, planNo: sendPlanNo, copySaleStoreId: otherSaleStoreId ? otherSaleStoreId : saleStoreId, copyReceiveUser: copyReceiveUser, diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index a71744c6..de64c404 100644 --- a/src/hooks/module/useModule.js +++ b/src/hooks/module/useModule.js @@ -389,6 +389,7 @@ export function useModule() { .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0] let isWarning = false canvas.discardActiveObject() + moduleSetupSurface.set({ modules: otherModules }) canvas.remove(...columnModules) canvas.renderAll() @@ -503,6 +504,7 @@ export function useModule() { let isWarning = false canvas.discardActiveObject() + moduleSetupSurface.set({ modules: otherModules }) canvas.remove(...rowModules) canvas.renderAll() @@ -852,8 +854,12 @@ export function useModule() { const modulesRemove = () => { const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0] - const modules = canvas.getObjects().filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE) - canvas.remove(...modules) + const modules = canvas + .getObjects() + .filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id) + const surface = canvas.getObjects().filter((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)[0] + surface.set({ modules: modules }) + canvas.remove(activeModule) canvas.renderAll() } diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 965a1045..11c2ce8d 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -698,6 +698,7 @@ export function useModuleBasicSetting() { checkedModule.forEach((module, index) => { const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module) + const flowLines = getFlowLines(moduleSetupSurface, module) //์œก์ง€๋ถ•์ด ์•„๋‹๋•Œ๋งŒ ๋„ฃ๋Š”๋‹ค ์œก์ง€๋ถ•์ผ๋• ํด๋ฆญ ์ด๋ฒคํŠธ์— ๋ณ„๋„๋กœ ๋„ฃ์–ด๋†“์Œ let startPoint = flowLines.bottom diff --git a/src/hooks/module/useModulePlace.js b/src/hooks/module/useModulePlace.js index d46f789f..4398b938 100644 --- a/src/hooks/module/useModulePlace.js +++ b/src/hooks/module/useModulePlace.js @@ -1,39 +1,41 @@ import { useEffect, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' -import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' +import { moduleSelectionDataPlanListState, selectedModuleState } from '@/store/selectedModuleOptions' import { useMasterController } from '@/hooks/common/useMasterController' -import { canvasState } from '@/store/canvasAtom' +import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom' export function useModulePlace() { const canvas = useRecoilValue(canvasState) - const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ตœ์ข… ๋ฐ์ดํ„ฐ + const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ตœ์ข… ๋ฐ์ดํ„ฐ + const currentCanvasPlan = useRecoilValue(currentCanvasPlanState) const [trestleDetailParams, setTrestleDetailParams] = useState([]) const [trestleDetailList, setTrestleDetailList] = useState([]) const selectedModules = useRecoilValue(selectedModuleState) const { getTrestleDetailList } = useMasterController() useEffect(() => { - const common = moduleSelectionData.common - const roofConstructions = moduleSelectionData.roofConstructions + if (moduleSelectionDataPlanList) { + const common = moduleSelectionDataPlanList[currentCanvasPlan.id].common + const roofConstructions = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions - const listParams = roofConstructions.map((item) => { - return { - ...common, - moduleTpCd: selectedModules.itemTp, - roofMatlCd: item.trestle.roofMatlCd, - trestleMkrCd: item.trestle.trestleMkrCd, - constMthdCd: item.trestle.constMthdCd, - roofBaseCd: item.trestle.roofBaseCd, - constTp: item.construction.constTp, - mixMatlNo: selectedModules.mixMatlNo, - roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null, - inclCd: String(item.addRoof.pitch), - roofIndex: item.addRoof.index, - } - }) - - setTrestleDetailParams(listParams) - }, [moduleSelectionData]) + const listParams = roofConstructions.map((item) => { + return { + ...common, + moduleTpCd: selectedModules.itemTp, + roofMatlCd: item.trestle.roofMatlCd, + trestleMkrCd: item.trestle.trestleMkrCd, + constMthdCd: item.trestle.constMthdCd, + roofBaseCd: item.trestle.roofBaseCd, + constTp: item.construction.constTp, + mixMatlNo: selectedModules.mixMatlNo, + roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null, + inclCd: String(item.addRoof.pitch), + roofIndex: item.addRoof.index, + } + }) + setTrestleDetailParams(listParams) + } + }, [moduleSelectionDataPlanList]) const getTrestleDetailListData = async () => { const trestleDetailList = await getTrestleDetailList(trestleDetailParams) diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 951d9801..6afced52 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -48,7 +48,7 @@ const defaultDotLineGridSetting = { LINE: false, } -let previousRoofMaterialsYn = 'N' // ์ง€๋ถ•์žฌ select ์ •๋ณด ๋น„๊ต ํ›„ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด 1ํšŒ๋งŒ ์‹คํ–‰ +//let previousRoofMaterialsYn = 'N' // ์ง€๋ถ•์žฌ select ์ •๋ณด ๋น„๊ต ํ›„ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด 1ํšŒ๋งŒ ์‹คํ–‰ export function useCanvasSetting() { const canvas = useRecoilValue(canvasState) @@ -159,21 +159,23 @@ export function useCanvasSetting() { setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial }) } + const previousObjectNoRef = useRef(null) const previousRoofMaterialsRef = useRef(null) useEffect(() => { // ์ง€๋ถ•์žฌ select ์ •๋ณด๊ฐ€ ์กด์žฌํ•ด์•ผ ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • DB ์ •๋ณด ๋น„๊ต ํ›„ ์ง€๋ถ•์žฌ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์Œ - if (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) { - // ์ง€๋ถ•์žฌ select ์ •๋ณด ๋น„๊ต ํ›„ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด 1ํšŒ๋งŒ ์‹คํ–‰ - if (roofMaterials && previousRoofMaterialsYn === 'N') { + if (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo + || roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) { + + if (roofMaterials) { fetchBasicSettings() - previousRoofMaterialsYn = 'Y' } // ์ด์ „ ๊ฐ’์„ ์—…๋ฐ์ดํŠธ + previousObjectNoRef.current = correntObjectNo previousRoofMaterialsRef.current = roofMaterials } - }, [roofMaterials]) + }, [roofMaterials, correntObjectNo]) useEffect(() => { if (!canvas) { @@ -297,7 +299,7 @@ export function useCanvasSetting() { }) roofsArray = res.map((item) => { return { - roofApply: true, + roofApply: item.roofApply, roofSeq: 0, roofMatlCd: item.roofMatlCd, roofWidth: item.roofWidth, @@ -328,6 +330,7 @@ export function useCanvasSetting() { roofGap: 'HEI_455', roofLayout: 'P', roofPitch: 4, + roofAngle: 21.8, }, ] } diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 546ebe0b..1488fb26 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -42,7 +42,7 @@ export function useRoofAllocationSetting(id) { const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // ํŒ์—… ๋‚ด ๊ธฐ์ค€ ์ง€๋ถ•์žฌ const [roofList, setRoofList] = useRecoilState(addedRoofsState) // ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ •์—์„œ ์„ ํƒํ•œ ์ง€๋ถ•์žฌ ๋ฐฐ์—ด const [editingLines, setEditingLines] = useState([]) - const [currentRoofList, setCurrentRoofList] = useState(null) + const [currentRoofList, setCurrentRoofList] = useState([]) const currentAngleType = useRecoilValue(currentAngleTypeSelector) const globalLocaleState = useRecoilValue(globalLocaleStore) const [basicInfo, setBasicInfo] = useState(null) diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js index 35c90a87..b4b9652d 100644 --- a/src/hooks/useAxios.js +++ b/src/hooks/useAxios.js @@ -97,13 +97,11 @@ export function useAxios(lang = '') { const getFetcher = async (url) => { const res = await get({ url }) - console.log('๐Ÿš€ ~ getFetcher ~ res:', res) return res } - const postFetcher = async (url, { arg }) => { + const postFetcher = async (url, arg) => { const res = await post({ url, data: arg }) - console.log('๐Ÿš€ ~ postFetcher ~ res:', res) return res } diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 3f2db9f0..8f90424d 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -67,7 +67,7 @@ export function useContextMenu() { const commonTextFont = useRecoilValue(fontSelector('commonText')) const { settingsData, setSettingsDataSave } = useCanvasSetting() const { swalFire } = useSwal() - const { alignModule } = useModule() + const { alignModule, modulesRemove } = useModule() const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn() const currentMenuSetting = () => { @@ -656,7 +656,7 @@ export function useContextMenu() { { id: 'remove', name: getMessage('contextmenu.remove'), - fn: () => deleteObject(), + fn: () => modulesRemove(), }, { id: 'move', diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 86b6aee3..a0733e57 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -207,49 +207,56 @@ export function usePlan(params = {}) { const orderingNo = plans?.find((obj) => obj.id === newCurrentId).ordering const objectNo = floorPlanState.objectNo //๊ฒฌ์ ์„œ or ๋ฐœ์ „์‹œ๋ฎฌ + if (pathname !== '/floor-plan') { await promiseGet({ url: `/api/estimate/${objectNo}/${orderingNo}/detail` }) .then((res) => { if (res.status === 200) { const estimateDetail = res.data - if (estimateDetail.docNo) { - res.data.resetFlag = 'N' + if (pathname === '/floor-plan/estimate/5') { + if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) { + res.data.resetFlag = 'N' - if (res.data.itemList.length > 0) { - res.data.itemList.map((item) => { - item.delFlg = '0' - }) - } - if (res.data.pkgAsp === null || res.data.pkgAsp == undefined) { - res.data.pkgAsp = '0.00' - } else { - const number = parseFloat(res.data.pkgAsp) - const roundedNumber = isNaN(number) ? '0.00' : number.toFixed(2) - - res.data.pkgAsp = roundedNumber.toString() - } - setEstimateContextState(res.data) - - if (pathname === '/floor-plan') { - if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { - saveCanvas() + if (res.data.itemList.length > 0) { + res.data.itemList.map((item) => { + item.delFlg = '0' + }) } + if (res.data.pkgAsp === null || res.data.pkgAsp == undefined) { + res.data.pkgAsp = '0.00' + } else { + const number = parseFloat(res.data.pkgAsp) + const roundedNumber = isNaN(number) ? '0.00' : number.toFixed(2) + + res.data.pkgAsp = roundedNumber.toString() + } + setEstimateContextState(res.data) + // ํด๋ฆญํ•œ ํ”Œ๋žœ ํƒญ์œผ๋กœ ์ด๋™ + updateCurrentPlan(newCurrentId) + } else { + swalFire({ text: getMessage('estimate.menu.move.valid1') }) } - updateCurrentPlan(newCurrentId) } else { - swalFire({ text: getMessage('estimate.menu.move.valid1') }) + // ๋ฐœ์ „์‹œ๋ฎฌ๋ ˆ์ด์…˜ + if (estimateDetail.tempFlg === '0') { + updateCurrentPlan(newCurrentId) + } else { + swalFire({ text: getMessage('simulator.menu.move.valid1') }) + } } } }) .catch((error) => { - swalFire({ text: getMessage('estimate.menu.move.valid1') }) + if (pathname === '/floor-plan/estimate/5') { + swalFire({ text: getMessage('estimate.menu.move.valid1') }) + } else { + swalFire({ text: getMessage('simulator.menu.move.valid1') }) + } }) } else { - // if (pathname === '/floor-plan') { if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { saveCanvas() } - // } updateCurrentPlan(newCurrentId) } } diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 4a8ecfdc..9c690a6b 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -427,6 +427,12 @@ export const usePolygon = () => { text = '่ฅฟ่ฅฟๅ—' } + const sameDirectionCnt = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.directionText === text) + + text = text + (sameDirectionCnt.length + 1) + + polygon.set('directionText', text) + const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, { fontFamily: flowFontOptions.fontFamily.value, fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', diff --git a/src/locales/ja.json b/src/locales/ja.json index 26f867ad..72addabb 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -675,6 +675,7 @@ "stuff.detail.tooltip.surfaceType": "ๅกฉๅฎณๅœฐๅŸŸใฎๅฎš็พฉใฏๅ„ใƒกใƒผใ‚ซใƒผใฎ่จญ็ฝฎใƒžใƒ‹ใƒฅใ‚ขใƒซใ‚’ใ”็ขบ่ชใใ ใ•ใ„", "stuff.detail.tempSave.message1": "ไธ€ๆ™‚ไฟๅญ˜ใ•ใ‚Œใพใ—ใŸใ€‚ๅ•†ๅ“็•ชๅทใ‚’ๅ–ๅพ—ใ™ใ‚‹ใซใฏใ€ๅฟ…้ ˆ้ …็›ฎใ‚’ใ™ในใฆๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„ใ€‚", "stuff.detail.tempSave.message2": "ๆ‹…ๅฝ“่€…ใฏ10ๆกไปฅไธ‹ใงๅ…ฅๅŠ›ใ—ใฆใใ ใ•ใ„.", + "stuff.detail.tempSave.message3": "ไบŒๆฌก่ฒฉๅฃฒๅบ—ใ‚’้ธๆŠžใ—ใฆใใ ใ•ใ„.", "stuff.detail.confirm.message1": "่ฒฉๅฃฒๅบ—ๆƒ…ๅ ฑใ‚’ๅค‰ๆ›ดใ™ใ‚‹ใจใ€่จญ่จˆไพ้ ผๆ–‡ๆ›ธ็•ชๅทใŒๅ‰Š้™คใ•ใ‚Œใพใ™ใ€‚ๅค‰ๆ›ดใ—ใพใ™ใ‹๏ผŸ", "stuff.detail.delete.message1": "ไป•ๆง˜ใŒ็ขบๅฎšใ—ใŸใ‚‚ใฎใฏๅ‰Š้™คใงใใพใ›ใ‚“ใ€‚", "stuff.detail.planList.title": "ใƒ—ใƒฉใƒณใƒชใ‚นใƒˆ", diff --git a/src/locales/ko.json b/src/locales/ko.json index 61a6ce5d..581867fb 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -684,6 +684,7 @@ "stuff.detail.tooltip.surfaceType": "์—ผํ•ด์ง€์—ญ ์ •์˜๋Š” ๊ฐ ๋ฉ”์ด์ปค์˜ ์„ค์น˜ ๋ฉ”๋‰ด์–ผ์„ ํ™•์ธํ•ด์ฃผ์‹ญ์‹œ์˜ค", "stuff.detail.tempSave.message1": "์ž„์‹œ์ €์žฅ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌผ๊ฑด๋ฒˆํ˜ธ๋ฅผ ํš๋“ํ•˜๋ ค๋ฉด ํ•„์ˆ˜ ํ•ญ๋ชฉ์„ ๋ชจ๋‘ ์ž…๋ ฅํ•ด ์ฃผ์‹ญ์‹œ์˜ค.", "stuff.detail.tempSave.message2": "๋‹ด๋‹น์ž๋Š” 10์ž๋ฆฌ ์ดํ•˜๋กœ ์ž…๋ ฅํ•ด ์ฃผ์‹ญ์‹œ์˜ค.", + "stuff.detail.tempSave.message3": "2์ฐจ ํŒ๋งค์ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.", "stuff.detail.confirm.message1": "ํŒ๋งค์  ์ •๋ณด๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด, ์„ค๊ณ„์˜๋ขฐ ๋ฌธ์„œ๋ฒˆํ˜ธ๊ฐ€ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค. ๋ณ€๊ฒฝํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?", "stuff.detail.delete.message1": "์‚ฌ์–‘์ด ํ™•์ •๋œ ๋ฌผ๊ฑด์€ ์‚ญ์ œํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.", "stuff.detail.planList.title": "ํ”Œ๋žœ๋ฆฌ์ŠคํŠธ", diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 0e767ee7..57ce2c5a 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -4,477 +4,505 @@ $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: 100000; - &.xsm{ - width: 200px; +.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: 100000; + &.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; + } + &.ll { + width: 900px; + } + &.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; + } } - &.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; - } - &.ll{ - width: 900px; - } - &.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{ + .modal-body { + background-color: #fff; + padding: 22px; + border-radius: 4px; + border: 1px solid #101010; + color: $alert-color; + .alert-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{ - 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; + margin-bottom: 15px; + } } + } } - -.adsorption-point{ +.modal-head { + display: flex; + align-items: center; + padding: 10px 24px; + background-color: #000; + // overflow: hidden; + cursor: pointer; + 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; - 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; + gap: 5px; + button { + flex: 1; } - i{ - display: flex; - align-items: center; - padding: 0 7px; - margin-left: auto; - height: 100%; - font-size: 13px; - color: #898989; + &.sub { + button { + flex: 1 1 auto; + padding: 0; + } + margin-bottom: 14px; } - &.act{ - i{ - color: $pop-color; - background-color: #1083E3; + } + .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-guide { + display: block; + font-size: $pop-normal-size; + color: $alert-color; + font-weight: $pop-normal-weight; + } +} +.modal-foot { + display: block; + width: 100%; + padding: 5px 0; + background-color: #000; + cursor: pointer; +} + +.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 { + 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{ +.grid-check-form { + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 15px; + &.border { + border-bottom: 1px solid #424242; + } +} +.grid-option-overflow { + max-height: 350px; + overflow-y: auto; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9d9d9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} +.grid-option-wrap { + .grid-option-box { display: flex; align-items: center; - gap: 15px; - padding-bottom: 15px; - &.border{ - border-bottom: 1px solid #424242; - } -} -.grid-option-overflow{ - max-height: 350px; - overflow-y: auto; - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } -} -.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; - } - } - .grid-option-block-form{ - flex: 1; - } -} -.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; - } - > ul{ - border: none; - } - } - &.right{ - p{ - text-align: right; - } - ul{ - li{ - justify-content: flex-end; - } - } - } -} -.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-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 .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{ + 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-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%; + } + .input-grid { + width: 54px; + input { + width: 100%; } + } } + &:last-child { + margin-bottom: 0; + } + } + .grid-option-block-form { + flex: 1; + } } -.direction-move-wrap{ - flex: none; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 5px; - margin-left: auto; +.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; + } + > ul { + border: none; + } + } + &.right { + p { + text-align: right; + } + ul { + li { + justify-content: flex-end; + } + } + } +} +.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-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; + } +} + +// 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{ - 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; - } - } +.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; + } + .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; } - &.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; - } - } - } + th { + padding: 14px 0; } + tr { + &:first-child { + td, + th { + padding-top: 14px; + } + } + &:last-child { + td, + th { + padding-bottom: 0px; + } + } + } + } } // 2024-12-11 @@ -485,1612 +513,1793 @@ $alert-color: #101010; // max-width: 250px; // } -.pop-form-radio{ - display: flex; - align-items: center; - gap: 10px; +.pop-form-radio { + display: flex; + align-items: center; + gap: 10px; } -.placement-option{ - display: flex; - align-items: center; - gap: 20px; +.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{ - 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; - } - } -} -.img-name-wrap{ - display: flex; - align-items: center; +.select-wrap { + .sort-select { 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); - } + } +} +.flex-ment { + display: flex; + align-items: center; + gap: 5px; + span { + font-size: $pop-normal-size; + color: $pop-color; + font-weight: $pop-normal-weight; + } } -.for-address{ - input{ - flex: 1; +.img-edit-wrap { + flex: none; + .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 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; } - .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);} + &:hover { + background-color: #ebebeb; } + } +} +.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{ - 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{ +.outline-wrap { + padding: 24px 0; + border-top: 1px solid #424242; + + .outline-inner { 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; - } + 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; - .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; + 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; + } } -.cul-wrap{ +.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 { 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{ - display: flex; - align-items: center; - justify-content: center; - width: 50%; - background-color: #3D3D3D; - border-radius: 2px ; - } + 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 .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 .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 .15s ease-in-out; - } - .shape-menu-box{ - &.act, - &:hover{ - .shape-box{background-color: #008BFF;} - .shape-title{color: #008BFF;} - } - } -} - -.setting-box{ +.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; -} -.padding-form{ - padding-left: 23px; -} -.discrimination-box{ - padding: 16px 12px; - border: 1px solid #3D3D3D; - border-radius: 2px; + .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; + } + } + } + } } -.modal-bottom-border-bx{ - margin-top: 24px; - padding-bottom: 14px; - border-bottom: 1px solid #424242; +// ์ง€๋ถ•ํ˜•์ƒ ์„ค์ • +.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; - } - } +.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; - } +.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{ +.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; - 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; - } + 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; +.block-box { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; + .flex-ment { 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; - } + .dec { + text-decoration: underline; } - &:last-child{ - margin-bottom: 0; + .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; +.icon-btn-wrap { + flex: 1; + display: flex; + align-items: center; + gap: 5px; + button { 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; - 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%; - } - } - } -} -.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); - } - } -} - -.plane-tab-guide{ + width: 100%; + height: 30px; 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%; + 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); + } + } + } + } } -// ์˜ค๋ธŒ์ ํŠธ ๋ฐฐ์น˜ -.mb-box{ - margin-bottom: 24px; +// ๊ฒฝ์‚ฌ์„ค์ • +.slope-wrap { + padding-bottom: 24px; + 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; +// ๋ฉดํ˜•์ƒ ๋ฐฐ์น˜ +.plane-frame-wrap { + display: flex; + gap: 10px; + .plane-shape-wrap { + flex: none; + width: 73px; + } } -.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{ +.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%); + } } - } -} - -// ํ‘œ์‹œ๋ณ€๊ฒฝ -.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; - 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; - } - } - } - .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; -} - -// ์ง€๋ถ•๋ชจ๋“ˆ์„ ํƒ -.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: 22px; - } - &.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; - 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{ - margin-left: auto; - } - } - } -} - -// ํšŒ๋กœ ๋ฐ ๊ฐ€๋Œ€์„ค์ • -.circuit-check-inner{ - padding: 5px 0; - &.overflow{ - overflow-y: auto; - max-height: 100px; - min-height: 60px; - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - } - .d-check-box{ - margin-bottom: 15px; - &:last-child{ - margin-bottom: 0; - } - } -} - -.x-scroll-table{ - overflow: auto; - padding-bottom: 5px; - background-color: transparent; - max-height: 170px; - .roof-module-table{ - min-width: 1200px; - } - &::-webkit-scrollbar { - width: 4px; - height: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #b4b4b4; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - &::-webkit-scrollbar-corner{ - 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.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; - } - } -} -.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{ - overflow-x: auto; - margin-bottom: 25px; - &::-webkit-scrollbar { - height: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } - .module-table-box{ - display: flex; - &.by-max{ - min-width: 886px; - } - } -} - -.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-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{ - 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; - 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; + .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; } + } } + } } + } } -} - -// ๊ธ€๊ผด ์„ค์ • ํŒ์—… -.font-option-warp{ - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 15px 5px; - margin-bottom: 15px; - .font-option-item{ - .option-item-tit{ - font-size: 12px; - font-weight: 500; - color: #fff; - margin-bottom: 10px; - } - } -} -.font-ex-wrap{ - margin-bottom: 15px; - .font-ex-tit{ - font-size: 12px; - font-weight: 500; - color: #fff; - margin-bottom: 10px; - } - .font-ex-box{ + &.direction-box { + flex: 1; + display: flex; + flex-direction: column; + .plane-direction-box { + flex: 1; 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; +.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%); } -} - -.line-color-wrap{ - margin-bottom: 15px; - .color-btn{ - display: block; - width: 100%; - height: 30px; - border-radius: 2px; + &.right { + top: 50%; + right: 0; + transform: translateY(-50%); } -} - -.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; - } - } - } + &.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); + } + } } -// ์‚ฌ์ด์ฆˆ ๋ณ€๊ฒฝ -.size-inner-warp{ - position: relative; +.plane-tab-guide { + font-size: $pop-normal-size; + font-weight: $pop-normal-weight; + color: $pop-color; + margin-top: 10px; } -.size-check-wrap{ - position: relative; +.plane-shape-btn { + padding-top: 10px; + margin-top: auto; + button { 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; } + 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%); } - .size-box{ + } +} + +// ํ‘œ์‹œ๋ณ€๊ฒฝ +.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; + 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: 100px; - height: 100px; + width: 5px; + height: 5px; background-color: #fff; + border-radius: 50%; + } + i { + color: #fff; + } } -} - -.size-option-top{ - margin-bottom: 15px; -} -.size-option-side{ + } + .compas { position: absolute; top: 50%; - left: 0; - transform: translateY(-50%); -} -.size-option-wrap{ - width: 88px; - margin: 0 auto; - .size-option{ - display: flex; - align-items: center; - input{ - width: 100%; - flex: 1; - } - span{ - flex: none; - } + 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; +} + +// ์ง€๋ถ•๋ชจ๋“ˆ์„ ํƒ +.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 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; + // } + // } + i { + top: 22px; + } + &.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 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 { + margin-left: auto; + } + } + } +} + +// ํšŒ๋กœ ๋ฐ ๊ฐ€๋Œ€์„ค์ • +.circuit-check-inner { + padding: 5px 0; + &.overflow { + overflow-y: auto; + max-height: 100px; + min-height: 60px; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9d9d9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + .d-check-box { + margin-bottom: 15px; + &:last-child { + margin-bottom: 0; + } + } +} + +.x-scroll-table { + overflow: auto; + padding-bottom: 5px; + background-color: transparent; + max-height: 170px; + .roof-module-table { + min-width: 1200px; + } + &::-webkit-scrollbar { + width: 4px; + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #b4b4b4; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + &::-webkit-scrollbar-corner { + 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; + } + } +} +.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 { + overflow-x: auto; + margin-bottom: 25px; + &::-webkit-scrollbar { + height: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9d9d9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + .module-table-box { + display: flex; + &.by-max { + min-width: 886px; + } + } +} + +.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-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 { + 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; + font-weight: 500; + margin-right: 10px; + } + .color-hex-input { + width: 150px; + margin-right: 5px; + input { + width: 100%; + } + } + .color-box { + display: block; + width: 30px; + height: 30px; + border-radius: 4px; + } + } + .default-color-wrap { + margin-top: 25px; + .default-tit { + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + .color-button-wrap { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 21px; + .default-color { + display: block; + width: 100%; + height: 30px; + border-radius: 4px; + } + } + } + } +} + +// ๊ธ€๊ผด ์„ค์ • ํŒ์—… +.font-option-warp { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 5px; + margin-bottom: 15px; + .font-option-item { + .option-item-tit { + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + } +} +.font-ex-wrap { + margin-bottom: 15px; + .font-ex-tit { + font-size: 12px; + font-weight: 500; + color: #fff; + margin-bottom: 10px; + } + .font-ex-box { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + 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; + } + .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-check-wrap { + position: relative; + display: block; + width: 132px; + height: 132px; + margin: 0 auto; + .size-btn { + position: absolute; + width: 16px; + height: 16px; + border: 1px solid #fff; + border-radius: 50%; + &.act { + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 8px; + height: 8px; + background-color: #fff; + border-radius: 50%; + } + } + &:nth-child(1) { + top: 0; + left: 0; + } + &:nth-child(2) { + top: 0; + right: 0; + } + &:nth-child(3) { + bottom: 0; + left: 0; + } + &:nth-child(4) { + bottom: 0; + right: 0; + } + } + .size-box { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100px; + height: 100px; + background-color: #fff; + } +} + +.size-option-top { + margin-bottom: 15px; +} +.size-option-side { + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} +.size-option-wrap { + width: 88px; + margin: 0 auto; + .size-option { + display: flex; + align-items: center; + input { + width: 100%; + flex: 1; + } + span { + flex: none; + } + } } //์ด๋ฏธ์ง€ ํฌ๊ธฐ ์„ค์ • -.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{ +.module-table-box { + &.none-flex { + flex: none; + width: 230px; + .outline-form { + .grid-select { flex: none; - width: 230px; - .outline-form{ - .grid-select{ - flex: none; - width: 95.77px; - } - .thin{ - margin-left: auto; - } - } - } -} -.roof-module-tab2-overflow{ - max-height: 500px; - overflow-y: auto; - padding-bottom: 15px; - border-bottom: 1px solid #4D4D4D; - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #D9D9D9; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } -} -.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-start; - flex: none; - padding-top: 27.5px; - 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; - } -} - -.reset-word-wrap{ - display: flex; - align-items: center; - .grid-btn-wrap{ + width: 95.77px; + } + .thin { margin-left: auto; + } } + } } -.reset-word{ - font-size: 12px; - color: #FFCACA; - font-weight: 400; +.roof-module-tab2-overflow { + max-height: 500px; + overflow-y: auto; + padding-bottom: 15px; + border-bottom: 1px solid #4d4d4d; + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9d9d9; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} +.module-table-flex-wrap { + &.tab2 { margin-top: 10px; -} \ No newline at end of file + 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-start; + flex: none; + padding-top: 27.5px; + 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; + } +} + +.reset-word-wrap { + display: flex; + align-items: center; + .grid-btn-wrap { + margin-left: auto; + } +} +.reset-word { + font-size: 12px; + color: #ffcaca; + font-weight: 400; + margin-top: 10px; +} diff --git a/src/util/common-utils.js b/src/util/common-utils.js index 47498464..b77cf62d 100644 --- a/src/util/common-utils.js +++ b/src/util/common-utils.js @@ -134,3 +134,18 @@ export const getQueryString = (o) => { .join('&') return `?${queryString}` } + +export const unescapeString = (str) => { + const regex = /&(amp|lt|gt|quot|#39);/g + const chars = { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + ''': "'", + } + + if (regex.test(str)) { + return str.replace(regex, (matched) => chars[matched] || matched) + } +}