From 9cef4796b48e5b0e74d5a424aa8219ccde27be65 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Mon, 10 Nov 2025 13:56:09 +0900
Subject: [PATCH 01/10] =?UTF-8?q?fix:=20=EB=8D=B0=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=ED=83=91,=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EC=9D=84=20=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모바일 패딩 20 -> 16px로 변경
- box-shadow 모바일 추가
---
 .../components/ClubCard/ClubCard.styles.ts    | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
index e73686fa4..4148c8c5f 100644
--- a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
+++ b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
@@ -1,9 +1,16 @@
 import styled from 'styled-components';
 
 const CARD_STYLES = {
-  borderRadius: '20px',
-  padding: '20px',
-  gap: '16px',
+  desktop: {
+    borderRadius: '20px',
+    padding: '20px',
+    gap: '16px',
+  },
+  mobile: {
+    borderRadius: '16px',
+    padding: '16px',
+    gap: '8px',
+  },
 } as const;
 
 const CardContainer = styled.div<{
@@ -13,9 +20,9 @@ const CardContainer = styled.div<{
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-radius: ${CARD_STYLES.borderRadius};
-  padding: ${CARD_STYLES.padding};
-  gap: ${CARD_STYLES.gap};
+  border-radius: ${CARD_STYLES.desktop.borderRadius};
+  padding: ${CARD_STYLES.desktop.padding};
+  gap: ${CARD_STYLES.desktop.gap};
   background-color: #fff;
 
   box-shadow: ${({ $state }) =>
@@ -29,6 +36,13 @@ const CardContainer = styled.div<{
   transform: ${({ $isClicked }) => ($isClicked ? 'scale(1.05)' : 'scale(1)')};
   cursor: pointer;
 
+  @media (max-width: 500px) {
+    border-radius: ${CARD_STYLES.mobile.borderRadius};
+    padding: ${CARD_STYLES.mobile.padding};
+    gap: ${CARD_STYLES.mobile.gap};
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
+  }
+
   &:hover {
     transform: ${({ $isClicked }) =>
       $isClicked ? 'scale(1.05)' : 'scale(1.03)'};

From f28d8ce60afa09c51f8c0fb3999d690f630087f4 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Mon, 10 Nov 2025 14:19:15 +0900
Subject: [PATCH 02/10] =?UTF-8?q?style:=20=EB=AA=A8=EC=A7=91=EC=A4=91,=20?=
 =?UTF-8?q?=ED=81=B4=EB=9F=BD=ED=83=9C=EA=B7=B8=20=ED=8F=B0=ED=8A=B8?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=9D=BC=EA=B4=80=EC=84=B1=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 데탑 14px, 모바일 12px
---
 frontend/src/components/ClubStateBox/ClubStateBox.tsx | 3 ++-
 frontend/src/components/ClubTag/ClubTag.tsx           | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ClubStateBox/ClubStateBox.tsx b/frontend/src/components/ClubStateBox/ClubStateBox.tsx
index 7640c9147..9b8e74f08 100644
--- a/frontend/src/components/ClubStateBox/ClubStateBox.tsx
+++ b/frontend/src/components/ClubStateBox/ClubStateBox.tsx
@@ -57,12 +57,13 @@ const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>`
   border-radius: 8px;
   background-color: ${({ $bgColor }) => $bgColor};
   color: ${({ $textColor }) => $textColor};
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   font-weight: 500;
 
   @media (max-width: 500px) {
     width: ${BOX_DIMENSIONS.mobile.width};
     height: ${BOX_DIMENSIONS.mobile.height};
+    font-size: 0.75rem;
   }
 `;
 
diff --git a/frontend/src/components/ClubTag/ClubTag.tsx b/frontend/src/components/ClubTag/ClubTag.tsx
index 358dcf07b..2904b7ab8 100644
--- a/frontend/src/components/ClubTag/ClubTag.tsx
+++ b/frontend/src/components/ClubTag/ClubTag.tsx
@@ -38,6 +38,7 @@ const StyledTag = styled.span<{ color: string }>`
   color: #3a3a3a;
 
   @media (max-width: 500px) {
+  font-size: 0.75rem;
     height: 25px;
     padding: ${TAG_STYLES.mobile.padding};
     border-radius: ${TAG_STYLES.mobile.borderRadius};

From dcb8445645ba27b5ec9cd08bd8c4a942a2ca89ca Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Mon, 10 Nov 2025 15:36:29 +0900
Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20clubStatbox,ClubTag=20?=
 =?UTF-8?q?=ED=8F=B0=ED=8A=B8=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ClubStateBox/ClubStateBox.tsx    | 13 +++++++++++--
 frontend/src/components/ClubTag/ClubTag.tsx         | 13 +++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ClubStateBox/ClubStateBox.tsx b/frontend/src/components/ClubStateBox/ClubStateBox.tsx
index 9b8e74f08..c73c35f6b 100644
--- a/frontend/src/components/ClubStateBox/ClubStateBox.tsx
+++ b/frontend/src/components/ClubStateBox/ClubStateBox.tsx
@@ -47,6 +47,15 @@ const BOX_DIMENSIONS = {
   },
 } as const;
 
+const BOX_FONT_SIZE = {
+  desktop: {
+    fontSize: '0.875rem',
+  },
+  mobile: {
+    fontSize: '0.75rem',
+  },
+} as const;
+
 const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>`
   display: flex;
   justify-content: center;
@@ -57,13 +66,13 @@ const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>`
   border-radius: 8px;
   background-color: ${({ $bgColor }) => $bgColor};
   color: ${({ $textColor }) => $textColor};
-  font-size: 0.875rem;
+  font-size: ${BOX_FONT_SIZE.desktop.fontSize};
   font-weight: 500;
 
   @media (max-width: 500px) {
     width: ${BOX_DIMENSIONS.mobile.width};
     height: ${BOX_DIMENSIONS.mobile.height};
-    font-size: 0.75rem;
+    font-size: ${BOX_FONT_SIZE.mobile.fontSize};
   }
 `;
 
diff --git a/frontend/src/components/ClubTag/ClubTag.tsx b/frontend/src/components/ClubTag/ClubTag.tsx
index 2904b7ab8..42436e152 100644
--- a/frontend/src/components/ClubTag/ClubTag.tsx
+++ b/frontend/src/components/ClubTag/ClubTag.tsx
@@ -28,18 +28,27 @@ const TAG_STYLES = {
   },
 } as const;
 
+const TAG_FONT_SIZE = {
+  desktop: {
+    fontSize: '0.875rem',
+  },
+  mobile: {
+    fontSize: '0.75rem',
+  },
+} as const;
+
 const StyledTag = styled.span<{ color: string }>`
   display: inline-block;
   padding: ${TAG_STYLES.desktop.padding};
   border-radius: ${TAG_STYLES.desktop.borderRadius};
   background-color: ${({ color }) => color};
-  font-size: 0.875rem;
+  font-size: ${TAG_FONT_SIZE.desktop.fontSize};
   font-weight: 600;
   color: #3a3a3a;
 
   @media (max-width: 500px) {
-  font-size: 0.75rem;
     height: 25px;
+    font-size: ${TAG_FONT_SIZE.mobile.fontSize};
     padding: ${TAG_STYLES.mobile.padding};
     border-radius: ${TAG_STYLES.mobile.borderRadius};
   }

From d4370d621237aeb3f70ba96bf904bf9799a68913 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Tue, 11 Nov 2025 00:04:44 +0900
Subject: [PATCH 04/10] =?UTF-8?q?style:=20=EC=B9=B4=EB=93=9C=20=EC=A0=9C?=
 =?UTF-8?q?=EB=AA=A9,=20=EC=84=A4=EB=AA=85=20=EB=AA=A8=EB=B0=94=EC=9D=BC?=
 =?UTF-8?q?=20rem=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainPage/components/ClubCard/ClubCard.styles.ts      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
index 4148c8c5f..97f4a9b3a 100644
--- a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
+++ b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
@@ -74,9 +74,13 @@ const ClubInfo = styled.div`
   align-items: flex-start;
 `;
 
-const ClubName = styled.h2`
-  font-size: 1.25rem;
+const ClubName = styled.p`
+  font-size: 1.375rem;
   font-weight: bold;
+
+  @media (max-width: 500px) {
+    font-size: 1rem;
+  }
 `;
 
 export const StateBoxTagContainer = styled.div`
@@ -114,6 +118,7 @@ const Introduction = styled.p`
 
   @media (max-width: 500px) {
     margin: ${INTRODUCTION_MARGIN.mobile.margin};
+    font-size: 0.75rem;
   }
 `;
 

From e682b54c4e7dff26dfeec36ed9dd1cd6c6bec1b0 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Tue, 11 Nov 2025 00:15:45 +0900
Subject: [PATCH 05/10] =?UTF-8?q?fix:=20=ED=84=B0=EC=B9=98=20=EB=94=94?=
 =?UTF-8?q?=EB=B0=94=EC=9D=B4=EC=8A=A4=EC=97=90=EC=84=9C=20ClubCard=20hove?=
 =?UTF-8?q?r=20=ED=9A=A8=EA=B3=BC=20=EC=9E=90=EB=8F=99=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hover 효과를 @media (hover: hover)로 감싸 실제 호버 가능한 디바이스에서만 적용되도록 변경
- touch-action: manipulation 추가하여 터치 동작 최적화
- 스크롤 시 카드에 hover 효과가 자동으로 적용되는 현상 해결
---
 .../MainPage/components/ClubCard/ClubCard.styles.ts      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
index 97f4a9b3a..ca425d397 100644
--- a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
+++ b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
@@ -35,6 +35,7 @@ const CardContainer = styled.div<{
     box-shadow 0.2s ease-in-out;
   transform: ${({ $isClicked }) => ($isClicked ? 'scale(1.05)' : 'scale(1)')};
   cursor: pointer;
+  touch-action: manipulation;
 
   @media (max-width: 500px) {
     border-radius: ${CARD_STYLES.mobile.borderRadius};
@@ -43,9 +44,11 @@ const CardContainer = styled.div<{
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
   }
 
-  &:hover {
-    transform: ${({ $isClicked }) =>
-      $isClicked ? 'scale(1.05)' : 'scale(1.03)'};
+  @media (hover: hover) {
+    &:hover {
+      transform: ${({ $isClicked }) =>
+        $isClicked ? 'scale(1.05)' : 'scale(1.03)'};
+    }
   }
 
   &:active {

From c12d05ea9fb6f7950776e324e970e1df0202ec81 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Tue, 11 Nov 2025 00:34:25 +0900
Subject: [PATCH 06/10] =?UTF-8?q?style:=20=EC=B9=B4=EB=93=9C=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20font-weight:=20normal=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/MainPage/components/ClubCard/ClubCard.styles.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
index ca425d397..0ee2f9e6c 100644
--- a/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
+++ b/frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
@@ -114,6 +114,7 @@ const INTRODUCTION_MARGIN = {
 
 const Introduction = styled.p`
   font-size: 0.875rem;
+  font-weight: normal;
   margin: ${INTRODUCTION_MARGIN.desktop.margin};
   color: rgba(129, 129, 129, 1);
   line-height: 16px;

From 18eb74ed16e1af3b2d81705eac9a060be31acb7a Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Wed, 12 Nov 2025 14:27:27 +0900
Subject: [PATCH 07/10] =?UTF-8?q?style:=20clubCard=20=EB=A1=9C=EA=B3=A0=20?=
 =?UTF-8?q?radius=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 데스크탑 6px -> 14px
- 모바일 6px -> 10px
---
 frontend/src/components/ClubLogo/ClubLogo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ClubLogo/ClubLogo.tsx b/frontend/src/components/ClubLogo/ClubLogo.tsx
index f9c2cfeeb..3a3898df5 100644
--- a/frontend/src/components/ClubLogo/ClubLogo.tsx
+++ b/frontend/src/components/ClubLogo/ClubLogo.tsx
@@ -9,8 +9,8 @@ interface ClubLogoProps {
 
 const presets = {
   main: {
-    desktop: { width: '66px', height: '66px', radius: '6px' },
-    mobile: { width: '50px', height: '50px', radius: '6px' },
+    desktop: { width: '66px', height: '66px', radius: '14px' },
+    mobile: { width: '50px', height: '50px', radius: '10px' },
   },
   detail: {
     desktop: { width: '80px', height: '80px', radius: '10px' },

From fd4a76fc8185190bcf8f87fcc1acdb391d90210a Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Wed, 12 Nov 2025 15:26:30 +0900
Subject: [PATCH 08/10] =?UTF-8?q?style:=20ClubTag=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모바일 패딩을 데스크톱과 동일하게 통일 (4px 8px)
- display를 flex로 변경하여 정렬 개선
- 고정 높이(28px) 추가로 일관성 향상
---
 frontend/src/components/ClubTag/ClubTag.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ClubTag/ClubTag.tsx b/frontend/src/components/ClubTag/ClubTag.tsx
index 42436e152..1db966bb7 100644
--- a/frontend/src/components/ClubTag/ClubTag.tsx
+++ b/frontend/src/components/ClubTag/ClubTag.tsx
@@ -23,7 +23,7 @@ const TAG_STYLES = {
     borderRadius: '8px',
   },
   mobile: {
-    padding: '4px 6px',
+    padding: '4px 8px',
     borderRadius: '6px',
   },
 } as const;
@@ -38,8 +38,10 @@ const TAG_FONT_SIZE = {
 } as const;
 
 const StyledTag = styled.span<{ color: string }>`
-  display: inline-block;
+  display: flex;
+  align-items: center;
   padding: ${TAG_STYLES.desktop.padding};
+  height: 28px;
   border-radius: ${TAG_STYLES.desktop.borderRadius};
   background-color: ${({ color }) => color};
   font-size: ${TAG_FONT_SIZE.desktop.fontSize};

From d2d7cb8f6dc353ae5f7f4cffeb3d04cc5337afb4 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Wed, 12 Nov 2025 15:27:00 +0900
Subject: [PATCH 09/10] =?UTF-8?q?style:=20MainPage=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SectionBar margin 값 명시적으로 지정 (좌측 8px)
- TotalCountResult의 불필요한 padding-top 제거
- CardList의 불필요한 margin-top 제거
---
 frontend/src/pages/MainPage/MainPage.styles.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/MainPage/MainPage.styles.ts b/frontend/src/pages/MainPage/MainPage.styles.ts
index 0a6065b78..8a5e00fcd 100644
--- a/frontend/src/pages/MainPage/MainPage.styles.ts
+++ b/frontend/src/pages/MainPage/MainPage.styles.ts
@@ -27,7 +27,7 @@ export const SectionBar = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 60px 8px 24px;
+  margin: 60px 0px 24px 8px;
 
   ${media.mobile} {
     margin: 32px 4px 16px;
@@ -76,7 +76,6 @@ export const TotalCountResult = styled.span`
   font-size: 18px;
   font-weight: bold;
   color: #787878;
-  padding-top: 13px;
 
   ${media.mobile} {
     font-size: 12px;
@@ -88,7 +87,6 @@ export const CardList = styled.div`
   width: 100%;
   max-width: 100%;
   gap: 20px;
-  margin-top: 50px;
   transition:
     gap 0.5s ease,
     grid-template-columns 0.5s ease;

From a9c69955e960e584494b990d42918ed0e5466ca5 Mon Sep 17 00:00:00 2001
From: seongwon seo <seongwon0903@gmail.com>
Date: Wed, 12 Nov 2025 19:17:10 +0900
Subject: [PATCH 10/10] =?UTF-8?q?style:=20sectionBar=20align-items?=
 =?UTF-8?q?=EB=A5=BC=20flex-end=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/MainPage/MainPage.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/MainPage/MainPage.styles.ts b/frontend/src/pages/MainPage/MainPage.styles.ts
index 8a5e00fcd..b8a1a9c1f 100644
--- a/frontend/src/pages/MainPage/MainPage.styles.ts
+++ b/frontend/src/pages/MainPage/MainPage.styles.ts
@@ -25,7 +25,7 @@ export const ContentWrapper = styled.div`
 
 export const SectionBar = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
   margin: 60px 0px 24px 8px;