From 7c355d6cc43b0ed537ac53a15ca20496e63e7e5b Mon Sep 17 00:00:00 2001 From: basssy Date: Thu, 16 Jan 2025 17:54:56 +0900 Subject: [PATCH 01/16] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=83=81=EB=8B=A8=20=EB=A9=94=EB=89=B4=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EA=B4=80=EB=A0=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 6 +++- src/components/management/StuffDetail.jsx | 1 + src/components/management/StuffSubHeader.jsx | 4 +-- .../management/popup/PlanRequestPop.jsx | 35 ++++--------------- .../management/popup/PlanRequestPopQGrid.jsx | 5 +-- .../estimate/useEstimateController.js | 1 + 6 files changed, 19 insertions(+), 33 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 6d33d474..c5fb9194 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -203,7 +203,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/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 15ea41fc..7741b59c 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}`) }} > 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/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 66b0974c..066393cf 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) } } From e8078177f4ecf3e5b777f15201ad9199385ccb4e Mon Sep 17 00:00:00 2001 From: basssy Date: Thu, 16 Jan 2025 17:57:23 +0900 Subject: [PATCH 02/16] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20objectNo=20?= =?UTF-8?q?,=20=ED=8C=9D=EC=97=85=EC=B0=BD=20=EB=8B=AB=EB=8A=94=20?= =?UTF-8?q?=EC=88=9C=EC=84=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 5ef2c9da..d0512fd7 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,7 +720,6 @@ 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) { @@ -729,6 +727,12 @@ export default function Estimate({}) { } else { if (estimateContextState.estimateType === 'YJSS') { 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 @@ -1006,7 +1007,7 @@ export default function Estimate({}) {
{getMessage('estimate.detail.objectNo')}
{/* {objectNo} (Plan No: {estimateContextState.planNo}) */} - {objectNo} (Plan No: {planNo}) + {currentObjectNo} (Plan No: {planNo})
From d73daf10246c84df2c439c668c8faf5af785911b Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Thu, 16 Jan 2025 18:14:52 +0900 Subject: [PATCH 03/16] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=EC=84=A4=EC=A0=95=20=EC=84=9C=EA=B9=8C=EB=9E=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../placementShape/PlacementShapeSetting.jsx | 59 ++++++++++--------- src/hooks/option/useCanvasSetting.js | 15 +++-- 2 files changed, 41 insertions(+), 33 deletions(-) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index a9619c2f..66fa021e 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -56,20 +56,25 @@ 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) - - 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 (!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 }) + // } + // }, []) useEffect(() => { if (addedRoofs.length > 0) { + const raftCodeList = findCommonCode('203800') + setRaftCodes(raftCodeList) + setCurrentRoof({ ...addedRoofs[0] }) } }, [addedRoofs]) @@ -155,20 +160,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() @@ -338,13 +343,13 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
{getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( + {raftCodes?.length > 0 && (
r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)).clCodeNm + raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)).clCodeNm } value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft} onChange={(e) => handleRafterChange(e.clCode)} diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 951d9801..ed9dec8c 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) { @@ -328,6 +330,7 @@ export function useCanvasSetting() { roofGap: 'HEI_455', roofLayout: 'P', roofPitch: 4, + roofAngle: 21.8, }, ] } From 7db2553074b0f8a6dcca379a96c4b112d367d9b2 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 00:08:32 +0900 Subject: [PATCH 04/16] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=ED=9B=84=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EC=B2=B4?= =?UTF-8?q?=ED=81=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 156 +++++++++++++++--- .../estimate/useEstimateController.js | 4 +- 2 files changed, 134 insertions(+), 26 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index d0512fd7..0dc86adb 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -950,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]) diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 066393cf..ebd1ad88 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -385,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) { @@ -410,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, From d862ab359e6b17dac9569f4947531c1f860ec7b1 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 00:30:15 +0900 Subject: [PATCH 05/16] =?UTF-8?q?=20=EA=B2=AC=EC=A0=81=EC=84=9C=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EA=B4=80=EB=A0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 0dc86adb..39766b12 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -726,13 +726,13 @@ export default function Estimate({}) { 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: '' } - // } + if (updates.pkgMaterialFlg === '1') { + return { ...item, ...updates, showSalePrice: updates.salePrice } + } else { + return { ...item, ...updates, salePrice: '', saleTotPrice: '' } + } } else { return { ...item, ...updates } } From 3aa20d6cf1956c5eabe77ebf3643e552e56bf2ed Mon Sep 17 00:00:00 2001 From: changkyu choi Date: Fri, 17 Jan 2025 09:34:50 +0900 Subject: [PATCH 06/16] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=A9=B4=20=ED=95=A0?= =?UTF-8?q?=EB=8B=B9=20=EC=B2=B4=ED=81=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/option/useCanvasSetting.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index ed9dec8c..6afced52 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -299,7 +299,7 @@ export function useCanvasSetting() { }) roofsArray = res.map((item) => { return { - roofApply: true, + roofApply: item.roofApply, roofSeq: 0, roofMatlCd: item.roofMatlCd, roofWidth: item.roofWidth, From 28b0a5a65ac44d79343fd11d582b326dc74e65c2 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 09:50:42 +0900 Subject: [PATCH 07/16] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=203-4=EB=93=B1=20?= =?UTF-8?q?=ED=95=98=EC=9C=84=20=EC=9E=88=EB=8A=94=202=EC=B0=A8=EC=A0=90?= =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=ED=95=B4=EC=84=9C=20=EB=AC=BC?= =?UTF-8?q?=EA=B1=B4=20=EC=9E=84=EC=8B=9C=EC=A0=80=EC=9E=A5=20/=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=8B=9C=202=EC=B0=A8=EC=A0=90=20=EC=97=86?= =?UTF-8?q?=EC=9C=BC=EB=A9=B4=20=EC=95=8C=EB=9F=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/estimate/Estimate.jsx | 2 -- src/components/management/StuffDetail.jsx | 9 ++++++++- src/locales/ja.json | 1 + src/locales/ko.json | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index 39766b12..21e87620 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -1185,7 +1185,6 @@ export default function Estimate({}) {
- {/* */}
- {/* */} 10) { diff --git a/src/locales/ja.json b/src/locales/ja.json index 900165c5..3c36a2cc 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -673,6 +673,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 c5ba4658..c928a2f1 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -682,6 +682,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": "플랜리스트", From 3ae8ef5dea87f3e487eae72810dbc7a34bdf751c Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 10:12:07 +0900 Subject: [PATCH 08/16] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20&=20?= =?UTF-8?q?=EB=B0=9C=EC=A0=84=EC=8B=9C=EB=AE=AC=EB=A0=88=EC=9D=B4=EC=85=98?= =?UTF-8?q?=20=ED=83=AD=EC=97=90=EC=84=9C=20=ED=94=8C=EB=9E=9C=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20=EC=B2=B4=ED=81=AC=20=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePlan.js | 55 ++++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 86b6aee3..fb743828 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -207,49 +207,54 @@ 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) { + console.log('이동') + 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') }) + //발전시뮬레이션 + // 클릭한 플랜 탭으로 이동 + // updateCurrentPlan(newCurrentId) } } }) .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) } } From 87b480dba48e61c7a0f733209f0d5b9d6e8a7791 Mon Sep 17 00:00:00 2001 From: lelalela Date: Fri, 17 Jan 2025 10:13:00 +0900 Subject: [PATCH 09/16] =?UTF-8?q?=EB=AA=A8=EB=93=88=20=ED=83=AD=20?= =?UTF-8?q?=EC=BB=A8=ED=85=90=ED=8A=B8=20=EC=98=81=EC=97=AD=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/basic/step/Module.jsx | 23 ++++----- .../modal/basic/step/ModuleTabContents.jsx | 17 +++++-- .../floor-plan/modal/basic/step/Placement.jsx | 19 ++++---- src/hooks/common/useMasterController.js | 8 ++-- src/hooks/module/useModule.js | 10 +++- src/hooks/module/useModuleBasicSetting.js | 1 + src/hooks/module/useModulePlace.js | 48 ++++++++++--------- src/hooks/useContextMenu.js | 4 +- 8 files changed, 73 insertions(+), 57 deletions(-) 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/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index 29a17464..6332b8d2 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -54,9 +54,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 }) } @@ -80,9 +80,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/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/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', From eac19c76203c1ba4574c3a1a34761943f517bf0a Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 10:36:27 +0900 Subject: [PATCH 10/16] =?UTF-8?q?=EA=B2=AC=EC=A0=81=EC=84=9C=20&=20?= =?UTF-8?q?=EB=B0=9C=EC=A0=84=EC=8B=9C=EB=AE=AC=EB=A0=88=EC=9D=B4=EC=85=98?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=20=EA=B4=80=EB=A0=A8=20pid=20=EC=85=8B?= =?UTF-8?q?=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 14 +++++++++----- src/hooks/usePlan.js | 1 - 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index c5fb9194..19db2fde 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -44,6 +44,7 @@ import JA from '@/locales/ja.json' import { MENU } from '@/common/common' import { QcastContext } from '@/app/QcastProvider' + export default function CanvasMenu(props) { const { menuNumber, setMenuNumber } = props const pathname = usePathname() @@ -101,6 +102,8 @@ export default function CanvasMenu(props) { const { setIsGlobalLoading } = useContext(QcastContext) + //임시 + const { selectedPlan } = usePlan() const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => { 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,14 @@ 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 + //docno tempFlg0 if (estimateDetail.docNo) { 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') }) } diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index fb743828..10c1dc2d 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -215,7 +215,6 @@ export function usePlan(params = {}) { const estimateDetail = res.data if (pathname === '/floor-plan/estimate/5') { if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) { - console.log('이동') res.data.resetFlag = 'N' if (res.data.itemList.length > 0) { From 6021fa537c257178b6c2e193450a3225f4f241c6 Mon Sep 17 00:00:00 2001 From: LEEYONGJAE Date: Fri, 17 Jan 2025 10:46:52 +0900 Subject: [PATCH 11/16] =?UTF-8?q?=EB=B0=9C=EC=A0=84=EC=8B=9C=EB=AE=AC?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EB=A9=94=EB=89=B4=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 3 +- src/components/simulator/Simulator.jsx | 38 +++++++++--------------- src/hooks/usePlan.js | 9 ++++-- 3 files changed, 21 insertions(+), 29 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 19db2fde..012b62e9 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -189,8 +189,7 @@ export default function CanvasMenu(props) { promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => { if (res.status === 200) { const estimateDetail = res.data - //docno tempFlg0 - if (estimateDetail.docNo) { + if (estimateDetail.tempFlg === '0') { setMenuNumber(menu.index) setCurrentMenu(menu.title) router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`) 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/usePlan.js b/src/hooks/usePlan.js index 10c1dc2d..a0733e57 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -237,9 +237,12 @@ export function usePlan(params = {}) { swalFire({ text: getMessage('estimate.menu.move.valid1') }) } } else { - //발전시뮬레이션 - // 클릭한 플랜 탭으로 이동 - // updateCurrentPlan(newCurrentId) + // 발전시뮬레이션 + if (estimateDetail.tempFlg === '0') { + updateCurrentPlan(newCurrentId) + } else { + swalFire({ text: getMessage('simulator.menu.move.valid1') }) + } } } }) From b47ae97dd1174b1db30d7919c69a57268c9365e8 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 17 Jan 2025 11:01:41 +0900 Subject: [PATCH 12/16] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=20=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20saleStoreId=20=EC=85=8B?= =?UTF-8?q?=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/management/Stuff.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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) => { From 558594e450ba19345a0c211aa419d1036bbae999 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 17 Jan 2025 11:11:47 +0900 Subject: [PATCH 13/16] =?UTF-8?q?currentRoofList=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ContextRoofAllocationSetting.jsx | 231 +++++++++--------- .../roofcover/useRoofAllocationSetting.js | 2 +- 2 files changed, 117 insertions(+), 116 deletions(-) diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx index e8942948..1d5bc188 100644 --- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx @@ -79,133 +79,134 @@ export default function ContextRoofAllocationSetting(props) {
- {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/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/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/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index 38ae2e89..a30e506b 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -83,7 +83,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 66fa021e..844cb87e 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -56,25 +56,24 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set ] // 데이터를 최초 한 번만 조회 - // useEffect(() => { + // useEffect(() => { // if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return - // const raftCodeList = findCommonCode('203800') + // 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 }) - // } + // } // }, []) useEffect(() => { if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - + setCurrentRoof({ ...addedRoofs[0] }) } }, [addedRoofs]) @@ -182,7 +181,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set return (
-
+

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

{showSizeGuideModal && } {showMaterialGuideModal && } +
) diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index 431e0f85..7fc56d57 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -242,7 +242,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) return (
-
+

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

+
) 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 1d5bc188..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')}

+
) 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/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/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) + } +} From 7ac16fbf5dee5996b412bda5300211f82c374dc9 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 17 Jan 2025 13:43:24 +0900 Subject: [PATCH 16/16] =?UTF-8?q?directionText=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/usePolygon.js | 6 ++++++ 1 file changed, 6 insertions(+) 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',