Merge branch 'develop'

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/index.html

@@ -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/

src/components/Footer/SponsorList.tsx

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

src/components/Footer/SponsorTable.tsx

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

src/components/Nav/index.tsx

@@ -1,29 +1,29 @@
-import Hamburger from "hamburger-react"
-import React, { useState } from "react"
-import { useDispatch } from "react-redux"
-import { useNavigate } from "react-router"
-import styled from "styled-components"
+import Hamburger from "hamburger-react";
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router";
+import styled from "styled-components";
 
-import { Slogan as SloganSvg } from "assets/icons"
-import useIsMobile from "utils/hooks/useIsMobile"
-import useTranslation from "utils/hooks/useTranslation"
-import MenuRoutes, { MenuElementType } from "./menus"
+import { Slogan as SloganSvg } from "assets/icons";
+import useIsMobile from "utils/hooks/useIsMobile";
+import useTranslation from "utils/hooks/useTranslation";
+import MenuRoutes, { MenuElementType } from "./menus";
 
 const Nav = () => {
-  const navigate = useNavigate()
-  const dispatch = useDispatch()
-  const isMobile = useIsMobile()
-  const [openMenu, setOpenMenu] = useState(false)
-  const t = useTranslation()
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const isMobile = useIsMobile();
+  const [openMenu, setOpenMenu] = useState(false);
+  const t = useTranslation();
 
   const menuOnClickHandler = (menu: MenuElementType) => () => {
     if (menu.path) {
-      navigate(menu.path)
-      setOpenMenu(false)
+      navigate(menu.path);
+      setOpenMenu(false);
     } else if (menu.onClick) {
-      menu.onClick?.({ setOpenMenu, dispatch, navigate })
+      menu.onClick?.({ setOpenMenu, dispatch, navigate });
     }
-  }
+  };
 
   return (
     <Container className="nav-bar">
@@ -35,31 +35,36 @@ const Nav = () => {
         {Object.entries(MenuRoutes).map(([path, menu]) => (
           <Menu className="menu-item" key={path}>
             <span onClick={menuOnClickHandler(menu)}>{t(menu.name)}</span>
-            {
-              menu.sub && <SubMenus className="sub-menu">
+            {menu.sub && (
+              <SubMenus className="sub-menu">
                 {menu.sub.map((subMenu) => (
-                  <SubMenu className="sub-menu-item" key={subMenu.name} onClick={menuOnClickHandler(subMenu)}>
+                  <SubMenu
+                    className="sub-menu-item"
+                    key={subMenu.name}
+                    onClick={menuOnClickHandler(subMenu)}
+                  >
                     {t(subMenu.name)}
                   </SubMenu>
                 ))}
               </SubMenus>
-            }
+            )}
+            <span className="separator" />
           </Menu>
         ))}
       </div>
     </Container>
-  )
-}
+  );
+};
 
-export default Nav
+export default Nav;
 
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   background-color: #141414;
-`
+`;
 
 const SubMenus = styled.div`
   display: none;
@@ -70,7 +75,11 @@ const SubMenus = styled.div`
 
   font-size: initial;
   font-weight: initial;
-`
+
+  @media only screen and (max-width: 810px) {
+    top: 0;
+  }
+`;
 
 const SubMenu = styled.div`
   cursor: pointer;
@@ -86,7 +95,7 @@ const SubMenu = styled.div`
   &:hover {
     color: #b0a8fe;
   }
-`
+`;
 
 const Menu = styled.div`
   position: relative;
@@ -99,4 +108,4 @@ const Menu = styled.div`
       display: initial;
     }
   }
-`
+`;

src/components/Nav/menus.ts

@@ -1,7 +1,6 @@
-import { useDispatch } from "react-redux";
+import { useDispatch } from "react-redux"
 
-import { openGlobalDialog, setLanguage } from "store/Core";
-import { DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024 } from "store/Core/dialog";
+import { setLanguage } from "store/Core"
 
 export type MenuElementOnClickArgType = {
   setOpenMenu: React.Dispatch<React.SetStateAction<boolean>>;
@@ -40,6 +39,10 @@ const Menus: MenuType = {
         name: "건강 관련 안내",
         path: "/about/health",
       },
+      {
+        name: "장소 안내",
+        path: "/about/place",
+      },
       // {
       //   name: "파이콘 한국 준비위원회",
       //   path: "/about/organizing-team",
@@ -97,6 +100,10 @@ const Menus: MenuType = {
       },
     ],
   },
+  poster: {
+    name: "포스터 세션",
+    path: "/poster-session"
+  },
   sponsoring: {
     name: "후원하기",
     sub: [

src/components/common/Page/style.scss

@@ -154,8 +154,6 @@ body {
   color: $peach-puzz;
   text-align: center;
 
-  gap: 1vw;
-
   & > .menu-item {
     display: flex;
     justify-content: center;
@@ -197,6 +195,12 @@ body {
         }
       }
     }
+    & > span.separator {
+      display: none;
+      height: 1rem;
+      border-left: 1px solid;
+      margin: 0 0.5rem;
+    }
   }
 }
 
@@ -412,15 +416,32 @@ body {
 
     & > .menu-item {
       border: none;
+      flex-direction: row;
 
       & > span {
         border-bottom: none;
+        width: unset;
+      }
+
+      & > span.separator {
+        display: block;
+      }
+
+      &:last-of-type > span.separator {
+        display: none;
       }
 
       &:hover {
         & > .sub-menu {
           position: absolute;
           width: max-content;
+          transform: translateX(-0.5rem);
+        }
+      }
+
+      &:last-of-type:hover {
+        & > .sub-menu {
+          transform: none;
         }
       }
 

src/lib/map.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    kakao: any;
+  }
+
+  class kakao {
+    static maps: any;
+  }
+}
+
+export {};