From e2b7649b7b853792af7f965303e1203c5537d135 Mon Sep 17 00:00:00 2001
From: Sumin Jeon <jeonsumin2002@gmail.com>
Date: Sun, 5 Jan 2025 15:52:46 +0900
Subject: [PATCH] style(fe): delete the title if no data (#2273)

* style: delete the title if no data

* fix(fe): fix by deleting unnecessary fractions
---
 .../(main)/_components/ContestCards.tsx       | 81 +++++++++++--------
 .../(main)/_components/ProblemCards.tsx       | 55 ++++++++-----
 apps/frontend/app/(client)/(main)/page.tsx    | 34 ++------
 3 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx b/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
index 4854c30ee1..edfea5f384 100644
--- a/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
+++ b/apps/frontend/app/(client)/(main)/_components/ContestCards.tsx
@@ -1,9 +1,55 @@
+import { Button } from '@/components/shadcn/button'
 import { fetcher } from '@/libs/utils'
 import type { Contest } from '@/types/type'
 import type { Route } from 'next'
 import Link from 'next/link'
 import ContestCard from './ContestCard'
 
+export default async function ContestCards() {
+  const contests = await getContests()
+
+  return (
+    contests.length > 0 && (
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex items-center justify-between text-gray-700">
+          <p className="text-2xl font-bold">Contest 🏆</p>
+          <Link href={'/contest'}>
+            <Button variant="ghost" className="h-8 px-3">
+              See More
+            </Button>
+          </Link>
+        </div>
+        <div className="flex justify-start gap-5 md:hidden">
+          {contests.slice(0, 2).map((contest) => {
+            return (
+              <Link
+                key={contest.id}
+                href={`/contest/${contest.id}` as Route}
+                className="inline-block w-1/2"
+              >
+                <ContestCard contest={contest} />
+              </Link>
+            )
+          })}
+        </div>
+        <div className="hidden justify-start gap-5 md:flex">
+          {contests.map((contest) => {
+            return (
+              <Link
+                key={contest.id}
+                href={`/contest/${contest.id}` as Route}
+                className="inline-block w-1/3"
+              >
+                <ContestCard contest={contest} />
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    )
+  )
+}
+
 const getContests = async () => {
   const data: {
     ongoing: Contest[]
@@ -20,38 +66,3 @@ const getContests = async () => {
 
   return contests.slice(0, 3)
 }
-
-export default async function ContestCards() {
-  const contests = await getContests()
-
-  return (
-    <>
-      <div className="flex justify-start gap-5 md:hidden">
-        {contests.slice(0, 2).map((contest) => {
-          return (
-            <Link
-              key={contest.id}
-              href={`/contest/${contest.id}` as Route}
-              className="inline-block w-1/2"
-            >
-              <ContestCard contest={contest} />
-            </Link>
-          )
-        })}
-      </div>
-      <div className="hidden justify-start gap-5 md:flex">
-        {contests.map((contest) => {
-          return (
-            <Link
-              key={contest.id}
-              href={`/contest/${contest.id}` as Route}
-              className="inline-block w-1/3"
-            >
-              <ContestCard contest={contest} />
-            </Link>
-          )
-        })}
-      </div>
-    </>
-  )
-}
diff --git a/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx b/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
index 57f39b1794..27e2d3b871 100644
--- a/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
+++ b/apps/frontend/app/(client)/(main)/_components/ProblemCards.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@/components/shadcn/button'
 import Link from 'next/link'
 import { getProblemList } from '../../_libs/apis/problem'
 import ProblemCard from './ProblemCard'
@@ -9,29 +10,39 @@ export default async function ProblemCards() {
   })
 
   return (
-    <>
-      <div className="flex justify-start gap-5 md:hidden">
-        {problems.slice(0, 2).map((problem) => (
-          <Link
-            key={problem.id}
-            href={`/problem/${problem.id}`}
-            className="inline-block w-1/2"
-          >
-            <ProblemCard problem={problem} />
+    problems.length > 0 && (
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex items-center justify-between text-gray-700">
+          <p className="text-2xl font-bold">Problem ✨</p>
+          <Link href={'/problem'}>
+            <Button variant="ghost" className="h-8 px-3">
+              See More
+            </Button>
           </Link>
-        ))}
+        </div>
+        <div className="flex justify-start gap-5 md:hidden">
+          {problems.slice(0, 2).map((problem) => (
+            <Link
+              key={problem.id}
+              href={`/problem/${problem.id}`}
+              className="inline-block w-1/2"
+            >
+              <ProblemCard problem={problem} />
+            </Link>
+          ))}
+        </div>
+        <div className="hidden justify-start gap-5 md:flex">
+          {problems.map((problem) => (
+            <Link
+              key={problem.id}
+              href={`/problem/${problem.id}`}
+              className="inline-block w-1/3"
+            >
+              <ProblemCard problem={problem} />
+            </Link>
+          ))}
+        </div>
       </div>
-      <div className="hidden justify-start gap-5 md:flex">
-        {problems.map((problem) => (
-          <Link
-            key={problem.id}
-            href={`/problem/${problem.id}`}
-            className="inline-block w-1/3"
-          >
-            <ProblemCard problem={problem} />
-          </Link>
-        ))}
-      </div>
-    </>
+    )
   )
 }
diff --git a/apps/frontend/app/(client)/(main)/page.tsx b/apps/frontend/app/(client)/(main)/page.tsx
index 7a08a929ac..7c11ada7cf 100644
--- a/apps/frontend/app/(client)/(main)/page.tsx
+++ b/apps/frontend/app/(client)/(main)/page.tsx
@@ -1,7 +1,5 @@
 import FetchErrorFallback from '@/components/FetchErrorFallback'
-import { Button } from '@/components/shadcn/button'
 import { ErrorBoundary } from '@suspensive/react'
-import Link from 'next/link'
 import Carousel from './_components/Carousel'
 import ContestCards from './_components/ContestCards'
 import ProblemCards from './_components/ProblemCards'
@@ -60,33 +58,13 @@ export default function Home() {
         </div>
       </div> */}
 
-      <div className="flex w-full flex-col gap-6">
-        <div className="flex items-center justify-between text-gray-700">
-          <p className="text-2xl font-bold">Contest 🏆</p>
-          <Link href={'/contest'}>
-            <Button variant="ghost" className="h-8 px-3">
-              See More
-            </Button>
-          </Link>
-        </div>
-        <ErrorBoundary fallback={FetchErrorFallback}>
-          <ContestCards />
-        </ErrorBoundary>
-      </div>
+      <ErrorBoundary fallback={FetchErrorFallback}>
+        <ContestCards />
+      </ErrorBoundary>
 
-      <div className="flex w-full flex-col gap-6">
-        <div className="flex items-center justify-between text-gray-700">
-          <p className="text-2xl font-bold">Problem ✨</p>
-          <Link href={'/problem'}>
-            <Button variant="ghost" className="h-8 px-3">
-              See More
-            </Button>
-          </Link>
-        </div>
-        <ErrorBoundary fallback={FetchErrorFallback}>
-          <ProblemCards />
-        </ErrorBoundary>
-      </div>
+      <ErrorBoundary fallback={FetchErrorFallback}>
+        <ProblemCards />
+      </ErrorBoundary>
     </div>
   )
 }