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

* feat(index): header script 추가 및 reformat

* feat(common): header 렌더링하는 자바스크립트 파일 추가

* feat(users): 전적 중, 사용자 지정 게임 1 vs 1 모드를 보여주는 자바스크립트 추가

* chore(gitignore): .idea 디렉토리 추가

* feat(assets): font 추가

- Galmuri11 Normal, Bold, Condensed 추가

* feat(assets): header의 뒤로가기 이미지 추가

* feat(assets): 사용자 지정 게임 전적 검색 전용 css 추가

* feat(assets): 헤더 전용 css 추가

* feat(common): 헤더를 렌더링하는 js 파일 추가

* feat(index): <header> 추가

* feat(assets): 이미지 파일 추가

* feat(users): 전적 페이지 헤더 함수 프로토타입 구현

* chore: package-lock.json의 name value 변경

* chore: package-lock.json의 name value 변경

* feat(index): mini reset css 적용

* chore(common): header js 파일 이동

* feat(main): header를 렌더링하게 함

* feat(users): 사용자 전적 헤더 프로토타입 선언

* feat(common): body 전용 css 추가

* feat(histories): 파일 이동 및 one_on_one_list.js 프로토타입 구현

* feat(router): histories 라우터에 등록

* chore(common): import 경로 변경

* chore: 파일 경로 변경

* feat: body 배경색 추가

* feat(index): body css link

* chore: 경로 변경

* feat(css): body width, height 뷰포트를 기준으로 변경

* feat(css): histories의 header css 프로토타입 추가

* refactor: /users/histories 대신 /histories 사용

* feat(images): 이미지 해상도 변경

* feat(histories): 헤더에 x버튼 추가

* feat(index): #app의 height를 80vh로 축소

* feat(css): 프레임 배경 이미지를 content-wrapper에 적용

* feat(header): histories의 header는 동적으로 css 파일을 가져와서 head에 link

* feat(header): 검색창 구현

* feat(header): 아바타 추가

* build(header): header 파일 pages/header로 이동

* feat(header): histories header flex로 감싸게 함

* build(histories): one_on_one_list에서 pages로 파일명 변경

* build(histories): one_on_one_list에서 pages로 파일명 변경

* feat(images): 설정, 개요 아이콘 추가

* refactor(css): css 경로 변경

* feat(histories): 사용자 전적 페이지 기본 레이아웃 작성

* feat(histories): 페이지네이션 및 하단 편의 버튼 추가

* feat(histories): 사용자 전적 목록 보여주는 함수 구현

* refactor(histories): 전적 리스트 렌더링하는 함수 분리

* refactor(histories): 전적 페이지의 레이아웃 렌더링하는 함수 분리

- 함수 분리
- 주석 추가

* refactor(histories): list 비율 수정

* build: header 파일 경로 변경

* refactor: pages.js에서 page.js로 파일명 변경

* refactor(histories): page.js export명 변경 사항 적용

* refactor(histories): a태그 대신 div태그로 변경

* chore(css): 불필요한 css 제거

* feat(utils): hover 이벤트 리스너 모듈 추가

* feat(utils): hover 시 cursor 변경하는 모듈 추가

* refactor(utils): hover 시 cursor 변경은 hoverCursor에서 관리

* refactor(histories): hover는 이벤트리스너로 관리

* feat(histories): click 이벤트 리스너 추가하는 함수 추가

* refactor(header): histories 헤더에서 a 태그 삭제

* style(header): 주석 추가

* chore: 프로젝트 파일 변경사항 추가

frontend/assets/css/common/header.css

@@ -19,11 +19,70 @@ 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#close-button a {
+.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 {
     display: block;
     background-image: url("../../images/close.png");
     background-position: center;

frontend/assets/css/histories.css

@@ -0,0 +1,150 @@
+.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 .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;
+    text-align: center;
+}
+
+/********** Histories Pagination **********/
+
+.histories#pagination, .histories#pagination div {
+    display: inline-block;
+    height: 6vh;
+    text-align: center;
+}
+
+.histories#pagination > .histories img {
+    height: 100%;
+    margin: 0 0.5vw;
+}
+
+.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 div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-family: Galmuri11, serif;
+    text-decoration: none;
+}
+
+.histories#mode > div img {
+    width: 7vh;
+    margin-right: 2vh;
+}

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/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,15 +1,16 @@
 import GameMode from '../pages/game-mode/page.js';
 import Main from '../pages/main/page.js';
 import Nickname from '../pages/nickname/page.js';
-import histories from "../pages/histories/page.js";
+import Histories from "../pages/histories/page.js";
 import errorHeader from '../header/errorHeader/header.js';
+import HistoriesHeader from "../header/historiesHeader.js";
 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: Histories, header: HistoriesHeader}
+]

frontend/src/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/header/historiesHeader.js

@@ -0,0 +1,48 @@
+import {click} from "../utils/clickEvent.js";
+import {hoverChangeCursor} from "../utils/hoverEvent.js";
+
+/**
+ * 사용자 전적 페이지에 사용하는 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"></div>
+            </div>
+        </div>
+        `
+  }
+
+  /**
+   * 헤더의 레이아웃에 이벤트 리스너를 추가합니다.
+   */
+  this.addEventListenersToLayout = () => {
+    const $closeButton = document.getElementById("close-button");
+    click($closeButton, function () {
+      console.log("전적 창 닫기");
+    });
+    hoverChangeCursor($closeButton, "pointer");
+  }
+
+  this.render();
+  this.addEventListenersToLayout();
+}