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

Merge branch 'dev' into dev-yj

Browse Source
This commit is contained in:
yjnoh 2024-10-21 15:42:59 +09:00
commit fd0fc1ed6e
6 changed files with 74 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,8 +6,6 @@ import { useCanvas } from '@/hooks/useCanvas'
import { useEvent } from '@/hooks/useEvent' import { useEvent } from '@/hooks/useEvent'
import QContextMenu from '@/components/common/context-menu/QContextMenu' import QContextMenu from '@/components/common/context-menu/QContextMenu'
import { useContextMenu } from '@/hooks/useContextMenu' import { useContextMenu } from '@/hooks/useContextMenu'
import { useRecoilValue } from 'recoil'
import { currentObjectState } from '@/store/canvasAtom'
export default function CanvasFrame({ plan }) { export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null) const canvasRef = useRef(null)
@ -35,12 +33,17 @@ export default function CanvasFrame({ plan }) {
return ( return (
<div className="canvas-frame flex justify-center"> <div className="canvas-frame flex justify-center">
<canvas ref={canvasRef} id={'canvas'}></canvas> <div className="canvas-container" style={{ position: 'relative' }}>
<canvas ref={canvasRef} id={'canvas'}></canvas>
</div>
<QContextMenu contextRef={canvasRef} canvasProps={canvas}> <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
{contextMenu.map((menus, index) => ( {contextMenu.map((menus, index) => (
<ul key={index}> <ul key={index}>
{menus.map((menu) => ( {menus.map((menu, idx) => (
<li onClick={(e) => setCurrentContextMenu(menu)}>{menu.name}</li> <li key={idx} onClick={(e) => setCurrentContextMenu(menu)}>
{menu.name}
</li>
))} ))}
</ul> </ul>
))} ))}

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

@ -9,7 +9,8 @@ import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom' import { globalLocaleStore } from '@/store/localeAtom'
import { SessionContext } from '@/app/SessionProvider' import { SessionContext } from '@/app/SessionProvider'
export default function CanvasLayout() { export default function CanvasLayout(props) {
const { menuNumber } = props
const { session } = useContext(SessionContext) const { session } = useContext(SessionContext)
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const globalLocaleState = useRecoilValue(globalLocaleStore) const globalLocaleState = useRecoilValue(globalLocaleStore)
@ -24,7 +25,7 @@ export default function CanvasLayout() {
return ( return (
<div className="canvas-layout"> <div className="canvas-layout">
<div className="canvas-page-list"> <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) => (
<button <button

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

@ -33,6 +33,8 @@ const canvasMenus = [
export default function CanvasMenu(props) { export default function CanvasMenu(props) {
const { const {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal, setShowCanvasSettingModal,
showOutlineModal, showOutlineModal,
setShowOutlineModal, setShowOutlineModal,
@ -53,7 +55,6 @@ export default function CanvasMenu(props) {
setShowPropertiesSettingModal, setShowPropertiesSettingModal,
} = props } = props
const [menuNumber, setMenuNumber] = useState(null)
const [type, setType] = useState('') const [type, setType] = useState('')
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)

58
src/components/floor-plan/FloorPlan.jsx
View File

@ -53,7 +53,7 @@ export default function FloorPlan() {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [menuNumber, setMenuNumber] = useState(null)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false) const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const [showGridCopyModal, setShowGridCopyModal] = useState(false) const [showGridCopyModal, setShowGridCopyModal] = useState(false)
const [showGridMoveModal, setShowGridMoveModal] = useState(false) const [showGridMoveModal, setShowGridMoveModal] = useState(false)
@ -70,6 +70,8 @@ export default function FloorPlan() {
} }
const modalProps = { const modalProps = {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal, setShowCanvasSettingModal,
showOutlineModal, showOutlineModal,
setShowOutlineModal, setShowOutlineModal,
@ -136,35 +138,33 @@ export default function FloorPlan() {
useEffect(() => {}, [showOutlineModal]) useEffect(() => {}, [showOutlineModal])
return ( return (
<> <div className="canvas-wrap">
<div className="canvas-wrap"> <CanvasMenu {...modalProps} />
<CanvasMenu {...modalProps} /> <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className="canvas-content"> <CanvasLayout menuNumber={menuNumber} setMenuNumber={setMenuNumber} />
<CanvasLayout /> {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />} {showOutlineModal && <WallLineSetting {...outlineProps} />}
{showOutlineModal && <WallLineSetting {...outlineProps} />} {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />} {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
{showColorPickerModal && <GridColorSetting {...gridColorProps} />} {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
{showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />} {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
{showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />} {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
{showRoofShapePassivitySettingModal && ( {showRoofShapePassivitySettingModal && (
<RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} /> <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
)} )}
{showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />} {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
{showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />} {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
{showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />} {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
{showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />} {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
{showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />} {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
{showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />} {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />} {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
{showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />} {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
{showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />} {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
{showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />} {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
{showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />} {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
</div>
</div> </div>
</> </div>
) )
} }

29
src/styles/_modal.scss
View File

@ -1655,24 +1655,33 @@ $alert-color: #101010;
.form-box{ .form-box{
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
padding: 10px 0 20px; padding: 10px 15px 20px;
.line-form{ .line-form{
position: relative; position: relative;
width: 102px; display: flex;
height: 40px; flex-direction: column;
justify-content: flex-end;
min-width: 102px;
min-height: 40px;
margin: 0 auto; margin: 0 auto;
border-left: 1px dashed #101010;
border-right: 1px dashed #101010; &::before{
.line-font-box{ content: '';
position: absolute; position: absolute;
bottom: -3px; bottom: 0px;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; height: 40px;
border-left: 1px dashed #101010;
border-right: 1px dashed #101010;
}
.line-font-box{
.font{ .font{
display: block; display: block;
padding-bottom: 6px; padding-bottom: 15px;
color: #101010; color: #101010;
text-align: center;
line-height: 1;
} }
.line{ .line{
position: relative; position: relative;
@ -1687,7 +1696,7 @@ $alert-color: #101010;
transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
left: 1px; left: 1px;
width: 9px; width: 9px;
height: 9px; height:+ 9px;
border: 1px solid; border: 1px solid;
border-color: inherit; border-color: inherit;
border-top: none; border-top: none;

18
src/styles/_submodal.scss
View File

@ -228,11 +228,19 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.design-request-grid{ .design-request-grid{
.design-request-grid-tit{ .design-request-count{
font-size: 13px; display: flex;
font-weight: 600; align-items: center;
color: #101010; margin-bottom: 10px;
margin-bottom: 15px; .design-request-grid-tit{
font-size: 13px;
font-weight: 600;
color: #101010;
}
.select-wrap{
margin-left: auto;
width: 80px;
}
} }
} }