From 4217052c19456c635e184d43d48cc6f57198d587 Mon Sep 17 00:00:00 2001
From: Daehee <mok9550@ajou.ac.kr>
Date: Tue, 17 Dec 2024 00:41:36 +0900
Subject: [PATCH 1/4] refactor: Party Page

---
 src/components/PartyPlan/index.tsx            |   2 +-
 src/components/PlaceMap/index.tsx             |   2 +-
 .../ProfileModal/ProfileInfo/index.tsx        |   2 +-
 src/components/ProfileModal/index.tsx         |   2 +-
 .../AdminPage/Management/Region/index.tsx     |   8 +-
 .../UserInfo/UserTable/RegionModal/index.tsx  |   9 +-
 .../DriverApplyPage/RegionList/index.tsx      |  10 +-
 .../PartyFilter/RegionModal/index.tsx         |  10 +-
 .../BasicInfo/RegionModal/index.tsx           |   9 +-
 src/pages/NewPartyPage/Region/index.tsx       |   9 +-
 .../CancelModal/{index.jsx => index.tsx}      |  66 +++++---
 .../{index.jsx => index.tsx}                  |  10 +-
 .../CourseDnD/{index.jsx => index.tsx}        |  76 ++++++---
 src/pages/PartyPage/CreditInfo/index.tsx      |   3 +-
 .../DriverReview/{index.jsx => index.tsx}     |  10 +-
 .../AcceptModal/{index.jsx => index.tsx}      |  57 +++++--
 .../CancelModal/{index.jsx => index.tsx}      |  61 +++++--
 .../EditAgreement/{index.jsx => index.tsx}    |  44 +++--
 .../PartyPage/EditMap/ToggleButton/index.jsx  |  47 ------
 .../PartyPage/EditMap/ToggleButton/index.tsx  |  59 +++++++
 .../EditMap/{index.jsx => index.tsx}          |  44 +++--
 .../EditModal/{index.jsx => index.tsx}        | 118 +++++++++----
 .../AgreeItem/{index.jsx => index.tsx}        |  19 ++-
 src/pages/PartyPage/JoinAgreement/index.jsx   |  86 ----------
 src/pages/PartyPage/JoinAgreement/index.tsx   | 122 ++++++++++++++
 .../JoinButton/{index.jsx => index.tsx}       |  28 +++-
 .../JoinGreeting/{index.jsx => index.tsx}     |  13 +-
 .../JoinMember/MemberButton/index.jsx         |  32 ----
 .../JoinMember/MemberButton/index.tsx         |  49 ++++++
 .../JoinMember/{index.jsx => index.tsx}       |  28 +++-
 .../JoinMemberInfo/FriendInfo/index.jsx       |  43 -----
 .../JoinMemberInfo/FriendInfo/index.tsx       |  64 +++++++
 .../MyInfo/{index.jsx => index.tsx}           |   6 +-
 .../JoinMemberInfo/{index.jsx => index.tsx}   |  33 +++-
 .../JoinModal/{index.jsx => index.tsx}        | 106 +++++++-----
 .../WhatReady/{index.jsx => index.tsx}        |  15 +-
 .../MallangReady/{index.jsx => index.tsx}     |  39 ++++-
 .../AcceptModal/{index.jsx => index.tsx}      |  56 +++++--
 .../{index.jsx => index.tsx}                  |  12 +-
 .../NotFoundParty/{index.jsx => index.tsx}    |   3 +-
 .../PartyDate/{index.jsx => index.tsx}        |   9 +-
 .../PartyIntro/{index.jsx => index.tsx}       |  10 +-
 .../Status/{index.jsx => index.tsx}           |  11 +-
 .../MemberProfile/{index.jsx => index.tsx}    |  34 +++-
 .../PartyMember/{index.jsx => index.tsx}      |  34 ++--
 .../QuitModal/{index.jsx => index.tsx}        | 105 ++++++++----
 .../QuitButton/{index.jsx => index.tsx}       |  15 +-
 .../ToTalPrice/{index.jsx => index.tsx}       |  11 +-
 src/pages/PartyPage/{index.jsx => index.tsx}  | 157 +++++++++++-------
 src/types/index.ts                            |   7 +
 50 files changed, 1175 insertions(+), 630 deletions(-)
 rename src/pages/PartyPage/CancelNewPartyButton/CancelModal/{index.jsx => index.tsx} (64%)
 rename src/pages/PartyPage/CancelNewPartyButton/{index.jsx => index.tsx} (80%)
 rename src/pages/PartyPage/CourseDnD/{index.jsx => index.tsx} (69%)
 rename src/pages/PartyPage/DriverReview/{index.jsx => index.tsx} (78%)
 rename src/pages/PartyPage/EditAgreement/AcceptModal/{index.jsx => index.tsx} (69%)
 rename src/pages/PartyPage/EditAgreement/CancelModal/{index.jsx => index.tsx} (65%)
 rename src/pages/PartyPage/EditAgreement/{index.jsx => index.tsx} (75%)
 delete mode 100644 src/pages/PartyPage/EditMap/ToggleButton/index.jsx
 create mode 100644 src/pages/PartyPage/EditMap/ToggleButton/index.tsx
 rename src/pages/PartyPage/EditMap/{index.jsx => index.tsx} (57%)
 rename src/pages/PartyPage/EditModal/{index.jsx => index.tsx} (76%)
 rename src/pages/PartyPage/JoinAgreement/AgreeItem/{index.jsx => index.tsx} (65%)
 delete mode 100644 src/pages/PartyPage/JoinAgreement/index.jsx
 create mode 100644 src/pages/PartyPage/JoinAgreement/index.tsx
 rename src/pages/PartyPage/JoinButton/{index.jsx => index.tsx} (63%)
 rename src/pages/PartyPage/JoinGreeting/{index.jsx => index.tsx} (55%)
 delete mode 100644 src/pages/PartyPage/JoinMember/MemberButton/index.jsx
 create mode 100644 src/pages/PartyPage/JoinMember/MemberButton/index.tsx
 rename src/pages/PartyPage/JoinMember/{index.jsx => index.tsx} (61%)
 delete mode 100644 src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.jsx
 create mode 100644 src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.tsx
 rename src/pages/PartyPage/JoinMemberInfo/MyInfo/{index.jsx => index.tsx} (68%)
 rename src/pages/PartyPage/JoinMemberInfo/{index.jsx => index.tsx} (59%)
 rename src/pages/PartyPage/JoinModal/{index.jsx => index.tsx} (74%)
 rename src/pages/PartyPage/MallangReady/WhatReady/{index.jsx => index.tsx} (82%)
 rename src/pages/PartyPage/MallangReady/{index.jsx => index.tsx} (76%)
 rename src/pages/PartyPage/NewPartyAgreement/AcceptModal/{index.jsx => index.tsx} (69%)
 rename src/pages/PartyPage/NewPartyAgreement/{index.jsx => index.tsx} (79%)
 rename src/pages/PartyPage/NotFoundParty/{index.jsx => index.tsx} (92%)
 rename src/pages/PartyPage/PartyDate/{index.jsx => index.tsx} (66%)
 rename src/pages/PartyPage/PartyIntro/{index.jsx => index.tsx} (60%)
 rename src/pages/PartyPage/PartyMember/MemberProfile/Status/{index.jsx => index.tsx} (89%)
 rename src/pages/PartyPage/PartyMember/MemberProfile/{index.jsx => index.tsx} (65%)
 rename src/pages/PartyPage/PartyMember/{index.jsx => index.tsx} (89%)
 rename src/pages/PartyPage/QuitButton/QuitModal/{index.jsx => index.tsx} (71%)
 rename src/pages/PartyPage/QuitButton/{index.jsx => index.tsx} (85%)
 rename src/pages/PartyPage/ToTalPrice/{index.jsx => index.tsx} (71%)
 rename src/pages/PartyPage/{index.jsx => index.tsx} (86%)

diff --git a/src/components/PartyPlan/index.tsx b/src/components/PartyPlan/index.tsx
index 6c390a03..8f279cd0 100644
--- a/src/components/PartyPlan/index.tsx
+++ b/src/components/PartyPlan/index.tsx
@@ -6,7 +6,7 @@ interface Props {
   edit: boolean;
   startDate: string;
   editHandler?: () => void;
-  comment?: boolean;
+  comment?: string;
   course: Course;
 }
 
diff --git a/src/components/PlaceMap/index.tsx b/src/components/PlaceMap/index.tsx
index 80ff0be6..ee65dd03 100644
--- a/src/components/PlaceMap/index.tsx
+++ b/src/components/PlaceMap/index.tsx
@@ -18,7 +18,7 @@ import NewPlaceModal from "./NewPlaceModal";
 
 interface Props {
   search: boolean;
-  keyword: string;
+  keyword?: string;
   searchPage: boolean;
   onlyAllPlace: boolean;
   courseData?: Destination[];
diff --git a/src/components/ProfileModal/ProfileInfo/index.tsx b/src/components/ProfileModal/ProfileInfo/index.tsx
index dd1ae462..f93c0d12 100644
--- a/src/components/ProfileModal/ProfileInfo/index.tsx
+++ b/src/components/ProfileModal/ProfileInfo/index.tsx
@@ -8,7 +8,7 @@ interface Props {
   nickname: string | undefined;
   introduction: string | undefined;
   createdAt: string | undefined;
-  driverName: boolean;
+  driverName: string | boolean;
 }
 
 function ProfileInfo({
diff --git a/src/components/ProfileModal/index.tsx b/src/components/ProfileModal/index.tsx
index 6a5b93e5..76637852 100644
--- a/src/components/ProfileModal/index.tsx
+++ b/src/components/ProfileModal/index.tsx
@@ -23,7 +23,7 @@ interface Props {
   userId?: number;
   chatRoomId?: number;
   reportId?: number;
-  driverName: boolean;
+  driverName: string | boolean;
 }
 
 function ProfileModal({
diff --git a/src/pages/AdminPage/Management/Region/index.tsx b/src/pages/AdminPage/Management/Region/index.tsx
index ab39d8df..07277f47 100644
--- a/src/pages/AdminPage/Management/Region/index.tsx
+++ b/src/pages/AdminPage/Management/Region/index.tsx
@@ -1,19 +1,13 @@
 import { memo, useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { getPartyRegionList } from "../../../../api/region";
+import { RegionData } from "../../../../types";
 import Title from "../../../../components/Title";
 import ConfirmModal from "../../../../components/ConfirmModal";
 import SearchBar from "./SearchBar";
 import RegionList from "./RegionList";
 import RegionDriver from "./RegionDriver";
 
-export interface RegionData {
-  image: string;
-  name: string;
-  province: string;
-  regionId: number;
-}
-
 function Region() {
   const [searchParams] = useSearchParams();
   const [searchKeyword, setSearchKeyword] = useState("");
diff --git a/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.tsx b/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.tsx
index 08895f6f..5c9812ff 100644
--- a/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.tsx
+++ b/src/pages/AdminPage/User/UserInfo/UserTable/RegionModal/index.tsx
@@ -12,6 +12,7 @@ import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
 import { postApplyDriver } from "../../../../../../api/admin";
 import { getPartyRegionList } from "../../../../../../api/region";
+import { RegionData } from "../../../../../../types";
 import RegionButton from "./RegionButton";
 import clsx from "clsx";
 
@@ -25,13 +26,7 @@ function RegionModal({ showModal, setShowModal, userId }: Props) {
   const navigation = useNavigate();
   const modalRef = useRef<HTMLDivElement | null>(null);
   const [selectedRegion, setSelectedRegion] = useState<string[]>([]);
-  const [regionData, setRegionData] = useState<
-    {
-      image: string;
-      name: string;
-      regionId: number;
-    }[]
-  >([]);
+  const [regionData, setRegionData] = useState<RegionData[]>([]);
 
   const regionClickHandler = useCallback(async () => {
     try {
diff --git a/src/pages/DriverApplyPage/RegionList/index.tsx b/src/pages/DriverApplyPage/RegionList/index.tsx
index 56719796..43e07cfb 100644
--- a/src/pages/DriverApplyPage/RegionList/index.tsx
+++ b/src/pages/DriverApplyPage/RegionList/index.tsx
@@ -7,15 +7,9 @@ import {
   useState,
 } from "react";
 import { getPartyRegionList } from "../../../api/region";
+import { RegionData } from "../../../types";
 import Region from "./Region";
 
-interface RegionType {
-  image: string;
-  name: string;
-  province: string;
-  regionId: number;
-}
-
 interface Props {
   setActiveNext: Dispatch<SetStateAction<boolean>>;
   region: string[];
@@ -23,7 +17,7 @@ interface Props {
 }
 
 function RegionList({ setActiveNext, region, setRegion }: Props) {
-  const [regionData, setRegionData] = useState<RegionType[]>([]);
+  const [regionData, setRegionData] = useState<RegionData[]>([]);
 
   const getPartyRegionListFunc = useCallback(async () => {
     try {
diff --git a/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx b/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
index dff88952..612ab2f8 100644
--- a/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
+++ b/src/pages/LandingPage/PartyFilter/RegionModal/index.tsx
@@ -13,16 +13,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { setRegion } from "../../../../redux/modules/partyFilterSlice";
 import { getPartyRegionList } from "../../../../api/region";
 import { RootState } from "../../../../redux/store";
+import { RegionData } from "../../../../types";
 import RegionButton from "./RegionButton";
 import clsx from "clsx";
 
-interface RegionType {
-  image: string;
-  name: string;
-  province: string | null;
-  regionId: number;
-}
-
 interface Props {
   showModal: boolean;
   setShowModal: Dispatch<SetStateAction<boolean>>;
@@ -38,7 +32,7 @@ function RegionModal({
   const modalRef = useRef<HTMLDivElement | null>(null);
   const region = useSelector((state: RootState) => state.partyFilter.region);
   const [selectedRegion, setSelectedRegion] = useState("");
-  const [regionData, setRegionData] = useState<RegionType[]>([]);
+  const [regionData, setRegionData] = useState<RegionData[]>([]);
 
   const regionClickHandler = useCallback((target: string) => {
     setShowModal(false);
diff --git a/src/pages/MyProfilePage/DriverProfile/BasicInfo/RegionModal/index.tsx b/src/pages/MyProfilePage/DriverProfile/BasicInfo/RegionModal/index.tsx
index a4926779..025b9eac 100644
--- a/src/pages/MyProfilePage/DriverProfile/BasicInfo/RegionModal/index.tsx
+++ b/src/pages/MyProfilePage/DriverProfile/BasicInfo/RegionModal/index.tsx
@@ -9,17 +9,10 @@ import {
   useState,
 } from "react";
 import { getPartyRegionList } from "../../../../../api/region";
-import { DriverInfo } from "../../../../../types";
+import { DriverInfo, RegionData } from "../../../../../types";
 import Region from "./Region";
 import clsx from "clsx";
 
-interface RegionData {
-  image: string;
-  name: string;
-  province: string | null;
-  regionId: number;
-}
-
 interface Props {
   showModal: boolean;
   setShowModal: Dispatch<SetStateAction<boolean>>;
diff --git a/src/pages/NewPartyPage/Region/index.tsx b/src/pages/NewPartyPage/Region/index.tsx
index da663169..56cd7671 100644
--- a/src/pages/NewPartyPage/Region/index.tsx
+++ b/src/pages/NewPartyPage/Region/index.tsx
@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 import { getPartyRegionList } from "../../../api/region";
-import { DriverInfo, Review } from "../../../types";
+import { DriverInfo, RegionData, Review } from "../../../types";
 import CheckModal from "../../../components/CheckModal";
 import Title from "../../../components/Title";
 import RegionButton from "./RegionButton";
@@ -19,13 +19,6 @@ interface DriverInfoType extends DriverInfo {
   reviews: Review[];
 }
 
-interface RegionData {
-  image: string;
-  name: string;
-  province: string | null;
-  regionId: number;
-}
-
 interface Props {
   setRegion: Dispatch<SetStateAction<string>>;
   member: number;
diff --git a/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.jsx b/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
similarity index 64%
rename from src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.jsx
rename to src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
index dd858252..f685cef8 100644
--- a/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.jsx
+++ b/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
@@ -1,16 +1,31 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { deleteNewParty } from "../../../../api/party";
+import clsx from "clsx";
 
-function CancelModal({ showModal, setShowModal }) {
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+}
+
+function CancelModal({ showModal, setShowModal }: Props) {
   const navigation = useNavigate();
-  const modalRef = useRef();
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const { partyId } = useParams();
   const [message, setMessage] = useState("");
   const [complete, setComplete] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const CancelHandler = async () => {
+  const CancelHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -25,24 +40,30 @@ function CancelModal({ showModal, setShowModal }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [loading, partyId]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (complete) navigation("/", { replace: true });
     setShowModal(false);
-  };
+  }, [complete]);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) closeModal();
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) closeModal();
+    },
+    [modalRef]
+  );
 
-  const handleKeyPress = (event) => {
-    if (event.key === "Escape") closeModal();
-    else if (event.key === "Enter") {
-      if (!complete) return CancelHandler();
-      else navigation("/", { replace: true });
-    }
-  };
+  const handleKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeModal();
+      else if (event.key === "Enter") {
+        if (!complete) return CancelHandler();
+        else navigation("/", { replace: true });
+      }
+    },
+    [complete]
+  );
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -59,11 +80,12 @@ function CancelModal({ showModal, setShowModal }) {
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -97,4 +119,4 @@ function CancelModal({ showModal, setShowModal }) {
   );
 }
 
-export default CancelModal;
+export default memo(CancelModal);
diff --git a/src/pages/PartyPage/CancelNewPartyButton/index.jsx b/src/pages/PartyPage/CancelNewPartyButton/index.tsx
similarity index 80%
rename from src/pages/PartyPage/CancelNewPartyButton/index.jsx
rename to src/pages/PartyPage/CancelNewPartyButton/index.tsx
index 6825a11a..a3df10a6 100644
--- a/src/pages/PartyPage/CancelNewPartyButton/index.jsx
+++ b/src/pages/PartyPage/CancelNewPartyButton/index.tsx
@@ -1,8 +1,12 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import CancelModal from "./CancelModal";
 import BottomButton from "../../../components/BottomButton";
 
-function CancelNewPartyButton({ isDriver }) {
+interface Props {
+  isDriver: boolean;
+}
+
+function CancelNewPartyButton({ isDriver }: Props) {
   const [showModal, setShowModal] = useState(false);
 
   if (isDriver) return null;
@@ -25,4 +29,4 @@ function CancelNewPartyButton({ isDriver }) {
   );
 }
 
-export default CancelNewPartyButton;
+export default memo(CancelNewPartyButton);
diff --git a/src/pages/PartyPage/CourseDnD/index.jsx b/src/pages/PartyPage/CourseDnD/index.tsx
similarity index 69%
rename from src/pages/PartyPage/CourseDnD/index.jsx
rename to src/pages/PartyPage/CourseDnD/index.tsx
index f7a92b65..2dd7c185 100644
--- a/src/pages/PartyPage/CourseDnD/index.jsx
+++ b/src/pages/PartyPage/CourseDnD/index.tsx
@@ -1,10 +1,35 @@
-import { useEffect, useState } from "react";
+import {
+  Dispatch,
+  ForwardedRef,
+  memo,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 import { dateToStringHan } from "../../../utils";
+import { Course, Destination } from "../../../types";
 import dragIcon from "../../../assets/svg/dragIcon.svg";
 import deleteIcon from "../../../assets/svg/x-modal-icon.svg";
 import ConfirmModal from "../../../components/ConfirmModal";
 import TimeModal from "../../DriverCoursePage/CourseDnD/TimeModal";
+import clsx from "clsx";
+
+interface Props {
+  name: string;
+  setName: Dispatch<SetStateAction<string>>;
+  course: Course;
+  startDate: string;
+  hours: number;
+  courseData: Destination[];
+  setCourseData: Dispatch<SetStateAction<Destination[]>>;
+  startTime: string;
+  endTime: string;
+  setStartTime: Dispatch<SetStateAction<string>>;
+  shakeCourse?: boolean;
+  courseRef?: ForwardedRef<HTMLDivElement>;
+}
 
 function CourseDnD({
   name,
@@ -19,24 +44,29 @@ function CourseDnD({
   setStartTime,
   shakeCourse,
   courseRef,
-}) {
+}: Props) {
   const [showText, setShowText] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [showTimeModal, setShowTimeModal] = useState(false);
 
-  const handleChange = (result) => {
-    if (!result.destination) return;
-    const items = [...courseData];
-    const [reorderedItem] = items.splice(result.source.index, 1);
-    items.splice(result.destination.index, 0, reorderedItem);
-    setCourseData(items);
-  };
-
-  const deleteHandler = (targetIndex) => {
-    if (courseData.length === 2) return setShowModal(true);
+  const handleChange = useCallback(
+    (result: any) => {
+      if (!result.destination) return;
+      const items = [...courseData];
+      const [reorderedItem] = items.splice(result.source.index, 1);
+      items.splice(result.destination.index, 0, reorderedItem);
+      setCourseData(items);
+    },
+    [courseData]
+  );
 
-    setCourseData(courseData.filter((_, index) => index !== targetIndex));
-  };
+  const deleteHandler = useCallback(
+    (targetIndex: number) => {
+      if (courseData.length === 2) return setShowModal(true);
+      setCourseData(courseData.filter((_, index) => index !== targetIndex));
+    },
+    [courseData]
+  );
 
   useEffect(() => {
     if (courseData.length === 0) {
@@ -49,7 +79,7 @@ function CourseDnD({
   }, [shakeCourse]);
 
   return (
-    <div ref={courseRef} className={`${shakeCourse && "animate-shake"}`}>
+    <div ref={courseRef} className={clsx(shakeCourse && "animate-shake")}>
       <div className="mt-20 font-bold flex flex-col items-center gap-6">
         <input
           type="text"
@@ -58,7 +88,9 @@ function CourseDnD({
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-        <div className={`${showText ? "text-red-600" : "text-white"} text-sm`}>
+        <div
+          className={clsx("text-sm", showText ? "text-red-600" : "text-white")}
+        >
           {courseData.length === 0 && "여행지를 추가해주세요!"}
         </div>
         <div className="text-primary text-lg">
@@ -85,9 +117,10 @@ function CourseDnD({
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                         ref={provided.innerRef}
-                        className={`bg-white w-4/5 md:w-[700px] h-[83px] mx-auto text-boldblue text-lg md:text-xl text-bold flex items-center ${
+                        className={clsx(
+                          "bg-white w-4/5 md:w-[700px] h-[83px] mx-auto text-boldblue text-lg md:text-xl text-bold flex items-center",
                           snapshot.isDragging && "border-2 border-primary"
-                        }`}
+                        )}
                       >
                         <img
                           src={dragIcon}
@@ -96,7 +129,10 @@ function CourseDnD({
                         />
                         <div>{item.name}</div>
                         <div
-                          className={`ml-auto ${index === 0 && "cursor-pointer hover:font-bold"}`}
+                          className={clsx(
+                            "ml-auto",
+                            index === 0 && "cursor-pointer hover:font-bold"
+                          )}
                           onClick={() => index === 0 && setShowTimeModal(true)}
                         >
                           {index === 0
@@ -137,4 +173,4 @@ function CourseDnD({
   );
 }
 
-export default CourseDnD;
+export default memo(CourseDnD);
diff --git a/src/pages/PartyPage/CreditInfo/index.tsx b/src/pages/PartyPage/CreditInfo/index.tsx
index cba48212..78ac750a 100644
--- a/src/pages/PartyPage/CreditInfo/index.tsx
+++ b/src/pages/PartyPage/CreditInfo/index.tsx
@@ -1,14 +1,13 @@
 import { memo, useCallback, useEffect, useState } from "react";
 import { priceToString, dateToKoreanDataTime } from "../../../utils";
 import { postPaymentAgain } from "../../../api/card";
-import { partyStatusObj } from "../../../utils/data";
 import CheckModal from "../../../components/CheckModal";
 import ConfirmModal from "../../../components/ConfirmModal";
 
 interface Props {
   totalPrice: number;
   capacity: number;
-  partyStatus?: keyof typeof partyStatusObj;
+  partyStatus?: string;
   paymentAmount?: number;
   createdAt?: string;
   receiptUrl?: string | null;
diff --git a/src/pages/PartyPage/DriverReview/index.jsx b/src/pages/PartyPage/DriverReview/index.tsx
similarity index 78%
rename from src/pages/PartyPage/DriverReview/index.jsx
rename to src/pages/PartyPage/DriverReview/index.tsx
index 6c2a3547..da851ac7 100644
--- a/src/pages/PartyPage/DriverReview/index.jsx
+++ b/src/pages/PartyPage/DriverReview/index.tsx
@@ -1,7 +1,13 @@
+import { memo } from "react";
 import { useNavigate } from "react-router-dom";
 import { computeGapDay } from "../../../utils";
 
-function DriverReview({ driverId, startDate }) {
+interface Props {
+  driverId: number;
+  startDate: string;
+}
+
+function DriverReview({ driverId, startDate }: Props) {
   const navigation = useNavigate();
 
   if (computeGapDay(startDate) > 0) return null;
@@ -20,4 +26,4 @@ function DriverReview({ driverId, startDate }) {
   );
 }
 
-export default DriverReview;
+export default memo(DriverReview);
diff --git a/src/pages/PartyPage/EditAgreement/AcceptModal/index.jsx b/src/pages/PartyPage/EditAgreement/AcceptModal/index.tsx
similarity index 69%
rename from src/pages/PartyPage/EditAgreement/AcceptModal/index.jsx
rename to src/pages/PartyPage/EditAgreement/AcceptModal/index.tsx
index 85635f15..a51b587d 100644
--- a/src/pages/PartyPage/EditAgreement/AcceptModal/index.jsx
+++ b/src/pages/PartyPage/EditAgreement/AcceptModal/index.tsx
@@ -1,5 +1,23 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { putProposalAccept } from "../../../../api/party";
+import clsx from "clsx";
+
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  getPartyData: (toScrollTop?: boolean) => void;
+  accept: boolean;
+  proposalId: number;
+}
 
 function AcceptModal({
   showModal,
@@ -7,13 +25,13 @@ function AcceptModal({
   getPartyData,
   accept,
   proposalId,
-}) {
-  const modalRef = useRef();
+}: Props) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const [message, setMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
 
-  const acceptHandler = async () => {
+  const acceptHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -29,21 +47,23 @@ function AcceptModal({
     } finally {
       setLoading(false);
     }
-  };
+  }, [loading, proposalId, accept]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (complete) getPartyData();
-
     setShowModal(false);
-  };
+  }, [complete]);
 
-  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();
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -65,11 +85,12 @@ function AcceptModal({
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -103,4 +124,4 @@ function AcceptModal({
   );
 }
 
-export default AcceptModal;
+export default memo(AcceptModal);
diff --git a/src/pages/PartyPage/EditAgreement/CancelModal/index.jsx b/src/pages/PartyPage/EditAgreement/CancelModal/index.tsx
similarity index 65%
rename from src/pages/PartyPage/EditAgreement/CancelModal/index.jsx
rename to src/pages/PartyPage/EditAgreement/CancelModal/index.tsx
index b697e592..9533279b 100644
--- a/src/pages/PartyPage/EditAgreement/CancelModal/index.jsx
+++ b/src/pages/PartyPage/EditAgreement/CancelModal/index.tsx
@@ -1,13 +1,35 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { deleteProposalCancel } from "../../../../api/party";
+import clsx from "clsx";
 
-function CancelModal({ showModal, setShowModal, getPartyData, proposalId }) {
-  const modalRef = useRef();
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  getPartyData: (toScrollTop?: boolean) => void;
+  proposalId: number;
+}
+
+function CancelModal({
+  showModal,
+  setShowModal,
+  getPartyData,
+  proposalId,
+}: Props) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const [message, setMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
 
-  const cancelHandler = async () => {
+  const cancelHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -22,21 +44,23 @@ function CancelModal({ showModal, setShowModal, getPartyData, proposalId }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [loading, proposalId]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (complete) getPartyData(true);
-
     setShowModal(false);
-  };
+  }, [complete]);
 
-  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();
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -53,11 +77,12 @@ function CancelModal({ showModal, setShowModal, getPartyData, proposalId }) {
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -91,4 +116,4 @@ function CancelModal({ showModal, setShowModal, getPartyData, proposalId }) {
   );
 }
 
-export default CancelModal;
+export default memo(CancelModal);
diff --git a/src/pages/PartyPage/EditAgreement/index.jsx b/src/pages/PartyPage/EditAgreement/index.tsx
similarity index 75%
rename from src/pages/PartyPage/EditAgreement/index.jsx
rename to src/pages/PartyPage/EditAgreement/index.tsx
index a9b43b8f..1ec019d9 100644
--- a/src/pages/PartyPage/EditAgreement/index.jsx
+++ b/src/pages/PartyPage/EditAgreement/index.tsx
@@ -1,8 +1,22 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import { numberTo00 } from "../../../utils";
 import AcceptModal from "./AcceptModal";
 import CancelModal from "./CancelModal";
+import clsx from "clsx";
+
+interface Props {
+  myParty: boolean;
+  partyStatus: string;
+  createdAt: string;
+  getPartyData: (toScrollTop?: boolean) => void;
+  proposalId: number;
+  agreement: {
+    userId: number;
+    status: string;
+  }[];
+}
 
 function EditAgreement({
   myParty,
@@ -11,24 +25,29 @@ function EditAgreement({
   getPartyData,
   proposalId,
   agreement,
-}) {
-  const user = useSelector((state) => state.user);
+}: Props) {
+  const user = useSelector((state: RootState) => state.user);
   const [diffMinute, setDiffMinute] = useState(0);
   const [accept, setAccept] = useState(true);
   const [showModal, setShowModal] = useState(false);
-  const showButton =
-    agreement.find((item) => item.userId === user.userId)?.status === "WAITING"
-      ? "block"
-      : "hidden";
 
-  const diffMinuteHandler = () => setDiffMinute((diffMinute) => diffMinute - 1);
+  const showButton = useMemo(() => {
+    const myAgreement = agreement.find((item) => item.userId === user.userId);
+    if (myAgreement && myAgreement.status === "WAITING") return "block";
+    return "hidden";
+  }, [agreement, user]);
+
+  const diffMinuteHandler = useCallback(
+    () => setDiffMinute((diffMinute) => diffMinute - 1),
+    [diffMinute]
+  );
 
   useEffect(() => {
     const now = new Date();
     const end = new Date(createdAt);
     end.setDate(end.getDate() + 1);
 
-    setDiffMinute(Math.floor((end - now) / (1000 * 60)));
+    setDiffMinute(Math.floor((Number(end) - Number(now)) / (1000 * 60)));
     setInterval(() => diffMinuteHandler(), 60000);
   }, []);
 
@@ -36,9 +55,10 @@ function EditAgreement({
     <>
       <div className="my-7">
         <div
-          className={`flex gap-5 ml-0 ${
+          className={clsx(
+            "flex gap-5 ml-0",
             myParty ? `sm:ml-10 ${showButton}` : "sm:ml-24"
-          }`}
+          )}
         >
           {myParty && (
             <button
@@ -104,4 +124,4 @@ function EditAgreement({
   );
 }
 
-export default EditAgreement;
+export default memo(EditAgreement);
diff --git a/src/pages/PartyPage/EditMap/ToggleButton/index.jsx b/src/pages/PartyPage/EditMap/ToggleButton/index.jsx
deleted file mode 100644
index fe53c73e..00000000
--- a/src/pages/PartyPage/EditMap/ToggleButton/index.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useState } from "react";
-import ConfirmModal from "../../../../components/ConfirmModal";
-
-function ToggleButton({ showSearchMap, setShowSearchMap, canToggle }) {
-  const [showModal, setShowModal] = useState(false);
-
-  return (
-    <>
-      <div className="mt-14 mb-7 w-72 mx-auto flex justify-between border border-primary rounded-full relative">
-        <button
-          className={`w-36 py-3 text-center text-sm transform duration-700 ${
-            showSearchMap ? "text-white" : "text-darkgray"
-          }`}
-          onClick={() => {
-            if (!canToggle) return setShowModal(true);
-            setShowSearchMap(true);
-          }}
-        >
-          여행지 검색
-        </button>
-        <button
-          className={`w-36 py-3 text-center text-sm transform duration-700 ${
-            showSearchMap ? "text-darkgray" : "text-white"
-          }`}
-          onClick={() => {
-            if (!canToggle) return setShowModal(true);
-            setShowSearchMap(false);
-          }}
-        >
-          여행 코스
-        </button>
-        <div
-          className={`w-36 h-full absolute top-0 left-0 -z-10 bg-primary rounded-full transform duration-700 ${
-            showSearchMap ? "translate-x-0" : "translate-x-36"
-          }`}
-        />
-      </div>
-      <ConfirmModal
-        showModal={showModal}
-        setShowModal={setShowModal}
-        message={"여행지를 추가해주세요."}
-      />
-    </>
-  );
-}
-
-export default ToggleButton;
diff --git a/src/pages/PartyPage/EditMap/ToggleButton/index.tsx b/src/pages/PartyPage/EditMap/ToggleButton/index.tsx
new file mode 100644
index 00000000..b0241831
--- /dev/null
+++ b/src/pages/PartyPage/EditMap/ToggleButton/index.tsx
@@ -0,0 +1,59 @@
+import { Dispatch, memo, SetStateAction, useCallback, useState } from "react";
+import ConfirmModal from "../../../../components/ConfirmModal";
+import clsx from "clsx";
+
+interface Props {
+  showSearchMap: boolean;
+  setShowSearchMap: Dispatch<SetStateAction<boolean>>;
+  canToggle: boolean;
+}
+
+function ToggleButton({ showSearchMap, setShowSearchMap, canToggle }: Props) {
+  const [showModal, setShowModal] = useState(false);
+
+  const toggleHandler = useCallback(
+    (isSearchMode: boolean) => {
+      if (!canToggle) return setShowModal(true);
+      setShowSearchMap(isSearchMode);
+    },
+    [canToggle]
+  );
+
+  return (
+    <>
+      <div className="mt-14 mb-7 w-72 mx-auto flex justify-between border border-primary rounded-full relative">
+        <button
+          className={clsx(
+            "w-36 py-3 text-center text-sm transform duration-500",
+            showSearchMap ? "text-white" : "text-darkgray"
+          )}
+          onClick={() => toggleHandler(true)}
+        >
+          여행지 검색
+        </button>
+        <button
+          className={clsx(
+            "w-36 py-3 text-center text-sm transform duration-500",
+            showSearchMap ? "text-darkgray" : "text-white"
+          )}
+          onClick={() => toggleHandler(false)}
+        >
+          여행 코스
+        </button>
+        <div
+          className={clsx(
+            "w-36 h-full absolute top-0 left-0 -z-10 bg-primary rounded-full transform duration-500",
+            showSearchMap ? "translate-x-0" : "translate-x-36"
+          )}
+        />
+      </div>
+      <ConfirmModal
+        showModal={showModal}
+        setShowModal={setShowModal}
+        message="여행지를 추가해주세요."
+      />
+    </>
+  );
+}
+
+export default memo(ToggleButton);
diff --git a/src/pages/PartyPage/EditMap/index.jsx b/src/pages/PartyPage/EditMap/index.tsx
similarity index 57%
rename from src/pages/PartyPage/EditMap/index.jsx
rename to src/pages/PartyPage/EditMap/index.tsx
index dede9fd8..6a596d09 100644
--- a/src/pages/PartyPage/EditMap/index.jsx
+++ b/src/pages/PartyPage/EditMap/index.tsx
@@ -1,31 +1,48 @@
-import { useEffect, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { getPartyRegionList } from "../../../api/region";
+import { Destination, RegionData } from "../../../types";
 import CourseMap from "../../../components/CourseMap";
 import PlaceMap from "../../../components/PlaceMap";
 import ToggleButton from "./ToggleButton";
 
-function EditMap({ courseData, setCourseData, setRegion }) {
+interface Props {
+  courseData: Destination[];
+  setCourseData: Dispatch<SetStateAction<Destination[]>>;
+  setRegion: Dispatch<SetStateAction<string>>;
+}
+
+function EditMap({ courseData, setCourseData, setRegion }: Props) {
   const [showSearchMap, setShowSearchMap] = useState(true);
-  const [regionData, setRegionData] = useState([]);
+  const [regionData, setRegionData] = useState<RegionData[]>([]);
 
-  const findRegion = (index) => {
-    if (courseData.length === index) return null;
+  const findRegion = useCallback(
+    (index: number): string => {
+      if (courseData.length === index) return "";
 
-    const targetRegion = regionData.filter((region) =>
-      courseData[index]?.address?.includes(region.name)
-    )[0];
+      const targetRegion = regionData.filter((region) =>
+        courseData[index]?.address?.includes(region.name)
+      )[0];
 
-    return targetRegion?.name || findRegion(index + 1);
-  };
+      return targetRegion?.name || findRegion(index + 1);
+    },
+    [regionData, courseData]
+  );
 
-  const getPartyRegionListFunc = async () => {
+  const getPartyRegionListFunc = useCallback(async () => {
     try {
       const result = await getPartyRegionList();
       setRegionData(result.payload);
     } catch (e) {
       console.log(e);
     }
-  };
+  }, []);
 
   useEffect(() => {
     getPartyRegionListFunc();
@@ -51,7 +68,6 @@ function EditMap({ courseData, setCourseData, setRegion }) {
       {showSearchMap ? (
         <PlaceMap
           search={true}
-          newPlace={true}
           searchPage={false}
           courseData={courseData}
           setCourseData={setCourseData}
@@ -68,4 +84,4 @@ function EditMap({ courseData, setCourseData, setRegion }) {
   );
 }
 
-export default EditMap;
+export default memo(EditMap);
diff --git a/src/pages/PartyPage/EditModal/index.jsx b/src/pages/PartyPage/EditModal/index.tsx
similarity index 76%
rename from src/pages/PartyPage/EditModal/index.jsx
rename to src/pages/PartyPage/EditModal/index.tsx
index ce8dd3dd..a4e68946 100644
--- a/src/pages/PartyPage/EditModal/index.jsx
+++ b/src/pages/PartyPage/EditModal/index.tsx
@@ -1,8 +1,46 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { postPartyJoin, putPartyCourse } from "../../../api/party";
 import { priceToString } from "../../../utils";
+import { Course, Destination } from "../../../types";
+import { isGAlive } from "../../../utils/ga";
 import ReactGA from "react-ga4";
+import clsx from "clsx";
+
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  content: string;
+  memberCount: number;
+  companions: {
+    name: string;
+    phoneNumber: string;
+  }[];
+  getPartyData: (toScrollTop?: boolean) => void;
+  capacity: number;
+  headcount: number;
+  totalPrice: number;
+  partyName: string;
+  course: Course;
+  myParty: boolean;
+  courseData: Destination[];
+  region: string;
+  name: string;
+  startTime: string;
+  endTime: string;
+  promotionId: number;
+}
 
 function EditModal({
   showModal,
@@ -23,16 +61,20 @@ function EditModal({
   startTime,
   endTime,
   promotionId,
-}) {
+}: Props) {
   const navigation = useNavigate();
-  const modalRef = useRef();
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const { partyId } = useParams();
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState<string | ReactNode>("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
-  const isMemberFull = headcount + memberCount === capacity;
 
-  const editPartyHandler = async () => {
+  const isMemberFull = useMemo(
+    () => headcount + memberCount === capacity,
+    [headcount, memberCount, capacity]
+  );
+
+  const editPartyHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -111,14 +153,7 @@ function EditModal({
         );
       setComplete(true);
 
-      const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-      const META_PIXEL_TRACKING_ID = import.meta.env
-        .VITE_META_PIXEL_TRACKING_ID;
-      if (
-        GA_TRACKING_ID &&
-        META_PIXEL_TRACKING_ID &&
-        !window.location.href.includes("localhost")
-      ) {
+      if (isGAlive()) {
         ReactGA.event({
           category: "기존 파티 참여",
           action: "15_exsting_suggestionsent_voting",
@@ -129,24 +164,40 @@ function EditModal({
     } finally {
       setLoading(false);
     }
-  };
+  }, [
+    loading,
+    partyId,
+    myParty,
+    course,
+    courseData,
+    startTime,
+    endTime,
+    region,
+    name,
+    partyName,
+    content,
+    memberCount,
+    companions,
+  ]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (complete) {
-      navigation(-1, { replace: true });
+      navigation(-1);
       getPartyData(true);
     }
-
     setShowModal(false);
-  };
+  }, [complete]);
 
-  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();
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -200,13 +251,7 @@ function EditModal({
         </div>
       );
 
-    const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-    const META_PIXEL_TRACKING_ID = import.meta.env.VITE_META_PIXEL_TRACKING_ID;
-    if (
-      GA_TRACKING_ID &&
-      META_PIXEL_TRACKING_ID &&
-      !window.location.href.includes("localhost")
-    ) {
+    if (isGAlive()) {
       ReactGA.event({
         category: "기존 파티 참여",
         action: "14_exsting_joinsuggestion_voting",
@@ -221,11 +266,12 @@ function EditModal({
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-80 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -259,4 +305,4 @@ function EditModal({
   );
 }
 
-export default EditModal;
+export default memo(EditModal);
diff --git a/src/pages/PartyPage/JoinAgreement/AgreeItem/index.jsx b/src/pages/PartyPage/JoinAgreement/AgreeItem/index.tsx
similarity index 65%
rename from src/pages/PartyPage/JoinAgreement/AgreeItem/index.jsx
rename to src/pages/PartyPage/JoinAgreement/AgreeItem/index.tsx
index df46830a..e4451b61 100644
--- a/src/pages/PartyPage/JoinAgreement/AgreeItem/index.jsx
+++ b/src/pages/PartyPage/JoinAgreement/AgreeItem/index.tsx
@@ -1,7 +1,16 @@
+import { ChangeEvent, memo } from "react";
 import { useNavigate } from "react-router-dom";
-import { ReactComponent as Check } from "../../../../assets/svg/agree-check.svg";
+import Check from "../../../../assets/svg/agree-check.svg";
 
-function AgreeItem({ checkedHandler, checked, id, title, url }) {
+interface Props {
+  checkedHandler: (e: ChangeEvent<HTMLInputElement>, id: number) => void;
+  checked: boolean;
+  id: number;
+  title: string;
+  url: string;
+}
+
+function AgreeItem({ checkedHandler, checked, id, title, url }: Props) {
   const navigation = useNavigate();
 
   return (
@@ -19,7 +28,9 @@ function AgreeItem({ checkedHandler, checked, id, title, url }) {
           className="flex items-center cursor-pointer"
         >
           <div className="relative w-3 h-3 mx-3 border border-darkgray">
-            {checked && <Check className="absolute -top-0.5 -left-0.5" />}
+            {checked && (
+              <img src={Check} className="absolute top-0 left-0 w-3 h-3" />
+            )}
           </div>
           <span className="text-darkgray">{title}</span>
         </label>
@@ -34,4 +45,4 @@ function AgreeItem({ checkedHandler, checked, id, title, url }) {
   );
 }
 
-export default AgreeItem;
+export default memo(AgreeItem);
diff --git a/src/pages/PartyPage/JoinAgreement/index.jsx b/src/pages/PartyPage/JoinAgreement/index.jsx
deleted file mode 100644
index f385d0c8..00000000
--- a/src/pages/PartyPage/JoinAgreement/index.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useEffect, useState } from "react";
-import { ReactComponent as Check } from "../../../assets/svg/agree-check.svg";
-import AgreeItem from "./AgreeItem";
-
-const agreementData = [
-  {
-    id: 0,
-    title: "말랑트립 서비스 이용약관(일반회원용) (필수)",
-    url: "/policy/user/service",
-  },
-  {
-    id: 1,
-    title: "말랑트립 개인정보 처리방침(일반회원용) (필수)",
-    url: "/policy/user/privacy",
-  },
-];
-
-function JoinAgreement({ checked, setChecked, shakeAgree, agreementRef }) {
-  const [allChecked, setAllChecked] = useState(false);
-  const [showText, setShowText] = useState(false);
-
-  const allCheckedHandler = (e) => {
-    setAllChecked(e.target.checked);
-    setChecked(checked.map((_) => e.target.checked));
-  };
-
-  const checkedHandler = (e, num) => {
-    const newChecked = [...checked];
-    newChecked[num] = e.target.checked;
-    setChecked(newChecked);
-  };
-
-  useEffect(() => {
-    if (checked.indexOf(false) < 0) setAllChecked(true);
-    else setAllChecked(false);
-  }, [checked]);
-
-  useEffect(() => {
-    if (shakeAgree) setShowText(true);
-  }, [shakeAgree]);
-
-  useEffect(() => {
-    if (allChecked) setShowText(false);
-  }, [allChecked]);
-
-  return (
-    <div ref={agreementRef} className={`${shakeAgree && "animate-shake"}`}>
-      <div className="w-full sm:w-3/5 lg:w-2/5 mx-auto font-bold flex gap-10 items-center">
-        <div className="text-lg text-black">필수 약관</div>
-        <div className={`${showText ? "text-red-600" : "text-white"} text-sm`}>
-          필수 약관에 동의해 주세요!
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-3 mt-8 text-sm">
-        <div className="w-full sm:w-3/5 lg:w-2/5 py-3 rounded-lg bg-skyblue">
-          <input
-            id="agreeAll"
-            type="checkbox"
-            className="hidden"
-            checked={allChecked}
-            onChange={allCheckedHandler}
-          />
-          <label
-            htmlFor="agreeAll"
-            className="flex items-center h-full cursor-pointer"
-          >
-            <div className="relative w-3 h-3 mx-3 border border-darkgray">
-              {allChecked && <Check className="absolute -top-0.5 -left-0.5" />}
-            </div>
-            <span className="text-primary">전체동의</span>
-          </label>
-        </div>
-        {agreementData.map((item, index) => (
-          <AgreeItem
-            key={item.id}
-            checked={checked[index]}
-            checkedHandler={checkedHandler}
-            {...item}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default JoinAgreement;
diff --git a/src/pages/PartyPage/JoinAgreement/index.tsx b/src/pages/PartyPage/JoinAgreement/index.tsx
new file mode 100644
index 00000000..1cf3cd3c
--- /dev/null
+++ b/src/pages/PartyPage/JoinAgreement/index.tsx
@@ -0,0 +1,122 @@
+import {
+  ChangeEvent,
+  Dispatch,
+  ForwardedRef,
+  memo,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import Check from "../../../assets/svg/agree-check.svg";
+import AgreeItem from "./AgreeItem";
+import clsx from "clsx";
+
+interface Props {
+  checked: boolean[];
+  setChecked: Dispatch<SetStateAction<boolean[]>>;
+  shakeAgree: boolean;
+  agreementRef: ForwardedRef<HTMLDivElement>;
+}
+
+function JoinAgreement({
+  checked,
+  setChecked,
+  shakeAgree,
+  agreementRef,
+}: Props) {
+  const [allChecked, setAllChecked] = useState(false);
+  const [showText, setShowText] = useState(false);
+
+  const agreementData = useMemo(
+    () => [
+      {
+        id: 0,
+        title: "말랑트립 서비스 이용약관(일반회원용) (필수)",
+        url: "/policy/user/service",
+      },
+      {
+        id: 1,
+        title: "말랑트립 개인정보 처리방침(일반회원용) (필수)",
+        url: "/policy/user/privacy",
+      },
+    ],
+    []
+  );
+
+  const allCheckedHandler = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setAllChecked(e.target.checked);
+      setChecked(checked.map((_) => e.target.checked));
+    },
+    [checked]
+  );
+
+  const checkedHandler = useCallback(
+    (e: ChangeEvent<HTMLInputElement>, id: number) => {
+      const newChecked = [...checked];
+      newChecked[id] = e.target.checked;
+      setChecked(newChecked);
+    },
+    [checked]
+  );
+
+  useEffect(() => {
+    if (checked.indexOf(false) < 0) setAllChecked(true);
+    else setAllChecked(false);
+  }, [checked]);
+
+  useEffect(() => {
+    if (shakeAgree) setShowText(true);
+  }, [shakeAgree]);
+
+  useEffect(() => {
+    if (allChecked) setShowText(false);
+  }, [allChecked]);
+
+  return (
+    <div ref={agreementRef} className={clsx(shakeAgree && "animate-shake")}>
+      <div className="w-full sm:w-3/5 lg:w-2/5 mx-auto font-bold flex gap-10 items-center">
+        <div className="text-lg text-black">필수 약관</div>
+        <div
+          className={clsx("text-sm", showText ? "text-red-600" : "text-white")}
+        >
+          필수 약관에 동의해 주세요!
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3 mt-8 text-sm">
+        <div className="w-full sm:w-3/5 lg:w-2/5 py-3 rounded-lg bg-skyblue">
+          <input
+            id="agreeAll"
+            type="checkbox"
+            className="hidden"
+            checked={allChecked}
+            onChange={allCheckedHandler}
+          />
+          <label
+            htmlFor="agreeAll"
+            className="flex items-center h-full cursor-pointer"
+          >
+            <div className="relative w-3 h-3 mx-3 border border-darkgray">
+              {allChecked && (
+                <img src={Check} className="absolute top-0 left-0 w-3 h-3" />
+              )}
+            </div>
+            <span className="text-primary">전체동의</span>
+          </label>
+        </div>
+        {agreementData.map((item, index) => (
+          <AgreeItem
+            key={item.id}
+            checked={checked[index]}
+            checkedHandler={checkedHandler}
+            {...item}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default memo(JoinAgreement);
diff --git a/src/pages/PartyPage/JoinButton/index.jsx b/src/pages/PartyPage/JoinButton/index.tsx
similarity index 63%
rename from src/pages/PartyPage/JoinButton/index.jsx
rename to src/pages/PartyPage/JoinButton/index.tsx
index d89ab4c3..f6eda030 100644
--- a/src/pages/PartyPage/JoinButton/index.jsx
+++ b/src/pages/PartyPage/JoinButton/index.tsx
@@ -1,18 +1,27 @@
-import { useEffect, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import BottomButton from "../../../components/BottomButton";
 
-function JoinButton({ joinHandler, partyStatus }) {
-  const user = useSelector((state) => state.user);
+interface Props {
+  joinHandler: () => void;
+  partyStatus: string;
+}
+
+function JoinButton({ joinHandler, partyStatus }: Props) {
+  const user = useSelector((state: RootState) => state.user);
   const { type } = useParams();
   const [scrollPosition, setScrollPosition] = useState(0);
 
-  const buttonText = {
-    detail: "파티 가입하기",
-    join: "가입 완료하기",
-    edit: "제안 보내기",
-  };
+  const buttonText = useMemo(
+    () => ({
+      detail: "파티 가입하기",
+      join: "가입 완료하기",
+      edit: "제안 보내기",
+    }),
+    []
+  );
 
   useEffect(() => {
     const handleScroll = () => {
@@ -26,6 +35,7 @@ function JoinButton({ joinHandler, partyStatus }) {
   }, []);
 
   if (user.role === "ROLE_DRIVER" || partyStatus !== "RECRUITING") return null;
+  if (type !== "detail" && type !== "join" && type !== "edit") return null;
   return (
     <>
       <div className="hidden md:flex justify-center mt-20">
@@ -43,4 +53,4 @@ function JoinButton({ joinHandler, partyStatus }) {
   );
 }
 
-export default JoinButton;
+export default memo(JoinButton);
diff --git a/src/pages/PartyPage/JoinGreeting/index.jsx b/src/pages/PartyPage/JoinGreeting/index.tsx
similarity index 55%
rename from src/pages/PartyPage/JoinGreeting/index.jsx
rename to src/pages/PartyPage/JoinGreeting/index.tsx
index 0cd86bb1..a228d875 100644
--- a/src/pages/PartyPage/JoinGreeting/index.jsx
+++ b/src/pages/PartyPage/JoinGreeting/index.tsx
@@ -1,6 +1,13 @@
-function JoinGreeting({ content, setContent }) {
+import { Dispatch, memo, SetStateAction } from "react";
+
+interface Props {
+  content: string;
+  setContent: Dispatch<SetStateAction<string>>;
+}
+
+function JoinGreeting({ content, setContent }: Props) {
   return (
-    <div className=" h-[180px] overflow-hidden mb-7 rounded-xl border-2 border-black">
+    <div className="h-[180px] overflow-hidden mb-7 rounded-xl border-2 border-black">
       <textarea
         placeholder="(선택 사항) 파티원들에게 인사 또는 요청 사항을 작성해 주세요."
         className="w-full h-full text-black p-3 text-sm placeholder:text-[#6F6F6F] focus:border-primary focus:outline-none resize-none custom-scrollbar"
@@ -11,4 +18,4 @@ function JoinGreeting({ content, setContent }) {
   );
 }
 
-export default JoinGreeting;
+export default memo(JoinGreeting);
diff --git a/src/pages/PartyPage/JoinMember/MemberButton/index.jsx b/src/pages/PartyPage/JoinMember/MemberButton/index.jsx
deleted file mode 100644
index bcb7a3c9..00000000
--- a/src/pages/PartyPage/JoinMember/MemberButton/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useEffect, useState } from "react";
-
-function MemberButton({ title, memberCount, setMemberCount, selected }) {
-  const [name, setName] = useState("");
-
-  const clickHandler = () => {
-    if (title === "본인") return;
-
-    if (name === "+") setMemberCount(memberCount + 1);
-    else setMemberCount(memberCount - 1);
-  };
-
-  useEffect(() => {
-    if (title === "본인") selected && setName("본인");
-    else selected ? setName(title) : setName("+");
-  }, [selected]);
-
-  return (
-    <button
-      className={`w-[87px] h-8 text-sm border rounded-full focus:outline-none ${
-        name === "+"
-          ? "bg-white text-darkgray border-darkgray"
-          : "bg-primary text-white border-primary"
-      } ${title === "본인" ? "cursor-default" : "cursor-pointer"}`}
-      onClick={clickHandler}
-    >
-      {name}
-    </button>
-  );
-}
-
-export default MemberButton;
diff --git a/src/pages/PartyPage/JoinMember/MemberButton/index.tsx b/src/pages/PartyPage/JoinMember/MemberButton/index.tsx
new file mode 100644
index 00000000..def560ab
--- /dev/null
+++ b/src/pages/PartyPage/JoinMember/MemberButton/index.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import {
+  Dispatch,
+  memo,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+
+interface Props {
+  title: string;
+  memberCount: number;
+  setMemberCount: Dispatch<SetStateAction<number>>;
+  selected: boolean;
+}
+
+function MemberButton({ title, memberCount, setMemberCount, selected }: Props) {
+  const [name, setName] = useState("");
+
+  const clickHandler = useCallback(() => {
+    if (title === "본인") return;
+
+    if (name === "+") setMemberCount(memberCount + 1);
+    else setMemberCount(memberCount - 1);
+  }, [name, title, memberCount]);
+
+  useEffect(() => {
+    if (title === "본인") selected && setName("본인");
+    else selected ? setName(title) : setName("+");
+  }, [selected]);
+
+  return (
+    <button
+      className={clsx(
+        "w-[87px] h-8 text-sm border rounded-full focus:outline-none",
+        name === "+"
+          ? "bg-white text-darkgray border-darkgray"
+          : "bg-primary text-white border-primary",
+        title === "본인" ? "cursor-default" : "cursor-pointer"
+      )}
+      onClick={clickHandler}
+    >
+      {name}
+    </button>
+  );
+}
+
+export default memo(MemberButton);
diff --git a/src/pages/PartyPage/JoinMember/index.jsx b/src/pages/PartyPage/JoinMember/index.tsx
similarity index 61%
rename from src/pages/PartyPage/JoinMember/index.jsx
rename to src/pages/PartyPage/JoinMember/index.tsx
index beec120c..0d134d1c 100644
--- a/src/pages/PartyPage/JoinMember/index.jsx
+++ b/src/pages/PartyPage/JoinMember/index.tsx
@@ -1,6 +1,19 @@
+import { Dispatch, memo, SetStateAction } from "react";
 import MemberButton from "./MemberButton";
 
-function JoinMember({ memberCount, setMemberCount, capacity, headcount }) {
+interface Props {
+  memberCount: number;
+  setMemberCount: Dispatch<SetStateAction<number>>;
+  capacity: number;
+  headcount: number;
+}
+
+function JoinMember({
+  memberCount,
+  setMemberCount,
+  capacity,
+  headcount,
+}: Props) {
   return (
     <div className="flex flex-col gap-1 my-7">
       <div className="flex items-center gap-1.5">
@@ -8,12 +21,17 @@ function JoinMember({ memberCount, setMemberCount, capacity, headcount }) {
         <p className="text-sm text-darkgray font-bold">{`${memberCount}명`}</p>
       </div>
       <div className="flex gap-2 mt-2">
-        <MemberButton title={"본인"} selected={memberCount >= 1} />
+        <MemberButton
+          title="본인"
+          selected={memberCount >= 1}
+          memberCount={memberCount}
+          setMemberCount={setMemberCount}
+        />
         {Array.from({ length: memberCount - 1 }, (_, index) => index).map(
           (item) => (
             <MemberButton
               key={item}
-              title={"동행자"}
+              title="동행자"
               memberCount={memberCount}
               setMemberCount={setMemberCount}
               selected={true}
@@ -22,7 +40,7 @@ function JoinMember({ memberCount, setMemberCount, capacity, headcount }) {
         )}
         {headcount + memberCount < capacity && (
           <MemberButton
-            title={"동행자"}
+            title="동행자"
             memberCount={memberCount}
             setMemberCount={setMemberCount}
             selected={false}
@@ -33,4 +51,4 @@ function JoinMember({ memberCount, setMemberCount, capacity, headcount }) {
   );
 }
 
-export default JoinMember;
+export default memo(JoinMember);
diff --git a/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.jsx b/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.jsx
deleted file mode 100644
index 11149111..00000000
--- a/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { makePhoneNumber } from "../../../../utils";
-
-function FriendInfo({ index, companions, setCompanions }) {
-  const nameHandler = (e) => {
-    const tempCompanions = [...companions];
-    tempCompanions[index].name = e.target.value;
-    setCompanions(tempCompanions);
-  };
-
-  const phoneNumberHandler = (e) => {
-    const tempCompanions = [...companions];
-    tempCompanions[index].phoneNumber = e.target.value;
-    setCompanions(tempCompanions);
-  };
-
-  return (
-    <div className="flex flex-col gap-2 text-sm text-darkgray font-medium">
-      <p>{`여행자 ${index + 2}`}</p>
-      <div className="w-full flex gap-2 whitespace-nowrap">
-        <span>{"여행자 이름 : "}</span>
-        <input
-          type="text"
-          className={`w-32 focus:outline-none text-primary placeholder:text-primary`}
-          value={companions[index].name}
-          onChange={nameHandler}
-          placeholder="직접 입력해 주세요."
-        />
-      </div>
-      <div className="w-full flex gap-2 whitespace-nowrap">
-        <span>{"핸드폰 번호 : "}</span>
-        <input
-          type="text"
-          className={`w-32 focus:outline-none text-primary placeholder:text-primary`}
-          value={makePhoneNumber(companions[index].phoneNumber)}
-          onChange={phoneNumberHandler}
-          placeholder="직접 입력해 주세요."
-        />
-      </div>
-    </div>
-  );
-}
-
-export default FriendInfo;
diff --git a/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.tsx b/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.tsx
new file mode 100644
index 00000000..3a2ac41f
--- /dev/null
+++ b/src/pages/PartyPage/JoinMemberInfo/FriendInfo/index.tsx
@@ -0,0 +1,64 @@
+import {
+  ChangeEvent,
+  Dispatch,
+  memo,
+  SetStateAction,
+  useCallback,
+} from "react";
+import { makePhoneNumber } from "../../../../utils";
+
+interface Props {
+  index: number;
+  companions: { name: string; phoneNumber: string }[];
+  setCompanions: Dispatch<
+    SetStateAction<{ name: string; phoneNumber: string }[]>
+  >;
+}
+
+function FriendInfo({ index, companions, setCompanions }: Props) {
+  const nameHandler = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const tempCompanions = [...companions];
+      tempCompanions[index].name = e.target.value;
+      setCompanions(tempCompanions);
+    },
+    [companions, index]
+  );
+
+  const phoneNumberHandler = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const tempCompanions = [...companions];
+      tempCompanions[index].phoneNumber = e.target.value;
+      setCompanions(tempCompanions);
+    },
+    [companions, index]
+  );
+
+  return (
+    <div className="flex flex-col gap-2 text-sm text-darkgray font-medium">
+      <p>{`여행자 ${index + 2}`}</p>
+      <div className="w-full flex gap-2 whitespace-nowrap">
+        <span>{"여행자 이름 : "}</span>
+        <input
+          type="text"
+          className="w-32 focus:outline-none text-primary placeholder:text-primary"
+          value={companions[index].name}
+          onChange={nameHandler}
+          placeholder="직접 입력해 주세요."
+        />
+      </div>
+      <div className="w-full flex gap-2 whitespace-nowrap">
+        <span>{"핸드폰 번호 : "}</span>
+        <input
+          type="text"
+          className="w-32 focus:outline-none text-primary placeholder:text-primary"
+          value={makePhoneNumber(companions[index].phoneNumber)}
+          onChange={phoneNumberHandler}
+          placeholder="직접 입력해 주세요."
+        />
+      </div>
+    </div>
+  );
+}
+
+export default memo(FriendInfo);
diff --git a/src/pages/PartyPage/JoinMemberInfo/MyInfo/index.jsx b/src/pages/PartyPage/JoinMemberInfo/MyInfo/index.tsx
similarity index 68%
rename from src/pages/PartyPage/JoinMemberInfo/MyInfo/index.jsx
rename to src/pages/PartyPage/JoinMemberInfo/MyInfo/index.tsx
index 3ade0ffa..51e79e10 100644
--- a/src/pages/PartyPage/JoinMemberInfo/MyInfo/index.jsx
+++ b/src/pages/PartyPage/JoinMemberInfo/MyInfo/index.tsx
@@ -1,8 +1,10 @@
+import { memo } from "react";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
 import { makePhoneNumber } from "../../../../utils";
 
 function MyInfo() {
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
 
   return (
     <div className="flex flex-col gap-2 text-sm text-darkgray font-medium">
@@ -13,4 +15,4 @@ function MyInfo() {
   );
 }
 
-export default MyInfo;
+export default memo(MyInfo);
diff --git a/src/pages/PartyPage/JoinMemberInfo/index.jsx b/src/pages/PartyPage/JoinMemberInfo/index.tsx
similarity index 59%
rename from src/pages/PartyPage/JoinMemberInfo/index.jsx
rename to src/pages/PartyPage/JoinMemberInfo/index.tsx
index 29ac7e8e..c760ab45 100644
--- a/src/pages/PartyPage/JoinMemberInfo/index.jsx
+++ b/src/pages/PartyPage/JoinMemberInfo/index.tsx
@@ -1,6 +1,24 @@
-import { useEffect, useState } from "react";
+import {
+  Dispatch,
+  ForwardedRef,
+  memo,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 import MyInfo from "./MyInfo";
 import FriendInfo from "./FriendInfo";
+import clsx from "clsx";
+
+interface Props {
+  companionsRef: ForwardedRef<HTMLDivElement>;
+  memberCount: number;
+  companions: { name: string; phoneNumber: string }[];
+  setCompanions: Dispatch<
+    SetStateAction<{ name: string; phoneNumber: string }[]>
+  >;
+  shakeCompanions: boolean;
+}
 
 function JoinMemberInfo({
   companionsRef,
@@ -8,7 +26,7 @@ function JoinMemberInfo({
   companions,
   setCompanions,
   shakeCompanions,
-}) {
+}: Props) {
   const [showText, setShowText] = useState(false);
 
   useEffect(() => {
@@ -17,14 +35,17 @@ function JoinMemberInfo({
 
   return (
     <div
-      className={`my-7 flex flex-col gap-6 ${
+      className={clsx(
+        "my-7 flex flex-col gap-6",
         shakeCompanions && "animate-shake"
-      }`}
+      )}
       ref={companionsRef}
     >
       <div className="w-full flex gap-5 items-center font-bold">
         <p className="text-lg text-black">여행자 정보</p>
-        <div className={`${showText ? "text-red-600" : "text-white"} text-sm`}>
+        <div
+          className={clsx("text-sm", showText ? "text-red-600" : "text-white")}
+        >
           동행자 정보를 모두 입력해주세요.
         </div>
       </div>
@@ -41,4 +62,4 @@ function JoinMemberInfo({
   );
 }
 
-export default JoinMemberInfo;
+export default memo(JoinMemberInfo);
diff --git a/src/pages/PartyPage/JoinModal/index.jsx b/src/pages/PartyPage/JoinModal/index.tsx
similarity index 74%
rename from src/pages/PartyPage/JoinModal/index.jsx
rename to src/pages/PartyPage/JoinModal/index.tsx
index 309a7689..cf7feb8d 100644
--- a/src/pages/PartyPage/JoinModal/index.jsx
+++ b/src/pages/PartyPage/JoinModal/index.tsx
@@ -1,8 +1,38 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { postPartyJoin } from "../../../api/party";
 import { priceToString } from "../../../utils";
+import { isGAlive } from "../../../utils/ga";
 import ReactGA from "react-ga4";
+import clsx from "clsx";
+
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  content: string;
+  memberCount: number;
+  companions: {
+    name: string;
+    phoneNumber: string;
+  }[];
+  getPartyData: (toScrollTop?: boolean) => void;
+  capacity: number;
+  headcount: number;
+  totalPrice: number;
+  partyName: string;
+  promotionId: number;
+}
 
 function JoinModal({
   showModal,
@@ -16,16 +46,20 @@ function JoinModal({
   totalPrice,
   partyName,
   promotionId,
-}) {
+}: Props) {
   const navigation = useNavigate();
-  const modalRef = useRef();
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const { partyId } = useParams();
-  const [message, setMessage] = useState("");
-  const isMemberFull = headcount + memberCount === capacity;
+  const [message, setMessage] = useState<string | ReactNode>("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
 
-  const joinPartyHandler = async () => {
+  const isMemberFull = useMemo(
+    () => headcount + memberCount === capacity,
+    [headcount, memberCount, capacity]
+  );
+
+  const joinPartyHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -75,14 +109,7 @@ function JoinModal({
         );
       setComplete(true);
 
-      const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-      const META_PIXEL_TRACKING_ID = import.meta.env
-        .VITE_META_PIXEL_TRACKING_ID;
-      if (
-        GA_TRACKING_ID &&
-        META_PIXEL_TRACKING_ID &&
-        !window.location.href.includes("localhost")
-      ) {
+      if (isGAlive()) {
         ReactGA.event({
           category: "기존 파티 참여",
           action: "15_exsting_suggestionsent_participated",
@@ -93,24 +120,34 @@ function JoinModal({
     } finally {
       setLoading(false);
     }
-  };
-
-  const closeModal = () => {
+  }, [
+    loading,
+    partyId,
+    isMemberFull,
+    content,
+    memberCount,
+    companions,
+    promotionId,
+  ]);
+
+  const closeModal = useCallback(() => {
     if (complete) {
-      navigation(-1, { replace: true });
+      navigation(-1);
       getPartyData(true);
     }
-
     setShowModal(false);
-  };
+  }, [complete]);
 
-  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();
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -145,13 +182,7 @@ function JoinModal({
         </div>
       );
 
-    const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-    const META_PIXEL_TRACKING_ID = import.meta.env.VITE_META_PIXEL_TRACKING_ID;
-    if (
-      GA_TRACKING_ID &&
-      META_PIXEL_TRACKING_ID &&
-      !window.location.href.includes("localhost")
-    ) {
+    if (isGAlive()) {
       ReactGA.event({
         category: "기존 파티 참여",
         action: "14_exsting_joinsuggestion_participated",
@@ -166,11 +197,12 @@ function JoinModal({
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -204,4 +236,4 @@ function JoinModal({
   );
 }
 
-export default JoinModal;
+export default memo(JoinModal);
diff --git a/src/pages/PartyPage/MallangReady/WhatReady/index.jsx b/src/pages/PartyPage/MallangReady/WhatReady/index.tsx
similarity index 82%
rename from src/pages/PartyPage/MallangReady/WhatReady/index.jsx
rename to src/pages/PartyPage/MallangReady/WhatReady/index.tsx
index f5e4920b..f9e5627f 100644
--- a/src/pages/PartyPage/MallangReady/WhatReady/index.jsx
+++ b/src/pages/PartyPage/MallangReady/WhatReady/index.tsx
@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import info from "../../../../assets/svg/more-info-darkgray.svg";
+import clsx from "clsx";
 
 function WhatReady() {
   const [showWhat, setShowWhat] = useState(false);
@@ -13,15 +14,17 @@ function WhatReady() {
         <span className="text-base text-darkgray font-bold">말랑레디란?</span>
         <img
           src={info}
-          className={`transition-transform duration-500 ${
+          className={clsx(
+            "transition-transform duration-500",
             showWhat ? "rotate-180" : "rotate-0"
-          }`}
+          )}
         />
       </button>
       <div
-        className={`text-sm text-darkgray font-medium overflow-hidden transition-all duration-500 ${
+        className={clsx(
+          "text-sm text-darkgray font-medium overflow-hidden transition-all duration-500",
           showWhat ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
-        }`}
+        )}
       >
         <p>
           가입된 파티원들끼리 여행을 확정하고 여행비 결제를 진행하기 위해
@@ -46,4 +49,4 @@ function WhatReady() {
   );
 }
 
-export default WhatReady;
+export default memo(WhatReady);
diff --git a/src/pages/PartyPage/MallangReady/index.jsx b/src/pages/PartyPage/MallangReady/index.tsx
similarity index 76%
rename from src/pages/PartyPage/MallangReady/index.jsx
rename to src/pages/PartyPage/MallangReady/index.tsx
index 6ee270fb..9600785f 100644
--- a/src/pages/PartyPage/MallangReady/index.jsx
+++ b/src/pages/PartyPage/MallangReady/index.tsx
@@ -1,11 +1,31 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 import { putMallangReady } from "../../../api/party";
 import { computeGapDay } from "../../../utils";
 import Loading from "../../../components/Loading";
 import CheckModal from "../../../components/CheckModal";
 import WhatReady from "./WhatReady";
+import clsx from "clsx";
+
+interface Props {
+  members: {
+    ageRange: number;
+    companions: any;
+    gender: string;
+    headcount: number;
+    introduction: string;
+    nickname: string;
+    profileImg: string | null;
+    ready: boolean;
+    userId: number;
+  }[];
+  driverReady: boolean;
+  getPartyData: (toScrollTop?: boolean) => void;
+  partyStatus: string;
+  startDate: string;
+}
 
 function MallangReady({
   members,
@@ -13,14 +33,14 @@ function MallangReady({
   getPartyData,
   partyStatus,
   startDate,
-}) {
-  const user = useSelector((state) => state.user);
+}: Props) {
+  const user = useSelector((state: RootState) => state.user);
   const { partyId } = useParams();
   const [ready, setReady] = useState(false);
   const [showCheckModal, setShowCheckModal] = useState(false);
   const [loading, setLoading] = useState(false);
 
-  const readyClickHandler = async () => {
+  const readyClickHandler = useCallback(async () => {
     try {
       await putMallangReady(partyId, !ready);
       setReady(!ready);
@@ -32,7 +52,7 @@ function MallangReady({
     } finally {
       setLoading(false);
     }
-  };
+  }, [partyId, ready]);
 
   useEffect(() => {
     if (!loading) return;
@@ -61,11 +81,12 @@ function MallangReady({
       <p className="text-lg text-black font-bold">말랑레디</p>
       <div className="my-2.5 flex justify-center sm:justify-start sm:ml-40 items-center">
         <button
-          className={`w-40 py-3 ml-2.5 text-base font-bold border rounded-full ${
+          className={clsx(
+            "w-40 py-3 ml-2.5 text-base font-bold border rounded-full",
             ready
               ? "bg-primary text-white border-primary"
               : "bg-white text-darkgray border-darkgray"
-          }`}
+          )}
           onClick={() => setShowCheckModal(true)}
           disabled={partyStatus !== "RECRUITING"}
         >
@@ -82,7 +103,7 @@ function MallangReady({
         setShowModal={setShowCheckModal}
         message={
           !showCheckModal || loading ? (
-            <Loading />
+            <Loading full={false} />
           ) : ready ? (
             "말랑레디를 취소하시겠습니까?"
           ) : (
@@ -97,4 +118,4 @@ function MallangReady({
   );
 }
 
-export default MallangReady;
+export default memo(MallangReady);
diff --git a/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.jsx b/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
similarity index 69%
rename from src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.jsx
rename to src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
index 40522de0..c0f7a959 100644
--- a/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.jsx
+++ b/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
@@ -1,15 +1,32 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useParams } from "react-router-dom";
 import { putNewPartyAccept } from "../../../../api/party";
+import clsx from "clsx";
 
-function AcceptModal({ showModal, setShowModal, getPartyData, accept }) {
-  const modalRef = useRef();
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  getPartyData: (toScrollTop?: boolean) => void;
+  accept: boolean;
+}
+
+function AcceptModal({ showModal, setShowModal, getPartyData, accept }: Props) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const { partyId } = useParams();
   const [message, setMessage] = useState("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
 
-  const acceptHandler = async () => {
+  const acceptHandler = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -25,21 +42,23 @@ function AcceptModal({ showModal, setShowModal, getPartyData, accept }) {
     } finally {
       setLoading(false);
     }
-  };
+  }, [loading, partyId, accept]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (complete) getPartyData(true);
-
     setShowModal(false);
-  };
+  }, [complete]);
 
-  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();
-  };
+  }, []);
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -58,11 +77,12 @@ function AcceptModal({ showModal, setShowModal, getPartyData, accept }) {
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
@@ -96,4 +116,4 @@ function AcceptModal({ showModal, setShowModal, getPartyData, accept }) {
   );
 }
 
-export default AcceptModal;
+export default memo(AcceptModal);
diff --git a/src/pages/PartyPage/NewPartyAgreement/index.jsx b/src/pages/PartyPage/NewPartyAgreement/index.tsx
similarity index 79%
rename from src/pages/PartyPage/NewPartyAgreement/index.jsx
rename to src/pages/PartyPage/NewPartyAgreement/index.tsx
index a3de2750..b6ee54b0 100644
--- a/src/pages/PartyPage/NewPartyAgreement/index.jsx
+++ b/src/pages/PartyPage/NewPartyAgreement/index.tsx
@@ -1,14 +1,18 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import AcceptModal from "./AcceptModal";
 
-function NewPartyAgreement({ getPartyData }) {
+interface Props {
+  getPartyData: (toScrollTop?: boolean) => void;
+}
+
+function NewPartyAgreement({ getPartyData }: Props) {
   const [accept, setAccept] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
   return (
     <>
       <div className="my-7">
-        <div className={"flex gap-5 ml-0 sm:ml-10"}>
+        <div className="flex gap-5 ml-0 sm:ml-10">
           <button
             className="h-12 text-darkgray rounded-full text-base font-bold w-full sm:w-80 bg-white border border-darkgray"
             onClick={() => {
@@ -39,4 +43,4 @@ function NewPartyAgreement({ getPartyData }) {
   );
 }
 
-export default NewPartyAgreement;
+export default memo(NewPartyAgreement);
diff --git a/src/pages/PartyPage/NotFoundParty/index.jsx b/src/pages/PartyPage/NotFoundParty/index.tsx
similarity index 92%
rename from src/pages/PartyPage/NotFoundParty/index.jsx
rename to src/pages/PartyPage/NotFoundParty/index.tsx
index 53a184ea..a9a1ef19 100644
--- a/src/pages/PartyPage/NotFoundParty/index.jsx
+++ b/src/pages/PartyPage/NotFoundParty/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { useNavigate } from "react-router-dom";
 import PageContainer from "../../../components/PageContainer";
 
@@ -25,4 +26,4 @@ function NotFoundParty() {
   );
 }
 
-export default NotFoundParty;
+export default memo(NotFoundParty);
diff --git a/src/pages/PartyPage/PartyDate/index.jsx b/src/pages/PartyPage/PartyDate/index.tsx
similarity index 66%
rename from src/pages/PartyPage/PartyDate/index.jsx
rename to src/pages/PartyPage/PartyDate/index.tsx
index 33790523..a1b671af 100644
--- a/src/pages/PartyPage/PartyDate/index.jsx
+++ b/src/pages/PartyPage/PartyDate/index.tsx
@@ -1,6 +1,11 @@
+import { memo } from "react";
 import { dateToStringHan } from "../../../utils";
 
-function PartyDate({ startDate }) {
+interface Props {
+  startDate: string;
+}
+
+function PartyDate({ startDate }: Props) {
   return (
     <div className="flex flex-col gap-1 my-7">
       <p className="text-lg text-black font-bold">날짜</p>
@@ -11,4 +16,4 @@ function PartyDate({ startDate }) {
   );
 }
 
-export default PartyDate;
+export default memo(PartyDate);
diff --git a/src/pages/PartyPage/PartyIntro/index.jsx b/src/pages/PartyPage/PartyIntro/index.tsx
similarity index 60%
rename from src/pages/PartyPage/PartyIntro/index.jsx
rename to src/pages/PartyPage/PartyIntro/index.tsx
index f319f2be..abb3349b 100644
--- a/src/pages/PartyPage/PartyIntro/index.jsx
+++ b/src/pages/PartyPage/PartyIntro/index.tsx
@@ -1,4 +1,10 @@
-function PartyIntro({ content }) {
+import { memo } from "react";
+
+interface Props {
+  content: string;
+}
+
+function PartyIntro({ content }: Props) {
   if (!content) return;
   return (
     <div className="flex flex-col gap-1 my-7">
@@ -8,4 +14,4 @@ function PartyIntro({ content }) {
   );
 }
 
-export default PartyIntro;
+export default memo(PartyIntro);
diff --git a/src/pages/PartyPage/PartyMember/MemberProfile/Status/index.jsx b/src/pages/PartyPage/PartyMember/MemberProfile/Status/index.tsx
similarity index 89%
rename from src/pages/PartyPage/PartyMember/MemberProfile/Status/index.jsx
rename to src/pages/PartyPage/PartyMember/MemberProfile/Status/index.tsx
index 1783990f..4eac616a 100644
--- a/src/pages/PartyPage/PartyMember/MemberProfile/Status/index.jsx
+++ b/src/pages/PartyPage/PartyMember/MemberProfile/Status/index.tsx
@@ -1,4 +1,11 @@
-function Status({ ready, agreement }) {
+import { memo } from "react";
+
+interface Props {
+  ready: boolean;
+  agreement: string;
+}
+
+function Status({ ready, agreement }: Props) {
   if (agreement === "WAITING")
     return (
       <div className="w-[104px] mt-3 py-1.5 rounded-full text-xs font-medium text-[#B4B4B4] bg-lightgray">
@@ -49,4 +56,4 @@ function Status({ ready, agreement }) {
     );
 }
 
-export default Status;
+export default memo(Status);
diff --git a/src/pages/PartyPage/PartyMember/MemberProfile/index.jsx b/src/pages/PartyPage/PartyMember/MemberProfile/index.tsx
similarity index 65%
rename from src/pages/PartyPage/PartyMember/MemberProfile/index.jsx
rename to src/pages/PartyPage/PartyMember/MemberProfile/index.tsx
index 107dab35..7eabf22f 100644
--- a/src/pages/PartyPage/PartyMember/MemberProfile/index.jsx
+++ b/src/pages/PartyPage/PartyMember/MemberProfile/index.tsx
@@ -1,6 +1,22 @@
+import { Dispatch, memo, SetStateAction, useCallback, useMemo } from "react";
 import Status from "./Status";
 import basicProfileImage from "../../../../assets/images/profileImage.png";
 
+interface Props {
+  userId: number;
+  profileImg: string | null;
+  nickname: string;
+  introduction: string | null;
+  ageRange?: number;
+  gender?: string;
+  companions?: any[];
+  myParty: boolean;
+  ready: boolean;
+  agreement: string;
+  setShowProfileModal: Dispatch<SetStateAction<boolean>>;
+  setUserId: Dispatch<SetStateAction<number>>;
+}
+
 function MemberProfile({
   userId,
   profileImg,
@@ -8,22 +24,24 @@ function MemberProfile({
   introduction,
   ageRange,
   gender,
-  companions = [],
+  companions,
   myParty,
   ready,
   agreement,
   setShowProfileModal,
   setUserId,
-}) {
-  const companionsCount = companions.length;
+}: Props) {
+  const companionsCount = useMemo(() => companions?.length || 0, [companions]);
+
+  const openProfile = useCallback(() => {
+    setUserId(userId);
+    setShowProfileModal(true);
+  }, [userId]);
 
   return (
     <button
       className="shrink-0 w-40 flex flex-col items-center py-5 border-[1.5px] border-mediumgray rounded-2xl relative"
-      onClick={() => {
-        setUserId(userId);
-        setShowProfileModal(true);
-      }}
+      onClick={openProfile}
     >
       <img
         src={profileImg || basicProfileImage}
@@ -49,4 +67,4 @@ function MemberProfile({
   );
 }
 
-export default MemberProfile;
+export default memo(MemberProfile);
diff --git a/src/pages/PartyPage/PartyMember/index.jsx b/src/pages/PartyPage/PartyMember/index.tsx
similarity index 89%
rename from src/pages/PartyPage/PartyMember/index.jsx
rename to src/pages/PartyPage/PartyMember/index.tsx
index 3ffaadfc..3e21aab1 100644
--- a/src/pages/PartyPage/PartyMember/index.jsx
+++ b/src/pages/PartyPage/PartyMember/index.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { setPartyRoomId } from "../../../redux/modules/talkRoomSlice";
 import { getUserInfo } from "../../../api/users";
 import { getPartyChatId } from "../../../api/chat";
+import { Party } from "../../../types";
+import { RootState } from "../../../redux/store";
 import MemberProfile from "./MemberProfile";
 import ProfileModal from "../../../components/ProfileModal";
 import partyChatIcon from "../../../assets/svg/go-party-chat.svg";
@@ -21,18 +23,26 @@ function PartyMember({
   driverReady,
   partyStatus,
   proposal,
-}) {
+}: Party) {
   const navigation = useNavigate();
   const dispatch = useDispatch();
-  const user = useSelector((state) => state.user);
-  const [driverInfo, setDriverInfo] = useState({});
+  const user = useSelector((state: RootState) => state.user);
   const [showProfileModal, setShowProfileModal] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showErrorModal, setShowErrorModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [userId, setUserId] = useState(0);
+  const [driverInfo, setDriverInfo] = useState({
+    createdAt: "",
+    deleted: false,
+    introduction: "",
+    nickname: "",
+    profileImg: null,
+    suspensionDuration: 0,
+    userId: 0,
+  });
 
-  const goPartyChat = async () => {
+  const goPartyChat = useCallback(async () => {
     if (!user.auth) return setShowLoginModal(true);
 
     try {
@@ -49,16 +59,16 @@ function PartyMember({
     } catch (e) {
       console.log(e);
     }
-  };
+  }, [user, partyId]);
 
-  const getDriverInfo = async () => {
+  const getDriverInfo = useCallback(async () => {
     try {
       const result = await getUserInfo(driverId);
       setDriverInfo(result.payload);
     } catch (e) {
       console.log(e);
     }
-  };
+  }, [driverId]);
 
   useEffect(() => {
     getDriverInfo();
@@ -142,7 +152,7 @@ function PartyMember({
                     : partyStatus === "CANCELED_BY_ALL_QUIT"
                       ? "EXIT"
                       : proposal?.memberAgreement?.filter(
-                          (member) => member.userId === item.userId
+                          (member: any) => member.userId === item.userId
                         )[0].status
               }
               {...item}
@@ -165,8 +175,8 @@ function PartyMember({
         showModal={showLoginModal}
         setShowModal={setShowLoginModal}
         message={"로그인이 필요합니다.\n로그인 하시겠습니까?"}
-        noText={"취소"}
-        yesText={"확인"}
+        noText="취소"
+        yesText="확인"
         yesHandler={() => navigation("/login")}
       />
       <ConfirmModal
@@ -178,4 +188,4 @@ function PartyMember({
   );
 }
 
-export default PartyMember;
+export default memo(PartyMember);
diff --git a/src/pages/PartyPage/QuitButton/QuitModal/index.jsx b/src/pages/PartyPage/QuitButton/QuitModal/index.tsx
similarity index 71%
rename from src/pages/PartyPage/QuitButton/QuitModal/index.jsx
rename to src/pages/PartyPage/QuitButton/QuitModal/index.tsx
index 388997eb..6ab7d29a 100644
--- a/src/pages/PartyPage/QuitButton/QuitModal/index.jsx
+++ b/src/pages/PartyPage/QuitButton/QuitModal/index.tsx
@@ -1,4 +1,15 @@
-import { useEffect, useRef, useState } from "react";
+import {
+  Dispatch,
+  memo,
+  MouseEvent,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useParams } from "react-router-dom";
 import {
   deleteQuitParty,
@@ -6,6 +17,18 @@ import {
 } from "../../../../api/party";
 import { computeGapDay, priceToString } from "../../../../utils";
 import Loading from "../../../../components/Loading";
+import clsx from "clsx";
+
+interface Props {
+  showModal: boolean;
+  setShowModal: Dispatch<SetStateAction<boolean>>;
+  getPartyData: (toScrollTop?: boolean) => void;
+  partyStatus: string;
+  startDate: string;
+  paymentAmount: number;
+  isDriver: boolean;
+  totalPrice: number;
+}
 
 function QuitModal({
   showModal,
@@ -16,14 +39,14 @@ function QuitModal({
   paymentAmount,
   isDriver,
   totalPrice,
-}) {
-  const modalRef = useRef();
+}: Props) {
+  const modalRef = useRef<HTMLDivElement | null>(null);
   const { partyId } = useParams();
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState<string | ReactNode>("");
   const [loading, setLoading] = useState(false);
   const [complete, setComplete] = useState(false);
 
-  const chargeMoney = () => {
+  const chargeMoney = useMemo(() => {
     const gapDay = computeGapDay(startDate);
 
     if (gapDay >= 8) return 0;
@@ -33,9 +56,9 @@ function QuitModal({
     if (gapDay === 4) return 75;
     if (gapDay === 3) return 90;
     else return 100;
-  };
+  }, [startDate]);
 
-  const chargeMoneyDriver = () => {
+  const chargeMoneyDriver = useMemo(() => {
     const gapDay = computeGapDay(startDate);
 
     if (gapDay >= 8) return 0;
@@ -47,9 +70,9 @@ function QuitModal({
     if (gapDay === 2) return 30;
     if (gapDay === 1) return 35;
     else return 40;
-  };
+  }, [startDate]);
 
-  const quitParty = async () => {
+  const quitParty = useCallback(async () => {
     if (loading) return;
 
     try {
@@ -75,7 +98,7 @@ function QuitModal({
                 <br />
                 <span className="text-primary">
                   {priceToString(
-                    Math.floor((chargeMoneyDriver() / 100) * totalPrice)
+                    Math.floor((chargeMoneyDriver / 100) * totalPrice)
                   )}
                 </span>
                 원 지불을 위해 말랑트립 고객센터로 연락주세요.
@@ -90,7 +113,7 @@ function QuitModal({
                 환급금{" "}
                 <span className="text-primary">
                   {priceToString(
-                    Math.floor(((100 - chargeMoney()) / 100) * paymentAmount)
+                    Math.floor(((100 - chargeMoney) / 100) * paymentAmount)
                   )}
                 </span>
                 원은
@@ -106,25 +129,40 @@ function QuitModal({
       console.log(e);
       setLoading(false);
     }
-  };
+  }, [
+    loading,
+    partyId,
+    partyStatus,
+    isDriver,
+    chargeMoneyDriver,
+    chargeMoney,
+    totalPrice,
+    paymentAmount,
+  ]);
 
-  const closeModal = () => {
+  const closeModal = useCallback(() => {
     if (loading) return;
     if (complete) getPartyData(true);
     setShowModal(false);
-  };
+  }, [loading, complete]);
 
-  const modalOutSideClick = (e) => {
-    if (modalRef.current === e.target) closeModal();
-  };
+  const modalOutSideClick = useCallback(
+    (event: MouseEvent) => {
+      if (modalRef.current === event.target) closeModal();
+    },
+    [modalRef]
+  );
 
-  const handleKeyPress = (event) => {
-    if (event.key === "Escape") closeModal();
-    else if (event.key === "Enter") {
-      if (!complete) quitParty();
-      else closeModal();
-    }
-  };
+  const handleKeyPress = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeModal();
+      else if (event.key === "Enter") {
+        if (!complete) quitParty();
+        else closeModal();
+      }
+    },
+    [complete]
+  );
 
   useEffect(() => {
     if (!showModal) return document.body.classList.remove("overflow-hidden");
@@ -146,7 +184,7 @@ function QuitModal({
             예약 취소시 위약금으로{" "}
             <span className="text-primary">
               {priceToString(
-                Math.floor((chargeMoneyDriver() / 100) * totalPrice)
+                Math.floor((chargeMoneyDriver / 100) * totalPrice)
               )}
             </span>
             원을 지불해야 합니다.
@@ -162,14 +200,14 @@ function QuitModal({
             <br />
             위약금은{" "}
             <span className="text-primary">
-              {priceToString(Math.floor((chargeMoney() / 100) * paymentAmount))}
+              {priceToString(Math.floor((chargeMoney / 100) * paymentAmount))}
             </span>
             원이며,
             <br />
             환급금은 총{" "}
             <span className="text-primary">
               {priceToString(
-                Math.floor(((100 - chargeMoney()) / 100) * paymentAmount)
+                Math.floor(((100 - chargeMoney) / 100) * paymentAmount)
               )}
             </span>
             원입니다.
@@ -185,15 +223,16 @@ function QuitModal({
 
   return (
     <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="m-auto shadow w-96 rounded-xl">
         <div className="flex flex-col justify-center h-64 text-center text-black whitespace-pre bg-white rounded-t-xl">
-          {loading ? <Loading /> : message}
+          {loading ? <Loading full={false} /> : message}
         </div>
         {!complete ? (
           <div className="flex">
@@ -223,4 +262,4 @@ function QuitModal({
   );
 }
 
-export default QuitModal;
+export default memo(QuitModal);
diff --git a/src/pages/PartyPage/QuitButton/index.jsx b/src/pages/PartyPage/QuitButton/index.tsx
similarity index 85%
rename from src/pages/PartyPage/QuitButton/index.jsx
rename to src/pages/PartyPage/QuitButton/index.tsx
index ae9e2774..7692393e 100644
--- a/src/pages/PartyPage/QuitButton/index.jsx
+++ b/src/pages/PartyPage/QuitButton/index.tsx
@@ -1,8 +1,17 @@
-import { useState } from "react";
+import { memo, useState } from "react";
 import { computeGapDay } from "../../../utils";
 import BottomButton from "../../../components/BottomButton";
 import QuitModal from "./QuitModal";
 
+interface Props {
+  getPartyData: (toScrollTop?: boolean) => void;
+  partyStatus: string;
+  startDate: string;
+  paymentAmount: number;
+  isDriver: boolean;
+  totalPrice: number;
+}
+
 function QuitButton({
   getPartyData,
   partyStatus,
@@ -10,7 +19,7 @@ function QuitButton({
   paymentAmount,
   isDriver,
   totalPrice,
-}) {
+}: Props) {
   const [showModal, setShowModal] = useState(false);
 
   if (
@@ -56,4 +65,4 @@ function QuitButton({
   );
 }
 
-export default QuitButton;
+export default memo(QuitButton);
diff --git a/src/pages/PartyPage/ToTalPrice/index.jsx b/src/pages/PartyPage/ToTalPrice/index.tsx
similarity index 71%
rename from src/pages/PartyPage/ToTalPrice/index.jsx
rename to src/pages/PartyPage/ToTalPrice/index.tsx
index f3a36ca4..10e9c4fd 100644
--- a/src/pages/PartyPage/ToTalPrice/index.jsx
+++ b/src/pages/PartyPage/ToTalPrice/index.tsx
@@ -1,6 +1,13 @@
+import { memo } from "react";
 import { priceToString } from "../../../utils";
 
-function ToTalPrice({ totalPrice, isDriver, partyStatus }) {
+interface Props {
+  totalPrice: number;
+  isDriver: boolean;
+  partyStatus: string;
+}
+
+function ToTalPrice({ totalPrice, isDriver, partyStatus }: Props) {
   if (
     partyStatus === "CANCELED_BY_ALL_QUIT" ||
     partyStatus === "CANCELED_BY_DRIVER_QUIT" ||
@@ -19,4 +26,4 @@ function ToTalPrice({ totalPrice, isDriver, partyStatus }) {
   );
 }
 
-export default ToTalPrice;
+export default memo(ToTalPrice);
diff --git a/src/pages/PartyPage/index.jsx b/src/pages/PartyPage/index.tsx
similarity index 86%
rename from src/pages/PartyPage/index.jsx
rename to src/pages/PartyPage/index.tsx
index a61eac38..f9af0296 100644
--- a/src/pages/PartyPage/index.jsx
+++ b/src/pages/PartyPage/index.tsx
@@ -1,7 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { RootState } from "../../redux/store";
 import { getPartyDetail } from "../../api/party";
+import { Destination, Party } from "../../types";
+import { isGAlive } from "../../utils/ga";
 import ReactGA from "react-ga4";
 import PageContainer from "../../components/PageContainer";
 import HeadTitle from "../../components/HeadTitle";
@@ -40,12 +43,11 @@ import Promotion from "../../components/Promotion";
 
 function PartyPage() {
   const navigation = useNavigate();
-  const user = useSelector((state) => state.user);
+  const user = useSelector((state: RootState) => state.user);
   const { type, partyId } = useParams();
-  const companionsRef = useRef();
-  const creditRef = useRef();
-  const agreementRef = useRef();
-  const [partyData, setPartyData] = useState({});
+  const companionsRef = useRef<HTMLDivElement | null>(null);
+  const creditRef = useRef<HTMLDivElement | null>(null);
+  const agreementRef = useRef<HTMLDivElement | null>(null);
   const [memberCount, setMemberCount] = useState(1);
   const [content, setContent] = useState("");
   const [name, setName] = useState("");
@@ -61,17 +63,53 @@ function PartyPage() {
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showJoinErrorModal, setShowJoinErrorModal] = useState(false);
   const [joinErrorMessage, setJoinErrorMessage] = useState("");
-  const [courseData, setCourseData] = useState([]);
+  const [courseData, setCourseData] = useState<Destination[]>([]);
   const [region, setRegion] = useState("");
+  const [promotionId, setPromotionId] = useState(0);
   const [companions, setCompanions] = useState(
     Array.from({ length: 10 }, () => ({
       name: "",
       phoneNumber: "",
     }))
   );
-  const [promotionId, setPromotionId] = useState(0);
-
-  const checkJoinEdit = () => {
+  const [partyData, setPartyData] = useState<Party>({
+    partyId: 0,
+    name: "",
+    startDate: "",
+    headcount: 0,
+    capacity: 0,
+    promotion: false,
+    driverName: "",
+    image: "",
+    price: 0,
+    content: "",
+    course: {
+      capacity: 0,
+      courseId: 0,
+      discountPrice: 0,
+      images: [],
+      name: "",
+      region: "",
+      totalDays: 0,
+      totalPrice: 0,
+      days: [],
+    },
+    dibs: false,
+    driverId: 0,
+    driverReady: false,
+    endDate: "",
+    members: [],
+    monopoly: false,
+    myParty: false,
+    partyStatus: "",
+    proposal: null,
+    proposalExists: false,
+    region: "",
+    reservation: null,
+    status: "RECRUITING",
+  });
+
+  const checkJoinEdit = useCallback(() => {
     if (
       partyData.partyStatus === "RECRUITING" &&
       partyData.capacity === partyData.headcount
@@ -102,9 +140,9 @@ function PartyPage() {
       return false;
     }
     return true;
-  };
+  }, [partyData]);
 
-  const editHandler = () => {
+  const editHandler = useCallback(() => {
     if (!user.auth) return setShowLoginModal(true);
 
     if (type === "detail") {
@@ -112,9 +150,9 @@ function PartyPage() {
 
       return navigation(`/party/edit/${partyId}`);
     }
-  };
+  }, [user, type, partyId]);
 
-  const joinHandler = () => {
+  const joinHandler = useCallback(() => {
     if (!user.auth) return setShowLoginModal(true);
 
     if (partyData.myParty && type === "edit") return setShowEditModal(true);
@@ -191,7 +229,20 @@ function PartyPage() {
       setShowJoinModal(true);
     }
     if (type === "edit") return setShowEditModal(true);
-  };
+  }, [
+    user,
+    partyData,
+    type,
+    partyId,
+    memberCount,
+    companions,
+    companionsRef,
+    registerCredit,
+    promotionId,
+    creditRef,
+    agreeChecked,
+    agreementRef,
+  ]);
 
   useEffect(() => {
     setPromotionId(0);
@@ -202,41 +253,43 @@ function PartyPage() {
 
     const newEndTime =
       String(
-        (Number(startTime.slice(0, 2)) + partyData.course.days[0].hours) % 24
+        (Number(startTime.slice(0, 2)) +
+          (partyData.course?.days[0]?.hours || 0)) %
+          24
       ).padStart(2, "0") + startTime.slice(2);
 
     setEndTime(newEndTime);
   }, [startTime, partyData]);
 
-  const getPartyData = async (toScrollTop = false) => {
-    try {
-      const result = await getPartyDetail(partyId);
-      if (result.statusCode !== 200) return setPartyData({ partyId: -1 });
-      setPartyData(result.payload);
-      setRegion(result.payload.region);
-      setName(result.payload.course.name);
-      setStartTime(result.payload.course.days[0].startTime);
-      setEndTime(result.payload.course.days[0].endTime);
-
-      if (
-        result?.payload?.myParty === true &&
-        (type === "join" || type === "edit")
-      ) {
-        navigation(`/party/detail/${partyId}`, { replace: true });
-      }
+  const getPartyData = useCallback(
+    async (toScrollTop = false) => {
+      try {
+        const result = await getPartyDetail(partyId);
+        if (result.statusCode !== 200)
+          return setPartyData({ ...partyData, partyId: -1 });
+        setPartyData(result.payload);
+        setRegion(result.payload.region);
+        setName(result.payload.course.name);
+        setStartTime(result.payload.course.days[0].startTime);
+        setEndTime(result.payload.course.days[0].endTime);
+
+        if (
+          result?.payload?.myParty === true &&
+          (type === "join" || type === "edit")
+        ) {
+          navigation(`/party/detail/${partyId}`, { replace: true });
+        }
 
-      if (toScrollTop) window.scrollTo({ top: 0 });
-    } catch (e) {
-      console.log(e);
-    }
-  };
+        if (toScrollTop) window.scrollTo({ top: 0 });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    [partyId, partyData, type]
+  );
 
   useEffect(() => {
-    const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-    const META_PIXEL_TRACKING_ID = import.meta.env.VITE_META_PIXEL_TRACKING_ID;
-
-    if (!GA_TRACKING_ID || !META_PIXEL_TRACKING_ID) return;
-    if (!window.location.href.includes("localhost")) {
+    if (isGAlive()) {
       let eventName = "";
 
       if (type === "detail") eventName = "12_existing_party";
@@ -279,18 +332,7 @@ function PartyPage() {
         id={partyData.partyId}
       />
       <PartyDate startDate={partyData.startDate} />
-      <PartyMember
-        partyId={partyData.partyId}
-        headcount={partyData.headcount}
-        capacity={partyData.capacity}
-        members={partyData.members}
-        driverId={partyData.driverId}
-        driverName={partyData.driverName}
-        myParty={partyData.myParty}
-        driverReady={partyData.driverReady}
-        partyStatus={partyData.partyStatus}
-        proposal={partyData.proposal}
-      />
+      <PartyMember {...partyData} />
       {(partyData.partyStatus === "WAITING_JOIN_APPROVAL" ||
         partyData.partyStatus === "WAITING_COURSE_CHANGE_APPROVAL") &&
         partyData?.proposal && (
@@ -439,8 +481,9 @@ function PartyPage() {
             comment={
               (partyData.partyStatus === "WAITING_JOIN_APPROVAL" ||
                 partyData.partyStatus === "WAITING_COURSE_CHANGE_APPROVAL") &&
-              partyData.myParty &&
-              "기존 파티 코스"
+              partyData.myParty
+                ? "기존 파티 코스"
+                : ""
             }
           />
           <CourseMap
@@ -553,4 +596,4 @@ function PartyPage() {
   );
 }
 
-export default PartyPage;
+export default memo(PartyPage);
diff --git a/src/types/index.ts b/src/types/index.ts
index 57bf7229..7b03e032 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -355,3 +355,10 @@ export interface ChatRoomDetail {
   roomName: string;
   type: ChatRoomType;
 }
+
+export interface RegionData {
+  image: string;
+  name: string;
+  province: string | null;
+  regionId: number;
+}

From e324f063467d405ec854fea1a6be28dcd1ef9c74 Mon Sep 17 00:00:00 2001
From: Daehee <mok9550@ajou.ac.kr>
Date: Tue, 17 Dec 2024 01:07:46 +0900
Subject: [PATCH 2/4] refactor: Backend server apis

---
 src/api/article.js                            | 46 -------------------
 src/api/article.ts                            | 44 ++++++++++++++++++
 src/api/{card.js => card.ts}                  |  4 +-
 src/api/{chat.js => chat.ts}                  | 18 ++++----
 src/api/course.js                             | 12 -----
 src/api/course.ts                             | 13 ++++++
 src/api/destination.js                        | 39 ----------------
 src/api/destination.ts                        | 41 +++++++++++++++++
 src/api/{driver.js => driver.ts}              | 26 +++++++----
 src/api/{image.js => image.ts}                |  9 ++--
 src/api/{income.js => income.ts}              |  2 +-
 src/api/{notification.js => notification.ts}  | 10 ++--
 src/api/{party.js => party.ts}                | 33 +++++++------
 src/api/profile.js                            |  5 --
 src/api/profile.ts                            |  7 +++
 src/api/{region.js => region.ts}              |  8 ++--
 src/api/users.js                              | 33 -------------
 src/api/users.ts                              | 35 ++++++++++++++
 .../PlaceMap/DestinationModal/index.tsx       |  1 +
 .../ButtonBox/AdminButtonList/index.tsx       |  1 +
 .../ButtonBox/ButtonList/BlockModal/index.tsx |  1 +
 .../ButtonBox/ButtonList/index.tsx            |  1 +
 .../Management/Region/RegionDriver/index.tsx  |  2 +
 .../DriverDetail/AcceptButton/index.tsx       |  4 +-
 .../ArticleComment/CommentForm/index.tsx      |  1 +
 .../CommunityPage/ArticleDetail/index.tsx     |  1 +
 src/pages/CommunityPostPage/index.tsx         |  2 +
 src/pages/CommunitySearchPage/index.tsx       |  1 +
 src/pages/DestinationPage/index.tsx           |  3 +-
 src/pages/DriverCoursePage/index.tsx          | 10 ++--
 src/pages/DriverProfilePage/IconBox/index.tsx |  3 +-
 src/pages/DriverProfilePage/index.tsx         |  1 +
 src/pages/MyHeartPage/HeartItem/index.tsx     |  1 +
 .../CancelModal/index.tsx                     |  2 +-
 src/pages/PartyPage/CreditInfo/index.tsx      |  1 +
 src/pages/PartyPage/EditModal/index.tsx       |  2 +-
 src/pages/PartyPage/JoinModal/index.tsx       |  2 +-
 src/pages/PartyPage/MallangReady/index.tsx    |  1 +
 .../NewPartyAgreement/AcceptModal/index.tsx   |  2 +-
 .../PartyPage/QuitButton/QuitModal/index.tsx  |  2 +-
 src/pages/PartyPage/index.tsx                 |  2 +
 41 files changed, 236 insertions(+), 196 deletions(-)
 delete mode 100644 src/api/article.js
 create mode 100644 src/api/article.ts
 rename src/api/{card.js => card.ts} (68%)
 rename src/api/{chat.js => chat.ts} (55%)
 delete mode 100644 src/api/course.js
 create mode 100644 src/api/course.ts
 delete mode 100644 src/api/destination.js
 create mode 100644 src/api/destination.ts
 rename src/api/{driver.js => driver.ts} (55%)
 rename src/api/{image.js => image.ts} (78%)
 rename src/api/{income.js => income.ts} (74%)
 rename src/api/{notification.js => notification.ts} (55%)
 rename src/api/{party.js => party.ts} (55%)
 delete mode 100644 src/api/profile.js
 create mode 100644 src/api/profile.ts
 rename src/api/{region.js => region.ts} (54%)
 delete mode 100644 src/api/users.js
 create mode 100644 src/api/users.ts

diff --git a/src/api/article.js b/src/api/article.js
deleted file mode 100644
index 1f4b15d7..00000000
--- a/src/api/article.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { DELETE, GET, POST, PUT } from "../utils/axios";
-
-export const getArticleList = async (type, page) =>
-  await GET(`/article?type=${type}&page=${page}`);
-
-export const getArticleDetail = async (articleId) =>
-  await GET(`/article/${articleId}`, true);
-
-export const getMyArticleList = async (page) =>
-  await GET(`/article/my?page=${page}`, true);
-
-export const getMyCommentList = async (page) =>
-  await GET(`/article/comment/my?page=${page}`, true);
-
-export const postNewArticle = async (body) =>
-  await POST(`/article`, body, true);
-
-export const updateMyArticle = async (articleId, body) =>
-  await PUT(`/article/${articleId}`, body, true);
-
-export const deleteMyArticle = async (articleId) =>
-  await DELETE(`/article/${articleId}`, true);
-
-export const postNewComment = async (articleId, comment) =>
-  await POST(`/article/comment/${articleId}?content=${comment}`, {}, true);
-
-export const deleteMyComment = async (commentId) =>
-  await DELETE(`/article/comment/${commentId}`, true);
-
-export const postNewReply = async (commentId, reply) =>
-  await POST(`/article/reply/${commentId}?content=${reply}`, {}, true);
-
-export const deleteMyReply = async (replyId) =>
-  await DELETE(`/article/reply/${replyId}`, true);
-
-export const likeArticle = async (articleId) =>
-  await POST(`/article/dibs/${articleId}`, {}, true);
-
-export const unLikeArticle = async (articleId) =>
-  await DELETE(`/article/dibs/${articleId}`, true);
-
-export const searchArticle = async (keyword, type, page) =>
-  await GET(
-    `/article/search?type=${type}&keyword=${keyword}&page=${page}`,
-    true
-  );
diff --git a/src/api/article.ts b/src/api/article.ts
new file mode 100644
index 00000000..aebd4530
--- /dev/null
+++ b/src/api/article.ts
@@ -0,0 +1,44 @@
+import { DELETE, GET, POST, PUT } from "../utils/axios";
+
+export const getArticleList = async (type: string, page: number) =>
+  await GET(`/article?type=${type}&page=${page}`);
+
+export const getArticleDetail = async (articleId: string) =>
+  await GET(`/article/${articleId}`, true);
+
+export const getMyArticleList = async (page: number) =>
+  await GET(`/article/my?page=${page}`, true);
+
+export const getMyCommentList = async (page: number) =>
+  await GET(`/article/comment/my?page=${page}`, true);
+
+export const postNewArticle = async (body: any) =>
+  await POST(`/article`, body, true);
+
+export const updateMyArticle = async (articleId: string, body: any) =>
+  await PUT(`/article/${articleId}`, body, true);
+
+export const deleteMyArticle = async (articleId: number) =>
+  await DELETE(`/article/${articleId}`, true);
+
+export const postNewComment = async (articleId: string, comment: string) =>
+  await POST(`/article/comment/${articleId}?content=${comment}`, {}, true);
+
+export const deleteMyComment = async (commentId: number) =>
+  await DELETE(`/article/comment/${commentId}`, true);
+
+export const postNewReply = async (commentId: number, reply: string) =>
+  await POST(`/article/reply/${commentId}?content=${reply}`, {}, true);
+
+export const deleteMyReply = async (replyId: number) =>
+  await DELETE(`/article/reply/${replyId}`, true);
+
+export const searchArticle = async (
+  keyword: string,
+  type: string,
+  page: number
+) =>
+  await GET(
+    `/article/search?type=${type}&keyword=${keyword}&page=${page}`,
+    true
+  );
diff --git a/src/api/card.js b/src/api/card.ts
similarity index 68%
rename from src/api/card.js
rename to src/api/card.ts
index 7527b6fe..88d4220d 100644
--- a/src/api/card.js
+++ b/src/api/card.ts
@@ -2,11 +2,11 @@ import { GET, POST, DELETE } from "../utils/axios";
 
 export const getCard = async () => await GET("/card", true);
 
-export const postCard = async (body) => await POST("/card", body, true);
+export const postCard = async (body: any) => await POST("/card", body, true);
 
 export const deleteCard = async () => await DELETE("/card", true);
 
-export const postPaymentAgain = async (reservationId) =>
+export const postPaymentAgain = async (reservationId: number) =>
   await POST(`/card/${reservationId}`, {}, true);
 
 export const getMyPaymentList = async () => await GET("/payment/my", true);
diff --git a/src/api/chat.js b/src/api/chat.ts
similarity index 55%
rename from src/api/chat.js
rename to src/api/chat.ts
index 4ca262ca..77615384 100644
--- a/src/api/chat.js
+++ b/src/api/chat.ts
@@ -2,31 +2,31 @@ import { DELETE, GET, POST } from "../utils/axios";
 
 export const getChatList = async () => await GET("/chat/list", true);
 
-export const getChatRoomData = async (chatRoomId) =>
+export const getChatRoomData = async (chatRoomId: number) =>
   await GET(`/chat/${chatRoomId}`, true);
 
-export const inviteMemberAPI = async (chatRoomId, userIds) =>
+export const inviteMemberAPI = async (chatRoomId: number, userIds: string) =>
   await POST(`/chat/invite/${chatRoomId}?userId=${userIds}`, {}, true);
 
-export const leaveChat = async (chatRoomId) =>
+export const leaveChat = async (chatRoomId: number) =>
   await DELETE(`/chat/leave/${chatRoomId}`, true);
 
-export const makeNewGroupChat = async (userIds, roomName) =>
+export const makeNewGroupChat = async (userIds: string, roomName: string) =>
   await GET(`/chat/groupChat?userId=${userIds}&roomName=${roomName}`, true);
 
-export const makeNewCoupleChat = async (userId) =>
+export const makeNewCoupleChat = async (userId: number) =>
   await GET(`/chat/coupleChat?userId=${userId}`, true);
 
-export const getPartyChatId = async (partyId) =>
+export const getPartyChatId = async (partyId: number) =>
   await GET(`/chat/party/${partyId}`, true);
 
 export const getChatBlockList = async () => await GET("/chat/block", true);
 
-export const blockUser = async (userId) =>
+export const blockUser = async (userId: number) =>
   await POST(`/chat/block/${userId}`, {}, true);
 
-export const nonBlockUser = async (userId) =>
+export const nonBlockUser = async (userId: number) =>
   await DELETE(`/chat/block/${userId}`, true);
 
-export const kickPartyChatUser = async (chatRoomId, userId) =>
+export const kickPartyChatUser = async (chatRoomId: number, userId: number) =>
   await DELETE(`/chat/party/${chatRoomId}?userId=${userId}`, true);
diff --git a/src/api/course.js b/src/api/course.js
deleted file mode 100644
index 2fdd064f..00000000
--- a/src/api/course.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DELETE, GET, POST, PUT } from "../utils/axios";
-
-export const getCourseDetail = async (courseId) =>
-  await GET(`/course/${courseId}`, true);
-
-export const postNewCourse = async (data) => await POST("/course", data, true);
-
-export const putCourseDetail = async (courseId, body) =>
-  await PUT(`/course/${courseId}`, body, true);
-
-export const deleteCourse = async (courseId) =>
-  await DELETE(`/course/${courseId}`, true);
diff --git a/src/api/course.ts b/src/api/course.ts
new file mode 100644
index 00000000..e085879f
--- /dev/null
+++ b/src/api/course.ts
@@ -0,0 +1,13 @@
+import { DELETE, GET, POST, PUT } from "../utils/axios";
+
+export const getCourseDetail = async (courseId: number | string) =>
+  await GET(`/course/${courseId}`, true);
+
+export const postNewCourse = async (body: any) =>
+  await POST("/course", body, true);
+
+export const putCourseDetail = async (courseId: string, body: any) =>
+  await PUT(`/course/${courseId}`, body, true);
+
+export const deleteCourse = async (courseId: string) =>
+  await DELETE(`/course/${courseId}`, true);
diff --git a/src/api/destination.js b/src/api/destination.js
deleted file mode 100644
index a0dfe037..00000000
--- a/src/api/destination.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { GET, POST, PUT, DELETE } from "../utils/axios";
-
-export const getAllMarkers = async () => await GET("/destination/map", true);
-
-export const getSearchInfo = async (searchKeyword) =>
-  await GET(`/destination?keyword=${searchKeyword}`, true);
-
-export const getDestinationDetail = async (destinationId) =>
-  await GET(`/destination/${destinationId}`, true);
-
-export const postDestinationComment = async (data, destinationId) =>
-  await POST(`/destination/review/${destinationId}`, data, true);
-
-export const putDestinationComment = async (data, reviewId) =>
-  await PUT(`/destination/review/${reviewId}`, data, true);
-
-export const deleteDestinationComment = async (reviewId) =>
-  await DELETE(`/destination/review/${reviewId}`, true);
-
-export const postLikeDestination = async (destinationId) =>
-  await POST(`/destination/dibs/${destinationId}`, {}, true);
-
-export const deleteUnLikeDestination = async (destinationId) =>
-  await DELETE(`/destination/dibs/${destinationId}`, true);
-
-export const getLikeDestination = async () =>
-  await GET(`/destination/dibs`, true);
-
-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);
diff --git a/src/api/destination.ts b/src/api/destination.ts
new file mode 100644
index 00000000..d827da41
--- /dev/null
+++ b/src/api/destination.ts
@@ -0,0 +1,41 @@
+import { GET, POST, PUT, DELETE } from "../utils/axios";
+
+export const getAllMarkers = async () => await GET("/destination/map", true);
+
+export const getSearchInfo = async (searchKeyword: string) =>
+  await GET(`/destination?keyword=${searchKeyword}`, true);
+
+export const getDestinationDetail = async (destinationId: number) =>
+  await GET(`/destination/${destinationId}`, true);
+
+export const postDestinationComment = async (
+  data: any,
+  destinationId: number
+) => await POST(`/destination/review/${destinationId}`, data, true);
+
+export const putDestinationComment = async (data: any, reviewId: number) =>
+  await PUT(`/destination/review/${reviewId}`, data, true);
+
+export const deleteDestinationComment = async (reviewId: number) =>
+  await DELETE(`/destination/review/${reviewId}`, true);
+
+export const postLikeDestination = async (destinationId: number) =>
+  await POST(`/destination/dibs/${destinationId}`, {}, true);
+
+export const deleteUnLikeDestination = async (destinationId: number) =>
+  await DELETE(`/destination/dibs/${destinationId}`, true);
+
+export const getLikeDestination = async () =>
+  await GET(`/destination/dibs`, true);
+
+export const postNewDestinationUser = async (body: any) =>
+  await POST("/destination/by-user", body, true);
+
+export const postNewDestinationAdmin = async (body: any) =>
+  await POST("/destination", body, true);
+
+export const putDestinationAdmin = async (data: any, destinationId: number) =>
+  await PUT(`/destination/${destinationId}`, data, true);
+
+export const deleteDestinationAdmin = async (destinationId: number) =>
+  await DELETE(`/destination/${destinationId}`, true);
diff --git a/src/api/driver.js b/src/api/driver.ts
similarity index 55%
rename from src/api/driver.js
rename to src/api/driver.ts
index fed3788c..1d9f3907 100644
--- a/src/api/driver.js
+++ b/src/api/driver.ts
@@ -1,34 +1,38 @@
 import { POST, GET, PUT, DELETE } from "../utils/axios";
 
-export const getRegionDriver = async (region, member, date) =>
+export const getRegionDriver = async (
+  region: string,
+  member: number,
+  date: string
+) =>
   await GET(
     `/driver/search?region=${region}&headcount=${member}&startDate=${date}`,
     true
   );
 
-export const getDriverInfo = async (driverId) =>
+export const getDriverInfo = async (driverId: string | number) =>
   await GET(`/driver/${driverId}`, true);
 
-export const postComment = async (data, driverId) =>
+export const postComment = async (data: any, driverId: number) =>
   await POST(`/driver/review/${driverId}`, data, true);
 
-export const putComment = async (data, reviewId) =>
+export const putComment = async (data: any, reviewId: number) =>
   await PUT(`/driver/review/${reviewId}`, data, true);
 
-export const deleteComment = async (reviewId) =>
+export const deleteComment = async (reviewId: number) =>
   await DELETE(`/driver/review/${reviewId}`, true);
 
 export const getDriverMyInfo = async () => await GET("/driver/my", true);
 
-export const putDriverMyInfo = async (data) =>
+export const putDriverMyInfo = async (data: any) =>
   await PUT("/driver/my", data, true);
 
 export const getDriverApply = async () => await GET("/driver/apply", true);
 
-export const postDriverApply = async (data) =>
+export const postDriverApply = async (data: any) =>
   await POST("/driver/apply", data, true);
 
-export const putDriverApply = async (data) =>
+export const putDriverApply = async (data: any) =>
   await PUT("/driver/apply", data, true);
 
 export const deleteDriverApply = async () =>
@@ -37,5 +41,7 @@ export const deleteDriverApply = async () =>
 export const getDriverApplyAdmin = async () =>
   await GET("/driver/accept", true);
 
-export const putDriverApplyAcceptAdmin = async (driverId, accept) =>
-  await PUT(`/driver/accept/${driverId}?accept=${accept}`, {}, true);
+export const putDriverApplyAcceptAdmin = async (
+  driverId: string,
+  accept: boolean
+) => await PUT(`/driver/accept/${driverId}?accept=${accept}`, {}, true);
diff --git a/src/api/image.js b/src/api/image.ts
similarity index 78%
rename from src/api/image.js
rename to src/api/image.ts
index b26910a0..476d5e52 100644
--- a/src/api/image.js
+++ b/src/api/image.ts
@@ -1,12 +1,13 @@
+import { BASE_SERVER_URL } from "../utils/axios";
 import axios from "axios";
 
-export const uploadProfileImage = async (image) => {
+export const uploadProfileImage = async (image: File) => {
   try {
     const formData = new FormData();
     formData.append("file", image);
 
     const config = {
-      baseURL: import.meta.env.VITE_BASE_SERVER_URL,
+      baseURL: BASE_SERVER_URL,
       withCredentials: true,
       headers: {
         "Contest-Type": "multipart/form-data",
@@ -20,13 +21,13 @@ export const uploadProfileImage = async (image) => {
   }
 };
 
-export const uploadImage = async (image) => {
+export const uploadImage = async (image: File) => {
   try {
     const formData = new FormData();
     formData.append("file", image);
 
     const config = {
-      baseURL: import.meta.env.VITE_BASE_SERVER_URL,
+      baseURL: BASE_SERVER_URL,
       withCredentials: true,
       headers: {
         "Contest-Type": "multipart/form-data",
diff --git a/src/api/income.js b/src/api/income.ts
similarity index 74%
rename from src/api/income.js
rename to src/api/income.ts
index 8baa6045..300de172 100644
--- a/src/api/income.js
+++ b/src/api/income.ts
@@ -1,6 +1,6 @@
 import { GET } from "../utils/axios";
 
-export const getDriverMonthlyIncome = async (month) =>
+export const getDriverMonthlyIncome = async (month: string) =>
   await GET(`/income/monthly?month=${month}`, true);
 
 export const getCommisionRate = async () =>
diff --git a/src/api/notification.js b/src/api/notification.ts
similarity index 55%
rename from src/api/notification.js
rename to src/api/notification.ts
index c4d595ee..b60467c5 100644
--- a/src/api/notification.js
+++ b/src/api/notification.ts
@@ -1,18 +1,18 @@
-import { GET, PUT, DELETE, POST } from "../utils/axios";
+import { GET, PUT, DELETE } from "../utils/axios";
 
 export const getNotification = async () => await GET("/notification", true);
 
-export const putNotification = async (notificationId) =>
+export const putNotification = async (notificationId: number) =>
   await PUT(`/notification/${notificationId}`, {}, true);
 
-export const deleteNotification = async (notificationId) =>
+export const deleteNotification = async (notificationId: number) =>
   await DELETE(`/notification/${notificationId}`, true);
 
 export const putAllNotification = async () =>
   await PUT("/notification/all", {}, true);
 
-export const putFirebaseToken = async (body) =>
+export const putFirebaseToken = async (body: any) =>
   await PUT("/firebase", body, true);
 
-export const deleteFirebaseToken = async (body) =>
+export const deleteFirebaseToken = async (body: any) =>
   await DELETE("/firebase", true, body);
diff --git a/src/api/party.js b/src/api/party.ts
similarity index 55%
rename from src/api/party.js
rename to src/api/party.ts
index ffee2163..401183d7 100644
--- a/src/api/party.js
+++ b/src/api/party.ts
@@ -1,49 +1,54 @@
 import { DELETE, GET, POST, PUT } from "../utils/axios";
 
-export const getPartyList = async (region, nowDate, num, price) =>
+export const getPartyList = async (
+  region: string,
+  nowDate: string[],
+  num: number,
+  price: string | number
+) =>
   await GET(
     `/party/search?region=${region}&headcount=${num}&startDate=${nowDate[0]}&endDate=${nowDate[1]}&maxPrice=${price}`
   );
 
-export const getPartyDetail = async (partyId) =>
+export const getPartyDetail = async (partyId: string) =>
   await GET(`/party/${partyId}`, true);
 
-export const postLikeParty = async (partyId) =>
+export const postLikeParty = async (partyId: number) =>
   await POST(`/party/dibs/${partyId}`, {}, true);
 
-export const deleteUnLikeParty = async (partyId) =>
+export const deleteUnLikeParty = async (partyId: number) =>
   await DELETE(`/party/dibs/${partyId}`, true);
 
 export const getLikeParty = async () => await GET("/party/dibs", true);
 
-export const postPartyJoin = async (partyId, data) =>
+export const postPartyJoin = async (partyId: string, data: any) =>
   await POST(`/party/join/${partyId}`, data, true);
 
-export const putMallangReady = async (partyId, ready) =>
+export const putMallangReady = async (partyId: string, ready: boolean) =>
   await PUT(`/party/ready/${partyId}?ready=${ready}`, {}, true);
 
-export const putPartyCourse = async (partyId, body) =>
+export const putPartyCourse = async (partyId: string, body: any) =>
   await PUT(`/party/course/${partyId}`, body, true);
 
-export const putProposalAccept = async (proposalId, accept) =>
+export const putProposalAccept = async (proposalId: number, accept: boolean) =>
   await PUT(`/party/proposal/${proposalId}?accept=${accept}`, {}, true);
 
-export const deleteProposalCancel = async (proposalId) =>
+export const deleteProposalCancel = async (proposalId: number) =>
   await DELETE(`/party/proposal/${proposalId}`, true);
 
-export const deleteQuitParty = async (partyId) =>
+export const deleteQuitParty = async (partyId: string) =>
   await DELETE(`/party/quit/${partyId}`, true);
 
-export const deleteQuitReservationParty = async (partyId) =>
+export const deleteQuitReservationParty = async (partyId: string) =>
   await DELETE(`/party/reservation/${partyId}`, true);
 
-export const postNewParty = async (data) =>
+export const postNewParty = async (data: any) =>
   await POST("/party/create", data, true);
 
-export const deleteNewParty = async (partyId) =>
+export const deleteNewParty = async (partyId: string) =>
   await DELETE(`/party/create/${partyId}`, true);
 
-export const putNewPartyAccept = async (partyId, accept) =>
+export const putNewPartyAccept = async (partyId: string, accept: boolean) =>
   await PUT(`/party/create/${partyId}?accept=${accept}`, {}, true);
 
 export const getPartyHistory = async () => await GET("/party/history", true);
diff --git a/src/api/profile.js b/src/api/profile.js
deleted file mode 100644
index 10a42117..00000000
--- a/src/api/profile.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PUT } from "../utils/axios";
-
-export const putProfile = async (data) => await PUT(`/profile`, data, true);
-
-export const putPassword = async (data) => await PUT(`/password`, data, true);
diff --git a/src/api/profile.ts b/src/api/profile.ts
new file mode 100644
index 00000000..368c4cd0
--- /dev/null
+++ b/src/api/profile.ts
@@ -0,0 +1,7 @@
+import { PUT } from "../utils/axios";
+
+export const putProfile = async (data: any) =>
+  await PUT(`/profile`, data, true);
+
+export const putPassword = async (data: any) =>
+  await PUT(`/password`, data, true);
diff --git a/src/api/region.js b/src/api/region.ts
similarity index 54%
rename from src/api/region.js
rename to src/api/region.ts
index 4d722528..bf61e298 100644
--- a/src/api/region.js
+++ b/src/api/region.ts
@@ -2,14 +2,14 @@ import { GET, POST, PUT, DELETE } from "../utils/axios";
 
 export const getPartyRegionList = async () => await GET("/region");
 
-export const postNewPartyRegion = async (body) =>
+export const postNewPartyRegion = async (body: any) =>
   await POST("/region", body, true);
 
-export const putPartyRegion = async (regionId, body) =>
+export const putPartyRegion = async (regionId: number, body: any) =>
   await PUT(`/region/${regionId}`, body, true);
 
-export const deletePartyRegion = async (regionId) =>
+export const deletePartyRegion = async (regionId: number) =>
   await DELETE(`/region/${regionId}`, true);
 
-export const getPartyRegionDriverList = async (regionId) =>
+export const getPartyRegionDriverList = async (regionId: string) =>
   await GET(`/region/driver/${regionId}`, true);
diff --git a/src/api/users.js b/src/api/users.js
deleted file mode 100644
index cbb0a8d1..00000000
--- a/src/api/users.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { GET, POST, PUT, DELETE } from "../utils/axios";
-
-export const signup = async (data) => await POST("/signup", data);
-
-export const login = async (data) => await POST("/login", data);
-
-export const auth = async () => await GET("/auth", true);
-
-export const refresh = async () => await GET("/refresh-token", true);
-
-export const checkDuplication = async (type, value) =>
-  await GET(`/check-duplication?type=${type}&value=${value}`);
-
-export const getCertificationCode = async (phoneNumber) =>
-  await GET(`/certification?phoneNumber=${phoneNumber}`);
-
-export const searchId = async (phoneNumber, code) =>
-  await GET(`/certification/id?phoneNumber=${phoneNumber}&code=${code}`);
-
-export const searchPassword = async (phoneNumber, code) =>
-  await GET(`/certification/password?phoneNumber=${phoneNumber}&code=${code}`);
-
-export const putNewPassword = async (data) =>
-  await PUT(`/certification/password`, data);
-
-export const searchUser = async (nickName) =>
-  await GET(`/user/search?nickname=${nickName}`, true);
-
-export const getUserInfo = async (userId) => await GET(`/user/info/${userId}`);
-
-export const deleteUser = async () => await DELETE("/user/withdrawal", true);
-
-export const postNewReport = async (body) => await POST("/report", body, true);
diff --git a/src/api/users.ts b/src/api/users.ts
new file mode 100644
index 00000000..c778e1ed
--- /dev/null
+++ b/src/api/users.ts
@@ -0,0 +1,35 @@
+import { GET, POST, PUT, DELETE } from "../utils/axios";
+
+export const signup = async (data: any) => await POST("/signup", data);
+
+export const login = async (data: any) => await POST("/login", data);
+
+export const auth = async () => await GET("/auth", true);
+
+export const refresh = async () => await GET("/refresh-token", true);
+
+export const checkDuplication = async (type: string, value: string) =>
+  await GET(`/check-duplication?type=${type}&value=${value}`);
+
+export const getCertificationCode = async (phoneNumber: string) =>
+  await GET(`/certification?phoneNumber=${phoneNumber}`);
+
+export const searchId = async (phoneNumber: string, code: string) =>
+  await GET(`/certification/id?phoneNumber=${phoneNumber}&code=${code}`);
+
+export const searchPassword = async (phoneNumber: string, code: string) =>
+  await GET(`/certification/password?phoneNumber=${phoneNumber}&code=${code}`);
+
+export const putNewPassword = async (data: any) =>
+  await PUT(`/certification/password`, data);
+
+export const searchUser = async (nickName: string) =>
+  await GET(`/user/search?nickname=${nickName}`, true);
+
+export const getUserInfo = async (userId: number) =>
+  await GET(`/user/info/${userId}`);
+
+export const deleteUser = async () => await DELETE("/user/withdrawal", true);
+
+export const postNewReport = async (body: any) =>
+  await POST("/report", body, true);
diff --git a/src/components/PlaceMap/DestinationModal/index.tsx b/src/components/PlaceMap/DestinationModal/index.tsx
index 2e98b02b..0c2deb58 100644
--- a/src/components/PlaceMap/DestinationModal/index.tsx
+++ b/src/components/PlaceMap/DestinationModal/index.tsx
@@ -87,6 +87,7 @@ function DestinationModal({
   }, [courseData, clickedData]);
 
   const heartClickHandler = useCallback(async () => {
+    if (!clickedData?.destinationId) return;
     if (!user.auth) return setShowLoginModal(true);
 
     try {
diff --git a/src/components/ProfileModal/ButtonBox/AdminButtonList/index.tsx b/src/components/ProfileModal/ButtonBox/AdminButtonList/index.tsx
index 5b35685d..9456ac90 100644
--- a/src/components/ProfileModal/ButtonBox/AdminButtonList/index.tsx
+++ b/src/components/ProfileModal/ButtonBox/AdminButtonList/index.tsx
@@ -32,6 +32,7 @@ function AdminButtonList({
   const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   const goCoupleChat = useCallback(async () => {
+    if (!userId) return;
     try {
       const result = await makeNewCoupleChat(userId);
       dispatch(setPartyRoomId(result.payload.chatRoomId));
diff --git a/src/components/ProfileModal/ButtonBox/ButtonList/BlockModal/index.tsx b/src/components/ProfileModal/ButtonBox/ButtonList/BlockModal/index.tsx
index ebc8f7fd..f5dfb4de 100644
--- a/src/components/ProfileModal/ButtonBox/ButtonList/BlockModal/index.tsx
+++ b/src/components/ProfileModal/ButtonBox/ButtonList/BlockModal/index.tsx
@@ -36,6 +36,7 @@ function BlockModal({
 
   const blockChatUser = useCallback(async () => {
     if (loading) return;
+    if (!userId) return;
 
     try {
       setLoading(true);
diff --git a/src/components/ProfileModal/ButtonBox/ButtonList/index.tsx b/src/components/ProfileModal/ButtonBox/ButtonList/index.tsx
index ca5c49a6..5ce0dca2 100644
--- a/src/components/ProfileModal/ButtonBox/ButtonList/index.tsx
+++ b/src/components/ProfileModal/ButtonBox/ButtonList/index.tsx
@@ -35,6 +35,7 @@ function ButtonList({ userId, setShowModal, nickname, chatRoomId }: Props) {
   const [isChatBlock, setIsChatBlock] = useState(false);
 
   const goCoupleChat = useCallback(async () => {
+    if (!userId) return;
     if (!user.auth) return setShowLoginModal(true);
     if (isChatBlock) return setShowErrorModal(true);
 
diff --git a/src/pages/AdminPage/Management/Region/RegionDriver/index.tsx b/src/pages/AdminPage/Management/Region/RegionDriver/index.tsx
index b375d053..492380c3 100644
--- a/src/pages/AdminPage/Management/Region/RegionDriver/index.tsx
+++ b/src/pages/AdminPage/Management/Region/RegionDriver/index.tsx
@@ -15,6 +15,8 @@ function RegionDriver() {
   const regionName = searchParams.get("region_name");
 
   const getPartyRegionDriverListFunc = useCallback(async () => {
+    if (!regionId) return;
+
     try {
       const result = await getPartyRegionDriverList(regionId);
       setRegionDriverData(result.payload);
diff --git a/src/pages/AdminPage/User/DriverRegistration/DriverDetail/AcceptButton/index.tsx b/src/pages/AdminPage/User/DriverRegistration/DriverDetail/AcceptButton/index.tsx
index a88e010a..fe3877de 100644
--- a/src/pages/AdminPage/User/DriverRegistration/DriverDetail/AcceptButton/index.tsx
+++ b/src/pages/AdminPage/User/DriverRegistration/DriverDetail/AcceptButton/index.tsx
@@ -17,6 +17,7 @@ function AcceptButton({ getDriverApplyAdminFunc }: Props) {
 
   const driverApplyAcceptHandler = useCallback(
     async (accept: boolean) => {
+      if (!driverId) return;
       try {
         await putDriverApplyAcceptAdmin(driverId, accept);
 
@@ -33,8 +34,9 @@ function AcceptButton({ getDriverApplyAdminFunc }: Props) {
   );
 
   const goDriverChat = useCallback(async () => {
+    if (!driverId) return;
     try {
-      const result = await makeNewCoupleChat(driverId);
+      const result = await makeNewCoupleChat(Number(driverId));
       dispatch(setPartyRoomId(result.payload.chatRoomId));
       navigation("/talk");
     } catch (e) {
diff --git a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentForm/index.tsx b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentForm/index.tsx
index 2bad6c8a..641df5e8 100644
--- a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentForm/index.tsx
+++ b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentForm/index.tsx
@@ -17,6 +17,7 @@ function CommentForm({ getArticleDetailFunc }: Props) {
   const commentSubmitHandler = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
+      if (!articleId) return;
 
       try {
         await postNewComment(articleId, newComment);
diff --git a/src/pages/CommunityPage/ArticleDetail/index.tsx b/src/pages/CommunityPage/ArticleDetail/index.tsx
index f6d286f0..3cf1d8e7 100644
--- a/src/pages/CommunityPage/ArticleDetail/index.tsx
+++ b/src/pages/CommunityPage/ArticleDetail/index.tsx
@@ -33,6 +33,7 @@ function ArticleDetail({ getArticleListFunc }: Props) {
   });
 
   const getArticleDetailFunc = useCallback(async () => {
+    if (!articleId) return;
     try {
       const result = await getArticleDetail(articleId);
 
diff --git a/src/pages/CommunityPostPage/index.tsx b/src/pages/CommunityPostPage/index.tsx
index 7dba9a56..82529401 100644
--- a/src/pages/CommunityPostPage/index.tsx
+++ b/src/pages/CommunityPostPage/index.tsx
@@ -56,6 +56,7 @@ function CommunityPostPage() {
     async (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
 
+      if (!articleId) return;
       if (selectedType === "선택해주세요.")
         return showModalHandler("게시판을 선택해주세요.");
       if (title === "") return showModalHandler("제목을 입력해주세요.");
@@ -117,6 +118,7 @@ function CommunityPostPage() {
   );
 
   const getArticleData = useCallback(async () => {
+    if (!articleId) return;
     try {
       const result = await getArticleDetail(articleId);
 
diff --git a/src/pages/CommunitySearchPage/index.tsx b/src/pages/CommunitySearchPage/index.tsx
index 933bf63c..bf9e188e 100644
--- a/src/pages/CommunitySearchPage/index.tsx
+++ b/src/pages/CommunitySearchPage/index.tsx
@@ -20,6 +20,7 @@ function CommunitySearchPage() {
 
   const getArticleData = useCallback(async () => {
     if (page >= totalPages) return;
+    if (!keyword) return;
 
     try {
       const result = await searchArticle(keyword, "all", page);
diff --git a/src/pages/DestinationPage/index.tsx b/src/pages/DestinationPage/index.tsx
index 47051808..3b4473a9 100644
--- a/src/pages/DestinationPage/index.tsx
+++ b/src/pages/DestinationPage/index.tsx
@@ -30,8 +30,9 @@ function DestinationPage() {
   });
 
   const getDestinationInfo = useCallback(async () => {
+    if (!destinationId) return;
     try {
-      const result = await getDestinationDetail(destinationId);
+      const result = await getDestinationDetail(Number(destinationId));
       setDestinationInfo(result.payload);
     } catch (e) {
       console.log(e);
diff --git a/src/pages/DriverCoursePage/index.tsx b/src/pages/DriverCoursePage/index.tsx
index 5de10ae7..849c7985 100644
--- a/src/pages/DriverCoursePage/index.tsx
+++ b/src/pages/DriverCoursePage/index.tsx
@@ -23,8 +23,8 @@ import CourseImage from "./CourseImage";
 import CourseInfo from "./CourseInfo";
 import PriceList from "./PriceList";
 
-interface DestinationState extends Destination {
-  image?: string | string[];
+interface DestinationImage extends Destination {
+  image?: string | File;
 }
 
 function DriverCoursePage() {
@@ -36,7 +36,7 @@ function DriverCoursePage() {
   const [capacity, setCapacity] = useState(0);
   const [prices, setPrices] = useState<{ hours: number; price: number }[]>([]);
   const [priceIndex, setPriceIndex] = useState(0);
-  const [destinations, setDestinations] = useState<DestinationState[]>([]);
+  const [destinations, setDestinations] = useState<DestinationImage[]>([]);
   const [startTime, setStartTime] = useState("10:00");
   const [endTime, setEndTime] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
@@ -47,6 +47,8 @@ function DriverCoursePage() {
   const [courseRegion, setCourseRegion] = useState("");
 
   const saveCourse = useCallback(async () => {
+    if (!courseId) return;
+
     const destinationImages = destinations.reduce<string[]>((acc, cur) => {
       if (typeof cur.image === "string") {
         acc.push(cur.image);
@@ -147,7 +149,7 @@ function DriverCoursePage() {
       setPrices(driverResult.payload.prices);
       setDriverRegion(driverResult.payload.region);
 
-      if (courseId !== "new") {
+      if (courseId !== "new" && courseId) {
         const courseResult = await getCourseDetail(courseId);
         setCourseRegion(courseResult.payload.region);
         setName(courseResult.payload.name);
diff --git a/src/pages/DriverProfilePage/IconBox/index.tsx b/src/pages/DriverProfilePage/IconBox/index.tsx
index bd7efc75..a6456c8b 100644
--- a/src/pages/DriverProfilePage/IconBox/index.tsx
+++ b/src/pages/DriverProfilePage/IconBox/index.tsx
@@ -25,9 +25,10 @@ function IconBox({ images, name, introduction }: Props) {
 
   const goDriverChat = useCallback(async () => {
     if (!user.auth) return setShowLoginModal(true);
+    if (!driverId) return;
 
     try {
-      const result = await makeNewCoupleChat(driverId);
+      const result = await makeNewCoupleChat(Number(driverId));
       dispatch(setPartyRoomId(result.payload.chatRoomId));
       navigation("/talk");
     } catch (e) {
diff --git a/src/pages/DriverProfilePage/index.tsx b/src/pages/DriverProfilePage/index.tsx
index 03c57471..736a47af 100644
--- a/src/pages/DriverProfilePage/index.tsx
+++ b/src/pages/DriverProfilePage/index.tsx
@@ -61,6 +61,7 @@ function DriverProfilePage() {
   );
 
   const settingDriverInfo = useCallback(async () => {
+    if (!driverId) return;
     try {
       const result = await getDriverInfo(driverId);
       setDriverInfo(result.payload);
diff --git a/src/pages/MyHeartPage/HeartItem/index.tsx b/src/pages/MyHeartPage/HeartItem/index.tsx
index f6611d17..032d6a4d 100644
--- a/src/pages/MyHeartPage/HeartItem/index.tsx
+++ b/src/pages/MyHeartPage/HeartItem/index.tsx
@@ -32,6 +32,7 @@ function HeartItem({
   const heartClickHandler = useCallback(
     async (e: MouseEvent<HTMLImageElement>) => {
       e.stopPropagation();
+      if (!destinationId) return;
 
       try {
         heart
diff --git a/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx b/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
index f685cef8..81e4ca60 100644
--- a/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
+++ b/src/pages/PartyPage/CancelNewPartyButton/CancelModal/index.tsx
@@ -26,7 +26,7 @@ function CancelModal({ showModal, setShowModal }: Props) {
   const [loading, setLoading] = useState(false);
 
   const CancelHandler = useCallback(async () => {
-    if (loading) return;
+    if (loading || !partyId) return;
 
     try {
       setLoading(true);
diff --git a/src/pages/PartyPage/CreditInfo/index.tsx b/src/pages/PartyPage/CreditInfo/index.tsx
index 78ac750a..2b3dddca 100644
--- a/src/pages/PartyPage/CreditInfo/index.tsx
+++ b/src/pages/PartyPage/CreditInfo/index.tsx
@@ -33,6 +33,7 @@ function CreditInfo({
   const [message, setMessage] = useState("");
 
   const repaymentHandler = useCallback(async () => {
+    if (!reservationId) return;
     try {
       const result = await postPaymentAgain(reservationId);
       if (result.statusCode === 200)
diff --git a/src/pages/PartyPage/EditModal/index.tsx b/src/pages/PartyPage/EditModal/index.tsx
index a4e68946..d907c876 100644
--- a/src/pages/PartyPage/EditModal/index.tsx
+++ b/src/pages/PartyPage/EditModal/index.tsx
@@ -75,7 +75,7 @@ function EditModal({
   );
 
   const editPartyHandler = useCallback(async () => {
-    if (loading) return;
+    if (loading || !partyId) return;
 
     try {
       setLoading(true);
diff --git a/src/pages/PartyPage/JoinModal/index.tsx b/src/pages/PartyPage/JoinModal/index.tsx
index cf7feb8d..a1044ae9 100644
--- a/src/pages/PartyPage/JoinModal/index.tsx
+++ b/src/pages/PartyPage/JoinModal/index.tsx
@@ -60,7 +60,7 @@ function JoinModal({
   );
 
   const joinPartyHandler = useCallback(async () => {
-    if (loading) return;
+    if (loading || !partyId) return;
 
     try {
       setLoading(true);
diff --git a/src/pages/PartyPage/MallangReady/index.tsx b/src/pages/PartyPage/MallangReady/index.tsx
index 9600785f..db0a243e 100644
--- a/src/pages/PartyPage/MallangReady/index.tsx
+++ b/src/pages/PartyPage/MallangReady/index.tsx
@@ -41,6 +41,7 @@ function MallangReady({
   const [loading, setLoading] = useState(false);
 
   const readyClickHandler = useCallback(async () => {
+    if (!partyId) return;
     try {
       await putMallangReady(partyId, !ready);
       setReady(!ready);
diff --git a/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx b/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
index c0f7a959..3e084f7c 100644
--- a/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
+++ b/src/pages/PartyPage/NewPartyAgreement/AcceptModal/index.tsx
@@ -27,7 +27,7 @@ function AcceptModal({ showModal, setShowModal, getPartyData, accept }: Props) {
   const [complete, setComplete] = useState(false);
 
   const acceptHandler = useCallback(async () => {
-    if (loading) return;
+    if (loading || !partyId) return;
 
     try {
       setLoading(true);
diff --git a/src/pages/PartyPage/QuitButton/QuitModal/index.tsx b/src/pages/PartyPage/QuitButton/QuitModal/index.tsx
index 6ab7d29a..bd162be5 100644
--- a/src/pages/PartyPage/QuitButton/QuitModal/index.tsx
+++ b/src/pages/PartyPage/QuitButton/QuitModal/index.tsx
@@ -73,7 +73,7 @@ function QuitModal({
   }, [startDate]);
 
   const quitParty = useCallback(async () => {
-    if (loading) return;
+    if (loading || !partyId) return;
 
     try {
       setLoading(true);
diff --git a/src/pages/PartyPage/index.tsx b/src/pages/PartyPage/index.tsx
index f9af0296..bc3cc979 100644
--- a/src/pages/PartyPage/index.tsx
+++ b/src/pages/PartyPage/index.tsx
@@ -263,6 +263,8 @@ function PartyPage() {
 
   const getPartyData = useCallback(
     async (toScrollTop = false) => {
+      if (!partyId) return;
+
       try {
         const result = await getPartyDetail(partyId);
         if (result.statusCode !== 200)

From 7ff1ef187df6890cf0d4eb87309af6440c294581 Mon Sep 17 00:00:00 2001
From: Daehee <mok9550@ajou.ac.kr>
Date: Tue, 17 Dec 2024 01:22:00 +0900
Subject: [PATCH 3/4] refactor: Temporary util functions

---
 src/api/image.ts                              |  2 +-
 src/components/PassCheck/index.tsx            |  2 +-
 src/components/PushNotification/index.tsx     |  3 +-
 .../CommentItem/ReplyItem/index.tsx           |  2 +-
 .../ArticleComment/CommentItem/index.tsx      |  2 +-
 src/pages/TalkPage/TalkRoom/index.tsx         |  2 +-
 src/pages/TalkPage/index.tsx                  |  2 +-
 src/utils/{axios.js => axios.ts}              | 24 ++++++++-----
 src/utils/{data.js => data.ts}                |  1 -
 src/utils/{firebase.js => env.js}             | 16 ++++-----
 src/utils/firebase.ts                         |  8 +++++
 src/utils/{ga.js => ga.ts}                    |  4 +--
 src/utils/{index.js => index.ts}              | 34 +++++++++----------
 src/utils/pass.js                             |  1 -
 14 files changed, 57 insertions(+), 46 deletions(-)
 rename src/utils/{axios.js => axios.ts} (65%)
 rename src/utils/{data.js => data.ts} (97%)
 rename src/utils/{firebase.js => env.js} (54%)
 create mode 100644 src/utils/firebase.ts
 rename src/utils/{ga.js => ga.ts} (54%)
 rename src/utils/{index.js => index.ts} (82%)
 delete mode 100644 src/utils/pass.js

diff --git a/src/api/image.ts b/src/api/image.ts
index 476d5e52..8b84c048 100644
--- a/src/api/image.ts
+++ b/src/api/image.ts
@@ -1,4 +1,4 @@
-import { BASE_SERVER_URL } from "../utils/axios";
+import { BASE_SERVER_URL } from "../utils/env";
 import axios from "axios";
 
 export const uploadProfileImage = async (image: File) => {
diff --git a/src/components/PassCheck/index.tsx b/src/components/PassCheck/index.tsx
index 35e6bf3d..ab447a5b 100644
--- a/src/components/PassCheck/index.tsx
+++ b/src/components/PassCheck/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useState } from "react";
-import { passPopupURL } from "../../utils/pass";
+import { passPopupURL } from "../../utils/env";
 import ConfirmModal from "../ConfirmModal";
 import passLogo from "../../assets/images/PASS-Logo.png";
 import passArrow from "../../assets/svg/Pass-Mobile-Arrow.svg";
diff --git a/src/components/PushNotification/index.tsx b/src/components/PushNotification/index.tsx
index bb7b61c3..5b7f1ddb 100644
--- a/src/components/PushNotification/index.tsx
+++ b/src/components/PushNotification/index.tsx
@@ -2,7 +2,8 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../redux/store";
 import { getToken, isSupported } from "firebase/messaging";
-import { messaging, vapidKey } from "../../utils/firebase";
+import { messaging } from "../../utils/firebase";
+import { vapidKey } from "../../utils/env";
 import { putFirebaseToken } from "../../api/notification";
 import CheckModal from "./CheckModal";
 
diff --git a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/ReplyItem/index.tsx b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/ReplyItem/index.tsx
index 44f5e32e..59b168af 100644
--- a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/ReplyItem/index.tsx
+++ b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/ReplyItem/index.tsx
@@ -68,7 +68,7 @@ function ReplyItem({
           <div className="h-10 flex flex-col justify-center">
             <p className="text-sm text-black font-bold">{nickname}</p>
             <p className="text-sm text-boldgray font-medium">
-              {dateToGapKorean(createdAt)}
+              {dateToGapKorean(createdAt, false)}
             </p>
           </div>
         </div>
diff --git a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/index.tsx b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/index.tsx
index 49675b1b..3ed1adbd 100644
--- a/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/index.tsx
+++ b/src/pages/CommunityPage/ArticleDetail/ArticleComment/CommentItem/index.tsx
@@ -71,7 +71,7 @@ function CommentItem({
         <div className="h-10 flex flex-col justify-center">
           <p className="text-sm text-black font-bold">{nickname}</p>
           <p className="text-sm text-boldgray font-medium">
-            {dateToGapKorean(createdAt)}
+            {dateToGapKorean(createdAt, false)}
           </p>
         </div>
       </div>
diff --git a/src/pages/TalkPage/TalkRoom/index.tsx b/src/pages/TalkPage/TalkRoom/index.tsx
index a7b8a8b4..eb9f0d3f 100644
--- a/src/pages/TalkPage/TalkRoom/index.tsx
+++ b/src/pages/TalkPage/TalkRoom/index.tsx
@@ -17,7 +17,7 @@ import { getChatRoomData } from "../../../api/chat";
 import { uploadImage } from "../../../api/image";
 import { Client, Stomp } from "@stomp/stompjs";
 import { ChatRoomDetail } from "../../../types";
-import { BASE_SERVER_URL } from "../../../utils/axios";
+import { BASE_SERVER_URL } from "../../../utils/env";
 import SockJS from "sockjs-client/dist/sockjs";
 import TalkRoomHead from "./TalkRoomHead";
 import TalkRoomBody from "./TalkRoomBody";
diff --git a/src/pages/TalkPage/index.tsx b/src/pages/TalkPage/index.tsx
index 7a7a9dc1..ada81d55 100644
--- a/src/pages/TalkPage/index.tsx
+++ b/src/pages/TalkPage/index.tsx
@@ -6,7 +6,7 @@ import { setPartyRoomId } from "../../redux/modules/talkRoomSlice";
 import { Client, Stomp } from "@stomp/stompjs";
 import { getChatList } from "../../api/chat";
 import { ChatRoomList } from "../../types";
-import { BASE_SERVER_URL } from "../../utils/axios";
+import { BASE_SERVER_URL } from "../../utils/env";
 import SockJS from "sockjs-client/dist/sockjs";
 import PageContainer from "../../components/PageContainer";
 import TalkList from "./TalkList";
diff --git a/src/utils/axios.js b/src/utils/axios.ts
similarity index 65%
rename from src/utils/axios.js
rename to src/utils/axios.ts
index 32f38c35..f63e4f75 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.ts
@@ -1,9 +1,17 @@
+import { BASE_SERVER_URL } from "./env";
 import axios from "axios";
 
-const fetchWrap = async ({ method, url, body, auth }) => {
+interface Params {
+  method: "get" | "post" | "put" | "delete";
+  url: string;
+  body?: any;
+  auth: boolean;
+}
+
+const fetchWrap = async ({ method, url, body, auth }: Params) => {
   try {
-    const config = {
-      baseURL: import.meta.env.VITE_BASE_SERVER_URL,
+    const config: any = {
+      baseURL: BASE_SERVER_URL,
       withCredentials: true,
     };
 
@@ -32,16 +40,14 @@ const fetchWrap = async ({ method, url, body, auth }) => {
   }
 };
 
-export const GET = (url, auth = false) =>
+export const GET = (url: string, auth = false) =>
   fetchWrap({ method: "get", url, auth });
 
-export const POST = (url, body, auth = false) =>
+export const POST = (url: string, body: any, auth = false) =>
   fetchWrap({ method: "post", url, body, auth });
 
-export const PUT = (url, body, auth = false) =>
+export const PUT = (url: string, body: any, auth = false) =>
   fetchWrap({ method: "put", url, body, auth });
 
-export const DELETE = (url, auth = false, body) =>
+export const DELETE = (url: string, auth = false, body: any) =>
   fetchWrap({ method: "delete", url, body, auth });
-
-export const BASE_SERVER_URL = import.meta.env.VITE_BASE_SERVER_URL;
diff --git a/src/utils/data.js b/src/utils/data.ts
similarity index 97%
rename from src/utils/data.js
rename to src/utils/data.ts
index 106e9a05..631f351f 100644
--- a/src/utils/data.js
+++ b/src/utils/data.ts
@@ -46,7 +46,6 @@ export const partyStatusObj = {
 };
 
 export const CONSTANT = {
-  MAX_SIZE_IMAGE: 15 * 1024 * 1024,
   BASE_PROFILE_IMAGE:
     "https://mallang-trip-db.s3.ap-northeast-2.amazonaws.com/profile/3085dd60-098c-4117-9be8-c7ec5177d638profileImage.png",
   THUMBNAIL_IMAGE:
diff --git a/src/utils/firebase.js b/src/utils/env.js
similarity index 54%
rename from src/utils/firebase.js
rename to src/utils/env.js
index e7035086..2773f7b3 100644
--- a/src/utils/firebase.js
+++ b/src/utils/env.js
@@ -1,7 +1,12 @@
-import { initializeApp } from "firebase/app";
-import { getMessaging } from "firebase/messaging";
+export const passPopupURL = `${import.meta.env.VITE_BASE_SERVER_URL}/mobileOK`;
+export const BASE_SERVER_URL = import.meta.env.VITE_BASE_SERVER_URL;
 
-const firebaseConfig = {
+export const GTM_ID = import.meta.env.VITE_GTM_ID;
+export const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
+export const META_PIXEL_TRACKING_ID = import.meta.env
+  .VITE_META_PIXEL_TRACKING_ID;
+
+export const firebaseConfig = {
   apiKey: import.meta.env.VITE_APP_FCM_API_KEY,
   authDomain: import.meta.env.VITE_APP_FCM_AUTH_DOMAIN,
   projectId: import.meta.env.VITE_APP_FCM_PROJECT_ID,
@@ -11,9 +16,4 @@ const firebaseConfig = {
   measurementId: import.meta.env.VITE_APP_FCM_MEASUREMENT_ID,
 };
 
-const app = initializeApp(firebaseConfig);
-
-export const messaging =
-  "serviceWorker" in navigator ? getMessaging(app) : undefined;
-
 export const vapidKey = import.meta.env.VITE_APP_FCM_VAPID_KEY;
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
new file mode 100644
index 00000000..037a30b5
--- /dev/null
+++ b/src/utils/firebase.ts
@@ -0,0 +1,8 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging } from "firebase/messaging";
+import { firebaseConfig } from "./env";
+
+const app = initializeApp(firebaseConfig);
+
+export const messaging =
+  "serviceWorker" in navigator ? getMessaging(app) : undefined;
diff --git a/src/utils/ga.js b/src/utils/ga.ts
similarity index 54%
rename from src/utils/ga.js
rename to src/utils/ga.ts
index 27f86445..fd5cc3a7 100644
--- a/src/utils/ga.js
+++ b/src/utils/ga.ts
@@ -1,6 +1,4 @@
-const GTM_ID = import.meta.env.VITE_GTM_ID;
-const GA_TRACKING_ID = import.meta.env.VITE_GA_TRACKING_ID;
-const META_PIXEL_TRACKING_ID = import.meta.env.VITE_META_PIXEL_TRACKING_ID;
+import { GTM_ID, GA_TRACKING_ID, META_PIXEL_TRACKING_ID } from "./env";
 
 export const isGAlive = () => {
   return (
diff --git a/src/utils/index.js b/src/utils/index.ts
similarity index 82%
rename from src/utils/index.js
rename to src/utils/index.ts
index bf002817..71e7d8f7 100644
--- a/src/utils/index.js
+++ b/src/utils/index.ts
@@ -28,7 +28,7 @@ export function setColorTheme() {
   localStorage.setItem("color-theme", "light");
 }
 
-export function makePhoneNumber(value) {
+export function makePhoneNumber(value: string) {
   value = value.replace(/[^0-9]/g, "");
   return value.replace(
     /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,
@@ -36,15 +36,15 @@ export function makePhoneNumber(value) {
   );
 }
 
-export function onlyNumber(value) {
+export function onlyNumber(value: string) {
   return value.replace(/[^0-9]/g, "");
 }
 
-export const priceToString = (price) => {
+export const priceToString = (price: number) => {
   return price.toLocaleString("en-US");
 };
 
-export const numberTo00 = (value) => {
+export const numberTo00 = (value: number) => {
   if (value >= 10) {
     return value;
   }
@@ -52,7 +52,7 @@ export const numberTo00 = (value) => {
   return `0${value}`;
 };
 
-export const dateToString = (source, delimiter = "-") => {
+export const dateToString = (source: Date, delimiter = "-") => {
   const year = source.getFullYear();
   const month = numberTo00(source.getMonth() + 1);
   const day = numberTo00(source.getDate());
@@ -60,14 +60,14 @@ export const dateToString = (source, delimiter = "-") => {
   return [year, month, day].join(delimiter);
 };
 
-export const dateToStringHan = (date) => {
+export const dateToStringHan = (date: string) => {
   return `${date.slice(0, 4)}년 ${date.slice(5, 7)}월 ${date.slice(8, 10)}일`;
 };
 
-export const dateToGapKorean = (date, withTime) => {
+export const dateToGapKorean = (date: string, withTime: boolean) => {
   const pivot = new Date(date);
   const now = new Date();
-  const diffMinute = (now - pivot) / (1000 * 60);
+  const diffMinute = (Number(now) - Number(pivot)) / (1000 * 60);
 
   if (diffMinute < 60)
     return `${Math.floor(diffMinute) > 0 ? Math.floor(diffMinute) : 0}분 전`;
@@ -86,7 +86,7 @@ export const dateToGapKorean = (date, withTime) => {
     }시 ${minutes}분`;
 };
 
-export const dateToKoreanDataTime = (date) => {
+export const dateToKoreanDataTime = (date: string) => {
   const year = date.slice(0, 4);
   const month = date.slice(5, 7);
   const day = date.slice(8, 10);
@@ -97,7 +97,7 @@ export const dateToKoreanDataTime = (date) => {
   return `${year}년 ${month}월 ${day}일 ${hours}:${minutes}:${seconds}`;
 };
 
-export const computeGapDay = (date) => {
+export const computeGapDay = (date: string) => {
   const now = new Date();
   const pivot = new Date(date);
 
@@ -107,10 +107,10 @@ export const computeGapDay = (date) => {
   return diffDay;
 };
 
-export const chatListDateToGapKorean = (date) => {
+export const chatListDateToGapKorean = (date: string) => {
   const pivot = new Date(date);
   const now = new Date();
-  const diffMinute = (now - pivot) / (1000 * 60);
+  const diffMinute = (Number(now) - Number(pivot)) / (1000 * 60);
 
   if (diffMinute < 60)
     return `${Math.floor(diffMinute) > 0 ? Math.floor(diffMinute) : 0}분 전`;
@@ -125,7 +125,7 @@ export const chatListDateToGapKorean = (date) => {
   return `${year}년 ${month}월 ${day}일`;
 };
 
-export const dateToKoreanDay = (date) => {
+export const dateToKoreanDay = (date: string) => {
   const koreanDay = ["일", "월", "화", "수", "목", "금", "토"];
   const pivot = new Date(date);
 
@@ -137,7 +137,7 @@ export const dateToKoreanDay = (date) => {
   return `${year}년 ${month}월 ${day}일 ${koreanDay[dayOfWeek]}요일`;
 };
 
-export const dateToKoreanTime = (date) => {
+export const dateToKoreanTime = (date: string) => {
   const pivot = new Date(date);
 
   const hours = pivot.getHours();
@@ -148,10 +148,10 @@ export const dateToKoreanTime = (date) => {
   )}:${numberTo00(minutes)}`;
 };
 
-export const notificationDateToGapKorean = (date) => {
+export const notificationDateToGapKorean = (date: string) => {
   const pivot = new Date(date);
   const now = new Date();
-  const diffMinute = (now - pivot) / (1000 * 60);
+  const diffMinute = (Number(now) - Number(pivot)) / (1000 * 60);
 
   if (diffMinute < 60)
     return `${Math.floor(diffMinute) > 0 ? Math.floor(diffMinute) : 0}분 전`;
@@ -165,7 +165,7 @@ export const notificationDateToGapKorean = (date) => {
   return `${month}월 ${day}일`;
 };
 
-export const customRoundOne = (number) => {
+export const customRoundOne = (number: number) => {
   const roundedNumber = Math.round(number * 10) / 10;
 
   return Math.floor(roundedNumber) === roundedNumber
diff --git a/src/utils/pass.js b/src/utils/pass.js
deleted file mode 100644
index f492b42f..00000000
--- a/src/utils/pass.js
+++ /dev/null
@@ -1 +0,0 @@
-export const passPopupURL = `${import.meta.env.VITE_BASE_SERVER_URL}/mobileOK`;

From 028e70ac590aa5c248331fb9896264df2a69c799 Mon Sep 17 00:00:00 2001
From: Daehee <mok9550@ajou.ac.kr>
Date: Tue, 17 Dec 2024 01:43:00 +0900
Subject: [PATCH 4/4] refactor: Type checking

---
 .../CustomerService/Help/EditForm/index.tsx   |  4 +++-
 .../Management/Party/PartyDetail/index.tsx    | 11 ++--------
 .../Place/DestinationModal/index.tsx          |  8 ++++---
 .../RegionList/NewRegion/FormModal/index.tsx  |  5 ++++-
 .../Management/Region/RegionList/index.tsx    |  2 +-
 .../ImageInputBox/ImageInput/index.tsx        | 21 +++++++++++++------
 src/pages/PartyPage/CreditInfo/index.tsx      |  8 +++----
 src/pages/PartyPage/PartyIntro/index.tsx      |  2 +-
 src/utils/axios.ts                            |  2 +-
 9 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/pages/AdminPage/CustomerService/Help/EditForm/index.tsx b/src/pages/AdminPage/CustomerService/Help/EditForm/index.tsx
index 4e639741..e058783e 100644
--- a/src/pages/AdminPage/CustomerService/Help/EditForm/index.tsx
+++ b/src/pages/AdminPage/CustomerService/Help/EditForm/index.tsx
@@ -59,7 +59,9 @@ function EditForm({
           images
             .filter((image) => image)
             .map(async (image) =>
-              typeof image === "string" ? image : await uploadImage(image)
+              typeof image === "string"
+                ? image
+                : image && (await uploadImage(image))
             )
         );
         const body = {
diff --git a/src/pages/AdminPage/Management/Party/PartyDetail/index.tsx b/src/pages/AdminPage/Management/Party/PartyDetail/index.tsx
index e3247554..6f490f98 100644
--- a/src/pages/AdminPage/Management/Party/PartyDetail/index.tsx
+++ b/src/pages/AdminPage/Management/Party/PartyDetail/index.tsx
@@ -62,16 +62,9 @@ function PartyDetail({ partyId }: Props) {
       <Promotion promotion={partyData?.promotion} />
       <PartyDate startDate={partyData.startDate} />
       <PartyMember
-        headcount={partyData.headcount}
-        capacity={partyData.capacity}
-        members={partyData.members}
-        driverId={partyData.driverId}
+        {...partyData}
         myParty={true}
-        driverReady={partyData.driverReady}
-        partyStatus={partyData.partyStatus}
-        proposal={partyData.proposal}
-        driverName={partyData.driverName}
-        partyId={partyId && parseInt(partyId)}
+        partyId={partyId === null ? 0 : parseInt(partyId)}
       />
       {partyData.partyStatus === "CANCELED_BY_DRIVER_REFUSED" ||
       partyData.partyStatus === "CANCELED_BY_PROPOSER" ||
diff --git a/src/pages/AdminPage/Management/Place/DestinationModal/index.tsx b/src/pages/AdminPage/Management/Place/DestinationModal/index.tsx
index 53b380c6..16e02b28 100644
--- a/src/pages/AdminPage/Management/Place/DestinationModal/index.tsx
+++ b/src/pages/AdminPage/Management/Place/DestinationModal/index.tsx
@@ -185,9 +185,11 @@ function DestinationModal({
               ) : (
                 <>
                   <ImageBox
-                    images={destinationInfo.images.filter(
-                      (image) => typeof image === "string"
-                    )}
+                    images={
+                      destinationInfo.images.filter(
+                        (image) => typeof image === "string"
+                      ) as string[]
+                    }
                     name={destinationInfo.name}
                   />
                   <div className="flex gap-2 justify-end mt-2 mb-4">
diff --git a/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.tsx b/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.tsx
index 6fde9d2a..f7fdcc4e 100644
--- a/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.tsx
+++ b/src/pages/AdminPage/Management/Region/RegionList/NewRegion/FormModal/index.tsx
@@ -32,7 +32,10 @@ function FormModal({ showModal, setShowModal, getPartyRegionListFunc }: Props) {
     if (!regionImg) return alert("지역 사진을 입력해주세요.");
 
     try {
-      const regionImgURL = await uploadImage(regionImg);
+      const regionImgURL =
+        typeof regionImg === "string"
+          ? regionImg
+          : await uploadImage(regionImg);
       const body = {
         name: region,
         image: regionImgURL,
diff --git a/src/pages/AdminPage/Management/Region/RegionList/index.tsx b/src/pages/AdminPage/Management/Region/RegionList/index.tsx
index 93d9d195..688cb55e 100644
--- a/src/pages/AdminPage/Management/Region/RegionList/index.tsx
+++ b/src/pages/AdminPage/Management/Region/RegionList/index.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, memo, SetStateAction, useState } from "react";
-import { RegionData } from "..";
+import { RegionData } from "../../../../../types";
 import NewRegion from "./NewRegion";
 import RegionItem from "./RegionItem";
 import EditFormModal from "./EditFormModal";
diff --git a/src/pages/CommunityPostPage/ArticleInfoForm/ImageInputBox/ImageInput/index.tsx b/src/pages/CommunityPostPage/ArticleInfoForm/ImageInputBox/ImageInput/index.tsx
index 590d56fa..59945a2e 100644
--- a/src/pages/CommunityPostPage/ArticleInfoForm/ImageInputBox/ImageInput/index.tsx
+++ b/src/pages/CommunityPostPage/ArticleInfoForm/ImageInputBox/ImageInput/index.tsx
@@ -4,6 +4,7 @@ import {
   MouseEvent,
   SetStateAction,
   useCallback,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -40,24 +41,32 @@ function ImageInput({ images, setImages, index }: Props) {
     [images, index]
   );
 
+  const image = useMemo(() => images[index], [images, index]);
+
+  const imagesSrc = useMemo(
+    () =>
+      typeof image === "string"
+        ? image
+        : image instanceof File
+          ? URL.createObjectURL(image)
+          : undefined,
+    [image]
+  );
+
   return (
     <>
       <div
         className="w-20 h-20 bg-skyblue border border-dashed border-primary rounded-lg cursor-pointer flex justify-center items-center"
         onClick={() => imageRef.current?.click()}
       >
-        {images[index] ? (
+        {imagesSrc ? (
           <div
             className="w-full h-full rounded-lg relative"
             onMouseEnter={() => setDeleteMode(true)}
             onMouseLeave={() => setDeleteMode(false)}
           >
             <img
-              src={
-                typeof images[index] === "string"
-                  ? images[index]
-                  : URL.createObjectURL(images[index])
-              }
+              src={imagesSrc}
               alt="Article_Image"
               className="object-cover w-full h-full rounded-lg"
             />
diff --git a/src/pages/PartyPage/CreditInfo/index.tsx b/src/pages/PartyPage/CreditInfo/index.tsx
index 2b3dddca..e5cd2c6f 100644
--- a/src/pages/PartyPage/CreditInfo/index.tsx
+++ b/src/pages/PartyPage/CreditInfo/index.tsx
@@ -33,7 +33,7 @@ function CreditInfo({
   const [message, setMessage] = useState("");
 
   const repaymentHandler = useCallback(async () => {
-    if (!reservationId) return;
+    if (!reservationId || !paymentAmount) return;
     try {
       const result = await postPaymentAgain(reservationId);
       if (result.statusCode === 200)
@@ -66,7 +66,7 @@ function CreditInfo({
             partyStatus === "WAITING_COURSE_CHANGE_APPROVAL") &&
             (status === "PAYMENT_COMPLETE" ? (
               <span className="text-sm text-darkgray font-medium">
-                {`(${dateToKoreanDataTime(createdAt)} 결제 완료)`}
+                {`(${dateToKoreanDataTime(createdAt || "")} 결제 완료)`}
               </span>
             ) : (
               <span className="text-sm text-red-500 font-medium">
@@ -77,7 +77,7 @@ function CreditInfo({
         {partyStatus === "SEALED" ||
         partyStatus === "WAITING_COURSE_CHANGE_APPROVAL" ? (
           <p className="text-sm text-darkgray font-medium flex gap-8 items-center">
-            <span>{`${priceToString(paymentAmount)}원`}</span>
+            <span>{`${priceToString(paymentAmount || 0)}원`}</span>
             {status === "PAYMENT_COMPLETE" && (
               <button
                 className="underline underline-offset-2"
@@ -150,7 +150,7 @@ function CreditInfo({
           <CheckModal
             showModal={showRepaymentModal}
             setShowModal={setShowRepaymentModal}
-            message={`${priceToString(paymentAmount)}원을 다시 결제 하시겠습니까?`}
+            message={`${priceToString(paymentAmount || 0)}원을 다시 결제 하시겠습니까?`}
             noText="취소"
             yesText="확인"
             yesHandler={() => repaymentHandler()}
diff --git a/src/pages/PartyPage/PartyIntro/index.tsx b/src/pages/PartyPage/PartyIntro/index.tsx
index abb3349b..76ddf469 100644
--- a/src/pages/PartyPage/PartyIntro/index.tsx
+++ b/src/pages/PartyPage/PartyIntro/index.tsx
@@ -5,7 +5,7 @@ interface Props {
 }
 
 function PartyIntro({ content }: Props) {
-  if (!content) return;
+  if (!content) return null;
   return (
     <div className="flex flex-col gap-1 my-7">
       <p className="text-lg text-black font-bold">파티 소개</p>
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index f63e4f75..8f2f19d1 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -49,5 +49,5 @@ export const POST = (url: string, body: any, auth = false) =>
 export const PUT = (url: string, body: any, auth = false) =>
   fetchWrap({ method: "put", url, body, auth });
 
-export const DELETE = (url: string, auth = false, body: any) =>
+export const DELETE = (url: string, auth = false, body?: any) =>
   fetchWrap({ method: "delete", url, body, auth });