From 99678dec7acef4e674610fe2a3e9c1845021527b Mon Sep 17 00:00:00 2001
From: Junseo Kim <semiwest2@gmail.com>
Date: Thu, 5 Jun 2025 12:08:01 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=97=86=EC=9D=8C=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 검색 결과가 없을 때 사용자에게 표시할 메시지의 스타일을 정의
2. 반응형 디자인을 적용하여 작은 화면에서 글자 크기를 조정하도록 설정
---
 frontend/src/pages/MainPage/MainPage.styles.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/src/pages/MainPage/MainPage.styles.ts b/frontend/src/pages/MainPage/MainPage.styles.ts
index bb2ff7b32..dfd25d32d 100644
--- a/frontend/src/pages/MainPage/MainPage.styles.ts
+++ b/frontend/src/pages/MainPage/MainPage.styles.ts
@@ -48,3 +48,16 @@ export const FilterWrapper = styled.div`
   justify-content: right;
   margin: 20px 0;
 `;
+
+export const EmptyResult = styled.div`
+  padding: 80px 20px;
+  text-align: center;
+  color: #555;
+  font-size: 1.125rem;
+  line-height: 1.6;
+  white-space: pre-line;
+
+  @media (max-width: 500px) {
+    font-size: 0.95rem;
+  }
+`;

From a40161bef842f75f00fbf21040d28e4bd1f824d0 Mon Sep 17 00:00:00 2001
From: Junseo Kim <semiwest2@gmail.com>
Date: Thu, 5 Jun 2025 12:08:14 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=A1=9C=EB=94=A9=20=EC=A4=91=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EB=B0=8F=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=97=86=EC=9D=8C=20=EC=B2=98=EB=A6=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 로딩 중일 때 Spinner를 표시하도록 구현
2. 검색 결과가 없을 경우 사용자에게 안내 메시지를 표시하도록 처리
3. 코드 가독성을 위해 관련 로직을 리팩토링하여 isEmpty 및 isLoading 상태 추가
---
 frontend/src/pages/MainPage/MainPage.tsx | 26 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 4c65e2c47..248203484 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -11,6 +11,7 @@ import Banner from '@/pages/MainPage/components/Banner/Banner';
 import { DesktopBannerImageList } from '@/constants/banners';
 import { MobileBannerImageList } from '@/constants/banners';
 import { Club } from '@/types/club';
+import Spinner from '@/components/common/Spinner/Spinner';
 import * as Styled from './MainPage.styles';
 
 const MainPage = () => {
@@ -23,13 +24,12 @@ const MainPage = () => {
   const recruitmentStatus = isFilterActive ? 'OPEN' : 'all';
   const division = 'all';
 
-  const { data: clubs, error } = useGetCardList(
-    keyword,
-    recruitmentStatus,
-    division,
-    selectedCategory,
-  );
-
+  const {
+    data: clubs,
+    error,
+    isLoading,
+  } = useGetCardList(keyword, recruitmentStatus, division, selectedCategory);
+  const isEmpty = !isLoading && (!clubs || clubs.length === 0);
   const hasData = clubs && clubs.length > 0;
 
   const clubList = useMemo(() => {
@@ -54,7 +54,17 @@ const MainPage = () => {
           <StatusRadioButton onChange={setIsFilterActive} />
         </Styled.FilterWrapper>
         <Styled.ContentWrapper>
-          <Styled.CardList>{hasData && clubList}</Styled.CardList>
+          {isLoading ? (
+            <Spinner />
+          ) : isEmpty ? (
+            <Styled.EmptyResult>
+              앗, 조건에 맞는 동아리가 없어요.
+              <br />
+              다른 키워드나 조건으로 다시 시도해보세요!
+            </Styled.EmptyResult>
+          ) : (
+            <Styled.CardList>{clubList}</Styled.CardList>
+          )}
         </Styled.ContentWrapper>
       </Styled.PageContainer>
       <Footer />