fix: Change driver license image name

Mallang-Trip · Feb 12, 2025 · e019731 · e019731
2 parents ad2587b + 4627695
commit e019731
Show file tree

Hide file tree

Showing 14 changed files with 430 additions and 62 deletions.
diff --git a/src/components/PartyPlan/PlanBox/index.tsx b/src/components/PartyPlan/PlanBox/index.tsx
@@ -1,20 +1,23 @@
+import { formatNegativeHour } from "@/utils";
 import { memo } from "react";
 
 interface Props {
   index: number;
   name: string;
   time: string | boolean;
+  lat?: number;
 }
 
-function PlanBox({ index, name, time }: Props) {
+function PlanBox({ index, name, time, lat }: Props) {
+  const restTime = name === "휴식" && formatNegativeHour(lat || 0);
   return (
     <div className="relative w-full h-16 md:h-[83px] mb-6 rounded-full bg-skyblue font-bold">
       <div className="w-10 h-10 md:w-14 md:h-14 absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-primary text-white text-lg flex justify-center items-center">
         {index}
       </div>
       <div className="h-full flex justify-between ml-16 md:ml-24 mr-5 md:mr-10 text-boldblue text-md md:text-xl items-center">
         <div>{name}</div>
-        <div>{time}</div>
+        <div>{name === "휴식" ? restTime : time}</div>
       </div>
     </div>
   );

diff --git a/src/components/PartyPlan/index.tsx b/src/components/PartyPlan/index.tsx
@@ -41,6 +41,7 @@ function PartyPlan({ edit, startDate, course, editHandler, comment }: Props) {
               ? course.days[0].startTime
               : index === planData.length - 1 && course.days[0].endTime
           }
+          lat={item.lat}
         />
       ))}
       {edit && (

diff --git a/src/pages/AdminPage/User/DriverInfo/DriverCourse/index.tsx b/src/pages/AdminPage/User/DriverInfo/DriverCourse/index.tsx
@@ -252,7 +252,9 @@ function DriverCourse() {
           setDestinations={setDestinations}
           startTime={startTime}
           endTime={endTime}
+          setEndTime={setEndTime}
           setStartTime={setStartTime}
+          baseTime={prices[priceIndex].hours || 0}
         />
         <EditMap
           courseData={destinations}

diff --git a/src/pages/AdminPage/User/DriverInfo/DriverDetail/index.tsx b/src/pages/AdminPage/User/DriverInfo/DriverDetail/index.tsx
@@ -1,4 +1,12 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  memo,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useSearchParams } from "react-router-dom";
 import { uploadImage } from "@/api/image";
 import { getDriverInfoDetail, putDriverInfoDetail } from "@/api/admin";
@@ -16,7 +24,9 @@ import PartyCourse from "./PartyCourse";
 function DriverDetail() {
   const profileImageRef = useRef<HTMLInputElement | null>(null);
   const vehicleImageRef = useRef<HTMLInputElement | null>(null);
-  const licenceImgRef = useRef<HTMLInputElement | null>(null);
+  const driverLicenseImgRef = useRef<HTMLInputElement | null>(null);
+  const insuranceLicenseImgRef = useRef<HTMLInputElement | null>(null);
+  const taxiLicenseImgRef = useRef<HTMLInputElement | null>(null);
   const [searchParams] = useSearchParams();
   const driverId = searchParams.get("driverId");
   const [modifyMode, setModifyMode] = useState(false);
@@ -35,17 +45,17 @@ function DriverDetail() {
     accountNumber: "",
     bank: "",
     courses: [],
-    driverLicenceImg: "",
+    driverLicenseImg: "",
     holidays: [],
-    insuranceLicenceImg: "",
+    insuranceLicenseImg: "",
     introduction: "",
     name: "",
     phoneNumber: "",
     prices: [],
     profileImg: null,
     region: [],
     status: "",
-    taxiLicenceImg: "",
+    taxiLicenseImg: "",
     userId: 0,
     vehicleCapacity: 0,
     vehicleImgs: [],
@@ -69,7 +79,7 @@ function DriverDetail() {
   }, [vehicleImageRef]);
 
   const modifyLicenceHandler = useCallback(
-    async (key: string) => {
+    async (key: string, licenceImgRef: RefObject<HTMLInputElement>) => {
       if (licenceImgRef.current && licenceImgRef.current.files) {
         const imageFile = licenceImgRef.current.files[0];
         const licenceImageURL = await uploadImage(imageFile);
@@ -79,7 +89,7 @@ function DriverDetail() {
         }));
       }
     },
-    [licenceImgRef]
+    []
   );
 
   const modifyProfileHandler = useCallback(async () => {
@@ -114,9 +124,9 @@ function DriverDetail() {
       vehicleModel: driverInfo.vehicleModel,
       vehicleNumber: driverInfo.vehicleNumber,
       weeklyHolidays: driverInfo.weeklyHoliday,
-      driverLicenceImg: driverInfo.driverLicenceImg,
-      taxiLicenceImg: driverInfo.taxiLicenceImg,
-      insuranceLicenceImg: driverInfo.insuranceLicenceImg,
+      driverLicenseImg: driverInfo.driverLicenseImg,
+      taxiLicenseImg: driverInfo.taxiLicenseImg,
+      insuranceLicenseImg: driverInfo.insuranceLicenseImg,
     };
 
     try {
@@ -174,9 +184,9 @@ function DriverDetail() {
       vehicleModel: driverInfo.vehicleModel,
       vehicleNumber: driverInfo.vehicleNumber,
       weeklyHolidays: driverInfo.weeklyHoliday,
-      driverLicenceImg: driverInfo.driverLicenceImg,
-      taxiLicenceImg: driverInfo.taxiLicenceImg,
-      insuranceLicenceImg: driverInfo.insuranceLicenceImg,
+      driverLicenseImg: driverInfo.driverLicenseImg,
+      taxiLicenseImg: driverInfo.taxiLicenseImg,
+      insuranceLicenseImg: driverInfo.insuranceLicenseImg,
     };
 
     try {
@@ -202,25 +212,37 @@ function DriverDetail() {
     getDriverInfoDetailFunc();
   }, [driverId]);
 
-  const licenceImgs = useMemo(() => {
-    const driverLicenceImg = driverInfo.driverLicenceImg;
-    const taxiLicenceImg = driverInfo.taxiLicenceImg;
-    const insuranceLicenceImg = driverInfo.insuranceLicenceImg;
+  const licenseImgs = useMemo(() => {
+    const driverLicenseImg = driverInfo.driverLicenseImg;
+    const taxiLicenseImg = driverInfo.taxiLicenseImg;
+    const insuranceLicenseImg = driverInfo.insuranceLicenseImg;
 
     return [
-      { key: "driverLicenceImg", value: driverLicenceImg, name: "운전 면허증" },
       {
-        key: "taxiLicenceImg",
-        value: taxiLicenceImg,
+        key: "driverLicenseImg",
+        value: driverLicenseImg ?? "",
+        name: "운전 면허증",
+        ref: driverLicenseImgRef,
+      },
+      {
+        key: "taxiLicenseImg",
+        value: taxiLicenseImg ?? "",
         name: "택시 운전 면허증",
+        ref: taxiLicenseImgRef,
       },
       {
-        key: "insuranceLicenceImg",
-        value: insuranceLicenceImg,
+        key: "insuranceLicenseImg",
+        value: insuranceLicenseImg ?? "",
         name: "보험증서",
+        ref: insuranceLicenseImgRef,
       },
     ];
-  }, [driverInfo]);
+  }, [
+    driverInfo,
+    driverLicenseImgRef,
+    insuranceLicenseImgRef,
+    taxiLicenseImgRef,
+  ]);
 
   if (loading) return <Loading full={true} />;
   return (
@@ -267,8 +289,7 @@ function DriverDetail() {
       <PartyCourse driverInfo={driverInfo} />
       <License
         modifyMode={modifyMode}
-        licenseImgs={licenceImgs}
-        licenseImgRef={licenceImgRef}
+        licenseImgs={licenseImgs}
         modifyLicenseHandler={modifyLicenceHandler}
       />
       <ConfirmModal

diff --git a/src/pages/DriverCoursePage/CourseDnD/index.tsx b/src/pages/DriverCoursePage/CourseDnD/index.tsx
@@ -5,6 +5,9 @@ import dragIcon from "@/assets/svg/dragIcon.svg";
 import deleteIcon from "@/assets/svg/x-modal-icon.svg";
 import TimeModal from "./TimeModal";
 import clsx from "clsx";
+import { postNewDestinationUser } from "@/api/destination";
+import { calculateEndTime, formatNegativeHour } from "@/utils";
+import RestTimeModal from "@/pages/PartyPage/CourseDnD/RestTimeModal";
 
 interface DestinationImage extends Destination {
   image?: string | File;
@@ -19,6 +22,8 @@ interface Props {
   startTime: string;
   endTime: string;
   setStartTime: Dispatch<SetStateAction<string>>;
+  setEndTime: React.Dispatch<React.SetStateAction<string>>;
+  baseTime: number;
 }
 
 function CourseDnD({
@@ -30,14 +35,30 @@ function CourseDnD({
   startTime,
   endTime,
   setStartTime,
+  setEndTime,
+  baseTime,
 }: Props) {
   const [showTimeModal, setShowTimeModal] = useState(false);
+  const [showRestTimeModal, setShowRestTimeModal] = useState(false);
 
   const handleChange = useCallback(
     (result: any) => {
       if (!result.destination) return;
       const items = [...destinations];
       const [reorderedItem] = items.splice(result.source.index, 1);
+
+      const isGoingToLastIndex =
+        result.destination.index === destinations.length - 1 ||
+        result.destination.index === items.length;
+
+      const isGoingToFirstIndex = result.destination.index === 0;
+
+      if (
+        reorderedItem.name === "휴식" &&
+        (isGoingToLastIndex || isGoingToFirstIndex)
+      )
+        return;
+
       items.splice(result.destination.index, 0, reorderedItem);
       setDestinations(items);
     },
@@ -51,6 +72,58 @@ function CourseDnD({
     [destinations]
   );
 
+  const addRestHandler = useCallback(() => {
+    const originCourseData = destinations.filter(
+      (_, index) => index !== destinations.length - 1
+    );
+    const lastCourseData = destinations.filter(
+      (_, index) => index === destinations.length - 1
+    );
+
+    const updateCourseData = [
+      ...originCourseData,
+      {
+        address: "",
+        destinationId: -1,
+        lat: 0,
+        lon: 0,
+        name: "휴식",
+      },
+      ...lastCourseData,
+    ];
+
+    setDestinations(updateCourseData);
+    setShowRestTimeModal(true);
+  }, [destinations]);
+
+  const cancelRestHandler = () => {
+    const newCourseData = destinations.filter(
+      (item) => item.destinationId !== -1
+    );
+    setDestinations(newCourseData);
+    setShowRestTimeModal(false);
+  };
+
+  const addRestTimeHandler = async (time: number) => {
+    const result = await postNewDestinationUser({
+      address: "휴식",
+      content: "휴식",
+      images: [""],
+      lat: -time,
+      lon: 0,
+      name: "휴식",
+    });
+
+    const newCourseData = destinations.map((item) =>
+      item.destinationId === -1
+        ? { ...item, destinationId: result.payload.destinationId, lat: -time }
+        : item
+    );
+
+    setDestinations(newCourseData);
+    setEndTime(calculateEndTime(startTime, baseTime, time));
+  };
+
   return (
     <>
       <div className="mt-20 font-bold flex flex-col items-center gap-6">
@@ -61,7 +134,17 @@ function CourseDnD({
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-        <div className="text-primary text-xl">{`${hours}시간`}</div>
+        <div className="relative flex items-center justify-center md:w-[900px]">
+          <p className="text-primary text-lg">{`${hours}시간`}</p>
+          {destinations.length > 1 && (
+            <button
+              className="absolute top-1/2 right-0 -translate-y-1/2 text-gray-400 underline font-medium"
+              onClick={addRestHandler}
+            >
+              휴식 추가
+            </button>
+          )}
+        </div>
       </div>
       <DragDropContext onDragEnd={handleChange}>
         <Droppable droppableId="courselists">
@@ -97,13 +180,21 @@ function CourseDnD({
                         <div
                           className={clsx(
                             "ml-auto",
-                            index === 0 && "cursor-pointer hover:font-bold"
+                            item.name !== "휴식" &&
+                              index === 0 &&
+                              "cursor-pointer hover:font-bold"
                           )}
-                          onClick={() => index === 0 && setShowTimeModal(true)}
+                          onClick={() =>
+                            item.name !== "휴식" &&
+                            index === 0 &&
+                            setShowTimeModal(true)
+                          }
                         >
-                          {index === 0
-                            ? startTime
-                            : index === destinations.length - 1 && endTime}
+                          {item.name !== "휴식"
+                            ? index === 0
+                              ? startTime
+                              : index === destinations.length - 1 && endTime
+                            : formatNegativeHour(item.lat)}
                         </div>
                         <button
                           className="mx-3 rounded hover:bg-gray-200"
@@ -128,6 +219,12 @@ function CourseDnD({
         startTime={startTime}
         setStartTime={setStartTime}
       />
+      <RestTimeModal
+        showModal={showRestTimeModal}
+        setShowModal={setShowRestTimeModal}
+        onConfirm={addRestTimeHandler}
+        onCancel={cancelRestHandler}
+      />
     </>
   );
 }

diff --git a/src/pages/DriverCoursePage/index.tsx b/src/pages/DriverCoursePage/index.tsx
@@ -237,7 +237,9 @@ function DriverCoursePage() {
         setDestinations={setDestinations}
         startTime={startTime}
         endTime={endTime}
+        setEndTime={setEndTime}
         setStartTime={setStartTime}
+        baseTime={prices[priceIndex].hours || 0}
       />
       <EditMap
         courseData={destinations}

diff --git a/src/pages/MyProfilePage/DriverProfile/License/LicensePicture/index.tsx b/src/pages/MyProfilePage/DriverProfile/License/LicensePicture/index.tsx
@@ -1,13 +1,16 @@
-import { ForwardedRef, memo, useCallback, useState } from "react";
+import { RefObject, memo, useCallback, useState } from "react";
 import { InputImage } from "@/components";
 
 interface Props {
   modifyMode: boolean;
-  licenseImgRef: ForwardedRef<HTMLInputElement>;
+  licenseImgRef: RefObject<HTMLInputElement>;
   image: string;
   name: string;
   keyValue: string;
-  modifyLicenseHandler: (key: string) => void;
+  modifyLicenseHandler: (
+    key: string,
+    licenceImgRef: RefObject<HTMLInputElement>
+  ) => void;
 }
 
 function LicensePicture({
@@ -50,7 +53,7 @@ function LicensePicture({
           inputRef={licenseImgRef}
           className="hidden"
           id="licenseImage_Input"
-          onChange={() => modifyLicenseHandler(keyValue)}
+          onChange={() => modifyLicenseHandler(keyValue, licenseImgRef)}
         />
       </div>
       <p className="text-center text-darkgray text-sm mt-1 font-medium">