feat: 냉장고 수정 api

src/components/molecules/FridgeListItem.tsx

@@ -1,32 +1,75 @@
 import { GrayBox, Radio } from '../atoms';
 
 import { EditIcon } from '@/assets/icons';
+import { usePutFridgeById } from '@/hooks/queries/fridge';
 import React from 'react';
 
 interface FridgeListItemProps {
   isCurrentFridge: boolean;
   fridgeName: string;
   onClick: () => void;
   isMine: boolean;
+  isEditingFridgeName?: boolean;
+  id?: number;
+  handleNewFridgeName?: (id: number, name: string) => void;
+  newFridgeName: { id: number; name: string };
+  togglesetIsEditingFridgeName?: () => void;
 }
 
 const FridgeListItem: React.FC<FridgeListItemProps> = ({
   isCurrentFridge,
   fridgeName,
   onClick,
   isMine = true,
+  id,
+  newFridgeName = { id: 0, name: '' },
+  handleNewFridgeName = () => {},
+  isEditingFridgeName = false,
+  togglesetIsEditingFridgeName = () => {},
 }) => {
+  const putFridgeName = usePutFridgeById(id as number);
+
+  const handlePutFridgeClick = () => {
+    putFridgeName.mutate({ name: newFridgeName.name });
+  };
+
+  console.log(isEditingFridgeName);
+  console.log(newFridgeName);
   return (
     <GrayBox
       className="flex-row items-center justify-between h-[70px]"
       onClick={onClick}
     >
       <div className="flex gap-[9px] items-center">
-        <div className="heading3-semibold">{fridgeName}</div>
+        {isEditingFridgeName && id === newFridgeName.id ? (
+          <input
+            value={newFridgeName.name}
+            onChange={(e) => {
+              handleNewFridgeName(id, e.target.value);
+            }}
+          />
+        ) : (
+          <div className="heading3-semibold">{fridgeName}</div>
+        )}
         {isMine && (
-          <div>
+          <button
+            onClick={() => {
+              if (!newFridgeName.name) {
+                handleNewFridgeName(id as number, fridgeName);
+                togglesetIsEditingFridgeName();
+              } else {
+                if (!newFridgeName.name) {
+                  togglesetIsEditingFridgeName();
+                  return;
+                }
+                handlePutFridgeClick();
+                handleNewFridgeName(id as number, fridgeName);
+                togglesetIsEditingFridgeName();
+              }
+            }}
+          >
             <EditIcon />
-          </div>
+          </button>
         )}
       </div>
       <Radio checked={isCurrentFridge} />

src/components/organisms/FridgeListModal.tsx

@@ -12,6 +12,11 @@ const FridgeListModal: React.FC<{
   ownerId?: number;
   onCloseFridgeListModal: () => void;
 }> = ({ ownerId, onCloseFridgeListModal }) => {
+  const [isEditingFridgeName, setIsEditingFridgeName] = useState(false);
+  const [newFridgeName, setNewFridgeName] = useState({
+    id: 0,
+    name: '',
+  });
   const [currentFridge, setCurrentFridge] = useState({
     id: 1,
     name: '기본 냉장고',
@@ -41,6 +46,14 @@ const FridgeListModal: React.FC<{
     deleteFridgeMutation.mutate({});
   };
 
+  const handleNewFridgeName = (id: number, name: string) => {
+    setNewFridgeName({ id, name });
+  };
+
+  const togglesetIsEditingFridgeName = () => {
+    setIsEditingFridgeName((prev) => !prev);
+  };
+
   return (
     <ModalContainer>
       <div>
@@ -52,9 +65,14 @@ const FridgeListModal: React.FC<{
       <div className="flex flex-col gap-[10px] mt-[25px] mb-[32px]">
         {fridgeList?.map(({ id, name }) => (
           <FridgeListItem
+            isEditingFridgeName={isEditingFridgeName}
+            togglesetIsEditingFridgeName={togglesetIsEditingFridgeName}
+            newFridgeName={newFridgeName}
+            handleNewFridgeName={handleNewFridgeName}
             isMine={!ownerId}
             key={id}
             isCurrentFridge={currentFridge.id === id}
+            id={id}
             fridgeName={name}
             onClick={() => {
               setCurrentFridge({ id, name });

src/hooks/queries/fridge/index.ts

@@ -4,3 +4,4 @@ export { default as usePostIngredient } from './usePostIngredient';
 export { default as useGetMyIngredients } from './useGetMyIngredients';
 export { default as useGetFridgeContentById } from './useGetFridgeContentById';
 export { default as useDeleteFridgeById } from './useDeleteFridgeById';
+export { default as usePutFridgeById } from './usePutFridgeById';

src/hooks/queries/fridge/useDeleteFridgeById.ts

@@ -7,7 +7,7 @@ const useDeleteFridgeById = (id: number) => {
     void queryClient.invalidateQueries();
   };
   return useBaseMutation(
-    queryKeys.INGREDIENT_LIST,
+    queryKeys.MY_FRIDGE_LIST,
     `/refrigs/${id}`,
     onSuccess,
     'DELETE',

src/hooks/queries/fridge/useGetFridgeList.ts

@@ -8,7 +8,7 @@ interface IngredientType {
 
 const useGetMyFridgeList = (id?: number) => {
   const { data } = useBaseQuery<IngredientType[]>(
-    queryKeys.INGREDIENTS(),
+    queryKeys.MY_FRIDGE_LIST(),
     `/refrigs/${id ? `users/${id}` : 'my'}`,
   );
 

src/hooks/queries/fridge/usePutFridgeById.ts

@@ -0,0 +1,20 @@
+import { queryKeys } from '../queryKeys';
+import { useBaseMutation } from '../useBaseMutation';
+import { queryClient } from '@/pages/_app';
+
+export interface FridgeBodyType {
+  name: string;
+}
+
+const usePutFridgeById = (id: number) => {
+  const onSuccess = () => {
+    void queryClient.invalidateQueries();
+  };
+  return useBaseMutation<FridgeBodyType>(
+    queryKeys.MY_FRIDGE_LIST(),
+    `/refrigs/${id}`,
+    onSuccess,
+    'PUT',
+  );
+};
+export default usePutFridgeById;