- {getMessage('modal.module.basic.setting.module.setting.info1')}
-
- {getMessage('modal.module.basic.setting.module.setting.info2')}
-
+
+
+
+
+ {getMessage('modal.module.basic.setting.module.setting.info1')}
+
+ {getMessage('modal.module.basic.setting.module.setting.info2')}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* 설정 오류시 노출 */}
+
※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。
)
diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
index ed84751c..789d048c 100644
--- a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
+++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
@@ -3,10 +3,11 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useContext } from 'react'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export default function LinePropertySetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -14,7 +15,8 @@ export default function LinePropertySetting(props) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
- const { initEvent } = useEvent()
+ // const { initEvent } = useEvent()
+ const { initEvent } = useContext(EventContext)
const properties = [
{ name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },
diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx
index cadfd461..bddc9f07 100644
--- a/src/components/floor-plan/modal/object/SizeSetting.jsx
+++ b/src/components/floor-plan/modal/object/SizeSetting.jsx
@@ -5,11 +5,12 @@ import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { contextPopupPositionState } from '@/store/popupAtom'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useContext } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { useEvent } from '@/hooks/useEvent'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export default function SizeSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -22,11 +23,12 @@ export default function SizeSetting(props) {
const widthRef = useRef(null)
const heightRef = useRef(null)
- const { initEvent } = useEvent()
+ // const { initEvent } = useEvent()
+ // const { initEvent } = useContext(EventContext)
- useEffect(() => {
- initEvent()
- }, [])
+ // useEffect(() => {
+ // initEvent()
+ // }, [])
const handleReSizeObject = () => {
const width = widthRef.current.value
diff --git a/src/components/floor-plan/modal/setting01/SecondOption.jsx b/src/components/floor-plan/modal/setting01/SecondOption.jsx
index 7dbb2673..b5e9d98d 100644
--- a/src/components/floor-plan/modal/setting01/SecondOption.jsx
+++ b/src/components/floor-plan/modal/setting01/SecondOption.jsx
@@ -25,11 +25,7 @@ export default function SecondOption() {
const [planSizeId, setPlanSizeId] = useState(uuidv4())
const {
- //horizon, setHorizon, vertical, setVertical,
- // originHorizon,
- // setOriginHorizon,
- // originVertical,
- // setOriginVertical,
+ fetchSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
settingModalSecondOptions,
@@ -40,12 +36,9 @@ export default function SecondOption() {
} = useCanvasSetting()
const { option3, option4 } = settingModalSecondOptions
- // const [horizon, setHorizon] = useState(originHorizon)
- // const [vertical, setVertical] = useState(originVertical)
-
// 데이터를 최초 한 번만 조회
useEffect(() => {
- console.log('SecondOption useEffect 실행', planSizeSettingMode)
+ console.log('SecondOption useEffect 실행')
}, [])
const handlePopup = (type) => {
@@ -119,6 +112,7 @@ export default function SecondOption() {
case 'planSize': {
//도면크기 설정
if (!showPlanSizeSettingModal) {
+ fetchSettings() //화면 오픈 시 데이터 조회
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2,
, true)
} else {
@@ -135,10 +129,14 @@ export default function SecondOption() {
return {
...prev,
[fontProps.type]: {
- fontFamily: font.fontFamily.value,
- fontWeight: font.fontWeight.value,
- fontSize: font.fontSize.value,
- fontColor: font.fontColor.value,
+ // fontFamily: font.fontFamily.value,
+ // fontWeight: font.fontWeight.value,
+ // fontSize: font.fontSize.value,
+ // fontColor: font.fontColor.value,
+ fontFamily: font.fontFamily,
+ fontWeight: font.fontWeight,
+ fontSize: font.fontSize,
+ fontColor: font.fontColor,
},
fontFlag: true,
}
@@ -161,10 +159,6 @@ export default function SecondOption() {
const planSizeProps = {
id: planSizeId,
- // horizon,
- // setHorizon,
- // vertical,
- // setVertical,
horizon: planSizeSettingMode.originHorizon,
vertical: planSizeSettingMode.originVertical,
isShow: showPlanSizeSettingModal,
diff --git a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
index f5753965..63581d5d 100644
--- a/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
@@ -77,28 +77,9 @@ export default function DimensionLineSetting(props) {
{ id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
]
- let originPixelView
-
useEffect(() => {
if (originPixel) {
setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
- originPixelView = originPixel
- }
-
- if (globalFont.dimensionLineText.fontFamily) {
- setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0])
- }
-
- if (globalFont.dimensionLineText.fontWeight) {
- setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0])
- }
-
- if (globalFont.dimensionLineText.fontSize) {
- setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0])
- }
-
- if (globalFont.dimensionLineText.fontColor) {
- setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0])
}
setIsShow(true)
@@ -106,7 +87,6 @@ export default function DimensionLineSetting(props) {
useEffect(() => {
if (originPixel.name) {
- originPixelView = originPixel.name
setOriginPixel(originPixel)
}
}, [originPixel])
@@ -142,10 +122,10 @@ export default function DimensionLineSetting(props) {
isShow: showFontModal,
setIsShow: setShowFontModal,
font: {
- fontFamily: originFont?.value,
- fontWeight: originFontWeight?.value,
- fontSize: originFontSize?.value,
- fontColor: originFontColor?.value,
+ fontFamily: originFont,
+ fontWeight: originFontWeight,
+ fontSize: originFontSize,
+ fontColor: originFontColor,
},
onSave: handleFontSave,
isConfig: true,
@@ -172,10 +152,10 @@ export default function DimensionLineSetting(props) {
return {
...prev,
dimensionLineText: {
- fontFamily: originFont.value,
- fontWeight: originFontWeight.value,
- fontSize: originFontSize.value,
- fontColor: originFontColor.value,
+ fontFamily: originFont,
+ fontWeight: originFontWeight,
+ fontSize: originFontSize,
+ fontColor: originFontColor,
},
fontFlag: true,
}
diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index 5d4bde1c..a841efd5 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -13,28 +13,19 @@ export default function PlanSizeSetting(props) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
-
- // const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon)
- // const [originVertical, setOriginVertical] = useCanvasSetting(vertical)
- // const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting()
const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('PlanSizeSetting useEffect 실행')
- console.log('11111', planSizeSettingMode)
- //setOriginHorizon({ originHorizon: horizon, flag: false })
- //setOriginVertical({ originVertical: vertical, flag: false })
}, [])
const onSave = () => {
- console.log('22222', planSizeSettingMode)
setPlanSizeSettingMode((prev) => {
- console.log('4', prev)
return {
...prev,
- originHorizon: planSizeSettingMode.originHorizon,
- originVertical: planSizeSettingMode.originVertical,
+ originHorizon: Number(planSizeSettingMode.originHorizon),
+ originVertical: Number(planSizeSettingMode.originVertical),
flag: true,
}
})
@@ -53,7 +44,7 @@ export default function PlanSizeSetting(props) {
setPlanSizeSettingMode((prev) => {
return {
...prev,
- [name]: value,
+ [name]: Number(value),
flag: false,
}
})
diff --git a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
index 11fcd84f..d3afd459 100644
--- a/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
@@ -1,10 +1,12 @@
import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
const { getMessage } = useMessage()
- const { addDocumentEventListener, initEvent } = useEvent()
+ // const { addDocumentEventListener, initEvent } = useEvent()
+ const { addDocumentEventListener, initEvent } = useContext(EventContext)
useEffect(() => {
addDocumentEventListener('keydown', document, keyDown)
diff --git a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
index 15ccefa3..c736d397 100644
--- a/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
+++ b/src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
@@ -1,10 +1,12 @@
import { useMessage } from '@/hooks/useMessage'
-import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
const { getMessage } = useMessage()
- const { addDocumentEventListener, initEvent } = useEvent()
+ // const { addDocumentEventListener, initEvent } = useEvent()
+ const { addDocumentEventListener, initEvent } = useContext(EventContext)
const [type, setType] = useState(1)
const [arrow1, setArrow1] = useState('up')
const [arrow2, setArrow2] = useState('up')
diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx
index 87f07a8e..080a7cb6 100644
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@@ -142,6 +142,16 @@ export default function StuffDetail() {
headerName: getMessage('stuff.detail.planGridHeader.capacity'),
width: 120,
cellStyle: { justifyContent: 'flex-end' /* 우측정렬*/ },
+ cellRenderer: (params) => {
+ let origin = params.value
+ let capacity
+ if (origin) {
+ capacity = origin / 1000
+ return capacity.toFixed(3)
+ } else {
+ return null
+ }
+ },
},
{
field: 'roofMaterialIdMulti',
@@ -170,8 +180,8 @@ export default function StuffDetail() {
},
},
{
- field: 'constructSpecification',
- headerName: getMessage('stuff.detail.planGridHeader.constructSpecification'),
+ field: 'constructSpecificationMulti',
+ headerName: getMessage('stuff.detail.planGridHeader.constructSpecificationMulti'),
wrapText: true,
autoHeight: true,
cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index 594797bb..5c8fcfee 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { wordDisplaySelector } from '@/store/settingAtom'
import { useEvent } from '@/hooks/useEvent'
@@ -9,11 +9,13 @@ import { canvasState } from '@/store/canvasAtom'
import { v4 as uuidv4 } from 'uuid'
import { usePopup } from '@/hooks/usePopup'
import Distance from '@/components/floor-plan/modal/distance/Distance'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export function useCommonUtils() {
const canvas = useRecoilValue(canvasState)
const wordDisplay = useRecoilValue(wordDisplaySelector)
- const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
const commonTextFont = useRecoilValue(fontSelector('commonText'))
@@ -21,7 +23,7 @@ export function useCommonUtils() {
const { addPopup } = usePopup()
useEffect(() => {
- initEvent()
+ // initEvent()
if (commonUtils.text) {
commonTextMode()
} else if (commonUtils.dimension) {
@@ -37,7 +39,7 @@ export function useCommonUtils() {
commonTextKeyEvent()
addCanvasMouseEventListener('mouse:down', (event) => {
const pointer = canvas?.getPointer(event.e)
-
+
textbox = new fabric.Textbox('', {
left: pointer.x,
top: pointer.y,
diff --git a/src/hooks/common/useFont.js b/src/hooks/common/useFont.js
index bdcdaa4e..cb305565 100644
--- a/src/hooks/common/useFont.js
+++ b/src/hooks/common/useFont.js
@@ -12,7 +12,7 @@ export function useFont() {
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
useEffect(() => {
- if (canvas && commonText.fontWeight?.value) {
+ if (canvas && commonText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
textObjs.forEach((obj) => {
obj.set({
@@ -28,7 +28,7 @@ export function useFont() {
}, [commonText])
useEffect(() => {
- if (canvas && dimensionLineText.fontWeight?.value) {
+ if (canvas && dimensionLineText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
textObjs.forEach((obj) => {
obj.set({
@@ -44,7 +44,7 @@ export function useFont() {
}, [dimensionLineText])
useEffect(() => {
- if (canvas && flowText.fontWeight?.value) {
+ if (canvas && flowText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
textObjs.forEach((obj) => {
obj.set({
@@ -60,7 +60,7 @@ export function useFont() {
}, [flowText])
useEffect(() => {
- if (canvas && lengthText.fontWeight?.value) {
+ if (canvas && lengthText.fontWeight.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
textObjs.forEach((obj) => {
obj.set({
diff --git a/src/hooks/floorPlan/estimate/useEstimateController.js b/src/hooks/floorPlan/estimate/useEstimateController.js
index c5b8537c..9ac68243 100644
--- a/src/hooks/floorPlan/estimate/useEstimateController.js
+++ b/src/hooks/floorPlan/estimate/useEstimateController.js
@@ -80,7 +80,7 @@ export const useEstimateController = (planNo) => {
itemId: '', //제품번호
itemNo: '',
itemName: '', //형명
- amount: '0', //수량
+ amount: '', //수량
unitPrice: '0',
unit: '', //단위
salePrice: '', //단가
@@ -126,6 +126,8 @@ export const useEstimateController = (planNo) => {
const handleEstimateSubmit = async () => {
//0. 필수체크
let flag = true
+ let fileFlg = true
+ let itemFlg = true
if (estimateData.charger.trim().length === 0) {
flag = false
return alert(getMessage('estimate.detail.save.requiredCharger'))
@@ -141,26 +143,58 @@ export const useEstimateController = (planNo) => {
return alert(getMessage('estimate.detail.save.requiredEstimateDate'))
}
- // console.log('첨부파일:::::', estimateData.fileList)
//첨부파일을 첨부안했는데
//아이템 fileUploadFlg가1(첨부파일 필수)이 1개라도 있는데 후일 자료 제출(fileFlg) 체크안했으면(0) alert 저장안돼
- let fileFlg = true
- if (estimateData.fileList.length < 1) {
- if (estimateData.itemList.length > 1) {
- estimateData.itemList.map((row) => {
- if (row.fileUploadFlg === '1') {
- if (fileFlg) {
- if (estimateData.fileFlg === '0') {
- fileFlg = false
- return alert(getMessage('estimate.detail.save.requiredFileUpload'))
+ if (flag) {
+ if (estimateData.fileList.length < 1) {
+ if (estimateData.itemList.length > 1) {
+ estimateData.itemList.map((row) => {
+ if (row.fileUploadFlg === '1') {
+ if (fileFlg) {
+ if (estimateData.fileFlg === '0') {
+ fileFlg = false
+ return alert(getMessage('estimate.detail.save.requiredFileUpload'))
+ }
}
}
- }
- })
+ })
+ }
}
}
- if (flag && fileFlg) {
+ if (fileFlg) {
+ estimateData.itemList.map((item) => {
+ item.amount = item.amount?.replaceAll(',', '')
+ item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2)
+ item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2)
+
+ if (!item.paDispOrder) {
+ if (itemFlg) {
+ if (isNaN(item.amount)) {
+ item.amount = '0'
+ }
+
+ if (item.amount < 1) {
+ itemFlg = false
+ return alert(getMessage('estimate.detail.save.requiredAmount'))
+ }
+
+ if (estimateData.estimateType !== 'YJSS') {
+ if (isNaN(item.salePrice)) {
+ item.salePrice = '0'
+ }
+
+ if (item.salePrice < 1) {
+ itemFlg = false
+ return alert(getMessage('estimate.detail.save.requiredSalePrice'))
+ }
+ }
+ }
+ }
+ })
+ }
+
+ if (flag && fileFlg && itemFlg) {
//1. 첨부파일 저장시작
const formData = new FormData()
formData.append('file', estimateData.fileList)
@@ -173,7 +207,7 @@ export const useEstimateController = (planNo) => {
//첨부파일저장끝
//제품라인 추가했는데 아이템 안고르고 저장하면itemId=''은 날리고 나머지 저장하기
- estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '')
+ estimateData.itemList = estimateData.itemList.filter((item) => item.itemId !== '' && item.delFlg === '0')
let delCnt = 0
estimateData.itemList.map((item) => {
@@ -186,12 +220,6 @@ export const useEstimateController = (planNo) => {
}
console.log('최종 아이템 정보::;', estimateData.itemList)
- estimateData.itemList.map((item) => {
- item.amount = item.amount?.replaceAll(',', '')
- item.salePrice = parseFloat(item.salePrice?.replaceAll(',', '')).toFixed(2)
- item.saleTotPrice = parseFloat(item.saleTotPrice?.replaceAll(',', '')).toFixed(2)
- })
-
console.log('최종 정보::;', estimateData)
//2. 상세데이터 저장
// return
diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js
index 500568ac..eb6ac973 100644
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
@@ -11,14 +11,15 @@ import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
import * as turf from '@turf/turf'
-import next from 'next'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
- const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+ // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+ const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
let selectedModuleInstSurfaceArray = []
const makeModuleInstArea = () => {
diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js
index 1820599b..2227e5db 100644
--- a/src/hooks/object/useObjectBatch.js
+++ b/src/hooks/object/useObjectBatch.js
@@ -1,5 +1,5 @@
'use client'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
@@ -12,11 +12,13 @@ import { usePolygon } from '@/hooks/usePolygon'
import { QPolygon } from '@/components/fabric/QPolygon'
import { v4 as uuidv4 } from 'uuid'
import { fontSelector } from '@/store/fontAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
- const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+ // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
+ const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index ac03e054..c3155512 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -7,7 +7,7 @@ import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
-import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { globalFontAtom } from '@/store/fontAtom'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
let objectNo
@@ -32,7 +32,7 @@ export function useCanvasSetting() {
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
- const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
+ const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState)
//const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [selectedFont, setSelectedFont] = useState()
@@ -40,13 +40,8 @@ export function useCanvasSetting() {
const [selectedFontSize, setSelectedFontSize] = useState()
const [selectedFontColor, setSelectedFontColor] = useState()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
- //const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
- //const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false })
- //const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false })
-
useEffect(() => {
if (!canvas) {
return
@@ -97,9 +92,9 @@ export function useCanvasSetting() {
console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
onClickOption2()
+ frontSettings()
fetchSettings()
}
- frontSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
// 글꼴 변경 시
@@ -114,20 +109,85 @@ export function useCanvasSetting() {
// 도명크기 변경 시
useEffect(() => {
- console.log(
- 'useCanvasSetting useEffect 실행5',
- correntObjectNo,
- planSizeSettingMode.flag,
- planSizeSettingMode.originHorizon,
- planSizeSettingMode.originVertical,
- )
+ console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
if (planSizeSettingMode.flag) {
onClickOption2()
frontSettings()
fetchSettings()
}
- }, [planSizeSettingMode.flag])
+ }, [planSizeSettingMode])
+
+ const getFonts = (itemValue) => {
+ if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
+ const data = [
+ { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
+ { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
+ { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
+ { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
+ { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+ ].filter((font) => font.value === itemValue)
+ if (data.length !== 0) {
+ return data[0]
+ } else {
+ return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
+ }
+ }
+
+ const getFontSizes = (itemValue) => {
+ if (!itemValue) return { id: 16, name: 16, value: 16 }
+ const data = [
+ ...Array.from({ length: 4 }).map((_, index) => {
+ return { id: index + 8, name: index + 8, value: index + 8 }
+ }),
+ ...Array.from({ length: 9 }).map((_, index) => {
+ return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
+ }),
+ { id: 36, name: 36, value: 36 },
+ { id: 48, name: 48, value: 48 },
+ { id: 72, name: 72, value: 72 },
+ ].filter((fontSize) => fontSize.value === itemValue)
+ if (data.length !== 0) {
+ return data[0]
+ } else {
+ return { id: 16, name: 16, value: 16 }
+ }
+ }
+
+ const getFontStyles = (itemValue) => {
+ if (!itemValue) return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }
+ const data = [
+ { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
+ { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
+ { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
+ { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
+ ].filter((fontStyle) => fontStyle.value === itemValue)
+ if (data.length !== 0) {
+ return data[0]
+ } else {
+ return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }
+ }
+ }
+
+ const getFontColors = (itemValue) => {
+ if (!itemValue) return { id: 'black', name: getMessage('color.black'), value: 'black' }
+ const data = [
+ { id: 'black', name: getMessage('color.black'), value: 'black' },
+ { id: 'red', name: getMessage('color.red'), value: 'red' },
+ { id: 'blue', name: getMessage('color.blue'), value: 'blue' },
+ { id: 'gray', name: getMessage('color.gray'), value: 'gray' },
+ { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
+ { id: 'green', name: getMessage('color.green'), value: 'green' },
+ { id: 'pink', name: getMessage('color.pink'), value: 'pink' },
+ { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
+ { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
+ ].filter((fontColor) => fontColor.value === itemValue)
+ if (data.length !== 0) {
+ return data[0]
+ } else {
+ return { id: 'black', name: getMessage('color.black'), value: 'black' }
+ }
+ }
const fetchSettings = async () => {
try {
@@ -141,8 +201,6 @@ export function useCanvasSetting() {
const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
- //setObjectNo(floorPlanState.objectNo)
-
//흡착점 ON/OFF
setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false })
@@ -156,16 +214,6 @@ export function useCanvasSetting() {
originVertical: res.originVertical,
flag: false,
})
- // setOriginHorizon({
- // ...originHorizon,
- // originHorizon: res.originHorizon,
- // flag: false,
- // })
- // setOriginVertical({
- // ...originVertical,
- // originVertical: res.originVertical,
- // flag: false,
- // })
// 데이터 설정
setSettingModalFirstOptions({
@@ -185,43 +233,43 @@ export function useCanvasSetting() {
const fontPatternData = {
commonText: {
//문자 글꼴 조회 데이터
- fontFamily: res.wordFont,
- fontWeight: res.wordFontStyle,
- fontSize: res.wordFontSize,
- fontColor: res.wordFontColor,
+ fontFamily: getFonts(res.wordFont),
+ fontWeight: getFontStyles(res.wordFontStyle),
+ fontSize: getFontSizes(res.wordFontSize),
+ fontColor: getFontColors(res.wordFontColor),
},
flowText: {
//흐름방향 글꼴 조회 데이터
- fontFamily: res.flowFont,
- fontWeight: res.flowFontStyle,
- fontSize: res.flowFontSize,
- fontColor: res.flowFontColor,
+ fontFamily: getFonts(res.flowFont),
+ fontWeight: getFontStyles(res.flowFontStyle),
+ fontSize: getFontSizes(res.flowFontSize),
+ fontColor: getFontColors(res.flowFontColor),
},
dimensionLineText: {
//치수 글꼴 조회 데이터
- fontFamily: res.dimensioFont,
- fontWeight: res.dimensioFontStyle,
- fontSize: res.dimensioFontSize,
- fontColor: res.dimensioFontColor,
+ fontFamily: getFonts(res.dimensioFont),
+ fontWeight: getFontStyles(res.dimensioFontStyle),
+ fontSize: getFontSizes(res.dimensioFontSize),
+ fontColor: getFontColors(res.dimensioFontColor),
},
circuitNumberText: {
//회로번호 글꼴 조회 데이터
- fontFamily: res.circuitNumFont,
- fontWeight: res.circuitNumFontStyle,
- fontSize: res.circuitNumFontSize,
- fontColor: res.circuitNumFontColor,
+ fontFamily: getFonts(res.circuitNumFont),
+ fontWeight: getFontStyles(res.circuitNumFontStyle),
+ fontSize: getFontSizes(res.circuitNumFontSize),
+ fontColor: getFontColors(res.circuitNumFontColor),
},
lengthText: {
//치수선 글꼴 조회 데이터
- fontFamily: res.lengthFont,
- fontWeight: res.lengthFontStyle,
- fontSize: res.lengthFontSize,
- fontColor: res.lengthFontColor,
+ fontFamily: getFonts(res.lengthFont),
+ fontWeight: getFontStyles(res.lengthFontStyle),
+ fontSize: getFontSizes(res.lengthFontSize),
+ fontColor: getFontColors(res.lengthFontColor),
},
//글꼴 설정 Flag
fontFlag: false,
}
- //console.log('fontPatternData', fontPatternData)
+ console.log('fontPatternData', fontPatternData)
//조회된 글꼴 데이터 set
setGlobalFont(fontPatternData)
@@ -239,14 +287,6 @@ export function useCanvasSetting() {
...planSizeSettingMode,
flag: false,
})
- // setOriginHorizon({
- // ...originHorizon,
- // flag: false,
- // })
- // setOriginVertical({
- // ...originVertical,
- // flag: false,
- // })
// 데이터 설정
setSettingModalFirstOptions({
@@ -258,52 +298,7 @@ export function useCanvasSetting() {
fontFlag: false,
})
- //console.log('globalFont2', globalFont)
- const fontPatternData = {
- commonText: {
- //문자 글꼴
- fontFamily: globalFont.commonText.fontFamily.value,
- fontWeight: globalFont.commonText.fontWeight.value,
- fontSize: globalFont.commonText.fontSize.value,
- fontColor: globalFont.commonText.fontColor.value,
- },
- flowText: {
- //흐름방향 글꼴
- fontFamily: globalFont.flowText.fontFamily.value,
- fontWeight: globalFont.flowText.fontWeight.value,
- fontSize: globalFont.flowText.fontSize.value,
- fontColor: globalFont.flowText.fontColor.value,
- },
- dimensionLineText: {
- //치수 글꼴
- fontFamily: globalFont.dimensionLineText.fontFamily.value,
- fontWeight: globalFont.dimensionLineText.fontWeight.value,
- fontSize: globalFont.dimensionLineText.fontSize.value,
- fontColor: globalFont.dimensionLineText.fontColor.value,
- },
- circuitNumberText: {
- //회로번호 글꼴
- fontFamily: globalFont.circuitNumberText.fontFamily.value,
- fontWeight: globalFont.circuitNumberText.fontWeight.value,
- fontSize: globalFont.circuitNumberText.fontSize.value,
- fontColor: globalFont.circuitNumberText.fontColor.value,
- },
- lengthText: {
- //치수선 글꼴
- fontFamily: globalFont.lengthText.fontFamily.value,
- fontWeight: globalFont.lengthText.fontWeight.value,
- fontSize: globalFont.lengthText.fontSize.value,
- fontColor: globalFont.lengthText.fontColor.value,
- },
- //글꼴 설정 Flag
- fontFlag: false,
- }
-
- //console.log('fontPatternData', fontPatternData)
-
- setGlobalFont(fontPatternData)
-
- //setGlobalFont({ ...globalFont, fontFlag: false })
+ setGlobalFont({ ...globalFont, fontFlag: false })
}
frontSettings()
} catch (error) {
@@ -332,7 +327,7 @@ export function useCanvasSetting() {
selected: item.selected,
})),
}
-
+ // console.log('globalFont', globalFont)
const patternData = {
//견적서 번호
objectNo: correntObjectNo,
@@ -366,34 +361,34 @@ export function useCanvasSetting() {
//글꼴 설정
//문자 글꼴
- wordFont: globalFont.commonText.fontFamily,
- wordFontStyle: globalFont.commonText.fontWeight,
- wordFontSize: globalFont.commonText.fontSize,
- wordFontColor: globalFont.commonText.fontColor,
+ wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
+ wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
+ wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
+ wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
//흐름방향 글꼴
- flowFont: globalFont.flowText.fontFamily,
- flowFontStyle: globalFont.flowText.fontWeight,
- flowFontSize: globalFont.flowText.fontSize,
- flowFontColor: globalFont.flowText.fontColor,
+ flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
+ flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
+ flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
+ flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
//치수 글꼴
- dimensioFont: globalFont.dimensionLineText.fontFamily,
- dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
- dimensioFontSize: globalFont.dimensionLineText.fontSize,
- dimensioFontColor: globalFont.dimensionLineText.fontColor,
+ dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
+ dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
+ dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
+ dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
//회로번호 글꼴
- circuitNumFont: globalFont.circuitNumberText.fontFamily,
- circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
- circuitNumFontSize: globalFont.circuitNumberText.fontSize,
- circuitNumFontColor: globalFont.circuitNumberText.fontColor,
+ circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
+ circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
+ circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
+ circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
//치수선 글꼴
- lengthFont: globalFont.lengthText.fontFamily,
- lengthFontStyle: globalFont.lengthText.fontWeight,
- lengthFontSize: globalFont.lengthText.fontSize,
- lengthFontColor: globalFont.lengthText.fontColor,
+ lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
+ lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
+ lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
+ lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
//치수선 설정
originPixel: dimensionLineSettings.pixel,
@@ -402,8 +397,6 @@ export function useCanvasSetting() {
//치수선 설정
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
- // originHorizon: originHorizon.originHorizon,
- // originVertical: originVertical.originVertical,
}
console.log('patternData ', patternData)
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index 0d23fd44..6d5d384f 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
@@ -22,11 +22,13 @@ import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
import { POLYGON_TYPE } from '@/common/common'
+import { EventContext } from '@/app/floor-plan/EventProvider'
// 보조선 작성
export function useAuxiliaryDrawing(id) {
const canvas = useRecoilValue(canvasState)
- const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext)
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()
diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index 5619abfb..2c2a9b27 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
@@ -10,12 +10,14 @@ import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
// 처마.케라바 변경
export function useEavesGableEdit(id) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
- const { addCanvasMouseEventListener, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { closePopup } = usePopup()
const TYPES = {
EAVES: 'eaves',
diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index 34961ea0..7051fe49 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/src/hooks/roofcover/useMovementSetting.js
@@ -2,11 +2,12 @@ import { useRecoilValue } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE } from '@/common/common'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
//동선이동 형 올림 내림
export function useMovementSetting(id) {
@@ -15,7 +16,8 @@ export function useMovementSetting(id) {
UP_DOWN: 'updown', //형 올림내림
}
const canvas = useRecoilValue(canvasState)
- const { initEvent, addCanvasMouseEventListener } = useEvent()
+ // const { initEvent, addCanvasMouseEventListener } = useEvent()
+ const { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
const { closePopup } = usePopup()
const { getMessage } = useMessage()
const currentObject = useRecoilValue(currentObjectState)
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
index 7c4d5091..c668dd60 100644
--- a/src/hooks/roofcover/useOuterLineWall.js
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
import { distanceBetweenPoints } from '@/util/canvas-util'
import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
import {
@@ -31,6 +31,7 @@ import { fabric } from 'fabric'
import { outlineDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import { EventContext } from '@/app/floor-plan/EventProvider'
//외벽선 그리기
export function useOuterLineWall(id, propertiesId) {
@@ -43,6 +44,14 @@ export function useOuterLineWall(id, propertiesId) {
removeAllDocumentEventListeners,
removeMouseEvent,
} = useEvent()
+ // const {
+ // initEvent,
+ // // addCanvasMouseEventListener,
+ // // addDocumentEventListener,
+ // removeAllMouseEventListeners,
+ // removeAllDocumentEventListeners,
+ // removeMouseEvent,
+ // } = useContext(EventContext)
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()
diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js
index e0af3205..656094f2 100644
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@@ -1,6 +1,6 @@
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
@@ -11,6 +11,7 @@ import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
+import { EventContext } from '@/app/floor-plan/EventProvider'
//지붕형상 수동 설정
export function useRoofShapePassivitySetting(id) {
@@ -25,7 +26,8 @@ export function useRoofShapePassivitySetting(id) {
const { getMessage } = useMessage()
const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
const { swalFire } = useSwal()
- const { addCanvasMouseEventListener, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { drawRoofPolygon } = useMode()
const { addPolygonByLines } = usePolygon()
const currentObject = useRecoilValue(currentObjectState)
diff --git a/src/hooks/roofcover/useWallLineOffsetSetting.js b/src/hooks/roofcover/useWallLineOffsetSetting.js
index ba6453ef..b673bcc2 100644
--- a/src/hooks/roofcover/useWallLineOffsetSetting.js
+++ b/src/hooks/roofcover/useWallLineOffsetSetting.js
@@ -1,11 +1,12 @@
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
-import { useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { useLine } from '@/hooks/useLine'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
+import { EventContext } from '@/app/floor-plan/EventProvider'
// 외벽선 편집 및 오프셋
export function useWallLineOffsetSetting(id) {
@@ -14,7 +15,8 @@ export function useWallLineOffsetSetting(id) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { swalFire } = useSwal()
- const { addCanvasMouseEventListener, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const wallLineEditRef = useRef(null)
const length1Ref = useRef(null)
const length2Ref = useRef(null)
diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js
index 24f641fe..822ea5c9 100644
--- a/src/hooks/surface/usePlacementShapeDrawing.js
+++ b/src/hooks/surface/usePlacementShapeDrawing.js
@@ -12,7 +12,7 @@ import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
-import { useEffect, useRef } from 'react'
+import { useContext, useEffect, useRef } from 'react'
import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { calculateAngle } from '@/util/qpolygon-utils'
@@ -33,12 +33,15 @@ import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
import { roofDisplaySelector } from '@/store/settingAtom'
+import { EventContext } from '@/app/floor-plan/EventProvider'
// 면형상 배치
export function usePlacementShapeDrawing(id) {
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
+ // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+ // useEvent()
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
- useEvent()
+ useContext(EventContext)
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index 3731443d..b0728ac8 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -15,6 +15,8 @@ import { usePolygon } from '@/hooks/usePolygon'
import { fontSelector } from '@/store/fontAtom'
import { slopeSelector } from '@/store/commonAtom'
import { QLine } from '@/components/fabric/QLine'
+import { EventContext } from '@/app/floor-plan/EventProvider'
+import { useContext } from 'react'
export function useSurfaceShapeBatch() {
const { getMessage } = useMessage()
@@ -26,7 +28,8 @@ export function useSurfaceShapeBatch() {
const roofDisplay = useRecoilValue(roofDisplaySelector)
const slope = useRecoilValue(slopeSelector(globalPitch))
const { swalFire } = useSwal()
- const { addCanvasMouseEventListener, initEvent } = useEvent()
+ // const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { closePopup } = usePopup()
const applySurfaceShape = (surfaceRefs, selectedType, id) => {
diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index ba441b75..16d0896d 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 946cc628..7ed3fa6e 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -23,9 +23,6 @@ export function usePlan() {
const { getMessage } = useMessage()
const { get, promisePost, promisePut, promiseDel } = useAxios()
- const planLabel = 'Plan '
- const newPlanLabel = 'New Plan '
-
/**
* 마우스 포인터의 가이드라인을 제거합니다.
*/
@@ -145,7 +142,9 @@ export function usePlan() {
*/
const checkUnsavedCanvasPlan = async (userId) => {
swalFire({
- text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `,
+ text:
+ (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+ `Plan ${plan.ordering}의 변경 사항을 저장하시겠습니까?`,
type: 'confirm',
confirmFn: async () => {
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
@@ -185,20 +184,20 @@ export function usePlan() {
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
- res.map((item) => ({
+ res.map((item, index) => ({
id: item.id,
- name: planLabel + item.id,
userId: item.userId,
canvasStatus: dbToCanvasFormat(item.canvasStatus),
isCurrent: false,
bgImageName: item.bgImageName,
mapPositionAddress: item.mapPositionAddress,
+ ordering: index + 1,
})),
)
}
/**
- * canvas 데이터를 추가
+ * 신규 canvas 데이터를 저장
*/
const postCanvasStatus = async (userId, canvasStatus) => {
const planData = {
@@ -216,7 +215,6 @@ export function usePlan() {
? {
...plan,
id: res.data,
- name: planLabel + res.data,
canvasStatus: canvasStatus,
}
: plan,
@@ -306,7 +304,10 @@ export function usePlan() {
const handleAddPlan = (userId, objectNo) => {
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
- text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'),
+ text:
+ (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
+ `Plan ${currentCanvasPlan.ordering} ` +
+ getMessage('plan.message.confirm.copy'),
type: 'confirm',
confirmFn: () => {
addPlan(userId, objectNo, currentCanvasData())
@@ -321,10 +322,10 @@ export function usePlan() {
const id = uuidv4()
const newPlan = {
id: id,
- name: newPlanLabel + `${planNum + 1}`,
objectNo: objectNo,
userId: userId,
canvasStatus: canvasStatus,
+ ordering: planNum + 1,
}
setPlans([...plans, newPlan])
handleCurrentPlan(userId, id)
@@ -373,9 +374,10 @@ export function usePlan() {
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
- updateCurrentPlan(Number(pid)) // last 데이터에 포커싱
+ updateCurrentPlan(Number(pid))
+ setPlanNum(res.length)
} else {
- addPlan(userId, objectNo)
+ addPlan(userId, objectNo, '')
}
})
}
@@ -383,6 +385,7 @@ export function usePlan() {
return {
canvas,
plans,
+ initCanvasPlans,
selectedPlan,
currentCanvasPlan,
modifiedPlans,
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 9250fe50..2f8be755 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -86,12 +86,14 @@
"modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力",
"modal.module.basic.setting.module.roof.material": "屋根材",
"modal.module.basic.setting.module.trestle.maker": "架台メーカー",
+ "modal.module.basic.setting.module.rafter.margin": "マンドンピッチ",
"modal.module.basic.setting.module.construction.method": "工法",
"modal.module.basic.setting.module.under.roof": "屋根の下",
"modal.module.basic.setting.module.setting": "モジュールの選択",
"modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。",
"modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください",
- "modal.module.basic.setting.module.cotton.classification": "綿調道区分",
+ "modal.module.basic.setting.module.stuff.info": "商品情報",
+ "modal.module.basic.setting.module.surface.type": "면조도구분(JA)",
"modal.module.basic.setting.module.fitting.height": "設置高さ",
"modal.module.basic.setting.module.standard.wind.speed": "基準風速",
"modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量",
@@ -729,7 +731,7 @@
"stuff.detail.planGridHeader.moduleModel": "モジュール",
"stuff.detail.planGridHeader.capacity": "システム容量",
"stuff.detail.planGridHeader.roofMaterialIdMulti": "屋根材",
- "stuff.detail.planGridHeader.constructSpecification": "施工方法",
+ "stuff.detail.planGridHeader.constructSpecificationMulti": "施工方法",
"stuff.detail.planGridHeader.supportMethodIdMulti": "架台",
"stuff.detail.planGridHeader.pcTypeNo": "パワーコンディショナー",
"stuff.detail.planGridHeader.management": "管理",
@@ -895,6 +897,8 @@
"estimate.detail.save.requiredCharger": "担当者は必須です.",
"estimate.detail.save.requiredObjectName": "案件名は必須です.",
"estimate.detail.save.requiredEstimateDate": "見積日は必須です.",
+ "estimate.detail.save.requiredAmount": "数量は0より大きい値を入力してください.",
+ "estimate.detail.save.requiredSalePrice": "単価は0より大きい値を入力してください.",
"estimate.detail.reset.confirmMsg": "保存した見積書情報が初期化され、図面情報が反映されます。本当に初期化しますか?",
"simulator.title.sub1": "物件番号",
"simulator.title.sub2": "作成日",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 023ccdc8..62c354a1 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -89,12 +89,14 @@
"modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
"modal.module.basic.setting.module.roof.material": "지붕재",
"modal.module.basic.setting.module.trestle.maker": "가대메이거",
+ "modal.module.basic.setting.module.rafter.margin": "서까래 간격",
"modal.module.basic.setting.module.construction.method": "공법",
"modal.module.basic.setting.module.under.roof": "지붕밑바탕",
- "modal.module.basic.setting.module.setting": "모듈 설정",
+ "modal.module.basic.setting.module.setting": "모듈 선택",
"modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
"modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
- "modal.module.basic.setting.module.cotton.classification": "면조도구분",
+ "modal.module.basic.setting.module.stuff.info": "물건정보",
+ "modal.module.basic.setting.module.surface.type": "면조도구분",
"modal.module.basic.setting.module.fitting.height": "설치높이",
"modal.module.basic.setting.module.standard.wind.speed": "기준 풍속",
"modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량",
@@ -739,7 +741,7 @@
"stuff.detail.planGridHeader.moduleModel": "모듈",
"stuff.detail.planGridHeader.capacity": "시스템용량",
"stuff.detail.planGridHeader.roofMaterialIdMulti": "지붕재",
- "stuff.detail.planGridHeader.constructSpecification": "시공방법",
+ "stuff.detail.planGridHeader.constructSpecificationMulti": "시공방법",
"stuff.detail.planGridHeader.supportMethodIdMulti": "가대",
"stuff.detail.planGridHeader.pcTypeNo": "파워컨디셔너",
"stuff.detail.planGridHeader.management": "관리",
@@ -905,6 +907,8 @@
"estimate.detail.save.requiredCharger": "담당자는 필수값 입니다.",
"estimate.detail.save.requiredObjectName": "안건명은 필수값 입니다.",
"estimate.detail.save.requiredEstimateDate": "견적일은 필수값 입니다.",
+ "estimate.detail.save.requiredAmount": "수량은 0보다 큰값을 입력해주세요.",
+ "estimate.detail.save.requiredSalePrice": "단가는 0보다 큰값을 입력해주세요.",
"estimate.detail.reset.confirmMsg": "저장된 견적서 정보가 초기화되고, 도면정보가 반영됩니다. 정말로 초기화 하시겠습니까?",
"simulator.title.sub1": "물건번호",
"simulator.title.sub2": "작성일",
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index d6f34b13..4bf432eb 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -59,6 +59,46 @@
.ag-icon-filter::before{
color: #fff;
}
+ .ag-body-vertical-scroll{
+ width: 4px !important;
+ max-width: 4px !important;
+ min-width: 4px !important;
+ .ag-body-vertical-scroll-viewport{
+ width: 4px !important;
+ max-width: 4px !important;
+ min-width: 4px !important;
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #C1CCD7;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+ }
+ }
+ .ag-body-horizontal-scroll{
+ height: 4px !important;
+ max-height: 4px !important;
+ min-height: 4px !important;
+ .ag-body-horizontal-scroll-viewport{
+ height: 4px !important;
+ max-height: 4px !important;
+ min-height: 4px !important;
+ &::-webkit-scrollbar {
+ height: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #C1CCD7;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+ }
+ }
}
.copy-ico-wrap{
display: flex;
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 2914875d..b4987651 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,2128 +4,2004 @@ $pop-bold-weight: 500;
$pop-normal-size: 12px;
$alert-color: #101010;
-@keyframes mountpop {
- from {
- opacity: 0;
- scale: 0.95;
- }
- to {
- opacity: 1;
- scale: 1;
- }
+@keyframes mountpop{
+ from{opacity: 0; scale: 0.95;}
+ to{opacity: 1; scale: 1;}
}
-@keyframes unmountpop {
- from {
- opacity: 1;
- scale: 1;
- }
- to {
- opacity: 0;
- scale: 0.95;
- }
+@keyframes unmountpop{
+ from{opacity: 1; scale: 1;}
+ to{opacity: 0; scale: 0.95;}
}
-.normal-font {
- font-size: 12px;
- font-weight: 400;
- color: #fff;
+.normal-font{
+ font-size: 12px;
+ font-weight: 400;
+ color: #fff;
}
-.bold-font {
- font-size: 12px;
- font-weight: 500;
- color: #fff;
+.bold-font{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
}
-.modal-pop-wrap {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
- border: 1px solid #000;
- border-radius: 4px;
- background-color: #272727;
- z-index: 9999999;
- &.xsm {
- width: 200px;
- }
- &.xxxm {
- width: 240px;
- }
- &.xxm {
- width: 270px;
- }
- &.xm {
- width: 300px;
- }
- &.ssm {
- width: 380px;
- }
- &.sm {
- width: 580px;
- }
- &.r {
- width: 400px;
- }
- &.lr {
- width: 440px;
- }
- &.lr-2 {
- width: 450px;
- }
- &.lrr {
- width: 480px;
- }
- &.ml {
- width: 530px;
- }
- &.l-2 {
- width: 640px;
- }
- &.lx-2 {
- width: 740px;
- }
- &.lx {
- width: 770px;
- }
- &.l {
- width: 800px;
- }
- &.mount {
- animation: mountpop 0.17s ease-in-out forwards;
- }
- &.unmount {
- animation: unmountpop 0.17s ease-in-out forwards;
- }
- &.alert {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: transparent;
- border: none;
- .modal-head {
- background-color: transparent;
- padding: 0 0 8px;
- .modal-close {
- width: 20px;
- height: 20px;
- background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
- }
+.modal-pop-wrap{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+ border: 1px solid #000;
+ border-radius: 4px;
+ background-color: #272727;
+ z-index: 9999999;
+ &.xsm{
+ width: 200px;
}
- .modal-body {
- background-color: #fff;
- padding: 22px;
- border-radius: 4px;
- border: 1px solid #101010;
- color: $alert-color;
- .alert-title {
+ &.xxxm{
+ width: 240px;
+ }
+ &.xxm{
+ width: 270px;
+ }
+ &.xm{
+ width: 300px;
+ }
+ &.ssm{
+ width: 380px;
+ }
+ &.sm{
+ width: 580px;
+ }
+ &.r{
+ width: 400px;
+ }
+ &.lr{
+ width: 440px;
+ }
+ &.lr-2{
+ width: 450px;
+ }
+ &.lrr{
+ width: 480px;
+ }
+ &.ml{
+ width: 530px;
+ }
+ &.l-2{
+ width: 640px;
+ }
+ &.lx-2{
+ width: 740px;
+ }
+ &.lx{
+ width: 770px;
+ }
+ &.l{
+ width: 800px;
+ }
+ &.mount{
+ animation: mountpop .17s ease-in-out forwards;
+ }
+ &.unmount{
+ animation: unmountpop .17s ease-in-out forwards;
+ }
+ &.alert{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: transparent;
+ border: none;
+ .modal-head{
+ background-color: transparent;
+ padding: 0 0 8px;
+ .modal-close{
+ width: 20px;
+ height: 20px;
+ background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+ }
+ }
+ .modal-body{
+ background-color: #fff;
+ padding: 22px;
+ border-radius: 4px;
+ border: 1px solid #101010;
+ color: $alert-color;
+ .alert-title{
+ font-size: 13px;
+ font-weight: 700;
+ color: $alert-color;
+ margin-bottom: 15px;
+ }
+ }
+ }
+}
+.modal-head{
+ display: flex;
+ align-items: center;
+ padding: 10px 24px;
+ background-color: #000;
+ // overflow: hidden;
+ h1.title{
font-size: 13px;
+ color: $pop-color;
font-weight: 700;
- color: $alert-color;
+ }
+ .modal-close{
+ margin-left: auto;
+ color: transparent;
+ font-size: 0;
+ width: 10px;
+ height: 10px;
+ background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+ }
+}
+.modal-body{
+ padding: 24px;
+ .modal-btn-wrap{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button{
+ flex: 1;
+ }
+ &.sub{
+ button{
+ flex: 1 1 auto;
+ padding: 0;
+ }
+ margin-bottom: 14px;
+ }
+ }
+ .modal-check-btn-wrap{
+ margin-top: 15px;
+ .check-wrap-title{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: 600;
+ &.light{
+ font-weight: $pop-normal-weight;
+ }
+ }
+ .flex-check-box{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 15px;
+ &.for2{
+ justify-content: flex-end;
+ button{
+ width: calc(50% - 5px);
+ }
+ &.btn{
+ gap: 5px;
+ button{
+ width: calc(50% - 2.5px);
+ }
+ }
+ }
+ &.for-line{
+ button{
+ flex: 1;
+ }
+ }
+ }
+ }
+ .outer-line-wrap{
+ border-top: 1px solid #3C3C3C;
+ margin-top: 10px;
+ padding-top: 15px;
margin-bottom: 15px;
- }
+ > div{
+ margin-bottom: 15px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
}
- }
-}
-.modal-head {
- display: flex;
- align-items: center;
- padding: 10px 24px;
- background-color: #000;
- // overflow: hidden;
- h1.title {
- font-size: 13px;
- color: $pop-color;
- font-weight: 700;
- }
- .modal-close {
- margin-left: auto;
- color: transparent;
- font-size: 0;
- width: 10px;
- height: 10px;
- background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
- }
-}
-.modal-body {
- padding: 24px;
- .modal-btn-wrap {
- display: flex;
- align-items: center;
- gap: 5px;
- button {
- flex: 1;
- }
- &.sub {
- button {
- flex: 1 1 auto;
- padding: 0;
- }
- margin-bottom: 14px;
- }
- }
- .modal-check-btn-wrap {
- margin-top: 15px;
- .check-wrap-title {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: 600;
- &.light {
+ .modal-guide{
+ display: block;
+ font-size: $pop-normal-size;
+ color: $alert-color;
font-weight: $pop-normal-weight;
- }
}
- .flex-check-box {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-top: 15px;
- &.for2 {
- justify-content: flex-end;
- button {
- width: calc(50% - 5px);
- }
- &.btn {
- gap: 5px;
- button {
- width: calc(50% - 2.5px);
- }
- }
- }
- &.for-line {
- button {
- flex: 1;
- }
- }
- }
- }
- .outer-line-wrap {
- border-top: 1px solid #3c3c3c;
- margin-top: 10px;
- padding-top: 15px;
- margin-bottom: 15px;
- > div {
- margin-bottom: 15px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- .modal-guide {
- display: block;
- font-size: $pop-normal-size;
- color: $alert-color;
- font-weight: $pop-normal-weight;
- }
}
-.adsorption-point {
- display: flex;
- align-items: center;
- background-color: #3a3a3a;
- border-radius: 3px;
- padding-left: 11px;
- overflow: hidden;
- transition: all 0.17s ease-in-out;
- span {
- font-size: $pop-normal-size;
- color: #898989;
- }
- i {
+.adsorption-point{
display: flex;
align-items: center;
- padding: 0 7px;
- margin-left: auto;
- height: 100%;
- font-size: 13px;
- color: #898989;
- }
- &.act {
- i {
- color: $pop-color;
- background-color: #1083e3;
+ background-color: #3A3A3A;
+ border-radius: 3px;
+ padding-left: 11px;
+ overflow: hidden;
+ transition: all 0.17s ease-in-out;
+ span{
+ font-size: $pop-normal-size;
+ color: #898989;
+ }
+ i{
+ display: flex;
+ align-items: center;
+ padding: 0 7px;
+ margin-left: auto;
+ height: 100%;
+ font-size: 13px;
+ color: #898989;
+ }
+ &.act{
+ i{
+ color: $pop-color;
+ background-color: #1083E3;
+ }
}
- }
}
// grid-option
-.grid-check-form {
- display: flex;
- align-items: center;
- gap: 15px;
- padding-bottom: 15px;
- &.border {
- border-bottom: 1px solid #424242;
- }
-}
-.grid-option-wrap {
- .grid-option-box {
+.grid-check-form{
display: flex;
align-items: center;
- background-color: transparent;
- border: 1px solid #3d3d3d;
- border-radius: 2px;
- padding: 15px 10px;
- gap: 20px;
- margin-bottom: 10px;
- .grid-input-form {
- display: flex;
- align-items: center;
- span {
- flex: none;
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- }
- .input-grid {
- width: 54px;
- input {
- width: 100%;
+ gap: 15px;
+ padding-bottom: 15px;
+ &.border{
+ border-bottom: 1px solid #424242;
+ }
+}
+.grid-option-wrap{
+ .grid-option-box{
+ display: flex;
+ align-items: center;
+ background-color: transparent;
+ border: 1px solid #3D3D3D;
+ border-radius: 2px;
+ padding: 15px 10px;
+ gap: 20px;
+ margin-bottom: 10px;
+ .grid-input-form{
+ display: flex;
+ align-items: center;
+ span{
+ flex: none;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ }
+ .input-grid{
+ width: 54px;
+ input{
+ width: 100%;
+ }
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
}
- }
}
- &:last-child {
- margin-bottom: 0;
- }
- }
}
-.select-form {
- .sort-select {
- width: 100%;
- }
+.select-form{
+ .sort-select{width: 100%;}
}
-.grid-select {
- flex: 1;
- &.no-flx {
- flex: unset;
- }
- .sort-select {
- width: 100%;
- background-color: #313131;
- min-width: auto;
- font-size: 12px;
- border: none;
- p {
- font-size: 12px;
+.grid-select{
+ flex: 1;
+ &.no-flx{
+ flex: unset;
}
- > ul {
- border: none;
+ .sort-select{
+ width: 100%;
+ background-color: #313131;
+ min-width: auto;
+ font-size: 12px;
+ border: none;
+ p{
+ font-size: 12px;
+ }
+ > ul{
+ border: none;
+ }
}
- }
- &.right {
- p {
- text-align: right;
+ &.right{
+ p{
+ text-align: right;
+ }
+ ul{
+ li{
+ justify-content: flex-end;
+ }
+ }
}
- ul {
- li {
- justify-content: flex-end;
- }
- }
- }
}
-.grid-btn-wrap {
- padding-top: 15px;
- text-align: right;
- button {
- padding: 0 10px;
- }
+.grid-btn-wrap{
+ padding-top: 15px;
+ text-align: right;
+ button{
+ padding: 0 10px;
+ }
}
// grid copy
-.grid-option-tit {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- padding-bottom: 15px;
+.grid-option-tit{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ padding-bottom: 15px;
+
}
-.grid-direction {
- display: flex;
- align-items: center;
- gap: 5px;
- flex: 1;
+.grid-direction{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ flex: 1;
}
-.direction {
- width: 22px;
- height: 22px;
- background-color: #757575;
- background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 16px 15px;
- border-radius: 50%;
- transition: all 0.15s ease-in-out;
- opacity: 0.6;
- &.down {
- transform: rotate(180deg);
- }
- &.left {
- transform: rotate(-90deg);
- }
- &.right {
- transform: rotate(90deg);
- }
- &:hover,
- &.act {
- opacity: 1;
- }
+.direction{
+ width: 22px;
+ height: 22px;
+ background-color: #757575;
+ background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px 15px;
+ border-radius: 50%;
+ transition: all .15s ease-in-out;
+ opacity: 0.6;
+ &.down{transform: rotate(180deg);}
+ &.left{transform: rotate(-90deg);}
+ &.right{transform: rotate(90deg);}
+ &:hover,
+ &.act{
+ opacity: 1;
+ }
}
// grid-move
-.move-form {
- width: 100%;
- p {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- }
-}
-.input-move-wrap {
- display: flex;
- align-items: center;
- gap: 5px;
- span {
- color: $pop-color;
- font-size: $pop-normal-size;
- }
- .input-move {
- width: 130px;
- input {
- width: 100%;
- }
- }
-}
-.direction-move-wrap {
- flex: none;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 5px;
- margin-left: auto;
-}
-
-// 배치면 초기 설정
-.placement-table {
- table {
- table-layout: fixed;
- tr {
- th {
+.move-form{
+ width: 100%;
+ p{
font-size: $pop-normal-size;
color: $pop-color;
font-weight: $pop-bold-weight;
- padding: 18px 0;
- border-bottom: 1px solid #424242;
- vertical-align: middle;
- .tip-wrap {
- display: flex;
- align-items: center;
- }
- }
- td {
- font-size: $pop-normal-size;
- color: $pop-color;
- border-bottom: 1px solid #424242;
- padding: 18px 0 18px 20px;
- vertical-align: middle;
- .flex-box {
- display: flex;
- align-items: center;
- }
- }
- &:first-child {
- td,
- th {
- padding-top: 0;
- }
- }
}
- }
- .tooltip {
- position: relative;
- display: block;
- width: 15px;
- height: 15px;
- margin-left: 5px;
- background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
- background-size: cover;
- }
- &.light {
- padding: 0;
- th,
- td {
- color: $alert-color;
- border-bottom: none;
- border-top: 1px solid #efefef;
- }
- th {
- padding: 14px 0;
- }
- tr {
- &:first-child {
- td,
- th {
- padding-top: 14px;
- }
- }
- &:last-child {
- td,
- th {
- padding-bottom: 0px;
- }
- }
- }
- }
}
-
-.pop-form-radio {
- display: flex;
- align-items: center;
- gap: 10px;
-}
-.placement-option {
- display: flex;
- align-items: center;
- gap: 20px;
-}
-.select-wrap {
- .sort-select {
- width: 100%;
- }
-}
-.flex-ment {
- display: flex;
- align-items: center;
- gap: 5px;
- span {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- }
-}
-
-.img-edit-wrap {
- flex: none;
- .img-edit-btn {
+.input-move-wrap{
display: flex;
align-items: center;
- height: 30px;
- padding: 0 10px;
- font-size: 12px;
- font-weight: 400;
- color: #101010;
- background-color: #fff;
- border-radius: 2px;
- cursor: pointer;
- transition: all 0.15s ease-in-out;
- .img-edit {
- width: 16px;
- height: 16px;
- background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
- background-size: cover;
- margin-right: 5px;
+ gap: 5px;
+ span{
+ color: $pop-color;
+ font-size: $pop-normal-size;
}
- &:hover {
- background-color: #ebebeb;
+ .input-move{
+ width: 130px;
+ input{
+ width: 100%;
+ }
}
- }
}
-.img-name-wrap {
- display: flex;
- align-items: center;
- width: 100%;
- margin-left: 10px;
- input {
- flex: 1;
- }
- .img-check {
+.direction-move-wrap{
flex: none;
- width: 18px;
- height: 18px;
- margin-left: 5px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: url(../../public/static/images/canvas/img_check_fail.svg);
- }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 5px;
+ margin-left: auto;
}
-.for-address {
- input {
- flex: 1;
- }
- .check-address {
+// 배치면 초기 설정
+.placement-table{
+ table{
+ table-layout: fixed;
+ tr{
+ th{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ padding: 18px 0;
+ border-bottom: 1px solid #424242;
+ vertical-align: middle;
+ .tip-wrap{
+ display: flex;
+ align-items: center;
+ }
+ }
+ td{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ border-bottom: 1px solid #424242;
+ padding: 18px 0 18px 20px;
+ vertical-align: middle;
+ .flex-box{
+ display: flex;
+ align-items: center;
+ }
+ }
+ &:first-child{
+ td,
+ th{
+ padding-top: 0;
+ }
+ }
+ }
+ }
+ .tooltip{
+ position: relative;
+ display: block;
+ width: 15px;
+ height: 15px;
+ margin-left: 5px;
+ background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
+ background-size: cover;
+ }
+ &.light{
+ padding: 0;
+ th,td{
+ color: $alert-color;
+ border-bottom: none;
+ border-top: 1px solid #EFEFEF;
+ }
+ th{
+ padding: 14px 0;
+ }
+ tr{
+ &:first-child{
+ td,
+ th{
+ padding-top: 14px;
+ }
+ }
+ &:last-child{
+ td,
+ th{
+ padding-bottom: 0px;
+ }
+ }
+ }
+ }
+}
+
+.pop-form-radio{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.placement-option{
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+.select-wrap{
+ .sort-select{
+ width: 100%;
+ }
+}
+.flex-ment{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ span{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ }
+
+}
+
+.img-edit-wrap{
flex: none;
- width: 18px;
- height: 18px;
- margin-left: 5px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- &.fail {
- background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+ .img-edit-btn{
+ display: flex;
+ align-items: center;
+ height: 30px;
+ padding: 0 10px;
+ font-size: 12px;
+ font-weight: 400;
+ color: #101010;
+ background-color: #fff;
+ border-radius: 2px;
+ cursor: pointer;
+ transition: all .15s ease-in-out;
+ .img-edit{
+ width: 16px;
+ height: 16px;
+ background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+ background-size: cover;
+ margin-right: 5px;
+ }
+ &:hover{
+ background-color: #ebebeb;
+ }
}
- &.success {
- background-image: url(../../public/static/images/canvas/img_check_success.svg);
+}
+.img-name-wrap{
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin-left: 10px;
+ input{
+ flex: 1;
+
+ }
+ .img-check{
+ flex: none;
+ width: 18px;
+ height: 18px;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+ }
+}
+
+.for-address{
+ input{
+ flex: 1;
+ }
+ .check-address{
+ flex: none;
+ width: 18px;
+ height: 18px;
+ margin-left: 5px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+ &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
}
- }
}
// 외벽선 그리기
-.outline-wrap {
- padding: 24px 0;
- border-top: 1px solid #424242;
-
- .outline-inner {
+.outline-wrap{
+ padding: 24px 0;
+ border-top: 1px solid #424242;
+
+ .outline-inner{
+ display: flex;
+ align-items: center;
+ margin-bottom: 14px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ .outline-form{
+ // width: 50%;
+ margin-right: 15px;
+ }
+ }
+ &:last-child{
+ border-bottom: 1px solid #424242;
+ }
+}
+.outline-form{
display: flex;
align-items: center;
- margin-bottom: 14px;
- &:last-child {
- margin-bottom: 0;
+
+ span{
+ width: 60px;
+ flex: none;
+ font-size: $pop-normal-size;
+ font-weight: $pop-bold-weight;
+ color: $pop-color;
+ margin-right: 10px;
+ &.thin{
+ width: auto;
+ font-weight: $pop-normal-weight;
+ margin-right: 0;
+ }
}
- .outline-form {
- // width: 50%;
- margin-right: 15px;
- }
- }
- &:last-child {
- border-bottom: 1px solid #424242;
- }
-}
-.outline-form {
- display: flex;
- align-items: center;
- span {
- width: 60px;
- flex: none;
- font-size: $pop-normal-size;
- font-weight: $pop-bold-weight;
- color: $pop-color;
- margin-right: 10px;
- &.thin {
- width: auto;
- font-weight: $pop-normal-weight;
- margin-right: 0;
+ .reset-btn{
+ flex: none;
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ border: 1px solid #484848;
+ border-radius: 2px;
+ margin-left: 5px;
+ background-image: url(../../public/static/images/canvas/reset_ico.svg);
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ background-position: center;
+ }
+ &:last-child{
+ margin-right: 0;
}
- }
-
- .reset-btn {
- flex: none;
- width: 30px;
- height: 30px;
- background: transparent;
- border: 1px solid #484848;
- border-radius: 2px;
- margin-left: 5px;
- background-image: url(../../public/static/images/canvas/reset_ico.svg);
- background-repeat: no-repeat;
- background-size: 12px 12px;
- background-position: center;
- }
- &:last-child {
- margin-right: 0;
- }
}
-.cul-wrap {
- display: flex;
- .outline-box {
- width: 50%;
- margin-right: 15px;
- .outline-form {
- width: 100%;
- margin-bottom: 14px;
- margin-right: 0;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- .cul-box {
+.cul-wrap{
display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
- background-color: #3d3d3d;
- border-radius: 2px;
- }
+ .outline-box{
+ width: 50%;
+ margin-right: 15px;
+ .outline-form{
+ width: 100%;
+ margin-bottom: 14px;
+ margin-right: 0;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ }
+ .cul-box{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50%;
+ background-color: #3D3D3D;
+ border-radius: 2px ;
+ }
}
// 외벽선 속성 설정
-.properties-guide {
- font-size: $pop-normal-size;
- color: #aaa;
- font-weight: $pop-normal-weight;
- margin-bottom: 14px;
+.properties-guide{
+ font-size: $pop-normal-size;
+ color: #AAA;
+ font-weight: $pop-normal-weight;
+ margin-bottom: 14px;
}
-.setting-tit {
- font-size: 13px;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- margin-bottom: 10px;
+.setting-tit{
+ font-size: 13px;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ margin-bottom: 10px;
}
-.properties-setting-wrap {
- &.outer {
- margin-top: 24px;
- }
- .setting-btn-wrap {
- display: flex;
- align-items: center;
- padding: 14px 0;
- border-top: 1px solid #424242;
- border-bottom: 1px solid #424242;
- .setting-btn {
- display: block;
- width: 100%;
- height: 40px;
- font-size: 13px;
- color: #fff;
- font-weight: 700;
- border-radius: 2px;
- transition: all 0.15s ease-in-out;
- &.green {
- background-color: #305941;
- border: 1px solid #45cd7d;
- &:hover {
- background-color: #3a6b4e;
- }
- }
- &.blue {
- background-color: #2e5360;
- border: 1px solid #3fbae6;
- &:hover {
- background-color: #365f6e;
- }
- }
+.properties-setting-wrap{
+ &.outer{
+ margin-top: 24px;
+ }
+ .setting-btn-wrap{
+ display: flex;
+ align-items: center;
+ padding: 14px 0;
+ border-top: 1px solid #424242;
+ border-bottom: 1px solid #424242;
+ .setting-btn{
+ display: block;
+ width: 100%;
+ height: 40px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 700;
+ border-radius: 2px;
+ transition: all .15s ease-in-out;
+ &.green{
+ background-color: #305941;
+ border: 1px solid #45CD7D;
+ &:hover{
+ background-color: #3a6b4e;
+ }
+ }
+ &.blue{
+ background-color: #2E5360;
+ border: 1px solid #3FBAE6;
+ &:hover{
+ background-color: #365f6e;
+ }
+ }
+ }
}
- }
}
// 지붕형상 설정
-.roof-shape-menu {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr;
- gap: 24px 10px;
- margin-bottom: 24px;
- .shape-box {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding: 13px;
- background-color: #3d3d3d;
- transition: background 0.15s ease-in-out;
- img {
- max-width: 100%;
- }
- }
- .shape-title {
- font-size: $pop-normal-size;
- font-weight: $pop-bold-weight;
- color: $pop-color;
- margin-top: 10px;
- text-align: center;
- transition: color 0.15s ease-in-out;
- }
- .shape-menu-box {
- &.act,
- &:hover {
- .shape-box {
- background-color: #008bff;
- }
- .shape-title {
- color: #008bff;
- }
- }
- }
-}
-
-.setting-box {
- padding: 14px 0;
- border-top: 1px solid #424242;
- border-bottom: 1px solid #424242;
-}
-.padding-form {
- padding-left: 23px;
-}
-.discrimination-box {
- padding: 16px 12px;
- border: 1px solid #3d3d3d;
- border-radius: 2px;
-}
-
-.modal-bottom-border-bx {
- margin-top: 24px;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
-}
-
-// 처마∙케라바 변경
-.eaves-keraba-table {
- display: table;
- border-collapse: collapse;
- .eaves-keraba-item {
- display: table-row;
- .eaves-keraba-th,
- .eaves-keraba-td {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- display: table-cell;
- vertical-align: middle;
- padding-bottom: 14px;
- }
- .eaves-keraba-td {
- padding-left: 10px;
- }
- .eaves-keraba-ico {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 5px;
- background-color: #3d3d3d;
- border: 1px solid #3d3d3d;
- border-radius: 2px;
- cursor: pointer;
- &.act {
- border: 1px solid #ed0004;
- }
- }
- &:last-child {
- .eaves-keraba-th,
- .eaves-keraba-td {
- padding-bottom: 0;
- }
- }
- }
-}
-.guide {
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: $pop-color;
- margin-bottom: 24px;
- &.sm {
- margin-bottom: 15px;
- }
- span {
- display: block;
- }
-}
-
-// 지붕면 할당
-.allocation-select-wrap {
- display: flex;
- align-items: center;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
- margin-bottom: 14px;
- span {
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- margin-right: 10px;
- }
- .allocation-edit {
- display: flex;
- align-items: center;
- height: 30px;
- padding: 0 10px;
- margin-left: 5px;
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- border: 1px solid #484848;
- background-color: #323234;
- i {
- display: block;
- width: 12px;
- height: 12px;
- margin-right: 5px;
- background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
- background-size: cover;
- }
- }
-}
-
-.block-box {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 10px;
- .flex-ment {
- gap: 10px;
- .dec {
- text-decoration: underline;
- }
- .delete {
- display: block;
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
- background-size: cover;
- }
- }
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.icon-btn-wrap {
- flex: 1;
- display: flex;
- align-items: center;
- gap: 5px;
- button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 30px;
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: $pop-color;
- border: 1px solid #646464;
- border-radius: 2px;
- padding: 0 10px;
- transition: all 0.15s ease-in-out;
- i {
- height: 15px;
- display: block;
- margin-left: 10px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- transition: all 0.15s ease-in-out;
- &.allocation01 {
- background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
- width: 15px;
- }
- &.allocation02 {
- background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
- width: 18px;
- }
- }
- &.act,
- &:hover {
- color: #101010;
- border: 1px solid #101010;
- background-color: #fff;
- i {
- &.allocation01 {
- background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
- }
- &.allocation02 {
- background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
- }
- }
- }
- }
-}
-
-// 경사설정
-.slope-wrap {
- padding-bottom: 24px;
- border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap {
- display: flex;
- gap: 10px;
- .plane-shape-wrap {
- flex: none;
- width: 73px;
- }
-}
-
-.plane-shape-menu {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 5px;
- .shape-menu-box {
- border-radius: 2px;
- width: 34px;
- height: 34px;
- background-color: #373737;
- border: 1px solid #676767;
- transition:
- background 0.15s ease-in-out,
- border 0.15s ease-in-out;
- .shape-box {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- width: 100%;
- height: 100%;
- border-radius: 2px;
- }
- &.act,
- &:hover {
- border-color: #008bff;
- background-color: #008bff;
- }
- }
-}
-
-.shape-library {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 5px;
- padding-top: 5px;
- .library-btn {
- width: 100%;
- height: 34px;
- border: 1px solid #6c6c6c;
- border-radius: 2px;
- background-color: #373737;
- background-repeat: no-repeat;
- background-position: center;
- transition: all 0.15s ease-in-out;
- &.ico01 {
- background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
- background-size: 19px 18px;
- }
- &.ico02 {
- background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
- background-size: 15px 20px;
- }
- &.ico03 {
- background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
- background-size: 19px 16px;
- }
- &:hover {
- border-color: #1083e3;
- background-color: #1083e3;
- }
- }
-}
-
-.plane-detail-wrap {
- display: flex;
- flex-direction: column;
- flex: 1;
-}
-.plane-shape-wrapper {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 10px;
- .plane-box {
- width: 100%;
- padding: 10px 18px;
- border-radius: 2px;
- background-color: #313131;
- border: 1px solid #484848;
- .plane-box-tit {
- font-size: $pop-normal-size;
- font-weight: 600;
- color: $pop-color;
- margin-bottom: 10px;
- }
- &.shape-box {
- .shape-box-inner {
- display: flex;
- gap: 15px;
- min-height: 140px;
- .shape-img {
- position: relative;
- flex: none;
- width: 150px;
- background-color: #fff;
- border-radius: 2px;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .shape-data {
- flex: 1;
- .eaves-keraba-table {
- .eaves-keraba-item {
- .eaves-keraba-th,
- .eaves-keraba-td {
- padding-bottom: 10px;
- }
- &:last-child {
- .eaves-keraba-th,
- .eaves-keraba-td {
- padding-bottom: 0px;
- }
- }
- }
- }
- }
- }
- }
- &.direction-box {
- flex: 1;
- display: flex;
- flex-direction: column;
- .plane-direction-box {
- flex: 1;
+.roof-shape-menu{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px 10px;
+ margin-bottom: 24px;
+ .shape-box{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
- }
+ padding: 13px;
+ background-color: #3D3D3D;
+ transition: background .15s ease-in-out;
+ img{
+ max-width: 100%;
+ }
}
- }
-}
-.plane-direction {
- width: 150px;
- position: relative;
- height: 120px;
- span {
- position: absolute;
- font-size: 12px;
- font-weight: 500;
- color: #b1b1b1;
- &.top {
- top: 0;
- left: 50%;
- transform: translateX(-50%);
+ .shape-title{
+ font-size: $pop-normal-size;
+ font-weight: $pop-bold-weight;
+ color: $pop-color;
+ margin-top: 10px;
+ text-align: center;
+ transition: color .15s ease-in-out;
}
- &.right {
- top: 50%;
- right: 0;
- transform: translateY(-50%);
+ .shape-menu-box{
+ &.act,
+ &:hover{
+ .shape-box{background-color: #008BFF;}
+ .shape-title{color: #008BFF;}
+ }
}
- &.bottom {
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- }
- &.left {
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- }
- }
- .plane-btn {
- position: absolute;
- width: 28px;
- height: 28px;
- background-color: #777777;
- background-image: url(../../public/static/images/canvas/plane_arr.svg);
- background-size: 12px 13px;
- background-repeat: no-repeat;
- background-position: center;
- border-radius: 50%;
- transition: all 0.15s ease-in-out;
- &.up {
- top: 22px;
- left: 50%;
- transform: translateX(-50%);
- }
- &.right {
- top: 50%;
- right: 32px;
- transform: translateY(-50%) rotate(90deg);
- }
- &.down {
- bottom: 22px;
- left: 50%;
- transform: translateX(-50%) rotate(180deg);
- }
- &.left {
- top: 50%;
- left: 32px;
- transform: translateY(-50%) rotate(270deg);
- }
- &:hover,
- &.act {
- background-color: #fff;
- background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
- }
- }
}
-.plane-tab-guide {
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: $pop-color;
- margin-top: 10px;
+.setting-box{
+ padding: 14px 0;
+ border-top: 1px solid #424242;
+ border-bottom: 1px solid #424242;
}
-.plane-shape-btn {
- padding-top: 10px;
- margin-top: auto;
- button {
- display: block;
- width: 100%;
- }
+.padding-form{
+ padding-left: 23px;
+}
+.discrimination-box{
+ padding: 16px 12px;
+ border: 1px solid #3D3D3D;
+ border-radius: 2px;
}
-// 오브젝트 배치
-.mb-box {
- margin-bottom: 24px;
+.modal-bottom-border-bx{
+ margin-top: 24px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid #424242;
}
-.object-direction-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.discrimination-tit {
- font-size: 13px;
- color: #fff;
- font-weight: 500;
-}
-
-.object-size-wrap {
- display: flex;
- min-height: 206px;
- gap: 24px;
- margin-top: 14px;
- .object-size-img {
- position: relative;
- flex: none;
- width: 200px;
- background-color: #fff;
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
+// 처마∙케라바 변경
+.eaves-keraba-table{
+ display: table;
+ border-collapse: collapse;
+ .eaves-keraba-item{
+ display: table-row;
+ .eaves-keraba-th,
+ .eaves-keraba-td{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ display: table-cell;
+ vertical-align: middle;
+ padding-bottom: 14px;
+ }
+ .eaves-keraba-td{
+ padding-left: 10px;
+ }
+ .eaves-keraba-ico{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 5px;
+ background-color: #3D3D3D;
+ border: 1px solid #3D3D3D;
+ border-radius: 2px;
+ cursor: pointer;
+ &.act{
+ border: 1px solid #ED0004;
+ }
+ }
+ &:last-child{
+ .eaves-keraba-th,
+ .eaves-keraba-td{
+ padding-bottom: 0;
+ }
+ }
+ }
+}
+.guide{
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ margin-bottom: 24px;
+ &.sm{
+ margin-bottom: 15px;
+ }
+ span{
+ display: block;
}
- }
}
-// 표시변경
-.display-change-wrap {
- margin: 24px 0;
-}
-.warning {
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: #ffafaf;
+// 지붕면 할당
+.allocation-select-wrap{
+ display: flex;
+ align-items: center;
+ padding-bottom: 14px;
+ border-bottom: 1px solid #424242;
+ margin-bottom: 14px;
+ span{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ margin-right: 10px;
+ }
+ .allocation-edit{
+ display: flex;
+ align-items: center;
+ height: 30px;
+ padding: 0 10px;
+ margin-left: 5px;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ border: 1px solid #484848;
+ background-color: #323234;
+ i{
+ display: block;
+ width: 12px;
+ height: 12px;
+ margin-right: 5px;
+ background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
}
-// 각 변 속성 변경
-.radio-grid-wrap {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 24px 15px;
+.block-box{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+ .flex-ment{
+ gap: 10px;
+ .dec{
+ text-decoration: underline;
+ }
+ .delete{
+ display: block;
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
}
-// 면 흐름 설정
-.drawing-flow-wrap {
- display: flex;
- gap: 10px;
- .discrimination-box {
+.icon-btn-wrap{
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 30px;
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ border: 1px solid #646464;
+ border-radius: 2px;
+ padding: 0 10px;
+ transition: all .15s ease-in-out;
+ i{
+ height: 15px;
+ display: block;
+ margin-left: 10px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ transition: all .15s ease-in-out;
+ &.allocation01{
+ background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+ width: 15px;
+ }
+ &.allocation02{
+ background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+ width: 18px;
+ }
+ }
+ &.act,
+ &:hover{
+ color: #101010;
+ border: 1px solid #101010;
+ background-color: #fff;
+ i{
+ &.allocation01{
+ background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+ }
+ &.allocation02{
+ background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+ }
+ }
+ }
+ }
+}
+
+// 경사설정
+.slope-wrap{
+ padding-bottom: 24px;
+ border-bottom: 1px solid #424242;
+}
+
+// 면형상 배치
+.plane-frame-wrap{
+ display: flex;
+ gap: 10px;
+ .plane-shape-wrap{
+ flex: none;
+ width: 73px;
+ }
+}
+
+.plane-shape-menu{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 5px;
+ .shape-menu-box{
+ border-radius: 2px;
+ width: 34px;
+ height: 34px;
+ background-color: #373737;
+ border: 1px solid #676767;
+ transition: background .15s ease-in-out, border .15s ease-in-out;
+ .shape-box{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 2px;
+ }
+ &.act,
+ &:hover{
+ border-color: #008BFF;
+ background-color: #008BFF;
+ }
+ }
+}
+
+.shape-library{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ padding-top: 5px;
+ .library-btn{
+ width: 100%;
+ height: 34px;
+ border: 1px solid #6C6C6C;
+ border-radius: 2px;
+ background-color: #373737;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all .15s ease-in-out;
+ &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+ &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+ &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+ &:hover{
+ border-color: #1083E3;
+ background-color: #1083E3;
+ }
+ }
+}
+
+.plane-detail-wrap{
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+.plane-shape-wrapper{
flex: 1;
display: flex;
flex-direction: column;
- .object-direction-wrap {
- flex: 1;
+ gap: 10px;
+ .plane-box{
+ width: 100%;
+ padding: 10px 18px;
+ border-radius: 2px;
+ background-color: #313131;
+ border: 1px solid #484848;
+ .plane-box-tit{
+ font-size: $pop-normal-size;
+ font-weight: 600;
+ color: $pop-color;
+ margin-bottom: 10px;
+ }
+ &.shape-box{
+ .shape-box-inner{
+ display: flex;
+ gap:15px;
+ min-height: 140px;
+ .shape-img{
+ position: relative;
+ flex: none;
+ width: 150px;
+ background-color: #fff;
+ border-radius: 2px;
+ img{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ .shape-data{
+ flex: 1;
+ .eaves-keraba-table{
+ .eaves-keraba-item{
+ .eaves-keraba-th,
+ .eaves-keraba-td{
+ padding-bottom: 10px;
+ }
+ &:last-child{
+ .eaves-keraba-th,
+ .eaves-keraba-td{
+ padding-bottom: 0px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ &.direction-box{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .plane-direction-box{
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ }
+ }
}
- &:first-child {
- flex: none;
- width: 195px;
+}
+.plane-direction{
+ width: 150px;
+ position: relative;
+ height: 120px;
+ span{
+ position: absolute;
+ font-size: 12px;
+ font-weight: 500;
+ color: #B1B1B1;
+ &.top{top: 0; left: 50%; transform: translateX(-50%);}
+ &.right{top: 50%; right: 0; transform: translateY(-50%);}
+ &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+ &.left{top: 50%; left: 0; transform: translateY(-50%);}
+ }
+ .plane-btn{
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background-color: #777777;
+ background-image: url(../../public/static/images/canvas/plane_arr.svg);
+ background-size: 12px 13px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: 50%;
+ transition: all .15s ease-in-out;
+ &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+ &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+ &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+ &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+ &:hover,
+ &.act{
+ background-color: #fff;
+ background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+ }
}
- }
}
-.compas-box {
- display: flex;
- align-items: center;
- justify-content: center;
+.plane-tab-guide{
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ margin-top: 10px;
+}
+.plane-shape-btn{
+ padding-top: 10px;
+ margin-top: auto;
+ button{
+ display: block;
+ width: 100%;
+ }
+}
+
+// 오브젝트 배치
+.mb-box{
+ margin-bottom: 24px;
+}
+
+.object-direction-wrap{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.discrimination-tit{
+ font-size: 13px;
+ color: #fff;
+ font-weight: 500;
+}
+
+.object-size-wrap{
+ display: flex;
+ min-height: 206px;
+ gap: 24px;
+ margin-top: 14px;
+ .object-size-img{
+ position: relative;
+ flex: none;
+ width: 200px;
+ background-color: #fff;
+ img{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+}
+
+// 표시변경
+.display-change-wrap{
+ margin: 24px 0;
+}
+.warning{
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap{
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap{
+ display: flex;
+ gap: 10px;
+ .discrimination-box{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .object-direction-wrap{
+ flex: 1;
+ }
+ &:first-child{
+ flex: none;
+ width: 195px;
+ }
+ }
+}
+
+.compas-box{
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.compas-box-inner {
- position: relative;
- width: 200px;
- height: 200px;
- border-radius: 50%;
-
- .circle {
- position: absolute;
- width: 12px;
- height: 12px;
- border: 1px solid #fff;
+ position: relative;
+ width: 200px;
+ height: 200px;
border-radius: 50%;
- top: 95%;
- left: 50%;
- transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
- cursor: pointer;
- z-index: 3;
- /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
- i {
- position: absolute;
- top: 12.5px;
- left: 50%;
- font-size: 11px;
- color: #8b8b8b;
- font-weight: 500;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-use-select: none;
- user-select: none;
+
+ .circle {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ border: 1px solid #fff;
+ border-radius: 50%;
+ top: 95%;
+ left: 50%;
+ transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+ cursor:pointer;
+ z-index: 3;
+ /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+ i{
+ position: absolute;
+ top: 12.5px;
+ left: 50%;
+ font-size: 11px;
+ color: #8B8B8B;
+ font-weight: 500;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-use-select: none;
+ user-select: none;
+ }
+ &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+ &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+ &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+ &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+ &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+ &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+ &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+ &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+ &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+ &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+ &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+ &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+ &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+ &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+ &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+ &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+ &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+ &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+ &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+ &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+ &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+ &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+ &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+ &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+ &.act{
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 5px;
+ height: 5px;
+ background-color: #fff;
+ border-radius: 50%;
+ }
+ i{
+ color: #fff;
+ }
+ }
}
- &:nth-child(1) {
- transform: rotate(180deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(180deg);
- }
- }
- &:nth-child(2) {
- transform: rotate(195deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(165deg);
- }
- }
- &:nth-child(3) {
- transform: rotate(210deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(150deg);
- }
- }
- &:nth-child(4) {
- transform: rotate(225deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(135deg);
- }
- }
- &:nth-child(5) {
- transform: rotate(240deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(120deg);
- }
- }
- &:nth-child(6) {
- transform: rotate(255deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(105deg);
- }
- }
- &:nth-child(7) {
- transform: rotate(270deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(90deg);
- }
- }
- &:nth-child(8) {
- transform: rotate(285deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(75deg);
- }
- }
- &:nth-child(9) {
- transform: rotate(300deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(60deg);
- }
- }
- &:nth-child(10) {
- transform: rotate(315deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(45deg);
- }
- }
- &:nth-child(11) {
- transform: rotate(330deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(30deg);
- }
- }
- &:nth-child(12) {
- transform: rotate(345deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(15deg);
- }
- }
- &:nth-child(13) {
- transform: rotate(0deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(0deg);
- }
- }
- &:nth-child(14) {
- transform: rotate(15deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-15deg);
- }
- }
- &:nth-child(15) {
- transform: rotate(30deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-30deg);
- }
- }
- &:nth-child(16) {
- transform: rotate(45deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-45deg);
- }
- }
- &:nth-child(17) {
- transform: rotate(60deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-60deg);
- }
- }
- &:nth-child(18) {
- transform: rotate(75deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-75deg);
- }
- }
- &:nth-child(19) {
- transform: rotate(90deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-90deg);
- }
- }
- &:nth-child(20) {
- transform: rotate(105deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-105deg);
- }
- }
- &:nth-child(21) {
- transform: rotate(120deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-120deg);
- }
- }
- &:nth-child(22) {
- transform: rotate(135deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-135deg);
- }
- }
- &:nth-child(23) {
- transform: rotate(150deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-150deg);
- }
- }
- &:nth-child(24) {
- transform: rotate(165deg) translate(-50%, -50%);
- i {
- transform: translateX(-50%) rotate(-165deg);
- }
- }
- &.act {
- &::after {
- content: '';
+ .compas{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 5px;
- height: 5px;
- background-color: #fff;
+ width: 148px;
+ height: 148px;
+ border: 4px solid #fff;
border-radius: 50%;
- }
- i {
- color: #fff;
- }
+ .compas-arr{
+ width: 100%;
+ height: 100%;
+ background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
+ background-size: 122px 122px;
+ }
}
- }
- .compas {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 148px;
- height: 148px;
- border: 4px solid #fff;
- border-radius: 50%;
- .compas-arr {
- width: 100%;
- height: 100%;
- background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
- background-size: 122px 122px;
- }
- }
}
-.draw-flow-wrap {
- margin: 10px 0;
+.draw-flow-wrap{
+ margin: 10px 0;
}
// 지붕모듈선택
-.roof-module-tab {
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 14px;
- .module-tab-bx {
+.roof-module-tab{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 14px;
+ .module-tab-bx{
+ flex: 1;
+ height: 34px;
+ line-height: 31px;
+ border: 1px solid #484848;
+ border-radius: 2px;
+ background-color: transparent;
+ font-size: 12px;
+ color: #AAA;
+ text-align: center;
+ cursor: default;
+ transition: all .15s ease-in-out;
+ &.act{
+ background-color: #1083E3;
+ border: 1px solid #1083E3;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+ .tab-arr{
+ display: block;
+ width: 9px;
+ height: 14px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+ transition: all .15s ease-in-out;
+ &.act{
+ background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+ }
+ }
+}
+
+.roof-module-compas{
+ margin-bottom: 24px;
+ .compas-box-inner{
+ width: 280px;
+ height: 253px;
+ .circle{
+ top: 86%;
+ &:nth-child(1),
+ &:nth-child(7),
+ &:nth-child(13),
+ &:nth-child(19){
+ &::before{
+ content: '';
+ position: absolute;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 1px;
+ height: 6px;
+ background-color: #8B8B8B;
+ }
+ }
+ i{
+ top: 32px;
+ }
+ &.act{
+ i{color: #8B8B8B;}
+ }
+ }
+ }
+}
+.center-wrap{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.module-table-flex-wrap{
+ display: flex;
+ gap: 10px;
+ .outline-form{
+ flex: 1;
+ }
+}
+
+.module-box-tab{
+ display: flex;
+ .module-btn{
+ flex: 1;
+ border-top: 1px solid #505050;
+ border-bottom: 1px solid #505050;
+ border-right: 1px solid #505050;
+ background-color: #454545;
+ color: #fff;
+ height: 30px;
+ font-size: 12px;
+ font-weight: 400;
+ transition: all .15s ease-in-out;
+ &:first-child{
+ border-left: 1px solid #505050;
+ }
+ &.act{
+ border-color: #fff;
+ background-color: #fff;
+ color: #101010;
+ }
+ }
+}
+
+.module-table-box{
flex: 1;
- height: 34px;
- line-height: 31px;
- border: 1px solid #484848;
+ background-color: #3D3D3D;
border-radius: 2px;
- background-color: transparent;
- font-size: 12px;
- color: #aaa;
- text-align: center;
- cursor: default;
- transition: all 0.15s ease-in-out;
- &.act {
- background-color: #1083e3;
- border: 1px solid #1083e3;
- color: #fff;
- font-weight: 500;
- }
- }
- .tab-arr {
- display: block;
- width: 9px;
- height: 14px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
- transition: all 0.15s ease-in-out;
- &.act {
- background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
- }
- }
-}
-
-.roof-module-compas {
- margin-bottom: 24px;
- .compas-box-inner {
- width: 280px;
- height: 253px;
- .circle {
- top: 86%;
- &:nth-child(1),
- &:nth-child(7),
- &:nth-child(13),
- &:nth-child(19) {
- &::before {
- content: '';
- position: absolute;
- top: 20px;
- left: 50%;
- transform: translateX(-50%);
- width: 1px;
- height: 6px;
- background-color: #8b8b8b;
+ .module-table-inner{
+ padding: 10px;
+ .outline-form{
+ span{
+ width: auto;
+ }
}
- }
- i {
- top: 32px;
- }
- &.act {
- i {
- color: #8b8b8b;
+ .module-table-tit{
+ padding: 10px 0;
+ font-size: 12px;
+ color: #fff;
+ border-bottom: 1px solid #4D4D4D;
+ }
+ .eaves-keraba-table{
+ width: 100%;
+ margin-top: 15px;
+ .eaves-keraba-th{
+ width: 72px;
+ }
+ .eaves-keraba-th,
+ .eaves-keraba-td{
+ padding-bottom: 5px;
+ }
+ }
+ .self-table-tit{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ padding-bottom: 15px;
+ }
+ }
+ .warning-guide{
+ padding: 20px;
+ .warning{
+ color: #FFCACA;
+ max-height: 55px;
+ overflow-y: auto;
+ padding-right: 30px;
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #D9D9D9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
}
- }
}
- }
-}
-.center-wrap {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
}
-.module-table-flex-wrap {
- display: flex;
- gap: 10px;
- .outline-form {
- flex: 1;
- }
+.module-self-table{
+ display: table;
+ border-top: 1px solid #4D4D4D;
+ border-collapse: collapse;
+ width: 100%;
+ .self-table-item{
+ display: table-row;
+ .self-item-td,
+ .self-item-th{
+ display: table-cell;
+ vertical-align: middle;
+ border-bottom: 1px solid #4D4D4D;
+ }
+ .self-item-th{
+ width: 60px;
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ }
+ .self-item-td{
+ font-size: 12px;
+ font-weight: 400;
+ color: #fff;
+ padding: 15px 20px;
+ }
+ }
}
-.module-box-tab {
- display: flex;
- .module-btn {
- flex: 1;
- border-top: 1px solid #505050;
- border-bottom: 1px solid #505050;
- border-right: 1px solid #505050;
- background-color: #454545;
- color: #fff;
- height: 30px;
- font-size: 12px;
- font-weight: 400;
- transition: all 0.15s ease-in-out;
- &:first-child {
- border-left: 1px solid #505050;
- }
- &.act {
- border-color: #fff;
- background-color: #fff;
- color: #101010;
- }
- }
-}
-
-.module-table-box {
- flex: 1;
- background-color: #3d3d3d;
- border-radius: 2px;
- .module-table-inner {
- padding: 10px;
- .outline-form {
- span {
- width: auto;
- }
- }
- .module-table-tit {
- padding: 10px 0;
- font-size: 12px;
- color: #fff;
- border-bottom: 1px solid #4d4d4d;
- }
- .eaves-keraba-table {
- width: 100%;
- margin-top: 15px;
- .eaves-keraba-th {
- width: 72px;
- }
- .eaves-keraba-th,
- .eaves-keraba-td {
- padding-bottom: 5px;
- }
- }
- .self-table-tit {
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- padding-bottom: 15px;
- }
- }
- .warning-guide {
- padding: 20px;
- .warning {
- color: #ffcaca;
- max-height: 55px;
- overflow-y: auto;
- padding-right: 30px;
- &::-webkit-scrollbar {
- width: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #d9d9d9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
- }
- }
-}
-
-.module-self-table {
- display: table;
- border-top: 1px solid #4d4d4d;
- border-collapse: collapse;
- width: 100%;
- .self-table-item {
- display: table-row;
- .self-item-td,
- .self-item-th {
- display: table-cell;
- vertical-align: middle;
- border-bottom: 1px solid #4d4d4d;
- }
- .self-item-th {
- width: 60px;
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- }
- .self-item-td {
- font-size: 12px;
- font-weight: 400;
- color: #fff;
- padding: 15px 20px;
- }
- }
-}
-
-.self-table-flx {
- display: flex;
- align-items: center;
- margin-top: 15px;
- button {
- margin-left: auto;
- }
-}
-.hexagonal-wrap {
- .hexagonal-item {
- padding: 15px 0;
- border-bottom: 1px solid #4d4d4d;
- &:first-child {
- padding-top: 0;
- }
- &:last-child {
- padding-bottom: 0;
- border: none;
- }
- .hexagonal-flx-auto {
- display: flex;
- justify-content: space-between;
- }
- .hexagonal-flx {
- display: flex;
- align-items: center;
- button {
+.self-table-flx{
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+ button{
margin-left: auto;
- }
}
- }
+}
+.hexagonal-wrap{
+ .hexagonal-item{
+ padding: 15px 0;
+ border-bottom: 1px solid #4D4D4D;
+ &:first-child{
+ padding-top: 0;
+ }
+ &:last-child{
+ padding-bottom: 0;
+ border: none;
+ }
+ .hexagonal-flx-auto{
+ display: flex;
+ justify-content: space-between;
+ }
+ .hexagonal-flx{
+ display: flex;
+ align-items: center;
+ button{
+ margin-left: auto;
+ }
+ }
+ }
}
// 회로 및 가대설정
-.circuit-check-inner {
- padding: 5px 0;
+.circuit-check-inner{
+ padding: 5px 0;
}
-.x-scroll-table {
- overflow-x: auto;
- padding-bottom: 5px;
- .roof-module-table {
- min-width: 1200px;
- }
- &::-webkit-scrollbar {
- height: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #d9d9d9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-}
-
-.circuit-right-wrap {
- display: flex;
- justify-content: flex-end;
-}
-
-.circuit-data-form {
- display: flex;
- flex-direction: column;
- gap: 5px;
- min-height: 60px;
- padding: 12px;
- border: 1px solid rgba(255, 255, 255, 0.2);
- span {
- display: inline-flex;
- align-items: center;
- .del {
- display: block;
- margin-left: 10px;
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
- background-size: cover;
+.x-scroll-table{
+ overflow-x: auto;
+ padding-bottom: 5px;
+ .roof-module-table{
+ min-width: 1200px;
+ }
+ &::-webkit-scrollbar {
+ height: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #D9D9D9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
}
- }
-}
-.circuit-table-tit {
- color: #fff;
- font-size: 12px;
- font-weight: 600;
- padding: 11px 10px;
- background-color: #474747;
- border: 1px solid #505050;
- border-bottom: none;
}
-.circuit-overflow {
- max-height: 400px;
- overflow-y: auto;
- margin-bottom: 15px;
- &::-webkit-scrollbar {
- width: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #d9d9d9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
+.circuit-right-wrap{
+ display: flex;
+ justify-content: flex-end;
}
-.circuit-table-flx-wrap {
- display: flex;
- gap: 10px;
- margin-bottom: 10px;
- .circuit-table-flx-box {
- flex: 1;
+.circuit-data-form{
display: flex;
flex-direction: column;
- .bottom-wrap {
- margin-top: auto;
+ gap: 5px;
+ min-height: 60px;
+ padding: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.20);
+ span{
+ display: inline-flex;
+ align-items: center;
+ .del{
+ display: block;
+ margin-left: 10px;
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
+ background-size: cover;
+ }
}
- .roof-module-table {
- table {
- table-layout: fixed;
- }
- }
- }
+}
+.circuit-table-tit{
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ padding: 11px 10px;
+ background-color: #474747;
+ border: 1px solid #505050;
+ border-bottom: none;
}
-.circuit-count-input {
- display: flex;
- align-items: center;
- gap: 10px;
+.circuit-overflow{
+ max-height: 400px;
+ overflow-y: auto;
+ margin-bottom: 15px;
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #D9D9D9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+.circuit-table-flx-wrap{
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ .circuit-table-flx-box{
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .bottom-wrap{
+ margin-top: auto;
+ }
+ .roof-module-table{
+ table{
+ table-layout: fixed;
+ }
+ }
+ }
+}
+
+.circuit-count-input{
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
// 모듈부가기능
-.additional-radio-wrap {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 15px 0;
- margin-bottom: 24px;
+.additional-radio-wrap{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px 0;
+ margin-bottom: 24px;
}
-.additional-wrap {
- padding: 24px 0;
- border-top: 1px solid #424242;
+.additional-wrap{
+ padding: 24px 0;
+ border-top: 1px solid #424242;
}
-.additional-color-wrap {
- display: flex;
- align-items: center;
- padding: 5px 0;
- gap: 15px;
- .additional-color-box {
+.additional-color-wrap{
display: flex;
align-items: center;
- gap: 8px;
- .additional-color {
- display: block;
- width: 16px;
- height: 16px;
- &.pink {
- border: 2px solid #ce1c9c;
- background-color: #16417d;
- }
- &.white {
- border: 2px solid #fff;
- background-color: #001027;
- }
+ padding: 5px 0;
+ gap: 15px;
+ .additional-color-box{
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ .additional-color{
+ display: block;
+ width: 16px;
+ height: 16px;
+ &.pink{
+ border: 2px solid #ce1c9c;
+ background-color: #16417D;
+ }
+ &.white{
+ border: 2px solid #FFF;
+ background-color: #001027;
+ }
+ }
}
- }
}
// color setting
-.color-setting-wrap {
- padding-bottom: 15px;
- border-bottom: 1px solid #424242;
- .color-tit {
- font-size: 13px;
- font-weight: 500;
- color: #ffffff;
- margin-bottom: 10px;
- }
- .color-picker {
- .react-colorful {
- width: 100%;
- height: auto;
- gap: 20px;
- .react-colorful__pointer {
- width: 15px;
- height: 15px;
- border: 4px solid #fff;
- }
- .react-colorful__saturation {
- border-radius: 2px;
- height: 200px;
- border-bottom: 5px solid #000;
- }
- .react-colorful__last-control {
- border-radius: 2px;
- height: 10px;
- }
- }
- .hex-color-box {
- display: flex;
- align-items: center;
- margin-top: 15px;
- .color-box-tit {
- font-size: 12px;
- color: #fff;
+.color-setting-wrap{
+ padding-bottom: 15px;
+ border-bottom: 1px solid #424242;
+ .color-tit{
+ font-size: 13px;
font-weight: 500;
- margin-right: 10px;
- }
- .color-hex-input {
- width: 150px;
- margin-right: 5px;
- input {
- width: 100%;
- }
- }
- .color-box {
- display: block;
- width: 30px;
- height: 30px;
- border-radius: 4px;
- }
+ color: #ffffff;
+ margin-bottom: 10px;
}
- .default-color-wrap {
- margin-top: 25px;
- .default-tit {
+ .color-picker{
+ .react-colorful{
+ width: 100%;
+ height: auto;
+ gap: 20px;
+ .react-colorful__pointer{
+ width: 15px;
+ height: 15px;
+ border: 4px solid #Fff;
+ }
+ .react-colorful__saturation{
+ border-radius: 2px;
+ height: 200px;
+ border-bottom: 5px solid #000;
+ }
+ .react-colorful__last-control{
+ border-radius: 2px;
+ height: 10px;
+ }
+ }
+ .hex-color-box{
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+ .color-box-tit{
+ font-size: 12px;
+ color: #fff;
+ font-weight: 500;
+ margin-right: 10px;
+ }
+ .color-hex-input{
+ width: 150px;
+ margin-right: 5px;
+ input{
+ width: 100%;
+ }
+ }
+ .color-box{
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ .default-color-wrap{
+ margin-top: 25px;
+ .default-tit{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ .color-button-wrap{
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 21px;
+ .default-color{
+ display: block;
+ width: 100%;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ }
+ }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px 5px;
+ margin-bottom: 15px;
+ .font-option-item{
+ .option-item-tit{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ }
+}
+.font-ex-wrap{
+ margin-bottom: 15px;
+ .font-ex-tit{
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
- }
- .color-button-wrap {
- display: grid;
- grid-template-columns: repeat(8, 1fr);
- gap: 21px;
- .default-color {
- display: block;
- width: 100%;
- height: 30px;
- border-radius: 4px;
- }
- }
}
- }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 15px 5px;
- margin-bottom: 15px;
- .font-option-item {
- .option-item-tit {
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- margin-bottom: 10px;
+ .font-ex-box{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ min-height: 80px;
+ background-color: #fff;
}
- }
-}
-.font-ex-wrap {
- margin-bottom: 15px;
- .font-ex-tit {
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- margin-bottom: 10px;
- }
- .font-ex-box {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- min-height: 80px;
- background-color: #fff;
- }
+
}
// 치수선 설정
-.font-btn-wrap {
- margin-bottom: 15px;
- button {
- width: 100%;
- height: 30px;
- line-height: 28px;
- }
-}
-
-.line-color-wrap {
- margin-bottom: 15px;
- .color-btn {
- display: block;
- width: 100%;
- height: 30px;
- border-radius: 2px;
- }
-}
-
-.form-box {
- width: 100%;
- background-color: #fff;
- padding: 10px 15px 20px;
- .line-form {
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- min-width: 102px;
- min-height: 40px;
- margin: 0 auto;
-
- &::before {
- content: '';
- position: absolute;
- bottom: 0px;
- left: 0;
- width: 100%;
- height: 40px;
- border-left: 1px dashed #101010;
- border-right: 1px dashed #101010;
+.font-btn-wrap{
+ margin-bottom: 15px;
+ button{
+ width: 100%;
+ height: 30px;
+ line-height: 28px;
}
- .line-font-box {
- .font {
- display: block;
- padding-bottom: 15px;
- color: #101010;
- text-align: center;
- line-height: 1;
- }
- .line {
- position: relative;
+}
+
+.line-color-wrap{
+ margin-bottom: 15px;
+ .color-btn{
display: block;
width: 100%;
- height: 1px;
- border-radius: 30px;
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- left: 1px;
- width: 9px;
- height: +9px;
- border: 1px solid;
- border-color: inherit;
- border-top: none;
- border-right: none;
- }
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%) rotate(45deg);
- right: 1px;
- width: 9px;
- height: 9px;
- border: 1px solid;
- border-color: inherit;
- border-bottom: none;
- border-left: none;
- }
- }
+ height: 30px;
+ border-radius: 2px;
+ }
+}
+
+.form-box{
+ width: 100%;
+ background-color: #fff;
+ padding: 10px 15px 20px;
+ .line-form{
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ min-width: 102px;
+ min-height: 40px;
+ margin: 0 auto;
+
+ &::before{
+ content: '';
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ border-left: 1px dashed #101010;
+ border-right: 1px dashed #101010;
+ }
+ .line-font-box{
+ .font{
+ display: block;
+ padding-bottom: 15px;
+ color: #101010;
+ text-align: center;
+ line-height: 1;
+ }
+ .line{
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 1px;
+ border-radius: 30px;
+ &::before{
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ left: 1px;
+ width: 9px;
+ height:+ 9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-top: none;
+ border-right: none;
+ }
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ right: 1px;
+ width: 9px;
+ height: 9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-bottom: none;
+ border-left: none;
+ }
+ }
+ }
}
- }
}
// 사이즈 변경
-.size-inner-warp {
- position: relative;
+.size-inner-warp{
+ position: relative;
}
-.size-check-wrap {
- position: relative;
- display: block;
- width: 132px;
- height: 132px;
- margin: 0 auto;
- .size-btn {
- position: absolute;
- width: 16px;
- height: 16px;
- border: 1px solid #fff;
- border-radius: 50%;
- &.act {
- &::after {
- content: '';
+.size-check-wrap{
+ position: relative;
+ display: block;
+ width: 132px;
+ height: 132px;
+ margin: 0 auto;
+ .size-btn{
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #fff;
+ border-radius: 50%;
+ &.act{
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ border-radius: 50%;
+ }
+ }
+ &:nth-child(1){ top: 0; left: 0; }
+ &:nth-child(2){ top: 0; right: 0; }
+ &:nth-child(3){ bottom: 0; left: 0; }
+ &:nth-child(4){ bottom: 0; right: 0; }
+ }
+ .size-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 8px;
- height: 8px;
+ width: 100px;
+ height: 100px;
background-color: #fff;
- border-radius: 50%;
- }
}
- &:nth-child(1) {
- top: 0;
- left: 0;
- }
- &:nth-child(2) {
- top: 0;
- right: 0;
- }
- &:nth-child(3) {
- bottom: 0;
- left: 0;
- }
- &:nth-child(4) {
- bottom: 0;
- right: 0;
- }
- }
- .size-box {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100px;
- height: 100px;
- background-color: #fff;
- }
}
-.size-option-top {
- margin-bottom: 15px;
+.size-option-top{
+ margin-bottom: 15px;
}
-.size-option-side {
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
+.size-option-side{
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
}
-.size-option-wrap {
- width: 88px;
- margin: 0 auto;
- .size-option {
- display: flex;
- align-items: center;
- input {
- width: 100%;
- flex: 1;
+.size-option-wrap{
+ width: 88px;
+ margin: 0 auto;
+ .size-option{
+ display: flex;
+ align-items: center;
+ input{
+ width: 100%;
+ flex: 1;
+ }
+ span{
+ flex: none;
+ }
}
- span {
- flex: none;
- }
- }
}
//이미지 크기 설정
-.range-wrap {
- display: flex;
- align-items: center;
- input {
- flex: 1;
- margin-right: 10px;
- }
- label {
- flex: none;
- text-align: right;
- width: 38px;
- font-size: 13px;
- color: #fff;
- font-weight: 500;
- }
+.range-wrap{
+ display: flex;
+ align-items: center;
+ input{
+ flex: 1;
+ margin-right: 10px;
+ }
+ label{
+ flex: none;
+ text-align: right;
+ width: 38px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 500;
+ }
}
// 이미지 불러오기
-.img-flex-box {
- display: flex;
- align-items: center;
+.img-flex-box{
+ display: flex;
+ align-items: center;
}
-.img-load-from {
- margin-top: 20px;
- .img-load-item {
- border-top: 1px solid #424242;
- padding: 18px 0;
- .d-check-radio {
- margin-bottom: 20px;
+.img-load-from{
+ margin-top: 20px;
+ .img-load-item{
+ border-top: 1px solid #424242;
+ padding: 18px 0;
+ .d-check-radio{
+ margin-bottom: 20px;
+ }
}
- }
- border-bottom: 1px solid #424242;
+ border-bottom: 1px solid #424242;
}
+
+// 지붕모듈선택 변경
+.module-table-box{
+ &.none-flex{
+ flex: none;
+ width: 230px;
+ }
+}
+.module-table-flex-wrap{
+ &.tab2{
+ margin-top: 10px;
+ gap: 15px;
+
+ }
+ .module-flex-item{
+ flex: 1;
+ .module-flex-item-tit{
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #4D4D4D;
+ }
+ .flex-item-btn-wrap{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+ margin-bottom: 24px;
+ }
+ &.non-flex{
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ flex: none;
+ width: 260px;
+ }
+ }
+}
+
+.module-table-box{
+ .module-table-inner{
+ .module-table-flex-wrap{
+ &.tab2{
+ .eaves-keraba-table{
+ .eaves-keraba-th{
+ width: 90px;
+ }
+ .eaves-keraba-td{
+ padding-left: 0;
+ padding-bottom: 5px;
+ }
+ }
+ }
+ }
+ }
+}
+.keraba-flex{
+ display: flex;
+ align-items: center;
+ .grid-select{
+ flex: none;
+ width: 110px;
+ }
+ .outline-form{
+ justify-content: flex-end;
+ }
+}
+.module-bottom{
+ padding-bottom: 15px;
+ border-bottom: 1px solid #4D4D4D;
+}
+
+.reset-word{
+ font-size: 12px;
+ color: #FFCACA;
+ font-weight: 400;
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 6c65fec7..d87bbc76 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -226,8 +226,8 @@ button{
border: 1px solid #484848;
color: #fff;
&.blue{
- background-color: #414E6C;
- border: 1px solid #414E6C;
+ background-color: #4C6FBF;
+ border: 1px solid #4C6FBF;
&:hover{
background-color: #414E6C;
border: 1px solid #414E6C;
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index de01ee36..de53d584 100644
--- a/src/styles/_submodal.scss
+++ b/src/styles/_submodal.scss
@@ -336,4 +336,36 @@
background-color: transparent;
}
}
+}
+
+// 견적 복사
+.estimate-copy-info-item{
+ margin-bottom: 20px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ .estimate-copy-info-tit{
+ font-size: 13px;
+ color: #101010;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+ .estimate-copy-info-box{
+ display: flex;
+ gap: 5px;
+ .estimate-copy-sel{
+ flex: 1 1 auto;
+ }
+ .estimate-copy-id{
+ flex: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 150px;
+ background-color: #FAFAFA;
+ border: 1px solid #EEEEEE;
+ font-size: 13px;
+ color: #999;
+ }
+ }
}
\ No newline at end of file