♻️ refactor: hoc 패턴 삭제

42Statistics · Aug 7, 2023 · 1094633 · 1094633
1 parent dabd1ff
commit 1094633
Show file tree

Hide file tree

Showing 20 changed files with 307 additions and 344 deletions.
diff --git a/app/index.html b/app/index.html
@@ -6,6 +6,26 @@
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>42Stat</title>
+    <meta
+      name="description"
+      content="42Stat은 42서울의 교육생들을 위한 통계 서비스입니다."
+    />
+    <meta property="og:url" content="https://stat.42seoul.kr" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="42Stat" />
+    <meta property="og:site_name" content="42Stat" />
+    <meta
+      property="og:description"
+      content="42Stat은 42서울의 교육생들을 위한 통계 서비스입니다."
+    />
+    <!-- TODO: og:image 추가 -->
+    <meta property="og:image" content="https://stat.42seoul.kr/og-image.png" />
+    <meta property="twitter:card" content="summary" />
+    <meta property="twitter:title" content="42Stat" />
+    <meta
+      property="twitter:description"
+      content="42Stat은 42서울의 교육생들을 위한 통계 서비스입니다."
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/src/@core/components/Footer/index.tsx b/app/src/@core/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactComponent as GithubLogo } from '@shared/assets/logo/github-logo.svg';
 import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
-import { HStack, Text } from '@shared/ui-kit';
+import { CaptionText, HStack } from '@shared/ui-kit';
 import { Link } from 'react-router-dom';
 
 export const Footer = () => {
@@ -11,14 +11,16 @@ export const Footer = () => {
   return (
     <Layout>
       <HStack spacing="1rem">
-        <Text color={theme.colors.mono.gray300}>©2023. 42Stat</Text>
+        <CaptionText color={theme.colors.mono.gray300}>
+          © 2023. 42Stat.
+        </CaptionText>
         <Link
           to="https://github.com/orgs/42Statistics/repositories"
           target="_blank"
           rel="noreferrer"
           aria-label={ARIA_LABEL_LINK.STAT_GITHUB}
         >
-          <GithubLogo width={24} height={24} fill={theme.colors.mono.gray300} />
+          <GithubLogo width={16} height={16} fill={theme.colors.mono.gray300} />
         </Link>
       </HStack>
     </Layout>
@@ -27,5 +29,5 @@ export const Footer = () => {
 
 const Layout = styled.footer`
   width: 100%;
-  padding: 10rem 2rem 2rem 2rem;
+  padding: 8rem 2rem 2rem 2rem;
 `;
diff --git a/app/src/@shared/components/Seo.tsx b/app/src/@shared/components/Seo.tsx
@@ -13,17 +13,8 @@ export const Seo = ({
     <Helmet>
       <title>{title ? `${title} | 42Stat` : '42Stat'}</title>
       <meta name="description" content={description} />
-      <meta property="og:url" content="https://stat.42seoul.kr" />
-      <meta property="og:type" content="website" />
       <meta property="og:title" content={title} />
-      <meta property="og:site_name" content="42Stat" />
       <meta property="og:description" content={description} />
-      {/* TODO: og:image 추가 */}
-      <meta
-        property="og:image"
-        content="https://stat.42seoul.kr/og-image.png"
-      />
-      <meta property="twitter:card" content="summary" />
       <meta property="twitter:title" content={title} />
       <meta property="twitter:description" content={description} />
     </Helmet>

diff --git a/app/src/@shared/hoc/withFooter.tsx b/app/src/@shared/hoc/withFooter.tsx
diff --git a/app/src/@shared/hoc/withHead.tsx b/app/src/@shared/hoc/withHead.tsx
diff --git a/app/src/Error/404.tsx b/app/src/Error/404.tsx
@@ -4,7 +4,6 @@ import { AppLogoTitle } from '@shared/components/AppLogoTitle';
 import { Seo } from '@shared/components/Seo';
 import { ROUTES } from '@shared/constants/ROUTES';
 import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
-import { withHead } from '@shared/hoc/withHead';
 import {
   Button,
   HStack,
@@ -21,33 +20,30 @@ const NotFoundPage = () => {
   const theme = useTheme();
 
   return (
-    <VStack spacing="6rem">
-      <Link to={ROUTES.ROOT} aria-label={ARIA_LABEL_LINK.STAT}>
-        <AppLogoTitle size="sm" color="white" />
-      </Link>
-      <VStack spacing="2rem">
-        <HStack align="baseline" spacing="1rem">
-          <WhiteH1BoldText>{statusCode}</WhiteH1BoldText>
-          <WhiteBody1Text>{statusText}</WhiteBody1Text>
-        </HStack>
-        <Image width={200} src={dont_panic} alt="" />
+    <>
+      <Seo title={statusText} />
+      <VStack spacing="6rem">
+        <Link to={ROUTES.ROOT} aria-label={ARIA_LABEL_LINK.STAT}>
+          <AppLogoTitle size="sm" color="white" />
+        </Link>
+        <VStack spacing="2rem">
+          <HStack align="baseline" spacing="1rem">
+            <WhiteH1BoldText>{statusCode}</WhiteH1BoldText>
+            <WhiteBody1Text>{statusText}</WhiteBody1Text>
+          </HStack>
+          <Image width={200} src={dont_panic} alt="" />
+        </VStack>
+        <Link to={ROUTES.ROOT}>
+          <Button
+            backgroundColor={theme.colors.mono.white}
+            color={theme.colors.mono.black}
+          >
+            홈으로 돌아가기
+          </Button>
+        </Link>
       </VStack>
-      <Link to={ROUTES.ROOT}>
-        <Button
-          backgroundColor={theme.colors.mono.white}
-          color={theme.colors.mono.black}
-        >
-          홈으로 돌아가기
-        </Button>
-      </Link>
-    </VStack>
+    </>
   );
 };
 
-const Head = () => {
-  const statusText = 'Not Found';
-
-  return <Seo title={statusText} />;
-};
-
-export default withHead(NotFoundPage, Head);
+export default NotFoundPage;
diff --git a/app/src/EvalLogSearch/index.tsx b/app/src/EvalLogSearch/index.tsx
@@ -6,7 +6,6 @@ import {
   GetEvalLogsQuery,
 } from '@shared/__generated__/graphql';
 import { Seo } from '@shared/components/Seo';
-import { withHead } from '@shared/hoc/withHead';
 import { useDisclosure } from '@shared/hooks/useDisclosure';
 import { useInfiniteScroll } from '@shared/hooks/useInfiniteScroll';
 import type { EvalLogSearchModel } from '@shared/types/EvalLogSearchModel';
@@ -174,6 +173,7 @@ const EvalLogSearchPage = () => {
 
   return (
     <>
+      <Seo title="평가로그 검색기" />
       <VStack w="100%" align="start" spacing="2rem">
         <EvalLogSearchTitle
           form={evalLogSearchForm}
@@ -202,9 +202,7 @@ const EvalLogSearchPage = () => {
   );
 };
 
-const Head = () => {
-  return <Seo title="평가로그 검색기" />;
-};
+export default EvalLogSearchPage;
 
 const calculateTotalCount = ({
   data,
@@ -224,5 +222,3 @@ const calculateTotalCount = ({
 
   return data?.getEvalLogs.pageInfo.totalCount ?? 0;
 };
-
-export default withHead(EvalLogSearchPage, Head);
diff --git a/app/src/FtOAuth/index.tsx b/app/src/FtOAuth/index.tsx
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { AppLogoTitle } from '@shared/components/AppLogoTitle';
 import { FtLoginButton } from '@shared/components/LoginButton';
 import { ROUTES } from '@shared/constants/ROUTES';
-import { withHead } from '@shared/hoc/withHead';
 import { VStack, WhiteText } from '@shared/ui-kit';
 import { mq } from '@shared/utils/facepaint/mq';
 import { Link } from 'react-router-dom';
@@ -37,4 +36,4 @@ const Layout = styled.div`
   border-radius: ${({ theme }) => theme.radius.md};
 `;
 
-export default withHead(FtOAuthPage);
+export default FtOAuthPage;
diff --git a/app/src/Home/index.tsx b/app/src/Home/index.tsx
@@ -1,7 +1,6 @@
+import { Footer } from '@core/components/Footer';
 import { Dashboard } from '@shared/components/Dashboard';
 import { Seo } from '@shared/components/Seo';
-import { withFooter } from '@shared/hoc/withFooter';
-import { withHead } from '@shared/hoc/withHead';
 import { H2BoldText, VStack } from '@shared/ui-kit';
 import { Hero } from './components/Hero';
 import { homeCircleDashboardRows } from './dashboard-frames/homeCircleDashboardRows';
@@ -12,44 +11,44 @@ import { homeStatusDashboardRows } from './dashboard-frames/homeStatusDashboardR
 
 const HomePage = () => {
   return (
-    <VStack w="100%" align="start" spacing="4rem">
-      <Hero />
-      <VStack w="100%" align="start" spacing="6rem">
-        <VStack w="100%" align="start" spacing="2rem">
-          <H2BoldText>✨ 현재 여행 현황</H2BoldText>
-          <Dashboard
-            contents={homePageDashboardContents}
-            rows={homeStatusDashboardRows}
-          />
-        </VStack>
-        <VStack w="100%" align="start" spacing="2rem">
-          <H2BoldText>🚀 이너서클 · 멤버 관련 통계</H2BoldText>
-          <Dashboard
-            contents={homePageDashboardContents}
-            rows={homeCircleDashboardRows}
-          />
-        </VStack>
-        <VStack w="100%" align="start" spacing="2rem">
-          <H2BoldText>🏅 역대 기록</H2BoldText>
-          <Dashboard
-            contents={homePageDashboardContents}
-            rows={homeRecordDashboardRows}
-          />
-        </VStack>
-        <VStack w="100%" align="start" spacing="2rem">
-          <H2BoldText>🥊 코알리숑 비교</H2BoldText>
-          <Dashboard
-            contents={homePageDashboardContents}
-            rows={homeCoalitionDashboardRows}
-          />
+    <>
+      <Seo title="홈" />
+      <VStack w="100%" align="start" spacing="4rem">
+        <Hero />
+        <VStack w="100%" align="start" spacing="6rem">
+          <VStack w="100%" align="start" spacing="2rem">
+            <H2BoldText>✨ 현재 여행 현황</H2BoldText>
+            <Dashboard
+              contents={homePageDashboardContents}
+              rows={homeStatusDashboardRows}
+            />
+          </VStack>
+          <VStack w="100%" align="start" spacing="2rem">
+            <H2BoldText>🚀 이너서클 · 멤버 관련 통계</H2BoldText>
+            <Dashboard
+              contents={homePageDashboardContents}
+              rows={homeCircleDashboardRows}
+            />
+          </VStack>
+          <VStack w="100%" align="start" spacing="2rem">
+            <H2BoldText>🏅 역대 기록</H2BoldText>
+            <Dashboard
+              contents={homePageDashboardContents}
+              rows={homeRecordDashboardRows}
+            />
+          </VStack>
+          <VStack w="100%" align="start" spacing="2rem">
+            <H2BoldText>🥊 코알리숑 비교</H2BoldText>
+            <Dashboard
+              contents={homePageDashboardContents}
+              rows={homeCoalitionDashboardRows}
+            />
+          </VStack>
         </VStack>
       </VStack>
-    </VStack>
+      <Footer />
+    </>
   );
 };
 
-const Head = () => {
-  return <Seo title="홈" />;
-};
-
-export default withHead(withFooter(HomePage), Head);
+export default HomePage;
diff --git a/app/src/Landing/index.tsx b/app/src/Landing/index.tsx
@@ -7,7 +7,6 @@ import {
   GoogleLoginButton,
 } from '@shared/components/LoginButton';
 import { ARIA_LABEL_LINK } from '@shared/constants/accessibility/ARIA_LABEL';
-import { withHead } from '@shared/hoc/withHead';
 import { HStack, Image, VStack } from '@shared/ui-kit';
 import { mq } from '@shared/utils/facepaint/mq';
 import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType';
@@ -49,4 +48,4 @@ const LoginButtonContainer = styled.div`
   })}
 `;
 
-export default withHead(LandingPage);
+export default LandingPage;
diff --git a/app/src/Leaderboard/pages/CoalitionScore/index.tsx b/app/src/Leaderboard/pages/CoalitionScore/index.tsx
@@ -1,12 +1,11 @@
 import { QUERY_STRING_KEY } from '@/Leaderboard/constants/QUERY_STRING_KEY';
 import { parseDateTemplate } from '@/Leaderboard/utils/parseDateTemplate';
 import { useLazyQuery } from '@apollo/client';
+import { Footer } from '@core/components/Footer';
 import { gql } from '@shared/__generated__';
 import { DateTemplate } from '@shared/__generated__/graphql';
 import { Pagination } from '@shared/components/Pagination';
 import { Seo } from '@shared/components/Seo';
-import { withFooter } from '@shared/hoc/withFooter';
-import { withHead } from '@shared/hoc/withHead';
 import { useSegmentedControl } from '@shared/hooks/useSegmentedControl';
 import { SegmentedControl, VStack } from '@shared/ui-kit';
 import { useDeviceType } from '@shared/utils/react-responsive/useDeviceType';
@@ -132,26 +131,26 @@ const LeaderboardCoalitionScorePage = () => {
   }, [dateTemplate, search, pageNumber]);
 
   return (
-    <VStack w="100%" spacing="6rem">
-      <SegmentedControl
-        index={segmentIndex}
-        onIndexChange={handleSegmentedControlChange}
-        controlRef={controlRef}
-        segments={segments}
-      />
-      <LeaderboardCoalitionScorePageResult result={result} />
-      <Pagination
-        currPageNumber={pageNumber}
-        onPageNumberChange={handlePageNumberChange}
-        totalPageNumber={Math.ceil(totalPage / SIZE_PER_PAGE)}
-        pagePerRow={device === 'mobile' ? 5 : 10}
-      />
-    </VStack>
+    <>
+      <Seo title="랭킹 › 코알리숑 스코어" />
+      <VStack w="100%" spacing="6rem">
+        <SegmentedControl
+          index={segmentIndex}
+          onIndexChange={handleSegmentedControlChange}
+          controlRef={controlRef}
+          segments={segments}
+        />
+        <LeaderboardCoalitionScorePageResult result={result} />
+        <Pagination
+          currPageNumber={pageNumber}
+          onPageNumberChange={handlePageNumberChange}
+          totalPageNumber={Math.ceil(totalPage / SIZE_PER_PAGE)}
+          pagePerRow={device === 'mobile' ? 5 : 10}
+        />
+      </VStack>
+      <Footer />
+    </>
   );
 };
 
-const Head = () => {
-  return <Seo title="랭킹 › 코알리숑 스코어" />;
-};
-
-export default withHead(withFooter(LeaderboardCoalitionScorePage), Head);
+export default LeaderboardCoalitionScorePage;