fix(fe): cover style

frontend-client/app/notice/layout.tsx

@@ -6,6 +6,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <Cover
         title="Notice"
         description="Events and announcements of SKKU Coding Platform"
+        bgColor="bg-gray-500"
       />
       <div className="flex w-full max-w-5xl flex-col gap-5 p-5 py-8 md:py-12">
         {children}

frontend-client/components/Cover.tsx

@@ -1,27 +1,29 @@
-import cover from '@/public/cover.jpg'
-import Image from 'next/image'
+import { cn } from '@/lib/utils'
 
 interface CoverProps {
   title: string
   description: string
+  bgColor: string
 }
-
-export default function Cover({ title, description }: CoverProps) {
+/**
+ * @param title - title text
+ * @param description - description text
+ * @param bgColor - tailwindcss color class (e.g. "bg-gray-500")
+ */
+export default function Cover({ title, description, bgColor }: CoverProps) {
   return (
-    <div className="relative flex h-44 w-screen items-center justify-center overflow-hidden">
-      <div className="relative z-10 flex w-full items-start justify-center text-white">
-        <h2 className="text-3xl font-bold md:text-4xl">{title}</h2>
-        <p className="absolute mt-12 w-fit whitespace-nowrap text-sm opacity-70 md:text-base">
+    <div
+      className={cn(
+        bgColor,
+        'relative flex h-[200px] w-screen items-center justify-center overflow-hidden'
+      )}
+    >
+      <div className="relative z-10 flex w-full items-start justify-center">
+        <h2 className="text-4xl font-bold text-white">{title}</h2>
+        <p className="absolute mt-12 w-fit whitespace-nowrap text-base text-gray-50">
           {description}
         </p>
       </div>
-      <div className="absolute bottom-0 left-0 right-0 top-0 bg-black/30" />
-      <Image
-        className="scale-110 object-cover opacity-80 blur-[5px]"
-        src={cover}
-        alt="Cover Image"
-        fill
-      />
     </div>
   )
 }