From 5d59880a85c36e959e7853a103b7663113f0e3ad Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Thu, 13 Jun 2024 22:53:44 +0900
Subject: [PATCH] fix : apply feedback in pull request

---
 components/header.js         | 73 ++++++++++++++++++++++++++++++++++++
 components/header/header.css | 49 ------------------------
 components/header/header.js  | 28 --------------
 main.js                      |  3 +-
 4 files changed, 75 insertions(+), 78 deletions(-)
 create mode 100644 components/header.js
 delete mode 100644 components/header/header.css
 delete mode 100644 components/header/header.js

diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000..972cad8
--- /dev/null
+++ b/components/header.js
@@ -0,0 +1,73 @@
+import "./link-button/link-button.js";
+
+const template = document.createElement("template");
+template.innerHTML = `
+  <style>
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      padding: 20px 0;
+      width: 100%;
+      border-bottom: 1px solid #D3D3D3;
+      background-color: rgba(255, 255, 255, 0.8);
+    }
+
+    header {
+      width: 80%;
+      margin: 0 auto;
+      justify-content: space-between;
+      display: flex;
+      align-items: center;
+    }
+
+    .buttons-container {
+      display: flex;
+    }
+
+    a {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      text-decoration: none;
+    }
+
+    a img {
+      width: 45px;
+      height: 22.5px;
+    }
+
+    a span {
+      font-size: 20px;
+      font-weight: 500;
+      color: black;
+    }
+
+    a img,
+    a span {
+      vertical-align: middle;
+    }
+  </style>
+  <header>
+      <a href="/">
+        <img src="images/logo.png" alt="logo" />
+        <span>달레 스터디</span>
+      </a>
+    
+      <div class="buttons-container">
+        <link-button href="#join-instruction-container" size="large" variant="primary">참여방법 안내</link-button>
+        <link-button href="https://discord.gg/43UkheRV" size="large" variant="secondary">디스코드 참여하기</link-button>
+      </div>
+  </header>
+`;
+
+class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+}
+
+customElements.define("header-component", HeaderComponent);
+
diff --git a/components/header/header.css b/components/header/header.css
deleted file mode 100644
index 938c574..0000000
--- a/components/header/header.css
+++ /dev/null
@@ -1,49 +0,0 @@
-:host {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1000; /* Ensure the header appears above other content */
-  padding: 20px;
-  border-bottom: 0.1rem var(--border);
-}
-
-header {
-  background-color: rgba(255, 255, 255, 0.8); /* Background color with 80% opacity */
-  width: 80%;
-  margin: 0 auto; /* Center the content horizontally */
-}
-
-.container {
-  display: flex;
-  justify-content: space-between; /* Space between logo and buttons */
-  align-items: center;
-  margin: 0 auto;
-}
-
-header img {
-  width: 4rem;
-  height: 2rem;
-}
-
-header span {
-  font-size: 2rem;
-  margin-left: 1rem;
-}
-
-header img,
-span {
-  vertical-align: middle;
-}
-
-.buttons-container {
-  display: flex;
-}
-
-a {
-  font-size: 1.6rem;
-  font-weight: medium;
-  margin-right: 4rem;
-  color: black;
-  text-decoration: none;
-}
diff --git a/components/header/header.js b/components/header/header.js
deleted file mode 100644
index b3c986d..0000000
--- a/components/header/header.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import '../link-button/link-button.js';
-
-const template = document.createElement('template');
-template.innerHTML = `
-  <link rel="stylesheet" href="./components/header/header.css">
-  <header>
-    <div class="container">
-      <a href="#">
-        <img src="images/logo.png" alt="logo" />
-        <span>달레 스터디</span>
-      </a>
-      <div class="buttons-container">
-        <link-button href="#join-instruction-container" size="large" variant="primary">참여방법 안내</link-button>
-        <link-button href="https://discord.gg/43UkheRV" size="large" variant="secondary">디스코드 참여하기</link-button>
-      </div>
-    </div>
-  </header>
-`;
-
-class HeaderComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-}
-
-customElements.define('header-component', HeaderComponent);
diff --git a/main.js b/main.js
index 8cf468f..5a7d733 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,7 @@
 import "./components/divider/divider.js";
 import "./components/footer-link/footer-link.js";
+import "./components/header.js"
 import "./components/hero/hero.js";
 import "./components/link-button/link-button.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";
-import "./components/header/header.js"
+