fix: tripId 타입변경 (#629)

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);
     }

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;

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[];
 }

frontend/src/api/dayLog/patchDayLogTitle.ts

@@ -7,7 +7,7 @@ export interface PatchDayLogTitleRequestBody {
 }
 
 interface PatchDayLogTitleParams extends PatchDayLogTitleRequestBody {
-  tripId: number;
+  tripId: string;
   dayLogId: number;
 }
 

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;

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);
 };

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) => {

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;

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 {

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) => {

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;
 }
 

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) => {

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;
 }
 

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;

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;
 }

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;

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>

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;
 }

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;
 }
 

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>

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'];
 }
 

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;

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;

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;

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) => {

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) => {

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) => {

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;
 }
 

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();
 

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) => {

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>

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;
 }

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;

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 = {