diff --git a/index.html b/index.html index a93c42f..0b07648 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + export const deleteTteokguk = (id: number) => http.delete(`api/v1/tteokguk/${id}`); export const getRandomTteokguk = () => http.get("api/v1/tteokguk/random"); + +export const postCompleteTteokguk = (id: number) => + http.post(`api/v1/tteokguk/completion/${id}`, { tteokgukId: id }); diff --git a/src/components/shared/AddIngredientsToMyTteokgukModal.tsx b/src/components/shared/AddIngredientsToMyTteokgukModal.tsx index d16f396..8013ba0 100644 --- a/src/components/shared/AddIngredientsToMyTteokgukModal.tsx +++ b/src/components/shared/AddIngredientsToMyTteokgukModal.tsx @@ -50,17 +50,22 @@ const AddIngredientsToMyTteokgukModal = ({ }, { onSuccess: () => { - onClose(); updateSelectedIngredients([]); + onClose(); }, }, ); }; + const handleClickClose = () => { + onClose(); + updateSelectedIngredients([]); + }; + return ( isOpen && ( - + 떡국 재료 추가하기 diff --git a/src/components/shared/CreateCheerMessageModal.tsx b/src/components/shared/CreateCheerMessageModal.tsx index 2c510ec..e6e19eb 100644 --- a/src/components/shared/CreateCheerMessageModal.tsx +++ b/src/components/shared/CreateCheerMessageModal.tsx @@ -52,6 +52,8 @@ const CreateCheerMessageModal = ({ isOpen, onClose, tteokgukId }: Props) => { }, { onSuccess: ({ rewardIngredient, rewardQuantity }) => { + updateSelectedIngredient(null); + cheerSuccessOverlay.open(({ isOpen, close: handleCloseCheerSuccessModal }) => ( void; - tteokgukId?: number; + tteokgukId: number; isCompletion?: boolean; nickname?: string; tteokgukBackgroundColor: TteokgukBackgroudColor; @@ -33,11 +33,9 @@ const SuccessfulTteokgukCreationModal = ({ const router = useRouter(); const handleClickButton = () => { - onClose(); + router.replace(`/tteokguks/${tteokgukId}`); - if (!isCompletion && tteokgukId) { - router.push(`/tteokguks/${tteokgukId}`); - } + onClose(); }; return ( @@ -77,6 +75,7 @@ const styles = { description: css({ fontSize: "1.4rem", marginTop: "0.8rem", + textAlign: "center", }), imageContainer: css({ position: "relative", diff --git a/src/index.css b/src/index.css index f6b2450..2c0cddd 100644 --- a/src/index.css +++ b/src/index.css @@ -3,6 +3,7 @@ @layer reset { html { font-size: 62.5%; + scrollbar-gutter: stable; } } diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 63dea92..8708aec 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -51,9 +51,10 @@ const styles = { alignItems: "center", justifyContent: "center", padding: "6.8rem 4rem 11.2rem", + backgroundImage: `url("@/assets/images/home-pattern.png")`, backgroundPosition: "center", backgroundRepeat: "repeat-Y", - backgroundImage: `url(src/assets/images/home-pattern.png)`, + backgroundSize: "contain", overflow: "hidden", }), logo: css({ diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 6cb387c..20f2960 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -147,6 +147,7 @@ const styles = { }), kakao: css({ flexGrow: 1, + marginLeft: "-2.4rem", }), signupLink: css({ display: "block", diff --git a/src/pages/TteokgukPage.tsx b/src/pages/TteokgukPage.tsx index 8e33989..575615c 100644 --- a/src/pages/TteokgukPage.tsx +++ b/src/pages/TteokgukPage.tsx @@ -21,11 +21,17 @@ import Button from "@/components/common/Button"; import Ingredient from "@/components/common/Ingredient"; import TteokgukImage from "@/components/common/TteokgukImage"; import { $getLoggedInUserDetails } from "@/store/user"; -import { $deleteTteokguk, $getRandomTteokguk, $getTteokguk } from "@/store/tteokguk"; +import { + $deleteTteokguk, + $getRandomTteokguk, + $getTteokguk, + $postCompleteTteokguk, +} from "@/store/tteokguk"; import { INGREDIENT_ICON_BY_KEY, INGREDIENT_NAME_BY_KEY } from "@/constants/ingredient"; import SmallActivityIcon from "@/assets/svg/small-activity.svg"; import MeterialIcon from "@/assets/svg/material.svg"; import Loading from "@/components/common/Loading"; +import SuccessfulTteokgukCreationModal from "@/components/shared/SuccessfulTteokgukCreationModal"; const MAX_INGREDIENTS = 5; @@ -33,12 +39,14 @@ const TteokgukPage = () => { const { id } = useParams(); const addIngredientsToMyTteokgukOverlay = useOverlay(); const sendIngredientsToOthersTteokgukOverlay = useOverlay(); + const successfulTteokgukCreationOverlay = useOverlay(); const router = useRouter(); const { confirm } = useDialog(); const { data: loggedInUserDetails } = useAtomValue($getLoggedInUserDetails); const { mutate: deleteTteokguk } = useAtomValue($deleteTteokguk); const { data: tteokguk, isPending, isError, refetch } = useAtomValue($getTteokguk(Number(id))); const { refetch: refetchRandomTteokguk } = useAtomValue($getRandomTteokguk); + const { mutate: postCompleteTteokguk } = useAtomValue($postCompleteTteokguk); if (isPending) { return ( @@ -129,6 +137,25 @@ const TteokgukPage = () => { } }; + const handleClickCompleteButton = () => { + postCompleteTteokguk(tteokgukId, { + onSuccess: () => { + successfulTteokgukCreationOverlay.open(({ isOpen, close }) => ( + + )); + }, + }); + }; + return (
@@ -208,7 +235,7 @@ const TteokgukPage = () => { 떡국 재료 보내기 )} - {isMyTteokguk && !completion && ( + {isMyTteokguk && requiredIngredients.length !== 0 && !completion && ( )} - {isMyTteokguk && completion && ( + {isMyTteokguk && requiredIngredients.length === 0 && completion && ( )} + {isMyTteokguk && requiredIngredients.length === 0 && !completion && ( + + )} {isMyTteokguk && (
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 5fd1430..d10e261 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -15,11 +15,11 @@ import SearchUserPage from "@/pages/SearchUserPage"; import UserPage from "@/pages/UserPage"; import NotFoundPage from "@/pages/NotFoundPage"; import MainPageFallback from "@/pages/MainPage.fallback"; +import MyActivityPageFallback from "@/pages/MyActivityPage.fallback"; import ProtectedRoute from "./ProtectedRoute"; import Layout from "@/components/layout/Layout"; -import MyActivityPageFallback from "@/pages/MyActivityPage.fallback"; export type RoutePath = | "/" diff --git a/src/store/tteokguk.ts b/src/store/tteokguk.ts index d27b243..bf4b028 100644 --- a/src/store/tteokguk.ts +++ b/src/store/tteokguk.ts @@ -1,4 +1,9 @@ -import { atomWithInfiniteQuery, atomWithMutation, atomWithQuery } from "jotai-tanstack-query"; +import { + atomWithInfiniteQuery, + atomWithMutation, + atomWithQuery, + queryClientAtom, +} from "jotai-tanstack-query"; import { atomFamily } from "jotai/utils"; import { atom } from "jotai"; @@ -9,6 +14,7 @@ import { postTteokguk, deleteTteokguk, getRandomTteokguk, + postCompleteTteokguk, } from "@/apis/tteokguk"; import { atomFamilyWithQuery } from "@/utils/jotai"; @@ -96,3 +102,10 @@ export const $getRandomTteokguk = atomWithQuery(() => ({ queryFn: getRandomTteokguk, enabled: false, })); + +export const $postCompleteTteokguk = atomWithMutation((get) => ({ + mutationFn: (id: number) => postCompleteTteokguk(id), + onSuccess: () => { + get(queryClientAtom).invalidateQueries({ queryKey: ["tteokguk"] }); + }, +}));