Merge branch 'develop'

Author: emscb

package.json

@@ -60,6 +60,8 @@
     ]
   },
   "devDependencies": {
+    "@types/kakaomaps": "^1.1.5",
+    "@types/navermaps": "^3.7.8",
     "@types/react-helmet": "^6.1.11",
     "@types/react-redux": "^7.1.33",
     "eslint-config-prettier": "^9.1.0",

public/images/place/suwon_bus.png

@@ -17,6 +17,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d3945eccce7debf0942f885e90a71f97"></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/images/place/suwon_subway.png

@@ -24,6 +24,7 @@ const SponsorList = () => {
             .filter((level) => level.sponsor.length !== 0)
             .map((level) => (
               <SponsorTable
+                key={level.id}
                 max={level.name === "키스톤" ? 1 : 3}
                 levelName={t(level.name)}
                 sponsors={level.sponsor}

public/images/poster-session/posterSession1.jpg

@@ -1,6 +1,6 @@
 import { Sponsor } from "models/sponsor";
 import { Link } from "react-router-dom";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -13,43 +13,59 @@ 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 to={`/sponsoring/sponsor/${sponsor.id}`} relative="path" key={sponsor.id}>
+            <LogoImage $image={sponsor.logo_image} />
           </Link>
         ))}
-      </div>
+      </SponsorLogoList>
     </SponsorCard>
   );
 }
 
-interface Image {
-  image: string;
-}
-
 const H3 = styled.h3`
   color: #141414 !important;
+  width: 120px;
 `;
 
-const LogoImage = styled.div<Image>`
+const LogoImage = styled.div<{ $image: string }>`
   display: inline-flex;
   justify-content: center;
-  align-itmes: center;
+  align-items: center;
   color: #141414;
-  width: 320px;
   height: 200px;
-  background-image: url(${(props) => props.image});
+  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`
@@ -59,25 +75,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 +91,6 @@ const SponsorCard = styled.div`
       margin: 0;
       flex: auto;
     }
-
-    & > div {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: column;
-    }
   }
 `;