feat: 식자재 수정, 삭제 및 식자재 추가 카테고리 스크롤 이동

package.json

@@ -36,6 +36,7 @@
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-draggable": "^4.4.6",
     "react-error-boundary": "^4.0.12",
     "recoil": "^0.7.7",
     "swiper": "^11.0.6"

src/components/atoms/Container.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 interface ContainerProps {
   children: React.ReactNode;
   className?: string;
+  id?: string;
 }
 
-const Container: React.FC<ContainerProps> = ({ children, className }) => {
+const Container: React.FC<ContainerProps> = ({ children, className, id }) => {
   return (
     <div
+      id={id}
       className={`flex flex-col justify-center items-center gap-22 p-32 w-full rounded-12 ${className}`}
     >
       {children}

src/components/atoms/Lottie.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import Lottie from 'lottie-react';
-import animationData from './../../assets/lottie.json';
+// import Lottie from 'lottie-react';
+// import animationData from './../../assets/lottie.json';
 
 const LottieComponent = () => {
   return (
-    <Lottie animationData={animationData} style={{ width: 167, height: 156 }} />
+    //     <Lottie animationData={animationData} style={{ width: 167, height: 156 }} />
+    <div>로딩중</div>
   );
 };
 

src/components/molecules/IngredientItemBox.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { IngredientDateTag } from '../atoms';
-import { AppleIcon } from '@/components/atoms/IngredientIcons';
 import type { IngredientDetailType } from '@/types/fridge';
+import Image from 'next/image';
 
-const IngredientItemBox: React.FC<{ data?: IngredientDetailType }> = ({
-  data,
-}) => {
+const IngredientItemBox: React.FC<{
+  data?: IngredientDetailType;
+  handleDetailIngreditentId?: (id: number) => void;
+}> = ({ data, handleDetailIngreditentId }) => {
   const addDate = new Date(data?.addDate as string);
   const expirationDate = new Date(data?.expirationDate as string);
   const today = new Date();
@@ -15,11 +16,23 @@ const IngredientItemBox: React.FC<{ data?: IngredientDetailType }> = ({
   );
 
   return (
-    <div className="flex justify-between items-center">
+    <div
+      className="flex justify-between items-center"
+      onClick={() => {
+        if (handleDetailIngreditentId) {
+          handleDetailIngreditentId(data?.ingredientDetailId ?? 0);
+        }
+      }}
+    >
       <div className="flex justify-between items-center gap-8">
-        <AppleIcon width={38} height={38} />
+        <Image
+          src={data?.iconImage ?? ''}
+          alt={data?.name ?? ''}
+          width={50}
+          height={50}
+        />
         <div className="flex flex-col gap-8">
-          <div className="heading4-semibold">{data?.name ?? '사과'}</div>
+          <div className="heading4-semibold">{data?.name ?? ''}</div>
           <div className="body2-medium text-gray5 ">
             {`${addDate.getFullYear()}년 ${addDate.getMonth() + 1}월 ${addDate.getDay()}일 저장`}
           </div>

src/components/organisms/FridgeBoard.tsx

@@ -1,38 +1,90 @@
 import React, { useState } from 'react';
 import { Container } from '@/components/atoms';
 import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules';
-import type { IngredientDetailType } from '@/types/fridge';
+import { IngredientModal } from '.';
+import {
+  Modal,
+  ModalOverlay,
+  ModalBody,
+  ModalContent,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useGetFridgeContentById } from '@/hooks/queries/fridge';
 
-const FridgeBoard: React.FC<{ data?: IngredientDetailType[] | null }> = ({
-  data,
-}) => {
+const FridgeBoard: React.FC<{ fridgeId: number }> = ({ fridgeId }) => {
+  const [detailIngredientId, setDetailIngredientId] = useState(0);
   const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장');
 
+  const data = useGetFridgeContentById(
+    Number(fridgeId),
+    currentTabName === '냉장' ? 'FREEZING' : 'REFRIGERATION',
+  )?.content;
+
+  const {
+    isOpen: isOpenIngredientModal,
+    onOpen: onOpenIngredientModal,
+    onClose: onCloseIngredientModal,
+  } = useDisclosure();
+
   const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => {
     setCurrentTabName(tabName);
   };
 
+  const handleDetailIngreditentId = (id: number) => {
+    setDetailIngredientId(id);
+    onOpenIngredientModal();
+  };
+
   return (
-    <Container className="p-[20px] bg-white">
-      <FridgeTab
-        currentTabName={currentTabName}
-        handleTabNameChange={handleTabNameChange}
-      />
-      {data && data.length !== 0 ? (
-        <div className="flex flex-col w-full gap-[24px]">
-          {data.map((ingredient) => (
-            <IngredientItemBox
-              key={ingredient.ingredientDetailId}
-              data={ingredient}
-            />
-          ))}
-        </div>
-      ) : (
-        <div>
-          <EmptyBox text={`${currentTabName}칸에 추가된 식자재가 없어요!`} />
-        </div>
+    <>
+      {isOpenIngredientModal && (
+        <Modal
+          onClose={onCloseIngredientModal}
+          isOpen={isOpenIngredientModal}
+          motionPreset="slideInBottom"
+          trapFocus={false}
+        >
+          <ModalOverlay height="100vh" onClick={onCloseIngredientModal} />
+          <ModalContent
+            className="bg-white"
+            position="fixed"
+            bottom="0"
+            borderRadius="24px 24px 0px 0px"
+            maxW="lg"
+            margin={0}
+          >
+            <ModalBody padding={0}>
+              <IngredientModal
+                isDetailModal
+                id={detailIngredientId}
+                toggleIsOpenIngredientModal={onCloseIngredientModal}
+              />
+            </ModalBody>
+          </ModalContent>
+        </Modal>
       )}
-    </Container>
+      <Container className="p-[20px] bg-white">
+        <FridgeTab
+          currentTabName={currentTabName}
+          handleTabNameChange={handleTabNameChange}
+        />
+        {data && data.length !== 0 ? (
+          <div className="flex flex-col w-full gap-[24px]">
+            {data.map((ingredient) => (
+              <IngredientItemBox
+                key={ingredient.ingredientDetailId}
+                data={ingredient}
+                handleDetailIngreditentId={handleDetailIngreditentId}
+              />
+            ))}
+          </div>
+        ) : (
+          <div>
+            <EmptyBox text={`${currentTabName}칸에 추가된 식자재가 없어요!`} />
+          </div>
+        )}
+      </Container>
+    </>
   );
 };
 

src/components/organisms/FridgeInfoBox.tsx

@@ -13,12 +13,14 @@ const FridgeInfoBox: React.FC<{
   return (
     <div className="flex justify-between items-end mb-[28px]">
       <div className="flex flex-col gap-[12px]">
-        <div className="body1-medium text-gray7">{userName}님의</div>
+        <div className="body1-medium text-gray7">
+          {userName ?? '사용자정보없음'} 님의
+        </div>
         <div
           className="flex items-center gap-[8px]"
           onClick={toggleIsOpenFridgeListModal}
         >
-          <div className="heading1-bold">{name}</div>
+          <div className="heading1-bold">{name ?? '냉장고를 선택해주세요'}</div>
           <AngleIcon
             width={16}
             height={16}

src/components/organisms/FridgeListModal.tsx

@@ -30,7 +30,7 @@ const FridgeListModal: React.FC<{
   const handleFridgeClick = (id: number, name: string) => {
     void router.push(
       ownerId
-        ? `/friend/${ownerId}?fridgeid=${id}`
+        ? `/friend/${ownerId}?fridgeid=${id}&name=${name}`
         : `fridge/?fridgeid=${id}&name=${name}`,
     );
     onCloseFridgeListModal();

src/components/organisms/FriendsFridgeList.tsx

@@ -1,17 +1,19 @@
-import { SearchInput, Container } from '../atoms';
+import { Container } from '../atoms';
 
 import { AngleIcon } from '@/assets/icons';
 import { FriendsFridgeItem } from '../molecules';
 import React from 'react';
+import { useGetMyFriendsCount } from '@/hooks/queries/mypage';
 
 const FriendsFridgeList: React.FC<{
   toggleIsOpenOrderListModal: () => void;
 }> = ({ toggleIsOpenOrderListModal }) => {
+  const count = useGetMyFriendsCount();
   return (
     <div className="mt-[37px]">
       <div className="mb-[19.5px] flex justify-between">
         <div className="heading2-semibold text-gray8">
-          친구 목록<span className="heading2-bold text-primary3">13</span>
+          친구 목록 <span className="heading2-bold text-primary3">{count}</span>
         </div>
         <div
           className="flex items-center gap-[6px]"
@@ -27,7 +29,6 @@ const FriendsFridgeList: React.FC<{
         </div>
       </div>
       <Container className="bg-white">
-        <SearchInput placeholder="친구의 이름을 입력하세요" />
         <div className="w-full flex flex-col gap-[24px]">
           <FriendsFridgeItem name="김지수" ingredientCount={13} linkTo="#" />
           <FriendsFridgeItem name="김지수" ingredientCount={13} linkTo="#" />

src/components/organisms/FriendsRecentBoard.tsx

@@ -8,12 +8,12 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({
   friendNews,
 }) => {
   return (
-    <Container className="flex bg-white">
+    <Container className="flex bg-white gap-[12px]">
       <div className="text-primary2 body2-semibold">최신근황</div>
-      <div className="text-center text-gray8">
+      <div className="text-center text-gray8 heading3-semibold">
         {friendNews.nickname} 님이
         <br />
-        토마토를 추가했어요!
+        {friendNews.friendRefrigeratorIngredientGroupList[0].name}를 추가했어요!
       </div>
       <div className="text-gray6 body2-medium">
         그밖에 신선한 재료를 구경할 수 있어요.
@@ -38,7 +38,7 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({
       </div>
       <Link
         className="w-full"
-        href={`/friend/${friendNews.refrigeratorId}?name=${friendNews.nickname}`}
+        href={`/friend/${friendNews.userId}?fridgeid=${friendNews.refrigeratorId}&name=${friendNews.nickname}`}
       >
         <GreenArrowButton className="bg-primary2" text="친구 냉장고 보러가기" />
       </Link>

src/components/organisms/IngredientBoard.tsx

@@ -11,7 +11,7 @@ const TermBoard: React.FC = () => {
       {ingredientSummary && ingredientSummary.length !== 0 ? (
         <div className={`flex flex-col w-full gap-25`}>
           {ingredientSummary.map((data) => (
-            <IngredientItemBox key={data.name} />
+            <IngredientItemBox key={data.name} data={data} />
           ))}
         </div>
       ) : (