221 ユーザーをクリックしたらそのユーザーの情報をモーダルウィンドウ的なので表示させるます

frontend/package.json

@@ -36,6 +36,7 @@
     "next-auth": "^4.22.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-modal": "^3.16.1",
     "socket.io-client": "^4.6.1",
     "typescript": "5.0.4"
   },
@@ -49,6 +50,7 @@
     "@storybook/react": "^7.0.9",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/react-modal": "^3.16.0",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "concurrently": "^8.0.1",

frontend/src/features/user/components/User.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { useAtom } from 'jotai';
 import { signIn } from 'next-auth/react';
 
@@ -7,13 +7,35 @@ import { userInfoAtom } from '@/App';
 
 import { LoginForm } from './LoginForm';
 import { SignUpForm } from './SignUpForm';
+import { UserDetailsModal } from './UserDetailsModal';
 
 export const User = ({ children }: { children: ReactNode }) => {
   const [userInfo, setUserInfo] = useAtom(userInfoAtom);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const closeModal = () => {
+    console.log('closeModal');
+    setModalIsOpen(false);
+  };
 
   const UserInputArea = () => {
     if (userInfo) {
-      return <p>name : {userInfo?.nickname}</p>;
+      return (
+        <div>
+          <button
+            onClick={() => {
+              setModalIsOpen(true);
+            }}
+          >
+            botton
+          </button>
+          <p>name : {userInfo?.nickname}</p>
+          <UserDetailsModal
+            userInfo={userInfo}
+            modalIsOpen={modalIsOpen}
+            closeModal={closeModal}
+          />
+        </div>
+      );
     } else {
       return (
         <div style={{ margin: '10px auto 10px auto' }}>

frontend/src/features/user/components/UserDetailsModal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { User } from './User';
+
+const meta = {
+  component: User,
+  tags: ['autodocs'],
+} satisfies Meta<typeof User>;
+
+export default meta;
+
+type Story = StoryObj<typeof User>;
+
+export const Basic: Story = {};

frontend/src/features/user/components/UserDetailsModal.tsx

@@ -0,0 +1,23 @@
+'use client';
+import Modal from 'react-modal';
+
+import { UserInfo } from '../types/UserDto';
+
+Modal.setAppElement('body');
+export const UserDetailsModal = ({
+  userInfo,
+  modalIsOpen,
+  closeModal,
+}: {
+  userInfo: UserInfo;
+  modalIsOpen: boolean;
+  closeModal: () => void;
+}) => {
+  return (
+    <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
+      <p>
+        id : {userInfo?.id}, name : {userInfo?.nickname}
+      </p>
+    </Modal>
+  );
+};