From 4e1bba8fb2140df71c6d1a788fae2da98f1164b0 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 15:40:27 +0900
Subject: [PATCH 01/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-divider=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Divider.tsx | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/components/layout/Divider.tsx

diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
new file mode 100644
index 0000000..6298bd1
--- /dev/null
+++ b/src/components/layout/Divider.tsx
@@ -0,0 +1,5 @@
+export default function Divider() {
+  return (
+    <div className="bg-gradient-divider flex w-full h-px justify-center items-center"></div>
+  );
+}

From 7a1ab66e992d9a382dfc445d0d17a587e41a3f30 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 15:48:08 +0900
Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-divider=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EC=88=98?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Divider.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
index 6298bd1..82e3ab0 100644
--- a/src/components/layout/Divider.tsx
+++ b/src/components/layout/Divider.tsx
@@ -1,5 +1,7 @@
-export default function Divider() {
+export default function Divider(width: number, height: number) {
   return (
-    <div className="bg-gradient-divider flex w-full h-px justify-center items-center"></div>
+    <div
+      className={`bg-gradient-divider flex w-${width} h-${height} justify-center items-center`}
+    ></div>
   );
 }

From 67d8b649bd412364da94c6f5d6b82f8822efe079 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 15:58:15 +0900
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-dim=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20#23?=
 =?UTF-8?q?5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Dim.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 src/components/layout/Dim.tsx

diff --git a/src/components/layout/Dim.tsx b/src/components/layout/Dim.tsx
new file mode 100644
index 0000000..5eea91a
--- /dev/null
+++ b/src/components/layout/Dim.tsx
@@ -0,0 +1,8 @@
+type DimProps = {
+  width: number;
+  height: number;
+};
+
+export default function Dim({ width, height }: DimProps) {
+  return <div className={`w-${width} h-${height} bg-black/50`} />;
+}

From 476b92fc4f3169a70cdf24f164a1193f8cf19c14 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 15:59:19 +0900
Subject: [PATCH 04/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-divider=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20#23?=
 =?UTF-8?q?5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Divider.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
index 82e3ab0..113c0d3 100644
--- a/src/components/layout/Divider.tsx
+++ b/src/components/layout/Divider.tsx
@@ -1,4 +1,9 @@
-export default function Divider(width: number, height: number) {
+type DividerProps = {
+  width: number;
+  height: number;
+};
+
+export default function Divider({ width, height }: DividerProps) {
   return (
     <div
       className={`bg-gradient-divider flex w-${width} h-${height} justify-center items-center`}

From 188cc09e436b9223a8a90b29584dc3d7d98cccc3 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:08:42 +0900
Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-MaskGradient?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20?=
 =?UTF-8?q?#235?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/MaskGradient.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/components/layout/MaskGradient.tsx

diff --git a/src/components/layout/MaskGradient.tsx b/src/components/layout/MaskGradient.tsx
new file mode 100644
index 0000000..5678a4c
--- /dev/null
+++ b/src/components/layout/MaskGradient.tsx
@@ -0,0 +1,12 @@
+type MaskGradientProps = {
+  width: number | string;
+  height: number | string;
+};
+
+export default function MaskGradient({ width, height }: MaskGradientProps) {
+  return (
+    <div className={`bg-gradient-mask absolute w-${width} h-${height}`}></div>
+  );
+}
+
+// 해당 컴포넌트를 위에 쌓으려면 부모 요소에 relative를 주어야 함

From 7d4b9f4c7e51bc82c04a2da288602b82e050db44 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:09:15 +0900
Subject: [PATCH 06/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-dim=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20#23?=
 =?UTF-8?q?5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Dim.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Dim.tsx b/src/components/layout/Dim.tsx
index 5eea91a..2fe8ecf 100644
--- a/src/components/layout/Dim.tsx
+++ b/src/components/layout/Dim.tsx
@@ -1,8 +1,10 @@
 type DimProps = {
-  width: number;
-  height: number;
+  width: number | string;
+  height: number | string;
 };
 
 export default function Dim({ width, height }: DimProps) {
-  return <div className={`w-${width} h-${height} bg-black/50`} />;
+  return <div className={`w-${width} h-${height} bg-black/50 absolute`} />;
 }
+
+// 해당 컴포넌트를 위에 쌓으려면 부모 요소에 relative를 주어야 함

From c9f60a8b2d187b631c20204787123bf32e4d3ff5 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:10:38 +0900
Subject: [PATCH 07/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-divider=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20#23?=
 =?UTF-8?q?5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Divider.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
index 113c0d3..4fe4e71 100644
--- a/src/components/layout/Divider.tsx
+++ b/src/components/layout/Divider.tsx
@@ -1,12 +1,11 @@
 type DividerProps = {
   width: number;
-  height: number;
 };
 
-export default function Divider({ width, height }: DividerProps) {
+export default function Divider({ width }: DividerProps) {
   return (
     <div
-      className={`bg-gradient-divider flex w-${width} h-${height} justify-center items-center`}
+      className={`bg-gradient-divider flex w-${width} h-px justify-center items-center`}
     ></div>
   );
 }

From efb640be070e5d0e5f7ffefb99483311909a931d Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:36:03 +0900
Subject: [PATCH 08/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-divider=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Divider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Divider.tsx b/src/components/layout/Divider.tsx
index 4fe4e71..c6fa190 100644
--- a/src/components/layout/Divider.tsx
+++ b/src/components/layout/Divider.tsx
@@ -1,5 +1,8 @@
+// <Divider width={36} />
+// <Divider width={"full"} />
+
 type DividerProps = {
-  width: number;
+  width: number | string;
 };
 
 export default function Divider({ width }: DividerProps) {

From 76af3a8e3e95f815c107d2c87e771792dd41f5ba Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:38:52 +0900
Subject: [PATCH 09/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-dim=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20#235?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Dim.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Dim.tsx b/src/components/layout/Dim.tsx
index 2fe8ecf..5f8f494 100644
--- a/src/components/layout/Dim.tsx
+++ b/src/components/layout/Dim.tsx
@@ -1,3 +1,7 @@
+// <Dim width={360} height={200} />
+// <Dim width={"full"} height={200} />
+// 해당 컴포넌트를 사용하려면 부모 요소에 relative를 주어야 함
+
 type DimProps = {
   width: number | string;
   height: number | string;
@@ -6,5 +10,3 @@ type DimProps = {
 export default function Dim({ width, height }: DimProps) {
   return <div className={`w-${width} h-${height} bg-black/50 absolute`} />;
 }
-
-// 해당 컴포넌트를 위에 쌓으려면 부모 요소에 relative를 주어야 함

From f774107aef36cc82f94fddd308085621df8eb69f Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Thu, 26 Feb 2026 16:40:13 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=E2=9C=A8=20Feat:=20layout-MaskGradient?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=98=88=EC=8B=9C=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20#235?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/MaskGradient.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/MaskGradient.tsx b/src/components/layout/MaskGradient.tsx
index 5678a4c..eab5a7b 100644
--- a/src/components/layout/MaskGradient.tsx
+++ b/src/components/layout/MaskGradient.tsx
@@ -1,3 +1,7 @@
+// <MaskGradient width={360} height={200} />
+// <MaskGradient width={"full"} height={200} />
+// 해당 컴포넌트를 사용하려면 부모 요소에 relative를 주어야 함
+
 type MaskGradientProps = {
   width: number | string;
   height: number | string;
@@ -8,5 +12,3 @@ export default function MaskGradient({ width, height }: MaskGradientProps) {
     <div className={`bg-gradient-mask absolute w-${width} h-${height}`}></div>
   );
 }
-
-// 해당 컴포넌트를 위에 쌓으려면 부모 요소에 relative를 주어야 함