Feat/td119 separate privacy policy and terms

src/app/privacy-policy/page.tsx

@@ -23,54 +23,39 @@ const PrivacyPolicyPage = () => {
       <Container as="main" center paddingX="200" paddingY="400" size="100">
         <H2>Privacy Policy</H2>
         <P color="secondary" size="50">
-          Effective as of February 19, 2023
+          Last Updated: 2024/08/31
         </P>
         <Spacer y="300" />
 
         <Col gap="300">
           <section>
-            <H3>アクセス解析ツールについて</H3>
+            <H3>1. アクセス解析ツールについて</H3>
             <Spacer y="100" />
             <P>
-              当ブログでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
-              このGoogleアナリティクスはトラフィックデータの収集のためにクッキー（Cookie）を使用しております。
-              トラフィックデータは匿名で収集されており、個人を特定するものではありません。
-              この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関して、詳しくは
+              当サイトでは、Google によるアクセス解析ツール「Google
+              アナリティクス」を使用しています。この Google
+              アナリティクスはデータの収集のために Cookie
+              を使用しています。このデータは匿名で収集されており、個人を特定するものではありません。
+              この機能は Cookie
+              を無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。この規約に関しての詳細は
               <Link
                 colored
-                href="https://policies.google.com/technologies/partner-sites"
+                href="https://marketingplatform.google.com/about/analytics/terms/jp/"
               >
-                こちら
+                Google アナリティクスサービス利用規約
               </Link>
-              をクリックしてください。
-            </P>
-          </section>
-          <section>
-            <H3>免責事項</H3>
-            <Spacer y="100" />
-            <P>
-              当ブログからのリンクやバナーなどで移動したサイトで提供される情報、
-              サービス等について一切の責任を負いません。
-            </P>
-            <P>
-              また当ブログのコンテンツ・情報について、
-              できる限り正確な情報を提供するように努めておりますが、
-              正確性や安全性を保証するものではありません。情報が古くなっていることもございます。
-              当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
-            </P>
-          </section>
-          <section>
-            <H3>著作権・肖像権</H3>
-            <Spacer y="100" />
-            <P>
-              当サイトの記事について、著作権は放棄しておりません。当サイトに存在する、文章・画像・動画等の著作物の情報を無断転載することを禁止します。
-            </P>
-            <P>
-              また、当サイトは著作権の侵害を目的とするものではありません。使用している版権物の知的所有権はそれぞれの著作者・団体に帰属しております。著作権や肖像権に関して問題がありましたら御連絡下さい。著作権所有者様からの警告及び修正・撤去のご連絡があった場合は迅速に対処または削除致します。
+              のページや
+              <Link
+                colored
+                href="https://policies.google.com/technologies/ads?hl=ja"
+              >
+                Google ポリシーと規約ページ
+              </Link>
+              をご覧ください。
             </P>
           </section>
           <section>
-            <H3>本プライバシーポリシーの変更</H3>
+            <H3>2. 本プライバシーポリシーの変更</H3>
             <Spacer y="100" />
             <P>
               当サイトは、本プライバシーポリシーの内容を適宜見直し、その改善に努めます。

src/app/terms/page.tsx

@@ -0,0 +1,95 @@
+import type { Metadata } from "next";
+
+import { HeaderFooterTemplate } from "@/components/HeaderFooterTemplate";
+import { formatPageTitle } from "@/config/pageTitle";
+import { Col, Container, Spacer } from "@/design-system/layout";
+import { H2, H3, P } from "@/design-system/ui";
+import { List } from "@/design-system/ui/List";
+
+export const metadata: Metadata = {
+  title: formatPageTitle("Privacy Policy"),
+  robots: {
+    index: false,
+  },
+  openGraph: {
+    type: "website",
+    images: "/logo.png",
+    url: `/privacy-policy`,
+  },
+};
+
+const PrivacyPolicyPage = () => {
+  return (
+    <HeaderFooterTemplate>
+      <Container as="main" center paddingX="200" paddingY="400" size="100">
+        <H2>Terms of Use</H2>
+        <P color="secondary" size="50">
+          Last Updated: 2024/08/31
+        </P>
+        <Spacer y="300" />
+
+        <Col gap="300">
+          <section>
+            <H3>1. サービスの利用</H3>
+            <Spacer y="100" />
+            <P>
+              本サイトを利用するにあたり、ユーザーは以下の事項に同意するものとします：
+            </P>
+            <List>
+              <List.Item>本サイトの利用は自己責任で行うこと</List.Item>
+              <List.Item>不正アクセスや不正利用を行わないこと</List.Item>
+              <List.Item>他のユーザーの権利を侵害しないこと</List.Item>
+            </List>
+          </section>
+          <section>
+            <H3>2. 禁止事項</H3>
+            <Spacer y="100" />
+            <P>ユーザーは以下の行為を行ってはいけません：</P>
+            <List>
+              <List.Item>違法行為や公序良俗に反する行為</List.Item>
+              <List.Item>サービスの運営を妨害する行為</List.Item>
+            </List>
+          </section>
+          <section>
+            <H3>3. 免責事項</H3>
+            <Spacer y="100" />
+            <P>
+              当ブログからのリンクやバナーなどで移動したサイトで提供される情報、
+              サービス等について一切の責任を負いません。
+            </P>
+            <P>
+              また当ブログのコンテンツ・情報について、
+              できる限り正確な情報を提供するように努めておりますが、
+              正確性や安全性を保証するものではありません。情報が古くなっていることもございます。
+              当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
+            </P>
+          </section>
+          <section>
+            <H3>4. 著作権・肖像権</H3>
+            <Spacer y="100" />
+            <P>
+              当サイトの記事について、著作権は放棄しておりません。当サイトに存在する、文章・画像・動画等の著作物の情報を無断転載することを禁止します。
+            </P>
+            <P>
+              また、当サイトは著作権の侵害を目的とするものではありません。使用している版権物の知的所有権はそれぞれの著作者・団体に帰属しております。著作権や肖像権に関して問題がありましたら御連絡下さい。著作権所有者様からの警告及び修正・撤去のご連絡があった場合は迅速に対処または削除致します。
+            </P>
+          </section>
+          <section>
+            <H3>5. 利用規約の変更</H3>
+            <Spacer y="100" />
+            <P>
+              当サイトは、本利用規約の内容を適宜見直し、その改善に努めます。本利用規約は、事前の予告なく変更することがあります。本利用規約の変更は、当サイトに掲載された時点で有効になるものとします。
+            </P>
+          </section>
+          <section>
+            <H3>6. 準拠法と管轄裁判所</H3>
+            <Spacer y="100" />
+            <P>本規約の解釈および適用は、日本法に準拠するものとします。</P>
+          </section>
+        </Col>
+      </Container>
+    </HeaderFooterTemplate>
+  );
+};
+
+export default PrivacyPolicyPage;

src/components/HeaderFooterTemplate/Footer/Footer.tsx

@@ -11,12 +11,12 @@ export const Footer: React.FC = () => {
         paddingX="200"
         size="200"
       >
-        <Row align="center" justify="spaceBetween">
+        <Row align="center" justify="spaceBetween" wrap>
           <Text as="span" color="secondary">
             © 2021 syakoo
           </Text>
           <nav>
-            <Row gap="100">
+            <Row gap="200">
               <Link href="/">
                 <Text as="span" color="secondary">
                   Home
@@ -27,6 +27,11 @@ export const Footer: React.FC = () => {
                   Privacy Policy
                 </Text>
               </Link>
+              <Link href="/terms">
+                <Text as="span" color="secondary">
+                  Terms
+                </Text>
+              </Link>
             </Row>
           </nav>
         </Row>

src/components/HeaderFooterTemplate/Footer/__snapshots__/Footer.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Footer スナップショット Sample 1`] = `
         class="Container_containerStyle__1b3ljla3 Container_containerStyle_size_200__1b3ljla6 Container_containerStyle_variants_size_200__1b3ljla2 Container_containerStyle_paddingBottom_200__1b3ljlaw padding_paddingBottomVariants_200__1i0pzy6o Container_containerStyle_paddingTop_300__1b3ljlaq padding_paddingTopVariants_300__1i0pzy6i Container_containerStyle_paddingX_200__1b3ljla13 padding_paddingXVariants_200__1i0pzy6v"
       >
         <div
-          class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
+          class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843 Flex_flexStyle_wrap_true__15ivi8413"
         >
           <span
             class="Text_textStyle__jzpfqde Text_textStyle_color_secondary__jzpfqdg Text_textStyle_variants_color_secondary__jzpfqd1 Text_textStyle_size_100__jzpfqdl Text_textStyle_variants_size_100__jzpfqd6 Text_textStyle_weight_normal__jzpfqdu"
@@ -19,7 +19,7 @@ exports[`Footer スナップショット Sample 1`] = `
           </span>
           <nav>
             <div
-              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_200__15ivi84z Flex_flexStyle_variants_gap_200__15ivi84e Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
             >
               <a
                 class="Link_linkStyle__m4v9430"
@@ -41,6 +41,16 @@ exports[`Footer スナップショット Sample 1`] = `
                   Privacy Policy
                 </span>
               </a>
+              <a
+                class="Link_linkStyle__m4v9430"
+                href="/terms"
+              >
+                <span
+                  class="Text_textStyle__jzpfqde Text_textStyle_color_secondary__jzpfqdg Text_textStyle_variants_color_secondary__jzpfqd1 Text_textStyle_size_100__jzpfqdl Text_textStyle_variants_size_100__jzpfqd6 Text_textStyle_weight_normal__jzpfqdu"
+                >
+                  Terms
+                </span>
+              </a>
             </div>
           </nav>
         </div>

src/components/HeaderFooterTemplate/__snapshots__/HeaderFooterTemplate.test.tsx.snap

@@ -93,7 +93,7 @@ exports[`HeaderFooterTemplate スナップショット Sample 1`] = `
             class="Container_containerStyle__1b3ljla3 Container_containerStyle_size_200__1b3ljla6 Container_containerStyle_variants_size_200__1b3ljla2 Container_containerStyle_paddingBottom_200__1b3ljlaw padding_paddingBottomVariants_200__1i0pzy6o Container_containerStyle_paddingTop_300__1b3ljlaq padding_paddingTopVariants_300__1i0pzy6i Container_containerStyle_paddingX_200__1b3ljla13 padding_paddingXVariants_200__1i0pzy6v"
           >
             <div
-              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
+              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843 Flex_flexStyle_wrap_true__15ivi8413"
             >
               <span
                 class="Text_textStyle__jzpfqde Text_textStyle_color_secondary__jzpfqdg Text_textStyle_variants_color_secondary__jzpfqd1 Text_textStyle_size_100__jzpfqdl Text_textStyle_variants_size_100__jzpfqd6 Text_textStyle_weight_normal__jzpfqdu"
@@ -102,7 +102,7 @@ exports[`HeaderFooterTemplate スナップショット Sample 1`] = `
               </span>
               <nav>
                 <div
-                  class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+                  class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_200__15ivi84z Flex_flexStyle_variants_gap_200__15ivi84e Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
                 >
                   <a
                     class="Link_linkStyle__m4v9430"
@@ -124,6 +124,16 @@ exports[`HeaderFooterTemplate スナップショット Sample 1`] = `
                       Privacy Policy
                     </span>
                   </a>
+                  <a
+                    class="Link_linkStyle__m4v9430"
+                    href="/terms"
+                  >
+                    <span
+                      class="Text_textStyle__jzpfqde Text_textStyle_color_secondary__jzpfqdg Text_textStyle_variants_color_secondary__jzpfqd1 Text_textStyle_size_100__jzpfqdl Text_textStyle_variants_size_100__jzpfqd6 Text_textStyle_weight_normal__jzpfqdu"
+                    >
+                      Terms
+                    </span>
+                  </a>
                 </div>
               </nav>
             </div>

src/design-system/ui/List/List.css.ts

@@ -0,0 +1,17 @@
+import { style } from "@vanilla-extract/css";
+
+import { theme } from "@/design-system/theme.css";
+
+export const listStyles = {
+  root: style({
+    listStyleType: "disc",
+    marginLeft: theme.space[300],
+    marginBlock: theme.space[100],
+    lineHeight: 1.8,
+  }),
+  item: style({
+    "::marker": {
+      color: theme.color.text.secondary,
+    },
+  }),
+};

src/design-system/ui/List/List.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { List } from ".";
+
+const meta = {
+  component: List,
+  parameters: {
+    layout: "fullscreen",
+    testLevel: "snapshot",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Sample: Story = {
+  args: {
+    children: <div>children</div>,
+  },
+  render: (args) => (
+    <List {...args}>
+      <List.Item>List.Item</List.Item>
+      <List.Item>List.Item</List.Item>
+      <List.Item>List.Item</List.Item>
+    </List>
+  ),
+};

src/design-system/ui/List/List.test.tsx

@@ -0,0 +1,7 @@
+import { testStories } from "@/test/testStories";
+
+import * as stories from "./List.stories";
+
+describe("List", () => {
+  testStories(stories);
+});

src/design-system/ui/List/List.tsx

@@ -0,0 +1,9 @@
+import { listStyles } from "./List.css";
+
+type ListProps = {
+  children: React.ReactNode;
+};
+
+export const List: React.FC<ListProps> = ({ children }) => {
+  return <ul className={listStyles.root}>{children}</ul>;
+};

src/design-system/ui/List/ListItem.tsx

@@ -0,0 +1,9 @@
+import { listStyles } from "./List.css";
+
+type ListItemProps = {
+  children: React.ReactNode;
+};
+
+export const ListItem: React.FC<ListItemProps> = ({ children }) => {
+  return <li className={listStyles.item}>{children}</li>;
+};

src/design-system/ui/List/__snapshots__/List.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List スナップショット Sample 1`] = `
+<body>
+  <div>
+    <ul
+      class="List_listStyles_root__1mkigv60"
+    >
+      <li
+        class="List_listStyles_item__1mkigv61"
+      >
+        List.Item
+      </li>
+      <li
+        class="List_listStyles_item__1mkigv61"
+      >
+        List.Item
+      </li>
+      <li
+        class="List_listStyles_item__1mkigv61"
+      >
+        List.Item
+      </li>
+    </ul>
+  </div>
+</body>
+`;

src/design-system/ui/List/index.ts

@@ -0,0 +1,11 @@
+import { List } from "./List";
+import { ListItem } from "./ListItem";
+
+export type ListWithItem = typeof List & {
+  Item: typeof ListItem;
+};
+
+const ListWithItem = List as ListWithItem;
+ListWithItem.Item = ListItem;
+
+export { ListWithItem as List };