feat: 메인 페이지 UI 구현 (#54)

Author: KIMSEUNGGYU

frontend/zicdding-class.com/app/page.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@zicdding-web/ui/Typography';
-import OrderByTabs from './_components/OrderByTabs';
-import ClassCard from './_components/ClassCard';
 import Link from 'next/link';
+import ClassCard from './_components/ClassCard';
+
 const dummy = [
   {
     id: '1',
@@ -48,43 +48,87 @@ const dummy = [
     ],
     myLike: false,
   },
+  {
+    id: '4',
+    title: 'Example Class Title',
+    endDate: '2024-07-01',
+    positions: ['프론트엔드', '백엔드'],
+    nickname: '직띵',
+    likeCnt: 10,
+    viewCnt: 20,
+    commentCnt: 5,
+    technology: [
+      { name: 'react', imgUrl: '/next.svg' },
+      { name: 'js', imgUrl: '/vercel.svg' },
+    ],
+    myLike: false,
+  },
+  {
+    id: '5',
+    title: 'Example Class Title',
+    endDate: '2024-07-01',
+    positions: ['프론트엔드', '백엔드'],
+    nickname: '직띵',
+    likeCnt: 10,
+    viewCnt: 20,
+    commentCnt: 5,
+    technology: [
+      { name: 'react', imgUrl: '/next.svg' },
+      { name: 'js', imgUrl: '/vercel.svg' },
+    ],
+    myLike: false,
+  },
+  {
+    id: '6',
+    title: 'Example Class Title',
+    endDate: '2024-07-01',
+    positions: ['프론트엔드', '백엔드'],
+    nickname: '직띵',
+    likeCnt: 10,
+    viewCnt: 20,
+    commentCnt: 5,
+    technology: [
+      { name: 'react', imgUrl: '/next.svg' },
+      { name: 'js', imgUrl: '/vercel.svg' },
+    ],
+    myLike: false,
+  },
 ];
 
 export default function Home() {
   return (
-    <div className="px-6 ">
-      <div className="mb-20">
-        <div className="flex justify-between border-b-[1px] border-gray-200 pb-4">
-          <Typography variant="h2">클래스</Typography>
-
-          <div className="flex items-center gap-4">
-            <OrderByTabs />
-            <Typography variant="body">더보기</Typography>
-          </div>
+    <div className="flex flex-col px-6 gap-[52px] mb-28">
+      <section className="">
+        <div className="flex justify-between items-center border-b-[1px] border-[#C6C6C6] py-4">
+          <Typography variant="h2" className="text-[#0F172A]">
+            클래스
+          </Typography>
+          <Link href="/class">더보기</Link>
         </div>
 
-        <div className="flex gap-4 pt-6 overflow-x-auto">
-          {dummy.map((item) => (
-            <Link href={`/class/${item.id}`} key={`${item.id}`}>
-              <ClassCard {...item} />
+        {/* GYU-TODO: ClassList 로 추출해도 될듯 */}
+        <ul className="flex flex-wrap gap-8 w-full mt-7">
+          {dummy.slice(0, 6).map((item) => (
+            <Link href={`/class/${item.id}`} key={`${item.id}`} className="w-[calc(34%-32px)]">
+              <ClassCard {...item} className="w-full" />
             </Link>
           ))}
-        </div>
-      </div>
+        </ul>
+      </section>
 
-      <div>
-        <div className="flex justify-between border-b-[1px] border-gray-200 pb-4">
-          <Typography variant="h2">ITNews</Typography>
+      <section>
+        <div className="flex justify-between items-center border-b-[1px] border-[#C6C6C6] py-4">
+          <Typography variant="h2" className="text-[#0F172A]">
+            IT News
+          </Typography>
+          <Link href="#">더보기</Link>
         </div>
 
-        <div className="flex gap-4 pt-6 overflow-x-auto">
-          {dummy.map((item) => (
-            <Link href={`/class/${item.id}`} key={`${item.id}`}>
-              <ClassCard key={item.id} {...item} />
-            </Link>
-          ))}
-        </div>
-      </div>
+        <ul className="flex flex-wrap gap-8 w-full mt-7">
+          {/* TODO: IT news 카드 컴포넌트 재사용 */}
+          <Typography variant="body">데이터가 존재하지 않습니다.</Typography>
+        </ul>
+      </section>
     </div>
   );
 }