From 5aa3233cbdae60fde8a809b007e9009ecbea21be Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 24 Feb 2024 15:30:27 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EB=83=89=EC=9E=A5=EA=B3=A0=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Lottie.tsx | 7 +- .../molecules/IngredientItemBox.tsx | 27 +++-- src/components/organisms/FridgeBoard.tsx | 98 ++++++++++++++----- src/components/organisms/IngredientBoard.tsx | 2 +- ...edientAddModal.tsx => IngredientModal.tsx} | 30 +++--- src/components/organisms/index.ts | 2 +- .../templates/AddFriendTemplate.tsx | 4 +- src/hooks/queries/fridge/index.ts | 1 + .../queries/fridge/useGetFridgeContentById.ts | 9 +- .../queries/fridge/useGetIngredientById.ts | 6 +- .../queries/fridge/useGetMyIngredient.ts | 14 +++ src/hooks/queries/fridge/usePostIngredient.ts | 4 +- .../queries/home/useGetMyIngredientSummary.ts | 9 +- .../mypage/useGetMyIngredientsCount.ts | 2 +- src/hooks/queries/queryKeys.ts | 7 +- src/pages/fridge/add/index.tsx | 22 ++--- src/pages/fridge/index.tsx | 9 +- src/pages/friend/[id]/index.tsx | 5 +- src/pages/share/index.tsx | 2 +- src/types/fridge/index.d.ts | 1 + 20 files changed, 173 insertions(+), 88 deletions(-) rename src/components/organisms/{IngredientAddModal.tsx => IngredientModal.tsx} (87%) create mode 100644 src/hooks/queries/fridge/useGetMyIngredient.ts diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx index caa66fd..ad32cf5 100644 --- a/src/components/atoms/Lottie.tsx +++ b/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 ( - + // +
로딩중
); }; diff --git a/src/components/molecules/IngredientItemBox.tsx b/src/components/molecules/IngredientItemBox.tsx index 5a8c059..320a081 100644 --- a/src/components/molecules/IngredientItemBox.tsx +++ b/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 ( -
+
{ + if (handleDetailIngreditentId) { + handleDetailIngreditentId(data?.ingredientDetailId ?? 0); + } + }} + >
- + {data?.name
-
{data?.name ?? '사과'}
+
{data?.name ?? ''}
{`${addDate.getFullYear()}년 ${addDate.getMonth() + 1}월 ${addDate.getDay()}일 저장`}
diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index ab69412..cf65fbf 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/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 ( - - - {data && data.length !== 0 ? ( -
- {data.map((ingredient) => ( - - ))} -
- ) : ( -
- -
+ <> + {isOpenIngredientModal && ( + + + + + + + + )} - + + + {data && data.length !== 0 ? ( +
+ {data.map((ingredient) => ( + + ))} +
+ ) : ( +
+ +
+ )} + + ); }; diff --git a/src/components/organisms/IngredientBoard.tsx b/src/components/organisms/IngredientBoard.tsx index 507faa0..91d5af3 100644 --- a/src/components/organisms/IngredientBoard.tsx +++ b/src/components/organisms/IngredientBoard.tsx @@ -11,7 +11,7 @@ const TermBoard: React.FC = () => { {ingredientSummary && ingredientSummary.length !== 0 ? (
{ingredientSummary.map((data) => ( - + ))}
) : ( diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientModal.tsx similarity index 87% rename from src/components/organisms/IngredientAddModal.tsx rename to src/components/organisms/IngredientModal.tsx index 4dc0118..d2b84a4 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/src/components/organisms/IngredientModal.tsx @@ -6,16 +6,18 @@ import useToast from '@/hooks/useToast'; import ModalContainer from '../atoms/ModalContainer'; import { useGetIngredientById, + useGetMyIngredient, usePostIngredient, } 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<{ +const IngredientModal: React.FC<{ id: number; - toggleIsOpenIngredientAddModal: () => void; -}> = ({ id, toggleIsOpenIngredientAddModal }) => { + isDetailModal?: boolean; + toggleIsOpenIngredientModal: () => void; +}> = ({ id, toggleIsOpenIngredientModal, isDetailModal = false }) => { const router = useRouter(); const today = new Date(); @@ -24,7 +26,7 @@ const IngredientAddModal: React.FC<{ const { showToast } = useToast(); const onSuccess = () => { - toggleIsOpenIngredientAddModal(); + toggleIsOpenIngredientModal(); showToast('식자재 추가가 완료되었습니다.', 'success'); }; @@ -34,7 +36,9 @@ const IngredientAddModal: React.FC<{ name as string, ); - const data = useGetIngredientById(id); + const data = isDetailModal + ? useGetMyIngredient(id) + : useGetIngredientById(id); const expirationDate = new Date(today); expirationDate.setDate(today.getDate() + (data?.expirationDays ?? 0)); @@ -43,12 +47,14 @@ const IngredientAddModal: React.FC<{ refrigeratorId: Number(fridgeid), ingredientId: id, name: data?.name ?? '', - quantity: 0, - location: 'FREEZING', + quantity: data?.quantity ?? 0, + location: data?.location ?? 'FREEZING', memo: '', addDate: today, - expirationDate, - isDeleted: true, + expirationDate: data?.expirationDate + ? new Date(data?.expirationDate) + : expirationDate, + isDeleted: false, }); const [isInFreezer, setIsInFreezer] = useState(false); @@ -60,7 +66,7 @@ const IngredientAddModal: React.FC<{ const handleSubmit: () => void = () => { postIngredient.mutate({ ...reqBody, - location: isInFreezer ? 'FREEZING' : 'FREEZING', + location: isInFreezer ? 'REFRIGERATION' : 'FREEZING', }); }; @@ -153,7 +159,7 @@ const IngredientAddModal: React.FC<{
@@ -161,4 +167,4 @@ const IngredientAddModal: React.FC<{ ); }; -export default IngredientAddModal; +export default IngredientModal; diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts index 872be92..d4ddc79 100644 --- a/src/components/organisms/index.ts +++ b/src/components/organisms/index.ts @@ -1,7 +1,7 @@ export { default as IngredientBoard } from './IngredientBoard'; export { default as FridgeBoard } from './FridgeBoard'; export { default as FridgeInfoBox } from './FridgeInfoBox'; -export { default as IngredientAddModal } from './IngredientAddModal'; +export { default as IngredientModal } from './IngredientModal'; export { default as FridgeListModal } from './FridgeListModal'; export { default as FriendsRecentBoard } from './FriendsRecentBoard'; export { default as FriendsFridgeList } from './FriendsFridgeList'; diff --git a/src/components/templates/AddFriendTemplate.tsx b/src/components/templates/AddFriendTemplate.tsx index fb3d71f..d4466fc 100644 --- a/src/components/templates/AddFriendTemplate.tsx +++ b/src/components/templates/AddFriendTemplate.tsx @@ -32,7 +32,7 @@ const AddFriendTemplate: React.FC = () => { }; const onAddFriend = () => { - if (friendInviteCode.length < 8) { + if (friendInviteCode.length < 9) { setWarningVisible(true); } else { addFriendship.mutate({ inviteCode: friendInviteCode }); @@ -75,7 +75,7 @@ const AddFriendTemplate: React.FC = () => { />
{warningVisible ? ( - + ) : null} } diff --git a/src/hooks/queries/fridge/index.ts b/src/hooks/queries/fridge/index.ts index 1aa9c0e..119f837 100644 --- a/src/hooks/queries/fridge/index.ts +++ b/src/hooks/queries/fridge/index.ts @@ -5,3 +5,4 @@ export { default as useGetMyIngredients } from './useGetMyIngredients'; export { default as useGetFridgeContentById } from './useGetFridgeContentById'; export { default as useDeleteFridgeById } from './useDeleteFridgeById'; export { default as usePutFridgeById } from './usePutFridgeById'; +export { default as useGetMyIngredient } from './useGetMyIngredient'; diff --git a/src/hooks/queries/fridge/useGetFridgeContentById.ts b/src/hooks/queries/fridge/useGetFridgeContentById.ts index 1ac2849..6632beb 100644 --- a/src/hooks/queries/fridge/useGetFridgeContentById.ts +++ b/src/hooks/queries/fridge/useGetFridgeContentById.ts @@ -7,13 +7,16 @@ interface FridgeContentType { content: IngredientDetailType[]; } -const useGetFridgeContentById = (id: number) => { +const useGetFridgeContentById = ( + id: number, + location: 'REFRIGERATION' | 'FREEZING', +) => { // 무한스크롤 or useSuspenseQuery로 변경 해야함 const { data } = useQuery({ - queryKey: queryKeys.MY_FRIDGE_CONTENT(id), + queryKey: queryKeys.MY_FRIDGE_CONTENT(id, location), queryFn: async () => { return await fetchData( - `/ingrs/detail/refrig/${id}`, + `/ingrs/detail/refrig/${id}?location=${location}`, true, ); }, diff --git a/src/hooks/queries/fridge/useGetIngredientById.ts b/src/hooks/queries/fridge/useGetIngredientById.ts index c3c9f30..1b9aef4 100644 --- a/src/hooks/queries/fridge/useGetIngredientById.ts +++ b/src/hooks/queries/fridge/useGetIngredientById.ts @@ -1,12 +1,16 @@ import { queryKeys } from '../queryKeys'; import { useBaseQuery } from '../useBaseQuery'; -interface IngredientType { +export interface IngredientType { ingredientId: 0; category: string; name: string; iconImage: string; expirationDays: number; + location?: 'FREEZING' | 'REFRIGERATION'; + quantity?: number; + addDate?: string; + expirationDate?: string; } const useGetIngredientById = (id: number) => { diff --git a/src/hooks/queries/fridge/useGetMyIngredient.ts b/src/hooks/queries/fridge/useGetMyIngredient.ts new file mode 100644 index 0000000..b634dbf --- /dev/null +++ b/src/hooks/queries/fridge/useGetMyIngredient.ts @@ -0,0 +1,14 @@ +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; +import type { IngredientType } from './useGetIngredientById'; + +const useGetMyIngredient = (id: number) => { + const { data } = useBaseQuery( + queryKeys.MY_INGREDIENT_ID(id), + `/ingrs/detail/${id}`, + ); + + return data?.data; +}; + +export default useGetMyIngredient; diff --git a/src/hooks/queries/fridge/usePostIngredient.ts b/src/hooks/queries/fridge/usePostIngredient.ts index 43b28d0..71cece1 100644 --- a/src/hooks/queries/fridge/usePostIngredient.ts +++ b/src/hooks/queries/fridge/usePostIngredient.ts @@ -7,11 +7,11 @@ export interface PostIngredientBodyType { ingredientId: number; name: string; quantity: number; - location: 'FREEZING'; + location: 'FREEZING' | 'REFRIGERATION'; memo: string; addDate: Date; expirationDate: Date; - isDeleted: true; + isDeleted: boolean; } const usePostIngredient = (fn: () => void, fridgeid: string, name: string) => { diff --git a/src/hooks/queries/home/useGetMyIngredientSummary.ts b/src/hooks/queries/home/useGetMyIngredientSummary.ts index 52e1194..bd16f85 100644 --- a/src/hooks/queries/home/useGetMyIngredientSummary.ts +++ b/src/hooks/queries/home/useGetMyIngredientSummary.ts @@ -1,14 +1,9 @@ +import type { IngredientDetailType } from '@/types/fridge'; import { queryKeys } from '../queryKeys'; import { useBaseQuery } from '../useBaseQuery'; -interface IngredientType { - id: number; - name: string; - iconImage: string; -} - const useGetMyIngredientSummary = () => { - const { data } = useBaseQuery( + const { data } = useBaseQuery( queryKeys.INGREDIENTS_RECENT(), '/ingrs/detail/recent', ); diff --git a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts index 59ecb27..b38d558 100644 --- a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts +++ b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts @@ -4,7 +4,7 @@ import { useBaseQuery } from '../useBaseQuery'; const useGetMyIngredientsCount = () => { const { data } = useBaseQuery( queryKeys.MY_INGREDIENTS_COUNT(), - `/ingrs/detail/count?day=5`, + `/ingrs/detail/count?day=7`, true, ); diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 948a213..46f0208 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -7,8 +7,13 @@ import type { export const queryKeys = { MY_FRIDGE_LIST: () => ['my_fridge_list'], MY_FRIENDS_COUNT: () => ['my_friends_count'], - MY_FRIDGE_CONTENT: (id: number) => ['my_fridge', id], + MY_FRIDGE_CONTENT: (id: number, location: string) => [ + 'my_fridge', + id, + location, + ], MY_INGREDIENTS_COUNT: () => ['my_ingredient_count'], + MY_INGREDIENT_ID: (id: number) => ['my-ingredient', id], MY_FRIENDS_NEWS: () => ['my_friends_news'], INGREDIENT_LIST: () => ['ingredient_list'], INGREDIENT_ID: (id: number) => ['ingredient', id], diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index 22d37e7..24851bc 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -1,5 +1,5 @@ import type { NextPage } from 'next'; -import { Header, IngredientAddModal } from '@/components/organisms'; +import { Header, IngredientModal } from '@/components/organisms'; import { Container } from '../../../components/atoms'; import { useState } from 'react'; import { useGetIngredientList } from '@/hooks/queries/fridge'; @@ -15,9 +15,9 @@ import { const FridgePage: NextPage = () => { const [ingredientId, setIngredientId] = useState(null); const { - isOpen: isOpenIngredientAddModal, - onOpen: onOpenIngredientAddModal, - onClose: onCloseIngredientAddModal, + isOpen: isOpenIngredientModal, + onOpen: onOpenIngredientModal, + onClose: onCloseIngredientModal, } = useDisclosure(); const [currentCategory, setCurrentCategory] = useState('전체'); @@ -26,14 +26,14 @@ const FridgePage: NextPage = () => { return ( <> - {isOpenIngredientAddModal && ( + {isOpenIngredientModal && ( - + { margin={0} > - @@ -78,7 +78,7 @@ const FridgePage: NextPage = () => { key={item.id} onClick={() => { setIngredientId(item.id); - onOpenIngredientAddModal(); + onOpenIngredientModal(); }} className="flex flex-col items-center" > diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index d5e7a88..29938ea 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -13,7 +13,6 @@ import { useDisclosure, } from '@chakra-ui/react'; import { useGetMe } from '@/hooks/queries/mypage'; -import { useGetFridgeContentById } from '@/hooks/queries/fridge'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; @@ -29,12 +28,6 @@ const FridgePage: NextPage = () => { const { fridgeid: fridgeId } = router.query; - // if (!fridgeId) { - // onOpenFridgeListModal(); - // } - - const data = useGetFridgeContentById(Number(fridgeId))?.content; - useEffect(() => { if (!fridgeId) { onOpenFridgeListModal(); @@ -71,7 +64,7 @@ const FridgePage: NextPage = () => { toggleIsOpenFridgeListModal={onOpenFridgeListModal} isOkIngredientAdd={true} /> - +
diff --git a/src/pages/friend/[id]/index.tsx b/src/pages/friend/[id]/index.tsx index dbd2b3e..31c0d75 100644 --- a/src/pages/friend/[id]/index.tsx +++ b/src/pages/friend/[id]/index.tsx @@ -14,7 +14,6 @@ import { } from '@chakra-ui/react'; import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; -import { useGetFridgeContentById } from '@/hooks/queries/fridge'; const FriendIdPage: NextPage = () => { const router = useRouter(); const [nickname, setNickName] = useState(''); @@ -30,8 +29,6 @@ const FriendIdPage: NextPage = () => { onOpenFridgeListModal(); } - const data = useGetFridgeContentById(Number(fridgeId))?.content; - useEffect(() => { setNickName(name as string); }, []); @@ -68,7 +65,7 @@ const FriendIdPage: NextPage = () => { userName={nickname} toggleIsOpenFridgeListModal={onOpenFridgeListModal} /> - + diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx index d4686d4..ae98b53 100644 --- a/src/pages/share/index.tsx +++ b/src/pages/share/index.tsx @@ -23,7 +23,7 @@ import { useObserver } from '@/hooks/useObserver'; const TABS: TabLabel[] = [ { label: '나눔 신청', value: 'SHARE_START' }, { label: '나눔 중', value: 'SHARE_IN_PROGRESS' }, - { label: '나눔 완료', value: 'SHARE_COMPLETE' }, + { label: '나눔 완료', value: 'SHARE_END' }, ]; const SORT_TYPES: SortLabel[] = [ diff --git a/src/types/fridge/index.d.ts b/src/types/fridge/index.d.ts index e97f18f..9c3e6bc 100644 --- a/src/types/fridge/index.d.ts +++ b/src/types/fridge/index.d.ts @@ -5,6 +5,7 @@ export interface IngredientType { export interface IngredientDetailType { ingredientDetailId: number; + iconImage: string; name: string; quantity: number; location: string; From bc240dc93dc3ada8727687855f28db8b00b7fbc9 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 24 Feb 2024 15:37:01 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EC=B9=B4=EC=9A=B4=ED=8A=B8=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/mypage/index.ts | 1 + src/hooks/queries/mypage/useGetCount.ts | 14 ++++++++++++++ src/hooks/queries/queryKeys.ts | 1 + src/pages/mypage/index.tsx | 15 +++++---------- 4 files changed, 21 insertions(+), 10 deletions(-) create mode 100644 src/hooks/queries/mypage/useGetCount.ts diff --git a/src/hooks/queries/mypage/index.ts b/src/hooks/queries/mypage/index.ts index 9dc6662..cd1240b 100644 --- a/src/hooks/queries/mypage/index.ts +++ b/src/hooks/queries/mypage/index.ts @@ -1,3 +1,4 @@ export { default as useGetMe } from './useGetMe'; export { default as useGetMyFriendsCount } from './useGetMyFriendsCount'; export { default as useGetMyIngredientsCount } from './useGetMyIngredientsCount'; +export { default as useGetCount } from './useGetCount'; diff --git a/src/hooks/queries/mypage/useGetCount.ts b/src/hooks/queries/mypage/useGetCount.ts new file mode 100644 index 0000000..fc45842 --- /dev/null +++ b/src/hooks/queries/mypage/useGetCount.ts @@ -0,0 +1,14 @@ +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; + +const useGetCount = () => { + const { data } = useBaseQuery<{ + ingredientCount: number; + shareCount: number; + friendCount: number; + }>(queryKeys.COUNT(), `/users/me/statistics`, true); + + return data?.data; +}; + +export default useGetCount; diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 46f0208..2cbe173 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -5,6 +5,7 @@ import type { } from '@/types/friendship'; export const queryKeys = { + COUNT: () => ['count'], MY_FRIDGE_LIST: () => ['my_fridge_list'], MY_FRIENDS_COUNT: () => ['my_friends_count'], MY_FRIDGE_CONTENT: (id: number, location: string) => [ diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx index 199d6ad..d4491c6 100644 --- a/src/pages/mypage/index.tsx +++ b/src/pages/mypage/index.tsx @@ -15,11 +15,7 @@ import { QuestionIcon, SettingIcon, } from '@/assets/icons'; -import { - useGetMe, - useGetMyFriendsCount, - useGetMyIngredientsCount, -} from '@/hooks/queries/mypage'; +import { useGetCount, useGetMe } from '@/hooks/queries/mypage'; import { returnProfileImg } from '@/utils/returnProfileImg'; const GENERAGE_NAV_LIST = [ @@ -49,9 +45,8 @@ const ETC_NAV_LIST = [ const Mypage: NextPage = () => { const data = useGetMe(); - const myFriendsCount = useGetMyFriendsCount(); - const myIngredientsCount = useGetMyIngredientsCount(); + const count = useGetCount(); return (
@@ -78,11 +73,11 @@ const Mypage: NextPage = () => {
- +
- +
- +
From 9fd8ca00884f44c46968151db123e98b7ad660b7 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sun, 25 Feb 2024 02:13:07 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=EC=B9=9C=EA=B5=AC=20id=EB=A1=9C=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/FridgeListModal.tsx | 2 +- src/components/organisms/FriendsRecentBoard.tsx | 2 +- src/hooks/queries/friends/useGetFriendsNews.ts | 1 + src/pages/friend/[id]/index.tsx | 5 ++--- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index 55aa73a..1281005 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/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(); diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx index 56bff43..a83c4ca 100644 --- a/src/components/organisms/FriendsRecentBoard.tsx +++ b/src/components/organisms/FriendsRecentBoard.tsx @@ -38,7 +38,7 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({
diff --git a/src/hooks/queries/friends/useGetFriendsNews.ts b/src/hooks/queries/friends/useGetFriendsNews.ts index 9652d04..7fd661a 100644 --- a/src/hooks/queries/friends/useGetFriendsNews.ts +++ b/src/hooks/queries/friends/useGetFriendsNews.ts @@ -3,6 +3,7 @@ import { queryKeys } from '../queryKeys'; import { useBaseQuery } from '../useBaseQuery'; export interface FriendObjectType { + userId: number; nickname: string; refrigeratorId: number; friendRefrigeratorIngredientGroupList: IngredientType[]; diff --git a/src/pages/friend/[id]/index.tsx b/src/pages/friend/[id]/index.tsx index 31c0d75..1cd3132 100644 --- a/src/pages/friend/[id]/index.tsx +++ b/src/pages/friend/[id]/index.tsx @@ -23,7 +23,7 @@ const FriendIdPage: NextPage = () => { onClose: onCloseFridgeListModal, } = useDisclosure(); - const { id: fridgeId, name } = router.query; + const { id: userId, fridgeid: fridgeId, name } = router.query; if (!fridgeId) { onOpenFridgeListModal(); @@ -50,10 +50,9 @@ const FriendIdPage: NextPage = () => { margin={0} > - {/* 친구 아이디 넣어야함 */} From 129a5ffeed5696666874e47a8d945893d0d57ee9 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sun, 25 Feb 2024 02:16:03 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EA=B8=B0=ED=83=80=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/FridgeInfoBox.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 17041fa..0aa9ab1 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/src/components/organisms/FridgeInfoBox.tsx @@ -13,12 +13,14 @@ const FridgeInfoBox: React.FC<{ return (
-
{userName}님의
+
+ {userName ?? '사용자정보없음'} 님의 +
-
{name}
+
{name ?? '냉장고를 선택해주세요'}
Date: Sun, 25 Feb 2024 02:46:07 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8,=20=EC=82=AD=EC=A0=9C=20ap?= =?UTF-8?q?i?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/IngredientModal.tsx | 61 +++++++++++++++++-- src/hooks/queries/fridge/index.ts | 1 + .../queries/fridge/useDeleteIngredientById.ts | 21 +++++++ .../queries/fridge/usePutIngredientById.ts | 31 ++++++++++ src/types/common/index.d.ts | 2 + 5 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 src/hooks/queries/fridge/useDeleteIngredientById.ts create mode 100644 src/hooks/queries/fridge/usePutIngredientById.ts diff --git a/src/components/organisms/IngredientModal.tsx b/src/components/organisms/IngredientModal.tsx index d2b84a4..9e4e1f1 100644 --- a/src/components/organisms/IngredientModal.tsx +++ b/src/components/organisms/IngredientModal.tsx @@ -1,10 +1,17 @@ -import { BoxIcon, CalendarIcon, FreezerIcon, MemoIcon } from '@/assets/icons'; +import { + BoxIcon, + CalendarIcon, + FreezerIcon, + MemoIcon, + TrashcanIcon, +} from '@/assets/icons'; import { Button, Toggle } from '@/components/atoms'; import { Counter, IngredientAddItemContainer } from '../molecules'; import React, { useState } from 'react'; import useToast from '@/hooks/useToast'; import ModalContainer from '../atoms/ModalContainer'; import { + useDeleteIngredientById, useGetIngredientById, useGetMyIngredient, usePostIngredient, @@ -12,6 +19,7 @@ import { import Image from 'next/image'; import type { PostIngredientBodyType } from '@/hooks/queries/fridge/usePostIngredient'; import { useRouter } from 'next/router'; +import usePutIngredientById from '@/hooks/queries/fridge/usePutIngredientById'; const IngredientModal: React.FC<{ id: number; @@ -57,6 +65,17 @@ const IngredientModal: React.FC<{ isDeleted: false, }); + const deleteIngredient = useDeleteIngredientById( + id, + Number(fridgeid), + reqBody?.location, + ); + const putIngredient = usePutIngredientById( + id, + Number(fridgeid), + reqBody?.location, + ); + const [isInFreezer, setIsInFreezer] = useState(false); const toggleIsInFreezer: () => void = () => { @@ -157,11 +176,41 @@ const IngredientModal: React.FC<{ />
- +
+ ) : ( +
); diff --git a/src/hooks/queries/fridge/index.ts b/src/hooks/queries/fridge/index.ts index 119f837..e5369c2 100644 --- a/src/hooks/queries/fridge/index.ts +++ b/src/hooks/queries/fridge/index.ts @@ -6,3 +6,4 @@ export { default as useGetFridgeContentById } from './useGetFridgeContentById'; export { default as useDeleteFridgeById } from './useDeleteFridgeById'; export { default as usePutFridgeById } from './usePutFridgeById'; export { default as useGetMyIngredient } from './useGetMyIngredient'; +export { default as useDeleteIngredientById } from './useDeleteIngredientById'; diff --git a/src/hooks/queries/fridge/useDeleteIngredientById.ts b/src/hooks/queries/fridge/useDeleteIngredientById.ts new file mode 100644 index 0000000..c10630a --- /dev/null +++ b/src/hooks/queries/fridge/useDeleteIngredientById.ts @@ -0,0 +1,21 @@ +import { queryClient } from '@/pages/_app'; +import { queryKeys } from '../queryKeys'; +import { useBaseMutation } from '../useBaseMutation'; + +const useDeleteIngredientById = ( + id: number, + fridgeId: number, + location: string, +) => { + const onSuccess = () => { + void queryClient.invalidateQueries(); + }; + return useBaseMutation( + queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), + `/ingrs/detail/${id}`, + onSuccess, + 'DELETE', + ); +}; + +export default useDeleteIngredientById; diff --git a/src/hooks/queries/fridge/usePutIngredientById.ts b/src/hooks/queries/fridge/usePutIngredientById.ts new file mode 100644 index 0000000..8be4829 --- /dev/null +++ b/src/hooks/queries/fridge/usePutIngredientById.ts @@ -0,0 +1,31 @@ +import type { LocationEnum } from '@/types/common'; +import { queryKeys } from '../queryKeys'; +import { useBaseMutation } from '../useBaseMutation'; +import { queryClient } from '@/pages/_app'; + +export interface FridgeBodyType { + name: string; + quantity: number; + location: LocationEnum; + memo: string; + addDate: Date; + expirationDate: Date; + isDeleted: boolean; +} + +const usePutIngredientById = ( + id: number, + fridgeId: number, + location: string, +) => { + const onSuccess = () => { + void queryClient.invalidateQueries(); + }; + return useBaseMutation( + queryKeys.MY_FRIDGE_CONTENT(fridgeId, location), + `/ingrs/detail/${id}`, + onSuccess, + 'PUT', + ); +}; +export default usePutIngredientById; diff --git a/src/types/common/index.d.ts b/src/types/common/index.d.ts index 5015f2d..f08f5d1 100644 --- a/src/types/common/index.d.ts +++ b/src/types/common/index.d.ts @@ -21,3 +21,5 @@ export interface IngredientType { name: string; iconImage: string; } + +export type LocationEnum = 'FREEZING' | 'REFRIGERATION'; From df95bf33cbd1c0cd907f9b26f77e3f77d597e568 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sun, 25 Feb 2024 03:26:03 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=ED=9B=85,=20=EC=B9=9C=EA=B5=AC=20=EA=B7=BC?= =?UTF-8?q?=ED=99=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/FriendsFridgeList.tsx | 7 +++--- .../organisms/FriendsRecentBoard.tsx | 6 ++--- src/hooks/useLogout.ts | 12 ++++++++++ src/pages/fridge/add/index.tsx | 4 +++- src/pages/fridge/index.tsx | 4 +++- src/pages/friend/[id]/index.tsx | 4 +++- src/pages/friends/index.tsx | 22 +++++++++++++++++-- src/pages/home/index.tsx | 8 ++++--- src/pages/mypage/account/index.tsx | 7 +++++- 9 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 src/hooks/useLogout.ts diff --git a/src/components/organisms/FriendsFridgeList.tsx b/src/components/organisms/FriendsFridgeList.tsx index f6e420e..146fc63 100644 --- a/src/components/organisms/FriendsFridgeList.tsx +++ b/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 (
- 친구 목록13 + 친구 목록 {count}
-
diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx index a83c4ca..48e2ee7 100644 --- a/src/components/organisms/FriendsRecentBoard.tsx +++ b/src/components/organisms/FriendsRecentBoard.tsx @@ -8,12 +8,12 @@ const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ friendNews, }) => { return ( - +
최신근황
-
+
{friendNews.nickname} 님이
- 토마토를 추가했어요! + {friendNews.friendRefrigeratorIngredientGroupList[0].name}를 추가했어요!
그밖에 신선한 재료를 구경할 수 있어요. diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts new file mode 100644 index 0000000..73f5836 --- /dev/null +++ b/src/hooks/useLogout.ts @@ -0,0 +1,12 @@ +import { useRouter } from 'next/router'; + +const useLogout = () => { + const router = useRouter(); + return () => { + localStorage.removeItem('accessToken'); + localStorage.removeItem('refreshToken'); + router.push('/login'); + }; +}; + +export default useLogout; diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index 24851bc..4af5ce8 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -53,7 +53,9 @@ const FridgePage: NextPage = () => { )}
-
+
{['전체', ...(data?.map((item) => item.category) as string[])].map( (category) => ( diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 29938ea..73a3e3a 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -58,7 +58,9 @@ const FridgePage: NextPage = () => {
-
+
{
-
+
{ + const router = useRouter(); + const { isOpen: isOpenOrderListModal, onOpen: onOpenOrderListModal, @@ -52,8 +56,22 @@ const FriendsPage: NextPage = () => {
-
-
+
{ + router.push('/mypage/friendship'); + }} + /> + } + /> +
{friendsNewsList && friendsNewsList.length !== 0 ? ( {friendsNewsList.map((friendNews) => ( diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 9843331..8b13e8e 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -25,11 +25,13 @@ const Home: NextPage = () => {
} /> -
+
{!!ingredientCount && ( - + )} -
+
} text="내 냉장고" diff --git a/src/pages/mypage/account/index.tsx b/src/pages/mypage/account/index.tsx index 7e3ff84..e8773c7 100644 --- a/src/pages/mypage/account/index.tsx +++ b/src/pages/mypage/account/index.tsx @@ -1,14 +1,19 @@ import Header from '@/components/organisms/Header'; +import useLogout from '@/hooks/useLogout'; import { type NextPage } from 'next'; const FriendsListPage: NextPage = () => { + const logout = useLogout(); + return (
-
로그아웃
+
탈퇴하기
From 604972114731aa358192135e449aadd203c071f5 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sun, 25 Feb 2024 04:44:27 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20react-draggble?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/organisms/IngredientModal.tsx | 4 +- src/pages/fridge/add/index.tsx | 59 +++++++++++++++----- yarn.lock | 13 +++++ 4 files changed, 61 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 2389fe1..245878a 100644 --- a/package.json +++ b/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" diff --git a/src/components/organisms/IngredientModal.tsx b/src/components/organisms/IngredientModal.tsx index 9e4e1f1..2d8269a 100644 --- a/src/components/organisms/IngredientModal.tsx +++ b/src/components/organisms/IngredientModal.tsx @@ -76,7 +76,9 @@ const IngredientModal: React.FC<{ reqBody?.location, ); - const [isInFreezer, setIsInFreezer] = useState(false); + const [isInFreezer, setIsInFreezer] = useState( + reqBody?.location === 'REFRIGERATION', + ); const toggleIsInFreezer: () => void = () => { setIsInFreezer((prev) => !prev); diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index 4af5ce8..6bbcff1 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -11,6 +11,8 @@ import { ModalContent, useDisclosure, } from '@chakra-ui/react'; +import Draggable from 'react-draggable'; +import type { DraggableEvent } from 'react-draggable'; const FridgePage: NextPage = () => { const [ingredientId, setIngredientId] = useState(null); @@ -24,6 +26,25 @@ const FridgePage: NextPage = () => { const data = useGetIngredientList(); + const [scrollX, setScrollX] = useState(0); + + const containerWidth = 1400; + const maxScrollX = containerWidth - window.innerWidth; + + const handleDrag = ( + e: DraggableEvent, + { deltaX }: { deltaX: number }, + ): void => { + const newScrollX = scrollX - deltaX; + if (newScrollX > maxScrollX) { + setScrollX(maxScrollX); + } else if (newScrollX < maxScrollX) { + setScrollX(0); + } else { + setScrollX(newScrollX); + } + }; + return ( <> {isOpenIngredientModal && ( @@ -54,22 +75,30 @@ const FridgePage: NextPage = () => {
-
- {['전체', ...(data?.map((item) => item.category) as string[])].map( - (category) => ( -
{ - setCurrentCategory(category); - }} - className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`} - > - {category} -
- ), - )} +
+ +
+ {['전체', ...(data?.map((item) => item.category) ?? [])].map( + (category) => ( +
{ + setCurrentCategory(category); + }} + className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`} + style={{ whiteSpace: 'nowrap' }} + > + {category} +
+ ), + )} +
+
{data?.map((items) => ( diff --git a/yarn.lock b/yarn.lock index 6f1b243..cdd84f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5613,6 +5613,11 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -10100,6 +10105,14 @@ react-dom@^18: loose-envify "^1.1.0" scheduler "^0.23.0" +react-draggable@^4.4.6: + version "4.4.6" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e" + integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-element-to-jsx-string@^15.0.0: version "15.0.0" resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6" From 1085d3e1f821ccc98825bd41d3417b38b693c39e Mon Sep 17 00:00:00 2001 From: a-honey Date: Sun, 25 Feb 2024 05:07:00 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=ED=81=B4=EB=A6=AD=ED=95=98=EB=A9=B4=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Container.tsx | 4 +++- src/pages/fridge/add/index.tsx | 27 ++++++++++++++++++++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/components/atoms/Container.tsx b/src/components/atoms/Container.tsx index 0d3aca7..14cf524 100644 --- a/src/components/atoms/Container.tsx +++ b/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 = ({ children, className }) => { +const Container: React.FC = ({ children, className, id }) => { return (
{children} diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index 6bbcff1..35faa8c 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -1,7 +1,7 @@ import type { NextPage } from 'next'; import { Header, IngredientModal } from '@/components/organisms'; import { Container } from '../../../components/atoms'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { useGetIngredientList } from '@/hooks/queries/fridge'; import Image from 'next/image'; import { @@ -23,6 +23,21 @@ const FridgePage: NextPage = () => { } = useDisclosure(); const [currentCategory, setCurrentCategory] = useState('전체'); + const categoryRef = useRef(null); + + const handleCategoryClick = (category: string) => { + setCurrentCategory(category); + const categoryComponent = document.getElementById(category); + + if (categoryComponent) { + const labelPosition = categoryComponent.getBoundingClientRect().top; + + window.scrollTo({ + top: window.scrollY + labelPosition - 300, + behavior: 'smooth', + }); + } + }; const data = useGetIngredientList(); @@ -82,16 +97,18 @@ const FridgePage: NextPage = () => {
{['전체', ...(data?.map((item) => item.category) ?? [])].map( (category) => (
{ - setCurrentCategory(category); + handleCategoryClick(category); }} className={`${category === currentCategory ? 'bg-primary2 text-white' : 'bg-white text-gray4'} cursor-pointer body1-semibold pt-[6px] pb-[6px] pl-[18px] pr-[18px] rounded-[20px]`} style={{ whiteSpace: 'nowrap' }} + data-category={category} > {category}
@@ -101,7 +118,11 @@ const FridgePage: NextPage = () => {
{data?.map((items) => ( - +
    {items.ingredientGroupList.map((item) => (