refactor: Landing Page

Mallang-Trip · Dec 15, 2024 · 4742f8b · 4742f8b
1 parent 2e80e1c
commit 4742f8b
Show file tree

Hide file tree

Showing 41 changed files with 695 additions and 394 deletions.
diff --git a/src/pages/LandingPage/DriverHome/DriverTab/index.jsx b/src/pages/LandingPage/DriverHome/DriverTab/index.jsx
diff --git a/src/pages/LandingPage/DriverHome/DriverTab/index.tsx b/src/pages/LandingPage/DriverHome/DriverTab/index.tsx
@@ -0,0 +1,43 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import clsx from "clsx";
+
+interface Props {
+  tab: number;
+  setTab: Dispatch<SetStateAction<number>>;
+}
+
+function DriverTab({ tab, setTab }: Props) {
+  return (
+    <div className="w-full grid grid-cols-3 rounded-lg">
+      <button
+        className={clsx(
+          "h-12 rounded-l-lg border border-primary text-sm font-semibold transition-all duration-300",
+          tab === 0 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(0)}
+      >
+        예약된 파티
+      </button>
+      <button
+        className={clsx(
+          "h-12 border-y border-primary text-sm font-semibold transition-all duration-300",
+          tab === 1 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(1)}
+      >
+        가입된 파티
+      </button>
+      <button
+        className={clsx(
+          "h-12 rounded-r-lg border border-primary text-sm font-semibold transition-all duration-300",
+          tab === 2 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(2)}
+      >
+        새로운 파티 승인 대기
+      </button>
+    </div>
+  );
+}
+
+export default memo(DriverTab);
diff --git a/...ge/DriverHome/PartyList/NoParty/index.jsx → ...ge/DriverHome/PartyList/NoParty/index.tsx b/...ge/DriverHome/PartyList/NoParty/index.jsx → ...ge/DriverHome/PartyList/NoParty/index.tsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 function NoParty() {
   return (
     <div className="w-full my-32">
@@ -10,4 +12,4 @@ function NoParty() {
   );
 }
 
-export default NoParty;
+export default memo(NoParty);
diff --git a/...andingPage/DriverHome/PartyList/index.jsx → ...andingPage/DriverHome/PartyList/index.tsx b/...andingPage/DriverHome/PartyList/index.jsx → ...andingPage/DriverHome/PartyList/index.tsx
@@ -1,13 +1,18 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { getMyDriverParty } from "../../../../api/party";
+import { HeartParty } from "../../../../types";
 import PartyBox from "../../PartyList/PartyBox";
 import NoParty from "./NoParty";
 
-function PartyList({ tab }) {
-  const [partyData, setPartyData] = useState([]);
+interface Props {
+  tab: number;
+}
+
+function PartyList({ tab }: Props) {
+  const [partyData, setPartyData] = useState<HeartParty[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const filterParty = () => {
+  const filterParty: HeartParty[] = useMemo(() => {
     if (!partyData) return [];
     if (tab === 0)
       return partyData.filter(
@@ -24,9 +29,10 @@ function PartyList({ tab }) {
       return partyData.filter(
         (party) => party.status === "WAITING_DRIVER_APPROVAL"
       );
-  };
+    return [];
+  }, [partyData, tab]);
 
-  const getPartyData = async () => {
+  const getPartyData = useCallback(async () => {
     try {
       const result = await getMyDriverParty();
       setPartyData(result.payload);
@@ -35,21 +41,21 @@ function PartyList({ tab }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     getPartyData();
   }, []);
 
   if (loading) return null;
-  if (filterParty().length === 0) return <NoParty />;
+  if (filterParty.length === 0) return <NoParty />;
   return (
     <div className="grid grid-cols-1 gap-10 mt-10 mx-auto sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
-      {filterParty().map((item) => (
+      {filterParty.map((item) => (
         <PartyBox key={item.partyId} {...item} />
       ))}
     </div>
   );
 }
 
-export default PartyList;
+export default memo(PartyList);
diff --git a/src/pages/LandingPage/DriverHome/index.jsx → src/pages/LandingPage/DriverHome/index.tsx b/src/pages/LandingPage/DriverHome/index.jsx → src/pages/LandingPage/DriverHome/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import DriverTab from "./DriverTab";
 import PartyList from "./PartyList";
 
@@ -13,4 +13,4 @@ function DriverHome() {
   );
 }
 
-export default DriverHome;
+export default memo(DriverHome);
diff --git a/src/pages/LandingPage/DriverMenu/index.jsx b/src/pages/LandingPage/DriverMenu/index.jsx
diff --git a/src/pages/LandingPage/DriverMenu/index.tsx b/src/pages/LandingPage/DriverMenu/index.tsx
@@ -0,0 +1,39 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import clsx from "clsx";
+
+interface Props {
+  driverMenu: "driver" | "user";
+  setDriverMenu: Dispatch<SetStateAction<"driver" | "user">>;
+}
+
+function DriverMenu({ driverMenu, setDriverMenu }: Props) {
+  const user = useSelector((state: RootState) => state.user);
+
+  if (user.role !== "ROLE_DRIVER") return null;
+  return (
+    <div className="flex justify-start gap-6 mb-6 max-w-screen-xl mx-auto px-2 md:px-5">
+      <button
+        className={clsx(
+          "text-2xl font-bold transition-all duration-500",
+          driverMenu === "driver" ? "text-gray800" : "text-gray400"
+        )}
+        onClick={() => setDriverMenu("driver")}
+      >
+        드라이버 홈
+      </button>
+      <button
+        className={clsx(
+          "text-2xl font-bold transition-all duration-500",
+          driverMenu === "user" ? "text-gray800" : "text-gray400"
+        )}
+        onClick={() => setDriverMenu("user")}
+      >
+        여행자 홈
+      </button>
+    </div>
+  );
+}
+
+export default memo(DriverMenu);
diff --git a/src/pages/LandingPage/KakaoButton/index.jsx → src/pages/LandingPage/KakaoButton/index.tsx b/src/pages/LandingPage/KakaoButton/index.jsx → src/pages/LandingPage/KakaoButton/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { Link } from "react-router-dom";
 import kakaoIcon from "../../../assets/svg/kakao-icon.svg";
 
@@ -13,4 +14,4 @@ function KakaoButton() {
   );
 }
 
-export default KakaoButton;
+export default memo(KakaoButton);
diff --git a/...e/MyPartyList/PartyList/NoParty/index.jsx → ...e/MyPartyList/PartyList/NoParty/index.tsx b/...e/MyPartyList/PartyList/NoParty/index.jsx → ...e/MyPartyList/PartyList/NoParty/index.tsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 function NoParty() {
   return (
     <div className="w-full my-32">
@@ -10,4 +12,4 @@ function NoParty() {
   );
 }
 
-export default NoParty;
+export default memo(NoParty);
diff --git a/...ndingPage/MyPartyList/PartyList/index.jsx → ...ndingPage/MyPartyList/PartyList/index.tsx b/...ndingPage/MyPartyList/PartyList/index.jsx → ...ndingPage/MyPartyList/PartyList/index.tsx
@@ -1,13 +1,18 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { getMyParty } from "../../../../api/party";
+import { HeartParty } from "../../../../types";
 import PartyBox from "../../PartyList/PartyBox";
 import NoParty from "./NoParty";
 
-function PartyList({ tab }) {
-  const [partyData, setPartyData] = useState([]);
+interface Props {
+  tab: number;
+}
+
+function PartyList({ tab }: Props) {
+  const [partyData, setPartyData] = useState<HeartParty[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const filterParty = () => {
+  const filterParty: HeartParty[] = useMemo(() => {
     if (tab === 0)
       return partyData.filter(
         (party) => party.status === "SEALED" || party.status === "DAY_OF_TRAVEL"
@@ -23,9 +28,10 @@ function PartyList({ tab }) {
       return partyData.filter(
         (party) => party.status === "WAITING_DRIVER_APPROVAL"
       );
-  };
+    return [];
+  }, [partyData, tab]);
 
-  const getPartyData = async () => {
+  const getPartyData = useCallback(async () => {
     try {
       const result = await getMyParty();
       setPartyData(result.payload);
@@ -34,21 +40,21 @@ function PartyList({ tab }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     getPartyData();
   }, []);
 
   if (loading) return null;
-  if (filterParty().length === 0) return <NoParty />;
+  if (filterParty.length === 0) return <NoParty />;
   return (
     <div className="grid grid-cols-1 gap-10 mt-10 mx-auto sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
-      {filterParty().map((item) => (
+      {filterParty.map((item) => (
         <PartyBox key={item.partyId} {...item} />
       ))}
     </div>
   );
 }
 
-export default PartyList;
+export default memo(PartyList);
diff --git a/src/pages/LandingPage/MyPartyList/UserTab/index.jsx b/src/pages/LandingPage/MyPartyList/UserTab/index.jsx
diff --git a/src/pages/LandingPage/MyPartyList/UserTab/index.tsx b/src/pages/LandingPage/MyPartyList/UserTab/index.tsx
@@ -0,0 +1,43 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import clsx from "clsx";
+
+interface Props {
+  tab: number;
+  setTab: Dispatch<SetStateAction<number>>;
+}
+
+function UserTab({ tab, setTab }: Props) {
+  return (
+    <div className="w-full grid grid-cols-3 rounded-lg">
+      <button
+        className={clsx(
+          "h-12 rounded-l-lg border border-primary text-sm font-semibold transition-all duration-300",
+          tab === 0 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(0)}
+      >
+        예약된 파티
+      </button>
+      <button
+        className={clsx(
+          "h-12 border-y border-primary text-sm font-semibold transition-all duration-300",
+          tab === 1 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(1)}
+      >
+        가입된 파티
+      </button>
+      <button
+        className={clsx(
+          "h-12 rounded-r-lg border border-primary text-sm font-semibold transition-all duration-300",
+          tab === 2 ? "text-white bg-primary" : "text-primary bg-white"
+        )}
+        onClick={() => setTab(2)}
+      >
+        새로운 파티 신청
+      </button>
+    </div>
+  );
+}
+
+export default memo(UserTab);
diff --git a/src/pages/LandingPage/MyPartyList/index.jsx → src/pages/LandingPage/MyPartyList/index.tsx b/src/pages/LandingPage/MyPartyList/index.jsx → src/pages/LandingPage/MyPartyList/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import UserTab from "./UserTab";
 import PartyList from "./PartyList";
 
@@ -13,4 +13,4 @@ function MyPartyList() {
   );
 }
 
-export default MyPartyList;
+export default memo(MyPartyList);