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:
lelalela 2025-01-17 17:13:45 +09:00
commit 39516f4533
54 changed files with 2341 additions and 2060 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/floor-plan/FloorPlanProvider.js
View File

@ -48,14 +48,14 @@ const FloorPlanProvider = ({ children }) => {
const objectNo = searchParams.get('objectNo') const objectNo = searchParams.get('objectNo')
const pid = searchParams.get('pid') const pid = searchParams.get('pid')
useEffect(() => { // 오류 발생으로 useEffect 사용 //useEffect(() => { // 오류 발생으로 useEffect 사용
if (pathname === '/floor-plan') { if (pathname === '/floor-plan') {
if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) { if (pid === undefined || pid === '' || pid === null || objectNo === undefined || objectNo === '' || objectNo === null) {
notFound() notFound()
} }
setCurrentObjectNo(objectNo) setCurrentObjectNo(objectNo)
} }
}, [pid, objectNo]) //}, [pid, objectNo])
const [floorPlanState, setFloorPlanState] = useState({ const [floorPlanState, setFloorPlanState] = useState({
// 플랜 파일 업로드 모달 오픈 제어 // 플랜 파일 업로드 모달 오픈 제어

2
src/app/layout.js
View File

@ -66,7 +66,6 @@ export default async function RootLayout({ children }) {
<GlobalDataProvider> <GlobalDataProvider>
<html lang="en"> <html lang="en">
<body> <body>
<Suspense fallback={<GlobalSpinner />}>
{headerPathname === '/login' || headerPathname === '/join' ? ( {headerPathname === '/login' || headerPathname === '/join' ? (
<QcastProvider>{children}</QcastProvider> <QcastProvider>{children}</QcastProvider>
) : ( ) : (
@ -83,7 +82,6 @@ export default async function RootLayout({ children }) {
)} )}
<QModal /> <QModal />
<PopupManager /> <PopupManager />
</Suspense>
</body> </body>
</html> </html>
</GlobalDataProvider> </GlobalDataProvider>

5
src/components/common/color-picker/ColorPickerModal.jsx
View File

@ -33,9 +33,9 @@ export default function ColorPickerModal(props) {
}, [isShow]) }, [isShow])
return ( return (
<WithDraggable isShow={true} pos={pos ?? ''}> <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
<div className={`modal-pop-wrap lr mount`}> <div className={`modal-pop-wrap lr mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.color.picker.title')}</h1> <h1 className="title">{getMessage('modal.color.picker.title')}</h1>
<button <button
className="modal-close" className="modal-close"
@ -78,6 +78,7 @@ export default function ColorPickerModal(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

2
src/components/common/draggable/WithDraggable.jsx
View File

@ -20,7 +20,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
<Draggable <Draggable
position={{ x: position.x, y: position.y }} position={{ x: position.x, y: position.y }}
onDrag={(e, data) => handleOnDrag(e, data)} onDrag={(e, data) => handleOnDrag(e, data)}
handle={handle === '' ? '.modal-head' : handle} handle={handle === '' ? '.modal-handle' : handle}
> >
{children} {children}
</Draggable> </Draggable>

5
src/components/common/font/FontSetting.jsx
View File

@ -67,9 +67,9 @@ export default function FontSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} handle=".modal-handle">
<div className={`modal-pop-wrap lrr mount`}> <div className={`modal-pop-wrap lrr mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.font')}</h1> <h1 className="title">{getMessage('modal.font')}</h1>
<button <button
className="modal-close" className="modal-close"
@ -133,6 +133,7 @@ export default function FontSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

2
src/components/estimate/Estimate.jsx
View File

@ -135,7 +135,7 @@ export default function Estimate({}) {
useEffect(() => { useEffect(() => {
console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan) console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
if (selectedPlan) initEstimate(selectedPlan.ordering) if (selectedPlan) initEstimate(selectedPlan.planNo)
}, [selectedPlan]) }, [selectedPlan])
useEffect(() => { useEffect(() => {

10
src/components/floor-plan/CanvasLayout.jsx
View File

@ -30,22 +30,22 @@ export default function CanvasLayout({ children }) {
<div className="canvas-layout"> <div className="canvas-layout">
<div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}> <div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className="canvas-plane-wrap"> <div className="canvas-plane-wrap">
{plans.map((plan) => ( {plans.map((plan, index) => (
<button <button
key={`plan-${plan.id}`} key={`plan-${plan.id}`}
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(plan.id)} onClick={() => handleCurrentPlan(plan.id)}
> >
<span>{`Plan ${plan.ordering}`}</span> <span>{`Plan ${plan.planNo}`}</span>
{plan.ordering !== 1 && ( {index !== 0 && (
<i <i
className="close" className="close"
onClick={(e) => onClick={(e) =>
swalFire({ swalFire({
text: `Plan ${plan.ordering} ` + getMessage('plan.message.confirm.delete'), text: `Plan ${plan.planNo} ` + getMessage('plan.message.confirm.delete'),
type: 'confirm', type: 'confirm',
confirmFn: () => { confirmFn: () => {
handleDeletePlan(e, plan.id) handleDeletePlan(e, plan)
}, },
}) })
} }

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

@ -171,14 +171,14 @@ export default function CanvasMenu(props) {
break break
case 5: case 5:
// let pid = urlParams.get('pid') // let pid = urlParams.get('pid')
promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => { promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
if (res.status === 200) { if (res.status === 200) {
const estimateDetail = res.data const estimateDetail = res.data
if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) { if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) {
setMenuNumber(menu.index) setMenuNumber(menu.index)
setCurrentMenu(menu.title) setCurrentMenu(menu.title)
setFloorPlanObjectNo({ floorPlanObjectNo: objectNo }) setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`) router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
} else { } else {
swalFire({ text: getMessage('estimate.menu.move.valid1') }) swalFire({ text: getMessage('estimate.menu.move.valid1') })
} }
@ -186,13 +186,13 @@ export default function CanvasMenu(props) {
}) })
break break
case 6: case 6:
promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => { promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
if (res.status === 200) { if (res.status === 200) {
const estimateDetail = res.data const estimateDetail = res.data
if (estimateDetail.tempFlg === '0') { if (estimateDetail.tempFlg === '0') {
setMenuNumber(menu.index) setMenuNumber(menu.index)
setCurrentMenu(menu.title) setCurrentMenu(menu.title)
router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`) router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
} else { } else {
swalFire({ text: getMessage('simulator.menu.move.valid1') }) swalFire({ text: getMessage('simulator.menu.move.valid1') })
} }

3
src/components/floor-plan/modal/Slope.jsx
View File

@ -15,7 +15,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}> <div className={`modal-pop-wrap xxxm`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1> <h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -45,6 +45,7 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
View File

@ -126,7 +126,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1> <h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -160,6 +160,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
View File

@ -46,7 +46,7 @@ export default function AuxiliaryEdit(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1> <h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -111,6 +111,7 @@ export default function AuxiliaryEdit(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -14,7 +14,7 @@ export default function AuxiliarySize(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -63,6 +63,7 @@ export default function AuxiliarySize(props) {
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button> <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -51,7 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx-2`}> <div className={`modal-pop-wrap lx-2`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1> <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -115,6 +115,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
)} )}
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -83,7 +83,7 @@ export default function CircuitTrestleSetting({ id }) {
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l-2`}> <div className={`modal-pop-wrap l-2`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1> <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -131,6 +131,7 @@ export default function CircuitTrestleSetting({ id }) {
</div> </div>
)} )}
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -85,7 +85,7 @@ export default function DimensionLineSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -141,6 +141,7 @@ export default function DimensionLineSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/distance/Distance.jsx
View File

@ -18,7 +18,7 @@ export default function Distance(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`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.distance')} </h1> <h1 className="title">{getMessage('modal.distance')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -68,6 +68,7 @@ export default function Distance(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -40,7 +40,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1> <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -62,6 +62,7 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
{type === TYPES.SHED && <Shed {...shedProps} />} {type === TYPES.SHED && <Shed {...shedProps} />}
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -65,7 +65,7 @@ export default function FlowDirectionSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml mount`}> <div className={`modal-pop-wrap ml mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -176,6 +176,7 @@ export default function FlowDirectionSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -179,7 +179,7 @@ export default function DotLineGrid(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}> <div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1> <h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
<button <button
className="modal-close" className="modal-close"
@ -293,6 +293,7 @@ export default function DotLineGrid(props) {
</div> </div>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</WithDraggable> </WithDraggable>
) )
} }

3
src/components/floor-plan/modal/grid/GridCopy.jsx
View File

@ -22,7 +22,7 @@ export default function GridCopy(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.grid.copy')} </h1> <h1 className="title">{getMessage('modal.grid.copy')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -77,6 +77,7 @@ export default function GridCopy(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/grid/GridMove.jsx
View File

@ -75,7 +75,7 @@ export default function GridMove(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.grid.move')} </h1> <h1 className="title">{getMessage('modal.grid.move')} </h1>
<button className="modal-close" onClick={handleClose}> <button className="modal-close" onClick={handleClose}>
닫기 닫기
@ -156,6 +156,7 @@ export default function GridMove(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -52,7 +52,7 @@ export default function LinePropertySetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1> <h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
<button className="modal-close" onClick={() => handleClosePopup()}> <button className="modal-close" onClick={() => handleClosePopup()}>
닫기 닫기
@ -91,6 +91,7 @@ export default function LinePropertySetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -16,7 +16,7 @@ export default function CircuitNumberEdit(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -42,6 +42,7 @@ export default function CircuitNumberEdit(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -84,7 +84,7 @@ export default function PanelEdit(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title"> <h1 className="title">
{getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '} {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '}
</h1> </h1>
@ -139,6 +139,7 @@ export default function PanelEdit(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -26,7 +26,7 @@ export default function ColumnInsert(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -105,6 +105,7 @@ export default function ColumnInsert(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -29,7 +29,7 @@ export default function ColumnRemove(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -115,6 +115,7 @@ export default function ColumnRemove(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -26,7 +26,7 @@ export default function RowInsert(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -105,6 +105,7 @@ export default function RowInsert(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -29,7 +29,7 @@ export default function RowRemove(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -115,6 +115,7 @@ export default function RowRemove(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -18,7 +18,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1> <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -43,6 +43,7 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -42,7 +42,7 @@ export default function DormerOffset(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}> <div className={`modal-pop-wrap xm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{title}</h1> <h1 className="title">{title}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -103,6 +103,7 @@ export default function DormerOffset(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -77,7 +77,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}> <div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1> <h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -109,6 +109,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -23,7 +23,7 @@ export default function RoofMaterialSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm mount`}> <div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1> <h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -39,6 +39,7 @@ export default function RoofMaterialSetting(props) {
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button> <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/object/SizeSetting.jsx
View File

@ -47,7 +47,7 @@ export default function SizeSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}> <div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.size.setting')} </h1> <h1 className="title">{getMessage('modal.size.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -95,6 +95,7 @@ export default function SizeSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
View File

@ -10,7 +10,7 @@ export default function PropertiesSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm`}> <div className={`modal-pop-wrap ssm`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1> <h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
<button className="modal-close" onClick={() => closeModal(id)}> <button className="modal-close" onClick={() => closeModal(id)}>
닫기 닫기
@ -38,6 +38,7 @@ export default function PropertiesSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -116,7 +116,7 @@ export default function WallLineSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r mount`}> <div className={`modal-pop-wrap r mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1> <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}></button> <button className="modal-close" onClick={() => closePopup(id)}></button>
</div> </div>
@ -184,6 +184,7 @@ export default function WallLineSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -123,7 +123,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1> <h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -159,6 +159,7 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

11
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -62,7 +62,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
// setRaftCodes(raftCodeList) // setRaftCodes(raftCodeList)
// console.log('🚀 ~ useEffect ~ >>>>>>>>>>>>> raftCodeList 11 :', raftCodeList) // console.log('🚀 ~ useEffect ~ >>>>>>>>>>>>> raftCodeList 11 :', raftCodeList)
// if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { // if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
// setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) // setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
// } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { // } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
@ -182,7 +181,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ll mount`}> <div className={`modal-pop-wrap ll mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1> <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -261,7 +260,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
title={ title={
currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
} }
ref={roofRef.roofCd} //ref={roofRef.roofCd}
options={roofMaterials.map((roof) => { options={roofMaterials.map((roof) => {
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
})} })}
@ -347,9 +346,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<div className="select-wrap" style={{ width: '160px' }}> <div className="select-wrap" style={{ width: '160px' }}>
<QSelectBox <QSelectBox
options={raftCodes} options={raftCodes}
ref={roofRef.rafter} //ref={roofRef.rafter}
title={ title={
raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft)).clCodeNm raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
.clCodeNm
} }
value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft} value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
onChange={(e) => handleRafterChange(e.clCode)} onChange={(e) => handleRafterChange(e.clCode)}
@ -423,6 +423,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
</div> </div>
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />} {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />} {showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -242,7 +242,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr-2`}> <div className={`modal-pop-wrap lr-2`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1> <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -290,6 +290,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
</div> </div>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
View File

@ -63,7 +63,7 @@ export default function ActualSizeSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm mount`}> <div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.actual.size.setting')}</h1> <h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -116,6 +116,7 @@ export default function ActualSizeSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
View File

@ -45,7 +45,7 @@ export default function ContextRoofAllocationSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}> <div className={`modal-pop-wrap lr mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -214,6 +214,7 @@ export default function ContextRoofAllocationSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

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

@ -49,7 +49,7 @@ export default function RoofAllocationSetting(props) {
<div className={`modal-pop-wrap lr mount`}> <div className={`modal-pop-wrap lr mount`}>
{currentRoofList && ( {currentRoofList && (
<> <>
<div className="modal-head"> <div className="modal-head modal-handle">
<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)}>
닫기 닫기
@ -235,6 +235,7 @@ export default function RoofAllocationSetting(props) {
</div> </div>
</> </>
)} )}
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -31,7 +31,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxm`}> <div className={`modal-pop-wrap xxm`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1> <h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -67,6 +67,7 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -90,7 +90,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}> <div className={`modal-pop-wrap lr mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1> <h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -120,6 +120,7 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/setting01/SettingModal01.jsx
View File

@ -75,7 +75,7 @@ export default function SettingModal01(props) {
<> <>
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}> <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
<div className={`modal-pop-wrap sm mount`}> <div className={`modal-pop-wrap sm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting')}</h1> <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id, true)}> <button className="modal-close" onClick={() => closePopup(id, true)}>
닫기 닫기
@ -100,6 +100,7 @@ export default function SettingModal01(props) {
{buttonAct === 2 && <SecondOption {...secondProps} />} {buttonAct === 2 && <SecondOption {...secondProps} />}
{buttonAct === 3 && <GridOption {...gridProps} />} {buttonAct === 3 && <GridOption {...gridProps} />}
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
</> </>

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

@ -192,7 +192,7 @@ export default function DimensionLineSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm mount`}> <div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1> <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
<button <button
className="modal-close" className="modal-close"
@ -258,6 +258,7 @@ export default function DimensionLineSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -57,7 +57,7 @@ export default function PlanSizeSetting(props) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xsm mount`}> <div className={`modal-pop-wrap xsm mount`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1> <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
<button <button
className="modal-close" className="modal-close"
@ -104,6 +104,7 @@ export default function PlanSizeSetting(props) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

3
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
View File

@ -41,7 +41,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}> <div className={`modal-pop-wrap r`}>
<div className="modal-head"> <div className="modal-head modal-handle">
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1> <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}> <button className="modal-close" onClick={() => closePopup(id)}>
닫기 닫기
@ -66,6 +66,7 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> </WithDraggable>
) )

2
src/components/simulator/Simulator.jsx
View File

@ -111,7 +111,7 @@ export default function Simulator() {
setHatsudenryouPeakcutAllSnow([]) setHatsudenryouPeakcutAllSnow([])
if (objectNo && pid && selectedPlan) { if (objectNo && pid && selectedPlan) {
fetchObjectDetail(objectNo, selectedPlan.ordering) fetchObjectDetail(objectNo, selectedPlan.planNo)
fetchSimulatorNotice() fetchSimulatorNotice()
setPwrGnrSimType('D') setPwrGnrSimType('D')
setPwrRecoil({ ...pwrRecoil, type: 'D' }) setPwrRecoil({ ...pwrRecoil, type: 'D' })

7
src/hooks/option/useCanvasSetting.js
View File

@ -290,7 +290,7 @@ export function useCanvasSetting() {
let roofsRow = {} let roofsRow = {}
let roofsArray = {} let roofsArray = {}
if (res.length > 0) { if (res) {
roofsRow = res.map((item) => { roofsRow = res.map((item) => {
return { return {
roofSizeSet: String(item.roofSizeSet), roofSizeSet: String(item.roofSizeSet),
@ -674,7 +674,7 @@ export function useCanvasSetting() {
// HTTP POST 요청 보내기 // HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
.then((res) => { .then((res) => {
// swalFire({ text: getMessage(res.returnMessage) }) swalFire({ text: getMessage(res.returnMessage) })
// Canvas 디스플레이 설정 시 해당 옵션 적용 // Canvas 디스플레이 설정 시 해당 옵션 적용
frontSettings() frontSettings()
@ -682,7 +682,8 @@ export function useCanvasSetting() {
fetchSettings() fetchSettings()
}) })
.catch((error) => { .catch((error) => {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' }) //swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
swalFire({ text: error.message, icon: 'error' })
}) })
//setAdsorptionRange(item.range) //setAdsorptionRange(item.range)

4
src/hooks/useAxios.js
View File

@ -97,13 +97,11 @@ export function useAxios(lang = '') {
const getFetcher = async (url) => { const getFetcher = async (url) => {
const res = await get({ url }) const res = await get({ url })
console.log('🚀 ~ getFetcher ~ res:', res)
return res return res
} }
const postFetcher = async (url, { arg }) => { const postFetcher = async (url, arg) => {
const res = await post({ url, data: arg }) const res = await post({ url, data: arg })
console.log('🚀 ~ postFetcher ~ res:', res)
return res return res
} }

82
src/hooks/usePlan.js
View File

@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react'
import { usePathname, useRouter, useSearchParams } from 'next/navigation' import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useRecoilState } from 'recoil' import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom' import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios' import { useAxios } from '@/hooks/useAxios'
@ -18,7 +17,6 @@ import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateCon
export function usePlan(params = {}) { export function usePlan(params = {}) {
const { floorPlanState } = useContext(FloorPlanContext) const { floorPlanState } = useContext(FloorPlanContext)
const [planNum, setPlanNum] = useState(0)
const [selectedPlan, setSelectedPlan] = useState(null) const [selectedPlan, setSelectedPlan] = useState(null)
const [canvas, setCanvas] = useRecoilState(canvasState) const [canvas, setCanvas] = useRecoilState(canvasState)
@ -131,35 +129,52 @@ export function usePlan(params = {}) {
*/ */
const getCanvasByObjectNo = async (userId, objectNo) => { const getCanvasByObjectNo = async (userId, objectNo) => {
return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) => return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item, index) => ({ res.map((item) => ({
id: item.id, id: item.id,
objectNo: item.objectNo,
planNo: item.planNo,
userId: item.userId, userId: item.userId,
canvasStatus: dbToCanvasFormat(item.canvasStatus), canvasStatus: dbToCanvasFormat(item.canvasStatus),
isCurrent: false, isCurrent: false,
bgImageName: item.bgImageName, bgImageName: item.bgImageName,
mapPositionAddress: item.mapPositionAddress, mapPositionAddress: item.mapPositionAddress,
ordering: index + 1,
})), })),
) )
} }
/**
* 물건번호(object) plan 추가 (canvas 생성 전 planNo 할당)
*/
const postObjectPlan = async (userId, objectNo) => {
return await promisePost({ url: '/api/object/add-plan', data: { userId: userId, objectNo: objectNo } })
.then((res) => {
return res.data.planNo
})
.catch((error) => {
swalFire({ text: error.response.data.message, icon: 'error' })
return null
})
}
/** /**
* 신규 canvas 데이터를 저장 * 신규 canvas 데이터를 저장
*/ */
const postCanvasStatus = async (userId, objectNo, canvasStatus) => { const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
const planNo = await postObjectPlan(userId, objectNo)
if (!planNo) return
const planData = { const planData = {
userId: userId, userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: objectNo, objectNo: objectNo,
planNo: planNo,
bgImageName: currentCanvasPlan?.bgImageName ?? null, bgImageName: currentCanvasPlan?.bgImageName ?? null,
mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null, mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
canvasStatus: canvasToDbFormat(canvasStatus), canvasStatus: canvasToDbFormat(canvasStatus),
} }
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => { .then((res) => {
setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }]) setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
updateCurrentPlan(res.data) updateCurrentPlan(res.data)
setPlanNum(planNum + 1)
}) })
.catch((error) => { .catch((error) => {
swalFire({ text: error.message, icon: 'error' }) swalFire({ text: error.message, icon: 'error' })
@ -204,12 +219,12 @@ export function usePlan(params = {}) {
* 현재 plan의 작업상태를 저장 후 이동 * 현재 plan의 작업상태를 저장 후 이동
*/ */
const handleCurrentPlan = async (newCurrentId) => { const handleCurrentPlan = async (newCurrentId) => {
const orderingNo = plans?.find((obj) => obj.id === newCurrentId).ordering const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo
const objectNo = floorPlanState.objectNo const objectNo = floorPlanState.objectNo
//견적서 or 발전시뮬 //견적서 or 발전시뮬
if (pathname !== '/floor-plan') { if (pathname !== '/floor-plan') {
await promiseGet({ url: `/api/estimate/${objectNo}/${orderingNo}/detail` }) await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` })
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
const estimateDetail = res.data const estimateDetail = res.data
@ -278,7 +293,7 @@ export function usePlan(params = {}) {
const handleCurrentPlanUrl = () => { const handleCurrentPlanUrl = () => {
const currentPlan = plans.find((plan) => plan.isCurrent) const currentPlan = plans.find((plan) => plan.isCurrent)
if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.ordering}&objectNo=${floorPlanState?.objectNo}`) if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.planNo}&objectNo=${floorPlanState?.objectNo}`)
} }
const setBgImage = () => { const setBgImage = () => {
@ -295,7 +310,7 @@ export function usePlan(params = {}) {
} }
JSON.parse(currentCanvasData()).objects.length > 0 JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({ ? swalFire({
text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'), text: `Plan ${currentCanvasPlan.planNo} ` + getMessage('plan.message.confirm.copy'),
type: 'confirm', type: 'confirm',
confirmFn: async () => { confirmFn: async () => {
await postCanvasStatus(userId, objectNo, currentCanvasData()) await postCanvasStatus(userId, objectNo, currentCanvasData())
@ -308,31 +323,31 @@ export function usePlan(params = {}) {
} }
/** /**
* DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수 * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제)
*/ */
const addPlan = (userId, objectNo, canvasStatus) => { const deleteObjectPlan = async (userId, objectNo, planNo) => {
const id = uuidv4() return await promiseDel({ url: `/api/object/plan/${objectNo}/${planNo}?userId=${userId}` })
const newPlan = { .then((res) => {
id: id, return true
objectNo: objectNo, })
userId: userId, .catch((error) => {
canvasStatus: canvasStatus, swalFire({ text: error.response.data.message, icon: 'error' })
ordering: planNum + 1, return false
} })
setPlans([...plans, newPlan])
handleCurrentPlan(id)
setPlanNum(planNum + 1)
} }
/** /**
* plan 삭제 * plan 삭제
*/ */
const handleDeletePlan = async (e, id) => { const handleDeletePlan = async (e, targetPlan) => {
e.stopPropagation() // 이벤트 버블링 방지 e.stopPropagation() // 이벤트 버블링 방지
await delCanvasById(id) const isSuccess = await deleteObjectPlan(targetPlan.id, targetPlan.objectNo, targetPlan.planNo)
if (!isSuccess) return
await delCanvasById(targetPlan.id)
.then((res) => { .then((res) => {
setPlans((plans) => plans.filter((plan) => plan.id !== id)) setPlans((plans) => plans.filter((plan) => plan.id !== targetPlan.id))
removeImage(currentCanvasPlan.id) removeImage(currentCanvasPlan.id)
swalFire({ text: getMessage('plan.message.delete') }) swalFire({ text: getMessage('plan.message.delete') })
}) })
@ -341,11 +356,10 @@ export function usePlan(params = {}) {
}) })
// 삭제 후 last 데이터에 포커싱 // 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1) const lastPlan = plans.filter((plan) => plan.id !== targetPlan.id).at(-1)
if (!lastPlan) { if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null) setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) { } else if (targetPlan.id !== lastPlan.id) {
updateCurrentPlan(lastPlan.id) updateCurrentPlan(lastPlan.id)
} }
} }
@ -353,13 +367,11 @@ export function usePlan(params = {}) {
/** /**
* plan 조회 * plan 조회
*/ */
const loadCanvasPlanData = async (userId, objectNo, pid) => { const loadCanvasPlanData = async (userId, objectNo, planNo) => {
await getCanvasByObjectNo(userId, objectNo).then((res) => { await getCanvasByObjectNo(userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) { if (res.length > 0) {
setPlans(res) setPlans(res)
updateCurrentPlan(res[pid - 1].id) updateCurrentPlan(res.find((plan) => plan.planNo === planNo).id)
setPlanNum(res.length)
} else { } else {
postCanvasStatus(userId, objectNo, '') postCanvasStatus(userId, objectNo, '')
} }
@ -370,7 +382,7 @@ export function usePlan(params = {}) {
* 현재 plan 이동 -> 새로운 링크로 이동 * 현재 plan 이동 -> 새로운 링크로 이동
*/ */
const handlePlanMove = () => { const handlePlanMove = () => {
router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.ordering}`) router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.planNo}`)
} }
return { return {

7
src/hooks/usePolygon.js
View File

@ -427,6 +427,13 @@ export const usePolygon = () => {
text = '西西南' text = '西西南'
} }
const sameDirectionCnt = canvas.getObjects().filter((obj) => {
const onlyStrDirection = obj.directionText?.replace(/[0-9]/g, '')
return obj.name === POLYGON_TYPE.ROOF && onlyStrDirection === text
})
text = text + (sameDirectionCnt.length + 1)
polygon.set('directionText', text)
const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, { const textObj = new fabric.Text(`${text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`, {
fontFamily: flowFontOptions.fontFamily.value, fontFamily: flowFontOptions.fontFamily.value,
fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal', fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',

443
src/styles/_modal.scss
View File

@ -5,12 +5,24 @@ $pop-normal-size: 12px;
$alert-color: #101010; $alert-color: #101010;
@keyframes mountpop { @keyframes mountpop {
from{opacity: 0; scale: 0.95;} from {
to{opacity: 1; scale: 1;} opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
} }
@keyframes unmountpop { @keyframes unmountpop {
from{opacity: 1; scale: 1;} from {
to{opacity: 0; scale: 0.95;} opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
} }
.normal-font { .normal-font {
@ -85,10 +97,10 @@ $alert-color: #101010;
width: 900px; width: 900px;
} }
&.mount { &.mount {
animation: mountpop .17s ease-in-out forwards; animation: mountpop 0.17s ease-in-out forwards;
} }
&.unmount { &.unmount {
animation: unmountpop .17s ease-in-out forwards; animation: unmountpop 0.17s ease-in-out forwards;
} }
&.alert { &.alert {
position: absolute; position: absolute;
@ -127,6 +139,7 @@ $alert-color: #101010;
padding: 10px 24px; padding: 10px 24px;
background-color: #000; background-color: #000;
// overflow: hidden; // overflow: hidden;
cursor: pointer;
h1.title { h1.title {
font-size: 13px; font-size: 13px;
color: $pop-color; color: $pop-color;
@ -193,7 +206,7 @@ $alert-color: #101010;
} }
} }
.outer-line-wrap { .outer-line-wrap {
border-top: 1px solid #3C3C3C; border-top: 1px solid #3c3c3c;
margin-top: 10px; margin-top: 10px;
padding-top: 15px; padding-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -211,11 +224,18 @@ $alert-color: #101010;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
} }
} }
.modal-foot {
display: block;
width: 100%;
padding: 5px 0;
background-color: #000;
cursor: pointer;
}
.adsorption-point { .adsorption-point {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #3A3A3A; background-color: #3a3a3a;
border-radius: 3px; border-radius: 3px;
padding-left: 11px; padding-left: 11px;
overflow: hidden; overflow: hidden;
@ -236,7 +256,7 @@ $alert-color: #101010;
&.act { &.act {
i { i {
color: $pop-color; color: $pop-color;
background-color: #1083E3; background-color: #1083e3;
} }
} }
} }
@ -259,7 +279,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -270,7 +290,7 @@ $alert-color: #101010;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
padding: 15px 10px; padding: 15px 10px;
gap: 20px; gap: 20px;
@ -300,7 +320,9 @@ $alert-color: #101010;
} }
} }
.select-form { .select-form {
.sort-select{width: 100%;} .sort-select {
width: 100%;
}
} }
.grid-select { .grid-select {
flex: 1; flex: 1;
@ -345,7 +367,6 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
padding-bottom: 15px; padding-bottom: 15px;
} }
.grid-direction { .grid-direction {
display: flex; display: flex;
@ -362,11 +383,17 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: 16px 15px; background-size: 16px 15px;
border-radius: 50%; border-radius: 50%;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
opacity: 0.6; opacity: 0.6;
&.down{transform: rotate(180deg);} &.down {
&.left{transform: rotate(-90deg);} transform: rotate(180deg);
&.right{transform: rotate(90deg);} }
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover, &:hover,
&.act { &.act {
opacity: 1; opacity: 1;
@ -452,10 +479,11 @@ $alert-color: #101010;
} }
&.light { &.light {
padding: 0; padding: 0;
th,td{ th,
td {
color: $alert-color; color: $alert-color;
border-bottom: none; border-bottom: none;
border-top: 1px solid #EFEFEF; border-top: 1px solid #efefef;
} }
th { th {
padding: 14px 0; padding: 14px 0;
@ -509,7 +537,6 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
} }
} }
.img-edit-wrap { .img-edit-wrap {
@ -525,7 +552,7 @@ $alert-color: #101010;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
.img-edit { .img-edit {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -545,7 +572,6 @@ $alert-color: #101010;
margin-left: 10px; margin-left: 10px;
input { input {
flex: 1; flex: 1;
} }
.img-check { .img-check {
flex: none; flex: none;
@ -571,8 +597,12 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);} &.fail {
&.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);} background-image: url(../../public/static/images/canvas/img_check_fail.svg);
}
&.success {
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
} }
} }
@ -652,7 +682,7 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 50%; width: 50%;
background-color: #3D3D3D; background-color: #3d3d3d;
border-radius: 2px; border-radius: 2px;
} }
} }
@ -660,7 +690,7 @@ $alert-color: #101010;
// 외벽선 속성 설정 // 외벽선 속성 설정
.properties-guide { .properties-guide {
font-size: $pop-normal-size; font-size: $pop-normal-size;
color: #AAA; color: #aaa;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -689,17 +719,17 @@ $alert-color: #101010;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border-radius: 2px; border-radius: 2px;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.green { &.green {
background-color: #305941; background-color: #305941;
border: 1px solid #45CD7D; border: 1px solid #45cd7d;
&:hover { &:hover {
background-color: #3a6b4e; background-color: #3a6b4e;
} }
} }
&.blue { &.blue {
background-color: #2E5360; background-color: #2e5360;
border: 1px solid #3FBAE6; border: 1px solid #3fbae6;
&:hover { &:hover {
background-color: #365f6e; background-color: #365f6e;
} }
@ -721,8 +751,8 @@ $alert-color: #101010;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 13px; padding: 13px;
background-color: #3D3D3D; background-color: #3d3d3d;
transition: background .15s ease-in-out; transition: background 0.15s ease-in-out;
img { img {
max-width: 100%; max-width: 100%;
} }
@ -733,13 +763,17 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
transition: color .15s ease-in-out; transition: color 0.15s ease-in-out;
} }
.shape-menu-box { .shape-menu-box {
&.act, &.act,
&:hover { &:hover {
.shape-box{background-color: #008BFF;} .shape-box {
.shape-title{color: #008BFF;} background-color: #008bff;
}
.shape-title {
color: #008bff;
}
} }
} }
} }
@ -754,7 +788,7 @@ $alert-color: #101010;
} }
.discrimination-box { .discrimination-box {
padding: 16px 12px; padding: 16px 12px;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
} }
@ -787,12 +821,12 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
background-color: #3D3D3D; background-color: #3d3d3d;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
&.act { &.act {
border: 1px solid #ED0004; border: 1px solid #ed0004;
} }
} }
&:last-child { &:last-child {
@ -891,7 +925,7 @@ $alert-color: #101010;
border: 1px solid #646464; border: 1px solid #646464;
border-radius: 2px; border-radius: 2px;
padding: 0 10px; padding: 0 10px;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
i { i {
height: 15px; height: 15px;
display: block; display: block;
@ -899,7 +933,7 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.allocation01 { &.allocation01 {
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px; width: 15px;
@ -952,7 +986,9 @@ $alert-color: #101010;
height: 34px; height: 34px;
background-color: #373737; background-color: #373737;
border: 1px solid #676767; 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 { .shape-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -964,8 +1000,8 @@ $alert-color: #101010;
} }
&.act, &.act,
&:hover { &:hover {
border-color: #008BFF; border-color: #008bff;
background-color: #008BFF; background-color: #008bff;
} }
} }
} }
@ -980,18 +1016,27 @@ $alert-color: #101010;
.library-btn { .library-btn {
width: 100%; width: 100%;
height: 34px; height: 34px;
border: 1px solid #6C6C6C; border: 1px solid #6c6c6c;
border-radius: 2px; border-radius: 2px;
background-color: #373737; background-color: #373737;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;} &.ico01 {
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;} background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;} 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 { &:hover {
border-color: #1083E3; border-color: #1083e3;
background-color: #1083E3; background-color: #1083e3;
} }
} }
} }
@ -1077,11 +1122,27 @@ $alert-color: #101010;
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #B1B1B1; color: #b1b1b1;
&.top{top: 0; left: 50%; transform: translateX(-50%);} &.top {
&.right{top: 50%; right: 0; transform: translateY(-50%);} top: 0;
&.bottom{bottom: 0; left: 50%; transform: translateX(-50%);} left: 50%;
&.left{top: 50%; left: 0; transform: translateY(-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 { .plane-btn {
position: absolute; position: absolute;
@ -1093,11 +1154,27 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 50%; border-radius: 50%;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.up{top: 22px; left: 50%; transform: translateX(-50%);} &.up {
&.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);} top: 22px;
&.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);} left: 50%;
&.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);} 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, &:hover,
&.act { &.act {
background-color: #fff; background-color: #fff;
@ -1163,7 +1240,7 @@ $alert-color: #101010;
.warning { .warning {
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
color: #FFAFAF; color: #ffafaf;
} }
// 각 변 속성 변경 // 각 변 속성 변경
@ -1219,37 +1296,157 @@ $alert-color: #101010;
top: 12.5px; top: 12.5px;
left: 50%; left: 50%;
font-size: 11px; font-size: 11px;
color: #8B8B8B; color: #8b8b8b;
font-weight: 500; font-weight: 500;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-use-select: none; -ms-use-select: none;
user-select: none; user-select: none;
} }
&:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}} &:nth-child(1) {
&:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}} transform: rotate(180deg) translate(-50%, -50%);
&:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}} i {
&:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}} transform: translateX(-50%) rotate(180deg);
&: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(2) {
&:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}} transform: rotate(195deg) translate(-50%, -50%);
&:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}} i {
&:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}} transform: translateX(-50%) rotate(165deg);
&: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(3) {
&:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}} transform: rotate(210deg) translate(-50%, -50%);
&:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}} i {
&:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}} transform: translateX(-50%) rotate(150deg);
&: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(4) {
&:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}} transform: rotate(225deg) translate(-50%, -50%);
&:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}} i {
&:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}} 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(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 { &.act {
&::after { &::after {
content: ''; content: '';
@ -1303,13 +1500,13 @@ $alert-color: #101010;
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
color: #AAA; color: #aaa;
text-align: center; text-align: center;
cursor: default; cursor: default;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.act { &.act {
background-color: #1083E3; background-color: #1083e3;
border: 1px solid #1083E3; border: 1px solid #1083e3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -1322,7 +1519,7 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg); 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 { &.act {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
} }
@ -1355,7 +1552,9 @@ $alert-color: #101010;
top: 22px; top: 22px;
} }
&.act { &.act {
i{color: #8B8B8B;} i {
color: #8b8b8b;
}
} }
} }
} }
@ -1387,7 +1586,7 @@ $alert-color: #101010;
height: 30px; height: 30px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&:first-child { &:first-child {
border-left: 1px solid #505050; border-left: 1px solid #505050;
} }
@ -1401,7 +1600,7 @@ $alert-color: #101010;
.module-table-box { .module-table-box {
flex: 1; flex: 1;
background-color: #3D3D3D; background-color: #3d3d3d;
border-radius: 2px; border-radius: 2px;
.module-table-inner { .module-table-inner {
padding: 10px; padding: 10px;
@ -1414,7 +1613,7 @@ $alert-color: #101010;
padding: 10px 0; padding: 10px 0;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
} }
.eaves-keraba-table { .eaves-keraba-table {
width: 100%; width: 100%;
@ -1437,7 +1636,7 @@ $alert-color: #101010;
.warning-guide { .warning-guide {
padding: 20px; padding: 20px;
.warning { .warning {
color: #FFCACA; color: #ffcaca;
max-height: 55px; max-height: 55px;
overflow-y: auto; overflow-y: auto;
padding-right: 30px; padding-right: 30px;
@ -1446,7 +1645,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1457,7 +1656,7 @@ $alert-color: #101010;
.module-self-table { .module-self-table {
display: table; display: table;
border-top: 1px solid #4D4D4D; border-top: 1px solid #4d4d4d;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
.self-table-item { .self-table-item {
@ -1466,7 +1665,7 @@ $alert-color: #101010;
.self-item-th { .self-item-th {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
} }
.self-item-th { .self-item-th {
width: 60px; width: 60px;
@ -1494,7 +1693,7 @@ $alert-color: #101010;
.hexagonal-wrap { .hexagonal-wrap {
.hexagonal-item { .hexagonal-item {
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
} }
@ -1528,7 +1727,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1577,7 +1776,7 @@ $alert-color: #101010;
gap: 5px; gap: 5px;
min-height: 60px; min-height: 60px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.2);
span { span {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1609,7 +1808,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1674,10 +1873,10 @@ $alert-color: #101010;
height: 16px; height: 16px;
&.pink { &.pink {
border: 2px solid #ce1c9c; border: 2px solid #ce1c9c;
background-color: #16417D; background-color: #16417d;
} }
&.white { &.white {
border: 2px solid #FFF; border: 2px solid #fff;
background-color: #001027; background-color: #001027;
} }
} }
@ -1702,7 +1901,7 @@ $alert-color: #101010;
.react-colorful__pointer { .react-colorful__pointer {
width: 15px; width: 15px;
height: 15px; height: 15px;
border: 4px solid #Fff; border: 4px solid #fff;
} }
.react-colorful__saturation { .react-colorful__saturation {
border-radius: 2px; border-radius: 2px;
@ -1792,7 +1991,6 @@ $alert-color: #101010;
min-height: 80px; min-height: 80px;
background-color: #fff; background-color: #fff;
} }
} }
// 치수선 설정 // 치수선 설정
@ -1912,10 +2110,22 @@ $alert-color: #101010;
border-radius: 50%; border-radius: 50%;
} }
} }
&:nth-child(1){ top: 0; left: 0; } &:nth-child(1) {
&:nth-child(2){ top: 0; right: 0; } top: 0;
&:nth-child(3){ bottom: 0; left: 0; } left: 0;
&:nth-child(4){ bottom: 0; right: 0; } }
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
} }
.size-box { .size-box {
position: absolute; position: absolute;
@ -2008,13 +2218,13 @@ $alert-color: #101010;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -2024,7 +2234,6 @@ $alert-color: #101010;
&.tab2 { &.tab2 {
margin-top: 10px; margin-top: 10px;
gap: 15px; gap: 15px;
} }
.module-flex-item { .module-flex-item {
flex: 1; flex: 1;
@ -2033,7 +2242,7 @@ $alert-color: #101010;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
} }
.flex-item-btn-wrap { .flex-item-btn-wrap {
display: grid; display: grid;
@ -2090,7 +2299,7 @@ $alert-color: #101010;
} }
.reset-word { .reset-word {
font-size: 12px; font-size: 12px;
color: #FFCACA; color: #ffcaca;
font-weight: 400; font-weight: 400;
margin-top: 10px; margin-top: 10px;
} }

15
src/util/common-utils.js
View File

@ -134,3 +134,18 @@ export const getQueryString = (o) => {
.join('&') .join('&')
return `?${queryString}` return `?${queryString}`
} }
export const unescapeString = (str) => {
const regex = /&(amp|lt|gt|quot|#39);/g
const chars = {
'&amp;': '&',
'&lt;': '<',
'&gt;': '>',
'&quot;': '"',
'&#39;': "'",
}
if (regex.test(str)) {
return str.replace(regex, (matched) => chars[matched] || matched)
}
}