Merge pull request #104 from billilge/#96-item-api-fix

tnals0924 · web-flow · commit fd33ce82f7fc · 2025-03-05T13:33:57.000+09:00
[Feat/#96] 물품 수정 api 연결
diff --git a/src/app/desktop/(nav-bar)/item-list/_components/ItemSidebar/index.tsx b/src/app/desktop/(nav-bar)/item-list/_components/ItemSidebar/index.tsx
@@ -0,0 +1,40 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  // SheetDescription,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { ReactNode } from 'react';
+
+interface SidebarProps {
+  children: ReactNode;
+  title?: string;
+  // description?: string;
+  triggerText?: string;
+}
+
+export default function Sidebar({
+  children,
+  title = 'Sidebar Title',
+  // description = '',
+  triggerText = 'Open',
+}: SidebarProps) {
+  return (
+    <Sheet>
+      <SheetTrigger className="whitespace-nowrap bg-transparent text-sm text-black-primary">
+        {triggerText}
+      </SheetTrigger>
+      <SheetContent className="max-w-[40rem]! w-full">
+        <SheetHeader>
+          <SheetTitle className="flex justify-center text-2xl font-medium">
+            {title}
+          </SheetTitle>
+          {/* {description && <SheetDescription>{description}</SheetDescription>} */}
+        </SheetHeader>
+        <div className="mt-4">{children}</div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/app/desktop/(nav-bar)/item-list/_components/ItemTable/index.tsx b/src/app/desktop/(nav-bar)/item-list/_components/ItemTable/index.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useState } from 'react';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import {
   Table,
@@ -12,6 +13,10 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Item, ItemTableProps, ItemTypeText } from '@/types/items';
 import Image from 'next/image';
 import { PageChangeAction } from '@/types/paginationType';
+import { useMutation } from '@tanstack/react-query';
+import { updateItems } from '@/services/items';
+import toast from 'react-hot-toast';
+import Sidebar from '../ItemSidebar/index';
 
 export default function ItemTable({
   items = [],
@@ -25,17 +30,31 @@ export default function ItemTable({
     console.log(pageAction);
   },
 }: ItemTableProps) {
-  // 선택된 항목을 다루는 함수
+  const [formData, setFormData] = useState({
+    itemId: selected,
+    selectedImage: null as File | null,
+    itemName: '',
+    isConsumable: false,
+    quantity: '' as number | '',
+  });
+
+  const mutation = useMutation({
+    mutationFn: (data: { itemId: number; formData: FormData }) =>
+      updateItems(data.formData, data.itemId),
+    onSuccess: () => {
+      toast.success('변경사항이 저장되었습니다.');
+    },
+    onError: () => {
+      toast.error('변경사항 저장에 실패했습니다.');
+    },
+  });
+
   const handleSelect = (id: number) => {
-    setSelected(id); // 단일 선택으로 변경
+    setSelected(id);
   };
 
   const handleSelectAll = () => {
-    if (selected === items[0]?.itemId) {
-      setSelected(0); // 전체 선택 해제
-    } else {
-      setSelected(items[0]?.itemId); // 첫 번째 항목을 선택(전체 선택)
-    }
+    setSelected(selected === items[0]?.itemId ? 0 : items[0]?.itemId); // Toggle selection of first item
   };
 
   const handlePageChangeBtnClick = (
@@ -46,6 +65,49 @@ export default function ItemTable({
     onPageChange(pageChangeAction);
   };
 
+  const handleUpdateItem = useCallback(
+    (itemId: number) => {
+      const { itemName, quantity, selectedImage, isConsumable } = formData;
+
+      if (!itemName || quantity === '' || quantity <= 0) {
+        toast.error('모든 정보를 입력하세요.');
+        return;
+      }
+
+      const newFormData = new FormData();
+      if (selectedImage) newFormData.append('image', selectedImage);
+
+      const editData = {
+        name: itemName,
+        type: isConsumable ? 'CONSUMPTION' : 'RENTAL',
+        count: Number(quantity),
+      };
+
+      newFormData.append(
+        'itemRequest',
+        new Blob([JSON.stringify(editData)], { type: 'application/json' }),
+      );
+
+      mutation.mutate({ itemId, formData: newFormData });
+
+      setFormData({
+        itemId: 0,
+        selectedImage: null,
+        itemName: '',
+        isConsumable: false,
+        quantity: '',
+      });
+    },
+    [formData, mutation],
+  );
+
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setFormData((prev) => ({ ...prev, selectedImage: file }));
+    }
+  };
+
   return (
     <div className="flex w-full flex-col p-10">
       <Table>
@@ -54,7 +116,7 @@ export default function ItemTable({
             {showCheckboxes && (
               <TableHead className="w-10 text-center">
                 <Checkbox
-                  checked={selected === items[0]?.itemId} // 선택된 첫 번째 항목이 전체 항목과 일치하는지 확인
+                  checked={selected === items[0]?.itemId}
                   onCheckedChange={handleSelectAll}
                 />
               </TableHead>
@@ -73,7 +135,7 @@ export default function ItemTable({
                 {showCheckboxes && (
                   <TableCell className="w-10 text-center">
                     <Checkbox
-                      checked={selected === item.itemId} // selected 상태가 현재 itemId와 일치하면 체크
+                      checked={selected === item.itemId}
                       onCheckedChange={() => handleSelect(item.itemId)}
                     />
                   </TableCell>
@@ -97,6 +159,90 @@ export default function ItemTable({
                 <TableCell className="w-30 text-center">
                   {item.renterCount}
                 </TableCell>
+                <TableCell className="w-30 text-center">
+                  <Sidebar triggerText="수정하기" title="물품 수정하기">
+                    <div className="mt-4 flex flex-col gap-2">
+                      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                      <label className="text-sm font-semibold">
+                        복지물품명
+                      </label>
+                      <input
+                        type="text"
+                        value={formData.itemName}
+                        onChange={(e) =>
+                          setFormData({ ...formData, itemName: e.target.value })
+                        }
+                        className="rounded-md border px-4 py-2"
+                      />
+                      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                      <label className="text-sm font-semibold">
+                        소모품 여부
+                      </label>
+                      <div className="flex gap-2">
+                        <button
+                          type="button"
+                          className={`rounded-md border px-4 py-2 ${!formData.isConsumable ? 'bg-blue-500 text-white' : 'text-blue-500'}`}
+                          onClick={() =>
+                            setFormData({ ...formData, isConsumable: false })
+                          }
+                        >
+                          대여물품
+                        </button>
+                        <button
+                          type="button"
+                          className={`rounded-md border px-4 py-2 ${formData.isConsumable ? 'bg-blue-500 text-white' : 'text-blue-500'}`}
+                          onClick={() =>
+                            setFormData({ ...formData, isConsumable: true })
+                          }
+                        >
+                          소모물품
+                        </button>
+                      </div>
+                      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                      <label className="text-sm font-semibold">수량</label>
+                      <input
+                        type="number"
+                        value={formData.quantity}
+                        onChange={(e) =>
+                          setFormData({
+                            ...formData,
+                            quantity: Number(e.target.value),
+                          })
+                        }
+                        className="rounded-md border px-4 py-2"
+                      />
+                      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                      <label className="text-sm font-semibold">
+                        이미지 업로드
+                      </label>
+                      <p>이미지 변경이 없을 경우 업로드하지 않고 저장합니다.</p>
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handleImageChange}
+                      />
+                      {formData.selectedImage && (
+                        <Image
+                          src={URL.createObjectURL(formData.selectedImage)}
+                          width={24}
+                          height={24}
+                          alt="미리보기"
+                          className="mt-2 h-32 w-32 rounded-md object-cover"
+                        />
+                      )}
+                    </div>
+                    <div className="flex justify-center">
+                      <Button
+                        size="lg"
+                        variant="primary"
+                        onClick={() => handleUpdateItem(item.itemId)}
+                        className="mt-4 w-full"
+                      >
+                        저장
+                      </Button>
+                    </div>
+                  </Sidebar>
+                </TableCell>
               </TableRow>
             ))
           ) : (
diff --git a/src/services/items.ts b/src/services/items.ts
@@ -23,3 +23,17 @@ export const deleteItems = async (id: number) => {
   const response = await PrivateAxiosInstance.delete(`/admin/items/${id}`);
   return response.data;
 };
+
+export const getItem = async (id: number) => {
+  const response = await PrivateAxiosInstance.get(`/admin/items/${id}`);
+  return response.data;
+};
+
+export const updateItems = async (data: FormData, id: number) => {
+  const response = await PrivateAxiosInstance.put(`/admin/items/${id}`, data, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  return response.data;
+};
diff --git a/src/types/items.ts b/src/types/items.ts
@@ -4,8 +4,8 @@ export interface Item {
   itemId: number;
   itemName: string;
   itemType: string;
-  count: number;
-  renterCount: number;
+  count?: number;
+  renterCount?: number;
   imageUrl: string;
 }
 
@@ -16,6 +16,7 @@ export interface ItemTableProps extends PaginationProps {
   selected: number;
   setSelected: (selectedIds: number) => void;
   handleDelete?: (selectedIds: string) => void;
+  onEdit?: (selectedId: number) => void;
 }
 
 export const ItemTypeText: Record<string, string> = {
