[Refactor] Change get follow complete

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} />
 

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>

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"

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>
   );
 };

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">

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">

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>
   );
 }

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>
   );
 }

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>

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

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>
+  );
+};

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>;
 };

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,18 +9,16 @@ 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),
     ),
 });
 
 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 };
 };