Merge branch 'dev' into dev-yj

src/components/floor-plan/CanvasFrame.jsx

@@ -6,8 +6,6 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { useRecoilValue } from 'recoil'
-import { currentObjectState } from '@/store/canvasAtom'
 
 export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
@@ -35,12 +33,17 @@ export default function CanvasFrame({ plan }) {
 
   return (
     <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}>
         {contextMenu.map((menus, index) => (
           <ul key={index}>
-            {menus.map((menu) => (
-              <li onClick={(e) => setCurrentContextMenu(menu)}>{menu.name}</li>
+            {menus.map((menu, idx) => (
+              <li key={idx} onClick={(e) => setCurrentContextMenu(menu)}>
+                {menu.name}
+              </li>
             ))}
           </ul>
         ))}

src/components/floor-plan/CanvasLayout.jsx

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

src/components/floor-plan/CanvasMenu.jsx

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

src/components/floor-plan/FloorPlan.jsx

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

src/styles/_modal.scss

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

src/styles/_submodal.scss

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