diff --git a/frontend/src/components/google-maps/map/CarFfeineMap.tsx b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
index 3cd6442ad..1877eadf9 100644
--- a/frontend/src/components/google-maps/map/CarFfeineMap.tsx
+++ b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
@@ -10,7 +10,6 @@ import { setLocalStorage } from '@utils/storage';
 
 import { getGoogleMapStore } from '@stores/google-maps/googleMapStore';
 import { toastActions } from '@stores/layout/toastStore';
-import { memberTokenStore } from '@stores/login/memberTokenStore';
 import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
 
 import { useMemberFilters } from '@hooks/tanstack-query/station-filters/useMemberFilters';
@@ -73,18 +72,11 @@ const CarFfeineMapListener = () => {
   return <></>;
 };
 
-// TODO: 유저 필터링이 로그인 된 이후 바로 적용되지 않는 문제 다시 발생. 이 부분 어떻게 수정할지 고민해보기
 const UserFilterListener = () => {
   const queryClient = useQueryClient();
   const { data: memberFilters } = useMemberFilters();
   const { setAllServerStationFilters } = serverStationFilterAction;
 
-  console.log('현재 로그인한 유저가 등록한 필터 정보', memberFilters);
-  console.log(
-    '클라이언트 전역 상태에 저장된 필터 정보',
-    serverStationFilterAction.getAllServerStationFilters()
-  );
-
   if (memberFilters !== undefined) {
     setAllServerStationFilters(memberFilters);
     queryClient.invalidateQueries([{ queryKey: [QUERY_KEY_STATIONS] }]);
diff --git a/frontend/src/components/login/GoogleLogin.tsx b/frontend/src/components/login/GoogleLogin.tsx
index fd1ef319c..c8daf092d 100644
--- a/frontend/src/components/login/GoogleLogin.tsx
+++ b/frontend/src/components/login/GoogleLogin.tsx
@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react';
 
+import { fetchUtils } from '@utils/fetch';
 import { getMemberToken } from '@utils/login';
 import { getAPIEndPoint } from '@utils/login/index';
 import { setSessionStorage } from '@utils/storage';
 
-import type { MemberInfo } from '@stores/login/memberInfoStore';
+import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import ButtonNext from '@common/ButtonNext';
 import FlexBox from '@common/FlexBox';
+import Loading from '@common/Loading';
 import Text from '@common/Text';
 
 import LogoIcon from '@ui/Svg/LogoIcon';
@@ -24,12 +26,9 @@ const GoogleLogin = () => {
 
     getMemberToken(code, 'google')
       .then(async (token) => {
-        const memberInfo = await fetch(`${APIEndPoint}/members/me`, {
-          method: 'GET',
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }).then<MemberInfo>((response) => response.json());
+        memberTokenStore.setState(token);
+
+        const memberInfo = await fetchUtils.get(`${APIEndPoint}/members/me`);
 
         setSessionStorage(SESSION_KEY_MEMBER_TOKEN, token);
         setSessionStorage(SESSION_KEY_MEMBER_INFO, JSON.stringify(memberInfo));
@@ -62,12 +61,7 @@ const GoogleLogin = () => {
     );
   }
 
-  return (
-    <FlexBox height="100vh" direction="column" alignItems="center" justifyContent="center">
-      <LogoIcon width={15} />
-      <Text variant="h5">로딩중...</Text>
-    </FlexBox>
-  );
+  return <Loading />;
 };
 
 export default GoogleLogin;
diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
index 4356d2104..8d71ce765 100644
--- a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
+++ b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
@@ -1,17 +1,11 @@
 import { ArrowLeftIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
-import { useQueryClient } from '@tanstack/react-query';
-
-import { getAPIEndPoint } from '@utils/login';
-
-import { toastActions } from '@stores/layout/toastStore';
-import { memberInfoStore } from '@stores/login/memberInfoStore';
 import { memberTokenStore } from '@stores/login/memberTokenStore';
 import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
 
 import { useServerStationFilters } from '@hooks/tanstack-query/station-filters/useServerStationFilters';
-import { useServerStationFilterActions } from '@hooks/useServerStationFilterActions';
+import { useServerStationFilterStoreActions } from '@hooks/useServerStationFilterActions';
 
 import Button from '@common/Button';
 import ButtonNext from '@common/ButtonNext';
@@ -22,18 +16,16 @@ import ServerStationFiltersSkeleton from '@ui/ServerStationFilters/ServerStation
 import { useNavigationBar } from '@ui/compound/NavigationBar/hooks/useNavigationBar';
 
 import { CONNECTOR_TYPES, COMPANIES } from '@constants/chargers';
-import { QUERY_KEY_STATIONS, QUERY_KEY_MEMBER_SELECTED_FILTERS } from '@constants/queryKeys';
 
-import type { Capacity, StationFilters } from '@type';
+import type { Capacity } from '@type';
 
 import FilterSection from './FilterOption';
+import { useServerStationFiltersComponentActions } from './hooks/useServerStationFiltersComponentActions';
 
 const ServerStationFilters = () => {
-  const queryClient = useQueryClient();
-  const { showToast } = toastActions;
   const { data: serverStationFilters, isLoading } = useServerStationFilters();
   const { closeBasePanel } = useNavigationBar();
-
+  const { handleStationsRefetch, submitMemberFilters } = useServerStationFiltersComponentActions();
   const {
     toggleCapacityFilter,
     toggleConnectorTypeFilter,
@@ -42,7 +34,7 @@ const ServerStationFilters = () => {
     getIsConnectorTypeSelected,
     getIsCompanySelected,
     resetAllFilters,
-  } = useServerStationFilterActions();
+  } = useServerStationFilterStoreActions();
 
   if (isLoading) {
     return <ServerStationFiltersSkeleton />;
@@ -51,60 +43,14 @@ const ServerStationFilters = () => {
   const { connectorTypes, capacities, companies } = serverStationFilters;
 
   const handleApplySelectedFilters = async () => {
-    const APIEndPoint = getAPIEndPoint();
-    const memberId = memberInfoStore.getState()?.memberId;
-    const memberToken = memberTokenStore.getState();
-
-    const { getAllServerStationFilters, setAllServerStationFilters, resetAllServerStationFilters } =
-      serverStationFilterAction;
-    const selectedFilters = getAllServerStationFilters();
-    const { capacities, companies, connectorTypes } = selectedFilters;
-
-    if (memberId === undefined) {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
-      showToast('필터가 적용되었습니다');
+    const isLoggedInUser = memberTokenStore.getState() === '';
+
+    if (isLoggedInUser !== true) {
+      handleStationsRefetch();
       return;
     }
 
-    try {
-      const stationFilters = await fetch(`${APIEndPoint}/members/${memberId}/filters`, {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${memberToken}`,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          filters: [
-            ...capacities.map((capacity) => ({
-              type: 'capacity',
-              name: capacity,
-            })),
-            ...companies.map((company) => ({
-              type: 'company',
-              name: company,
-            })),
-            ...connectorTypes.map((connectorType) => ({
-              type: 'connectorType',
-              name: connectorType,
-            })),
-          ],
-        }),
-      }).then<StationFilters>((response) => response.json());
-
-      setAllServerStationFilters(stationFilters);
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
-
-      showToast('필터가 적용되었습니다');
-    } catch {
-      const stationFilters = queryClient.getQueryData<StationFilters>([
-        QUERY_KEY_MEMBER_SELECTED_FILTERS,
-      ]);
-      resetAllServerStationFilters(stationFilters);
-
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
-
-      showToast('필터 적용에 실패했습니다', 'error');
-    }
+    submitMemberFilters();
   };
 
   return (
diff --git a/frontend/src/components/ui/ServerStationFilters/hooks/useServerStationFiltersComponentActions.ts b/frontend/src/components/ui/ServerStationFilters/hooks/useServerStationFiltersComponentActions.ts
new file mode 100644
index 000000000..9525bde33
--- /dev/null
+++ b/frontend/src/components/ui/ServerStationFilters/hooks/useServerStationFiltersComponentActions.ts
@@ -0,0 +1,67 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { fetchUtils } from '@utils/fetch';
+import { getAPIEndPoint } from '@utils/login';
+
+import { toastActions } from '@stores/layout/toastStore';
+import { memberInfoStore } from '@stores/login/memberInfoStore';
+import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
+
+import { QUERY_KEY_MEMBER_SELECTED_FILTERS, QUERY_KEY_STATIONS } from '@constants/queryKeys';
+
+import type { StationFilters } from '@type';
+
+export const useServerStationFiltersComponentActions = () => {
+  const queryClient = useQueryClient();
+  const { showToast } = toastActions;
+
+  const fallbackToPreviousFilters = () => {
+    const { resetAllServerStationFilters } = serverStationFilterAction;
+    const stationFilters = queryClient.getQueryData<StationFilters>([
+      QUERY_KEY_MEMBER_SELECTED_FILTERS,
+    ]);
+    resetAllServerStationFilters(stationFilters);
+
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
+
+    showToast('필터 적용에 실패했습니다', 'error');
+  };
+
+  const handleStationsRefetch = () => {
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
+    showToast('필터가 적용되었습니다');
+  };
+
+  const applyMemberFilters = async () => {
+    const APIEndPoint = getAPIEndPoint();
+    const memberId = memberInfoStore.getState()?.memberId;
+
+    const { getMemberFilterRequestBody } = serverStationFilterAction;
+    const memberFilterRequestBody = getMemberFilterRequestBody();
+
+    return await fetchUtils.post<StationFilters, typeof memberFilterRequestBody>(
+      `${APIEndPoint}/members/${memberId}/filters`,
+      memberFilterRequestBody
+    );
+  };
+
+  const submitMemberFilters = async () => {
+    const { setAllServerStationFilters } = serverStationFilterAction;
+
+    try {
+      const stationFilters = await applyMemberFilters();
+
+      setAllServerStationFilters(stationFilters);
+      handleStationsRefetch();
+    } catch {
+      fallbackToPreviousFilters();
+    }
+  };
+
+  return {
+    fallbackToPreviousFilters,
+    handleStationsRefetch,
+    applyMemberFilters,
+    submitMemberFilters,
+  };
+};
diff --git a/frontend/src/components/ui/StationDetailsWindow/chargers/ChargerList.tsx b/frontend/src/components/ui/StationDetailsWindow/chargers/ChargerList.tsx
index 76ab32df9..2b70e316c 100644
--- a/frontend/src/components/ui/StationDetailsWindow/chargers/ChargerList.tsx
+++ b/frontend/src/components/ui/StationDetailsWindow/chargers/ChargerList.tsx
@@ -27,6 +27,10 @@ const ChargerList = ({ chargers, stationId, reportCount }: ChargerListProps) =>
   const availableChargersSize = chargers.filter((charger) => charger.state === 'STANDBY').length;
   const loadedChargersSize = page * CHARGER_SIZE;
 
+  const handleShowMoreChargers = () => {
+    setPage((prev) => prev + 1);
+  };
+
   return (
     <>
       <Text tag="h3" fontSize={1.8} weight="bold" mt={8} mb={1.5}>
@@ -51,7 +55,7 @@ const ChargerList = ({ chargers, stationId, reportCount }: ChargerListProps) =>
         ))}
       </FlexBox>
       {totalChargersSize - loadedChargersSize > 0 && (
-        <Button css={MoreButtonContainer}>
+        <Button css={MoreButtonContainer} onClick={handleShowMoreChargers}>
           <FlexBox justifyContent="center">
             <Text>더보기</Text>
             <ChevronDownIcon width={20} />
diff --git a/frontend/src/components/ui/modal/CarModal/CarModal.tsx b/frontend/src/components/ui/modal/CarModal/CarModal.tsx
index 142317d5e..94bfc780e 100644
--- a/frontend/src/components/ui/modal/CarModal/CarModal.tsx
+++ b/frontend/src/components/ui/modal/CarModal/CarModal.tsx
@@ -58,6 +58,7 @@ const CarModal = () => {
       modalActions.closeModal();
     } catch (error) {
       toastActions.showToast(error.message, 'error');
+      modalActions.closeModal();
     }
   };
 
diff --git a/frontend/src/components/ui/modal/CarModal/fetch/index.ts b/frontend/src/components/ui/modal/CarModal/fetch/index.ts
index f94bc3139..356718a89 100644
--- a/frontend/src/components/ui/modal/CarModal/fetch/index.ts
+++ b/frontend/src/components/ui/modal/CarModal/fetch/index.ts
@@ -1,6 +1,7 @@
+import { fetchUtils } from '@utils/fetch';
+
 import { serverStore } from '@stores/config/serverStore';
 import { memberInfoStore } from '@stores/login/memberInfoStore';
-import { memberTokenStore } from '@stores/login/memberTokenStore';
 import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
 
 import { SERVERS } from '@constants';
@@ -18,25 +19,12 @@ import type { Car } from '@type/cars';
 export const submitMemberCar = async (carName: string, vintage: string): Promise<Car> => {
   const mode = serverStore.getState();
   const memberId = memberInfoStore.getState()?.memberId;
-  const memberToken = memberTokenStore.getState();
-
-  const memberCarInfo = await fetch(`${SERVERS[mode]}/members/${memberId}/cars`, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${memberToken}`,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ name: carName, vintage }),
-  }).then<Car>((response) => {
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw new Error('로그인이 필요합니다');
-      }
-      throw new Error('차량 정보를 등록하는 중에 오류가 발생했습니다');
-    }
 
-    return response.json();
-  });
+  const memberCarInfo = await fetchUtils.post<Car, Omit<Car, 'carId'>>(
+    `${SERVERS[mode]}/members/${memberId}/cars`,
+    { name: carName, vintage },
+    '차량 정보를 등록하는 중에 오류가 발생했습니다'
+  );
 
   return memberCarInfo;
 };
@@ -50,13 +38,9 @@ export const submitMemberCar = async (carName: string, vintage: string): Promise
 export const getCarFilters = async (carId: number): Promise<StationFilters> => {
   const mode = serverStore.getState();
 
-  const carFilters = await fetch(`${SERVERS[mode]}/cars/${carId}/filters`).then<StationFilters>(
-    (response) => {
-      if (!response.ok) {
-        throw new Error('차량 필터 정보를 불러오는 중에 에러가 발생했습니다');
-      }
-      return response.json();
-    }
+  const carFilters = await fetchUtils.get<StationFilters>(
+    `${SERVERS[mode]}/cars/${carId}/filters`,
+    '차량 필터 정보를 불러오는 중에 에러가 발생했습니다'
   );
 
   return carFilters;
@@ -71,45 +55,15 @@ export const getCarFilters = async (carId: number): Promise<StationFilters> => {
 export const submitMemberFilters = async (carFilters: StationFilters) => {
   const mode = serverStore.getState();
   const memberId = memberInfoStore.getState()?.memberId;
-  const memberToken = memberTokenStore.getState();
-
-  const { setAllServerStationFilters, getAllServerStationFilters } = serverStationFilterAction;
+  const { setAllServerStationFilters, getMemberFilterRequestBody } = serverStationFilterAction;
   setAllServerStationFilters(carFilters);
+  const memberFilterRequestBody = getMemberFilterRequestBody();
 
-  const { capacities, companies, connectorTypes } = getAllServerStationFilters();
-
-  const memberFilters = await fetch(`${SERVERS[mode]}/members/${memberId}/filters`, {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${memberToken}`,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      filters: [
-        ...capacities.map((capacity) => ({
-          type: 'capacity',
-          name: capacity,
-        })),
-        ...companies.map((company) => ({
-          type: 'company',
-          name: company,
-        })),
-        ...connectorTypes.map((connectorType) => ({
-          type: 'connectorType',
-          name: connectorType,
-        })),
-      ],
-    }),
-  }).then<StationFilters>((response) => {
-    if (!response.ok) {
-      if (response.status === 401) {
-        throw new Error('로그인이 필요합니다');
-      }
-      throw new Error('필터링 정보를 저장하는 중 오류가 발생했습니다');
-    }
-
-    return response.json();
-  });
+  const memberFilters = fetchUtils.post<StationFilters, typeof memberFilterRequestBody>(
+    `${SERVERS[mode]}/members/${memberId}/filters`,
+    memberFilterRequestBody,
+    '필터링 정보를 저장하는 중 오류가 발생했습니다'
+  );
 
   return memberFilters;
 };
diff --git a/frontend/src/hooks/tanstack-query/station-filters/useMemberFilters.ts b/frontend/src/hooks/tanstack-query/station-filters/useMemberFilters.ts
index c36580d6c..edc28f747 100644
--- a/frontend/src/hooks/tanstack-query/station-filters/useMemberFilters.ts
+++ b/frontend/src/hooks/tanstack-query/station-filters/useMemberFilters.ts
@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 
+import { fetchUtils } from '@utils/fetch';
+
 import { serverStore } from '@stores/config/serverStore';
 import { memberInfoStore } from '@stores/login/memberInfoStore';
-import { memberTokenStore } from '@stores/login/memberTokenStore';
 
 import { SERVERS } from '@constants';
 import { QUERY_KEY_MEMBER_SELECTED_FILTERS } from '@constants/queryKeys';
@@ -11,41 +12,16 @@ import type { StationFilters } from '@type';
 
 const fetchMemberFilters = async (): Promise<StationFilters> => {
   const mode = serverStore.getState();
-  const memberToken = memberTokenStore.getState();
   const memberId = memberInfoStore.getState().memberId;
 
-  if (memberId === undefined || memberToken === '') {
-    return new Promise((resolve) => {
-      resolve({
-        companies: [],
-        capacities: [],
-        connectorTypes: [],
-      });
-    });
+  try {
+    return await fetchUtils.get<StationFilters>(
+      `${SERVERS[mode]}/members/${memberId}/filters`,
+      '저장된 필터 정보를 불러오는데 실패했습니다.'
+    );
+  } catch (error) {
+    return new Promise((resolve) => resolve({ capacities: [], companies: [], connectorTypes: [] }));
   }
-
-  const memberFilters = await fetch(`${SERVERS[mode]}/members/${memberId}/filters`, {
-    method: 'GET',
-    headers: {
-      Authorization: `Bearer ${memberToken}`,
-    },
-  })
-    .then<StationFilters>((response) => {
-      if (!response.ok) {
-        throw new Error('유저의 필터 정보를 불러오는데 실패했습니다.');
-      }
-
-      return response.json();
-    })
-    .catch<StationFilters>(() => {
-      return {
-        companies: [],
-        capacities: [],
-        connectorTypes: [],
-      };
-    });
-
-  return memberFilters;
 };
 
 export const useMemberFilters = () => {
diff --git a/frontend/src/hooks/useServerStationFilterActions.ts b/frontend/src/hooks/useServerStationFilterActions.ts
index edd03b3e6..e27c7b924 100644
--- a/frontend/src/hooks/useServerStationFilterActions.ts
+++ b/frontend/src/hooks/useServerStationFilterActions.ts
@@ -8,7 +8,7 @@ import {
 
 import type { CapaCityBigDecimal, CompanyKey, ConnectorTypeKey } from '@type/serverStationFilter';
 
-export const useServerStationFilterActions = () => {
+export const useServerStationFilterStoreActions = () => {
   const [selectedCompaniesFilters, setSelectedCompaniesFilter] = useExternalState(
     selectedCompaniesFilterStore
   );
diff --git a/frontend/src/mocks/handlers/memberHandlers.ts b/frontend/src/mocks/handlers/memberHandlers.ts
index 6f3ab086d..1f9f2591f 100644
--- a/frontend/src/mocks/handlers/memberHandlers.ts
+++ b/frontend/src/mocks/handlers/memberHandlers.ts
@@ -6,7 +6,11 @@ export const memberHandlers = [
   rest.get(`${SERVERS.localhost}/members/me`, (req, res, ctx) => {
     const memberToken = req.headers.get('Authorization');
 
-    if (memberToken === undefined || memberToken.replace('Bearer', '') === '') {
+    if (
+      memberToken === undefined ||
+      memberToken === null ||
+      memberToken.replace('Bearer', '') === ''
+    ) {
       return res(ctx.status(401), ctx.json('unauthorized error'));
     }
 
diff --git a/frontend/src/mocks/handlers/station-markers/stationHandlers.ts b/frontend/src/mocks/handlers/station-markers/stationHandlers.ts
index 7cec95b52..676b342ef 100644
--- a/frontend/src/mocks/handlers/station-markers/stationHandlers.ts
+++ b/frontend/src/mocks/handlers/station-markers/stationHandlers.ts
@@ -18,11 +18,11 @@ export const stationHandlers = [
 
     const isChargerTypeFilterSelected = searchParams.get('chargerTypes') !== null;
     const isCapacityFilterSelected = searchParams.get('capacities') !== null;
-    const isCompanyNameFilterSelected = searchParams.get('companies') !== null;
+    const isCompanyNameFilterSelected = searchParams.get('companyNames') !== null;
 
     const selectedChargerTypes = searchParams.get('chargerTypes')?.split(',');
     const selectedCapacities = searchParams.get('capacities')?.split(',')?.map(Number);
-    const selectedCompanies = searchParams.get('companies')?.split(',');
+    const selectedCompanies = searchParams.get('companyNames')?.split(',');
 
     const northEastBoundary = {
       latitude: latitude + latitudeDelta,
diff --git a/frontend/src/stores/login/memberInfoStore.ts b/frontend/src/stores/login/memberInfoStore.ts
index 74ed3b152..da4b1ff46 100644
--- a/frontend/src/stores/login/memberInfoStore.ts
+++ b/frontend/src/stores/login/memberInfoStore.ts
@@ -43,4 +43,10 @@ export const memberInfoAction = {
       car,
     }));
   },
+  resetMemberInfo() {
+    memberInfoStore.setState({
+      memberId: -1,
+      car: null,
+    });
+  },
 };
diff --git a/frontend/src/stores/login/memberTokenStore.ts b/frontend/src/stores/login/memberTokenStore.ts
index 074bcf637..f18558f7e 100644
--- a/frontend/src/stores/login/memberTokenStore.ts
+++ b/frontend/src/stores/login/memberTokenStore.ts
@@ -4,17 +4,19 @@ import { getSessionStorage } from '@utils/storage';
 import { SESSION_KEY_MEMBER_TOKEN } from '@constants/storageKeys';
 
 import { toastActions } from '../layout/toastStore';
-import { memberInfoStore } from './memberInfoStore';
 
-export const memberTokenStore = store(getSessionStorage(SESSION_KEY_MEMBER_TOKEN, ''));
+export const memberTokenStore = store('');
 
 export const memberTokenActions = {
-  setMemberToken: async (memberToken: string) => {
+  /**
+   * 발급 받은 토큰을 저장해 "로그인 되었습니다" 혹은 "로그아웃 되었습니다" 메세지를 토스트로 띄워줄 때 사용하는 메서드
+   *
+   * @param memberToken 발급받은 토큰
+   */
+  setMemberToken: async (memberToken: string, isInitial?: boolean) => {
     memberTokenStore.setState(memberToken);
 
-    if (memberToken === '') {
-      memberInfoStore.setState(null);
-
+    if (memberToken === '' && isInitial !== true) {
       toastActions.showToast('로그아웃 되었습니다');
     }
 
@@ -22,4 +24,12 @@ export const memberTokenActions = {
       toastActions.showToast('로그인 되었습니다');
     }
   },
+  /**
+   * 로그아웃을 시키는 메서드지만 "로그아웃 되었습니다" 메세지를 토스트로 띄우고 싶지 않을 때 사용하는 메서드
+   */
+  resetMemberToken() {
+    memberTokenStore.setState('');
+  },
 };
+
+memberTokenActions.setMemberToken(getSessionStorage(SESSION_KEY_MEMBER_TOKEN, ''), true);
diff --git a/frontend/src/stores/station-filters/serverStationFiltersStore.ts b/frontend/src/stores/station-filters/serverStationFiltersStore.ts
index afef0ed21..4d9dc7542 100644
--- a/frontend/src/stores/station-filters/serverStationFiltersStore.ts
+++ b/frontend/src/stores/station-filters/serverStationFiltersStore.ts
@@ -29,4 +29,30 @@ export const serverStationFilterAction = {
     selectedConnectorTypesFilterStore.setState(new Set([...connectorTypes]));
     selectedCapacitiesFilterStore.setState(new Set([...capacities]));
   },
+  getMemberFilterRequestBody() {
+    const { capacities, companies, connectorTypes } =
+      serverStationFilterAction.getAllServerStationFilters();
+
+    return {
+      filters: [
+        ...capacities.map((capacity) => ({
+          type: 'capacity',
+          name: capacity,
+        })),
+        ...companies.map((company) => ({
+          type: 'company',
+          name: company,
+        })),
+        ...connectorTypes.map((connectorType) => ({
+          type: 'connectorType',
+          name: connectorType,
+        })),
+      ],
+    };
+  },
+  deleteAllServerStationFilters() {
+    selectedCompaniesFilterStore.setState(new Set([]));
+    selectedConnectorTypesFilterStore.setState(new Set([]));
+    selectedCapacitiesFilterStore.setState(new Set([]));
+  },
 };
diff --git a/frontend/src/utils/fetch/index.ts b/frontend/src/utils/fetch/index.ts
new file mode 100644
index 000000000..737b32dc0
--- /dev/null
+++ b/frontend/src/utils/fetch/index.ts
@@ -0,0 +1,67 @@
+import { handleInvalidTokenToLogout } from '@utils/login';
+
+import { memberTokenStore } from '@stores/login/memberTokenStore';
+
+export const fetchUtils = {
+  /**
+   * @param url request url
+   * @param errorMessage 에러 발생시 보여줄 에러 메세지
+   * @returns T
+   */
+  async get<T>(url: string, errorMessage?: string) {
+    const isMemberTokenExist = memberTokenStore.getState() !== '';
+
+    return await fetch(url, {
+      method: 'GET',
+      headers: isMemberTokenExist
+        ? {
+            Authorization: `Bearer ${memberTokenStore.getState()}`,
+          }
+        : undefined,
+    }).then<T>((response) => {
+      if (!response.ok) {
+        if (response.status === 401) {
+          handleInvalidTokenToLogout();
+
+          throw new Error('로그인이 필요합니다');
+        }
+
+        throw new Error(errorMessage ?? '에러가 발생했습니다');
+      }
+
+      return response.json();
+    });
+  },
+  /**
+   * @param url 요청을 발생시킬 url
+   * @param body request body
+   * @param errorMessage 에러 발생시 보여줄 에러 메세지
+   * @returns T
+   */
+  async post<T, U extends object>(url: string, body: U, errorMessage?: string) {
+    const isMemberTokenExist = memberTokenStore.getState() !== '';
+
+    return await fetch(url, {
+      method: 'POST',
+      headers: isMemberTokenExist
+        ? {
+            Authorization: `Bearer ${memberTokenStore.getState()}`,
+            'Content-Type': 'application/json',
+          }
+        : { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    }).then<T>((response) => {
+      if (!response.ok) {
+        if (response.status === 401) {
+          handleInvalidTokenToLogout();
+
+          throw new Error('로그인이 필요합니다');
+        }
+
+        throw new Error(errorMessage ?? '에러가 발생했습니다');
+      }
+
+      return response.json();
+    });
+  },
+};
diff --git a/frontend/src/utils/login/index.ts b/frontend/src/utils/login/index.ts
index 4f421f525..fd7258e6d 100644
--- a/frontend/src/utils/login/index.ts
+++ b/frontend/src/utils/login/index.ts
@@ -1,34 +1,12 @@
 import { setSessionStorage } from '@utils/storage';
 
 import { toastActions } from '@stores/layout/toastStore';
-import { memberTokenActions } from '@stores/login/memberTokenStore';
+import { memberInfoAction } from '@stores/login/memberInfoStore';
+import { memberTokenActions, memberTokenStore } from '@stores/login/memberTokenStore';
+import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
 
-import { SERVERS } from '@constants';
-import { SESSION_KEY_MEMBER_TOKEN } from '@constants/storageKeys';
-
-interface TokenResponse {
-  token: string;
-}
-
-export const getMemberToken = async (code: string, provider: string) => {
-  const APIEndPoint = getAPIEndPoint();
-  const redirectUri = getRedirectUri();
-
-  const tokenResponse = await fetch(`${APIEndPoint}/oauth/google/login`, {
-    method: 'POST',
-    headers: {
-      'Content-type': 'application/json',
-    },
-    body: JSON.stringify({
-      code,
-      redirectUri: `${redirectUri}/${provider}`,
-    }),
-  }).then<TokenResponse>((response) => response.json());
-
-  const memberToken = tokenResponse.token;
-
-  return memberToken;
-};
+import { DEFAULT_TOKEN, SERVERS } from '@constants';
+import { SESSION_KEY_MEMBER_INFO, SESSION_KEY_MEMBER_TOKEN } from '@constants/storageKeys';
 
 interface LoginUriResponse {
   loginUri: string;
@@ -53,11 +31,28 @@ export const redirectToLoginPage = (provider: string) => {
     });
 };
 
-export const logout = () => {
-  const { setMemberToken } = memberTokenActions;
+interface TokenResponse {
+  token: string;
+}
 
-  setMemberToken('');
-  setSessionStorage(SESSION_KEY_MEMBER_TOKEN, '');
+export const getMemberToken = async (code: string, provider: string) => {
+  const APIEndPoint = getAPIEndPoint();
+  const redirectUri = getRedirectUri();
+
+  const tokenResponse = await fetch(`${APIEndPoint}/oauth/google/login`, {
+    method: 'POST',
+    headers: {
+      'Content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      code,
+      redirectUri: `${redirectUri}/${provider}`,
+    }),
+  }).then<TokenResponse>((response) => response.json());
+
+  const memberToken = tokenResponse.token;
+
+  return memberToken;
 };
 
 export const getRedirectUri = () => {
@@ -89,3 +84,29 @@ export const getAPIEndPoint = () => {
 
   return SERVERS['localhost'];
 };
+
+export const logout = () => {
+  const { setMemberToken } = memberTokenActions;
+  const { resetMemberInfo } = memberInfoAction;
+  const { deleteAllServerStationFilters } = serverStationFilterAction;
+
+  setMemberToken('');
+  resetMemberInfo();
+  setSessionStorage(SESSION_KEY_MEMBER_TOKEN, '');
+  setSessionStorage(
+    SESSION_KEY_MEMBER_INFO,
+    `{
+      "memberId": ${DEFAULT_TOKEN},
+      "car": null
+    }`
+  );
+  deleteAllServerStationFilters();
+};
+
+export const handleInvalidTokenToLogout = () => {
+  const isTokenExist = memberTokenStore.getState() !== '';
+
+  if (isTokenExist) {
+    logout();
+  }
+};