From 06d7dd748f23406d2ae16fe71595224938ba5675 Mon Sep 17 00:00:00 2001
From: mtm1018 <mtm1018@naver.com>
Date: Thu, 25 Sep 2025 11:08:36 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20StarBg=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/recipe/[id]/page.tsx                  | 10 ++++++++++
 .../components/pageHeader/PageHeader.tsx      | 11 +++-------
 src/shared/components/starBg/StarBg.tsx       | 20 +++++++++++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 src/app/recipe/[id]/page.tsx
 create mode 100644 src/shared/components/starBg/StarBg.tsx

diff --git a/src/app/recipe/[id]/page.tsx b/src/app/recipe/[id]/page.tsx
new file mode 100644
index 0000000..9d89ac4
--- /dev/null
+++ b/src/app/recipe/[id]/page.tsx
@@ -0,0 +1,10 @@
+import StarBg from '@/shared/components/starBg/StarBg';
+
+function page() {
+  return (
+    <div className="w-full">
+      <StarBg className="h-200 lg:h-202" />
+    </div>
+  );
+}
+export default page;
diff --git a/src/shared/components/pageHeader/PageHeader.tsx b/src/shared/components/pageHeader/PageHeader.tsx
index 0269ae1..eb0a654 100644
--- a/src/shared/components/pageHeader/PageHeader.tsx
+++ b/src/shared/components/pageHeader/PageHeader.tsx
@@ -1,5 +1,5 @@
-import Star from '@/shared/assets/images/star_bg.webp';
 import Image, { StaticImageData } from 'next/image';
+import StarBg from '../starBg/StarBg';
 
 interface Props {
   src: StaticImageData;
@@ -9,12 +9,7 @@ interface Props {
 
 function PageHeader({ src, title, description }: Props) {
   return (
-    <div
-      className="h-40 w-full bg-repeat o-cover relative md:h-65 lg:h-80"
-      style={{
-        backgroundImage: `url(${Star.src})`,
-      }}
-    >
+    <StarBg className="relative h-40 md:h-65 lg:h-80">
       <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]">
@@ -26,7 +21,7 @@ function PageHeader({ src, title, description }: Props) {
           </p>
         </div>
       </div>
-    </div>
+    </StarBg>
   );
 }
 export default PageHeader;
diff --git a/src/shared/components/starBg/StarBg.tsx b/src/shared/components/starBg/StarBg.tsx
new file mode 100644
index 0000000..e79087c
--- /dev/null
+++ b/src/shared/components/starBg/StarBg.tsx
@@ -0,0 +1,20 @@
+import Star from '@/shared/assets/images/star_bg.webp';
+
+interface Props {
+  className: string;
+  children?: React.ReactNode;
+}
+
+function StarBg({ className, children }: Props) {
+  return (
+    <div
+      className={`w-full bg-repeat ${className}`}
+      style={{
+        backgroundImage: `url(${Star.src})`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+export default StarBg;