[#X] 배포

src/app/[groupId]/_components/team-banner-members.tsx

@@ -0,0 +1,9 @@
+import { Member } from "@/types/members";
+
+interface TeamBannerMembersProps {
+  members: Member[];
+}
+
+const TeamBannerMembers = () => {};
+
+export default TeamBannerMembers;

src/app/[groupId]/_components/team-body/team-body.tsx

@@ -9,6 +9,7 @@ import useDeleteTaskList from "@/hooks/api/task/use-delete-task-list";
 import usePatchTaskList from "@/hooks/api/task/use-patch-task-list";
 import usePostTaskList from "@/hooks/api/task/use-post-task-list";
 import usePrompt from "@/hooks/use-prompt";
+import useToast from "@/hooks/use-toast";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import TaskListsSection from "./task-lists-section";
@@ -38,9 +39,11 @@ const TeamBody = ({ taskLists, groupId }: TeamBodyProps) => {
     (a, b) => a.displayIndex - b.displayIndex
   );
 
-  const { mutate: postTaskList } = usePostTaskList();
-  const { mutate: patchTaskList } = usePatchTaskList(groupId);
+  const { mutate: postTaskList, isPending: isPostPending } = usePostTaskList();
+  const { mutate: patchTaskList, isPending: isPatchPending } =
+    usePatchTaskList(groupId);
   const { mutate: deleteTaskList } = useDeleteTaskList(groupId);
+  const { success, error, warning } = useToast();
 
   const [selectedTaskList, setSelectedTaskList] = useState<TaskList | null>(
     null
@@ -65,17 +68,36 @@ const TeamBody = ({ taskLists, groupId }: TeamBodyProps) => {
   } = usePrompt();
 
   const handleAddTaskList = (name: string) => {
-    closeAddModal();
-    postTaskList({ groupId, name }, {});
+    postTaskList(
+      { groupId, name },
+      {
+        onSuccess: () => {
+          success("할 일을 추가했습니다. ");
+          closeAddModal();
+        },
+        onError: (err: any) => {
+          const msg = err.response.data.message ?? "할 일 추가에 실패했습니다.";
+          error(msg);
+        },
+      }
+    );
   };
 
   const handlePatchTaskList = (newName: string) => {
     if (!selectedTaskList) return;
 
-    closeChangeModal();
     patchTaskList(
       { groupId, taskListId: selectedTaskList.id, name: newName },
-      {}
+      {
+        onSuccess: () => {
+          closeChangeModal();
+        },
+        onError: (err: any) => {
+          const msg =
+            err.response.data.message ?? "할 일 목록 수정에 실패했습니다.";
+          error(msg);
+        },
+      }
     );
   };
 
@@ -100,8 +122,12 @@ const TeamBody = ({ taskLists, groupId }: TeamBodyProps) => {
       { groupId, taskListId: selectedTaskList.id },
       {
         onSuccess: () => {
+          success("할 일을 삭제했습니다.");
           closeDeleteModal();
         },
+        onError: () => {
+          error("할 일 삭제에 실패했습니다");
+        },
       }
     );
   };
@@ -140,14 +166,18 @@ const TeamBody = ({ taskLists, groupId }: TeamBodyProps) => {
       </div>
 
       <AddModal>
-        <AddTaskListModalUI handleClick={handleAddTaskList} />
+        <AddTaskListModalUI
+          handleClick={handleAddTaskList}
+          isPending={isPostPending}
+        />
       </AddModal>
 
       <ChangeModal>
         {selectedTaskList && (
           <ChangeTaskListModalUI
             taskTitle={selectedTaskList.name}
             handleClick={handlePatchTaskList}
+            isPending={isPatchPending}
           />
         )}
       </ChangeModal>

src/app/[groupId]/_components/team-page-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TeamBannerAdmin, TeamBannerMember } from "@/components/index";
+import { TeamBannerAdmin } from "@/components/index";
 import BannerAdminSkeleton from "@/components/skeleton/team-skeleton/banner-admin-skeleton";
 import TeamBodySkeleton from "@/components/skeleton/team-skeleton/team-body-skeleton";
 import TeamMemberSectionSkeleton from "@/components/skeleton/team-skeleton/team-member-section-skeleton";
@@ -20,7 +20,7 @@ const TeamPageClient = ({ groupId }: TeamPageClientProps) => {
   const { data: groupInfo, isPending } = useGetGroupInfo(groupId);
   const isAdmin = isUserAdmin(userInfo, groupId);
 
-  if (isPending || !groupInfo) {
+  if (isPending || !groupInfo || !userInfo) {
     return (
       <div
         className={cn(
@@ -55,21 +55,15 @@ const TeamPageClient = ({ groupId }: TeamPageClientProps) => {
           )}
         >
           <section className="pc:flex pc:justify-center">
-            {isAdmin ? (
-              <TeamBannerAdmin
-                groupName={groupInfo.name}
-                tasksTodo={tasksTodo}
-                tasksDone={tasksDone}
-                members={groupInfo.members}
-                groupId={groupId}
-              />
-            ) : (
-              <TeamBannerMember
-                groupId={groupId}
-                groupName={groupInfo.name}
-                members={groupInfo.members}
-              />
-            )}
+            <TeamBannerAdmin
+              groupName={groupInfo.name}
+              tasksTodo={tasksTodo}
+              tasksDone={tasksDone}
+              members={groupInfo.members}
+              groupId={groupId}
+              isAdmin={isAdmin}
+              myId={userInfo.id}
+            />
           </section>
 
           <section className="pc:mx-auto pc:w-full pc:max-w-[1120px]">

src/app/[groupId]/editteam/_components/edit-team.tsx

@@ -3,13 +3,15 @@
 import {
   Button,
   Icon,
+  LoadingSpinner,
   ProfileEdit,
   TextInput,
-  LoadingSpinner,
 } from "@/components";
+import EditTeamSkeleton from "@/components/skeleton/editteam-skeleton/editteam-skeleton";
 import useGetGroupInfo from "@/hooks/api/group/use-get-group-info";
 import usePatchGroup from "@/hooks/api/group/use-patch-group";
 import { useImageUpload } from "@/hooks/image-upload/use-image-upload";
+import useToast from "@/hooks/use-toast";
 import cn from "@/utils/clsx";
 import { useEffect, useRef, useState } from "react";
 
@@ -19,8 +21,9 @@ interface EditTeamProps {
 
 const EditTeam = ({ groupId }: EditTeamProps) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { data: groupInfo } = useGetGroupInfo(groupId);
-
+  const { data: groupInfo, isPending: isGroupDataPending } =
+    useGetGroupInfo(groupId);
+  const { success, error, warning } = useToast();
   const [groupName, setGroupName] = useState("");
   const [initialImage, setInitialImage] = useState<string | null>();
 
@@ -60,19 +63,32 @@ const EditTeam = ({ groupId }: EditTeamProps) => {
   };
 
   const onSubmit = () => {
-    patchGroup({
-      name: groupName,
-      image: previews[0]?.url ?? initialImage ?? null,
-    });
+    patchGroup(
+      {
+        name: groupName,
+        image: previews[0]?.url ?? initialImage ?? null,
+      },
+      {
+        onSuccess: () => {
+          success("팀 정보를 수정했습니다.");
+        },
+        onError: () => {
+          error("팀 정보 수정을 실패했습니다.");
+        },
+      }
+    );
   };
-  if (!groupInfo) return null;
+
   const handleRemoveImage = () => {
     if (previews[0]) {
       removeImage(previews[0].id);
     }
     setInitialImage(null);
   };
 
+  if (isGroupDataPending || !groupInfo) {
+    return <EditTeamSkeleton />;
+  }
   return (
     <main className="h-screen w-full flex-center">
       <div

src/app/[groupId]/tasklist/@task/_components/task-detail-comment.tsx

@@ -1,33 +1,37 @@
 import { Reply, CommentListSkeleton } from "@/components";
 import useGetComments from "@/hooks/api/comments/use-get-comments";
 import usePatchTaskComment from "@/hooks/api/task/use-patch-task-comment";
+import useDeleteTaskComment from "@/hooks/api/task/use-delete-task-comment";
 
 interface TaskDetailCommentProps {
   taskId: number;
 }
 
 const TaskDetailComment = ({ taskId }: TaskDetailCommentProps) => {
   const { data: comments, isPending } = useGetComments(Number(taskId));
-  const { mutate: patchTaskComment } = usePatchTaskComment();
+  const { mutate: patchComment } = usePatchTaskComment();
+  const { mutate: deleteComment } = useDeleteTaskComment();
 
   if (isPending || !comments) return <CommentListSkeleton />;
 
   return (
     <div>
       <ul className="flex flex-col gap-4">
-        {comments.map((comment, idx) => {
-          return (
-            <li key={comment.id} className="flex flex-col gap-4">
-              {idx !== 0 && idx < comments.length && <hr />}
-              <Reply
-                comment={{
-                  ...comment,
-                  writer: comment.user,
-                }}
-              />
-            </li>
-          );
-        })}
+        {comments.map((comment, idx) => (
+          <li key={comment.id} className="flex flex-col gap-4">
+            {idx !== 0 && idx < comments.length && <hr />}
+            <Reply
+              comment={{
+                ...comment,
+                writer: comment.user,
+              }}
+              onEdit={(commentId, content) =>
+                patchComment({ taskId, commentId, content })
+              }
+              onDelete={(commentId) => deleteComment({ taskId, commentId })}
+            />
+          </li>
+        ))}
       </ul>
     </div>
   );

src/app/[groupId]/tasklist/_components/task-list-container.tsx

@@ -11,8 +11,10 @@ import {
 import usePostTaskList from "@/hooks/api/task/use-post-task-list";
 import usePrompt from "@/hooks/use-prompt";
 import { countDoneTask } from "@/utils/util";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
+import Link from "next/link";
 
 interface TodoContainerProps {
   groupId: number;
@@ -27,6 +29,7 @@ const TaskListContainer = ({
   taskList,
   isPending,
 }: TodoContainerProps) => {
+  const pathName = usePathname();
   const { mutate: createTaskList, isPending: isPostPending } =
     usePostTaskList();
   const { Modal: AddTaskListModal, openPrompt, closePrompt } = usePrompt(true);
@@ -36,6 +39,12 @@ const TaskListContainer = ({
     createTaskList({ groupId: groupId, name: name });
   };
 
+  const [optimisticTaskListId, setOptimisticTaskListId] = useState(taskListId);
+
+  useEffect(() => {
+    setOptimisticTaskListId(taskListId);
+  }, [taskListId]);
+
   return (
     <div
       className={cn(
@@ -89,7 +98,22 @@ const TaskListContainer = ({
           {!isPending ? (
             taskList.map((task) => {
               return (
-                <li key={task.id}>
+                <li
+                  key={task.id}
+                  className={cn(
+                    "relative",
+                    task.id === optimisticTaskListId
+                      ? "text-blue-200"
+                      : "text-blue-700"
+                  )}
+                  onClick={() => setOptimisticTaskListId(task.id)}
+                >
+                  <Link
+                    href={`${pathName}?list=${task.id}`}
+                    scroll={false}
+                    className="absolute inset-0 z-0"
+                  />
+
                   <TaskCard
                     groupId={groupId}
                     taskListId={task.id}
@@ -107,6 +131,7 @@ const TaskListContainer = ({
               height={54}
               width={270}
               containerClassName="flex-1"
+              borderRadius={12}
             />
           )}
         </ul>

src/app/boards/[articleId]/_components/article-comments/article-comments.tsx

@@ -9,6 +9,8 @@ import { usePostArticleComment } from "@/hooks/api/articles/use-post-article-com
 import { useGetUserInfoQuery } from "@/hooks/api/user/use-get-user-info-query";
 import useGetArticleComments from "@/hooks/api/articles/use-get-article-comments";
 import useToggleArticleLike from "@/hooks/api/articles/use-toggle-article-like";
+import usePatchArticleComment from "@/hooks/api/articles/use-patch-article-comment";
+import useDeleteArticleComment from "@/hooks/api/articles/use-delete-article-comment";
 import LikeButton from "@/components/lottie/LikeButton";
 import DefaultProfile from "@/assets/icons/ic-user.svg";
 
@@ -18,6 +20,8 @@ interface ArticleCommentsProps {
 
 const ArticleComments = ({ article }: ArticleCommentsProps) => {
   const { mutate, isPending } = usePostArticleComment();
+  const { mutate: patchComment } = usePatchArticleComment();
+  const { mutate: deleteComment } = useDeleteArticleComment();
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useGetArticleComments({ articleId: article.id });
@@ -129,7 +133,15 @@ const ArticleComments = ({ article }: ArticleCommentsProps) => {
           {allComments.map((comment) => (
             <div key={comment.id}>
               <hr className="border-gray-300 pb-5" />
-              <Reply comment={comment} articleId={article.id} />
+              <Reply
+                comment={comment}
+                onEdit={(commentId, content) =>
+                  patchComment({ commentId, content })
+                }
+                onDelete={(commentId) =>
+                  deleteComment({ commentId, articleId: article.id })
+                }
+              />
             </div>
           ))}
           <div ref={observerTarget} className="h-4" />

src/app/boards/[articleId]/_components/article-contents/article-contents.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import Link from "next/link";
 import Image from "next/image";
-import { Button } from "@/components/index";
 import { Article } from "@/types/article";
 
 interface ArticleContentsProps {
@@ -19,7 +17,6 @@ const ArticleContents = ({ article }: ArticleContentsProps) => {
           width={140}
           height={140}
           className="rounded-lg tablet:h-[200px] tablet:w-[200px]"
-          onError={() => console.log("이미지 로드 실패:", article.image)}
         />
       )}
       <p className="whitespace-pre-wrap break-words">{article.content}</p>