[style]pageHeader컴포넌트

Author: mtm-git1018

src/app/design-system/page.tsx

@@ -14,7 +14,6 @@ import Share from '@/shared/components/share/Share';
 import Keep from '@/shared/components/keep/Keep';
 import Spinner from '@/shared/components/spinner/Spinner';
 
-
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
   const [isConfirmOpen, setConfirmOpen] = useState(false);

src/app/recipe/page.tsx

@@ -1,10 +1,22 @@
-import Image from 'next/image'
-import Star from '@/shared/assets/images/star_2.webp'
+import PageHeader from '@/shared/components/pageHeader/PageHeader';
+import { Metadata } from 'next';
+import Glass from '@/shared/assets/images/recipe_page_header.png';
+
+export const metadata: Metadata = {
+  title: 'SSOUL | 칵테일레시피',
+  description: '칵테일 레시피가 궁금하신 분들을 위한 레시피 페이지',
+};
+
 function Page() {
   return (
-    <div className="page-layout max-w-1224">
-      <Image src={Star}></Image>
+    <div className="w-full">
+      <PageHeader
+        src={Glass}
+        title="Cocktail Recipes"
+        description="다양하고 재밌는 칵테일 레시피"
+      />
+      <div className="page-layout max-w-1224"></div>
     </div>
-  )
+  );
 }
 export default Page;

src/shared/assets/images/recipe_page_header.png

@@ -0,0 +1,28 @@
+import Star from '@/shared/assets/images/star_bg.webp';
+import Image, { StaticImageData } from 'next/image';
+
+interface Props {
+  src: StaticImageData;
+  title: string;
+  description: string;
+}
+
+function PageHeader({ src, title, description }: Props) {
+  return (
+    <div
+      className="h-100 w-full bg-repeat relative"
+      style={{
+        backgroundImage: `url(${Star.src})`,
+      }}
+    >
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
+        <Image src={src} alt="" />
+        <div className="text-center text-nowrap font-serif font-bold flex flex-col absolute bottom-[55px]">
+          <h2 className="text-[64px]">{title}</h2>
+          <p className="text-2xl">{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default PageHeader;