diff --git a/src/common/common.js b/src/common/common.js index 0fa678db..d82d43f0 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -202,6 +202,7 @@ export const SAVE_KEY = [ 'fontStyle', 'fontWeight', 'dormerAttributes', + 'toFixed', ] export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype] diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 94f24f42..f6176bdb 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -33,54 +33,43 @@ export default function ColorPickerModal(props) { }, [isShow]) return ( - -
-
-

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

+ + { + if (setIsShow) { + setIsShow(false) + } + closePopup(id, isConfig) + }} + /> + +
+
+ +
+
+
-
-
-
-
-
- -
-
-
- -
-
-
-
+ ) } diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx index 955a3e4b..cd8b9e2b 100644 --- a/src/components/common/context-menu/QContextMenu.jsx +++ b/src/components/common/context-menu/QContextMenu.jsx @@ -113,7 +113,7 @@ export default function QContextMenu(props) { return ( <> {contextMenu.visible && ( -
+
{/*
    */} {/*
  • handleObjectMove()}>*/} {/* 이동*/} diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx index 732d8ff7..49552eac 100644 --- a/src/components/common/draggable/WithDraggable.jsx +++ b/src/components/common/draggable/WithDraggable.jsx @@ -3,7 +3,7 @@ import { useState } from 'react' import Draggable from 'react-draggable' -export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) { +export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) { const [position, setPosition] = useState(pos) const handleOnDrag = (e, data) => { @@ -22,9 +22,43 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, onDrag={(e, data) => handleOnDrag(e, data)} handle={handle === '' ? '.modal-handle' : handle} > - {children} +
    + {children} + {hasFooter && } +
    )} ) } + +function WithDraggableHeader({ title, onClose, children }) { + return ( +
    +

    {title}

    + {onClose && ( + + )} +
    + ) +} + +function WithDraggableBody({ children }) { + return ( +
    +
    +
    + <>{children} +
    + ) +} + +function WithDraggableFooter() { + return
    +} + +WithDraggable.Header = WithDraggableHeader +WithDraggable.Body = WithDraggableBody +WithDraggable.Footer = WithDraggableFooter diff --git a/src/components/common/font/FontSetting.jsx b/src/components/common/font/FontSetting.jsx index beb31aa3..0c3623f6 100644 --- a/src/components/common/font/FontSetting.jsx +++ b/src/components/common/font/FontSetting.jsx @@ -67,111 +67,101 @@ export default function FontSetting(props) { } return ( - -
    -
    -

    {getMessage('modal.font')}

    -
    -
    -
    -
    -
    -
    -
    -
    {getMessage('modal.font')}(F)
    -
    - { - setSelectedFont(e) - }} - showKey={'name'} - sourceKey={'value'} - targetKey={'value'} - /> -
    -
    -
    -
    {getMessage('modal.font.style')}(Y)
    -
    - { - setSelectedFontWeight(e) - }} - showKey={'name'} - targetKey={'id'} - sourceKey={'id'} - /> -
    -
    -
    -
    {getMessage('modal.font.size')}(S)
    -
    - setSelectedFontSize(e)} - showKey={'name'} - sourceKey={'value'} - targetKey={'value'} - /> -
    -
    -
    -
    {getMessage('modal.font.color')}
    -
    - { - setSelectedFontColor(e) - }} - /> -
    -
    -
    -
    -
    {getMessage('modal.font.setting.display')}
    -
    - - Aaあぁアァ - -
    -
    -
    {getMessage('modal.font.setting.info')}
    -
    -
    - -
    -
    -
    -
    +     ) } diff --git a/src/components/common/spinner/PopSpinner.jsx b/src/components/common/spinner/PopSpinner.jsx new file mode 100644 index 00000000..56b54b76 --- /dev/null +++ b/src/components/common/spinner/PopSpinner.jsx @@ -0,0 +1,7 @@ +export default function PopSpinner() { + return ( +
    + +
    + ) +} diff --git a/src/components/estimate/Estimate.jsx b/src/components/estimate/Estimate.jsx index c9a38727..a44af878 100644 --- a/src/components/estimate/Estimate.jsx +++ b/src/components/estimate/Estimate.jsx @@ -58,6 +58,9 @@ export default function Estimate({}) { const [storePriceList, setStorePriceList] = useState([]) //가격표시 option + const [cableItemList, setCableItemList] = useState([]) //케이블 리스트 + const [cableItem, setCableItem] = useState('') //케이블 선택값 + const [startDate, setStartDate] = useState(new Date()) const singleDatePickerProps = { startDate, @@ -107,6 +110,16 @@ export default function Estimate({}) { setHonorificCodeList(code1) } + // 케이블제품 공통코드 + const code2 = findCommonCode(117900) + if (code2 != null) { + code2.map((item) => { + item.value = item.clRefChr1 + item.label = item.clRefChr2 + }) + setCableItemList(code2) + } + //아이템 자동완성 목록 가져오기 const param = { saleStoreId: session.storeId, @@ -467,10 +480,6 @@ export default function Estimate({}) { //Pricing 버튼 const handlePricing = async (showPriceCd) => { - //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요 - if (estimateContextState.estimateType === 'YJSS') { - return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' }) - } const param = { saleStoreId: session.storeId, sapSalesStoreCd: session.custCd, @@ -551,7 +560,7 @@ export default function Estimate({}) { } const getAbledItems = (items) => { - return items.filter((items) => items.paDispOrder === null) + return items.filter((items) => items.dispCableFlg !== '1' && items.paDispOrder === null) } const onChangeSelectAll = (e) => { @@ -684,12 +693,20 @@ export default function Estimate({}) { setItemChangeYn(true) } + /* 케이블 select 변경시 */ + const onChangeDisplayCableItem = (value, itemList) => { + itemList.map((item, index) => { + if (item.dispCableFlg === '1') { + if (value !== '') { + onChangeDisplayItem(value, item.dispOrder, index, true) + } + } + }) + setCableItem(value) + } + // 아이템 자동완성 검색시 아이템 추가/변경시 - const onChangeDisplayItem = (itemId, dispOrder, index) => { - //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요 - if (estimateContextState.estimateType === 'YJSS') { - return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' }) - } + const onChangeDisplayItem = (itemId, dispOrder, index, flag) => { const param = { itemId: itemId, coldZoneFlg: estimateContextState?.coldRegionFlg, @@ -719,7 +736,7 @@ export default function Estimate({}) { updates.itemGroup = res.itemGroup updates.delFlg = '0' // 삭제플래그 0 updates.saleTotPrice = (res.salePrice * estimateContextState.itemList[index].amount).toString() - updates.amount = '' + updates.amount = flag ? estimateContextState.itemList[index].amount : '' updates.openFlg = res.openFlg if (estimateContextState.estimateType === 'YJSS') { @@ -782,6 +799,7 @@ export default function Estimate({}) { bomItem.objectNo = objectNo bomItem.planNo = planNo bomItem.addFlg = true //봄 추가시도 addFlg + bomItem.openFlg = '0' //봄 컴포넌트는 무조건 0으로 }) updateList = updateList.filter((item) => item.delFlg === '0') @@ -1000,7 +1018,7 @@ export default function Estimate({}) { item.showSaleTotPrice = '0' } }) - + let dispCableFlgCnt = 0 estimateContextState.itemList.forEach((item) => { if (item.delFlg === '0') { let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0 @@ -1035,8 +1053,18 @@ export default function Estimate({}) { item.showSalePrice = '0' item.showSaleTotPrice = '0' } + + if (item.dispCableFlg === '1') { + dispCableFlgCnt++ + setCableItem(item.itemId) + } } }) + + if (dispCableFlgCnt === 0) { + setCableItem('100038') + } + let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0 totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000 @@ -1064,6 +1092,7 @@ export default function Estimate({}) { } }) + let dispCableFlgCnt = 0 estimateContextState.itemList.forEach((item) => { delete item.showSalePrice delete item.showSaleTotPrice @@ -1091,9 +1120,21 @@ export default function Estimate({}) { item.showSalePrice = '0' item.showSaleTotPrice = '0' } + + if (item.dispCableFlg === '1') { + dispCableFlgCnt++ + } + + if (item.dispCableFlg === '1') { + setCableItem(item.itemId) + } } }) + if (dispCableFlgCnt === 0) { + setCableItem('100038') + } + totals.vatPrice = totals.supplyPrice * 0.1 totals.totPrice = totals.supplyPrice + totals.vatPrice @@ -1136,6 +1177,26 @@ export default function Estimate({}) { } }, [estimateContextState]) + useEffect(() => { + if (cableItemList.lenght > 0 || estimateContextState?.itemList.length > 0) { + let dispCableFlgCnt = 0 + estimateContextState.itemList.map((item) => { + if (item.dispCableFlg === '1') { + dispCableFlgCnt++ + cableItemList.map((cable) => { + if (item.itemId === cable.clRefChr1) { + cable.clRefChr3 = item.itemName + } + }) + } + }) + + if (dispCableFlgCnt === 0) { + setCableItem('100038') + } + } + }, [estimateContextState?.itemList, cableItemList]) + return (
    @@ -1281,7 +1342,7 @@ export default function Estimate({}) {
    - {/*
    +
    -
    */} +
    { - //todo: 추후 YJSS가 다시 나타날 경우 아래 주석풀기 - // setHandlePricingFlag(true) + setHandlePricingFlag(true) setEstimateContextState({ estimateType: e.target.value }) }} /> @@ -1602,9 +1662,8 @@ export default function Estimate({}) {
    - {/* //todo: 추후 YJSS가 다시 나타날 경우 주석 풀기 */} {/* YJOD면 아래영역 숨김 */} - {/*
    +
    @@ -1639,7 +1698,7 @@ export default function Estimate({}) {
    -
    */} +
    {/* 제품정보 끝 */} {/* 가격표시영역시작 */}
    @@ -1678,6 +1737,24 @@ export default function Estimate({}) { {getMessage('estimate.detail.showPrice.pricingBtn')}
    +
    +
    + +
    +
    • @@ -1757,7 +1834,7 @@ export default function Estimate({}) { onChangeSelect(item.dispOrder)} checked={!!selection.has(item.dispOrder)} /> @@ -1768,27 +1845,50 @@ export default function Estimate({}) {
      - { + if (isObjectNotEmpty(e)) { + onChangeDisplayItem(e.itemId, item.dispOrder, index, false) + } + }} + menuPlacement={'auto'} + getOptionLabel={(x) => x.itemName} + getOptionValue={(x) => x.itemNo} + isClearable={false} + isDisabled={!!item?.paDispOrder} + value={displayItemList.filter(function (option) { + if (item.itemNo === '') { + return false + } else { + return option.itemId === item.itemId + } + })} + /> + ) : ( + setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })} + /> + +
      -
      -
      -
      -
      - {getMessage('modal.image.load.size.rotate')} - -
      -
      -
      -
      - handleRefFileMethod(e)} checked={refFileMethod === '1'} /> - -
      -
      -
      - - handleRefFile(e.target.files[0]) : () => {}} - /> -
      -
      - - {refImage && } -
      -
      +
      +
      +
      + handleRefFileMethod(e)} checked={refFileMethod === '1'} /> +
      -
      -
      - handleRefFileMethod(e)} checked={refFileMethod === '2'} /> - +
      +
      + + handleRefFile(e.target.files[0]) : () => {}} + />
      -
      +
      setMapPositionAddress(e.target.value)} + className="input-origin al-l" + value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')} + readOnly /> -
      - -
      - {mapPositionAddress && } - {/* */} + {refImage && }
      -
      - - {/* */} +
      +
      + handleRefFileMethod(e)} checked={refFileMethod === '2'} /> + +
      +
      + setMapPositionAddress(e.target.value)} + /> +
      + +
      + {mapPositionAddress && } + {/* */} +
      -
      -
      +
      + + {/* */} +
      + ) } diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx index e867dcab..df4a25d7 100644 --- a/src/components/floor-plan/modal/Slope.jsx +++ b/src/components/floor-plan/modal/Slope.jsx @@ -13,42 +13,32 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) { const inputRef = useRef() return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      -
      - - {getMessage('slope')} - -
      - -
      - {pitchText} -
      -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index 3a9d64d6..1417b501 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -124,46 +124,36 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) { setType(button.type) } return ( - -
      -
      -

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

      - + ))} +
      +
      +
      {getMessage('setting')}
      + {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
      +
      + + +
      -
      -
      -
      -
      - {types.map((type, idx) => ( - - ))} -
      -
      -
      {getMessage('setting')}
      - {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } - {buttonAct === 4 && } - {buttonAct === 5 && } -
      -
      - - - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx index c8e7b95a..744b3387 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx @@ -55,77 +55,67 @@ export default function AuxiliaryEdit(props) { closePopup(id) } return ( - -
      -
      -

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

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

      {getMessage('length')}

      -
      -
      - setVerticalSize(e.target.value)} /> -
      - mm -
      - - -
      + + closePopup(id)} /> + +
      {getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}
      +
      +
      +
      +

      {getMessage('length')}

      +
      +
      + setVerticalSize(e.target.value)} />
      -
      -
      - setHorizonSize(e.target.value)} /> -
      - mm -
      - - -
      + mm +
      + + +
      +
      +
      +
      + setHorizonSize(e.target.value)} /> +
      + mm +
      + +
      -
      - -
      -
      -
      +
      + +
      +       ) } diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx index a9f7fc82..3bb94a4f 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx @@ -111,63 +111,53 @@ export default function AuxiliarySize(props) { closePopup(id) } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      -
      - setCheckedRadio(1)} /> - -
      -
      -
      - -
      - mm -
      -
      - {getMessage('length')} -
      - -
      - mm -
      -
      -
      -
      - setCheckedRadio(2)} /> - -
      -
      -
      - -
      - mm -
      -
      - {getMessage('length')} -
      - -
      - mm -
      -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index f607d3cb..ff56d212 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -11,7 +11,7 @@ import { usePopup } from '@/hooks/usePopup' import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' import { useEvent } from '@/hooks/useEvent' -import { moduleSelectionDataState } from '@/store/selectedModuleOptions' +import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' import { addedRoofsState, corridorDimensionSelector, basicSettingState } from '@/store/settingAtom' import { isObjectNotEmpty } from '@/util/common-utils' import Swal from 'sweetalert2' @@ -38,6 +38,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const canvas = useRecoilValue(canvasState) const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState) const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 }) + const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState) const [manualSetupMode, setManualSetupMode] = useState('manualSetup') @@ -50,6 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } = useModuleBasicSetting(tabNum) const { updateObjectDate } = useMasterController() + const handleBtnNextStep = () => { if (tabNum === 1) { orientationRef.current.handleNextStep() @@ -163,36 +165,43 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { } }, [layoutSetup]) - return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      {getMessage('modal.module.basic.setting.orientation.setting')}
      - -
      {getMessage('modal.module.basic.setting.module.setting')}
      - -
      {getMessage('modal.module.basic.setting.module.placement')}
      -
      - {tabNum === 1 && } - {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/} - {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && } - {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && ( - - )} + useEffect(() => { + setIsManualModuleSetup(false) + }, [checkedModules]) - {/*배치면 초기설정 - 입력방법: 육지붕*/} - {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && } - {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && ( - + return ( + + handleClosePopup(id)} /> + +
      +
      {getMessage('modal.module.basic.setting.orientation.setting')}
      + +
      {getMessage('modal.module.basic.setting.module.setting')}
      + +
      {getMessage('modal.module.basic.setting.module.placement')}
      +
      + {tabNum === 1 && } + {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/} + {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && } + {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && } + + {/*배치면 초기설정 - 입력방법: 육지붕*/} + {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && } + {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && ( + + )} + +
      + {tabNum !== 1 && ( + + )} + {/*{tabNum !== 3 && }*/} + {tabNum !== 3 && ( + )}
      @@ -237,8 +246,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { )}
      -
      -
      + ) } diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index f9f97833..53461f77 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -612,64 +612,53 @@ export default function CircuitTrestleSetting({ id }) { } return ( - -
      -
      -

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

      - {/* -
      -
      -
      -
      -
      -
      {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
      - -
      - {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')}) -
      + + handleClose()} /> + +
      +
      {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
      + +
      + {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
      - {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && } - {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && ( - - )} - {tabNum === 2 && } - {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && ( -
      - - -
      - )} - {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && ( -
      - - -
      - )} - {tabNum === 2 && ( -
      - - {/* -
      - )}
      -
      -
      + {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && } + {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && ( + + )} + {tabNum === 2 && } + {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && ( +
      + + +
      + )} + {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && ( +
      + + +
      + )} + {tabNum === 2 && ( +
      + + {/* +
      + )} + ) } diff --git a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx index f531f97f..b48ecffd 100644 --- a/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx @@ -160,6 +160,20 @@ export default function PowerConditionalSelect(props) { return } + + if (selectedModels.find((m) => m.pcsSerParallelYn === 'Y') && selectedRow.pcsSerParallelYn === 'Y') { + return + } + + if (selectedRow.pcsSerParallelYn === 'Y' && selectedModels.length === 0 && selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.SINGLE_P) { + swalFire({ + title: getMessage('modal.module.pcs.error1'), + icon: 'warning', + }) + + return + } + if (selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.MULTI) { setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }]) } else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId)) { @@ -169,6 +183,11 @@ export default function PowerConditionalSelect(props) { } const onRemoveSelectedModel = (model) => { + const tempModels = selectedModels.filter((m) => m.id !== model.id) + if (tempModels.length === 1 && tempModels[0].pcsSerParallelYn === 'Y') { + setSelectedModels([]) + return + } setSelectedModels(selectedModels.filter((m) => m.id !== model.id)) } @@ -277,14 +296,6 @@ export default function PowerConditionalSelect(props) {
      - {/*
      - - -
      */} ) } diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx index e4807c36..c2acc12d 100644 --- a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx @@ -122,95 +122,85 @@ export default function DimensionLineSetting(props) { } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      {getMessage('modal.display.edit.info')}
      -
      -
      -
      - {getMessage('modal.display.edit.before.length')} -
      - -
      -
      -
      -
      - {getMessage('modal.display.edit.after.length')} -
      - { - console.log(e.target) - setChangeLength(e.target.value) - }} - /> -
      -
      -
      -
      - setSlopeAble(!slopeAble)} /> - -
      -
      -
      -
      -
      {getMessage('modal.display.edit.input.slope')}
      -
      -
      - {getMessage('slope')} -
      - setSelectedSlope1(e)} - showKey={'name'} - sourceKey={'value'} - targetKey={'value'} - /> -
      - {pitchText} -
      -
      - {getMessage('slope')} -
      - setSelectedSlope2(e)} - showKey={'name'} - sourceKey={'value'} - targetKey={'value'} - /> -
      - {pitchText} -
      -
      -
      {getMessage('modal.display.edit.input.slope.info')}
      -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx index e9c175d3..8ec3aed2 100644 --- a/src/components/floor-plan/modal/distance/Distance.jsx +++ b/src/components/floor-plan/modal/distance/Distance.jsx @@ -16,62 +16,52 @@ export default function Distance(props) { } return ( - -
      -
      -

      {getMessage('modal.distance')}

      - -
      -
      -
      -
      -
      -
      -
      -
      {getMessage('modal.distance.dual.point')}
      -
      -
      -
      - -
      - mm + + closePopup(id)} /> + +
      +
      +
      +
      {getMessage('modal.distance.dual.point')}
      +
      +
      +
      +
      + mm
      -
      -
      {getMessage('modal.distance.horizon')}
      -
      -
      -
      - -
      - mm +
      +
      +
      {getMessage('modal.distance.horizon')}
      +
      +
      +
      +
      + mm
      -
      -
      {getMessage('modal.distance.vertical')}
      -
      -
      -
      - -
      - mm +
      +
      +
      {getMessage('modal.distance.vertical')}
      +
      +
      +
      +
      + mm
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx index c3975543..a59f8f27 100644 --- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -38,34 +38,24 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) { } return ( - -
      -
      -

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

      - + + closePopup(id)} /> + +
      + {buttonMenu.map((item) => ( + + ))}
      -
      -
      -
      -
      - {buttonMenu.map((item) => ( - - ))} -
      -
      -
      {getMessage('setting')}
      - {type === TYPES.EAVES && } - {type === TYPES.GABLE && } - {type === TYPES.WALL_MERGE && } - {type === TYPES.SHED && } -
      +
      +
      {getMessage('setting')}
      + {type === TYPES.EAVES && } + {type === TYPES.GABLE && } + {type === TYPES.WALL_MERGE && } + {type === TYPES.SHED && }
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx index df8525cc..910a2f02 100644 --- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx +++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx @@ -63,123 +63,113 @@ export default function FlowDirectionSetting(props) { ) return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      -
      {getMessage('modal.flow.direction.setting')}
      -
      {getMessage('modal.flow.direction.setting.info')}
      -
      -
      - {getMessage('commons.north')} - - {getMessage('commons.east')} - - {getMessage('commons.south')} - - {getMessage('commons.west')} - -
      + + closePopup(id)} /> + +
      +
      +
      {getMessage('modal.flow.direction.setting')}
      +
      {getMessage('modal.flow.direction.setting.info')}
      +
      +
      + {getMessage('commons.north')} + + {getMessage('commons.east')} + + {getMessage('commons.south')} + + {getMessage('commons.west')} +
      -
      -
      {getMessage('modal.module.basic.setting.orientation.setting')}
      -
      {getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}
      -
      -
      - { - setCompasDeg(0) - setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) - }} - /> - -
      -
      - { - setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) - setSelectedOrientation(e) - setCompasDeg(e.value) - }} - showKey={'name'} - targetKey={'value'} - sourceKey={'value'} - /> -
      +
      +
      +
      {getMessage('modal.module.basic.setting.orientation.setting')}
      +
      {getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}
      +
      +
      + { + setCompasDeg(0) + setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) + }} + /> +
      -
      -
      - { - setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) - }} - /> - -
      +
      + { + setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) + setSelectedOrientation(e) + setCompasDeg(e.value) + }} + showKey={'name'} + targetKey={'value'} + sourceKey={'value'} + />
      -
      -
      -
      - {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => ( -
      { - setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) - setCompasDeg(15 * (12 + index)) - }} - >
      - ))} - {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => ( -
      { - setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) - setCompasDeg(15 * (index + 1)) - }} - >
      - ))} -
      -
      -
      +
      +
      +
      + { + setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) + }} + /> + +
      +
      +
      +
      +
      + {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => ( +
      { + setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) + setCompasDeg(15 * (12 + index)) + }} + >
      + ))} + {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => ( +
      { + setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) + setCompasDeg(15 * (index + 1)) + }} + >
      + ))} +
      +
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index 853d27c1..d118188d 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -177,125 +177,115 @@ export default function DotLineGrid(props) { } return ( - -
      -
      -

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

      - +
      -
      -
      -
      -
      -
      - - -
      -
      - - -
      -
      -
      -
      -
      - - -
      -
      - {getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')} -
      - onlyNumberInputChange(e, changeInput)} - /> -
      - mm -
      -
      - {getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')} -
      - onlyNumberInputChange(e, changeInput)} - /> -
      - mm -
      -
      -
      -
      - - -
      -
      - {getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')} -
      - onlyNumberInputChange(e, changeInput)} - /> -
      - mm -
      -
      - {selectOption && ( - - )} -
      -
      -
      -
      - - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx index fa0b0ba8..e1a6f9f9 100644 --- a/src/components/floor-plan/modal/grid/GridCopy.jsx +++ b/src/components/floor-plan/modal/grid/GridCopy.jsx @@ -20,67 +20,57 @@ export default function GridCopy(props) { copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length) } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      {getMessage('modal.grid.copy.info')}
      -
      -
      -
      - {getMessage('modal.grid.copy.length')} -
      - setLength(e.target.value)} /> -
      - mm -
      -
      - - - - + + closePopup(id)} /> + +
      {getMessage('modal.grid.copy.info')}
      +
      +
      +
      + {getMessage('modal.grid.copy.length')} +
      + setLength(e.target.value)} />
      + mm +
      +
      + + + +
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx index dbf15206..4aa27851 100644 --- a/src/components/floor-plan/modal/grid/GridMove.jsx +++ b/src/components/floor-plan/modal/grid/GridMove.jsx @@ -73,93 +73,83 @@ export default function GridMove(props) { closePopup(id) } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      {getMessage('modal.grid.move.info')}
      -
      -
      - setIsAll(!isAll)} /> - -
      -
      -
      -

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

      -
      -
      - setVerticalSize(e.target.value)} - readOnly={!isAll && currentObject?.direction === 'vertical'} - /> -
      - mm -
      - - -
      + + handleClose()} /> + +
      {getMessage('modal.grid.move.info')}
      +
      +
      + setIsAll(!isAll)} /> + +
      +
      +
      +

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

      +
      +
      + setVerticalSize(e.target.value)} + readOnly={!isAll && currentObject?.direction === 'vertical'} + />
      -
      -
      - setHorizonSize(e.target.value)} - readOnly={!isAll && currentObject?.direction === 'horizontal'} - /> -
      - mm -
      - - -
      + mm +
      + + +
      +
      +
      +
      + setHorizonSize(e.target.value)} + readOnly={!isAll && currentObject?.direction === 'horizontal'} + /> +
      + mm +
      + +
      -
      - -
      -
      -
      +
      + +
      +       ) } diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx index e309646a..049c2e40 100644 --- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx +++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx @@ -50,51 +50,41 @@ export default function LinePropertySetting(props) { } return ( - -
      -
      -

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

      - + + handleClosePopup()} /> + +
      + {getMessage('modal.line.property.edit.info')} + + {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ] +
      -
      -
      -
      -
      - {getMessage('modal.line.property.edit.info')} - - {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ] - -
      -
      -
      {getMessage('setting')}
      -
      -
      - {properties.map((property, index) => { - return ( -
      - = 10 ? index + 1 : `0${index + 1}`)} - onChange={(e) => setSelectedProperty(property)} - /> - -
      - ) - })} -
      +
      +
      {getMessage('setting')}
      +
      +
      + {properties.map((property, index) => { + return ( +
      + = 10 ? index + 1 : `0${index + 1}`)} + onChange={(e) => setSelectedProperty(property)} + /> + +
      + ) + })}
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx index 50c819ed..1e1b2f2f 100644 --- a/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx +++ b/src/components/floor-plan/modal/module/CircuitNumberEdit.jsx @@ -14,38 +14,28 @@ export default function CircuitNumberEdit(props) { closePopup(id) } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      {getMessage('modal.module.circuit.number.edit.info')}
      -
      -
      -
      - - {getMessage('modal.module.circuit.number')} - -
      - -
      + + closePopup(id)} /> + +
      {getMessage('modal.module.circuit.number.edit.info')}
      +
      +
      +
      + + {getMessage('modal.module.circuit.number')} + +
      +
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx index ea671881..2a06e062 100644 --- a/src/components/floor-plan/modal/module/PanelEdit.jsx +++ b/src/components/floor-plan/modal/module/PanelEdit.jsx @@ -91,75 +91,64 @@ export default function PanelEdit(props) { } return ( - -
      -
      -

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

      - + + closePopup(id)} + /> + +
      + {getMessage( + [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) + ? 'modal.move.setting.info' + : 'modal.copy.setting.info', + )}
      -
      -
      -
      -
      - {getMessage( - [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) - ? 'modal.move.setting.info' - : 'modal.copy.setting.info', - )} -
      -
      -
      -
      - {getMessage('margin')} -
      - setLength(e.target.value)} /> -
      - mm -
      -
      - - - - +
      +
      +
      + {getMessage('margin')} +
      + setLength(e.target.value)} />
      + mm +
      +
      + + + +
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx index e42d2ca3..0c160656 100644 --- a/src/components/floor-plan/modal/module/column/ColumnInsert.jsx +++ b/src/components/floor-plan/modal/module/column/ColumnInsert.jsx @@ -24,91 +24,69 @@ export default function ColumnInsert(props) { } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      -
      {getMessage('modal.panel.column.insert.info')}
      -
      -
      -
      - - -
      -
      - - -
      -
      -
      - {selectedType === MODULE_INSERT_TYPE.LEFT && ( - react - )} - {selectedType === MODULE_INSERT_TYPE.RIGHT && ( - react - )} -
      -
      -
      -
      -
      {getMessage('legend')}
      -
      -
      -
      -
      - - {getMessage('modal.panel.select.column')} -
      -
      - - {getMessage('modal.panel.insert.column')} -
      -
      -
      -
      -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx index 66351d35..b9079642 100644 --- a/src/components/floor-plan/modal/module/column/ColumnRemove.jsx +++ b/src/components/floor-plan/modal/module/column/ColumnRemove.jsx @@ -26,98 +26,64 @@ export default function ColumnRemove(props) { } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      {getMessage('modal.panel.column.remove.info')}
      -
      -
      - {types.map((type, index) => { - return ( -
      - setSelectedType(e.target.value)} - value={type.value} - checked={selectedType === type.value} - /> - -
      - ) - })} -
      -
      - {selectedType === MODULE_REMOVE_TYPE.LEFT && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.RIGHT && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.NONE && ( - react - )} -
      + + closePopup(id)} /> + +
      +
      {getMessage('modal.panel.column.remove.info')}
      +
      +
      + {types.map((type, index) => { + return ( +
      + setSelectedType(e.target.value)} + value={type.value} + checked={selectedType === type.value} + /> + +
      + ) + })} +
      +
      + {selectedType === MODULE_REMOVE_TYPE.LEFT && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.RIGHT && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.NONE && ( + react + )}
      -
      -
      {getMessage('legend')}
      -
      -
      -
      -
      - - {getMessage('modal.panel.select.column')} -
      +
      +
      +
      {getMessage('legend')}
      +
      +
      +
      +
      + + {getMessage('modal.panel.select.column')}
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/module/row/RowInsert.jsx b/src/components/floor-plan/modal/module/row/RowInsert.jsx index 9b558706..e9fb799c 100644 --- a/src/components/floor-plan/modal/module/row/RowInsert.jsx +++ b/src/components/floor-plan/modal/module/row/RowInsert.jsx @@ -24,91 +24,82 @@ export default function RowInsert(props) { } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      -
      {getMessage('modal.row.insert.info')}
      -
      -
      -
      - - -
      -
      - - -
      -
      -
      - {selectedType === MODULE_INSERT_TYPE.TOP && ( - react - )} - {selectedType === MODULE_INSERT_TYPE.BOTTOM && ( - react - )} -
      -
      -
      -
      -
      {getMessage('legend')}
      -
      -
      -
      -
      - - {getMessage('modal.panel.select.row')} -
      -
      - - {getMessage('modal.panel.insert.row')} -
      -
      -
      -
      -
      -
      - -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/module/row/RowRemove.jsx b/src/components/floor-plan/modal/module/row/RowRemove.jsx index 500fbfb3..5cf95b3f 100644 --- a/src/components/floor-plan/modal/module/row/RowRemove.jsx +++ b/src/components/floor-plan/modal/module/row/RowRemove.jsx @@ -27,98 +27,88 @@ export default function RowRemove(props) { } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      {getMessage('modal.row.remove.info')}
      -
      -
      - {types.map((type, index) => { - return ( -
      - setSelectedType(e.target.value)} - value={type.value} - checked={selectedType === type.value} - /> - -
      - ) - })} -
      -
      - {selectedType === MODULE_REMOVE_TYPE.TOP && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.BOTTOM && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && ( - react - )} - {selectedType === MODULE_REMOVE_TYPE.NONE && ( - react - )} -
      + + closePopup(id)} /> + +
      +
      {getMessage('modal.row.remove.info')}
      +
      +
      + {types.map((type, index) => { + return ( +
      + setSelectedType(e.target.value)} + value={type.value} + checked={selectedType === type.value} + /> + +
      + ) + })} +
      +
      + {selectedType === MODULE_REMOVE_TYPE.TOP && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.BOTTOM && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && ( + react + )} + {selectedType === MODULE_REMOVE_TYPE.NONE && ( + react + )}
      -
      -
      {getMessage('legend')}
      -
      -
      -
      -
      - - {getMessage('modal.panel.select.row')} -
      +
      +
      +
      {getMessage('legend')}
      +
      +
      +
      +
      + + {getMessage('modal.panel.select.row')}
      -
      - -
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx index 916a40bd..46464538 100644 --- a/src/components/floor-plan/modal/movement/MovementSetting.jsx +++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx @@ -16,36 +16,26 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) { } return ( - -
      -
      -

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

      - + ))} +
      +
      + {type === TYPE.FLOW_LINE && } + {type === TYPE.UP_DOWN && } +
      +
      +
      -
      -
      -
      -
      - {buttonType.map((item) => ( - - ))} -
      -
      - {type === TYPE.FLOW_LINE && } - {type === TYPE.UP_DOWN && } -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx index d13533f9..af0ee8e0 100644 --- a/src/components/floor-plan/modal/object/DormerOffset.jsx +++ b/src/components/floor-plan/modal/object/DormerOffset.jsx @@ -40,73 +40,63 @@ export default function DormerOffset(props) { // closePopup(id) } return ( - -
      -
      -

      {title}

      - -
      -
      -
      -
      -
      {getMessage('modal.dormer.offset.info')}
      -
      -
      -
      -

      {getMessage('length')}

      -
      -
      - -
      - mm -
      - - -
      + + closePopup(id)} /> + +
      {getMessage('modal.dormer.offset.info')}
      +
      +
      +
      +

      {getMessage('length')}

      +
      +
      +
      -
      -
      - -
      - mm -
      - - -
      + mm +
      + + +
      +
      +
      +
      + +
      + mm +
      + +
      -
      - -
      -
      -
      +
      + +
      +       ) } diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx index b602f163..1bbddfe6 100644 --- a/src/components/floor-plan/modal/object/ObjectSetting.jsx +++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx @@ -100,43 +100,33 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) { ] return ( - -
      -
      -

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

      - + ))} +
      +
      + {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } +
      +
      +
      -
      -
      -
      -
      - {buttonMenu.map((item) => ( - - ))} -
      -
      - {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } - {buttonAct === 4 && } -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx index fdca3518..27c06593 100644 --- a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx +++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx @@ -21,28 +21,18 @@ export default function RoofMaterialSetting(props) { ] return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      - -
      -
      -
      - + + closePopup(id)} /> + +
      +
      +
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx index 34e86ed8..c5873006 100644 --- a/src/components/floor-plan/modal/object/SizeSetting.jsx +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -40,60 +40,50 @@ export default function SizeSetting(props) { } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      + + closePopup(id)} /> + +
      +
      +
      +
      + + mm +
      +
      + + mm +
      +
      +
      +
      +
      - + mm
      - + mm
      -
      -
      -
      -
      - - mm -
      -
      - - mm -
      -
      -
      -
      - - - - -
      -
      +
      + + + + +
      -
      - -
      -
      -
      +
      + +
      +       ) } diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx index c57eabfa..18b82edf 100644 --- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx @@ -8,40 +8,30 @@ export default function PropertiesSetting(props) { const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id) return ( - -
      -
      -

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

      - + +
      +
      +
      + +
      -
      -
      -
      -
      {getMessage('modal.canvas.setting.wallline.properties.setting.info')}
      -
      -
      {getMessage('setting')}
      -
      - - -
      -
      -
      - - -
      -
      -
      -
      + ) } diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx index 409d7550..36d79cb6 100644 --- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx @@ -114,24 +114,18 @@ export default function WallLineSetting(props) { } return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      - {/**/} - {/* */} -
      -
      - {type === OUTER_LINE_TYPE.OUTER_LINE ? ( - - ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? ( - - ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? ( - - ) : type === OUTER_LINE_TYPE.ANGLE ? ( - - ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? ( - - ) : ( - <> - )} -
      -
      - - -
      -
      -
      +
      + {type === OUTER_LINE_TYPE.OUTER_LINE ? ( + + ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? ( + + ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? ( + + ) : type === OUTER_LINE_TYPE.ANGLE ? ( + + ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? ( + + ) : ( + <> + )} +
      +
      + + +
      +       ) } diff --git a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx index 67b5efd0..fa4703be 100644 --- a/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx +++ b/src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx @@ -11,25 +11,31 @@ import { canvasState } from '@/store/canvasAtom' import { POLYGON_TYPE } from '@/common/common' import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' import { moduleSelectionDataState } from '@/store/selectedModuleOptions' +import Draggable from 'react-draggable' export default function PanelBatchStatistics() { const { getMessage } = useMessage() const [isFold, setIsFold] = useState(false) - const [pos, setPos] = useState({ - x: 0, - y: 30, - }) const canvas = useRecoilValue(canvasState) const { header, rows, footer } = useRecoilValue(moduleStatisticsState) const { setModuleStatisticsData } = useCircuitTrestle(true) const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState) + const [position, setPosition] = useState({ + x: 0, + y: 30, + }) + + const handleOnDrag = (e, data) => { + e.stopPropagation() + setPosition({ x: data.x, y: data.y }) + } useEffect(() => { if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData() }, []) return ( - + handleOnDrag(e, data)} handle=".penal-wrap">

      {getMessage('modal.panel.batch.statistic')}

      @@ -63,6 +69,6 @@ export default function PanelBatchStatistics() {
      - + ) } diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx index 72cf2c21..04b63f1d 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx @@ -121,47 +121,33 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) { setType(button.type) } return ( - -
      -
      -

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

      - + ))} +
      +
      + {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + {buttonAct === 4 && } + {buttonAct === 5 && } +
      + +
      + +
      -
      -
      -
      -
      - {types.map((type, idx) => ( - - ))} -
      -
      - {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } - {buttonAct === 4 && } - {buttonAct === 5 && } -
      - -
      - - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 127e7742..a70a8c65 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -257,194 +257,191 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      - - - - - - - - - - - - - - - - - + + +
      {getMessage('modal.placement.initial.setting.plan.drawing')}{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}
      -
      - {getMessage('modal.placement.initial.setting.size')} - -
      -       		-
      - {currentRoof && - roofSizeSetArray.map((item) => ( -
      - setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} - /> - -
      - ))} -
      -
      {getMessage('modal.placement.initial.setting.roof.angle.setting')} -
      - {currentRoof && - roofAngleSetArray.map((item, index) => ( -
      - -
      - setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} - /> - -
      -       -
      + + + +
      +
      +
      + + + + + + + + + + + + + + + + + + + + + - - - - - - -
      {getMessage('modal.placement.initial.setting.plan.drawing')}{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}
      +
      + {getMessage('modal.placement.initial.setting.size')} + +
      +       		+
      + {currentRoof && + roofSizeSetArray.map((item) => ( +
      + setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} + /> + +
      + ))} +
      +
      {getMessage('modal.placement.initial.setting.roof.angle.setting')} +
      + {currentRoof && + roofAngleSetArray.map((item, index) => ( +
      + +
      - index === 0 - ? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) }) - : setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value }) - } + type="radio" + id={item.id} + name={item.name} + value={item.value} + checked={String(currentRoof?.roofAngleSet) === item.value} + onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} /> +
      - {index === 0 ? '寸' : '度'} +       +
      + + index === 0 + ? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) }) + : setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value }) + } + />
      - ))} + {index === 0 ? '寸' : '度'} +
      + ))} +
      +
      +
      + {getMessage('modal.placement.initial.setting.roof.material')} + +
      +       		+
      +
      + { + return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } + })} + value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd} + onChange={(e) => handleRoofTypeChange(e.roofMatlCd)} + sourceKey="id" + targetKey="id" + showKey="name" + disabled={currentRoof?.roofSizeSet === '3'} + />
      -
      -
      - {getMessage('modal.placement.initial.setting.roof.material')} - -
      -       		-
      -
      - { - return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } - })} - value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd} - onChange={(e) => handleRoofTypeChange(e.roofMatlCd)} - sourceKey="id" - targetKey="id" - showKey="name" - disabled={currentRoof?.roofSizeSet === '3'} - /> + {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && ( +
      + W +
      + onlyNumberInputChange(e, changeInput)} + readOnly={currentRoof?.widAuth === 'R'} + disabled={currentRoof?.roofSizeSet === '3'} + /> +
      - {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && ( -
      - W -
      - onlyNumberInputChange(e, changeInput)} - readOnly={currentRoof?.widAuth === 'R'} + )} + {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && ( +
      + L +
      + onlyNumberInputChange(e, changeInput)} + readOnly={currentRoof?.lenAuth === 'R'} + disabled={currentRoof?.roofSizeSet === '3'} + /> +
      +
      + )} + {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && ( +
      + {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes?.length > 0 && ( +
      + r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)) + .clCodeNm + } + value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft} + onChange={(e) => handleRafterChange(e.clCode)} + sourceKey="clCode" + targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'} + showKey="clCodeNm" disabled={currentRoof?.roofSizeSet === '3'} />
      + )} +
      + )} + {currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && ( +
      + {getMessage('hajebichi')} +
      + onlyNumberInputChange(e, changeInput)} + readOnly={currentRoof?.roofPchAuth === 'R'} + disabled={currentRoof?.roofSizeSet === '3'} + />
      - )} - {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && ( -
      - L -
      - onlyNumberInputChange(e, changeInput)} - readOnly={currentRoof?.lenAuth === 'R'} - disabled={currentRoof?.roofSizeSet === '3'} - /> -
      -
      - )} - {currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && ( -
      - {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes?.length > 0 && ( -
      - r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)) - .clCodeNm - } - value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft} - onChange={(e) => handleRafterChange(e.clCode)} - sourceKey="clCode" - targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'} - showKey="clCodeNm" - disabled={currentRoof?.roofSizeSet === '3'} - /> -
      - )} -
      - )} - {currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && ( -
      - {getMessage('hajebichi')} -
      - onlyNumberInputChange(e, changeInput)} - readOnly={currentRoof?.roofPchAuth === 'R'} - disabled={currentRoof?.roofSizeSet === '3'} - /> -
      -
      - )} -
      - {/* {currentRoof && ( +
      + )} +
      + {/* {currentRoof && (
      )} */} -
      -
      -
      - -
      +
      - {showSizeGuideModal && } - {showMaterialGuideModal && } -
      -
      +
      + +
      + + {showSizeGuideModal && } + {showMaterialGuideModal && } ) } diff --git a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx index bc532242..34cf8c1e 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx @@ -41,43 +41,33 @@ export default function PlacementSurfaceLineProperty(props) { } return ( - -
      -
      -

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

      - + + +
      +
      +
      + +
      -
      -
      -
      -
      {getMessage('modal.canvas.setting.roofline.properties.setting.info')}
      -
      -
      {getMessage('setting')}
      -
      - - - -
      -
      -
      - - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index 967d849e..ae29b778 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -256,63 +256,49 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) }, []) return ( - -
      -
      -

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

      - -
      -
      -
      -
      -
      -
      -
      - {types.map((type) => ( - - ))} -
      -
      - - {/* */} - {/* - */} - - -
      -
      -
      - -
      - -
      + ))} +
      +
      + + {/* */} + {/* + */} + + +
      +
      +
      + +
      +
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx index 0af71db1..c91325c0 100644 --- a/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx @@ -61,65 +61,50 @@ export default function ActualSizeSetting(props) { } return ( - -
      -
      -

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

      - + + closePopup(id)} /> + +
      + {getMessage('modal.actual.size.setting.info')}
      -
      -
      -
      -
      - {getMessage('modal.actual.size.setting.info')} -
      -
      -
      {getMessage('setting')}
      -
      -
      -
      -
      {getMessage('modal.actual.size.setting.plane.size.length')}
      -
      -
      -
      - -
      - mm +
      +
      {getMessage('setting')}
      +
      +
      +
      +
      {getMessage('modal.actual.size.setting.plane.size.length')}
      +
      +
      +
      +
      + mm
      -
      -
      {getMessage('modal.actual.size.setting.actual.size.length')}
      -
      -
      -
      - setActualSize(Number(e.target.value))} - /> -
      - mm +
      +
      +
      {getMessage('modal.actual.size.setting.actual.size.length')}
      +
      +
      +
      + setActualSize(Number(e.target.value))} />
      + mm
      -
      - - -
      -
      -
      +
      + + +
      + ) } diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx index 30e56c0e..dd8b7003 100644 --- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx @@ -47,22 +47,13 @@ export default function ContextRoofAllocationSetting(props) { }, []) return ( - -
      - {currentRoofList && ( - <> -
      -

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

      - -
      -
      -
      -
      -
      {getMessage('modal.roof.alloc.info')}
      -
      - {/* {getMessage('modal.roof.alloc.select.roof.material')} + + closePopup(id)} /> + {currentRoofList && ( + +
      {getMessage('modal.roof.alloc.info')}
      +
      + {/* {getMessage('modal.roof.alloc.select.roof.material')}
      { @@ -78,165 +69,162 @@ export default function ContextRoofAllocationSetting(props) { targetKey={'roofMatlCd'} />
      */} - -
      -
      -
      - {currentRoofList.map((roof, index) => { - return ( -
      -
      - - + +
      +
      +
      + {currentRoofList.map((roof, index) => { + return ( +
      +
      + + +
      +
      +
      +
      +
      + { + return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp } + })} + value={roof} + //showKey={'roofMatlNm'} + showKey="name" + sourceKey={'roofMatlCd'} + targetKey={'roofMatlCd'} + onChange={(e) => handleChangeRoofMaterial(e, index)} + /> +
      + {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} + {index !== 0 && ( + + + + )}
      -
      -
      -
      +
      + {roof.raftAuth && ( +
      +
      + {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && (
      { - return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp } - })} + options={raftCodes} value={roof} - //showKey={'roofMatlNm'} - showKey="name" - sourceKey={'roofMatlCd'} - targetKey={'roofMatlCd'} - onChange={(e) => handleChangeRoofMaterial(e, index)} + showKey={'clCodeNm'} + sourceKey={'clCode'} + targetKey={roof.raft ? 'raft' : 'raftBaseCd'} + onChange={(e) => handleChangeRaft(e, index)} />
      - {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} - {index !== 0 && ( - - - - )} -
      + )}
      - {roof.raftAuth && ( -
      -
      - {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( -
      - handleChangeRaft(e, index)} - /> -
      - )} -
      -
      - )} +
      + )} - {(roof.widAuth || roof.lenAuth) && ( - <> - {roof.widAuth && ( -
      -
      - W -
      - { - handleChangeInput(e, 'width', index) - }} - /> -
      -
      -
      - )} - {roof.lenAuth && ( -
      -
      - L -
      - { - handleChangeInput(e, 'length', index) - }} - /> -
      -
      -
      - )} - - )} - {roof.roofPchAuth && ( + {(roof.widAuth || roof.lenAuth) && ( + <> + {roof.widAuth && (
      - {getMessage('hajebichi')} + W
      handleChangeInput(e, 'hajebichi', index)} + defaultValue={roof.width} + readOnly={roof.widAuth === 'R'} + onChange={(e) => { + handleChangeInput(e, 'width', index) + }} />
      )} -
      -
      - {getMessage('modal.object.setting.offset.slope')} -
      - { - // handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) - handleChangePitch(e, index) - }} - value={currentAngleType === 'slope' ? roof.pitch : roof.angle} - defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} - /> + {roof.lenAuth && ( +
      +
      + L +
      + { + handleChangeInput(e, 'length', index) + }} + /> +
      - {pitchText} +
      + )} + + )} + {roof.roofPchAuth && ( +
      +
      + {getMessage('hajebichi')} +
      + handleChangeInput(e, 'hajebichi', index)} + />
      + )} +
      +
      + {getMessage('modal.object.setting.offset.slope')} +
      + { + // handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) + handleChangePitch(e, index) + }} + value={currentAngleType === 'slope' ? roof.pitch : roof.angle} + defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} + /> +
      + {pitchText} +
      - ) - })} -
      -
      -
      - -
      +
      +
      + ) + })}
      - - )} -
      -
      +
      +
      + +
      + + )} ) } diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 3dd03385..0603ed96 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -47,22 +47,14 @@ export default function RoofAllocationSetting(props) { }, []) return ( - -
      + + closePopup(id)} /> + {currentRoofList && ( <> -
      -

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

      - -
      -
      -
      -
      -
      {getMessage('modal.roof.alloc.info')}
      -
      - {/* {getMessage('modal.roof.alloc.select.roof.material')} +
      {getMessage('modal.roof.alloc.info')}
      +
      + {/* {getMessage('modal.roof.alloc.select.roof.material')}
      { @@ -78,146 +70,146 @@ export default function RoofAllocationSetting(props) { targetKey={'roofMatlCd'} />
      */} - -
      -
      -
      - {currentRoofList.map((roof, index) => { - return ( -
      -
      - - + +
      +
      +
      + {currentRoofList.map((roof, index) => { + return ( +
      +
      + + +
      +
      +
      +
      +
      + { + return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp } + })} + value={roof} + //showKey={'roofMatlNm'} + showKey="name" + sourceKey={'roofMatlCd'} + targetKey={'roofMatlCd'} + onChange={(e) => handleChangeRoofMaterial(e, index)} + /> +
      + {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} + {index !== 0 && ( + + + + )} +
      -
      + + {roof.raftAuth && (
      -
      - { - return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp } - })} - value={roof} - //showKey={'roofMatlNm'} - showKey="name" - sourceKey={'roofMatlCd'} - targetKey={'roofMatlCd'} - onChange={(e) => handleChangeRoofMaterial(e, index)} - /> -
      - {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} - {index !== 0 && ( - - - + {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && ( +
      + handleChangeRaft(e, index)} + /> +
      )}
      + )} - {roof.raftAuth && ( -
      -
      - {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( -
      - handleChangeRaft(e, index)} + {(roof.widAuth || roof.lenAuth) && ( + <> + {roof.widAuth && ( +
      +
      + W +
      + handleChangeInput(e, 'width', index)} + readOnly={roof.widAuth === 'R'} />
      - )} -
      -
      - )} - - {(roof.widAuth || roof.lenAuth) && ( - <> - {roof.widAuth && ( -
      -
      - W -
      - handleChangeInput(e, 'width', index)} - readOnly={roof.widAuth === 'R'} - /> -
      -
      -
      - )} - {roof.lenAuth && ( -
      -
      - L -
      - handleChangeInput(e, 'length', index)} - readOnly={roof.lenAuth === 'R'} - /> -
      -
      -
      - )} - - )} - {roof.roofPchAuth && ( -
      -
      - {getMessage('hajebichi')} -
      - handleChangeInput(e, 'hajebichi', index)} - value={parseInt(roof.hajebichi)} - readOnly={roof.roofPchAuth === 'R'} - />
      -
      - )} + )} + {roof.lenAuth && ( +
      +
      + L +
      + handleChangeInput(e, 'length', index)} + readOnly={roof.lenAuth === 'R'} + /> +
      +
      +
      + )} + + )} + {roof.roofPchAuth && (
      - {getMessage('modal.object.setting.offset.slope')} + {getMessage('hajebichi')}
      { - handleChangePitch(e, index) - }} - value={currentAngleType === 'slope' ? roof.pitch : roof.angle} - defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} + onChange={(e) => handleChangeInput(e, 'hajebichi', index)} + value={parseInt(roof.hajebichi)} + readOnly={roof.roofPchAuth === 'R'} />
      - {pitchText}
      - {/*
      + )} +
      +
      + {getMessage('modal.object.setting.offset.slope')} +
      + { + handleChangePitch(e, index) + }} + value={currentAngleType === 'slope' ? roof.pitch : roof.angle} + defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} + /> +
      + {pitchText} +
      +
      + {/*
      */} -
      - ) - })} -
      -
      -
      - +
      + ) + })}
      +
      + +
      )} -
      -
      + ) } diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx index 44152cf8..7530bcdd 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -29,48 +29,38 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } } return ( - -
      -
      -

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

      - + + closePopup(id)} /> + +
      + {buttons.map((button) => ( + + ))}
      -
      -
      -
      -
      - {buttons.map((button) => ( - - ))} -
      -
      -
      {getMessage('setting')}
      -
      - {type === TYPES.EAVES && } - {type === TYPES.GABLE && } - {type === TYPES.SHED && } -
      -
      - - -
      +
      +
      {getMessage('setting')}
      +
      + {type === TYPES.EAVES && } + {type === TYPES.GABLE && } + {type === TYPES.SHED && }
      - +
      -
      -
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx index 64ac905c..73ccc348 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx @@ -88,41 +88,31 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) { } return ( - -
      -
      -

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

      - + ))} +
      +
      + {shapeNum === 1 && } + {(shapeNum === 2 || shapeNum === 3) && } + {shapeNum === 4 && } + {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && } +
      +
      +
      -
      -
      -
      -
      - {shapeMenu.map((item) => ( - - ))} -
      -
      - {shapeNum === 1 && } - {(shapeNum === 2 || shapeNum === 3) && } - {shapeNum === 4 && } - {(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && } -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index 36691d62..4e6f91ea 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -72,39 +72,27 @@ export default function SettingModal01(props) { } return ( - <> - -
      -
      -

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

      - -
      -
      -
      -
      -
      - + + closePopup(id, true)} /> + +
      + - - {canGridOptionSeletorValue && ( - - )} -
      - {buttonAct === 1 && } - {buttonAct === 2 && } - {buttonAct === 3 && } -
      -
      + + {canGridOptionSeletorValue && ( + + )}
      - - + {buttonAct === 1 && } + {buttonAct === 2 && } + {buttonAct === 3 && } + + ) } diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx index 7fcbe45a..8bdecff8 100644 --- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx +++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx @@ -190,78 +190,68 @@ export default function DimensionLineSetting(props) { } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      - -
      -
      -
      - {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')} -
      - setOriginPixel(e)} /> -
      - pixel -
      -
      - {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')} - +
      +
      + {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')} +
      + setOriginPixel(e)} />
      + pixel
      -
      -
      {getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}
      -
      -
      -
      - - 9,999 - - -
      -
      -
      -
      -
      - +
      + {getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')} +
      -
      -
      +
      +
      {getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}
      +
      +
      +
      + + 9,999 + + +
      +
      +
      +
      +
      + +
      + ) } diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx index 7bdf05ba..10f9adc1 100644 --- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx +++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx @@ -49,65 +49,55 @@ export default function PlanSizeSetting(props) { setPlanSizeSettingMode((prev) => { return { ...prev, - [name]: Number(value), + [name]: Number(value) / 10, } }) } return ( - -
      -
      -

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

      -
      -
      -
      -
      -
      -
      - {getMessage('common.horizon')} -
      - onlyNumberInputChange(e, changeInput)} - /> -
      - mm -
      -
      - {getMessage('common.vertical')} -
      - onlyNumberInputChange(e, changeInput)} - /> -
      - mm -
      -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx index 60bab5b7..09c847e7 100644 --- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx @@ -39,37 +39,27 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) { } return ( - -
      -
      -

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

      - + ))} +
      +
      +
      {getMessage('setting')}
      + {type === TYPES.WALL_LINE_EDIT && } + {type === TYPES.OFFSET && } +
      +
      +
      -
      -
      -
      -
      - {buttonMenu.map((item) => ( - - ))} -
      -
      -
      {getMessage('setting')}
      - {type === TYPES.WALL_LINE_EDIT && } - {type === TYPES.OFFSET && } -
      -
      - -
      -
      -
      -
      +       ) } diff --git a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx index 418a9419..16036485 100644 --- a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx @@ -23,7 +23,7 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) { const keyDown = (e) => { if (currentWallLineRef.current === null) { - alert('보조선을 먼저 선택하세요') + // alert('보조선을 먼저 선택하세요') return } diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx index 0d9a315f..6d6ccd82 100644 --- a/src/components/main/MainContents.jsx +++ b/src/components/main/MainContents.jsx @@ -199,7 +199,7 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
      )} - + {fileList.length > 0 ? (
      {fileList?.map((file) => ( diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 06a9b35a..b5020d5b 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -140,6 +140,7 @@ export default function StuffDetail() { headerName: getMessage('stuff.detail.planGridHeader.moduleModel'), flex: 1, wrapText: true, + autoHeight: true, cellStyle: { alignItems: 'flex-start' /* 좌측정렬*/, cursor: 'pointer' }, cellRenderer: (params) => { let origin = params.value @@ -370,6 +371,7 @@ export default function StuffDetail() { swalFire({ text: getMessage('stuff.detail.header.notExistObjectNo'), type: 'alert', + icon: 'error', confirmFn: () => { router.push('/management/stuff', { scroll: false }) }, @@ -387,6 +389,7 @@ export default function StuffDetail() { swalFire({ text: getMessage('stuff.detail.header.notExistObjectNo'), type: 'alert', + icon: 'error', confirmFn: () => { router.push('/management/stuff', { scroll: false }) }, diff --git a/src/hooks/common/useCommonCode.js b/src/hooks/common/useCommonCode.js index fc902ef2..e85cbb64 100644 --- a/src/hooks/common/useCommonCode.js +++ b/src/hooks/common/useCommonCode.js @@ -33,6 +33,8 @@ export const useCommonCode = () => { clCode: code.clCode, clCodeNm: globalLocale === 'ko' ? code.clCodeNm : code.clCodeJp, clPriority: code.clPriority, + clRefChr1: code.clRefChr1, + clRefChr2: code.clRefChr2, } return result }) diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js index 9c00d5bb..d509a1e0 100644 --- a/src/hooks/floorPlan/estimate/useEstimateController.js +++ b/src/hooks/floorPlan/estimate/useEstimateController.js @@ -129,6 +129,7 @@ export const useEstimateController = (planNo, flag) => { delFlg: '0', //삭제 플래그 0 삭제하면 1 addFlg: true, paDispOrder: null, + dispCableFlg: '0', }, ], }) @@ -165,11 +166,6 @@ export const useEstimateController = (planNo, flag) => { //견적서 저장 const handleEstimateSubmit = async () => { - //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요 - if (estimateData.estimateType === 'YJSS') { - return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' }) - } - //0. 필수체크 let flag = true let originFileFlg = false @@ -298,6 +294,21 @@ export const useEstimateController = (planNo, flag) => { } } } + } else { + if (item.salePrice === null) { + item.salePrice = '0' + } else if (isNaN(item.salePrice)) { + item.salePrice = '0' + } + + if (item.unitPrice === null) { + item.unitPrice = '0' + } else if (isNaN(item.unitPrice)) { + item.unitPrice = '0' + } + + //봄 컴포넌트 제품은 0으로 + item.openFlg = '0' } } }) @@ -382,6 +393,7 @@ export const useEstimateController = (planNo, flag) => { estimateData.estimateOption = estimateOptions // console.log('최종아이템:::', estimateData.itemList) + if (fileList?.length > 0) { estimateData.fileList = fileList } else { @@ -409,7 +421,7 @@ export const useEstimateController = (planNo, flag) => { }) } catch (e) { setIsGlobalLoading(false) - console.log('error::::::::::::', e.response.data.message) + console.error('error::::::::::::', e.response.data.message) } } @@ -419,10 +431,6 @@ export const useEstimateController = (planNo, flag) => { * T01관리자 계정 및 1차판매점에게만 제공 */ const handleEstimateCopy = async (sendPlanNo, copyReceiveUser, saleStoreId, otherSaleStoreId, setEstimateCopyPopupOpen) => { - //todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요 - if (estimateData.estimateType === 'YJSS') { - return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' }) - } if (saleStoreId === '') { return swalFire({ text: getMessage('estimate.detail.productFeaturesPopup.requiredStoreId'), diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 3ebee741..27dee861 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -1,5 +1,6 @@ import { useState } from 'react' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' + import { canvasSettingState, canvasState, @@ -8,6 +9,7 @@ import { isManualModuleLayoutSetupState, isManualModuleSetupState, } from '@/store/canvasAtom' + import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util' import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom' import offsetPolygon, { calculateAngle, createLinesFromPolygon } from '@/util/qpolygon-utils' @@ -436,7 +438,6 @@ export function useModuleBasicSetting(tabNum) { if (isManualModuleLayoutSetup) { setIsManualModuleLayoutSetup(false) } - const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 if (isManualModuleSetup) { @@ -506,20 +507,20 @@ export function useModuleBasicSetting(tabNum) { const points = [ { - x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2), }, ] @@ -535,10 +536,10 @@ export function useModuleBasicSetting(tabNum) { fill: 'white', stroke: 'black', strokeWidth: 0.3, - width: Number(width.toFixed(1)), - height: Number(height.toFixed(1)), - left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), - top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), + width: toFixedWithoutRounding(width, 2), + height: toFixedWithoutRounding(height, 2), + left: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), + top: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), selectable: false, lockMovementX: true, lockMovementY: true, @@ -571,67 +572,84 @@ export function useModuleBasicSetting(tabNum) { ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer / 10 : moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor / 10 - const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) - const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) - const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) - const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) + const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) + const trestleRight = + toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleBottom = + toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2 // 이동하는 모듈의 경계 좌표 - const smallLeft = Number(tempModule.left.toFixed(1)) - const smallTop = Number(tempModule.top.toFixed(1)) - const smallRight = smallLeft + Number(tempModule.width.toFixed(1)) - const smallBottom = smallTop + Number(tempModule.height.toFixed(1)) - const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1)) - const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1)) + const smallLeft = toFixedWithoutRounding(tempModule.left, 2) + const smallTop = toFixedWithoutRounding(tempModule.top, 2) + const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2) + const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2) + const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2) + const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2) /** * 미리 깔아놓은 셀이 있을때 셀에 흡착됨 */ if (manualDrawModules) { manualDrawModules.forEach((cell) => { - const holdCellLeft = cell.left - const holdCellTop = cell.top - const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1)) - const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1)) - const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1)) - const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1)) + const holdCellLeft = toFixedWithoutRounding(cell.left, 2) + const holdCellTop = toFixedWithoutRounding(cell.top, 2) + const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2) + const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2) + const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2) + const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2) + + //가운데 -> 가운대 + if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2) + } + + //왼쪽 -> 가운데 + if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { + // console.log('holdCellCenterX', holdCellCenterX) + // console.log('smallLeft', smallLeft) + + // console.log('모듈 센터에 스냅') + tempModule.left = holdCellCenterX + intvHor / 2 + + // console.log('tempModule.left', tempModule.left) + } + // 오른쪽 -> 가운데 + if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX - width - intvHor / 2 + } //설치된 셀에 좌측에 스냅 if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') tempModule.left = holdCellLeft - width - intvHor } //설치된 셀에 우측에 스냅 if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') tempModule.left = holdCellRight + intvHor } - //설치된 셀에 위쪽에 스냅 - if (Math.abs(smallBottom - holdCellTop) < snapDistance) { + if (Math.abs(smallBottom - holdCellTop) < 10) { tempModule.top = holdCellTop - height - intvVer } //설치된 셀에 밑쪽에 스냅 - if (Math.abs(smallTop - holdCellBottom) < snapDistance) { + if (Math.abs(smallTop - holdCellBottom) < 10) { tempModule.top = holdCellBottom + intvVer } - //가운데 -> 가운데 - if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1)) - } - //왼쪽 -> 가운데 - if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - } - // 오른쪽 -> 가운데 - if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - width + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < 10) { + tempModule.top = holdCellTop } + //세로 가운데 -> 가운데 - if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { - tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1)) - } + // if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { + // tempModule.top = holdCellCenterY - toFixedWithoutRounding(height / 2, 1) + // } // //위쪽 -> 가운데 // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { // tempModule.top = holdCellCenterY @@ -713,13 +731,19 @@ export function useModuleBasicSetting(tabNum) { if (!inside) return if (tempModule) { const rectPoints = [ - { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) }, - { x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), y: Number(tempModule.top.toFixed(1)) }, + { x: toFixedWithoutRounding(tempModule.left, 2), y: toFixedWithoutRounding(tempModule.top, 2) }, { - x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), - y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)), + x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2), + y: toFixedWithoutRounding(tempModule.top, 2), + }, + { + x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2), + y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2), + }, + { + x: toFixedWithoutRounding(tempModule.left, 2), + y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2), }, - { x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)) }, ] tempModule.set({ points: rectPoints }) @@ -756,11 +780,13 @@ export function useModuleBasicSetting(tabNum) { let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0], - left: Number(tempModule.left.toFixed(1)), - top: Number(tempModule.top.toFixed(1)), - width: Number(tempModule.width.toFixed(1)), - height: Number(tempModule.height.toFixed(1)), + left: toFixedWithoutRounding(tempModule.left, 2), + top: toFixedWithoutRounding(tempModule.top, 2), + width: toFixedWithoutRounding(tempModule.width, 2), + height: toFixedWithoutRounding(tempModule.height, 2), + toFixed: 2, }) + canvas?.add(manualModule) manualDrawModules.push(manualModule) setModuleStatisticsData() diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js index da4e8a30..4f0bb116 100644 --- a/src/hooks/module/useTrestle.js +++ b/src/hooks/module/useTrestle.js @@ -619,6 +619,9 @@ export const useTrestle = () => { //module Rack 정보를 얻기위한 데이터 가공 function moduleTransformData(arr) { + //arr의 moduleTpCd를 이용하여 정렬 + arr = arr.sort((a, b) => a.moduleTpCd.localeCompare(b.moduleTpCd)) + let counts = {} arr.forEach((item) => { @@ -1649,10 +1652,29 @@ export const useTrestle = () => { } } + switch (direction) { + case 'south': { + startPointY -= 5 + break + } + case 'east': { + startPointX -= 5 + break + } + case 'west': { + startPointX -= 5 + break + } + case 'north': { + startPointY -= 5 + break + } + } + for (let i = 0; i < count; i++) { const bracket = new fabric.Rect({ - left: startPointX - 5, - top: startPointY - 5, + left: startPointX, + top: startPointY, fill: 'green', name: TRESTLE_MATERIAL.BRACKET, parentId: module.id, @@ -1664,14 +1686,15 @@ export const useTrestle = () => { }) canvas.add(bracket) canvas.renderAll() + const maxIntvl = Math.max(moduleIntvlHor, moduleIntvlVer) if (direction === 'south') { - startPointY -= height - moduleIntvlVer / 10 + startPointY -= height + maxIntvl / 10 } else if (direction === 'north') { - startPointY += height + moduleIntvlVer / 10 + startPointY += height + maxIntvl / 10 } else if (direction === 'east') { - startPointX -= width - moduleIntvlHor / 10 + startPointX -= width + maxIntvl / 10 } else if (direction === 'west') { - startPointX += width + moduleIntvlHor / 10 + startPointX += width + maxIntvl / 10 } } } @@ -1730,7 +1753,7 @@ export const useTrestle = () => { const { width, height } = { ...module } widthArr.push(width) heightArr.push(height) - centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo }) + centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo, module }) }) //widthArr 중복 제거 1이상 차이가 나지 않으면 같은 너비로 간주 @@ -1804,7 +1827,13 @@ export const useTrestle = () => { let rightExposedHalfTopPoints = [] centerPoints.forEach((centerPoint, index) => { - let { x, y, width, height, widthArr, heightArr } = { ...centerPoint } + let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint } + + /* 디버깅용 + const originFill = module.fill + module.set('fill', 'red') + canvas.renderAll()*/ + // centerPoints중에 현재 centerPoint와 x값이 같고, y값이 y-height값과 같은 centerPoint가 있는지 확인 let bottomCell let bottomLeftPoint @@ -1894,7 +1923,12 @@ export const useTrestle = () => { break } + /** + * 디버깅용 + module.set('fill', originFill) + canvas.renderAll() + */ if (bottomCell) { return } @@ -1911,13 +1945,18 @@ export const useTrestle = () => { } } else if (leftBottomCnt + rightBottomCnt === 0) { exposedBottomPoints.push(centerPoint) + } else if (leftBottomCnt + rightBottomCnt === 2) { + touchDimension++ } }) // 노출상면 및 접면 체크 centerPoints.forEach((centerPoint, index) => { - let { x, y, width, height, widthArr, heightArr } = { ...centerPoint } - + let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint } + const originFill = module.fill + /* 디버깅용 + module.set('fill', 'blue') + canvas.renderAll()*/ let topCell let topLeftPoint let topRightPoint @@ -1930,7 +1969,8 @@ export const useTrestle = () => { height = height + vertical heightArr.forEach((h) => { if (topCell) return - topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY) + topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY) + if (leftTopCnt === 0) { topLeftPoint = { x: x - width / 2, y: y - h } leftTopCnt = centerPoints.filter( @@ -1949,7 +1989,7 @@ export const useTrestle = () => { height = height + vertical heightArr.forEach((h) => { if (topCell) return - topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY) + topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY) if (leftTopCnt === 0) { topLeftPoint = { x: x + width / 2, y: y + h } leftTopCnt = centerPoints.filter( @@ -1968,7 +2008,7 @@ export const useTrestle = () => { width = width + horizontal widthArr.forEach((w) => { if (topCell) return - topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY) + topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY) if (leftTopCnt === 0) { topLeftPoint = { x: x - w, y: y + height / 2 } leftTopCnt = centerPoints.filter( @@ -1988,7 +2028,7 @@ export const useTrestle = () => { width = width + horizontal widthArr.forEach((w) => { if (topCell) return - topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY) + topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY) if (leftTopCnt === 0) { topLeftPoint = { x: x + w, y: y - height / 2 } leftTopCnt = centerPoints.filter( @@ -2010,6 +2050,13 @@ export const useTrestle = () => { return } + /** + * 디버깅 용 + + module.set('fill', originFill) + canvas.renderAll() + */ + if (leftTopCnt + rightTopCnt === 2) { touchDimension++ return diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 539c43ec..76f42075 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -612,6 +612,9 @@ export function useCanvasSetting(executeEffect = true) { /** 도면크기 설정 */ setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical }) + canvas.setWidth(res.originHorizon) + canvas.setHeight(res.originVertical) + canvas.renderAll() /** 데이터 설정 */ setSettingModalFirstOptions({ diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js index da6391b8..6023bce8 100644 --- a/src/hooks/roofcover/useAuxiliaryDrawing.js +++ b/src/hooks/roofcover/useAuxiliaryDrawing.js @@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal' import { usePopup } from '@/hooks/usePopup' import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils' import { POLYGON_TYPE } from '@/common/common' +import { useMessage } from '../useMessage' // 보조선 작성 export function useAuxiliaryDrawing(id, isUseEffect = true) { @@ -34,6 +35,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { const { swalFire } = useSwal() const { getAdsorptionPoints } = useAdsorptionPoint() const { closePopup } = usePopup() + const { getMessage } = useMessage() const adsorptionRange = useRecoilValue(adsorptionRangeState) @@ -411,7 +413,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { const length1Value = length1Ref.current.value if (diagonalLength <= length1Value) { - alert('대각선 길이는 직선 길이보다 길어야 합니다.') + // alert('대각선 길이는 직선 길이보다 길어야 합니다.') return } @@ -832,7 +834,8 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { } const handleFix = () => { - if (!confirm('지붕선 완료하시겠습니까?')) { + // if (!confirm('보조선 작성을 완료하시겠습니까?')) { + if (!confirm(getMessage('want.to.complete.auxiliary.creation'))) { return } diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js index 7e94f074..bced656b 100644 --- a/src/hooks/roofcover/useOuterLineWall.js +++ b/src/hooks/roofcover/useOuterLineWall.js @@ -567,7 +567,7 @@ export function useOuterLineWall(id, propertiesId) { const length1Value = length1Ref.current.value if (diagonalLength <= length1Value) { - alert('대각선 길이는 직선 길이보다 길어야 합니다.') + // alert('대각선 길이는 직선 길이보다 길어야 합니다.') return } @@ -890,7 +890,7 @@ export function useOuterLineWall(id, propertiesId) { }) if (isAllRightAngle) { - alert('부정확한 다각형입니다.') + // alert('부정확한 다각형입니다.') return } diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 671d4c7e..536a2127 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -446,12 +446,10 @@ export function useRoofAllocationSetting(id) { * 지붕재 변경 */ const handleChangeRoofMaterial = (value, index) => { - const selectedIndex = roofMaterials.findIndex((roof) => roof.selected) - const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id) const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { - return { ...selectedRoofMaterial } + return { ...selectedRoofMaterial, selected: roof.selected } } return roof }) diff --git a/src/hooks/roofcover/useWallLineOffsetSetting.js b/src/hooks/roofcover/useWallLineOffsetSetting.js index 22af0f49..01fbec09 100644 --- a/src/hooks/roofcover/useWallLineOffsetSetting.js +++ b/src/hooks/roofcover/useWallLineOffsetSetting.js @@ -192,7 +192,7 @@ export function useWallLineOffsetSetting(id) { const handleSave = () => { if (currentWallLineRef.current === null) { - alert('보조선을 먼저 선택하세요') + // alert('보조선을 먼저 선택하세요') return } switch (type) { diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js index 983583ba..b1e92f90 100644 --- a/src/hooks/surface/usePlacementShapeDrawing.js +++ b/src/hooks/surface/usePlacementShapeDrawing.js @@ -564,7 +564,7 @@ export function usePlacementShapeDrawing(id) { const length1Value = length1Ref.current.value if (diagonalLength <= length1Value) { - alert('대각선 길이는 직선 길이보다 길어야 합니다.') + // alert('대각선 길이는 직선 길이보다 길어야 합니다.') return } @@ -886,7 +886,7 @@ export function usePlacementShapeDrawing(id) { }) if (isAllRightAngle) { - alert('부정확한 다각형입니다.') + // alert('부정확한 다각형입니다.') return } diff --git a/src/locales/ja.json b/src/locales/ja.json index a42f9cec..0028a047 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -5,11 +5,11 @@ "header.menus.management": "見積書管理画面", "header.menus.management.newStuff": "新規見積登録", "header.menus.management.detail": "物件詳細", - "header.menus.management.stuffList": "見積状況", + "header.menus.management.stuffList": "物件検索", "header.menus.community": "コミュニティ", "header.menus.community.notice": "お知らせ", "header.menus.community.faq": "FAQ", - "header.menus.community.archive": "見積書出力", + "header.menus.community.archive": "各種資料ダウンロード", "header.logout": "ログアウト", "header.go": "移動", "header.online.warranty.system": "オンライン保証システム", @@ -178,7 +178,7 @@ "modal.roof.alloc.select.parallel": "筋配置", "modal.roof.alloc.select.stairs": "千鳥配置", "modal.roof.alloc.apply": "選択した屋根材として割り当て", - "plan.menu.estimate.docDown": "見積書出力", + "plan.menu.estimate.docDown": "各種資料ダウンロード", "plan.menu.estimate.save": "保存", "plan.menu.estimate.reset": "初期化", "plan.menu.estimate.copy": "見積書のコピー", @@ -229,7 +229,7 @@ "modal.dormer.offset.info": "移動する距離と方向を入力してください。", "modal.common.save": "保存", "modal.common.add": "追加", - "modal.common.prev": "以前", + "modal.common.prev": "前に戻る", "modal.common.next": "次", "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更", "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更", @@ -557,7 +557,7 @@ "board.notice.sub.title": "お知らせ一覧", "board.faq.title": "FAQ", "board.faq.sub.title": "FAQリスト", - "board.archive.title": "資料のダウンロード", + "board.archive.title": "各種資料ダウンロード", "board.archive.sub.title": "見積書一覧", "board.list.header.rownum": "番号", "board.list.header.title": "タイトル", @@ -849,9 +849,10 @@ "main.storeName": "販売店名", "main.objectNo": "物件番号", "main.faq": "FAQ", + "main.archive": "各種資料ダウンロード", "main.content.objectList.noData1": "登録された商品情報はありません。", "main.content.objectList.noData2": "下のボタンをクリックして商品情報を登録してください。", - "main.content.objectList": "最近の更新物件一覧", + "main.content.objectList": "直近の見積書一覧", "main.content.notice": "お知らせ", "main.content.download1": "操作マニュアル", "main.content.download2": "屋根の説明書", @@ -1032,5 +1033,6 @@ "canvas.infomation.text": "数字は [半角] 入力のみ可能です。", "roof.exceed.count": "屋根材は4つまで選択可能です。", "outerLine.property.fix": "外壁線の属性設定 を完了しますか？", - "outerLine.property.close": "外壁線の属性設定 を終了しますか？" + "outerLine.property.close": "外壁線の属性設定 を終了しますか？", + "want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?" } diff --git a/src/locales/ko.json b/src/locales/ko.json index 5c5dfe03..4c051305 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -9,7 +9,7 @@ "header.menus.community": "커뮤니티", "header.menus.community.notice": "공지사항", "header.menus.community.faq": "FAQ", - "header.menus.community.archive": "문서다운로드", + "header.menus.community.archive": "각종 자료 다운로드", "header.logout": "로그아웃", "header.go": "이동", "header.online.warranty.system": "온라인보증시스템", @@ -557,7 +557,7 @@ "board.notice.sub.title": "공지사항 목록", "board.faq.title": "FAQ", "board.faq.sub.title": "FAQ 목록", - "board.archive.title": "자료 다운로드", + "board.archive.title": "각종 자료 다운로드", "board.archive.sub.title": "문서 목록", "board.list.header.rownum": "번호", "board.list.header.title": "제목", @@ -849,6 +849,7 @@ "main.storeName": "판매점명", "main.objectNo": "물건번호", "main.faq": "FAQ", + "main.archive": "각종 자료 다운로드", "main.content.objectList.noData1": "등록된 물건정보가 없습니다.", "main.content.objectList.noData2": "아래 버튼을 클릭하여 물건정보를 등록하십시오.", "main.content.objectList": "최근 갱신 물건목록", @@ -1032,5 +1033,6 @@ "canvas.infomation.text": "숫자는 [반각] 입력만 가능합니다.", "roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.", "outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?", - "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?" + "outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?", + "want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?" } diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 3e795f22..b31b8bc3 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -43,7 +43,7 @@ export const fontSizeState = atom({ export const canvasSizeState = atom({ key: 'canvasSize', default: { - vertical: 1000, + vertical: 1600, horizontal: 1600, }, }) diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss index b49087ed..9cc78a72 100644 --- a/src/styles/_canvasside.scss +++ b/src/styles/_canvasside.scss @@ -86,6 +86,7 @@ border: 1px solid #E9E9E9; background: #FFF; box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05); + z-index: 110000; ul{ padding: 17px 0; border-bottom: 1px solid #E9E9E9; diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 9ec806ef..58c6bc87 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -4,531 +4,550 @@ $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; +.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; + } + } + .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; + 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 { + position: relative; + padding: 24px; + .left-bar { + position: absolute; 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 .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{ + width: 5px; + height: 100%; + background-color: #000; + cursor: pointer; + } + .right-bar { + position: absolute; + top: 0; + right: 0; + width: 5px; + height: 100%; + background-color: #000; + cursor: pointer; + } + .modal-btn-wrap { 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; + gap: 5px; + button { + flex: 1; } - .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; + &.sub { + button { + flex: 1 1 auto; + padding: 0; + } + margin-bottom: 14px; } -} - -.modal-body{ - position: relative; - padding: 24px; - .left-bar{ - position: absolute; - top: 0; - left: 0; - width: 5px; - height: 100%; - background-color: #000; - cursor: pointer; - } - .right-bar{ - position: absolute; - top: 0; - right: 0; - width: 5px; - height: 100%; - background-color: #000; - cursor: pointer; - } - .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; + } + .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; + } } -} -.modal-foot{ + .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; - width: 100%; - padding: 5px 0; - background-color: #000; - cursor: pointer; + 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{ +.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; - 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; - } + 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-check-form-block { + display: block; + > div { + margin-bottom: 10px; + } +} +.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-check-form-block{ - display: block; - > div{ - margin-bottom: 10px; - } -} -.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; - .flex-ment{ - position: relative; - padding-right: 70px; - flex: 1 1 auto; - span{ - width: 70px; - &.absol{ - width: fit-content; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - - } - } - .input-grid{ - flex: 1; - } - } - } -} -.select-form{ - .sort-select{width: 100%;} -} -.grid-select{ - flex: 1; - height: 30px; - &.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; + .flex-ment { + position: relative; + padding-right: 70px; + flex: 1 1 auto; + span { + width: 70px; + &.absol { + width: fit-content; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + } + } + .input-grid { + 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; + height: 30px; + &.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 @@ -539,1688 +558,2032 @@ $alert-color: #101010; // max-width: 250px; // } -.pop-form-radio{ - display: flex; - align-items: center; - gap: 10px; - &.place{ - gap: 33px; - .outline-form{ - span{ - width: fit-content; - } - .input-grid{ - width: 80px; - } - } +.pop-form-radio { + display: flex; + align-items: center; + gap: 10px; + &.place { + gap: 33px; + .outline-form { + span { + width: fit-content; + } + .input-grid { + width: 80px; + } } + } } -.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; - } - } - &.gray{ - background-color: #535353; - border: 1px solid #9e9e9e; - &:hover{ - background-color: #6b6b6b; - } - } - } - } -} - -// 지붕형상 설정 -.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; + } + } + &.gray { + background-color: #535353; + border: 1px solid #9e9e9e; + &:hover { + background-color: #6b6b6b; + } + } + } + } } -.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; - justify-content: center; - width: 100%; - 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; - transition: background-color .13s ease-in-out; - 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; - } - &:hover{ - background-color: #464545; - } - } -} - -.block-box{ - display: flex; - align-items: center; - gap: 10px; - margin-bottom: 10px; - .flex-ment{ - gap: 10px; - .dec{ - text-decoration: underline; - } - .delete{ - display: block; - width: 15px; - height: 15px; - background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center; - background-size: cover; - } - } - &:last-child{ - margin-bottom: 0; - } -} - -.icon-btn-wrap{ - flex: 1; - display: flex; - align-items: center; - gap: 5px; - button{ - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 30px; - font-size: $pop-normal-size; - font-weight: $pop-normal-weight; - color: $pop-color; - border: 1px solid #646464; - border-radius: 2px; - padding: 0 10px; - transition: all .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); - } - } - } - &:disabled{ - color: $pop-color; - border: 1px solid #646464; - background-color: transparent; - opacity: 0.5; - &.act, - &:hover{ - color: $pop-color; - border: 1px solid #646464; - background-color: transparent; - i{ - &.allocation01{ - background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); - } - &.allocation02{ - background-image: url(../../public/static/images/canvas/allocation_icon02_white.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; - } + width: 100%; + 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; + transition: background-color 0.13s ease-in-out; + 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; } + &:hover { + background-color: #464545; + } + } } -.plane-detail-wrap{ - display: flex; - flex-direction: column; - flex: 1; -} -.plane-shape-wrapper{ - flex: 1; - display: flex; - flex-direction: column; +.block-box { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 10px; + .flex-ment { 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%; - } - } + .dec { + text-decoration: underline; } -} -.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); - } + .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; + } } -.plane-tab-guide{ +.icon-btn-wrap { + flex: 1; + display: flex; + align-items: center; + gap: 5px; + button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 30px; font-size: $pop-normal-size; font-weight: $pop-normal-weight; color: $pop-color; - 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); + } + } + } + &:disabled { + color: $pop-color; + border: 1px solid #646464; + background-color: transparent; + opacity: 0.5; + &.act, + &:hover { + color: $pop-color; + border: 1px solid #646464; + background-color: transparent; + i { + &.allocation01 { + background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); + } + &.allocation02 { + background-image: url(../../public/static/images/canvas/allocation_icon02_white.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; - 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%); + } } - } - .object-size-input{ - margin-left: auto; - .eaves-keraba-th{ - position: relative; - .object-input-num{ - position: absolute; - top: 7px; - left: -20px; - font-size: 13px; - } - } - } -} - -// 표시변경 -.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; - &::-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-title-sel{ - padding-bottom: 14px; - .outline-form{ - span{ - color: #62C207; - } - .grid-select{ - .sort-select{ - border: 1px solid #4E9E04; - background-color: #1A3104; - p{ - line-height: 27px; - } - .select-item-wrap{ - background-color: #1A3104; - border: 1px solid #4E9E04; - .select-item:hover{ - background-color: #294e07; - } - &::-webkit-scrollbar { - width: 2px; - background-color: transparent; - - } - &::-webkit-scrollbar-thumb { - background-color: #fff; - border-radius: 10px; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } + .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; } + } } - } + } + } + } } -} - -.circuit-table-flx-wrap{ - display: flex; - gap: 10px; - margin-bottom: 10px; - .circuit-table-flx-box{ + &.direction-box { + flex: 1; + display: flex; + flex-direction: column; + .plane-direction-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; +.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; + 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{ + } + .object-size-input { + margin-left: auto; + .eaves-keraba-th { + position: relative; + .object-input-num { + position: absolute; + top: 7px; + left: -20px; + font-size: 13px; + } + } + } +} + +// 표시변경 +.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; + &::-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-title-sel { + padding-bottom: 14px; + .outline-form { + span { + color: #62c207; + } + .grid-select { + .sort-select { + border: 1px solid #4e9e04; + background-color: #1a3104; + p { + line-height: 27px; + } + .select-item-wrap { + background-color: #1a3104; + border: 1px solid #4e9e04; + .select-item:hover { + background-color: #294e07; + } + &::-webkit-scrollbar { + width: 2px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #fff; + border-radius: 10px; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } + } + } + } + } +} + +.circuit-table-flx-wrap { + display: flex; + gap: 10px; + margin-bottom: 10px; + .circuit-table-flx-box { + flex: 1; + display: flex; + flex-direction: column; + .bottom-wrap { + margin-top: auto; + } + .roof-module-table { + table { + table-layout: fixed; + } + } + } +} + +.circuit-count-input { + display: flex; + align-items: center; + gap: 10px; +} + +// 모듈부가기능 +.additional-radio-wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px 0; + margin-bottom: 24px; +} +.additional-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: 0; - } - } + width: 95.77px; + } + .thin { + margin-left: 0; + } } + } } -.roof-module-tab2-overflow{ - max-height: 650px; - 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; - } +.roof-module-tab2-overflow { + max-height: 650px; + 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-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; } - .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; - } + .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{ +.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; + } +} + +.pop-spinner { + position: absolute; + bottom: 10px; + left: 5px; + width: calc(100% - 10px); + height: calc(100% - 49px); + display: flex; + align-items: center; + justify-content: center; + background-color: rgba($color: #101010, $alpha: 0.5); + z-index: 2000000; + .loader { + font-size: 10px; + width: 1.2em; + height: 1.2em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: mulShdSpin 1.1s infinite ease; + transform: translateZ(0); + } + @keyframes mulShdSpin { + 0%, + 100% { + box-shadow: + 0em -2.6em 0em 0em #fff, + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), + -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); + } + 12.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), + 1.8em -1.8em 0 0em #fff, + 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); + } + 25% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), + 2.5em 0em 0 0em #fff, + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 37.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), + 1.75em 1.75em 0 0em #fff, + 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 50% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), + 0em 2.5em 0 0em #fff, + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 62.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), + -1.8em 1.8em 0 0em #fff, + -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 75% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), + -2.6em 0em 0 0em #fff, + -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 87.5% { + box-shadow: + 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), + 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), + 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), + 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), + 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), + -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), + -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), + -1.8em -1.8em 0 0em #fff; + } + } +} + +.pop-spinner{ + position: absolute; + bottom: 10px; + left: 5px; + width: calc(100% - 10px); + height: calc(100% - 49px); display: flex; align-items: center; - .grid-select{ - flex: none; - width: 110px; + justify-content: center; + background-color: rgba($color: #101010, $alpha: 0.5); + z-index: 2000000; + .loader { + font-size: 10px; + width: 1.2em; + height: 1.2em; + border-radius: 50%; + position: relative; + text-indent: -9999em; + animation: mulShdSpin 1.1s infinite ease; + transform: translateZ(0); } - .outline-form{ - justify-content: flex-end; - } -} + @keyframes mulShdSpin { + 0%, + 100% { + box-shadow: 0em -2.6em 0em 0em #fff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); + } + 12.5% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); + } + 25% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 37.5% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 50% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 62.5% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 75% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); + } + 87.5% { + box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff; + } + } +} \ No newline at end of file diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 348f1291..cded90ee 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -320,7 +320,7 @@ export const drawGabledRoof = (roofId, canvas, textMode) => { const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines const hasNonParallelLines = roofLines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2) if (hasNonParallelLines.length > 0) { - alert('대각선이 존재합니다.') + // alert('대각선이 존재합니다.') return } @@ -648,7 +648,7 @@ export const drawShedRoof = (roofId, canvas, textMode) => { const roof = canvas?.getObjects().find((object) => object.id === roofId) const hasNonParallelLines = roof.lines.filter((line) => Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1) if (hasNonParallelLines.length > 0) { - alert('대각선이 존재합니다.') + // alert('대각선이 존재합니다.') return } @@ -739,7 +739,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => { //Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1 const hasNonParallelLines = roof.lines.filter((line) => Big(line.x1).minus(Big(line.x2)).gt(1) && Big(line.y1).minus(Big(line.y2)).gt(1)) if (hasNonParallelLines.length > 0) { - alert('대각선이 존재합니다.') + // alert('대각선이 존재ㄴ합니다.') return }