Merge pull request #20 from pythonkr/feature/sponsor

Feat: 후원사 페이지 API 연동

.env.dev

@@ -1 +1 @@
-REACT_APP_PYCONKR_API=https://payment-dev.pycon.kr
+REACT_APP_PYCONKR_API=https://api-dev.pycon.kr

src/api/sponsor.ts

@@ -1,33 +1,26 @@
-import { Sponsor } from "models/sponsor";
+import { Sponsor, SponsorBenefit, SponsorLevelWithSponsor } from "models/sponsor";
 import axios from "lib/axios";
-import { APISponsor } from "models/api/sponsor";
+import { APISponsor, APISponsorBenefit, APISponsorLevel, APISponsorLevelWithSponsor } from "models/api/sponsor";
+import { SponsorLevel } from "models/sponsor";
 import { getErrorMessage } from "api";
-import SponsorLevels from "enums/sponsorLevels";
 
-export function listSponsors(): Promise<Sponsor[]> {
+
+export function listSponsorLevels(): Promise<SponsorLevel[]> {
   return new Promise((resolve, reject) => {
-    resolve([
-      {
-        id: "1",
-        name: "후원사1",
-        level: SponsorLevels.keystone,
-      },
-      {
-        id: "2",
-        name: "후원사2",
-        level: SponsorLevels.gold,
-      },
-      {
-        id: "3",
-        name: "후원사3",
-        level: SponsorLevels.ruby,
-      },
-    ]);
+    axios.get<APISponsorLevel[]>("/2023/sponsors/levels").then((response) => {
+      resolve(SponsorLevel.fromAPIs(response.data));
+    }).catch((error) => {
+      console.error(error);
+      reject(getErrorMessage(error));
+    })
     return;
+  });
+}
 
-    // eslint-disable-next-line no-unreachable
+export function listSponsors(): Promise<Sponsor[]> {
+  return new Promise((resolve, reject) => {
     axios
-      .get<APISponsor[]>("/sponsor")
+      .get<APISponsor[]>("/2023/sponsors/list/")
       .then((response) => {
         resolve(Sponsor.fromAPIs(response.data));
       })
@@ -37,3 +30,28 @@ export function listSponsors(): Promise<Sponsor[]> {
       });
   });
 }
+export function listSponsorLevelWithSponsor(): Promise<SponsorLevelWithSponsor[]> {
+  return new Promise((resolve, reject) => {
+    axios
+      .get<APISponsorLevelWithSponsor[]>("/2023/sponsors/levels/with-sponsor/")
+      .then((response) => {
+        console.log("debug", response);
+        resolve(SponsorLevelWithSponsor.fromAPIs(response.data));
+      })
+      .catch((error) => {
+        console.error(error);
+        reject(getErrorMessage(error));
+      });
+  });
+}
+
+export function listSponsorBenefits(): Promise<SponsorBenefit[]> {
+  return new Promise((resolve, reject) => {
+    axios.get<APISponsorBenefit[]>("/2023/sponsors/benefits/").then(response => {
+      resolve(SponsorBenefit.fromAPIs(response.data));
+    }).catch(error => {
+      console.error(error);
+      reject(getErrorMessage(error));
+    })
+  })
+}

src/components/Footer/SponsorList.tsx

@@ -0,0 +1,75 @@
+import { SponsorAPI } from "api";
+import React, { useEffect, useState } from "react";
+import useTranslation from "utils/hooks/useTranslation";
+import { SponsorLevelWithSponsor } from "models/sponsor";
+import styled from "styled-components";
+import SponsorTable from "./SponsorTable";
+
+const SponsorList = () => {
+  const t = useTranslation();
+  const [listOfSponsorLevel, setListOfSponsorLevel] = useState<SponsorLevelWithSponsor[]>([]);
+
+  useEffect(() => {
+    SponsorAPI.listSponsorLevelWithSponsor().then((levels) => {
+      setListOfSponsorLevel(levels);
+    });
+  }, []);
+
+  return (
+    <Container>
+      <Vertical>
+        <H1>{t("후원사 목록")}</H1>
+        <SponsorTableList>
+          {listOfSponsorLevel.map((level) => (
+            <SponsorTable
+              max={level.name.toLowerCase() === "keystone" ? 1 : 4}
+              levelName={t(level.name)}
+              sponsors={level.sponsor}
+            />
+          ))}
+        </SponsorTableList>
+      </Vertical>
+    </Container>
+  );
+};
+
+export default SponsorList;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+
+  &:nth-child(even) {
+    background-color: #141414;
+  }
+`;
+
+const Vertical = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin-bottom: 2rem;
+  width: 100%;
+`;
+
+const SponsorTableList = styled.div`
+  & > div + div {
+    margin-top: 2rem;
+  }
+`;
+
+const H1 = styled.h1`
+  margin-top: 3rem;
+  font-size: 40px;
+  color: #b0a8fe;
+
+  @media only screen and (max-width: 810px) {
+    padding: 0 1rem;
+    font-size: 24px;
+  }
+`;

src/pages/Sponsor/SponsorTable.tsx → src/components/Footer/SponsorTable.tsx

@@ -1,10 +1,11 @@
+import { Sponsor } from "models/sponsor";
 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 }>;
+  sponsors: Sponsor[];
 };
 
 function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
@@ -13,7 +14,7 @@ function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
       <h3>{levelName}</h3>
       <div style={{ gridTemplateColumns: `repeat(${max}, 1fr)` }}>
         {sponsors.map((sponsor) => (
-          <img src={sponsor.image} alt={sponsor.name} />
+          <img src={sponsor.logo_image} alt={sponsor.name} />
         ))}
       </div>
     </SponsorCard>

src/components/Footer/index.tsx

@@ -1,5 +1,4 @@
-import { Sponsor } from "models/sponsor";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { SponsorAPI } from "api";
@@ -15,69 +14,16 @@ import {
   Youtube,
 } from "assets/icons";
 import useTranslation from "utils/hooks/useTranslation";
-import SponsorLevels, { SponsorLevel, SponsorLevelCode } from "enums/sponsorLevels";
 import { Link } from "react-router-dom";
+import SponsorList from "./SponsorList";
 
 const Footer = () => {
-  const [sponsors, setSponsors] = useState<
-    | {
-        level: SponsorLevel;
-        sponsors: Sponsor[];
-      }[]
-    | undefined
-  >([]);
   const t = useTranslation();
 
-  useEffect(() => {
-    SponsorAPI.listSponsors()
-      .then((res) => {
-        setSponsors(
-          Object.entries(
-            res.reduce(
-              (acc, cur) => {
-                if (cur.level.code === "unknown") return acc;
-                if (acc[cur.level.code] === undefined) acc[cur.level.code] = [cur];
-                else acc[cur.level.code].push(cur);
-                return acc;
-              },
-              {} as { [l: string]: Sponsor[] }
-            )
-          )
-            .reduce(
-              (acc, [levelCode, sponsorList]) => {
-                acc.push({
-                  level: SponsorLevels[levelCode as SponsorLevelCode],
-                  sponsors: sponsorList,
-                });
-                return acc;
-              },
-              [] as NonNullable<typeof sponsors>
-            )
-            .sort((a, b) => a.level.priority - b.level.priority)
-        );
-      })
-      .catch((e) => {
-        console.error(e);
-        setSponsors(undefined);
-      });
-  }, []);
-
   return (
     <Container>
-      {/* <Sponsors>
-        {sponsors === undefined ? (
-          <span>후원사 목록을 가져오는데 실패했습니다.</span>
-        ) : (
-          sponsors.map((s) => (
-            <div key={s.level.code}>
-              <div>{s.level.name}</div>
-              {s.sponsors.map((sponsor) => (
-                <div key={sponsor.name}>{sponsor.name}</div>
-              ))}
-            </div>
-          ))
-        )}
-      </Sponsors> */}
+      <SponsorList />
+
       <div className="footer-about-section">
         {/*<section className="left">*/}
         {/*  <table>*/}

src/components/common/Collapse/index.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { isEscKeyPressed } from "utils";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {