From aa6843c76ddc2b475109c92a1d87705a0a346015 Mon Sep 17 00:00:00 2001 From: a-honey Date: Fri, 23 Feb 2024 03:33:47 +0900 Subject: [PATCH 01/15] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20id=EB=A1=9C?= =?UTF-8?q?=20=EB=83=89=EC=9E=A5=EA=B3=A0=20=EB=B6=88=EB=9F=AC=EC=98=A4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/FridgeListItem.tsx | 10 ++++-- src/components/organisms/FridgeListModal.tsx | 35 ++++++++++++-------- src/pages/friend/[id]/index.tsx | 7 +++- 3 files changed, 34 insertions(+), 18 deletions(-) diff --git a/src/components/molecules/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx index f5a7473..0dbc04f 100644 --- a/src/components/molecules/FridgeListItem.tsx +++ b/src/components/molecules/FridgeListItem.tsx @@ -7,12 +7,14 @@ interface FridgeListItemProps { isCurrentFridge: boolean; fridgeName: string; onClick: () => void; + isMine: boolean; } const FridgeListItem: React.FC = ({ isCurrentFridge, fridgeName, onClick, + isMine = true, }) => { return ( = ({ >
{fridgeName}
-
- -
+ {isMine && ( +
+ +
+ )}
diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index 201759b..9b5dc84 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/src/components/organisms/FridgeListModal.tsx @@ -8,19 +8,21 @@ import { useRouter } from 'next/router'; import usePostFridge from '@/hooks/queries/fridge/usePostFridge'; const FridgeListModal: React.FC<{ - isMyFridgeList?: boolean; -}> = ({ isMyFridgeList }) => { + ownerId?: number; +}> = ({ ownerId }) => { const [currentFridge, setCurrentFridge] = useState({ id: 1, name: '기본 냉장고', }); const router = useRouter(); - const fridgeList = useGetMyFridgeList(); + const fridgeList = useGetMyFridgeList(ownerId ?? undefined); const fridgeMutation = usePostFridge(); const handleFridgeClick = (id: number) => { - void router.push(`?fridge-id=${id}`); + void router.push( + ownerId ? `/friend/${ownerId}?fridge-id=${id}` : `?fridge-id=${id}`, + ); }; const handleNewFridgeClick = () => { @@ -40,6 +42,7 @@ const FridgeListModal: React.FC<{
{fridgeList?.map(({ id, name }) => ( ))} - + {!ownerId && ( + + )}
- + {!ownerId && ( + + )} )} diff --git a/src/hooks/queries/fridge/index.ts b/src/hooks/queries/fridge/index.ts index 6fffac2..8423391 100644 --- a/src/hooks/queries/fridge/index.ts +++ b/src/hooks/queries/fridge/index.ts @@ -3,3 +3,4 @@ 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'; diff --git a/src/hooks/queries/fridge/useDeleteFridgeById.ts b/src/hooks/queries/fridge/useDeleteFridgeById.ts new file mode 100644 index 0000000..74474e4 --- /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.INGREDIENT_LIST, + `/refrigs/${id}`, + onSuccess, + 'DELETE', + ); +}; + +export default useDeleteFridgeById; From 301fc9adae7c89fd29443290ffdf085c6ae62f57 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 24 Feb 2024 02:28:53 +0900 Subject: [PATCH 13/15] =?UTF-8?q?feat:=20=EB=83=89=EC=9E=A5=EA=B3=A0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/FridgeListItem.tsx | 49 +++++++++++++++++-- src/components/organisms/FridgeListModal.tsx | 18 +++++++ src/hooks/queries/fridge/index.ts | 1 + .../queries/fridge/useDeleteFridgeById.ts | 2 +- src/hooks/queries/fridge/useGetFridgeList.ts | 2 +- src/hooks/queries/fridge/usePutFridgeById.ts | 20 ++++++++ 6 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 src/hooks/queries/fridge/usePutFridgeById.ts diff --git a/src/components/molecules/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx index 0dbc04f..5732961 100644 --- a/src/components/molecules/FridgeListItem.tsx +++ b/src/components/molecules/FridgeListItem.tsx @@ -1,6 +1,7 @@ import { GrayBox, Radio } from '../atoms'; import { EditIcon } from '@/assets/icons'; +import { usePutFridgeById } from '@/hooks/queries/fridge'; import React from 'react'; interface FridgeListItemProps { @@ -8,6 +9,11 @@ interface FridgeListItemProps { 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 = ({ @@ -15,18 +21,55 @@ const FridgeListItem: React.FC = ({ 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 }); + }; + + console.log(isEditingFridgeName); + console.log(newFridgeName); return (
-
{fridgeName}
+ {isEditingFridgeName && id === newFridgeName.id ? ( + { + handleNewFridgeName(id, e.target.value); + }} + /> + ) : ( +
{fridgeName}
+ )} {isMine && ( -
+
+ )}
diff --git a/src/components/organisms/FridgeListModal.tsx b/src/components/organisms/FridgeListModal.tsx index 0d65a44..55aa73a 100644 --- a/src/components/organisms/FridgeListModal.tsx +++ b/src/components/organisms/FridgeListModal.tsx @@ -12,6 +12,11 @@ const FridgeListModal: React.FC<{ 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: '기본 냉장고', @@ -41,6 +46,14 @@ const FridgeListModal: React.FC<{ deleteFridgeMutation.mutate({}); }; + const handleNewFridgeName = (id: number, name: string) => { + setNewFridgeName({ id, name }); + }; + + const togglesetIsEditingFridgeName = () => { + setIsEditingFridgeName((prev) => !prev); + }; + return (
@@ -52,9 +65,14 @@ const FridgeListModal: React.FC<{
{fridgeList?.map(({ id, name }) => ( { setCurrentFridge({ id, name }); diff --git a/src/hooks/queries/fridge/index.ts b/src/hooks/queries/fridge/index.ts index 8423391..1aa9c0e 100644 --- a/src/hooks/queries/fridge/index.ts +++ b/src/hooks/queries/fridge/index.ts @@ -4,3 +4,4 @@ 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 index 74474e4..dd6a8d3 100644 --- a/src/hooks/queries/fridge/useDeleteFridgeById.ts +++ b/src/hooks/queries/fridge/useDeleteFridgeById.ts @@ -7,7 +7,7 @@ const useDeleteFridgeById = (id: number) => { void queryClient.invalidateQueries(); }; return useBaseMutation( - queryKeys.INGREDIENT_LIST, + queryKeys.MY_FRIDGE_LIST, `/refrigs/${id}`, onSuccess, 'DELETE', 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/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; From 82d88f82bb0acc5d37966dc24c73cbdb7cade789 Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 24 Feb 2024 03:07:43 +0900 Subject: [PATCH 14/15] =?UTF-8?q?feat:=20=EC=8B=9D=EC=9E=90=EC=9E=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20api?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/Counter.tsx | 5 +- src/components/organisms/FridgeInfoBox.tsx | 4 +- .../organisms/IngredientAddModal.tsx | 65 ++++++++++++------- .../queries/fridge/useGetIngredientById.ts | 2 +- src/hooks/queries/fridge/usePostIngredient.ts | 9 +-- 5 files changed, 55 insertions(+), 30 deletions(-) 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/organisms/FridgeInfoBox.tsx b/src/components/organisms/FridgeInfoBox.tsx index 3514384..17041fa 100644 --- a/src/components/organisms/FridgeInfoBox.tsx +++ b/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}`, + ); }} /> )} diff --git a/src/components/organisms/IngredientAddModal.tsx b/src/components/organisms/IngredientAddModal.tsx index 4bee752..260659e 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,43 @@ 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 }); + console.log({ ...reqBody }); + postIngredient.mutate({ + ...reqBody, + location: isInFreezer ? 'FREEZING' : 'FREEZING', + }); }; - const data = useGetIngredientById(id); - return (
@@ -71,28 +86,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 +115,19 @@ const IngredientAddModal: React.FC<{ title="수량" > { + setReqBody((prev) => ({ + ...prev, + quantity: prev.quantity + 1, + })); + }} + handleDecreaseCount={() => { + setReqBody((prev) => ({ + ...prev, + quantity: prev.quantity - 1, + })); + }} /> { 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(), From 0d1fa9d5279da250ee05eeeef209f69c2eb20c2d Mon Sep 17 00:00:00 2001 From: a-honey Date: Sat, 24 Feb 2024 03:14:13 +0900 Subject: [PATCH 15/15] =?UTF-8?q?chore:=20=EC=BD=98=EC=86=94=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/Lottie.tsx | 7 +++---- src/components/molecules/FridgeListItem.tsx | 2 -- src/components/organisms/IngredientAddModal.tsx | 1 - 3 files changed, 3 insertions(+), 7 deletions(-) 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/FridgeListItem.tsx b/src/components/molecules/FridgeListItem.tsx index 5732961..dded0fe 100644 --- a/src/components/molecules/FridgeListItem.tsx +++ b/src/components/molecules/FridgeListItem.tsx @@ -33,8 +33,6 @@ const FridgeListItem: React.FC = ({ putFridgeName.mutate({ name: newFridgeName.name }); }; - console.log(isEditingFridgeName); - console.log(newFridgeName); return ( void = () => { - console.log({ ...reqBody }); postIngredient.mutate({ ...reqBody, location: isInFreezer ? 'FREEZING' : 'FREEZING',