Show AdditionalInformationSection on HistoryPage

sogang-icpc-team.github.io-react/src/app/history-page/additional-information-section.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+import { AwardBadge } from "@ui/award-badge/award-badge";
+
+const Bold = styled.span`
+  font-weight: bold;
+`;
+const _AdditionalInformationSection = ({
+  className,
+}: {
+  className?: string;
+}) => {
+  return (
+    <div className={className}>
+      <Bold>#</Bold> = 순위, <Bold>=</Bold> = 푼 문제 수 / 점수
+      <br />
+      <AwardBadge variant="winner" /> = 우승,
+      <AwardBadge variant="gold" /> = 금상,
+      <AwardBadge variant="silver" /> = 은상,
+      <AwardBadge variant="bronze" /> = 동상
+      <br />
+      <AwardBadge variant="special" /> = 기타 수상
+      <br />
+      <AwardBadge variant="advanced" /> = 다음 라운드 진출
+      <br />
+      HM = Honorable Mention
+    </div>
+  );
+};
+
+export const AdditionalInformationSection = styled(
+  _AdditionalInformationSection,
+)`
+  line-height: 1.4rem;
+`;

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

@@ -9,12 +9,13 @@ import { useHistoryDataContext } from "../../contexts/history-data-context";
 import { SelectedHistoryContextProvider } from "./contexts/selected-history-context";
 import { HistoryDisplay } from "./history-display/history-display";
 import constants from "../../contexts/assets/constants";
+import { AdditionalInformationSection } from "./additional-information-section";
 
 const GrayText = styled.div`
   font-size: 0.9rem;
   color: ${({ theme }) => theme.gray[500]};
 
-  margin-top: 8px;
+  margin-top: 24px;
 `;
 const HeroImage = styled.img`
   width: 100%;
@@ -44,6 +45,7 @@ const _HistoryPage = ({ className }: { className?: string }) => {
             </Section.Title>
             <Section.Body>
               <HistoryDisplay />
+              <AdditionalInformationSection />
               <GrayText>
                 *2019년 이전의 기록에는 누락된 정보가 있을 수 있습니다.
                 <br />