diff --git a/frontend/src/pages/TripPage/TripMobilePage.tsx b/frontend/src/pages/TripPage/TripMobilePage.tsx
index 1544b8a98..73b4fa53d 100644
--- a/frontend/src/pages/TripPage/TripMobilePage.tsx
+++ b/frontend/src/pages/TripPage/TripMobilePage.tsx
@@ -17,7 +17,7 @@ import TripInformation from '@components/common/TripInformation/TripInformation'
 import TripMap from '@components/common/TripMap/TripMap';
 
 import { useTripQuery } from '@hooks/api/useTripQuery';
-import { useTripDates } from '@hooks/trip/useTripDates';
+import { useTrip } from '@hooks/trip/useTrip';
 
 import { formatMonthDate } from '@utils/formatter';
 
@@ -31,7 +31,7 @@ const TripMobilePage = () => {
     tripData.dayLogs[0].id
   );
   const selectedDayLog = tripData.dayLogs.find((log) => log.id === selectedDayLogId)!;
-  const { dates } = useTripDates(Number(tripId));
+  const { dates } = useTrip(Number(tripId));
 
   const places = useMemo(
     () =>
@@ -48,7 +48,7 @@ const TripMobilePage = () => {
   return (
     <Flex styles={{ direction: 'column' }}>
       <section css={containerStyling}>
-        <TripInformation isEditable={false} {...tripData} />
+        <TripInformation tripId={Number(tripId)} isEditable={false} />
         <section css={contentStyling}>
           <Tabs>
             {dates.map((date, index) => {
diff --git a/frontend/src/pages/TripPage/TripPage.style.ts b/frontend/src/pages/TripPage/TripPage.style.ts
index 7a705d02e..e55161f08 100644
--- a/frontend/src/pages/TripPage/TripPage.style.ts
+++ b/frontend/src/pages/TripPage/TripPage.style.ts
@@ -59,7 +59,7 @@ export const contentStyling = css({
   padding: `${Theme.spacer.spacing4} 50px`,
 
   '@media screen and (max-width: 600px)': {
-    padding: Theme.spacer.spacing4,
+    padding: `${Theme.spacer.spacing3} ${Theme.spacer.spacing4} 0 ${Theme.spacer.spacing4}`,
   },
 
   '& > ul': {
diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
index a28c27762..541b0bf1d 100644
--- a/frontend/src/router/AppRouter.tsx
+++ b/frontend/src/router/AppRouter.tsx
@@ -8,7 +8,6 @@ import { useRecoilValue } from 'recoil';
 import ExpensePageSkeleton from '@pages/ExpensePage/ExpensePageSkeleton';
 import NotFoundPage from '@pages/NotFoundPage/NotFoundPage';
 import RedirectPage from '@pages/RedirectPage/RedirectPage';
-import TripMobilePage from '@pages/TripPage/TripMobilePage';
 import TripPageSkeleton from '@pages/TripPage/TripPageSkeleton';
 import TripsPageSkeleton from '@pages/TripsPage/TripsPageSkeleton';
 
@@ -43,7 +42,7 @@ const AppRouter = () => {
           path: PATH.TRIP(':tripId'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
-              {isMobile ? <TripMobilePage /> : <Lazy.TripPage />}
+              {isMobile ? <Lazy.TripMobilePage /> : <Lazy.TripPage />}
             </Suspense>
           ),
         },
diff --git a/frontend/src/router/lazy.ts b/frontend/src/router/lazy.ts
index 14f81ed95..98b89207f 100644
--- a/frontend/src/router/lazy.ts
+++ b/frontend/src/router/lazy.ts
@@ -30,6 +30,10 @@ export const TripPage = lazy(
   () => import(/* webpackChunkName: "TripPage" */ '@pages/TripPage/TripPage')
 );
 
+export const TripMobilePage = lazy(
+  () => import(/* webpackChunkName: "TripPage" */ '@pages/TripPage/TripMobilePage')
+);
+
 export const TripsPage = lazy(
   () => import(/* webpackChunkName: "TripsPage" */ '@pages/TripsPage/TripsPage')
 );
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index da59009e8..31b59fa90 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -5,6 +5,7 @@ const path = require('path');
 const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CompressionPlugin = require('compression-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const prod = process.env.NODE_ENV === 'production';
 
@@ -29,8 +30,6 @@ const plugins = [
 ];
 
 if (!prod) {
-  const CopyPlugin = require('copy-webpack-plugin');
-
   plugins.push(
     new CopyPlugin({
       patterns: [{ from: 'public/mockServiceWorker.js', to: '' }],
@@ -42,9 +41,7 @@ module.exports = {
   mode: prod ? 'production' : 'development',
   devtool: prod ? 'hidden-source-map' : 'eval',
   entry: './src/index.tsx',
-  resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
-  },
+
   module: {
     rules: [
       {