diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/withDraggable.jsx similarity index 100% rename from src/components/common/draggable/WithDraggable.jsx rename to src/components/common/draggable/withDraggable.jsx diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index 54780ab5..eb5a834e 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -8,6 +8,8 @@ import { onlyNumberInputChange } from '@/util/input-utils' import { fabric } from 'fabric' import { gridColorState } from '@/store/gridAtom' import { settingModalGridOptionsState } from '@/store/settingAtom' +import { useAxios } from '@/hooks/useAxios' +import { useSwal } from '@/hooks/useSwal' const TYPE = { DOT: 'DOT', @@ -16,6 +18,7 @@ const TYPE = { export default function DotLineGrid(props) { // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state + const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [close, setClose] = useState(false) const { setShowDotLineGridModal } = props const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) @@ -27,6 +30,8 @@ export default function DotLineGrid(props) { const interval = useRecoilValue(dotLineIntervalSelector) const { getMessage } = useMessage() + const { get, post } = useAxios() + const { swalFire } = useSwal() useEffect(() => { return () => { @@ -46,6 +51,12 @@ export default function DotLineGrid(props) { ] const [selectOption, setSelectOption] = useState(SelectOption[0]) + // 데이터를 최초 한 번만 조회 + useEffect(() => { + console.log('DotLineGrid useEffect 실행') + fetchGridSettings() + }, [objectNo]) + const HandleClickClose = () => { // setClose(true) // setTimeout(() => { @@ -64,118 +75,177 @@ export default function DotLineGrid(props) { }) } - const handleSave = () => { - // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거 - canvas - ?.getObjects() - .filter((obj) => obj.name === 'lineGrid') - .forEach((obj) => canvas?.remove(obj)) - canvas - ?.getObjects() - .filter((obj) => obj.name === 'dotGrid') - .forEach((obj) => canvas?.remove(obj)) + // Canvas Grid Setting 조회 및 초기화 + const fetchGridSettings = async () => { + try { + const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` }) - const horizontalInterval = interval.horizontalInterval - const verticalInterval = interval.verticalInterval - - if (dotLineGridSetting.DOT) { - const circle = new fabric.Circle({ - radius: 2, - fill: 'red', - strokeWidth: 0.7, - originX: 'center', - originY: 'center', - selectable: false, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - }) - - const patternSourceCanvas = new fabric.StaticCanvas(null, { - width: horizontalInterval, - height: verticalInterval, - }) - - patternSourceCanvas.add(circle) - - circle.set({ - left: patternSourceCanvas.width / 2, - top: patternSourceCanvas.height / 2, - }) - - patternSourceCanvas.renderAll() - - const pattern = new fabric.Pattern({ - source: patternSourceCanvas.getElement(), - repeat: 'repeat', - }) - - const backgroundPolygon = new fabric.Polygon( - [ - { x: 0, y: 0 }, - { x: canvas.width, y: 0 }, - { x: canvas.width, y: canvas.height }, - { x: 0, y: canvas.height }, - ], - { - fill: pattern, - selectable: false, - name: 'dotGrid', + const patternData = { + INTERVAL: { + type: res.gridType, + horizontalInterval: res.gridHorizon, + verticalInterval: res.gridVertical, + ratioInterval: res.gridRatio, }, - ) + dimension: res.gridDimen, + DOT: res.dotGridDisplay, + LINE: res.lineGridDisplay, + } - canvas.add(backgroundPolygon) - backgroundPolygon.sendToBack() - canvas.renderAll() + const matchedOption = SelectOption.find((option) => option.value == res.gridDimen) + + // dimension 값에 맞는 옵션을 선택 + setSelectOption(matchedOption) + + // 서버에서 받은 데이터로 상태 업데이트 + setDotLineGridSettingState(patternData) + } catch (error) { + console.error('Data fetching error:', error) } + } - if (dotLineGridSetting.LINE) { - for (let i = 0; i < canvas.height / verticalInterval + 1; i++) { - const horizontalLine = new fabric.Line( - [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2], - { - stroke: gridColor, - strokeWidth: 1, - selectable: true, + const handleSave = async () => { + try { + const patternData = { + objectNo, + dotGridDisplay: dotLineGridSetting.DOT, + lineGridDisplay: dotLineGridSetting.LINE, + gridType: dotLineGridSetting.INTERVAL.type, + gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval, + gridVertical: dotLineGridSetting.INTERVAL.verticalInterval, + gridRatio: dotLineGridSetting.INTERVAL.ratioInterval, + gridDimen: dotLineGridSetting.INTERVAL.dimension, + } + + // HTTP POST 요청 보내기 + await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => { + swalFire({ text: getMessage(res.returnMessage) }) + + // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거 + canvas + ?.getObjects() + .filter((obj) => obj.name === 'lineGrid') + .forEach((obj) => canvas?.remove(obj)) + canvas + ?.getObjects() + .filter((obj) => obj.name === 'dotGrid') + .forEach((obj) => canvas?.remove(obj)) + + //const horizontalInterval = interval.horizontalInterval + //const verticalInterval = interval.verticalInterval + + if (patternData.dotGridDisplay) { + const circle = new fabric.Circle({ + radius: 2, + fill: 'red', + strokeWidth: 0.7, + originX: 'center', + originY: 'center', + selectable: false, lockMovementX: true, lockMovementY: true, lockRotation: true, lockScalingX: true, lockScalingY: true, - name: 'lineGrid', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'horizontal', - }, - ) - canvas.add(horizontalLine) - } + }) - for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) { - const verticalLine = new fabric.Line( - [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height], - { - stroke: gridColor, - strokeWidth: 1, - selectable: true, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'lineGrid', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'vertical', - }, - ) - canvas.add(verticalLine) - } + const patternSourceCanvas = new fabric.StaticCanvas(null, { + width: patternData.gridHorizon, + height: patternData.gridVertical, + }) + + patternSourceCanvas.add(circle) + + circle.set({ + left: patternSourceCanvas.width / 2, + top: patternSourceCanvas.height / 2, + }) + + patternSourceCanvas.renderAll() + + const pattern = new fabric.Pattern({ + source: patternSourceCanvas.getElement(), + repeat: 'repeat', + }) + + const backgroundPolygon = new fabric.Polygon( + [ + { x: 0, y: 0 }, + { x: canvas.width, y: 0 }, + { x: canvas.width, y: canvas.height }, + { x: 0, y: canvas.height }, + ], + { + fill: pattern, + selectable: false, + name: 'dotGrid', + }, + ) + + canvas.add(backgroundPolygon) + backgroundPolygon.sendToBack() + canvas.renderAll() + } + + if (patternData.lineGridDisplay) { + for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) { + const horizontalLine = new fabric.Line( + [ + 0, + i * patternData.gridVertical - patternData.gridVertical / 2, + canvas.width, + i * patternData.gridVertical - patternData.gridVertical / 2, + ], + { + stroke: gridColor, + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: 'lineGrid', + strokeDashArray: [5, 2], + opacity: 0.3, + direction: 'horizontal', + }, + ) + canvas.add(horizontalLine) + } + + for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) { + const verticalLine = new fabric.Line( + [ + i * patternData.gridHorizon - patternData.gridHorizon / 2, + 0, + i * patternData.gridHorizon - patternData.gridHorizon / 2, + canvas.height, + ], + { + stroke: gridColor, + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: 'lineGrid', + strokeDashArray: [5, 2], + opacity: 0.3, + direction: 'vertical', + }, + ) + canvas.add(verticalLine) + } + } + + canvas.renderAll() + }) + } catch (error) { + swalFire({ text: getMessage(res.returnMessage), icon: 'error' }) } - - canvas.renderAll() } const handleRadioChange = (e) => { diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index ac8f08d6..c4e75ea4 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -116,11 +116,21 @@ export default function FirstOption() { } } - const onClickDimension = async (item) => { - const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { - option.selected = option.id === item.id - return option - }) + const onClickOnlyOne = async (item) => { + //화면 표시 + if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') { + const options2 = settingModalFirstOptions?.option2.map((option2) => { + option2.selected = option2.id === item.id + return option2 + }) + + //치수 표시 + } else { + const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { + option.selected = option.id === item.id + return option + }) + } setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) @@ -205,7 +215,7 @@ export default function FirstOption() {
{settingModalFirstOptions && settingModalFirstOptions.dimensionDisplay.map((item) => ( - @@ -217,7 +227,7 @@ export default function FirstOption() {
{settingModalFirstOptions && settingModalFirstOptions.option2.map((item) => ( - diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index d9301afc..39af3a10 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -18,6 +18,7 @@ export default function GridOption(props) { const [color, setColor] = useColor(gridColor) useEffect(() => { + console.log('GridOption useEffect 실행') setGridColor(color.hex) }, [color]) diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx index bfda6d62..4fd3b49e 100644 --- a/src/components/management/Stuff.jsx +++ b/src/components/management/Stuff.jsx @@ -12,20 +12,24 @@ import { queryStringFormatter, isEmptyArray } from '@/util/common-utils' import dayjs from 'dayjs' import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인 dayjs.extend(isLeapYear) -import { globalLocaleStore } from '@/store/localeAtom' +import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' +import KO from '@/locales/ko.json' +import JA from '@/locales/ja.json' +import '@/styles/grid.scss' export default function Stuff() { + const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) const stuffSearchParams = useRecoilValue(stuffSearchState) const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState) const { getMessage } = useMessage() const [curPage, setCurPage] = useState(1) //현재 페이지 번호 const [defaultSize, setDefaultSize] = useState(100) //페이지 당 게시물 수 + const [gridCount, setGridCount] = useState(0) //총 갯수 const [defaultSortType, setDefaultSortType] = useState('R') const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) const gridRef = useRef() - const [gridCount, setGridCount] = useState(0) const [selectedRowData, setSelectedRowData] = useState([]) const [selectedRowDataCount, setSelectedRowDataCount] = useState(0) @@ -273,14 +277,12 @@ export default function Stuff() { // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}` const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}` - await get({ url: apiUrl, }).then((res) => { if (!isEmptyArray(res)) { - // console.log('화면진입API결과::', res) - setGridProps({ ...gridProps, gridData: res, count: res.length }) - setGridCount(res.length) + setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) + setGridCount(res[0].totCnt) } }) } @@ -293,15 +295,14 @@ export default function Stuff() { stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1 stuffSearchParams.endRow = curPage * defaultSize stuffSearchParams.schSortType = defaultSortType - // console.log('조회 눌럿을때 ::::::::::::::', stuffSearchParams) async function fetchData() { // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}` await get({ url: apiUrl }).then((res) => { - console.log('API결과:::::::', res) + // console.log('검색조건 변경 조회 API결과:::::::', res) if (!isEmptyArray(res)) { - setGridProps({ ...gridProps, gridData: res, count: res.length }) - setGridCount(res.length) + setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) + setGridCount(res[0].totCnt) } else { setGridProps({ ...gridProps, gridData: [], count: 0 }) setGridCount(0) @@ -324,15 +325,14 @@ export default function Stuff() { startRow: startRow, endRow: curPage * e.target.value, }) - // console.log('셋팅된 검색조건:::', stuffSearchParams) + console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams) //조회API호출 // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}` get({ url: apiUrl }).then((res) => { - // console.log('보여줄개수바꿨을때 조회 ::::::::::', res) if (!isEmptyArray(res)) { - setGridProps({ ...gridProps, gridData: res, count: res.length }) - setGridCount(res.length) + setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) + setGridCount(res[0].totCnt) } else { setGridProps({ ...gridProps, gridData: [], count: 0 }) setGridCount(0) @@ -352,18 +352,24 @@ export default function Stuff() { }) // const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}` const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}` - // console.log('apiUrl::', apiUrl) get({ url: apiUrl }).then((res) => { - // console.log('정렬바꿨을때 조회 ::::::::::', res) if (!isEmptyArray(res)) { - setGridProps({ ...gridProps, gridData: res, count: res.length }) - setGridCount(res.length) + setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) + setGridCount(res[0].totCnt) } else { setGridProps({ ...gridProps, gridData: [], count: 0 }) setGridCount(0) } }) } + + useEffect(() => { + if (globalLocaleState === 'ko') { + setAppMessageState(KO) + } else { + setAppMessageState(JA) + } + }, [globalLocaleState]) return ( <> {/* 퍼블시작 */} diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 898b4176..a62b35b1 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -11,6 +11,7 @@ import dayjs from 'dayjs' import { useMessage } from '@/hooks/useMessage' import { useForm } from 'react-hook-form' import { useRecoilState, useRecoilValue } from 'recoil' +import { v4 as uuidv4 } from 'uuid' export default function StuffDetail() { const router = useRouter() const searchParams = useSearchParams() @@ -38,7 +39,7 @@ export default function StuffDetail() { windSpeed: '', //기준풍속 snowCover: '', //수직적설량 coldAreaChk: false, //한랭지대책시행 - surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ) + surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ) saltAreaChk: false, //염해지역용아이템사용 installHeight: '', //설치높이 powerConTerms: '0', //계약조건(잉여 / 전량) @@ -77,14 +78,13 @@ export default function StuffDetail() { get({ url: `/api/object/${objectNo}/detail` }).then((res) => { // console.log('물건번호로 상세 API 호출') if (res != null) { - // console.log('상세res:::::::', res) setDetailData(res) // 신규 상세 공통APi // 도도부현API get({ url: '/api/object/prefecture/list' }).then((res) => { if (!isEmptyArray(res)) { - //console.log('도도부현API 결과:::', res) + console.log('도도부현API 결과:::', res) setPrefCodeList(res) } }) @@ -106,12 +106,11 @@ export default function StuffDetail() { } }) } else { - console.log('신규화면') // 신규 상세 공통APi // 도도부현API get({ url: '/api/object/prefecture/list' }).then((res) => { if (!isEmptyArray(res)) { - //console.log('도도부현API 결과:::', res) + // console.log('신규화면 도도부현API 결과:::', res) setPrefCodeList(res) } }) @@ -121,11 +120,11 @@ export default function StuffDetail() { //1차점 : X167 get({ url: `/api/object/saleStore/X167/list` }).then((res) => { if (!isEmptyArray(res)) { - console.log('판매점 결과:::::', res) + // console.log('판매점 결과:::::', res) const firstList = res.filter((row) => row.saleStoreLevel === '1') const otherList = res.filter((row) => row.saleStoreLevel !== '1') - console.log('first:::::', firstList) - console.log('otherList:::::', otherList) + // console.log('first:::::', firstList) + // console.log('otherList:::::', otherList) //1차점 셀렉트박스 setSaleStoreList(firstList) //1차 판매점 자동완성 값 셋팅 @@ -135,6 +134,8 @@ export default function StuffDetail() { //1차점 아닌 판매점 셀렉트박스 setOtherSaleStoreList(otherList) + form.setValue('otherSaleStoreId', otherList[0].saleStoreId) + form.setValue('otherSaleStoreName', otherList[0].saleStoreId) } }) } @@ -146,14 +147,17 @@ export default function StuffDetail() { form.setValue('saleStoreId', '') form.setValue('saleStoreName', '') } else { - form.setValue('saleStoreId', key) - form.setValue('saleStoreName', key) + const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName + form.setValue('saleStoreId', key.target.value) + form.setValue('saleStoreName', name) } } //2차점 변경 이벤트 const onSelectionChange2 = (key) => { - console.log(key) + const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName + form.setValue('otherSaleStoreId', key.target.value) + form.setValue('otherSaleStoreNm', name) } // 우편번호 숫자만 체크 const _zipNo = watch('zipNo') @@ -187,17 +191,19 @@ export default function StuffDetail() { const _objectName = watch('objectName') const _objectNameOmit = watch('objectNameOmit') const _saleStoreId = watch('saleStoreId') + const _otherSaleStoreId = watch('otherSaleStoreId') const _prefId = watch('prefId') const _address = watch('address') const _powerSimArea = watch('powerSimArea') const _windSpeed = watch('windSpeed') const _snowCover = watch('snowCover') const _installHeight = watch('installHeight') + useEffect(() => { // console.log('mode:::::', editMode) if (editMode === 'NEW') { const formData = form.getValues() - // console.log('폼::::::::::::', formData) + console.log('폼::::::::::::', formData) let errors = {} if (!_dispCompanyName || _dispCompanyName.trim().length === 0) { errors.dispCompanyName = true @@ -212,6 +218,10 @@ export default function StuffDetail() { errors.saleStoreId = true } + // if (!_otherSaleStoreId) { + // errors.otherSaleStoreId = true + // } + if (!_zipNo || _zipNo.length != 7) { errors.zipCode = true } @@ -240,12 +250,25 @@ export default function StuffDetail() { errors.installHeight = true } - // console.log('errors::', errors) + console.log('errors::', errors) setIsFormValid(Object.keys(errors).length === 0) } else { // console.log('상세일때 폼체크') } - }, [_dispCompanyName, _objectName, _objectNameOmit, _saleStoreId, _zipNo, _prefId, _address, _powerSimArea, _windSpeed, _snowCover, _installHeight]) + }, [ + _dispCompanyName, + _objectName, + _objectNameOmit, + _saleStoreId, + // _otherSaleStoreId, + _zipNo, + _prefId, + _address, + _powerSimArea, + _windSpeed, + _snowCover, + _installHeight, + ]) // 주소검색 API const onSearchPostNumber = () => { @@ -257,7 +280,7 @@ export default function StuffDetail() { //9302226 if (res.status === 200) { if (res.results != null) { - // console.log('주소검색::', res.results) + console.log('주소검색::', res.results) // console.log('prefcode::', res.results[0].prefcode) // console.log('address::', res.results[0].address2 + res.results[0].address3) setPrefValue(res.results[0].prefcode) @@ -287,7 +310,7 @@ export default function StuffDetail() { // /api/object/prefecture/도도부현코드/list get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => { if (!isEmptyArray(res)) { - // console.log('발전시뮬레이션::::::::', res) + console.log('발전량 시뮬레이션::::::::', res) setPowerSimAreaList(res) } }) @@ -328,7 +351,6 @@ export default function StuffDetail() { // 임시저장 const onTempSave = async () => { const formData = form.getValues() - //console.log('임시저장::::::::', formData) const params = { saleStoreId: formData.saleStoreId, @@ -348,8 +370,8 @@ export default function StuffDetail() { snowCover: formData.snowCover, surfaceType: formData.surfaceType, powerConTerms: formData.powerConTerms, - saltAreaChk: formData.saltAreaChk, coldAreaChk: formData.coldAreaChk, + saltAreaChk: formData.saltAreaChk, tempFlg: '1', workNo: null, workName: null, @@ -364,8 +386,9 @@ export default function StuffDetail() { // 발전량 시뮬레이션 변경 const handlePowerSimAreaOnChange = (e) => { // console.log('가지고있는 도도부현코드:::::::::', prefValue) - // console.log('발전량시뮬레이션변경:::::::::', e.target.value) - //값 set해주고 그거 useEffect로 api호출 + console.log('발전량시뮬레이션변경:::::::::', e.target.value) + form.setValue('powerSimArea', e.target.value) + //값 set해주고 그거 useEffect로 기준풍속, 수직적설량 api호출 } // 물건삭제 @@ -426,7 +449,7 @@ export default function StuffDetail() {
- @@ -457,16 +480,20 @@ export default function StuffDetail() {
- + {saleStoreList?.length > 0 && ( + + )}
- +
@@ -474,20 +501,34 @@ export default function StuffDetail() {
-
- 2차 판매점명 / ID * -
+
2차 판매점명 / ID
- + {otherSaleStoreList?.length > 0 && ( + + )} +
+
+
-
-
-
@@ -522,6 +563,7 @@ export default function StuffDetail() {
+ {/* {prefCodeList?.length > 0 && ( )} */} + {/* {prefCodeList?.length > 0 && ( + + )} */}
@@ -541,7 +588,19 @@ export default function StuffDetail() { 발전량시뮬레이션지역 * -
+
+ {powerSimAreaList?.length > 0 && ( + + )} +
@@ -568,11 +627,17 @@ export default function StuffDetail() {
-
+
+ +
cm
- - + +
@@ -592,8 +657,8 @@ export default function StuffDetail() {
- - + +