diff --git a/src/pages/LandingPage/DriverHome/DriverTab/index.jsx b/src/pages/LandingPage/DriverHome/DriverTab/index.jsx
deleted file mode 100644
index 686519aa..00000000
--- a/src/pages/LandingPage/DriverHome/DriverTab/index.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-function DriverTab({ tab, setTab }) {
-  return (
-    <div className="w-full grid grid-cols-3 rounded-lg">
-      <button
-        className={`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={`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={`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 DriverTab;
diff --git a/src/pages/LandingPage/DriverHome/DriverTab/index.tsx b/src/pages/LandingPage/DriverHome/DriverTab/index.tsx
new file mode 100644
index 00000000..c77e699a
--- /dev/null
+++ 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/src/pages/LandingPage/DriverHome/PartyList/NoParty/index.jsx b/src/pages/LandingPage/DriverHome/PartyList/NoParty/index.tsx
similarity index 81%
rename from src/pages/LandingPage/DriverHome/PartyList/NoParty/index.jsx
rename to src/pages/LandingPage/DriverHome/PartyList/NoParty/index.tsx
index 3dd10e0b..7f307e00 100644
--- a/src/pages/LandingPage/DriverHome/PartyList/NoParty/index.jsx
+++ b/src/pages/LandingPage/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/src/pages/LandingPage/DriverHome/PartyList/index.jsx b/src/pages/LandingPage/DriverHome/PartyList/index.tsx
similarity index 69%
rename from src/pages/LandingPage/DriverHome/PartyList/index.jsx
rename to src/pages/LandingPage/DriverHome/PartyList/index.tsx
index b633a178..854f04df 100644
--- a/src/pages/LandingPage/DriverHome/PartyList/index.jsx
+++ b/src/pages/LandingPage/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 b/src/pages/LandingPage/DriverHome/index.tsx
similarity index 80%
rename from src/pages/LandingPage/DriverHome/index.jsx
rename to src/pages/LandingPage/DriverHome/index.tsx
index a395f4c4..6cb07139 100644
--- a/src/pages/LandingPage/DriverHome/index.jsx
+++ b/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
deleted file mode 100644
index 54d92035..00000000
--- a/src/pages/LandingPage/DriverMenu/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useSelector } from "react-redux";
-
-function DriverMenu({ driverMenu, setDriverMenu }) {
-  const user = useSelector((state) => 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={`text-2xl font-bold transition-all duration-500 ${driverMenu === "driver" ? "text-gray800" : "text-gray400"}`}
-        onClick={() => setDriverMenu("driver")}
-      >
-        드라이버 홈
-      </button>
-      <button
-        className={`text-2xl font-bold transition-all duration-500 ${driverMenu === "user" ? "text-gray800" : "text-gray400"}`}
-        onClick={() => setDriverMenu("user")}
-      >
-        여행자 홈
-      </button>
-    </div>
-  );
-}
-
-export default DriverMenu;
diff --git a/src/pages/LandingPage/DriverMenu/index.tsx b/src/pages/LandingPage/DriverMenu/index.tsx
new file mode 100644
index 00000000..2173034d
--- /dev/null
+++ 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 b/src/pages/LandingPage/KakaoButton/index.tsx
similarity index 87%
rename from src/pages/LandingPage/KakaoButton/index.jsx
rename to src/pages/LandingPage/KakaoButton/index.tsx
index 1a49ffad..00c1fac8 100644
--- a/src/pages/LandingPage/KakaoButton/index.jsx
+++ b/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/src/pages/LandingPage/MyPartyList/PartyList/NoParty/index.jsx b/src/pages/LandingPage/MyPartyList/PartyList/NoParty/index.tsx
similarity index 81%
rename from src/pages/LandingPage/MyPartyList/PartyList/NoParty/index.jsx
rename to src/pages/LandingPage/MyPartyList/PartyList/NoParty/index.tsx
index 09754f23..58ce5d55 100644
--- a/src/pages/LandingPage/MyPartyList/PartyList/NoParty/index.jsx
+++ b/src/pages/LandingPage/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/src/pages/LandingPage/MyPartyList/PartyList/index.jsx b/src/pages/LandingPage/MyPartyList/PartyList/index.tsx
similarity index 68%
rename from src/pages/LandingPage/MyPartyList/PartyList/index.jsx
rename to src/pages/LandingPage/MyPartyList/PartyList/index.tsx
index 55b98093..60baac82 100644
--- a/src/pages/LandingPage/MyPartyList/PartyList/index.jsx
+++ b/src/pages/LandingPage/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
deleted file mode 100644
index 53ed50e3..00000000
--- a/src/pages/LandingPage/MyPartyList/UserTab/index.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-function UserTab({ tab, setTab }) {
-  return (
-    <div className="w-full grid grid-cols-3 rounded-lg">
-      <button
-        className={`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={`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={`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 UserTab;
diff --git a/src/pages/LandingPage/MyPartyList/UserTab/index.tsx b/src/pages/LandingPage/MyPartyList/UserTab/index.tsx
new file mode 100644
index 00000000..0b945979
--- /dev/null
+++ 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 b/src/pages/LandingPage/MyPartyList/index.tsx
similarity index 78%
rename from src/pages/LandingPage/MyPartyList/index.jsx
rename to src/pages/LandingPage/MyPartyList/index.tsx
index e002aa53..c540e014 100644
--- a/src/pages/LandingPage/MyPartyList/index.jsx
+++ b/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);
diff --git a/src/pages/LandingPage/NewMyParty/index.jsx b/src/pages/LandingPage/NewMyParty/index.tsx
similarity index 78%
rename from src/pages/LandingPage/NewMyParty/index.jsx
rename to src/pages/LandingPage/NewMyParty/index.tsx
index f116a0ad..0e1f561e 100644
--- a/src/pages/LandingPage/NewMyParty/index.jsx
+++ b/src/pages/LandingPage/NewMyParty/index.tsx
@@ -1,18 +1,24 @@
+import { Dispatch, memo, SetStateAction, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import mallangtripLogo from "../../../assets/svg/mallangtrip-logo-grey.svg";
 
-function NewMyParty({ setShowLoginModal }) {
+interface Props {
+  setShowLoginModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function NewMyParty({ setShowLoginModal }: Props) {
   const navigation = useNavigate();
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
 
-  const clickHandler = () => {
+  const clickHandler = useCallback(() => {
     if (user.auth)
       navigation(
         `/party/new/1?region=${null}&member=${null}&date=${null}&driverId=${null}`
       );
     else setShowLoginModal(true);
-  };
+  }, [user]);
 
   return (
     <div className="hidden md:block w-full mb-8 bg-skyblue py-7">
@@ -43,4 +49,4 @@ function NewMyParty({ setShowLoginModal }) {
   );
 }
 
-export default NewMyParty;
+export default memo(NewMyParty);
diff --git a/src/pages/LandingPage/PartyFilter/DateModal/index.jsx b/src/pages/LandingPage/PartyFilter/DateModal/index.tsx
similarity index 64%
rename from src/pages/LandingPage/PartyFilter/DateModal/index.jsx
rename to src/pages/LandingPage/PartyFilter/DateModal/index.tsx
index 872c09b9..c5d67ba0 100644
--- a/src/pages/LandingPage/PartyFilter/DateModal/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/DateModal/index.tsx
@@ -1,38 +1,60 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
 import { setNowDate } from "../../../../redux/modules/partyFilterSlice";
 import Calendar from "react-calendar";
+import clsx from "clsx";
 import "./index.css";
 
-function DateModal({ showModal, setShowModal }) {
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function DateModal({ showModal, setShowModal }: Props) {
   const dispatch = useDispatch();
-  const nowDate = useSelector((state) => state.partyFilter.nowDate);
-  const modalRef = useRef();
-  const confirmButtonRef = useRef();
-  const [date, setDate] = useState(nowDate);
+  const nowDate = useSelector((state: RootState) => state.partyFilter.nowDate);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const confirmButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [date, setDate] = useState<any>(nowDate);
 
-  const closeModal = () => setShowModal(false);
+  const closeModal = useCallback(() => setShowModal(false), []);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) closeModal();
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) closeModal();
+    },
+    [modalRef]
+  );
 
-  const allDateHandler = () => {
+  const allDateHandler = useCallback(() => {
     setDate([]);
     dispatch(setNowDate([]));
     setShowModal(false);
-  };
+  }, []);
 
-  const confirmHandler = () => {
+  const confirmHandler = useCallback(() => {
     dispatch(setNowDate(date));
     setShowModal(false);
-  };
+  }, [date]);
 
-  const handleKeyPress = (event) => {
-    if (event.key === "Escape") closeModal();
-    else if (event.key === "Enter") confirmButtonRef.current.click();
-  };
+  const handleKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeModal();
+      else if (event.key === "Enter") confirmButtonRef.current?.click();
+    },
+    [confirmButtonRef]
+  );
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -48,16 +70,18 @@ function DateModal({ showModal, setShowModal }) {
 
   return createPortal(
     <div
-      className={`modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex ${
-        showModal ? "active" : ""
-      }`}
+      className={clsx(
+        "modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex",
+        showModal && "active"
+      )}
       ref={modalRef}
-      onClick={(e) => modalOutSideClick(e)}
+      onClick={modalOutSideClick}
     >
       <div
-        className={`mx-auto mt-auto md:my-auto rounded-xl bg-white relative md:translate-y-0 duration-700 ${
+        className={clsx(
+          "mx-auto mt-auto md:my-auto rounded-xl bg-white relative md:translate-y-0 duration-500",
           showModal ? "translate-y-16" : "translate-y-full"
-        }`}
+        )}
       >
         <div className="px-6 pt-5">
           <p className="text-lg font-bold text-black mb-1">가능한 일정</p>
@@ -87,9 +111,7 @@ function DateModal({ showModal, setShowModal }) {
         <Calendar
           onChange={setDate}
           value={date}
-          formatDay={(locale, date) =>
-            date.toLocaleString("en", { day: "numeric" })
-          }
+          formatDay={(_, date) => date.toLocaleString("en", { day: "numeric" })}
           minDate={new Date()}
           selectRange={true}
           calendarType="gregory"
@@ -124,4 +146,4 @@ function DateModal({ showModal, setShowModal }) {
   );
 }
 
-export default DateModal;
+export default memo(DateModal);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.tsx
similarity index 63%
rename from src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.jsx
rename to src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.tsx
index 8100f219..588b5d9b 100644
--- a/src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/Filter/DateFilter/index.tsx
@@ -1,7 +1,14 @@
+import { Dispatch, memo, SetStateAction } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import clsx from "clsx";
 
-function DateFilter({ setShowDateModal }) {
-  const nowDate = useSelector((state) => state.partyFilter.nowDate);
+interface Props {
+  setShowDateModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function DateFilter({ setShowDateModal }: Props) {
+  const nowDate = useSelector((state: RootState) => state.partyFilter.nowDate);
 
   return (
     <button
@@ -12,9 +19,10 @@ function DateFilter({ setShowDateModal }) {
         가능한 일정
       </p>
       <p
-        className={`text-2xl leading-7 font-bold ${
+        className={clsx(
+          "text-2xl leading-7 font-bold",
           nowDate.length ? "text-gray800" : "text-gray400"
-        }`}
+        )}
       >
         {nowDate.length
           ? `${String(nowDate[0].getMonth() + 1).padStart(2, "0")}.${String(
@@ -29,4 +37,4 @@ function DateFilter({ setShowDateModal }) {
   );
 }
 
-export default DateFilter;
+export default memo(DateFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.tsx
similarity index 60%
rename from src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.jsx
rename to src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.tsx
index a4f45d9b..7ad95a69 100644
--- a/src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/Filter/DateMobileFilter/index.tsx
@@ -1,8 +1,15 @@
+import { Dispatch, memo, SetStateAction } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
 import partyFilterDate from "../../../../../assets/svg/party_filter_date.svg";
+import clsx from "clsx";
 
-function DateMobileFilter({ setShowDateModal }) {
-  const nowDate = useSelector((state) => state.partyFilter.nowDate);
+interface Props {
+  setShowDateModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function DateMobileFilter({ setShowDateModal }: Props) {
+  const nowDate = useSelector((state: RootState) => state.partyFilter.nowDate);
 
   return (
     <button
@@ -10,7 +17,9 @@ function DateMobileFilter({ setShowDateModal }) {
       onClick={() => setShowDateModal(true)}
     >
       <img src={partyFilterDate} alt="일정" />
-      <span className={nowDate.length ? "text-boldgray" : "text-textgray"}>
+      <span
+        className={clsx(nowDate.length ? "text-boldgray" : "text-textgray")}
+      >
         {nowDate.length
           ? `${String(nowDate[0].getMonth() + 1).padStart(2, "0")}.${String(
               nowDate[0].getDate()
@@ -24,4 +33,4 @@ function DateMobileFilter({ setShowDateModal }) {
   );
 }
 
-export default DateMobileFilter;
+export default memo(DateMobileFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx
similarity index 74%
rename from src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.jsx
rename to src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx
index 86411a5b..7060ffbb 100644
--- a/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx
@@ -1,20 +1,26 @@
+import { Dispatch, memo, SetStateAction, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
 import plusIcon from "../../../../../assets/svg/new-party-plus-mobile.svg";
 import leftLogo from "../../../../../assets/svg/new-party-left-mobile.svg";
 import rightLogo from "../../../../../assets/svg/new-party-right-mobile.svg";
 
-function NewPartyMobile({ setShowLoginModal }) {
+interface Props {
+  setShowLoginModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function NewPartyMobile({ setShowLoginModal }: Props) {
   const navigation = useNavigate();
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
 
-  const clickHandler = () => {
+  const clickHandler = useCallback(() => {
     if (user.auth)
       navigation(
         `/party/new/1?region=${null}&member=${null}&date=${null}&driverId=${null}`
       );
     else setShowLoginModal(true);
-  };
+  }, [user]);
 
   return (
     <button
@@ -39,4 +45,4 @@ function NewPartyMobile({ setShowLoginModal }) {
   );
 }
 
-export default NewPartyMobile;
+export default memo(NewPartyMobile);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.tsx
similarity index 67%
rename from src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.jsx
rename to src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.tsx
index f98472ce..f9f27888 100644
--- a/src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/Filter/PeopleFilter/index.tsx
@@ -1,45 +1,51 @@
+import { memo, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setNum } from "../../../../../redux/modules/partyFilterSlice";
+import { RootState } from "../../../../../redux/store";
 import minusGray from "../../../../../assets/svg/people_minus_gray.svg";
 import minusPrimary from "../../../../../assets/svg/people_minus_primary.svg";
 import plusgray from "../../../../../assets/svg/people_plus_gray.svg";
 import plusPrimary from "../../../../../assets/svg/people_plus_primary.svg";
+import clsx from "clsx";
 
 function PeopleFilter() {
   const dispatch = useDispatch();
-  const num = useSelector((state) => state.partyFilter.num);
+  const num = useSelector((state: RootState) => state.partyFilter.num);
 
-  const setIncrease = () => dispatch(setNum(num + 1));
-  const setDecrease = () => dispatch(setNum(num - 1));
+  const setIncrease = useCallback(() => dispatch(setNum(num + 1)), [num]);
+  const setDecrease = useCallback(() => dispatch(setNum(num - 1)), [num]);
 
   return (
     <div className="w-full h-full px-8 py-6 flex flex-col justify-between rounded-l-3xl border-r border-gray300">
       <p className="text-base leading-5 text-gray700 font-medium">참여 인원</p>
       <div className="w-full flex justify-start items-center">
         <button
-          className={`w-7 h-7 rounded-full ring-1 flex justify-center items-center ${
+          className={clsx(
+            "w-7 h-7 rounded-full ring-1 flex justify-center items-center",
             num === 1
               ? "bg-lightgray ring-[#BABABA]"
               : "bg-skyblue ring-primary"
-          }`}
+          )}
           onClick={setDecrease}
           disabled={num === 1}
         >
           <img src={num === 1 ? minusGray : minusPrimary} />
         </button>
         <div
-          className={`w-16 h-7 text-center text-2xl leading-7 font-bold ${
+          className={clsx(
+            "w-16 h-7 text-center text-2xl leading-7 font-bold",
             num === 1 ? "text-gray400" : "text-gray800"
-          }`}
+          )}
         >
           {num}
         </div>
         <button
-          className={`w-7 h-7 rounded-full ring-1 flex justify-center items-center ${
+          className={clsx(
+            "w-7 h-7 rounded-full ring-1 flex justify-center items-center",
             num === 10
               ? "bg-lightgray ring-[#BABABA]"
               : "bg-skyblue ring-primary"
-          }`}
+          )}
           onClick={setIncrease}
           disabled={num === 10}
         >
@@ -50,4 +56,4 @@ function PeopleFilter() {
   );
 }
 
-export default PeopleFilter;
+export default memo(PeopleFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.jsx
deleted file mode 100644
index fdc4cb10..00000000
--- a/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useSelector } from "react-redux";
-import partyFilterPeople from "../../../../../assets/svg/party_filter_people.svg";
-
-function PeopleMobileFilter({ setShowPeopleModal }) {
-  const num = useSelector((state) => state.partyFilter.num);
-
-  return (
-    <button
-      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
-      onClick={() => setShowPeopleModal(true)}
-    >
-      <img src={partyFilterPeople} alt="인원" />
-      <span className={num === 1 ? "text-textgray" : "text-boldgray"}>
-        {num === 1 ? "참여 인원" : `${num}명`}
-      </span>
-    </button>
-  );
-}
-
-export default PeopleMobileFilter;
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.tsx
new file mode 100644
index 00000000..aabbd36b
--- /dev/null
+++ b/src/pages/LandingPage/PartyFilter/Filter/PeopleMobileFilter/index.tsx
@@ -0,0 +1,27 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import partyFilterPeople from "../../../../../assets/svg/party_filter_people.svg";
+import clsx from "clsx";
+
+interface Props {
+  setShowPeopleModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PeopleMobileFilter({ setShowPeopleModal }: Props) {
+  const num = useSelector((state: RootState) => state.partyFilter.num);
+
+  return (
+    <button
+      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
+      onClick={() => setShowPeopleModal(true)}
+    >
+      <img src={partyFilterPeople} alt="인원" />
+      <span className={clsx(num === 1 ? "text-textgray" : "text-boldgray")}>
+        {num === 1 ? "참여 인원" : `${num}명`}
+      </span>
+    </button>
+  );
+}
+
+export default memo(PeopleMobileFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.jsx
deleted file mode 100644
index 258529cf..00000000
--- a/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useSelector } from "react-redux";
-
-function PriceFilter({ setShowPriceModal }) {
-  const price = useSelector((state) => state.partyFilter.price);
-
-  return (
-    <button
-      className="w-full h-full px-8 py-6 flex flex-col justify-between rounded-l-3xl"
-      onClick={() => setShowPriceModal(true)}
-    >
-      <p className="text-base leading-5 text-gray700 font-medium">
-        1인당 가격 범위
-      </p>
-      <p
-        className={`text-2xl leading-7 font-bold ${
-          price > 300000 ? "text-gray400" : "text-gray800"
-        }`}
-      >
-        {price > 300000 ? "모든 가격" : `~${price / 10000}만원`}
-      </p>
-    </button>
-  );
-}
-
-export default PriceFilter;
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.tsx
new file mode 100644
index 00000000..bc7e6702
--- /dev/null
+++ b/src/pages/LandingPage/PartyFilter/Filter/PriceFilter/index.tsx
@@ -0,0 +1,37 @@
+import { Dispatch, memo, SetStateAction, useMemo } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import clsx from "clsx";
+
+interface Props {
+  setShowPriceModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PriceFilter({ setShowPriceModal }: Props) {
+  const price = useSelector((state: RootState) => state.partyFilter.price);
+  const nowPrice = useMemo(
+    () => (typeof price === "string" ? parseInt(price) : price),
+    [price]
+  );
+
+  return (
+    <button
+      className="w-full h-full px-8 py-6 flex flex-col justify-between rounded-l-3xl"
+      onClick={() => setShowPriceModal(true)}
+    >
+      <p className="text-base leading-5 text-gray700 font-medium">
+        1인당 가격 범위
+      </p>
+      <p
+        className={clsx(
+          "text-2xl leading-7 font-bold",
+          nowPrice > 300000 ? "text-gray400" : "text-gray800"
+        )}
+      >
+        {nowPrice > 300000 ? "모든 가격" : `~${nowPrice / 10000}만원`}
+      </p>
+    </button>
+  );
+}
+
+export default memo(PriceFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.jsx
deleted file mode 100644
index 1953f54f..00000000
--- a/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useSelector } from "react-redux";
-import partyFilterPrice from "../../../../../assets/svg/party_filter_price.svg";
-
-function PriceMobileFilter({ setShowPriceModal }) {
-  const price = useSelector((state) => state.partyFilter.price);
-
-  return (
-    <button
-      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
-      onClick={() => setShowPriceModal(true)}
-    >
-      <img src={partyFilterPrice} alt="가격" />
-      <span className={price > 300000 ? "text-textgray" : "text-boldgray"}>
-        {price > 300000 ? "가격 범위" : `~${price / 10000}만원`}
-      </span>
-    </button>
-  );
-}
-
-export default PriceMobileFilter;
diff --git a/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.tsx
new file mode 100644
index 00000000..bd5d3a87
--- /dev/null
+++ b/src/pages/LandingPage/PartyFilter/Filter/PriceMobileFilter/index.tsx
@@ -0,0 +1,33 @@
+import { Dispatch, memo, SetStateAction, useMemo } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import partyFilterPrice from "../../../../../assets/svg/party_filter_price.svg";
+import clsx from "clsx";
+
+interface Props {
+  setShowPriceModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PriceMobileFilter({ setShowPriceModal }: Props) {
+  const price = useSelector((state: RootState) => state.partyFilter.price);
+  const nowPrice = useMemo(
+    () => (typeof price === "string" ? parseInt(price) : price),
+    [price]
+  );
+
+  return (
+    <button
+      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
+      onClick={() => setShowPriceModal(true)}
+    >
+      <img src={partyFilterPrice} alt="가격" />
+      <span
+        className={clsx(nowPrice > 300000 ? "text-textgray" : "text-boldgray")}
+      >
+        {nowPrice > 300000 ? "가격 범위" : `~${nowPrice / 10000}만원`}
+      </span>
+    </button>
+  );
+}
+
+export default memo(PriceMobileFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.jsx
deleted file mode 100644
index 5a7db622..00000000
--- a/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useSelector } from "react-redux";
-
-function RegionFilter({ setShowRegionModal }) {
-  const region = useSelector((state) => state.partyFilter.region);
-
-  return (
-    <button
-      className="w-full h-full px-8 py-6 flex flex-col justify-between rounded-l-3xl border-r border-gray300"
-      onClick={() => setShowRegionModal(true)}
-    >
-      <p className="text-base leading-5 text-gray700 font-medium">목적지</p>
-      <p
-        className={`text-2xl leading-7 text-gray400 font-bold  ${
-          region === "모든 지역" ? "text-gray400" : "text-gray800"
-        }`}
-      >
-        {region}
-      </p>
-    </button>
-  );
-}
-
-export default RegionFilter;
diff --git a/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.tsx
new file mode 100644
index 00000000..08880eda
--- /dev/null
+++ b/src/pages/LandingPage/PartyFilter/Filter/RegionFilter/index.tsx
@@ -0,0 +1,31 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import clsx from "clsx";
+
+interface Props {
+  setShowRegionModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function RegionFilter({ setShowRegionModal }: Props) {
+  const region = useSelector((state: RootState) => state.partyFilter.region);
+
+  return (
+    <button
+      className="w-full h-full px-8 py-6 flex flex-col justify-between rounded-l-3xl border-r border-gray300"
+      onClick={() => setShowRegionModal(true)}
+    >
+      <p className="text-base leading-5 text-gray700 font-medium">목적지</p>
+      <p
+        className={clsx(
+          "text-2xl leading-7 text-gray400 font-bold",
+          region === "모든 지역" ? "text-gray400" : "text-gray800"
+        )}
+      >
+        {region}
+      </p>
+    </button>
+  );
+}
+
+export default memo(RegionFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.jsx
deleted file mode 100644
index bc2e736c..00000000
--- a/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useSelector } from "react-redux";
-import partyFilterRegion from "../../../../../assets/svg/party_filter_region.svg";
-
-function RegionMobileFilter({ setShowRegionModal }) {
-  const region = useSelector((state) => state.partyFilter.region);
-
-  return (
-    <button
-      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
-      onClick={() => setShowRegionModal(true)}
-    >
-      <img src={partyFilterRegion} alt="지역" />
-      <span
-        className={region === "모든 지역" ? "text-textgray" : "text-boldgray"}
-      >
-        {region === "모든 지역" ? "목적지" : region}
-      </span>
-    </button>
-  );
-}
-
-export default RegionMobileFilter;
diff --git a/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.tsx
new file mode 100644
index 00000000..b3522fc7
--- /dev/null
+++ b/src/pages/LandingPage/PartyFilter/Filter/RegionMobileFilter/index.tsx
@@ -0,0 +1,31 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../../redux/store";
+import partyFilterRegion from "../../../../../assets/svg/party_filter_region.svg";
+import clsx from "clsx";
+
+interface Props {
+  setShowRegionModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function RegionMobileFilter({ setShowRegionModal }: Props) {
+  const region = useSelector((state: RootState) => state.partyFilter.region);
+
+  return (
+    <button
+      className="w-full h-12 flex gap-4 items-center px-4 text-sm font-bold bg-lightgray rounded-lg"
+      onClick={() => setShowRegionModal(true)}
+    >
+      <img src={partyFilterRegion} alt="지역" />
+      <span
+        className={clsx(
+          region === "모든 지역" ? "text-textgray" : "text-boldgray"
+        )}
+      >
+        {region === "모든 지역" ? "목적지" : region}
+      </span>
+    </button>
+  );
+}
+
+export default memo(RegionMobileFilter);
diff --git a/src/pages/LandingPage/PartyFilter/Filter/index.jsx b/src/pages/LandingPage/PartyFilter/Filter/index.tsx
similarity index 77%
rename from src/pages/LandingPage/PartyFilter/Filter/index.jsx
rename to src/pages/LandingPage/PartyFilter/Filter/index.tsx
index 9c5f9c87..ac8dac69 100644
--- a/src/pages/LandingPage/PartyFilter/Filter/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/Filter/index.tsx
@@ -1,3 +1,4 @@
+import { Dispatch, memo, SetStateAction } from "react";
 import RegionFilter from "./RegionFilter";
 import DateFilter from "./DateFilter";
 import PeopleFilter from "./PeopleFilter";
@@ -8,13 +9,21 @@ import PeopleMobileFilter from "./PeopleMobileFilter";
 import PriceMobileFilter from "./PriceMobileFilter";
 import NewPartyMobile from "./NewPartyMobile";
 
+interface Props {
+  setShowRegionModal: Dispatch<SetStateAction<boolean>>;
+  setShowDateModal: Dispatch<SetStateAction<boolean>>;
+  setShowPeopleModal: Dispatch<SetStateAction<boolean>>;
+  setShowPriceModal: Dispatch<SetStateAction<boolean>>;
+  setShowLoginModal: Dispatch<SetStateAction<boolean>>;
+}
+
 function Filter({
   setShowRegionModal,
   setShowDateModal,
   setShowPeopleModal,
   setShowPriceModal,
   setShowLoginModal,
-}) {
+}: Props) {
   return (
     <>
       <div className="hidden md:flex w-full h-28 bg-white rounded-3xl border border-gray300 shadow-md">
@@ -34,4 +43,4 @@ function Filter({
   );
 }
 
-export default Filter;
+export default memo(Filter);
diff --git a/src/pages/LandingPage/PartyFilter/PeopleModal/index.jsx b/src/pages/LandingPage/PartyFilter/PeopleModal/index.tsx
similarity index 68%
rename from src/pages/LandingPage/PartyFilter/PeopleModal/index.jsx
rename to src/pages/LandingPage/PartyFilter/PeopleModal/index.tsx
index ef5ec1d6..d7643bb8 100644
--- a/src/pages/LandingPage/PartyFilter/PeopleModal/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/PeopleModal/index.tsx
@@ -1,29 +1,48 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
 import { setNum } from "../../../../redux/modules/partyFilterSlice";
 import minusGray from "../../../../assets/svg/people_minus_gray.svg";
 import minusPrimary from "../../../../assets/svg/people_minus_primary.svg";
 import plusgray from "../../../../assets/svg/people_plus_gray.svg";
 import plusPrimary from "../../../../assets/svg/people_plus_primary.svg";
+import clsx from "clsx";
 
-function PeopleModal({ showModal, setShowModal }) {
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PeopleModal({ showModal, setShowModal }: Props) {
   const dispatch = useDispatch();
-  const modalRef = useRef();
-  const num = useSelector((state) => state.partyFilter.num);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const num = useSelector((state: RootState) => state.partyFilter.num);
   const [modalNum, setModalNum] = useState(1);
 
-  const setIncrease = () => setModalNum(modalNum + 1);
-  const setDecrease = () => setModalNum(modalNum - 1);
+  const setIncrease = useCallback(() => setModalNum(modalNum + 1), [modalNum]);
+  const setDecrease = useCallback(() => setModalNum(modalNum - 1), [modalNum]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     dispatch(setNum(modalNum));
     setShowModal(false);
-  };
+  }, [modalNum]);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) setShowModal(false);
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) setShowModal(false);
+    },
+    [modalRef]
+  );
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -34,16 +53,18 @@ function PeopleModal({ showModal, setShowModal }) {
 
   return createPortal(
     <div
-      className={`modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex ${
-        showModal ? "active" : ""
-      }`}
+      className={clsx(
+        "modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex",
+        showModal && "active"
+      )}
       ref={modalRef}
-      onClick={(e) => modalOutSideClick(e)}
+      onClick={modalOutSideClick}
     >
       <div
-        className={`mx-auto mt-auto shadow w-full rounded-xl duration-700 ${
+        className={clsx(
+          "mx-auto mt-auto shadow w-full rounded-xl duration-500",
           showModal ? "translate-y-0" : "translate-y-full"
-        }`}
+        )}
       >
         <div className="w-full h-80 text-center bg-white rounded-t-xl relative">
           <div className="absolute top-0 left-0 text-left px-6 pt-5">
@@ -74,29 +95,32 @@ function PeopleModal({ showModal, setShowModal }) {
           <div className="w-full h-full pt-20 flex flex-col justify-end">
             <div className="w-full flex justify-center items-center">
               <button
-                className={`w-7 h-7 rounded-full ring-1 flex justify-center items-center ${
+                className={clsx(
+                  "w-7 h-7 rounded-full ring-1 flex justify-center items-center",
                   modalNum === 1
                     ? "bg-lightgray ring-[#BABABA]"
                     : "bg-skyblue ring-primary"
-                }`}
+                )}
                 onClick={setDecrease}
                 disabled={modalNum === 1}
               >
                 <img src={modalNum === 1 ? minusGray : minusPrimary} />
               </button>
               <div
-                className={`w-16 h-7 text-center text-2xl leading-7 font-bold ${
+                className={clsx(
+                  "w-16 h-7 text-center text-2xl leading-7 font-bold",
                   modalNum === 1 ? "text-gray400" : "text-gray800"
-                }`}
+                )}
               >
                 {modalNum}
               </div>
               <button
-                className={`w-7 h-7 rounded-full ring-1 flex justify-center items-center ${
+                className={clsx(
+                  "w-7 h-7 rounded-full ring-1 flex justify-center items-center",
                   modalNum === 10
                     ? "bg-lightgray ring-[#BABABA]"
                     : "bg-skyblue ring-primary"
-                }`}
+                )}
                 onClick={setIncrease}
                 disabled={modalNum === 10}
               >
@@ -119,4 +143,4 @@ function PeopleModal({ showModal, setShowModal }) {
   );
 }
 
-export default PeopleModal;
+export default memo(PeopleModal);
diff --git a/src/pages/LandingPage/PartyFilter/PriceModal/index.jsx b/src/pages/LandingPage/PartyFilter/PriceModal/index.tsx
similarity index 70%
rename from src/pages/LandingPage/PartyFilter/PriceModal/index.jsx
rename to src/pages/LandingPage/PartyFilter/PriceModal/index.tsx
index 3caad410..859437b7 100644
--- a/src/pages/LandingPage/PartyFilter/PriceModal/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/PriceModal/index.tsx
@@ -1,34 +1,57 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { setPrice } from "../../../../redux/modules/partyFilterSlice";
+import { RootState } from "../../../../redux/store";
+import clsx from "clsx";
 
-function PriceModal({ showModal, setShowModal }) {
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PriceModal({ showModal, setShowModal }: Props) {
   const dispatch = useDispatch();
-  const modalRef = useRef();
-  const buttonRef = useRef();
-  const price = useSelector((state) => state.partyFilter.price);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const price = useSelector((state: RootState) => state.partyFilter.price);
   const [modalPrice, setModalPrice] = useState(310000);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     dispatch(setPrice(modalPrice));
     setShowModal(false);
-  };
+  }, [modalPrice]);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) setShowModal(false);
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) setShowModal(false);
+    },
+    [modalRef]
+  );
 
-  const handleKeyPress = (event) => {
-    if (event.key === "Escape") setShowModal(false);
-    else if (event.key === "Enter") buttonRef.current.click();
-  };
+  const handleKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") setShowModal(false);
+      else if (event.key === "Enter") buttonRef.current?.click();
+    },
+    [buttonRef]
+  );
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
     document.body.classList.add("overflow-hidden");
 
-    setModalPrice(price);
+    const numPrice = typeof price === "string" ? parseInt(price) : price;
+    setModalPrice(numPrice);
 
     document.addEventListener("keydown", handleKeyPress);
     return () => {
@@ -38,16 +61,18 @@ function PriceModal({ showModal, setShowModal }) {
 
   return createPortal(
     <div
-      className={`modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex ${
-        showModal ? "active" : ""
-      }`}
+      className={clsx(
+        "modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex",
+        showModal && "active"
+      )}
       ref={modalRef}
-      onClick={(e) => modalOutSideClick(e)}
+      onClick={modalOutSideClick}
     >
       <div
-        className={`mx-auto mt-auto md:my-auto shadow w-full md:w-96 rounded-xl duration-700 md:translate-y-0 ${
+        className={clsx(
+          "mx-auto mt-auto md:my-auto shadow w-full md:w-96 rounded-xl duration-500 md:translate-y-0",
           showModal ? "translate-y-16" : "translate-y-full"
-        }`}
+        )}
       >
         <div className="w-full h-80 md:h-64 text-center bg-white rounded-t-xl relative">
           <div className="absolute top-0 left-0 text-left px-6 pt-5">
@@ -94,7 +119,7 @@ function PriceModal({ showModal, setShowModal }) {
                   step={10000}
                   name="modalPrice"
                   value={modalPrice}
-                  onChange={(e) => setModalPrice(e.target.value)}
+                  onChange={(e) => setModalPrice(parseInt(e.target.value))}
                 />
               </div>
             </div>
@@ -126,4 +151,4 @@ function PriceModal({ showModal, setShowModal }) {
   );
 }
 
-export default PriceModal;
+export default memo(PriceModal);
diff --git a/src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.jsx b/src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.tsx
similarity index 68%
rename from src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.jsx
rename to src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.tsx
index 7d77d9f9..1d0a80c2 100644
--- a/src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/RegionModal/RegionButton/index.tsx
@@ -1,6 +1,19 @@
+import { Dispatch, memo, SetStateAction } from "react";
 import regionCheck from "../../../../../assets/svg/region-check.svg";
 
-function RegionButton({ image, name, selectedRegion, setSelectedRegion }) {
+interface Props {
+  image: string;
+  name: string;
+  selectedRegion: string;
+  setSelectedRegion: Dispatch<SetStateAction<string>>;
+}
+
+function RegionButton({
+  image,
+  name,
+  selectedRegion,
+  setSelectedRegion,
+}: Props) {
   return (
     <div
       className="relative cursor-pointer"
@@ -23,4 +36,4 @@ function RegionButton({ image, name, selectedRegion, setSelectedRegion }) {
   );
 }
 
-export default RegionButton;
+export default memo(RegionButton);
diff --git a/src/pages/LandingPage/PartyFilter/RegionModal/index.jsx b/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
similarity index 70%
rename from src/pages/LandingPage/PartyFilter/RegionModal/index.jsx
rename to src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
index 464eb414..dff88952 100644
--- a/src/pages/LandingPage/PartyFilter/RegionModal/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
@@ -1,44 +1,75 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { setRegion } from "../../../../redux/modules/partyFilterSlice";
 import { getPartyRegionList } from "../../../../api/region";
+import { RootState } from "../../../../redux/store";
 import RegionButton from "./RegionButton";
+import clsx from "clsx";
 
-function RegionModal({ showModal, setShowModal, setShowKakaoChatModal }) {
+interface RegionType {
+  image: string;
+  name: string;
+  province: string | null;
+  regionId: number;
+}
+
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  setShowKakaoChatModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function RegionModal({
+  showModal,
+  setShowModal,
+  setShowKakaoChatModal,
+}: Props) {
   const dispatch = useDispatch();
-  const modalRef = useRef();
-  const region = useSelector((state) => state.partyFilter.region);
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const region = useSelector((state: RootState) => state.partyFilter.region);
   const [selectedRegion, setSelectedRegion] = useState("");
-  const [regionData, setRegionData] = useState([]);
+  const [regionData, setRegionData] = useState<RegionType[]>([]);
 
-  const regionClickHandler = (target) => {
+  const regionClickHandler = useCallback((target: string) => {
     setShowModal(false);
     if (target.includes("그 외")) {
       setShowKakaoChatModal(true);
       return;
     }
     dispatch(setRegion(target));
-  };
+  }, []);
 
-  const closeModal = () => setShowModal(false);
+  const closeModal = useCallback(() => setShowModal(false), []);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) closeModal();
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) closeModal();
+    },
+    [modalRef]
+  );
 
-  const handleKeyPress = (event) => {
+  const handleKeyPress = useCallback((event: KeyboardEvent) => {
     if (event.key === "Escape") closeModal();
-  };
+  }, []);
 
-  const getPartyRegionListFunc = async () => {
+  const getPartyRegionListFunc = useCallback(async () => {
     try {
       const result = await getPartyRegionList();
       setRegionData(result.payload);
     } catch (e) {
       console.log(e);
     }
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -58,16 +89,18 @@ function RegionModal({ showModal, setShowModal, setShowKakaoChatModal }) {
 
   return createPortal(
     <div
-      className={`modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex ${
-        showModal ? "active" : ""
-      }`}
+      className={clsx(
+        "modal-container fixed top-0 left-0 z-50 w-screen h-real-screen bg-darkgray bg-opacity-50 scale-100 flex",
+        showModal && "active"
+      )}
       ref={modalRef}
-      onClick={(e) => modalOutSideClick(e)}
+      onClick={modalOutSideClick}
     >
       <div
-        className={`mx-auto mt-auto md:my-auto shadow w-full max-w-[700px] rounded-xl md:translate-y-0 duration-700 ${
+        className={clsx(
+          "mx-auto mt-auto md:my-auto shadow w-full max-w-[700px] rounded-xl md:translate-y-0 duration-500",
           showModal ? "translate-y-16" : "translate-y-full"
-        }`}
+        )}
       >
         <div className="h-full bg-white rounded-t-xl max-h-[600px] relative">
           <div className="px-6 py-5">
@@ -134,4 +167,4 @@ function RegionModal({ showModal, setShowModal, setShowKakaoChatModal }) {
   );
 }
 
-export default RegionModal;
+export default memo(RegionModal);
diff --git a/src/pages/LandingPage/PartyFilter/index.jsx b/src/pages/LandingPage/PartyFilter/index.tsx
similarity index 85%
rename from src/pages/LandingPage/PartyFilter/index.jsx
rename to src/pages/LandingPage/PartyFilter/index.tsx
index 386e1e38..6d6ced53 100644
--- a/src/pages/LandingPage/PartyFilter/index.jsx
+++ b/src/pages/LandingPage/PartyFilter/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { Dispatch, memo, SetStateAction, useCallback, useState } from "react";
 import CheckModal from "../../../components/CheckModal";
 import Loading from "../../../components/Loading";
 import Filter from "./Filter";
@@ -7,14 +7,18 @@ import DateModal from "./DateModal";
 import PeopleModal from "./PeopleModal";
 import PriceModal from "./PriceModal";
 
-function PartyFilter({ setShowLoginModal }) {
+interface Props {
+  setShowLoginModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function PartyFilter({ setShowLoginModal }: Props) {
   const [showRegionModal, setShowRegionModal] = useState(false);
   const [showKakaoChatModal, setShowKakaoChatModal] = useState(false);
   const [showDateModal, setShowDateModal] = useState(false);
   const [showPeopleModal, setShowPeopleModal] = useState(false);
   const [showPriceModal, setShowPriceModal] = useState(false);
 
-  const kakaoChatHandler = () => {
+  const kakaoChatHandler = useCallback(() => {
     const newWindow = window.open(
       "http://pf.kakao.com/_tfMxaG/chat",
       "_blank",
@@ -22,7 +26,7 @@ function PartyFilter({ setShowLoginModal }) {
     );
     if (newWindow) newWindow.opener = null;
     setShowKakaoChatModal(false);
-  };
+  }, []);
 
   return (
     <div className="mt-3 mb-10">
@@ -46,7 +50,7 @@ function PartyFilter({ setShowLoginModal }) {
           showKakaoChatModal ? (
             "여행을 희망하시는 지역을\n말랑트립 카카오톡으로 알려주세요.\n\n카카오톡 1:1 상담으로 이동하시겠습니까?"
           ) : (
-            <Loading />
+            <Loading full={false} />
           )
         }
         noText="아니오"
@@ -63,4 +67,4 @@ function PartyFilter({ setShowLoginModal }) {
   );
 }
 
-export default PartyFilter;
+export default memo(PartyFilter);
diff --git a/src/pages/LandingPage/PartyList/NoParty/index.jsx b/src/pages/LandingPage/PartyList/NoParty/index.tsx
similarity index 92%
rename from src/pages/LandingPage/PartyList/NoParty/index.jsx
rename to src/pages/LandingPage/PartyList/NoParty/index.tsx
index 8c5c4b1e..89f7e277 100644
--- a/src/pages/LandingPage/PartyList/NoParty/index.jsx
+++ b/src/pages/LandingPage/PartyList/NoParty/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useNavigate } from "react-router-dom";
 
 function NoParty() {
@@ -26,4 +27,4 @@ function NoParty() {
   );
 }
 
-export default NoParty;
+export default memo(NoParty);
diff --git a/src/pages/LandingPage/PartyList/PartyBox/index.jsx b/src/pages/LandingPage/PartyList/PartyBox/index.tsx
similarity index 85%
rename from src/pages/LandingPage/PartyList/PartyBox/index.jsx
rename to src/pages/LandingPage/PartyList/PartyBox/index.tsx
index d97968bb..590e6672 100644
--- a/src/pages/LandingPage/PartyList/PartyBox/index.jsx
+++ b/src/pages/LandingPage/PartyList/PartyBox/index.tsx
@@ -1,5 +1,7 @@
+import { memo, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { customRoundOne } from "../../../../utils";
+import { HeartParty } from "../../../../types";
 import basicPartyImage from "../../../../assets/images/Basic_Party_Image.jpg";
 
 function PartyBox({
@@ -10,12 +12,12 @@ function PartyBox({
   headcount,
   capacity,
   price,
-}) {
+}: HeartParty) {
   const navigate = useNavigate();
 
-  const onClickHandler = () => {
+  const onClickHandler = useCallback(() => {
     navigate(`/party/detail/${partyId}`);
-  };
+  }, [partyId]);
 
   return (
     <div className="relative h-64 cursor-pointer" onClick={onClickHandler}>
@@ -39,4 +41,4 @@ function PartyBox({
   );
 }
 
-export default PartyBox;
+export default memo(PartyBox);
diff --git a/src/pages/LandingPage/PartyList/index.jsx b/src/pages/LandingPage/PartyList/index.tsx
similarity index 77%
rename from src/pages/LandingPage/PartyList/index.jsx
rename to src/pages/LandingPage/PartyList/index.tsx
index 24ddd23f..d770e294 100644
--- a/src/pages/LandingPage/PartyList/index.jsx
+++ b/src/pages/LandingPage/PartyList/index.tsx
@@ -1,18 +1,20 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import { getPartyList } from "../../../api/party";
 import { dateToString } from "../../../utils";
+import { HeartParty } from "../../../types";
 import PartyBox from "./PartyBox";
 import NoParty from "./NoParty";
 
 function PartyList() {
   const { region, nowDate, num, price } = useSelector(
-    (state) => state.partyFilter
+    (state: RootState) => state.partyFilter
   );
-  const [partyData, setPartyData] = useState([]);
+  const [partyData, setPartyData] = useState<HeartParty[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const getData = async () => {
+  const getData = useCallback(async () => {
     const regionQuery = region === "모든 지역" ? "all" : region;
     const nowDateQuery =
       nowDate.length === 0
@@ -34,7 +36,7 @@ function PartyList() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [region, nowDate, num, price]);
 
   useEffect(() => {
     getData();
@@ -52,4 +54,4 @@ function PartyList() {
   );
 }
 
-export default PartyList;
+export default memo(PartyList);
diff --git a/src/pages/LandingPage/UserMenu/index.jsx b/src/pages/LandingPage/UserMenu/index.jsx
deleted file mode 100644
index c540d36e..00000000
--- a/src/pages/LandingPage/UserMenu/index.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useSelector } from "react-redux";
-
-function UserMenu({ userMenu, setUserMenu }) {
-  const user = useSelector((state) => state.user);
-
-  return (
-    <div className="flex flex-col sm:flex-row justify-start gap-6">
-      <button
-        className={`text-2xl font-bold transition-all duration-500 ${userMenu === "recommend" ? "text-gray800" : "text-gray400"}`}
-        onClick={() => setUserMenu("recommend")}
-        disabled={user.role !== "ROLE_USER"}
-      >
-        {user.auth ? `${user.nickname} 님께 추천하는 파티` : "추천 파티"}
-      </button>
-      {user.role === "ROLE_USER" && (
-        <button
-          className={`text-2xl font-bold transition-all duration-500 ${userMenu === "myParty" ? "text-gray800" : "text-gray400"}`}
-          onClick={() => setUserMenu("myParty")}
-          disabled={user.role !== "ROLE_USER"}
-        >
-          나의 파티
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default UserMenu;
diff --git a/src/pages/LandingPage/UserMenu/index.tsx b/src/pages/LandingPage/UserMenu/index.tsx
new file mode 100644
index 00000000..099838c2
--- /dev/null
+++ b/src/pages/LandingPage/UserMenu/index.tsx
@@ -0,0 +1,42 @@
+import { Dispatch, memo, SetStateAction } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import clsx from "clsx";
+
+interface Props {
+  userMenu: "recommend" | "myParty";
+  setUserMenu: Dispatch<SetStateAction<"recommend" | "myParty">>;
+}
+
+function UserMenu({ userMenu, setUserMenu }: Props) {
+  const user = useSelector((state: RootState) => state.user);
+
+  return (
+    <div className="flex flex-col sm:flex-row justify-start gap-6">
+      <button
+        className={clsx(
+          "text-2xl font-bold transition-all duration-500",
+          userMenu === "recommend" ? "text-gray800" : "text-gray400"
+        )}
+        onClick={() => setUserMenu("recommend")}
+        disabled={user.role !== "ROLE_USER"}
+      >
+        {user.auth ? `${user.nickname} 님께 추천하는 파티` : "추천 파티"}
+      </button>
+      {user.role === "ROLE_USER" && (
+        <button
+          className={clsx(
+            "text-2xl font-bold transition-all duration-500",
+            userMenu === "myParty" ? "text-gray800" : "text-gray400"
+          )}
+          onClick={() => setUserMenu("myParty")}
+          disabled={user.role !== "ROLE_USER"}
+        >
+          나의 파티
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default memo(UserMenu);
diff --git a/src/pages/LandingPage/index.jsx b/src/pages/LandingPage/index.tsx
similarity index 83%
rename from src/pages/LandingPage/index.jsx
rename to src/pages/LandingPage/index.tsx
index be6e11e1..bc98d937 100644
--- a/src/pages/LandingPage/index.jsx
+++ b/src/pages/LandingPage/index.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../redux/store";
 import CheckModal from "../../components/CheckModal";
 import Title from "../../components/Title";
 import PartyFilter from "./PartyFilter";
@@ -14,9 +15,11 @@ import NewMyParty from "./NewMyParty";
 
 function LandingPage() {
   const navigation = useNavigate();
-  const user = useSelector((state) => state.user);
-  const [driverMenu, setDriverMenu] = useState("driver");
-  const [userMenu, setUserMenu] = useState("recommend");
+  const user = useSelector((state: RootState) => state.user);
+  const [driverMenu, setDriverMenu] = useState<"driver" | "user">("driver");
+  const [userMenu, setUserMenu] = useState<"recommend" | "myParty">(
+    "recommend"
+  );
   const [showLoginModal, setShowLoginModal] = useState(false);
 
   useEffect(() => {
@@ -57,4 +60,4 @@ function LandingPage() {
   );
 }
 
-export default LandingPage;
+export default memo(LandingPage);