From 8d19659f14655d3863956414522b6cb0e21304b6 Mon Sep 17 00:00:00 2001
From: jungmir <ham4051@gmail.com>
Date: Sun, 6 Oct 2024 00:14:13 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=ED=9B=84=EC=9B=90=EC=82=AC=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=EA=B0=80=20=ED=8A=B9=EC=A0=95=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=EC=97=90=EC=84=9C=20=EC=98=A4?=
 =?UTF-8?q?=EB=B2=84=ED=94=8C=EB=A1=9C=EC=9A=B0=20=EB=90=98=EC=96=B4=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/SponsorTable.tsx | 53 ++++++++++++++------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/Footer/SponsorTable.tsx b/src/components/Footer/SponsorTable.tsx
index 337d014..81788ee 100644
--- a/src/components/Footer/SponsorTable.tsx
+++ b/src/components/Footer/SponsorTable.tsx
@@ -13,13 +13,13 @@ function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
   return (
     <SponsorCard>
       <H3>{levelName}</H3>
-      <div style={{ gridTemplateColumns: `repeat(${max}, 1fr)` }}>
+      <SponsorLogoList>
         {sponsors.map((sponsor) => (
           <Link to={`/sponsoring/sponsor/${sponsor.id}`} relative="path">
             <LogoImage image={sponsor.logo_image} />
           </Link>
         ))}
-      </div>
+      </SponsorLogoList>
     </SponsorCard>
   );
 }
@@ -30,6 +30,7 @@ interface Image {
 
 const H3 = styled.h3`
   color: #141414 !important;
+  width: 120px;
 `;
 
 const LogoImage = styled.div<Image>`
@@ -37,21 +38,40 @@ const LogoImage = styled.div<Image>`
   justify-content: center;
   align-itmes: center;
   color: #141414;
-  width: 320px;
   height: 200px;
   background-image: url(${(props) => props.image});
   background-size: contain;
   background-position: center;
 
-  & > img {
-    height: 50%;
+  @media only screen and (max-width: 480px) {
+    width: 320px;
   }
 
   @media only screen and (max-width: 810px) {
-    width: 100%;
+    width: 200px;
+  }
+
+  @media only screen and (max-width: 1200px) {
+    width: 240px;
+  }
+
+  @media only screen and (min-width: 1200px) {
+    width: 320px;
+  }
+
+  @media only screen and (min-width: 1800px) {
+    width: 360px;
   }
 `;
 
+const SponsorLogoList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 3vw;
+  justify-content: center;
+  width: 100%;
+`;
+
 const SponsorCard = styled.div`
   border: 1px solid #b0a8fe;
   border-radius: 16px;
@@ -59,25 +79,14 @@ const SponsorCard = styled.div`
   padding: 1rem 1.5rem;
   align-items: center;
   background-color: #c2c7d0;
+  min-width: 280px;
 
   & > h3 {
     color: #b0a8fe;
     margin: 0;
-    flex: 200px;
-  }
-
-  & > div {
-    width: 100%;
-    display: grid;
-    grid-gap: 1.5rem;
-    flex: auto;
-
-    & > a {
-      max-height: 20rem;
-    }
   }
 
-  @media only screen and (max-width: 810px) {
+  @media only screen and (max-width: 480px) {
     flex-direction: column;
     margin: 1rem;
 
@@ -86,12 +95,6 @@ const SponsorCard = styled.div`
       margin: 0;
       flex: auto;
     }
-
-    & > div {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-    }
   }
 `;