refactor: 설정 페이지 구조 변경

makchamakers · Oct 22, 2023 · a2ff30b · a2ff30b
1 parent 4fccaaa
commit a2ff30b
Showing 1 changed file with 22 additions and 44 deletions.
diff --git a/src/app/setting/page.tsx b/src/app/setting/page.tsx
@@ -1,45 +1,26 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-
 'use client';
 
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import NavigationBar from '@/components/NavigationBar';
 import ArrowIcon from './ArrowIcon';
 import styled from 'styled-components';
-import NavigationBar from '@/components/NavigationBar';
 
-const menu = ['즐겨찾기 관리', '알람 주기 관리'];
+const menu = [
+  { label: '즐겨찾기 관리', href: '/setting/favorites' },
+  { label: '알림 주기 관리', href: '/setting/alarm' },
+];
 
 export default function setting() {
-  const router = useRouter();
-
-  const navigateToMenu = (text: string) => {
-    const [favorite, alarm] = menu;
-
-    if (text === favorite) router.push('/setting/favorites');
-    if (text === alarm) router.push('/setting/alarm');
-  };
-
-  const handleMenuClick = (e: React.MouseEvent<HTMLLIElement>) => {
-    const target = e.target as HTMLLIElement;
-    const text = target.textContent;
-
-    if (text) {
-      navigateToMenu(text);
-    }
-  };
-
   return (
     <Container>
       <Title>설정</Title>
       <main>
-        <ul>
-          {menu.map((item, index) => (
-            <li key={index} onClick={handleMenuClick}>
-              <span>{item}</span>
-              <ArrowIcon />
-            </li>
-          ))}
-        </ul>
+        {menu.map(({ label, href }, index) => (
+          <Link key={index} href={href}>
+            <span>{label}</span>
+            <ArrowIcon />
+          </Link>
+        ))}
       </main>
       <NavigationBar />
     </Container>
@@ -50,19 +31,16 @@ const Container = styled.div`
   padding: 0 16px;
   > main {
     padding-top: 16px;
-    > ul {
-      list-style: none;
-      > li {
-        display: flex;
-        justify-content: space-between;
-        padding: 20px 16px;
-        font-size: 16px;
-        line-height: 22px;
-        border-bottom: 1px solid #ddd;
-      }
-      li:last-child {
-        border-bottom: none;
-      }
+    > * {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px 16px;
+      font-size: 16px;
+      line-height: 22px;
+      border-bottom: 1px solid #ddd;
+    }
+    > :last-child {
+      border-bottom: none;
     }
   }
 `;