refactor: change lecture delete toast phrase

Myongji-Graduate · Sep 7, 2024 · f39b312 · f39b312
1 parent f0c4e62
commit f39b312
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -10,12 +10,14 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '../../view/molecule/alert-dialog/alert-dialog';
+import { TakenLectrueInfo } from '@/app/store/stores/custom-taken-lecture';
 
 interface DeleteTakenLectureButtonProps {
-  lectureId: number;
-  onDelete: (lectureId: number) => void;
+  item: TakenLectrueInfo;
+  onDelete: (item: TakenLectrueInfo) => void;
 }
-export default function DeleteTakenLectureButton({ lectureId, onDelete }: DeleteTakenLectureButtonProps) {
+
+export default function DeleteTakenLectureButton({ item, onDelete }: DeleteTakenLectureButtonProps) {
   const [open, setOpen] = useState(false);
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
@@ -25,7 +27,7 @@ export default function DeleteTakenLectureButton({ lectureId, onDelete }: Delete
             label="삭제"
             variant="text"
             size="default"
-            data-cy={`taken-lecture-delete-model-trigger-${lectureId}`}
+            data-cy={`taken-lecture-delete-model-trigger-${item.id}`}
             data-testid="taken-lecture-delete-button"
           />
         </div>
@@ -38,7 +40,7 @@ export default function DeleteTakenLectureButton({ lectureId, onDelete }: Delete
           <AlertDialogCancel className="font-bold">취소</AlertDialogCancel>
           <form
             action={() => {
-              onDelete(lectureId);
+              onDelete(item);
             }}
           >
             <Button

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -6,24 +6,25 @@ import { useToast } from '../../view/molecule/toast/use-toast';
 import Responsive from '../../responsive';
 import { TAKEN_LECTURE_TABLE_HEADER_INFO } from './taken-lecture-constant';
 import { useTakenLecture } from '@/app/business/hooks/use-taken-lecture.hook';
+import { TakenLectrueInfo } from '@/app/store/stores/custom-taken-lecture';
 
 export default function TakenLectureList() {
   const { optimisticLecture, deleteOptimisticLecture, deleteLecture } = useTakenLecture();
 
   const { toast } = useToast();
 
-  const handleDeleteTakenLecture = async (lectureId: number) => {
-    deleteOptimisticLecture(lectureId);
-    const result = await deleteTakenLecture(lectureId);
+  const handleDeleteTakenLecture = async (item: TakenLectrueInfo) => {
+    deleteOptimisticLecture(item.lectureId);
+    const result = await deleteTakenLecture(item.id);
     if (!result.isSuccess) {
       return toast({
-        title: '과목 삭제에 실패했습니다',
+        title: `${item.lectureName} 삭제에 실패했습니다.`,
         variant: 'destructive',
       });
     }
-    deleteLecture(lectureId);
+    deleteLecture(item.id);
     toast({
-      title: '과목 삭제에 성공했습니다',
+      title: `${item.lectureName} 과목을 삭제했습니다.`,
     });
   };
 
@@ -33,8 +34,8 @@ export default function TakenLectureList() {
         <Table
           headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO}
           data={optimisticLecture}
-          renderActionButton={(id: number) => (
-            <DeleteTakenLectureButton lectureId={id} onDelete={handleDeleteTakenLecture} />
+          renderActionButton={(item: TakenLectrueInfo) => (
+            <DeleteTakenLectureButton item={item} onDelete={handleDeleteTakenLecture} />
           )}
         />
       </Responsive>

diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx
@@ -8,13 +8,13 @@ import SwipeToDelete from '../swipe/swipe-to-delete';
 interface TableProps<T extends ListRow> {
   headerInfo: string[];
   data: T[];
-  renderActionButton?: (id: number) => JSX.Element;
+  renderActionButton?: (item: T) => JSX.Element;
   swipeable?: boolean;
 }
 
 interface SwipeableTableProps<T extends ListRow> extends TableProps<T> {
   swipeable: true;
-  onSwipeAction: (lectureId: number) => void;
+  onSwipeAction: (item: T) => void;
 }
 
 interface BasicTableProps<T extends ListRow> extends TableProps<T> {
@@ -46,7 +46,7 @@ export function Table<T extends ListRow>({
             if (key === 'id') return null;
             return <Grid.Column key={index}>{item[key]}</Grid.Column>;
           })}
-          {renderActionButton ? <Grid.Column>{renderActionButton(item.id)}</Grid.Column> : null}
+          {renderActionButton ? <Grid.Column>{renderActionButton(item)}</Grid.Column> : null}
         </Grid>
       </List.Row>
     );
@@ -57,7 +57,7 @@ export function Table<T extends ListRow>({
       <div className="border-solid border-gray-300 border-b-[1px] last:border-b-0" key={index}>
         <SwipeToDelete
           onSwipeAction={() => {
-            onSwipeAction && onSwipeAction(item.id);
+            onSwipeAction && onSwipeAction(item);
           }}
         >
           <List.Row>

diff --git a/app/ui/view/molecule/table/table.stories.tsx b/app/ui/view/molecule/table/table.stories.tsx
@@ -105,7 +105,7 @@ export const SwipeableLectureTable: StoryObj = {
         credit: 3,
       },
     ];
-    const actionButton = () => <DeleteTakenLectureButton lectureId={3} onDelete={() => {}} />;
+    const actionButton = () => <DeleteTakenLectureButton item={lectures[0]} onDelete={() => {}} />;
     return (
       <main>
         <Table