Feat/페이지별 헤더 컴포넌트

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,4 +1,22 @@
+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>recipe</div>;
+  return (
+    <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/components/pageHeader/PageHeader.tsx

@@ -0,0 +1,32 @@
+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-40 w-full bg-repeat o-cover relative md:h-70 lg:h-100"
+      style={{
+        backgroundImage: `url(${Star.src})`,
+      }}
+    >
+      <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
+        <Image src={src} alt="" width={src.width} height={src.height} />
+        <div className="text-center text-nowrap font-serif font-bold flex flex-col absolute left-1/2 -translate-x-1/2 bottom-4 md:bottom-9 lg:bottom-[55px]">
+          <h2 className="text-shadow-[0_0_12px_#1a1a1a]  text-2xl md:text-5xl lg:text-3xl lg:text-[64px]">
+            {title}
+          </h2>
+          <p className="text-shadow-[0_0_12px_#1a1a1a] text-xs md:text-xl lg:text-2xl">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default PageHeader;