[#X] 할 일 목록 삭제 후 로직 추가, 마이 히스토리 목록 없을 때 화면 추가

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

@@ -117,7 +117,6 @@ const TaskListContainer = ({
                   <TaskCard
                     groupId={groupId}
                     taskListId={task.id}
-                    pageListId={taskListId}
                     taskTitle={task.name}
                     total={task.tasks.length}
                     completed={countDoneTask(task.tasks)}

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

@@ -58,22 +58,32 @@ const TaskList = () => {
             "w-full"
           )}
         >
-          <TaskListDatePicker
-            groupId={groupId}
-            taskListId={taskListId}
-            setSelectedDate={setSelectedDate}
-          />
-          <TaskListItem
-            groupId={groupId}
-            taskListId={taskListId}
-            taskItems={taskItems}
-          />
-          <Button
-            className="absolute bottom-10 right-1 z-20 h-14 w-14 rounded-full tablet:right-[-3%] pc:right-[-5%]"
-            onClick={openPrompt}
-          >
-            <Icon icon="plus" className="h-6 w-6" />
-          </Button>
+          {taskListId ? (
+            <>
+              <TaskListDatePicker
+                groupId={groupId}
+                taskListId={taskListId}
+                setSelectedDate={setSelectedDate}
+              />
+              <TaskListItem
+                groupId={groupId}
+                taskListId={taskListId}
+                taskItems={taskItems}
+              />
+              <Button
+                className="absolute bottom-10 right-1 z-20 h-14 w-14 rounded-full tablet:right-[-3%] pc:right-[-5%]"
+                onClick={openPrompt}
+              >
+                <Icon icon="plus" className="h-6 w-6" />
+              </Button>
+            </>
+          ) : (
+            <div className="h-full flex-center">
+              <p className="text-center text-md text-gray-700">
+                할 일 목록을 선택해주세요.
+              </p>
+            </div>
+          )}
         </div>
       </div>
       <Modal>

src/app/[groupId]/tasklist/page.tsx

@@ -56,7 +56,7 @@ export const generateMetadata = async ({
   const response = await fetchTaskList(Number(groupId), Number(list), token);
 
   return {
-    title: `${response.name ? response.name : "페이지를 찾을 수 없습니다."} - 할 일 목록`,
+    title: `${response.name ? response.name : "할 일 목록 선택"} - 할 일 목록`,
     description: `${response.name ? `${response.name}의 할 일을 확인할 수 있습니다.` : "페이지를 찾을 수 없습니다."}`,
     openGraph: {
       title: `${response.name ? response.name : "페이지를 찾을 수 없습니다."} - 할 일 목록 | Coworkers`,

src/app/myhistory/_components/history-list.tsx

@@ -1,12 +1,32 @@
 import List from "@/components/list/list";
 import { MonthlyTaskList } from "@/types/task";
 import { formatDateWithDay } from "@/utils/date-util";
+import Image from "next/image";
 
 const HistoryList = ({
   monthlyTaskList,
 }: {
   monthlyTaskList: MonthlyTaskList[];
 }) => {
+  if (!monthlyTaskList.length) {
+    return (
+      <div className="h-full flex-col-center">
+        <Image
+          src={"/images/empty_my_history.png"}
+          alt="empty_my_history"
+          width={350}
+          height={150}
+          priority
+          quality={100}
+          className="object-contain"
+        />
+        <p className="text-center text-md text-gray-700">
+          아직 완료된 할 일이 없습니다.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <ul className="h-full overflow-y-auto">
       {[...monthlyTaskList].reverse().map((taskList) => {

src/components/task-card/task-card.stories.tsx

@@ -39,7 +39,6 @@ export const Default: Story = {
   args: {
     groupId: 3290,
     taskListId: 4711,
-    pageListId: 4711,
     taskTitle: "법인 설립",
     total: 5,
     completed: 2,
@@ -50,7 +49,6 @@ export const HasTaskList: Story = {
   args: {
     groupId: 3290,
     taskListId: 4711,
-    pageListId: 4711,
     taskTitle: "법인 설립",
     total: 5,
     completed: 2,

src/components/task-card/task-card.tsx

@@ -12,11 +12,11 @@ import Checkbox, { CheckboxProps } from "../checkbox/checkbox";
 import Dropdown from "../dropdown-components/dropdown";
 import Icon from "../icon/Icon";
 import DeleteModalUI from "../modal-ui/delete-modal-ui";
+import { useRouter } from "next/navigation";
 
 interface TaskCardProps extends BadgeProps {
   groupId: number;
   taskListId: number;
-  pageListId: number;
   taskTitle: string;
   taskList?: CheckboxProps[];
   handleClickCheckbox?: MouseEventHandler<HTMLInputElement>;
@@ -25,13 +25,13 @@ interface TaskCardProps extends BadgeProps {
 const TaskCard = ({
   groupId,
   taskListId,
-  pageListId,
   taskTitle,
   taskList,
   total,
   completed,
   handleClickCheckbox,
 }: TaskCardProps) => {
+  const router = useRouter();
   const {
     Modal: DeleteModal,
     openPrompt: openDeleteModal,
@@ -47,6 +47,7 @@ const TaskCard = ({
   const handleDelete = () => {
     deleteTaskList({ groupId, taskListId });
     closeDeleteModal();
+    router.replace(`/${groupId}/tasklist`);
   };
 
   const { mutate: patchTaskList, isPending: patchPending } =