From c650be92460981555efefd989c06f2d9490ed3f4 Mon Sep 17 00:00:00 2001
From: jungmir <ham4051@gmail.com>
Date: Sat, 28 Sep 2024 13:51:13 +0900
Subject: [PATCH] =?UTF-8?q?Update:=20=EB=A1=9C=EA=B3=A0=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer/SponsorTable.tsx | 44 ++++++++++++++++++++++----
 src/pages/Sponsor/SponsorDetail.tsx    | 26 +++++++++------
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/Footer/SponsorTable.tsx b/src/components/Footer/SponsorTable.tsx
index 93cb441..f00b350 100644
--- a/src/components/Footer/SponsorTable.tsx
+++ b/src/components/Footer/SponsorTable.tsx
@@ -12,11 +12,11 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
 function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
   return (
     <SponsorCard>
-      <h3>{levelName}</h3>
+      <H3>{levelName}</H3>
       <div style={{ gridTemplateColumns: `repeat(${max}, 1fr)` }}>
         {sponsors.map((sponsor) => (
           <Link to={`/sponsoring/sponsor/${sponsor.id}`} relative="path">
-            <LogoImage src={sponsor.logo_image} alt={sponsor.name} />
+            <LogoImage image={sponsor.logo_image} />
           </Link>
         ))}
       </div>
@@ -24,11 +24,32 @@ function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
   );
 }
 
-const LogoImage = styled.img`
-  background: white;
-  color: black;
-  min-width: 15vw;
-  max-height: 100%;
+interface Image {
+  image: string;
+}
+
+const H3 = styled.h3`
+  color: #141414 !important;
+`;
+
+const LogoImage = styled.div<Image>`
+  display: inline-flex;
+  justify-content: center;
+  align-itmes: center;
+  color: #141414;
+  width: 320px;
+  height: 200px;
+  background-image: url(${(props) => props.image});
+  background-size: 200px;
+  background-position: center;
+
+  & > img {
+    height: 50%;
+  }
+
+  @media only screen and (max-width: 810px) {
+    width: 100%;
+  }
 `;
 
 const SponsorCard = styled.div`
@@ -37,6 +58,7 @@ const SponsorCard = styled.div`
   display: flex;
   padding: 1rem 1.5rem;
   align-items: center;
+  background-color: #c2c7d0;
 
   & > h3 {
     color: #b0a8fe;
@@ -56,11 +78,19 @@ const SponsorCard = styled.div`
   }
 
   @media only screen and (max-width: 810px) {
+    flex-direction: column;
     margin: 1rem;
 
+    & > h3 {
+      color: #b0a8fe;
+      margin: 0;
+      flex: auto;
+    }
+
     & > div {
       display: flex;
       flex-wrap: wrap;
+      flex-direction: column;
     }
   }
 `;
diff --git a/src/pages/Sponsor/SponsorDetail.tsx b/src/pages/Sponsor/SponsorDetail.tsx
index 76c4df9..0913a68 100644
--- a/src/pages/Sponsor/SponsorDetail.tsx
+++ b/src/pages/Sponsor/SponsorDetail.tsx
@@ -52,8 +52,7 @@ const SponsorDetailPage = () => {
 export default SponsorDetailPage;
 
 const LogoImage = styled.img`
-  background: white;
-  color: black;
+  color: #141414;
   max-width: 50%;
 `;
 
@@ -75,14 +74,24 @@ const Vertical = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
-  margin-bottom: 2rem;
   width: 100%;
+  height: max-content;
+  border-radius: 16px;
+  min-height: 700px;
+  background-color: #c2c7d0;
+  margin: 0 2rem 2rem 2rem;
+
+  @media only screen and (max-width: 810px) {
+    height: max-content;
+    min-height: 300px;
+    justify-content: start;
+  }
 `;
 
 const H1 = styled.h1`
   margin-top: 3rem;
   font-size: 40px;
-  color: #b0a8fe;
+  color: #141414;
 
   @media only screen and (max-width: 810px) {
     padding: 0 1rem;
@@ -93,18 +102,17 @@ const H1 = styled.h1`
 const H3 = styled.h3`
   margin-top: 1.5rem;
   font-size: 24px;
-  color: #c2c7d0;
+  color: #141414;
 
-  & > p,
-  span {
+  & > * {
     font-size: 24px !important;
-    color: #c2c7d0 !important;
+    color: #141414 !important;
     text-align: left;
 
     & > p,
     span {
       font-size: 24px !important;
-      color: #c2c7d0 !important;
+      color: #141414 !important;
     }
   }