인증인가 코드 리팩토링

frontend/cypress/e2e/trip.cy.ts

@@ -248,7 +248,7 @@ describe('여행 아이템 추가', () => {
     cy.get('select[aria-label="비용 카테고리"]').select('문화').should('have.value', '200');
 
     cy.get('select[aria-label="통화"')
-      .select('€    (EUR)')
+      .select('€     (EUR)')
       .should('have.value', 'EUR');
 
     cy.get('input[aria-label="비용"]').type('400').should('have.value', '400');
@@ -312,7 +312,7 @@ describe('여행 아이템 추가', () => {
     cy.get('#title').type('샹젤리제 거리 -> 에펠탑 지하철');
     cy.get('.star-box > div').eq(6).click();
     cy.get('select[aria-label="비용 카테고리"]').select('문화');
-    cy.get('select[aria-label="통화"').select('€    (EUR)');
+    cy.get('select[aria-label="통화"').select('€     (EUR)');
     cy.get('input[aria-label="비용"]').type('400');
     cy.findByPlaceholderText('메모를 입력해 주세요').type('즐거운 여행');
     cy.get('input[type=file]')

frontend/package.json

@@ -41,7 +41,7 @@
     "@tanstack/react-query": "^4.29.19",
     "axios": "^1.4.0",
     "dotenv": "^16.3.1",
-    "hang-log-design-system": "^1.2.19",
+    "hang-log-design-system": "^1.2.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",

frontend/src/App.tsx

@@ -1,10 +1,8 @@
-import { useLayoutEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { useSetRecoilState } from 'recoil';
-
 import Error from '@components/common/Error/Error';
 import ErrorBoundary from '@components/common/ErrorBoundary/ErrorBoundary';
+import LogIn from '@components/common/LogIn/LogIn';
 import ScrollTop from '@components/common/ScrollTop/ScrollTop';
 import ToastContainer from '@components/common/ToastContainer/ToastContainer';
 import Footer from '@components/layout/Footer/Footer';
@@ -13,30 +11,20 @@ import Header from '@components/layout/Header/Header';
 import { useMediaQuery } from '@hooks/common/useMediaQuery';
 import { useResetError } from '@hooks/common/useResetError';
 
-import { isLoggedInState } from '@store/auth';
-
-import { ACCESS_TOKEN_KEY } from '@constants/api';
-
 const App = () => {
   const { handleErrorReset } = useResetError();
   useMediaQuery();
 
-  const setIsLoggedIn = useSetRecoilState(isLoggedInState);
-
-  useLayoutEffect(() => {
-    if (localStorage.getItem(ACCESS_TOKEN_KEY)) {
-      setIsLoggedIn(true);
-    }
-  }, [setIsLoggedIn]);
-
   return (
     <ErrorBoundary Fallback={Error} onReset={handleErrorReset}>
       <ScrollTop />
-      <Header />
-      <main>
-        <Outlet />
-      </main>
-      <Footer />
+      <LogIn>
+        <Header />
+        <main>
+          <Outlet />
+        </main>
+        <Footer />
+      </LogIn>
       <ToastContainer />
     </ErrorBoundary>
   );

frontend/src/api/interceptors.ts

@@ -14,7 +14,7 @@ export interface ErrorResponseData {
 }
 
 export const checkAndSetToken = (config: InternalAxiosRequestConfig) => {
-  if (!config.headers || config.headers.Authorization || !config.useAuth) return config;
+  if (!config.useAuth || !config.headers || config.headers.Authorization) return config;
 
   const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
 
@@ -34,11 +34,9 @@ export const handleTokenError = async (error: AxiosError<ErrorResponseData>) =>
 
   if (!error.response || !originalRequest) throw new Error('에러가 발생했습니다.');
 
-  // ! 토큰 에러 처리!
-  if (
-    error.response.status === HTTP_STATUS_CODE.BAD_REQUEST &&
-    error.response.data.code === ERROR_CODE.EXPIRED_ACCESS_TOKEN
-  ) {
+  const { data, status } = error.response;
+
+  if (status === HTTP_STATUS_CODE.BAD_REQUEST && data.code === ERROR_CODE.EXPIRED_ACCESS_TOKEN) {
     const { accessToken } = await postNewToken();
     originalRequest.headers.Authorization = `Bearer ${accessToken}`;
     localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
@@ -47,16 +45,12 @@ export const handleTokenError = async (error: AxiosError<ErrorResponseData>) =>
   }
 
   if (
-    error.response.status === HTTP_STATUS_CODE.BAD_REQUEST &&
-    (error.response.data.code === ERROR_CODE.INVALID_ACCESS_TOKEN ||
-      error.response.data.code === ERROR_CODE.INVALID_REFRESH_TOKEN ||
-      error.response.data.code === ERROR_CODE.EXPIRED_REFRESH_TOKEN)
+    status === HTTP_STATUS_CODE.BAD_REQUEST &&
+    (data.code === ERROR_CODE.INVALID_ACCESS_TOKEN ||
+      data.code === ERROR_CODE.INVALID_REFRESH_TOKEN ||
+      data.code === ERROR_CODE.EXPIRED_REFRESH_TOKEN)
   ) {
-    throw new HTTPError(
-      error.response.status,
-      error.response.data.message,
-      error.response.data.code
-    );
+    throw new HTTPError(status, data.message, data.code);
   }
 
   throw error;

frontend/src/api/member/putUserInfo.ts

@@ -5,5 +5,5 @@ import type { UserData } from '@type/member';
 import { END_POINTS } from '@constants/api';
 
 export const putUserInfo = (data: UserData) => {
-  return axiosInstance.put<UserData>(END_POINTS.MY_PAGE, { ...data });
+  return axiosInstance.put<UserData>(END_POINTS.MY_PAGE, data);
 };

frontend/src/components/common/LogIn/LogIn.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { useLayoutEffect } from 'react';
+
+import { useSetRecoilState } from 'recoil';
+
+import { isLoggedInState } from '@store/auth';
+
+import { ACCESS_TOKEN_KEY } from '@constants/api';
+
+interface LogInProps {
+  children: ReactNode;
+}
+
+const LogIn = ({ children }: LogInProps) => {
+  const setIsLoggedIn = useSetRecoilState(isLoggedInState);
+
+  useLayoutEffect(() => {
+    if (localStorage.getItem(ACCESS_TOKEN_KEY)) {
+      setIsLoggedIn(true);
+    }
+  }, [setIsLoggedIn]);
+
+  return children;
+};
+
+export default LogIn;

frontend/src/components/myPage/EditUserProfileForm/EditUserProfileForm.tsx

@@ -27,7 +27,7 @@ const EditUserProfileForm = ({ initialData }: EditUserProfileForm) => {
     <form css={formStyling} onSubmit={handleSubmit} noValidate>
       <ProfileImageInput
         css={imageInputStyling}
-        initialImageUrl={userInfo.imageUrl}
+        initialImageUrl={initialData.imageUrl}
         updateInputValue={updateInputValue}
       />
       <NicknameInput

frontend/src/components/myPage/EditUserProfileForm/NicknameInput/NicknameInput.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, useCallback } from 'react';
+import { type ChangeEvent, memo, useCallback } from 'react';
 
 import { Input } from 'hang-log-design-system';
 
@@ -41,4 +41,4 @@ const NicknameInput = ({ value, isError, updateInputValue, disableError }: Nickn
   );
 };
 
-export default NicknameInput;
+export default memo(NicknameInput);

frontend/src/components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.tsx

@@ -10,7 +10,7 @@ import {
   wrapperStyling,
 } from '@components/myPage/EditUserProfileForm/ProfileImageInput/ProfileImageInput.style';
 
-import { useImageUpload } from '@hooks/common/useImageUpload';
+import { useSingleImageUpload } from '@hooks/common/useSingleImageUpload';
 
 import type { UserData } from '@type/member';
 
@@ -31,14 +31,14 @@ const ProfileImageInput = ({
   };
 
   const handleImageUrlsChange = useCallback(
-    (imageUrls: string[]) => {
-      updateInputValue('imageUrl', imageUrls[0]);
+    (imageUrl: string) => {
+      updateInputValue('imageUrl', imageUrl);
     },
     [updateInputValue]
   );
 
-  const { uploadedImageUrls, handleImageUpload } = useImageUpload({
-    initialImageUrls: [initialImageUrl],
+  const { uploadedImageUrl, handleImageUpload } = useSingleImageUpload({
+    initialImageUrl,
     onSuccess: handleImageUrlsChange,
   });
 
@@ -61,7 +61,7 @@ const ProfileImageInput = ({
         ref={inputRef}
         onChange={handleImageUpload}
       />
-      <img css={imageStyling} src={uploadedImageUrls[0]} alt="사용자 프로필 이미지" />
+      <img css={imageStyling} src={uploadedImageUrl!} alt="사용자 프로필 이미지" />
     </Box>
   );
 };

frontend/src/components/trip/TripInfoEditModal/ImageInput/ImageInput.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { ImageUploadInput } from 'hang-log-design-system';
 
-import { useImageUpload } from '@hooks/common/useImageUpload';
+import { useMultipleImageUpload } from '@hooks/common/useMultipleImageUpload';
 
 interface ImageInputProps {
   initialImage: string | null;
@@ -21,7 +21,7 @@ const ImageInput = ({ initialImage, updateCoverImage }: ImageInputProps) => {
     uploadedImageUrls: uploadedImageUrl,
     handleImageUpload,
     handleImageRemoval,
-  } = useImageUpload({
+  } = useMultipleImageUpload({
     initialImageUrls: initialImage === null ? [] : [initialImage],
     onSuccess: handleImageUrlsChange,
   });

frontend/src/components/trip/TripItemAddModal/ExpenseInput/ExpenseInput.tsx

@@ -50,7 +50,7 @@ const ExpenseInput = ({ initialExpenseValue, updateInputValue }: ExpenseInputPro
         >
           {Object.entries(CURRENCY_ICON).map(([key, value]) => (
             <option key={key} value={key}>
-              {value}&nbsp;&nbsp;&nbsp;&nbsp;({key})
+              {value}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;({key})
             </option>
           ))}
         </Select>

frontend/src/components/trip/TripItemAddModal/ImageInput/ImageInput.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { ImageUploadInput } from 'hang-log-design-system';
 
-import { useImageUpload } from '@hooks/common/useImageUpload';
+import { useMultipleImageUpload } from '@hooks/common/useMultipleImageUpload';
 import { useToast } from '@hooks/common/useToast';
 
 import type { TripItemFormData } from '@type/tripItem';
@@ -28,7 +28,7 @@ const ImageInput = ({ initialImageUrls, updateInputValue }: ImageInputProps) =>
     createToast('이미지는 최대 5개 업로드할 수 있습니다.');
   };
 
-  const { uploadedImageUrls, handleImageUpload, handleImageRemoval } = useImageUpload({
+  const { uploadedImageUrls, handleImageUpload, handleImageRemoval } = useMultipleImageUpload({
     initialImageUrls,
     onSuccess: handleImageUrlsChange,
     onError: handleImageUploadError,