Merge pull request #287 from WeGo-Together/chiyoung-feat/profile-meta

[Feat] 프로필 페이지 동적 메타데이터 생성

Author: Chiman2937

src/api/core/index.ts

@@ -53,9 +53,10 @@ baseAPI.interceptors.response.use(
     if (status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
-        await API.authService.refresh();
+        await API.authService.refresh(originalRequest.skipAuthRedirect);
         return baseAPI(originalRequest);
       } catch (refreshError) {
+        if (!originalRequest.skipAuthRedirect) throw refreshError;
         if (isServer) {
           const { redirect } = await import('next/navigation');
           redirect('/login');
@@ -66,7 +67,6 @@ baseAPI.interceptors.response.use(
           const currentPath = window.location.pathname + window.location.search;
           window.location.href = `/login?error=unauthorized&path=${encodeURIComponent(currentPath)}`;
         }
-        throw refreshError;
       }
     }
     if (status === 404) {

src/api/service/auth-service/index.ts

@@ -27,11 +27,11 @@ export const authServiceRemote = () => ({
   },
 
   // 액세스 토큰 재발급
-  refresh: async () => {
+  refresh: async (redirect: boolean = true) => {
     const data = await api.post<RefreshResponse>(
       '/auth/refresh',
       {},
-      { _retry: true, withCredentials: true },
+      { _retry: true, withCredentials: true, skipAuthRedirect: redirect },
     );
 
     setAccessToken(data.accessToken, data.expiresIn);

src/api/service/user-service/index.ts

@@ -59,6 +59,11 @@ export const userServiceRemote = () => ({
     return apiV1.get<User>(`/users/me`);
   },
 
+  // 8-1. 본인 프로필 조회(redirect skip)
+  getMeSkipRedirect: async () => {
+    return apiV1.get<User>(`/users/me`, { skipAuthRedirect: false });
+  },
+
   // 9. 이메일 중복 검사
   getEmailAvailability: async (queryParams: GetEmailAvailabilityQueryParams) => {
     return apiV1.get<Availability>(`/users/email/availability`, {

src/app/(user)/profile/[userId]/layout.tsx

@@ -3,6 +3,7 @@ import { notFound, redirect } from 'next/navigation';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 
 import { API } from '@/api';
+import { generateProfileMetadata } from '@/lib/metadata/profile';
 import { getQueryClient } from '@/lib/query-client';
 import { userKeys } from '@/lib/query-key/query-key-user';
 
@@ -11,6 +12,12 @@ interface Props {
   params: Promise<{ userId: string }>;
 }
 
+export const generateMetadata = async ({ params }: Props) => {
+  const { userId: id } = await params;
+  const userId = Number(id);
+  return await generateProfileMetadata(userId);
+};
+
 const ProfileLayout = async ({ children, params }: Props) => {
   const { userId: id } = await params;
   const userId = Number(id);
@@ -20,13 +27,22 @@ const ProfileLayout = async ({ children, params }: Props) => {
 
   const queryClient = getQueryClient();
 
-  const user = await queryClient.fetchQuery({
-    queryKey: userKeys.item(userId),
-    queryFn: () => API.userService.getUser({ userId }),
-  });
-
-  // isFollow가 null이면 본인 페이지 이므로 mypage로 redirect 처리
-  if (user.isFollow === null) redirect('/mypage');
+  const [user, me] = await Promise.all([
+    queryClient.fetchQuery({
+      queryKey: userKeys.item(userId),
+      queryFn: () => API.userService.getUser({ userId }),
+    }),
+    queryClient
+      .fetchQuery({
+        queryKey: userKeys.me(),
+        queryFn: () => API.userService.getMeSkipRedirect(),
+      })
+      .catch(() => null),
+  ]);
+
+  if (!user) notFound();
+
+  if (me?.userId === user.userId) redirect('/mypage');
 
   return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>;
 };

src/app/(user)/profile/[userId]/page.test.tsx

@@ -9,6 +9,14 @@ import { mockUserItems } from '@/mock/service/user/user-mock';
 
 import ProfilePage from './page';
 
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(() => ({
+    replace: jest.fn(),
+    push: jest.fn(),
+    back: jest.fn(),
+  })),
+}));
+
 const createTestQueryClient = () =>
   new QueryClient({
     defaultOptions: {

src/app/(user)/profile/[userId]/page.tsx

@@ -1,19 +1,31 @@
 'use client';
 
-import { use } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { use, useEffect } from 'react';
 
 import { ProfileInfo } from '@/components/pages/user/profile';
 import { useGetUser } from '@/hooks/use-user';
+import { useUserGetMeSkipRedirect } from '@/hooks/use-user/use-user-get-me';
 
 interface Props {
   params: Promise<{ userId: string }>;
 }
 
 const ProfilePage = ({ params }: Props) => {
+  const router = useRouter();
+
   const { userId: id } = use(params);
   const userId = Number(id);
 
   const { data: user } = useGetUser({ userId });
+  const { data: me } = useUserGetMeSkipRedirect();
+
+  useEffect(() => {
+    if (user?.userId === me?.userId) {
+      router.replace('/mypage');
+    }
+  }, [me?.userId, router, user?.userId]);
 
   if (!user) return null;
 

src/hooks/use-user/use-user-get-me/index.ts

@@ -16,3 +16,17 @@ export const useUserGetMe = () => {
   });
   return query;
 };
+
+export const useUserGetMeSkipRedirect = () => {
+  const query = useQuery({
+    queryKey: userKeys.me(),
+    queryFn: () => API.userService.getMeSkipRedirect(),
+    select: (data) => ({
+      ...data,
+      profileImage: data.profileImage ?? '',
+      profileMessage: data.profileMessage ?? '',
+      mbti: data.mbti ?? '',
+    }),
+  });
+  return query;
+};

src/lib/metadata/profile.ts

@@ -0,0 +1,71 @@
+import { Metadata } from 'next';
+import { headers } from 'next/headers';
+
+import { API } from '@/api';
+
+export const generateProfileMetadata = async (userId: number): Promise<Metadata> => {
+  const headersList = headers();
+  const host = (await headersList).get('host') || process.env.DOMAIN;
+  const currentUrl = `https://${host}/profile/${userId}`;
+
+  try {
+    const userProfile = await API.userService.getUser({ userId });
+
+    const { nickName, followersCnt, profileImage, profileMessage } = userProfile;
+
+    const metaTitle = `${nickName}님의 프로필 | WeGo`;
+    const metaDescription = `${nickName}님의 프로필 | 팔로워 ${followersCnt}명\n\n${profileMessage}`;
+
+    return {
+      title: metaTitle,
+      description: metaDescription,
+      keywords: [nickName, '프로필', 'WeGo'],
+      openGraph: {
+        title: metaTitle,
+        description: metaDescription,
+        siteName: 'WeGo',
+        locale: 'ko_KR',
+        type: 'profile',
+        url: currentUrl,
+        images: profileImage
+          ? [
+              {
+                url: profileImage,
+                width: 400,
+                height: 400,
+                alt: `${nickName}님의 프로필 사진`,
+              },
+            ]
+          : [],
+      },
+      twitter: {
+        card: 'summary',
+        title: metaTitle,
+        description: metaDescription,
+        images: profileImage ? [profileImage] : undefined,
+      },
+      robots: {
+        index: true,
+        follow: true,
+      },
+      alternates: {
+        canonical: currentUrl,
+      },
+    };
+  } catch (error) {
+    console.error('Failed to fetch user profile for metadata:', error);
+    return {
+      title: `사용자 프로필 | WeGo`,
+      description: '사용자의 프로필과 리뷰를 확인해보세요.',
+      openGraph: {
+        title: '사용자 프로필 | WeGo',
+        description: '사용자의 프로필과 리뷰를 확인해보세요.',
+        url: currentUrl,
+        type: 'profile',
+      },
+      twitter: {
+        card: 'summary',
+      },
+    };
+  }
+};