diff --git a/src/app/(route)/completes/[completeId]/page.tsx b/src/app/(route)/completes/[completeId]/page.tsx
index 979be568..f6568cc3 100644
--- a/src/app/(route)/completes/[completeId]/page.tsx
+++ b/src/app/(route)/completes/[completeId]/page.tsx
@@ -15,7 +15,7 @@ export default async function CompletePage({
   const { completeId } = await params;
 
   return (
-    <PageContainer className="!px-0">
+    <PageContainer header={false} className="!px-0">
       <CompleteHeader />
       <CompletePost completeId={completeId} />
 
diff --git a/src/app/(route)/todos/[todoId]/page.tsx b/src/app/(route)/todos/[todoId]/page.tsx
index 8b4aaecf..873c1230 100644
--- a/src/app/(route)/todos/[todoId]/page.tsx
+++ b/src/app/(route)/todos/[todoId]/page.tsx
@@ -14,7 +14,7 @@ export default async function todoDetail({
   const { todoId } = await params;
 
   return (
-    <PageContainer>
+    <PageContainer header={false}>
       <TodosDetailHeader todoId={todoId} />
       <TodosDetailContent todoId={todoId} />
     </PageContainer>
diff --git a/src/components/Complete/Comments/CommentInput.tsx b/src/components/Complete/Comments/CommentInput.tsx
index 2caf9cb4..4bb59b24 100644
--- a/src/components/Complete/Comments/CommentInput.tsx
+++ b/src/components/Complete/Comments/CommentInput.tsx
@@ -1,11 +1,13 @@
 'use client';
 
 import { useState } from 'react';
+
 import { useQueryClient } from '@tanstack/react-query';
 import { FaArrowUp } from 'react-icons/fa6';
-import { GetCommentRequest } from '@/types/Comment';
-import { useCreateComment } from '@/hooks/apis/Comment/useCreateCommentQuery';
+
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { useCreateComment } from '@/hooks/apis/Comment/useCreateCommentQuery';
+import { GetCommentRequest } from '@/types/Comment';
 import { GetCompleteDetailResponse } from '@/types/Completes';
 import { cn } from '@/utils/className';
 
@@ -55,7 +57,6 @@ export const CommentInput = (props: CommentInputProps) => {
           },
         );
       },
-      onError: () => {},
     });
   };
 
@@ -70,7 +71,7 @@ export const CommentInput = (props: CommentInputProps) => {
     : 'text-custom-gray-100 cursor-not-allowed';
 
   return (
-    <div className="inset-x-0 bottom-0 h-76 gap-10 px-16 py-12 shadow">
+    <div className="fixed inset-x-0 bottom-0 h-76 gap-10 px-16 py-12 shadow">
       <div className="relative flex items-center justify-center">
         <input
           type="text"
diff --git a/src/components/Complete/Comments/CommentItem.tsx b/src/components/Complete/Comments/CommentItem.tsx
index 89fb44a3..6993c8ed 100644
--- a/src/components/Complete/Comments/CommentItem.tsx
+++ b/src/components/Complete/Comments/CommentItem.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-
 import { usePutComment } from '@/hooks/apis/Comment/usePutCommentQuery';
 import { useDeleteComment } from '@/hooks/apis/Comment/useDeleteCommentQuery';
 import { PutCommentRequest } from '@/types/Comment';
 import { CommentTypes } from '@/types/data';
 import { PostProfile } from '@/components/Follows/Post/PostProfile';
+import { ConfirmationModal } from '@/components/ConfirmationModal';
 import { CommentOptions } from './CommentOptions';
 
 interface CommentItemProps {
@@ -21,6 +21,7 @@ export const CommentItem = (props: CommentItemProps) => {
 
   const [isEditing, setIsEditing] = useState(false);
   const [editedContent, setEditedContent] = useState(comment.content);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const handleSave = () => {
     if (editedContent.trim() === '') return;
@@ -49,20 +50,27 @@ export const CommentItem = (props: CommentItemProps) => {
   };
 
   const handleDelete = () => {
-    if (confirm('정말로 이 댓글을 삭제하시겠습니까?')) {
-      deleteCommentMutation.mutate(comment.commentId);
-    }
+    setIsModalOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    deleteCommentMutation.mutate(comment.commentId);
+    setIsModalOpen(false);
+  };
+
+  const handleCancelDelete = () => {
+    setIsModalOpen(false);
   };
 
   return (
     <div className="relative my-12 bg-gray-50 px-16 py-20 shadow">
-      <div className="">
+      <div>
         <div className="-ml-12 flex items-start justify-between rounded">
           <PostProfile
             createdAt={comment.createdAt}
             username={comment.userName}
             profilePic={comment.profileImage}
-            userId={2} //userId 또 받아야댐 ㅠ
+            userId={2} //userId 받아와야함 ㅠ
           />
           <div className="mt-10">
             <CommentOptions
@@ -87,6 +95,17 @@ export const CommentItem = (props: CommentItemProps) => {
           </p>
         )}
       </div>
+
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={handleCancelDelete}
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+        title="댓글 삭제"
+        description="정말로 이 댓글을 삭제하시겠습니까?"
+        confirmText="예"
+        cancelText="아니오"
+      />
     </div>
   );
 };
diff --git a/src/components/Complete/Comments/index.tsx b/src/components/Complete/Comments/index.tsx
index d7e6a9be..dae637bd 100644
--- a/src/components/Complete/Comments/index.tsx
+++ b/src/components/Complete/Comments/index.tsx
@@ -2,9 +2,9 @@
 
 import { useRouter } from 'next/navigation';
 
-import { FollowsSkeleton } from '@/components/Skeletons/FollowsSkeleton';
 import { useGetCompleteDetailQuery } from '@/hooks/apis/Complete/useGetCompleteDetailQuery';
 
+import { Spinner } from '@/components/common/Spinner';
 import { CommentInput } from './CommentInput';
 import { CommentList } from './CommentList';
 
@@ -27,7 +27,9 @@ export const CompleteComments = (props: CompleteCommentsProps) => {
   return (
     <div className="relative">
       {isLoading ? (
-        <FollowsSkeleton />
+        <span className="flex-center">
+          <Spinner className="size-18" />
+        </span>
       ) : complete ? (
         <div className="mx-auto w-full max-w-3xl flex-col px-4">
           <span className="mx-8 text-sm-medium text-custom-gray-100">
diff --git a/src/components/Complete/Post/index.tsx b/src/components/Complete/Post/index.tsx
index 1e173ddb..fbe7c968 100644
--- a/src/components/Complete/Post/index.tsx
+++ b/src/components/Complete/Post/index.tsx
@@ -6,7 +6,7 @@ import { PostContent } from '@/components/Follows/Post/PostContent';
 import { PostImage } from '@/components/Follows/Post/PostImage';
 import { PostLike } from '@/components/Follows/Post/PostLike';
 import { PostProfile } from '@/components/Follows/Post/PostProfile';
-import { FollowsSkeleton } from '@/components/Skeletons/FollowsSkeleton';
+import { CompleteSkeleton } from '@/components/Skeletons/CompleteSkeleton';
 import { useGetCompleteDetailQuery } from '@/hooks/apis/Complete/useGetCompleteDetailQuery';
 import { PostGoalAndTodo } from './PostGoalAndTodo';
 
@@ -31,7 +31,7 @@ export const CompletePost = (props: CompletePostProps) => {
   return (
     <div>
       {isLoading ? (
-        <FollowsSkeleton />
+        <CompleteSkeleton />
       ) : complete ? (
         <div className="w-full flex-col">
           <div className="mr-16 flex justify-between">
diff --git a/src/components/Follows/Post/PostComments.tsx b/src/components/Follows/Post/PostComments.tsx
index cccd9b96..a74bf7d1 100644
--- a/src/components/Follows/Post/PostComments.tsx
+++ b/src/components/Follows/Post/PostComments.tsx
@@ -10,7 +10,7 @@ export function PostComments(props: PostCommentsProps) {
   return (
     <div className="flex items-center">
       <FaRegComment className="ml-16 mr-12 size-22" />
-      <div className="text-sm-normal text-custom-gray-200">{commentCount}</div>
+      <p className="text-sm-semibold text-custom-gray-200">{commentCount}</p>
     </div>
   );
 }
diff --git a/src/components/Follows/Post/PostLike.tsx b/src/components/Follows/Post/PostLike.tsx
index 367f1b9a..f8adc1a4 100644
--- a/src/components/Follows/Post/PostLike.tsx
+++ b/src/components/Follows/Post/PostLike.tsx
@@ -1,5 +1,6 @@
-import { FaRegHeart, FaHeart } from 'react-icons/fa6';
 import { motion } from 'motion/react';
+import { FaHeart, FaRegHeart } from 'react-icons/fa6';
+
 import { useCreateLike } from '@/hooks/apis/Likes/useCreateLikeQuery';
 import { useDeleteLike } from '@/hooks/apis/Likes/useDeleteLikeQuery';
 
@@ -38,7 +39,7 @@ export function PostLike(props: PostLikeProps) {
           <FaRegHeart className="size-22" />
         )}
       </motion.div>
-      <div className="text-sm-normal text-custom-gray-200">{likeCount}</div>
+      <p className="text-sm-semibold text-custom-gray-200">{likeCount}</p>
     </div>
   );
 }
diff --git a/src/components/Follows/Post/PostProfile.tsx b/src/components/Follows/Post/PostProfile.tsx
index 9c0fe11e..c3c3990d 100644
--- a/src/components/Follows/Post/PostProfile.tsx
+++ b/src/components/Follows/Post/PostProfile.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
 import { formatDateToRelativeTime } from '@/utils/date';
 
 interface PostProfileProps {
@@ -31,7 +32,7 @@ export function PostProfile(props: PostProfileProps) {
         alt="profilePic"
         width={40}
         height={40}
-        className="max-h-40 max-w-40 rounded-full"
+        className="size-40 rounded-full"
       />
       <div>
         <div className="text-sm-medium text-custom-gray-300">{username}</div>
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 9d964fa4..1b5d4eec 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -65,7 +65,9 @@ export const Sidebar = () => {
             close();
           }}
         >
-          {isOpen ? <LogoSide /> : <LogoIcon />}
+          <span className="cursor-pointer">
+            {isOpen ? <LogoSide /> : <LogoIcon />}
+          </span>
         </div>
         {isOpen ? (
           <FaAnglesLeft
diff --git a/src/components/Skeletons/CompleteSkeleton/index.tsx b/src/components/Skeletons/CompleteSkeleton/index.tsx
new file mode 100644
index 00000000..b09440ce
--- /dev/null
+++ b/src/components/Skeletons/CompleteSkeleton/index.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/common/Skeleton';
+
+export const CompleteSkeleton = () => {
+  return (
+    <div className="w-full flex-col gap-16 pb-24">
+      <div className="flex h-40 items-center gap-8 px-16">
+        <Skeleton className="size-40 rounded-full" />
+        <div>
+          <Skeleton className="h-20 w-36 rounded-16" />
+        </div>
+        <Skeleton className="h-16 w-30 rounded-16" />
+      </div>
+
+      <Skeleton className="my-8 h-400" />
+    </div>
+  );
+};
diff --git a/src/components/common/PageContainer/index.tsx b/src/components/common/PageContainer/index.tsx
index b5df81eb..fcc85d37 100644
--- a/src/components/common/PageContainer/index.tsx
+++ b/src/components/common/PageContainer/index.tsx
@@ -1,16 +1,23 @@
 import { ReactNode } from 'react';
 
+import { cn } from '@/utils/className';
+
 interface PageContainerProps {
   children: ReactNode;
   className?: string;
+  header?: boolean;
 }
 
-export const PageContainer = ({ children, className }: PageContainerProps) => {
-  return (
-    <div
-      className={`flex h-screen w-screen flex-col gap-16 overflow-y-scroll bg-custom-white-100 px-16 pt-48 scrollbar-hide md:pt-16 ${className}`}
-    >
-      {children}
-    </div>
+export const PageContainer = ({
+  children,
+  className,
+  header = true,
+}: PageContainerProps) => {
+  const containerClass = cn(
+    'flex h-screen w-screen flex-col gap-16 overflow-y-scroll bg-custom-white-100 px-16 scrollbar-hide',
+    className,
+    header ? 'pt-48 md:pt-16' : 'pt-16',
   );
+
+  return <div className={containerClass}>{children}</div>;
 };
diff --git a/src/hooks/apis/Complete/useGetCompleteDetailQuery.ts b/src/hooks/apis/Complete/useGetCompleteDetailQuery.ts
index 51d2290e..3c037c64 100644
--- a/src/hooks/apis/Complete/useGetCompleteDetailQuery.ts
+++ b/src/hooks/apis/Complete/useGetCompleteDetailQuery.ts
@@ -1,5 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
+
 import { GET } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
@@ -8,7 +9,7 @@ import { GetCompleteDetailResponse } from '@/types/Completes';
 const GetCompleteDetailOptions = (
   completeId: number,
 ): UseQueryOptions<GetCompleteDetailResponse, AxiosError> => ({
-  queryKey: [QUERY_KEYS.COMPLETE_DETAIL],
+  queryKey: [QUERY_KEYS.COMPLETE_DETAIL, completeId],
   queryFn: () =>
     GET<GetCompleteDetailResponse>(
       API_ENDPOINTS.TODOS.GET_CERTIFIED_TODO(completeId),
@@ -16,10 +17,8 @@ const GetCompleteDetailOptions = (
 });
 
 export const useGetCompleteDetailQuery = (completeId: number) => {
-  const { data, isLoading, error, isError } = useQuery(
-    GetCompleteDetailOptions(completeId),
-  );
+  const { data, ...etc } = useQuery(GetCompleteDetailOptions(completeId));
   const complete = data?.data;
 
-  return { complete, isLoading, error, isError };
+  return { complete, ...etc };
 };
diff --git a/src/mocks/TodoMockData.ts b/src/mocks/TodoMockData.ts
deleted file mode 100644
index 4e0220ff..00000000
--- a/src/mocks/TodoMockData.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const TODO_MOCK_DATA = [
-  {
-    goalId: 1,
-    goalTitle: '토익 900점 맞기',
-    color: 'blue',
-    createdAt: new Date().toISOString(),
-  },
-  {
-    goalId: 2,
-    goalTitle: '달리기 1등 하기',
-    color: 'green',
-    createdAt: new Date().toISOString(),
-  },
-  {
-    goalId: 3,
-    goalTitle: '체중 10kg 감량',
-    color: 'red',
-    createdAt: new Date().toISOString(),
-  },
-  {
-    goalId: 4,
-    goalTitle: '복근 만들기',
-    color: 'yellow',
-    createdAt: new Date().toISOString(),
-  },
-  {
-    goalId: 5,
-    goalTitle: '복싱 배우기',
-    color: 'purple',
-    createdAt: new Date().toISOString(),
-  },
-];