[Design] 방송 목록 CSS 수정 & 배너 애니메이션 추가

[Design] 방송 목록 CSS 수정 & 배너 애니메이션 추가

Author: seungheon123

apps/client/src/pages/Home/Banner.tsx

@@ -7,7 +7,7 @@ function Banner() {
       <div className="flex flex-row justify-between w-full h-96 p-5">
         <div className="font-bold text-4xl text-text-strong flex flex-row items-center ml-16 gap-12">
           <MoveCharacter />
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-3 animate-fade-in">
             <p>출석부 관리부터, 소통까지!</p>
             <p>
               부담 없이 함께하는 <span className="text-text-point">네부캠 전용</span> 온라인 캠퍼스

apps/client/src/pages/Home/LiveList.tsx

@@ -59,7 +59,7 @@ function LiveList() {
   }, []);
 
   return (
-    <div className="flex flex-col w-full flex-1 p-10 justify-center">
+    <div className="flex flex-col w-full flex-1 p-10 justify-start items-center">
       <div className="h-14 w-full flex justify-between items-center my-5 px-5">
         <FieldFilter onClickFilterButton={hanldeFilterField} />
         <Search onSearch={handleSearch} />

apps/client/src/pages/Home/index.tsx

@@ -3,7 +3,7 @@ import Banner from './Banner';
 
 export default function Home() {
   return (
-    <div className="flex flex-col justify-between w-full min-h-[calc(100vh-74px)]">
+    <div className="flex flex-col justify-start w-full min-h-[calc(100vh-74px)]">
       <Banner />
       <LiveList />
     </div>

apps/client/tailwind.config.js

@@ -89,6 +89,15 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(-20px)' },
+          '100%': { opacity: '1', transform: 'translate-y-0' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.7s ease-in-out',
+      },
     },
   },
   plugins: [require('tailwindcss-animate')],