ﾌﾟﾙﾌﾟﾙﾌﾟﾙ by

frontend/package.json

@@ -34,6 +34,7 @@
     "next": "13.4.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"
   },
@@ -46,6 +47,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,21 +1,40 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { useAtom } from 'jotai';
 
 import { Container } from '@/components/Layout/Container';
 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>
-          id : {userInfo?.id}, name : {userInfo?.nickname}
-        </p>
+        <div>
+          <button
+            onClick={() => {
+              setModalIsOpen(true);
+            }}
+          >
+            botton
+          </button>
+          <p>
+            id : {userInfo?.id}, name : {userInfo?.nickname}
+          </p>
+          <UserDetailsModal
+            userInfo={userInfo}
+            modalIsOpen={modalIsOpen}
+            closeModal={closeModal}
+          />
+        </div>
       );
     } else {
       return (

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>
+  );
+};