[#127] Feat: 재료 추가 성공 모달 연결 및 api 추가 (#128)

index.html

@@ -11,7 +11,7 @@
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/assets/thumbnail.png" />
     <meta property="og:image:width" content="800" />
-    <meta property="og:image:height" content="800" />
+    <meta property="og:image:height" content="400" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       property="og:description"

src/apis/tteokguk.ts

@@ -26,3 +26,6 @@ export const postTteokguk = (tteokguk: PostTteokgukRequest) =>
 export const deleteTteokguk = (id: number) => http.delete(`api/v1/tteokguk/${id}`);
 
 export const getRandomTteokguk = () => http.get<GetTteokgukResponse>("api/v1/tteokguk/random");
+
+export const postCompleteTteokguk = (id: number) =>
+  http.post<GetTteokgukResponse>(`api/v1/tteokguk/completion/${id}`, { tteokgukId: id });

src/components/shared/AddIngredientsToMyTteokgukModal.tsx

@@ -50,17 +50,22 @@ const AddIngredientsToMyTteokgukModal = ({
       },
       {
         onSuccess: () => {
-          onClose();
           updateSelectedIngredients([]);
+          onClose();
         },
       },
     );
   };
 
+  const handleClickClose = () => {
+    onClose();
+    updateSelectedIngredients([]);
+  };
+
   return (
     isOpen && (
       <Modal className={styles.container}>
-        <Modal.Header onClose={onClose} hasCloseButton className={styles.title}>
+        <Modal.Header onClose={handleClickClose} hasCloseButton className={styles.title}>
           떡국 재료 추가하기
         </Modal.Header>
         <Modal.Body className={styles.contentContainer}>

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 }) => (
             <CheerSuccessModal
               isOpen={isOpen}

src/components/shared/SuccessfulTteokgukCreationModal.tsx

@@ -12,7 +12,7 @@ import useRouter from "@/routes/useRouter";
 interface Props {
   isOpen: boolean;
   onClose: () => 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",

src/index.css

@@ -3,6 +3,7 @@
 @layer reset {
   html {
     font-size: 62.5%;
+    scrollbar-gutter: stable;
   }
 }
 

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({

src/pages/LoginPage.tsx

@@ -147,6 +147,7 @@ const styles = {
   }),
   kakao: css({
     flexGrow: 1,
+    marginLeft: "-2.4rem",
   }),
   signupLink: css({
     display: "block",

src/pages/TteokgukPage.tsx

@@ -21,24 +21,32 @@ 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;
 
 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 }) => (
+          <SuccessfulTteokgukCreationModal
+            isOpen={isOpen}
+            onClose={close}
+            isCompletion
+            tteokgukId={tteokgukId}
+            nickname={nickname}
+            tteokgukBackgroundColor={backgroundColor}
+            frontGarnish={frontGarnish}
+            backGarnish={backGarnish}
+          />
+        ));
+      },
+    });
+  };
+
   return (
     <Fragment>
       <Header showBackButton actionIcon="profile">
@@ -208,7 +235,7 @@ const TteokgukPage = () => {
             떡국 재료 보내기
           </Button>
         )}
-        {isMyTteokguk && !completion && (
+        {isMyTteokguk && requiredIngredients.length !== 0 && !completion && (
           <Button
             onClick={handleClickAddIngredientButton}
             color="primary.45"
@@ -217,13 +244,18 @@ const TteokgukPage = () => {
             떡국 재료 추가하기
           </Button>
         )}
-        {isMyTteokguk && completion && (
+        {isMyTteokguk && requiredIngredients.length === 0 && completion && (
           <Link to="/tteokguk/create">
             <Button color="primary.45" applyColorTo="outline">
               다른 떡국 만들기
             </Button>
           </Link>
         )}
+        {isMyTteokguk && requiredIngredients.length === 0 && !completion && (
+          <Button onClick={handleClickCompleteButton} color="primary.45" applyColorTo="outline">
+            완성하기
+          </Button>
+        )}
 
         {isMyTteokguk && (
           <div className={styles.wishDeleteButton}>

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 =
   | "/"

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<GetTteokgukResponse>(() => ({
   queryFn: getRandomTteokguk,
   enabled: false,
 }));
+
+export const $postCompleteTteokguk = atomWithMutation((get) => ({
+  mutationFn: (id: number) => postCompleteTteokguk(id),
+  onSuccess: () => {
+    get(queryClientAtom).invalidateQueries({ queryKey: ["tteokguk"] });
+  },
+}));