From 698939b21fccede5b65a6c159790e2571d21cb20 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 18 Oct 2024 13:04:00 +0900 Subject: [PATCH 01/15] =?UTF-8?q?scroll=3D{false}=20=EC=9B=90=EB=B3=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/Header.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 900a39c8..c12d237e 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -132,7 +132,7 @@ export default function Header(props) { onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > {menu.children.length === 0 ? ( - + {getMessage(menu.name)} ) : ( @@ -147,9 +147,7 @@ export default function Header(props) { onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - - {getMessage(m.name)} - + {getMessage(m.name)} ) })} From 8152b83b0600c1d38e50cf65acb74b022cf5f91b Mon Sep 17 00:00:00 2001 From: yjnoh Date: Fri, 18 Oct 2024 13:56:24 +0900 Subject: [PATCH 02/15] =?UTF-8?q?=EC=82=BC=EA=B0=81=ED=98=95,=20=EC=98=A4?= =?UTF-8?q?=EA=B0=81=ED=98=95=20=EB=8F=84=EB=A8=B8=20=EC=9E=91=EC=97=85=20?= =?UTF-8?q?=EC=A7=80=EB=B6=95=20=ED=8C=A8=ED=84=B4=20=EA=B0=80=EB=A1=9C=20?= =?UTF-8?q?=EC=84=B8=EB=A1=9C=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/object/ObjectSetting.jsx | 1 + .../modal/object/type/PentagonDormer.jsx | 35 +- .../modal/object/type/TriangleDormer.jsx | 1 - src/hooks/object/useObjectBatch.js | 344 ++++++++++++++++-- src/util/canvas-util.js | 110 ++---- 5 files changed, 383 insertions(+), 108 deletions(-) diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx index d5fe934e..764535e3 100644 --- a/src/components/floor-plan/modal/object/ObjectSetting.jsx +++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx @@ -46,6 +46,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) { heightRef: useRef(null), pitchRef: useRef(null), offsetRef: useRef(null), + offsetWidthRef: useRef(null), directionRef: useRef(null), } diff --git a/src/components/floor-plan/modal/object/type/PentagonDormer.jsx b/src/components/floor-plan/modal/object/type/PentagonDormer.jsx index e2aeea15..73f9c5d8 100644 --- a/src/components/floor-plan/modal/object/type/PentagonDormer.jsx +++ b/src/components/floor-plan/modal/object/type/PentagonDormer.jsx @@ -1,8 +1,17 @@ import Image from 'next/image' import { useMessage } from '@/hooks/useMessage' +import { forwardRef, useState } from 'react' -export default function PentagonDormer() { +const PentagonDormer = forwardRef((props, refs) => { const { getMessage } = useMessage() + const [direction, setDirection] = useState('down') + refs.directionRef.current = direction + + const getDirection = (e) => { + setDirection(e.target.value) + refs.directionRef.current = e.target.value + } + return ( <>
@@ -18,7 +27,7 @@ export default function PentagonDormer() {
- +
mm
@@ -29,7 +38,7 @@ export default function PentagonDormer() {
- +
mm
@@ -40,18 +49,18 @@ export default function PentagonDormer() {
- +
mm
-
{getMessage('modal.object.setting.offset.depth')}
+
{getMessage('modal.object.setting.offset.width')}
- +
mm
@@ -62,7 +71,7 @@ export default function PentagonDormer() {
- +
寸
@@ -80,13 +89,15 @@ export default function PentagonDormer() { {getMessage('commons.east')} {getMessage('commons.south')} {getMessage('commons.west')} - - - - + + + +
) -} +}) + +export default PentagonDormer diff --git a/src/components/floor-plan/modal/object/type/TriangleDormer.jsx b/src/components/floor-plan/modal/object/type/TriangleDormer.jsx index 9ab7712d..f2a8a1f0 100644 --- a/src/components/floor-plan/modal/object/type/TriangleDormer.jsx +++ b/src/components/floor-plan/modal/object/type/TriangleDormer.jsx @@ -5,7 +5,6 @@ import { forwardRef, useState } from 'react' const TriangleDormer = forwardRef((props, refs) => { const { getMessage } = useMessage() const [direction, setDirection] = useState('down') - refs.directionRef.current = direction const getDirection = (e) => { diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index 7229f470..9ad8af5d 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -4,14 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil' import { canvasState } from '@/store/canvasAtom' import { INPUT_TYPE, BATCH_TYPE } from '@/common/common' import { useEvent } from '@/hooks/useEvent' -import { - polygonToTurfPolygon, - rectToPolygon, - triangleToPolygon, - pointsToTurfPolygon, - splitDormerTriangle, - setSurfaceShapePattern, -} from '@/util/canvas-util' +import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util' import { useSwal } from '@/hooks/useSwal' import * as turf from '@turf/turf' import { QPolygon } from '@/components/fabric/QPolygon' @@ -211,11 +204,13 @@ export function useObjectBatch() { const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP const height = dormerPlacement.heightRef.current.value / 10 + const width = dormerPlacement.widthRef.current.value / 10 const pitch = dormerPlacement.pitchRef.current.value - const directionRef = dormerPlacement.directionRef.current const offsetRef = dormerPlacement.offsetRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetRef.current.value) / 10 + const offsetWidthRef = dormerPlacement.offsetWidthRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetWidthRef.current.value) / 10 + const directionRef = dormerPlacement.directionRef.current - let dormer, dormerOffset, isDown, selectedSurface + let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints console.log('dormerPlacement', dormerPlacement) @@ -229,8 +224,6 @@ export function useObjectBatch() { const bottomLength = height / (pitch * 0.25) const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25) - console.log(bottomOffsetLength) - addCanvasMouseEventListener('mouse:move', (e) => { isDown = true if (!isDown) return @@ -305,16 +298,16 @@ export function useObjectBatch() { addCanvasMouseEventListener('mouse:up', (e) => { if (dormer) { - // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer)) - // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface) + const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer)) + const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface) - // //지붕 밖으로 그렸을때 - // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) { - // swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' }) - // //일단 지워 - // deleteTempObjects() - // return - // } + //지붕 밖으로 그렸을때 + if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) { + swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' }) + //일단 지워 + deleteTempObjects() + return + } //각도 추가 let originAngle = 0 //기본 남쪽 @@ -387,6 +380,183 @@ export function useObjectBatch() { drawDirectionArrow(leftTriangle) drawDirectionArrow(rightTriangle) + isDown = false + initEvent() + } + }) + } else if (buttonAct === 4) { + const heightLength = height - (width / 2) * (pitch * 0.25) + //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸) + const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25) + + addCanvasMouseEventListener('mouse:move', (e) => { + isDown = true + if (!isDown) return + + canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === dormerTempName)) //움직일때 일단 지워가면서 움직임 + const pointer = canvas.getPointer(e.e) + + surfaceShapePolygons.forEach((surface) => { + if (surface.inPolygon({ x: pointer.x, y: pointer.y })) { + selectedSurface = surface + } + }) + + let angle = 0 + if (directionRef === 'left') { + //서 + angle = 90 + } else if (directionRef === 'right') { + //동 + angle = 270 + } else if (directionRef === 'up') { + //북 + angle = 180 + } + + pentagonPoints = [ + { x: pointer.x, y: pointer.y }, + { x: pointer.x - width / 2, y: pointer.y + (height - heightLength) }, + { x: pointer.x - width / 2, y: pointer.y + height }, + { x: pointer.x + width / 2, y: pointer.y + height }, + { x: pointer.x + width / 2, y: pointer.y + (height - heightLength) }, + ] + + pentagonOffsetPoints = [ + { x: pointer.x, y: pointer.y }, + { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength }, + { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef }, + { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef }, + { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength }, + ] + + dormer = new QPolygon(pentagonPoints, { + fill: 'white', + stroke: 'red', + strokeDashArray: [5, 5], + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: dormerTempName, + originX: 'center', + originY: 'top', + angle: angle, + }) + canvas?.add(dormer) + + if (offsetRef > 0 || offsetWidthRef > 0) { + dormerOffset = new QPolygon(pentagonOffsetPoints, { + fill: 'gray', + stroke: 'red', + strokeDashArray: [5, 5], + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: dormerTempName, + originX: 'center', + originY: 'top', + angle: angle, + }) + canvas?.add(dormerOffset) + } + }) + + addCanvasMouseEventListener('mouse:up', (e) => { + if (dormer) { + // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer)) + // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface) + + // //지붕 밖으로 그렸을때 + // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) { + // swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' }) + // //일단 지워 + // deleteTempObjects() + // return + // } + + //각도 추가 + let originAngle = 0 //기본 남쪽 + let direction = 'south' + + if (directionRef === 'left') { + //서 + originAngle = 90 + direction = 'west' + } else if (directionRef === 'right') { + //동 + originAngle = 270 + direction = 'east' + } else if (directionRef === 'up') { + //북 + originAngle = 180 + direction = 'north' + } + + const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal' + let splitedPentagon = + offsetRef > 0 || offsetWidthRef > 0 + ? splitDormerPentagon(dormerOffset, directionRef, offsetMode) + : splitDormerPentagon(dormer, directionRef, offsetMode) + canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer) + + if (offsetRef > 0) + dormer.set({ + name: dormerName, + stroke: 'black', + strokeWidth: 1, + strokeDashArray: [0], + }) //오프셋이 있을땐 같이 도머로 만든다 + + const leftPentagon = new QPolygon(splitedPentagon[0], { + fill: 'transparent', + stroke: 'red', + strokeWidth: 1, + selectable: true, + lockMovementX: true, // X 축 이동 잠금 + lockMovementY: true, // Y 축 이동 잠금 + lockRotation: true, // 회전 잠금 + viewLengthText: true, + fontSize: 14, + direction: direction, + originX: 'center', + originY: 'center', + name: dormerName, + }) + + const rightPentagon = new QPolygon(splitedPentagon[1], { + fill: 'transparent', + stroke: 'red', + strokeWidth: 1, + selectable: true, + lockMovementX: true, // X 축 이동 잠금 + lockMovementY: true, // Y 축 이동 잠금 + lockRotation: true, // 회전 잠금 + viewLengthText: true, + fontSize: 14, + direction: direction, + originX: 'center', + originY: 'center', + name: dormerName, + }) + + canvas?.add(leftPentagon) + canvas?.add(rightPentagon) + + //패턴 + setSurfaceShapePattern(leftPentagon) + setSurfaceShapePattern(rightPentagon) + //방향 + drawDirectionArrow(leftPentagon) + drawDirectionArrow(rightPentagon) + isDown = false initEvent() } @@ -408,8 +578,140 @@ export function useObjectBatch() { initEvent() //이벤트 초기화 } + const splitDormerTriangle = (triangle, direction) => { + const halfWidth = triangle.width / 2 + + let leftPoints = [] + let rightPoints = [] + + if (direction === 'down') { + leftPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - halfWidth, y: triangle.top + triangle.height }, + { x: triangle.left, y: triangle.top + triangle.height }, + ] + + rightPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left, y: triangle.top + triangle.height }, + { x: triangle.left + halfWidth, y: triangle.top + triangle.height }, + ] + } else if (direction === 'up') { + leftPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - halfWidth, y: triangle.top - triangle.height }, + { x: triangle.left, y: triangle.top - triangle.height }, + ] + + rightPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left, y: triangle.top - triangle.height }, + { x: triangle.left + halfWidth, y: triangle.top - triangle.height }, + ] + } else if (direction === 'left') { + leftPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - triangle.height, y: triangle.top - halfWidth }, + { x: triangle.left - triangle.height, y: triangle.top }, + ] + + rightPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left - triangle.height, y: triangle.top }, + { x: triangle.left - triangle.height, y: triangle.top + halfWidth }, + ] + } else if (direction === 'right') { + leftPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top + triangle.height }, + ] + + rightPoints = [ + { x: triangle.left, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top }, + { x: triangle.left + triangle.height, y: triangle.top - triangle.height }, + ] + } + + return [leftPoints, rightPoints] + } + + const splitDormerPentagon = (pentagon, direction, offsetMode) => { + const points = pentagon.points + + console.log(pentagon.points) + + let leftPoints = [] + let rightPoints = [] + + if (direction === 'down') { + leftPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[1].x, y: points[1].y }, + { x: points[2].x, y: points[2].y }, + { x: points[0].x, y: points[3].y }, + ] + + rightPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x, y: points[2].y }, + { x: points[3].x, y: points[3].y }, + { x: points[4].x, y: points[4].y }, + ] + } else if (direction === 'up') { + leftPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[1].x, y: points[0].y - (points[1].y - points[0].y) }, + { x: points[2].x, y: points[0].y - (points[2].y - points[0].y) }, + { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) }, + ] + + rightPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[3].x, y: points[0].y - (points[1].y - points[0].y) }, + { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) }, + { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) }, + ] + } else if (direction === 'left') { + leftPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) }, + { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) }, + { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y }, + ] + + rightPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) }, + { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) }, + { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y }, + ] + } else if (direction === 'right') { + leftPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) }, + { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) }, + { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y }, + ] + + rightPoints = [ + { x: points[0].x, y: points[0].y }, + { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) }, + { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) }, + { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y }, + ] + } + + console.log(leftPoints, rightPoints) + + return [leftPoints, rightPoints] + } + return { applyOpeningAndShadow, applyDormers, + splitDormerTriangle, + splitDormerPentagon, } } diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 17c30f07..20b6ec66 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -744,67 +744,6 @@ export const polygonToTurfPolygon = (polygon) => { ) } -export const splitDormerTriangle = (triangle, direction) => { - const halfWidth = triangle.width / 2 - - let leftPoints = [] - let rightPoints = [] - let leftPointOffset = [] - let rightPointOffset = [] - - if (direction === 'down') { - leftPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left - halfWidth, y: triangle.top + triangle.height }, - { x: triangle.left, y: triangle.top + triangle.height }, - ] - - rightPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left, y: triangle.top + triangle.height }, - { x: triangle.left + halfWidth, y: triangle.top + triangle.height }, - ] - } else if (direction === 'up') { - leftPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left - halfWidth, y: triangle.top - triangle.height }, - { x: triangle.left, y: triangle.top - triangle.height }, - ] - - rightPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left, y: triangle.top - triangle.height }, - { x: triangle.left + halfWidth, y: triangle.top - triangle.height }, - ] - } else if (direction === 'left') { - leftPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left - triangle.height, y: triangle.top - halfWidth }, - { x: triangle.left - triangle.height, y: triangle.top }, - ] - - rightPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left - triangle.height, y: triangle.top }, - { x: triangle.left - triangle.height, y: triangle.top + halfWidth }, - ] - } else if (direction === 'right') { - leftPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left + triangle.height, y: triangle.top }, - { x: triangle.left + triangle.height, y: triangle.top + triangle.height }, - ] - - rightPoints = [ - { x: triangle.left, y: triangle.top }, - { x: triangle.left + triangle.height, y: triangle.top }, - { x: triangle.left + triangle.height, y: triangle.top - triangle.height }, - ] - } - - return [leftPoints, rightPoints] -} - export const triangleToPolygon = (triangle) => { const points = [] const halfWidth = triangle.width / 2 @@ -853,7 +792,7 @@ export function setSurfaceShapePattern(polygon) { patternSourceCanvas.width = polygon.width * ratio patternSourceCanvas.height = polygon.height * ratio const ctx = patternSourceCanvas.getContext('2d') - const offset = roofStyle === 1 ? 0 : patternSize.width / 2 + let offset = roofStyle === 1 ? 0 : patternSize.width / 2 const rows = Math.floor(patternSourceCanvas.height / patternSize.height) const cols = Math.floor(patternSourceCanvas.width / patternSize.width) @@ -861,23 +800,46 @@ export function setSurfaceShapePattern(polygon) { ctx.strokeStyle = 'green' ctx.lineWidth = 0.4 - for (let row = 0; row <= rows; row++) { - const y = row * patternSize.height - - ctx.beginPath() - ctx.moveTo(0, y) // 선 시작점 - ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점 - ctx.stroke() - + if (polygon.direction === 'east' || polygon.direction === 'west') { + offset = roofStyle === 1 ? 0 : patternSize.height / 2 for (let col = 0; col <= cols; col++) { - const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset) - const yStart = row * patternSize.height - const yEnd = yStart + patternSize.height - + const x = col * patternSize.width + const yStart = 0 + const yEnd = patternSourceCanvas.height ctx.beginPath() ctx.moveTo(x, yStart) // 선 시작점 ctx.lineTo(x, yEnd) // 선 끝점 ctx.stroke() + + for (let row = 0; row <= rows; row++) { + const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset) + const xStart = col * patternSize.width + const xEnd = xStart + patternSize.width + ctx.beginPath() + ctx.moveTo(xStart, y) // 선 시작점 + ctx.lineTo(xEnd, y) // 선 끝점 + ctx.stroke() + } + } + } else { + for (let row = 0; row <= rows; row++) { + const y = row * patternSize.height + + ctx.beginPath() + ctx.moveTo(0, y) // 선 시작점 + ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점 + ctx.stroke() + + for (let col = 0; col <= cols; col++) { + const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset) + const yStart = row * patternSize.height + const yEnd = yStart + patternSize.height + + ctx.beginPath() + ctx.moveTo(x, yStart) // 선 시작점 + ctx.lineTo(x, yEnd) // 선 끝점 + ctx.stroke() + } } } From aa005b0c3e1ae31b9a529aa24787facd9123df1a Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 18 Oct 2024 13:56:28 +0900 Subject: [PATCH 03/15] chore: modify .env variable --- .env | 12 ------------ .env.development | 6 ------ .env.production | 4 ---- 3 files changed, 22 deletions(-) diff --git a/.env b/.env index 50ab0d74..e69de29b 100644 --- a/.env +++ b/.env @@ -1,12 +0,0 @@ -# Environment variables declared in this file are automatically made available to Prisma. -# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema - -# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. -# See the documentation for all the connection string options: https://pris.ly/d/connection-strings - -# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" -# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" -#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0" -# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority" -# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" -DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest" \ No newline at end of file diff --git a/.env.development b/.env.development index 3447a6e5..f843c86b 100644 --- a/.env.development +++ b/.env.development @@ -1,10 +1,4 @@ -NEXT_PUBLIC_TEST="테스트변수입니다. development" - NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080" -# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080" -# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080" - -DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true" SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y=" diff --git a/.env.production b/.env.production index 7b8b23ad..c4c7918d 100644 --- a/.env.production +++ b/.env.production @@ -1,9 +1,5 @@ -NEXT_PUBLIC_TEST="테스트변수입니다. production" - NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080" -DATABASE_URL="" - SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y=" NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3" From 325cef14f0306eafc1390dafba14fda55ed40f7d Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 18 Oct 2024 14:15:00 +0900 Subject: [PATCH 04/15] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=ED=98=84=ED=99=A9=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95=20react-select=20=20scs?= =?UTF-8?q?s,=20svg=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/common/select_del.svg | 4 + src/components/management/Stuff.jsx | 17 ++-- src/components/management/StuffDetail.jsx | 86 ++++++++++--------- .../management/StuffSearchCondition.jsx | 2 + .../management/popup/PlanRequestPop.jsx | 17 ++-- src/styles/_reset.scss | 10 ++- 6 files changed, 73 insertions(+), 63 deletions(-) create mode 100644 public/static/images/common/select_del.svg diff --git a/public/static/images/common/select_del.svg b/public/static/images/common/select_del.svg new file mode 100644 index 00000000..2376f16b --- /dev/null +++ b/public/static/images/common/select_del.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/management/Stuff.jsx b/src/components/management/Stuff.jsx index 9d6ff743..5ce7c8b3 100644 --- a/src/components/management/Stuff.jsx +++ b/src/components/management/Stuff.jsx @@ -245,9 +245,8 @@ export default function Stuff() { } async function fetchData() { - // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}` - const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}` - + // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}` + const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}` await get({ url: apiUrl, }).then((res) => { @@ -303,8 +302,8 @@ export default function Stuff() { setPageNo(1) async function fetchData() { - const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` - // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` + // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` + const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` await get({ url: apiUrl }).then((res) => { if (!isEmptyArray(res)) { setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) @@ -333,8 +332,8 @@ export default function Stuff() { }) setPageNo(1) - // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` - const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` + // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` + const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` get({ url: apiUrl }).then((res) => { if (!isEmptyArray(res)) { setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) @@ -364,8 +363,8 @@ export default function Stuff() { setPageNo(1) - const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` - // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` + // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}` + const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}` get({ url: apiUrl }).then((res) => { if (!isEmptyArray(res)) { setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt }) diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index c480b055..3727555e 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -127,7 +127,7 @@ export default function StuffDetail() { } }) } - }, [objectNo]) + }, [objectNo, sessionState]) useEffect(() => { if (isObjectNotEmpty(detailData)) { @@ -303,7 +303,7 @@ export default function StuffDetail() { } // console.log('임시저장용::', errors) - setIsFormValid(Object.keys(errors).length === 0) + setIsFormValid(Object.keys(errors).length === 0 ? true : false) } else { console.log('상세일때 폼체크') } @@ -362,25 +362,14 @@ export default function StuffDetail() { form.setValue('areaId', e.target.value) } - // useEffect(() => { - // if (!isEmptyArray(areaIdList)) { - // let _prefName = form.watch('prefName') - // // console.log('기준풍속 가져오는 API', _prefName) - // get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => { - // // console.log('res::', res) - // if (!isEmptyArray(res)) { - // setWindSpeedList(res) - // } - // }) - // } - // }, [areaIdList]) - //필수값 다 입력했을때 - const onValid = (data) => { + const onValid = (data, e) => { + const formData = form.getValues() + console.log('필수값 통과:::', data, formData) + // console.log('필수값 formData:::', formData) // 수정모드일때는 PUT // console.log('필수값 다 있고 저장') // console.log('data::::::', data) - const formData = form.getValues() // console.log('formData::::', formData) // const _dispCompanyName = watch('dispCompanyName') // const _objectStatusId = watch('objectStatusId') @@ -408,6 +397,8 @@ export default function StuffDetail() { // 임시저장 const onTempSave = async () => { + console.log('임시저장:::::') + return const formData = form.getValues() // console.log('formData::', formData) const params = { @@ -487,9 +478,9 @@ export default function StuffDetail() {
- +
@@ -555,6 +546,8 @@ export default function StuffDetail() {
*/} {getMessage('stuff.detail.windSpeedSpan')} - +
@@ -790,18 +785,18 @@ export default function StuffDetail() {
{!isFormValid ? ( - + ) : ( - + )} - +
@@ -827,9 +822,9 @@ export default function StuffDetail() {
- + @@ -916,32 +911,32 @@ export default function StuffDetail() { {objectNo.substring(0, 1) === 'R' ? ( <> - + - - + + ) : ( <> {!isFormValid ? ( - + ) : ( - + )} - + )} @@ -949,7 +944,14 @@ export default function StuffDetail() { )} {showAddressButtonValid && } {showDesignRequestButtonValid && ( - + )} {showWindSpeedButtonValid && ( diff --git a/src/components/management/StuffSearchCondition.jsx b/src/components/management/StuffSearchCondition.jsx index 3717e43f..ed84073c 100644 --- a/src/components/management/StuffSearchCondition.jsx +++ b/src/components/management/StuffSearchCondition.jsx @@ -254,6 +254,8 @@ export default function StuffSearchCondition() {
{schSelSaleStoreList?.length > 0 && ( Date: Fri, 18 Oct 2024 14:30:56 +0900 Subject: [PATCH 05/15] =?UTF-8?q?[QCAST]=20=EB=82=B4=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/myInfo/UserInfoModal.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/myInfo/UserInfoModal.jsx b/src/components/myInfo/UserInfoModal.jsx index 7643913c..64677518 100644 --- a/src/components/myInfo/UserInfoModal.jsx +++ b/src/components/myInfo/UserInfoModal.jsx @@ -150,7 +150,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.userId')}
- +
@@ -158,7 +158,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.nameKana')}
- +
@@ -166,7 +166,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.name')}
- +
@@ -235,7 +235,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.category')}
- +
@@ -243,7 +243,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.tel')}
- +
@@ -251,7 +251,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.fax')}
- +
@@ -259,7 +259,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal {getMessage('myinfo.info.mail')}
- +
From 6eb9535dfc2570b2ac19c3eee0d477f695eb6bca Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 18 Oct 2024 14:45:03 +0900 Subject: [PATCH 06/15] =?UTF-8?q?=EC=99=B8=EB=B2=BD=EC=84=A0=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=EB=B0=8F=EC=98=A4=ED=94=84=EC=85=8B=20active=20line?= =?UTF-8?q?=20=EC=83=89=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roofcover/useWallLineOffsetSetting.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/hooks/roofcover/useWallLineOffsetSetting.js b/src/hooks/roofcover/useWallLineOffsetSetting.js index 6f65b58e..b84e9ef4 100644 --- a/src/hooks/roofcover/useWallLineOffsetSetting.js +++ b/src/hooks/roofcover/useWallLineOffsetSetting.js @@ -1,4 +1,4 @@ -import { canvasState } from '@/store/canvasAtom' +import { canvasState, currentObjectState } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' import { useEffect, useRef, useState } from 'react' import { useMessage } from '@/hooks/useMessage' @@ -21,6 +21,8 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) { const arrow1Ref = useRef(null) const arrow2Ref = useRef(null) + const currentObject = useRecoilValue(currentObjectState) + const [isLoading, setIsLoading] = useState(false) const drawLine = (point1, point2, idx, direction = currentWallLineRef.current.direction) => { @@ -87,6 +89,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) { if (!isLoading) { return } + canvas?.discardActiveObject() removeOuterLineEditCircle() addCanvasMouseEventListener('mouse:down', mouseDown) if (type === TYPES.WALL_LINE_EDIT) { @@ -94,6 +97,20 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) { } }, [type]) + useEffect(() => { + canvas + .getObjects() + .filter((obj) => obj.name === 'outerLine') + .forEach((line) => { + line.set({ stroke: 'black' }) + }) + + if (currentObject?.name === 'outerLine') { + currentObject.set({ stroke: '#EA10AC' }) + canvas.renderAll() + } + }, [currentObject]) + const removeOuterLineEditCircle = () => { canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'outerLineEditCircleStart' || obj.name === 'outerLineEditCircleEnd')) } @@ -106,7 +123,6 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) { } currentWallLineRef.current = e.target - console.log(currentWallLineRef.current.idx, currentWallLineRef.current.direction) if (type === TYPES.WALL_LINE_EDIT) { addCircleByLine(currentWallLineRef.current) } From 076ea3afbab219daefaf62a36ebfb8ccc2ca985d Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 18 Oct 2024 14:55:06 +0900 Subject: [PATCH 07/15] =?UTF-8?q?polygon=20LengthText=20=EC=83=9D=EC=84=B1?= =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/fabric/QPolygon.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index b708daa2..ad08e884 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -203,23 +203,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { let midPoint - switch (this.direction) { - case 'north': - midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 - 30) - break - case 'west': - midPoint = new fabric.Point((start.x + end.x) / 2 - 30, (start.y + end.y) / 2) - break - case 'south': - midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 + 30) - break - case 'east': - midPoint = new fabric.Point((start.x + end.x) / 2 + 30, (start.y + end.y) / 2) - break - default: - midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2) - break - } + midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2) const degree = (Math.atan2(dy, dx) * 180) / Math.PI From b6e6bdb005e3ba0547cc48137eaa9494459133d3 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 18 Oct 2024 15:21:36 +0900 Subject: [PATCH 08/15] =?UTF-8?q?=5Fmain.scss=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/_main.scss | 1237 +++++++++++++++++++++-------------------- 1 file changed, 636 insertions(+), 601 deletions(-) diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 37170a8b..92c9f8c8 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -1,652 +1,687 @@ // background img -.background-bord{ - position: absolute; - top: 46px; - left: 0; - width: 100%; - height: 280px; - background: url(../../public/static/images/main/main_background.png)no-repeat center; - background-size: cover; - z-index: 0; +.background-bord { + position: absolute; + top: 46px; + left: 0; + width: 100%; + height: 280px; + background: url(../../public/static/images/main/main_background.png) no-repeat center; + background-size: cover; + z-index: 0; } // main-wrap -.main-contents{ - position: relative; - z-index: 1; - padding-bottom: 15px; +.main-contents { + position: relative; + z-index: 1; + padding-bottom: 15px; } // contents -.store-id-wrap{ - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - padding: 33.5px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - background-color: rgba(255, 255, 255, 0.05); - .store-id-title{ - position: relative; - padding-left: 32px; - font-size: 13px; - color: #fff; - &::before{ - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 20px; - height: 20px; - background: url(../../public/static/images/main/id_icon.svg)no-repeat center; - } - } - .store-arr{ - display: block; - width: 7px; - height: 10px; - background: url(../../public/static/images/main/store-arr.svg) no-repeat center; - } - .store-id-name{ - font-size: 16px; - color: #fff; - font-weight: 600; +.store-id-wrap { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 33.5px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.05); + .store-id-title { + position: relative; + padding-left: 32px; + font-size: 13px; + color: #fff; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 20px; + height: 20px; + background: url(../../public/static/images/main/id_icon.svg) no-repeat center; } + } + .store-arr { + display: block; + width: 7px; + height: 10px; + background: url(../../public/static/images/main/store-arr.svg) no-repeat center; + } + .store-id-name { + font-size: 16px; + color: #fff; + font-weight: 600; + } } // main-search-form -.main-search-wrap{ +.main-search-wrap { + display: flex; + align-items: center; + justify-content: center; + padding: 45px 0; + .search-raido-wrap { display: flex; align-items: center; - justify-content: center; - padding: 45px 0; - .search-raido-wrap{ - display: flex; - align-items: center; - gap: 16px; - margin-right: 30px; - } + gap: 16px; + margin-right: 30px; + } } -.search-input-box{ - display: flex; - align-items: center; - width: 580px; - height: 45px; - border-radius: 100px; - padding: 0 20px; - border: 1px solid rgba(255, 255, 255, 0.30); - background: rgba(31, 31, 31, 0.30); - .main-search{ - flex: 1; - height: 100%; - font-size: 13px; - color: #fff; - background-color: transparent; - outline: none; - border: none; - font-family: 'Noto Sans JP', sans-serif; - } - .search-icon{ - width: 20px; - height: 100%; - background-image: url(../../public/static/images/main/main_search.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 21px 21px; - } +.search-input-box { + display: flex; + align-items: center; + width: 580px; + height: 45px; + border-radius: 100px; + padding: 0 20px; + border: 1px solid rgba(255, 255, 255, 0.3); + background: rgba(31, 31, 31, 0.3); + .main-search { + flex: 1; + height: 100%; + font-size: 13px; + color: #fff; + background-color: transparent; + outline: none; + border: none; + font-family: 'Noto Sans JP', sans-serif; + } + .search-icon { + width: 20px; + height: 100%; + background-image: url(../../public/static/images/main/main_search.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 21px 21px; + } } // main-contents-inner -.main-product-list-wrap{ - max-width: 1400px; - margin: 0 auto; - .main-product-list{ +.main-product-list-wrap { + max-width: 1400px; + margin: 0 auto; + .main-product-list { + display: flex; + gap: 24px; + margin-bottom: 24px; + .product-item { + display: flex; + flex-direction: column; + padding: 40px; + border-radius: 6px; + background: #fff; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + &.item01 { + flex: 1; + max-height: 400px; + } + &.item02 { + flex: none; + width: 451px; + max-height: 400px; + } + &.item03 { + flex: 1; + } + &.item04 { + flex: none; + width: 351px; + } + &.item05 { + flex: none; + width: 451px; + } + .product-item-title-wrap { display: flex; - gap: 24px; - margin-bottom: 24px; - .product-item{ + align-items: center; + .product-item-title { + display: flex; + align-items: center; + font-size: 16px; + color: #101010; + font-weight: 600; + .item-logo { + display: block; + width: 40px; + height: 40px; + border-radius: 50px; + background: #14324f; + margin-right: 12px; + background-repeat: no-repeat; + background-size: 22px 22px; + background-position: center; + &.ico01 { + background-image: url(../../public/static/images/main/product_ico01.svg); + } + &.ico02 { + background-image: url(../../public/static/images/main/product_ico02.svg); + } + &.ico03 { + background-image: url(../../public/static/images/main/product_ico03.svg); + } + &.ico04 { + background-image: url(../../public/static/images/main/product_ico04.svg); + } + &.ico05 { + background-image: url(../../public/static/images/main/product_ico05.svg); + } + } + } + .more-btn { + display: block; + width: 20px; + height: 20px; + margin-left: auto; + background: url(../../public/static/images/main/more_btn.svg) no-repeat center; + } + } + .product-item-content { + margin-top: 30px; + overflow: hidden; + .recently-list { + .recently-item { + border: 1px solid #f2f2f2; + background-color: transparent; + padding: 29.9px 20px; + margin-bottom: 5px; + cursor: pointer; + .item-inner { + display: flex; + align-items: center; + span { + position: relative; + display: block; + font-size: 13px; + color: #101010; + font-weight: 400; + padding: 0 10px; + &.time { + padding-left: 22px; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 14px; + height: 14px; + background: url(../../public/static/images/main/clock.svg) no-repeat center; + background-size: cover; + } + } + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #bbb; + } + &:last-child { + &:after { + display: none; + } + } + } + } + &:last-child { + margin-bottom: 5px; + } + } + } + .notice-box { + height: 100%; + overflow-y: auto; + .notice-day { + font-size: 13px; + color: #666; + font-weight: 400; + margin-bottom: 7px; + } + .notice-title { + font-size: 14px; + color: #101010; + font-weight: 600; + margin-bottom: 25px; + line-height: 24px; + word-break: keep-all; + } + .notice-contents { + font-size: 12px; + color: #666; + font-weight: 400; + line-height: 22px; + span { + position: relative; + display: block; + padding-left: 10px; + &::before { + content: ''; + position: absolute; + top: 10px; + left: 3px; + width: 3px; + height: 3px; + border-radius: 100%; + background-color: #666; + } + } + } + &::-webkit-scrollbar { + width: 4px; /* 스크롤바의 너비 */ + } + &::-webkit-scrollbar-thumb { + background: #697c8f; /* 스크롤바의 색상 */ + } + &::-webkit-scrollbar-track { + background: transparent; /*스크롤바 뒷 배경 색상*/ + } + } + .faq-item { + position: relative; + margin-bottom: 10px; + cursor: pointer; + .faq-item-inner { display: flex; - flex-direction: column; - padding: 40px; - border-radius: 6px; - background: #FFF; - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - &.item01{flex: 1; max-height: 400px;} - &.item02{flex: none; width: 451px; max-height: 400px;} - &.item03{flex: 1;} - &.item04{flex: none; width: 351px;} - &.item05{flex: none; width: 451px;} - .product-item-title-wrap{ - display: flex; - align-items: center; - .product-item-title{ - display: flex; - align-items: center; - font-size: 16px; - color: #101010; - font-weight: 600; - .item-logo{ - display: block; - width: 40px; - height: 40px; - border-radius: 50px; - background: #14324F; - margin-right: 12px; - background-repeat: no-repeat; - background-size: 22px 22px; - background-position: center; - &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);} - &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);} - &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);} - &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);} - &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);} - } - } - .more-btn{ - display: block; - width: 20px; - height: 20px; - margin-left: auto; - background: url(../../public/static/images/main/more_btn.svg)no-repeat center; - } + align-items: center; + + .faq-num { + flex: none; + padding: 7px 12.5px; + font-size: 13px; + color: #101010; + font-weight: 600; + border-radius: 110px; + border: 1px solid rgba(242, 242, 242, 0.95); + margin-right: 20px; } - .product-item-content{ - margin-top: 30px; - overflow: hidden; - .recently-list{ - .recently-item{ - border: 1px solid #F2F2F2; - background-color: transparent; - padding: 29.9px 20px; - margin-bottom: 5px; - cursor: pointer; - .item-inner{ - display: flex; - align-items: center; - span{ - position: relative; - display: block; - font-size: 13px; - color: #101010; - font-weight: 400; - padding: 0 10px; - &.time{ - padding-left: 22px; - &::before{ - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 14px; - height: 14px; - background:url(../../public/static/images/main/clock.svg)no-repeat center; - background-size: cover; - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 10px; - background-color: #BBB; - } - &:last-child{ - &:after{ - display: none; - } - } - } - } - &:last-child{ - margin-bottom: 5px; - } - } - } - .notice-box{ - height: 100%; - overflow-y: auto; - .notice-day{ - font-size: 13px; - color: #666; - font-weight: 400; - margin-bottom: 7px; - } - .notice-title{ - font-size: 14px; - color: #101010; - font-weight: 600; - margin-bottom: 25px; - line-height: 24px; - word-break: keep-all; - } - .notice-contents{ - font-size: 12px; - color: #666; - font-weight: 400; - line-height: 22px; - span{ - position: relative; - display: block; - padding-left: 10px; - &::before{ - content: ''; - position: absolute; - top: 10px; - left: 3px; - width: 3px; - height: 3px; - border-radius: 100%; - background-color: #666; - } - } - } - &::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */} - &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */} - &::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/} - } - .faq-item{ - position: relative; - margin-bottom: 10px; - cursor: pointer; - .faq-item-inner{ - display: flex; - align-items: center; - - .faq-num{ - flex: none; - padding: 7px 12.5px; - font-size: 13px; - color: #101010; - font-weight: 600; - border-radius: 110px; - border: 1px solid rgba(242, 242, 242, 0.95); - margin-right: 20px; - } - .faq-title{ - width: 0; - flex: 1 1 auto; - font-size: 13px; - color: #101010; - font-weight: 500; - padding-right: 96px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .faq-day{ - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - font-size: 13px; - color: #101010; - font-weight: 400; - } - } - &:last-child{ - margin-bottom: 0; - } - } - .data-download-wrap{ - width: 100%; - .data-down{ - display: block; - width: 100%; - padding: 20px; - text-align: left; - border-radius: 4px; - background-color: #697C8F; - margin-bottom: 5px; - transition: background .17s ease-in-out; - span{ - position: relative; - display: block; - padding-right: 30px; - font-size: 13px; - color: #fff; - font-weight: 400; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 18px; - height: 16px; - background: url(../../public/static/images/main/download.svg)no-repeat center; - background-size: cover; - } - } - &:last-child{ - margin-bottom: 0; - } - &:hover{ - background-color: #859eb6; - } - } - } - .contact-info-list{ - padding: 25px 30px; - border-radius: 4px; - background-color: #F4F4F7; - .info-item{ - display: flex; - align-items: center; - padding: 15px 0; - border-bottom: 1px solid #fff; - &:first-child{padding-top: 0;} - &:last-child{padding-bottom: 0; border: none;} - .icon-box{ - display: flex; - margin-right: 12px; - } - .infor-data{ - font-size: 13px; - color: #101010; - font-weight: 500; - } - } - } + .faq-title { + width: 0; + flex: 1 1 auto; + font-size: 13px; + color: #101010; + font-weight: 500; + padding-right: 96px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } - } - &:last-child{ + .faq-day { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + font-size: 13px; + color: #101010; + font-weight: 400; + } + } + &:last-child { margin-bottom: 0; + } } + .data-download-wrap { + width: 100%; + .data-down { + display: block; + width: 100%; + padding: 20px; + text-align: left; + border-radius: 4px; + background-color: #697c8f; + margin-bottom: 5px; + transition: background 0.17s ease-in-out; + span { + position: relative; + display: block; + padding-right: 30px; + font-size: 13px; + color: #fff; + font-weight: 400; + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 18px; + height: 16px; + background: url(../../public/static/images/main/download.svg) no-repeat center; + background-size: cover; + } + } + &:last-child { + margin-bottom: 0; + } + &:hover { + background-color: #859eb6; + } + } + } + .contact-info-list { + padding: 25px 30px; + border-radius: 4px; + background-color: #f4f4f7; + .info-item { + display: flex; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #fff; + &:first-child { + padding-top: 0; + } + &:last-child { + padding-bottom: 0; + border: none; + } + .icon-box { + display: flex; + margin-right: 12px; + } + .infor-data { + font-size: 13px; + color: #101010; + font-weight: 500; + } + } + } + } } + &:last-child { + margin-bottom: 0; + } + } } // loginpage -.login-wrap{ - position: relative; +.login-wrap { + position: relative; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + background: url(../../public/static/images/main/login_bg.png) no-repeat center; + background-size: cover; + .login-inner { + max-width: 500px; width: 100%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - background: url(../../public/static/images/main/login_bg.png) no-repeat center; - background-size: cover; - .login-inner{ - max-width: 500px; - width: 100%; - margin: 0 auto; - .login-logo{ - display: block; - margin-bottom: 25px; + margin: 0 auto; + .login-logo { + display: block; + margin-bottom: 25px; + } + .login-input-frame { + padding: 40px 50px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.97); + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .login-frame-tit { + font-size: 18px; + color: #364864; + font-weight: 400; + padding-bottom: 30px; + border-bottom: 1px solid #e5e9ef; + span { + display: block; + font-weight: 600; + margin-bottom: 5px; } - .login-input-frame{ - padding: 40px 50px; - border-radius: 6px; - background: rgba(255, 255, 255, 0.97); - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - .login-frame-tit{ - font-size: 18px; - color: #364864; - font-weight: 400; - padding-bottom: 30px; - border-bottom: 1px solid #E5E9EF; - span{ - display: block; - font-weight: 600; - margin-bottom: 5px; - } - &.pw-reset{ - font-size: 13px; - } - } - .login-input-wrap{ - margin-top: 30px; - .login-area{ - position: relative; - display: flex; - align-items: center; - border: 1px solid #E5E9EF; - height: 45px; - padding-left: 40px; - padding-right: 15px; - margin-bottom: 15px; - .login-input{ - flex: 1; - height: 100%; - background-color: transparent; - font-size: 13px; - font-weight: 400; - color: #6c819c; - &::placeholder{ - font-size: 13px; - font-weight: 400; - color: #D1D7E0; - } - } - &::before{ - content: ''; - position: absolute; - top: 50%; - left: 15px; - transform: translateY(-50%); - width: 10px; - height: 12px; - background-size: cover; - } - button{ - width: 20px; - height: 100%; - background-repeat: no-repeat; - background-position: center; - } - &.id{ - &::before{ - background: url(../../public/static/images/main/login_id.svg)no-repeat center; - } - .id-delete{ - background-image: url(../../public/static/images/main/id_delete.svg); - background-size: 17px 17px; - } - } - &.email{ - &::before{ - background: url(../../public/static/images/main/login_email.svg)no-repeat center; - width: 12px; - height: 9px; - } - .id-delete{ - background-image: url(../../public/static/images/main/id_delete.svg); - background-size: 17px 17px; - } - } - &.password{ - margin-bottom: 20px; - &::before{ - background: url(../../public/static/images/main/login_password.svg)no-repeat center; - } - .password-hidden{ - background-image: url(../../public/static/images/main/password_hidden.svg); - background-size: 19px 13px; - &.visible{ - background-image: url(../../public/static/images/main/password_visible.svg); - } - } - } - } - .login-btn{ - display: block; - width: 100%; - height: 45px; - background-color: #5C6773; - color: #fff; - font-size: 15px; - font-weight: 600; - border-radius: 4px; - transition: background .15s ease-in-out; - &:hover{ - background-color: #717e8d; - } - &.light{ - background-color: #fff; - border: 1px solid #5C6773; - color: #5C6773; - } - } - .login-btn-box{ - margin-bottom: 20px; - } - .pwreset-btn-box{ - display: flex; - } - .reset-password{ - width: 100%; - text-align: center; - button{ - position: relative; - font-size: 13px; - color: #364864; - font-weight: 400; - padding-right: 16px; - &::before{ - content: ''; - position: absolute; - top: calc(50% + 1px); - right: 0; - transform: translateY(-50%); - width: 6px; - height: 8px; - background: url(../../public/static/images/main/login-arr.svg)no-repeat center; - } - } - } - } + &.pw-reset { + font-size: 13px; } - .login-guide-wrap{ - position: relative; - margin-left: 10px; - margin-top: 30px; - padding-left: 15px; + } + .login-input-wrap { + margin-top: 30px; + .login-area { + position: relative; + display: flex; + align-items: center; + border: 1px solid #e5e9ef; + height: 45px; + padding-left: 40px; + padding-right: 15px; + margin-bottom: 15px; + .login-input { + flex: 1; + height: 100%; + background-color: transparent; font-size: 13px; - color: #fff; - line-height: 24px; - a{ - color: #fff; - font-weight: 600; - text-decoration: underline; + font-weight: 400; + color: #6c819c; + &::placeholder { + font-size: 13px; + font-weight: 400; + color: #d1d7e0; } - span{ - position: absolute; - top: 0; - left: 0; + } + &::before { + content: ''; + position: absolute; + top: 50%; + left: 15px; + transform: translateY(-50%); + width: 10px; + height: 12px; + background-size: cover; + } + button { + width: 20px; + height: 100%; + background-repeat: no-repeat; + background-position: center; + } + &.id { + &::before { + background: url(../../public/static/images/main/login_id.svg) no-repeat center; } + .id-delete { + background-image: url(../../public/static/images/main/id_delete.svg); + background-size: 17px 17px; + } + } + &.email { + &::before { + background: url(../../public/static/images/main/login_email.svg) no-repeat center; + width: 12px; + height: 9px; + } + .id-delete { + background-image: url(../../public/static/images/main/id_delete.svg); + background-size: 17px 17px; + } + } + &.password { + margin-bottom: 20px; + &::before { + background: url(../../public/static/images/main/login_password.svg) no-repeat center; + } + .password-hidden { + background-image: url(../../public/static/images/main/password_hidden.svg); + background-size: 19px 13px; + &.visible { + background-image: url(../../public/static/images/main/password_visible.svg); + } + } + } } + .login-btn { + display: block; + width: 100%; + height: 45px; + background-color: #5c6773; + color: #fff; + font-size: 15px; + font-weight: 600; + border-radius: 4px; + transition: background 0.15s ease-in-out; + &:hover { + background-color: #717e8d; + } + &.light { + background-color: #fff; + border: 1px solid #5c6773; + color: #5c6773; + } + } + .login-btn-box { + margin-bottom: 20px; + } + .pwreset-btn-box { + display: flex; + } + .reset-password { + width: 100%; + text-align: center; + button { + position: relative; + font-size: 13px; + color: #364864; + font-weight: 400; + padding-right: 16px; + &::before { + content: ''; + position: absolute; + top: calc(50% + 1px); + right: 0; + transform: translateY(-50%); + width: 6px; + height: 8px; + background: url(../../public/static/images/main/login-arr.svg) no-repeat center; + } + } + } + } } - .login-copyright{ - position: absolute; - bottom: 40px; - left: 50%; - transform: translateX(-50%); - font-size: 11px; + .login-guide-wrap { + position: relative; + margin-left: 10px; + margin-top: 30px; + padding-left: 15px; + font-size: 13px; + color: #fff; + line-height: 24px; + a { color: #fff; - font-weight: 500; + font-weight: 600; + text-decoration: underline; + } + span { + position: absolute; + top: 0; + left: 0; + } } + } + .login-copyright { + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: 11px; + color: #fff; + font-weight: 500; + } } -.d-check-box{ - &.login{ - margin-bottom: 25px; - label{ - padding-left: 20px; - color: #364864; - &:before{ - width: 22px; - height: 22px; - top: -1px; - border-color: #A8B6C7; - border-radius: 3px; - transition: background .05s ease-in-out; - } - } +.d-check-box { + &.login { + margin-bottom: 25px; + label { + padding-left: 20px; + color: #364864; + &:before { + width: 22px; + height: 22px; + top: -1px; + border-color: #a8b6c7; + border-radius: 3px; + transition: background 0.05s ease-in-out; + } } - input[type=checkbox]:checked + label::before{ - border-color: #A8B6C7; - background-color: #A8B6C7; + input[type='checkbox']:checked + label::before { + border-color: #a8b6c7; + background-color: #a8b6c7; } - input[type=checkbox]:checked + label::after{ - border-color: #fff; - width: 7px; - height: 11px; - top: -2px; - left: 1px; + input[type='checkbox']:checked + label::after { + border-color: #fff; + width: 7px; + height: 11px; + top: -2px; + left: 1px; } + } } // 회원가입 -.center-page-wrap{ - display: flex; - flex-direction: column; - justify-content: center; +.center-page-wrap { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + min-height: 100vh; + background-color: #f4f4f7; + overflow-x: hidden; + .center-page-inner { width: 100%; - min-height: 100vh; - background-color: #F4F4F7; - overflow-x: hidden; - .center-page-inner{ - width: 100%; - max-width: 1720px; - margin: 0 auto; - .center-page-tit{ - font-size: 18px; - font-weight: 600; - color: #101010; - margin-bottom: 24px; - } - .sub-table-box{ - &.signup{ - margin-bottom: 20px; - } - } - .sign-up-btn-wrap{ - display: flex; - justify-content: flex-end; - } - &.complete{ - max-width: 1000px; - } + max-width: 1720px; + margin: 0 auto; + .center-page-tit { + font-size: 18px; + font-weight: 600; + color: #101010; + margin-bottom: 24px; } - + .sub-table-box { + &.signup { + margin-bottom: 20px; + } + } + .sign-up-btn-wrap { + display: flex; + justify-content: flex-end; + } + &.complete { + max-width: 1000px; + } + } } // 회원가입 완료 -.complete-box-wrap{ - padding: 72px 80px; - .complete-tit{ - font-size: 18px; - font-weight: 600; - color: #101010; - margin-bottom: 17px; +.complete-box-wrap { + padding: 72px 80px; + .complete-tit { + font-size: 18px; + font-weight: 600; + color: #101010; + margin-bottom: 17px; + } + .complete-txt { + font-size: 13px; + font-weight: 400; + color: #101010; + margin-bottom: 27px; + } + .complete-email-wrap { + padding: 36px 30px; + border-radius: 2px; + background: #f4f4f7; + margin-bottom: 20px; + .email-info { + font-size: 13px; + font-weight: 400; + color: #000; + span { + color: #204af4; + font-weight: 500; + } } - .complete-txt{ - font-size: 13px; - font-weight: 400; - color: #101010; - margin-bottom: 27px; - } - .complete-email-wrap{ - padding: 36px 30px; - border-radius: 2px; - background: #F4F4F7; - margin-bottom: 20px; - .email-info{ - font-size: 13px; - font-weight: 400; - color: #000; - span{ - color: #204AF4; - font-weight: 500; - } - } - } - .complete-btn{ - display: flex; - justify-content: flex-end; - } -} \ No newline at end of file + } + .complete-btn { + display: flex; + justify-content: flex-end; + } +} From 7f56e632cefc6ad4f6a4dddd143a38be0a78f8e3 Mon Sep 17 00:00:00 2001 From: leeyongjae Date: Fri, 18 Oct 2024 16:39:58 +0900 Subject: [PATCH 09/15] =?UTF-8?q?=EC=9E=90=EB=A3=8C=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/community/Archive.jsx | 2 +- src/components/community/ArchiveTable.jsx | 48 ++++++++++++----------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/components/community/Archive.jsx b/src/components/community/Archive.jsx index 768bc500..55de76f1 100644 --- a/src/components/community/Archive.jsx +++ b/src/components/community/Archive.jsx @@ -61,7 +61,7 @@ export default function Archive() {
- +
diff --git a/src/components/community/ArchiveTable.jsx b/src/components/community/ArchiveTable.jsx index ef6b303b..371ae454 100644 --- a/src/components/community/ArchiveTable.jsx +++ b/src/components/community/ArchiveTable.jsx @@ -45,7 +45,7 @@ export default function ArchiveTable({ clsCode }) { } fetchData() - }, [search.searchValue]) + }, [search.searchValue, search.searchFlag]) // 상세 파일 목록 조회 const handleDetailFileListDown = async (noticeNo) => { @@ -74,30 +74,34 @@ export default function ArchiveTable({ clsCode }) { return ( <> -
- {boardList?.map((board) => ( -
-
-
- {/* 번호 */} - {board.rowNumber} + {boardList.length > 0 ? ( +
+ {boardList?.map((board) => ( +
+
+
+ {/* 번호 */} + {board.rowNumber} +
+
+ {/* 제목 */} + {board.title} +
+
+ {/* 등록일 */} + {getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt} +
-
- {/* 제목 */} - {board.title} -
-
- {/* 등록일 */} - {getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt} +
+ {/* 첨부파일 */} +
-
- {/* 첨부파일 */} - -
-
- ))} -
+ ))} +
+ ) : ( +
{getMessage('common.message.no.data')}
+ )} ) } From e1a4ccaa08050d8776ac98fdebf94460d8298c42 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 18 Oct 2024 17:28:42 +0900 Subject: [PATCH 10/15] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20hooks=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/setting01/FirstOption.jsx | 3 ++- src/hooks/option/useFirstOption.js | 23 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/hooks/option/useFirstOption.js diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index c4e75ea4..bd24d738 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -5,10 +5,11 @@ import React, { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { adsorptionPointAddModeState } from '@/store/canvasAtom' +import { useFirstOption } from '@/hooks/option/useFirstOption' export default function FirstOption() { const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 - const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) + const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption() const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) const { option1, option2, dimensionDisplay } = settingModalFirstOptions const { option3, option4 } = settingModalSecondOptions diff --git a/src/hooks/option/useFirstOption.js b/src/hooks/option/useFirstOption.js new file mode 100644 index 00000000..4010b69e --- /dev/null +++ b/src/hooks/option/useFirstOption.js @@ -0,0 +1,23 @@ +import { useRecoilState, useRecoilValue } from 'recoil' +import { canvasState } from '@/store/canvasAtom' +import { useEffect } from 'react' +import { settingModalFirstOptionsState } from '@/store/settingAtom' + +export function useFirstOption() { + const canvas = useRecoilValue(canvasState) + + const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) + + useEffect(() => { + const option1 = settingModalFirstOptions.option1 + + canvas + .getObjects() + .filter((obj) => obj.name === '') + .forEach((obj) => { + obj.set({ visible: !obj.visible }) + }) + }, [settingModalFirstOptions]) + + return { settingModalFirstOptions, setSettingModalFirstOptions } +} From 7d2d32f198ce821a0efc9ba481e5c301861a3a77 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 18 Oct 2024 17:42:03 +0900 Subject: [PATCH 11/15] =?UTF-8?q?=EB=AC=BC=EA=B1=B4=EC=A0=95=EB=B3=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/main/MainContents.jsx | 2 - src/components/management/StuffDetail.jsx | 71 ++++++++++++++++------- 2 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx index ba9a8d77..6dcca943 100644 --- a/src/components/main/MainContents.jsx +++ b/src/components/main/MainContents.jsx @@ -34,7 +34,6 @@ export default function MainContents({ objectList, businessCharger, businessChar startRow: 1, endRow: 1, } - // const noticeApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=NOTICE&schTitle=&startRow=1&endRow=1` const noticeApiUrl = `api/board/list?${queryStringFormatter(param)}` const res = await get({ url: noticeApiUrl }) //console.log('공지res::', res) @@ -57,7 +56,6 @@ export default function MainContents({ objectList, businessCharger, businessChar startRow: 1, endRow: 3, } - // const faqApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=FAQ&schTitle=&startRow=1&endRow=1` const faqApiUrl = `api/board/list?${queryStringFormatter(param)}` const res = await get({ url: faqApiUrl }) //console.log('FAQres::', res) diff --git a/src/components/management/StuffDetail.jsx b/src/components/management/StuffDetail.jsx index 3727555e..6800a5e8 100644 --- a/src/components/management/StuffDetail.jsx +++ b/src/components/management/StuffDetail.jsx @@ -102,7 +102,6 @@ export default function StuffDetail() { // 도도부현API get({ url: '/api/object/prefecture/list' }).then((res) => { if (!isEmptyArray(res)) { - // console.log('신규화면 도도부현API 결과:::', res) setPrefCodeList(res) } }) @@ -348,9 +347,8 @@ export default function StuffDetail() { // 발전량시뮬레이션 지역 목록 get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => { if (!isEmptyArray(res)) { - // console.log('발전량 시뮬레이션::::::::', res) - form.setValue('areaId', res[0].areaId) - form.setValue('areaName', res[0].prefName) + // form.setValue('areaId', res[0].areaId) + // form.setValue('areaName', res[0].prefName) setAreaIdList(res) } }) @@ -359,7 +357,8 @@ export default function StuffDetail() { // 발전량 시뮬레이션 변경 const handleAreaIdOnChange = (e) => { - form.setValue('areaId', e.target.value) + form.setValue('areaId', e.areaId) + form.setValue('areaName', e.prefName) } //필수값 다 입력했을때 @@ -631,13 +630,28 @@ export default function StuffDetail() {
{prefCodeList?.length > 0 && ( - + // + 0 ? false : true} @@ -664,8 +678,25 @@ export default function StuffDetail() { {row.prefName} ) + })} + + */} + + isDisabled={areaIdList.length > 0 ? false : true} + />
@@ -794,9 +825,9 @@ export default function StuffDetail() { )} - +
@@ -911,9 +942,9 @@ export default function StuffDetail() { {objectNo.substring(0, 1) === 'R' ? ( <> - + )} - + )} From ee897ede4d03239bf99d7f6a5e297460a24e5ac9 Mon Sep 17 00:00:00 2001 From: basssy Date: Fri, 18 Oct 2024 17:45:59 +0900 Subject: [PATCH 12/15] =?UTF-8?q?=5Fmain.scss,=20=5Fcontents.scss=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/_contents.scss | 2390 +++++++++++++++++++------------------ src/styles/_main.scss | 4 +- 2 files changed, 1247 insertions(+), 1147 deletions(-) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 37233d13..9cd8bd32 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,1203 +1,1303 @@ // CanvasPage -.canvas-wrap{ - height: calc(100vh - 47px); - display: flex; - flex-direction: column; - .canvas-content{ - flex: 1 1 auto; - .canvas-layout{ - height: 100%; - } - } - &.sub-wrap{ - overflow: hidden; - .canvas-content{ - height: calc(100% - 47px); - } - } -} +// .canvas-wrap{ +// height: calc(100vh - 47px); +// display: flex; +// flex-direction: column; +// .canvas-content{ +// flex: 1 1 auto; +// .canvas-layout{ +// height: 100%; +// } +// } +// &.sub-wrap{ +// overflow: hidden; +// .canvas-content{ +// height: calc(100% - 47px); +// } +// } +// } // CanvasMenu -.canvas-menu-wrap{ +.canvas-menu-wrap { + position: fixed; + top: 46px; + left: 0; + display: block; + width: 100%; + padding-bottom: 0; + background-color: #383838; + transition: padding 0.17s ease-in-out; + z-index: 999; + .canvas-menu-inner { position: relative; - display: block; - width: 100%; - padding-bottom: 0; - background-color: #383838; - transition: padding .17s ease-in-out; - .canvas-menu-inner{ - position: relative; - display: flex; - align-items: center; - padding: 0 40px 0 20px; - background-color: #2C2C2C; - z-index: 999; - .canvas-menu-list{ - display: flex; - align-items: center; - height: 100%; - .canvas-menu-item{ - display: flex; - align-items: center; - height: 100%; - button{ - display: flex; - align-items: center; - font-size: 12px; - height: 100%; - color: #fff; - font-weight: 600; - padding: 15px 20px; - opacity: 0.55; - transition: all .17s ease-in-out; - .menu-icon{ - display: block; - width: 16px; - height: 16px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - margin-right: 10px; - &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);} - &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);} - &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);} - &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);} - &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);} - &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);} - &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);} - } - } - &.active{ - background-color: #383838; - button{ - opacity: 1; - } - } - } - } - .canvas-side-btn-wrap{ - display: flex; - align-items: center; - margin-left: auto; - .select-box{ - width: 124px; - margin-right: 5px; - > div{ - width: 100%; - } - } - .btn-from{ - display: flex; - align-items: center; - gap: 5px; - button{ - display: block; - width: 30px; - height: 30px; - border-radius: 2px; - background-color: #3D3D3D; - background-position: center; - background-repeat: no-repeat; - background-size: 15px 15px; - transition: all .17s ease-in-out; - &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);} - &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);} - &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);} - &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);} - &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);} - &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);} - &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);} - &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);} - &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);} - &:hover{ - background-color: #1083E3; - } - &.active{ - background-color: #1083E3; - } - } - } - .ico-btn-from{ - display: flex; - align-items: center; - gap: 5px; - button{ - .ico{ - display: block; - width: 15px; - height: 15px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);} - &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);} - &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);} - &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);} - } - .name{ - font-size: 12px; - color: #fff; - } - } - &.form06{ - .name{ - font-size: 13px; - } - } - } - .vertical-horizontal{ - display: flex; - min-width: 170px; - height: 28px; - margin: 0 5px; - border-radius: 2px; - background: #373737; - line-height: 28px; - overflow: hidden; - span{ - padding: 0 10px; - font-size: 13px; - color: #fff; - } - button{ - margin-left: auto; - height: 100%; - background-color: #4B4B4B; - font-size: 13px; - font-weight: 400; - color: #fff; - padding: 0 7.5px; - transition: all .17s ease-in-out; - } - &.on{ - button{ - background-color: #1083E3; - } - } - } - .size-control{ - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - background-color: #3D3D3D; - border-radius: 2px; - width: 100px; - height: 30px; - margin: 0 5px; - span{ - font-size: 13px; - color: #fff; - } - .control-btn{ - display: block; - width: 12px; - height: 12px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - &.minus{ - background-image: url(../../public/static/images/canvas/minus.svg); - } - &.plus{ - background-image: url(../../public/static/images/canvas/plus.svg); - } - } - } - } - } - .canvas-depth2-wrap{ - position: absolute; - top: -100%; - left: 0; - background-color: #383838; - width: 100%; - height: 50px; - transition: all .17s ease-in-out; - .canvas-depth2-inner{ - display: flex; - align-items: center; - padding: 0 40px; - height: 100%; - .canvas-depth2-list{ - display: flex; - align-items: center ; - height: 100%; - .canvas-depth2-item{ - display: flex; - align-items: center; - margin-right: 26px; - height: 100%; - button{ - position: relative; - opacity: 0.55; - color: #fff; - font-size: 12px; - font-weight: normal; - height: 100%; - padding-right: 12px; - } - &.active{ - button{ - opacity: 1; - font-weight: 600; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - } - } - } - .canvas-depth2-btn-list{ - display: flex; - align-items: center; - margin-left: auto; - height: 100%; - .depth2-btn-box{ - display: flex; - align-items: center; - margin-right: 34px; - height: 100%; - transition: all .17s ease-in-out; - button{ - position: relative; - font-size: 12px; - font-weight: 400; - height: 100%; - color: #fff; - padding-right: 12px; - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 5px; - height: 8px; - background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; - } - } - &:last-child{ - margin-right: 0; - } - &.mouse{ - opacity: 0.55; - } - } - } - } - &.active{ - top: 47px; - } - } - &.active{ - padding-bottom: 50px; - } -} - -// canvas-layout -.canvas-layout{ - .canvas-page-list{ - display: flex; - background-color: #1C1C1C; - border-top: 1px solid #000; - width: 100%; - .canvas-plane-wrap{ - display: flex; - align-items: center; - max-width: calc(100% - 45px); - .canvas-page-box{ - display: flex; - align-items: center; - background-color: #1c1c1c; - padding: 9.6px 20px; - border-right:1px solid #000; - min-width: 0; - transition: all .17s ease-in-out; - span{ - display: flex; - align-items: center; - width: 100%; - font-size: 12px; - font-family: 'Pretendard', sans-serif; - color: #AAA; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .close{ - flex: none; - display: block; - width: 7px; - height: 8px; - margin-left: 15px; - background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; - background-size: cover; - } - &.on{ - background-color: #fff; - span{ - font-weight: 600; - color: #101010; - } - .close{ - background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; - } - &:hover{ - background-color: #fff; - } - } - &:hover{ - background-color: #000; - } - } - } - .plane-add{ - display: flex; - align-items: center; - justify-content: center; - width: 45px; - padding: 13.5px 0; - background-color: #1C1C1C; - border-right: 1px solid #000; - transition: all .17s ease-in-out; - span{ - display: block; - width: 9px; - height: 9px; - background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; - background-size: cover; - } - &:hover{ - background-color: #000; - } - } - } -} - -.canvas-frame{ - position: relative; - height: calc(100% - 36.5px); - background-color: #fff; - canvas{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -// sub-page -.sub-header{ - position: fixed; - top: 46px; - left: 0; - width: 100%; - height: 46px; - border-bottom: 1px solid #000; - background: #2C2C2C; + display: flex; + align-items: center; + padding: 0 40px 0 20px; + background-color: #2c2c2c; z-index: 999; - .sub-header-inner{ + .canvas-menu-list { + display: flex; + align-items: center; + height: 100%; + .canvas-menu-item { display: flex; align-items: center; height: 100%; - padding: 0 100px; - .sub-header-title-wrap{ - display: flex; - align-items: center; - .title-item{ - position: relative; - padding: 0 24px; - a{ - display: flex; - align-items: center; - .icon{ - width: 22px; - height: 22px; - margin-right: 8px; - background-repeat: no-repeat; - background-position: center; - background-size: cover; - &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);} - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 16px; - background-color: #D9D9D9; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - &:after{ - display: none; - } - } + button { + display: flex; + align-items: center; + font-size: 12px; + height: 100%; + color: #fff; + font-weight: 600; + padding: 15px 20px; + opacity: 0.55; + transition: all 0.17s ease-in-out; + .menu-icon { + display: block; + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + margin-right: 10px; + &.con00 { + background-image: url(/static/images/canvas/menu_icon00.svg); } + &.con01 { + background-image: url(/static/images/canvas/menu_icon01.svg); + } + &.con02 { + background-image: url(/static/images/canvas/menu_icon02.svg); + } + &.con03 { + background-image: url(/static/images/canvas/menu_icon03.svg); + } + &.con04 { + background-image: url(/static/images/canvas/menu_icon04.svg); + } + &.con05 { + background-image: url(/static/images/canvas/menu_icon05.svg); + } + &.con06 { + background-image: url(/static/images/canvas/menu_icon06.svg); + } + } } - .sub-header-title{ - font-size: 16px; + &.active { + background-color: #383838; + button { + opacity: 1; + } + } + } + } + .canvas-side-btn-wrap { + display: flex; + align-items: center; + margin-left: auto; + .select-box { + width: 124px; + margin-right: 5px; + > div { + width: 100%; + } + } + .btn-from { + display: flex; + align-items: center; + gap: 5px; + button { + display: block; + width: 30px; + height: 30px; + border-radius: 2px; + background-color: #3d3d3d; + background-position: center; + background-repeat: no-repeat; + background-size: 15px 15px; + transition: all 0.17s ease-in-out; + &.btn01 { + background-image: url(../../public/static/images/canvas/side_icon03.svg); + } + &.btn02 { + background-image: url(../../public/static/images/canvas/side_icon02.svg); + } + &.btn03 { + background-image: url(../../public/static/images/canvas/side_icon01.svg); + } + &.btn04 { + background-image: url(../../public/static/images/canvas/side_icon04.svg); + } + &.btn05 { + background-image: url(../../public/static/images/canvas/side_icon05.svg); + } + &.btn06 { + background-image: url(../../public/static/images/canvas/side_icon06.svg); + } + &.btn07 { + background-image: url(../../public/static/images/canvas/side_icon07.svg); + } + &.btn08 { + background-image: url(../../public/static/images/canvas/side_icon08.svg); + } + &.btn09 { + background-image: url(../../public/static/images/canvas/side_icon09.svg); + } + &:hover { + background-color: #1083e3; + } + &.active { + background-color: #1083e3; + } + } + } + .ico-btn-from { + display: flex; + align-items: center; + gap: 5px; + button { + .ico { + display: block; + width: 15px; + height: 15px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + &.ico01 { + background-image: url(../../public/static/images/canvas/ico-flx01.svg); + } + &.ico02 { + background-image: url(../../public/static/images/canvas/ico-flx02.svg); + } + &.ico03 { + background-image: url(../../public/static/images/canvas/ico-flx03.svg); + } + &.ico04 { + background-image: url(../../public/static/images/canvas/ico-flx04.svg); + } + } + .name { + font-size: 12px; color: #fff; - font-weight: 600; + } } - .sub-header-location{ - margin-left: auto; - display: flex; - align-items: center; - .location-item{ - position: relative; - display: flex; - align-items: center; - padding: 0 10px; - span{ - display: flex; - font-size: 12px; - color: #AAA; - font-weight: normal; - cursor: default; - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4px; - height: 6px; - background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center; - } - &:first-child{ - padding-left: 0; - } - &:last-child{ - padding-right: 0; - span{ - color: #fff; - } - &:after{ - display: none; - } - } - } + &.form06 { + .name { + font-size: 13px; + } } - } -} - -// sub content -.sub-content{ - padding-top: 46px; - .sub-content-inner{ - max-width: 1720px; - margin: 0 auto; - padding-top: 20px; - .sub-content-box{ - margin-bottom: 20px; - &:last-child{ - margin-bottom: 0; - } - } - } - &.estimate{ + } + .vertical-horizontal { display: flex; - flex-direction: column; - height: calc(100% - 36.5px); - overflow-y: auto; - padding-top: 0; - .sub-content-inner{ - flex: 1; - width: 100%; + min-width: 170px; + height: 28px; + margin: 0 5px; + border-radius: 2px; + background: #373737; + line-height: 28px; + overflow: hidden; + span { + padding: 0 10px; + font-size: 13px; + color: #fff; } - } -} -.sub-table-box{ - padding: 20px; - border-radius: 6px; - border: 1px solid #E9EAED; - background: #FFF; - box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); - .table-box-title-wrap{ - display: flex; - align-items: center; - margin-bottom: 15px; - .title-wrap{ - display: flex; - align-items: center; - h3{ - display: block; - font-size: 15px; - color: #101010; - font-weight: 600; - margin-right: 14px; - &.product{ - margin-right: 10px; - } - } - .product_tit{ - position: relative; - font-size: 15px; - font-weight: 600; - color: #1083E3; - padding-left: 10px; - &::before{ - content: ''; - position: absolute; - top: 50%; - left: 0; - transform: translateY(-50%); - width: 1px; - height: 11px; - background-color: #D9D9D9; - } - } - .option{ - padding-left: 5px; - font-size: 13px; - color: #101010; - font-weight: 400; - } - .info-wrap{ - display: flex; - align-items: center; - li{ - position: relative; - padding: 0 6px; - font-size: 12px; - color: #101010; - font-weight: normal; - span{ - font-weight: 600; - &.red{ - color: #E23D70; - } - } - &:after{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 11px; - background-color: #D9D9D9; - } - &:first-child{padding-left: 0;} - &:last-child{padding-right: 0;&::after{display: none;}} - } - } + button { + margin-left: auto; + height: 100%; + background-color: #4b4b4b; + font-size: 13px; + font-weight: 400; + color: #fff; + padding: 0 7.5px; + transition: all 0.17s ease-in-out; } - } - .left-unit-box{ - margin-left: auto; - display: flex; - align-items: center; - } - .promise-gudie{ - display: block; - font-size: 13px; - font-weight: 700; - color: #101010; - margin-bottom: 20px; - } - .important{ - color: #f00; - } - .sub-center-footer{ + &.on { + button { + background-color: #1083e3; + } + } + } + .size-control { display: flex; align-items: center; justify-content: center; - margin-top: 20px; - } - .sub-right-footer{ - display: flex; - align-items: center; - justify-content: flex-end; - margin-top: 20px; - } -} -.pagination-wrap{ - margin-top: 24px; -} - -.infomation-wrap{ - margin-bottom: 30px; -} - -.infomation-box-wrap{ - display: flex; - align-items: center; - gap: 10px; - .sub-table-box{ - flex: 1 ; - } - .info-title{ - font-size: 14px; - font-weight: 500; - color: #344356; - margin-bottom: 10px; - } - .info-inner{ - position: relative; - font-size: 13px; - color: #344356; - .copy-ico{ - position: absolute; - bottom: 0; - right: 0; - width: 16px; - height: 16px; - background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center; - background-size: cover; + gap: 10px; + background-color: #3d3d3d; + border-radius: 2px; + width: 100px; + height: 30px; + margin: 0 5px; + span { + font-size: 13px; + color: #fff; } + .control-btn { + display: block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + &.minus { + background-image: url(../../public/static/images/canvas/minus.svg); + } + &.plus { + background-image: url(../../public/static/images/canvas/plus.svg); + } + } + } } -} - -// 견적서 -.estimate-list-wrap{ - display: flex; - align-items: center; - margin-bottom: 10px; - &.one{ - .estimate-box{ - &:last-child{ - min-width: unset; - } - } - } - .estimate-box{ - flex: 1 ; - display: flex; - align-items: center; - &:last-child{ - flex: none; - min-width: 220px; - } - .estimate-tit{ - width: 105px; - height: 30px; - line-height: 30px; - background-color: #F4F4F7; - border-radius: 100px; - text-align: center; - font-size: 13px; - font-weight: 500; - color: #344356; - } - .estimate-name{ - font-size: 13px; - color: #344356; - margin-left: 14px; - font-weight: 400; - &.blue{ - font-size: 16px; - font-weight: 700; - color: #1083E3; - } - &.red{ - font-size: 16px; - font-weight: 700; - color: #D72A2A; - } - } - } - &:last-child{ - margin-bottom: 0; - } -} - -// file drag box -.drag-file-box{ - padding: 10px; - .btn-area{ - padding-bottom: 15px; - border-bottom: 1px solid #ECF0F4; - } - .drag-file-area{ - position: relative; - margin-top: 15px; - p{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 13px; - color: #ccc; - font-weight: 400; - cursor: default; - } - } - .file-list{ - .file-item{ - margin-bottom: 15px; - span{ - position: relative; - font-size: 13px; - color: #45576F; - font-weight: 400; - white-space: nowrap; - padding-right: 55px; - button{ - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 15px; - height: 15px; - background: url(../../public/static/images/sub/file_delete.svg)no-repeat center; - background-size: cover; - } - } - &:last-child{ - margin-bottom: 0; - } - } - } -} - -.special-note-check-wrap{ - display: grid; - grid-template-columns: repeat(5, 1fr); - border: 1px solid #ECF0F4; - border-radius: 3px; - margin-bottom: 30px; - .special-note-check-item{ - padding: 14px 10px; - border-right: 1px solid #ECF0F4; - border-top: 1px solid #ECF0F4; - &:nth-child(5n){ - border-right: none; - } - &:nth-child(-n+5){ - border-top: none; - } - &.act{ - background-color: #F7F9FA; - } - } -} - -.calculation-estimate{ - border: 1px solid #ECF0F4; - border-radius: 3px; - padding: 24px; - max-height: 350px; - overflow-y: auto; - margin-bottom: 30px; - dl{ - margin-bottom: 35px; - &:last-child{ - margin-bottom: 0; - } - dt{ - font-size: 13px; - font-weight: 600; - color: #1083E3; - margin-bottom: 15px; - } - dd{ - font-size: 12px; - font-weight: 400; - color: #45576F; - margin-bottom: 8px; - &:last-child{ - margin-bottom: 0; - } - } - } - &::-webkit-scrollbar { - width: 4px; - background-color: transparent; - } - &::-webkit-scrollbar-thumb { - background-color: #d9dee2; - } - &::-webkit-scrollbar-track { - background-color: transparent; - } -} -.esimate-wrap{ - margin-bottom: 20px; -} - -.estimate-product-option{ - display: flex; - align-items: center; - margin-bottom: 15px; - .product-price-wrap{ - display: flex; - align-items: center; - .product-price-tit{ - font-size: 13px; - font-weight: 400; - color: #45576F; - margin-right: 10px; - } - .select-wrap{ - width: 110px; - } - } - .product-edit-wrap{ - display: flex; - align-items: center; - margin-left: auto; - .product-edit-explane{ - display: flex; - align-items: center; - margin-right: 15px; - .attachment-required{ - position: relative; - display: flex; - align-items: center; - font-size: 12px; - font-weight: 400; - color: #45576F; - padding-right: 10px; - .ico{ - width: 23px; - height: 23px; - margin-right: 5px; - background: url(../../public/static/images/sub/attachment_ico.svg)no-repeat center; - background-size: cover; - } - &::before{ - content: ''; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 1px; - height: 12px; - background-color: #D9D9D9; - } - } - .click-check{ - display: flex; - align-items: center; - font-size: 12px; - font-weight: 400; - color: #F16A6A ; - padding-left: 10px; - .ico{ - width: 14px; - height: 14px; - margin-right: 5px; - background: url(../../public/static/images/sub/click_check_ico.svg)no-repeat center; - background-size: cover; - } - } - } - .product-edit-btn{ - display: flex; - align-items: center; - button{ - display: flex; - align-items: center; - span{ - width: 13px; - height: 13px; - margin-right: 5px; - background-size: cover; - &.plus{ - background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center; - } - &.minus{ - background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center; - } - } - } - } - } - -} - -// 발전시물레이션 -.chart-wrap{ - display: flex; - gap: 20px; + } + .canvas-depth2-wrap { + position: absolute; + top: -100%; + left: 0; + background-color: #383838; width: 100%; - .sub-table-box{ - height: 100%; - } - .chart-inner{ - flex: 1; - .chart-box{ - margin-bottom: 30px; - } - } - .chart-table-wrap{ + height: 50px; + transition: all 0.17s ease-in-out; + .canvas-depth2-inner { + display: flex; + align-items: center; + padding: 0 40px; + height: 100%; + .canvas-depth2-list { display: flex; - flex-direction: column; - flex: none; - width: 650px; - .sub-table-box{ - flex: 1; - &:first-child{ - margin-bottom: 20px; - } - } - } -} - -.chart-month-table{ - table{ - table-layout: fixed; - border-collapse:collapse; - border: 1px solid #ECF0F4; - border-radius: 4px; - thead{ - th{ - padding: 4.5px 0; - border-bottom: 1px solid #ECF0F4; - text-align: center; - font-size: 13px; - color: #45576F; - font-weight: 500; - background-color: #F8F9FA; - } - } - tbody{ - td{ - font-size: 13px; - color: #45576F; - text-align: center; - padding: 4.5px 0; - } - } - } -} - -.simulation-guide-wrap{ - display: flex; - padding: 20px; - .simulation-tit-wrap{ - padding-right: 40px; - border-right: 1px solid #EEEEEE; - span{ - display: block; + align-items: center; + height: 100%; + .canvas-depth2-item { + display: flex; + align-items: center; + margin-right: 26px; + height: 100%; + button { position: relative; - padding-left: 60px; - font-size: 15px; - color: #14324F; - font-weight: 600; - &::before{ + opacity: 0.55; + color: #fff; + font-size: 12px; + font-weight: normal; + height: 100%; + padding-right: 12px; + } + &.active { + button { + opacity: 1; + font-weight: 600; + &:after { content: ''; position: absolute; top: 50%; - left: 0; + right: 0; transform: translateY(-50%); - width: 40px; - height: 40px; - background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center; - background-size: cover; + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } } + } } - } - .simulation-guide-box{ - padding-left: 40px; - dl{ - margin-bottom: 25px; - dt{ - font-size: 13px; - color: #101010; - font-weight: 600; - margin-bottom: 5px; - } - dd{ - font-size: 12px; - color: #45576F; - font-weight: 400; - line-height: 24px; - } - &:last-child{ - margin-bottom: 0; + } + .canvas-depth2-btn-list { + display: flex; + align-items: center; + margin-left: auto; + height: 100%; + .depth2-btn-box { + display: flex; + align-items: center; + margin-right: 34px; + height: 100%; + transition: all 0.17s ease-in-out; + button { + position: relative; + font-size: 12px; + font-weight: 400; + height: 100%; + color: #fff; + padding-right: 12px; + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; } + } + &:last-child { + margin-right: 0; + } + &.mouse { + opacity: 0.55; + } } + } } + &.active { + top: 47px; + } + } + &.active { + padding-bottom: 50px; + } } -.module-total{ +// canvas-layout +.canvas-content { + padding-top: 46.8px; + transition: all 0.17s ease-in-out; + .canvas-frame { + height: 86.3vh; + } + &.active { + padding-top: calc(46.8px + 50px); + .canvas-frame { + height: 81vh; + } + } +} +.canvas-layout { + padding-top: 37px; + .canvas-page-list { + position: fixed; + top: 92.8px; + left: 0; + display: flex; + background-color: #1c1c1c; + border-top: 1px solid #000; + width: 100%; + transition: all 0.17s ease-in-out; + z-index: 999; + &.active { + top: calc(92.8px + 50px); + } + .canvas-plane-wrap { + display: flex; + align-items: center; + max-width: calc(100% - 45px); + .canvas-page-box { + display: flex; + align-items: center; + background-color: #1c1c1c; + padding: 9.6px 20px; + border-right: 1px solid #000; + min-width: 0; + transition: all 0.17s ease-in-out; + span { + display: flex; + align-items: center; + width: 100%; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + color: #aaa; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .close { + flex: none; + display: block; + width: 7px; + height: 8px; + margin-left: 15px; + background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center; + background-size: cover; + } + &.on { + background-color: #fff; + span { + font-weight: 600; + color: #101010; + } + .close { + background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center; + } + &:hover { + background-color: #fff; + } + } + &:hover { + background-color: #000; + } + } + } + .plane-add { + display: flex; + align-items: center; + justify-content: center; + width: 45px; + padding: 13.5px 0; + background-color: #1c1c1c; + border-right: 1px solid #000; + transition: all 0.17s ease-in-out; + span { + display: block; + width: 9px; + height: 9px; + background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center; + background-size: cover; + } + &:hover { + background-color: #000; + } + } + } +} + +.canvas-frame { + position: relative; + // height: calc(100% - 36.5px); + background-color: #f4f4f7; + overflow: auto; + transition: all 0.17s ease-in-out; + // &::-webkit-scrollbar { + // width: 10px; + // height: 10px; + // background-color: #fff; + // } + // &::-webkit-scrollbar-thumb { + // background-color: #C1CCD7; + // border-radius: 30px; + // } + // &::-webkit-scrollbar-track { + // background-color: #fff; + // } + canvas { + background-color: #fff; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// sub-page +.sub-header { + position: fixed; + top: 46px; + left: 0; + width: 100%; + height: 46px; + border-bottom: 1px solid #000; + background: #2c2c2c; + z-index: 999; + .sub-header-inner { display: flex; align-items: center; - background-color: #F8F9FA; - padding: 9px 0; - margin-right: 4px; - border: 1px solid #ECF0F4; - border-top: none; - .total-title{ - flex: 1; + height: 100%; + padding: 0 100px; + .sub-header-title-wrap { + display: flex; + align-items: center; + .title-item { + position: relative; + padding: 0 24px; + a { + display: flex; + align-items: center; + .icon { + width: 22px; + height: 22px; + margin-right: 8px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + &.drawing { + background-image: url(../../public/static/images/main/drawing_icon.svg); + } + } + } + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 16px; + background-color: #d9d9d9; + } + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + &:after { + display: none; + } + } + } + } + .sub-header-title { + font-size: 16px; + color: #fff; + font-weight: 600; + } + .sub-header-location { + margin-left: auto; + display: flex; + align-items: center; + .location-item { + position: relative; + display: flex; + align-items: center; + padding: 0 10px; + span { + display: flex; + font-size: 12px; + color: #aaa; + font-weight: normal; + cursor: default; + } + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 4px; + height: 6px; + background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center; + } + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + span { + color: #fff; + } + &:after { + display: none; + } + } + } + } + } +} + +// sub content +.sub-content { + padding-top: 46px; + .sub-content-inner { + max-width: 1720px; + margin: 0 auto; + padding-top: 20px; + .sub-content-box { + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + } + } + &.estimate { + display: flex; + flex-direction: column; + padding-top: 0; + .sub-content-inner { + flex: 1; + width: 100%; + } + } +} +.sub-table-box { + padding: 20px; + border-radius: 6px; + border: 1px solid #e9eaed; + background: #fff; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .table-box-title-wrap { + display: flex; + align-items: center; + margin-bottom: 15px; + .title-wrap { + display: flex; + align-items: center; + h3 { + display: block; + font-size: 15px; + color: #101010; + font-weight: 600; + margin-right: 14px; + &.product { + margin-right: 10px; + } + } + .product_tit { + position: relative; + font-size: 15px; + font-weight: 600; + color: #1083e3; + padding-left: 10px; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #d9d9d9; + } + } + .option { + padding-left: 5px; + font-size: 13px; + color: #101010; + font-weight: 400; + } + .info-wrap { + display: flex; + align-items: center; + li { + position: relative; + padding: 0 6px; + font-size: 12px; + color: #101010; + font-weight: normal; + span { + font-weight: 600; + &.red { + color: #e23d70; + } + } + &:after { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 11px; + background-color: #d9d9d9; + } + &:first-child { + padding-left: 0; + } + &:last-child { + padding-right: 0; + &::after { + display: none; + } + } + } + } + } + } + .left-unit-box { + margin-left: auto; + display: flex; + align-items: center; + } + .promise-gudie { + display: block; + font-size: 13px; + font-weight: 700; + color: #101010; + margin-bottom: 20px; + } + .important { + color: #f00; + } + .sub-center-footer { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + } + .sub-right-footer { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 20px; + } +} +.pagination-wrap { + margin-top: 24px; +} + +.infomation-wrap { + margin-bottom: 30px; +} + +.infomation-box-wrap { + display: flex; + align-items: center; + gap: 10px; + .sub-table-box { + flex: 1; + } + .info-title { + font-size: 14px; + font-weight: 500; + color: #344356; + margin-bottom: 10px; + } + .info-inner { + position: relative; + font-size: 13px; + color: #344356; + .copy-ico { + position: absolute; + bottom: 0; + right: 0; + width: 16px; + height: 16px; + background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center; + background-size: cover; + } + } +} + +// 견적서 +.estimate-list-wrap { + display: flex; + align-items: center; + margin-bottom: 10px; + &.one { + .estimate-box { + &:last-child { + min-width: unset; + } + } + } + .estimate-box { + flex: 1; + display: flex; + align-items: center; + &:last-child { + flex: none; + min-width: 220px; + } + .estimate-tit { + width: 105px; + height: 30px; + line-height: 30px; + background-color: #f4f4f7; + border-radius: 100px; + text-align: center; + font-size: 13px; + font-weight: 500; + color: #344356; + } + .estimate-name { + font-size: 13px; + color: #344356; + margin-left: 14px; + font-weight: 400; + &.blue { + font-size: 16px; + font-weight: 700; + color: #1083e3; + } + &.red { + font-size: 16px; + font-weight: 700; + color: #d72a2a; + } + } + } + &:last-child { + margin-bottom: 0; + } +} + +// file drag box +.drag-file-box { + padding: 10px; + .btn-area { + padding-bottom: 15px; + border-bottom: 1px solid #ecf0f4; + } + .drag-file-area { + position: relative; + margin-top: 15px; + p { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 13px; + color: #ccc; + font-weight: 400; + cursor: default; + } + } + .file-list { + .file-item { + margin-bottom: 15px; + span { + position: relative; + font-size: 13px; + color: #45576f; + font-weight: 400; + white-space: nowrap; + padding-right: 55px; + button { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 15px; + height: 15px; + background: url(../../public/static/images/sub/file_delete.svg) no-repeat center; + background-size: cover; + } + } + &:last-child { + margin-bottom: 0; + } + } + } +} + +.special-note-check-wrap { + display: grid; + grid-template-columns: repeat(5, 1fr); + border: 1px solid #ecf0f4; + border-radius: 3px; + margin-bottom: 30px; + .special-note-check-item { + padding: 14px 10px; + border-right: 1px solid #ecf0f4; + border-top: 1px solid #ecf0f4; + &:nth-child(5n) { + border-right: none; + } + &:nth-child(-n + 5) { + border-top: none; + } + &.act { + background-color: #f7f9fa; + } + } +} + +.calculation-estimate { + border: 1px solid #ecf0f4; + border-radius: 3px; + padding: 24px; + max-height: 350px; + overflow-y: auto; + margin-bottom: 30px; + dl { + margin-bottom: 35px; + &:last-child { + margin-bottom: 0; + } + dt { + font-size: 13px; + font-weight: 600; + color: #1083e3; + margin-bottom: 15px; + } + dd { + font-size: 12px; + font-weight: 400; + color: #45576f; + margin-bottom: 8px; + &:last-child { + margin-bottom: 0; + } + } + } + &::-webkit-scrollbar { + width: 4px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + background-color: #d9dee2; + } + &::-webkit-scrollbar-track { + background-color: transparent; + } +} +.esimate-wrap { + margin-bottom: 20px; +} + +.estimate-product-option { + display: flex; + align-items: center; + margin-bottom: 15px; + .product-price-wrap { + display: flex; + align-items: center; + .product-price-tit { + font-size: 13px; + font-weight: 400; + color: #45576f; + margin-right: 10px; + } + .select-wrap { + width: 110px; + } + } + .product-edit-wrap { + display: flex; + align-items: center; + margin-left: auto; + .product-edit-explane { + display: flex; + align-items: center; + margin-right: 15px; + .attachment-required { + position: relative; + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #45576f; + padding-right: 10px; + .ico { + width: 23px; + height: 23px; + margin-right: 5px; + background: url(../../public/static/images/sub/attachment_ico.svg) no-repeat center; + background-size: cover; + } + &::before { + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 12px; + background-color: #d9d9d9; + } + } + .click-check { + display: flex; + align-items: center; + font-size: 12px; + font-weight: 400; + color: #f16a6a; + padding-left: 10px; + .ico { + width: 14px; + height: 14px; + margin-right: 5px; + background: url(../../public/static/images/sub/click_check_ico.svg) no-repeat center; + background-size: cover; + } + } + } + .product-edit-btn { + display: flex; + align-items: center; + button { + display: flex; + align-items: center; + span { + width: 13px; + height: 13px; + margin-right: 5px; + background-size: cover; + &.plus { + background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center; + } + &.minus { + background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center; + } + } + } + } + } +} + +// 발전시물레이션 +.chart-wrap { + display: flex; + gap: 20px; + width: 100%; + .sub-table-box { + height: 100%; + } + .chart-inner { + flex: 1; + .chart-box { + margin-bottom: 30px; + } + } + .chart-table-wrap { + display: flex; + flex-direction: column; + flex: none; + width: 650px; + .sub-table-box { + flex: 1; + &:first-child { + margin-bottom: 20px; + } + } + } +} + +.chart-month-table { + table { + table-layout: fixed; + border-collapse: collapse; + border: 1px solid #ecf0f4; + border-radius: 4px; + thead { + th { + padding: 4.5px 0; + border-bottom: 1px solid #ecf0f4; text-align: center; font-size: 13px; - color: #344356; + color: #45576f; font-weight: 500; + background-color: #f8f9fa; + } } - .total-num{ - flex: none; - width: 121px; + tbody { + td { + font-size: 13px; + color: #45576f; text-align: center; - font-size: 15px; - color: #344356; - font-weight: 500; + padding: 4.5px 0; + } } + } +} + +.simulation-guide-wrap { + display: flex; + padding: 20px; + .simulation-tit-wrap { + padding-right: 40px; + border-right: 1px solid #eeeeee; + span { + display: block; + position: relative; + padding-left: 60px; + font-size: 15px; + color: #14324f; + font-weight: 600; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 40px; + height: 40px; + background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center; + background-size: cover; + } + } + } + .simulation-guide-box { + padding-left: 40px; + dl { + margin-bottom: 25px; + dt { + font-size: 13px; + color: #101010; + font-weight: 600; + margin-bottom: 5px; + } + dd { + font-size: 12px; + color: #45576f; + font-weight: 400; + line-height: 24px; + } + &:last-child { + margin-bottom: 0; + } + } + } +} + +.module-total { + display: flex; + align-items: center; + background-color: #f8f9fa; + padding: 9px 0; + margin-right: 4px; + border: 1px solid #ecf0f4; + border-top: none; + .total-title { + flex: 1; + text-align: center; + font-size: 13px; + color: #344356; + font-weight: 500; + } + .total-num { + flex: none; + width: 121px; + text-align: center; + font-size: 15px; + color: #344356; + font-weight: 500; + } } // 물건상세 -.information-help-wrap{ +.information-help-wrap { + display: flex; + padding: 24px; + background-color: #f4f4f4; + border-radius: 4px; + margin-bottom: 15px; + .information-help-tit-wrap { + position: relative; display: flex; - padding: 24px; - background-color: #F4F4F4; - border-radius: 4px; - margin-bottom: 15px; - .information-help-tit-wrap{ - position: relative; - display: flex; - align-items: center; - padding-right: 40px; - border-right: 1px solid #E0E0E3; - .help-tit-icon{ - width: 40px; - height: 40px; - border-radius: 50%; - margin-right: 10px; - background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center; - background-size: 20px 20px; - } - .help-tit{ - font-size: 13px; - font-weight: 600; - color: #45576F; - } + align-items: center; + padding-right: 40px; + border-right: 1px solid #e0e0e3; + .help-tit-icon { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center; + background-size: 20px 20px; } - .information-help-guide{ - padding-left: 40px; - span{ - display: block; - font-size: 12px; - font-weight: 400; - color: #45576F; - margin-bottom: 7px; - &:last-child{ - margin-bottom: 0; - } - } + .help-tit { + font-size: 13px; + font-weight: 600; + color: #45576f; } + } + .information-help-guide { + padding-left: 40px; + span { + display: block; + font-size: 12px; + font-weight: 400; + color: #45576f; + margin-bottom: 7px; + &:last-child { + margin-bottom: 0; + } + } + } } -.community-search-warp{ +.community-search-warp { + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 0 30px 0; + border-bottom: 1px solid #e5e5e5; + margin-bottom: 24px; + .community-search-box { + position: relative; display: flex; - flex-direction: column; align-items: center; - padding: 10px 0 30px 0; - border-bottom: 1px solid #E5E5E5; - margin-bottom: 24px; - .community-search-box{ - position: relative; - display: flex; - align-items: center; - width: 580px; - height: 45px; - padding: 0 45px 0 20px; - margin-bottom: 20px; - border-radius: 2px; - border: 1px solid #101010; - .community-input{ - width: 100%; - height: 100%; - font-size: 13px; - font-weight: 400; - color: #101010; - &::placeholder{ - color: #C8C8C8; - } - } - .community-search-ico{ - position: absolute; - top: 50%; - right: 20px; - transform: translateY(-50%); - flex: none; - width: 21px; - height: 100%; - background: url(../../public/static/images/sub/community_search.svg)no-repeat center; - background-size: 21px 21px; - z-index: 3; - } + width: 580px; + height: 45px; + padding: 0 45px 0 20px; + margin-bottom: 20px; + border-radius: 2px; + border: 1px solid #101010; + .community-input { + width: 100%; + height: 100%; + font-size: 13px; + font-weight: 400; + color: #101010; + &::placeholder { + color: #c8c8c8; + } } - .community-search-keyword{ - font-size: 13px; - font-weight: 400; - color: #45576F; - span{ - font-weight: 600; - color: #F16A6A; - } + .community-search-ico { + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + flex: none; + width: 21px; + height: 100%; + background: url(../../public/static/images/sub/community_search.svg) no-repeat center; + background-size: 21px 21px; + z-index: 3; } + } + .community-search-keyword { + font-size: 13px; + font-weight: 400; + color: #45576f; + span { + font-weight: 600; + color: #f16a6a; + } + } } // 자료 다운로드 -.file-down-list{ - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 14px; - .file-down-item{ - display: flex; - align-items: center; - padding: 24px; - border-radius: 4px; - border: 1px solid #E5E5E5; - background: #FFF; - transition: all .15s ease-in-out; - cursor: pointer; - .file-item-info{ - .item-num{ - display: inline-block; - padding: 6px 17.5px; - border-radius: 60px; - background-color: #F4F4F7; - font-size: 13px; - font-weight: 600; - color: #101010; - margin-bottom: 15px; - } - .item-name{ - font-size: 16px; - color: #101010; - font-weight: 500; - margin-bottom: 13px; - } - .item-date{ - font-size: 13px; - font-weight: 400; - color: #344356; - } - } - .file-down-box{ - display: flex; - align-items: center; - flex: none; - margin-left: auto; - height: 100%; - .file-down-btn{ - width: 36px; - height: 36px; - background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center; - background-size: cover; - } - } - &:hover{ - background-color: #F4F4F7; - } +.file-down-list { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 14px; + .file-down-item { + display: flex; + align-items: center; + padding: 24px; + border-radius: 4px; + border: 1px solid #e5e5e5; + background: #fff; + transition: all 0.15s ease-in-out; + cursor: pointer; + .file-item-info { + .item-num { + display: inline-block; + padding: 6px 17.5px; + border-radius: 60px; + background-color: #f4f4f7; + font-size: 13px; + font-weight: 600; + color: #101010; + margin-bottom: 15px; + } + .item-name { + font-size: 16px; + color: #101010; + font-weight: 500; + margin-bottom: 13px; + } + .item-date { + font-size: 13px; + font-weight: 400; + color: #344356; + } } -} \ No newline at end of file + .file-down-box { + display: flex; + align-items: center; + flex: none; + margin-left: auto; + height: 100%; + .file-down-btn { + width: 36px; + height: 36px; + background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center; + background-size: cover; + } + } + &:hover { + background-color: #f4f4f7; + } + } +} + +.file-down-nodata { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 148px; + padding: 24px; + border-radius: 4px; + border: 1px solid #e5e5e5; + font-size: 16px; + font-weight: 500; + color: #344356; +} diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 92c9f8c8..6a2a06e6 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -114,12 +114,12 @@ box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); &.item01 { flex: 1; - max-height: 400px; + height: 400px; } &.item02 { flex: none; width: 451px; - max-height: 400px; + height: 400px; } &.item03 { flex: 1; From 7e6b8ffff364aeafadfe2623638a171b14e20c4c Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 18 Oct 2024 18:09:48 +0900 Subject: [PATCH 13/15] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C,=20=EC=99=B8=EB=B2=BD=EC=84=A0=20=ED=91=9C=EC=8B=9C,?= =?UTF-8?q?=20=EC=A7=80=EB=B6=95=EC=84=A0=20=ED=91=9C=EC=8B=9C=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/grid/DotLineGrid.jsx | 6 +- .../modal/setting01/FirstOption.jsx | 3 +- src/hooks/roofcover/useOuterLineWall.js | 7 ++ src/store/settingAtom.js | 103 +++++++++++++++++- 4 files changed, 114 insertions(+), 5 deletions(-) diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index eb5a834e..d9919351 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -7,7 +7,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState import { onlyNumberInputChange } from '@/util/input-utils' import { fabric } from 'fabric' import { gridColorState } from '@/store/gridAtom' -import { settingModalGridOptionsState } from '@/store/settingAtom' +import { gridDisplaySelector, settingModalGridOptionsState } from '@/store/settingAtom' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' @@ -24,6 +24,7 @@ export default function DotLineGrid(props) { const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState) const gridColor = useRecoilValue(gridColorState) const canvas = useRecoilValue(canvasState) + const isGridDisplay = useRecoilValue(gridDisplaySelector) const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState) const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState) @@ -179,6 +180,7 @@ export default function DotLineGrid(props) { fill: pattern, selectable: false, name: 'dotGrid', + visible: isGridDisplay, }, ) @@ -209,6 +211,7 @@ export default function DotLineGrid(props) { strokeDashArray: [5, 2], opacity: 0.3, direction: 'horizontal', + visible: isGridDisplay, }, ) canvas.add(horizontalLine) @@ -235,6 +238,7 @@ export default function DotLineGrid(props) { strokeDashArray: [5, 2], opacity: 0.3, direction: 'vertical', + visible: isGridDisplay, }, ) canvas.add(verticalLine) diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index bd24d738..848596ba 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -1,10 +1,9 @@ import { useRecoilState } from 'recoil' -import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom' +import { settingModalSecondOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' import React, { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' -import { adsorptionPointAddModeState } from '@/store/canvasAtom' import { useFirstOption } from '@/hooks/option/useFirstOption' export default function FirstOption() { diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js index 85c37015..4b4987af 100644 --- a/src/hooks/roofcover/useOuterLineWall.js +++ b/src/hooks/roofcover/useOuterLineWall.js @@ -30,6 +30,7 @@ import { import { calculateAngle } from '@/util/qpolygon-utils' import { fabric } from 'fabric' import { QLine } from '@/components/fabric/QLine' +import { outlineDisplaySelector } from '@/store/settingAtom' //외벽선 그리기 export function useOuterLineWall(setShowOutlineModal) { @@ -53,6 +54,8 @@ export function useOuterLineWall(setShowOutlineModal) { const adsorptionRange = useRecoilValue(adsorptionRangeState) const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격 + const isOutlineDisplay = useRecoilValue(outlineDisplaySelector) + const length1Ref = useRef(null) const length2Ref = useRef(null) const angle1Ref = useRef(null) @@ -253,6 +256,7 @@ export function useOuterLineWall(setShowOutlineModal) { strokeWidth: 1, selectable: false, name: 'helpGuideLine', + visible: isOutlineDisplay, }) } else { const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], { @@ -260,6 +264,7 @@ export function useOuterLineWall(setShowOutlineModal) { strokeWidth: 1, strokeDashArray: [1, 1, 1], name: 'helpGuideLine', + visible: isOutlineDisplay, }) const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], { @@ -267,6 +272,7 @@ export function useOuterLineWall(setShowOutlineModal) { strokeWidth: 1, strokeDashArray: [1, 1, 1], name: 'helpGuideLine', + visible: isOutlineDisplay, }) } } @@ -283,6 +289,7 @@ export function useOuterLineWall(setShowOutlineModal) { y1: point1.y, x2: point2.x, y2: point2.y, + visible: isOutlineDisplay, }) } diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 6ec454be..8560c700 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -15,12 +15,12 @@ export const settingModalFirstOptionsState = atom({ { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false }, ], dimensionDisplay: [ - { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false }, + { id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true }, { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false }, { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false }, ], option2: [ - { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false }, + { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true }, { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false }, { id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false }, ], @@ -57,3 +57,102 @@ export const settingModalGridOptionsState = atom({ ], dangerouslyAllowMutability: true, }) + +// 디스플레이 설정 - 할당 표시 +export const allocDisplaySelector = selector({ + key: 'allocDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'allocDisplay').selected + }, +}) + +// 디스플레이 설정 - 외벽선 표시 +export const outlineDisplaySelector = selector({ + key: 'outlineDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'outlineDisplay').selected + }, +}) + +// 디스플레이 설정 - 그리드 표시 +export const gridDisplaySelector = selector({ + key: 'gridDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'gridDisplay').selected + }, +}) + +// 디스플레이 설정 - 지붕선 표시 +export const roofLineDisplaySelector = selector({ + key: 'lineDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'lineDisplay').selected + }, +}) + +// 디스플레이 설정 - 문자 표시 +export const wordDisplaySelector = selector({ + key: 'wordDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'wordDisplay').selected + }, +}) + +// 디스플레이 설정 - 회로번호 표시 +export const circuitNumDisplaySelector = selector({ + key: 'circuitNumDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'circuitNumDisplay').selected + }, +}) + +// 디스플레이 설정 - 흐름 방향 표시 +export const flowDisplaySelector = selector({ + key: 'flowDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'flowDisplay').selected + }, +}) + +// 디스플레이 설정 - 가대 표시 +export const trestleDisplaySelector = selector({ + key: 'trestleDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'trestleDisplay').selected + }, +}) + +// 디스플레이 설정 - 집계표 표시 +export const totalDisplaySelector = selector({ + key: 'totalDisplaySelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.option1.find((option) => option.column === 'totalDisplay').selected + }, +}) + +// 디스플레이 설정 - 치수 표시 +export const corridorDimensionSelector = selector({ + key: 'corridorDimensionSelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected) + }, +}) + +// 디스플레이 설정 - 화면 표시 +export const realDimensionSelector = selector({ + key: 'realDimensionSelector', + get: ({ get }) => { + const settingModalFirstOptions = get(settingModalFirstOptionsState) + return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected) + }, +}) From 5085134c685244204aba0968eff830bf7c308e30 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 18 Oct 2024 18:10:37 +0900 Subject: [PATCH 14/15] refactor: Modify getMessage function --- src/app/QcastProvider.js | 25 +++++++++++-------------- src/hooks/useMessage.js | 11 +++++++---- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js index 3ae0993d..84a5638e 100644 --- a/src/app/QcastProvider.js +++ b/src/app/QcastProvider.js @@ -1,27 +1,24 @@ 'use client' -import { useEffect } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' -import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' import { ErrorBoundary } from 'next/dist/client/components/error-boundary' import ServerError from './error' import '@/styles/common.scss' -import KO from '@/locales/ko.json' -import JA from '@/locales/ja.json' +// import KO from '@/locales/ko.json' +// import JA from '@/locales/ja.json' export const QcastProvider = ({ children }) => { - const globalLocale = useRecoilValue(globalLocaleStore) - const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) + // const globalLocale = useRecoilValue(globalLocaleStore) + // const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) - useEffect(() => { - if (globalLocale === 'ko') { - setAppMessageState(KO) - } else { - setAppMessageState(JA) - } - }, [globalLocale]) + // useEffect(() => { + // if (globalLocale === 'ko') { + // setAppMessageState(KO) + // } else { + // setAppMessageState(JA) + // } + // }, [globalLocale]) return ( <> diff --git a/src/hooks/useMessage.js b/src/hooks/useMessage.js index f336f0b7..3a2fc316 100644 --- a/src/hooks/useMessage.js +++ b/src/hooks/useMessage.js @@ -1,14 +1,17 @@ +import { useEffect } from 'react' import { useRecoilValue } from 'recoil' -import { appMessageStore } from '@/store/localeAtom' +import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' -// import KO from '@/locales/ko.json' -// import JA from '@/locales/ja.json' +import KO from '@/locales/ko.json' +import JA from '@/locales/ja.json' const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE' export const useMessage = () => { // const globalLocale = useRecoilValue(globalLocaleState) - const appMessageState = useRecoilValue(appMessageStore) + // const appMessageState = useRecoilValue(appMessageStore) + const globalLocale = useRecoilValue(globalLocaleStore) + const appMessageState = globalLocale === 'ko' ? KO : JA const getMessage = (key, args = []) => { // if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) { From 0262e47dd32fd5394681c6c74987652ec09847ca Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Fri, 18 Oct 2024 18:20:04 +0900 Subject: [PATCH 15/15] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=20=EC=9E=84=EC=9D=98=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?= =?UTF-8?q?=EB=B0=8F=20=ED=9D=A1=EC=B0=A9=EC=A0=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useAdsorptionPoint.js | 4 +++- src/hooks/useEvent.js | 1 + src/hooks/useTempGrid.js | 4 ++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/hooks/useAdsorptionPoint.js b/src/hooks/useAdsorptionPoint.js index 49d49714..396db98c 100644 --- a/src/hooks/useAdsorptionPoint.js +++ b/src/hooks/useAdsorptionPoint.js @@ -2,13 +2,14 @@ import { useRecoilState, useRecoilValue } from 'recoil' import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom' import { fabric } from 'fabric' import { useMouse } from '@/hooks/useMouse' +import { gridDisplaySelector } from '@/store/settingAtom' export function useAdsorptionPoint() { const canvas = useRecoilValue(canvasState) const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState) const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState) const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState) - + const isGridDisplay = useRecoilValue(gridDisplaySelector) const { getIntersectMousePoint } = useMouse() const getAdsorptionPoints = () => { @@ -28,6 +29,7 @@ export function useAdsorptionPoint() { y: pointer.y, selectable: true, name: 'adsorptionPoint', + visible: isGridDisplay, }) canvas.add(adsorptionPoint) diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index ee41988d..a84dea38 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -6,6 +6,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' import { useDotLineGrid } from '@/hooks/useDotLineGrid' import { useTempGrid } from '@/hooks/useTempGrid' +import { gridDisplaySelector } from '@/store/settingAtom' export function useEvent() { const canvas = useRecoilValue(canvasState) diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js index 8d7bac42..30847a2f 100644 --- a/src/hooks/useTempGrid.js +++ b/src/hooks/useTempGrid.js @@ -1,11 +1,13 @@ import { canvasState, tempGridModeState } from '@/store/canvasAtom' import { useRecoilState, useRecoilValue } from 'recoil' import { gridColorState } from '@/store/gridAtom' +import { gridDisplaySelector } from '@/store/settingAtom' export function useTempGrid() { const canvas = useRecoilValue(canvasState) const gridColor = useRecoilValue(gridColorState) const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState) + const isGridDisplay = useRecoilValue(gridDisplaySelector) const tempGridModeStateLeftClickEvent = (e) => { //임의 그리드 모드일 경우 let pointer = canvas.getPointer(e.e) @@ -22,6 +24,7 @@ export function useTempGrid() { strokeDashArray: [5, 2], opacity: 0.3, direction: 'vertical', + visible: isGridDisplay, name: 'tempGrid', }) @@ -48,6 +51,7 @@ export function useTempGrid() { strokeDashArray: [5, 2], opacity: 0.3, name: 'tempGrid', + visible: isGridDisplay, direction: 'horizontal', })