diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index 9e402a71..67c4cdf3 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -29,6 +29,8 @@ export default function DotLineGrid(props) {
   const { SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, setSettingModalGridOptions, setDotLineGridSettingState } =
     useCanvasSetting()
 
+  const [copyCurrentSetting, setCopyCurrentSetting] = useState({ ...currentSetting })
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('DotLineGrid useEffect 실행')
@@ -57,7 +59,7 @@ export default function DotLineGrid(props) {
 
   const handleCheckBoxChange = (e) => {
     const { value, checked } = e.target
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         [value]: checked,
@@ -66,23 +68,23 @@ export default function DotLineGrid(props) {
   }
 
   const handleSave = async () => {
-    if (!currentSetting.DOT && !currentSetting.LINE) {
+    /*if (!currentSetting.DOT && !currentSetting.LINE) {
       swalFire({ text: '배치할 그리드를 설정해주세요.' })
       return
-    }
+    }*/
 
     setDotLineGridSettingState((prev) => {
       return {
         ...prev,
         INTERVAL: {
-          type: currentSetting.INTERVAL.type,
-          horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-          verticalInterval: currentSetting.INTERVAL.verticalInterval,
-          ratioInterval: currentSetting.INTERVAL.ratioInterval,
-          dimension: currentSetting.INTERVAL.dimension,
+          type: copyCurrentSetting.INTERVAL.type,
+          horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
+          verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
+          ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
+          dimension: copyCurrentSetting.INTERVAL.dimension,
         },
-        DOT: currentSetting.DOT,
-        LINE: currentSetting.LINE,
+        DOT: copyCurrentSetting.DOT,
+        LINE: copyCurrentSetting.LINE,
       }
       //setDotLineGridSettingState({ ...currentSetting })
     })
@@ -90,16 +92,18 @@ export default function DotLineGrid(props) {
     setSettingsData({
       ...settingsData,
       INTERVAL: {
-        type: currentSetting.INTERVAL.type,
-        horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-        verticalInterval: currentSetting.INTERVAL.verticalInterval,
-        ratioInterval: currentSetting.INTERVAL.ratioInterval,
-        dimension: currentSetting.INTERVAL.dimension,
+        type: copyCurrentSetting.INTERVAL.type,
+        horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
+        verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
+        ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
+        dimension: copyCurrentSetting.INTERVAL.dimension,
       },
-      DOT: currentSetting.DOT,
-      LINE: currentSetting.LINE,
+      DOT: copyCurrentSetting.DOT,
+      LINE: copyCurrentSetting.LINE,
     })
 
+    setCurrentSetting({ ...copyCurrentSetting })
+
     setIsShow(false)
     closePopup(id, isConfig)
   }
@@ -107,7 +111,7 @@ export default function DotLineGrid(props) {
   const handleRadioChange = (e) => {
     const { value, name, checked, selected } = e.target
 
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -120,7 +124,7 @@ export default function DotLineGrid(props) {
 
   const changeInput = (value, e) => {
     const { name } = e.target
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -133,7 +137,7 @@ export default function DotLineGrid(props) {
 
   const changeDimension = (result) => {
     const { value } = result
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -146,7 +150,7 @@ export default function DotLineGrid(props) {
 
   // 초기화
   const reset = () => {
-    canvas
+    /*canvas
       ?.getObjects()
       .filter((obj) => obj.name === 'lineGrid')
       .forEach((obj) => canvas?.remove(obj))
@@ -154,9 +158,9 @@ export default function DotLineGrid(props) {
       ?.getObjects()
       .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
-
+*/
     // resetDotLineGridSetting()
-    setCurrentSetting({
+    setCopyCurrentSetting({
       INTERVAL: {
         type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
         ratioInterval: 910,
@@ -188,11 +192,11 @@ export default function DotLineGrid(props) {
         <div className="modal-body">
           <div className="grid-check-form">
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={currentSetting.DOT} />
+              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={copyCurrentSetting.DOT} />
               <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
             </div>
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={currentSetting.LINE} />
+              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={copyCurrentSetting.LINE} />
               <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
             </div>
           </div>
@@ -205,8 +209,8 @@ export default function DotLineGrid(props) {
                   id="ra01"
                   value={1}
                   onChange={handleRadioChange}
-                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 1}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
+                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
                 />
                 <label htmlFor="ra01"></label>
               </div>
@@ -217,7 +221,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`horizontalInterval`}
-                    value={currentSetting.INTERVAL.horizontalInterval}
+                    value={copyCurrentSetting.INTERVAL.horizontalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -230,7 +234,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`verticalInterval`}
-                    value={currentSetting.INTERVAL.verticalInterval}
+                    value={copyCurrentSetting.INTERVAL.verticalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -245,8 +249,8 @@ export default function DotLineGrid(props) {
                   id="ra02"
                   value={2}
                   onChange={handleRadioChange}
-                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 2}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
+                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
                 />
                 <label htmlFor="ra02"></label>
               </div>
@@ -257,14 +261,21 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`ratioInterval`}
-                    value={currentSetting.INTERVAL.ratioInterval}
+                    value={copyCurrentSetting.INTERVAL.ratioInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
                 <span>mm</span>
               </div>
               <div className="grid-select">
-                <QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
+                <QSelectBox
+                  options={SelectOptions}
+                  onChange={changeDimension}
+                  value={selectOption}
+                  showKey={'name'}
+                  targetKey={'id'}
+                  sourceKey={'id'}
+                />
               </div>
             </div>
           </div>
diff --git a/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx b/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
index e7d9718d..8773ec32 100644
--- a/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
+++ b/src/components/floor-plan/modal/roofShape/passivity/Gable.jsx
@@ -7,15 +7,6 @@ export default function Gable({ offsetRef, pitchRef, pitchText }) {
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   return (
     <>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('slope')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
-        </div>
-        <span className="thin">{pitchText}</span>
-      </div>
       <div className="outline-form mb10">
         <span className="mr10" style={{ width: '63px' }}>
           {getMessage('gable.offset')}