public review

src/app/[name]/(Main)/[id]/page.tsx

@@ -14,6 +14,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useGetProfile } from "../../(Profile)/profile/hooks/userProfileData";
 import { useGetAbout } from "../about/hooks/useAboutData";
 import { useGetFood, useToggleFavorite } from "./hooks/useFoodData";
+import FoodReviewsSection from "./components/FoodReviewsSection";
 
 type Props = object;
 
@@ -158,12 +159,13 @@ function FoodPage({}: Props) {
   };
 
   return (
-    <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 lg:pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl">
-      <div
-        className={glassSurface(
-          "relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none] not-lg:sticky not-lg:top-6 not-lg:z-0 not-lg:h-[min(50vh,400px)] not-lg:min-h-[280px] not-lg:rounded-b-none",
-        )}
-      >
+    <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full w-full flex flex-col gap-4 pt-6 lg:pt-8 pb-24 lg:pb-28">
+      <div className="not-lg:flex not-lg:flex-col lg:grid lg:grid-cols-2 lg:min-h-[420px] lg:max-h-[480px] lg:rounded-2xl lg:overflow-hidden shrink-0">
+        <div
+          className={glassSurface(
+            "relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none] not-lg:sticky not-lg:top-6 not-lg:z-0 not-lg:h-[min(50vh,400px)] not-lg:min-h-[280px] not-lg:rounded-b-none",
+          )}
+        >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           ref={imageRef}
@@ -261,6 +263,11 @@ function FoodPage({}: Props) {
           </motion.div>
         </div>
       </div>
+      </div>
+
+      <div className={glassSurfaceCard("w-full px-6 pt-6 pb-7.5 rounded-3xl bg-white/60! shrink-0")}>
+        <FoodReviewsSection foodId={foodId} />
+      </div>
     </div>
   );
 }