Merge pull request #98 from boostcampwm2023/feat/ui-room-setting

Feat/UI room setting

client/.prettierrc

@@ -9,5 +9,7 @@
   "arrowParens": "always",
   "endOfLine": "auto",
   "bracketSameLine": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
-}
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

client/src/components/Problems.tsx

@@ -1,16 +1,29 @@
 import { ProblemType } from '../types/ProblemType';
 import { ProblemButton } from './buttons/ProblemButton';
+import mockData from '../../public/mocks/UpdateRoom.json';
+import { useState } from 'react';
 
-type ProblemProps = {
-  problems: ProblemType[];
-};
-
-export default function Problems({ problems: problemProps }: ProblemProps) {
+export default function Problems({ isHost }: { isHost: boolean }) {
+  // TODO: socket연결 후 수정
+  const [problems, setProblems] = useState<ProblemType[]>([]);
   return (
-    <ul className='flex flex-col w-full'>
-      {problemProps.map((problem) => (
-        <ProblemButton key={problem.boj_problem_id} {...problem} />
-      ))}
-    </ul>
+    <>
+      {isHost && problems.length === 0 && (
+        <div className="flex h-full w-full flex-col items-center justify-center">
+          <h1 className="text-2xl font-bold">문제를 추가해주세요!</h1>
+          <button
+            className="text-white bg-aod_pink mt-4 rounded-lg px-4 py-2"
+            onClick={() => setProblems(mockData.problems)}>
+            문제 추가
+          </button>
+        </div>
+      )}
+
+      <ul className="flex w-full flex-col">
+        {problems.map((problem) => (
+          <ProblemButton key={problem.boj_problem_id} {...problem} />
+        ))}
+      </ul>
+    </>
   );
 }

client/src/components/RoomAccessPanel.tsx

@@ -1,22 +1,12 @@
-import { Link } from 'react-router-dom';
-
 import RoomCreateButton from './buttons/RoomCreateButton';
 import RoomJoinButton from './buttons/RoomJoinButton';
 
 export default function RoomAccessPanel() {
   return (
-    <div className="border-aod_gutter flex w-[322px] flex-col items-center justify-center gap-4 rounded-xl border-8 px-6 py-10">
-      <Link to="/room/1">
-        <RoomCreateButton />
-      </Link>
+    <div className="flex w-[322px] flex-col items-center justify-center gap-4 rounded-xl border-8 border-aod_gutter px-6 py-10">
+      <RoomCreateButton />
       <p className="text-aod_text">- or -</p>
-      <form className="flex items-center justify-between gap-2">
-        <input
-          className="bg-aod_white rounded-lg px-2 py-1"
-          placeholder="Room code"
-        />
-        <RoomJoinButton />
-      </form>
+      <RoomJoinButton />
     </div>
   );
 }

client/src/components/RoomCode.tsx

@@ -0,0 +1,10 @@
+import CopyIcon from '../icons/CopyIcon';
+
+export default function RoomCode({ code }: { code: string }) {
+  return (
+    <div className="text-md flex cursor-pointer flex-row items-center justify-center gap-1 rounded-lg bg-aod_text_alt bg-opacity-80 px-2 py-1 font-bold text-aod_text">
+      {code}
+      <CopyIcon />
+    </div>
+  );
+}

client/src/components/RoomSettingModal/RoomSettingModal.tsx

@@ -13,6 +13,10 @@ interface RoomSettingModalProps {
   modalOutsideClick: (arg: React.MouseEvent<HTMLDivElement>) => void;
 }
 
+const iconStyle = {
+  fontSize: '1.5rem',
+};
+
 export default function RoomSettingModal({
   modalOverlayRef,
   closeModal,
@@ -28,30 +32,27 @@ export default function RoomSettingModal({
 
   return (
     <div
-      className="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-[rgb(0,0,0,0.5)]"
+      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="z-100 relative flex h-[430px] w-[330px] flex-col items-center bg-aod_fg">
-        <button className="absolute right-3 top-3" onClick={closeModal}>
-          <FaXmark />
-        </button>
-        <div className="mb-2 mt-4 flex gap-2 text-lg font-semibold text-aod_text">
-          {isRandom ? (
-            <div>
-              <p>랜덤으로 출제</p>
-              <button onClick={toggleType}>
-                <FaToggleOff />
-              </button>
-            </div>
-          ) : (
-            <div>
-              <p>번호로 출제</p>
-              <button onClick={toggleType}>
-                <FaToggleOn />
-              </button>
-            </div>
-          )}
+      <div className="z-100 relative flex h-[430px] w-[330px] flex-col items-center rounded-lg bg-aod_bg">
+        <div className="relative mb-2 mt-4 flex w-full justify-center gap-2 align-middle text-lg font-semibold text-aod_text">
+          {isRandom ? <p>랜덤으로 출제</p> : <p>번호로 출제</p>}
+          <div className="absolute right-8 top-1/2 flex -translate-y-1/2 transform gap-2">
+            <button onClick={toggleType}>
+              {isRandom ? (
+                <FaToggleOff style={iconStyle} />
+              ) : (
+                <FaToggleOn style={iconStyle} />
+              )}
+            </button>
+            <button className="" onClick={closeModal}>
+              <FaXmark style={iconStyle} />
+            </button>
+          </div>
         </div>
+
         {isRandom ? (
           <RandomProblem />
         ) : (

client/src/components/buttons/RoomCreateButton.tsx

@@ -1,6 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
 export default function RoomCreateButton() {
+  // TODO: 방 생성 api가 개발되면 그때 navigate로직을 변경
+
+  const getNewRoomId = async () => {
+    return 'q1w2e3';
+  };
+
+  const navigate = useNavigate();
+  const onClick = async () => {
+    const roomId = await getNewRoomId();
+    navigate(`/room/${roomId}`, { state: { isHost: true } });
+  };
+
   return (
-    <button className="bg-aod_accent text-aod_white flex h-[33px] w-[150px] items-center justify-center rounded-lg font-medium hover:opacity-80">
+    <button
+      className="flex h-[33px] w-[150px] items-center justify-center rounded-lg bg-aod_accent font-medium text-aod_white hover:opacity-80"
+      onClick={onClick}>
       Create room
     </button>
   );

client/src/components/buttons/RoomJoinButton.tsx

@@ -1,7 +1,36 @@
+import { useNavigate } from 'react-router-dom';
+
+import { useState } from 'react';
+
 export default function RoomJoinButton() {
+  const [roomCode, setRoomCode] = useState<string>('');
+  const navigate = useNavigate();
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    if (roomCode === '') {
+      alert('방 코드를 입력해주세요.');
+      return;
+    }
+
+    // TODO: 여기도 서버 로직 나오면 수정
+    navigate(`/room/${'q1w2e3'}`, { state: { isHost: false } });
+  };
+
   return (
-    <button className="text-aod_white bg-aod_accent h-[33px] w-[60px] items-center justify-center rounded-lg font-medium hover:opacity-80">
-      Join
-    </button>
+    <form className="flex items-center justify-between gap-2">
+      <input
+        className="rounded-lg bg-aod_white px-2 py-1"
+        placeholder="Room code"
+        value={roomCode}
+        onChange={(e) => setRoomCode(e.target.value)}
+      />
+      <button
+        className="h-[33px] w-[60px] items-center justify-center rounded-lg bg-aod_accent font-medium text-aod_white hover:opacity-80"
+        onClick={onClick}>
+        Join
+      </button>
+    </form>
   );
 }

client/src/pages/Room.tsx

@@ -1,16 +1,20 @@
-import problems from '../../public/mocks/UpdateRoom.json';
+import { useLocation } from 'react-router-dom';
+
 import Problems from '../components/Problems';
 import ScoreboardButton from '../components/buttons/ScoreBoardButton';
 import Chat from '../components/Chat';
 import StartButton from '../components/buttons/StartButton';
 import RoomInfo from '../components/RoomInfo';
 
 export default function Room() {
+  const location = useLocation();
+  const isHost = location.state?.isHost;
+
   return (
-    <div className="bg-aod_bg flex min-h-screen items-center justify-center">
-      <div className="border-aod_gutter flex w-[380px] flex-col items-center justify-center gap-4 rounded-xl border-8 px-6 py-6">
+    <div className="relative flex min-h-screen items-center justify-center bg-aod_fg">
+      <div className="z-10 flex min-h-screen w-[50%] min-w-[300px] flex-col items-center gap-2 rounded-lg bg-aod_bg p-4 shadow-2xl">
         <RoomInfo />
-        <Problems problems={problems.problems} />
+        <Problems isHost={isHost} />
         <ScoreboardButton />
         <Chat />
         <StartButton />