From a6937d1be6cb60290fe1868258458b9293a89ee9 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 00:11:39 +0700
Subject: [PATCH 01/12] refactor: change to get prevent browser not redirect

---
 src/lib/supabase.ts          | 3 ---
 src/pages/api/auth/signin.ts | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
index e6271d4..abefb05 100644
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -6,9 +6,6 @@ export const supabase = createClient(
   {
     auth: {
       flowType: "pkce",
-      // autoRefreshToken: false,
-      // detectSessionInUrl: false,
-      // persistSession: true,
     },
   }
 );
diff --git a/src/pages/api/auth/signin.ts b/src/pages/api/auth/signin.ts
index 0d3de13..0924182 100644
--- a/src/pages/api/auth/signin.ts
+++ b/src/pages/api/auth/signin.ts
@@ -3,7 +3,7 @@ import type { APIRoute } from "astro";
 
 import { supabase } from "@/lib/supabase";
 
-export const POST: APIRoute = async ({ redirect }) => {
+export const GET: APIRoute = async ({ redirect }) => {
   const { data, error } = await supabase.auth.signInWithOAuth({
     provider: "google" as Provider,
     options: {

From f4582a5ffe69641127da499b6fe6c876e95a7b82 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 00:11:54 +0700
Subject: [PATCH 02/12] feat: dynamic button

---
 src/components/register-page/Hero.tsx | 35 +++++++++++++++++++++------
 src/pages/index.astro                 |  2 +-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx
index 36e248d..ee00ce4 100644
--- a/src/components/register-page/Hero.tsx
+++ b/src/components/register-page/Hero.tsx
@@ -1,6 +1,10 @@
 import BarImage from "@/assets/images/bar.jpg";
 
-const Hero = (): JSX.Element => {
+interface HeroProps {
+  accessToken: string | undefined;
+}
+
+const Hero = ({ accessToken }: HeroProps): JSX.Element => {
   return (
     <div className="flex w-full flex-grow flex-col items-center justify-center space-y-12">
       <div className="flex aspect-square w-full overflow-hidden rounded-lg object-cover">
@@ -11,13 +15,30 @@ const Hero = (): JSX.Element => {
         />
       </div>
       <div className="w-full space-y-4">
-        <button className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button">
-          เริ่มต้นการทำแบบทดสอบ
-        </button>
+        {accessToken && (
+          <a href="/story/scene1">
+            <button
+              type="button"
+              className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+            >
+              เริ่มต้นการทำแบบทดสอบ
+            </button>
+          </a>
+        )}
 
-        <button className="flex h-fit w-full flex-wrap items-center justify-center gap-2 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button">
-          <i className="icon-[devicon--google] h-5 w-5"></i>Register with google
-        </button>
+        {!accessToken && (
+          <form action="/api/auth/signin" method="get">
+            <button
+              value="google"
+              name="provider"
+              type="submit"
+              className="flex h-fit w-full flex-wrap items-center justify-center gap-2 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+            >
+              <i className="icon-[devicon--google] h-5 w-5"></i>Login with
+              google
+            </button>
+          </form>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/index.astro b/src/pages/index.astro
index adedd6b..d9d9344 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -32,7 +32,7 @@ const accessToken = cookies.get("sb-access-token")?.value;
           class="rounded-full backdrop-blur-lg"
         />
       </div>
-      <Hero client:load />
+      <Hero client:load accessToken={accessToken} />
     </div>
   </SignInBackground>
 </BaseLayout>

From bbdf044c9413b7ccb82604b02cccdd35fdee735c Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 08:37:01 +0700
Subject: [PATCH 03/12] refactor: using data-astro-reload

---
 src/components/register-page/Hero.tsx | 2 +-
 src/pages/api/auth/signin.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx
index ee00ce4..91cfff7 100644
--- a/src/components/register-page/Hero.tsx
+++ b/src/components/register-page/Hero.tsx
@@ -27,7 +27,7 @@ const Hero = ({ accessToken }: HeroProps): JSX.Element => {
         )}
 
         {!accessToken && (
-          <form action="/api/auth/signin" method="get">
+          <form action="/api/auth/signin" method="post" data-astro-reload>
             <button
               value="google"
               name="provider"
diff --git a/src/pages/api/auth/signin.ts b/src/pages/api/auth/signin.ts
index 0924182..0d3de13 100644
--- a/src/pages/api/auth/signin.ts
+++ b/src/pages/api/auth/signin.ts
@@ -3,7 +3,7 @@ import type { APIRoute } from "astro";
 
 import { supabase } from "@/lib/supabase";
 
-export const GET: APIRoute = async ({ redirect }) => {
+export const POST: APIRoute = async ({ redirect }) => {
   const { data, error } = await supabase.auth.signInWithOAuth({
     provider: "google" as Provider,
     options: {

From 28be38635aacdd5c5deefdaf248bee24e5e29c20 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 09:40:41 +0700
Subject: [PATCH 04/12] feat: protected route without validation

---
 src/middleware/index.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index be5317b..e35bdfc 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -1,8 +1,15 @@
 import { defineMiddleware } from "astro:middleware";
 
-export const onRequest = defineMiddleware((context, next) => {
-  // TODO: Implement auth routes logic
-  console.log("Middleware works!");
+export const onRequest = defineMiddleware(
+  ({ cookies, request, redirect }, next) => {
+    const cookie = cookies.get("sb-access-token")?.value;
 
-  return next();
-});
+    if (
+      (request.url.includes("/story") || request.url.includes("/cocktail")) &&
+      !cookie
+    ) {
+      return redirect("/");
+    }
+    return next();
+  }
+);

From 6e3d55ff754e11941bf6e847bc9f93d710c81385 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 09:53:19 +0700
Subject: [PATCH 05/12] feat: set cookie for cocktail

---
 package.json                         |   2 +
 pnpm-lock.yaml                       | 118 +++++++++++++++++++++++++++
 src/components/story/Calculation.tsx |  20 +++--
 3 files changed, 131 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 6d9c910..2fbe438 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@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",
@@ -29,6 +30,7 @@
     "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78479fc..f72a223 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   '@types/react':
     specifier: ^18.2.48
     version: 18.2.48
+  '@types/react-cookies':
+    specifier: 0.1.3
+    version: 0.1.3
   '@types/react-dom':
     specifier: ^18.2.18
     version: 18.2.18
@@ -56,6 +59,9 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-cookie:
+    specifier: 7.0.2
+    version: 7.0.2(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -1370,6 +1376,23 @@ packages:
       '@babel/types': 7.23.9
     dev: false
 
+  /@types/body-parser@1.19.5:
+    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/connect@3.4.38:
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+    dependencies:
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/cookie@0.6.0:
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+    dev: false
+
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
     dependencies:
@@ -1380,12 +1403,41 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: false
 
+  /@types/express-serve-static-core@4.17.42:
+    resolution: {integrity: sha512-ckM3jm2bf/MfB3+spLPWYPUH573plBFwpOhqQ2WottxYV85j1HQFlxmnTq57X1yHY9awZPig06hL/cLMgNWHIQ==}
+    dependencies:
+      '@types/node': 20.11.8
+      '@types/qs': 6.9.11
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.4
+    dev: false
+
+  /@types/express@4.17.21:
+    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+    dependencies:
+      '@types/body-parser': 1.19.5
+      '@types/express-serve-static-core': 4.17.42
+      '@types/qs': 6.9.11
+      '@types/serve-static': 1.15.5
+    dev: false
+
   /@types/hast@3.0.3:
     resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
     dependencies:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/hoist-non-react-statics@3.3.5:
+    resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==}
+    dependencies:
+      '@types/react': 18.2.48
+      hoist-non-react-statics: 3.3.2
+    dev: false
+
+  /@types/http-errors@2.0.4:
+    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+    dev: false
+
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -1396,6 +1448,14 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/mime@1.3.5:
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+    dev: false
+
+  /@types/mime@3.0.4:
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+    dev: false
+
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
@@ -1420,6 +1480,21 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
+  /@types/qs@6.9.11:
+    resolution: {integrity: sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==}
+    dev: false
+
+  /@types/range-parser@1.2.7:
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+    dev: false
+
+  /@types/react-cookies@0.1.3:
+    resolution: {integrity: sha512-wTr8QyMr+UqqXKUIh6nGoU956Z968pNMJC+AvcDkaZ33yjP65Wxr+17NqwjxzInyDebayYx8rb9v5vkrV87l5g==}
+    dependencies:
+      '@types/cookie': 0.6.0
+      '@types/express': 4.17.21
+    dev: false
+
   /@types/react-dom@18.2.18:
     resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
     dependencies:
@@ -1442,6 +1517,21 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/send@0.17.4:
+    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/serve-static@1.15.5:
+    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+    dependencies:
+      '@types/http-errors': 2.0.4
+      '@types/mime': 3.0.4
+      '@types/node': 20.11.8
+    dev: false
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -3080,6 +3170,12 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
+  /hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
   /html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: false
@@ -4502,6 +4598,17 @@ packages:
     dev: false
     optional: true
 
+  /react-cookie@7.0.2(react@18.2.0):
+    resolution: {integrity: sha512-UnW1rZw1VibRdTvV8Ksr0BKKZoajeUxYLE89sIygDeyQgtz6ik89RHOM+3kib36G9M7HxheORggPoLk5DxAK7Q==}
+    peerDependencies:
+      react: '>= 16.3.0'
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.5
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      universal-cookie: 7.0.2
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -4512,6 +4619,10 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -5397,6 +5508,13 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
+  /universal-cookie@7.0.2:
+    resolution: {integrity: sha512-EC9PA+1nojhJtVnKW2Z7WYah01jgYJApqhX+Y8XU97TnFd7KaoxWTHiTZFtfpfV50jEF1L8V5p64ZxIx3Q67dg==}
+    dependencies:
+      '@types/cookie': 0.6.0
+      cookie: 0.6.0
+    dev: false
+
   /update-browserslist-db@1.0.13(browserslist@4.22.3):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
diff --git a/src/components/story/Calculation.tsx b/src/components/story/Calculation.tsx
index 514e445..c97ac9e 100644
--- a/src/components/story/Calculation.tsx
+++ b/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];
   }, []);
 };
 

From 45d828ca1fd98a5c255cd1aa94519bcccbb68e5a Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:00:57 +0700
Subject: [PATCH 06/12] refactor: use localStorage instead

---
 package.json                         |   2 -
 pnpm-lock.yaml                       | 118 ---------------------------
 src/components/story/Calculation.tsx |   4 +-
 src/middleware/index.ts              |   5 +-
 4 files changed, 4 insertions(+), 125 deletions(-)

diff --git a/package.json b/package.json
index 2fbe438..6d9c910 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "@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",
@@ -30,7 +29,6 @@
     "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f72a223..78479fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ dependencies:
   '@types/react':
     specifier: ^18.2.48
     version: 18.2.48
-  '@types/react-cookies':
-    specifier: 0.1.3
-    version: 0.1.3
   '@types/react-dom':
     specifier: ^18.2.18
     version: 18.2.18
@@ -59,9 +56,6 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
-  react-cookie:
-    specifier: 7.0.2
-    version: 7.0.2(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -1376,23 +1370,6 @@ packages:
       '@babel/types': 7.23.9
     dev: false
 
-  /@types/body-parser@1.19.5:
-    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
-    dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 20.11.8
-    dev: false
-
-  /@types/connect@3.4.38:
-    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
-    dependencies:
-      '@types/node': 20.11.8
-    dev: false
-
-  /@types/cookie@0.6.0:
-    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
-    dev: false
-
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
     dependencies:
@@ -1403,41 +1380,12 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: false
 
-  /@types/express-serve-static-core@4.17.42:
-    resolution: {integrity: sha512-ckM3jm2bf/MfB3+spLPWYPUH573plBFwpOhqQ2WottxYV85j1HQFlxmnTq57X1yHY9awZPig06hL/cLMgNWHIQ==}
-    dependencies:
-      '@types/node': 20.11.8
-      '@types/qs': 6.9.11
-      '@types/range-parser': 1.2.7
-      '@types/send': 0.17.4
-    dev: false
-
-  /@types/express@4.17.21:
-    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
-    dependencies:
-      '@types/body-parser': 1.19.5
-      '@types/express-serve-static-core': 4.17.42
-      '@types/qs': 6.9.11
-      '@types/serve-static': 1.15.5
-    dev: false
-
   /@types/hast@3.0.3:
     resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
     dependencies:
       '@types/unist': 3.0.2
     dev: false
 
-  /@types/hoist-non-react-statics@3.3.5:
-    resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==}
-    dependencies:
-      '@types/react': 18.2.48
-      hoist-non-react-statics: 3.3.2
-    dev: false
-
-  /@types/http-errors@2.0.4:
-    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
-    dev: false
-
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -1448,14 +1396,6 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
-  /@types/mime@1.3.5:
-    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
-    dev: false
-
-  /@types/mime@3.0.4:
-    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
-    dev: false
-
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
@@ -1480,21 +1420,6 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
-  /@types/qs@6.9.11:
-    resolution: {integrity: sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==}
-    dev: false
-
-  /@types/range-parser@1.2.7:
-    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
-    dev: false
-
-  /@types/react-cookies@0.1.3:
-    resolution: {integrity: sha512-wTr8QyMr+UqqXKUIh6nGoU956Z968pNMJC+AvcDkaZ33yjP65Wxr+17NqwjxzInyDebayYx8rb9v5vkrV87l5g==}
-    dependencies:
-      '@types/cookie': 0.6.0
-      '@types/express': 4.17.21
-    dev: false
-
   /@types/react-dom@18.2.18:
     resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
     dependencies:
@@ -1517,21 +1442,6 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
-  /@types/send@0.17.4:
-    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
-    dependencies:
-      '@types/mime': 1.3.5
-      '@types/node': 20.11.8
-    dev: false
-
-  /@types/serve-static@1.15.5:
-    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
-    dependencies:
-      '@types/http-errors': 2.0.4
-      '@types/mime': 3.0.4
-      '@types/node': 20.11.8
-    dev: false
-
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -3170,12 +3080,6 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
-  /hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-    dependencies:
-      react-is: 16.13.1
-    dev: false
-
   /html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: false
@@ -4598,17 +4502,6 @@ packages:
     dev: false
     optional: true
 
-  /react-cookie@7.0.2(react@18.2.0):
-    resolution: {integrity: sha512-UnW1rZw1VibRdTvV8Ksr0BKKZoajeUxYLE89sIygDeyQgtz6ik89RHOM+3kib36G9M7HxheORggPoLk5DxAK7Q==}
-    peerDependencies:
-      react: '>= 16.3.0'
-    dependencies:
-      '@types/hoist-non-react-statics': 3.3.5
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-      universal-cookie: 7.0.2
-    dev: false
-
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -4619,10 +4512,6 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: false
-
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -5508,13 +5397,6 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
-  /universal-cookie@7.0.2:
-    resolution: {integrity: sha512-EC9PA+1nojhJtVnKW2Z7WYah01jgYJApqhX+Y8XU97TnFd7KaoxWTHiTZFtfpfV50jEF1L8V5p64ZxIx3Q67dg==}
-    dependencies:
-      '@types/cookie': 0.6.0
-      cookie: 0.6.0
-    dev: false
-
   /update-browserslist-db@1.0.13(browserslist@4.22.3):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
diff --git a/src/components/story/Calculation.tsx b/src/components/story/Calculation.tsx
index c97ac9e..eee6b49 100644
--- a/src/components/story/Calculation.tsx
+++ b/src/components/story/Calculation.tsx
@@ -1,11 +1,9 @@
 import scores from "@/store/score";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
-import { useCookies } from "react-cookie";
 
 const Calculation = () => {
   const $scores = useStore(scores);
-  const setCookie = useCookies(["cocktail"])[1];
 
   useEffect(() => {
     const url: Record<number, string> = {
@@ -24,7 +22,7 @@ const Calculation = () => {
     }
     const maxScore = Math.max(...product);
     const maxKey = product.indexOf(maxScore);
-    setCookie("cocktail", url[maxKey].toString());
+    localStorage.setItem("cocktail", url[maxKey]);
     if (window) window.location.href = "/cocktail/" + url[maxKey];
   }, []);
 };
diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index e35bdfc..4b60d1e 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -2,14 +2,15 @@ import { defineMiddleware } from "astro:middleware";
 
 export const onRequest = defineMiddleware(
   ({ cookies, request, redirect }, next) => {
-    const cookie = cookies.get("sb-access-token")?.value;
+    const token = cookies.get("sb-access-token")?.value;
 
     if (
       (request.url.includes("/story") || request.url.includes("/cocktail")) &&
-      !cookie
+      !token
     ) {
       return redirect("/");
     }
+
     return next();
   }
 );

From e701ac488f8cad2574fc897ebdc362c3caf9189c Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:09:05 +0700
Subject: [PATCH 07/12] Revert "refactor: use localStorage instead"

This reverts commit 45d828ca1fd98a5c255cd1aa94519bcccbb68e5a.
---
 package.json                         |   2 +
 pnpm-lock.yaml                       | 118 +++++++++++++++++++++++++++
 src/components/story/Calculation.tsx |   4 +-
 src/middleware/index.ts              |   5 +-
 4 files changed, 125 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6d9c910..2fbe438 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@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",
@@ -29,6 +30,7 @@
     "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78479fc..f72a223 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ dependencies:
   '@types/react':
     specifier: ^18.2.48
     version: 18.2.48
+  '@types/react-cookies':
+    specifier: 0.1.3
+    version: 0.1.3
   '@types/react-dom':
     specifier: ^18.2.18
     version: 18.2.18
@@ -56,6 +59,9 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-cookie:
+    specifier: 7.0.2
+    version: 7.0.2(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -1370,6 +1376,23 @@ packages:
       '@babel/types': 7.23.9
     dev: false
 
+  /@types/body-parser@1.19.5:
+    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/connect@3.4.38:
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+    dependencies:
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/cookie@0.6.0:
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+    dev: false
+
   /@types/debug@4.1.12:
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
     dependencies:
@@ -1380,12 +1403,41 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: false
 
+  /@types/express-serve-static-core@4.17.42:
+    resolution: {integrity: sha512-ckM3jm2bf/MfB3+spLPWYPUH573plBFwpOhqQ2WottxYV85j1HQFlxmnTq57X1yHY9awZPig06hL/cLMgNWHIQ==}
+    dependencies:
+      '@types/node': 20.11.8
+      '@types/qs': 6.9.11
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.4
+    dev: false
+
+  /@types/express@4.17.21:
+    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
+    dependencies:
+      '@types/body-parser': 1.19.5
+      '@types/express-serve-static-core': 4.17.42
+      '@types/qs': 6.9.11
+      '@types/serve-static': 1.15.5
+    dev: false
+
   /@types/hast@3.0.3:
     resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==}
     dependencies:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/hoist-non-react-statics@3.3.5:
+    resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==}
+    dependencies:
+      '@types/react': 18.2.48
+      hoist-non-react-statics: 3.3.2
+    dev: false
+
+  /@types/http-errors@2.0.4:
+    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
+    dev: false
+
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -1396,6 +1448,14 @@ packages:
       '@types/unist': 3.0.2
     dev: false
 
+  /@types/mime@1.3.5:
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+    dev: false
+
+  /@types/mime@3.0.4:
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+    dev: false
+
   /@types/ms@0.7.34:
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
     dev: false
@@ -1420,6 +1480,21 @@ packages:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
     dev: false
 
+  /@types/qs@6.9.11:
+    resolution: {integrity: sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==}
+    dev: false
+
+  /@types/range-parser@1.2.7:
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+    dev: false
+
+  /@types/react-cookies@0.1.3:
+    resolution: {integrity: sha512-wTr8QyMr+UqqXKUIh6nGoU956Z968pNMJC+AvcDkaZ33yjP65Wxr+17NqwjxzInyDebayYx8rb9v5vkrV87l5g==}
+    dependencies:
+      '@types/cookie': 0.6.0
+      '@types/express': 4.17.21
+    dev: false
+
   /@types/react-dom@18.2.18:
     resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
     dependencies:
@@ -1442,6 +1517,21 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/send@0.17.4:
+    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 20.11.8
+    dev: false
+
+  /@types/serve-static@1.15.5:
+    resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==}
+    dependencies:
+      '@types/http-errors': 2.0.4
+      '@types/mime': 3.0.4
+      '@types/node': 20.11.8
+    dev: false
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -3080,6 +3170,12 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
+  /hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
   /html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: false
@@ -4502,6 +4598,17 @@ packages:
     dev: false
     optional: true
 
+  /react-cookie@7.0.2(react@18.2.0):
+    resolution: {integrity: sha512-UnW1rZw1VibRdTvV8Ksr0BKKZoajeUxYLE89sIygDeyQgtz6ik89RHOM+3kib36G9M7HxheORggPoLk5DxAK7Q==}
+    peerDependencies:
+      react: '>= 16.3.0'
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.5
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      universal-cookie: 7.0.2
+    dev: false
+
   /react-dom@18.2.0(react@18.2.0):
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
@@ -4512,6 +4619,10 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
+
   /react-refresh@0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
@@ -5397,6 +5508,13 @@ packages:
       unist-util-visit-parents: 6.0.1
     dev: false
 
+  /universal-cookie@7.0.2:
+    resolution: {integrity: sha512-EC9PA+1nojhJtVnKW2Z7WYah01jgYJApqhX+Y8XU97TnFd7KaoxWTHiTZFtfpfV50jEF1L8V5p64ZxIx3Q67dg==}
+    dependencies:
+      '@types/cookie': 0.6.0
+      cookie: 0.6.0
+    dev: false
+
   /update-browserslist-db@1.0.13(browserslist@4.22.3):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
diff --git a/src/components/story/Calculation.tsx b/src/components/story/Calculation.tsx
index eee6b49..c97ac9e 100644
--- a/src/components/story/Calculation.tsx
+++ b/src/components/story/Calculation.tsx
@@ -1,9 +1,11 @@
 import scores from "@/store/score";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
+import { useCookies } from "react-cookie";
 
 const Calculation = () => {
   const $scores = useStore(scores);
+  const setCookie = useCookies(["cocktail"])[1];
 
   useEffect(() => {
     const url: Record<number, string> = {
@@ -22,7 +24,7 @@ const Calculation = () => {
     }
     const maxScore = Math.max(...product);
     const maxKey = product.indexOf(maxScore);
-    localStorage.setItem("cocktail", url[maxKey]);
+    setCookie("cocktail", url[maxKey].toString());
     if (window) window.location.href = "/cocktail/" + url[maxKey];
   }, []);
 };
diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index 4b60d1e..e35bdfc 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -2,15 +2,14 @@ import { defineMiddleware } from "astro:middleware";
 
 export const onRequest = defineMiddleware(
   ({ cookies, request, redirect }, next) => {
-    const token = cookies.get("sb-access-token")?.value;
+    const cookie = cookies.get("sb-access-token")?.value;
 
     if (
       (request.url.includes("/story") || request.url.includes("/cocktail")) &&
-      !token
+      !cookie
     ) {
       return redirect("/");
     }
-
     return next();
   }
 );

From c284af1924ab7317dc47518bfbe594e62b93e650 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:10:43 +0700
Subject: [PATCH 08/12] refactor: set cookie path

---
 src/components/story/Calculation.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/story/Calculation.tsx b/src/components/story/Calculation.tsx
index c97ac9e..2139857 100644
--- a/src/components/story/Calculation.tsx
+++ b/src/components/story/Calculation.tsx
@@ -24,7 +24,9 @@ const Calculation = () => {
     }
     const maxScore = Math.max(...product);
     const maxKey = product.indexOf(maxScore);
-    setCookie("cocktail", url[maxKey].toString());
+    setCookie("cocktail", url[maxKey].toString(), {
+      path: "/",
+    });
     if (window) window.location.href = "/cocktail/" + url[maxKey];
   }, []);
 };

From 5cc5279c25dc47c1936cb247b361a53992250d27 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:12:22 +0700
Subject: [PATCH 09/12] feat: redirect to result

---
 src/middleware/index.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index e35bdfc..86ef41a 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -2,14 +2,19 @@ import { defineMiddleware } from "astro:middleware";
 
 export const onRequest = defineMiddleware(
   ({ cookies, request, redirect }, next) => {
-    const cookie = cookies.get("sb-access-token")?.value;
+    const token = cookies.get("sb-access-token")?.value;
+    const cocktail = cookies.get("cocktail")?.value;
 
     if (
       (request.url.includes("/story") || request.url.includes("/cocktail")) &&
-      !cookie
+      !token
     ) {
       return redirect("/");
     }
+
+    if (!request.url.includes("/cocktail") && cocktail) {
+      return redirect("/cocktail/" + cocktail);
+    }
     return next();
   }
 );

From b7236466cc03ccb3102bb2229f62110a2836cd09 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:13:58 +0700
Subject: [PATCH 10/12] fix: can access first page

---
 src/middleware/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/middleware/index.ts b/src/middleware/index.ts
index 86ef41a..b983bb8 100644
--- a/src/middleware/index.ts
+++ b/src/middleware/index.ts
@@ -12,7 +12,7 @@ export const onRequest = defineMiddleware(
       return redirect("/");
     }
 
-    if (!request.url.includes("/cocktail") && cocktail) {
+    if (request.url.includes("/story") && cocktail) {
       return redirect("/cocktail/" + cocktail);
     }
     return next();

From 77a76be3000c9c5c53feefc253938c6923a7da39 Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 10:51:02 +0700
Subject: [PATCH 11/12] feat: previous result

---
 src/components/register-page/Hero.tsx | 36 +++++++++++++++++++++++----
 src/pages/index.astro                 |  3 ++-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx
index 91cfff7..7aa635c 100644
--- a/src/components/register-page/Hero.tsx
+++ b/src/components/register-page/Hero.tsx
@@ -1,21 +1,47 @@
 import BarImage from "@/assets/images/bar.jpg";
+import PageImage from "@/assets/images/scene14.gif";
+import { useCallback } from "react";
+import { useCookies } from "react-cookie";
 
 interface HeroProps {
   accessToken: string | undefined;
+  cocktail: string | undefined;
 }
 
-const Hero = ({ accessToken }: HeroProps): JSX.Element => {
+const Hero = ({ accessToken, cocktail }: HeroProps): JSX.Element => {
+  const removeCookie = useCookies(["cocktail"])[2];
+
+  const handleReset = useCallback(async () => {
+    localStorage.removeItem("scores");
+    removeCookie("cocktail", { path: "/" });
+
+    window.location.href = "/story/scene1";
+  }, []);
+
   return (
     <div className="flex w-full flex-grow flex-col items-center justify-center space-y-12">
-      <div className="flex aspect-square w-full overflow-hidden rounded-lg object-cover">
+      <div className="relative flex aspect-square w-full overflow-hidden rounded-lg object-cover">
         <img
-          src={BarImage.src}
+          src={cocktail ? PageImage.src : BarImage.src}
           alt="Bar Image"
           className="h-full w-full object-cover"
         />
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+          {cocktail}
+        </div>
       </div>
       <div className="w-full space-y-4">
-        {accessToken && (
+        {cocktail && (
+          <button
+            onClick={handleReset}
+            type="button"
+            className="flex h-fit w-full flex-wrap items-center justify-center gap-6 rounded-lg bg-gray px-4 py-2.5 text-center font-sukhumvit text-xl font-bold text-primary shadow-button outline-none"
+          >
+            ทำแบบทดสอบอีกครั้ง
+          </button>
+        )}
+
+        {!cocktail && accessToken && (
           <a href="/story/scene1">
             <button
               type="button"
@@ -26,7 +52,7 @@ const Hero = ({ accessToken }: HeroProps): JSX.Element => {
           </a>
         )}
 
-        {!accessToken && (
+        {!cocktail && !accessToken && (
           <form action="/api/auth/signin" method="post" data-astro-reload>
             <button
               value="google"
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d9d9344..70160f1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,6 +12,7 @@ import kntuLogo from "@/assets/logo/kntu-logo.png";
 const { cookies } = Astro;
 
 const accessToken = cookies.get("sb-access-token")?.value;
+const cocktail = cookies.get("cocktail")?.value;
 ---
 
 <BaseLayout pageTitle="Login">
@@ -32,7 +33,7 @@ const accessToken = cookies.get("sb-access-token")?.value;
           class="rounded-full backdrop-blur-lg"
         />
       </div>
-      <Hero client:load accessToken={accessToken} />
+      <Hero client:load accessToken={accessToken} cocktail={cocktail} />
     </div>
   </SignInBackground>
 </BaseLayout>

From e0173616f0fc46ab08bcc846434afcd05f7ac6dd Mon Sep 17 00:00:00 2001
From: boomchanotai <boom9387@hotmail.com>
Date: Tue, 30 Jan 2024 11:28:54 +0700
Subject: [PATCH 12/12] feat: previous result

---
 src/components/register-page/Hero.tsx | 26 +++++++++++--
 src/utils/parser.ts                   | 54 +++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/utils/parser.ts

diff --git a/src/components/register-page/Hero.tsx b/src/components/register-page/Hero.tsx
index 7aa635c..6738f87 100644
--- a/src/components/register-page/Hero.tsx
+++ b/src/components/register-page/Hero.tsx
@@ -1,6 +1,7 @@
 import BarImage from "@/assets/images/bar.jpg";
 import PageImage from "@/assets/images/scene14.gif";
-import { useCallback } from "react";
+import parser from "@/utils/parser";
+import { useCallback, useMemo } from "react";
 import { useCookies } from "react-cookie";
 
 interface HeroProps {
@@ -9,6 +10,10 @@ interface HeroProps {
 }
 
 const Hero = ({ accessToken, cocktail }: HeroProps): JSX.Element => {
+  const cocktailInfo = useMemo(() => {
+    return parser(cocktail);
+  }, [cocktail]);
+
   const removeCookie = useCookies(["cocktail"])[2];
 
   const handleReset = useCallback(async () => {
@@ -26,9 +31,22 @@ const Hero = ({ accessToken, cocktail }: HeroProps): JSX.Element => {
           alt="Bar Image"
           className="h-full w-full object-cover"
         />
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-          {cocktail}
-        </div>
+        {cocktail && (
+          <div
+            className={`absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center gap-y-2`}
+          >
+            <div>
+              <img
+                src={cocktailInfo.image}
+                className="h-48 w-48 object-contain object-center"
+                alt={cocktailInfo.name}
+              />
+            </div>
+            <h3 className="text-center text-xl font-semibold text-white">
+              {cocktailInfo.name}
+            </h3>
+          </div>
+        )}
       </div>
       <div className="w-full space-y-4">
         {cocktail && (
diff --git a/src/utils/parser.ts b/src/utils/parser.ts
new file mode 100644
index 0000000..570f8a6
--- /dev/null
+++ b/src/utils/parser.ts
@@ -0,0 +1,54 @@
+import BlueLagoon from "@/assets/elements/blue-lagoon.png";
+import Cosmo from "@/assets/elements/cosmopolitan.png";
+import Gin from "@/assets/elements/gin-and-tonic.png";
+import Lavender from "@/assets/elements/lavender-lemonade.png";
+import Pina from "@/assets/elements/pina-colada.png";
+import SBSangria from "@/assets/elements/summer-berry-sangria.png";
+import { NAME } from "@/data/cocktail";
+
+const parser = (
+  data: string | undefined
+): {
+  name: string;
+  image: string;
+} => {
+  switch (data) {
+    case "sangria":
+      return {
+        name: NAME["raspberry"],
+        image: SBSangria.src,
+      };
+    case "cosmopolitan":
+      return {
+        name: NAME["cosmo"],
+        image: Cosmo.src,
+      };
+    case "pinacolada":
+      return {
+        name: NAME["pina"],
+        image: Pina.src,
+      };
+    case "ginandtonic":
+      return {
+        name: NAME["gin"],
+        image: Gin.src,
+      };
+    case "bluelagoon":
+      return {
+        name: NAME["lagoon"],
+        image: BlueLagoon.src,
+      };
+    case "lavenderlemonade":
+      return {
+        name: NAME["lalemon"],
+        image: Lavender.src,
+      };
+    default:
+      return {
+        name: NAME["raspberry"],
+        image: SBSangria.src,
+      };
+  }
+};
+
+export default parser;