feat: 식자재 추가, 냉장고 이름 수정 삭제, 친구 최신 근황, 친구 냉장고 조회

package.json

@@ -37,7 +37,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.12",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "swiper": "^11.0.6"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.6.3",

src/components/atoms/IngredientDateTag.tsx

@@ -11,10 +11,10 @@ const IngredientDateTag: React.FC<IngredientDateTagProps> = ({ dDay }) => {
   let textDay;
 
   // dDay에 따라서 className 설정
-  if (dDay === -1) {
+  if (dDay <= 0) {
     className = 'bg-gray1 text-gray6';
     backgroundColor = '';
-    textDay = `D+${dDay}`;
+    textDay = `D+${Math.abs(dDay)}`;
   } else if (dDay === 0) {
     className = 'bg-pink text-point3';
     backgroundColor = '#FFEBE6';

src/components/atoms/Lottie.tsx

@@ -1,11 +1,10 @@
 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 }} />
-    <div>로딩중</div>
+    <Lottie animationData={animationData} style={{ width: 167, height: 156 }} />
   );
 };
 

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/molecules/EmptyIngredient.tsx → src/components/molecules/EmptyBox.tsx

@@ -1,11 +1,11 @@
 import { EmptyIcon } from '@/assets/icons';
 import React from 'react';
 
-interface EmptyIngredientProps {
+interface EmptyBoxProps {
   text: string;
 }
 
-const EmptyIngredient: React.FC<EmptyIngredientProps> = ({ text }) => {
+const EmptyBox: React.FC<EmptyBoxProps> = ({ text }) => {
   return (
     <div className="flex flex-col items-center justify-center gap-12 min-h-268">
       <EmptyIcon />
@@ -14,4 +14,4 @@ const EmptyIngredient: React.FC<EmptyIngredientProps> = ({ text }) => {
   );
 };
 
-export default EmptyIngredient;
+export default EmptyBox;

src/components/molecules/FridgeListItem.tsx

@@ -1,29 +1,74 @@
 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 });
+  };
+
   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>
-        <div>
-          <EditIcon />
-        </div>
+        {isEditingFridgeName && id === newFridgeName.id ? (
+          <input
+            value={newFridgeName.name}
+            onChange={(e) => {
+              handleNewFridgeName(id, e.target.value);
+            }}
+          />
+        ) : (
+          <div className="heading3-semibold">{fridgeName}</div>
+        )}
+        {isMine && (
+          <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 />
+          </button>
+        )}
       </div>
       <Radio checked={isCurrentFridge} />
     </GrayBox>

src/components/molecules/IngredientItemBox.tsx

@@ -1,25 +1,31 @@
 import React from 'react';
 import { IngredientDateTag } from '../atoms';
 import { AppleIcon } from '@/components/atoms/IngredientIcons';
-interface IngredientItemBoxProps {
-  title?: string;
-  svgUrl?: string;
-  expiration?: string;
-  dDay?: number;
-  className?: string;
-}
+import type { IngredientDetailType } from '@/types/fridge';
+
+const IngredientItemBox: React.FC<{ data?: IngredientDetailType }> = ({
+  data,
+}) => {
+  const addDate = new Date(data?.addDate as string);
+  const expirationDate = new Date(data?.expirationDate as string);
+  const today = new Date();
+
+  const dDay = Math.ceil(
+    (expirationDate.getTime() - today.getTime()) / (24 * 60 * 60 * 1000),
+  );
 
-const IngredientItemBox: React.FC<IngredientItemBoxProps> = ({ dDay }) => {
   return (
     <div className="flex justify-between items-center">
       <div className="flex justify-between items-center gap-8">
         <AppleIcon width={38} height={38} />
         <div className="flex flex-col gap-8">
-          <div className="heading4-semibold">사과</div>
-          <div className="body2-medium text-gray5 ">12월 21일 저장</div>
+          <div className="heading4-semibold">{data?.name ?? '사과'}</div>
+          <div className="body2-medium text-gray5 ">
+            {`${addDate.getFullYear()}년 ${addDate.getMonth() + 1}월 ${addDate.getDay()}일 저장`}
+          </div>
         </div>
       </div>
-      <IngredientDateTag dDay={4} />
+      <IngredientDateTag dDay={dDay} />
     </div>
   );
 };

src/components/molecules/index.ts

@@ -1,4 +1,4 @@
-export { default as EmptyIngredient } from './EmptyIngredient';
+export { default as EmptyBox } from './EmptyBox';
 export { default as IngredientItemBox } from './IngredientItemBox';
 export { default as NearExpirationWarnBox } from './NearExpirationWarnBox';
 export { default as SvgAndTextBox } from './SvgAndTextBox';

src/components/organisms/FridgeBoard.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { Container } from '@/components/atoms';
-import {
-  EmptyIngredient,
-  FridgeTab,
-  IngredientItemBox,
-} from '@/components/molecules';
+import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules';
+import type { IngredientDetailType } from '@/types/fridge';
 
-const FridgeBoard: React.FC<{ data?: any | null }> = ({ data }) => {
+const FridgeBoard: React.FC<{ data?: IngredientDetailType[] | null }> = ({
+  data,
+}) => {
   const [currentTabName, setCurrentTabName] = useState<'냉장' | '냉동'>('냉장');
 
   const handleTabNameChange: (tabName: '냉장' | '냉동') => void = (tabName) => {
@@ -19,17 +18,18 @@ const FridgeBoard: React.FC<{ data?: any | null }> = ({ data }) => {
         currentTabName={currentTabName}
         handleTabNameChange={handleTabNameChange}
       />
-      {data !== null || (Array.isArray(data) && data?.length !== 0) ? (
+      {data && data.length !== 0 ? (
         <div className="flex flex-col w-full gap-[24px]">
-          <IngredientItemBox />
-          <IngredientItemBox />
-          <IngredientItemBox />
+          {data.map((ingredient) => (
+            <IngredientItemBox
+              key={ingredient.ingredientDetailId}
+              data={ingredient}
+            />
+          ))}
         </div>
       ) : (
         <div>
-          <EmptyIngredient
-            text={`${currentTabName}칸에 추가된 식자재가 없어요!`}
-          />
+          <EmptyBox text={`${currentTabName}칸에 추가된 식자재가 없어요!`} />
         </div>
       )}
     </Container>

src/components/organisms/FridgeInfoBox.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import { useRouter } from 'next/router';
 
 const FridgeInfoBox: React.FC<{
-  userName?: string;
+  userName: string;
   toggleIsOpenFridgeListModal: () => void;
   isOkIngredientAdd?: boolean;
 }> = ({ userName = '', toggleIsOpenFridgeListModal, isOkIngredientAdd }) => {
   const router = useRouter();
-
+  const { fridgeid, name } = router.query;
   return (
     <div className="flex justify-between items-end mb-[28px]">
       <div className="flex flex-col gap-[12px]">
@@ -18,7 +18,7 @@ const FridgeInfoBox: React.FC<{
           className="flex items-center gap-[8px]"
           onClick={toggleIsOpenFridgeListModal}
         >
-          <div className="heading1-bold">기본 냉장고</div>
+          <div className="heading1-bold">{name}</div>
           <AngleIcon
             width={16}
             height={16}
@@ -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');
+            void router.push(
+              `/fridge/add?fridgeid=${fridgeid as string}&name=${name as string}`,
+            );
           }}
         />
       )}