feat(#237): 네비게이션 바 휴지통 메뉴 추가 및 마이페이지 연결

src/app/taskmate/my/page.tsx

@@ -5,9 +5,11 @@ import MyProfileForm from "@/components/my/MyProfileForm";
 
 const Mypage = () => {
   return (
-    <AsyncBoundary>
-      <MyProfileForm />
-    </AsyncBoundary>
+    <div className="tablet:max-w-[560px] tablet:pl-6 mx-auto w-full max-w-[335px]">
+      <AsyncBoundary>
+        <MyProfileForm />
+      </AsyncBoundary>
+    </div>
   );
 };
 

src/app/taskmate/trash/page.tsx

@@ -5,7 +5,7 @@ import Trash from "@/components/trash";
 
 const TrashPage = () => {
   return (
-    <div className="tablet:max-w-[560px] mx-auto w-full max-w-[335px]">
+    <div className="tablet:max-w-[560px] tablet:pl-6 mx-auto w-full max-w-[335px]">
       <AsyncBoundary>
         <Trash />
       </AsyncBoundary>

src/components/NavigationBar/UserProfile/UserProfile.tsx

@@ -1,5 +1,6 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 import defaultAvatar from "@/assets/images/avatar.png";
 import { Icon } from "@/components/common/Icon";
@@ -12,14 +13,13 @@ export const UserProfile = () => {
   const avatarSrc = profileImageUrl?.trim()
     ? profileImageUrl
     : defaultAvatar.src;
+  const router = useRouter();
 
   return (
     <div
       className="relative flex w-[150px] cursor-pointer items-center justify-start gap-2 rounded-full border border-gray-300 bg-white py-3 pr-4 pl-3"
       role="button"
-      onClick={() => {
-        // @TODO: 마이페이지로 이동
-      }}
+      onClick={() => router.push("/taskmate/my")}
     >
       <div className="relative flex h-10 w-10 shrink-0 items-center justify-center">
         <Image

src/components/NavigationBar/index.tsx

@@ -73,6 +73,15 @@ export const NavigationBar = () => {
                 <Item.Icon name="Home" />
                 <Item.Name>홈</Item.Name>
               </Item.Wrapper>
+              <Item.Wrapper
+                value="trash"
+                onClick={() => {
+                  router.push("/taskmate/trash");
+                }}
+              >
+                <Item.Icon name="TrashFill" />
+                <Item.Name>휴지통</Item.Name>
+              </Item.Wrapper>
             </List.Container>
 
             <Spacing size={12} />

src/components/common/Icon/iconMap.ts

@@ -48,6 +48,7 @@ import Plus from "./svg/Plus.svg";
 import Search from "./svg/Search/Search.svg";
 import Trash from "./svg/Trash.svg";
 import TrashEmpty from "./svg/TrashEmpty.svg";
+import TrashFill from "./svg/TrashFill.svg";
 import User from "./svg/User/User.svg";
 
 export const iconMap = {
@@ -102,6 +103,7 @@ export const iconMap = {
   AlertSuccess,
   Info,
   TrashEmpty,
+  TrashFill,
 } as const;
 
 export type IconName = keyof typeof iconMap;

src/components/my/MyProfileForm.tsx

@@ -67,7 +67,7 @@ const MyProfileForm = () => {
   };
 
   return (
-    <div className="tablet:w-[560px] mx-auto w-[335px]">
+    <div className="mt-20 flex w-full flex-col">
       <p className="tablet:block text-title-3 mb-10 ml-2 hidden font-semibold">
         내 정보 관리
       </p>