style: 조사매물 주소 초기화 버튼 추가

src/components/survey-sale/detail/BasicForm.tsx

@@ -30,6 +30,15 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
     resetAddressData()
   }, [addressData])
 
+  const handleAddressInitiate = () => {
+    setBasicInfo({
+      ...basicInfo,
+      postCode: null,
+      address: null,
+      addressDetail: null,
+    })
+  }
+
   return (
     <>
       <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
@@ -87,12 +96,12 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                       id="investigationDate"
                       type="date"
                       className="date-frame"
-                      defaultValue={basicInfo?.investigationDate?.toString()}
+                      value={basicInfo?.investigationDate?.toString()}
                       onChange={(e) => setBasicInfo({ ...basicInfo, investigationDate: e.target.value })}
                     />
                   </div>
                 ) : (
-                  <input type="text" className="input-frame" readOnly defaultValue={basicInfo?.investigationDate?.toString()} />
+                  <input type="text" className="input-frame" readOnly value={basicInfo?.investigationDate?.toString() ?? ''} />
                 )}
               </div>
               <div className="data-input-form-bx">
@@ -102,7 +111,7 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                   type="text"
                   className="input-frame"
                   readOnly={mode === 'READ'}
-                  defaultValue={basicInfo?.buildingName ?? ''}
+                  value={basicInfo?.buildingName ?? ''}
                   onChange={(e) => setBasicInfo({ ...basicInfo, buildingName: e.target.value })}
                 />
               </div>
@@ -113,7 +122,7 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                   type="text"
                   className="input-frame"
                   readOnly={mode === 'READ'}
-                  defaultValue={basicInfo?.customerName ?? ''}
+                  value={basicInfo?.customerName ?? ''}
                   onChange={(e) => setBasicInfo({ ...basicInfo, customerName: e.target.value })}
                 />
               </div>
@@ -122,26 +131,39 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                 <div className="form-flex">
                   {/* 우편번호 */}
                   <div className="form-bx">
-                    <input type="text" className="input-frame" readOnly={true} defaultValue={basicInfo?.postCode ?? ''} />
+                    <input type="text" className="input-frame" readOnly={true} value={basicInfo?.postCode ?? ''} />
                   </div>
                   {/* 도도부현 */}
                   <div className="form-bx">
-                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.address ?? ''} />
+                    <input
+                      type="text"
+                      className="input-frame"
+                      readOnly={mode === 'READ'}
+                      value={basicInfo?.address ?? ''}
+                      onChange={(e) => setBasicInfo({ ...basicInfo, address: e.target.value })}
+                    />
                   </div>
                 </div>
                 {/* 주소 */}
                 {mode !== 'READ' && (
-                  <div className="form-btn">
+                  <div className="form-flex mt5">
                     <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
                       郵便番号<i className="btn-arr"></i>
                     </button>
+                    <button className="btn-frame red reset" onClick={() => handleAddressInitiate()}></button>
                   </div>
                 )}
               </div>
 
               <div className="data-input-form-bx">
                 <div className="data-input-form-tit">市区町村名, 以後の住所</div>
-                <input type="text" className="input-frame" defaultValue={basicInfo?.addressDetail ?? ''} readOnly={mode === 'READ'} />
+                <input
+                  type="text"
+                  className="input-frame"
+                  value={basicInfo?.addressDetail ?? ''}
+                  readOnly={mode === 'READ'}
+                  onChange={(e) => setBasicInfo({ ...basicInfo, addressDetail: e.target.value })}
+                />
               </div>
             </div>
           </div>

src/styles/components/_sub.scss

@@ -688,4 +688,14 @@
       width: 100%;
     }
   }
+}
+.form-flex {
+  .reset {
+    flex: none;
+    width: 40px;
+    background-image: url(/assets/images/sub/refresh.png);
+    background-size: 24px 24px;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
 }