From c5700c62ccfab36ba2b31f66e2dab5f63bd9ab8a Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Thu, 4 Sep 2025 17:06:53 +0900
Subject: [PATCH 1/2] FlowLine contains an input of type text with both value
 and defaultValue props. Input elements must be either controlled or
 uncontrolled

---
 .../floor-plan/modal/movement/type/FlowLine.jsx           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/floor-plan/modal/movement/type/FlowLine.jsx b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
index 337ec50b..7c400fd4 100644
--- a/src/components/floor-plan/modal/movement/type/FlowLine.jsx
+++ b/src/components/floor-plan/modal/movement/type/FlowLine.jsx
@@ -12,11 +12,12 @@ export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
   const [filledInput, setFilledInput] = useState('')
+  const [pointerInput, setPointerInput] = useState('100')
   const currentObject = useRecoilValue(currentObjectState)
   const handleFocus = () => {
     if (currentObject === null) {
-      FLOW_LINE_REF.POINTER_INPUT_REF.current.value = ''
-      FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
+      setPointerInput('')
+      setFilledInput('')
       FLOW_LINE_REF.FILLED_INPUT_REF.current.blur()
     }
   }
@@ -35,7 +36,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
         <div className="outline-form">
           <span>{getMessage('modal.movement.flow.line.position')}</span>
           <div className="input-grid mr5">
-            <input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
+            <input type="text" className="input-origin block" value={pointerInput} readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />
           </div>
         </div>
         <div className="moving-tab-content">
@@ -71,7 +72,6 @@ export default function FlowLine({ FLOW_LINE_REF }) {
               <input
                 type="text"
                 className="input-origin block"
-                defaultValue={100}
                 ref={FLOW_LINE_REF.FILLED_INPUT_REF}
                 value={filledInput}
                 onFocus={handleFocus}

From 9999d1bae09d1b0019f6f65f6948602ef6e0e12c Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Thu, 4 Sep 2025 17:07:45 +0900
Subject: [PATCH 2/2] =?UTF-8?q?svg=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=95=B4=EC=83=81=EB=8F=84=20=EA=B2=BD=EA=B3=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/eavesGable/type/Eaves.jsx   | 12 +++++++++---
 .../floor-plan/modal/eavesGable/type/Gable.jsx   | 16 ++++++++++++----
 .../modal/eavesGable/type/WallMerge.jsx          | 12 +++++++++---
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
index f36fcc55..f9548dad 100644
--- a/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Eaves.jsx
@@ -66,7 +66,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -79,7 +81,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -105,7 +109,9 @@ export default function Eaves({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
index 999687fd..7dd21539 100644
--- a/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/Gable.jsx
@@ -37,7 +37,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -50,7 +52,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -74,7 +78,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -92,7 +98,9 @@ export default function Gable({ pitchRef, offsetRef, widthRef, radioTypeRef, pit
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
index 31cf3909..0ed01ede 100644
--- a/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
+++ b/src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx
@@ -23,7 +23,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -36,7 +38,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
-                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>
@@ -54,7 +58,9 @@ export default function WallMerge({ offsetRef, radioTypeRef }) {
             </div>
             <div className="eaves-keraba-td">
               <div className="eaves-keraba-ico ">
-                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
+                <div style={{ width: 30, height: 30, position: 'relative' }}>
+                  <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" fill style={{ objectFit: 'contain' }} />
+                </div>
               </div>
             </div>
           </div>