Merge pull request #15 from bhyun-kim/main

feat: Create Text Link Component in Footer
DaleStudy · Jun 8, 2024 · 89434e8 · 89434e8
2 parents f5ecd92 + 1b21c2f
commit 89434e8
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/components/footer-link/footer-link.css b/components/footer-link/footer-link.css
@@ -0,0 +1,15 @@
+.footer-link {
+  list-style-type: none;
+  padding: 0;
+}
+.footer-link li {
+  display: inline;
+  margin: 0 10px;
+}
+.footer-link a {
+  text-decoration: none;
+  color: #007bff;
+}
+.footer-link a:hover {
+  text-decoration: underline;
+}
diff --git a/components/footer-link/footer-link.js b/components/footer-link/footer-link.js
@@ -0,0 +1,38 @@
+const template = document.createElement("template");
+template.innerHTML = `
+  <link rel="stylesheet" href="./components/footer-link/footer-link.css">
+  <ul class="footer-link">
+    <li>
+      <a id="link" href="#"><slot></slot></a>
+    </li>
+  </ul>
+`;
+
+class FooterLink extends HTMLElement {
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template.content.cloneNode(true));
+  }
+
+  static get observedAttributes() {
+    return ["href"];
+  }
+
+  constructor() {  
+    this.linkElement = shadow.getElementById("link");  
+    this.updateLink(this.getAttribute("href"));  
+  }  
+
+  attributeChangedCallback(name, oldValue, newValue) {  
+    if (name === "href") {  
+        this.updateLinkHref(newValue);  
+    }  
+  }  
+
+  updateLink(href) {  
+    this.linkElement.setAttribute("href", href);  
+  }  
+}
+
+window.customElements.define("footer-link", FooterLink);
diff --git a/index.html b/index.html
@@ -20,6 +20,8 @@
     />
     <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
     <script src="./main.js" async defer type="module"></script>
+  </head>
+  <body>
 
     <style>
       html {
@@ -494,7 +496,7 @@
           padding-top: 18rem;
         "
       >
-        <span>FAQ</span>
+        <footer-link href="/faq">FAQ</footer-link>
         <div style="display: flex">
           <svg
             xmlns="http://www.w3.org/2000/svg"

diff --git a/main.js b/main.js
@@ -1,3 +1,4 @@
 import "./components/divider/divider.js";
+import "./components/footer-link/footer-link.js";
 import "./components/hero/hero.js";
 import "./components/seo-meta-tag/seo-meta-tag.js";
diff --git a/styles.css b/styles.css
@@ -1,3 +1,15 @@
 * {
   font-family: "Noto Sans KR", sans-serif;
 }
+
+footer {
+  background-color: #efefef;
+  padding-bottom: 10rem;
+  padding-right: 10rem;
+  padding-left: 10rem;
+}
+footer > div {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.6rem;
+}