)
-}
+})
+
+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/components/management/Stuff.jsx b/src/components/management/Stuff.jsx
index cedf1975..5ce7c8b3 100644
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@@ -66,6 +66,7 @@ export default function Stuff() {
gridColumns: [
{
field: 'lastEditDatetime',
+ minWidth: 200,
headerName: getMessage('stuff.gridHeader.lastEditDatetime'),
headerCheckboxSelection: true,
headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
@@ -244,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) => {
@@ -295,8 +295,6 @@ export default function Stuff() {
useEffect(() => {
if (stuffSearchParams?.code === 'E') {
//console.log('조회누름::::::::', stuffSearchParams, sessionState)
- // stuffSearchParams.startRow = (pageNo - 1) * pageSize + 1
- // stuffSearchParams.endRow = pageNo * pageSize
stuffSearchParams.startRow = 1
stuffSearchParams.endRow = 1 * pageSize
stuffSearchParams.schSortType = defaultSortType
@@ -304,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 })
@@ -334,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 })
@@ -365,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 })
@@ -406,14 +404,14 @@ export default function Stuff() {
diff --git a/src/components/management/popup/PlanRequestPopQGrid.jsx b/src/components/management/popup/PlanRequestPopQGrid.jsx
index b7dca164..e610a138 100644
--- a/src/components/management/popup/PlanRequestPopQGrid.jsx
+++ b/src/components/management/popup/PlanRequestPopQGrid.jsx
@@ -39,8 +39,14 @@ export default function PlanRequestPopQGrid(props) {
[gridData],
)
+ //부모로 선택한 설계의뢰정보 보내기
+ const onSelectionChanged = () => {
+ const selectedData = gridApi.getSelectedRows()
+ props.getSelectedRowdata(selectedData)
+ }
+
return (
-
+
)
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')} |
-
+
|
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/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index cb33f407..e5e79740 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -23,10 +23,11 @@ import {
outerLineLength2State,
outerLineTypeState,
} from '@/store/outerLineAtom'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useSwal } from '@/hooks/useSwal'
+import { booleanPointInPolygon } from '@turf/turf'
// 보조선 작성
export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
@@ -76,6 +77,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
useEffect(() => {
typeRef.current = type
+ clear()
+ addDocumentEventListener('keydown', document, keydown[type])
}, [type])
useEffect(() => {
@@ -103,12 +106,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
}
}, [])
- useEffect(() => {
- clear()
- addDocumentEventListener('keydown', document, keydown[type])
- }, [type])
-
const clear = () => {
+ addCanvasMouseEventListener('mouse:move', mouseMove)
setLength1(0)
setLength2(0)
@@ -459,8 +458,9 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
}
const mouseDown = (e) => {
- addCanvasMouseEventListener('mouse:move', mouseMove)
+ canvas.renderAll()
const pointer = getIntersectMousePoint(e)
+ console.log(pointer)
mousePointerArr.current.push(pointer)
if (mousePointerArr.current.length === 2) {
@@ -538,59 +538,66 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
// 보조선 절삭
const cutAuxiliary = (e) => {
- const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
+ const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine')
if (auxiliaryLines.length === 0) {
return
}
+ const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
+
+ const allLines = [...auxiliaryLines]
+
+ roofBases.forEach((roofBase) => {
+ roofBase.lines.forEach((line) => {
+ allLines.push(line)
+ })
+ })
+
auxiliaryLines.forEach((line1) => {
- auxiliaryLines.forEach((line2) => {
- const lines = [line1, line2]
+ allLines.forEach((line2) => {
if (line1 === line2) {
return
}
-
const intersectionPoint = calculateIntersection(line1, line2)
- if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+ if (!intersectionPoint) {
return
}
roofAdsorptionPoints.current.push(intersectionPoint)
intersectionPoints.current.push(intersectionPoint)
- lines.forEach((line) => {
- const distance1 = distanceBetweenPoints({ x: line.x1, y: line.y1 }, intersectionPoint)
- const distance2 = distanceBetweenPoints({ x: line.x2, y: line.y2 }, intersectionPoint)
- if (distance1 === 0 || distance2 === 0) {
- return
- }
- //historyLine에서 기존 line을 제거한다.
- lineHistory.current = lineHistory.current.filter((history) => history !== line)
+ const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, intersectionPoint)
+ const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, intersectionPoint)
- let newLine
+ if (distance1 === 0 || distance2 === 0) {
+ return
+ }
+ //historyLine에서 기존 line을 제거한다.
+ lineHistory.current = lineHistory.current.filter((history) => history !== line1)
- if (distance1 >= distance2) {
- newLine = addLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], {
- stroke: 'black',
- strokeWidth: 1,
- selectable: false,
- name: 'auxiliaryLine',
- isFixed: true,
- intersectionPoint,
- })
- } else {
- newLine = addLine([line.x2, line.y2, intersectionPoint.x, intersectionPoint.y], {
- stroke: 'black',
- strokeWidth: 1,
- selectable: false,
- name: 'auxiliaryLine',
- isFixed: true,
- intersectionPoint,
- })
- }
- lineHistory.current.push(newLine)
- removeLine(line)
- })
+ let newLine
+
+ if (distance1 >= distance2) {
+ newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
+ stroke: 'black',
+ strokeWidth: 1,
+ selectable: false,
+ name: 'auxiliaryLine',
+ isFixed: true,
+ intersectionPoint,
+ })
+ } else {
+ newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
+ stroke: 'black',
+ strokeWidth: 1,
+ selectable: false,
+ name: 'auxiliaryLine',
+ isFixed: true,
+ intersectionPoint,
+ })
+ }
+ lineHistory.current.push(newLine)
+ removeLine(line1)
})
})
addCanvasMouseEventListener('mouse:move', mouseMove)
@@ -600,10 +607,15 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
* 일변전으로 돌아가기
*/
const handleRollback = () => {
- const lastLine = lineHistory.current.pop()
- mousePointerArr.current = []
- canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'innerPoint'))
+ const innerPoint = canvas.getObjects().find((obj) => obj.name === 'innerPoint')
+ if (innerPoint) {
+ mousePointerArr.current = []
+ canvas.remove(innerPoint)
+ canvas.renderAll()
+ return
+ }
+ const lastLine = lineHistory.current.pop()
if (lastLine) {
roofAdsorptionPoints.current = roofAdsorptionPoints.current.filter(
(point) => point.x !== lastLine.intersectionPoint?.x && point.y !== lastLine.intersectionPoint?.y,
@@ -621,10 +633,25 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
return
}
- const roofBases = canvas.getObjects().find((obj) => obj.name === 'roofBase')
+ const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const innerLines = [...lineHistory.current]
- roofBases.innerLines = [...innerLines]
+ roofBases.forEach((roofBase) => {
+ const roofInnerLines = innerLines.filter((line) => {
+ const turfPolygon = polygonToTurfPolygon(roofBase)
+
+ // innerLines의 두 점이 모두 polygon 안에 있는지 확인
+ const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
+ const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
+
+ if (inPolygon1 && inPolygon2) {
+ line.attributes = { ...line.attributes, roofId: roofBase.id }
+ return true
+ }
+ })
+
+ roofBase.innerLines = [...roofInnerLines]
+ })
setShowAuxiliaryModal(false)
}
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
index 07dab81e..85c37015 100644
--- a/src/hooks/roofcover/useOuterLineWall.js
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -29,12 +29,19 @@ import {
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
+import { QLine } from '@/components/fabric/QLine'
//외벽선 그리기
export function useOuterLineWall(setShowOutlineModal) {
const canvas = useRecoilValue(canvasState)
- const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
- useEvent()
+ const {
+ initEvent,
+ addCanvasMouseEventListener,
+ addDocumentEventListener,
+ removeAllMouseEventListeners,
+ removeAllDocumentEventListeners,
+ removeMouseEvent,
+ } = useEvent()
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()
@@ -75,6 +82,9 @@ export function useOuterLineWall(setShowOutlineModal) {
addCanvasMouseEventListener('mouse:down', mouseDown)
clear()
+ return () => {
+ initEvent()
+ }
}, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
useEffect(() => {
@@ -215,11 +225,11 @@ export function useOuterLineWall(setShowOutlineModal) {
return
}
- /*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
+ if (Math.abs(lastPoint.x - firstPoint.x) < 1 && Math.abs(lastPoint.y - firstPoint.y) < 1) {
return
}
- if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
+ if (Math.abs(lastPoint.x - firstPoint.x) < 1 || Math.abs(lastPoint.y - firstPoint.y) < 1) {
let isAllRightAngle = true
const firstPoint = points[0]
@@ -238,38 +248,27 @@ export function useOuterLineWall(setShowOutlineModal) {
if (isAllRightAngle) {
return
}
- const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+ const line = addLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
})
-
- canvas?.add(line)
- addLineText(line)
} else {
- const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
+ const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
- const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
+ const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
- if (guideLine1.length > 0) {
- canvas?.add(guideLine1)
- addLineText(guideLine1)
- }
-
- canvas?.add(guideLine2)
-
- addLineText(guideLine2)
- }*/
+ }
}
}, [points])
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 6533fe79..bc55c921 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -95,7 +95,11 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
roofBases.forEach((roofBase) => {
- splitPolygonWithLines(roofBase)
+ try {
+ splitPolygonWithLines(roofBase)
+ } catch (e) {
+ return
+ }
roofBase.innerLines.forEach((line) => {
canvas.remove(line)
diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js
index 217e71bc..f7b8b9fd 100644
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@@ -33,6 +33,11 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const [type, setType] = useState(TYPES.EAVES)
+ const isFix = useRef(false)
+ const initLines = useRef([])
+
+ const [isLoading, setIsLoading] = useState(false)
+
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
{ id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@@ -46,15 +51,20 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowRoofShapePassivitySettingModal(false)
+ return
}
+ setIsLoading(true)
}, [])
useEffect(() => {
+ if (!isLoading) return
addCanvasMouseEventListener('mouse:down', mouseDown)
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
- canvas.remove(wallLines)
+
+ canvas?.remove(...wallLines)
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+ initLines.current = outerLines.map((line) => ({ ...line }))
outerLines.forEach((outerLine, idx) => {
if (idx === 0) {
currentLineRef.current = outerLine
@@ -66,10 +76,11 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
canvas?.renderAll()
return () => {
+ handleLineToPolygon()
canvas?.discardActiveObject()
initEvent()
}
- }, [])
+ }, [isLoading])
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@@ -166,6 +177,14 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
}
const handleSave = () => {
+ isFix.current = true
+ handleLineToPolygon()
+
+ setShowRoofShapePassivitySettingModal(false)
+ }
+
+ const handleLineToPolygon = () => {
+ const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const exceptObjs = canvas.getObjects().filter((obj) => obj.name !== 'outerLine' && obj.parent?.name !== 'outerLine')
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
exceptObjs.forEach((obj) => {
@@ -176,13 +195,28 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
hideLine(line)
})
- const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+ let wall
+
+ if (isFix.current) {
+ wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+ } else {
+ // 그냥 닫을 경우 처리
+ wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+ lines.forEach((line, idx) => {
+ line.attributes = initLines.current[idx].attributes
+ })
+ }
wall.lines = [...lines]
+ // 기존 그려진 지붕이 없다면
+
+ if (isFix.current) {
+ // 완료 한 경우에는 지붕까지 그려줌
+ const roof = drawRoofPolygon(wall)
+ }
- const roof = drawRoofPolygon(wall)
canvas.renderAll()
- setShowRoofShapePassivitySettingModal(false)
}
+
return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
}
diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js
index 1722e287..016cd365 100644
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@@ -244,8 +244,13 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
}
}
- // 기존 wallLine 제거
- canvas?.remove(canvas.getObjects().filter((obj) => obj.name === 'wallLine'))
+ // 기존 wallLine, roofBase 제거
+ canvas
+ .getObjects()
+ .filter((obj) => obj.name === 'wallLine' || obj.name === 'roofBase')
+ .forEach((line) => {
+ canvas.remove(line)
+ })
const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
polygon.lines = [...outerLines]
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)
}
diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js
index 4df37618..123e991d 100644
--- a/src/hooks/surface/usePlacementShapeDrawing.js
+++ b/src/hooks/surface/usePlacementShapeDrawing.js
@@ -232,11 +232,11 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
return
}
- /*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
+ if (Math.abs(lastPoint.x - firstPoint.x) < 1 && Math.abs(lastPoint.y - firstPoint.y) < 1) {
return
}
- if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
+ if (Math.abs(lastPoint.x - firstPoint.x) < 1 || Math.abs(lastPoint.y - firstPoint.y) < 1) {
let isAllRightAngle = true
const firstPoint = points[0]
@@ -255,38 +255,27 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (isAllRightAngle) {
return
}
- const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
+ const line = addLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
})
-
- canvas?.add(line)
- addLineText(line)
} else {
- const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
+ const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
- const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
+ const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
- if (guideLine1.length > 0) {
- canvas?.add(guideLine1)
- addLineText(guideLine1)
- }
-
- canvas?.add(guideLine2)
-
- addLineText(guideLine2)
- }*/
+ }
}
}, [points])
diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js
index c125c28a..f2e8add9 100644
--- a/src/hooks/useAxios.js
+++ b/src/hooks/useAxios.js
@@ -40,59 +40,59 @@ export function useAxios(lang = '') {
// response 추가 로직
axios.interceptors.request.use(undefined, (error) => {})
- const get = async ({ url }) => {
+ const get = async ({ url, option = {} }) => {
return await getInstances(url)
- .get(url)
+ .get(url, option)
.then((res) => res.data)
.catch(console.error)
}
- const promiseGet = async ({ url }) => {
- return await getInstances(url).get(url)
+ const promiseGet = async ({ url, option = {} }) => {
+ return await getInstances(url).get(url, option)
}
- const post = async ({ url, data }) => {
+ const post = async ({ url, data, option = {} }) => {
return await getInstances(url)
- .post(url, data)
+ .post(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
- const promisePost = async ({ url, data }) => {
- return await getInstances(url).post(url, data)
+ const promisePost = async ({ url, data, option = {} }) => {
+ return await getInstances(url).post(url, data, option)
}
- const put = async ({ url, data }) => {
+ const put = async ({ url, data, option = {} }) => {
return await getInstances(url)
- .put(url, data)
+ .put(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
- const promisePut = async ({ url, data }) => {
- return await getInstances(url).put(url, data)
+ const promisePut = async ({ url, data, option = {} }) => {
+ return await getInstances(url).put(url, data, option)
}
- const patch = async ({ url, data }) => {
+ const patch = async ({ url, data, option = {} }) => {
return await getInstances(url)
- .patch(url, data)
+ .patch(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
- const promisePatch = async ({ url, data }) => {
- return await getInstances(url).patch(url, data)
+ const promisePatch = async ({ url, data, option = {} }) => {
+ return await getInstances(url).patch(url, data, option)
}
- const del = async ({ url }) => {
+ const del = async ({ url, option = {} }) => {
return await getInstances(url)
- .delete(url)
+ .delete(url, option)
.then((res) => res.data)
.catch(console.error)
}
- const promiseDel = async ({ url }) => {
- return await getInstances(url).delete(url)
+ const promiseDel = async ({ url, option = {} }) => {
+ return await getInstances(url).delete(url, option)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }
diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index 639b61b3..ee41988d 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
-import { calculateDistance, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useDotLineGrid } from '@/hooks/useDotLineGrid'
import { useTempGrid } from '@/hooks/useTempGrid'
@@ -43,7 +43,6 @@ export function useEvent() {
//default Event 추가
addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
- addDocumentEventListener('keydown', document, defaultKeyboardEvent)
addDocumentEventListener('contextmenu', document, defaultContextMenuEvent)
if (adsorptionPointAddMode) {
addCanvasMouseEventListener('mouse:down', adsorptionPointAddModeStateEvent)
@@ -152,6 +151,17 @@ export function useEvent() {
}
}
+ try {
+ const helpGuideLines = canvas.getObjects().filter((obj) => obj.name === 'helpGuideLine')
+ if (helpGuideLines.length === 2) {
+ const guideIntersectionPoint = calculateIntersection(helpGuideLines[0], helpGuideLines[1])
+
+ if (guideIntersectionPoint && distanceBetweenPoints(guideIntersectionPoint, pointer) <= adsorptionRange) {
+ arrivalPoint = guideIntersectionPoint
+ }
+ }
+ } catch (e) {}
+
const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
stroke: 'red',
strokeWidth: 1,
diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js
index f2941e33..a313d127 100644
--- a/src/hooks/useLine.js
+++ b/src/hooks/useLine.js
@@ -14,7 +14,7 @@ export const useLine = () => {
fontFamily: fontFamily,
})
- if (line.length === 0) {
+ if (line.length < 1) {
return null
}
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 6d74cd93..8afb2060 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
@@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
export function usePlan() {
+ const [planNum, setPlanNum] = useState(0)
+
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
- const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
- const [plans, setPlans] = useRecoilState(plansState)
+ const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
+ const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
+
const { swalFire } = useSwal()
const { getMessage } = useMessage()
const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -72,6 +76,9 @@ export function usePlan() {
// }, 1000)
}
+ /**
+ * 현재 캔버스에 그려진 데이터를 추출
+ */
const currentCanvasData = () => {
removeMouseLines()
return addCanvas()
@@ -81,8 +88,7 @@ export function usePlan() {
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = () => {
- removeMouseLines()
- const canvasStatus = addCanvas()
+ const canvasStatus = currentCanvasData()
const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
if (!initPlanData) {
@@ -90,15 +96,10 @@ export function usePlan() {
return JSON.parse(canvasStatus).objects.length > 0
} else {
// 저장된 캔버스
- if (canvasStatus === initPlanData.canvasStatus) {
- return false
- } else {
- // 각각 object들의 id 목록을 추출하여 비교
- const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
- const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
-
- return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
- }
+ // 각각 object들의 id 목록을 추출하여 비교
+ const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
+ const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
+ return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
}
}
const getObjectIds = (objects) => {
@@ -112,9 +113,6 @@ export function usePlan() {
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
*/
const dbToCanvasFormat = (cs) => {
- // return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
- // JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
- // canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
return cs.replace(/##/g, '"')
}
@@ -122,92 +120,24 @@ export function usePlan() {
* canvas의 데이터를 DB에 저장할 수 있도록 포맷화
*/
const canvasToDbFormat = (cs) => {
- // return JSON.stringify(cs).replace(/"/g, '##')
- // addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
return cs.replace(/"/g, '##')
}
/**
- * 페이지 내 캔버스를 저장하는 함수
- *
- * 1. 신규 저장 : POST
- * param(body) : userId, objectNo, canvasStatus
- * 2. 수정 저장 : PUT
- * param(body) : id, canvasStatus
+ * 페이지 내 캔버스를 저장
*/
const saveCanvas = async (userId) => {
- removeMouseLines()
- const canvasStatus = addCanvas()
-
- if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
- // canvas 수정
- const planData = {
- id: currentCanvasPlan.id,
- canvasStatus: canvasToDbFormat(canvasStatus),
- }
-
- return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
- .then((res) => {
- swalFire({ text: getMessage('common.message.save') })
- // console.log('[PUT] canvas-statuses res :::::::: %o', res)
- setInitCanvasPlans((initCanvasPlans) =>
- initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
- )
- setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
- })
- .catch((error) => {
- swalFire({ text: error.message, icon: 'error' })
- // console.error('[PUT] canvas-statuses error :::::::: %o', error)
- })
- } else {
- // canvas 신규 등록
- const planData = {
- userId: userId,
- imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
- objectNo: currentCanvasPlan.objectNo,
- canvasStatus: canvasToDbFormat(canvasStatus),
- }
-
- return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
- .then((res) => {
- swalFire({ text: getMessage('common.message.save') })
- // console.log('[POST] canvas-statuses response :::::::: %o', res)
- setInitCanvasPlans((initCanvasPlans) => [
- ...initCanvasPlans,
- {
- id: res.data,
- name: currentCanvasPlan.objectNo + '-' + res.data,
- userId: userId,
- canvasStatus: canvasStatus,
- isNew: currentCanvasPlan.id,
- },
- ])
- setPlans((plans) =>
- plans.map((plan) =>
- plan.id === currentCanvasPlan.id
- ? {
- ...plan,
- id: res.data,
- name: currentCanvasPlan.objectNo + '-' + res.data,
- userId: userId,
- canvasStatus: canvasStatus,
- isNew: currentCanvasPlan.id,
- }
- : plan,
- ),
- )
- })
- .catch((error) => {
- swalFire({ text: error.message, icon: 'error' })
- // console.error('[POST] canvas-statuses res error :::::::: %o', error)
- })
- }
+ const canvasStatus = currentCanvasData()
+ initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
+ ? await putCanvasStatus(canvasStatus)
+ : await postCanvasStatus(userId, canvasStatus)
}
/**
- * objectNo에 해당하는 canvas 목록을 조회하는 함수
+ * objectNo에 해당하는 canvas 목록을 조회
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
+ // console.log(`[GET] objectNo: ${objectNo} / userId: ${userId}`)
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item) => ({
id: item.id,
@@ -220,27 +150,192 @@ export function usePlan() {
}
/**
- * id에 해당하는 canvas 데이터를 삭제하는 함수
+ * canvas 데이터를 추가
+ */
+ const postCanvasStatus = async (userId, canvasStatus) => {
+ const planData = {
+ userId: userId,
+ imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
+ objectNo: currentCanvasPlan.objectNo,
+ canvasStatus: canvasToDbFormat(canvasStatus),
+ }
+ await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+ .then((res) => {
+ swalFire({ text: getMessage('plan.message.save') })
+ setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
+ setPlans((plans) =>
+ plans.map((plan) =>
+ plan.id === currentCanvasPlan.id
+ ? {
+ ...plan,
+ id: res.data,
+ name: currentCanvasPlan.objectNo + '-' + res.data,
+ canvasStatus: canvasStatus,
+ }
+ : plan,
+ ),
+ )
+ })
+ .catch((error) => {
+ swalFire({ text: error.message, icon: 'error' })
+ })
+ }
+
+ /**
+ * id에 해당하는 canvas 데이터를 수정
+ */
+ const putCanvasStatus = async (canvasStatus) => {
+ const planData = {
+ id: currentCanvasPlan.id,
+ canvasStatus: canvasToDbFormat(canvasStatus),
+ }
+ await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+ .then((res) => {
+ swalFire({ text: getMessage('plan.message.save') })
+ setInitCanvasPlans((initCanvasPlans) =>
+ initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
+ )
+ setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
+ })
+ .catch((error) => {
+ swalFire({ text: error.message, icon: 'error' })
+ })
+ }
+
+ /**
+ * id에 해당하는 canvas 데이터를 삭제
*/
const delCanvasById = (id) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
}
/**
- * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
+ * objectNo에 해당하는 canvas 데이터들을 삭제
*/
const delCanvasByObjectNo = (objectNo) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
}
+ /**
+ * plan 이동
+ * 현재 plan의 작업상태를 확인, 저장 후 이동
+ */
+ const handleCurrentPlan = (userId, newCurrentId) => {
+ if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
+ if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
+ swalFire({
+ text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
+ type: 'confirm',
+ confirmFn: async () => {
+ await saveCanvas(userId)
+ updateCurrentPlan(newCurrentId)
+ },
+ denyFn: () => {
+ updateCurrentPlan(newCurrentId)
+ },
+ })
+ } else {
+ updateCurrentPlan(newCurrentId)
+ }
+ }
+ }
+ const updateCurrentPlan = (newCurrentId) => {
+ setPlans((plans) =>
+ plans.map((plan) => {
+ return { ...plan, isCurrent: plan.id === newCurrentId }
+ }),
+ )
+ }
+ useEffect(() => {
+ setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
+ }, [plans])
+
+ /**
+ * 새로운 plan 생성
+ * 현재 plan의 데이터가 있을 경우 복제 여부를 확인
+ */
+ const handleAddPlan = (userId, objectNo) => {
+ JSON.parse(currentCanvasData()).objects.length > 0
+ ? swalFire({
+ text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'),
+ type: 'confirm',
+ confirmFn: () => {
+ addPlan(userId, objectNo, currentCanvasData())
+ },
+ denyFn: () => {
+ addPlan(userId, objectNo)
+ },
+ })
+ : addPlan(userId, objectNo)
+ }
+ const addPlan = (userId, objectNo, canvasStatus = '') => {
+ const newPlan = {
+ id: planNum,
+ name: `Plan ${planNum + 1}`,
+ objectNo: objectNo,
+ userId: userId,
+ canvasStatus: canvasStatus,
+ }
+ setPlans([...plans, newPlan])
+ handleCurrentPlan(userId, planNum)
+ setPlanNum(planNum + 1)
+ }
+
+ /**
+ * plan 삭제
+ */
+ const handleDeletePlan = (e, id) => {
+ e.stopPropagation() // 이벤트 버블링 방지
+
+ if (initCanvasPlans.some((plan) => plan.id === id)) {
+ delCanvasById(id)
+ .then((res) => {
+ swalFire({ text: getMessage('plan.message.delete') })
+ setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
+ setPlans((plans) => plans.filter((plan) => plan.id !== id))
+ })
+ .catch((error) => {
+ swalFire({ text: error.message, icon: 'error' })
+ })
+ } else {
+ setPlans((plans) => plans.filter((plan) => plan.id !== id))
+ swalFire({ text: getMessage('plan.message.delete') })
+ }
+
+ // 삭제 후 last 데이터에 포커싱
+ const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
+ if (!lastPlan) {
+ setPlanNum(0)
+ setCurrentCanvasPlan(null)
+ } else if (id !== lastPlan.id) {
+ updateCurrentPlan(lastPlan.id)
+ }
+ }
+
+ /**
+ * plan 조회
+ */
+ const loadCanvasPlanData = (userId, objectNo) => {
+ getCanvasByObjectNo(userId, objectNo).then((res) => {
+ // console.log('canvas 목록 ', res)
+ if (res.length > 0) {
+ setInitCanvasPlans(res)
+ setPlans(res)
+ updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
+ setPlanNum(res.length)
+ } else {
+ addPlan(userId, objectNo)
+ }
+ })
+ }
+
return {
canvas,
- removeMouseLines,
- currentCanvasData,
+ plans,
saveCanvas,
- addCanvas,
- checkModifiedCanvasPlan,
- getCanvasByObjectNo,
- delCanvasById,
+ handleCurrentPlan,
+ handleAddPlan,
+ handleDeletePlan,
+ loadCanvasPlanData,
}
}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 980d1400..0545be6e 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -247,6 +247,11 @@
"modal.object.setting.direction.select": "方向の選択",
"modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。",
"modal.placement.surface.setting.diagonal.length": "斜めの長さ",
+ "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
+ "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
+ "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
+ "plan.message.save": "저장되었습니다.",
+ "plan.message.delete": "삭제되었습니다.",
"setting": "設定",
"common.message.no.data": "No data",
"common.message.no.dataDown": "ダウンロードするデータがありません",
@@ -335,7 +340,7 @@
"common.message.writeToConfirm": "作成解除を実行しますか？",
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
"common.message.no.edit.save": "この文書は変更できません。",
- "common.require": "필수",
+ "common.require": "必須",
"commons.west": "立つ",
"commons.east": "ドン",
"commons.south": "立つ",
@@ -497,6 +502,7 @@
"stuff.planReqPopup.search.period": "期間検索",
"stuff.planReqPopup.search.schDateGbnS": "提出日",
"stuff.planReqPopup.search.schDateGbnR": "受付日",
+ "stuff.planReqPopup.error.message1": "設計依頼を選択してください。",
"stuff.search.title": "物件状況",
"stuff.search.btn1": "物件登録",
"stuff.search.btn2": "照会",
@@ -511,6 +517,11 @@
"stuff.search.period": "期間検索",
"stuff.search.schDateTypeU": "更新日",
"stuff.search.schDateTypeR": "登録日",
+ "stuff.search.grid.title": "商品リスト",
+ "stuff.search.grid.all": "全体",
+ "stuff.search.grid.selected": "選択",
+ "stuff.search.grid.schSortTypeR": "最近の登録日",
+ "stuff.search.grid.schSortTypeU": "最近の更新日",
"stuff.windSelectPopup.title": "風速選択",
"stuff.windSelectPopup.table.selected": "選択",
"stuff.windSelectPopup.table.windspeed": "風速",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 21aca2be..d02eed19 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -252,6 +252,11 @@
"modal.object.setting.direction.select": "방향 선택",
"modal.placement.surface.setting.info": "ⓘ ①의 길이 입력 후 대각선 길이를 입력하면 ②의 길이를 자동 계산합니다.",
"modal.placement.surface.setting.diagonal.length": "대각선 길이",
+ "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
+ "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
+ "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
+ "plan.message.save": "저장되었습니다.",
+ "plan.message.delete": "삭제되었습니다.",
"setting": "설정",
"common.message.no.data": "No data",
"common.message.no.dataDown": "No data to download",
@@ -502,6 +507,7 @@
"stuff.planReqPopup.search.period": "기간검색",
"stuff.planReqPopup.search.schDateGbnS": "제출일",
"stuff.planReqPopup.search.schDateGbnR": "접수일",
+ "stuff.planReqPopup.error.message1": "설계의뢰를 선택해주세요.",
"stuff.search.title": "물건현황",
"stuff.search.btn1": "신규등록",
"stuff.search.btn2": "조회",
@@ -516,6 +522,11 @@
"stuff.search.period": "기간검색",
"stuff.search.schDateTypeU": "갱신일",
"stuff.search.schDateTypeR": "등록일",
+ "stuff.search.grid.title": "물건목록",
+ "stuff.search.grid.all": "전체",
+ "stuff.search.grid.selected": "선택",
+ "stuff.search.grid.schSortTypeR": "최근 등록일",
+ "stuff.search.grid.schSortTypeU": "최근 갱신일",
"stuff.windSelectPopup.title": "풍속선택",
"stuff.windSelectPopup.table.selected": "선택",
"stuff.windSelectPopup.table.windspeed": "풍속",
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 7806b8f2..f3a81661 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -289,3 +289,8 @@ export const canGridOptionSeletor = selector({
return points.length === 0 || outerLineFix
},
})
+
+export const globalPitchState = atom({
+ key: 'globalPitch',
+ default: 4,
+})
diff --git a/src/store/planReqAtom.js b/src/store/planReqAtom.js
index 717d506e..fddf1374 100644
--- a/src/store/planReqAtom.js
+++ b/src/store/planReqAtom.js
@@ -16,7 +16,7 @@ export const planReqSearchState = atom({
schStartDt: dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'), //시작일
schEndDt: dayjs(new Date()).format('YYYY-MM-DD'), //종료일
startRow: 1,
- endRow: 100,
+ endRow: 20,
},
dangerouslyAllowMutability: true,
})
diff --git a/src/store/stuffAtom.js b/src/store/stuffAtom.js
index ceb5def0..c47321ae 100644
--- a/src/store/stuffAtom.js
+++ b/src/store/stuffAtom.js
@@ -18,10 +18,6 @@ export const stuffSearchState = atom({
startRow: 1,
endRow: 100,
schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)
- selObject: {
- value: '',
- label: '',
- },
},
dangerouslyAllowMutability: true,
})
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;
+ }
+}
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 9bd59e3d..b82d434c 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,1514 +4,1974 @@ $pop-bold-weight: 500;
$pop-normal-size: 12px;
$alert-color: #101010;
-@keyframes mountpop{
- from{opacity: 0; scale: 0.95;}
- to{opacity: 1; scale: 1;}
+@keyframes mountpop {
+ from {
+ opacity: 0;
+ scale: 0.95;
+ }
+ to {
+ opacity: 1;
+ scale: 1;
+ }
}
-@keyframes unmountpop{
- from{opacity: 1; scale: 1;}
- to{opacity: 0; scale: 0.95;}
+@keyframes unmountpop {
+ from {
+ opacity: 1;
+ scale: 1;
+ }
+ to {
+ opacity: 0;
+ scale: 0.95;
+ }
}
-.normal-font{
- font-size: 12px;
- font-weight: 400;
- color: #fff;
+.normal-font {
+ font-size: 12px;
+ font-weight: 400;
+ color: #fff;
}
-.bold-font{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
+.bold-font {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
}
-.modal-pop-wrap{
- position: fixed;
- width: 100%;
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
- border: 1px solid #000;
- border-radius: 4px;
- background-color: #272727;
- z-index: 9999999;
- &.xxxm{
- width: 240px;
+.modal-pop-wrap {
+ position: fixed;
+ width: 100%;
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+ border: 1px solid #000;
+ border-radius: 4px;
+ background-color: #272727;
+ z-index: 9999999;
+ &.xsm {
+ width: 200px;
+ }
+ &.xxxm {
+ width: 240px;
+ }
+ &.xxm {
+ width: 270px;
+ }
+ &.xm {
+ width: 300px;
+ }
+ &.ssm {
+ width: 380px;
+ }
+ &.sm {
+ width: 580px;
+ }
+ &.r {
+ width: 400px;
+ }
+ &.lr {
+ width: 440px;
+ }
+ &.lrr {
+ width: 480px;
+ }
+ &.ml {
+ width: 530px;
+ }
+ &.l-2 {
+ width: 640px;
+ }
+ &.lx-2 {
+ width: 740px;
+ }
+ &.lx {
+ width: 770px;
+ }
+ &.l {
+ width: 800px;
+ }
+ &.mount {
+ animation: mountpop 0.17s ease-in-out forwards;
+ }
+ &.unmount {
+ animation: unmountpop 0.17s ease-in-out forwards;
+ }
+ &.alert {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: transparent;
+ border: none;
+ .modal-head {
+ background-color: transparent;
+ padding: 0 0 8px;
+ .modal-close {
+ width: 20px;
+ height: 20px;
+ background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
+ }
}
- &.xxm{
- width: 270px;
- }
- &.xm{
- width: 300px;
- }
- &.ssm{
- width: 380px;
- }
- &.sm{
- width: 580px;
- }
- &.r{
- width: 400px;
- }
- &.lr{
- width: 440px;
- }
- &.lrr{
- width: 480px;
- }
- &.ml{
- width: 530px;
- }
- &.l-2{
- width: 640px;
- }
- &.lx-2{
- width: 740px;
- }
- &.lx{
- width: 770px;
- }
- &.l{
- width: 800px;
- }
- &.mount{
- animation: mountpop .17s ease-in-out forwards;
- }
- &.unmount{
- animation: unmountpop .17s ease-in-out forwards;
- }
- &.alert{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: transparent;
- border: none;
- .modal-head{
- background-color: transparent;
- padding: 0 0 8px;
- .modal-close{
- width: 20px;
- height: 20px;
- background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
- }
- }
- .modal-body{
- background-color: #fff;
- padding: 22px;
- border-radius: 4px;
- border: 1px solid #101010;
- color: $alert-color;
- .alert-title{
- font-size: 13px;
- font-weight: 700;
- color: $alert-color;
- margin-bottom: 15px;
- }
- }
- }
-}
-.modal-head{
- display: flex;
- align-items: center;
- padding: 10px 24px;
- background-color: #000;
- // overflow: hidden;
- h1.title{
+ .modal-body {
+ background-color: #fff;
+ padding: 22px;
+ border-radius: 4px;
+ border: 1px solid #101010;
+ color: $alert-color;
+ .alert-title {
font-size: 13px;
- color: $pop-color;
font-weight: 700;
- }
- .modal-close{
- margin-left: auto;
- color: transparent;
- font-size: 0;
- width: 10px;
- height: 10px;
- background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
- }
-}
-.modal-body{
- padding: 24px;
- .modal-btn-wrap{
- display: flex;
- align-items: center;
- gap: 5px;
- button{
- flex: 1;
- }
- &.sub{
- button{
- flex: 1 1 auto;
- padding: 0;
- }
- margin-bottom: 14px;
- }
- }
- .modal-check-btn-wrap{
- margin-top: 15px;
- .check-wrap-title{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: 600;
- &.light{
- font-weight: $pop-normal-weight;
- }
- }
- .flex-check-box{
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-top: 15px;
- &.for2{
- justify-content: flex-end;
- button{
- width: calc(50% - 5px);
- }
- &.btn{
- gap: 5px;
- button{
- width: calc(50% - 2.5px);
- }
- }
- }
- &.for-line{
- button{
- flex: 1;
- }
- }
- }
- }
- .outer-line-wrap{
- border-top: 1px solid #3C3C3C;
- margin-top: 10px;
- padding-top: 15px;
- margin-bottom: 15px;
- > div{
- margin-bottom: 15px;
- &:last-child{
- margin-bottom: 0;
- }
- }
- }
- .modal-guide{
- display: block;
- font-size: $pop-normal-size;
color: $alert-color;
- font-weight: $pop-normal-weight;
+ margin-bottom: 15px;
+ }
}
+ }
}
-
-.adsorption-point{
+.modal-head {
+ display: flex;
+ align-items: center;
+ padding: 10px 24px;
+ background-color: #000;
+ // overflow: hidden;
+ h1.title {
+ font-size: 13px;
+ color: $pop-color;
+ font-weight: 700;
+ }
+ .modal-close {
+ margin-left: auto;
+ color: transparent;
+ font-size: 0;
+ width: 10px;
+ height: 10px;
+ background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+ }
+}
+.modal-body {
+ padding: 24px;
+ .modal-btn-wrap {
display: flex;
align-items: center;
- background-color: #3A3A3A;
- border-radius: 3px;
- padding-left: 11px;
- overflow: hidden;
- transition: all 0.17s ease-in-out;
- span{
- font-size: $pop-normal-size;
- color: #898989;
+ gap: 5px;
+ button {
+ flex: 1;
}
- i{
- display: flex;
- align-items: center;
- padding: 0 7px;
- margin-left: auto;
- height: 100%;
- font-size: 13px;
- color: #898989;
+ &.sub {
+ button {
+ flex: 1 1 auto;
+ padding: 0;
+ }
+ margin-bottom: 14px;
}
- &.act{
- i{
- color: $pop-color;
- background-color: #1083E3;
+ }
+ .modal-check-btn-wrap {
+ margin-top: 15px;
+ .check-wrap-title {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: 600;
+ &.light {
+ font-weight: $pop-normal-weight;
+ }
+ }
+ .flex-check-box {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 15px;
+ &.for2 {
+ justify-content: flex-end;
+ button {
+ width: calc(50% - 5px);
}
+ &.btn {
+ gap: 5px;
+ button {
+ width: calc(50% - 2.5px);
+ }
+ }
+ }
+ &.for-line {
+ button {
+ flex: 1;
+ }
+ }
}
+ }
+ .outer-line-wrap {
+ border-top: 1px solid #3c3c3c;
+ margin-top: 10px;
+ padding-top: 15px;
+ margin-bottom: 15px;
+ > div {
+ margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ .modal-guide {
+ display: block;
+ font-size: $pop-normal-size;
+ color: $alert-color;
+ font-weight: $pop-normal-weight;
+ }
+}
+
+.adsorption-point {
+ display: flex;
+ align-items: center;
+ background-color: #3a3a3a;
+ border-radius: 3px;
+ padding-left: 11px;
+ overflow: hidden;
+ transition: all 0.17s ease-in-out;
+ span {
+ font-size: $pop-normal-size;
+ color: #898989;
+ }
+ i {
+ display: flex;
+ align-items: center;
+ padding: 0 7px;
+ margin-left: auto;
+ height: 100%;
+ font-size: 13px;
+ color: #898989;
+ }
+ &.act {
+ i {
+ color: $pop-color;
+ background-color: #1083e3;
+ }
+ }
}
// grid-option
-.grid-check-form{
+.grid-check-form {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding-bottom: 15px;
+ &.border {
+ border-bottom: 1px solid #424242;
+ }
+}
+.grid-option-wrap {
+ .grid-option-box {
display: flex;
align-items: center;
- gap: 15px;
- padding-bottom: 15px;
- &.border{
- border-bottom: 1px solid #424242;
+ background-color: transparent;
+ border: 1px solid #3d3d3d;
+ border-radius: 2px;
+ padding: 15px 10px;
+ gap: 20px;
+ margin-bottom: 10px;
+ .grid-input-form {
+ display: flex;
+ align-items: center;
+ span {
+ flex: none;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ }
+ .input-grid {
+ width: 54px;
+ input {
+ width: 100%;
+ }
+ }
}
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
}
-.grid-option-wrap{
- .grid-option-box{
- display: flex;
- align-items: center;
- background-color: transparent;
- border: 1px solid #3D3D3D;
- border-radius: 2px;
- padding: 15px 10px;
- gap: 20px;
- margin-bottom: 10px;
- .grid-input-form{
- display: flex;
- align-items: center;
- span{
- flex: none;
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- }
- .input-grid{
- width: 54px;
- input{
- width: 100%;
- }
- }
- }
- &:last-child{
- margin-bottom: 0;
- }
- }
+.select-form {
+ .sort-select {
+ width: 100%;
+ }
}
-.select-form{
- .sort-select{width: 100%;}
+.grid-select {
+ flex: 1;
+ &.no-flx {
+ flex: unset;
+ }
+ .sort-select {
+ width: 100%;
+ background-color: #313131;
+ min-width: auto;
+ font-size: 12px;
+ border: none;
+ p {
+ font-size: 12px;
+ }
+ > ul {
+ border: none;
+ }
+ }
+ &.right {
+ p {
+ text-align: right;
+ }
+ ul {
+ li {
+ justify-content: flex-end;
+ }
+ }
+ }
}
-.grid-select{
- flex: 1;
- &.no-flx{
- flex: unset;
- }
- .sort-select{
- width: 100%;
- background-color: #313131;
- min-width: auto;
- font-size: 12px;
- border: none;
- p{
- font-size: 12px;
- }
- > ul{
- border: none;
- }
- }
- &.right{
- p{
- text-align: right;
- }
- ul{
- li{
- justify-content: flex-end;
- }
- }
- }
-}
-.grid-btn-wrap{
- padding-top: 15px;
- text-align: right;
- button{
- padding: 0 10px;
- }
+.grid-btn-wrap {
+ padding-top: 15px;
+ text-align: right;
+ button {
+ padding: 0 10px;
+ }
}
// grid copy
-.grid-option-tit{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- padding-bottom: 15px;
-
+.grid-option-tit {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ padding-bottom: 15px;
}
-.grid-direction{
- display: flex;
- align-items: center;
- gap: 5px;
- flex: 1;
+.grid-direction {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ flex: 1;
}
-.direction{
- width: 22px;
- height: 22px;
- background-color: #757575;
- background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 16px 15px;
- border-radius: 50%;
- transition: all .15s ease-in-out;
- opacity: 0.6;
- &.down{transform: rotate(180deg);}
- &.left{transform: rotate(-90deg);}
- &.right{transform: rotate(90deg);}
- &:hover,
- &.act{
- opacity: 1;
- }
+.direction {
+ width: 22px;
+ height: 22px;
+ background-color: #757575;
+ background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px 15px;
+ border-radius: 50%;
+ transition: all 0.15s ease-in-out;
+ opacity: 0.6;
+ &.down {
+ transform: rotate(180deg);
+ }
+ &.left {
+ transform: rotate(-90deg);
+ }
+ &.right {
+ transform: rotate(90deg);
+ }
+ &:hover,
+ &.act {
+ opacity: 1;
+ }
}
// grid-move
-.move-form{
- p{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- }
+.move-form {
+ p {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ }
}
-.input-move-wrap{
- display: flex;
- align-items: center;
- gap: 5px;
- span{
- color: $pop-color;
- font-size: $pop-normal-size;
- }
- .input-move{
- width: 130px;
- input{
- width: 100%;
- }
+.input-move-wrap {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ span {
+ color: $pop-color;
+ font-size: $pop-normal-size;
+ }
+ .input-move {
+ width: 130px;
+ input {
+ width: 100%;
}
+ }
}
-.direction-move-wrap{
- flex: none;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
+.direction-move-wrap {
+ flex: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
}
// 배치면 초기 설정
-.placement-table{
- table{
- table-layout: fixed;
- tr{
- th{
- display: flex;
- align-items: center;
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- padding: 18px 0;
- border-bottom: 1px solid #424242;
- }
- td{
- font-size: $pop-normal-size;
- color: $pop-color;
- border-bottom: 1px solid #424242;
- padding-left: 20px;
- }
- &:first-child{
- td,
- th{
- padding-top: 0;
- }
- }
- }
- }
- .tooltip{
- position: relative;
- display: block;
- width: 15px;
- height: 15px;
- margin-left: 5px;
- background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
- background-size: cover;
- }
- &.light{
- padding: 0;
- th,td{
- color: $alert-color;
- border-bottom: none;
- border-top: 1px solid #EFEFEF;
- }
- th{
- padding: 14px 0;
- }
- tr{
- &:first-child{
- td,
- th{
- padding-top: 14px;
- }
- }
- &:last-child{
- td,
- th{
- padding-bottom: 0px;
- }
- }
- }
- }
-}
-
-.pop-form-radio{
- display: flex;
- align-items: center;
- gap: 10px;
-}
-.placement-option{
- display: flex;
- align-items: center;
- gap: 20px;
-}
-.select-wrap{
- div{
- width: 100%;
- }
-}
-.flex-ment{
- display: flex;
- align-items: center;
- gap: 5px;
- span{
+.placement-table {
+ table {
+ table-layout: fixed;
+ tr {
+ th {
+ display: flex;
+ align-items: center;
font-size: $pop-normal-size;
color: $pop-color;
- font-weight: $pop-normal-weight;
+ font-weight: $pop-bold-weight;
+ padding: 18px 0;
+ border-bottom: 1px solid #424242;
+ }
+ td {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ border-bottom: 1px solid #424242;
+ padding-left: 20px;
+ }
+ &:first-child {
+ td,
+ th {
+ padding-top: 0;
+ }
+ }
}
+ }
+ .tooltip {
+ position: relative;
+ display: block;
+ width: 15px;
+ height: 15px;
+ margin-left: 5px;
+ background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
+ background-size: cover;
+ }
+ &.light {
+ padding: 0;
+ th,
+ td {
+ color: $alert-color;
+ border-bottom: none;
+ border-top: 1px solid #efefef;
+ }
+ th {
+ padding: 14px 0;
+ }
+ tr {
+ &:first-child {
+ td,
+ th {
+ padding-top: 14px;
+ }
+ }
+ &:last-child {
+ td,
+ th {
+ padding-bottom: 0px;
+ }
+ }
+ }
+ }
+}
+
+.pop-form-radio {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.placement-option {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+.select-wrap {
+ .sort-select {
+ width: 100%;
+ }
+}
+.flex-ment {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ span {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ }
}
// 외벽선 그리기
-.outline-wrap{
- padding: 24px 0;
- border-top: 1px solid #424242;
-
- .outline-inner{
- display: flex;
- align-items: center;
- margin-bottom: 14px;
- &:last-child{
- margin-bottom: 0;
- }
- .outline-form{
- // width: 50%;
- margin-right: 15px;
- }
- }
- &:last-child{
- border-bottom: 1px solid #424242;
- }
-}
-.outline-form{
+.outline-wrap {
+ padding: 24px 0;
+ border-top: 1px solid #424242;
+
+ .outline-inner {
display: flex;
align-items: center;
-
- span{
- width: 60px;
- flex: none;
- font-size: $pop-normal-size;
- font-weight: $pop-bold-weight;
- color: $pop-color;
- margin-right: 10px;
- &.thin{
- width: auto;
- font-weight: $pop-normal-weight;
- margin-right: 0;
- }
+ margin-bottom: 14px;
+ &:last-child {
+ margin-bottom: 0;
}
+ .outline-form {
+ // width: 50%;
+ margin-right: 15px;
+ }
+ }
+ &:last-child {
+ border-bottom: 1px solid #424242;
+ }
+}
+.outline-form {
+ display: flex;
+ align-items: center;
- .reset-btn{
- flex: none;
- width: 30px;
- height: 30px;
- background: transparent;
- border: 1px solid #484848;
- border-radius: 2px;
- margin-left: 5px;
- background-image: url(../../public/static/images/canvas/reset_ico.svg);
- background-repeat: no-repeat;
- background-size: 12px 12px;
- background-position: center;
- }
- &:last-child{
- margin-right: 0;
+ span {
+ width: 60px;
+ flex: none;
+ font-size: $pop-normal-size;
+ font-weight: $pop-bold-weight;
+ color: $pop-color;
+ margin-right: 10px;
+ &.thin {
+ width: auto;
+ font-weight: $pop-normal-weight;
+ margin-right: 0;
}
+ }
+
+ .reset-btn {
+ flex: none;
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ border: 1px solid #484848;
+ border-radius: 2px;
+ margin-left: 5px;
+ background-image: url(../../public/static/images/canvas/reset_ico.svg);
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ background-position: center;
+ }
+ &:last-child {
+ margin-right: 0;
+ }
}
-.cul-wrap{
+.cul-wrap {
+ display: flex;
+ .outline-box {
+ width: 50%;
+ margin-right: 15px;
+ .outline-form {
+ width: 100%;
+ margin-bottom: 14px;
+ margin-right: 0;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+ .cul-box {
display: flex;
- .outline-box{
- width: 50%;
- margin-right: 15px;
- .outline-form{
- width: 100%;
- margin-bottom: 14px;
- margin-right: 0;
- &:last-child{
- margin-bottom: 0;
- }
- }
- }
- .cul-box{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50%;
- background-color: #3D3D3D;
- border-radius: 2px ;
- }
+ align-items: center;
+ justify-content: center;
+ width: 50%;
+ background-color: #3d3d3d;
+ border-radius: 2px;
+ }
}
// 외벽선 속성 설정
-.properties-guide{
- font-size: $pop-normal-size;
- color: #AAA;
- font-weight: $pop-normal-weight;
- margin-bottom: 14px;
+.properties-guide {
+ font-size: $pop-normal-size;
+ color: #aaa;
+ font-weight: $pop-normal-weight;
+ margin-bottom: 14px;
}
-.setting-tit{
- font-size: 13px;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- margin-bottom: 10px;
+.setting-tit {
+ font-size: 13px;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ margin-bottom: 10px;
}
-.properties-setting-wrap{
- &.outer{
- margin-top: 24px;
- }
- .setting-btn-wrap{
- display: flex;
- align-items: center;
- padding: 14px 0;
- border-top: 1px solid #424242;
- border-bottom: 1px solid #424242;
- .setting-btn{
- display: block;
- width: 100%;
- height: 40px;
- font-size: 13px;
- color: #fff;
- font-weight: 700;
- border-radius: 2px;
- transition: all .15s ease-in-out;
- &.green{
- background-color: #305941;
- border: 1px solid #45CD7D;
- &:hover{
- background-color: #3a6b4e;
- }
- }
- &.blue{
- background-color: #2E5360;
- border: 1px solid #3FBAE6;
- &:hover{
- background-color: #365f6e;
- }
- }
- }
- }
-}
-
-// 지붕형상 설정
-.roof-shape-menu{
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr;
- gap: 24px 10px;
- margin-bottom: 24px;
- .shape-box{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding: 13px;
- background-color: #3D3D3D;
- transition: background .15s ease-in-out;
- img{
- max-width: 100%;
- }
- }
- .shape-title{
- font-size: $pop-normal-size;
- font-weight: $pop-bold-weight;
- color: $pop-color;
- margin-top: 10px;
- text-align: center;
- transition: color .15s ease-in-out;
- }
- .shape-menu-box{
- &.act,
- &:hover{
- .shape-box{background-color: #008BFF;}
- .shape-title{color: #008BFF;}
- }
- }
-}
-
-.setting-box{
+.properties-setting-wrap {
+ &.outer {
+ margin-top: 24px;
+ }
+ .setting-btn-wrap {
+ display: flex;
+ align-items: center;
padding: 14px 0;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
-}
-.padding-form{
- padding-left: 23px;
-}
-.discrimination-box{
- padding: 16px 12px;
- border: 1px solid #3D3D3D;
- border-radius: 2px;
+ .setting-btn {
+ display: block;
+ width: 100%;
+ height: 40px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 700;
+ border-radius: 2px;
+ transition: all 0.15s ease-in-out;
+ &.green {
+ background-color: #305941;
+ border: 1px solid #45cd7d;
+ &:hover {
+ background-color: #3a6b4e;
+ }
+ }
+ &.blue {
+ background-color: #2e5360;
+ border: 1px solid #3fbae6;
+ &:hover {
+ background-color: #365f6e;
+ }
+ }
+ }
+ }
}
-.modal-bottom-border-bx{
- margin-top: 24px;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
+// 지붕형상 설정
+.roof-shape-menu {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 24px 10px;
+ margin-bottom: 24px;
+ .shape-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 13px;
+ background-color: #3d3d3d;
+ transition: background 0.15s ease-in-out;
+ img {
+ max-width: 100%;
+ }
+ }
+ .shape-title {
+ font-size: $pop-normal-size;
+ font-weight: $pop-bold-weight;
+ color: $pop-color;
+ margin-top: 10px;
+ text-align: center;
+ transition: color 0.15s ease-in-out;
+ }
+ .shape-menu-box {
+ &.act,
+ &:hover {
+ .shape-box {
+ background-color: #008bff;
+ }
+ .shape-title {
+ color: #008bff;
+ }
+ }
+ }
+}
+
+.setting-box {
+ padding: 14px 0;
+ border-top: 1px solid #424242;
+ border-bottom: 1px solid #424242;
+}
+.padding-form {
+ padding-left: 23px;
+}
+.discrimination-box {
+ padding: 16px 12px;
+ border: 1px solid #3d3d3d;
+ border-radius: 2px;
+}
+
+.modal-bottom-border-bx {
+ margin-top: 24px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid #424242;
}
// 처마∙케라바 변경
-.eaves-keraba-table{
- display: table;
- border-collapse: collapse;
- .eaves-keraba-item{
- display: table-row;
- .eaves-keraba-th,
- .eaves-keraba-td{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- display: table-cell;
- vertical-align: middle;
- padding-bottom: 14px;
- }
- .eaves-keraba-td{
- padding-left: 10px;
- }
- .eaves-keraba-ico{
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 5px;
- background-color: #3D3D3D;
- border: 1px solid #3D3D3D;
- border-radius: 2px;
- cursor: pointer;
- &.act{
- border: 1px solid #ED0004;
- }
- }
- &:last-child{
- .eaves-keraba-th,
- .eaves-keraba-td{
- padding-bottom: 0;
- }
- }
+.eaves-keraba-table {
+ display: table;
+ border-collapse: collapse;
+ .eaves-keraba-item {
+ display: table-row;
+ .eaves-keraba-th,
+ .eaves-keraba-td {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ display: table-cell;
+ vertical-align: middle;
+ padding-bottom: 14px;
}
+ .eaves-keraba-td {
+ padding-left: 10px;
+ }
+ .eaves-keraba-ico {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 5px;
+ background-color: #3d3d3d;
+ border: 1px solid #3d3d3d;
+ border-radius: 2px;
+ cursor: pointer;
+ &.act {
+ border: 1px solid #ed0004;
+ }
+ }
+ &:last-child {
+ .eaves-keraba-th,
+ .eaves-keraba-td {
+ padding-bottom: 0;
+ }
+ }
+ }
}
-.guide{
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: $pop-color;
- margin-bottom: 24px;
- &.sm{
- margin-bottom: 15px;
- }
- span{
- display: block;
- }
+.guide {
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ margin-bottom: 24px;
+ &.sm {
+ margin-bottom: 15px;
+ }
+ span {
+ display: block;
+ }
}
// 지붕면 할당
-.allocation-select-wrap{
+.allocation-select-wrap {
+ display: flex;
+ align-items: center;
+ padding-bottom: 14px;
+ border-bottom: 1px solid #424242;
+ margin-bottom: 14px;
+ span {
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ margin-right: 10px;
+ }
+ .allocation-edit {
display: flex;
align-items: center;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
- margin-bottom: 14px;
- span{
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-bold-weight;
- margin-right: 10px;
- }
- .allocation-edit{
- display: flex;
- align-items: center;
- height: 30px;
- padding: 0 10px;
- margin-left: 5px;
- font-size: $pop-normal-size;
- color: $pop-color;
- font-weight: $pop-normal-weight;
- border: 1px solid #484848;
- background-color: #323234;
- i{
- display: block;
- width: 12px;
- height: 12px;
- margin-right: 5px;
- background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
- background-size: cover;
- }
+ height: 30px;
+ padding: 0 10px;
+ margin-left: 5px;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ border: 1px solid #484848;
+ background-color: #323234;
+ i {
+ display: block;
+ width: 12px;
+ height: 12px;
+ margin-right: 5px;
+ background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
+ background-size: cover;
}
+ }
}
-.block-box{
- display: flex;
- align-items: center;
+.block-box {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+ .flex-ment {
gap: 10px;
- margin-bottom: 10px;
- .flex-ment{
- gap: 10px;
- .dec{
- text-decoration: underline;
- }
- .delete{
- display: block;
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
- background-size: cover;
- }
+ .dec {
+ text-decoration: underline;
}
- &:last-child{
- margin-bottom: 0;
+ .delete {
+ display: block;
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
+ background-size: cover;
}
+ }
+ &:last-child {
+ margin-bottom: 0;
+ }
}
-.icon-btn-wrap{
- flex: 1;
- display: flex;
- align-items: center;
- gap: 5px;
- button{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 30px;
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: $pop-color;
- border: 1px solid #646464;
- border-radius: 2px;
- padding: 0 10px;
- transition: all .15s ease-in-out;
- i{
- height: 15px;
- display: block;
- margin-left: 10px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- transition: all .15s ease-in-out;
- &.allocation01{
- background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
- width: 15px;
- }
- &.allocation02{
- background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
- width: 18px;
- }
- }
- &.act,
- &:hover{
- color: #101010;
- border: 1px solid #101010;
- background-color: #fff;
- i{
- &.allocation01{
- background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
- }
- &.allocation02{
- background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
- }
- }
- }
- }
-}
-
-// 경사설정
-.slope-wrap{
- padding-bottom: 24px;
- border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-shape-menu{
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- grid-template-rows: repeat(3, 90px);
- gap: 10px;
- margin-bottom: 10px;
- .shape-menu-box{
- border-radius: 2px;
- background-color: #3D3D3D;
- padding: 8px;
- transition: all .15s ease-in-out;
- .shape-box{
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- width: 100%;
- height: 100%;
- background-color: #313131;
- border-radius: 2px;
- }
- &.act,
- &:hover{
- background-color: #008BFF;
- }
- }
-}
-
-.shape-library{
+.icon-btn-wrap {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button {
display: flex;
align-items: center;
justify-content: center;
- gap: 5px;
- padding: 5px;
- background-color: #3D3D3D;
- margin-bottom: 24px;
- .library-btn{
- width: 30px;
- height: 30px;
- border: 1px solid #6C6C6C;
- border-radius: 2px;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center;
- transition: all .15s ease-in-out;
- &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;}
- &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
- &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
- &:hover{
- border-color: #1083E3;
- background-color: #1083E3;
- }
- }
-}
-
-.plane-shape-wrapper{
- display: flex;
- gap: 10px;
- .plane-box{
- padding: 10px;
- border-radius: 2px;
- background-color: #3D3D3D;
- .plane-box-tit{
- font-size: $pop-normal-size;
- font-weight: 600;
- color: $pop-color;
- margin-bottom: 10px;
- }
- &.shape-box{
- flex: 1;
- .shape-box-inner{
- display: flex;
- gap:10px;
- min-height: 140px;
- .shape-img{
- position: relative;
- flex: 1;
- background-color: #fff;
- border-radius: 2px;
- img{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- }
- .shape-data{
- flex: none;
- width: 190px;
- background-color: #313131;
- border-radius: 2px;
- padding: 15px;
- .eaves-keraba-table{
- .eaves-keraba-item{
- .eaves-keraba-th,
- .eaves-keraba-td{
- padding-bottom: 10px;
- }
- &:last-child{
- .eaves-keraba-th,
- .eaves-keraba-td{
- padding-bottom: 0px;
- }
- }
- }
- }
- }
- }
- }
- &.direction-box{
- display: flex;
- flex-direction: column;
- flex: none;
- width: 180px;
- .plane-direction-box{
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- padding: 10px 5px;
- }
- }
- }
-}
-.plane-direction{
- width: 150px;
- position: relative;
- height: 120px;
- span{
- position: absolute;
- font-size: 12px;
- font-weight: 500;
- color: #B1B1B1;
- &.top{top: 0; left: 50%; transform: translateX(-50%);}
- &.right{top: 50%; right: 0; transform: translateY(-50%);}
- &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
- &.left{top: 50%; left: 0; transform: translateY(-50%);}
- }
- .plane-btn{
- position: absolute;
- width: 28px;
- height: 28px;
- background-color: #777777;
- background-image: url(../../public/static/images/canvas/plane_arr.svg);
- background-size: 12px 13px;
- background-repeat: no-repeat;
- background-position: center;
- border-radius: 50%;
- transition: all .15s ease-in-out;
- &.up{top: 22px; left: 50%; transform: translateX(-50%);}
- &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
- &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
- &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
- &:hover,
- &.act{
- background-color: #fff;
- background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
- }
- }
-}
-
-.plane-tab-guide{
+ width: 100%;
+ height: 30px;
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: $pop-color;
- margin-top: 24px;
- padding-bottom: 14px;
- border-bottom: 1px solid #424242;
+ border: 1px solid #646464;
+ border-radius: 2px;
+ padding: 0 10px;
+ transition: all 0.15s ease-in-out;
+ i {
+ height: 15px;
+ display: block;
+ margin-left: 10px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ transition: all 0.15s ease-in-out;
+ &.allocation01 {
+ background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+ width: 15px;
+ }
+ &.allocation02 {
+ background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+ width: 18px;
+ }
+ }
+ &.act,
+ &:hover {
+ color: #101010;
+ border: 1px solid #101010;
+ background-color: #fff;
+ i {
+ &.allocation01 {
+ background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+ }
+ &.allocation02 {
+ background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+ }
+ }
+ }
+ }
}
-// 오브젝트 배치
-.mb-box{
- margin-bottom: 24px;
+// 경사설정
+.slope-wrap {
+ padding-bottom: 24px;
+ border-bottom: 1px solid #424242;
}
-.object-direction-wrap{
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.discrimination-tit{
- font-size: 13px;
- color: #fff;
- font-weight: 500;
+// 면형상 배치
+.plane-shape-menu {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-template-rows: repeat(3, 90px);
+ gap: 10px;
+ margin-bottom: 10px;
+ .shape-menu-box {
+ border-radius: 2px;
+ background-color: #3d3d3d;
+ padding: 8px;
+ transition: all 0.15s ease-in-out;
+ .shape-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ background-color: #313131;
+ border-radius: 2px;
+ }
+ &.act,
+ &:hover {
+ background-color: #008bff;
+ }
+ }
}
-.object-size-wrap{
- display: flex;
- min-height: 206px;
- gap: 24px;
- margin-top: 14px;
- .object-size-img{
- position: relative;
- flex: none;
- width: 200px;
- background-color: #fff;
- img{
+.shape-library {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ padding: 5px;
+ background-color: #3d3d3d;
+ margin-bottom: 24px;
+ .library-btn {
+ width: 30px;
+ height: 30px;
+ border: 1px solid #6c6c6c;
+ border-radius: 2px;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: all 0.15s ease-in-out;
+ &.ico01 {
+ background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+ background-size: 14px 14px;
+ }
+ &.ico02 {
+ background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
+ background-size: 13px 17px;
+ }
+ &.ico03 {
+ background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
+ background-size: 17px 13px;
+ }
+ &:hover {
+ border-color: #1083e3;
+ background-color: #1083e3;
+ }
+ }
+}
+
+.plane-shape-wrapper {
+ display: flex;
+ gap: 10px;
+ .plane-box {
+ padding: 10px;
+ border-radius: 2px;
+ background-color: #3d3d3d;
+ .plane-box-tit {
+ font-size: $pop-normal-size;
+ font-weight: 600;
+ color: $pop-color;
+ margin-bottom: 10px;
+ }
+ &.shape-box {
+ flex: 1;
+ .shape-box-inner {
+ display: flex;
+ gap: 10px;
+ min-height: 140px;
+ .shape-img {
+ position: relative;
+ flex: 1;
+ background-color: #fff;
+ border-radius: 2px;
+ img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ }
}
+ .shape-data {
+ flex: none;
+ width: 190px;
+ background-color: #313131;
+ border-radius: 2px;
+ padding: 15px;
+ .eaves-keraba-table {
+ .eaves-keraba-item {
+ .eaves-keraba-th,
+ .eaves-keraba-td {
+ padding-bottom: 10px;
+ }
+ &:last-child {
+ .eaves-keraba-th,
+ .eaves-keraba-td {
+ padding-bottom: 0px;
+ }
+ }
+ }
+ }
+ }
+ }
}
+ &.direction-box {
+ display: flex;
+ flex-direction: column;
+ flex: none;
+ width: 180px;
+ .plane-direction-box {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 10px 5px;
+ }
+ }
+ }
+}
+.plane-direction {
+ width: 150px;
+ position: relative;
+ height: 120px;
+ span {
+ position: absolute;
+ font-size: 12px;
+ font-weight: 500;
+ color: #b1b1b1;
+ &.top {
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ &.right {
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ }
+ &.bottom {
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ &.left {
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ }
+ }
+ .plane-btn {
+ position: absolute;
+ width: 28px;
+ height: 28px;
+ background-color: #777777;
+ background-image: url(../../public/static/images/canvas/plane_arr.svg);
+ background-size: 12px 13px;
+ background-repeat: no-repeat;
+ background-position: center;
+ border-radius: 50%;
+ transition: all 0.15s ease-in-out;
+ &.up {
+ top: 22px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ &.right {
+ top: 50%;
+ right: 32px;
+ transform: translateY(-50%) rotate(90deg);
+ }
+ &.down {
+ bottom: 22px;
+ left: 50%;
+ transform: translateX(-50%) rotate(180deg);
+ }
+ &.left {
+ top: 50%;
+ left: 32px;
+ transform: translateY(-50%) rotate(270deg);
+ }
+ &:hover,
+ &.act {
+ background-color: #fff;
+ background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+ }
+ }
+}
+
+.plane-tab-guide {
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: $pop-color;
+ margin-top: 24px;
+ padding-bottom: 14px;
+ border-bottom: 1px solid #424242;
+}
+
+// 오브젝트 배치
+.mb-box {
+ margin-bottom: 24px;
+}
+
+.object-direction-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.discrimination-tit {
+ font-size: 13px;
+ color: #fff;
+ font-weight: 500;
+}
+
+.object-size-wrap {
+ display: flex;
+ min-height: 206px;
+ gap: 24px;
+ margin-top: 14px;
+ .object-size-img {
+ position: relative;
+ flex: none;
+ width: 200px;
+ background-color: #fff;
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
}
// 표시변경
-.display-change-wrap{
- margin: 24px 0;
+.display-change-wrap {
+ margin: 24px 0;
}
-.warning{
- font-size: $pop-normal-size;
- font-weight: $pop-normal-weight;
- color: #FFAFAF;
+.warning {
+ font-size: $pop-normal-size;
+ font-weight: $pop-normal-weight;
+ color: #ffafaf;
}
// 각 변 속성 변경
-.radio-grid-wrap{
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 24px 15px;
+.radio-grid-wrap {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px 15px;
}
// 면 흐름 설정
-.drawing-flow-wrap{
+.drawing-flow-wrap {
+ display: flex;
+ gap: 10px;
+ .discrimination-box {
+ flex: 1;
display: flex;
- gap: 10px;
- .discrimination-box{
- flex: 1;
- display: flex;
- flex-direction: column;
- .object-direction-wrap{
- flex: 1;
- }
+ flex-direction: column;
+ .object-direction-wrap {
+ flex: 1;
}
+ }
}
-.compas-box{
- display: flex;
- align-items: center;
- justify-content: center;
+.compas-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.compas-box-inner {
- position: relative;
- width: 200px;
- height: 200px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+
+ .circle {
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ border: 1px solid #fff;
border-radius: 50%;
-
- .circle {
- position: absolute;
- width: 12px;
- height: 12px;
- border: 1px solid #fff;
- border-radius: 50%;
- top: 95%;
- left: 50%;
- transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
- cursor:pointer;
- z-index: 3;
- /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
- i{
- position: absolute;
- top: 12.5px;
- left: 50%;
- font-size: 11px;
- color: #8B8B8B;
- font-weight: 500;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-use-select: none;
- user-select: none;
- }
- &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
- &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
- &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
- &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
- &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
- &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
- &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
- &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
- &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
- &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
- &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
- &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
- &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
- &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
- &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
- &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
- &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
- &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
- &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
- &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
- &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
- &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
- &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
- &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
- &.act{
- &::after{
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 5px;
- height: 5px;
- background-color: #fff;
- }
- i{
- color: #fff;
- }
- }
+ top: 95%;
+ left: 50%;
+ transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+ cursor: pointer;
+ z-index: 3;
+ /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+ i {
+ position: absolute;
+ top: 12.5px;
+ left: 50%;
+ font-size: 11px;
+ color: #8b8b8b;
+ font-weight: 500;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-use-select: none;
+ user-select: none;
}
- .compas{
+ &:nth-child(1) {
+ transform: rotate(180deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(180deg);
+ }
+ }
+ &:nth-child(2) {
+ transform: rotate(195deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(165deg);
+ }
+ }
+ &:nth-child(3) {
+ transform: rotate(210deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(150deg);
+ }
+ }
+ &:nth-child(4) {
+ transform: rotate(225deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(135deg);
+ }
+ }
+ &:nth-child(5) {
+ transform: rotate(240deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(120deg);
+ }
+ }
+ &:nth-child(6) {
+ transform: rotate(255deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(105deg);
+ }
+ }
+ &:nth-child(7) {
+ transform: rotate(270deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(90deg);
+ }
+ }
+ &:nth-child(8) {
+ transform: rotate(285deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(75deg);
+ }
+ }
+ &:nth-child(9) {
+ transform: rotate(300deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(60deg);
+ }
+ }
+ &:nth-child(10) {
+ transform: rotate(315deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(45deg);
+ }
+ }
+ &:nth-child(11) {
+ transform: rotate(330deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(30deg);
+ }
+ }
+ &:nth-child(12) {
+ transform: rotate(345deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(15deg);
+ }
+ }
+ &:nth-child(13) {
+ transform: rotate(0deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(0deg);
+ }
+ }
+ &:nth-child(14) {
+ transform: rotate(15deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-15deg);
+ }
+ }
+ &:nth-child(15) {
+ transform: rotate(30deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-30deg);
+ }
+ }
+ &:nth-child(16) {
+ transform: rotate(45deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-45deg);
+ }
+ }
+ &:nth-child(17) {
+ transform: rotate(60deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-60deg);
+ }
+ }
+ &:nth-child(18) {
+ transform: rotate(75deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-75deg);
+ }
+ }
+ &:nth-child(19) {
+ transform: rotate(90deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-90deg);
+ }
+ }
+ &:nth-child(20) {
+ transform: rotate(105deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-105deg);
+ }
+ }
+ &:nth-child(21) {
+ transform: rotate(120deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-120deg);
+ }
+ }
+ &:nth-child(22) {
+ transform: rotate(135deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-135deg);
+ }
+ }
+ &:nth-child(23) {
+ transform: rotate(150deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-150deg);
+ }
+ }
+ &:nth-child(24) {
+ transform: rotate(165deg) translate(-50%, -50%);
+ i {
+ transform: translateX(-50%) rotate(-165deg);
+ }
+ }
+ &.act {
+ &::after {
+ content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- width: 148px;
- height: 148px;
- border: 4px solid #fff;
- border-radius: 50%;
- .compas-arr{
- width: 100%;
- height: 100%;
- background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
- background-size: 122px 122px;
- }
+ width: 5px;
+ height: 5px;
+ background-color: #fff;
+ }
+ i {
+ color: #fff;
+ }
}
+ }
+ .compas {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 148px;
+ height: 148px;
+ border: 4px solid #fff;
+ border-radius: 50%;
+ .compas-arr {
+ width: 100%;
+ height: 100%;
+ background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
+ background-size: 122px 122px;
+ }
+ }
}
-
// 지붕모듈선택
-.roof-module-tab{
- display: flex;
- align-items: center;
- gap: 10px;
- margin-bottom: 14px;
- .module-tab-bx{
- flex: 1;
- height: 34px;
- line-height: 31px;
- border: 1px solid #484848;
- border-radius: 2px;
- background-color: transparent;
- font-size: 12px;
- color: #AAA;
- text-align: center;
- cursor: default;
- transition: all .15s ease-in-out;
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- }
- .tab-arr{
- display: block;
- width: 9px;
- height: 14px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
- transition: all .15s ease-in-out;
- &.act{
- background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
- }
- }
-}
-
-.roof-module-compas{
- margin-bottom: 24px;
- .compas-box-inner{
- width: 280px;
- height: 253px;
- .circle{
- top: 86%;
- &:nth-child(1),
- &:nth-child(7),
- &:nth-child(13),
- &:nth-child(19){
- &::before{
- content: '';
- position: absolute;
- top: 20px;
- left: 50%;
- transform: translateX(-50%);
- width: 1px;
- height: 6px;
- background-color: #8B8B8B;
- }
- }
- i{
- top: 32px;
- }
- &.act{
- i{color: #8B8B8B;}
- }
- }
- }
-}
-.center-wrap{
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
-}
-
-.module-table-flex-wrap{
- display: flex;
- gap: 10px;
- .outline-form{
- flex: 1;
- }
-}
-
-.module-box-tab{
- display: flex;
- .module-btn{
- flex: 1;
- border-top: 1px solid #505050;
- border-bottom: 1px solid #505050;
- border-right: 1px solid #505050;
- background-color: #454545;
- color: #fff;
- height: 30px;
- font-size: 12px;
- font-weight: 400;
- transition: all .15s ease-in-out;
- &:first-child{
- border-left: 1px solid #505050;
- }
- &.act{
- border-color: #fff;
- background-color: #fff;
- color: #101010;
- }
- }
-}
-
-.module-table-box{
+.roof-module-tab {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 14px;
+ .module-tab-bx {
flex: 1;
- background-color: #3D3D3D;
+ height: 34px;
+ line-height: 31px;
+ border: 1px solid #484848;
border-radius: 2px;
- .module-table-inner{
- padding: 10px;
- .outline-form{
- span{
- width: auto;
- }
- }
- .module-table-tit{
- padding: 10px 0;
- font-size: 12px;
- color: #fff;
- border-bottom: 1px solid #4D4D4D;
- }
- .eaves-keraba-table{
- width: 100%;
- margin-top: 15px;
- .eaves-keraba-th{
- width: 72px;
- }
- .eaves-keraba-th,
- .eaves-keraba-td{
- padding-bottom: 5px;
- }
- }
- .self-table-tit{
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- padding-bottom: 15px;
- }
+ background-color: transparent;
+ font-size: 12px;
+ color: #aaa;
+ text-align: center;
+ cursor: default;
+ transition: all 0.15s ease-in-out;
+ &.act {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
+ color: #fff;
+ font-weight: 500;
}
- .warning-guide{
- padding: 20px;
- .warning{
- color: #FFCACA;
- max-height: 55px;
- overflow-y: auto;
- padding-right: 30px;
- &::-webkit-scrollbar {
- width: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #D9D9D9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
- }
+ }
+ .tab-arr {
+ display: block;
+ width: 9px;
+ height: 14px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+ transition: all 0.15s ease-in-out;
+ &.act {
+ background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
+ }
}
-.module-self-table{
- display: table;
- border-top: 1px solid #4D4D4D;
- border-collapse: collapse;
- width: 100%;
- .self-table-item{
- display: table-row;
- .self-item-td,
- .self-item-th{
- display: table-cell;
- vertical-align: middle;
- border-bottom: 1px solid #4D4D4D;
+.roof-module-compas {
+ margin-bottom: 24px;
+ .compas-box-inner {
+ width: 280px;
+ height: 253px;
+ .circle {
+ top: 86%;
+ &:nth-child(1),
+ &:nth-child(7),
+ &:nth-child(13),
+ &:nth-child(19) {
+ &::before {
+ content: '';
+ position: absolute;
+ top: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 1px;
+ height: 6px;
+ background-color: #8b8b8b;
}
- .self-item-th{
- width: 60px;
- font-size: 12px;
- font-weight: 500;
- color: #fff;
- }
- .self-item-td{
- font-size: 12px;
- font-weight: 400;
- color: #fff;
- padding: 15px 20px;
+ }
+ i {
+ top: 32px;
+ }
+ &.act {
+ i {
+ color: #8b8b8b;
}
+ }
}
+ }
+}
+.center-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
}
-.self-table-flx{
- display: flex;
- align-items: center;
- margin-top: 15px;
- button{
+.module-table-flex-wrap {
+ display: flex;
+ gap: 10px;
+ .outline-form {
+ flex: 1;
+ }
+}
+
+.module-box-tab {
+ display: flex;
+ .module-btn {
+ flex: 1;
+ border-top: 1px solid #505050;
+ border-bottom: 1px solid #505050;
+ border-right: 1px solid #505050;
+ background-color: #454545;
+ color: #fff;
+ height: 30px;
+ font-size: 12px;
+ font-weight: 400;
+ transition: all 0.15s ease-in-out;
+ &:first-child {
+ border-left: 1px solid #505050;
+ }
+ &.act {
+ border-color: #fff;
+ background-color: #fff;
+ color: #101010;
+ }
+ }
+}
+
+.module-table-box {
+ flex: 1;
+ background-color: #3d3d3d;
+ border-radius: 2px;
+ .module-table-inner {
+ padding: 10px;
+ .outline-form {
+ span {
+ width: auto;
+ }
+ }
+ .module-table-tit {
+ padding: 10px 0;
+ font-size: 12px;
+ color: #fff;
+ border-bottom: 1px solid #4d4d4d;
+ }
+ .eaves-keraba-table {
+ width: 100%;
+ margin-top: 15px;
+ .eaves-keraba-th {
+ width: 72px;
+ }
+ .eaves-keraba-th,
+ .eaves-keraba-td {
+ padding-bottom: 5px;
+ }
+ }
+ .self-table-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ padding-bottom: 15px;
+ }
+ }
+ .warning-guide {
+ padding: 20px;
+ .warning {
+ color: #ffcaca;
+ max-height: 55px;
+ overflow-y: auto;
+ padding-right: 30px;
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+ }
+ }
+}
+
+.module-self-table {
+ display: table;
+ border-top: 1px solid #4d4d4d;
+ border-collapse: collapse;
+ width: 100%;
+ .self-table-item {
+ display: table-row;
+ .self-item-td,
+ .self-item-th {
+ display: table-cell;
+ vertical-align: middle;
+ border-bottom: 1px solid #4d4d4d;
+ }
+ .self-item-th {
+ width: 60px;
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ }
+ .self-item-td {
+ font-size: 12px;
+ font-weight: 400;
+ color: #fff;
+ padding: 15px 20px;
+ }
+ }
+}
+
+.self-table-flx {
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+ button {
+ margin-left: auto;
+ }
+}
+.hexagonal-wrap {
+ .hexagonal-item {
+ padding: 15px 0;
+ border-bottom: 1px solid #4d4d4d;
+ &:first-child {
+ padding-top: 0;
+ }
+ &:last-child {
+ padding-bottom: 0;
+ border: none;
+ }
+ .hexagonal-flx-auto {
+ display: flex;
+ justify-content: space-between;
+ }
+ .hexagonal-flx {
+ display: flex;
+ align-items: center;
+ button {
margin-left: auto;
+ }
}
-}
-.hexagonal-wrap{
- .hexagonal-item{
- padding: 15px 0;
- border-bottom: 1px solid #4D4D4D;
- &:first-child{
- padding-top: 0;
- }
- &:last-child{
- padding-bottom: 0;
- border: none;
- }
- .hexagonal-flx-auto{
- display: flex;
- justify-content: space-between;
- }
- .hexagonal-flx{
- display: flex;
- align-items: center;
- button{
- margin-left: auto;
- }
- }
- }
+ }
}
// 회로 및 가대설정
-.circuit-check-inner{
- padding: 5px 0;
+.circuit-check-inner {
+ padding: 5px 0;
}
-.x-scroll-table{
- overflow-x: auto;
- padding-bottom: 5px;
- .roof-module-table{
- min-width: 1200px;
- }
- &::-webkit-scrollbar {
- height: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #D9D9D9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
+.x-scroll-table {
+ overflow-x: auto;
+ padding-bottom: 5px;
+ .roof-module-table {
+ min-width: 1200px;
+ }
+ &::-webkit-scrollbar {
+ height: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
}
-.circuit-right-wrap{
- display: flex;
- justify-content: flex-end;
+.circuit-right-wrap {
+ display: flex;
+ justify-content: flex-end;
}
-.circuit-data-form{
+.circuit-data-form {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ min-height: 60px;
+ padding: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ span {
+ display: inline-flex;
+ align-items: center;
+ .del {
+ display: block;
+ margin-left: 10px;
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
+ background-size: cover;
+ }
+ }
+}
+.circuit-table-tit {
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ padding: 11px 10px;
+ background-color: #474747;
+ border: 1px solid #505050;
+ border-bottom: none;
+}
+
+.circuit-overflow {
+ max-height: 400px;
+ overflow-y: auto;
+ margin-bottom: 15px;
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+.circuit-table-flx-wrap {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ .circuit-table-flx-box {
+ flex: 1;
display: flex;
flex-direction: column;
- gap: 5px;
- min-height: 60px;
- padding: 12px;
- border: 1px solid rgba(255, 255, 255, 0.20);
- span{
- display: inline-flex;
- align-items: center;
- .del{
- display: block;
- margin-left: 10px;
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
- background-size: cover;
- }
+ .bottom-wrap {
+ margin-top: auto;
}
-}
-.circuit-table-tit{
- color: #fff;
- font-size: 12px;
- font-weight: 600;
- padding: 11px 10px;
- background-color: #474747;
- border: 1px solid #505050;
- border-bottom: none;
+ .roof-module-table {
+ table {
+ table-layout: fixed;
+ }
+ }
+ }
}
-.circuit-overflow{
- max-height: 400px;
- overflow-y: auto;
- margin-bottom: 15px;
- &::-webkit-scrollbar {
- width: 4px;
- background-color: transparent;
- }
- &::-webkit-scrollbar-thumb {
- background-color: #D9D9D9;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
-}
-
-.circuit-table-flx-wrap{
- display: flex;
- gap: 10px;
- margin-bottom: 10px;
- .circuit-table-flx-box{
- flex: 1;
- display: flex;
- flex-direction: column;
- .bottom-wrap{
- margin-top: auto;
- }
- .roof-module-table{
- table{
- table-layout: fixed;
- }
- }
- }
-}
-
-.circuit-count-input{
- display: flex;
- align-items: center;
- gap: 10px;
+.circuit-count-input {
+ display: flex;
+ align-items: center;
+ gap: 10px;
}
// 모듈부가기능
-.additional-radio-wrap{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 15px 0;
- margin-bottom: 24px;
+.additional-radio-wrap {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px 0;
+ margin-bottom: 24px;
}
-.additional-wrap{
- padding: 24px 0;
- border-top: 1px solid #424242;
+.additional-wrap {
+ padding: 24px 0;
+ border-top: 1px solid #424242;
}
-.additional-color-wrap{
+.additional-color-wrap {
+ display: flex;
+ align-items: center;
+ padding: 5px 0;
+ gap: 15px;
+ .additional-color-box {
display: flex;
align-items: center;
- padding: 5px 0;
- gap: 15px;
- .additional-color-box{
- display: flex;
- align-items: center;
- gap: 8px;
- .additional-color{
- display: block;
- width: 16px;
- height: 16px;
- &.pink{
- border: 2px solid #EA10AC;
- background-color: #16417D;
- }
- &.white{
- border: 2px solid #FFF;
- background-color: #001027;
- }
- }
+ gap: 8px;
+ .additional-color {
+ display: block;
+ width: 16px;
+ height: 16px;
+ &.pink {
+ border: 2px solid #ce1c9c;
+ background-color: #16417d;
+ }
+ &.white {
+ border: 2px solid #fff;
+ background-color: #001027;
+ }
}
-}
\ No newline at end of file
+ }
+}
+
+// color setting
+.color-setting-wrap {
+ padding-bottom: 15px;
+ border-bottom: 1px solid #424242;
+ .color-tit {
+ font-size: 13px;
+ font-weight: 500;
+ color: #ffffff;
+ margin-bottom: 10px;
+ }
+ .color-picker {
+ .react-colorful {
+ width: 100%;
+ height: auto;
+ gap: 20px;
+ .react-colorful__pointer {
+ width: 15px;
+ height: 15px;
+ border: 4px solid #fff;
+ }
+ .react-colorful__saturation {
+ border-radius: 2px;
+ height: 200px;
+ border-bottom: 5px solid #000;
+ }
+ .react-colorful__last-control {
+ border-radius: 2px;
+ height: 10px;
+ }
+ }
+ .hex-color-box {
+ display: flex;
+ align-items: center;
+ margin-top: 15px;
+ .color-box-tit {
+ font-size: 12px;
+ color: #fff;
+ font-weight: 500;
+ margin-right: 10px;
+ }
+ .color-hex-input {
+ width: 150px;
+ margin-right: 5px;
+ input {
+ width: 100%;
+ }
+ }
+ .color-box {
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ .default-color-wrap {
+ margin-top: 25px;
+ .default-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ .color-button-wrap {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 21px;
+ .default-color {
+ display: block;
+ width: 100%;
+ height: 30px;
+ border-radius: 4px;
+ }
+ }
+ }
+ }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px 5px;
+ margin-bottom: 15px;
+ .font-option-item {
+ .option-item-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ }
+}
+.font-ex-wrap {
+ margin-bottom: 15px;
+ .font-ex-tit {
+ font-size: 12px;
+ font-weight: 500;
+ color: #fff;
+ margin-bottom: 10px;
+ }
+ .font-ex-box {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 80px;
+ background-color: #fff;
+ }
+}
+
+// 치수선 설정
+.font-btn-wrap {
+ margin-bottom: 15px;
+ button {
+ width: 100%;
+ height: 30px;
+ line-height: 28px;
+ }
+}
+
+.line-color-wrap {
+ margin-bottom: 15px;
+ .color-btn {
+ display: block;
+ width: 100%;
+ height: 30px;
+ border-radius: 2px;
+ }
+}
+
+.form-box {
+ width: 100%;
+ background-color: #fff;
+ padding: 10px 0 20px;
+ .line-form {
+ position: relative;
+ width: 102px;
+ height: 40px;
+ margin: 0 auto;
+ border-left: 1px dashed #101010;
+ border-right: 1px dashed #101010;
+ .line-font-box {
+ position: absolute;
+ bottom: -3px;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ .font {
+ display: block;
+ padding-bottom: 6px;
+ color: #101010;
+ }
+ .line {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 1px;
+ border-radius: 30px;
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ left: 1px;
+ width: 9px;
+ height: 9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-top: none;
+ border-right: none;
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) rotate(45deg);
+ right: 1px;
+ width: 9px;
+ height: 9px;
+ border: 1px solid;
+ border-color: inherit;
+ border-bottom: none;
+ border-left: none;
+ }
+ }
+ }
+ }
+}
+
+// 사이즈 변경
+.size-inner-warp {
+ position: relative;
+}
+.size-check-wrap {
+ position: relative;
+ display: block;
+ width: 132px;
+ height: 132px;
+ margin: 0 auto;
+ .size-btn {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border: 1px solid #fff;
+ border-radius: 50%;
+ &.act {
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ border-radius: 50%;
+ }
+ }
+ &:nth-child(1) {
+ top: 0;
+ left: 0;
+ }
+ &:nth-child(2) {
+ top: 0;
+ right: 0;
+ }
+ &:nth-child(3) {
+ bottom: 0;
+ left: 0;
+ }
+ &:nth-child(4) {
+ bottom: 0;
+ right: 0;
+ }
+ }
+ .size-box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100px;
+ height: 100px;
+ background-color: #fff;
+ }
+}
+
+.size-option-top {
+ margin-bottom: 15px;
+}
+.size-option-side {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+.size-option-wrap {
+ width: 88px;
+ margin: 0 auto;
+ .size-option {
+ display: flex;
+ align-items: center;
+ input {
+ width: 100%;
+ flex: 1;
+ }
+ span {
+ flex: none;
+ }
+ }
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index d345f643..ef4cee0d 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,807 +1,1027 @@
* {
- -webkit-text-size-adjust:none;
- -moz-text-size-adjust:none;
- -ms-text-size-adjust:none;
- text-size-adjust: none;
- box-sizing: content-box
+ -webkit-text-size-adjust: none;
+ -moz-text-size-adjust: none;
+ -ms-text-size-adjust: none;
+ text-size-adjust: none;
+ box-sizing: content-box;
}
-*, ::after, ::before {
- box-sizing: border-box;
+*,
+::after,
+::before {
+ box-sizing: border-box;
}
-html, body{
- width: 100%;
- height: 100%;
- font-size: 16px;
+html,
+body {
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
}
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- vertical-align: baseline;
- font-family: 'Noto Sans JP', sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- font-smooth: never;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+ font-family: 'Noto Sans JP', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
}
body {
- line-height: 1.4;
+ line-height: 1.4;
+}
+body:first-of-type caption {
+ display: none;
}
-body:first-of-type caption { display:none;}
-ol, ul {
- list-style: none;
+ol,
+ul {
+ list-style: none;
}
-blockquote, q {
- quotes: none;
+blockquote,
+q {
+ quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
}
table {
- width: 100%;
- border-collapse: separate;
- border-spacing:0;
- border:0 none;
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ border: 0 none;
}
-caption, th, td {
- text-align:left;
- font-weight: normal;
- border:0;
+caption,
+th,
+td {
+ text-align: left;
+ font-weight: normal;
+ border: 0;
}
-a {
- cursor:pointer;
- color:#000;
+a {
+ cursor: pointer;
+ color: #000;
}
-a, a:hover, a:active {
- text-decoration:none;
- -webkit-tap-highlight-color: transparent;
+a,
+a:hover,
+a:active {
+ text-decoration: none;
+ -webkit-tap-highlight-color: transparent;
}
/*form_style*/
-input, select, textarea, button, a, label {
- -webkit-tap-highlight-color:rgba(0,0,0,0);
+input,
+select,
+textarea,
+button,
+a,
+label {
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
-button,input[type=text], input[type=button] {
- -webkit-appearance: none;
- -webkit-border-radius: 0;
- -webkit-appearance:none;
- appearance: none;
- border-radius: 0
+button,
+input[type='text'],
+input[type='button'] {
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+ -webkit-appearance: none;
+ appearance: none;
+ border-radius: 0;
}
-input[type=checkbox], input[type=radio] {
- box-sizing: border-box;
- padding: 0;
+input[type='checkbox'],
+input[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
}
-input, select, button {
- border:0 none;
- outline:none;
- margin:0;
+input,
+select,
+button {
+ border: 0 none;
+ outline: none;
+ margin: 0;
}
select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
}
select::-ms-expand {
- display: none;
+ display: none;
}
::-webkit-input-placeholder {
- line-height:1;
- font-weight:300;
- font-size:0.938rem;
- letter-spacing:-0.6px;
- color:#8b8b8b;
+ line-height: 1;
+ font-weight: 300;
+ font-size: 0.938rem;
+ letter-spacing: -0.6px;
+ color: #8b8b8b;
}
-.log-box ::-webkit-input-placeholder{
- color:#8b8b8b;
+.log-box ::-webkit-input-placeholder {
+ color: #8b8b8b;
}
-button{
- background: transparent;
- font-family: 'Noto Sans JP', sans-serif;
- border: none;
- padding: 0;
- margin: 0;
- line-height: 1.4;
- color: inherit;
- outline: none;
- cursor: pointer;
+button {
+ background: transparent;
+ font-family: 'Noto Sans JP', sans-serif;
+ border: none;
+ padding: 0;
+ margin: 0;
+ line-height: 1.4;
+ color: inherit;
+ outline: none;
+ cursor: pointer;
}
-.pre{
- font-family: 'Pretendard', sans-serif !important;
+.pre {
+ font-family: 'Pretendard', sans-serif !important;
}
// margin
-.mt5{margin-top: 5px !important;}
-.mt10{margin-top: 10px !important;}
-.mt15{margin-top: 15px !important;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mb15{margin-bottom: 15px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.mr15{margin-right: 15px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !important;}
-.ml15{margin-left: 15px !important;}
-
-// align
-.al-l{text-align: left !important;}
-.al-r{text-align: right !important;}
-.al-c{text-align: center !important;}
-
-
-// button
-.btn-frame{
- display: inline-block;
- padding: 0 7px;
- height: 34px;
- line-height: 34px;
- border-radius: 2px;
- color: #fff;
- font-size: 12px;
- font-weight: 400;
- border: 1px solid #000;
- text-align: center;
- font-family: 'Pretendard', sans-serif;
- transition: all .17s ease-in-out;
- cursor: pointer;
- &.block{
- width: 100%;
- }
- &.small{
- font-family: 'Noto Sans JP', sans-serif;
- height: 30px;
- line-height: 30px;
- font-size: 13px;
- }
-
- &.deepgray{
- background-color: #2C2C2C;
- border: 1px solid #484848;
- }
- &.gray{
- background-color: #3C3C3C;
- border: 1px solid #545454;
- }
- &.dark{
- background-color: #1C1C1C;
- border: 1px solid #484848;
- }
- &.modal{
- font-family: 'Noto Sans JP', sans-serif;
- background-color: #272727;
- border: 1px solid #484848;
- color: #aaa;
- &:hover{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- }
- &.sub-tab{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: #2D2D2D;
- border: 1px solid #393939;
- color: #aaa;
- &.act,
- &:hover{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- color: #fff;
- font-weight: 500;
- }
- }
- &.roof{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: transparent;
- border: 1px solid #484848;
- color: #fff;
- &.blue{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- &:hover{
- background-color: #414E6C;
- border: 1px solid #414E6C;
- }
- }
- &.white{
- background-color: #fff;
- border: 1px solid #fff;
- color: #101010;
- &:hover{
- background-color: #fff;
- border: 1px solid #fff;
- color: #101010;
- }
- }
- &:hover{
- font-weight: 400;
- background-color: transparent;
- border: 1px solid #484848;
- color: #fff;
- }
- }
- &.self{
- height: 30px;
- padding: 0 10px;
- line-height: 28px;
- font-family: 'Noto Sans JP', sans-serif;
- background-color: transparent;
- border: 1px solid #676767;
- color: #AAAAAA;
- &:hover{
- background-color: #272727;
- border-color: #676767;
- font-weight: 400;
- }
- }
- &:hover,
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- &.block{
- display: block;
- width: 100%;
- }
- &.ico-flx{
- display: flex;
- align-items: center;
- .ico{
- margin-right: 10px;
- }
- &:hover,
- &.act{
- font-weight: 400;
- }
- }
+.mt5 {
+ margin-top: 5px !important;
+}
+.mt10 {
+ margin-top: 10px !important;
+}
+.mt15 {
+ margin-top: 15px !important;
+}
+.mb5 {
+ margin-bottom: 5px !important;
+}
+.mb10 {
+ margin-bottom: 10px !important;
+}
+.mb15 {
+ margin-bottom: 15px !important;
+}
+.mr5 {
+ margin-right: 5px !important;
+}
+.mr10 {
+ margin-right: 10px !important;
+}
+.mr15 {
+ margin-right: 15px !important;
+}
+.ml5 {
+ margin-left: 5px !important;
+}
+.ml10 {
+ margin-left: 10px !important;
+}
+.ml15 {
+ margin-left: 15px !important;
}
-.btn-origin{
- display: inline-block;
+// align
+.al-l {
+ text-align: left !important;
+}
+.al-r {
+ text-align: right !important;
+}
+.al-c {
+ text-align: center !important;
+}
+
+// button
+.btn-frame {
+ display: inline-block;
+ padding: 0 7px;
+ height: 34px;
+ line-height: 34px;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 400;
+ border: 1px solid #000;
+ text-align: center;
+ font-family: 'Pretendard', sans-serif;
+ transition: all 0.17s ease-in-out;
+ cursor: pointer;
+ &.block {
+ width: 100%;
+ }
+ &.small {
+ font-family: 'Noto Sans JP', sans-serif;
+ height: 30px;
+ line-height: 30px;
+ font-size: 13px;
+ }
+
+ &.deepgray {
+ background-color: #2c2c2c;
+ border: 1px solid #484848;
+ }
+ &.gray {
+ background-color: #3c3c3c;
+ border: 1px solid #545454;
+ }
+ &.dark {
+ background-color: #1c1c1c;
+ border: 1px solid #484848;
+ }
+ &.modal {
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: #272727;
+ border: 1px solid #484848;
+ color: #aaa;
+ &:hover {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+ &.sub-tab {
height: 30px;
padding: 0 10px;
- border-radius: 2px;
- background-color: #101010;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: #2d2d2d;
+ border: 1px solid #393939;
+ color: #aaa;
+ &.act,
+ &:hover {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+ &.roof {
+ height: 30px;
+ padding: 0 10px;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: transparent;
+ border: 1px solid #484848;
color: #fff;
- font-size: 13px;
- font-weight: 400;
- transition: all .15s ease-in-out;
- &.navy{
- background-color: #304961;
- &:hover{
- background-color: #233546;
- }
+ &.blue {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ &:hover {
+ background-color: #414e6c;
+ border: 1px solid #414e6c;
+ }
}
- &.grey{
- background-color: #94A0AD;
- &:hover{
- background-color: #607F9A;
- }
- }
- &.green{
- background-color: #A6BBA8;
- &:hover{
- background-color: #98af9b;
- }
- }
- &.white{
- border: 1px solid #94A0AD;
+ &.white {
+ background-color: #fff;
+ border: 1px solid #fff;
+ color: #101010;
+ &:hover {
background-color: #fff;
- color: #94A0AD;
- &:hover{
- background-color: #fff;
- }
+ border: 1px solid #fff;
+ color: #101010;
+ }
}
+ &:hover {
+ font-weight: 400;
+ background-color: transparent;
+ border: 1px solid #484848;
+ color: #fff;
+ }
+ }
+ &.self {
+ height: 30px;
+ padding: 0 10px;
+ line-height: 28px;
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: transparent;
+ border: 1px solid #676767;
+ color: #aaaaaa;
+ &:hover {
+ background-color: #272727;
+ border-color: #676767;
+ font-weight: 400;
+ }
+ }
+ &:hover,
+ &.act {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
+ color: #fff;
+ font-weight: 500;
+ }
+ &.block {
+ display: block;
+ width: 100%;
+ }
+ &.ico-flx {
+ display: flex;
+ align-items: center;
+ .ico {
+ margin-right: 10px;
+ }
+ &:hover,
+ &.act {
+ font-weight: 400;
+ }
+ }
+}
+
+.btn-origin {
+ display: inline-block;
+ height: 30px;
+ padding: 0 10px;
+ border-radius: 2px;
+ background-color: #101010;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ transition: all 0.15s ease-in-out;
+ &.navy {
+ background-color: #304961;
+ &:hover {
+ background-color: #233546;
+ }
+ }
+ &.grey {
+ background-color: #94a0ad;
+ &:hover {
+ background-color: #607f9a;
+ }
+ }
+ &.green {
+ background-color: #a6bba8;
+ &:hover {
+ background-color: #98af9b;
+ }
+ }
+ &.white {
+ border: 1px solid #94a0ad;
+ background-color: #fff;
+ color: #94a0ad;
+ &:hover {
+ background-color: #fff;
+ }
+ }
}
// select
-.sort-select{
- position: relative;
- display: inline-block;
- min-width: 100px;
- height: 30px;
- line-height: 30px;
- padding: 0 25px 0 10px;
- background-color: #373737;
- border: 1px solid #3F3F3F;
- border-radius: 2px;
- border-top-left-radius: 2px;
+.sort-select {
+ position: relative;
+ display: inline-block;
+ min-width: 100px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 25px 0 10px;
+ background-color: #373737;
+ border: 1px solid #3f3f3f;
+ border-radius: 2px;
+ border-top-left-radius: 2px;
+ color: #fff;
+ cursor: pointer;
+ p {
+ font-size: 13px;
color: #fff;
- cursor: pointer;
- p{
- font-size: 13px;
+ height: 100%;
+ }
+ .select-item-wrap {
+ position: absolute;
+ top: 100%;
+ left: -1px;
+ clip-path: inset(0 0 100% 0);
+ width: calc(100% + 2px);
+ padding: 8px 0;
+ max-height: 100px;
+ overflow-y: auto;
+ background-color: #373737;
+ border: 1px solid #3f3f3f;
+ border-radius: 2px;
+ transition: all 0.17s ease-in-out;
+ visibility: hidden;
+ z-index: 999;
+ .select-item {
+ display: flex;
+ align-items: center;
+ padding: 8px 20px;
+ line-height: 1.4;
+ transition: all 0.17s ease-in-out;
+ button {
+ font-size: 12px;
color: #fff;
- height: 100%;
+ line-height: 1.4;
+ }
+ &:hover {
+ background-color: #2c2c2c;
+ }
}
- .select-item-wrap{
- position: absolute;
- top: 100%;
- left: -1px;
- clip-path:inset(0 0 100% 0);
- width: calc(100% + 2px);
- padding: 8px 0;
- max-height: 100px;
- overflow-y: auto;
- background-color: #373737;
- border: 1px solid #3F3F3F;
- border-radius: 2px;
- transition: all 0.17s ease-in-out;
- visibility: hidden;
- z-index: 999;
- .select-item{
- display: flex;
- align-items: center;
- padding: 8px 20px;
- line-height: 1.4;
- transition: all .17s ease-in-out;
- button{
- font-size: 12px;
- color: #fff;
- line-height: 1.4;
- }
- &:hover{
- background-color: #2C2C2C;
- }
- }
- &::-webkit-scrollbar {
- width: 2px;
- background-color: transparent;
-
- }
- &::-webkit-scrollbar-thumb {
- background-color: #5a5a5a;
- border-radius: 10px;
- }
- &::-webkit-scrollbar-track {
- background-color: transparent;
- }
+ &::-webkit-scrollbar {
+ width: 2px;
+ background-color: transparent;
}
- &::after{
- content: '';
- position: absolute;
- top: 50%;
- right: 7px;
- transform: translateY(-50%);
- width: 10px;
- height: 6px;
- background: url(/static/images/common/select-arr.svg) no-repeat center;
- background-size: cover;
- transition: all .17s ease-in-out;
+ &::-webkit-scrollbar-thumb {
+ background-color: #5a5a5a;
+ border-radius: 10px;
}
- &.active{
- .select-item-wrap{
- clip-path: inset(0 0 0 0);
- visibility: visible;
- }
- &:after{
- transform: translateY(-50%) rotate(-180deg);
- }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
}
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 7px;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 6px;
+ background: url(/static/images/common/select-arr.svg) no-repeat center;
+ background-size: cover;
+ transition: all 0.17s ease-in-out;
+ }
+ &.active {
+ .select-item-wrap {
+ clip-path: inset(0 0 0 0);
+ visibility: visible;
+ }
+ &:after {
+ transform: translateY(-50%) rotate(-180deg);
+ }
+ }
}
-.select-light{
- position: relative;
+.select-light {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 30px;
+ background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+ background-size: 10px 6px;
+ border: 1px solid #eee;
+ padding: 0 30px 0 10px;
+ font-size: 13px;
+ color: #45576f;
+ font-family: 'Noto Sans JP', sans-serif;
+ cursor: pointer;
+ &:disabled {
+ opacity: 1;
+ background-color: #fafafa;
+ color: #999;
+ cursor: default;
+ }
+ &.black {
+ color: #101010;
+ }
+ &.dark {
+ background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+ color: #898989;
+ font-size: 12px;
+ border-radius: 2px;
+ border: none;
+ }
+}
+
+// input
+.form-input {
+ label {
+ display: block;
+ color: #aaa;
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+}
+input[type='password'],
+input[type='number'],
+input[type='text'] {
+ &.input-origin {
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ border-radius: 2px;
+ background-color: #323234;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 500;
+ font-family: 'Pretendard', sans-serif;
+ padding: 0 10px;
+ letter-spacing: 0px;
+ text-align: right;
+ &::placeholder {
+ opacity: 1;
+ font-size: 12px;
+ letter-spacing: 0px;
+ }
+ &.block {
+ width: 100%;
+ }
+ &:read-only {
+ color: #aaa;
+ }
+ &.plane {
+ font-family: 'Noto Sans JP', sans-serif;
+ border: 1px solid #525252;
+ background-color: transparent;
+ }
+ }
+ &.input-light {
display: block;
width: 100%;
height: 30px;
- background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
- background-size: 10px 6px;
+ padding: 0 10px;
border: 1px solid #eee;
- padding: 0 30px 0 10px;
- font-size: 13px;
- color: #45576F;
+ border-radius: 2px;
+ background-color: #fff;
font-family: 'Noto Sans JP', sans-serif;
- cursor: pointer;
- &:disabled{
- opacity: 1;
- background-color: #FAFAFA;
- color: #999;
- cursor: default;
- }
- &.black{
- color: #101010;
- }
- &.dark{
- background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
- color: #898989;
- font-size: 12px;
- border-radius: 2px;
- border: none;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: normal;
+ transition: border-color 0.17s ease-in-out;
+ text-align: left;
+ &:read-only {
+ background-color: #fafafa;
+ color: #999999;
}
+ }
}
-
-// input
-.form-input{
- label{
- display: block;
- color: #aaa;
- font-size: 12px;
- font-weight: 500;
- margin-bottom: 10px;
- }
-}
-input[type=password],
-input[type=number],
-input[type=text]{
- &.input-origin{
- display: inline-block;
- height: 30px;
- line-height: 30px;
- border-radius: 2px;
- background-color: #323234;
- color: #fff;
- font-size: 12px;
- font-weight: 500;
- font-family: 'Pretendard', sans-serif;
- padding: 0 10px;
- letter-spacing: 0px;
- text-align: right;
- &::placeholder{
- opacity: 1;
- font-size: 12px;
- letter-spacing: 0px;
- }
- &.block{
- width: 100%;
- }
- &:read-only{
- color: #AAA;
- }
- &.plane{
- font-family: 'Noto Sans JP', sans-serif;
- border: 1px solid #525252;
- background-color: transparent;
- }
- }
- &.input-light{
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 10px;
- border: 1px solid #eee;
- border-radius: 2px;
- background-color: #fff;
- font-family: 'Noto Sans JP', sans-serif;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- transition: border-color .17s ease-in-out;
- text-align: left;
- &:read-only{
- background-color: #FAFAFA;
- color: #999999;
- }
- }
-}
-
-
-
// check-btn
-.check-btn{
- display: flex;
- align-items: center;
- height: 30px;
- background-color: #3A3A3A;
- border-radius: 3px;
- transition: all .17s ease-in-out;
- .check-area{
- flex: none;
- width: 30px;
- height: 100%;
- border-right: 1px solid #272727;
- background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
- background-size: 11px 9px;
+.check-btn {
+ display: flex;
+ align-items: center;
+ height: 30px;
+ background-color: #3a3a3a;
+ border-radius: 3px;
+ transition: all 0.17s ease-in-out;
+ .check-area {
+ flex: none;
+ width: 30px;
+ height: 100%;
+ border-right: 1px solid #272727;
+ background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+ background-size: 11px 9px;
+ }
+ .title-area {
+ padding: 0 10px;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ }
+ &.block {
+ width: 100%;
+ }
+ &:hover,
+ &.act {
+ background-color: #fff;
+ .check-area {
+ border-right: 1px solid #101010;
+ background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
}
- .title-area{
- padding: 0 10px;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- }
- &.block{
- width: 100%;
- }
- &:hover,
- &.act{
- background-color: #fff;
- .check-area{
- border-right: 1px solid #101010;
- background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
- }
- .title-area{
- color: #101010;
- font-weight: 600;
- }
+ .title-area {
+ color: #101010;
+ font-weight: 600;
}
+ }
}
// arr-btn
-.arr-btn{
- display: block;
- height: 30px;
- border-radius: 3px;
- background-color: #3A3A3A;
- padding: 0 11px;
- text-align: left;
- transition: all .17s ease-in-out;
- span{
- position: relative;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- padding-right: 15px;
- &:after{
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
- }
+.arr-btn {
+ display: block;
+ height: 30px;
+ border-radius: 3px;
+ background-color: #3a3a3a;
+ padding: 0 11px;
+ text-align: left;
+ transition: all 0.17s ease-in-out;
+ span {
+ position: relative;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ padding-right: 15px;
+ &:after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+ }
+ }
+ &:hover,
+ &.act {
+ background-color: #fff;
+ span {
+ color: #101010;
+ font-weight: 500;
+ &:after {
+ background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+ }
+ }
+ }
+ &.dark {
+ text-align: center;
+ background-color: #272727;
+ border: 1px solid #484848;
+ span {
+ color: #fff;
+ &:after {
+ background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+ }
}
&:hover,
- &.act{
- background-color: #fff;
- span{
- color: #101010;
- font-weight: 500;
- &:after{
- background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
- }
- }
- }
- &.dark{
- text-align: center;
- background-color: #272727;
- border: 1px solid #484848;
- span{
- color: #Fff;
- &:after{
- background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
- }
- }
- &:hover,
- &.act{
- background-color: #1083E3;
- border: 1px solid #1083E3;
- }
+ &.act {
+ background-color: #1083e3;
+ border: 1px solid #1083e3;
}
+ }
}
// radio
.d-check-radio,
-.d-check-box{
- line-height: 1.1;
+.d-check-box {
+ line-height: 1.1;
+ cursor: pointer;
+ input[type='checkbox'],
+ input[type='radio'] {
+ position: static;
+ margin-left: 0;
cursor: pointer;
- input[type=checkbox],
- input[type=radio]{
- position: static;
- margin-left: 0;
- cursor: pointer;
- opacity: 0;
- z-index: 1;
- flex: 0 0 auto;
+ opacity: 0;
+ z-index: 1;
+ flex: 0 0 auto;
+ }
+ label {
+ position: relative;
+ padding-left: 10px;
+ margin-bottom: 0;
+ word-break: break-all;
+ line-height: 1.2;
+ display: inline;
+ vertical-align: top;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ cursor: pointer;
+ }
+ &.light {
+ label {
+ color: #45576f;
}
- label{
- position: relative;
- padding-left: 10px;
- margin-bottom: 0;
- word-break: break-all;
- line-height: 1.2;
- display: inline;
- vertical-align: top;
- color: #fff;
- font-size: 13px;
- font-weight: 400;
- cursor: pointer;
- }
- &.light{
- label{
- color: #45576F;
- }
- }
- &.no-text{
- label{
- padding-left: 0;
- }
+ }
+ &.no-text {
+ label {
+ padding-left: 0;
}
+ }
}
.d-check-radio {
- label{
- &::before{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top:2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #999999;
- border-radius: 100%;
- background-color: transparent;
- text-align:center;
- font-size:13px;
- line-height:1.4;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- }
- &::after{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 9px;
- height: 9px;
- top:6px;
- left: 4px;
- margin-left: -12px;
- border: none;
- border-radius: 100%;
- background-color: #fff;
- text-align:center;
- font-size:13px;
- line-height:1.4;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
- }
+ label {
+ &::before {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top: 2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #999999;
+ border-radius: 100%;
+ background-color: transparent;
+ text-align: center;
+ font-size: 13px;
+ line-height: 1.4;
+ transition:
+ border 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- &.light{
- label{
- &:before{
- border-color: #D6D6D7;
- }
- &:after{
- background-color: #697C8F;
- }
- }
+ &::after {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 9px;
+ height: 9px;
+ top: 6px;
+ left: 4px;
+ margin-left: -12px;
+ border: none;
+ border-radius: 100%;
+ background-color: #fff;
+ text-align: center;
+ font-size: 13px;
+ line-height: 1.4;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ opacity 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- input[type=radio]:checked + label::after{
- opacity: 1;
- visibility: visible;
+ }
+ &.light {
+ label {
+ &:before {
+ border-color: #d6d6d7;
+ }
+ &:after {
+ background-color: #697c8f;
+ }
}
- &.pop{
- label{
- font-size: 12px;
- &:before{
- width: 16px;
- height: 16px;
- border-color: #fff;
- }
- &:after{
- width: 8px;
- height: 8px;
- background-color: #fff;
- }
- }
+ }
+ input[type='radio']:checked + label::after {
+ opacity: 1;
+ visibility: visible;
+ }
+ &.pop {
+ label {
+ font-size: 12px;
+ &:before {
+ width: 16px;
+ height: 16px;
+ border-color: #fff;
+ }
+ &:after {
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ }
}
+ }
}
// check-box
-.d-check-box{
- label{
- &.red{color: #FFCACA;}
- &::before{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top: 2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #D6D6D7;
- background-color: #fff;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
- }
- &:after{
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 16px;
- height: 16px;
- top:0;
- left: 0;
- margin-left: -.8rem;
- transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
- }
+.d-check-box {
+ label {
+ &.red {
+ color: #ffcaca;
}
- input[type=checkbox]:checked + label::after{
- content: "";
- display: inline-block;
- position: absolute;
- top: 1px;
- left: -1px;
- width: 5px;
- height: 8px;
- border: 2px solid #697C8F;
- border-left: none;
- border-top: none;
- transform: translate(7.75px,4.5px) rotate(45deg);
- -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+ &::before {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top: 2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #d6d6d7;
+ background-color: #fff;
+ transition:
+ border 0.15s ease-in-out,
+ color 0.15s ease-in-out;
}
- &.pop{
- label{
- &:before{
- background-color: transparent;
- }
- }
- input[type=checkbox]:checked + label::after{
- border-color: #fff;
- }
- &.no-text{
- label{
- padding-left: 0;
- }
- }
+ &:after {
+ cursor: pointer;
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ top: 0;
+ left: 0;
+ margin-left: -0.8rem;
+ transition:
+ border 0.05s ease-in-out,
+ color 0.05s ease-in-out;
}
- &.sel{
- input[type=checkbox]:checked + label{
- color: #D7C863;
- }
- input[type=checkbox]:checked + label::before,
- input[type=checkbox]:checked + label::after{
- border-color: #D7C863;
- }
+ }
+ input[type='checkbox']:checked + label::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: 1px;
+ left: -1px;
+ width: 5px;
+ height: 8px;
+ border: 2px solid #697c8f;
+ border-left: none;
+ border-top: none;
+ transform: translate(7.75px, 4.5px) rotate(45deg);
+ -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+ }
+ &.pop {
+ label {
+ &:before {
+ background-color: transparent;
+ }
}
+ input[type='checkbox']:checked + label::after {
+ border-color: #fff;
+ }
+ &.no-text {
+ label {
+ padding-left: 0;
+ }
+ }
+ }
+ &.sel {
+ input[type='checkbox']:checked + label {
+ color: #d7c863;
+ }
+ input[type='checkbox']:checked + label::before,
+ input[type='checkbox']:checked + label::after {
+ border-color: #d7c863;
+ }
+ }
}
// date-picker
-.date-picker{
- svg{display: none;}
- .react-datepicker-wrapper{
- width: 100%;
+.date-picker {
+ svg {
+ display: none;
+ }
+ .react-datepicker-wrapper {
+ width: 100%;
+ }
+ input[type='text'] {
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0 34px 0 10px;
+ border-radius: 2px;
+ border: 1px solid #eee;
+ font-size: 13px;
+ color: #45576f;
+ font-weight: normal;
+ font-family: 'Noto Sans JP', sans-serif;
+ background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+ background-size: 14px 15px;
+ cursor: pointer;
+ }
+}
+
+// react select
+.react-select-custom {
+ width: 100%;
+ .custom__control {
+ height: 30px;
+ min-height: unset;
+ border-radius: 2px;
+ border-color: #eee;
+ background-color: #fff;
+ &:hover {
+ border-color: #eee;
}
- input[type=text]{
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 34px 0 10px;
- border-radius: 2px;
- border: 1px solid #eee;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- font-family: 'Noto Sans JP', sans-serif;
- background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
- background-size: 14px 15px;
- cursor: pointer;
+ }
+ .custom__control--is-focused {
+ border-color: #eee;
+ box-shadow: unset;
+ &:hover {
+ border-color: #eee;
}
-}
\ No newline at end of file
+ }
+ .custom__value-container {
+ height: 100%;
+ padding: 0 10px;
+ }
+ .custom__placeholder,
+ .custom__single-value {
+ margin: 0;
+ }
+ .custom__single-value {
+ font-size: 13px;
+ color: #45576f;
+ font-weight: 400;
+ }
+ .custom__placeholder {
+ font-size: 13px;
+ color: #bbbbbb;
+ font-weight: 400;
+ }
+ .custom__indicator {
+ padding: 0;
+ svg {
+ display: none;
+ }
+ }
+ .custom__clear-indicator {
+ width: 30px;
+ height: 100%;
+ background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+ background-size: 8px 8px;
+ }
+ .custom__dropdown-indicator {
+ width: 30px;
+ height: 100%;
+ background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+ }
+
+ .custom__menu {
+ margin: 1px 0;
+ border-radius: 2px;
+ overflow: hidden;
+ }
+ .custom__menu-list {
+ padding: 0;
+ }
+ .custom__option {
+ font-size: 13px;
+ padding: 7px 10px;
+ color: #45576f;
+ }
+ .custom__option--is-selected {
+ color: #fff;
+ }
+ // disable
+ &.custom--is-disabled {
+ .custom__control {
+ background-color: #fafafa;
+ }
+ .custom__single-value {
+ color: #999999;
+ }
+ }
+}
diff --git a/src/util/board-utils.js b/src/util/board-utils.js
index a129c4d4..c41ba22a 100644
--- a/src/util/board-utils.js
+++ b/src/util/board-utils.js
@@ -8,8 +8,10 @@ export const handleFileDown = async (file) => {
const params = new URLSearchParams({
encodeFileNo: file.encodeFileNo,
})
+ const options = { responseType: 'blob' }
const apiUrl = `${url}?${params.toString()}`
- await promiseGet({ url: apiUrl, responseType: 'blob' })
+
+ await promiseGet({ url: apiUrl, option: options })
.then((resultData) => {
if (resultData) {
const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
@@ -25,7 +27,7 @@ export const handleFileDown = async (file) => {
}
})
.catch((error) => {
- alert(error.response.data.message)
+ alert('File does not exist.')
})
}
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()
+ }
}
}
diff --git a/yarn.lock b/yarn.lock
index 1472f5ac..c8c53b57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -273,7 +273,7 @@
resolved "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz"
integrity sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==
-"@emotion/babel-plugin@^11.11.0", "@emotion/babel-plugin@^11.12.0":
+"@emotion/babel-plugin@^11.12.0":
version "11.12.0"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
@@ -290,7 +290,7 @@
source-map "^0.5.7"
stylis "4.2.0"
-"@emotion/cache@^11.11.0", "@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
version "11.13.1"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
@@ -306,32 +306,11 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
-"@emotion/is-prop-valid@^1.2.1":
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
- integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
- dependencies:
- "@emotion/memoize" "^0.9.0"
-
"@emotion/memoize@^0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
-"@emotion/react@11.11.0":
- version "11.11.0"
- resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.0.tgz#408196b7ef8729d8ad08fc061b03b046d1460e02"
- integrity sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==
- dependencies:
- "@babel/runtime" "^7.18.3"
- "@emotion/babel-plugin" "^11.11.0"
- "@emotion/cache" "^11.11.0"
- "@emotion/serialize" "^1.1.2"
- "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
- "@emotion/utils" "^1.2.1"
- "@emotion/weak-memoize" "^0.3.1"
- hoist-non-react-statics "^3.3.1"
-
"@emotion/react@^11.8.1":
version "11.13.3"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
@@ -346,7 +325,7 @@
"@emotion/weak-memoize" "^0.4.0"
hoist-non-react-statics "^3.3.1"
-"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
@@ -362,38 +341,21 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
-"@emotion/styled@11.11.0":
- version "11.11.0"
- resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
- integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
- dependencies:
- "@babel/runtime" "^7.18.3"
- "@emotion/babel-plugin" "^11.11.0"
- "@emotion/is-prop-valid" "^1.2.1"
- "@emotion/serialize" "^1.1.2"
- "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
- "@emotion/utils" "^1.2.1"
-
"@emotion/unitless@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.1", "@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
-"@emotion/utils@^1.2.1", "@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
+"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
-"@emotion/weak-memoize@^0.3.1":
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
- integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
-
"@emotion/weak-memoize@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
@@ -5955,14 +5917,6 @@ react-draggable@^4.4.6:
clsx "^1.1.1"
prop-types "^15.8.1"
-react-dropdown-select@^4.11.3:
- version "4.11.3"
- resolved "https://registry.yarnpkg.com/react-dropdown-select/-/react-dropdown-select-4.11.3.tgz#b23b8906f3bedc9d6a1a2125af936b34d4057158"
- integrity sha512-/mOGSqqhmKsxxrmotLM+qn1Ss3nxGN6QnYusyQ7f0wizsWrc7ZmbcZhGRtwkJwpL6JYDQVTn19EYxJU1XfXrDA==
- dependencies:
- "@emotion/react" "11.11.0"
- "@emotion/styled" "11.11.0"
-
react-hook-form@^7.53.0:
version "7.53.0"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"