feat: categoryContainer에 방 정보 추가 #274

woowacourse-teams · Sep 21, 2024 · a529007 · a529007
1 parent 35108bf
commit a529007
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts b/frontend/src/components/CategoryContainer/CategoryContainer.styled.ts
@@ -5,8 +5,7 @@ import getBorderRadius from '@/styles/utils/getBorderRadius';
 
 export const categoryContainerLayout = css`
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   height: 10rem;
   padding: 1.6rem 0 2.4rem;
@@ -16,11 +15,22 @@ export const categoryContainerLayout = css`
   cursor: pointer;
 `;
 
+export const roomSettingBox = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
 export const title = css`
   font-weight: 800;
   font-size: 2.8rem;
 `;
 
 export const subtitle = css`
+  font-weight: 800;
+  font-size: 2rem;
+`;
+
+export const roomSettingLabel = css`
   font-weight: 600;
 `;
diff --git a/frontend/src/components/CategoryContainer/CategoryContainer.tsx b/frontend/src/components/CategoryContainer/CategoryContainer.tsx
@@ -1,18 +1,38 @@
-import { categoryContainerLayout, title, subtitle } from './CategoryContainer.styled';
+import { useRecoilValue } from 'recoil';
+
+import {
+  categoryContainerLayout,
+  title,
+  subtitle,
+  roomSettingLabel,
+  roomSettingBox,
+} from './CategoryContainer.styled';
 import RoomSettingModal from '../common/RoomSettingModal/RoomSettingModal';
 
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import useModal from '@/hooks/useModal';
+import { memberInfoState } from '@/recoil/atom';
 
 const CategoryContainer = () => {
   const { roomSetting } = useGetRoomInfo();
   const { isOpen, show, close } = useModal();
+  const { isMaster } = useRecoilValue(memberInfoState);
 
   return (
     <>
-      <button css={categoryContainerLayout} onClick={show}>
-        <span css={subtitle}>카테고리</span>
-        <h1 css={title}>{roomSetting.category.label}</h1>
+      <button css={categoryContainerLayout} onClick={isMaster ? show : () => {}}>
+        <div css={roomSettingBox}>
+          <span css={roomSettingLabel}>라운드</span>
+          <h1 css={subtitle}>{roomSetting.totalRound}</h1>
+        </div>
+        <div css={roomSettingBox}>
+          <span css={roomSettingLabel}>카테고리</span>
+          <h1 css={title}>{roomSetting.category.label}</h1>
+        </div>
+        <div css={roomSettingBox}>
+          <span css={roomSettingLabel}>타이머</span>
+          <h1 css={subtitle}>{roomSetting.timeLimit}</h1>
+        </div>
       </button>
       {isOpen && <RoomSettingModal isOpen={isOpen} onClose={close} />}
     </>

diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
@@ -47,15 +47,15 @@ export const RoomSettingHeader = ({ title }: HeaderProps) => {
   const { isOpen, show, close } = useModal();
   const { isOpen: isExitOpen, show: exitShow, close: exitClose } = useModal();
   const { handleExit } = useExit();
-  const memberInfo = useRecoilValue(memberInfoState);
+  const { isMaster } = useRecoilValue(memberInfoState);
 
   return (
     <header css={headerLayout()}>
       <button onClick={exitShow} css={buttonWrapper}>
         <img src={ExitIcon} alt="방 설정" css={iconImage} />
       </button>
       <h1 css={gameTitle}>{title}</h1>
-      {memberInfo.isMaster ? (
+      {isMaster ? (
         <button onClick={show} css={buttonWrapper}>
           <img src={SettingIcon} alt="방 설정" css={iconImage} />
         </button>