[Refactor] 타인 프로필 페이지 SSR 적용 및 이미지 최적화

.github/workflows/storybook.yml

@@ -24,9 +24,10 @@ jobs:
 
       - name: Corepack 활성화
         run: corepack enable
-
+  
       - name: pnpm 설치
         run: corepack prepare pnpm@latest --activate
+
 
       - name: 캐시 종속성
         id: cache

next.config.ts

@@ -20,6 +20,7 @@ const nextConfig: NextConfig = {
         hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com',
       },
     ],
+    formats: ['image/avif', 'image/webp'], // AVIF 우선 적용
   },
 };
 

src/apis/UserProfile/getUserProfile.ts

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+export const getUserProfile = async (userId: number, token: string) => {
+  try {
+    const response = await axios.get(
+      apiUrl + API_ENDPOINTS.AUTH.USER_PROFILE(userId),
+      {
+        headers: {
+          token: token,
+          'Content-Type': 'application/json',
+          Accept: '*/*',
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error('❌ API 요청 실패:', error);
+    throw new Error('사용자 프로필을 가져오는 중 문제가 발생했습니다.');
+  }
+};

src/app/(route)/userProfile/[userId]/page.tsx

@@ -1,6 +1,14 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query';
+import { cookies } from 'next/headers';
 import { PageContainer } from '@/components/common/PageContainer';
 import { UserProfileContent } from '@/components/UserProfile/UserProfileContent';
 import { UserProfileHeader } from '@/components/UserProfile/UserProfileHeader';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { getUserProfile } from '@/apis/UserProfile/getUserProfile';
 
 interface UserProfileProps {
   userId: string;
@@ -13,10 +21,22 @@ export default async function userProfile({
 }) {
   const { userId } = await params;
 
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value || '';
+
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: [QUERY_KEYS.USER_PROFILE, Number(userId)],
+    queryFn: () => getUserProfile(Number(userId), token),
+  });
+
   return (
     <PageContainer>
-      <UserProfileHeader userId={userId} />
-      <UserProfileContent userId={userId} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <UserProfileHeader userId={userId} />
+        <UserProfileContent userId={userId} />
+      </HydrationBoundary>
     </PageContainer>
   );
 }

src/components/UserProfile/UserProfileContent/index.tsx

@@ -3,48 +3,43 @@
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useUserProfileQuery } from '@/hooks/apis/Auth/useUserProfileQuery';
-import { Spinner } from '@/components/common/Spinner';
 
 interface UserProfileContent {
   userId: string;
 }
 
 export const UserProfileContent = ({ userId }: UserProfileContent) => {
-  const { completeResponses, isLoading } = useUserProfileQuery(Number(userId));
+  const { completeResponses } = useUserProfileQuery(Number(userId));
 
   const router = useRouter();
 
   const handleClick = (completeId: number) => {
     router.push(`/completes/${completeId}`);
   };
 
-  if (isLoading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <Spinner className="size-28" />
-      </div>
-    );
-  }
-
   return (
     <div className="mt-8 grid grid-cols-3 gap-8">
       {completeResponses.map((complete) =>
         complete.completePic ? (
-          <Image
+          <div
             key={complete.completeId}
-            sizes="100vw"
-            width={48}
-            height={48}
-            className="flex h-109 w-full rounded-4"
-            priority
-            src={complete.completePic}
-            alt="인증한 이미지"
+            className="relative aspect-square w-full overflow-hidden rounded-4"
             onClick={() => handleClick(complete.completeId)}
-          />
+          >
+            <Image
+              priority
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              style={{ objectFit: 'cover' }}
+              className="rounded-4"
+              src={complete.completePic}
+              alt="인증한 이미지"
+            />
+          </div>
         ) : (
           <div
             key={complete.completeId}
-            className="flex h-109 w-full rounded-4 bg-gray-200"
+            className="flex aspect-square w-full rounded-4 bg-gray-200"
           />
         ),
       )}

src/components/UserProfile/UserProfileHeader/index.tsx

@@ -40,7 +40,7 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
             <Image
               width={48}
               height={48}
-              sizes="100vw"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               className="flex size-64 rounded-full"
               priority
               src={profilePic}