refactor: �header 구조 바꿨습니다 (#65)

* 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 * refactor: header 폴더로 바꿨습니다 header 구조 바꿨습니다. 기존 방식대로 app element안을 다 묶어서 렌더링 해주지 않고 분리해서 header와 page 따로 렌더링 해주게 했습니다 --------- Co-authored-by: yena <[email protected]>
GunGonGamLee · Jan 17, 2024 · fa76678 · fa76678
1 parent bce65de
commit fa76678
Show file tree

Hide file tree

Showing 27 changed files with 182 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -57,4 +57,7 @@ Temporary Items
 .env
 
 ## volume directory git ignore
-volumes/
+volumes/
+
+## .idea directory git ignore
+.idea/
diff --git a/frontend/assets/css/common/body.css b/frontend/assets/css/common/body.css
@@ -0,0 +1,8 @@
+body {
+    background-image: linear-gradient(0deg, #45003B, #191D40);
+    width: 100vw;
+    height: 100vh;
+}
+
+body.histories {
+}
diff --git a/frontend/assets/css/common/font.css b/frontend/assets/css/common/font.css
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Galmuri11';
+    src: url('/frontend/assets/fonts/Galmuri11.ttf') format('truetype');
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: 'Galmuri11-Bold';
+    src: url('/frontend/assets/fonts/Galmuri11-Bold.ttf') format('truetype');
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'Galmuri11-Condensed';
+    src: url('/frontend/assets/fonts/Galmuri11-Condensed.ttf') format('truetype');
+    font-weight: normal;
+}
diff --git a/frontend/assets/css/common/header.css b/frontend/assets/css/common/header.css
@@ -0,0 +1,32 @@
+header {
+    width: 100vw;
+    height: 12vh;
+    font-family: Galmuri11-Bold, serif;
+    font-size: 2rem;
+}
+
+.header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 0 5rem;
+    width: 100%;
+    height: 100%;
+}
+
+.header-wrapper .histories > div {
+    width: fit-content;
+}
+
+.header-wrapper .histories#title {
+    color: #29ABE2;
+}
+
+.header-wrapper .histories#close-button a {
+    display: block;
+    background-image: url("../../images/close.png");
+    background-position: center;
+    width: 3rem;
+    height: 3rem;
+}
diff --git a/frontend/assets/css/histories/one_on_one.css b/frontend/assets/css/histories/one_on_one.css
@@ -0,0 +1,12 @@
+.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;
+}
diff --git a/frontend/assets/fonts/Galmuri11-Bold.ttf b/frontend/assets/fonts/Galmuri11-Bold.ttf
diff --git a/frontend/assets/fonts/Galmuri11-Condensed.ttf b/frontend/assets/fonts/Galmuri11-Condensed.ttf
diff --git a/frontend/assets/fonts/Galmuri11.ttf b/frontend/assets/fonts/Galmuri11.ttf
diff --git a/frontend/assets/images/1vs1_logo.png b/frontend/assets/images/1vs1_logo.png
diff --git a/frontend/assets/images/close.png b/frontend/assets/images/close.png
diff --git a/frontend/assets/images/game_room_bg.jpg b/frontend/assets/images/game_room_bg.jpg
diff --git a/frontend/assets/images/go_back.png b/frontend/assets/images/go_back.png
diff --git a/frontend/assets/images/histories_frame.png b/frontend/assets/images/histories_frame.png
diff --git a/frontend/assets/images/no_password.png b/frontend/assets/images/no_password.png
diff --git a/frontend/assets/images/password.png b/frontend/assets/images/password.png
diff --git a/frontend/assets/images/people.png b/frontend/assets/images/people.png
diff --git a/frontend/assets/images/tournament_logo.png b/frontend/assets/images/tournament_logo.png
diff --git a/frontend/assets/images/winner.png b/frontend/assets/images/winner.png
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,16 +1,17 @@
-<!doctype html>
+<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
-    <link rel="stylesheet" href="global.css" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-    <script type="module" src="main.js"></script>
-  </body>
+<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"/>
+</head>
+<body>
+<header id="header"></header>
+<div id="app" style="width: 100vw; height: 88vh;"></div>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
+      <script type="module" src="main.js"></script>
+</body>
 </html>
diff --git a/frontend/node_modules/.vite/deps/_metadata.json b/frontend/node_modules/.vite/deps/_metadata.json
diff --git a/frontend/src/constants/routeInfo.js b/frontend/src/constants/routeInfo.js
@@ -1,14 +1,15 @@
 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 errorHeader from '../header/errorHeader/header.js';
 export const BASE_URL = 'http://localhost:3000';
 /**
  * 원하는 경로에 따라 렌더링할 컴포넌트를 정의합니다.
- * @type {{path: RegExp, element: string}[]}
  */
 export const routes = [
-  { path: /^\/$/, element: Main },
-  { path: /^\/nickname$/, element: Nickname },
-  { path: /^\/gamemode$/, element: GameMode },
-];
+  { path: /^\/$/, page: Main, header: errorHeader },
+  { path: /^\/nickname$/, page: Nickname, header: errorHeader },
+  { path: /^\/gamemode$/, page: GameMode, header: errorHeader },
+    {path: /^\/histories$/, page: histories, header: errorHeader}
+]
diff --git a/frontend/src/header/errorHeader/header.js b/frontend/src/header/errorHeader/header.js
@@ -0,0 +1,19 @@
+/**
+ * 사용자 전적 페이지에 사용하는 header 컴포넌트
+ * @param {HTMLElement} $container
+ */
+export default function HistoriesHeader($container) {
+  this.$container = $container;
+
+  this.setState = () => {
+    this.render();
+  }
+
+  this.render = () => {
+    this.$container.innerHTML = `
+    <div style="width: 100vw; height: 12vh; background: #0000AA"></div>
+        `
+  }
+
+  this.render();
+}
diff --git a/frontend/src/header/historiesHeader/historiesHeader.js b/frontend/src/header/historiesHeader/historiesHeader.js
@@ -0,0 +1,27 @@
+/**
+ * 사용자 전적 페이지에 사용하는 header 컴포넌트
+ * @param {HTMLElement} $container
+ */
+export default function HistoriesHeader($container) {
+    this.$container = $container;
+
+    this.setState = () => {
+        this.render();
+    }
+
+    this.render = () => {
+        this.$container.innerHTML = `
+        <div class="header-wrapper">
+            <div class="histories" id="search-icon"></div>
+            <div class="histories" id="search-box"></div>
+            <div class="histories" id="title">너의 기록은</div>
+            <div class="histories" id="user-avatar"></div>
+            <div class="histories" id="close-button">
+                <a href=""></a>
+            </div>
+        </div>
+        `
+    }
+
+    this.render();
+}
diff --git a/frontend/src/pages/errorPage.js b/frontend/src/pages/errorPage.js
@@ -33,9 +33,9 @@ export default function ErrorPage($container, errorCode) {
 
   this.render = () => {
     this.$container.innerHTML = `
-    <div style="width: 100vw; height: 100vh; position: relative; background: #0000AA; display: flex; align-items: center; flex-direction: column">
-  <span style="color: rgba(0, 0, 0, 0.20); font-size: 130px; font-family: Galmuri11; font-weight: 700; word-wrap: break-word; margin-top: 14vh">${errorCode} !<br/></span>
-  <span style="color: white; font-size: 70px; font-family: Galmuri11; font-weight: 700; word-wrap: break-word"><br/>${this.comment}</span>
+    <div style="width: 100vw; height: 88vh; position: relative; background: #0000AA; display: flex; align-items: center; flex-direction: column">
+  <span style="color: rgba(0, 0, 0, 0.20); font-size: 130px; font-family: Galmuri11-Bold, serif; font-weight: 700; word-wrap: break-word; margin-top: 14vh">${errorCode} !<br/></span>
+  <span style="color: white; font-size: 70px; font-family: Galmuri11-Bold, serif; font-weight: 700; word-wrap: break-word"><br/>${this.comment}</span>
 </div>
     `;
   };

diff --git a/frontend/src/pages/histories/page.js b/frontend/src/pages/histories/page.js
@@ -0,0 +1,22 @@
+export default function histories($container) {
+    this.$container = $container;
+
+    this.setState = () => {
+        this.render();
+    }
+
+    this.render = () => {
+        if (document.getElementsByTagName("head") !== null) {
+            document.getElementsByTagName("head")[0].insertAdjacentHTML(
+                "beforeend",
+                '<link rel="stylesheet" href="../../../assets/css/histories/one_on_one.css"/>'
+            );
+        }
+        this.$container.innerHTML = `
+        <div class="histories" id="content-wrapper">d
+        </div>
+        `;
+    }
+
+    this.render();
+}
diff --git a/frontend/src/pages/main/page.js b/frontend/src/pages/main/page.js
@@ -12,7 +12,7 @@ export default function Main($container) {
 
   this.render = () => {
     this.$container.innerHTML = `
-    <div style="width: 100vw; height: 100vh; position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center">
+    <div style="width: 100vw; height: 88vh; position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center">
     <div style="font-size: 26px; margin-bottom: 14vh" >ft_transcendence</div>
     <button type="button" class="btn btn-dark" style="margin-bottom: 6px;" id="button">sign in with google</button>
     <button type="button" class="btn btn-dark" style="margin-bottom: 53vh; padding-left: 50px; padding-right: 50px" id="button2">42 login</button>

diff --git a/frontend/src/router.js b/frontend/src/router.js
@@ -1,23 +1,31 @@
 import { routes } from "./constants/routeInfo.js";
 import ErrorPage from "./pages/errorPage.js";
-
+import ErrorHeader from "./header/errorHeader/header.js";
+import { $ }from "./utils/querySelector.js";
 /**
  * @param {HTMLElement} $container
  */
 export default function Router($container) {
   this.$container = $container;
+  let $header = $('#header');
   let currentPage = undefined;
+  let currentHeader = undefined;
 
   const findMatchedRoute = () =>
     routes.find((route) => route.path.test(location.pathname));
 
   const route = () => {
     currentPage = null;
-    const TargetPage = findMatchedRoute()?.element || ErrorPage; // 현재 경로에 따라 렌더링할 컴포넌트를 정의합니다.
-    if (TargetPage === ErrorPage)
+    const TargetPage = findMatchedRoute()?.page || ErrorPage; // 현재 경로에 따라 렌더링할 컴포넌트를 정의합니다.
+    const TargetHeader = findMatchedRoute()?.header || ErrorHeader; // 헤더 컴포넌트도 정의합니다.
+    if (TargetPage === ErrorPage) {
       currentPage = new ErrorPage(this.$container, 401);
-    else
+      currentHeader = new ErrorHeader($header);
+    }
+    else {
       currentPage = new TargetPage(this.$container);
+      currentHeader = new TargetHeader($header);
+    }
   };
 
   const init = () => { // 페이지 이동 시 발생하는 이벤트를 정의합니다.