Merge pull request #103 from boostcampwm2023/feat/room/logic

Feat/room/logic : 룸 페이지 로직 추가
boostcampwm2023 · Nov 28, 2023 · 9cd1bc1 · 9cd1bc1
2 parents 37fb363 + fdf46a9
commit 9cd1bc1
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 25 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,6 +10,7 @@
     "Parens",
     "tailwindcss",
     "tanstack",
+    "toastify",
     "typeorm",
     "Xmark"
   ]

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "react-toastify": "^9.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

diff --git a/client/src/components/RoomInfo.tsx b/client/src/components/RoomInfo.tsx
@@ -1,17 +1,30 @@
 import CreateRoom from '../../public/mocks/CreateRoom.json';
 import ExitButton from './buttons/ExitButton';
 import { FaRegCopy } from 'react-icons/fa6';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 export default function RoomInfo() {
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(CreateRoom.code);
+    toast.success('Copied to clipboard!', {
+      position: 'bottom-center',
+      autoClose: 2000,
+      hideProgressBar: true,
+    });
+  };
   return (
-    <div className="flex w-full items-center justify-between">
-      <div className="flex flex-row items-center rounded-lg text-aod_text">
-        <div className="pr-3 text-xl font-bold">{CreateRoom.code}</div>
-        <button>
-          <FaRegCopy />
-        </button>
+    <>
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-row items-center rounded-lg text-aod_text">
+          <div className="pr-3 text-xl font-bold">{CreateRoom.code}</div>
+          <button onClick={copyToClipboard}>
+            <FaRegCopy />
+          </button>
+        </div>
+        <ExitButton />
       </div>
-      <ExitButton />
-    </div>
+      <ToastContainer toastClassName={'bg-aod_fg text-aod_text'} />
+    </>
   );
 }
diff --git a/client/src/components/ScoreBoardModal/ScoreBoardModal.tsx b/client/src/components/ScoreBoardModal/ScoreBoardModal.tsx
@@ -1,7 +1,14 @@
 import { ResultType, ScoreType } from '../../types/ScoreType';
 import mockScoresData from '../../../public/mocks/Scores.json';
 import ScoreBoard from './ScoreBoard';
-import { FaChartSimple } from 'react-icons/fa6';
+import { FaChartSimple, FaXmark } from 'react-icons/fa6';
+import { RefObject } from 'react';
+
+interface ModalProps {
+  modalOverlayRef: RefObject<HTMLDivElement>;
+  closeModal: () => void;
+  modalOutsideClick: (arg: React.MouseEvent<HTMLDivElement>) => void;
+}
 
 const mockScores: ScoreType = {
   players: mockScoresData.players.map((player) => ({
@@ -12,18 +19,34 @@ const mockScores: ScoreType = {
   })),
 };
 
-export default function ScoreBoardModal() {
+const iconStyle = {
+  fontSize: '1.5rem',
+};
+
+export default function ScoreBoardModal({
+  modalOverlayRef,
+  closeModal,
+  modalOutsideClick,
+}: ModalProps) {
   return (
-    <div className="flex h-[430px] w-[330px] flex-col items-center rounded-2xl bg-aod_bg">
-      <div className="flex w-full flex-col items-center gap-y-[2px] border-b-[0.5px] border-aod_gutter px-5 py-3">
-        <div className="flex flex-row items-baseline gap-2">
-          <FaChartSimple />
-          <div className="text-lg font-medium text-aod_text">Scoreboard</div>
+    <div
+      className="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-aod_bg/80"
+      style={{ backdropFilter: 'blur(10px)' }}
+      ref={modalOverlayRef}
+      onClick={modalOutsideClick}>
+      <div className="relative flex h-[430px] w-[calc(50%-100px)] flex-col items-center rounded-2xl border-[0.5px] border-aod_gutter bg-aod_bg">
+        <button className="absolute right-4 top-4" onClick={closeModal}>
+          <FaXmark style={iconStyle} />
+        </button>
+        <div className="flex w-full flex-col items-center gap-y-[2px] border-b-[0.5px] border-aod_gutter px-5 py-3">
+          <div className="flex flex-row items-baseline gap-2">
+            <FaChartSimple />
+            <div className="text-lg font-medium text-aod_text">Scoreboard</div>
+          </div>
+          <div className="text-xs text-aod_text">3 online</div>
         </div>
-        <div className="text-xs text-aod_text">3 online</div>
+        <ScoreBoard scores={mockScores}></ScoreBoard>
       </div>
-
-      <ScoreBoard scores={mockScores}></ScoreBoard>
     </div>
   );
 }
diff --git a/client/src/components/buttons/ExitButton.tsx b/client/src/components/buttons/ExitButton.tsx
@@ -1,8 +1,16 @@
 import { RxExit } from 'react-icons/rx';
+import { useNavigate } from 'react-router-dom';
 
 export default function ExitButton() {
+  const navigate = useNavigate();
+
+  const exit = () => {
+    navigate(`/lobby`);
+  };
   return (
-    <button className="flex flex-row items-center gap-x-2 rounded-lg bg-aod_accent px-2.5 py-1 text-aod_white hover:opacity-80">
+    <button
+      className="flex flex-row items-center gap-x-2 rounded-lg bg-aod_accent px-2.5 py-1 text-aod_white hover:opacity-80"
+      onClick={exit}>
       <RxExit
         style={{
           fontWeight: 'bold',

diff --git a/client/src/components/buttons/ScoreBoardButton.tsx b/client/src/components/buttons/ScoreBoardButton.tsx
@@ -1,10 +1,40 @@
 import { FaChartSimple } from 'react-icons/fa6';
+import ScoreBoardModal from '../ScoreBoardModal/ScoreBoardModal';
+import { useRef, useState } from 'react';
 
 export default function ScoreboardButton() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const modalOverlayRef = useRef<HTMLDivElement>(null);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const modalOutsideClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (modalOverlayRef.current === event.target) {
+      setIsModalOpen(false);
+    }
+  };
   return (
-    <button className="flex w-full flex-row items-center justify-center rounded-lg bg-aod_accent px-3 py-2 text-aod_white hover:opacity-80">
-      <FaChartSimple />
-      <div className="pl-2 font-medium">Scoreboard</div>
-    </button>
+    <>
+      <button
+        className="flex w-full flex-row items-center justify-center rounded-lg bg-aod_accent px-3 py-2 text-aod_white hover:opacity-80"
+        onClick={openModal}>
+        <FaChartSimple />
+        <div className="pl-2 font-medium">Scoreboard</div>
+      </button>
+      {isModalOpen ? (
+        <ScoreBoardModal
+          modalOverlayRef={modalOverlayRef}
+          closeModal={closeModal}
+          modalOutsideClick={modalOutsideClick}
+        />
+      ) : (
+        <></>
+      )}
+    </>
   );
 }