[Refactor] 인증이 필요없는 할일 목록 컴포넌트 생성 및 적용

src/components/Dashboard/RecentTodos/index.tsx

@@ -6,7 +6,6 @@ import Link from 'next/link';
 
 import { DashboardItemContainer } from '@/components/Dashboard/DashboardItemContainer';
 import { TodoListSkeleton } from '@/components/Skeletons/TodoListSkeleton';
-import { TodoItem } from '@/components/Todos';
 import { Button } from '@/components/common/Button/Button';
 import { Card } from '@/components/common/Card';
 import { NoDataText } from '@/components/common/NoDataText';
@@ -16,6 +15,7 @@ import { useRecentTodosQuery } from '@/hooks/apis/Dashboard/useRecnetTodosQuery'
 import { useGoalsQuery } from '@/hooks/apis/useGoalsQuery';
 import { useSidebarStore } from '@/store/useSidebarStore';
 import { useTodoModalStore } from '@/store/useTodoModalStore';
+import { BasicTodoItem } from '@/components/TodosDetail/TodosDetailContent/TodoProfile/BasicTodoItem';
 
 export const RecentTodos = () => {
   const { todos, isLoading } = useRecentTodosQuery();
@@ -51,12 +51,12 @@ export const RecentTodos = () => {
       ) : (
         <ul>
           {todos.map((todo) => (
-            <TodoItem
+            <BasicTodoItem
               key={todo.todoId}
+              goalColor={todo.goalColor}
+              goalTitle={todo.goalTitle}
               todoTitle={todo.todoTitle}
               todoId={todo.todoId}
-              goalTitle={todo.goalTitle}
-              goalColor={todo.goalColor}
             />
           ))}
         </ul>

src/components/MyPage/MyProfile/index.tsx

@@ -42,7 +42,7 @@ export const MyProfile = () => {
   };
 
   return (
-    <div className="flex-center flex-col gap-16">
+    <div className="flex-center mt-16 flex-col gap-16">
       <div className="relative flex">
         {!isLoading ? (
           profile ? (

src/components/TodosDetail/TodosDetailContent/TodoProfile/BasicTodoItem/index.tsx

@@ -0,0 +1,37 @@
+import { FaListUl } from 'react-icons/fa';
+import { useRouter } from 'next/navigation';
+import { TodoProfileProps } from '..';
+
+interface BasicTodoItemProps extends TodoProfileProps {
+  todoId?: number;
+}
+
+export const BasicTodoItem = ({
+  goalColor,
+  goalTitle,
+  todoTitle,
+  todoId,
+}: BasicTodoItemProps) => {
+  const router = useRouter();
+
+  const handleClick = () => {
+    if (todoId) {
+      router.push(`/todos/${todoId}`);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-16" onClick={handleClick}>
+      <div
+        className="flex-center my-8 size-56 cursor-pointer rounded-16"
+        style={{ backgroundColor: goalColor }}
+      >
+        <FaListUl fill="white" />
+      </div>
+      <div className="flex flex-col items-start">
+        <span className="text-xs-medium text-custom-gray-100">{goalTitle}</span>
+        <span className="text-base-medium">{todoTitle}</span>
+      </div>
+    </div>
+  );
+};

src/components/TodosDetail/TodosDetailContent/TodoProfile/index.tsx

@@ -1,6 +1,6 @@
-import { FaCamera } from 'react-icons/fa6';
+import { BasicTodoItem } from './BasicTodoItem';
 
-interface TodoProfileProps {
+export interface TodoProfileProps {
   goalColor: string | undefined;
   goalTitle: string | undefined;
   todoTitle: string | undefined;
@@ -12,17 +12,10 @@ export const TodoProfile = ({
   todoTitle,
 }: TodoProfileProps) => {
   return (
-    <div className="flex items-center gap-16">
-      <div
-        className="flex-center my-8 size-56 cursor-pointer rounded-16"
-        style={{ backgroundColor: goalColor }}
-      >
-        <FaCamera fill="white" />
-      </div>
-      <div className="flex flex-col items-start">
-        <span className="text-xs-medium text-custom-gray-100">{goalTitle}</span>
-        <span className="text-base-medium">{todoTitle}</span>
-      </div>
-    </div>
+    <BasicTodoItem
+      goalColor={goalColor}
+      goalTitle={goalTitle}
+      todoTitle={todoTitle}
+    />
   );
 };

src/components/UserProfile/UserProfileContent/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useUserProfileQuery } from '@/hooks/apis/Auth/useUserProfileQuery';
 import { Spinner } from '@/components/common/Spinner';
 
@@ -11,6 +12,12 @@ interface UserProfileContent {
 export const UserProfileContent = ({ userId }: UserProfileContent) => {
   const { completeResponses, isLoading } = useUserProfileQuery(Number(userId));
 
+  const router = useRouter();
+
+  const handleClick = (completeId: number) => {
+    router.push(`/completes/${completeId}`);
+  };
+
   if (isLoading) {
     return (
       <div className="flex min-h-screen items-center justify-center">
@@ -31,6 +38,7 @@ export const UserProfileContent = ({ userId }: UserProfileContent) => {
             priority
             src={complete.completePic}
             alt="인증한 이미지"
+            onClick={() => handleClick(complete.completeId)}
           />
         ) : (
           <div

src/components/UserProfile/UserProfileHeader/index.tsx

@@ -32,7 +32,7 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
   };
 
   return (
-    <>
+    <div className="flex flex-col gap-16">
       <IoMdClose className="size-24 cursor-pointer" onClick={handleBack} />
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-8">
@@ -56,6 +56,6 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
           {isFollow === true ? '팔로잉' : '팔로우'}
         </Button>
       </div>
-    </>
+    </div>
   );
 };

src/hooks/apis/Auth/useWithdrawal.ts

@@ -1,18 +1,21 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 import { DELETE } from '@/apis/services/httpMethod';
 import { WithdrawalResponse } from '@/types/response';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { notify } from '@/store/useToastStore';
-import { useLogout } from '@/hooks/useLogout';
 
 export const useWithdrawal = () => {
-  const { logout } = useLogout();
+  const queryClient = useQueryClient();
+  const router = useRouter();
 
   return useMutation({
     mutationFn: () => DELETE<WithdrawalResponse>(API_ENDPOINTS.AUTH.WITHDRAWAL),
     onSuccess: () => {
       notify('success', '회원탈퇴에 성공하였습니다.', 3000);
-      logout();
+      document.cookie = 'token=; max-age=0; path=/;';
+      queryClient.clear();
+      router.push('/signin');
     },
     onError: (error) => {
       notify('error', '회원탈퇴에 실패하였습니다.', 3000);

src/hooks/apis/Follow/useDeleteFollowMutation.ts

@@ -1,22 +1,16 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { POST } from '@/apis/services/httpMethod';
+import { DELETE } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { DeleteFollowResponse, UserProfileResponse } from '@/types/response';
 import { notify } from '@/store/useToastStore';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 
-interface FollowId {
-  userId: number;
-}
-
 export const useDeleteFollowMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (userId: number) =>
-      POST<DeleteFollowResponse, FollowId>(
-        API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId),
-      ),
+      DELETE<DeleteFollowResponse>(API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId)),
     onMutate: async (userId) => {
       const previousData = queryClient.getQueriesData<UserProfileResponse>({
         queryKey: [QUERY_KEYS.USER_PROFILE, userId],