Merge pull request #26 from pythonkr/feature/sponsor-detail

Feat: 후원사 상세 페이지 작업

Author: jungmir

.env.development

@@ -1 +1,2 @@
-REACT_APP_PYCONKR_API=https://api-dev.pycon.kr
+# REACT_APP_PYCONKR_API=https://api-dev.pycon.kr
+REACT_APP_PYCONKR_API=http://localhost:8888

scripts/set_dev.sh

@@ -1 +1 @@
-cp ./.env.dev ./.env || copy .\\env.dev .\\.env
+cp ./.env.development ./.env || copy .\\env.development .\\.env

src/api/sponsor.ts

@@ -4,9 +4,21 @@ import { APISponsor, APISponsorBenefit, APISponsorLevel, APISponsorLevelWithSpon
 import { Sponsor, SponsorBenefit, SponsorLevel, SponsorLevelWithSponsor } from "models/sponsor"
 
 
+export function detailSponsor(id: string): Promise<Sponsor> {
+  return new Promise((resolve, reject) => {
+    instance.get<APISponsor>(`http://localhost:8888/2024/sponsors/list/${id}/`).then(response => {
+      resolve(Sponsor.fromAPI(response.data));
+    }).catch(error => {
+      console.error(error);
+      reject(getErrorMessage(error));
+    })
+    return;
+  })
+}
+
 export function listSponsorLevels(): Promise<SponsorLevel[]> {
   return new Promise((resolve, reject) => {
-    instance.get<APISponsorLevel[]>("/2024/sponsors/levels").then((response) => {
+    instance.get<APISponsorLevel[]>("http://localhost:8888/2024/sponsors/levels").then((response) => {
       resolve(SponsorLevel.fromAPIs(response.data));
     }).catch((error) => {
       console.error(error);
@@ -19,7 +31,7 @@ export function listSponsorLevels(): Promise<SponsorLevel[]> {
 export function listSponsors(): Promise<Sponsor[]> {
   return new Promise((resolve, reject) => {
     instance
-      .get<APISponsor[]>("/2024/sponsors/list/")
+      .get<APISponsor[]>("http://localhost:8888/2024/sponsors/list/")
       .then((response) => {
         resolve(Sponsor.fromAPIs(response.data));
       })
@@ -32,7 +44,7 @@ export function listSponsors(): Promise<Sponsor[]> {
 export function listSponsorLevelWithSponsor(): Promise<SponsorLevelWithSponsor[]> {
   return new Promise((resolve, reject) => {
     instance
-      .get<APISponsorLevelWithSponsor[]>("/2024/sponsors/levels/with-sponsor/")
+      .get<APISponsorLevelWithSponsor[]>("http://localhost:8888/2024/sponsors/levels/with-sponsor/")
       .then((response) => {
         console.log("debug", response);
         resolve(SponsorLevelWithSponsor.fromAPIs(response.data));
@@ -46,7 +58,7 @@ export function listSponsorLevelWithSponsor(): Promise<SponsorLevelWithSponsor[]
 
 export function listSponsorBenefits(): Promise<SponsorBenefit[]> {
   return new Promise((resolve, reject) => {
-    instance.get<APISponsorBenefit[]>("/2024/sponsors/benefits/").then(response => {
+    instance.get<APISponsorBenefit[]>("http://localhost:8888/2024/sponsors/benefits/").then(response => {
       resolve(SponsorBenefit.fromAPIs(response.data));
     }).catch(error => {
       console.error(error);

src/components/Footer/SponsorList.tsx

@@ -58,6 +58,7 @@ const Vertical = styled.div`
 `;
 
 const SponsorTableList = styled.div`
+  width: 80%;
   & > div + div {
     margin-top: 2rem;
   }

src/components/Footer/SponsorTable.tsx

@@ -1,4 +1,5 @@
 import { Sponsor } from "models/sponsor";
+import { Link } from "react-router-dom";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 
@@ -14,7 +15,9 @@ function SponsorTable({ max, levelName, sponsors, ...rest }: Props) {
       <h3>{levelName}</h3>
       <div style={{ gridTemplateColumns: `repeat(${max}, 1fr)` }}>
         {sponsors.map((sponsor) => (
-          <img src={sponsor.logo_image} alt={sponsor.name} />
+          <Link to={`/sponsoring/sponsor/${sponsor.id}`} relative="path">
+            <img src={sponsor.logo_image} alt={sponsor.name} />
+          </Link>
         ))}
       </div>
     </SponsorCard>
@@ -42,7 +45,6 @@ const SponsorCard = styled.div`
   }
 
   @media only screen and (max-width: 810px) {
-    display: block;
     margin: 1rem;
 
     & > div {

src/models/api/sponsor.ts

@@ -13,6 +13,7 @@ export type APISponsorBenefit = {
   unit: string;
   is_countable: boolean;
   offer: Number;
+  uncountable_offer: string;
 }
 
 export type APISponsorLevel = {

src/models/sponsor.ts

@@ -7,6 +7,7 @@ export class SponsorBenefit {
   offer: Number;
   unit: string;
   is_countable: boolean;
+  uncountable_offer: string;
 
   private constructor(p: SponsorBenefit) {
     this.id = p.id;
@@ -15,6 +16,7 @@ export class SponsorBenefit {
     this.offer = p.offer;
     this.unit = p.unit;
     this.is_countable = p.is_countable;
+    this.uncountable_offer = p.uncountable_offer;
   }
 
   static fromAPI(d: APISponsorBenefit): SponsorBenefit {
@@ -25,6 +27,7 @@ export class SponsorBenefit {
       offer: d.offer,
       unit: d.unit,
       is_countable: d.is_countable,
+      uncountable_offer: d.uncountable_offer,
     });
   }
   static fromAPIs(data: APISponsorBenefit[]): SponsorBenefit[] {

src/pages/Sponsor/SponsorDetail.tsx

@@ -0,0 +1,93 @@
+import { SponsorAPI } from "api";
+import * as R from "remeda";
+import { wrap } from "@suspensive/react";
+import React, { useEffect, useState } from "react";
+import useTranslation from "utils/hooks/useTranslation";
+import { APISponsor } from "models/api/sponsor";
+import { useNavigate, useParams } from "react-router";
+import styled from "styled-components";
+import { useRetrieveSponsorQuery } from "utils/hooks/useAPI";
+
+const SponsorDetail: React.FC<{ sponsor: APISponsor }> = ({ sponsor }) => {
+  return (
+    <Vertical>
+      <H1>{sponsor.name}</H1>
+      <a href={sponsor.url}>
+        <img src={sponsor.logo_image} alt={sponsor.name} />
+      </a>
+      <H3 dangerouslySetInnerHTML={{ __html: sponsor.desc }}></H3>
+    </Vertical>
+  );
+};
+
+const SponsorDetailPage = () => {
+  const t = useTranslation();
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+
+  if (!(R.isString(id) && !R.isEmpty(id))) {
+    navigate("/session");
+    return null;
+  }
+
+  const SponsorDetailWrapper = wrap
+    .ErrorBoundary({ fallback: <h4>{t("후원사 정보를 불러오는 중 에러가 발생했습니다.")}</h4> })
+    .Suspense({ fallback: <h4>{t("후원사 정보를 불러오는 중 입니다.")}</h4> })
+    .on(() => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const { data } = useRetrieveSponsorQuery(id);
+      return <SponsorDetail sponsor={data} />;
+    });
+
+  return (
+    <Container>
+      <SponsorDetailWrapper />
+    </Container>
+  );
+};
+
+export default SponsorDetailPage;
+
+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 H1 = styled.h1`
+  margin-top: 3rem;
+  font-size: 40px;
+  color: #b0a8fe;
+
+  @media only screen and (max-width: 810px) {
+    padding: 0 1rem;
+    font-size: 24px;
+  }
+`;
+
+const H3 = styled.h3`
+  margin-top: 1.5rem;
+  font-size: 24px;
+  color: #b0a8fe;
+
+  @media only screen and (max-width: 810px) {
+    padding: 0 1rem;
+    font-size: 16px;
+  }
+`;

src/pages/Sponsor/SponsorLevelList.tsx

@@ -9,15 +9,24 @@ const SponsorLevelList = () => {
   const [listOfSponsorLevel, setListOfSponsorLevel] = useState<SponsorLevel[][]>([]);
   const [listOfSponsorBenefit, setListOfSponsorBenefit] = useState<SponsorBenefit[]>([]);
 
+  const getBenefitDescription = (benefit: SponsorBenefit | undefined) => {
+    if (benefit === undefined) return "-";
+    if (benefit.is_countable) {
+      return benefit.offer ? `${benefit.offer}${benefit.unit}` : benefit.uncountable_offer;
+    }
+    return benefit.uncountable_offer;
+  };
+
   useEffect(() => {
     SponsorAPI.listSponsorLevels().then((levels) => {
-      if (levels.length > 4) {
-        const half_length = Math.ceil(levels.length / 2);
-        const firstSide = levels.slice(0, half_length);
-        const secondSide = levels.slice(half_length);
+      const onlyVisible = levels.filter((level) => level.visible);
+      if (onlyVisible.length > 4) {
+        const half_length = Math.ceil(onlyVisible.length / 2);
+        const firstSide = onlyVisible.slice(0, half_length);
+        const secondSide = onlyVisible.slice(half_length);
         setListOfSponsorLevel([firstSide, secondSide]);
       } else {
-        setListOfSponsorLevel([levels]);
+        setListOfSponsorLevel([onlyVisible]);
       }
     });
     SponsorAPI.listSponsorBenefits().then((benefits) => {
@@ -47,13 +56,11 @@ const SponsorLevelList = () => {
                         (benefitByLevel) => benefitByLevel.id === benefit.id
                       );
                       return (
-                        <td>
-                          {benefitAboutLevel?.is_countable ? `` : ``}
-                          {benefitAboutLevel?.offer === 0
-                            ? "-"
-                            : benefitAboutLevel?.offer.toString()}
-                          {benefitAboutLevel?.is_countable && benefitAboutLevel?.unit}
-                        </td>
+                        <td
+                          dangerouslySetInnerHTML={{
+                            __html: getBenefitDescription(benefitAboutLevel),
+                          }}
+                        ></td>
                       );
                     })}
                   </tr>
@@ -201,6 +208,11 @@ const SponsorRatingTable = styled.div`
         font-size: 10px;
       }
 
+      & > * {
+        color: #b0a8fe;
+        margin: 0;
+      }
+
       border-bottom: 1px solid #b0a8fe;
       padding: 1rem 0;
       text-align: center;

src/routes.tsx

@@ -1,21 +1,22 @@
-import React from "react"
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+import React from "react";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
-import Footer from "components/Footer"
-import Nav from "components/Nav"
-import { DialogCollection } from "dialogs"
-import Coc from "pages/About/coc"
-import Pyconkr2024 from "pages/About/pyconkr2024"
-import Cfp from "pages/Contribution/cfp"
-import Home from "pages/Home"
-import NotFound from "pages/NotFound"
-import PrivacyPolicy from "pages/PrivacyPolicy"
-import { SessionDetailPage } from "pages/Session/detail"
-import { SessionListPage } from "pages/Session/list"
-import { SessionTimeTablePage } from "pages/Session/timetable"
-import SponsorPage from "pages/Sponsor"
-import TermsOfService from "pages/TermsOfService"
-import Health from "./pages/About/health"
+import Footer from "components/Footer";
+import Nav from "components/Nav";
+import { DialogCollection } from "dialogs";
+import Coc from "pages/About/coc";
+import Pyconkr2024 from "pages/About/pyconkr2024";
+import Cfp from "pages/Contribution/cfp";
+import Home from "pages/Home";
+import NotFound from "pages/NotFound";
+import PrivacyPolicy from "pages/PrivacyPolicy";
+import { SessionDetailPage } from "pages/Session/detail";
+import { SessionListPage } from "pages/Session/list";
+import { SessionTimeTablePage } from "pages/Session/timetable";
+import SponsorPage from "pages/Sponsor";
+import TermsOfService from "pages/TermsOfService";
+import Health from "./pages/About/health";
+import SponsorDetailPage from "pages/Sponsor/SponsorDetail";
 
 const Router = () => {
   return (
@@ -27,6 +28,7 @@ const Router = () => {
         <Route path="/about/coc" element={<Coc />} />
         <Route path="/about/health" element={<Health />} />
         <Route path="/sponsoring/sponsor/prospectus" element={<SponsorPage />} />
+        <Route path="/sponsoring/sponsor/:id" element={<SponsorDetailPage />} />
         <Route path="/session" element={<SessionListPage />} />
         <Route path="/session/:code" element={<SessionDetailPage />} />
         <Route path="/session/timetable" element={<SessionTimeTablePage />} />