#98 fix: 코드리뷰 반영

src/app/mypage/page.tsx

@@ -1,6 +1,6 @@
 import { auth } from '@/auth'
-import MainMenu from '@/components/HamburgerMenu/Menu/MainMenu'
-import ServiceMenu from '@/components/HamburgerMenu/Menu/Service'
+import MenuLink from '@/components/Menu/MenuLink'
+import ExternalLinkContainer from '@/components/Menu/ExternalLinkContainer'
 import Header from '@/components/Header'
 import PinIcon from 'public/icons/sketchIcons-4.svg'
 import ClipIcon from 'public/icons/sketchIcons-paperclip.svg'
@@ -26,19 +26,19 @@ const MyPage = async () => {
       <div className="my-7 h-[6px] w-full bg-gray-100" />
       <div className="mx-4">
         <div className="flex flex-col gap-3 pl-3">
-          <MainMenu
+          <MenuLink
             icon={<ClipIcon />}
             text="프로필 수정"
             linkTo="/mypage/profileEdit"
           />
-          <MainMenu
+          <MenuLink
             icon={<PinIcon />}
             text="내 보드 목록"
             linkTo="/mypage/boards"
           />
         </div>
         <div className="my-[26px] h-px w-full bg-gray-200" />
-        <ServiceMenu className="gap-5 pl-3" />
+        <ExternalLinkContainer className="gap-5 pl-3" />
       </div>
     </div>
   )

src/components/HamburgerMenu/index.tsx

@@ -3,7 +3,7 @@
 import HamburgerIcon from 'public/icons/hamburger.svg'
 import { useState } from 'react'
 import Drawer from './Drawer'
-import Menu from './Menu'
+import Menu from '../Menu'
 import { DrawerProvider } from './DrawerContext'
 
 const Hamburger = ({

src/components/HamburgerMenu/Menu/Service.tsx → src/components/Menu/ExternalLinkContainer.tsx

@@ -1,32 +1,35 @@
 import Link from 'next/link'
 import { twMerge } from 'tailwind-merge'
 
-const Menu = ({ text, linkTo }: { text: string; linkTo: string }) => (
+const ExternalLink = ({ text, linkTo }: { text: string; linkTo: string }) => (
   <Link className="cursor-pointer text-sm text-gray-700" href={linkTo}>
     {text}
   </Link>
 )
 
-const ServiceMenu = ({
+const ExternalLinkContainer = ({
   className = '',
 }: {
   className?: React.ComponentProps<'div'>['className']
 }) => (
   <div className={twMerge('flex flex-col gap-3 pl-[30px]', className)}>
-    <Menu
+    <ExternalLink
       text="POLABO 소개"
       linkTo="https://hwanheejung.notion.site/POLABO-39ac5a850dcb46bd83168043acea5bbc?pvs=74"
     />
-    <Menu
+    <ExternalLink
       text="서비스 이용약관"
       linkTo="https://hwanheejung.notion.site/POLABO-292cb07b2fd74d7488aa4b684c67eb9a?pvs=74"
     />
-    <Menu
+    <ExternalLink
       text="개인정보 처리방침"
       linkTo="https://hwanheejung.notion.site/POLABO-3c07098b731e419a92da9916c81c35f1"
     />
-    <Menu text="문의하기" linkTo="https://forms.gle/ya9HVMSJWVSKYyV77" />
+    <ExternalLink
+      text="문의하기"
+      linkTo="https://forms.gle/ya9HVMSJWVSKYyV77"
+    />
   </div>
 )
 
-export default ServiceMenu
+export default ExternalLinkContainer

src/components/HamburgerMenu/Menu/MainMenu.tsx → src/components/Menu/MenuLink.tsx

@@ -1,25 +1,22 @@
 import Link from 'next/link'
 import { ReactNode } from 'react'
 
-const MainMenu = ({
+const MenuLink = ({
   icon,
   text,
   linkTo,
-  onClick = () => {},
 }: {
   icon: ReactNode
   text: string
   linkTo: string
-  onClick?: React.ComponentProps<'a'>['onClick']
 }) => (
   <Link
     href={linkTo}
     className="flex cursor-pointer items-center gap-[6px] text-gray-700"
-    onClick={onClick}
   >
     {icon}
     <span className="text-md font-semiBold">{text}</span>
   </Link>
 )
 
-export default MainMenu
+export default MenuLink

src/components/HamburgerMenu/Menu/index.tsx → src/components/Menu/index.tsx

@@ -6,10 +6,10 @@ import PersonIcon from 'public/icons/person.svg'
 import PinIcon from 'public/icons/pinFilled.svg'
 import PolaroidIcon from 'public/icons/polaroid.svg'
 import { useState } from 'react'
-import Modal from '../../Modal'
-import { useDrawer } from '../DrawerContext'
-import MainMenu from './MainMenu'
-import ServiceMenu from './Service'
+import Modal from '../Modal'
+import { useDrawer } from '../HamburgerMenu/DrawerContext'
+import MenuLink from './MenuLink'
+import ExternalLinkContainer from './ExternalLinkContainer'
 
 const Profile = () => {
   const { data: session, status } = useSession()
@@ -66,23 +66,22 @@ const Menu = () => {
     <div className="flex h-full flex-col pb-[53px] pt-[58px]">
       <div className="mt-5 flex flex-col gap-4 pl-[28px]">
         <Profile />
-        <MainMenu
-          icon={<PolaroidIcon />}
-          text="POLABO 메인"
-          linkTo="/"
+        <div
           onClick={() => {
             if (pathName === '/') {
               setClose()
             }
           }}
-        />
+        >
+          <MenuLink icon={<PolaroidIcon />} text="POLABO 메인" linkTo="/" />
+        </div>
         {status === 'authenticated' && (
-          <MainMenu icon={<PinIcon />} text="마이페이지" linkTo="/mypage" />
+          <MenuLink icon={<PinIcon />} text="마이페이지" linkTo="/mypage" />
         )}
       </div>
 
       <Divider />
-      <ServiceMenu />
+      <ExternalLinkContainer />
 
       {status === 'authenticated' && <Logout />}
     </div>