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

Merge branch 'dev' into dev-yj

Browse Source
This commit is contained in:
yjnoh 2024-11-12 14:02:44 +09:00
commit cdc861f3d2
18 changed files with 4732 additions and 3978 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/side_icon10.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.75 3.94737H12.0625C13.6425 3.94737 14.4325 3.94737 15 4.31991C15.2457 4.48119 15.4567 4.68842 15.6208 4.92979C16 5.48734 16 6.26349 16 7.81579C16 8.02719 16.0003 8.01008 16 8.36842M8.5 3.94737L8.02492 3.01388C7.63134 2.24053 7.27167 1.46209 6.39944 1.14074C6.01742 1 5.58102 1 4.7082 1C3.34585 1 2.66467 1 2.15355 1.28023C1.7892 1.47999 1.48857 1.77535 1.28524 2.13331C1 2.63547 1 3.30469 1 4.64315V6.89474C1 10.3682 1 12.105 2.09835 13.1841C3.11612 14.184 4.7087 14.2574 7.75 14.2627" stroke="white" stroke-linecap="round"/>
<path d="M12.7793 14.5884C13.3445 15.1372 14.2609 15.1372 14.8261 14.5884C15.3914 14.0396 15.3914 13.1498 14.8261 12.601L13.5469 11.3589C13.0473 10.8739 12.2733 10.8175 11.71 11.19M11.7208 9.51684C11.1556 8.96805 10.2392 8.96805 9.67397 9.51684C9.10876 10.0656 9.10876 10.9554 9.67397 11.5042L10.9532 12.7463C11.462 13.2403 12.2554 13.2896 12.8211 12.8942" stroke="white" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
src/common/common.js
View File

@ -76,7 +76,6 @@ export const LINE_TYPE = {
HIP: 'hip',
RIDGE: 'ridge',
GABLE: 'gable',
VALLEY: 'valley',
VERGE: 'verge',
ONESIDE_FLOW_RIDGE: 'onesideFlowRidge', //한쪽흐름 용마루
YOSEMUNE: 'yosemune', //요세무네
@ -158,6 +157,8 @@ export const SAVE_KEY = [
'lines',
'offset',
'arrow',
'surfaceCompass',
'moduleCompass',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

10
src/components/fabric/QPolygon.js
View File

@ -131,10 +131,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
this.on('selected', () => {
Object.keys(this.controls).forEach((controlKey) => {
if (controlKey !== 'ml' && controlKey !== 'mr') {
this.setControlVisible(controlKey, false)
}
})
this.set({ hasBorders: false })
})
this.on('removed', () => {
@ -191,7 +190,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
line.endPoint = nextPoint
this.lines.push(line)
})
// }
},
containsPoint: function (point) {
const isInside = this.inPolygon(point)
this.set('selectable', isInside)
return isInside
},
// 보조선 그리기

5
src/components/floor-plan/CanvasFrame.jsx
View File

@ -13,6 +13,7 @@ import QContextMenu from '@/components/common/context-menu/QContextMenu'
import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
import { MENU } from '@/common/common'
import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
import { totalDisplaySelector } from '@/store/settingAtom'
export default function CanvasFrame() {
const canvasRef = useRef(null)
@ -21,6 +22,7 @@ export default function CanvasFrame() {
const currentMenu = useRecoilValue(currentMenuState)
const { contextMenu, handleClick } = useContextMenu()
const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans, currentCanvasPlan } = usePlan()
const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
useEvent()
const loadCanvas = () => {
@ -72,7 +74,8 @@ export default function CanvasFrame() {
MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING,
MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING,
MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
].includes(currentMenu) && <PanelBatchStatistics />}
].includes(currentMenu) &&
totalDisplay && <PanelBatchStatistics />}
</div>
)
}

1
src/components/floor-plan/CanvasMenu.jsx
View File

@ -235,6 +235,7 @@ export default function CanvasMenu(props) {
<QSelectBox title={'瓦53A'} option={SelectOption} />
</div>
<div className="btn-from">
<button className="btn10"></button>
{/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
<button className="btn04" onClick={handlePopup}></button>
<button className="btn05"></button>

61
src/components/floor-plan/modal/ImgLoad.jsx Normal file
View File

@ -0,0 +1,61 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
export default function ImgLoad() {
return (
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">画像を読み込む </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="img-flex-box">
<span className="normal-font mr10">サイズ調整と回転</span>
<label className="toggle-btn">
<input type="checkbox" />
<span className="slider"></span>
</label>
</div>
<div className="img-load-from">
<div className="img-load-item">
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">ファイルを読み込む</label>
</div>
<div className="img-flex-box">
<div className="img-edit-wrap">
<label className="img-edit-btn" htmlFor="img_file">
<span className="img-edit"></span>
ファイルの追加
</label>
<input type="file" id="img_file" style={{ display: 'none' }} />
</div>
<div className="img-name-wrap">
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
<button className="img-check"></button>
</div>
</div>
</div>
<div className="img-load-item">
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">アドレスを読み込む</label>
</div>
<div className="img-flex-box for-address">
<input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} />
<div className="img-edit-wrap">
<button className="img-edit-btn">完了</button>
</div>
<span className="check-address fail"></span>
<span className="check-address success"></span>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">完了</button>
</div>
</div>
</div>
</WithDraggable>
)
}

17
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -1,7 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import Orientation from '@/components/floor-plan/modal/basic/step/Orientation'
import { useEffect, useRef, useState } from 'react'
import Module from '@/components/floor-plan/modal/basic/step/Module'
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
@ -9,12 +8,22 @@ import Placement from '@/components/floor-plan/modal/basic/step/Placement'
import { useRecoilState } from 'recoil'
import { canvasSettingState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [tabNum, setTabNum] = useState(1)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const orientationRef = useRef(null)
const handleBtnNextStep = () => {
if (tabNum === 1) {
orientationRef.current.handleNextStep()
}
setTabNum(tabNum + 1)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx-2`}>
@ -32,7 +41,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
</div>
{tabNum === 1 && <Orientation setTabNum={setTabNum} />}
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}
@ -49,7 +58,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
)}
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
{tabNum !== 3 && (
<button className="btn-frame modal" onClick={() => setTabNum(tabNum + 1)}>
<button className="btn-frame modal" onClick={handleBtnNextStep}>
Next
</button>
)}

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

@ -1,22 +1,21 @@
import { useState } from 'react'
import { forwardRef, useImperativeHandle, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useOrientation } from '@/hooks/popup/useOrientation'
import { getDegreeInOrientation } from '@/util/canvas-util'
export default function Orientation({ setTabNum }) {
export const Orientation = forwardRef(({ tabNum }, ref) => {
const { getMessage } = useMessage()
const [compasDeg, setCompasDeg] = useState(0)
const { nextStep, compasDeg, setCompasDeg } = useOrientation()
const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
const getDegree = (degree) => {
if (degree % 15 === 0) return degree
useImperativeHandle(ref, () => ({
handleNextStep,
}))
let value = Math.floor(degree / 15)
const remain = ((degree / 15) % 1).toFixed(5)
if (remain > 0.4) {
value++
}
return value * 15
const handleNextStep = () => {
nextStep()
}
return (
@ -31,7 +30,7 @@ export default function Orientation({ setTabNum }) {
{Array.from({ length: 180 / 15 }).map((dot, index) => (
<div
key={index}
className={`circle ${getDegree(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
className={`circle ${getDegreeInOrientation(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
onClick={() => setCompasDeg(15 * (12 + index))}
>
{index === 0 && <i>180°</i>}
@ -39,13 +38,17 @@ export default function Orientation({ setTabNum }) {
</div>
))}
{Array.from({ length: 180 / 15 }).map((dot, index) => (
<div key={index} className={`circle ${getDegree(compasDeg) === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
<div
key={index}
className={`circle ${getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
onClick={() => setCompasDeg(15 * index)}
>
{index === 0 && <i>0°</i>}
{index === 6 && <i>90°</i>}
</div>
))}
<div className="compas">
<div className="compas-arr" style={{ transform: `rotate(${getDegree(compasDeg)}deg)` }}></div>
<div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(compasDeg)}deg)` }}></div>
</div>
</div>
</div>
@ -62,7 +65,11 @@ export default function Orientation({ setTabNum }) {
className="input-origin block"
value={compasDeg}
readOnly={hasAnglePassivity}
onChange={(e) => setCompasDeg(e.target.value !== '' ? Number.parseInt(e.target.value) : 0)}
onChange={(e) =>
setCompasDeg(
e.target.value !== '' && parseInt(e.target.value) <= 360 && parseInt(e.target.value) >= 0 ? Number.parseInt(e.target.value) : 0,
)
}
/>
</div>
<span className="thin">°</span>
@ -72,4 +79,4 @@ export default function Orientation({ setTabNum }) {
</div>
</>
)
}
})

3
src/components/management/Stuff.jsx
View File

@ -174,7 +174,8 @@ export default function Stuff() {
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
startRow: (pageNo - 1) * pageSize + 1,
endRow: pageNo * pageSize,
schSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId ? stuffSearchParams.schOtherSelSaleStoreId : stuffSearchParams.schSelSaleStoreId,
schSelSaleStoreId: stuffSearchParams?.schSelSaleStoreId ? stuffSearchParams.schSelSaleStoreId : '',
schOtherSelSaleStoreId: stuffSearchParams?.schOtherSelSaleStoreId ? stuffSearchParams.schOtherSelSaleStoreId : '',
schSortType: stuffSearchParams.schSortType,
}

69
src/components/management/StuffSearchCondition.jsx
View File

@ -80,7 +80,8 @@ export default function StuffSearchCondition() {
schAddress: address ? address : '',
schObjectName: objectName ? objectName : '',
schDispCompanyName: dispCompanyName ? dispCompanyName : '',
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : '',
schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
schReceiveUser: receiveUser ? receiveUser : '',
schDateType: dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@ -97,7 +98,8 @@ export default function StuffSearchCondition() {
schAddress: address,
schObjectName: objectName,
schDispCompanyName: dispCompanyName,
schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : stuffSearch.schSelSaleStoreId,
schSelSaleStoreId: stuffSearch?.schSelSaleStoreId,
schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId,
schReceiveUser: receiveUser,
schDateType: dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
@ -119,7 +121,7 @@ export default function StuffSearchCondition() {
objectNameRef.current.value = ''
dispCompanyNameRef.current.value = ''
receiveUserRef.current.value = ''
stuffSearch.schDateType = 'U'
setObjectNo('')
setAddress('')
setobjectName('')
@ -184,11 +186,31 @@ export default function StuffSearchCondition() {
setSchSelSaleStoreList(allList)
setFavoriteStoreList(favList)
setShowSaleStoreList(favList)
// setSchSelSaleStoreId(session?.storeId)
// if (stuffSearch.code === 'FINISH') {
if (stuffSearch.schSelSaleStoreId != '') {
setSchSelSaleStoreId(stuffSearch.schSelSaleStoreId)
// if (stuffSearch.schOtherSelSaleStoreId != '') {
url = `/api/object/saleStore/${stuffSearch.schSelSaleStoreId}/list?firstFlg=1&userId=${session?.userId}`
get({ url: url }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
row.value = row.saleStoreId
row.label = row.saleStoreName
})
otherList = res.filter((row) => row.saleStoreLevel !== '1')
setOtherSaleStoreList(otherList)
setOtherSaleStoreId(stuffSearch.schOtherSelSaleStoreId)
} else {
setOtherSaleStoreList([])
}
})
// }
}
// }
setStuffSearch({
...stuffSearch,
code: 'S',
// schSelSaleStoreId: session?.storeId,
})
//T01일때 2차 판매점 호출하기 디폴트로 1차점을 본인으로 셋팅해서 세션storeId사용
@ -224,8 +246,11 @@ export default function StuffSearchCondition() {
setStuffSearch({
...stuffSearch,
code: 'S',
schSelSaleStoreId: allList[0].saleStoreId,
})
if (stuffSearch.schOtherSelSaleStoreId != '') {
setOtherSaleStoreId(stuffSearch.schOtherSelSaleStoreId)
}
} else {
//10X22, 201X112 그냥2차점
//2차점인데 34들고있는애 202X217
@ -241,7 +266,8 @@ export default function StuffSearchCondition() {
setStuffSearch({
...stuffSearch,
code: 'S',
schSelSaleStoreId: otherList[0].saleStoreId,
schSelSaleStoreId: res[0].saleStoreId,
schOtherSelSaleStoreId: otherList[0].saleStoreId,
})
}
}
@ -311,14 +337,33 @@ export default function StuffSearchCondition() {
if (isObjectNotEmpty(key)) {
setOtherSaleStoreId(key.saleStoreId)
stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
//2차점 골랐을때 1차점 값
stuffSearch.schSelSaleStoreId = schSelSaleStoreId
} else {
//X누르면 검색조건에 1차점으로 셋팅
if (session.storeLvl === '1') {
if (stuffSearch.schOtherSelSaleStoreId === '') {
stuffSearch.schSelSaleStoreId = ''
setSchSelSaleStoreId(session.storeId)
} else {
setStuffSearch({
...stuffSearch,
schSelSaleStoreId: '',
schOtherSelSaleStoreId: '',
})
//1차점 로그인해서 2차점 고르고 초기화 눌렀을때
//stuffSearch에 schSelSaleStoreId 날리고
//schOtherSelSaleStoreId 날리고
}
} else {
setOtherSaleStoreId('')
setSchSelSaleStoreId(schSelSaleStoreId)
stuffSearch.schOtherSelSaleStoreId = ''
stuffSearch.schSelSaleStoreId = schSelSaleStoreId
}
}
}
useEffect(() => {
setStartDate(stuffSearch?.schFromDt ? stuffSearch.schFromDt : dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
@ -533,7 +578,9 @@ export default function StuffSearchCondition() {
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else {
if (stuffSearch?.schSelSaleStoreId !== '') {
if (stuffSearch?.code === 'FINISH') {
return option.saleStoreId === schSelSaleStoreId
} else if (stuffSearch?.schSelSaleStoreId !== '') {
return option.saleStoreId === stuffSearch.schSelSaleStoreId
} else {
return false
@ -608,10 +655,11 @@ export default function StuffSearchCondition() {
type="radio"
name="radio_ptype"
id="radio_u"
checked={dateType === 'U' ? true : false}
checked={stuffSearch.schDateType === 'U' ? true : false}
value={'U'}
onChange={(e) => {
setDateType(e.target.value)
stuffSearch.schDateType = e.target.value
}}
/>
<label htmlFor="radio_u">{getMessage('stuff.search.schDateTypeU')}</label>
@ -621,10 +669,11 @@ export default function StuffSearchCondition() {
type="radio"
name="radio_ptype"
id="radio_r"
checked={dateType === 'R' ? true : false}
checked={stuffSearch.schDateType === 'R' ? true : false}
value={'R'}
onChange={(e) => {
setDateType(e.target.value)
stuffSearch.schDateType = e.target.value
}}
/>
<label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</label>

2
src/hooks/popup/useFlowDirectionSetting.js
View File

@ -21,7 +21,7 @@ export function useFlowDirectionSetting(id) {
direction: direction,
surfaceCompass: orientation,
})
// drawDirectionArrow(roof)
drawDirectionArrow(roof)
canvas?.renderAll()
closePopup(id)
}

25
src/hooks/popup/useOrientation.js Normal file
View File

@ -0,0 +1,25 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
import { compasDegAtom } from '@/store/orientationAtom'
// 모듈,회로 구성 탭 기본설정 > 방위설정 탭
export function useOrientation() {
const canvas = useRecoilValue(canvasState)
const [compasDeg, setCompasDeg] = useRecoilState(compasDegAtom)
const { drawDirectionArrow } = usePolygon()
const nextStep = () => {
const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
roofs.forEach((roof) => {
roof.set({
moduleCompass: compasDeg,
})
drawDirectionArrow(roof)
})
}
return { nextStep, compasDeg, setCompasDeg }
}

105
src/hooks/usePolygon.js
View File

@ -1,7 +1,7 @@
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, fontFamilyState, fontSizeState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { fabric } from 'fabric'
import { getDegreeByChon, getDirectionByPoint, isPointOnLine } from '@/util/canvas-util'
import { getDegreeByChon, getDegreeInOrientation, getDirectionByPoint, isPointOnLine } from '@/util/canvas-util'
import { QPolygon } from '@/components/fabric/QPolygon'
import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils'
import { flowDisplaySelector } from '@/store/settingAtom'
@ -283,12 +283,113 @@ export const usePolygon = () => {
//arrow의 compass 값으로 방향 글자 설정 필요
const drawDirectionStringToArrow2 = (polygon) => {
const { direction, surfaceCompass, moduleCompass, arrow } = polygon
if (moduleCompass === null || moduleCompass === undefined) {
const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
fontSize: flowFontOptions.fontSize.value,
fill: flowFontOptions.fontColor.value,
fontFamily: flowFontOptions.fontFamily.value,
fontWeight: flowFontOptions.fontWeight.value,
originX: 'center',
originY: 'center',
name: 'flowText',
selectable: false,
left: arrow.stickeyPoint.x,
top: arrow.stickeyPoint.y,
parent: arrow,
parentId: arrow.id,
visible: isFlowDisplay,
})
if (!surfaceCompass && !moduleCompass) {
polygon.canvas.add(textObj)
return
}
let text = ''
console.log('direction', direction, surfaceCompass, moduleCompass)
const compassType = (375 - moduleCompass) / 15
if ([1, 25].includes(compassType)) {
direction === 'north' ? (text = '北') : direction === 'south' ? (text = '南') : direction === 'west' ? (text = '西') : (text = '東')
} else if ([2, 3].includes(compassType)) {
direction === 'north'
? (text = '北北東')
: direction === 'south'
? (text = '南南西')
: direction === 'west'
? (text = '西北西')
: (text = '東南東')
} else if ([4].includes(compassType)) {
direction === 'north' ? (text = '北東') : direction === 'south' ? (text = '南西') : direction === 'west' ? (text = '北西') : (text = '南東')
} else if ([5, 6].includes(compassType)) {
direction === 'north'
? (text = '東北東')
: direction === 'south'
? (text = '西南西')
: direction === 'west'
? (text = '北北西')
: (text = '南南東')
} else if ([7].includes(compassType)) {
direction === 'north' ? (text = '東') : direction === 'south' ? (text = '西') : direction === 'west' ? (text = '北') : (text = '南')
} else if ([8, 9].includes(compassType)) {
direction === 'north'
? (text = '東南東')
: direction === 'south'
? (text = '西北西')
: direction === 'west'
? (text = '北北東')
: (text = '南南西')
} else if ([10].includes(compassType)) {
direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '南西') : (text = '北東')
} else if ([11, 12].includes(compassType)) {
direction === 'north'
? (text = '南南東')
: direction === 'south'
? (text = '北北西')
: direction === 'west'
? (text = '東北東')
: (text = '西南西')
} else if ([13].includes(compassType)) {
direction === 'north' ? (text = '南') : direction === 'south' ? (text = '北') : direction === 'west' ? (text = '東') : (text = '西')
} else if ([14, 15].includes(compassType)) {
direction === 'north'
? (text = '南南西')
: direction === 'south'
? (text = '北北東')
: direction === 'west'
? (text = '東南東')
: (text = '西北西')
} else if ([16].includes(compassType)) {
direction === 'north' ? (text = '南西') : direction === 'south' ? (text = '北東') : direction === 'west' ? (text = '南東') : (text = '北西')
} else if ([17, 18].includes(compassType)) {
direction === 'north'
? (text = '西南西')
: direction === 'south'
? (text = '東北東')
: direction === 'west'
? (text = '南南東')
: (text = '北北西')
} else if ([19].includes(compassType)) {
direction === 'north' ? (text = '西') : direction === 'south' ? (text = '東') : direction === 'west' ? (text = '南') : (text = '北')
} else if ([20, 21].includes(compassType)) {
direction === 'north'
? (text = '西北西')
: direction === 'south'
? (text = '東南東')
: direction === 'west'
? (text = '南南西')
: (text = '北北東')
} else if ([22].includes(compassType)) {
direction === 'north' ? (text = '北西') : direction === 'south' ? (text = '南東') : direction === 'west' ? (text = '南西') : (text = '北東')
} else if ([23, 24].includes(compassType)) {
direction === 'north'
? (text = '北北西')
: direction === 'south'
? (text = '南南東')
: direction === 'west'
? (text = '西南西')
: (text = '東北東')
}
// 東,西,南,北
if ([360].includes(surfaceCompass)) {

6
src/store/orientationAtom.js Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil'
export const compasDegAtom = atom({
key: 'compasDegAtom',
default: 0,
})

263
src/styles/_contents.scss
View File

@ -26,14 +26,14 @@
min-width: 1280px;
padding-bottom: 0;
background-color: #383838;
transition: padding .17s ease-in-out;
transition: padding 0.17s ease-in-out;
z-index: 999;
.canvas-menu-inner {
position: relative;
display: flex;
align-items: center;
padding: 0 40px 0 20px;
background-color: #2C2C2C;
background-color: #2c2c2c;
height: 46.8px;
z-index: 999;
.canvas-menu-list {
@ -53,7 +53,7 @@
font-weight: 600;
padding: 15px 20px;
opacity: 0.55;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
.menu-icon {
display: block;
width: 14px;
@ -62,13 +62,27 @@
background-position: center;
background-size: contain;
margin-right: 10px;
&.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
&.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
&.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
&.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
&.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
&.con00 {
background-image: url(/static/images/canvas/menu_icon00.svg);
}
&.con01 {
background-image: url(/static/images/canvas/menu_icon01.svg);
}
&.con02 {
background-image: url(/static/images/canvas/menu_icon02.svg);
}
&.con03 {
background-image: url(/static/images/canvas/menu_icon03.svg);
}
&.con04 {
background-image: url(/static/images/canvas/menu_icon04.svg);
}
&.con05 {
background-image: url(/static/images/canvas/menu_icon05.svg);
}
&.con06 {
background-image: url(/static/images/canvas/menu_icon06.svg);
}
}
}
&.active {
@ -100,25 +114,47 @@
width: 30px;
height: 30px;
border-radius: 2px;
background-color: #3D3D3D;
background-color: #3d3d3d;
background-position: center;
background-repeat: no-repeat;
background-size: 15px 15px;
transition: all .17s ease-in-out;
&.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
&.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
&.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
&.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
transition: all 0.17s ease-in-out;
&.btn01 {
background-image: url(../../public/static/images/canvas/side_icon03.svg);
}
&.btn02 {
background-image: url(../../public/static/images/canvas/side_icon02.svg);
}
&.btn03 {
background-image: url(../../public/static/images/canvas/side_icon01.svg);
}
&.btn04 {
background-image: url(../../public/static/images/canvas/side_icon04.svg);
}
&.btn05 {
background-image: url(../../public/static/images/canvas/side_icon05.svg);
}
&.btn06 {
background-image: url(../../public/static/images/canvas/side_icon06.svg);
}
&.btn07 {
background-image: url(../../public/static/images/canvas/side_icon07.svg);
}
&.btn08 {
background-image: url(../../public/static/images/canvas/side_icon08.svg);
}
&.btn09 {
background-image: url(../../public/static/images/canvas/side_icon09.svg);
}
&.btn10 {
background-image: url(../../public/static/images/canvas/side_icon10.svg);
background-size: 15px 14px;
}
&:hover {
background-color: #1083E3;
background-color: #1083e3;
}
&.active {
background-color: #1083E3;
background-color: #1083e3;
}
}
}
@ -134,10 +170,18 @@
background-repeat: no-repeat;
background-position: center;
background-size: contain;
&.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
&.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
&.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
&.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
&.ico01 {
background-image: url(../../public/static/images/canvas/ico-flx01.svg);
}
&.ico02 {
background-image: url(../../public/static/images/canvas/ico-flx02.svg);
}
&.ico03 {
background-image: url(../../public/static/images/canvas/ico-flx03.svg);
}
&.ico04 {
background-image: url(../../public/static/images/canvas/ico-flx04.svg);
}
}
.name {
font-size: 12px;
@ -167,16 +211,16 @@
button {
margin-left: auto;
height: 100%;
background-color: #4B4B4B;
background-color: #4b4b4b;
font-size: 13px;
font-weight: 400;
color: #fff;
padding: 0 7.5px;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
}
&.on {
button {
background-color: #1083E3;
background-color: #1083e3;
}
}
}
@ -185,7 +229,7 @@
align-items: center;
justify-content: center;
gap: 10px;
background-color: #3D3D3D;
background-color: #3d3d3d;
border-radius: 2px;
width: 100px;
height: 30px;
@ -218,7 +262,7 @@
background-color: #383838;
width: 100%;
height: 50px;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
.canvas-depth2-inner {
display: flex;
align-items: center;
@ -270,7 +314,7 @@
align-items: center;
margin-right: 34px;
height: 100%;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
button {
position: relative;
font-size: 12px;
@ -310,7 +354,7 @@
// canvas-layout
.canvas-content {
padding-top: 46.8px;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
.canvas-frame {
height: calc(100vh - 129.3px);
}
@ -328,11 +372,11 @@
top: 92.8px;
left: 0;
display: flex;
background-color: #1C1C1C;
background-color: #1c1c1c;
border-top: 1px solid #000;
width: 100%;
min-width: 1280px;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
z-index: 99;
&.active {
top: calc(92.8px + 50px);
@ -348,14 +392,14 @@
padding: 9.6px 20px;
border-right: 1px solid #000;
min-width: 0;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
span {
display: flex;
align-items: center;
width: 100%;
font-size: 12px;
font-family: 'Pretendard', sans-serif;
color: #AAA;
color: #aaa;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -393,9 +437,9 @@
justify-content: center;
width: 45px;
padding: 13.5px 0;
background-color: #1C1C1C;
background-color: #1c1c1c;
border-right: 1px solid #000;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
span {
display: block;
width: 9px;
@ -413,9 +457,9 @@
.canvas-frame {
position: relative;
// height: calc(100% - 36.5px);
background-color: #F4F4F7;
background-color: #f4f4f7;
overflow: auto;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
// &::-webkit-scrollbar {
// width: 10px;
// height: 10px;
@ -450,7 +494,7 @@
min-width: 1280px;
height: 46px;
border-bottom: 1px solid #000;
background: #2C2C2C;
background: #2c2c2c;
z-index: 999;
.sub-header-inner {
display: flex;
@ -473,7 +517,9 @@
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
&.drawing {
background-image: url(../../public/static/images/main/drawing_icon.svg);
}
}
}
&:after {
@ -484,7 +530,7 @@
transform: translateY(-50%);
width: 1px;
height: 16px;
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&:first-child {
padding-left: 0;
@ -514,7 +560,7 @@
span {
display: flex;
font-size: 12px;
color: #AAA;
color: #aaa;
font-weight: normal;
cursor: default;
}
@ -572,8 +618,8 @@
.sub-table-box {
padding: 20px;
border-radius: 6px;
border: 1px solid #E9EAED;
background: #FFF;
border: 1px solid #e9eaed;
background: #fff;
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
.table-box-title-wrap {
display: flex;
@ -596,7 +642,7 @@
position: relative;
font-size: 15px;
font-weight: 600;
color: #1083E3;
color: #1083e3;
padding-left: 10px;
&::before {
content: '';
@ -606,7 +652,7 @@
transform: translateY(-50%);
width: 1px;
height: 11px;
background-color: #D9D9D9;
background-color: #d9d9d9;
}
}
.option {
@ -627,7 +673,7 @@
span {
font-weight: 600;
&.red {
color: #E23D70;
color: #e23d70;
}
}
&:after {
@ -638,10 +684,17 @@
transform: translateY(-50%);
width: 1px;
height: 11px;
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
&::after {
display: none;
}
}
&:first-child{padding-left: 0;}
&:last-child{padding-right: 0;&::after{display: none;}}
}
}
}
@ -734,7 +787,7 @@
width: 105px;
height: 30px;
line-height: 30px;
background-color: #F4F4F7;
background-color: #f4f4f7;
border-radius: 100px;
text-align: center;
font-size: 13px;
@ -749,12 +802,12 @@
&.blue {
font-size: 16px;
font-weight: 700;
color: #1083E3;
color: #1083e3;
}
&.red {
font-size: 16px;
font-weight: 700;
color: #D72A2A;
color: #d72a2a;
}
}
}
@ -768,11 +821,11 @@
padding: 10px;
.btn-area {
padding-bottom: 15px;
border-bottom: 1px solid #ECF0F4;
border-bottom: 1px solid #ecf0f4;
.file-upload {
display: inline-block;
height: 30px;
background-color: #94A0AD;
background-color: #94a0ad;
padding: 0 10px;
border-radius: 2px;
font-size: 13px;
@ -780,9 +833,9 @@
color: #fff;
font-weight: 500;
cursor: pointer;
transition: background .15s ease-in-out;
transition: background 0.15s ease-in-out;
&:hover {
background-color: #607F9A;
background-color: #607f9a;
}
}
}
@ -806,7 +859,7 @@
span {
position: relative;
font-size: 13px;
color: #45576F;
color: #45576f;
font-weight: 400;
white-space: nowrap;
padding-right: 55px;
@ -832,8 +885,8 @@
display: block;
width: 20px;
height: 20px;
background-color: #94A0AD;
border: 1px solid #94A0AD;
background-color: #94a0ad;
border: 1px solid #94a0ad;
background-position: center;
background-repeat: no-repeat;
background-image: url(../../public/static/images/canvas/estiment_arr.svg);
@ -844,8 +897,8 @@
}
&.on {
background-color: #fff;
border-color: #C2D0DD;
background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
border-color: #c2d0dd;
background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
}
}
.estimate-check-wrap {
@ -853,7 +906,7 @@
display: block;
}
&.hide {
border-bottom: 1px solid #ECF0F4;
border-bottom: 1px solid #ecf0f4;
margin-bottom: 15px;
.estimate-check-inner {
display: none;
@ -868,17 +921,17 @@
margin-bottom: 30px;
.special-note-check-item {
padding: 14px 10px;
border: 1px solid #ECF0F4;
border: 1px solid #ecf0f4;
margin-top: -1px;
margin-right: -1px;
&.act {
background-color: #F7F9FA;
background-color: #f7f9fa;
}
}
}
.calculation-estimate {
border: 1px solid #ECF0F4;
border: 1px solid #ecf0f4;
border-radius: 3px;
padding: 24px;
max-height: 350px;
@ -892,13 +945,13 @@
dt {
font-size: 13px;
font-weight: 600;
color: #1083E3;
color: #1083e3;
margin-bottom: 15px;
}
dd {
font-size: 12px;
font-weight: 400;
color: #45576F;
color: #45576f;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
@ -930,7 +983,7 @@
.product-price-tit {
font-size: 13px;
font-weight: 400;
color: #45576F;
color: #45576f;
margin-right: 10px;
}
.select-wrap {
@ -968,7 +1021,7 @@
transform: translateY(-50%);
width: 1px;
height: 12px;
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&:first-child {
padding-left: 0;
@ -980,7 +1033,7 @@
padding-right: 0;
}
&.item01 {
color: #3BBB48;
color: #3bbb48;
span {
background-image: url(../../public/static/images/sub/open_ico.svg);
}
@ -992,13 +1045,13 @@
}
}
&.item03 {
color: #0191C9;
color: #0191c9;
span {
background-image: url(../../public/static/images/sub/attachment_ico.svg);
}
}
&.item04 {
color: #F16A6A;
color: #f16a6a;
span {
background-image: url(../../public/static/images/sub/click_check_ico.svg);
}
@ -1060,23 +1113,23 @@
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #ECF0F4;
border: 1px solid #ecf0f4;
border-radius: 4px;
thead {
th {
padding: 4.5px 0;
border-bottom: 1px solid #ECF0F4;
border-bottom: 1px solid #ecf0f4;
text-align: center;
font-size: 13px;
color: #45576F;
color: #45576f;
font-weight: 500;
background-color: #F8F9FA;
background-color: #f8f9fa;
}
}
tbody {
td {
font-size: 13px;
color: #45576F;
color: #45576f;
text-align: center;
padding: 4.5px 0;
}
@ -1090,13 +1143,13 @@
.simulation-tit-wrap {
flex: none;
padding-right: 40px;
border-right: 1px solid #EEEEEE;
border-right: 1px solid #eeeeee;
span {
display: block;
position: relative;
padding-left: 60px;
font-size: 15px;
color: #14324F;
color: #14324f;
font-weight: 600;
&::before {
content: '';
@ -1124,7 +1177,7 @@
}
dd {
font-size: 12px;
color: #45576F;
color: #45576f;
font-weight: 400;
line-height: 24px;
}
@ -1132,7 +1185,8 @@
margin-bottom: 0;
}
}
ul, ol{
ul,
ol {
list-style: unset;
}
}
@ -1141,10 +1195,10 @@
.module-total {
display: flex;
align-items: center;
background-color: #F8F9FA;
background-color: #f8f9fa;
padding: 9px 0;
margin-right: 4px;
border: 1px solid #ECF0F4;
border: 1px solid #ecf0f4;
border-top: none;
.total-title {
flex: 1;
@ -1167,7 +1221,7 @@
.information-help-wrap {
display: flex;
padding: 24px;
background-color: #F4F4F4;
background-color: #f4f4f4;
border-radius: 4px;
margin-bottom: 15px;
.information-help-tit-wrap {
@ -1175,7 +1229,7 @@
display: flex;
align-items: center;
padding-right: 40px;
border-right: 1px solid #E0E0E3;
border-right: 1px solid #e0e0e3;
.help-tit-icon {
width: 40px;
height: 40px;
@ -1187,7 +1241,7 @@
.help-tit {
font-size: 13px;
font-weight: 600;
color: #45576F;
color: #45576f;
}
}
.information-help-guide {
@ -1196,7 +1250,7 @@
display: block;
font-size: 12px;
font-weight: 400;
color: #45576F;
color: #45576f;
margin-bottom: 7px;
&:last-child {
margin-bottom: 0;
@ -1210,7 +1264,7 @@
flex-direction: column;
align-items: center;
padding: 10px 0 30px 0;
border-bottom: 1px solid #E5E5E5;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 24px;
.community-search-box {
position: relative;
@ -1229,7 +1283,7 @@
font-weight: 400;
color: #101010;
&::placeholder {
color: #C8C8C8;
color: #c8c8c8;
}
}
.community-search-ico {
@ -1248,10 +1302,10 @@
.community-search-keyword {
font-size: 13px;
font-weight: 400;
color: #45576F;
color: #45576f;
span {
font-weight: 600;
color: #F16A6A;
color: #f16a6a;
}
}
}
@ -1266,15 +1320,15 @@
align-items: center;
padding: 24px;
border-radius: 4px;
border: 1px solid #E5E5E5;
background: #FFF;
transition: all .15s ease-in-out;
border: 1px solid #e5e5e5;
background: #fff;
transition: all 0.15s ease-in-out;
.file-item-info {
.item-num {
display: inline-block;
padding: 6px 17.5px;
border-radius: 60px;
background-color: #F4F4F7;
background-color: #f4f4f7;
font-size: 13px;
font-weight: 600;
color: #101010;
@ -1306,7 +1360,7 @@
}
}
&:hover {
background-color: #F4F4F7;
background-color: #f4f4f7;
}
}
}
@ -1319,7 +1373,7 @@
height: 148px;
padding: 24px;
border-radius: 4px;
border: 1px solid #E5E5E5;
border: 1px solid #e5e5e5;
font-size: 16px;
font-weight: 500;
color: #344356;
@ -1331,8 +1385,8 @@
align-items: center;
width: 200px;
height: 30px;
background-color: #FAFAFA;
border: 1px solid #EEE;
background-color: #fafafa;
border: 1px solid #eee;
padding: 0 10px;
input {
font-size: 13px;
@ -1456,5 +1510,4 @@
}
}
}
}

444
src/styles/_modal.scss
View File

@ -5,12 +5,24 @@ $pop-normal-size: 12px;
$alert-color: #101010;
@keyframes mountpop {
from{opacity: 0; scale: 0.95;}
to{opacity: 1; scale: 1;}
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes unmountpop {
from{opacity: 1; scale: 1;}
to{opacity: 0; scale: 0.95;}
from {
opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
}
.normal-font {
@ -82,10 +94,10 @@ $alert-color: #101010;
width: 800px;
}
&.mount {
animation: mountpop .17s ease-in-out forwards;
animation: mountpop 0.17s ease-in-out forwards;
}
&.unmount {
animation: unmountpop .17s ease-in-out forwards;
animation: unmountpop 0.17s ease-in-out forwards;
}
&.alert {
position: absolute;
@ -190,7 +202,7 @@ $alert-color: #101010;
}
}
.outer-line-wrap {
border-top: 1px solid #3C3C3C;
border-top: 1px solid #3c3c3c;
margin-top: 10px;
padding-top: 15px;
margin-bottom: 15px;
@ -212,7 +224,7 @@ $alert-color: #101010;
.adsorption-point {
display: flex;
align-items: center;
background-color: #3A3A3A;
background-color: #3a3a3a;
border-radius: 3px;
padding-left: 11px;
overflow: hidden;
@ -233,7 +245,7 @@ $alert-color: #101010;
&.act {
i {
color: $pop-color;
background-color: #1083E3;
background-color: #1083e3;
}
}
}
@ -253,7 +265,7 @@ $alert-color: #101010;
display: flex;
align-items: center;
background-color: transparent;
border: 1px solid #3D3D3D;
border: 1px solid #3d3d3d;
border-radius: 2px;
padding: 15px 10px;
gap: 20px;
@ -280,7 +292,9 @@ $alert-color: #101010;
}
}
.select-form {
.sort-select{width: 100%;}
.sort-select {
width: 100%;
}
}
.grid-select {
flex: 1;
@ -325,7 +339,6 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
padding-bottom: 15px;
}
.grid-direction {
display: flex;
@ -342,11 +355,17 @@ $alert-color: #101010;
background-position: center;
background-size: 16px 15px;
border-radius: 50%;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
opacity: 0.6;
&.down{transform: rotate(180deg);}
&.left{transform: rotate(-90deg);}
&.right{transform: rotate(90deg);}
&.down {
transform: rotate(180deg);
}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover,
&.act {
opacity: 1;
@ -411,7 +430,6 @@ $alert-color: #101010;
.flex-box {
display: flex;
align-items: center;
height: 100%;
}
}
&:first-child {
@ -433,10 +451,11 @@ $alert-color: #101010;
}
&.light {
padding: 0;
th,td{
th,
td {
color: $alert-color;
border-bottom: none;
border-top: 1px solid #EFEFEF;
border-top: 1px solid #efefef;
}
th {
padding: 14px 0;
@ -482,7 +501,6 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
}
}
.img-edit-wrap {
@ -498,7 +516,7 @@ $alert-color: #101010;
background-color: #fff;
border-radius: 2px;
cursor: pointer;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
.img-edit {
width: 16px;
height: 16px;
@ -518,7 +536,6 @@ $alert-color: #101010;
margin-left: 10px;
input {
flex: 1;
}
.img-check {
flex: none;
@ -544,8 +561,12 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
&.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
&.fail {
background-image: url(../../public/static/images/canvas/img_check_fail.svg);
}
&.success {
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
}
}
@ -625,7 +646,7 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
width: 50%;
background-color: #3D3D3D;
background-color: #3d3d3d;
border-radius: 2px;
}
}
@ -633,7 +654,7 @@ $alert-color: #101010;
// 외벽선 속성 설정
.properties-guide {
font-size: $pop-normal-size;
color: #AAA;
color: #aaa;
font-weight: $pop-normal-weight;
margin-bottom: 14px;
}
@ -662,17 +683,17 @@ $alert-color: #101010;
color: #fff;
font-weight: 700;
border-radius: 2px;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.green {
background-color: #305941;
border: 1px solid #45CD7D;
border: 1px solid #45cd7d;
&:hover {
background-color: #3a6b4e;
}
}
&.blue {
background-color: #2E5360;
border: 1px solid #3FBAE6;
background-color: #2e5360;
border: 1px solid #3fbae6;
&:hover {
background-color: #365f6e;
}
@ -694,8 +715,8 @@ $alert-color: #101010;
justify-content: center;
width: 100%;
padding: 13px;
background-color: #3D3D3D;
transition: background .15s ease-in-out;
background-color: #3d3d3d;
transition: background 0.15s ease-in-out;
img {
max-width: 100%;
}
@ -706,13 +727,17 @@ $alert-color: #101010;
color: $pop-color;
margin-top: 10px;
text-align: center;
transition: color .15s ease-in-out;
transition: color 0.15s ease-in-out;
}
.shape-menu-box {
&.act,
&:hover {
.shape-box{background-color: #008BFF;}
.shape-title{color: #008BFF;}
.shape-box {
background-color: #008bff;
}
.shape-title {
color: #008bff;
}
}
}
}
@ -727,7 +752,7 @@ $alert-color: #101010;
}
.discrimination-box {
padding: 16px 12px;
border: 1px solid #3D3D3D;
border: 1px solid #3d3d3d;
border-radius: 2px;
}
@ -760,12 +785,12 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
background-color: #3d3d3d;
border: 1px solid #3d3d3d;
border-radius: 2px;
cursor: pointer;
&.act {
border: 1px solid #ED0004;
border: 1px solid #ed0004;
}
}
&:last-child {
@ -864,7 +889,7 @@ $alert-color: #101010;
border: 1px solid #646464;
border-radius: 2px;
padding: 0 10px;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
i {
height: 15px;
display: block;
@ -872,7 +897,7 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.allocation01 {
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px;
@ -925,7 +950,9 @@ $alert-color: #101010;
height: 34px;
background-color: #373737;
border: 1px solid #676767;
transition: background .15s ease-in-out, border .15s ease-in-out;
transition:
background 0.15s ease-in-out,
border 0.15s ease-in-out;
.shape-box {
display: flex;
justify-content: center;
@ -937,8 +964,8 @@ $alert-color: #101010;
}
&.act,
&:hover {
border-color: #008BFF;
background-color: #008BFF;
border-color: #008bff;
background-color: #008bff;
}
}
}
@ -953,18 +980,27 @@ $alert-color: #101010;
.library-btn {
width: 100%;
height: 34px;
border: 1px solid #6C6C6C;
border: 1px solid #6c6c6c;
border-radius: 2px;
background-color: #373737;
background-repeat: no-repeat;
background-position: center;
transition: all .15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
transition: all 0.15s ease-in-out;
&.ico01 {
background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
background-size: 19px 18px;
}
&.ico02 {
background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
background-size: 15px 20px;
}
&.ico03 {
background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
background-size: 19px 16px;
}
&:hover {
border-color: #1083E3;
background-color: #1083E3;
border-color: #1083e3;
background-color: #1083e3;
}
}
}
@ -1050,11 +1086,27 @@ $alert-color: #101010;
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%);}
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;
@ -1066,11 +1118,27 @@ $alert-color: #101010;
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);}
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;
@ -1136,7 +1204,7 @@ $alert-color: #101010;
.warning {
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: #FFAFAF;
color: #ffafaf;
}
// 각 변 속성 변경
@ -1192,37 +1260,157 @@ $alert-color: #101010;
top: 12.5px;
left: 50%;
font-size: 11px;
color: #8B8B8B;
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);}}
&: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: '';
@ -1276,13 +1464,13 @@ $alert-color: #101010;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #AAA;
color: #aaa;
text-align: center;
cursor: default;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
background-color: #1083e3;
border: 1px solid #1083e3;
color: #fff;
font-weight: 500;
}
@ -1295,7 +1483,7 @@ $alert-color: #101010;
background-position: center;
background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.act {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
@ -1321,14 +1509,16 @@ $alert-color: #101010;
transform: translateX(-50%);
width: 1px;
height: 6px;
background-color: #8B8B8B;
background-color: #8b8b8b;
}
}
i {
top: 32px;
}
&.act {
i{color: #8B8B8B;}
i {
color: #8b8b8b;
}
}
}
}
@ -1360,7 +1550,7 @@ $alert-color: #101010;
height: 30px;
font-size: 12px;
font-weight: 400;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&:first-child {
border-left: 1px solid #505050;
}
@ -1374,7 +1564,7 @@ $alert-color: #101010;
.module-table-box {
flex: 1;
background-color: #3D3D3D;
background-color: #3d3d3d;
border-radius: 2px;
.module-table-inner {
padding: 10px;
@ -1387,7 +1577,7 @@ $alert-color: #101010;
padding: 10px 0;
font-size: 12px;
color: #fff;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
}
.eaves-keraba-table {
width: 100%;
@ -1410,7 +1600,7 @@ $alert-color: #101010;
.warning-guide {
padding: 20px;
.warning {
color: #FFCACA;
color: #ffcaca;
max-height: 55px;
overflow-y: auto;
padding-right: 30px;
@ -1419,7 +1609,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1430,7 +1620,7 @@ $alert-color: #101010;
.module-self-table {
display: table;
border-top: 1px solid #4D4D4D;
border-top: 1px solid #4d4d4d;
border-collapse: collapse;
width: 100%;
.self-table-item {
@ -1439,7 +1629,7 @@ $alert-color: #101010;
.self-item-th {
display: table-cell;
vertical-align: middle;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
}
.self-item-th {
width: 60px;
@ -1467,7 +1657,7 @@ $alert-color: #101010;
.hexagonal-wrap {
.hexagonal-item {
padding: 15px 0;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
&:first-child {
padding-top: 0;
}
@ -1505,7 +1695,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1523,7 +1713,7 @@ $alert-color: #101010;
gap: 5px;
min-height: 60px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.2);
span {
display: inline-flex;
align-items: center;
@ -1556,7 +1746,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1615,10 +1805,10 @@ $alert-color: #101010;
height: 16px;
&.pink {
border: 2px solid #ce1c9c;
background-color: #16417D;
background-color: #16417d;
}
&.white {
border: 2px solid #FFF;
border: 2px solid #fff;
background-color: #001027;
}
}
@ -1643,7 +1833,7 @@ $alert-color: #101010;
.react-colorful__pointer {
width: 15px;
height: 15px;
border: 4px solid #Fff;
border: 4px solid #fff;
}
.react-colorful__saturation {
border-radius: 2px;
@ -1733,7 +1923,6 @@ $alert-color: #101010;
min-height: 80px;
background-color: #fff;
}
}
// 치수선 설정
@ -1853,10 +2042,22 @@ $alert-color: #101010;
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; }
&: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;
@ -1911,3 +2112,20 @@ $alert-color: #101010;
font-weight: 500;
}
}
// 이미지 불러오기
.img-flex-box {
display: flex;
align-items: center;
}
.img-load-from {
margin-top: 20px;
.img-load-item {
border-top: 1px solid #424242;
padding: 18px 0;
.d-check-radio {
margin-bottom: 20px;
}
}
border-bottom: 1px solid #424242;
}

462
src/styles/_reset.scss
View File

@ -3,27 +3,98 @@
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
box-sizing: content-box
box-sizing: content-box;
}
*, ::after, ::before {
*,
::after,
::before {
box-sizing: border-box;
}
html, body{
html,
body {
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 {
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;
@ -35,23 +106,38 @@ time, mark, audio, video {
font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1.4;
}
body:first-of-type caption { display:none;}
body:first-of-type caption {
display: none;
}
ol, ul {
ol,
ul {
list-style: none;
}
blockquote, q {
blockquote,
q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
@ -61,7 +147,9 @@ table {
border-spacing: 0;
border: 0 none;
}
caption, th, td {
caption,
th,
td {
text-align: left;
font-weight: normal;
border: 0;
@ -71,26 +159,38 @@ a {
cursor: pointer;
color: #000;
}
a, a:hover, a:active {
a,
a:hover,
a:active {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
/*form_style*/
input, select, textarea, button, a, label {
input,
select,
textarea,
button,
a,
label {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,input[type=text], input[type=button] {
button,
input[type='text'],
input[type='button'] {
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-appearance: none;
appearance: none;
border-radius: 0
border-radius: 0;
}
input[type=checkbox], input[type=radio] {
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
padding: 0;
}
input, select, button {
input,
select,
button {
border: 0 none;
outline: none;
margin: 0;
@ -133,24 +233,53 @@ button{
}
// 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;}
.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;}
.al-l {
text-align: left !important;
}
.al-r {
text-align: right !important;
}
.al-c {
text-align: center !important;
}
// button
.btn-frame {
@ -165,7 +294,7 @@ button{
border: 1px solid #000;
text-align: center;
font-family: 'Pretendard', sans-serif;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
cursor: pointer;
&.block {
width: 100%;
@ -178,15 +307,15 @@ button{
}
&.deepgray {
background-color: #2C2C2C;
background-color: #2c2c2c;
border: 1px solid #484848;
}
&.gray {
background-color: #3C3C3C;
background-color: #3c3c3c;
border: 1px solid #545454;
}
&.dark {
background-color: #1C1C1C;
background-color: #1c1c1c;
border: 1px solid #484848;
}
&.modal {
@ -195,8 +324,8 @@ button{
border: 1px solid #484848;
color: #aaa;
&:hover {
background-color: #1083E3;
border: 1px solid #1083E3;
background-color: #1083e3;
border: 1px solid #1083e3;
color: #fff;
font-weight: 500;
}
@ -206,13 +335,13 @@ button{
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
background-color: #2D2D2D;
background-color: #2d2d2d;
border: 1px solid #393939;
color: #aaa;
&.act,
&:hover {
background-color: #414E6C;
border: 1px solid #414E6C;
background-color: #414e6c;
border: 1px solid #414e6c;
color: #fff;
font-weight: 500;
}
@ -226,11 +355,11 @@ button{
border: 1px solid #484848;
color: #fff;
&.blue {
background-color: #414E6C;
border: 1px solid #414E6C;
background-color: #414e6c;
border: 1px solid #414e6c;
&:hover {
background-color: #414E6C;
border: 1px solid #414E6C;
background-color: #414e6c;
border: 1px solid #414e6c;
}
}
&.white {
@ -257,7 +386,7 @@ button{
font-family: 'Noto Sans JP', sans-serif;
background-color: transparent;
border: 1px solid #676767;
color: #AAAAAA;
color: #aaaaaa;
&:hover {
background-color: #272727;
border-color: #676767;
@ -266,8 +395,8 @@ button{
}
&:hover,
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
background-color: #1083e3;
border: 1px solid #1083e3;
color: #fff;
font-weight: 500;
}
@ -297,7 +426,7 @@ button{
color: #fff;
font-size: 13px;
font-weight: 400;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.navy {
background-color: #304961;
&:hover {
@ -305,21 +434,21 @@ button{
}
}
&.grey {
background-color: #94A0AD;
background-color: #94a0ad;
&:hover {
background-color: #607F9A;
background-color: #607f9a;
}
}
&.green {
background-color: #A6BBA8;
background-color: #a6bba8;
&:hover {
background-color: #98af9b;
}
}
&.white {
border: 1px solid #94A0AD;
border: 1px solid #94a0ad;
background-color: #fff;
color: #94A0AD;
color: #94a0ad;
&:hover {
background-color: #fff;
}
@ -335,7 +464,7 @@ button{
line-height: 30px;
padding: 0 25px 0 10px;
background-color: #373737;
border: 1px solid #3F3F3F;
border: 1px solid #3f3f3f;
border-radius: 2px;
border-top-left-radius: 2px;
color: #fff;
@ -360,7 +489,7 @@ button{
max-height: 100px;
overflow-y: auto;
background-color: #373737;
border: 1px solid #3F3F3F;
border: 1px solid #3f3f3f;
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
@ -370,20 +499,19 @@ button{
align-items: center;
padding: 8px 20px;
line-height: 1.4;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
button {
font-size: 12px;
color: #fff;
line-height: 1.4;
}
&:hover {
background-color: #2C2C2C;
background-color: #2c2c2c;
}
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #5a5a5a;
@ -403,7 +531,7 @@ button{
height: 6px;
background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
}
&.active {
.select-item-wrap {
@ -421,17 +549,17 @@ button{
display: block;
width: 100%;
height: 30px;
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
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;
color: #45576f;
font-family: 'Noto Sans JP', sans-serif;
cursor: pointer;
&:disabled {
opacity: 1;
background-color: #FAFAFA;
background-color: #fafafa;
color: #999;
cursor: default;
}
@ -447,7 +575,6 @@ button{
}
}
// input
.form-input {
label {
@ -458,9 +585,9 @@ button{
margin-bottom: 10px;
}
}
input[type=password],
input[type=number],
input[type=text]{
input[type='password'],
input[type='number'],
input[type='text'] {
&.input-origin {
display: inline-block;
height: 30px;
@ -475,11 +602,12 @@ input[type=text]{
padding: 0 10px;
letter-spacing: 0px;
text-align: right;
transition: border .15s ease-in-out;
transition: border 0.15s ease-in-out;
&:focus {
border: 1px solid #1083E3;
border: 1px solid #1083e3;
}
&::placeholder {
font-family: 'Noto Sans JP', sans-serif;
opacity: 1;
font-size: 12px;
letter-spacing: 0px;
@ -488,7 +616,7 @@ input[type=text]{
width: 100%;
}
&:read-only {
color: #AAA;
color: #aaa;
&:focus {
border: 1px solid #323234;
}
@ -509,15 +637,15 @@ input[type=text]{
background-color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
color: #45576F;
color: #45576f;
font-weight: normal;
transition: border-color .17s ease-in-out;
transition: border-color 0.17s ease-in-out;
text-align: left;
&:focus {
border-color: #94A0AD;
border-color: #94a0ad;
}
&:read-only {
background-color: #FAFAFA;
background-color: #fafafa;
color: #999999;
&:focus {
border-color: #eee;
@ -526,16 +654,14 @@ input[type=text]{
}
}
// check-btn
.check-btn {
display: flex;
align-items: center;
height: 30px;
background-color: #3A3A3A;
background-color: #3a3a3a;
border-radius: 3px;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
.check-area {
flex: none;
width: 30px;
@ -572,10 +698,10 @@ input[type=text]{
display: block;
height: 30px;
border-radius: 3px;
background-color: #3A3A3A;
background-color: #3a3a3a;
padding: 0 11px;
text-align: left;
transition: all .17s ease-in-out;
transition: all 0.17s ease-in-out;
span {
position: relative;
font-size: 12px;
@ -609,15 +735,15 @@ input[type=text]{
background-color: #272727;
border: 1px solid #484848;
span {
color: #Fff;
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;
background-color: #1083e3;
border: 1px solid #1083e3;
}
}
}
@ -627,8 +753,8 @@ input[type=text]{
.d-check-box {
line-height: 1.1;
cursor: pointer;
input[type=checkbox],
input[type=radio]{
input[type='checkbox'],
input[type='radio'] {
position: static;
margin-left: 0;
cursor: pointer;
@ -651,7 +777,7 @@ input[type=text]{
}
&.light {
label {
color: #45576F;
color: #45576f;
}
}
&.no-text {
@ -665,7 +791,7 @@ input[type=text]{
label {
&::before {
cursor: pointer;
content: "";
content: '';
display: inline-block;
position: absolute;
width: 17px;
@ -679,11 +805,13 @@ input[type=text]{
text-align: center;
font-size: 13px;
line-height: 1.4;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
}
&::after {
cursor: pointer;
content: "";
content: '';
display: inline-block;
position: absolute;
width: 9px;
@ -699,20 +827,22 @@ input[type=text]{
line-height: 1.4;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
transition:
opacity 0.15s ease-in-out,
color 0.15s ease-in-out;
}
}
&.light {
label {
&:before {
border-color: #D6D6D7;
border-color: #d6d6d7;
}
&:after {
background-color: #697C8F;
background-color: #697c8f;
}
}
}
input[type=radio]:checked + label::after{
input[type='radio']:checked + label::after {
opacity: 1;
visibility: visible;
}
@ -736,10 +866,12 @@ input[type=text]{
// check-box
.d-check-box {
label {
&.red{color: #FFCACA;}
&.red {
color: #ffcaca;
}
&::before {
cursor: pointer;
content: "";
content: '';
display: inline-block;
position: absolute;
width: 17px;
@ -747,32 +879,36 @@ input[type=text]{
top: 2px;
left: 0;
margin-left: -12px;
border: 1px solid #D6D6D7;
border: 1px solid #d6d6d7;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
}
&:after {
cursor: pointer;
content: "";
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;
margin-left: -0.8rem;
transition:
border 0.05s ease-in-out,
color 0.05s ease-in-out;
}
}
input[type=checkbox]:checked + label::after{
content: "";
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: 2px solid #697c8f;
border-left: none;
border-top: none;
transform: translate(7.75px, 4.5px) rotate(45deg);
@ -784,7 +920,7 @@ input[type=text]{
background-color: transparent;
}
}
input[type=checkbox]:checked + label::after{
input[type='checkbox']:checked + label::after {
border-color: #fff;
}
&.no-text {
@ -794,23 +930,25 @@ input[type=text]{
}
}
&.sel {
input[type=checkbox]:checked + label{
color: #D7C863;
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::before,
input[type='checkbox']:checked + label::after {
border-color: #d7c863;
}
}
}
// date-picker
.date-picker {
svg{display: none;}
svg {
display: none;
}
.react-datepicker-wrapper {
width: 100%;
}
input[type=text]{
input[type='text'] {
display: block;
width: 100%;
height: 30px;
@ -818,7 +956,7 @@ input[type=text]{
border-radius: 2px;
border: 1px solid #eee;
font-size: 13px;
color: #45576F;
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;
@ -834,18 +972,17 @@ input[type=text]{
height: 30px;
min-height: unset;
border-radius: 2px;
border-color: #EEE;
border-color: #eee;
background-color: #fff;
&:hover {
border-color: #EEE;
border-color: #eee;
}
}
.custom__control--is-focused {
border-color: #EEE;
border-color: #eee;
box-shadow: unset;
&:hover {
border-color: #EEE;
border-color: #eee;
}
}
.custom__value-container {
@ -858,7 +995,7 @@ input[type=text]{
}
.custom__single-value {
font-size: 13px;
color: #45576F;
color: #45576f;
font-weight: 400;
}
.custom__placeholder {
@ -895,7 +1032,7 @@ input[type=text]{
.custom__option {
font-size: 13px;
padding: 7px 10px;
color: #45576F;
color: #45576f;
}
.custom__option--is-selected {
color: #fff;
@ -903,10 +1040,67 @@ input[type=text]{
// disable
&.custom--is-disabled {
.custom__control {
background-color: #FAFAFA ;
background-color: #fafafa;
}
.custom__single-value {
color: #999999;
}
}
}
// toggle
.toggle-btn {
position: relative;
display: inline-block;
width: 55px;
height: 20px;
input {
display: none;
}
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #454545;
transition: 0.4s;
border-radius: 10px;
text-align: center;
line-height: 20px;
color: white;
font-size: 12px;
font-weight: 400;
&:after {
content: 'OFF';
position: absolute;
right: 7px;
color: white;
font-size: 12px;
font-weight: 400;
}
&:before {
position: absolute;
content: '';
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
}
input:checked + .slider {
background-color: #2563eb;
&:after {
content: 'ON';
left: 10px;
right: auto;
}
&:before {
transform: translateX(35px);
}
}

17
src/util/canvas-util.js
View File

@ -954,3 +954,20 @@ export const getAllRelatedObjects = (id, canvas) => {
return result
}
// 모듈,회로 구성에서 사용하는 degree 범위 별 값
export const getDegreeInOrientation = (degree) => {
if (degree >= 352) {
return 0
}
if (degree % 15 === 0) return degree
let value = Math.floor(degree / 15)
const remain = ((degree / 15) % 1).toFixed(5)
if (remain > 0.4) {
value++
}
return value * 15
}