Feat/markup/landing-page/DEVING-78

src/app/(user-page)/mypage/_features/ProfileImage.tsx

@@ -5,11 +5,16 @@
 import Modal from '@/components/ui/modal/Modal';
 import { useUpdateProfileImageMutation } from '@/hooks/mutations/useMyPageMutation';
 import { useProfileQuery } from '@/hooks/queries/useMyPageQueries';
+import { QUERY_KEYS } from '@/hooks/queries/useMyPageQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import { Pencil } from 'lucide-react';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 
-import { MAX_FILE_SIZE } from '../../../../constants/mypage/mypageConstant';
+import {
+  DEFAULT_PROFILE_IMAGE,
+  MAX_FILE_SIZE,
+} from '../../../../constants/mypage/mypageConstant';
 import SkeletonProfileImage from './skeletons/SkeletonProfileImage';
 
 const ProfileImage = () => {
@@ -19,6 +24,7 @@
   const [fileSizeError, setFileSizeError] = useState<string | null>(null);
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
 
   // 프로필 데이터 조회
   const { data: profileData, isLoading: isProfileLoading } = useProfileQuery();
@@ -29,6 +35,7 @@
 
   // 프로필 이미지 URL
   const profileImageUrl = profileData?.data?.profilePic || null;
+  const isDefaultImage = profileImageUrl?.includes('default-profile.png');
 
   // 반응형 화면 크기 감지
   useEffect(() => {
@@ -85,10 +92,41 @@
         resetImageState();
         // 모달 닫기
         setIsModalOpen(false);
+        // 배너 쿼리 무효화 (중요! - 헤더의 프로필 이미지도 업데이트되도록)
+        queryClient.invalidateQueries({ queryKey: QUERY_KEYS.banner() });
       },
     });
   };
 
+  // 기본 이미지로 변경하는 핸들러
+  const handleResetToDefault = async () => {
+    try {
+      // 기본 이미지 URL을 Blob으로 변환
+      const response = await fetch(DEFAULT_PROFILE_IMAGE);
+      const blob = await response.blob();
+
+      // 이전 미리보기 URL 해제
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+
+      // 새 미리보기 URL 생성
+      const objectUrl = URL.createObjectURL(blob);
+      setPreviewUrl(objectUrl);
+
+      // 선택된 파일 설정 (이것이 handleConfirm에서 사용됨)
+      const defaultImageFile = new File([blob], 'default-profile.png', {
+        type: blob.type,
+      });
+      setSelectedFile(defaultImageFile);
+
+      // 파일 크기 에러 초기화
+      setFileSizeError(null);
+
+      // 여기서 updateImage 호출 제거 - 변경 버튼 클릭할 때만 적용되도록
+    } catch (error) {
+      console.error('기본 이미지 변경 중 오류 발생:', error);
+    }
+  };
+
   // 상태 초기화 함수 (중복 코드 제거)
   const resetImageState = () => {
     setSelectedFile(null);
@@ -201,7 +239,25 @@
         disableConfirm={!!fileSizeError || !selectedFile}
       >
         <div className="flex flex-col items-center justify-center gap-[16px]">
-          <div className="typo-head3 text-Cgray700">프로필 이미지</div>
+          <div className="flex w-full justify-between">
+            <div className="typo-head3 text-Cgray700">프로필 이미지</div>
+            <button
+              className={`text-[12px] ${
+                isDefaultImage && !previewUrl
+                  ? 'cursor-not-allowed text-Cgray400 opacity-50'
+                  : 'cursor-pointer text-Cgray500 underline hover:text-Cgray700'
+              }`}
+              onClick={
+                isDefaultImage && !previewUrl ? undefined : handleResetToDefault
+              }
+              disabled={isDefaultImage && !previewUrl}
+              aria-disabled={isDefaultImage && !previewUrl}
+            >
+              {isDefaultImage && !previewUrl
+                ? '기본 이미지 적용됨'
+                : '기본 이미지로 변경'}
+            </button>
+          </div>
           <div className="flex justify-center">
             <button
               type="button"

src/components/common/Header.tsx

@@ -3,6 +3,7 @@
 import Logo from '@/assets/icon/logo.svg';
 import { useLogoutMutation } from '@/hooks/mutations/useUserMutation';
 import { QUERY_KEYS } from '@/hooks/queries/useMyPageQueries';
+import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
 import { translateCategoryNameToKor } from '@/util/searchFilter';
 import { useQueryClient } from '@tanstack/react-query';
 import { MEETING_TYPES } from 'constants/category/category';
@@ -189,17 +190,26 @@ const NavLinks = ({ isMobile }: { isMobile?: boolean }) => {
   );
 };
 
-const Header = ({ userInfo }: { userInfo: IBanner }) => {
+const Header = ({ userInfo: initialUserInfo }: { userInfo?: IBanner }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const userId = undefined;
+
+  // useBannerQueries 훅을 사용하여 배너 정보를 가져옵니다.
+  const { data: queryUserInfo, isLoading } = useBannerQueries({
+    initialData: initialUserInfo || undefined, // 초기 데이터로 서버에서 받아온 값 사용
+  });
+
+  // 서버에서 받은 정보와 쿼리로 받은 정보를 병합
+  const userInfo = queryUserInfo || initialUserInfo;
   const isLogIn = !!userInfo;
 
   const queryClient = useQueryClient();
+
+  // 배너 정보가 변경될 때마다 쿼리 캐시 업데이트
   useEffect(() => {
     if (userInfo) {
       queryClient.setQueryData(QUERY_KEYS.banner(), userInfo);
     }
-  }, [userInfo]);
+  }, [userInfo, queryClient]);
 
   return (
     <div>
@@ -244,4 +254,5 @@ const Header = ({ userInfo }: { userInfo: IBanner }) => {
     </div>
   );
 };
+
 export default Header;

src/constants/mypage/mypageConstant.tsx

@@ -2,6 +2,10 @@ import { Code, Compass, Mars, Paintbrush, Venus, X } from 'lucide-react';
 
 import { IIconProps } from '../../types/mypageTypes';
 
+//기본 이미지 url
+export const DEFAULT_PROFILE_IMAGE =
+  'https://deving-bucket.s3.ap-northeast-2.amazonaws.com/cat_profile.png';
+
 // 탭 타입 상수
 export const TAB_TYPES = {
   BASIC: 'basic',

src/hooks/mutations/useMyPageMutation.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import {
+  getBanner,
   updateContactInfo,
   updatePassword,
   updateProfile,
@@ -23,12 +24,17 @@ export const useUpdateProfileMutation = () => {
     onMutate: async (newProfileData) => {
       // 진행 중인 쿼리 취소
       await queryClient.cancelQueries({ queryKey: QUERY_KEYS.profile() });
+      // banner 쿼리도 취소 (추가)
+      await queryClient.cancelQueries({ queryKey: QUERY_KEYS.banner() });
 
       // 현재 캐시 저장
       const previousData = queryClient.getQueryData<IProfileResponse>(
         QUERY_KEYS.profile(),
       );
 
+      // 배너 데이터도 저장
+      const previousBannerData = queryClient.getQueryData(QUERY_KEYS.banner());
+
       if (previousData) {
         // 캐시 업데이트
         queryClient.setQueryData<IProfileResponse>(QUERY_KEYS.profile(), {
@@ -43,9 +49,17 @@ export const useUpdateProfileMutation = () => {
             location: newProfileData.location,
           },
         });
+
+        // 배너 데이터도 업데이트 (이름만 변경)
+        if (previousBannerData) {
+          queryClient.setQueryData(QUERY_KEYS.banner(), {
+            ...previousBannerData,
+            name: newProfileData.name,
+          });
+        }
       }
 
-      return { previousData };
+      return { previousData, previousBannerData };
     },
 
     onError: (error, _, context) => {
@@ -56,14 +70,32 @@ export const useUpdateProfileMutation = () => {
       if (context?.previousData) {
         queryClient.setQueryData(QUERY_KEYS.profile(), context.previousData);
       }
+      if (context?.previousBannerData) {
+        queryClient.setQueryData(
+          QUERY_KEYS.banner(),
+          context.previousBannerData,
+        );
+      }
     },
 
-    onSuccess: () => {
+    onSuccess: async () => {
       showToast('기본 정보가 성공적으로 업데이트되었습니다.', 'success');
+
+      // 성공 후 최신 배너 데이터 가져오기
+      try {
+        const bannerData = await getBanner();
+        if (bannerData) {
+          queryClient.setQueryData(QUERY_KEYS.banner(), bannerData);
+        }
+      } catch (error) {
+        console.error('배너 데이터 가져오기 실패:', error);
+      }
     },
 
     onSettled: () => {
+      // 쿼리 무효화
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.profile() });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.banner() });
     },
   });
 };
@@ -134,53 +166,82 @@ export const useUpdateProfileImageMutation = () => {
 
     onMutate: async (file) => {
       await queryClient.cancelQueries({ queryKey: QUERY_KEYS.profile() });
+      await queryClient.cancelQueries({ queryKey: QUERY_KEYS.banner() });
 
       const previousData = queryClient.getQueryData<IProfileResponse>(
         QUERY_KEYS.profile(),
       );
 
-      // 파일을 임시 URL로 변환 (브라우저 메모리에 저장)
+      // 배너 데이터 가져오기
+      const previousBannerData = queryClient.getQueryData(QUERY_KEYS.banner());
+
+      // 파일을 임시 URL로 변환
       const tempUrl = URL.createObjectURL(file);
 
       if (previousData) {
         queryClient.setQueryData<IProfileResponse>(QUERY_KEYS.profile(), {
           ...previousData,
           data: {
             ...previousData.data,
-            profilePic: tempUrl, // 임시 URL로 이미지 경로 업데이트
+            profilePic: tempUrl,
           },
         });
       }
 
-      return { previousData, tempUrl };
+      // 배너 데이터에도 프로필 이미지 업데이트
+      if (previousBannerData) {
+        queryClient.setQueryData(QUERY_KEYS.banner(), {
+          ...previousBannerData,
+          profilePic: tempUrl,
+        });
+      }
+
+      return { previousData, previousBannerData, tempUrl };
     },
 
     onError: (error, _, context) => {
       showToast('프로필 이미지 업로드에 실패했습니다.', 'error');
 
-      // 이전 데이터로 롤백
+      // 롤백
       if (context?.previousData) {
         queryClient.setQueryData(QUERY_KEYS.profile(), context.previousData);
       }
+      if (context?.previousBannerData) {
+        queryClient.setQueryData(
+          QUERY_KEYS.banner(),
+          context.previousBannerData,
+        );
+      }
 
-      // 임시 URL 해제 (메모리 누수 방지)
+      // 임시 URL 해제
       if (context?.tempUrl) {
         URL.revokeObjectURL(context.tempUrl);
       }
     },
 
-    onSuccess: (_, __, context) => {
+    onSuccess: async (response, _, context) => {
       showToast('프로필 이미지가 성공적으로 업데이트되었습니다.', 'success');
 
-      // 성공 시에도 임시 URL 해제 필요
+      // 임시 URL 해제
       if (context?.tempUrl) {
         URL.revokeObjectURL(context.tempUrl);
       }
+
+      // 성공 후 최신 배너 데이터 가져오기
+      try {
+        const bannerData = await getBanner();
+        if (bannerData) {
+          queryClient.setQueryData(QUERY_KEYS.banner(), bannerData);
+        }
+      } catch (error) {
+        console.error('배너 데이터 가져오기 실패:', error);
+      }
     },
 
     onSettled: () => {
-      // 서버에서 최신 이미지 URL 가져오기
+      // 모든 관련 쿼리 무효화
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.profile() });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.banner() });
     },
   });
 };

src/hooks/mutations/useUserMutation.ts

@@ -19,6 +19,9 @@ import {
 } from 'service/api/user';
 import { ISignupFormData } from 'types/auth';
 
+import { getBanner } from '../../service/api/mypageProfile';
+import { QUERY_KEYS } from '../queries/useMyPageQueries';
+
 const useLoginMutation = ({
   onSuccessCallback,
 }: {
@@ -37,7 +40,19 @@ const useLoginMutation = ({
       // refreshToken 저장
       await setRefreshToken(res.refreshToken);
 
+      // 로그인 성공 후 즉시 배너 데이터 가져와서 캐시에 저장
+      try {
+        const bannerData = await getBanner();
+        if (bannerData) {
+          queryClient.setQueryData(QUERY_KEYS.banner(), bannerData);
+          console.log('로그인 후 배너 데이터 설정:', bannerData);
+        }
+      } catch (error) {
+        console.error('로그인 후 배너 데이터 가져오기 실패:', error);
+      }
+
       showToast('로그인 성공', 'success');
+
       // 메인페이지로 리다이렉트
       onSuccessCallback();
     },
@@ -130,6 +145,9 @@ const useLogoutMutation = () => {
       await removeAccessToken();
       await removeRefreshToken();
 
+      // banner 쿼리 데이터 초기화
+      queryClient.setQueryData(QUERY_KEYS.banner(), null);
+
       // 모든 캐시 지우기
       queryClient.invalidateQueries();