feat: 사용자 전적 페이지 (사용자 지정 게임의 1 VS 1 모드 개요 페이지) css 구현

frontend/assets/css/common/header.css

@@ -19,10 +19,69 @@ header {
     width: fit-content;
 }
 
+.header-wrapper .histories#left-side, .header-wrapper .histories#right-side {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    width: 30%;
+    height: 100%;
+}
+
+.header-wrapper .histories#left-side {
+    justify-content: flex-start;
+}
+
+.header-wrapper .histories#right-side {
+    justify-content: flex-end;
+}
+
+.header-wrapper .histories#left-side > img {
+    width: 3rem;
+    height: 3rem;
+    margin-right: 10px;
+}
+
+.header-wrapper .histories#search-box {
+    display: flex;
+    width: fit-content;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.header-wrapper .histories#search-box > input {
+    width: 15rem;
+    height: 50%;
+    border-radius: 1rem;
+    border: 4px #FF79C5 solid;
+    background: none;
+    color: white;
+    font-size: 1.5rem;
+    padding: 0 1rem;
+    font-family: Galmuri11, system-ui;
+}
+
 .header-wrapper .histories#title {
+    text-align: center;
     color: #29ABE2;
 }
 
+.header-wrapper .histories#user-avatar {
+    position: relative;
+    width: 4rem;
+    height: 4rem;
+    border: 4px solid white;
+    overflow: hidden;
+    margin-right: 5rem;
+}
+
+.header-wrapper .histories#user-avatar > img {
+    position: absolute;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+}
+
 .header-wrapper .histories#close-button a {
     display: block;
     background-image: url("../../images/close.png");

frontend/assets/css/histories.css

@@ -0,0 +1,157 @@
+.histories#content-wrapper {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    height: 100%;
+    background-color: black;
+    background-image: url("../images/histories_frame.png");
+    background-size: 100% 100%;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    overflow: hidden;
+}
+
+/************* Histories List *************/
+
+.histories#list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 66.6vh;
+    color: white;
+    padding: 10vh 6vw 3vh 6vw;
+}
+
+.histories#list-wrapper {
+    display:grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    grid-gap: 1vh;
+    width: 80%;
+    height: 100%;
+}
+
+.histories.list-item {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    flex-direction: row;
+    border: 3px transparent solid;
+    border-radius: 1vw;
+    text-decoration: none;
+    width: 80%;
+    padding: 1vh 1vw;
+}
+
+.histories.list-item:visited, .histories.list-item:link, .histories.list-item:active {
+    color: white;
+}
+
+.histories.list-item:hover {
+    border: 3px #29ABE2 solid;
+    border-radius: 1vw;
+}
+
+.histories.list-item .player {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 10vw;
+    border-radius: 1vh;
+}
+
+.histories.list-item .player > div:not(:first-child) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 50%;
+}
+
+.histories.list-item .histories.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 8vw;
+    height: 8vw;
+    overflow: hidden;
+}
+
+.histories.list-item .histories.avatar > img {
+    position: absolute;
+    top: 0.1vw;
+    width: 12vw;
+    height: 12vw;
+}
+
+.histories.list-item .player > div:not(:last-child) {
+    margin-bottom: 1vh;
+}
+
+.histories.list-item .game-mode {
+    width: 20%;
+}
+
+.histories.list-item .histories.nickname {
+    font-family: Galmuri11-Bold, serif;
+    font-size: 1.3em;
+}
+
+.histories.list-item .histories.rating {
+    font-family: Galmuri11, serif;
+    font-size: 1.1em;
+}
+
+/********** Histories Pagination **********/
+
+.histories#pagination, .histories#pagination a {
+    display: inline-block;
+    height: 6vh;
+}
+
+.histories#pagination > .histories img {
+    height: 100%;
+}
+
+.histories#pagination > .histories#prev img {
+    transform: rotate(180deg);
+}
+
+.histories#pagination#next {
+}
+
+/********** Histories Mode Select **********/
+
+.histories#mode {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: row;
+    height: 15.5vh;
+    font-size: 2em;
+}
+
+.histories#mode a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-family: Galmuri11, serif;
+    text-decoration: none;
+}
+
+.histories#mode > a img {
+    width: 7vh;
+    margin-right: 2vh;
+}
+
+.histories#mode > a:hover {
+    font-family: Galmuri11-Bold, serif;
+    color: #29ABE2;
+}

frontend/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>ping pong</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-  <link rel="stylesheet" href="assets/css/common/header.css"/>
-  <link rel="stylesheet" href="assets/css/common/body.css"/>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ping pong</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
+    <link rel="stylesheet" href="assets/css/common/header.css"/>
+    <link rel="stylesheet" href="assets/css/common/body.css"/>
+    <link rel="stylesheet" href="global.css"/>
 </head>
 <body>
 <header id="header"></header>

frontend/main.js

@@ -1,6 +1,8 @@
 import App from "./src/app.js";
+import Header from "./src/pages/header/header.js";
 import { $ } from "./src/utils/querySelector.js";
 
 window.addEventListener("DOMContentLoaded", (e) => {
+  new Header($("#header"));
   new App($("#app"));
 });

frontend/src/constants/routeInfo.js

@@ -1,3 +1,4 @@
+import pages from "../pages/histories/pages.js";
 import GameMode from '../pages/game-mode/page.js';
 import Main from '../pages/main/page.js';
 import Nickname from '../pages/nickname/page.js';
@@ -8,8 +9,8 @@ export const BASE_URL = 'http://localhost:3000';
  * 원하는 경로에 따라 렌더링할 컴포넌트를 정의합니다.
  */
 export const routes = [
-  { path: /^\/$/, page: Main, header: errorHeader },
-  { path: /^\/nickname$/, page: Nickname, header: errorHeader },
-  { path: /^\/gamemode$/, page: GameMode, header: errorHeader },
-    {path: /^\/histories$/, page: histories, header: errorHeader}
-]
+    { path: /^\/$/, page: Main, header: errorHeader },
+    { path: /^\/nickname$/, page: Nickname, header: errorHeader },
+    { path: /^\/gamemode$/, page: GameMode, header: errorHeader },
+    { path: /^\/histories$/, page: pages, header: errorHeader}
+]

frontend/src/pages/header/header.js

@@ -0,0 +1,29 @@
+import Router from "../../router.js";
+import HistoriesHeader from "./historiesHeader.js";
+
+/**
+ * header 컴포넌트
+ * @param {HTMLElement} $container
+ */
+export default function header($container) {
+    this.$container = $container;
+
+    const init = () => {
+        new Router($container);
+    };
+
+    const render = () => {
+        this.$container.innerHTML = `
+        `;
+    }
+
+    init();
+    switch (location.pathname) {
+        case "/histories":
+            new HistoriesHeader($container);
+            break;
+        default:
+            render();
+            break;
+    }
+}

frontend/src/pages/header/historiesHeader.js

@@ -0,0 +1,35 @@
+/**
+ * 사용자 전적 페이지에 사용하는 header 컴포넌트
+ * @param {HTMLElement} $container
+ */
+export default function HistoriesHeader($container) {
+    this.$container = $container;
+
+    this.setState = () => {
+        this.render();
+    }
+
+    this.render = () => {
+        this.$container.innerHTML = `
+        <div class="histories header-wrapper">
+            <div class="histories" id="left-side">
+                <img src="../../../assets/images/search.png" alt="">
+                <div class="histories" id="search-box">
+                    <input type="text">
+                </div>
+            </div>
+            <div class="histories" id="title">너의 기록은</div>
+            <div class="histories" id="right-side">
+                <div class="histories" id="user-avatar">
+                    <img src="../../../assets/images/avatar/red.png" alt="">
+                </div>
+                <div class="histories" id="close-button">
+                    <a href=""></a>
+                </div>
+            </div>
+        </div>
+        `
+    }
+
+    this.render();
+}