Merge pull request #43 from pythonkr/fix/sponsor-list-overflow

Fix: 후원사 로고가 특정 화면 사이즈에서 오버플로우 되어 보이는 현상 수정

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,54 +30,63 @@ interface Image {
 
 const H3 = styled.h3`
  color: #141414 !important;
+ width: 120px;
 `;
 
 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: 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;
  display: flex;
  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;
- }
  }
 `;