Merge pull request #146 from kc3hack/RAIT-09/develop

動的ルーティングページ改善

Author: ABfry

frontend/src/app/(main)/post/[postId]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import { useSession } from 'next-auth/react';
-import { useParams } from 'next/navigation';
+import { useRouter, useParams } from 'next/navigation';
 import { PostTypes } from '@/types/postTypes';
 import Post from '@/components/Post';
 import fetchOnePost from './actions/fetchOnePost';
@@ -18,19 +18,22 @@ const PostPage = () => {
   const [post, setPost] = useState<PostTypes | null>(null);
   // セッションの取得
   const session = useSession();
+  const router = useRouter();
 
   // 投稿IDから投稿をFetchする
   useEffect(() => {
     const getPost = async () => {
+      if (!postId) return;
       if (session.status === 'loading') return;
       const data = await fetchOnePost({
         postId: postId as string,
         iconUrl: session.data?.user?.image ?? '',
       });
+      if (!data) router.push('/post-not-found');
       setPost(data);
     };
     getPost();
-  }, [postId, session.data?.user?.image, session.status]);
+  }, [postId, session.data?.user?.image, session.status, router]);
 
   return (
     <div>
@@ -44,7 +47,7 @@ const PostPage = () => {
             transition={{ duration: 0.5 }}
             className='mx-auto max-w-sm pt-5 lg:max-w-lg'
           >
-            {post && <Post post={post} />}
+            {post && <Post post={post} onDelete={() => router.push('/')} />}
           </motion.div>
         )}
       </AnimatePresence>

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

@@ -1,7 +1,7 @@
 'use client';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
-import { useParams } from 'next/navigation';
+import { useRouter, useParams } from 'next/navigation';
 import Timeline from '@/components/Timeline';
 import fetchProfile from './actions/fetchProfile';
 import { ProfileTypes } from '@/types/profileTypes';
@@ -15,15 +15,18 @@ import { ProfileTypes } from '@/types/profileTypes';
 const Profile = () => {
   const { userId } = useParams() as { userId: string };
   const [profile, setProfile] = useState<ProfileTypes | null>(null);
+  const router = useRouter();
 
   // ユーザIDからプロフィールをFetchする
   useEffect(() => {
     const getProfile = async () => {
+      if (!userId) return;
       const data = await fetchProfile({ userId: userId as string });
+      if (!data) router.push('/user-not-found');
       setProfile(data);
     };
     getProfile();
-  }, [userId]);
+  }, [userId, router]);
 
   // totalPost に応じた背景色のクラスを決定
   const getBackgroundClass = () => {