タイムラインへの認証の統合

frontend/src/app/timeline/page.tsx

@@ -9,6 +9,9 @@ import FloatingActionButton from '@/components/FloatingActionButton';
 import { MdOutlineMenu } from 'react-icons/md';
 import SideMenu from '@/components/SideMenu';
 import Image from 'next/image';
+import { useSession } from 'next-auth/react';
+import LoginDialog from '@/components/LoginDialog';
+import { useRouter } from 'next/navigation';
 
 const LIMIT = 10;
 
@@ -21,10 +24,15 @@ const Timeline = () => {
   const [isLoading, setIsLoading] = useState(false);
   // これ以上取得できる投稿があるかのフラグ
   const [hasMore, setHasMore] = useState(true);
-  // ログインしているユーザを保持するState
-  const [user] = useState({ name: 'Name', bio: 'bio', iconUrl: '/iconDefault.png' });
   // ハンバーガーメニューの開閉状態
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  // セッションの取得
+  const session = useSession();
+  // ログイン状態
+  const isLoggedIn = session.status === 'authenticated';
+  // ログイン促進ダイアログの開閉状態
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  const router = useRouter();
 
   //IntersectionObserverを保持するためのref
   const observer = useRef<IntersectionObserver | null>(null);
@@ -104,11 +112,7 @@ const Timeline = () => {
       {/* タイムライン */}
       <div className='pt-12'>
         <div className='relative mx-auto max-w-lg'>
-          <SideMenu
-            user={user}
-            className='absolute top-5 hidden lg:block'
-            style={{ left: '-12rem' }}
-          />
+          <SideMenu className='absolute top-5 hidden lg:block' style={{ left: '-12rem' }} />
           <PostList posts={posts} className='mx-auto max-w-sm lg:max-w-lg' />
           {isLoading && <p className='py-3 text-center'>投稿を取得中...</p>}
           <div ref={targetRef} className='h-px' />
@@ -117,17 +121,28 @@ const Timeline = () => {
       </div>
 
       {/* 投稿（詠）ボタン */}
-      <FloatingActionButton />
+      <FloatingActionButton
+        onClick={() => {
+          if (isLoggedIn) {
+            router.push('/yomu');
+          } else {
+            setLoginDialogOpen(true);
+          }
+        }}
+      />
 
       {/* ハンバーガーメニュー */}
       {isMenuOpen && (
         <div className='fixed inset-0 z-50 justify-center lg:hidden'>
           <div className='flex h-fit w-full bg-white py-4'>
-            <SideMenu user={user} className='mx-auto' />
+            <SideMenu className='mx-auto' />
           </div>
           <div onClick={() => setIsMenuOpen(false)} className='size-full bg-black/50'></div>
         </div>
       )}
+
+      {/* ログイン確認ダイアログ表示が有効の場合，ダイアログを表示する */}
+      {loginDialogOpen && <LoginDialog isOpen={loginDialogOpen} setIsOpen={setLoginDialogOpen} />}
     </div>
   );
 };

frontend/src/components/DropDownButton.tsx

@@ -28,6 +28,7 @@ interface DropDownButtonProps {
 const DropDownButton = ({ className, items }: DropDownButtonProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const hasItem = items.length > 0;
 
   useEffect(() => {
     if (!isOpen) return;
@@ -46,7 +47,10 @@ const DropDownButton = ({ className, items }: DropDownButtonProps) => {
   };
 
   return (
-    <div className={`${className} relative inline-block`} ref={containerRef}>
+    <div
+      className={`${className} relative inline-block ${hasItem ? '' : 'hidden'}`}
+      ref={containerRef}
+    >
       <button
         className='mx-auto flex size-7 items-center justify-center rounded-full bg-transparent hover:bg-black/5'
         onClick={() => toggleDropDown()}

frontend/src/components/LoginDialog.tsx

@@ -0,0 +1,37 @@
+// クライアントコンポーネント
+'use client';
+
+import { signIn } from 'next-auth/react';
+import Dialog from './Dialog';
+
+// props の型定義
+interface LoginDialogProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+/**
+ * ログインを促すDialogを表示するコンポーネント
+ * @component LoginDialog
+ * @return {JSX.Element} LoginDialogを表示するReactコンポーネント
+ */
+const LoginDialog = ({ isOpen, setIsOpen }: LoginDialogProps) => {
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title='ログインが必要です'
+      description='この機能を利用するには，ログインする必要があります．'
+      yesCallback={() => {
+        setIsOpen(false);
+        signIn();
+      }}
+      noCallback={() => {
+        setIsOpen(false);
+      }}
+      yesText='ログイン'
+      noText='今はしない'
+    />
+  );
+};
+
+export default LoginDialog;

frontend/src/components/Post.tsx

@@ -11,7 +11,9 @@ import MiyabiButton from '@/components/MiyabiButton';
 import DropDownButton from './DropDownButton';
 import { formatDateKanji } from '@/app/timeline/utils/kanjiNumber';
 import { MdDeleteForever } from 'react-icons/md';
-import Dialog from './Dialog';
+import { useSession } from 'next-auth/react';
+import Dialog from '@/components/Dialog';
+import LoginDialog from './LoginDialog';
 
 // props の型定義
 interface PostProps {
@@ -34,6 +36,28 @@ const Post = ({ post, className }: PostProps) => {
   const [modalOpen, setModalOpen] = useState(false);
   // 削除確認ダイアログの表示状態
   const [dialogOpen, setDialogOpen] = useState(false);
+  // ユーザアイコンURLが一致するなら自分の投稿
+  const isMyPost = useSession().data?.user?.image === post.user.iconUrl;
+  // ドロップダウンメニューの要素
+  const dropDownItems = [];
+  // ドロップダウンメニューの投稿削除ボタン
+  const dropDownDeleteButton = {
+    label: '投稿を削除',
+    onClick: () => setDialogOpen(true),
+    className: '',
+    icon: <MdDeleteForever />,
+    color: 'red',
+  };
+  // 自分の投稿ならドロップダウンに削除ボタン追加
+  if (isMyPost) {
+    dropDownItems.push(dropDownDeleteButton);
+  }
+  // セッションの取得
+  const session = useSession();
+  // ログイン状態
+  const isLoggedIn = session.status === 'authenticated';
+  // ログイン促進ダイアログの開閉状態
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
 
   return (
     <div className={`${className} border-b border-gray-500 p-4`}>
@@ -49,18 +73,7 @@ const Post = ({ post, className }: PostProps) => {
         <div className='ml-2 cursor-pointer items-center'>
           <p className='text-lg text-black hover:underline'>{post.user.name}</p>
         </div>
-        <DropDownButton
-          className='ml-auto flex'
-          items={[
-            {
-              label: '投稿を削除',
-              onClick: () => setDialogOpen(true),
-              className: '',
-              icon: <MdDeleteForever />,
-              color: 'red',
-            },
-          ]}
-        ></DropDownButton>
+        <DropDownButton className='ml-auto flex' items={dropDownItems}></DropDownButton>
       </div>
       {/* アイコン以外 */}
       <div
@@ -100,7 +113,16 @@ const Post = ({ post, className }: PostProps) => {
         {formatDateKanji(post.date)}
         <div className='ml-auto flex items-center'>
           <p className='mr-2 text-sm'>{post.miyabi.toLocaleString()}</p>
-          <MiyabiButton size='small' className='mr-0' />
+          <MiyabiButton
+            size='small'
+            onClick={() => {
+              if (isLoggedIn) {
+              } else {
+                setLoginDialogOpen(true);
+              }
+            }}
+            className='mr-0'
+          />
         </div>
       </div>
       {/* 拡大表示が有効の場合，モーダルを表示する */}
@@ -123,6 +145,8 @@ const Post = ({ post, className }: PostProps) => {
           noText='いいえ'
         />
       )}
+      {/* ログイン確認ダイアログ表示が有効の場合，ダイアログを表示する */}
+      {loginDialogOpen && <LoginDialog isOpen={loginDialogOpen} setIsOpen={setLoginDialogOpen} />}
     </div>
   );
 };

frontend/src/components/SideMenu.tsx

@@ -1,13 +1,15 @@
 // クライアントコンポーネント
 'use client';
 
-import { CiUser, CiSettings, CiLogout } from 'react-icons/ci';
+import { CiUser, CiSettings, CiLogout, CiLogin } from 'react-icons/ci';
 import Image from 'next/image';
-import { UserTypes } from '@/types/userTypes';
+import { signIn, signOut, useSession } from 'next-auth/react';
+import { useState } from 'react';
+import Dialog from './Dialog';
+import LoginDialog from './LoginDialog';
 
 // props の型定義
 interface SideMenuProps {
-  user: UserTypes;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -18,31 +20,91 @@ interface SideMenuProps {
  * @param {SideMenuProps} props - ユーザデータを含むオブジェクト
  * @return {JSX.Element} サイドメニューを表示するReactコンポーネント
  */
-const SideMenu = ({ user, className, style }: SideMenuProps) => {
+const SideMenu = ({ className, style }: SideMenuProps) => {
+  // セッションの取得
+  const session = useSession();
+  // ログイン状態
+  const isLoggedIn = session.status === 'authenticated';
+  // ログアウト確認ダイアログの開閉状態
+  const [logoutDialogOpen, setLogoutDialogOpen] = useState(false);
+  // ログイン促進ダイアログの開閉状態
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+
   return (
     <div className={`${className} w-40 space-y-3`} style={style}>
-      <div className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'>
+      <div
+        onClick={() => {
+          if (isLoggedIn) {
+          } else {
+            setLoginDialogOpen(true);
+          }
+        }}
+        className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'
+      >
         <CiUser size={28} />
         <a className='pl-1 text-xl'>プロフィール</a>
       </div>
-      <div className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'>
+      <div
+        onClick={() => {
+          if (isLoggedIn) {
+          } else {
+            setLoginDialogOpen(true);
+          }
+        }}
+        className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'
+      >
         <CiSettings size={28} />
         <a className='pl-1 text-xl'>設定</a>
       </div>
-      <div className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'>
-        <CiLogout size={28} />
-        <a className='pl-1 text-xl'>ログアウト</a>
-      </div>
-      <div className='flex items-center'>
-        <Image
-          src={user.iconUrl !== '' ? user.iconUrl : '/iconDefault.png'}
-          height={28}
-          width={28}
-          alt='Icon'
-          className='rounded-full'
+      {!isLoggedIn && (
+        <div
+          onClick={() => signIn()}
+          className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'
+        >
+          <CiLogin size={28} />
+          <a className='pl-1 text-xl'>ログイン</a>
+        </div>
+      )}
+      {isLoggedIn && (
+        <div
+          onClick={() => setLogoutDialogOpen(true)}
+          className='flex items-center rounded-lg bg-transparent hover:cursor-pointer hover:bg-black/5'
+        >
+          <CiLogout size={28} />
+          <a className='pl-1 text-xl'>ログアウト</a>
+        </div>
+      )}
+      {isLoggedIn && (
+        <div className='flex items-center'>
+          <Image
+            src={session.data?.user?.image ?? '/iconDefault.png'}
+            height={28}
+            width={28}
+            alt='Icon'
+            className='rounded-full'
+          />
+          <a className='pl-1 text-xl'>{session.data?.user?.name ?? 'Name'}</a>
+        </div>
+      )}
+      {/* ログアウト確認ダイアログ表示が有効の場合，ダイアログを表示する */}
+      {logoutDialogOpen && (
+        <Dialog
+          isOpen={logoutDialogOpen}
+          title='ログアウト'
+          description='ログアウトしますか？'
+          yesCallback={() => {
+            setLogoutDialogOpen(false);
+            signOut();
+          }}
+          noCallback={() => {
+            setLogoutDialogOpen(false);
+          }}
+          yesText='はい'
+          noText='いいえ'
         />
-        <a className='pl-1 text-xl'>{user.name}</a>
-      </div>
+      )}
+      {/* ログイン確認ダイアログ表示が有効の場合，ダイアログを表示する */}
+      {loginDialogOpen && <LoginDialog isOpen={loginDialogOpen} setIsOpen={setLoginDialogOpen} />}
     </div>
   );
 };