Feat/유저 토너먼트 전적 페이지 레이아웃 #1077

pages/tournament-record.tsx

@@ -0,0 +1,24 @@
+import styles from 'styles/tournament-record/TournamentRecord.module.scss';
+
+export default function TournamentRecord() {
+  return (
+    <div className={styles.pageWrap}>
+      <h1 className={styles.title}>명예의 전당</h1>
+      <div className={styles.leagueButtonWrapper}>
+        <button>Rookie</button>
+        <button>Master</button>
+        <button>Custom</button>
+      </div>
+      <div className={styles.winnerImageContainer}>우승자 이미지들</div>
+      <div className={styles.winnerInfoContainer}>
+        <p className={styles.userId}>cadet2147</p>
+        <p className={styles.gameInfo}>
+          제 5회 정기 토너먼트 루키리그{' '}
+          <span className={styles.highlighted}>우승자</span>
+        </p>
+        <p className={styles.date}>2023.11.11</p>
+      </div>
+      <div className={styles.bracketContainer}></div>
+    </div>
+  );
+}

styles/tournament-record/TournamentRecord.module.scss

@@ -0,0 +1,69 @@
+@import 'styles/common.scss';
+
+.pageWrap {
+  @include pageWrap;
+}
+
+.title {
+  @include pageTitle;
+  display: flex;
+  justify-content: center;
+}
+
+.leagueButtonWrapper {
+  display: flex;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+  margin-top: 1.4rem;
+  justify-content: space-between;
+
+  button {
+    font-size: 1rem;
+    font-weight: 400;
+    color: #cbcbcb;
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+.winnerImageContainer {
+  height: 10rem;
+  margin-top: 1.8rem;
+  background-color: rgb(88, 88, 88);
+}
+
+.winnerInfoContainer {
+  font-weight: 500;
+  color: #d591ff;
+  text-align: center;
+
+  p {
+    margin: 0.4rem 0 0;
+  }
+
+  .userId {
+    font-weight: 700;
+    color: white;
+  }
+
+  .gameInfo {
+    font-size: 1rem;
+
+    .highlighted {
+      color: #ffc700;
+    }
+  }
+
+  .date {
+    font-size: 0.8rem;
+  }
+}
+
+.bracketContainer {
+  width: 100%;
+  height: 21.5rem;
+  margin-top: 1rem;
+  background-color: rgba(112, 0, 255, 0.17);
+  border: 1px solid #c67dff;
+  border-radius: 26px;
+}