From 4f47eae1a4bbcdf5caa8b2e0ba154ff228d6a184 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Mon, 21 Oct 2024 14:47:38 +0900
Subject: [PATCH 1/3] fix: add key prop map syntax

---
 src/components/floor-plan/CanvasFrame.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index d6a4e179..50e2e28c 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -39,8 +39,10 @@ export default function CanvasFrame({ plan }) {
       <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>
         ))}

From faf733da925ecf74473373850672c9586e045905 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 21 Oct 2024 15:30:43 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_modal.scss    | 29 +++++++++++++++++++----------
 src/styles/_submodal.scss | 18 +++++++++++++-----
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 3901ba0f..9dc39b65 100644
--- a/src/styles/_modal.scss
+++ b/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;
diff --git a/src/styles/_submodal.scss b/src/styles/_submodal.scss
index 5b18f74a..e5fae9fb 100644
--- a/src/styles/_submodal.scss
+++ b/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;
+        }
     }
 }
 

From fa2231d5b0dbbcc5e1a32033488b2b4bd6358eaf Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 21 Oct 2024 15:31:01 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=EB=A7=88=ED=81=AC=EC=97=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx  |  7 +--
 src/components/floor-plan/CanvasLayout.jsx |  5 +-
 src/components/floor-plan/CanvasMenu.jsx   |  3 +-
 src/components/floor-plan/FloorPlan.jsx    | 58 +++++++++++-----------
 4 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index d6a4e179..bbf6c4ea 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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,7 +33,10 @@ 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}>
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 405d5106..d10b103c 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/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
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index c0cd09e5..b14ff216 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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)
diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx
index b8ea7784..a5b7ea41 100644
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/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>
   )
 }