fix: 프로필 수정 자동 저장 로직 변경

Mallang-Trip · May 25, 2024 · 2681366 · 2681366
2 parents 951649a + cd8c7c9
commit 2681366
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/src/pages/AdminPage/User/DriverInfo/DriverDetail/index.jsx b/src/pages/AdminPage/User/DriverInfo/DriverDetail/index.jsx
@@ -27,6 +27,7 @@ function DriverDetail() {
   const [modifyVehicleImage, setModifyVehicleImage] = useState(false);
   const [newVehicleImage, setNewVehicleImage] = useState(undefined);
   const [showCompleteModal, setShowCompleteModal] = useState(false);
+  const [autoSave, setAutoSave] = useState(true);
   const [loading, setLoading] = useState(true);
   const driverId = searchParams.get("driverId");
 
@@ -92,6 +93,50 @@ function DriverDetail() {
     }
   };
 
+  const autoSaveHandler = async () => {
+    const profileImageURL = newProfileImage
+      ? await uploadImage(newProfileImage)
+      : driverInfo.profileImg;
+
+    const vehicleImageURL = newVehicleImage
+      ? await uploadImage(newVehicleImage)
+      : driverInfo.vehicleImg;
+
+    const body = {
+      accountHolder: driverInfo.accountHolder,
+      accountNumber: driverInfo.accountNumber,
+      bank: driverInfo.bank,
+      holidays: driverInfo.holidays,
+      introduction: driverInfo.introduction,
+      phoneNumber: driverInfo.phoneNumber,
+      prices: driverInfo.prices,
+      profileImg: profileImageURL,
+      region: driverInfo.region,
+      vehicleCapacity: driverInfo.vehicleCapacity,
+      vehicleImg: vehicleImageURL,
+      vehicleModel: driverInfo.vehicleModel,
+      vehicleNumber: driverInfo.vehicleNumber,
+      weeklyHolidays: driverInfo.weeklyHoliday,
+    };
+
+    try {
+      await putDriverInfoDetail(driverId, body);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    if (!modifyMode || !autoSave) return;
+    setAutoSave(false);
+    setTimeout(() => setAutoSave(true), 2000);
+  }, [newProfileImage, newVehicleImage, driverInfo]);
+
+  useEffect(() => {
+    if (!modifyMode || !autoSave) return;
+    autoSaveHandler();
+  }, [autoSave]);
+
   useEffect(() => {
     window.scrollTo({ top: 0 });
     getDriverInfoDetailFunc();
@@ -110,6 +155,7 @@ function DriverDetail() {
         profileImageHandler={profileImageHandler}
       />
       <ProfileHeader
+        autoSave={autoSave}
         driverInfo={driverInfo}
         modifyProfileHandler={modifyProfileHandler}
         modifyMode={modifyMode}

diff --git a/src/pages/MyProfilePage/DriverProfile/ProfileHeader/index.jsx b/src/pages/MyProfilePage/DriverProfile/ProfileHeader/index.jsx
@@ -15,7 +15,7 @@ function ProfileHeader({
         {modifyMode && (
           <p className="flex justify-center items-center mb-2 text-sm text-primary font-medium">
             {autoSave ? (
-              "임시 저장 완료"
+              "자동 저장 완료"
             ) : (
               <>
                 <svg
@@ -34,14 +34,14 @@ function ProfileHeader({
                     fill="currentFill"
                   />
                 </svg>
-                임시 저장 중...
+                자동 저장 중...
               </>
             )}
           </p>
         )}
         <EditButton
           onClick={modifyProfileHandler}
-          title={modifyMode ? "저장" : "프로필 수정"}
+          title={modifyMode ? "완료" : "프로필 수정"}
         />
       </div>
     </div>

diff --git a/src/pages/MyProfilePage/UserProfile/ProfileHeader/index.jsx b/src/pages/MyProfilePage/UserProfile/ProfileHeader/index.jsx
@@ -13,7 +13,7 @@ function ProfileHeader({ modifyMode, modifyProfileHandler, autoSave }) {
         {modifyMode && (
           <p className="flex justify-center items-center mb-2 text-sm text-primary font-medium">
             {autoSave ? (
-              "임시 저장 완료"
+              "자동 저장 완료"
             ) : (
               <>
                 <svg
@@ -32,14 +32,14 @@ function ProfileHeader({ modifyMode, modifyProfileHandler, autoSave }) {
                     fill="currentFill"
                   />
                 </svg>
-                임시 저장 중...
+                자동 저장 중...
               </>
             )}
           </p>
         )}
         <EditButton
           onClick={modifyProfileHandler}
-          title={modifyMode ? "저장" : "프로필 수정"}
+          title={modifyMode ? "완료" : "프로필 수정"}
         />
       </div>
     </div>