feat: 식자재 추가 api

src/components/molecules/Counter.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { CountState } from '@/hooks/useCount';
 
 const Counter: React.FC<CountState> = ({
   currentCount,
   handleDecreaseCount,
   handleIncreaseCount,
 }) => {
+  useEffect(() => {}, [currentCount]);
   return (
     <div className="flex items-center h-[32px] bg-white rounded-[6px]">
       <button className="w-[30px] text-center" onClick={handleDecreaseCount}>
         -
       </button>
-      <input className="w-[30px] text-center" defaultValue={currentCount} />
+      <input className="w-[30px] text-center" value={currentCount} readOnly />
       <button className="w-[30px] text-center" onClick={handleIncreaseCount}>
         +
       </button>

src/components/organisms/FridgeInfoBox.tsx

@@ -32,7 +32,9 @@ const FridgeInfoBox: React.FC<{
           className="rounded-6 w-[100px] p-[10px] body1-semibold bg-primary2 text-white"
           text="식자재 추가"
           onClick={() => {
-            void router.push(`/fridge/add?fridgeid=${fridgeid as string}`);
+            void router.push(
+              `/fridge/add?fridgeid=${fridgeid as string}&name=${name as string}`,
+            );
           }}
         />
       )}

src/components/organisms/IngredientAddModal.tsx

@@ -2,7 +2,6 @@ import { BoxIcon, CalendarIcon, FreezerIcon, MemoIcon } from '@/assets/icons';
 import { Button, Toggle } from '@/components/atoms';
 import { Counter, IngredientAddItemContainer } from '../molecules';
 import React, { useState } from 'react';
-import useCount from '@/hooks/useCount';
 import useToast from '@/hooks/useToast';
 import ModalContainer from '../atoms/ModalContainer';
 import {
@@ -11,45 +10,61 @@ import {
 } from '@/hooks/queries/fridge';
 import Image from 'next/image';
 import type { PostIngredientBodyType } from '@/hooks/queries/fridge/usePostIngredient';
+import { useRouter } from 'next/router';
 
 const IngredientAddModal: React.FC<{
   id: number;
   toggleIsOpenIngredientAddModal: () => void;
 }> = ({ id, toggleIsOpenIngredientAddModal }) => {
+  const router = useRouter();
+  const today = new Date();
+
+  const { fridgeid, name } = router.query;
+
   const { showToast } = useToast();
 
   const onSuccess = () => {
     toggleIsOpenIngredientAddModal();
     showToast('식자재 추가가 완료되었습니다.', 'success');
   };
 
-  const postIngredient = usePostIngredient(onSuccess);
+  const postIngredient = usePostIngredient(
+    onSuccess,
+    fridgeid as string,
+    name as string,
+  );
+
+  const data = useGetIngredientById(id);
+
+  const expirationDate = new Date(today);
+  expirationDate.setDate(today.getDate() + (data?.expirationDays ?? 0));
 
   const [reqBody, setReqBody] = useState<PostIngredientBodyType>({
-    refrigeratorId: 0,
-    ingredientId: 0,
-    name: '',
+    refrigeratorId: Number(fridgeid),
+    ingredientId: id,
+    name: data?.name ?? '',
     quantity: 0,
     location: 'FREEZING',
     memo: '',
-    addDate: '2024-01-12',
-    expirationDate: '2024-01-22',
+    addDate: today,
+    expirationDate,
     isDeleted: true,
   });
 
   const [isInFreezer, setIsInFreezer] = useState(false);
-  const { currentCount, handleIncreaseCount, handleDecreaseCount } = useCount();
 
   const toggleIsInFreezer: () => void = () => {
     setIsInFreezer((prev) => !prev);
   };
 
   const handleSubmit: () => void = () => {
-    postIngredient.mutate({ ...reqBody, quantity: currentCount });
+    console.log({ ...reqBody });
+    postIngredient.mutate({
+      ...reqBody,
+      location: isInFreezer ? 'FREEZING' : 'FREEZING',
+    });
   };
 
-  const data = useGetIngredientById(id);
-
   return (
     <ModalContainer>
       <div className="mb-[24px]">
@@ -71,28 +86,24 @@ const IngredientAddModal: React.FC<{
             <div className="flex items-center w-full gap-20">
               <input
                 className="p-[13px] bg-white rounded-[6px] body1-medium text-center text-gray6 flex-grow"
-                placeholder="2024-01-12"
                 type="date"
-                value={reqBody.addDate}
+                value={reqBody.addDate.toISOString().split('T')[0]}
                 onChange={(e) => {
-                  console.log(e.target.value);
                   setReqBody((prev) => ({
                     ...prev,
-                    addDate: e.target.value,
+                    addDate: new Date(e.target.value),
                   }));
                 }}
               />
               <div className="body1-medium text-center text-gray6">~</div>
               <input
                 className="p-[13px] bg-white rounded-[6px] body1-medium text-center text-gray6 flex-grow"
-                placeholder="2024-01-12"
                 type="date"
-                value={reqBody.expirationDate}
+                value={reqBody.expirationDate.toISOString().split('T')[0]}
                 onChange={(e) => {
-                  console.log(e.target.value);
                   setReqBody((prev) => ({
                     ...prev,
-                    expirationDate: e.target.value,
+                    expirationDate: new Date(e.target.value),
                   }));
                 }}
               />
@@ -104,9 +115,19 @@ const IngredientAddModal: React.FC<{
             title="수량"
           >
             <Counter
-              currentCount={currentCount}
-              handleIncreaseCount={handleIncreaseCount}
-              handleDecreaseCount={handleDecreaseCount}
+              currentCount={reqBody.quantity}
+              handleIncreaseCount={() => {
+                setReqBody((prev) => ({
+                  ...prev,
+                  quantity: prev.quantity + 1,
+                }));
+              }}
+              handleDecreaseCount={() => {
+                setReqBody((prev) => ({
+                  ...prev,
+                  quantity: prev.quantity - 1,
+                }));
+              }}
             />
           </IngredientAddItemContainer>
           <IngredientAddItemContainer

src/hooks/queries/fridge/useGetIngredientById.ts

@@ -6,7 +6,7 @@ interface IngredientType {
   category: string;
   name: string;
   iconImage: string;
-  expirationDays: 0;
+  expirationDays: number;
 }
 
 const useGetIngredientById = (id: number) => {

src/hooks/queries/fridge/usePostIngredient.ts

@@ -9,15 +9,16 @@ export interface PostIngredientBodyType {
   quantity: number;
   location: 'FREEZING';
   memo: string;
-  addDate: string;
-  expirationDate: string;
+  addDate: Date;
+  expirationDate: Date;
   isDeleted: true;
 }
 
-const usePostIngredient = (fn?: () => void) => {
+const usePostIngredient = (fn: () => void, fridgeid: string, name: string) => {
   const router = useRouter();
   const onSuccess = () => {
-    void router.push('/fridge');
+    fn();
+    void router.push(`/fridge?fridgeid=${fridgeid}&name=${name}`);
   };
   return useBaseMutation<PostIngredientBodyType>(
     queryKeys.INGREDIENTS(),