feat(fe): add main page carousel (#1201)

* feat(fe): add carousel data

* feat(fe): implement carousel

* chore(fe): change carousel size

* chore(fe): fix gap between titles

* fix: change carousel height and add responsive style

---------

Co-authored-by: dayongkr <[email protected]>

frontend-client/app/(main)/_components/Carousel.tsx

@@ -1,13 +1,38 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import type { Route } from 'next'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa6'
 
 interface Props {
-  slides: { href: string }[]
+  slides: {
+    topTitle: string
+    bottomTitle: string
+    sub: string
+    img: string
+    imgAlt: string
+    color: keyof typeof bgColors
+    href: string
+  }[]
+}
+
+const bgColors: { [key: string]: string } = {
+  green: 'bg-[#2e4e3f]',
+  black: 'bg-[#333333]',
+  white: 'bg-[#ffffff]',
+  yellow: 'bg-[#f9de4a]',
+  blue: 'bg-[#3581FA]'
+}
+const textColors: { [key: string]: string } = {
+  green: 'text-white',
+  black: 'text-white',
+  white: 'text-black',
+  yellow: 'text-black',
+  blue: 'text-white'
 }
 
 export default function Carousel({ slides }: Props) {
@@ -25,21 +50,36 @@ export default function Carousel({ slides }: Props) {
   }
 
   return (
-    <div className="relative my-5 h-80 w-full overflow-hidden rounded-3xl bg-gray-100">
-      <Link href={slides[facade].href as Route<string>}>
-        {slides.map((slide, index) => (
-          <div
-            key={index}
-            className={`absolute left-0 top-0 h-full w-full transition-opacity duration-1000 ease-in-out ${
-              facade !== index && ' opacity-0'
-            }`}
-          >
-            {/* TODO: 슬라이드 데이터 삽입*/}
+    <div className="relative my-5 h-[350px] w-full overflow-hidden rounded-xl bg-gray-100 sm:h-72">
+      {slides.map((slide, index) => (
+        <Link
+          href={slide.href as Route}
+          key={slide.href + slide.topTitle}
+          className={cn(
+            'absolute inset-0 z-10 flex flex-col-reverse items-center justify-between gap-5 p-8 py-14 transition-opacity duration-1000 ease-in-out sm:flex-row md:px-14 md:py-0',
+            facade !== index && 'z-0 opacity-0',
+            bgColors[slide.color],
+            textColors[slide.color]
+          )}
+        >
+          <div className="w-full whitespace-nowrap text-2xl font-semibold md:text-3xl">
+            <p>{slide.topTitle}</p>
+            <p>{slide.bottomTitle}</p>
+            <p className="mt-2 text-base font-normal opacity-70 md:text-lg">
+              {slide.sub}
+            </p>
           </div>
-        ))}
-      </Link>
-      <div className="absolute bottom-5 left-0 right-0 flex justify-center">
-        <div className="z-10 flex h-7 items-center rounded-full bg-gray-900/80 px-2.5">
+          <Image
+            src={slide.img}
+            alt={slide.imgAlt}
+            className="size-[150px] object-contain md:size-[230px]"
+            sizes="(max-width: 768px) 150px, 230px"
+            priority
+          />
+        </Link>
+      ))}
+      <div className="absolute bottom-4 left-0 right-0 z-20 flex justify-center">
+        <div className="flex h-7 items-center rounded-full bg-gray-900/80 px-2.5">
           <Button
             variant="ghost"
             className="px-0 hover:bg-transparent"

frontend-client/app/(main)/page.tsx

@@ -1,5 +1,8 @@
 import { Button } from '@/components/ui/button'
 import { fetcher } from '@/lib/utils'
+import dummyImg from '@/public/dummy.png'
+import GithubLogo from '@/public/github.svg'
+import SkkudingLogo from '@/public/skkudingLogo.png'
 import type { Contest, WorkbookProblem } from '@/types/type'
 import type { Route } from 'next'
 import Link from 'next/link'
@@ -12,7 +15,35 @@ import ProblemCard from './_components/ProblemCard'
 // https://github.com/vercel/next.js/issues/54961
 export const dynamic = 'force-dynamic'
 
-const slides = [{ href: '/problem/1' }, { href: '/problem/2' }]
+const slides = [
+  {
+    topTitle: 'Codedang,',
+    bottomTitle: 'Online Judge for SKKU',
+    sub: 'Level up your coding skills with us',
+    img: dummyImg,
+    imgAlt: 'Codedang Intro Banner',
+    color: 'green',
+    href: '/problem'
+  },
+  {
+    topTitle: 'SKKUDING',
+    bottomTitle: 'Beta Service',
+    sub: `Feel free to contact us if there's any bug`,
+    img: SkkudingLogo,
+    imgAlt: 'SKKUDING Beta service Banner',
+    color: 'black',
+    href: '/'
+  },
+  {
+    topTitle: 'Contribute to',
+    bottomTitle: 'Codedang on GitHub',
+    sub: 'Our project is open source!',
+    img: GithubLogo,
+    imgAlt: 'Github Link Banner',
+    color: 'yellow',
+    href: 'https://github.com/skkuding/codedang'
+  }
+]
 
 const getContests = async () => {
   const data: {