deploy: 드라이버 수익 관리 & 관리자 기본 기능 (#81)

드라이버 수익 관리 & 관리자 기본 기능

package.json

@@ -27,6 +27,7 @@
     "redux": "^4.2.1",
     "sockjs-client": "^1.6.1",
     "swiper": "^11.1.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animated": "^1.0.1",
     "vite-plugin-svgr": "^3.2.0",
     "web-vitals": "^2.1.4"

src/api/admin.js

@@ -0,0 +1,12 @@
+import { GET } from "../utils/axios";
+
+export const getPartyList = async (status) =>
+  await GET(`/admin/party?status=${status}`, true);
+
+export const getPartyDetail = async (partyId) =>
+  await GET(`/admin/party/${partyId}`, true);
+
+export const getPartyDriverReady = async (partyId, ready) =>
+  await GET(`/admin/party/driver-ready/${partyId}?ready=${ready}`, true);
+
+export const getUserListAdmin = async () => await GET("/admin/user/list", true);

src/api/destination.js

@@ -28,3 +28,12 @@ export const getLikeDestination = async () =>
 
 export const postNewDestinationUser = async (body) =>
   await POST("/destination/by-user", body, true);
+
+export const postNewDestinationAdmin = async (body) =>
+  await POST("/destination", body, true);
+
+export const putDestinationAdmin = async (data, destinationId) =>
+  await PUT(`/destination/${destinationId}`, data, true);
+
+export const deleteDestinationAdmin = async (destinationId) =>
+  await DELETE(`/destination/${destinationId}`, true);

src/api/driver.js

@@ -33,3 +33,9 @@ export const putDriverApply = async (data) =>
 
 export const deleteDriverApply = async () =>
   await DELETE("/driver/apply", true);
+
+export const getDriverApplyAdmin = async () =>
+  await GET("/driver/accept", true);
+
+export const putDriverApplyAcceptAdmin = async (driverId, accept) =>
+  await PUT(`/driver/accept/${driverId}?accept=${accept}`, {}, true);

src/api/income.js

@@ -0,0 +1,4 @@
+import { GET } from "../utils/axios";
+
+export const getDriverMonthlyIncome = async (month) =>
+  await GET(`/income/monthly?month=${month}`, true);

src/api/region.js

@@ -0,0 +1,15 @@
+import { GET, POST, PUT, DELETE } from "../utils/axios";
+
+export const getPartyRegionList = async () => await GET("/party/region");
+
+export const postNewPartyRegion = async (body) =>
+  await POST("/party/region", body, true);
+
+export const putPartyRegion = async (partyRegionId, body) =>
+  await PUT(`/party/region/${partyRegionId}`, body, true);
+
+export const deletePartyRegion = async (partyRegionId) =>
+  await DELETE(`/party/region/${partyRegionId}`, true);
+
+export const getPartyRegionDriverList = async (partyRegionId) =>
+  await GET(`/party/region/${partyRegionId}`, true);

src/api/users.js

@@ -1,4 +1,4 @@
-import { GET, POST, PUT } from "../utils/axios";
+import { GET, POST, PUT, DELETE } from "../utils/axios";
 
 export const signup = async (data) => await POST("/signup", data);
 
@@ -33,3 +33,5 @@ export const postIdentification = async (data) =>
 
 export const postIdentificationConfirm = async (impUid, otp) =>
   await POST(`/identification/confirm?impUid=${impUid}&otp=${otp}`, {});
+
+export const deleteUser = async () => await DELETE("/user/withdrawal", true);

src/components/Admin/TabList/index.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+
+function TabList({ tabList, changeTab }) {
+  const [current, setCurrent] = useState(0);
+
+  const rounded = (index, maxIndex) => {
+    if (index === 0) return "rounded-l-xl";
+    if (index === maxIndex) return "rounded-r-xl";
+  };
+
+  return (
+    <div className="flex justify-between w-full min-w-[32rem] my-12">
+      {tabList.map((item, index) => (
+        <button
+          key={index}
+          className={`flex justify-center whitespace-nowrap border border-primary w-full p-3 font-semibold text-lg ${rounded(index, tabList.length - 1)} ${index === current ? "bg-primary text-white" : "text-primary"}`}
+          onClick={() => {
+            setCurrent(index);
+            changeTab(index);
+          }}
+        >
+          {item.name}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default TabList;

src/components/Admin/Table/index.jsx

@@ -0,0 +1,30 @@
+function Table({ columns, data }) {
+  return (
+    <div className="flex flex-col w-full min-w-[32rem]">
+      <div className="flex w-full px-5 py-3 items-center justify-center bg-[#EAF4FF] rounded-xl mb-2 text-sm text-[#313033]">
+        {columns.map((item, index) => (
+          <div key={index} className={index === 1 ? "flex-1" : "w-[25%]"}>
+            {item}
+          </div>
+        ))}
+      </div>
+      {data.map((item, index) => (
+        <div
+          key={index}
+          className="flex w-full px-5 py-3 h-10 border border-solid border-[#EFEFEF] rounded-xl mb-2 text-sm"
+        >
+          {item.map((it, id) => (
+            <div
+              key={id}
+              className={`${id === 2 ? "text-primary" : "text-[#939094]"} ${id === 1 ? "flex-1 text-[#313033]" : "w-[25%]"} min-w-fit`}
+            >
+              {it}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default Table;

src/components/Comment/CommentList/Comment/index.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useSelector } from "react-redux";
 import { deleteComment, putComment } from "../../../../api/driver";
 import {
   deleteDestinationComment,
@@ -18,6 +19,7 @@ function Comment({
   isDriver,
   reloadData,
 }) {
+  const user = useSelector((state) => state.user);
   const [modifyMode, setModifyMode] = useState(false);
   const [newStar, setNewStar] = useState(rate.toFixed(1));
   const [newContent, setNewContent] = useState(content);
@@ -111,6 +113,16 @@ function Comment({
             </button>
           </div>
         )}
+        {!isMyComment && user.role === "ROLE_ADMIN" && (
+          <div className="flex gap-1 text-xs text-[#ff0000] font-bold">
+            <button
+              className="hover:border-b hover:border-[#ff0000]"
+              onClick={rightButtonHandler}
+            >
+              {modifyMode ? "확인" : "삭제하기"}
+            </button>
+          </div>
+        )}
       </div>
       <input
         type="text"

src/components/Footer/index.jsx

@@ -1,7 +1,11 @@
+import { useLocation } from "react-router-dom";
 import Company from "./Company";
 import Policy from "./Policy";
 
 function Footer() {
+  const location = useLocation();
+
+  if (location.pathname.slice(0, 6) === "/admin") return null;
   return (
     <div className="cursor-default bg-[#fafafa]">
       <hr className="bg-[#eaeaea] mt-14 mb-7 h-px border-0" />

src/components/Header/index.jsx

@@ -70,7 +70,8 @@ function Header() {
     return (
       location.pathname.slice(0, 13) !== "/search/place" &&
       location.pathname.slice(0, 6) !== "/intro" &&
-      location.pathname.slice(0, 5) !== "/talk"
+      location.pathname.slice(0, 5) !== "/talk" &&
+      location.pathname.slice(0, 6) !== "/admin"
     );
   };
 
@@ -340,7 +341,7 @@ function Header() {
               <li>
                 <button
                   onClick={() => {
-                    navigation("/admin");
+                    navigation("/admin/home");
                     setShowUserMenu(false);
                   }}
                   className="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@@ -383,6 +384,19 @@ function Header() {
                 예약 내역
               </button>
             </li>
+            {user.role === "ROLE_DRIVER" && (
+              <li>
+                <button
+                  onClick={() => {
+                    navigation("/my/driver/income");
+                    setShowUserMenu(false);
+                  }}
+                  className="w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                >
+                  수익 내역
+                </button>
+              </li>
+            )}
             <li>
               <button
                 onClick={() => {

src/components/PartyIconBox/index.jsx

@@ -37,15 +37,17 @@ function PartyIconBox({ id, type, images, name, dibs }) {
           ? await deleteUnLikeParty(id)
           : await deleteUnLikeDestination(id)
         : isParty
-        ? await postLikeParty(id)
-        : await postLikeDestination(id);
+          ? await postLikeParty(id)
+          : await postLikeDestination(id);
       setHeart(!heart);
     } catch (e) {
       console.log(e);
     }
   };
 
   const goPartyChat = async () => {
+    if (!user.auth) return setShowLoginModal(true);
+
     try {
       const result = await getPartyChatId(id);
 

src/components/Title/index.jsx

@@ -0,0 +1,5 @@
+function Title({ title }) {
+  return <p className="text-2xl text-black font-bold">{title}</p>;
+}
+
+export default Title;

src/pages/AdminPage/AdminHome/HomeBodyForm/index.jsx

@@ -0,0 +1,59 @@
+import { useNavigate } from "react-router";
+
+function HomeBodyForm({ name, child }) {
+  const navigate = useNavigate();
+
+  if (name === "KPI" || name === "총 수익" || name === "결제 내역 확인")
+    return null;
+  return (
+    <div className="flex flex-col mt-16 first:mt-0">
+      <div className="text-[#000] text-2xl font-bold mb-5">{name}</div>
+      <div className="flex">
+        {name === "관리자 홈" && (
+          <div className="flex">
+            <button
+              onClick={() => {
+                navigate(`/admin/kpi`);
+              }}
+              className="flex min-w-fit w-28 px-5 py-3 mr-4 justify-center items-center gap-2 rounded-lg border-solid border border-[#D9D9D9] hover:border-primary text-[#3E3E3E] text-sm font-semibold"
+            >
+              KPI
+            </button>
+            <button
+              className="flex min-w-fit w-28 px-5 py-3 mr-4 justify-center items-center gap-2 rounded-lg border-solid border border-[#D9D9D9] hover:border-primary text-[#3E3E3E] text-sm font-semibold"
+              onClick={() => {
+                navigate(`/admin/profit`);
+              }}
+            >
+              총 수익
+            </button>
+            <button
+              className="flex min-w-fit w-28 px-5 py-3 mr-4 justify-center items-center gap-2 rounded-lg border-solid border border-[#D9D9D9] hover:border-primary text-[#3E3E3E] text-sm font-semibold"
+              onClick={() => {
+                navigate(`/admin/payment`);
+              }}
+            >
+              결제 내역 확인
+            </button>
+          </div>
+        )}
+        {child &&
+          child.map((item, index) => (
+            <button
+              key={index}
+              className="flex w-28 min-w-fit px-5 py-3 mr-4 justify-center items-center gap-2 rounded-lg border-solid border border-[#D9D9D9] hover:border-primary text-[#3E3E3E] text-sm font-semibold"
+              onClick={() => {
+                if (item.id === "community") navigate("/community/main");
+                else if (item.id === "inquiry") navigate("/talk");
+                else navigate(`/admin/${item.id}`);
+              }}
+            >
+              <div className="text-sm font-semibold">{item.name}</div>
+            </button>
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export default HomeBodyForm;

src/pages/AdminPage/AdminHome/index.jsx

@@ -0,0 +1,13 @@
+import HomeBodyForm from "./HomeBodyForm";
+
+function AdminHome({ menuList }) {
+  return (
+    <div>
+      {menuList.map((item) => (
+        <HomeBodyForm key={item.id} {...item} />
+      ))}
+    </div>
+  );
+}
+
+export default AdminHome;