feat(#43): MenuList 컴포넌트 생성 및 메뉴 리스트 상수화

Author: wkdtnqls0506

src/app/member/profile/_components/MenuList/MenuList.css.ts

@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic, typography } from "@/styles";
+
+export const wrapper = style({
+  padding: "1.6rem 0",
+});
+
+export const list = style({
+  padding: "1.4rem 0",
+});
+
+export const menuItem = style({
+  ...typography.body1Sb,
+  color: semantic.text.normal,
+});

src/app/member/profile/_components/MenuList/MenuList.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+
+import { VStack } from "@/components/ui/Stack";
+
+import { MENU_LIST } from "../../_constants/menuList.constants";
+import * as styles from "./MenuList.css";
+
+export const MenuList = () => {
+  return (
+    <>
+      <VStack as='ul' gap={8} className={styles.wrapper}>
+        {MENU_LIST.map(menu => (
+          <li key={menu.id} className={styles.list}>
+            {menu.isLogout ? (
+              <button type='button' className={styles.menuItem}>
+                {menu.label}
+              </button>
+            ) : (
+              <Link href={menu.link!} className={styles.menuItem}>
+                {menu.label}
+              </Link>
+            )}
+          </li>
+        ))}
+      </VStack>
+      {/* TODO: 로그아웃시 나타날 모달 연결 */}
+    </>
+  );
+};

src/app/member/profile/_components/MenuList/index.ts

@@ -0,0 +1 @@
+export { MenuList } from "./MenuList";

src/app/member/profile/_constants/menuList.constants.ts

@@ -0,0 +1,7 @@
+// TODO: 노션, 인스타 링크 전달받으면 수정
+export const MENU_LIST = [
+  { id: "notice", label: "공지사항", link: "/" },
+  { id: "customer_service", label: "고객센터", link: "/" },
+  { id: "guide", label: "잇다 이용가이드", link: "/" },
+  { id: "logout", label: "로그아웃", isLogout: true },
+];