Implement contest history section on SpcPage

sogang-icpc-team.github.io-react/src/app/spc-page/contexts/selected-spc-history-context.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import {
+  TSpcData,
+  useSpcDataContext,
+} from "../../../contexts/spc-data-context";
+
+export type TSelectedSpcHistoryContext = {
+  year: number;
+  setYear: React.Dispatch<React.SetStateAction<number>>;
+  data: TSpcData["all"][number];
+};
+const SelectedSpcHistoryContext = createContext<TSelectedSpcHistoryContext>(
+  null as any,
+);
+
+export const useSelectedSpcHistoryContext = () =>
+  useContext(SelectedSpcHistoryContext);
+
+export const SelectedSpcHistoryContextProvider = ({
+  initialValue,
+  children,
+}: {
+  initialValue: Pick<TSelectedSpcHistoryContext, "year">;
+  children: React.ReactNode;
+}) => {
+  const { all: spcDataset } = useSpcDataContext();
+
+  const [year, setYear] = useState(initialValue.year);
+  const [data, setData] = useState(spcDataset.find((d) => d.year === year));
+
+  useEffect(() => {
+    setData(spcDataset.find((d) => d.year === year));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [year]);
+
+  if (!data) {
+    throw new Error(
+      `[ERROR] History data for the year(${year}) does not exist.`,
+    );
+  }
+
+  return (
+    <SelectedSpcHistoryContext.Provider
+      value={{ year, setYear, data }}
+      children={children}
+    />
+  );
+};

sogang-icpc-team.github.io-react/src/app/spc-page/spc-contest-history-display.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+import { Section } from "@ui/section/section";
+import { TAwardBadgeVariant } from "@ui/award-badge/award-badge";
+import { AwardTable } from "@ui/award/award-table";
+import { LinksAndReviews } from "@ui/award/links-and-reviews";
+import { MedalIconDescriptions } from "@ui/award/medal-icon-descriptions";
+
+import { useSelectedSpcHistoryContext } from "./contexts/selected-spc-history-context";
+
+const _SpcContestHistoryDisplay = ({ className }: { className?: string }) => {
+  const selectedHistory = useSelectedSpcHistoryContext();
+
+  const showMedalIconDescriptions = selectedHistory.data.contests.length > 0;
+
+  return (
+    <div className={className}>
+      {selectedHistory.data.contests.map(
+        ({ title, columns, data, award, links }) => (
+          <Section key={title}>
+            <Section.Title>{title}</Section.Title>
+            <Section.Body>
+              <AwardTable
+                columns={columns}
+                data={data}
+                award={award as unknown as TAwardBadgeVariant[]}
+              />
+              <LinksAndReviews links={links} review={[]} />
+            </Section.Body>
+          </Section>
+        ),
+      )}
+      {showMedalIconDescriptions && <MedalIconDescriptions />}
+    </div>
+  );
+};
+export const SpcContestHistoryDisplay = styled(_SpcContestHistoryDisplay)``;

sogang-icpc-team.github.io-react/src/app/spc-page/spc-page.tsx

@@ -5,10 +5,37 @@ import { Section } from "@ui/section/section";
 import { OpenInANewTab } from "@ui/open-in-a-new-tab";
 import { List } from "@ui/list/list";
 import { Table } from "@ui/table/table";
+import { YearSelectorDropdown } from "@ui/dropdown/year-selector-dropdown";
 
 import SpcPostersImage from "./assets/spc-posters.jpg";
 import Spc2019Image from "./assets/spc2019.jpg";
+import {
+  SelectedSpcHistoryContextProvider,
+  useSelectedSpcHistoryContext,
+} from "./contexts/selected-spc-history-context";
+import { useSpcDataContext } from "../../contexts/spc-data-context";
+import { SpcContestHistoryDisplay } from "./spc-contest-history-display";
+import constants from "../../contexts/assets/constants";
+import { SpcSummary } from "./spc-summary";
 
+const YearDropdown = () => {
+  const { year, setYear } = useSelectedSpcHistoryContext();
+  const spcData = useSpcDataContext();
+  return (
+    <YearSelectorDropdown
+      year={year}
+      setYear={setYear}
+      items={spcData.years.reverse().map((y) => ({ label: y, value: y }))}
+    />
+  );
+};
+
+const GrayText = styled.div`
+  font-size: 0.9rem;
+  color: ${({ theme }) => theme.gray[500]};
+
+  margin-top: 24px;
+`;
 const CorrectText = styled.span`
   font-weight: bold;
   color: #009874;
@@ -198,8 +225,32 @@ const _SpcPage = ({ className }: { className?: string }) => {
           </Section.Body>
         </Section>
         <HeroImage src={SpcPostersImage} alt="SPC Posters" />
+        <SelectedSpcHistoryContextProvider initialValue={{ year: 2023 }}>
+          <Section>
+            <Section.Title>
+              <span>연도별 대회 기록</span>
+              <YearDropdown />
+            </Section.Title>
+            <Section.Body>
+              <SpcSummary />
+              <SpcContestHistoryDisplay />
+              <GrayText>
+                *2019년 이전의 기록에는 누락된 정보가 있을 수 있습니다.
+                <br />
+                *정보 등록 및 수정 요청은 {constants.emailAddress}로 메일
+                부탁드립니다.
+              </GrayText>
+            </Section.Body>
+          </Section>
+        </SelectedSpcHistoryContextProvider>
       </Page.Body>
     </Page>
   );
 };
-export const SpcPage = styled(_SpcPage)``;
+export const SpcPage = styled(_SpcPage)`
+  ${Section.Title} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;

sogang-icpc-team.github.io-react/src/app/spc-page/spc-summary.tsx

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+
+import { OpenInANewTabButton } from "@ui/button/open-in-a-new-tab-button";
+import { FlexRow } from "@ui/flex/flex";
+
+import { useSelectedSpcHistoryContext } from "./contexts/selected-spc-history-context";
+
+const Bold = styled.span`
+  font-weight: bold;
+`;
+/**
+ * TODO: Improve styles
+ */
+export const SpcSummary = () => {
+  const {
+    data: { edition, date, time, location, authors, links },
+  } = useSelectedSpcHistoryContext();
+  return (
+    <p>
+      <Bold>{edition} Sogang Programming Contest</Bold>
+      <br />
+      {date} {time}
+      <br />
+      {location}
+      <br />
+      {authors.length > 0 && `출제 - ${authors.join(", ")}`}
+      <FlexRow alignItems="center" columnGap="8px" style={{ marginTop: 12 }}>
+        {links.problems.workbookBOJ ? (
+          <>
+            <OpenInANewTabButton
+              href={links.problems.workbookBOJ.Challenger}
+              children="BOJ 문제 (Challenger)"
+            />
+            <OpenInANewTabButton
+              href={links.problems.workbookBOJ.Champion}
+              children="BOJ 문제 (Champion)"
+            />
+          </>
+        ) : null}
+        {links.scoreboards ? (
+          <>
+            <OpenInANewTabButton
+              href={links.scoreboards.Master}
+              children="스코어보드 (Master)"
+            />
+            <OpenInANewTabButton
+              href={links.scoreboards.Champion}
+              children="스코어보드 (Champion)"
+            />
+          </>
+        ) : null}
+        {links.problems.BOJ ? (
+          <OpenInANewTabButton
+            href={links.problems.BOJ}
+            children="문제 (BOJ)"
+          />
+        ) : null}
+        {links.problems.PDF ? (
+          <>
+            <OpenInANewTabButton
+              href={links.problems.PDF.Master}
+              children="문제 (PDF)"
+            />
+            <OpenInANewTabButton
+              href={links.problems.PDF.Champion}
+              children="문제 (PDF)"
+            />
+          </>
+        ) : null}
+        {links.solutions ? (
+          <OpenInANewTabButton
+            href={links.solutions.PDF}
+            children="해설 (PDF)"
+          />
+        ) : null}
+      </FlexRow>
+    </p>
+  );
+};

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2011.ts

@@ -1,12 +1,14 @@
 export default {
   year: 2011,
   edition: "제 7회",
+  date: "",
+  time: "",
+  location: "",
   links: {
     problems: {
-      BOJ: {
-        Challenger: "https://www.acmicpc.net/workbook/view/24",
-        Champion: "https://www.acmicpc.net/workbook/view/25",
-      },
+      BOJ: null,
     },
   },
+  authors: [],
+  contests: [],
 };

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2012.ts

@@ -6,10 +6,9 @@ export default {
   location: "리치과학관 R912 / R914",
   links: {
     problems: {
-      BOJ: {
-        Challenger: "https://www.acmicpc.net/workbook/view/33",
-        Champion: "https://www.acmicpc.net/workbook/view/34",
-      },
+      BOJ: null,
     },
   },
+  authors: [],
+  contests: [],
 };

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2013.ts

@@ -6,10 +6,12 @@ export default {
   location: "김대건관 K512 / 리치과학관 R914",
   links: {
     problems: {
-      BOJ: {
+      workbookBOJ: {
         Challenger: "https://www.acmicpc.net/workbook/view/75",
         Champion: "https://www.acmicpc.net/workbook/view/77",
       },
     },
   },
+  authors: [],
+  contests: [],
 };

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2014.ts

@@ -10,10 +10,9 @@ export default {
       Champion: "https://www.acmicpc.net/contest/scoreboard/75",
     },
     problems: {
-      BOJ: {
-        Master: "https://www.acmicpc.net/category/detail/1299",
-        Champion: "https://www.acmicpc.net/category/detail/1300",
-      },
+      BOJ: "https://www.acmicpc.net/category/detail/1299",
     },
   },
+  authors: [],
+  contests: [],
 };

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2015.ts

@@ -5,17 +5,11 @@ export default {
   time: "오후 7시 ~ 10시",
   location: "리치과학관 R912 / R914",
   links: {
-    scoreboards: {
-      Master: "https://www.acmicpc.net/contest/board/141",
-      Champion: "https://www.acmicpc.net/contest/board/142",
-    },
     problems: {
-      BOJ: {
-        Master: "https://www.acmicpc.net/category/detail/1420",
-        Champion: "https://www.acmicpc.net/category/detail/1421",
-      },
+      BOJ: "https://www.acmicpc.net/category/detail/1420",
     },
   },
+  authors: [],
   contests: [
     {
       title: "SPC 2015 Master",
@@ -29,7 +23,7 @@ export default {
         ["6", "3", "이아현"],
       ],
       award: ["gold", "silver", "silver", "bronze", "bronze", "bronze"],
-      links: [],
+      links: [["스코어보드", "https://www.acmicpc.net/contest/board/141"]],
     },
     {
       title: "SPC 2015 Champion",
@@ -52,7 +46,7 @@ export default {
         "bronze",
         "bronze",
       ],
-      links: [],
+      links: [["스코어보드", "https://www.acmicpc.net/contest/board/142"]],
     },
   ],
 };

sogang-icpc-team.github.io-react/src/contexts/assets/spc-data/2016.ts

@@ -5,17 +5,11 @@ export default {
   time: "오후 7시 ~ 10시",
   location: "리치과학관 R912 / R914",
   links: {
-    scoreboards: {
-      Master: "https://www.acmicpc.net/contest/board/204",
-      Champion: "https://www.acmicpc.net/contest/board/203",
-    },
     problems: {
-      BOJ: {
-        Master: "https://www.acmicpc.net/category/detail/1577",
-        Champion: "https://www.acmicpc.net/category/detail/1576",
-      },
+      BOJ: "https://www.acmicpc.net/category/detail/1577",
     },
   },
+  authors: [],
   contests: [
     {
       title: "제 12회 총장배 서강대학교 프로그래밍 대회 Master",
@@ -29,7 +23,7 @@ export default {
         ["6", "3", "민지우"],
       ],
       award: ["gold", "silver", "silver", "bronze", "bronze", "bronze"],
-      links: [],
+      links: [["스코어보드", "https://www.acmicpc.net/contest/board/204"]],
     },
     {
       title: "제 12회 총장배 서강대학교 프로그래밍 대회 Champion",
@@ -52,7 +46,7 @@ export default {
         "bronze",
         "bronze",
       ],
-      links: [],
+      links: [["스코어보드", "https://www.acmicpc.net/contest/board/203"]],
     },
   ],
 };