Merge remote-tracking branch 'origin/develop'

package.json

@@ -25,6 +25,7 @@
     "react-scripts": "5.0.1",
     "sass": "^1.74.1",
     "styled-components": "^6.1.8",
+    "swiper": "^11.1.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -16,6 +16,7 @@
     <meta name="theme-color" content="#000000" />
     <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" />
     <!--
       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/index.tsx

@@ -169,9 +169,3 @@ export default Footer;
 const Container = styled.div`
   margin-top: 10vh;
 `;
-
-const Sponsors = styled.div`
-  //////////////////////////
-  background-color: deeppink;
-  //////////////////////////
-`;

src/components/common/Collapse/index.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { isEscKeyPressed } from "utils";
+import styled from "styled-components";
+
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+  order: Number;
+  header: string;
+  content: string;
+};
+
+type State = {
+  open: boolean;
+  ref: ReturnType<typeof React.createRef<HTMLDivElement>>;
+};
+
+const Collapse = ({ order, header, content, ...rest }: Props) => {
+  const [open, setOpen] = useState<State["open"]>(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <CollapseLayout ref={ref} tabIndex={0} {...rest}>
+      <CollapseHeader onClick={() => setOpen(!open)}>
+        <div>
+          <p>{order.toString().padStart(2, "0")}</p>
+          <p>{header}</p>
+        </div>
+        <span className="material-symbols-outlined">
+          {open ? "arrow_upward" : "arrow_downward"}
+        </span>
+      </CollapseHeader>
+      <CollapseContent>
+        <div style={{ display: open ? "block" : "none" }}>{content}</div>
+      </CollapseContent>
+    </CollapseLayout>
+  );
+};
+
+const CollapseLayout = styled.div`
+  border-top: 1px solid #b0a8fe;
+  border-bottom: 1px solid #b0a8fe;
+  width: 100%;
+`;
+
+const CollapseHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 3rem;
+  cursor: pointer;
+
+  & > div {
+    display: flex;
+    & > p {
+      color: #b0a8fe;
+      margin: 0;
+    }
+
+    & > p + p {
+      padding-left: 1rem;
+    }
+  }
+
+  & > .material-symbols-outlined {
+    color: #b0a8fe;
+  }
+
+  @media only screen and (max-width: 810px) {
+    padding: 1rem 1.5rem;
+    text-align: start;
+  }
+`;
+
+const CollapseContent = styled.div`
+  font-size: 16px;
+  color: white;
+  text-align: start;
+  overflow: hidden;
+  width: 90%;
+
+  & > div {
+    padding: 0 3rem 2rem 3rem;
+    display: none;
+  }
+
+  @media only screen and (max-width: 810px) {
+    font-size: 12px;
+  }
+`;
+
+export default Collapse;

src/components/common/Page/style.scss

@@ -16,7 +16,7 @@ $footer-height: 2rem;
 
 html {
   font-family: "Pretendard-Regular", sans-serif;
-  background-color: #090909;
+  background-color: #0a0a0a;
 }
 
 .purple {
@@ -35,6 +35,10 @@ html {
   color: $yellow;
 }
 
+.white {
+  color: #ffffff;
+}
+
 span {
   color: #c2c7d0;
 }
@@ -62,14 +66,63 @@ span {
 }
 
 body {
-  background-color: #090909;
+  background-color: #0a0a0a;
   font-weight: 400;
 }
 
 .border-bottom {
   border-bottom: 1px $peach-puzz solid;
 }
 
+.swiper {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 3rem !important;
+  z-index: 0 !important;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  color: white;
+  background-color: $black;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-scrollbar {
+  background: #555555 !important;
+}
+
+.swiper-scrollbar-drag {
+  background: $purple !important;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+// mobile
+@media only screen and (min-width: 360px) {
+  body {
+    font-size: 12px;
+  }
+  h2 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .finale-img {
+    padding: 0 1rem;
+  }
+}
+
 .nav-bar {
   padding: 0 1rem;
   height: $navbar-height;
@@ -142,6 +195,40 @@ body {
   }
 }
 
+  .mobile-logo {
+    width: 84px;
+  }
+  .mobile-slogan {
+    width: 300px;
+  }
+  .welcome-text {
+    font-size: large;
+    white-space: nowrap;
+  }
+
+  .small-text {
+    font-size: 12px;
+    font-weight: 600;
+    font-style: italic;
+  }
+
+  .medium-text {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .big-text {
+    font-size: 30px;
+    font-weight: 800;
+  }
+
+  .welcome-section {
+    border-radius: 16px;
+    background-color: $black;
+    padding: 2rem 4rem;
+    align-items: center;
+    width: 100%;
+  }
 
 .footer-about-section {
   display: flex;
@@ -162,7 +249,7 @@ body {
     & > table {
       border: 1px;
       td {
-        background-color: #090909 !important;
+        background-color: #0a0a0a !important;
       }
       tr > td:nth-of-type(2) {
         padding-left: 1.5rem;

src/pages/Home/index.tsx

@@ -8,12 +8,19 @@ const Home = () => {
   return (
     <Page>
       <Container>
-        <img className="mobile-slogan" src="images/introduceSlogan.png" alt="introduceSlogan.png" />
+        <img
+          className="mobile-slogan"
+          src="/images/introduceSlogan.png"
+          alt="introduceSlogan.png"
+        />
       </Container>
       <Container>
         <div className="vertical welcome-section">
           <span className="vertical-item peach-puzz welcome-text">
-            <b>{t("10번째 파이콘 한국에")}<br /></b>
+            <b>
+              {t("10번째 파이콘 한국에")}
+              <br />
+            </b>
             {t("여러분을 초대합니다.")}
           </span>
           <img className="mobile-logo vertical-item" src="images/logo.png" alt="logo.png" />

src/pages/Sponsor/SponsorTable.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+  max: Number;
+  levelName: string;
+  sponsors: Array<{ name: string; image: string }>;
+};
+
+function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
+  return (
+    <SponsorCard>
+      <h3>{levelName}</h3>
+      <div style={{ gridTemplateColumns: `repeat(${max}, 1fr)` }}>
+        {sponsors.map((sponsor) => (
+          <img src={sponsor.image} alt={sponsor.name} />
+        ))}
+      </div>
+    </SponsorCard>
+  );
+}
+
+const SponsorCard = styled.div`
+  border: 1px solid #b0a8fe;
+  border-radius: 16px;
+  display: flex;
+  padding: 1rem 1.5rem;
+  align-items: center;
+
+  & > h3 {
+    color: #b0a8fe;
+    margin: 0;
+    flex: 200px;
+  }
+
+  & > div {
+    width: 100%;
+    display: grid;
+    grid-gap: 1.5rem;
+    flex: auto;
+  }
+
+  @media only screen and (max-width: 810px) {
+    display: block;
+    margin: 1rem;
+
+    & > div {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+`;
+
+export default SponsorTable;