refactor(web): convert terms and privacy policy styling from SCSS to CSS-in-JS (vspo-lab#681)

Author: sruenwg

service/vspo-schedule/web/package.json

@@ -43,7 +43,6 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.2",
     "react-tweet": "^3.2.1",
-    "sass": "^1.77.6",
     "sharp": "^0.33.4",
     "swr": "^2.2.5",
     "typescript": "^5.5.2"

service/vspo-schedule/web/pnpm-lock.yaml

@@ -1,4 +1,6 @@
-.container {
+import { styled } from "@mui/material/styles";
+
+export const AgreementDocument = styled("div")(`
   h1 {
     font-size: 2.5rem;
     margin-top: 0;
@@ -35,4 +37,4 @@
       text-decoration: underline;
     }
   }
-}
+`);

service/vspo-schedule/web/src/styles/Terms.module.scss renamed to service/vspo-schedule/web/src/components/Templates/AgreementDocument.tsx

@@ -1,3 +1,4 @@
+export * from "./AgreementDocument";
 export * from "./ClipList";
 export * from "./ClipTabs";
 export * from "./Livestreams";

service/vspo-schedule/web/src/components/Templates/index.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import styles from "@/styles/Terms.module.scss";
 import { NextPageWithLayout } from "./_app";
 import { ContentLayout } from "@/components/Layout/ContentLayout";
+import { AgreementDocument } from "@/components/Templates";
 import { DEFAULT_LOCALE, QA_LINK } from "@/lib/Const";
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -36,7 +36,7 @@ export const getStaticProps: GetStaticProps<Props> = async ({
 
 const PrivacyPolicy: NextPageWithLayout<Props> = () => {
   return (
-    <div className={styles.container}>
+    <AgreementDocument>
       <h1>プライバシーポリシー</h1>
       <p>
         このプライバシーポリシーは，サービス提供者がこのウェブサイト上で提供するサービス（以下，「本サービス」といいます。）のプライバシーポリシー（以下，「本ポリシー」といいます。）を定めます。
@@ -123,7 +123,7 @@ const PrivacyPolicy: NextPageWithLayout<Props> = () => {
         </a>
         までお願いいたします。
       </p>
-    </div>
+    </AgreementDocument>
   );
 };
 

service/vspo-schedule/web/src/pages/privacy-policy.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import styles from "@/styles/Terms.module.scss";
 import { NextPageWithLayout } from "./_app";
 import { ContentLayout } from "@/components/Layout/ContentLayout";
+import { AgreementDocument } from "@/components/Templates";
 import { GetStaticProps } from "next";
 import { DEFAULT_LOCALE } from "@/lib/Const";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -36,7 +36,7 @@ export const getStaticProps: GetStaticProps<Props> = async ({
 
 const Terms: NextPageWithLayout<Props> = () => {
   return (
-    <div className={styles.container}>
+    <AgreementDocument>
       <h1>利用規約</h1>
       <p>
         この利用規約（以下，「本規約」といいます。）は，サービス提供者がこのウェブサイト上で提供するサービス（以下，「本サービス」といいます。）の利用条件を定めます。
@@ -202,7 +202,7 @@ const Terms: NextPageWithLayout<Props> = () => {
       <p>
         本サービスに関して紛争が生じた場合には，サービス提供者の本店所在地を管轄する裁判所を専属的合意管轄とします。
       </p>
-    </div>
+    </AgreementDocument>
   );
 };