Move using react helmet to page component

src/components/common/Page/index.tsx

@@ -1,8 +1,14 @@
 import React from "react";
 import "./style.scss";
+import { Helmet } from "react-helmet";
 
-const Page = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
- return <div className="cm-page">{children}</div>;
+const Page = ({ children, title }: React.HTMLAttributes<HTMLDivElement> & { title?: string }) => {
+ return (
+ <div className="cm-page">
+ <Helmet title={!title ? "파이콘 한국 2024" : `파이콘 한국 2024 | ${title}`} />
+ {children}
+ </div>
+ );
 };
 
 export default Page;

src/pages/PrivacyPolicy/index.tsx

@@ -12,7 +12,7 @@ const PrivacyPolicy = () => {
 
  if (language === "KOR")
  return (
- <Page>
+ <Page title="개인 정보 처리 방침">
  <h1>개인 정보 처리 방침</h1>
  <h2>0. 개인 정보 처리 방침이란?</h2>
  <p>
@@ -105,7 +105,7 @@ const PrivacyPolicy = () => {
  );
  else
  return (
- <Page>
+ <Page title="Privacy Policy">
  <h1>Privacy Protection Policy</h1>
  <h2>0. What is Privacy Protection Policy?</h2>
  <p>

src/pages/TermsOfService/index.tsx

@@ -12,7 +12,7 @@ const TermsOfService = () => {
 
  if (language === "KOR")
  return (
- <Page>
+ <Page title="이용 약관">
  <h1>이용 약관</h1>
  <h2>0. 목적</h2>
  <p>
@@ -157,7 +157,7 @@ const TermsOfService = () => {
  );
  else
  return (
- <Page>
+ <Page title="Terms of Service">
  <h1>Terms of Service</h1>
  <h2>0. Purpose</h2>
  <p>

src/pages/Ticket/buy.tsx

@@ -1,7 +1,6 @@
 import Page from "components/common/Page";
 import React, { useState } from "react";
 import styled from "styled-components";
-import { Helmet } from "react-helmet";
 import { tickets } from "./tickets";
 import Dialog from "components/common/Dialog";
 import { Link } from "react-router-dom";
@@ -51,8 +50,7 @@ const BuyTicket = ({ onPaymentCompleted }: Props) => {
  };
 
  return (
- <Page>
- <Helmet title="티켓 구매" />
+ <Page title="티켓 구매">
  <Container>
  <Dialog
  header={dialogHeader}

src/pages/Ticket/paymentList.tsx

@@ -8,7 +8,7 @@ const PaymentList = () => {
  }, []);
 
  return (
- <Page>
+ <Page title="티켓 구매">
  <h1>구매 내역</h1>
  </Page>
  );

src/pages/Ticket/paymentResult.tsx

@@ -7,7 +7,7 @@ const PaymentResult = () => {
  TicketAPI.listPayments();
  }, []);
 
- return <Page>구매가 완료되었습니다. 감사합니다.</Page>;
+ return <Page title="티켓 구매">구매가 완료되었습니다. 감사합니다.</Page>;
 };
 
 export default PaymentResult;