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

Merge branch 'qcast-pub' into dev

Browse Source
This commit is contained in:
minsik 2024-10-31 18:09:14 +09:00
commit 6da947f6da
25 changed files with 3025 additions and 3581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/common/context-menu/QContextMenu.jsx
View File

@ -2,12 +2,14 @@
import { useEffect } from 'react' import { useEffect } from 'react'
import '@/styles/contents.scss' import '@/styles/contents.scss'
import { useRecoilState } from 'recoil' import { useRecoilState } from 'recoil'
import { contextMenuState } from '@/store/contextMenu' import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
export default function QContextMenu(props) { export default function QContextMenu(props) {
const { contextRef, canvasProps, handleKeyup } = props const { contextRef, canvasProps, handleKeyup } = props
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState) const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴 const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
let contextType = '' let contextType = ''
if (activeObject) { if (activeObject) {
@ -19,12 +21,22 @@ export default function QContextMenu(props) {
} }
} }
const getYPosition = (e) => {
const contextLength = contextMenuList.reduce((acc, cur, index) => {
return acc + cur.length
}, 0)
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
}
useEffect(() => { useEffect(() => {
if (!contextRef.current) return if (!contextRef.current) return
const handleContextMenu = (e) => { const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고 // e.preventDefault() //기존 contextmenu 막고
setContextMenu({ visible: true, x: e.pageX, y: e.pageY }) const position = {
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
}
setContextMenu({ visible: true, ...position })
document.addEventListener('keyup', (e) => handleKeyup(e)) document.addEventListener('keyup', (e) => handleKeyup(e))
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제 canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
} }

4
src/components/floor-plan/MenuDepth01.jsx
View File

@ -15,8 +15,12 @@ export default function MenuDepth01() {
const subMenus = useRecoilValue(subMenusState) const subMenus = useRecoilValue(subMenusState)
const onClickMenu = ({ id, menu }) => { const onClickMenu = ({ id, menu }) => {
if (menu === currentMenu) {
handleMenu(type)
} else {
setCurrentMenu(menu) setCurrentMenu(menu)
} }
}
useEffect(() => { useEffect(() => {
handleMenu(type) handleMenu(type)

2
src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
View File

@ -14,7 +14,7 @@ export default function AuxiliaryCopy(props) {
const [arrow2, setArrow2] = useState(null) const [arrow2, setArrow2] = useState(null)
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.copy')} </h1> <h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
View File

@ -16,7 +16,7 @@ export default function AuxiliaryMove(props) {
const [arrow2, setArrow2] = useState(null) const [arrow2, setArrow2] = useState(null)
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.move')}</h1> <h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
View File

@ -11,7 +11,7 @@ export default function AuxiliarySize(props) {
const { closePopup } = usePopup() const { closePopup } = usePopup()
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1> <h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

13
src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx
View File

@ -1,17 +1,16 @@
import { useState, useEffect, useRef } from 'react' import { useEffect, useRef, useState } from 'react'
import WithDraggable from '@/components/common/draggable/WithDraggable' import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup' import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom' import { contextPopupPositionState } from '@/store/popupAtom'
import QSelectBox from '@/components/common/select/QSelectBox' import QSelectBox from '@/components/common/select/QSelectBox'
import { pitchTextSelector } from '@/store/canvasAtom' import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
import { defaultSlope } from '@/store/commonAtom' import { defaultSlope } from '@/store/commonAtom'
import { canvasState } from '@/store/canvasAtom'
export default function DimensionLineSetting(props) { export default function DimensionLineSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState) const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, setIsShow, pos = contextPopupPosition } = props let { id, setIsShow, pos = contextPopupPosition } = props
const { getMessage } = useMessage() const { getMessage } = useMessage()
const { closePopup } = usePopup() const { closePopup } = usePopup()
const canvas = useRecoilValue(canvasState) const canvas = useRecoilValue(canvasState)
@ -79,7 +78,7 @@ export default function DimensionLineSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1> <h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
@ -131,7 +130,9 @@ export default function DimensionLineSetting(props) {
<div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div> <div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleChangeLength}>{getMessage('modal.common.save')}</button> <button className="btn-frame modal act" onClick={handleChangeLength}>
{getMessage('modal.common.save')}
</button>
</div> </div>
</div> </div>
</div> </div>

2
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
}, [compasDeg]) }, [compasDeg])
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx`}> <div className={`modal-pop-wrap lx mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1> <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/image/ImageSizeSetting.jsx
View File

@ -14,7 +14,7 @@ export default function ImageSizeSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}> <div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.image.size.setting')} </h1> <h1 className="title">{getMessage('modal.image.size.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
View File

@ -15,7 +15,7 @@ export default function CircuitNumberEdit(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1> <h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/module/column/ColumnInsert.jsx
View File

@ -23,7 +23,7 @@ export default function ColumnInsert(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1> <h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
View File

@ -25,7 +25,7 @@ export default function ColumnRemove(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1> <h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/module/row/RowInsert.jsx
View File

@ -23,7 +23,7 @@ export default function RowInsert(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.row.insert')} </h1> <h1 className="title">{getMessage('modal.row.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/module/row/RowRemove.jsx
View File

@ -25,7 +25,7 @@ export default function RowRemove(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('modal.row.remove')}</h1> <h1 className="title">{getMessage('modal.row.remove')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -14,7 +14,7 @@ export default function DormerOffset(props) {
const [arrow2, setArrow2] = useState(null) const [arrow2, setArrow2] = useState(null)
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1> <h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

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

@ -59,12 +59,12 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
} }
//개구배치, 그림자배치 //개구배치, 그림자배치
setIsHidden(true)
if (buttonAct === 1 || buttonAct === 2) { if (buttonAct === 1 || buttonAct === 2) {
applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons) applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
} else { } else {
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons) applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
} }
setIsHidden(true)
} }
const buttonMenu = [ const buttonMenu = [

6
src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
View File

@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}> <div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">変更 </h1> <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
</button> </button>
@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button> <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div> </div>
</div> </div>
</div> </div>

2
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml`}> <div className={`modal-pop-wrap ml mount`}>
<div className="modal-head"> <div className="modal-head">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1> <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>

9
src/hooks/useContextMenu.js
View File

@ -23,7 +23,7 @@ import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/Fl
import { useCommonUtils } from './common/useCommonUtils' import { useCommonUtils } from './common/useCommonUtils'
import { useMessage } from '@/hooks/useMessage' import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent' import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuState } from '@/store/contextMenu' import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting' import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit' import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting' import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
@ -36,7 +36,7 @@ import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumbe
export function useContextMenu() { export function useContextMenu() {
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴 const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴 const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
const currentObject = useRecoilValue(currentObjectState) const currentObject = useRecoilValue(currentObjectState)
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -222,9 +222,10 @@ export function useContextMenu() {
if (menu?.fn) { if (menu?.fn) {
menu.fn() menu.fn()
} }
setContextPopupPosition({ setContextPopupPosition({
x: e?.clientX, x: window.innerWidth / 2,
y: e?.clientY, y: 180,
}) })
setCurrentContextMenu(menu) setCurrentContextMenu(menu)
setQContextMenu({ ...qContextMenu, visible: false }) setQContextMenu({ ...qContextMenu, visible: false })

2
src/locales/ja.json
View File

@ -13,7 +13,7 @@
"header.go": "移動", "header.go": "移動",
"header.online.warranty.system": "オンライン保証シ", "header.online.warranty.system": "オンライン保証シ",
"header.stem": "ステム", "header.stem": "ステム",
"plan.menu.plan.drawing": "도면작성", "plan.menu.plan.drawing": "물건정보(JA)",
"plan.menu.placement.surface.initial.setting": "配置面 初期設定", "plan.menu.placement.surface.initial.setting": "配置面 初期設定",
"modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成", "modal.placement.initial.setting.plan.drawing.size.stuff": "寸法入力による物品作成",
"modal.placement.initial.setting.plan.": "図面の作成方法", "modal.placement.initial.setting.plan.": "図面の作成方法",

3
src/locales/ko.json
View File

@ -13,7 +13,7 @@
"header.go": "이동", "header.go": "이동",
"header.online.warranty.system": "온라인 보증 시스템", "header.online.warranty.system": "온라인 보증 시스템",
"header.stem": "Stem", "header.stem": "Stem",
"plan.menu.plan.drawing": "도면작성", "plan.menu.plan.drawing": "물건정보",
"plan.menu.placement.surface.initial.setting": "배치면 초기 설정", "plan.menu.placement.surface.initial.setting": "배치면 초기 설정",
"modal.placement.initial.setting.plan.drawing": "도면 작성방법", "modal.placement.initial.setting.plan.drawing": "도면 작성방법",
"modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성", "modal.placement.initial.setting.plan.drawing.size.stuff": "치수 입력에 의한 물건 작성",
@ -292,6 +292,7 @@
"margin": "간격", "margin": "간격",
"contextmenu.roof.material.placement": "지붕재 배치", "contextmenu.roof.material.placement": "지붕재 배치",
"contextmenu.roof.material.edit": "지붕재 변경", "contextmenu.roof.material.edit": "지붕재 변경",
"modal.roof.material.edit": "지붕재 변경",
"contextmenu.roof.material.remove": "지붕재 삭제", "contextmenu.roof.material.remove": "지붕재 삭제",
"contextmenu.roof.material.remove.all": "지붕재 전체 삭제", "contextmenu.roof.material.remove.all": "지붕재 전체 삭제",
"contextmenu.dormer.offset": "도머 오프셋", "contextmenu.dormer.offset": "도머 오프셋",

6
src/store/contextMenu.js
View File

@ -9,3 +9,9 @@ export const contextMenuState = atom({
}, },
dangerouslyAllowMutability: true, dangerouslyAllowMutability: true,
}) })
export const contextMenuListState = atom({
key: 'contextMenuListState',
default: null,
dangerouslyAllowMutability: true,
})

261
src/styles/_contents.scss
View File

@ -26,14 +26,14 @@
min-width: 1280px; min-width: 1280px;
padding-bottom: 0; padding-bottom: 0;
background-color: #383838; background-color: #383838;
transition: padding 0.17s ease-in-out; transition: padding .17s ease-in-out;
z-index: 999; z-index: 999;
.canvas-menu-inner{ .canvas-menu-inner{
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 40px 0 20px; padding: 0 40px 0 20px;
background-color: #2c2c2c; background-color: #2C2C2C;
height: 46.8px; height: 46.8px;
z-index: 999; z-index: 999;
.canvas-menu-list{ .canvas-menu-list{
@ -53,7 +53,7 @@
font-weight: 600; font-weight: 600;
padding: 15px 20px; padding: 15px 20px;
opacity: 0.55; opacity: 0.55;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
.menu-icon{ .menu-icon{
display: block; display: block;
width: 14px; width: 14px;
@ -62,27 +62,13 @@
background-position: center; background-position: center;
background-size: contain; background-size: contain;
margin-right: 10px; margin-right: 10px;
&.con00 { &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
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);}
&.con01 { &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
background-image: url(/static/images/canvas/menu_icon01.svg); &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
} &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
&.con02 { &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
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{ &.active{
@ -99,7 +85,7 @@
margin-left: auto; margin-left: auto;
.select-box{ .select-box{
width: 124px; width: 124px;
margin-right: 5px; margin: 0 5px;
height: 30px; height: 30px;
> div{ > div{
width: 100%; width: 100%;
@ -114,43 +100,25 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 2px; border-radius: 2px;
background-color: #3d3d3d; background-color: #3D3D3D;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 15px 15px; background-size: 15px 15px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
&.btn01 { &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
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);}
&.btn02 { &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
background-image: url(../../public/static/images/canvas/side_icon02.svg); &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
} &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
&.btn03 { &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
background-image: url(../../public/static/images/canvas/side_icon01.svg); &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
} &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
&.btn04 {
background-image: url(../../public/static/images/canvas/side_icon04.svg);
}
&.btn05 {
background-image: url(../../public/static/images/canvas/side_icon05.svg);
}
&.btn06 {
background-image: url(../../public/static/images/canvas/side_icon06.svg);
}
&.btn07 {
background-image: url(../../public/static/images/canvas/side_icon07.svg);
}
&.btn08 {
background-image: url(../../public/static/images/canvas/side_icon08.svg);
}
&.btn09 {
background-image: url(../../public/static/images/canvas/side_icon09.svg);
}
&:hover{ &:hover{
background-color: #1083e3; background-color: #1083E3;
} }
&.active{ &.active{
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -166,18 +134,10 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
&.ico01 { &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
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);}
&.ico02 { &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
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{ .name{
font-size: 12px; font-size: 12px;
@ -194,7 +154,7 @@
display: flex; display: flex;
min-width: 170px; min-width: 170px;
height: 28px; height: 28px;
margin: 0 5px; margin-right: 5px;
border-radius: 2px; border-radius: 2px;
background: #373737; background: #373737;
line-height: 28px; line-height: 28px;
@ -207,16 +167,16 @@
button{ button{
margin-left: auto; margin-left: auto;
height: 100%; height: 100%;
background-color: #4b4b4b; background-color: #4B4B4B;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #fff; color: #fff;
padding: 0 7.5px; padding: 0 7.5px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
} }
&.on{ &.on{
button{ button{
background-color: #1083e3; background-color: #1083E3;
} }
} }
} }
@ -225,7 +185,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
background-color: #3d3d3d; background-color: #3D3D3D;
border-radius: 2px; border-radius: 2px;
width: 100px; width: 100px;
height: 30px; height: 30px;
@ -258,7 +218,7 @@
background-color: #383838; background-color: #383838;
width: 100%; width: 100%;
height: 50px; height: 50px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
.canvas-depth2-inner{ .canvas-depth2-inner{
display: flex; display: flex;
align-items: center; align-items: center;
@ -310,7 +270,7 @@
align-items: center; align-items: center;
margin-right: 34px; margin-right: 34px;
height: 100%; height: 100%;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
button{ button{
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -350,7 +310,7 @@
// canvas-layout // canvas-layout
.canvas-content{ .canvas-content{
padding-top: 46.8px; padding-top: 46.8px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
.canvas-frame{ .canvas-frame{
height: calc(100vh - 129.3px); height: calc(100vh - 129.3px);
} }
@ -368,11 +328,11 @@
top: 92.8px; top: 92.8px;
left: 0; left: 0;
display: flex; display: flex;
background-color: #1c1c1c; background-color: #1C1C1C;
border-top: 1px solid #000; border-top: 1px solid #000;
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
z-index: 99; z-index: 99;
&.active{ &.active{
top: calc(92.8px + 50px); top: calc(92.8px + 50px);
@ -388,14 +348,14 @@
padding: 9.6px 20px; padding: 9.6px 20px;
border-right:1px solid #000; border-right:1px solid #000;
min-width: 0; min-width: 0;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
color: #aaa; color: #AAA;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -433,9 +393,9 @@
justify-content: center; justify-content: center;
width: 45px; width: 45px;
padding: 13.5px 0; padding: 13.5px 0;
background-color: #1c1c1c; background-color: #1C1C1C;
border-right: 1px solid #000; border-right: 1px solid #000;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
span{ span{
display: block; display: block;
width: 9px; width: 9px;
@ -453,9 +413,9 @@
.canvas-frame{ .canvas-frame{
position: relative; position: relative;
// height: calc(100% - 36.5px); // height: calc(100% - 36.5px);
background-color: #f4f4f7; background-color: #F4F4F7;
overflow: auto; overflow: auto;
transition: all 0.17s ease-in-out; transition: all .17s ease-in-out;
// &::-webkit-scrollbar { // &::-webkit-scrollbar {
// width: 10px; // width: 10px;
// height: 10px; // height: 10px;
@ -490,7 +450,7 @@
min-width: 1280px; min-width: 1280px;
height: 46px; height: 46px;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
background: #2c2c2c; background: #2C2C2C;
z-index: 999; z-index: 999;
.sub-header-inner{ .sub-header-inner{
display: flex; display: flex;
@ -513,9 +473,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.drawing { &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
background-image: url(../../public/static/images/main/drawing_icon.svg);
}
} }
} }
&:after{ &:after{
@ -526,7 +484,7 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 16px; height: 16px;
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&:first-child{ &:first-child{
padding-left: 0; padding-left: 0;
@ -556,7 +514,7 @@
span{ span{
display: flex; display: flex;
font-size: 12px; font-size: 12px;
color: #aaa; color: #AAA;
font-weight: normal; font-weight: normal;
cursor: default; cursor: default;
} }
@ -614,8 +572,8 @@
.sub-table-box{ .sub-table-box{
padding: 20px; padding: 20px;
border-radius: 6px; border-radius: 6px;
border: 1px solid #e9eaed; border: 1px solid #E9EAED;
background: #fff; background: #FFF;
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
.table-box-title-wrap{ .table-box-title-wrap{
display: flex; display: flex;
@ -638,7 +596,7 @@
position: relative; position: relative;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #1083e3; color: #1083E3;
padding-left: 10px; padding-left: 10px;
&::before{ &::before{
content: ''; content: '';
@ -648,7 +606,7 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 11px; height: 11px;
background-color: #d9d9d9; background-color: #D9D9D9;
} }
} }
.option{ .option{
@ -669,7 +627,7 @@
span{ span{
font-weight: 600; font-weight: 600;
&.red{ &.red{
color: #e23d70; color: #E23D70;
} }
} }
&:after{ &:after{
@ -680,17 +638,10 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 11px; 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;}}
} }
} }
} }
@ -783,7 +734,7 @@
width: 105px; width: 105px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
background-color: #f4f4f7; background-color: #F4F4F7;
border-radius: 100px; border-radius: 100px;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
@ -798,12 +749,12 @@
&.blue{ &.blue{
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1083e3; color: #1083E3;
} }
&.red{ &.red{
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #d72a2a; color: #D72A2A;
} }
} }
} }
@ -817,11 +768,11 @@
padding: 10px; padding: 10px;
.btn-area{ .btn-area{
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #ecf0f4; border-bottom: 1px solid #ECF0F4;
.file-upload{ .file-upload{
display: inline-block; display: inline-block;
height: 30px; height: 30px;
background-color: #94a0ad; background-color: #94A0AD;
padding: 0 10px; padding: 0 10px;
border-radius: 2px; border-radius: 2px;
font-size: 13px; font-size: 13px;
@ -829,9 +780,9 @@
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.15s ease-in-out; transition: background .15s ease-in-out;
&:hover{ &:hover{
background-color: #607f9a; background-color: #607F9A;
} }
} }
} }
@ -855,7 +806,7 @@
span{ span{
position: relative; position: relative;
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-weight: 400; font-weight: 400;
white-space: nowrap; white-space: nowrap;
padding-right: 55px; padding-right: 55px;
@ -880,13 +831,13 @@
.special-note-check-wrap{ .special-note-check-wrap{
display: grid; display: grid;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
border: 1px solid #ecf0f4; border: 1px solid #ECF0F4;
border-radius: 3px; border-radius: 3px;
margin-bottom: 30px; margin-bottom: 30px;
.special-note-check-item{ .special-note-check-item{
padding: 14px 10px; padding: 14px 10px;
border-right: 1px solid #ecf0f4; border-right: 1px solid #ECF0F4;
border-top: 1px solid #ecf0f4; border-top: 1px solid #ECF0F4;
&:nth-child(5n){ &:nth-child(5n){
border-right: none; border-right: none;
} }
@ -894,13 +845,13 @@
border-top: none; border-top: none;
} }
&.act{ &.act{
background-color: #f7f9fa; background-color: #F7F9FA;
} }
} }
} }
.calculation-estimate{ .calculation-estimate{
border: 1px solid #ecf0f4; border: 1px solid #ECF0F4;
border-radius: 3px; border-radius: 3px;
padding: 24px; padding: 24px;
max-height: 350px; max-height: 350px;
@ -914,13 +865,13 @@
dt{ dt{
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #1083e3; color: #1083E3;
margin-bottom: 15px; margin-bottom: 15px;
} }
dd{ dd{
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #45576f; color: #45576F;
margin-bottom: 8px; margin-bottom: 8px;
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
@ -952,7 +903,7 @@
.product-price-tit{ .product-price-tit{
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #45576f; color: #45576F;
margin-right: 10px; margin-right: 10px;
} }
.select-wrap{ .select-wrap{
@ -990,7 +941,7 @@
transform: translateY(-50%); transform: translateY(-50%);
width: 1px; width: 1px;
height: 12px; height: 12px;
background-color: #d9d9d9; background-color: #D9D9D9;
} }
&:first-child{ &:first-child{
padding-left: 0; padding-left: 0;
@ -1002,7 +953,7 @@
padding-right: 0; padding-right: 0;
} }
&.item01{ &.item01{
color: #3bbb48; color: #3BBB48;
span{ span{
background-image: url(../../public/static/images/sub/open_ico.svg); background-image: url(../../public/static/images/sub/open_ico.svg);
} }
@ -1014,13 +965,13 @@
} }
} }
&.item03{ &.item03{
color: #0191c9; color: #0191C9;
span{ span{
background-image: url(../../public/static/images/sub/attachment_ico.svg); background-image: url(../../public/static/images/sub/attachment_ico.svg);
} }
} }
&.item04{ &.item04{
color: #f16a6a; color: #F16A6A;
span{ span{
background-image: url(../../public/static/images/sub/click_check_ico.svg); background-image: url(../../public/static/images/sub/click_check_ico.svg);
} }
@ -1082,23 +1033,23 @@
table{ table{
table-layout: fixed; table-layout: fixed;
border-collapse:collapse; border-collapse:collapse;
border: 1px solid #ecf0f4; border: 1px solid #ECF0F4;
border-radius: 4px; border-radius: 4px;
thead{ thead{
th{ th{
padding: 4.5px 0; padding: 4.5px 0;
border-bottom: 1px solid #ecf0f4; border-bottom: 1px solid #ECF0F4;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
font-weight: 500; font-weight: 500;
background-color: #f8f9fa; background-color: #F8F9FA;
} }
} }
tbody{ tbody{
td{ td{
font-size: 13px; font-size: 13px;
color: #45576f; color: #45576F;
text-align: center; text-align: center;
padding: 4.5px 0; padding: 4.5px 0;
} }
@ -1112,13 +1063,13 @@
.simulation-tit-wrap{ .simulation-tit-wrap{
flex: none; flex: none;
padding-right: 40px; padding-right: 40px;
border-right: 1px solid #eeeeee; border-right: 1px solid #EEEEEE;
span{ span{
display: block; display: block;
position: relative; position: relative;
padding-left: 60px; padding-left: 60px;
font-size: 15px; font-size: 15px;
color: #14324f; color: #14324F;
font-weight: 600; font-weight: 600;
&::before{ &::before{
content: ''; content: '';
@ -1146,7 +1097,7 @@
} }
dd{ dd{
font-size: 12px; font-size: 12px;
color: #45576f; color: #45576F;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
@ -1154,8 +1105,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
ul, ul, ol{
ol {
list-style: unset; list-style: unset;
} }
} }
@ -1164,10 +1114,10 @@
.module-total{ .module-total{
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #f8f9fa; background-color: #F8F9FA;
padding: 9px 0; padding: 9px 0;
margin-right: 4px; margin-right: 4px;
border: 1px solid #ecf0f4; border: 1px solid #ECF0F4;
border-top: none; border-top: none;
.total-title{ .total-title{
flex: 1; flex: 1;
@ -1190,7 +1140,7 @@
.information-help-wrap{ .information-help-wrap{
display: flex; display: flex;
padding: 24px; padding: 24px;
background-color: #f4f4f4; background-color: #F4F4F4;
border-radius: 4px; border-radius: 4px;
margin-bottom: 15px; margin-bottom: 15px;
.information-help-tit-wrap{ .information-help-tit-wrap{
@ -1198,7 +1148,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: 40px; padding-right: 40px;
border-right: 1px solid #e0e0e3; border-right: 1px solid #E0E0E3;
.help-tit-icon{ .help-tit-icon{
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1210,7 +1160,7 @@
.help-tit{ .help-tit{
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #45576f; color: #45576F;
} }
} }
.information-help-guide{ .information-help-guide{
@ -1219,7 +1169,7 @@
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #45576f; color: #45576F;
margin-bottom: 7px; margin-bottom: 7px;
&:last-child{ &:last-child{
margin-bottom: 0; margin-bottom: 0;
@ -1233,7 +1183,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 10px 0 30px 0; padding: 10px 0 30px 0;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #E5E5E5;
margin-bottom: 24px; margin-bottom: 24px;
.community-search-box{ .community-search-box{
position: relative; position: relative;
@ -1252,7 +1202,7 @@
font-weight: 400; font-weight: 400;
color: #101010; color: #101010;
&::placeholder{ &::placeholder{
color: #c8c8c8; color: #C8C8C8;
} }
} }
.community-search-ico{ .community-search-ico{
@ -1271,10 +1221,10 @@
.community-search-keyword{ .community-search-keyword{
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: #45576f; color: #45576F;
span{ span{
font-weight: 600; font-weight: 600;
color: #f16a6a; color: #F16A6A;
} }
} }
} }
@ -1289,15 +1239,15 @@
align-items: center; align-items: center;
padding: 24px; padding: 24px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e5e5e5; border: 1px solid #E5E5E5;
background: #fff; background: #FFF;
transition: all 0.15s ease-in-out; transition: all .15s ease-in-out;
.file-item-info{ .file-item-info{
.item-num{ .item-num{
display: inline-block; display: inline-block;
padding: 6px 17.5px; padding: 6px 17.5px;
border-radius: 60px; border-radius: 60px;
background-color: #f4f4f7; background-color: #F4F4F7;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #101010; color: #101010;
@ -1329,7 +1279,7 @@
} }
} }
&:hover{ &:hover{
background-color: #f4f4f7; background-color: #F4F4F7;
} }
} }
} }
@ -1342,7 +1292,7 @@
height: 148px; height: 148px;
padding: 24px; padding: 24px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e5e5e5; border: 1px solid #E5E5E5;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #344356; color: #344356;
@ -1354,8 +1304,8 @@
align-items: center; align-items: center;
width: 200px; width: 200px;
height: 30px; height: 30px;
background-color: #fafafa; background-color: #FAFAFA;
border: 1px solid #eee; border: 1px solid #EEE;
padding: 0 10px; padding: 0 10px;
input{ input{
font-size: 13px; font-size: 13px;
@ -1447,12 +1397,12 @@
gap: 3px; gap: 3px;
} }
.vertical-horizontal{ .vertical-horizontal{
margin: 0 3px; margin-right: 3px;
min-width: 150px; min-width: 150px;
} }
.select-box{ .select-box{
width: 100px; width: 100px;
margin-right: 3px; margin: 0 3px;
} }
.size-control{ .size-control{
width: 90px; width: 90px;
@ -1478,4 +1428,5 @@
} }
} }
} }
} }

2
src/styles/_grid-detail.scss
View File

@ -39,7 +39,7 @@
background-color: #F7F9FA; background-color: #F7F9FA;
} }
&.important_row{ &.important_row{
background-color: #e7e7e7; background-color: #f5fcff;
} }
} }
.ag-cell{ .ag-cell{

630
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff

2
src/styles/_reset.scss
View File

@ -9,8 +9,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body{ html, body{
width: 100%;
height: 100%;
font-size: 16px; font-size: 16px;
} }
html, body, div, span, applet, object, iframe, html, body, div, span, applet, object, iframe,