diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 337324cb0..ccfccf1cd 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,6 +23,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" }, @@ -36,6 +37,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", @@ -6953,6 +6955,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-modal": { + "version": "3.16.0", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.0.tgz", + "integrity": "sha512-iphdqXAyUfByLbxJn5j6d+yh93dbMgshqGP0IuBeaKbZXx0aO+OXsvEkt6QctRdxjeM9/bR+Gp3h9F9djVWTQQ==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.6", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", @@ -11127,6 +11138,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -18510,6 +18526,29 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -20974,6 +21013,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index e0a60b5a7..2499fb0b2 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/__image_snapshots__/app-page--login.png b/frontend/src/app/__image_snapshots__/app-page--login.png index e8b565e26..96f706d95 100644 Binary files a/frontend/src/app/__image_snapshots__/app-page--login.png and b/frontend/src/app/__image_snapshots__/app-page--login.png differ diff --git a/frontend/src/app/__image_snapshots__/app-page--select-channel.png b/frontend/src/app/__image_snapshots__/app-page--select-channel.png index 43effcd17..450bdc6b6 100644 Binary files a/frontend/src/app/__image_snapshots__/app-page--select-channel.png and b/frontend/src/app/__image_snapshots__/app-page--select-channel.png differ diff --git a/frontend/src/app/__image_snapshots__/app-page--send-msg.png b/frontend/src/app/__image_snapshots__/app-page--send-msg.png index c773c259b..af173f3dc 100644 Binary files a/frontend/src/app/__image_snapshots__/app-page--send-msg.png and b/frontend/src/app/__image_snapshots__/app-page--send-msg.png differ diff --git a/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png b/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png index bde4b5477..5361197c6 100644 Binary files a/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png and b/frontend/src/app/__image_snapshots__/app-page--send-some-msg.png differ diff --git a/frontend/src/features/user/components/User.tsx b/frontend/src/features/user/components/User.tsx index 6df9e7a64..4fba4e50e 100644 --- a/frontend/src/features/user/components/User.tsx +++ b/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

name : {userInfo?.nickname}

; + return ( +
+ +

name : {userInfo?.nickname}

+ +
+ ); } else { return (
diff --git a/frontend/src/features/user/components/UserDetailsModal.stories.tsx b/frontend/src/features/user/components/UserDetailsModal.stories.tsx new file mode 100644 index 000000000..4922ad381 --- /dev/null +++ b/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; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = {}; diff --git a/frontend/src/features/user/components/UserDetailsModal.tsx b/frontend/src/features/user/components/UserDetailsModal.tsx new file mode 100644 index 000000000..a753150dd --- /dev/null +++ b/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 ( + +

+ id : {userInfo?.id}, name : {userInfo?.nickname} +

+ + ); +}; diff --git a/frontend/src/features/user/components/__image_snapshots__/features-user-components-userdetailsmodal--basic.png b/frontend/src/features/user/components/__image_snapshots__/features-user-components-userdetailsmodal--basic.png new file mode 100644 index 000000000..6587d7d29 Binary files /dev/null and b/frontend/src/features/user/components/__image_snapshots__/features-user-components-userdetailsmodal--basic.png differ