diff --git a/frontend/src/assets/webp/landing_banner_awake.webp b/frontend/src/assets/webp/landing_banner_awake.webp new file mode 100644 index 00000000..748aa324 Binary files /dev/null and b/frontend/src/assets/webp/landing_banner_awake.webp differ diff --git a/frontend/src/hooks/query/review.ts b/frontend/src/hooks/query/review.ts index 8ab2f4ea..8a84f4ad 100644 --- a/frontend/src/hooks/query/review.ts +++ b/frontend/src/hooks/query/review.ts @@ -24,7 +24,7 @@ import { FOOD_QUERY_KEY } from './food'; const QUERY_KEY = { reviewItem: 'reviewItem', reviewList: (petFoodId: string) => ['reviewList', petFoodId, location.search], - reviewSummary: 'reviewSummary', + reviewSummary: (petFoodId: string) => ['reviewSummary', petFoodId], reviewListMeta: 'reviewListMeta', }; @@ -62,7 +62,7 @@ export const useAddReviewMutation = () => { mutationFn: postReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 작성이 완료되었습니다.'); @@ -82,7 +82,7 @@ export const useEditReviewMutation = () => { mutationFn: putReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); alert('리뷰 수정이 완료되었습니다.'); @@ -101,7 +101,7 @@ export const useRemoveReviewMutation = () => { mutationFn: deleteReview, onSuccess: (_, { petFoodId }) => { queryClient.invalidateQueries(QUERY_KEY.reviewList(petFoodId)); - queryClient.invalidateQueries([QUERY_KEY.reviewSummary]); + queryClient.invalidateQueries(QUERY_KEY.reviewSummary(petFoodId)); queryClient.invalidateQueries(FOOD_QUERY_KEY.foodDetail(petFoodId)); }, }); @@ -111,7 +111,7 @@ export const useRemoveReviewMutation = () => { export const useReviewSummaryQuery = (payload: Parameter) => { const { data, ...restQuery } = useQuery({ - queryKey: [QUERY_KEY.reviewSummary], + queryKey: QUERY_KEY.reviewSummary(payload.petFoodId), queryFn: () => getReviewSummary(payload), }); diff --git a/frontend/src/pages/Landing/Landing.tsx b/frontend/src/pages/Landing/Landing.tsx index 0650c55a..d8201c9e 100644 --- a/frontend/src/pages/Landing/Landing.tsx +++ b/frontend/src/pages/Landing/Landing.tsx @@ -1,7 +1,8 @@ -import { Suspense, useState } from 'react'; +import { useState } from 'react'; import styled from 'styled-components'; -import ZipgoBannerPng from '@/assets/webp/landing_banner.webp'; +import ZipgoBanner from '@/assets/webp/landing_banner.webp'; +import ZipgoBannerAwake from '@/assets/webp/landing_banner_awake.webp'; import Header from '@/components/@common/Header/Header'; import Template from '@/components/@common/Template'; import FilterBottomSheet from '@/components/Food/FilterBottomSheet/FilterBottomSheet'; @@ -9,18 +10,30 @@ import FoodList from '@/components/Food/FoodList/FoodList'; import FoodSelectionGuideBanner from '@/components/FoodSelectionGuideBanner/FoodSelectionGuideBanner'; import { useToast } from '@/context/Toast/ToastContext'; +const TARGET_NUMBER = 100; + +let startTime: Date | undefined; +let endTime: Date | undefined; + const Landing = () => { const { toast } = useToast(); - const [dogTouchCount, setDogTouchCount] = useState(1); + const isDogAwake = dogTouchCount > TARGET_NUMBER; const onTouchDog = () => { - if (dogTouchCount % 10 === 0) { + if (dogTouchCount === 1) { + startTime = new Date(); + toast.info(`강아지를 ${dogTouchCount}번 쓰다듬었어요.`); + } else if (dogTouchCount === TARGET_NUMBER && startTime) { + endTime = new Date(); + toast.success(`${(+endTime - +startTime) / 1000}초 만에 강아지를 깨웠어요!`); + } else if (TARGET_NUMBER - dogTouchCount === 10) { toast.warning('강아지를 깨우지 않게 조심하세요!'); - } else { + } else if (dogTouchCount < TARGET_NUMBER) { toast.info(`강아지를 ${dogTouchCount}번 쓰다듬었어요.`); } - setDogTouchCount(prev => prev + 1); + + if (dogTouchCount <= TARGET_NUMBER) setDogTouchCount(prev => prev + 1); }; return ( @@ -38,7 +51,11 @@ const Landing = () => { 집사의고민 - +