deploy: 드라이버 여러 지역 활동 & 회원가입 나이 제한 (#130)

드라이버 여러 지역 활동 & 회원가입 나이 제한
Mallang-Trip · Jul 10, 2024 · 0f02b06 · 0f02b06
2 parents 438127f + 307f46a
commit 0f02b06
Show file tree

Hide file tree

Showing 35 changed files with 224 additions and 121 deletions.
diff --git a/src/api/region.js b/src/api/region.js
@@ -1,15 +1,15 @@
 import { GET, POST, PUT, DELETE } from "../utils/axios";
 
-export const getPartyRegionList = async () => await GET("/party/region");
+export const getPartyRegionList = async () => await GET("/region");
 
 export const postNewPartyRegion = async (body) =>
   await POST("/region", body, true);
 
-export const putPartyRegion = async (partyRegionId, body) =>
-  await PUT(`/region/${partyRegionId}`, body, true);
+export const putPartyRegion = async (regionId, body) =>
+  await PUT(`/region/${regionId}`, body, true);
 
-export const deletePartyRegion = async (partyRegionId) =>
-  await DELETE(`/region/${partyRegionId}`, true);
+export const deletePartyRegion = async (regionId) =>
+  await DELETE(`/region/${regionId}`, true);
 
-export const getPartyRegionDriverList = async (partyRegionId) =>
-  await GET(`/region/${partyRegionId}`, true);
+export const getPartyRegionDriverList = async (regionId) =>
+  await GET(`/region/driver/${regionId}`, true);
diff --git a/src/pages/AdminPage/Management/Region/RegionList/EditFormModal/index.jsx b/src/pages/AdminPage/Management/Region/RegionList/EditFormModal/index.jsx
@@ -24,8 +24,8 @@ function EditFormModal({
           ? regionImg
           : await uploadImage(regionImg);
       const body = {
-        region: region,
-        regionImg: regionImgURL,
+        name: region,
+        image: regionImgURL,
       };
 
       await putPartyRegion(editTarget.partyRegionId, body);

diff --git a/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.jsx b/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.jsx
@@ -16,8 +16,8 @@ function FormModal({ showModal, setShowModal, getPartyRegionListFunc }) {
     try {
       const regionImgURL = await uploadImage(regionImg);
       const body = {
-        region: region,
-        regionImg: regionImgURL,
+        name: region,
+        image: regionImgURL,
       };
 
       await postNewPartyRegion(body);

diff --git a/src/pages/AdminPage/Management/Region/RegionList/RegionItem/index.jsx b/src/pages/AdminPage/Management/Region/RegionList/RegionItem/index.jsx
@@ -3,9 +3,9 @@ import { useNavigate } from "react-router-dom";
 import { deletePartyRegion } from "../../../../../../api/region";
 
 function RegionItem({
-  partyRegionId,
-  regionImg,
-  region,
+  regionId,
+  image,
+  name,
   setEditTarget,
   setShowEditModal,
   getPartyRegionListFunc,
@@ -16,7 +16,7 @@ function RegionItem({
 
   const deleteHandler = async () => {
     try {
-      const result = await deletePartyRegion(partyRegionId);
+      const result = await deletePartyRegion(regionId);
       if (result.statusCode === 409) return setShowDeleteErrorModal(true);
       alert("성공적으로 지역을 삭제했습니다.");
       getPartyRegionListFunc();
@@ -33,21 +33,21 @@ function RegionItem({
     >
       <img
         className="absolute top-0 left-0 object-cover object-center w-full h-full overflow-hidden rounded-lg"
-        src={regionImg}
-        alt={region}
+        src={image}
+        alt={name}
       />
       {!isHover ? (
         <div className="absolute top-0 left-0 flex items-center justify-center w-full h-full text-xl text-white font-bold">
-          {region}
+          {name}
         </div>
       ) : (
         <div className="absolute top-0 left-0 flex flex-col items-center justify-around w-full h-full rounded-lg bg-black/30">
-          <p className="text-xl text-white font-bold">{region}</p>
+          <p className="text-xl text-white font-bold">{name}</p>
           <button
             className="px-4 py-1 text-sm text-white bg-primary rounded-full"
             onClick={() =>
               navigation(
-                `/admin/region?region_id=${partyRegionId}&region_name=${region}`
+                `/admin/region?region_id=${regionId}&region_name=${name}`
               )
             }
           >
@@ -58,9 +58,9 @@ function RegionItem({
               className="px-4 py-1 text-sm text-primary font-bold border-2 border-primary rounded-full"
               onClick={() => {
                 setEditTarget({
-                  partyRegionId: partyRegionId,
-                  region: region,
-                  regionImg: regionImg,
+                  partyRegionId: regionId,
+                  region: name,
+                  regionImg: image,
                 });
                 setShowEditModal(true);
               }}

diff --git a/src/pages/AdminPage/Management/Region/RegionList/index.jsx b/src/pages/AdminPage/Management/Region/RegionList/index.jsx
@@ -16,10 +16,10 @@ function RegionList({
     <>
       <div className="grid grid-cols-1 gap-10 px-6 mx-auto py-8 lg:grid-cols-3 xl:grid-cols-4 overflow-auto">
         {regionData
-          .filter((region) => region.region.includes(searchKeyword))
+          .filter((region) => region.name.includes(searchKeyword))
           .map((item) => (
             <RegionItem
-              key={item.partyRegionId}
+              key={item.regionId}
               setShowEditModal={setShowEditModal}
               setEditTarget={setEditTarget}
               getPartyRegionListFunc={getPartyRegionListFunc}

diff --git a/src/pages/AdminPage/User/DriverInfo/DriverCourse/index.jsx b/src/pages/AdminPage/User/DriverInfo/DriverCourse/index.jsx
@@ -26,6 +26,7 @@ function DriverCourse() {
   const navigation = useNavigate();
   const [searchParams] = useSearchParams();
   const [loading, setLoading] = useState(true);
+  const [region, setRegion] = useState("");
   const [name, setName] = useState("");
   const [images, setImages] = useState([]);
   const [capacity, setCapacity] = useState(0);
@@ -90,6 +91,7 @@ function DriverCourse() {
             startTime: startTime,
           },
         ],
+        region: region,
         images: [...imagesURL, ...destinationImages],
         name: name,
         totalDays: 1,
@@ -225,7 +227,11 @@ function DriverCourse() {
           endTime={endTime}
           setStartTime={setStartTime}
         />
-        <EditMap courseData={destinations} setCourseData={setDestinations} />
+        <EditMap
+          courseData={destinations}
+          setCourseData={setDestinations}
+          setRegion={setRegion}
+        />
         <SaveButton
           courseId={courseId}
           saveHandler={() => setShowCheckModal(true)}

diff --git a/src/pages/AdminPage/User/DriverInfo/DriverTable/Body/index.jsx b/src/pages/AdminPage/User/DriverInfo/DriverTable/Body/index.jsx
@@ -23,7 +23,11 @@ function Body({
           </span>
         )}
       </p>
-      <p className="px-1 text-gray700 font-medium">{driverRegion}</p>
+      <p className="px-1 text-gray700 font-medium">
+        {Array.isArray(driverRegion) && driverRegion.length > 1
+          ? "다수"
+          : driverRegion}
+      </p>
       <p className="px-1 text-gray700 font-medium">
         {makePhoneNumber(phoneNumber)}
       </p>

diff --git a/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/RegionButton/index.jsx b/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/RegionButton/index.jsx
@@ -1,25 +1,27 @@
 import regionCheck from "../../../../../../../assets/svg/region-check.svg";
 
-function RegionButton({
-  regionImg,
-  region,
-  selectedRegion,
-  setSelectedRegion,
-}) {
+function RegionButton({ image, name, selectedRegion, setSelectedRegion }) {
   return (
     <div
       className="relative cursor-pointer"
-      onClick={() => setSelectedRegion(region)}
+      onClick={() => {
+        if (selectedRegion.indexOf(name) > -1) {
+          const newRegions = selectedRegion.filter((item) => item !== name);
+          setSelectedRegion(newRegions);
+        } else {
+          setSelectedRegion([...selectedRegion, name]);
+        }
+      }}
     >
       <img
         className="w-full h-48 object-cover object-center overflow-hidden rounded-xl"
-        src={regionImg}
-        alt={region}
+        src={image}
+        alt={name}
       />
       <div className="w-full mt-2.5 text-base text-boldgray font-medium text-center">
-        {region}
+        {name}
       </div>
-      {region === selectedRegion && (
+      {selectedRegion.indexOf(name) > -1 && (
         <div className="w-full h-48 absolute top-0 left-0 flex justify-center items-center rounded-xl bg-black bg-opacity-70">
           <img src={regionCheck} />
         </div>

diff --git a/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.jsx b/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.jsx
@@ -8,7 +8,7 @@ import RegionButton from "./RegionButton";
 function RegionModal({ showModal, setShowModal, userId }) {
   const navigation = useNavigate();
   const modalRef = useRef();
-  const [selectedRegion, setSelectedRegion] = useState("");
+  const [selectedRegion, setSelectedRegion] = useState([]);
   const [regionData, setRegionData] = useState([]);
 
   const regionClickHandler = async () => {
@@ -45,7 +45,7 @@ function RegionModal({ showModal, setShowModal, userId }) {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
     document.body.classList.add("overflow-hidden");
 
-    setSelectedRegion("");
+    setSelectedRegion([]);
 
     document.addEventListener("keydown", handleKeyPress);
     return () => {
@@ -99,7 +99,7 @@ function RegionModal({ showModal, setShowModal, userId }) {
           <div className="grid grid-cols-2 gap-10 px-6 mx-auto py-8 sm:grid-cols-3 h-full bg-white rounded-t-xl max-h-[400px] md:max-h-[500px] overflow-auto noScrollBar">
             {regionData.map((item) => (
               <RegionButton
-                key={item.partyRegionId}
+                key={item.regionId}
                 selectedRegion={selectedRegion}
                 setSelectedRegion={setSelectedRegion}
                 {...item}

diff --git a/src/pages/DriverApplyPage/RegionList/Region/index.jsx b/src/pages/DriverApplyPage/RegionList/Region/index.jsx
@@ -2,7 +2,7 @@ function Region({ region, image, name, regionHandler }) {
   return (
     <div
       className={`relative h-64 cursor-pointer rounded-lg ${
-        region === name && "ring ring-primary"
+        region.includes(name) && "ring ring-primary"
       }`}
       onClick={() => regionHandler(name)}
     >
@@ -14,7 +14,7 @@ function Region({ region, image, name, regionHandler }) {
       <div className="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full text-xl text-white z-10">
         <div>{name}</div>
       </div>
-      {region === name ? (
+      {region.includes(name) ? (
         <div className="absolute top-0 left-0 w-full h-full bg-primary rounded-lg opacity-50" />
       ) : (
         <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-20 rounded-lg" />

diff --git a/src/pages/DriverApplyPage/RegionList/index.jsx b/src/pages/DriverApplyPage/RegionList/index.jsx
@@ -15,12 +15,17 @@ function RegionList({ setActiveNext, region, setRegion }) {
   };
 
   const regionHandler = (name) => {
-    setRegion(name);
-    setActiveNext(true);
+    if (!region.includes(name)) {
+      setRegion([...region, name]);
+      setActiveNext(true);
+    } else {
+      setRegion(region.filter((item) => item !== name));
+    }
   };
 
   useEffect(() => {
-    if (region) setActiveNext(true);
+    if (region.length !== 0) setActiveNext(true);
+    else setActiveNext(false);
   }, [region]);
 
   useEffect(() => {
@@ -31,10 +36,10 @@ function RegionList({ setActiveNext, region, setRegion }) {
     <div className="grid grid-cols-2 gap-10 px-10 py-8 md:grid-cols-3 lg:grid-cols-4 h-full bg-white rounded-xl overflow-auto">
       {regionData.map((item) => (
         <Region
-          key={item.partyRegionId}
+          key={item.regionId}
           region={region}
-          image={item.regionImg}
-          name={item.region}
+          image={item.image}
+          name={item.name}
           regionHandler={regionHandler}
         />
       ))}

diff --git a/src/pages/DriverApplyPage/index.jsx b/src/pages/DriverApplyPage/index.jsx
@@ -33,7 +33,7 @@ function DriverApplyPage() {
   const [carImages, setCarImages] = useState([]);
   const [modelName, setModelName] = useState("");
   const [maxNum, setMaxNum] = useState("");
-  const [region, setRegion] = useState("");
+  const [region, setRegion] = useState([]);
   const [bank, setBank] = useState("");
   const [name, setName] = useState("");
   const [accoutNumber, setAccoutNumber] = useState("");

diff --git a/src/pages/DriverCoursePage/CourseImage/index.jsx b/src/pages/DriverCoursePage/CourseImage/index.jsx
@@ -15,6 +15,7 @@ function CourseImage({ images, setImages }) {
     <div className="flex flex-col gap-2 my-8">
       <p className="text-lg text-black font-bold">파티 코스 이미지</p>
       <div className="flex gap-4 overflow-x-auto noScrollBar">
+        <ImageInput images={images} setImages={setImages} />
         <DragDropContext onDragEnd={handleChange}>
           <Droppable droppableId="imagelist" direction="horizontal">
             {(provided) => (
@@ -24,14 +25,18 @@ function CourseImage({ images, setImages }) {
                 ref={provided.innerRef}
               >
                 {images.map((image, index) => (
-                  <Draggable draggableId={image} index={index} key={image}>
+                  <Draggable
+                    draggableId={typeof image === "string" ? image : image.name}
+                    index={index}
+                    key={typeof image === "string" ? image : image.name}
+                  >
                     {(provided, snapshot) => {
                       return (
                         <div
                           {...provided.draggableProps}
                           {...provided.dragHandleProps}
                           ref={provided.innerRef}
-                          className={`ml-4 ${
+                          className={`mr-4 ${
                             snapshot.isDragging &&
                             "ring ring-primary rounded-lg"
                           }`}
@@ -53,7 +58,6 @@ function CourseImage({ images, setImages }) {
             )}
           </Droppable>
         </DragDropContext>
-        <ImageInput images={images} setImages={setImages} />
       </div>
     </div>
   );

diff --git a/src/pages/DriverCoursePage/index.jsx b/src/pages/DriverCoursePage/index.jsx
@@ -38,6 +38,8 @@ function DriverCoursePage() {
   const [showErrorModal, setShowErrorModal] = useState(false);
   const [showCheckModal, setShowCheckModal] = useState(false);
   const [commissionRate, setCommissionRate] = useState(0);
+  const [driverRegion, setDriverRegion] = useState([]);
+  const [courseRegion, setCourseRegion] = useState("");
 
   const saveCourse = async () => {
     const destinationImages = destinations.reduce((acc, cur) => {
@@ -88,6 +90,7 @@ function DriverCoursePage() {
             startTime: startTime,
           },
         ],
+        region: courseRegion || driverRegion[0],
         images: [...imagesURL, ...destinationImages],
         name: name,
         totalDays: 1,
@@ -125,9 +128,11 @@ function DriverCoursePage() {
       const driverResult = await getDriverMyInfo();
       setCapacity(driverResult.payload.vehicleCapacity);
       setPrices(driverResult.payload.prices);
+      setDriverRegion(driverResult.payload.region);
 
       if (courseId !== "new") {
         const courseResult = await getCourseDetail(courseId);
+        setCourseRegion(courseResult.payload.region);
         setName(courseResult.payload.name);
         setImages(courseResult.payload.images);
         setCapacity(courseResult.payload.capacity);
@@ -142,6 +147,7 @@ function DriverCoursePage() {
         );
         setPriceIndex(beforePriceIndex === -1 ? 0 : beforePriceIndex);
       } else {
+        setCourseRegion("");
         setName("");
         setImages([]);
         setPriceIndex(0);
@@ -221,7 +227,11 @@ function DriverCoursePage() {
         endTime={endTime}
         setStartTime={setStartTime}
       />
-      <EditMap courseData={destinations} setCourseData={setDestinations} />
+      <EditMap
+        courseData={destinations}
+        setCourseData={setDestinations}
+        setRegion={setCourseRegion}
+      />
       <SaveButton
         courseId={courseId}
         saveHandler={() => setShowCheckModal(true)}

diff --git a/src/pages/DriverProfilePage/ServiceRegion/index.jsx b/src/pages/DriverProfilePage/ServiceRegion/index.jsx
@@ -2,7 +2,9 @@ function ServiceRegion({ region }) {
   return (
     <div className="flex flex-col gap-1 my-7">
       <p className="text-lg text-black font-bold">서비스 지역</p>
-      <p className="text-sm text-darkgray font-medium">{region}</p>
+      <p className="text-sm text-darkgray font-medium">
+        {Array.isArray(region) && region.join(" / ")}
+      </p>
     </div>
   );
 }