From 2db6a46fb955f9ca04902d4dd5d7b0d73c5083f5 Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 11 Jun 2024 16:34:03 +0900
Subject: [PATCH 1/4] feat : implemented header component except for buttons
 for future integrations with button component

---
 components/header/header.css | 57 ++++++++++++++++++++++++++++++++++++
 components/header/header.js  | 25 ++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 components/header/header.css
 create mode 100644 components/header/header.js

diff --git a/components/header/header.css b/components/header/header.css
new file mode 100644
index 0000000..a9a3f95
--- /dev/null
+++ b/components/header/header.css
@@ -0,0 +1,57 @@
+: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 solid #d3d3d3;
+}
+
+header {
+  background-color: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* Background color with 80% opacity */
+  width: 80%;
+  margin: 0 auto; /* Center the content horizontally */
+}
+
+.container {
+  width: 80%;
+}
+
+header img {
+  width: 4rem;
+  height: 2rem;
+}
+
+header span {
+  font-size: 2rem;
+  margin-left: 1rem;
+}
+
+header img,
+span {
+  vertical-align: middle;
+}
+
+.discord-join-button {
+  height: 3rem;
+  font-size: 1.6rem;
+  padding: 1rem;
+  color: black;
+}
+.discord-join-button:link {
+  text-decoration: none;
+}
+
+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
new file mode 100644
index 0000000..462ca14
--- /dev/null
+++ b/components/header/header.js
@@ -0,0 +1,25 @@
+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>
+    <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);

From 18518518467cfffa0ab8224648bd06f48936d75e Mon Sep 17 00:00:00 2001
From: SamTheKorean <bumsuyi@gmail.com>
Date: Tue, 11 Jun 2024 23:34:28 +0900
Subject: [PATCH 2/4] feat : completely integrated link-button component into
 header component

---
 components/header/header.css | 22 +++++++---------------
 components/header/header.js  | 17 ++++++++++-------
 index.html                   | 11 +----------
 main.js                      |  1 +
 4 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/components/header/header.css b/components/header/header.css
index a9a3f95..c69d713 100644
--- a/components/header/header.css
+++ b/components/header/header.css
@@ -9,18 +9,16 @@
 }
 
 header {
-  background-color: rgba(
-    255,
-    255,
-    255,
-    0.8
-  ); /* Background color with 80% opacity */
+  background-color: rgba(255, 255, 255, 0.8); /* Background color with 80% opacity */
   width: 80%;
   margin: 0 auto; /* Center the content horizontally */
 }
 
 .container {
-  width: 80%;
+  display: flex;
+  justify-content: space-between; /* Space between logo and buttons */
+  align-items: center;
+  margin: 0 auto;
 }
 
 header img {
@@ -38,14 +36,8 @@ span {
   vertical-align: middle;
 }
 
-.discord-join-button {
-  height: 3rem;
-  font-size: 1.6rem;
-  padding: 1rem;
-  color: black;
-}
-.discord-join-button:link {
-  text-decoration: none;
+.buttons-container {
+  display: flex;
 }
 
 a {
diff --git a/components/header/header.js b/components/header/header.js
index 462ca14..b3c986d 100644
--- a/components/header/header.js
+++ b/components/header/header.js
@@ -1,15 +1,18 @@
+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>
-    <div>
-      
+      <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>
 `;
diff --git a/index.html b/index.html
index b160ec6..db2a3cc 100644
--- a/index.html
+++ b/index.html
@@ -234,16 +234,7 @@
   </head>
 
   <body>
-    <header>
-      <div>
-        <img src="images/logo.png" alt="#" />
-        <span>달레 스터디</span>
-      </div>
-      <div>
-        <link-button size="small" variant="ghost" href="#join-instruction-container">참여방법 안내</link-button>
-        <link-button size="small" variant="secondary" href="https://discord.gg/43UkheRV">디스코드 참여하기</link-button>
-      </div>
-    </header>
+    <header-component></header-component>
 
     <div id="intro-container">
       <div class="hero">
diff --git a/main.js b/main.js
index 54ed34d..8cf468f 100644
--- a/main.js
+++ b/main.js
@@ -3,3 +3,4 @@ import "./components/footer-link/footer-link.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"

From 66f984995d49b704474c848d0fb366daf0d73e0a Mon Sep 17 00:00:00 2001
From: Sam Lee <104721736+SamTheKorean@users.noreply.github.com>
Date: Wed, 12 Jun 2024 09:54:04 +0900
Subject: [PATCH 3/4] modify border-bottom css to use var(--border)

Co-authored-by: Dale Seo <5466341+DaleSeo@users.noreply.github.com>
---
 components/header/header.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/header/header.css b/components/header/header.css
index c69d713..938c574 100644
--- a/components/header/header.css
+++ b/components/header/header.css
@@ -5,7 +5,7 @@
   width: 100%;
   z-index: 1000; /* Ensure the header appears above other content */
   padding: 20px;
-  border-bottom: 0.1rem solid #d3d3d3;
+  border-bottom: 0.1rem var(--border);
 }
 
 header {

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

---
 components/header.js         | 68 ++++++++++++++++++++++++++++++++++++
 components/header/header.css | 49 --------------------------
 components/header/header.js  | 28 ---------------
 main.js                      |  3 +-
 4 files changed, 70 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..e51bbfe
--- /dev/null
+++ b/components/header.js
@@ -0,0 +1,68 @@
+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;
+    }
+  </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"
+