From 902414629e2338f4160b46bdf47c02a1a67ba2aa Mon Sep 17 00:00:00 2001 From: "Ahyeon, Jung" <75254185+a-honey@users.noreply.github.com> Date: Sat, 24 Feb 2024 12:53:32 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EB=83=89=EC=9E=A5=EA=B3=A0=20=EC=9D=B4=EB=A6=84?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EC=82=AD=EC=A0=9C,=20=EC=B9=9C?= =?UTF-8?q?=EA=B5=AC=20=EC=B5=9C=EC=8B=A0=20=EA=B7=BC=ED=99=A9,=20?= =?UTF-8?q?=EC=B9=9C=EA=B5=AC=20=EB=83=89=EC=9E=A5=EA=B3=A0=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20(#31)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 친구 id로 냉장고 불러오기 * feat: 홈페이지 내 냉장고 개수 반영 * feat: 친구 최신 근황 api 연동 * feat: 친구 최신 근황 swiper 설치 * feat: 친구 최신 근황 없을때 EmptyBox EmptyIngredient -> EmptyBox 이름 변경 * feat: 친구의 냉장고 페이지 조회 api * feat: 홈페이지 최근 식자재 api * fix: 쿼리 키 수정 * feat: 내 냉장고 url에 정보담기 * feat: 데이터에서 카테고리 목록 가져오기 * fix: 무한렌더링에러 수정 * feat: 냉장고 삭제 api * feat: 냉장고 수정 api * feat: 식자재 추가 api * chore: 콘솔 삭제 --- package.json | 3 +- src/components/atoms/IngredientDateTag.tsx | 4 +- src/components/atoms/Lottie.tsx | 7 +- src/components/molecules/Counter.tsx | 5 +- .../{EmptyIngredient.tsx => EmptyBox.tsx} | 6 +- src/components/molecules/FridgeListItem.tsx | 53 ++++++++++++-- .../molecules/IngredientItemBox.tsx | 28 +++++--- src/components/molecules/index.ts | 2 +- src/components/organisms/FridgeBoard.tsx | 26 +++---- src/components/organisms/FridgeInfoBox.tsx | 10 +-- src/components/organisms/FridgeListModal.tsx | 70 ++++++++++++++----- .../organisms/FriendsRecentBoard.tsx | 41 ++++++----- .../organisms/IngredientAddModal.tsx | 64 +++++++++++------ src/components/organisms/IngredientBoard.tsx | 14 ++-- src/hooks/queries/fridge/index.ts | 2 + .../queries/fridge/useDeleteFridgeById.ts | 17 +++++ .../queries/fridge/useGetFridgeContentById.ts | 23 ++++-- src/hooks/queries/fridge/useGetFridgeList.ts | 2 +- .../queries/fridge/useGetIngredientById.ts | 2 +- src/hooks/queries/fridge/usePostIngredient.ts | 9 +-- src/hooks/queries/fridge/usePutFridgeById.ts | 20 ++++++ src/hooks/queries/friends/index.ts | 1 + .../queries/friends/useGetFriendsNews.ts | 20 ++++++ src/hooks/queries/home/index.ts | 1 + .../queries/home/useGetMyIngredientSummary.ts | 19 +++++ .../mypage/useGetMyIngredientsCount.ts | 2 +- src/hooks/queries/queryKeys.ts | 5 +- src/pages/fridge/add/index.tsx | 28 ++++---- src/pages/fridge/index.tsx | 35 +++++----- src/pages/friend/[id]/index.tsx | 29 +++++++- src/pages/friends/index.tsx | 23 +++++- src/pages/home/index.tsx | 13 ++-- src/types/common/index.d.ts | 5 ++ src/types/fridge/index.d.ts | 11 +++ yarn.lock | 5 ++ 35 files changed, 439 insertions(+), 166 deletions(-) rename src/components/molecules/{EmptyIngredient.tsx => EmptyBox.tsx} (67%) create mode 100644 src/hooks/queries/fridge/useDeleteFridgeById.ts create mode 100644 src/hooks/queries/fridge/usePutFridgeById.ts create mode 100644 src/hooks/queries/friends/index.ts create mode 100644 src/hooks/queries/friends/useGetFriendsNews.ts create mode 100644 src/hooks/queries/home/index.ts create mode 100644 src/hooks/queries/home/useGetMyIngredientSummary.ts diff --git a/package.json b/package.json index ba0869b..2389fe1 100644 --- a/package.json +++ b/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", diff --git a/src/components/atoms/IngredientDateTag.tsx b/src/components/atoms/IngredientDateTag.tsx index 5f6cc68..4813060 100644 --- a/src/components/atoms/IngredientDateTag.tsx +++ b/src/components/atoms/IngredientDateTag.tsx @@ -11,10 +11,10 @@ const IngredientDateTag: React.FC = ({ 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'; diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx index e65d48c..caa66fd 100644 --- a/src/components/atoms/Lottie.tsx +++ b/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 ( - // -
로딩중
+ ); }; diff --git a/src/components/molecules/Counter.tsx b/src/components/molecules/Counter.tsx index 251de57..b09fd97 100644 --- a/src/components/molecules/Counter.tsx +++ b/src/components/molecules/Counter.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import type { CountState } from '@/hooks/useCount'; const Counter: React.FC = ({ @@ -6,12 +6,13 @@ const Counter: React.FC = ({ handleDecreaseCount, handleIncreaseCount, }) => { + useEffect(() => {}, [currentCount]); return (
- + diff --git a/src/components/molecules/EmptyIngredient.tsx b/src/components/molecules/EmptyBox.tsx similarity index 67% rename from src/components/molecules/EmptyIngredient.tsx rename to src/components/molecules/EmptyBox.tsx index 3a6ef90..0dcc46d 100644 --- a/src/components/molecules/EmptyIngredient.tsx +++ b/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 = ({ text }) => { +const EmptyBox: React.FC = ({ text }) => { return (
@@ -14,4 +14,4 @@ const EmptyIngredient: React.FC = ({ text }) => { ); }; -export default EmptyIngredient; +export default EmptyBox; diff --git a/src/components/molecules/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx index f5a7473..dded0fe 100644 --- a/src/components/molecules/FridgeListItem.tsx +++ b/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 = ({ 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 (
-
{fridgeName}
-
- -
+ {isEditingFridgeName && id === newFridgeName.id ? ( + { + handleNewFridgeName(id, e.target.value); + }} + /> + ) : ( +
{fridgeName}
+ )} + {isMine && ( + + )}
diff --git a/src/components/molecules/IngredientItemBox.tsx b/src/components/molecules/IngredientItemBox.tsx index dfd04c5..5a8c059 100644 --- a/src/components/molecules/IngredientItemBox.tsx +++ b/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 = ({ dDay }) => { return (
-
사과
-
12월 21일 저장
+
{data?.name ?? '사과'}
+
+ {`${addDate.getFullYear()}년 ${addDate.getMonth() + 1}월 ${addDate.getDay()}일 저장`} +
- +
); }; diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts index 99e97e5..440a0d6 100644 --- a/src/components/molecules/index.ts +++ b/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'; diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx index cdef6ec..ab69412 100644 --- a/src/components/organisms/FridgeBoard.tsx +++ b/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 ? (
- - - + {data.map((ingredient) => ( + + ))}
) : (
- +
)} diff --git a/src/components/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 3145a92..17041fa 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/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 (
@@ -18,7 +18,7 @@ const FridgeInfoBox: React.FC<{ className="flex items-center gap-[8px]" onClick={toggleIsOpenFridgeListModal} > -
기본 냉장고
+
{name}
{ - void router.push('/fridge/add'); + void router.push( + `/fridge/add?fridgeid=${fridgeid as string}&name=${name as string}`, + ); }} /> )} diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index 201759b..55aa73a 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/src/components/organisms/FridgeListModal.tsx @@ -6,21 +6,34 @@ import { FridgeListItem } from '../molecules'; import useGetMyFridgeList from '@/hooks/queries/fridge/useGetFridgeList'; import { useRouter } from 'next/router'; import usePostFridge from '@/hooks/queries/fridge/usePostFridge'; +import { useDeleteFridgeById } from '@/hooks/queries/fridge'; const FridgeListModal: React.FC<{ - isMyFridgeList?: boolean; -}> = ({ isMyFridgeList }) => { + 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: '기본 냉장고', }); const router = useRouter(); - const fridgeList = useGetMyFridgeList(); + const fridgeList = useGetMyFridgeList(ownerId ?? undefined); const fridgeMutation = usePostFridge(); + const deleteFridgeMutation = useDeleteFridgeById(currentFridge.id); - const handleFridgeClick = (id: number) => { - void router.push(`?fridge-id=${id}`); + const handleFridgeClick = (id: number, name: string) => { + void router.push( + ownerId + ? `/friend/${ownerId}?fridgeid=${id}` + : `fridge/?fridgeid=${id}&name=${name}`, + ); + onCloseFridgeListModal(); }; const handleNewFridgeClick = () => { @@ -29,6 +42,18 @@ const FridgeListModal: React.FC<{ }); }; + const handleDeleteFridgeClick = () => { + deleteFridgeMutation.mutate({}); + }; + + const handleNewFridgeName = (id: number, name: string) => { + setNewFridgeName({ id, name }); + }; + + const togglesetIsEditingFridgeName = () => { + setIsEditingFridgeName((prev) => !prev); + }; + return (
@@ -40,31 +65,44 @@ const FridgeListModal: React.FC<{
{fridgeList?.map(({ id, name }) => ( { setCurrentFridge({ id, name }); }} /> ))} - + {!ownerId && ( + + )}
- + {!ownerId && ( + + )}
diff --git a/src/components/organisms/FriendsRecentBoard.tsx b/src/components/organisms/FriendsRecentBoard.tsx index 0aff35f..56bff43 100644 --- a/src/components/organisms/FriendsRecentBoard.tsx +++ b/src/components/organisms/FriendsRecentBoard.tsx @@ -1,19 +1,17 @@ import React from 'react'; import { GreenArrowButton, Container } from '../atoms'; -import { AppleIcon } from '@/components/atoms/IngredientIcons'; import Link from 'next/link'; +import type { FriendObjectType } from '@/hooks/queries/friends/useGetFriendsNews'; +import Image from 'next/image'; -const FriendsRecentBoard: React.FC = () => { - const INGREDIENT_LIST = [ - { isToday: true }, - { isToday: false }, - { isToday: false }, - ]; +const FriendsRecentBoard: React.FC<{ friendNews: FriendObjectType }> = ({ + friendNews, +}) => { return (
최신근황
- 김지수님이 + {friendNews.nickname} 님이
토마토를 추가했어요!
@@ -21,20 +19,27 @@ const FriendsRecentBoard: React.FC = () => { 그밖에 신선한 재료를 구경할 수 있어요.
- {INGREDIENT_LIST.map((ingredient) => ( -
- + {friendNews.friendRefrigeratorIngredientGroupList.map( + ({ name, iconImage }) => (
- 오늘 추가 + {`${name} +
{name}
-
- ))} + ), + )}
- + diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index 4bee752..4dc0118 100644 --- a/src/components/organisms/IngredientAddModal.tsx +++ b/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,11 +10,17 @@ 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 = () => { @@ -23,33 +28,42 @@ const IngredientAddModal: React.FC<{ 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({ - 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 }); + postIngredient.mutate({ + ...reqBody, + location: isInFreezer ? 'FREEZING' : 'FREEZING', + }); }; - const data = useGetIngredientById(id); - return (
@@ -71,28 +85,24 @@ const IngredientAddModal: React.FC<{
{ - console.log(e.target.value); setReqBody((prev) => ({ ...prev, - addDate: e.target.value, + addDate: new Date(e.target.value), })); }} />
~
{ - console.log(e.target.value); setReqBody((prev) => ({ ...prev, - expirationDate: e.target.value, + expirationDate: new Date(e.target.value), })); }} /> @@ -104,9 +114,19 @@ const IngredientAddModal: React.FC<{ title="수량" > { + setReqBody((prev) => ({ + ...prev, + quantity: prev.quantity + 1, + })); + }} + handleDecreaseCount={() => { + setReqBody((prev) => ({ + ...prev, + quantity: prev.quantity - 1, + })); + }} /> { - const isIngredientItem = true; + const ingredientSummary = useGetMyIngredientSummary(); return ( - {isIngredientItem ? ( + {ingredientSummary && ingredientSummary.length !== 0 ? (
- - + {ingredientSummary.map((data) => ( + + ))}
) : (
- +
)} diff --git a/src/hooks/queries/fridge/index.ts b/src/hooks/queries/fridge/index.ts index 6fffac2..1aa9c0e 100644 --- a/src/hooks/queries/fridge/index.ts +++ b/src/hooks/queries/fridge/index.ts @@ -3,3 +3,5 @@ export { default as useGetIngredientById } from './useGetIngredientById'; 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'; diff --git a/src/hooks/queries/fridge/useDeleteFridgeById.ts b/src/hooks/queries/fridge/useDeleteFridgeById.ts new file mode 100644 index 0000000..dd6a8d3 --- /dev/null +++ b/src/hooks/queries/fridge/useDeleteFridgeById.ts @@ -0,0 +1,17 @@ +import { queryClient } from '@/pages/_app'; +import { queryKeys } from '../queryKeys'; +import { useBaseMutation } from '../useBaseMutation'; + +const useDeleteFridgeById = (id: number) => { + const onSuccess = () => { + void queryClient.invalidateQueries(); + }; + return useBaseMutation( + queryKeys.MY_FRIDGE_LIST, + `/refrigs/${id}`, + onSuccess, + 'DELETE', + ); +}; + +export default useDeleteFridgeById; diff --git a/src/hooks/queries/fridge/useGetFridgeContentById.ts b/src/hooks/queries/fridge/useGetFridgeContentById.ts index b489d02..1ac2849 100644 --- a/src/hooks/queries/fridge/useGetFridgeContentById.ts +++ b/src/hooks/queries/fridge/useGetFridgeContentById.ts @@ -1,15 +1,24 @@ +import type { IngredientDetailType } from '@/types/fridge'; import { queryKeys } from '../queryKeys'; -import { useBaseQuery } from '../useBaseQuery'; +import { fetchData } from '../useBaseQuery'; +import { useQuery } from '@tanstack/react-query'; interface FridgeContentType { - content: []; + content: IngredientDetailType[]; } -const useGetFridgeContentById = (id: string) => { - const { data } = useBaseQuery( - queryKeys.MY_FRIDGE_CONTENT(id), - `/ingrs/detail/refrig/${id}`, - ); +const useGetFridgeContentById = (id: number) => { + // 무한스크롤 or useSuspenseQuery로 변경 해야함 + const { data } = useQuery({ + queryKey: queryKeys.MY_FRIDGE_CONTENT(id), + queryFn: async () => { + return await fetchData( + `/ingrs/detail/refrig/${id}`, + true, + ); + }, + enabled: id !== 0 && !isNaN(id), + }); if (!data?.data) return; diff --git a/src/hooks/queries/fridge/useGetFridgeList.ts b/src/hooks/queries/fridge/useGetFridgeList.ts index 5fa47c2..2de3a7e 100644 --- a/src/hooks/queries/fridge/useGetFridgeList.ts +++ b/src/hooks/queries/fridge/useGetFridgeList.ts @@ -8,7 +8,7 @@ interface IngredientType { const useGetMyFridgeList = (id?: number) => { const { data } = useBaseQuery( - queryKeys.INGREDIENTS(), + queryKeys.MY_FRIDGE_LIST(), `/refrigs/${id ? `users/${id}` : 'my'}`, ); diff --git a/src/hooks/queries/fridge/useGetIngredientById.ts b/src/hooks/queries/fridge/useGetIngredientById.ts index 289ef25..c3c9f30 100644 --- a/src/hooks/queries/fridge/useGetIngredientById.ts +++ b/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) => { diff --git a/src/hooks/queries/fridge/usePostIngredient.ts b/src/hooks/queries/fridge/usePostIngredient.ts index cb7be2c..43b28d0 100644 --- a/src/hooks/queries/fridge/usePostIngredient.ts +++ b/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( queryKeys.INGREDIENTS(), diff --git a/src/hooks/queries/fridge/usePutFridgeById.ts b/src/hooks/queries/fridge/usePutFridgeById.ts new file mode 100644 index 0000000..9040e4b --- /dev/null +++ b/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( + queryKeys.MY_FRIDGE_LIST(), + `/refrigs/${id}`, + onSuccess, + 'PUT', + ); +}; +export default usePutFridgeById; diff --git a/src/hooks/queries/friends/index.ts b/src/hooks/queries/friends/index.ts new file mode 100644 index 0000000..cbae414 --- /dev/null +++ b/src/hooks/queries/friends/index.ts @@ -0,0 +1 @@ +export { default as useGetFriendsNews } from './useGetFriendsNews'; diff --git a/src/hooks/queries/friends/useGetFriendsNews.ts b/src/hooks/queries/friends/useGetFriendsNews.ts new file mode 100644 index 0000000..9652d04 --- /dev/null +++ b/src/hooks/queries/friends/useGetFriendsNews.ts @@ -0,0 +1,20 @@ +import type { IngredientType } from '@/types/common'; +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; + +export interface FriendObjectType { + nickname: string; + refrigeratorId: number; + friendRefrigeratorIngredientGroupList: IngredientType[]; +} + +const useGetFriendsNews = () => { + const { data } = useBaseQuery( + queryKeys.MY_FRIENDS_NEWS(), + `friend-refrigs/recent`, + ); + + return data?.data; +}; + +export default useGetFriendsNews; diff --git a/src/hooks/queries/home/index.ts b/src/hooks/queries/home/index.ts new file mode 100644 index 0000000..9c61a7f --- /dev/null +++ b/src/hooks/queries/home/index.ts @@ -0,0 +1 @@ +export { default as useGetMyIngredientSummary } from './useGetMyIngredientSummary'; diff --git a/src/hooks/queries/home/useGetMyIngredientSummary.ts b/src/hooks/queries/home/useGetMyIngredientSummary.ts new file mode 100644 index 0000000..52e1194 --- /dev/null +++ b/src/hooks/queries/home/useGetMyIngredientSummary.ts @@ -0,0 +1,19 @@ +import { queryKeys } from '../queryKeys'; +import { useBaseQuery } from '../useBaseQuery'; + +interface IngredientType { + id: number; + name: string; + iconImage: string; +} + +const useGetMyIngredientSummary = () => { + const { data } = useBaseQuery( + queryKeys.INGREDIENTS_RECENT(), + '/ingrs/detail/recent', + ); + + return data?.data; +}; + +export default useGetMyIngredientSummary; diff --git a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts index 2b4467a..59ecb27 100644 --- a/src/hooks/queries/mypage/useGetMyIngredientsCount.ts +++ b/src/hooks/queries/mypage/useGetMyIngredientsCount.ts @@ -3,7 +3,7 @@ import { useBaseQuery } from '../useBaseQuery'; const useGetMyIngredientsCount = () => { const { data } = useBaseQuery( - queryKeys.MY_FRIENDS_COUNT(), + queryKeys.MY_INGREDIENTS_COUNT(), `/ingrs/detail/count?day=5`, true, ); diff --git a/src/hooks/queries/queryKeys.ts b/src/hooks/queries/queryKeys.ts index 225174a..5b5d336 100644 --- a/src/hooks/queries/queryKeys.ts +++ b/src/hooks/queries/queryKeys.ts @@ -7,10 +7,13 @@ import type { export const queryKeys = { MY_FRIDGE_LIST: () => ['my_fridge_list'], MY_FRIENDS_COUNT: () => ['my_friends_count'], - MY_FRIDGE_CONTENT: (id: string) => ['my_fridge', id], + MY_FRIDGE_CONTENT: (id: number) => ['my_fridge', id], + MY_INGREDIENTS_COUNT: () => ['my_ingredient_count'], + MY_FRIENDS_NEWS: () => ['my_friends_news'], INGREDIENT_LIST: () => ['ingredient_list'], INGREDIENT_ID: (id: number) => ['ingredient', id], INGREDIENTS: () => ['my-ingredient'], + INGREDIENTS_RECENT: () => ['my-ingredient', 'recent'], KAKAO: () => ['kakao'], SHARES: (sort: ShareSortType, status: ShareStatusType) => [ 'shares', diff --git a/src/pages/fridge/add/index.tsx b/src/pages/fridge/add/index.tsx index f630de0..22d37e7 100644 --- a/src/pages/fridge/add/index.tsx +++ b/src/pages/fridge/add/index.tsx @@ -12,8 +12,6 @@ import { useDisclosure, } from '@chakra-ui/react'; -const CATEGORIES = ['전체', '과일', '고기']; - const FridgePage: NextPage = () => { const [ingredientId, setIngredientId] = useState(null); const { @@ -56,18 +54,20 @@ const FridgePage: NextPage = () => {
-
- {CATEGORIES.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) 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((items) => ( diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx index 07bdff0..d5e7a88 100644 --- a/src/pages/fridge/index.tsx +++ b/src/pages/fridge/index.tsx @@ -13,12 +13,12 @@ import { useDisclosure, } from '@chakra-ui/react'; import { useGetMe } from '@/hooks/queries/mypage'; -import { - useGetFridgeContentById, - useGetMyIngredients, -} from '@/hooks/queries/fridge'; +import { useGetFridgeContentById } from '@/hooks/queries/fridge'; +import { useRouter } from 'next/router'; +import { useEffect } from 'react'; const FridgePage: NextPage = () => { + const router = useRouter(); const { isOpen: isOpenFridgeListModal, onOpen: onOpenFridgeListModal, @@ -27,20 +27,19 @@ const FridgePage: NextPage = () => { const { nickName } = useGetMe(); - const urlParams = - typeof window !== 'undefined' - ? new URLSearchParams(window.location.search) - : null; - const fridgeId = urlParams?.get('fridge-id'); + const { fridgeid: fridgeId } = router.query; + + // if (!fridgeId) { + // onOpenFridgeListModal(); + // } + + const data = useGetFridgeContentById(Number(fridgeId))?.content; - let data; - if (fridgeId) { - data = useGetFridgeContentById(fridgeId)?.content; - console.log(data); - return data; - } else { - data = useGetMyIngredients(); - } + useEffect(() => { + if (!fridgeId) { + onOpenFridgeListModal(); + } + }, []); return ( <> @@ -60,7 +59,7 @@ const FridgePage: NextPage = () => { margin={0} > - + diff --git a/src/pages/friend/[id]/index.tsx b/src/pages/friend/[id]/index.tsx index 727e4fa..dbd2b3e 100644 --- a/src/pages/friend/[id]/index.tsx +++ b/src/pages/friend/[id]/index.tsx @@ -12,13 +12,29 @@ import { ModalContent, useDisclosure, } 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(''); const { isOpen: isOpenFridgeListModal, onOpen: onOpenFridgeListModal, onClose: onCloseFridgeListModal, } = useDisclosure(); + const { id: fridgeId, name } = router.query; + + if (!fridgeId) { + onOpenFridgeListModal(); + } + + const data = useGetFridgeContentById(Number(fridgeId))?.content; + + useEffect(() => { + setNickName(name as string); + }, []); return ( <> { margin={0} > - + {/* 친구 아이디 넣어야함 */} +
- - + +
diff --git a/src/pages/friends/index.tsx b/src/pages/friends/index.tsx index c314a56..c53ea3c 100644 --- a/src/pages/friends/index.tsx +++ b/src/pages/friends/index.tsx @@ -4,6 +4,7 @@ import { OrderListModal, } from '@/components/organisms'; import Header from '@/components/organisms/Header'; +import { useGetFriendsNews } from '@/hooks/queries/friends'; import { Modal, ModalBody, @@ -12,6 +13,13 @@ import { useDisclosure, } from '@chakra-ui/react'; import { type NextPage } from 'next'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; +import 'swiper/css/scrollbar'; +import { Container } from '@/components/atoms'; +import { EmptyBox } from '@/components/molecules'; const FriendsPage: NextPage = () => { const { @@ -20,6 +28,7 @@ const FriendsPage: NextPage = () => { onClose: onCloseOrderListModal, } = useDisclosure(); + const friendsNewsList = useGetFriendsNews(); return ( <> {
- + {friendsNewsList && friendsNewsList.length !== 0 ? ( + + {friendsNewsList.map((friendNews) => ( + + + + ))} + + ) : ( + + + + )} diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index e1250e5..9843331 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -9,11 +9,11 @@ import Header from '@/components/organisms/Header'; import Link from 'next/link'; import { AlarmIcon } from '@/assets/icons'; import withLogin from '@/components/templates/withLogin'; - -const NEAR_EXPIRATION_COUNT_MOCK_DATA = 2; +import { useGetMyIngredientsCount } from '@/hooks/queries/mypage'; const Home: NextPage = () => { - const isNearExpirationWarn = true; + const ingredientCount = useGetMyIngredientsCount(); + return (
{ } />
- {isNearExpirationWarn && ( - + {!!ingredientCount && ( + )}