feat : implemented styling for each state and refactor the code for b…

…etter readibility

components/header.js

@@ -53,25 +53,17 @@ class Header extends HTMLElement {
         background-color: var(--bg-100);
       }
 
-      *:focus {
-        border: 1px solid black;
-      }
-
       header {
         display: flex;
-        margin: 0 27px 0;
+        margin: 0 27px;
         justify-content: space-between;
         align-items: center;
 
         @media only screen and (min-width: 768px) {
-          flex-direction: row !important;
-        }
-        
-        @media only screen and (min-width: 1024px) {
           width: 80%;
           margin: 0 auto;
+          flex-direction: row !important;
         }
-        
       }
 
       header.vertical {
@@ -105,7 +97,8 @@ class Header extends HTMLElement {
         gap: 10px;
         align-items: center;
         text-decoration: none;
-
+        padding: 10px 20px;
+  
         span {
           display: none;
           
@@ -119,7 +112,7 @@ class Header extends HTMLElement {
           }
         }
 
-        img {
+        svg {
           width: 41px;
           height: 20.5px;
           
@@ -130,34 +123,79 @@ class Header extends HTMLElement {
         }
       }
 
+      a:focus {
+        outline: 3px solid #846DE9;
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a:focus-visible {
+        outline: 3px solid #24EACA;
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      a:hover {
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+      }
+
+      a:active svg path {
+        fill: #160B46;
+      }
+
+      a:active span {
+        color: #846DE9;
+      }
+
       button {
         position: relative;
         background-color: var(--bg-200);
         border: none;
-        display: flex;
+        display: flex;      
         align-items: center;
         cursor: pointer;
-        padding: 0;
-        width: 18px;
-        height: 18px;
+        width: 48px;
+        height: 40px;
 
         @media only screen and (min-width: 768px) {
           display: none;
         }
       }
 
-      button > img {
+      button > svg {
+        width: 18px;
+        height: 17px;
+        top: 12px;
+        left: 14px;
         position: absolute;
-        top: 0;
-        left: 0;
         opacity: 1;
         transition: opacity 200ms ease-in-out;
       }
 
-      button > img.hide {
+      button > svg.hide {
         opacity: 0;
       }
 
+      button:focus {
+        outline: 3px solid #846DE9;
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+
+      button:focus-visible {
+        outline: 3px solid #24EACA;
+        outline-offset: 2px;
+        border-radius: 10px;
+      }
+    
+      button:hover {
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
+      }
+
+      button:active svg path {
+        fill: #846DE9;
+      }
+
       .header-content {
         display: flex;
         justify-content: space-between;
@@ -171,41 +209,30 @@ class Header extends HTMLElement {
       <header>
         <div class="header-content">
           <a href="/">
-            <img src="images/logo.png" alt="logo" />
+            <svg id="logo" width="45" height="22" viewBox="0 0 45 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14.84 19.03L0.29 12.61V10.51L14.84 3.25V6.76L4.82 11.41L14.84 15.52V19.03ZM28.408 0.579999L20.428 22H16.378L24.358 0.579999H28.408ZM29.8505 15.52L39.8705 11.41L29.8505 6.76V3.25L44.4005 10.51V12.61L29.8505 19.03V15.52Z" fill="url(#paint0_linear_278_133)" />
+              <defs>
+                <linearGradient id="paint0_linear_278_133" x1="-1" y1="9.51219" x2="46" y2="9.51219" gradientUnits="userSpaceOnUse">
+                  <stop stop-color="#24EACA" />
+                  <stop offset="1" stop-color="#846DE9" />
+                </linearGradient>
+              </defs>
+            </svg>
             <span>달레 스터디</span>
           </a>
           <button>
-            <img
-              width="100%"
-              height="100%"
-              id="menuIcon"
-              src="images/menu.png"
-              alt="menu open icon"
-            />
-            <img
-              width="100%"
-              height="100%"
-              id="closeIcon"
-              class="hide"
-              src="images/cancel.png"
-              alt="menu close icon"
-            />
+            <svg id="menuIcon" width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M0 0H18V2.83333H0V0ZM0 7.08333H18V9.91667H0V7.08333ZM0 14.1667H18V17H0V14.1667Z" fill="#160B46" />
+            </svg>
+            <svg id="closeIcon" class="hide" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M8.46 7.54208L14 13.0821V14.5421H12.54L7 9.00208L1.46 14.5421H0V13.0821L5.54 7.54208L0 2.00208V0.542084H1.46L7 6.08208L12.54 0.542084H14V2.00208L8.46 7.54208Z" fill="#160B46" />
+            </svg>
           </button>
         </div>
 
         <div class="buttons-container">
-          <ds-button-link
-            href="#steps-section"
-            size="small"
-            variant="ghost"
-            >참여방법 안내</ds-button-link
-          >
-          <ds-button-link
-            href="https://discord.gg/6TwzdnW6ze"
-            size="small"
-            variant="primary"
-            >디스코드 참여하기</ds-button-link
-          >
+          <ds-button-link href="#steps-section" size="small" variant="ghost">참여방법 안내</ds-button-link>
+          <ds-button-link href="https://discord.gg/6TwzdnW6ze" size="small" variant="primary">디스코드 참여하기</ds-button-link>
         </div>
       </header>
     `;