qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source 
# Conflicts:
#	src/store/circuitTrestleAtom.js
This commit is contained in:
김민식 2025-01-21 11:08:40 +09:00
commit 297f1f563b
16 changed files with 2007 additions and 2192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/floor-plan/modal/basic/step/Orientation.jsx
View File

@ -34,7 +34,6 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
return ( return (
<> <>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
<div className="outline-wrap"> <div className="outline-wrap">
<div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div> <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
<div className="roof-module-compas"> <div className="roof-module-compas">

50
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -6,14 +6,12 @@ import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup' import { usePopup } from '@/hooks/usePopup'
import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation' import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
import { useAxios } from '@/hooks/useAxios'
import { useMasterController } from '@/hooks/common/useMasterController' import { useMasterController } from '@/hooks/common/useMasterController'
import { get } from 'react-hook-form'
import { correntObjectNoState } from '@/store/settingAtom' import { correntObjectNoState } from '@/store/settingAtom'
import { useRecoilValue } from 'recoil' import { useRecoilValue } from 'recoil'
import { GlobalDataContext } from '@/app/GlobalDataProvider' import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { useRecoilState } from 'recoil' import { useRecoilState } from 'recoil'
import { modelState, pcsCheckState, powerConditionalState } from '@/store/circuitTrestleAtom' import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
import { POLYGON_TYPE } from '@/common/common' import { POLYGON_TYPE } from '@/common/common'
import { useSwal } from '@/hooks/useSwal' import { useSwal } from '@/hooks/useSwal'
import { canvasState } from '@/store/canvasAtom' import { canvasState } from '@/store/canvasAtom'
@ -27,30 +25,31 @@ const ALLOCATION_TYPE = {
export default function CircuitTrestleSetting({ id }) { export default function CircuitTrestleSetting({ id }) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const { closePopup } = usePopup() const { closePopup } = usePopup()
// 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
// 탭 번호 2: 회로 할당
const [tabNum, setTabNum] = useState(1)
const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
const [makers, setMakers] = useState([])
const [series, setSeries] = useState([])
const [model, setModel] = useRecoilState(modelState)
const [selectedModels, setSelectedModels] = useState(model.selectedModels)
const [models, setModels] = useState(model.models)
const [selectedMaker, setSelectedMaker] = useState(null)
const [selectedSeries, setSelectedSeries] = useState(null)
const correntObjectNo = useRecoilValue(correntObjectNoState)
const { getPcsMakerList } = useMasterController()
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
const canvas = useRecoilValue(canvasState)
const { apply } = useTrestle() const { apply } = useTrestle()
const { swalFire } = useSwal() const { swalFire } = useSwal()
const canvas = useRecoilValue(canvasState)
const [makers, setMakers] = useRecoilState(makersState)
const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
const [series, setSeries] = useRecoilState(seriesState)
const [models, setModels] = useRecoilState(modelsState)
const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
const [tabNum, setTabNum] = useState(1)
const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
const [circuitAllocationType, setCircuitAllocationType] = useState(1) const [circuitAllocationType, setCircuitAllocationType] = useState(1)
const powerConditionalSelectProps = { const powerConditionalSelectProps = {
tabNum, tabNum,
setTabNum, setTabNum,
makers,
setMakers,
selectedMaker,
setSelectedMaker,
series,
setSeries,
models,
setModels,
} }
const circuitProps = { const circuitProps = {
tabNum, tabNum,
@ -59,11 +58,6 @@ export default function CircuitTrestleSetting({ id }) {
setCircuitAllocationType, setCircuitAllocationType,
} }
useEffect(() => {
console.log('🚀 ~ CircuitTrestleSetting ~ model:', model)
setSelectedModels(model.selectedModels)
}, [model])
const onAutoAllocation = () => { const onAutoAllocation = () => {
let moduleStdQty = 0 let moduleStdQty = 0
let moduleMaxQty = 0 let moduleMaxQty = 0
@ -100,14 +94,16 @@ export default function CircuitTrestleSetting({ id }) {
} }
const onPassivityAllocation = () => { const onPassivityAllocation = () => {
console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', model) console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models)
if (selectedModels.length === 0) {
if (models.filter((m) => m.selected).length === 0) {
swalFire({ swalFire({
title: '파워 컨디셔너를 추가해 주세요.', title: '파워 컨디셔너를 추가해 주세요.',
type: 'alert', type: 'alert',
}) })
return return
} else if (pcsCheck.max) { } else if (pcsCheck.max) {
const selectedModels = models.filter((m) => m.selected)
const moduleStdQty = selectedModels.reduce((acc, model) => { const moduleStdQty = selectedModels.reduce((acc, model) => {
return acc + parseInt(model.moduleStdQty) return acc + parseInt(model.moduleStdQty)
}, 0) }, 0)

103
src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx
View File

@ -1,28 +1,18 @@
import { GlobalDataContext } from '@/app/GlobalDataProvider' import { GlobalDataContext } from '@/app/GlobalDataProvider'
import QSelectBox from '@/components/common/select/QSelectBox' import QSelectBox from '@/components/common/select/QSelectBox'
import { useMasterController } from '@/hooks/common/useMasterController' import { useMasterController } from '@/hooks/common/useMasterController'
import { useEvent } from '@/hooks/useEvent'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal' import { useSwal } from '@/hooks/useSwal'
import { makerState, modelState, pcsCheckState, seriesState } from '@/store/circuitTrestleAtom' import { pcsCheckState } from '@/store/circuitTrestleAtom'
import { globalLocaleStore } from '@/store/localeAtom' import { globalLocaleStore } from '@/store/localeAtom'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions' import { selectedModuleState } from '@/store/selectedModuleOptions'
import { useContext, useEffect, useState } from 'react' import { useContext, useEffect, useState } from 'react'
import { useRecoilState } from 'recoil' import { useRecoilState } from 'recoil'
import { useRecoilValue } from 'recoil' import { useRecoilValue } from 'recoil'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
export default function PowerConditionalSelect(props) { export default function PowerConditionalSelect(props) {
let { tabNum, setTabNum } = props let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
const [makerData, setMakerData] = useRecoilState(makerState)
const [makers, setMakers] = useState(makerData.makers)
const [selectedMaker, setSelectedMaker] = useState(makerData.selectedMaker)
const [series, setSeries] = useRecoilState(seriesState)
const [seriesList, setSeriesList] = useState(series.series)
const [selectedSeries, setSelectedSeries] = useState(series.selectedSeries)
const [model, setModel] = useRecoilState(modelState)
const [models, setModels] = useState(model.models)
const [selectedModels, setSelectedModels] = useState(model.selectedModels)
const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState) const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -69,20 +59,20 @@ export default function PowerConditionalSelect(props) {
// console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res) // console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
// // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량) // // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
// }) // })
return () => { // return () => {
setMakerData({ makers, selectedMaker }) // console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
setSeries({ series: seriesList, selectedSeries }) // setMakerData({ makers, selectedMaker })
setModel({ models, selectedModels }) // setSeries({ series: seriesList, selectedSeries })
} // setModels({ models, selectedModels })
// }
}, []) }, [])
useEffect(() => { useEffect(() => {
console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker) console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
if (selectedMaker) { if (selectedMaker) {
setSelectedModels([]) setModels(null)
setModels([])
getPcsMakerList(selectedMaker).then((res) => { getPcsMakerList(selectedMaker).then((res) => {
setSeriesList( setSeries(
res.data.map((series) => { res.data.map((series) => {
return { ...series, selected: false } return { ...series, selected: false }
}), }),
@ -92,9 +82,9 @@ export default function PowerConditionalSelect(props) {
}, [selectedMaker]) }, [selectedMaker])
useEffect(() => { useEffect(() => {
if (seriesList.filter((series) => series.selected).length === 0) return if (series.filter((s) => s.selected).length === 0) return
const pcsMkrCd = seriesList.filter((series) => series.selected)[0]?.pcsMkrCd const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd
const pcsSerList = seriesList const pcsSerList = series
.filter((series) => series.selected) .filter((series) => series.selected)
.map((series) => { .map((series) => {
return { pcsSerCd: series.pcsSerCd } return { pcsSerCd: series.pcsSerCd }
@ -106,7 +96,7 @@ export default function PowerConditionalSelect(props) {
} }
}) })
getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => { getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
if (res?.result.code === 200) { if (res?.result.code === 200 && res?.data) {
console.log('🚀 ~ useEffect ~ res:', res.data) console.log('🚀 ~ useEffect ~ res:', res.data)
setModels( setModels(
res.data.map((model) => { res.data.map((model) => {
@ -121,23 +111,15 @@ export default function PowerConditionalSelect(props) {
) )
} }
}) })
}, [seriesList]) }, [series])
useEffect(() => {
console.log('🚀 ~ useEffect ~ models:', models)
}, [models])
useEffect(() => {
console.log('🚀 ~ useEffect ~ pcsCheck:', pcsCheck)
}, [pcsCheck])
const onCheckSeries = (series) => { const onCheckSeries = (series) => {
setSeriesList((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected }))) setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
} }
const onAddSelectedModel = () => { const onAddSelectedModel = () => {
if (selectedRow === null) return if (selectedRow === null) return
if (selectedModels.length === 3) { if (models.filter((m) => m.selected).length === 3) {
swalFire({ swalFire({
title: '최대 3개까지 선택할 수 있습니다.', title: '최대 3개까지 선택할 수 있습니다.',
icon: 'warning', icon: 'warning',
@ -145,28 +127,41 @@ export default function PowerConditionalSelect(props) {
return return
} }
setSelectedModels([...selectedModels, selectedRow]) setModels(
models.map((model) => {
if (model.code === selectedRow.code) {
return {
...model,
selected: true,
}
}
return {
...model,
}
}),
)
setSelectedRow(null) setSelectedRow(null)
} }
const onRemoveSelectedModel = (model) => { const onRemoveSelectedModel = (model) => {
setSelectedModels(selectedModels.filter((m) => m.code !== model.code)) // setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
} }
useEffect(() => { // useEffect(() => {
console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels) // console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
const selectedModelsIds = selectedModels.map((model) => model.code) // const selectedModelsIds = selectedModels.map((model) => model.code)
setModels( // setModels(
models.map((model) => { // models.map((model) => {
return { // return {
...model, // ...model,
selected: selectedModelsIds.includes(model.code), // selected: selectedModelsIds.includes(model.code),
} // }
}), // }),
) // )
setModel({ ...model, selectedModels: selectedModels }) // setModel({ ...model, selectedModels: selectedModels })
}, [selectedModels]) // }, [selectedModels])
return ( return (
<> <>
<div className="outline-form mb15"> <div className="outline-form mb15">
@ -191,7 +186,7 @@ export default function PowerConditionalSelect(props) {
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="circuit-check-inner overflow"> <div className="circuit-check-inner overflow">
{seriesList?.map((series, index) => ( {series?.map((series, index) => (
<div className="d-check-box pop sel"> <div className="d-check-box pop sel">
<input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} /> <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
<label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label> <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
@ -234,7 +229,9 @@ export default function PowerConditionalSelect(props) {
</button> </button>
</div> </div>
<div className="circuit-data-form"> <div className="circuit-data-form">
{selectedModels?.map((model) => ( {models
?.filter((m) => m.selected)
?.map((model) => (
<span className="normal-font"> <span className="normal-font">
{model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button> {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
</span> </span>

1
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -33,7 +33,6 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
))} ))}
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />} {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
{type === TYPE.UP_DOWN && <Updown {...updownProps} />} {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
</div> </div>

1
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -92,7 +92,6 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
))} ))}
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{buttonAct === 1 && <OpenSpace ref={objectPlacement} />} {buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
{buttonAct === 2 && <Shadow ref={objectPlacement} />} {buttonAct === 2 && <Shadow ref={objectPlacement} />}
{buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />} {buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}

1
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -152,7 +152,6 @@ export default function WallLineSetting(props) {
</button> </button>
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('modal.cover.outline.setting')}</div>
{type === OUTER_LINE_TYPE.OUTER_LINE ? ( {type === OUTER_LINE_TYPE.OUTER_LINE ? (
<OuterLineWall props={outerLineProps} /> <OuterLineWall props={outerLineProps} />
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? ( ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (

18
src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
View File

@ -4,7 +4,7 @@ import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable' import WithDraggable from '@/components/common/draggable/WithDraggable'
import { moduleStatisticsState } from '@/store/circuitTrestleAtom' import { moduleStatisticsState } from '@/store/circuitTrestleAtom'
import { useRecoilValue } from 'recoil' import { useRecoilValue, useResetRecoilState } from 'recoil'
export default function PanelBatchStatistics() { export default function PanelBatchStatistics() {
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -24,23 +24,23 @@ export default function PanelBatchStatistics() {
<table className="penal-table"> <table className="penal-table">
<thead> <thead>
<tr> <tr>
{header.map((item) => ( {header.map((item, index) => (
<th>{item.name}</th> <th key={index}>{item.name}</th>
))} ))}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{rows.map((row) => ( {rows.map((row, index) => (
<tr> <tr key={index}>
{header.map((item) => ( {header.map((item, i) => (
// <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td> // <td>{item.prop === 'name' ? item.name : item.prop === 'powerGeneration' ? item.powerGeneration : item.amount}</td>
<td>{row[item.prop]}</td> <td key={i}>{row[item.prop]}</td>
))} ))}
</tr> </tr>
))} ))}
<tr> <tr>
{footer.map((item) => ( {footer.map((item, index) => (
<td>{item}</td> <td key={index}>{typeof item === 'number' ? item.toLocaleString('ko-KR', { maximumFractionDigits: 4 }) : item}</td>
// <td className="al-r">{item.amount}</td> // <td className="al-r">{item.amount}</td>
))} ))}
</tr> </tr>

3
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -142,7 +142,6 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
))} ))}
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{buttonAct === 1 && <OuterLineWall props={outerLineProps} />} {buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
{buttonAct === 2 && <RightAngle props={rightAngleProps} />} {buttonAct === 2 && <RightAngle props={rightAngleProps} />}
{buttonAct === 3 && <DoublePitch props={doublePitchProps} />} {buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
@ -155,7 +154,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
{getMessage('modal.cover.outline.rollback')} {getMessage('modal.cover.outline.rollback')}
</button> </button>
<button className="btn-frame modal act" onClick={handleFix}> <button className="btn-frame modal act" onClick={handleFix}>
{getMessage('modal.cover.outline.fix')} {getMessage('modal.placement.surface.drawing.fix')}
</button> </button>
</div> </div>
</div> </div>

1
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -108,7 +108,6 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
))} ))}
</div> </div>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">{getMessage('setting')}</div>
{shapeNum === 1 && <Ridge {...ridgeProps} />} {shapeNum === 1 && <Ridge {...ridgeProps} />}
{(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />} {(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
{shapeNum === 4 && <Side {...sideProps} />} {shapeNum === 4 && <Side {...sideProps} />}

2
src/hooks/common/useMasterController.js
View File

@ -147,7 +147,7 @@ export function useMasterController() {
], ],
} }
return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: test }).then((res) => { return await post({ url: '/api/v1/master/getPcsSeriesItemList', data: params }).then((res) => {
return res return res
}) })
} }

9
src/hooks/module/useModuleBasicSetting.js
View File

@ -1,4 +1,4 @@
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom' import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util' import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom' import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
@ -32,7 +32,7 @@ export function useModuleBasicSetting() {
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState) const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
const checkedModule = useRecoilValue(checkedModuleState) const checkedModule = useRecoilValue(checkedModuleState)
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState) const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
const [moduleStatistics, setModuleStatistics] = useRecoilState(moduleStatisticsState) const setModuleStatistics = useSetRecoilState(moduleStatisticsState)
useEffect(() => { useEffect(() => {
// console.log('basicSetting', basicSetting) // console.log('basicSetting', basicSetting)
@ -485,6 +485,7 @@ export function useModuleBasicSetting() {
let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] }) let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] })
canvas?.add(manualModule) canvas?.add(manualModule)
manualDrawModules.push(manualModule) manualDrawModules.push(manualModule)
getModuleStatistics()
} else { } else {
swalFire({ text: getMessage('module.place.overlab') }) swalFire({ text: getMessage('module.place.overlab') })
} }
@ -1843,6 +1844,8 @@ export function useModuleBasicSetting() {
} }
}) })
} }
getModuleStatistics()
} }
const autoFlatroofModuleSetup = (placementFlatRef) => { const autoFlatroofModuleSetup = (placementFlatRef) => {
@ -2233,7 +2236,7 @@ export function useModuleBasicSetting() {
}) })
moduleSetupSurface.set({ modules: setupedModules }) moduleSetupSurface.set({ modules: setupedModules })
getModuleStatistics()
// console.log('moduleSetupSurface', moduleSetupSurface) // console.log('moduleSetupSurface', moduleSetupSurface)
// console.log('setupedModules', setupedModules) // console.log('setupedModules', setupedModules)

24
src/store/circuitTrestleAtom.js
View File

@ -1,20 +1,30 @@
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { atom } from 'recoil' import { atom } from 'recoil'
export const makerState = atom({ export const makersState = atom({
key: 'makerState', key: 'makersState',
default: { makers: [], selectedMaker: null }, default: [],
dangerouslyAllowMutability: true, dangerouslyAllowMutability: true,
}) })
export const selectedMakerState = atom({
key: 'selectedMakerState',
default: null,
})
export const seriesState = atom({ export const seriesState = atom({
key: 'seriesState', key: 'seriesState',
default: { series: [], selectedSeries: [] }, default: [],
}) })
export const modelState = atom({ export const selectedSeriesState = atom({
key: 'selectedSeriesState',
default: null,
})
export const modelsState = atom({
key: 'modelState', key: 'modelState',
default: { models: [], selectedModels: [] }, default: [],
}) })
export const pcsCheckState = atom({ export const pcsCheckState = atom({
@ -30,6 +40,6 @@ export const moduleStatisticsState = atom({
{ name: `발전량(kW)`, prop: 'amount' }, { name: `발전량(kW)`, prop: 'amount' },
], ],
rows: [], rows: [],
footer: ['합계', 0], footer: ['합계', '0'],
}, },
}) })

5
src/styles/_canvasside.scss
View File

@ -37,7 +37,7 @@
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
padding: 20px; padding: 20px;
.penal-table{ .penal-table{
table-layout: fixed; table-layout: auto;
border-collapse: collapse; border-collapse: collapse;
thead{ thead{
th{ th{
@ -45,8 +45,11 @@
background-color:rgba(255, 255, 255, 0.05); background-color:rgba(255, 255, 255, 0.05);
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
min-width: 140px;
padding: 0 15px;
color: #fff; color: #fff;
border: 1px solid #505050; border: 1px solid #505050;
white-space: nowrap;
} }
} }
tbody{ tbody{

435
src/styles/_modal.scss
View File

@ -5,24 +5,12 @@ $pop-normal-size: 12px;
$alert-color: #101010; $alert-color: #101010;
@keyframes mountpop{ @keyframes mountpop{
from { from{opacity: 0; scale: 0.95;}
opacity: 0; to{opacity: 1; scale: 1;}
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
} }
@keyframes unmountpop{ @keyframes unmountpop{
from { from{opacity: 1; scale: 1;}
opacity: 1; to{opacity: 0; scale: 0.95;}
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
} }
.normal-font{ .normal-font{
@ -97,10 +85,10 @@ $alert-color: #101010;
width: 900px; width: 900px;
} }
&.mount{ &.mount{
animation: mountpop 0.17s ease-in-out forwards; animation: mountpop .17s ease-in-out forwards;
} }
&.unmount{ &.unmount{
animation: unmountpop 0.17s ease-in-out forwards; animation: unmountpop .17s ease-in-out forwards;
} }
&.alert{ &.alert{
position: absolute; position: absolute;
@ -206,7 +194,7 @@ $alert-color: #101010;
} }
} }
.outer-line-wrap{ .outer-line-wrap{
border-top: 1px solid #3c3c3c; border-top: 1px solid #3C3C3C;
margin-top: 10px; margin-top: 10px;
padding-top: 15px; padding-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -235,7 +223,7 @@ $alert-color: #101010;
.adsorption-point{ .adsorption-point{
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #3a3a3a; background-color: #3A3A3A;
border-radius: 3px; border-radius: 3px;
padding-left: 11px; padding-left: 11px;
overflow: hidden; overflow: hidden;
@ -256,7 +244,7 @@ $alert-color: #101010;
&.act{ &.act{
i{ i{
color: $pop-color; color: $pop-color;
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -279,7 +267,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -290,7 +278,7 @@ $alert-color: #101010;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
padding: 15px 10px; padding: 15px 10px;
gap: 20px; gap: 20px;
@ -320,9 +308,7 @@ $alert-color: #101010;
} }
} }
.select-form{ .select-form{
.sort-select { .sort-select{width: 100%;}
width: 100%;
}
} }
.grid-select{ .grid-select{
flex: 1; flex: 1;
@ -367,6 +353,7 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
padding-bottom: 15px; padding-bottom: 15px;
} }
.grid-direction{ .grid-direction{
display: flex; display: flex;
@ -383,17 +370,11 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: 16px 15px; background-size: 16px 15px;
border-radius: 50%; border-radius: 50%;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
opacity: 0.6; opacity: 0.6;
&.down { &.down{transform: rotate(180deg);}
transform: rotate(180deg); &.left{transform: rotate(-90deg);}
} &.right{transform: rotate(90deg);}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover, &:hover,
&.act{ &.act{
opacity: 1; opacity: 1;
@ -479,11 +460,10 @@ $alert-color: #101010;
} }
&.light{ &.light{
padding: 0; padding: 0;
th, th,td{
td {
color: $alert-color; color: $alert-color;
border-bottom: none; border-bottom: none;
border-top: 1px solid #efefef; border-top: 1px solid #EFEFEF;
} }
th{ th{
padding: 14px 0; padding: 14px 0;
@ -537,6 +517,7 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
} }
} }
.img-edit-wrap{ .img-edit-wrap{
@ -552,7 +533,7 @@ $alert-color: #101010;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
.img-edit{ .img-edit{
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -572,6 +553,7 @@ $alert-color: #101010;
margin-left: 10px; margin-left: 10px;
input{ input{
flex: 1; flex: 1;
} }
.img-check{ .img-check{
flex: none; flex: none;
@ -597,12 +579,8 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.fail { &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
background-image: url(../../public/static/images/canvas/img_check_fail.svg); &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
}
&.success {
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
} }
} }
@ -682,7 +660,7 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 50%; width: 50%;
background-color: #3d3d3d; background-color: #3D3D3D;
border-radius: 2px ; border-radius: 2px ;
} }
} }
@ -690,7 +668,7 @@ $alert-color: #101010;
// 외벽선 속성 설정 // 외벽선 속성 설정
.properties-guide{ .properties-guide{
font-size: $pop-normal-size; font-size: $pop-normal-size;
color: #aaa; color: #AAA;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -719,17 +697,17 @@ $alert-color: #101010;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border-radius: 2px; border-radius: 2px;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.green{ &.green{
background-color: #305941; background-color: #305941;
border: 1px solid #45cd7d; border: 1px solid #45CD7D;
&:hover{ &:hover{
background-color: #3a6b4e; background-color: #3a6b4e;
} }
} }
&.blue{ &.blue{
background-color: #2e5360; background-color: #2E5360;
border: 1px solid #3fbae6; border: 1px solid #3FBAE6;
&:hover{ &:hover{
background-color: #365f6e; background-color: #365f6e;
} }
@ -751,8 +729,8 @@ $alert-color: #101010;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 13px; padding: 13px;
background-color: #3d3d3d; background-color: #3D3D3D;
transition: background 0.15s ease-in-out; transition: background .15s ease-in-out;
img{ img{
max-width: 100%; max-width: 100%;
} }
@ -763,17 +741,13 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
transition: color 0.15s ease-in-out; transition: color .15s ease-in-out;
} }
.shape-menu-box{ .shape-menu-box{
&.act, &.act,
&:hover{ &:hover{
.shape-box { .shape-box{background-color: #008BFF;}
background-color: #008bff; .shape-title{color: #008BFF;}
}
.shape-title {
color: #008bff;
}
} }
} }
} }
@ -788,7 +762,7 @@ $alert-color: #101010;
} }
.discrimination-box{ .discrimination-box{
padding: 16px 12px; padding: 16px 12px;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
} }
@ -821,12 +795,12 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
background-color: #3d3d3d; background-color: #3D3D3D;
border: 1px solid #3d3d3d; border: 1px solid #3D3D3D;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
&.act{ &.act{
border: 1px solid #ed0004; border: 1px solid #ED0004;
} }
} }
&:last-child{ &:last-child{
@ -925,7 +899,7 @@ $alert-color: #101010;
border: 1px solid #646464; border: 1px solid #646464;
border-radius: 2px; border-radius: 2px;
padding: 0 10px; padding: 0 10px;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
i{ i{
height: 15px; height: 15px;
display: block; display: block;
@ -933,7 +907,7 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.allocation01{ &.allocation01{
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px; width: 15px;
@ -986,9 +960,7 @@ $alert-color: #101010;
height: 34px; height: 34px;
background-color: #373737; background-color: #373737;
border: 1px solid #676767; border: 1px solid #676767;
transition: transition: background .15s ease-in-out, border .15s ease-in-out;
background 0.15s ease-in-out,
border 0.15s ease-in-out;
.shape-box{ .shape-box{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1000,8 +972,8 @@ $alert-color: #101010;
} }
&.act, &.act,
&:hover{ &:hover{
border-color: #008bff; border-color: #008BFF;
background-color: #008bff; background-color: #008BFF;
} }
} }
} }
@ -1016,27 +988,18 @@ $alert-color: #101010;
.library-btn{ .library-btn{
width: 100%; width: 100%;
height: 34px; height: 34px;
border: 1px solid #6c6c6c; border: 1px solid #6C6C6C;
border-radius: 2px; border-radius: 2px;
background-color: #373737; background-color: #373737;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.ico01 { &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
background-image: url(../../public/static/images/canvas/shape_labrary01.svg); &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
background-size: 19px 18px; &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
}
&.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{ &:hover{
border-color: #1083e3; border-color: #1083E3;
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -1122,27 +1085,11 @@ $alert-color: #101010;
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #b1b1b1; color: #B1B1B1;
&.top { &.top{top: 0; left: 50%; transform: translateX(-50%);}
top: 0; &.right{top: 50%; right: 0; transform: translateY(-50%);}
left: 50%; &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
transform: translateX(-50%); &.left{top: 50%; left: 0; transform: translateY(-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{ .plane-btn{
position: absolute; position: absolute;
@ -1154,27 +1101,11 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 50%; border-radius: 50%;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.up { &.up{top: 22px; left: 50%; transform: translateX(-50%);}
top: 22px; &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
left: 50%; &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
transform: translateX(-50%); &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
}
&.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, &:hover,
&.act{ &.act{
background-color: #fff; background-color: #fff;
@ -1240,7 +1171,7 @@ $alert-color: #101010;
.warning{ .warning{
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
color: #ffafaf; color: #FFAFAF;
} }
// 각 변 속성 변경 // 각 변 속성 변경
@ -1296,157 +1227,37 @@ $alert-color: #101010;
top: 12.5px; top: 12.5px;
left: 50%; left: 50%;
font-size: 11px; font-size: 11px;
color: #8b8b8b; color: #8B8B8B;
font-weight: 500; font-weight: 500;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-use-select: none; -ms-use-select: none;
user-select: none; user-select: none;
} }
&:nth-child(1) { &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
transform: rotate(180deg) translate(-50%, -50%); &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
i { &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
transform: translateX(-50%) rotate(180deg); &: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(2) { &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
transform: rotate(195deg) translate(-50%, -50%); &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
i { &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
transform: translateX(-50%) rotate(165deg); &: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(3) { &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
transform: rotate(210deg) translate(-50%, -50%); &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
i { &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
transform: translateX(-50%) rotate(150deg); &: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(4) { &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
transform: rotate(225deg) translate(-50%, -50%); &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
i { &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
transform: translateX(-50%) rotate(135deg); &: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);}}
&: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{ &.act{
&::after{ &::after{
content: ''; content: '';
@ -1500,13 +1311,13 @@ $alert-color: #101010;
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
color: #aaa; color: #AAA;
text-align: center; text-align: center;
cursor: default; cursor: default;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.act{ &.act{
background-color: #1083e3; background-color: #1083E3;
border: 1px solid #1083e3; border: 1px solid #1083E3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -1519,7 +1330,7 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg); background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&.act{ &.act{
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
} }
@ -1552,9 +1363,7 @@ $alert-color: #101010;
top: 22px; top: 22px;
} }
&.act{ &.act{
i { i{color: #8B8B8B;}
color: #8b8b8b;
}
} }
} }
} }
@ -1586,7 +1395,7 @@ $alert-color: #101010;
height: 30px; height: 30px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
&:first-child{ &:first-child{
border-left: 1px solid #505050; border-left: 1px solid #505050;
} }
@ -1600,7 +1409,7 @@ $alert-color: #101010;
.module-table-box{ .module-table-box{
flex: 1; flex: 1;
background-color: #3d3d3d; background-color: #3D3D3D;
border-radius: 2px; border-radius: 2px;
.module-table-inner{ .module-table-inner{
padding: 10px; padding: 10px;
@ -1613,7 +1422,7 @@ $alert-color: #101010;
padding: 10px 0; padding: 10px 0;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.eaves-keraba-table{ .eaves-keraba-table{
width: 100%; width: 100%;
@ -1636,7 +1445,7 @@ $alert-color: #101010;
.warning-guide{ .warning-guide{
padding: 20px; padding: 20px;
.warning{ .warning{
color: #ffcaca; color: #FFCACA;
max-height: 55px; max-height: 55px;
overflow-y: auto; overflow-y: auto;
padding-right: 30px; padding-right: 30px;
@ -1645,7 +1454,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1656,7 +1465,7 @@ $alert-color: #101010;
.module-self-table{ .module-self-table{
display: table; display: table;
border-top: 1px solid #4d4d4d; border-top: 1px solid #4D4D4D;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
.self-table-item{ .self-table-item{
@ -1665,7 +1474,7 @@ $alert-color: #101010;
.self-item-th{ .self-item-th{
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.self-item-th{ .self-item-th{
width: 60px; width: 60px;
@ -1693,7 +1502,7 @@ $alert-color: #101010;
.hexagonal-wrap{ .hexagonal-wrap{
.hexagonal-item{ .hexagonal-item{
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
&:first-child{ &:first-child{
padding-top: 0; padding-top: 0;
} }
@ -1727,7 +1536,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1776,7 +1585,7 @@ $alert-color: #101010;
gap: 5px; gap: 5px;
min-height: 60px; min-height: 60px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.20);
span{ span{
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1808,7 +1617,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1873,10 +1682,10 @@ $alert-color: #101010;
height: 16px; height: 16px;
&.pink{ &.pink{
border: 2px solid #ce1c9c; border: 2px solid #ce1c9c;
background-color: #16417d; background-color: #16417D;
} }
&.white{ &.white{
border: 2px solid #fff; border: 2px solid #FFF;
background-color: #001027; background-color: #001027;
} }
} }
@ -1901,7 +1710,7 @@ $alert-color: #101010;
.react-colorful__pointer{ .react-colorful__pointer{
width: 15px; width: 15px;
height: 15px; height: 15px;
border: 4px solid #fff; border: 4px solid #Fff;
} }
.react-colorful__saturation{ .react-colorful__saturation{
border-radius: 2px; border-radius: 2px;
@ -1991,6 +1800,7 @@ $alert-color: #101010;
min-height: 80px; min-height: 80px;
background-color: #fff; background-color: #fff;
} }
} }
// 치수선 설정 // 치수선 설정
@ -2110,22 +1920,10 @@ $alert-color: #101010;
border-radius: 50%; border-radius: 50%;
} }
} }
&:nth-child(1) { &:nth-child(1){ top: 0; left: 0; }
top: 0; &:nth-child(2){ top: 0; right: 0; }
left: 0; &:nth-child(3){ bottom: 0; left: 0; }
} &:nth-child(4){ bottom: 0; right: 0; }
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
} }
.size-box{ .size-box{
position: absolute; position: absolute;
@ -2218,13 +2016,13 @@ $alert-color: #101010;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -2234,6 +2032,7 @@ $alert-color: #101010;
&.tab2{ &.tab2{
margin-top: 10px; margin-top: 10px;
gap: 15px; gap: 15px;
} }
.module-flex-item{ .module-flex-item{
flex: 1; flex: 1;
@ -2242,7 +2041,7 @@ $alert-color: #101010;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #4d4d4d; border-bottom: 1px solid #4D4D4D;
} }
.flex-item-btn-wrap{ .flex-item-btn-wrap{
display: grid; display: grid;
@ -2299,7 +2098,7 @@ $alert-color: #101010;
} }
.reset-word{ .reset-word{
font-size: 12px; font-size: 12px;
color: #ffcaca; color: #FFCACA;
font-weight: 400; font-weight: 400;
margin-top: 10px; margin-top: 10px;
} }

9
src/styles/_reset.scss
View File

@ -414,6 +414,15 @@ button{
transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg);
} }
} }
&.disabled{
cursor: default;
p{
color: #aaa;
}
&::after{
opacity: 0.7;
}
}
} }
.select-light{ .select-light{

6
src/styles/spinner.scss
View File

@ -1,10 +1,14 @@
.spinner-wrap{ .spinner-wrap{
position: fixed;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #fff; background-color: rgba($color: #101010, $alpha: 0.2);
z-index: 2000000;
.loader { .loader {
font-size: 10px; font-size: 10px;
width: 1.2em; width: 1.2em;