Merge pull request #2 from noSPkeepgoing/develop

게임 내 헤더, 투표페이지 생성

src/components/GameHeader.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import styles from '@styles/components/gameHeader.module.scss';
+
+const GameHeader = ({ started, title, timer }: GameHeaderProps) => {
+  const [isStart, setIsStart] = useState(started);
+
+  if (!isStart) {
+    return (
+      <header className={styles.header}>
+        <p className={styles.header__title}>
+          {title} <button className={styles.header__button}>🚪</button>
+        </p>
+        <button
+          className={styles.header__button}
+          onClick={() => {
+            setIsStart(true);
+          }}>
+          게임시작
+        </button>
+      </header>
+    );
+  }
+
+  return (
+    <header className={styles.header}>
+      <span>남은시간 : {timer}초</span>
+      <p className={styles.header__title}>{title}</p>
+      <p></p>
+    </header>
+  );
+};
+
+export default GameHeader;
+
+type GameHeaderProps = {
+  started: boolean;
+  title: string;
+  timer?: number;
+};

src/components/GhostItem.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Ghost } from '../pages/game/Vote';
+import styles from '@styles/components/ghostItem.module.scss';
+
+const GhostItem = ({ ghost }: { ghost: Ghost }) => {
+  return (
+    <li className={styles.ghost}>
+      <div className={styles.ghost__image}>
+        <img src={ghost.picture} alt={`${ghost.name}님의 프로필`} />
+      </div>
+      <div className={styles.ghost__name}>{ghost.name}</div>
+    </li>
+  );
+};
+
+export default GhostItem;

src/components/GhostList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Ghost } from '../pages/game/Vote';
+import GhostItem from './GhostItem';
+import styles from '@styles/components/ghostList.module.scss';
+
+const GhostList = ({ ghosts }: { ghosts: Ghost[] }) => {
+  return (
+    <ul className={styles.ghosts}>
+      {ghosts.map((ghost) => (
+        <GhostItem key={ghost.id} ghost={ghost} />
+      ))}
+    </ul>
+  );
+};
+
+export default GhostList;

src/pages/game/Vote.tsx

@@ -1,7 +1,88 @@
 import React from 'react';
+import GameHeader from '../../components/GameHeader';
+import styles from '@styles/pages/vote.module.scss';
+import GhostList from '../../components/GhostList';
 
 const Vote = () => {
-  return <div>Vote</div>;
+  return (
+    <div className={styles.vote}>
+      <GameHeader timer={10} title={'누가 마피아 유령일까...'} started={true} />
+      <GhostList ghosts={ghosts} />
+      <div className={styles.vote__button}>
+        <button>투표 완료</button>
+      </div>
+    </div>
+  );
 };
 
 export default Vote;
+
+export type Ghost = {
+  id: string;
+  name: string;
+  picture: string;
+};
+
+// 더미 데이터
+const ghosts: Ghost[] = [
+  {
+    id: 'user1',
+    name: '첫 번째 유령',
+    picture:
+      'https://i.pinimg.com/564x/a7/99/96/a79996fd63dbb958d65384bbf49a59df.jpg',
+  },
+  {
+    id: 'user2',
+    name: '두 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/d94869409b4e94903723612a4f93a6f9?s=200&d=retro',
+  },
+  {
+    id: 'user3',
+    name: '세 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/c274467c5ef4fe381b154a20c5e7ce26?s=200&d=retro',
+  },
+  {
+    id: 'user4',
+    name: '네 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/d94869409b4e94903723612a4f93a6f9?s=200&d=retro',
+  },
+  {
+    id: 'user5',
+    name: '다섯 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/c274467c5ef4fe381b154a20c5e7ce26?s=200&d=retro',
+  },
+  {
+    id: 'user6',
+    name: '여섯 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/d94869409b4e94903723612a4f93a6f9?s=200&d=retro',
+  },
+  {
+    id: 'user7',
+    name: '일곱 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/c274467c5ef4fe381b154a20c5e7ce26?s=200&d=retro',
+  },
+  {
+    id: 'user8',
+    name: '여덟 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/d94869409b4e94903723612a4f93a6f9?s=200&d=retro',
+  },
+  {
+    id: 'user9',
+    name: '아홉 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/c274467c5ef4fe381b154a20c5e7ce26?s=200&d=retro',
+  },
+  {
+    id: 'user10',
+    name: '열 번째 유령',
+    picture:
+      'https://gravatar.com/avatar/d94869409b4e94903723612a4f93a6f9?s=200&d=retro',
+  },
+];

src/styles/abstracts/_variables.scss

@@ -1,3 +1,9 @@
+//font family
+@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
+@import url('https://rsms.me/inter/inter.css');
+$font-logo: 'Jeju Hallasan', cursive;
+$font-main: 'Inter', sans-serif;
+
 // Font Size
 $font-sm: 1rem;
 $font-base: 1.6rem;
@@ -13,10 +19,11 @@ $font-bold900: 900;
 // Theme & Color
 $black: #000000;
 $white: #fff;
+$gray: #f5f5f5;
 
 $bg-black: $black;
 $bg-purple: #360e4f;
-$bg-purple-20: rgba(#452b66, 0.83);
+$bg-purple-80: rgba(#452b66, 0.8);
 
 $placeholder: rgba($black, 0.2);
 

src/styles/components/gameHeader.module.scss

@@ -0,0 +1,41 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.header {
+  @include flex-center-row();
+  padding: 1rem;
+  justify-content: space-between;
+  background-color: $bg-purple-80;
+  color: $white;
+  font-size: $font-base;
+  font-family: $font-main;
+
+  p {
+    min-width: 6em;
+  }
+
+  span {
+    padding: 1rem;
+  }
+
+  &__title {
+    font-weight: $font-bold700;
+    font-family: $font-logo;
+    font-size: $font-lg;
+  }
+
+  &__button {
+    padding: 1rem;
+    background-color: transparent;
+    border: none;
+    border-radius: 0.3rem;
+    color: $white;
+    font-size: $font-base;
+    cursor: pointer;
+
+    &:hover {
+      transform: scale(0.95);
+      background-color: rgba($white, 0.1);
+    }
+  }
+}

src/styles/components/ghostItem.module.scss

@@ -0,0 +1,42 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.ghost {
+  @include flex-center-row();
+  display: inline-flex;
+  font-family: $font-main;
+  padding: 1rem;
+  width: 40%;
+
+  &__image {
+    $size: 8rem;
+    width: $size;
+    height: $size;
+    margin-right: 2rem;
+
+    img {
+      background-color: $gray;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+
+  &__name {
+    $size: 10rem;
+    width: $size;
+    margin-left: 2rem;
+    padding: 2rem 3.5rem;
+    border-radius: 2rem;
+    background-color: $gray;
+    font-size: $font-base;
+    font-weight: $font-normal;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba($white, 0.2);
+    border-radius: 2rem;
+  }
+}

src/styles/components/ghostList.module.scss

@@ -0,0 +1,9 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.ghosts {
+  margin: 0;
+  padding-top: 4rem;
+  text-align: center;
+  max-height: 90%;
+}

src/styles/pages/vote.module.scss

@@ -0,0 +1,25 @@
+@use '../abstracts' as *;
+@use '../base' as *;
+
+.vote {
+  background-color: $bg-black;
+  height: 100vh;
+
+  &__button {
+    font-size: $font-lg;
+    width: 100%;
+    text-align: end;
+    button {
+      margin-right: 5rem;
+      background-color: transparent;
+      border: none;
+      color: $white;
+
+      &:hover {
+        cursor: pointer;
+        transform: scale(0.95);
+        text-decoration: underline;
+      }
+    }
+  }
+}