From de9b53fff34f8aa0dfa357f982e85b0a7d824f44 Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Wed, 30 Oct 2024 18:07:14 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=B4=ED=98=95=EC=83=81=20=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementSurface/PlacementSurface.jsx     |  3 +-
 .../PlacementSurfaceSetting.jsx               | 70 +++++++++++--------
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
index d6d08675..f95f9c2f 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurface.jsx
@@ -49,7 +49,8 @@ const PlacementSurface = forwardRef((props, refs) => {
                 {lines?.map((line, index) => (
                   <div className="eaves-keraba-item" id={index} key={index}>
                     <div className="eaves-keraba-th">
-                      {line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}
+                      {/*{line.isDiagonal ? getMessage('modal.placement.surface.setting.diagonal.length') : num[index]}*/}
+                      {num[index]}
                     </div>
                     <div className="eaves-keraba-td">
                       <div className="outline-form">
diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
index d6666d5c..c22d2248 100644
--- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
+++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
@@ -241,7 +241,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
 
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
-      <div className={`modal-pop-wrap l-2`}>
+      <div className={`modal-pop-wrap lr-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -249,35 +249,45 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
           </button>
         </div>
         <div className="modal-body">
-          <div className="plane-shape-menu">
-            {types.map((type) => (
-              <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
-                <div className="shape-box">
-                  <Image
-                    src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
-                    alt="react"
-                    width={0}
-                    height={0}
-                    style={{
-                      width: 'auto',
-                      height: 'auto',
-                      transform: getInversionState(),
-                    }}
-                  />
-                </div>
-              </button>
-            ))}
-          </div>
-          <div className="shape-library">
-            <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
-            <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
-            <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
-          </div>
-          <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={applySurfaces}>
-              {getMessage('write')}
-            </button>
+          <div className="plane-frame-wrap">
+            <div className="plane-shape-wrap">
+              <div className="plane-shape-menu">
+                {types.map((type) => (
+                  <button
+                    key={type.id}
+                    className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
+                    onClick={() => setSelectedType(type)}
+                  >
+                    <div className="shape-box">
+                      <Image
+                        src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
+                        alt="react"
+                        width={0}
+                        height={0}
+                        style={{
+                          width: 'auto',
+                          height: 'auto',
+                          transform: getInversionState(),
+                        }}
+                      />
+                    </div>
+                  </button>
+                ))}
+              </div>
+              <div className="shape-library">
+                <button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
+                <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
+                <button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button>
+              </div>
+            </div>
+            <div className="plane-detail-wrap">
+              <PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
+              <div className="plane-shape-btn">
+                <button className="btn-frame modal act" onClick={applySurfaces}>
+                  {getMessage('write')}
+                </button>
+              </div>
+            </div>
           </div>
         </div>
       </div>