Merge pull request 'feature/survey : 조사매물 작성 폼 수정 및 스타일 변경' (#115) from feature/survey into dev

Reviewed-on: #115

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' : ''}`}>
@@ -53,7 +62,7 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                 />
               </div>
               {/* 페이지 모드 별, 권한 별 판매점, 시공점 입력 여부 처리 */}
-              {mode !== 'READ' &&
+              {mode === 'CREATE' &&
                 (session?.role === 'Builder' ? (
                   <>
                     {storeInput(basicInfo, setBasicInfo, mode)}
@@ -64,10 +73,11 @@ export default function BasicForm({ basicInfo, setBasicInfo, mode, session }: Ba
                 ) : (
                   <>{storeInput(basicInfo, setBasicInfo, mode)}</>
                 ))}
-              {mode === 'READ' && (
+              {(mode === 'READ' || mode === 'EDIT') && (
                 <>
                   {basicInfo?.store && storeInput(basicInfo, setBasicInfo, mode)}
-                  {basicInfo?.constructionPoint && builderInput(basicInfo, setBasicInfo, mode, session)}
+                  {(basicInfo?.constructionPoint || (session?.role === 'Builder' && mode === 'EDIT')) &&
+                    builderInput(basicInfo, setBasicInfo, mode, session)}
                 </>
               )}
             </div>
@@ -86,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">
@@ -101,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>
@@ -112,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>
@@ -121,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/components/survey-sale/detail/ButtonForm.tsx

@@ -87,6 +87,7 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
       case 'Admin_Sub':
         return session.storeId === basicData.storeId && session.builderId === basicData.constructionPointId
       case 'Builder':
+        return session.builderId ? session.builderId === basicData.constructionPointId : session.userId === basicData.representativeId
       case 'Partner':
         return session.builderId === basicData.constructionPointId
       default:

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

@@ -87,7 +87,7 @@ export default function DetailForm() {
     store: session?.storeNm ?? null,
     storeId: session?.storeId ?? null,
     constructionPoint: session?.builderNm ?? null,
-    constructionPointId: session?.builderId ?? null,
+    constructionPointId: session.role === 'Builder' ? (session.builderId ? session.builderId : '') : session.builderId ?? null,
   }))
   const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
 
@@ -109,7 +109,7 @@ export default function DetailForm() {
       store: session.storeNm ?? null,
       storeId: session.storeId ?? null,
       constructionPoint: session.builderNm ?? null,
-      constructionPointId: session.builderId ?? null,
+      constructionPointId: session.role === 'Builder' ? (session.builderId ? session.builderId : '') : session.builderId ?? null,
     }))
   }, [session?.isLoggedIn])
 

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;
+  }
 }