feat: set cookie for cocktail

package.json

@@ -22,13 +22,15 @@
     "@nanostores/react": "0.7.1",
     "@supabase/supabase-js": "2.39.3",
     "@types/react": "^18.2.48",
+    "@types/react-cookies": "0.1.3",
     "@types/react-dom": "^18.2.18",
     "astro": "^4.2.6",
     "clsx": "2.0.0",
     "framer-motion": "10.16.16",
     "html-to-image": "1.11.11",
     "nanostores": "0.9.5",
     "react": "^18.2.0",
+    "react-cookie": "7.0.2",
     "react-dom": "^18.2.0",
     "sharp": "^0.33.2",
     "tailwind-merge": "2.2.0",

src/components/story/Calculation.tsx

@@ -1,19 +1,20 @@
+import scores from "@/store/score";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
-
-import scores from "@/store/score";
+import { useCookies } from "react-cookie";
 
 const Calculation = () => {
   const $scores = useStore(scores);
+  const setCookie = useCookies(["cocktail"])[1];
 
   useEffect(() => {
     const url: Record<number, string> = {
-      0: "/cocktail/sangria",
-      1: "/cocktail/cosmopolitan",
-      2: "/cocktail/pinacolada",
-      3: "/cocktail/ginandtonic",
-      4: "/cocktail/bluelagoon",
-      5: "/cocktail/lavenderlemonade",
+      0: "sangria",
+      1: "cosmopolitan",
+      2: "pinacolada",
+      3: "ginandtonic",
+      4: "bluelagoon",
+      5: "lavenderlemonade",
     };
     const scoreMap: { [key: string]: number } = $scores;
     const fullscore = [40, 52, 45.5, 49, 49.5, 42.5];
@@ -23,7 +24,8 @@ const Calculation = () => {
     }
     const maxScore = Math.max(...product);
     const maxKey = product.indexOf(maxScore);
-    if (window) window.location.href = url[maxKey];
+    setCookie("cocktail", url[maxKey].toString());
+    if (window) window.location.href = "/cocktail/" + url[maxKey];
   }, []);
 };