Improve styles of HistoryDisplay

sogang-icpc-team · Sep 17, 2024 · 0194c1f · 0194c1f
1 parent 73f2403
commit 0194c1f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/sogang-icpc-team.github.io-react/src/app/history-page/history-display.tsx b/sogang-icpc-team.github.io-react/src/app/history-page/history-display.tsx
@@ -7,26 +7,21 @@ import { OpenInANewTab } from "@ui/open-in-a-new-tab";
 
 import { useSelectedHistoryContext } from "./contexts/selected-history-context";
 
-const TableWrapper = styled.div`
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
 const LinksWrapper = styled.ul`
   margin-top: 16px;
 `;
 
-const _HistoryDisplay = () => {
+const _HistoryDisplay = ({ className }: { className?: string }) => {
   const selectedHistory = useSelectedHistoryContext();
 
   return (
-    <div>
+    <div className={className}>
       {selectedHistory.data.contests.map(
         ({ title, columns, data, award, links }) => (
           <Section key={title}>
             <Section.Title>{title}</Section.Title>
             <Section.Body>
-              <TableWrapper>
+              <Table.Wrapper>
                 <Table>
                   <Table.Header>
                     <Table.Row>
@@ -60,7 +55,7 @@ const _HistoryDisplay = () => {
                     ))}
                   </Table.Body>
                 </Table>
-              </TableWrapper>
+              </Table.Wrapper>
               <LinksWrapper>
                 {links?.map((link) => {
                   return (
@@ -78,4 +73,8 @@ const _HistoryDisplay = () => {
     </div>
   );
 };
-export const HistoryDisplay = styled(_HistoryDisplay)``;
+export const HistoryDisplay = styled(_HistoryDisplay)`
+  ${Section.Title} {
+    font-size: 1.2rem !important;
+  }
+`;
diff --git a/sogang-icpc-team.github.io-react/src/app/history-page/history-page.tsx b/sogang-icpc-team.github.io-react/src/app/history-page/history-page.tsx
@@ -29,29 +29,41 @@ const _HistoryPage = ({ className }: { className?: string }) => {
       </Page.Title>
       <Page.Body>
         <HeroImage src={ScoreboardImage} alt="scoreboard" />
-        <Section>
-          <Section.Body>
-            <SelectedHistoryContextProvider
-              historyDataset={historyData.all}
-              initialValue={{ year: 2024 }}
-            >
+        <SelectedHistoryContextProvider
+          historyDataset={historyData.all}
+          initialValue={{ year: 2024 }}
+        >
+          <Section>
+            <Section.Title>
+              <span>연도별 대회 기록</span>
               <HistoryTab
                 items={historyData.years
                   .reverse()
                   .map((y) => ({ label: y, value: y }))}
               />
+            </Section.Title>
+            <Section.Body>
               <HistoryDisplay />
               <GrayText>
                 *2019년 이전의 기록에는 누락된 정보가 있을 수 있습니다.
                 <br />
                 *정보 등록 및 수정 요청은 {constants.emailAddress}로 메일
                 부탁드립니다.
               </GrayText>
-            </SelectedHistoryContextProvider>
-          </Section.Body>
-        </Section>
+            </Section.Body>
+          </Section>
+        </SelectedHistoryContextProvider>
       </Page.Body>
     </Page>
   );
 };
-export const HistoryPage = styled(_HistoryPage)``;
+
+export const HistoryPage = styled(_HistoryPage)`
+  ${Section.Title} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    gap: 18px;
+  }
+`;
diff --git a/sogang-icpc-team.github.io-react/src/app/history-page/history-tab.tsx b/sogang-icpc-team.github.io-react/src/app/history-page/history-tab.tsx
@@ -41,8 +41,8 @@ const DropdownTriggerButton = styled(EmptyButton)`
   padding: 0.2rem 1rem;
 
   border-radius: 12px;
-  background-color: #535353;
-  color: white;
+  background-color: #0000000f;
+  color: #535353;
 
   font-size: 1.6rem;
   letter-spacing: -1px;
@@ -76,7 +76,7 @@ const _HistoryTab = ({
   const { year, setYear } = useSelectedHistoryContext();
 
   return (
-    <ul className={className}>
+    <div className={className}>
       <DropdownStyles />
       <Dropdown
         overlayClassName={DROPDOWN_CLASSNAME}
@@ -100,7 +100,7 @@ const _HistoryTab = ({
           </DropdownTriggerButton>
         }
       />
-    </ul>
+    </div>
   );
 };