From f87a947c78a02bb63d346f589a736d4ba0a20815 Mon Sep 17 00:00:00 2001
From: Han Yeong-woo <han@yeongwoo.dev>
Date: Fri, 15 Sep 2023 16:42:31 +0900
Subject: [PATCH] refactor: constant variable for element id

---
 apps/portfolio/src/components/Header.astro | 26 ++++++++++++++--------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/portfolio/src/components/Header.astro b/apps/portfolio/src/components/Header.astro
index 24b3875..8ff3581 100644
--- a/apps/portfolio/src/components/Header.astro
+++ b/apps/portfolio/src/components/Header.astro
@@ -3,15 +3,15 @@ import { listIconPath } from '../icon-path.js';
 import Button from './Button.astro';
 import InternalLink from './InternalLink.astro';
 
-const openNavButtonId = 'open-nav-button';
-const navId = 'nav-menu';
+const OPEN_NAV_BUTTON_ID = 'open-nav-button';
+const NAV_ID = 'nav-menu';
 ---
 
 <header>
   <div>
     <span aria-hidden="true">yeong-woo.<span>han</span></span>
     <Button
-      id={openNavButtonId}
+      id={OPEN_NAV_BUTTON_ID}
       aria-label="탐색 메뉴 열기"
       aria-expanded="false"
       aria-controls="nav-menu"
@@ -22,7 +22,7 @@ const navId = 'nav-menu';
     </Button>
   </div>
 
-  <nav id={navId} class="hidden">
+  <nav id={NAV_ID} class="hidden">
     <ul>
       <li>
         <InternalLink href="/">홈</InternalLink>
@@ -40,22 +40,30 @@ const navId = 'nav-menu';
 <script>
   import { listIconPath, xIconPath } from '../icon-path.js';
 
-  const openNavButton = document.getElementById('open-nav-button');
+  const OPEN_NAV_BUTTON_ID = 'open-nav-button';
+
+  const openNavButton = document.getElementById(OPEN_NAV_BUTTON_ID);
   if (!(openNavButton instanceof HTMLButtonElement)) {
-    throw new Error('Can not find "open-nav-button" element');
+    throw new Error(`Can not find "${OPEN_NAV_BUTTON_ID}" element`);
   }
   const buttonIconPath = openNavButton.getElementsByTagName('path').item(0);
   if (!(buttonIconPath instanceof SVGPathElement)) {
-    throw new Error('Can not find <path> child of "open-nav-button" element');
+    throw new Error(
+      `Can not find <path> child of "${OPEN_NAV_BUTTON_ID}" element`,
+    );
   }
 
   const controlledId = openNavButton.getAttribute('aria-controls');
   if (controlledId === null) {
-    throw new Error('There is no controlled element by "open-nav-button"');
+    throw new Error(
+      `There is no controlled element by "${OPEN_NAV_BUTTON_ID}"`,
+    );
   }
   const nav = document.getElementById(controlledId);
   if (!(nav instanceof HTMLElement)) {
-    throw new Error('Can not find "nav-menu" element');
+    throw new Error(
+      `Can not find "${controlledId}" element that controlled by "${OPEN_NAV_BUTTON_ID}"`,
+    );
   }
 
   openNavButton.addEventListener('click', function () {