From 247b75b4e9fb051b629dd8e87c8c2fad76164bcd Mon Sep 17 00:00:00 2001
From: LeeJaein <devxoox1106@gmail.com>
Date: Thu, 16 Apr 2026 17:20:10 +0900
Subject: [PATCH 1/2] =?UTF-8?q?style(#237):=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B5=9C=EB=8C=80=20=EB=84=88=EB=B9=84=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/taskmate/my/page.tsx        | 8 +++++---
 src/components/my/MyProfileForm.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/taskmate/my/page.tsx b/src/app/taskmate/my/page.tsx
index a36b5e2d..39e2deb1 100644
--- a/src/app/taskmate/my/page.tsx
+++ b/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] mx-auto w-full max-w-[335px]">
+      <AsyncBoundary>
+        <MyProfileForm />
+      </AsyncBoundary>
+    </div>
   );
 };
 
diff --git a/src/components/my/MyProfileForm.tsx b/src/components/my/MyProfileForm.tsx
index 902aeeef..de3397c4 100644
--- a/src/components/my/MyProfileForm.tsx
+++ b/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>

From 38df42495fcdb58d650db178f59b7f5424496ee9 Mon Sep 17 00:00:00 2001
From: LeeJaein <devxoox1106@gmail.com>
Date: Thu, 16 Apr 2026 17:41:35 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat(#237):=20=EB=84=A4=EB=B9=84=EA=B2=8C?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=B0=94=20=ED=9C=B4=EC=A7=80=ED=86=B5=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A7=88?=
 =?UTF-8?q?=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/taskmate/my/page.tsx                             | 2 +-
 src/app/taskmate/trash/page.tsx                          | 2 +-
 src/components/NavigationBar/UserProfile/UserProfile.tsx | 6 +++---
 src/components/NavigationBar/index.tsx                   | 9 +++++++++
 src/components/common/Icon/iconMap.ts                    | 2 ++
 src/components/common/Icon/svg/TrashFill.svg             | 4 ++++
 6 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/components/common/Icon/svg/TrashFill.svg

diff --git a/src/app/taskmate/my/page.tsx b/src/app/taskmate/my/page.tsx
index 39e2deb1..5018a949 100644
--- a/src/app/taskmate/my/page.tsx
+++ b/src/app/taskmate/my/page.tsx
@@ -5,7 +5,7 @@ import MyProfileForm from "@/components/my/MyProfileForm";
 
 const Mypage = () => {
   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>
         <MyProfileForm />
       </AsyncBoundary>
diff --git a/src/app/taskmate/trash/page.tsx b/src/app/taskmate/trash/page.tsx
index 89eb240c..66b0f5c0 100644
--- a/src/app/taskmate/trash/page.tsx
+++ b/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>
diff --git a/src/components/NavigationBar/UserProfile/UserProfile.tsx b/src/components/NavigationBar/UserProfile/UserProfile.tsx
index 8537fcf1..754a62aa 100644
--- a/src/components/NavigationBar/UserProfile/UserProfile.tsx
+++ b/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
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index 772117cb..ffe5e6a3 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/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} />
diff --git a/src/components/common/Icon/iconMap.ts b/src/components/common/Icon/iconMap.ts
index b19f69b2..6a467865 100644
--- a/src/components/common/Icon/iconMap.ts
+++ b/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;
diff --git a/src/components/common/Icon/svg/TrashFill.svg b/src/components/common/Icon/svg/TrashFill.svg
new file mode 100644
index 00000000..937be114
--- /dev/null
+++ b/src/components/common/Icon/svg/TrashFill.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.2999 5C20.9546 5 21.2821 5.0001 21.5225 5.14746C21.657 5.22991 21.7702 5.343 21.8526 5.47754C22 5.71801 22.0001 6.04552 22.0001 6.7002V7.65918C22.0001 8.06828 21.6679 8.40039 21.2589 8.40039C20.4408 8.40061 19.7774 9.06377 19.7774 9.88184V16C19.7774 18.8281 19.7779 20.2424 18.8995 21.1211C18.0208 21.9998 16.6058 22 13.7774 22H10.2217C7.39363 22 5.97928 21.9997 5.10065 21.1211C4.22221 20.2424 4.22174 18.8282 4.22174 16V9.88184C4.22174 9.06364 3.55849 8.40039 2.7403 8.40039C2.3314 8.40015 2.00006 8.06813 2.00006 7.65918V6.7002C2.00006 6.04551 2.00016 5.71801 2.14752 5.47754C2.22998 5.343 2.34306 5.22991 2.4776 5.14746C2.71807 5.00012 3.04559 5 3.70026 5H20.2999ZM9.50006 10C8.94778 10 8.50006 10.4477 8.50006 11V16C8.50006 16.5523 8.94778 17 9.50006 17C10.0523 17 10.5001 16.5523 10.5001 16V11C10.5001 10.4477 10.0523 10 9.50006 10ZM14.5001 10C13.9478 10 13.5001 10.4477 13.5001 11V16C13.5001 16.5523 13.9478 17 14.5001 17C15.0523 17 15.5001 16.5523 15.5001 16V11C15.5001 10.4477 15.0523 10 14.5001 10Z" fill="currentColor"/>
+<path d="M10.0681 2.37059C10.1821 2.26427 10.4332 2.17033 10.7825 2.10332C11.1318 2.03632 11.5597 2 12 2C12.4403 2 12.8682 2.03632 13.2175 2.10332C13.5668 2.17033 13.8179 2.26427 13.9319 2.37059" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>