235 feature layout 컴포넌트 제작

src/components/layout/Dim.tsx

@@ -0,0 +1,12 @@
+// <Dim width={360} height={200} />
+// <Dim width={"full"} height={200} />
+// 해당 컴포넌트를 사용하려면 부모 요소에 relative를 주어야 함
+
+type DimProps = {
+  width: number | string;
+  height: number | string;
+};
+
+export default function Dim({ width, height }: DimProps) {
+  return <div className={`w-${width} h-${height} bg-black/50 absolute`} />;
+}

src/components/layout/Divider.tsx

@@ -0,0 +1,14 @@
+// <Divider width={36} />
+// <Divider width={"full"} />
+
+type DividerProps = {
+  width: number | string;
+};
+
+export default function Divider({ width }: DividerProps) {
+  return (
+    <div
+      className={`bg-gradient-divider flex w-${width} h-px justify-center items-center`}
+    ></div>
+  );
+}

src/components/layout/MaskGradient.tsx

@@ -0,0 +1,14 @@
+// <MaskGradient width={360} height={200} />
+// <MaskGradient width={"full"} height={200} />
+// 해당 컴포넌트를 사용하려면 부모 요소에 relative를 주어야 함
+
+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>
+  );
+}