Merge pull request #37 from pythonkr/feature/logo-resize

Update: 로고 표시 스타일 변경

Author: jungmir

src/components/Footer/SponsorTable.tsx

@@ -12,23 +12,44 @@ 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>
     </SponsorCard>
   );
 }
 
-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;
     }
   }
 `;

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;
     }
   }