diff --git a/backend/src/main/java/hanglog/global/config/CorsConfig.java b/backend/src/main/java/hanglog/global/config/CorsConfig.java
index 92c231791..a08c74533 100644
--- a/backend/src/main/java/hanglog/global/config/CorsConfig.java
+++ b/backend/src/main/java/hanglog/global/config/CorsConfig.java
@@ -13,6 +13,7 @@ public void addCorsMappings(final CorsRegistry registry) {
         registry.addMapping("/**")
                 .allowedOrigins("https://hanglog.com", "https://hanglog.site", "http://localhost:3000")
                 .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS")
+                .allowCredentials(true)
                 .exposedHeaders(HttpHeaders.LOCATION);
         WebMvcConfigurer.super.addCorsMappings(registry);
     }
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index 0bede56ac..774e1fe57 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -1,5 +1,6 @@
 server {
   listen 80;
+  client_max_body_size 10M;
 
   location / {
     root /usr/share/nginx/html/;
@@ -24,6 +25,7 @@ server {
 
 server{
   listen 443 ssl;
+  client_max_body_size 10M;
 
   ssl_certificate /etc/nginx/cert/fullchain.pem;
   ssl_certificate_key /etc/nginx/cert/privkey.pem;
diff --git a/frontend/src/api/dayLog/patchDayLogItemOrder.ts b/frontend/src/api/dayLog/patchDayLogItemOrder.ts
index becfe40cf..e31374eac 100644
--- a/frontend/src/api/dayLog/patchDayLogItemOrder.ts
+++ b/frontend/src/api/dayLog/patchDayLogItemOrder.ts
@@ -3,7 +3,7 @@ import { axiosInstance } from '@api/axiosInstance';
 import { END_POINTS } from '@constants/api';
 
 export interface PatchDayLogItemOrderParams {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   itemIds: number[];
 }
diff --git a/frontend/src/api/dayLog/patchDayLogTitle.ts b/frontend/src/api/dayLog/patchDayLogTitle.ts
index fe5985921..498463b17 100644
--- a/frontend/src/api/dayLog/patchDayLogTitle.ts
+++ b/frontend/src/api/dayLog/patchDayLogTitle.ts
@@ -7,7 +7,7 @@ export interface PatchDayLogTitleRequestBody {
 }
 
 interface PatchDayLogTitleParams extends PatchDayLogTitleRequestBody {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
 }
 
diff --git a/frontend/src/api/expense/getExpense.ts b/frontend/src/api/expense/getExpense.ts
index 632dafdf3..9d2f6b10f 100644
--- a/frontend/src/api/expense/getExpense.ts
+++ b/frontend/src/api/expense/getExpense.ts
@@ -4,7 +4,7 @@ import type { ExpenseData } from '@type/expense';
 
 import { END_POINTS } from '@constants/api';
 
-export const getExpense = async (tripId: number) => {
+export const getExpense = async (tripId: string) => {
   const { data } = await axiosInstance.get<ExpenseData>(END_POINTS.EXPENSE(tripId));
 
   return data;
diff --git a/frontend/src/api/interceptors.ts b/frontend/src/api/interceptors.ts
index 85394dca4..19265bc45 100644
--- a/frontend/src/api/interceptors.ts
+++ b/frontend/src/api/interceptors.ts
@@ -70,11 +70,5 @@ export const handleAPIError = (error: AxiosError<ErrorResponseData>) => {
     throw new HTTPError(HTTP_STATUS_CODE.INTERNAL_SERVER_ERROR, data.message);
   }
 
-  if (status === HTTP_STATUS_CODE.NOT_FOUND) {
-    throw new HTTPError(HTTP_STATUS_CODE.NOT_FOUND, data.message);
-  }
-
-  if (status >= HTTP_STATUS_CODE.BAD_REQUEST) {
-    throw new HTTPError(HTTP_STATUS_CODE.BAD_REQUEST, data.message);
-  }
+  throw new HTTPError(status, data.message);
 };
diff --git a/frontend/src/api/trip/deleteTrip.ts b/frontend/src/api/trip/deleteTrip.ts
index 7b9c3dc5c..b3dd87160 100644
--- a/frontend/src/api/trip/deleteTrip.ts
+++ b/frontend/src/api/trip/deleteTrip.ts
@@ -3,7 +3,7 @@ import { axiosInstance } from '@api/axiosInstance';
 import { END_POINTS } from '@constants/api';
 
 interface DeleteTripParams {
-  tripId: number;
+  tripId: string;
 }
 
 export const deleteTrip = ({ tripId }: DeleteTripParams) => {
diff --git a/frontend/src/api/trip/getTrip.ts b/frontend/src/api/trip/getTrip.ts
index 35270be3b..48fea5b09 100644
--- a/frontend/src/api/trip/getTrip.ts
+++ b/frontend/src/api/trip/getTrip.ts
@@ -4,7 +4,7 @@ import type { TripData } from '@type/trip';
 
 import { END_POINTS } from '@constants/api';
 
-export const getTrip = async (tripId: number) => {
+export const getTrip = async (tripId: string) => {
   const { data } = await axiosInstance.get<TripData>(END_POINTS.TRIP(tripId));
 
   return data;
diff --git a/frontend/src/api/trip/patchTripShareStatus.ts b/frontend/src/api/trip/patchTripShareStatus.ts
index d77e8b000..03c53ac87 100644
--- a/frontend/src/api/trip/patchTripShareStatus.ts
+++ b/frontend/src/api/trip/patchTripShareStatus.ts
@@ -5,7 +5,7 @@ import type { TripData, TripSharedStatusData } from '@type/trip';
 import { END_POINTS } from '@constants/api';
 
 interface PatchTripSharedStatusParams extends TripSharedStatusData {
-  tripId: number;
+  tripId: string;
 }
 
 interface ResponseData {
diff --git a/frontend/src/api/trip/putTrip.ts b/frontend/src/api/trip/putTrip.ts
index b9b642a6d..7eeb6ce62 100644
--- a/frontend/src/api/trip/putTrip.ts
+++ b/frontend/src/api/trip/putTrip.ts
@@ -5,7 +5,7 @@ import type { TripFormData } from '@type/trip';
 import { END_POINTS } from '@constants/api';
 
 export interface PutTripParams extends TripFormData {
-  tripId: number;
+  tripId: string;
 }
 
 export const putTrip = ({ tripId, ...tripInformation }: PutTripParams) => {
diff --git a/frontend/src/api/tripItem/deleteTripItem.ts b/frontend/src/api/tripItem/deleteTripItem.ts
index 9f2fc5b14..b6f6de6ef 100644
--- a/frontend/src/api/tripItem/deleteTripItem.ts
+++ b/frontend/src/api/tripItem/deleteTripItem.ts
@@ -3,7 +3,7 @@ import { axiosInstance } from '@api/axiosInstance';
 import { END_POINTS } from '@constants/api';
 
 interface DeleteTripItemParams {
-  tripId: number;
+  tripId: string;
   itemId: number;
 }
 
diff --git a/frontend/src/api/tripItem/postTripItem.ts b/frontend/src/api/tripItem/postTripItem.ts
index 9172b16e4..6da104d23 100644
--- a/frontend/src/api/tripItem/postTripItem.ts
+++ b/frontend/src/api/tripItem/postTripItem.ts
@@ -5,7 +5,7 @@ import type { TripItemFormData } from '@type/tripItem';
 import { END_POINTS } from '@constants/api';
 
 export interface PostTripItemParams extends TripItemFormData {
-  tripId: number;
+  tripId: string;
 }
 
 export const postTripItem = ({ tripId, ...information }: PostTripItemParams) => {
diff --git a/frontend/src/api/tripItem/putTripItem.ts b/frontend/src/api/tripItem/putTripItem.ts
index 5e995a2c3..847d65f7a 100644
--- a/frontend/src/api/tripItem/putTripItem.ts
+++ b/frontend/src/api/tripItem/putTripItem.ts
@@ -5,7 +5,7 @@ import type { TripItemFormData } from '@type/tripItem';
 import { END_POINTS } from '@constants/api';
 
 interface PutTripItemParams extends TripItemFormData {
-  tripId: number;
+  tripId: string;
   itemId: number;
 }
 
diff --git a/frontend/src/components/common/DayLogItem/DayLogItem.tsx b/frontend/src/components/common/DayLogItem/DayLogItem.tsx
index 0d82c3be5..c4e676bf5 100644
--- a/frontend/src/components/common/DayLogItem/DayLogItem.tsx
+++ b/frontend/src/components/common/DayLogItem/DayLogItem.tsx
@@ -11,7 +11,7 @@ import type { DayLogData } from '@type/dayLog';
 import { DAY_LOG_ITEM_FILTERS } from '@constants/trip';
 
 interface DayLogItemProps extends DayLogData {
-  tripId: number;
+  tripId: string;
   isEditable?: boolean;
   isShared?: boolean;
   openAddModal?: () => void;
diff --git a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx
index a70c2ca43..0fe36e684 100644
--- a/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx
+++ b/frontend/src/components/common/DayLogItem/TitleInput/TitleInput.tsx
@@ -8,7 +8,7 @@ import { useDayLogTitleMutation } from '@hooks/api/useDayLogTitleMutation';
 import { DAYLOG_TITLE_MAX_LENGTH } from '@constants/ui';
 
 interface TitleInputProps {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   initialTitle: string;
 }
diff --git a/frontend/src/components/common/DayLogList/DayLogList.tsx b/frontend/src/components/common/DayLogList/DayLogList.tsx
index fce658536..45c7a33f2 100644
--- a/frontend/src/components/common/DayLogList/DayLogList.tsx
+++ b/frontend/src/components/common/DayLogList/DayLogList.tsx
@@ -10,7 +10,7 @@ import { formatMonthDate } from '@utils/formatter';
 import type { DayLogData } from '@type/dayLog';
 
 interface DayLogListProps {
-  tripId: number;
+  tripId: string;
   selectedDayLog: DayLogData;
   isEditable?: boolean;
   isShared?: boolean;
diff --git a/frontend/src/components/common/Error/Error.tsx b/frontend/src/components/common/Error/Error.tsx
index 80cbe5a07..ca21ce61a 100644
--- a/frontend/src/components/common/Error/Error.tsx
+++ b/frontend/src/components/common/Error/Error.tsx
@@ -26,7 +26,9 @@ export interface ErrorProps {
 }
 
 const Error = ({ statusCode = HTTP_STATUS_CODE.NOT_FOUND, errorCode, resetError }: ErrorProps) => {
-  const isHTTPError = hasKeyInObject(HTTP_ERROR_MESSAGE, statusCode);
+  const currentStatusCode =
+    statusCode === HTTP_STATUS_CODE.CONTENT_TOO_LARGE ? HTTP_STATUS_CODE.BAD_REQUEST : statusCode;
+  const isHTTPError = hasKeyInObject(HTTP_ERROR_MESSAGE, currentStatusCode);
   const isMobile = useRecoilValue(mediaQueryMobileState);
 
   const { handleTokenError } = useTokenError();
@@ -44,11 +46,11 @@ const Error = ({ statusCode = HTTP_STATUS_CODE.NOT_FOUND, errorCode, resetError
       <Flex styles={{ direction: 'column', align: 'center' }} css={containerStyling}>
         <ErrorImage width={isMobile ? '80%' : '476px'} aria-label="에러 이미지" />
         <Heading css={headingStyling} size="small">
-          {HTTP_ERROR_MESSAGE[statusCode].HEADING}
+          {HTTP_ERROR_MESSAGE[currentStatusCode].HEADING}
         </Heading>
-        <Text css={textStyling}>{HTTP_ERROR_MESSAGE[statusCode].BODY}</Text>
+        <Text css={textStyling}>{HTTP_ERROR_MESSAGE[currentStatusCode].BODY}</Text>
         <Button css={buttonStyling} variant="primary" onClick={resetError}>
-          {HTTP_ERROR_MESSAGE[statusCode].BUTTON}
+          {HTTP_ERROR_MESSAGE[currentStatusCode].BUTTON}
         </Button>
       </Flex>
     </Box>
diff --git a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx
index e5e41a674..9f96d8616 100644
--- a/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx
+++ b/frontend/src/components/common/TripInformation/TripButtons/TripButtons.tsx
@@ -21,7 +21,7 @@ import BinIcon from '@assets/svg/bin-icon.svg';
 import EditIcon from '@assets/svg/edit-icon.svg';
 
 interface TripButtonsProps {
-  tripId: number;
+  tripId: string;
   sharedCode: TripData['sharedCode'];
   isShared: boolean;
 }
diff --git a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx
index ecdd36013..d5ddf60ec 100644
--- a/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx
+++ b/frontend/src/components/common/TripInformation/TripEditButtons/TripEditButtons.tsx
@@ -5,7 +5,7 @@ import { Button } from 'hang-log-design-system';
 import { editButtonStyling } from '@components/common/TripInformation/TripEditButtons/TripEditButtons.style';
 
 interface TripEditButtonsProps {
-  tripId: number;
+  tripId: string;
   openEditModal?: () => void;
 }
 
diff --git a/frontend/src/components/common/TripInformation/TripInformation.tsx b/frontend/src/components/common/TripInformation/TripInformation.tsx
index e3f09f278..85f2967e1 100644
--- a/frontend/src/components/common/TripInformation/TripInformation.tsx
+++ b/frontend/src/components/common/TripInformation/TripInformation.tsx
@@ -26,7 +26,7 @@ import { formatDate } from '@utils/formatter';
 import DefaultThumbnail from '@assets/png/trip-information_default-thumbnail.png';
 
 interface TripInformationProps {
-  tripId: number;
+  tripId: string;
   isEditable?: boolean;
   isShared?: boolean;
 }
@@ -65,13 +65,9 @@ const TripInformation = ({ isEditable = true, isShared = false, tripId }: TripIn
         </Box>
         <Box css={buttonContainerStyling}>
           {isEditable ? (
-            <TripEditButtons tripId={tripData.id} openEditModal={openEditModal} />
+            <TripEditButtons tripId={tripId} openEditModal={openEditModal} />
           ) : (
-            <TripButtons
-              tripId={tripData.id}
-              sharedCode={tripData.sharedCode}
-              isShared={isShared}
-            />
+            <TripButtons tripId={tripId} sharedCode={tripData.sharedCode} isShared={isShared} />
           )}
         </Box>
       </header>
diff --git a/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.tsx b/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.tsx
index bc8f77252..3d568c964 100644
--- a/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.tsx
+++ b/frontend/src/components/common/TripInformation/TripShareButton/TripShareButton.tsx
@@ -23,7 +23,7 @@ import { PATH } from '@constants/path';
 import ShareIcon from '@assets/svg/share-icon.svg';
 
 interface TripShareButtonProps {
-  tripId: number;
+  tripId: string;
   sharedCode: TripData['sharedCode'];
 }
 
diff --git a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx
index 79f084dbb..2deb54d70 100644
--- a/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx
+++ b/frontend/src/components/common/TripItem/EditMenu/EditMenu.tsx
@@ -17,7 +17,7 @@ import BinIcon from '@assets/svg/bin-icon.svg';
 import EditIcon from '@assets/svg/edit-icon.svg';
 
 interface EditMenuProps extends TripItemData {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   hasImage: boolean;
   imageHeight: number;
diff --git a/frontend/src/components/common/TripItem/TripItem.tsx b/frontend/src/components/common/TripItem/TripItem.tsx
index 3b276bd3a..5dfc33499 100644
--- a/frontend/src/components/common/TripItem/TripItem.tsx
+++ b/frontend/src/components/common/TripItem/TripItem.tsx
@@ -34,7 +34,7 @@ import { CURRENCY_ICON } from '@constants/trip';
 import { TRIP_ITEM_IMAGE_HEIGHT, TRIP_ITEM_IMAGE_WIDTH } from '@constants/ui';
 
 interface TripListItemProps extends TripItemData {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   isEditable?: boolean;
   observer?: IntersectionObserver | null;
diff --git a/frontend/src/components/common/TripItemList/TripItemList.tsx b/frontend/src/components/common/TripItemList/TripItemList.tsx
index d084a690f..47a867093 100644
--- a/frontend/src/components/common/TripItemList/TripItemList.tsx
+++ b/frontend/src/components/common/TripItemList/TripItemList.tsx
@@ -24,7 +24,7 @@ import type { TripItemData } from '@type/tripItem';
 import { PATH } from '@constants/path';
 
 interface TripItemListProps {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   tripItems: TripItemData[];
   isEditable?: boolean;
@@ -86,7 +86,7 @@ const TripItemList = ({ tripId, dayLogId, tripItems, isEditable = true }: TripIt
 };
 
 interface EmptyTripItemListProps {
-  tripId: number;
+  tripId: string;
   isEditable?: boolean;
   isShared?: boolean;
   openAddModal?: () => void;
diff --git a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx
index 52edfe019..b8a8e326c 100644
--- a/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx
+++ b/frontend/src/components/expense/ExpenseCategories/ExpenseCategories.tsx
@@ -10,7 +10,7 @@ import { formatDate, formatNumberToMoney } from '@utils/formatter';
 import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip';
 
 interface ExpenseCategoriesProps {
-  tripId: number;
+  tripId: string;
 }
 
 const ExpenseCategories = ({ tripId }: ExpenseCategoriesProps) => {
diff --git a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx
index cb481337a..2f8b31e46 100644
--- a/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx
+++ b/frontend/src/components/expense/ExpenseCategoryInformation/ExpenseCategoryInformation.tsx
@@ -14,7 +14,7 @@ import { formatNumberToMoney } from '@utils/formatter';
 import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip';
 
 interface ExpenseCategoryInformationProps {
-  tripId: number;
+  tripId: string;
 }
 
 const ExpenseCategoryInformation = ({ tripId }: ExpenseCategoryInformationProps) => {
diff --git a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx
index cd59d5a1a..154d06dd7 100644
--- a/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx
+++ b/frontend/src/components/expense/ExpenseDates/ExpenseDates.tsx
@@ -10,7 +10,7 @@ import { formatDate, formatMonthDate, formatNumberToMoney } from '@utils/formatt
 import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip';
 
 interface ExpenseDatesProps {
-  tripId: number;
+  tripId: string;
 }
 
 const ExpenseDates = ({ tripId }: ExpenseDatesProps) => {
diff --git a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
index c7ca6f17e..cc0c2f263 100644
--- a/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
+++ b/frontend/src/components/expense/ExpenseInformation/ExpenseInformation.tsx
@@ -20,7 +20,7 @@ import { formatDate } from '@utils/formatter';
 import { PATH } from '@constants/path';
 
 interface ExpenseInformationProps {
-  tripId: number;
+  tripId: string;
   isShared: boolean;
 }
 
diff --git a/frontend/src/components/expense/ExpenseList/ExpenseList.tsx b/frontend/src/components/expense/ExpenseList/ExpenseList.tsx
index 84a84cc7e..9bece5640 100644
--- a/frontend/src/components/expense/ExpenseList/ExpenseList.tsx
+++ b/frontend/src/components/expense/ExpenseList/ExpenseList.tsx
@@ -37,7 +37,7 @@ const ExpenseList = ({ items }: ExpenseListProps) => {
 
 export default ExpenseList;
 
-ExpenseList.Empty = ({ tripId }: { tripId: number }) => {
+ExpenseList.Empty = ({ tripId }: { tripId: string }) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const navigate = useNavigate();
 
diff --git a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
index f4c0b1a60..3ab30f4a2 100644
--- a/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
+++ b/frontend/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
@@ -14,7 +14,7 @@ import { mediaQueryMobileState } from '@store/mediaQuery';
 import { EXPENSE_LIST_FILTERS } from '@constants/expense';
 
 interface ExpenseListProps {
-  tripId: number;
+  tripId: string;
 }
 
 const ExpenseListSection = ({ tripId }: ExpenseListProps) => {
diff --git a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
index c12b5a449..62f2806ee 100644
--- a/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
+++ b/frontend/src/components/expense/TotalExpenseSection/TotalExpenseSection.tsx
@@ -20,7 +20,7 @@ import { CURRENCY_ICON, DEFAULT_CURRENCY } from '@constants/trip';
 import { EXPENSE_CATEGORY_CHART_SIZE, EXPENSE_CATEGORY_CHART_STROKE_WIDTH } from '@constants/ui';
 
 interface TotalExpenseSectionProps {
-  tripId: number;
+  tripId: string;
   isShared: boolean;
 }
 
@@ -31,7 +31,7 @@ const TotalExpenseSection = ({ tripId, isShared }: TotalExpenseSectionProps) =>
 
   return (
     <section css={containerStyling}>
-      <ExpenseInformation tripId={expenseData.id} isShared={isShared} />
+      <ExpenseInformation tripId={tripId} isShared={isShared} />
       <Heading size={isMobile ? 'xSmall' : 'small'} css={totalAmountStyling}>
         총 경비 :{' '}
         <span>
diff --git a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx
index de4f1fe5d..c1c2cd04f 100644
--- a/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx
+++ b/frontend/src/components/trip/TripItemAddModal/DateInput/DateInput.tsx
@@ -14,7 +14,7 @@ import type { TripItemFormData } from '@type/tripItem';
 
 interface DateInputProps {
   currentCategory: TripItemFormData['itemType'];
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   updateInputValue: <K extends keyof TripItemFormData>(key: K, value: TripItemFormData[K]) => void;
 }
diff --git a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx
index 1d56154c2..2e72cee0e 100644
--- a/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx
+++ b/frontend/src/components/trip/TripItemAddModal/TripItemAddModal.tsx
@@ -23,7 +23,7 @@ import { mediaQueryMobileState } from '@store/mediaQuery';
 import type { TripItemFormData } from '@type/tripItem';
 
 interface TripItemAddModalProps {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
   itemId?: number;
   initialData?: TripItemFormData;
diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts
index 9666e57a4..464ad51fa 100644
--- a/frontend/src/constants/api.ts
+++ b/frontend/src/constants/api.ts
@@ -10,23 +10,23 @@ export const AXIOS_BASE_URL = PROD
 
 export const END_POINTS = {
   TRIPS: '/trips',
-  TRIP: (tripId: number) => `/trips/${tripId}`,
-  DAY_LOG: (tripId: number, dayLogId: number) => `/trips/${tripId}/daylogs/${dayLogId}`,
-  DAY_LOG_ORDER: (tripId: number, dayLogId: number) => `/trips/${tripId}/daylogs/${dayLogId}/order`,
-  CREATE_TRIP_ITEM: (tripId: number) => `/trips/${tripId}/items`,
-  CHANGE_TRIP_ITEM: (tripId: number, itemId: number) => `/trips/${tripId}/items/${itemId}`,
+  TRIP: (tripId: string) => `/trips/${tripId}`,
+  DAY_LOG: (tripId: string, dayLogId: number) => `/trips/${tripId}/daylogs/${dayLogId}`,
+  DAY_LOG_ORDER: (tripId: string, dayLogId: number) => `/trips/${tripId}/daylogs/${dayLogId}/order`,
+  CREATE_TRIP_ITEM: (tripId: string) => `/trips/${tripId}/items`,
+  CHANGE_TRIP_ITEM: (tripId: string, itemId: number) => `/trips/${tripId}/items/${itemId}`,
   CITY: '/cities',
   EXPENSE_CATEGORY: '/categories',
-  EXPENSE: (tripId: number | string) => `/trips/${tripId}/expense`,
+  EXPENSE: (tripId: string) => `/trips/${tripId}/expense`,
   IMAGES: '/images',
-  SHARE: (tripId: number | string) => `/trips/${tripId}/share`,
+  SHARE: (tripId: string) => `/trips/${tripId}/share`,
   TOKEN: '/token',
   LOGIN: (provider: string) => `/login/${provider}`,
   LOGOUT: '/logout',
   MY_PAGE: '/mypage',
   ACCOUNT: '/account',
-  SHARED_TRIP: (code: string | number) => `/shared-trips/${code}`,
-  SHARED_EXPENSE: (tripId: string | number) => `/shared-trips/${tripId}/expense`,
+  SHARED_TRIP: (code: string) => `/shared-trips/${code}`,
+  SHARED_EXPENSE: (tripId: string) => `/shared-trips/${tripId}/expense`,
 } as const;
 
 export const NETWORK = {
diff --git a/frontend/src/constants/path.ts b/frontend/src/constants/path.ts
index 3ed5807d6..46a0bd0bc 100644
--- a/frontend/src/constants/path.ts
+++ b/frontend/src/constants/path.ts
@@ -1,11 +1,11 @@
 export const PATH = {
   ROOT: '/',
   CREATE_TRIP: '/trip-new',
-  EDIT_TRIP: (tripId: number | string) => `/trip/${tripId}/edit`,
-  TRIP: (tripId: number | string) => `/trip/${tripId}`,
-  EXPENSE: (tripId: number | string) => `/trip/${tripId}/expense`,
-  SHARE_TRIP: (shareCode: string | number) => `/trip/share/${shareCode}`,
-  SHARE_EXPENSE: (tripId: number | string) => `/trip/share/expense/${tripId}`,
+  EDIT_TRIP: (tripId: string) => `/trip/${tripId}/edit`,
+  TRIP: (tripId: string) => `/trip/${tripId}`,
+  EXPENSE: (tripId: string) => `/trip/${tripId}/expense`,
+  SHARE_TRIP: (shareCode: string) => `/trip/share/${shareCode}`,
+  SHARE_EXPENSE: (tripId: string) => `/trip/share/expense/${tripId}`,
   LOGIN: '/login',
   MY_PAGE: '/my-page',
   REDIRECT: '/auth/:provider',
diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts
index d0cdd620a..a2d588a50 100644
--- a/frontend/src/hooks/api/useExpenseQuery.ts
+++ b/frontend/src/hooks/api/useExpenseQuery.ts
@@ -8,10 +8,10 @@ import { getExpense } from '@api/expense/getExpense';
 
 import type { ExpenseData } from '@type/expense';
 
-export const useExpenseQuery = (tripId: number, isShared = false) => {
+export const useExpenseQuery = (tripId: string, isShared = false) => {
   const { data } = useQuery<ExpenseData, AxiosError>(
     ['expense', tripId],
-    !isShared ? () => getExpense(tripId) : () => getSharedExpense(String(tripId))
+    !isShared ? () => getExpense(tripId) : () => getSharedExpense(tripId)
   );
 
   return { expenseData: data! };
diff --git a/frontend/src/hooks/api/useLogInMutation.ts b/frontend/src/hooks/api/useLogInMutation.ts
index d83bb7e1b..ffd6792e1 100644
--- a/frontend/src/hooks/api/useLogInMutation.ts
+++ b/frontend/src/hooks/api/useLogInMutation.ts
@@ -27,12 +27,13 @@ export const useLogInMutation = () => {
       axiosInstance.defaults.headers.Authorization = `Bearer ${accessToken}`;
 
       setIsLoggedIn(true);
-      navigate(-2);
     },
     onError: () => {
       setIsLoggedIn(false);
 
       createToast('오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
+    },
+    onSettled: () => {
       navigate(PATH.ROOT);
     },
   });
diff --git a/frontend/src/hooks/api/useSharedTripQuery.ts b/frontend/src/hooks/api/useSharedTripQuery.ts
index fd2f69053..1ab5c0f0c 100644
--- a/frontend/src/hooks/api/useSharedTripQuery.ts
+++ b/frontend/src/hooks/api/useSharedTripQuery.ts
@@ -6,10 +6,8 @@ import { getSharedTrip } from '@api/trip/getSharedTrip';
 
 import type { TripData } from '@type/trip';
 
-export const useSharedQuery = (code: string) => {
-  const { data } = useQuery<TripData, AxiosError>(['trip', Number(code)], () =>
-    getSharedTrip(code)
-  );
+export const useSharedQuery = (tripId: string) => {
+  const { data } = useQuery<TripData, AxiosError>(['trip', tripId], () => getSharedTrip(tripId));
 
   return { tripData: data! };
 };
diff --git a/frontend/src/hooks/api/useTripEditPageQueries.ts b/frontend/src/hooks/api/useTripEditPageQueries.ts
index cd5881f0a..ec1c3ba41 100644
--- a/frontend/src/hooks/api/useTripEditPageQueries.ts
+++ b/frontend/src/hooks/api/useTripEditPageQueries.ts
@@ -3,7 +3,7 @@ import { useQueries } from '@tanstack/react-query';
 import { getExpenseCategory } from '@api/expense/getExpenseCategory';
 import { getTrip } from '@api/trip/getTrip';
 
-export const useTripEditPageQueries = (tripId: number) => {
+export const useTripEditPageQueries = (tripId: string) => {
   const [tripQuery, expenseCategoryQuery] = useQueries({
     queries: [
       { queryKey: ['trip', tripId], queryFn: () => getTrip(tripId) },
diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts
index d1412faa5..e10825ee4 100644
--- a/frontend/src/hooks/api/useTripQuery.ts
+++ b/frontend/src/hooks/api/useTripQuery.ts
@@ -6,7 +6,7 @@ import { getTrip } from '@api/trip/getTrip';
 
 import type { TripData } from '@type/trip';
 
-export const useTripQuery = (tripId: number) => {
+export const useTripQuery = (tripId: string) => {
   const { data } = useQuery<TripData, AxiosError>(['trip', tripId], () => getTrip(tripId));
 
   return { tripData: data! };
diff --git a/frontend/src/hooks/common/useMultipleImageUpload.ts b/frontend/src/hooks/common/useMultipleImageUpload.ts
index 026ff218d..01795db81 100644
--- a/frontend/src/hooks/common/useMultipleImageUpload.ts
+++ b/frontend/src/hooks/common/useMultipleImageUpload.ts
@@ -54,7 +54,12 @@ export const useMultipleImageUpload = ({
         await Promise.all(
           [...originalImageFiles].map(async (file) => {
             const compressedImageFile = await imageCompression(file, IMAGE_COMPRESSION_OPTIONS);
-            imageFiles.push(compressedImageFile);
+
+            const fileName = file.name;
+            const fileType = compressedImageFile.type;
+            const convertedFile = new File([compressedImageFile], fileName, { type: fileType });
+
+            imageFiles.push(convertedFile);
           })
         );
       } catch (e) {
diff --git a/frontend/src/hooks/common/useSingleImageUpload.ts b/frontend/src/hooks/common/useSingleImageUpload.ts
index d29871f9a..78819ab10 100644
--- a/frontend/src/hooks/common/useSingleImageUpload.ts
+++ b/frontend/src/hooks/common/useSingleImageUpload.ts
@@ -36,7 +36,17 @@ export const useSingleImageUpload = ({
       let imageFile: File;
 
       try {
-        imageFile = await imageCompression(originalImageFile, IMAGE_COMPRESSION_OPTIONS);
+        const compressedImageFile = await imageCompression(
+          originalImageFile,
+
+          IMAGE_COMPRESSION_OPTIONS
+        );
+
+        const fileName = originalImageFile.name;
+
+        const fileType = compressedImageFile.type;
+
+        imageFile = new File([compressedImageFile], fileName, { type: fileType });
       } catch (e) {
         imageFile = originalImageFile;
       }
diff --git a/frontend/src/hooks/expense/useExpense.ts b/frontend/src/hooks/expense/useExpense.ts
index 636a8bd2e..78f761ac1 100644
--- a/frontend/src/hooks/expense/useExpense.ts
+++ b/frontend/src/hooks/expense/useExpense.ts
@@ -8,7 +8,7 @@ import type { ExpenseData, ExpenseItemData } from '@type/expense';
 
 import { EXPENSE_CHART_COLORS } from '@constants/expense';
 
-export const useExpense = (tripId: number) => {
+export const useExpense = (tripId: string) => {
   const queryClient = useQueryClient();
 
   const expenseData = queryClient.getQueryData<ExpenseData>(['expense', tripId])!;
diff --git a/frontend/src/hooks/trip/useAddTripItemForm.ts b/frontend/src/hooks/trip/useAddTripItemForm.ts
index 434cb3f33..d43c31380 100644
--- a/frontend/src/hooks/trip/useAddTripItemForm.ts
+++ b/frontend/src/hooks/trip/useAddTripItemForm.ts
@@ -10,7 +10,7 @@ import { isEmptyString } from '@utils/validator';
 import type { TripItemFormData } from '@type/tripItem';
 
 interface UseAddTripItemFormParams {
-  tripId: number;
+  tripId: string;
   initialDayLogId: number;
   itemId?: number;
   initialData?: TripItemFormData;
diff --git a/frontend/src/hooks/trip/useTrip.ts b/frontend/src/hooks/trip/useTrip.ts
index b99522174..948114de2 100644
--- a/frontend/src/hooks/trip/useTrip.ts
+++ b/frontend/src/hooks/trip/useTrip.ts
@@ -2,7 +2,7 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import type { TripData } from '@type/trip';
 
-export const useTrip = (tripId: number) => {
+export const useTrip = (tripId: string) => {
   const queryClient = useQueryClient();
 
   const tripData = queryClient.getQueryData<TripData>(['trip', tripId])!;
diff --git a/frontend/src/hooks/trip/useTripEditForm.ts b/frontend/src/hooks/trip/useTripEditForm.ts
index 5f57bcb14..4ab927b22 100644
--- a/frontend/src/hooks/trip/useTripEditForm.ts
+++ b/frontend/src/hooks/trip/useTripEditForm.ts
@@ -77,7 +77,7 @@ export const useTripEditForm = (
     tripEditMutation.mutate(
       {
         ...tripInfo,
-        tripId,
+        tripId: String(tripId),
         startDate: tripInfo.startDate!,
         endDate: tripInfo.endDate!,
       },
diff --git a/frontend/src/pages/ExpensePage/ExpensePage.tsx b/frontend/src/pages/ExpensePage/ExpensePage.tsx
index 6c2afab3d..c488bcabc 100644
--- a/frontend/src/pages/ExpensePage/ExpensePage.tsx
+++ b/frontend/src/pages/ExpensePage/ExpensePage.tsx
@@ -24,13 +24,13 @@ const ExpensePage = ({ isShared = false }: ExpensePageProps) => {
 
   const isMobile = useRecoilValue(mediaQueryMobileState);
 
-  const { expenseData } = useExpenseQuery(Number(tripId), isShared);
+  useExpenseQuery(tripId, isShared);
 
   return (
     <Flex css={containerStyling}>
-      <TotalExpenseSection tripId={expenseData.id} isShared={isShared} />
+      <TotalExpenseSection tripId={tripId} isShared={isShared} />
       {isMobile && <Divider css={dividerStyling} />}
-      <ExpenseListSection tripId={expenseData.id} />
+      <ExpenseListSection tripId={tripId} />
     </Flex>
   );
 };
diff --git a/frontend/src/pages/SharedPage/SharedTripPage.tsx b/frontend/src/pages/SharedPage/SharedTripPage.tsx
index 86937e2eb..49285c511 100644
--- a/frontend/src/pages/SharedPage/SharedTripPage.tsx
+++ b/frontend/src/pages/SharedPage/SharedTripPage.tsx
@@ -17,11 +17,11 @@ import { useSharedQuery } from '@hooks/api/useSharedTripQuery';
 import { mediaQueryMobileState } from '@store/mediaQuery';
 
 const SharedTripPage = () => {
-  const { code } = useParams();
+  const { tripId } = useParams();
 
-  if (!code) throw new Error('존재하지 않는 공유코드입니다.');
+  if (!tripId) throw new Error('존재하지 않는 공유코드입니다.');
 
-  const { tripData } = useSharedQuery(code);
+  const { tripData } = useSharedQuery(tripId);
 
   const isMobile = useRecoilValue(mediaQueryMobileState);
 
@@ -45,9 +45,9 @@ const SharedTripPage = () => {
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripId={Number(code)} isEditable={false} isShared />
+        <TripInformation tripId={tripId} isEditable={false} isShared />
         <DayLogList
-          tripId={Number(code)}
+          tripId={tripId}
           selectedDayLog={selectedDayLog}
           isEditable={false}
           isShared
diff --git a/frontend/src/pages/TripEditPage/TripEditPage.tsx b/frontend/src/pages/TripEditPage/TripEditPage.tsx
index a88881d64..50db5773e 100644
--- a/frontend/src/pages/TripEditPage/TripEditPage.tsx
+++ b/frontend/src/pages/TripEditPage/TripEditPage.tsx
@@ -28,7 +28,7 @@ const TripEditPage = () => {
 
   const isMobile = useRecoilValue(mediaQueryMobileState);
 
-  const { tripData } = useTripEditPageQueries(Number(tripId));
+  const { tripData } = useTripEditPageQueries(tripId);
 
   const { isOpen: isAddModalOpen, open: openAddModal, close: closeAddModal } = useOverlay();
   const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect(
@@ -51,9 +51,9 @@ const TripEditPage = () => {
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripId={Number(tripId)} />
+        <TripInformation tripId={tripId} />
         <DayLogList
-          tripId={Number(tripId)}
+          tripId={tripId}
           selectedDayLog={selectedDayLog}
           onTabChange={handleDayLogIdSelectClick}
           openAddModal={openAddModal}
@@ -64,11 +64,7 @@ const TripEditPage = () => {
           onClick={openAddModal}
         />
         {isAddModalOpen && (
-          <TripItemAddModal
-            tripId={Number(tripId)}
-            dayLogId={selectedDayLog.id}
-            onClose={closeAddModal}
-          />
+          <TripItemAddModal tripId={tripId} dayLogId={selectedDayLog.id} onClose={closeAddModal} />
         )}
       </section>
       {!isMobile && (
diff --git a/frontend/src/pages/TripPage/TripMobilePage.tsx b/frontend/src/pages/TripPage/TripMobilePage.tsx
index bbe381bed..54323e1fe 100644
--- a/frontend/src/pages/TripPage/TripMobilePage.tsx
+++ b/frontend/src/pages/TripPage/TripMobilePage.tsx
@@ -29,13 +29,15 @@ const TripMobilePage = ({ isShared = false }: TripMobilePageProps) => {
   const [isDaylogShown, setIsDaylogShown] = useState(true);
   const { tripId } = useParams();
 
-  const { tripData } = useTripQuery(Number(tripId));
+  if (!tripId) throw new Error('해당 여행이 없습니다');
+
+  const { tripData } = useTripQuery(tripId);
 
   const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect(
     tripData.dayLogs[0].id
   );
   const selectedDayLog = tripData.dayLogs.find((log) => log.id === selectedDayLogId)!;
-  const { dates } = useTrip(Number(tripId));
+  const { dates } = useTrip(tripId);
 
   const places = useMemo(
     () =>
@@ -52,7 +54,7 @@ const TripMobilePage = ({ isShared = false }: TripMobilePageProps) => {
   return (
     <Flex styles={{ direction: 'column' }}>
       <section css={containerStyling}>
-        <TripInformation tripId={Number(tripId)} isEditable={false} isShared={isShared} />
+        <TripInformation tripId={tripId} isEditable={false} isShared={isShared} />
         <section css={contentStyling}>
           <Tabs>
             {dates.map((date, index) => {
@@ -76,7 +78,7 @@ const TripMobilePage = ({ isShared = false }: TripMobilePageProps) => {
           </Tabs>
           {isDaylogShown && (
             <DayLogItem
-              tripId={Number(tripId)}
+              tripId={tripId}
               isEditable={false}
               isShared={isShared}
               {...selectedDayLog}
diff --git a/frontend/src/pages/TripPage/TripPage.tsx b/frontend/src/pages/TripPage/TripPage.tsx
index 3db990c4b..6b6115026 100644
--- a/frontend/src/pages/TripPage/TripPage.tsx
+++ b/frontend/src/pages/TripPage/TripPage.tsx
@@ -17,7 +17,7 @@ const TripPage = () => {
 
   if (!tripId) throw new Error('존재하지 않는 tripId 입니다.');
 
-  const { tripData } = useTripQuery(Number(tripId));
+  const { tripData } = useTripQuery(tripId);
 
   const { selected: selectedDayLogId, handleSelectClick: handleDayLogIdSelectClick } = useSelect(
     tripData.dayLogs[0].id
@@ -39,9 +39,9 @@ const TripPage = () => {
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripId={Number(tripId)} isEditable={false} />
+        <TripInformation tripId={tripId} isEditable={false} />
         <DayLogList
-          tripId={Number(tripId)}
+          tripId={tripId}
           selectedDayLog={selectedDayLog}
           isEditable={false}
           onTabChange={handleDayLogIdSelectClick}
diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
index d32eadfec..a5ef2bf45 100644
--- a/frontend/src/router/AppRouter.tsx
+++ b/frontend/src/router/AppRouter.tsx
@@ -91,7 +91,7 @@ const AppRouter = () => {
           ),
         },
         {
-          path: PATH.SHARE_TRIP(':code'),
+          path: PATH.SHARE_TRIP(':tripId'),
           element: (
             <Suspense fallback={<TripPageSkeleton />}>
               {isMobile ? <Lazy.TripMobilePage isShared /> : <Lazy.SharedTripPage />}
diff --git a/frontend/src/stories/common/DayLogItem.stories.tsx b/frontend/src/stories/common/DayLogItem.stories.tsx
index 114a82bd4..dc5ee68c6 100644
--- a/frontend/src/stories/common/DayLogItem.stories.tsx
+++ b/frontend/src/stories/common/DayLogItem.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
     tripId: { control: false },
   },
   args: {
-    tripId: 1,
+    tripId: '1',
     ...trip.dayLogs[0],
   },
 } satisfies Meta<typeof DayLogItem>;
diff --git a/frontend/src/stories/common/DayLogList.stories.tsx b/frontend/src/stories/common/DayLogList.stories.tsx
index fb8378ecd..f18826403 100644
--- a/frontend/src/stories/common/DayLogList.stories.tsx
+++ b/frontend/src/stories/common/DayLogList.stories.tsx
@@ -22,13 +22,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => {
-    useTripQuery(1);
+    useTripQuery('1');
     const { selected, handleSelectClick } = useSelect(trip.dayLogs[0].id);
     const selectedDayLog = trip.dayLogs.find((log) => log.id === selected)!;
 
     return (
       <DayLogList
-        tripId={1}
+        tripId="1"
         selectedDayLog={selectedDayLog}
         onTabChange={handleSelectClick}
         openAddModal={() => {}}
@@ -36,7 +36,7 @@ export const Default: Story = {
     );
   },
   args: {
-    tripId: 1,
+    tripId: '1',
     selectedDayLog: trip.dayLogs[0],
     onTabChange: () => {},
   },
diff --git a/frontend/src/stories/common/TripInformation.stories.tsx b/frontend/src/stories/common/TripInformation.stories.tsx
index e6666adb0..288dc53a0 100644
--- a/frontend/src/stories/common/TripInformation.stories.tsx
+++ b/frontend/src/stories/common/TripInformation.stories.tsx
@@ -7,10 +7,10 @@ import { useTripQuery } from '@hooks/api/useTripQuery';
 const meta = {
   title: 'common/TripInformation',
   component: TripInformation,
-  args: { tripId: 1 },
+  args: { tripId: '1' },
   decorators: [
     (Story) => {
-      useTripQuery(1);
+      useTripQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/common/TripItem.stories.tsx b/frontend/src/stories/common/TripItem.stories.tsx
index be7633c4e..980a7e6f8 100644
--- a/frontend/src/stories/common/TripItem.stories.tsx
+++ b/frontend/src/stories/common/TripItem.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
   title: 'common/TripItem',
   component: TripItem,
   args: {
-    tripId: 1,
+    tripId: '1',
     dayLogId: 1,
   },
 } satisfies Meta<typeof TripItem>;
diff --git a/frontend/src/stories/common/TripItemList.stories.tsx b/frontend/src/stories/common/TripItemList.stories.tsx
index 3b33aa7cb..d782d0ec6 100644
--- a/frontend/src/stories/common/TripItemList.stories.tsx
+++ b/frontend/src/stories/common/TripItemList.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     dayLogId: { control: false },
   },
   args: {
-    tripId: 1,
+    tripId: '1',
     dayLogId: 1,
     tripItems: [...trip.dayLogs[0].items],
   },
diff --git a/frontend/src/stories/expense/ExpenseCategories.stories.tsx b/frontend/src/stories/expense/ExpenseCategories.stories.tsx
index 900ed7ae7..72b871302 100644
--- a/frontend/src/stories/expense/ExpenseCategories.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseCategories.stories.tsx
@@ -8,11 +8,11 @@ const meta = {
   title: 'expense/ExpenseCategories',
   component: ExpenseCategories,
   args: {
-    tripId: 1,
+    tripId: '1',
   },
   decorators: [
     (Story) => {
-      useExpenseQuery(1);
+      useExpenseQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx b/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx
index 8e5d6da5c..55b1696a6 100644
--- a/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseCategoryInformation.stories.tsx
@@ -8,11 +8,11 @@ const meta = {
   title: 'expense/ExpenseCategoryInformation',
   component: ExpenseCategoryInformation,
   args: {
-    tripId: 1,
+    tripId: '1',
   },
   decorators: [
     (Story) => {
-      useExpenseQuery(1);
+      useExpenseQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/expense/ExpenseDates.stories.tsx b/frontend/src/stories/expense/ExpenseDates.stories.tsx
index 1087403de..bddace64c 100644
--- a/frontend/src/stories/expense/ExpenseDates.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseDates.stories.tsx
@@ -8,11 +8,11 @@ const meta = {
   title: 'expense/ExpenseDates',
   component: ExpenseDates,
   args: {
-    tripId: 1,
+    tripId: '1',
   },
   decorators: [
     (Story) => {
-      useExpenseQuery(1);
+      useExpenseQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/expense/ExpenseInformation.stories.tsx b/frontend/src/stories/expense/ExpenseInformation.stories.tsx
index d6a482387..582484389 100644
--- a/frontend/src/stories/expense/ExpenseInformation.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseInformation.stories.tsx
@@ -8,12 +8,12 @@ const meta = {
   title: 'expense/ExpenseInformation',
   component: ExpenseInformation,
   args: {
-    tripId: 1,
+    tripId: '1',
     isShared: false,
   },
   decorators: [
     (Story) => {
-      useExpenseQuery(1);
+      useExpenseQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/expense/ExpenseList.stories.tsx b/frontend/src/stories/expense/ExpenseList.stories.tsx
index 6b4ce537e..f4aed79ef 100644
--- a/frontend/src/stories/expense/ExpenseList.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseList.stories.tsx
@@ -18,5 +18,5 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 export const Empty: Story = {
-  render: () => <ExpenseList.Empty tripId={1} />,
+  render: () => <ExpenseList.Empty tripId="1" />,
 };
diff --git a/frontend/src/stories/expense/ExpenseListSection.stories.tsx b/frontend/src/stories/expense/ExpenseListSection.stories.tsx
index 6725882ea..7fb8e0717 100644
--- a/frontend/src/stories/expense/ExpenseListSection.stories.tsx
+++ b/frontend/src/stories/expense/ExpenseListSection.stories.tsx
@@ -9,7 +9,7 @@ const meta = {
     tripId: { control: false },
   },
   args: {
-    tripId: 1,
+    tripId: '1',
   },
 } satisfies Meta<typeof ExpenseListSection>;
 
diff --git a/frontend/src/stories/expense/TotalExpenseSection.stories.tsx b/frontend/src/stories/expense/TotalExpenseSection.stories.tsx
index 2a8e43323..ffca88a5c 100644
--- a/frontend/src/stories/expense/TotalExpenseSection.stories.tsx
+++ b/frontend/src/stories/expense/TotalExpenseSection.stories.tsx
@@ -11,12 +11,12 @@ const meta = {
     tripId: { control: false },
   },
   args: {
-    tripId: 1,
+    tripId: '1',
     isShared: false,
   },
   decorators: [
     (Story) => {
-      useExpenseQuery(1);
+      useExpenseQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/trip/DateInput.stories.tsx b/frontend/src/stories/trip/DateInput.stories.tsx
index a6746e73c..a279a7d77 100644
--- a/frontend/src/stories/trip/DateInput.stories.tsx
+++ b/frontend/src/stories/trip/DateInput.stories.tsx
@@ -13,12 +13,12 @@ const meta = {
   },
   args: {
     currentCategory: true,
-    tripId: 1,
+    tripId: '1',
     dayLogId: 1,
   },
   decorators: [
     (Story) => {
-      useTripQuery(1);
+      useTripQuery('1');
 
       return <Story />;
     },
diff --git a/frontend/src/stories/trip/TripItemAddModal.stories.tsx b/frontend/src/stories/trip/TripItemAddModal.stories.tsx
index 890f99727..f0737ac1c 100644
--- a/frontend/src/stories/trip/TripItemAddModal.stories.tsx
+++ b/frontend/src/stories/trip/TripItemAddModal.stories.tsx
@@ -11,13 +11,13 @@ const meta = {
   title: 'trip/TripItemAddModal',
   component: TripItemAddModal,
   args: {
-    tripId: 1,
+    tripId: '1',
     dayLogId: 1,
     onClose: () => {},
   },
   decorators: [
     (Story) => {
-      useTripQuery(1);
+      useTripQuery('1');
       useExpenseCategoryQuery();
 
       return <Story />;