新デザイン（2024年）のFooterComponentを作成

src/app/_components/Footer.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+
+const meta = {
+  component: Footer,
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ShowJapanese: Story = {
+  args: {
+    language: 'ja',
+  },
+};
+
+export const ShowEnglish: Story = {
+  args: {
+    language: 'en',
+  },
+};

src/app/_components/Footer.tsx

@@ -0,0 +1,52 @@
+import { createExternalTransmissionPolicyLinksFromLanguages } from '@/features/externalTransmissionPolicy';
+import type { Language } from '@/features/language';
+import { createPrivacyPolicyLinksFromLanguages } from '@/features/privacyPolicy';
+import { createTermsOfUseLinksFromLanguages } from '@/features/termsOfUse';
+import Link from 'next/link';
+import type { JSX } from 'react';
+import { Text } from 'react-aria-components';
+
+export type Props = {
+  language: Language;
+};
+
+const linkStyle =
+  'text-[#43281E] font-inter text-sm font-normal leading-5 hover:underline';
+
+export const Footer = ({ language }: Props): JSX.Element => {
+  const terms = createTermsOfUseLinksFromLanguages(language);
+
+  const privacy = createPrivacyPolicyLinksFromLanguages(language);
+
+  const externalTransmissionPolicy =
+    createExternalTransmissionPolicyLinksFromLanguages(language);
+
+  return (
+    <footer className="flex w-full flex-col">
+      <div className="mx-auto flex w-full max-w-[375px] items-center px-0 py-3 md:hidden">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2">
+          <Link href={terms.link} prefetch={false} className={linkStyle}>
+            <Text data-gtm-click="footer-terms-link">{terms.text}</Text>
+          </Link>
+          <Link href={privacy.link} prefetch={false} className={linkStyle}>
+            <Text data-gtm-click="footer-privacy-link">{privacy.text}</Text>
+          </Link>
+          <Link
+            href={externalTransmissionPolicy.link}
+            prefetch={false}
+            className={linkStyle}
+          >
+            <Text data-gtm-click="footer-external-transmission-policy-link">
+              {externalTransmissionPolicy.text}
+            </Text>
+          </Link>
+        </div>
+      </div>
+      <div className="flex h-[60px] items-center justify-center self-stretch border-t border-orange-200 bg-orange-50">
+        <Text className="font-inter text-base font-medium text-orange-800">
+          Copyright (c) nekochans
+        </Text>
+      </div>
+    </footer>
+  );
+};

src/features/externalTransmissionPolicy.ts

@@ -0,0 +1,29 @@
+import { type Language } from '@/features/language';
+import { createIncludeLanguageAppPath } from '@/features/url';
+import { assertNever } from '@/utils/assertNever';
+import type { LinkAttribute } from './linkAttribute';
+
+export const createExternalTransmissionPolicyLinksFromLanguages = (
+  language: Language,
+): LinkAttribute => {
+  switch (language) {
+    case 'en':
+      return {
+        text: 'External Transmission Policy',
+        link: createIncludeLanguageAppPath(
+          'external-transmission-policy',
+          language,
+        ),
+      };
+    case 'ja':
+      return {
+        text: '外部送信ポリシー',
+        link: createIncludeLanguageAppPath(
+          'external-transmission-policy',
+          language,
+        ),
+      };
+    default:
+      return assertNever(language);
+  }
+};

src/features/linkAttribute.ts

@@ -0,0 +1,6 @@
+import type { IncludeLanguageAppPath } from '@/features/url';
+
+export type LinkAttribute = {
+  text: string;
+  link: IncludeLanguageAppPath;
+};

src/features/privacyPolicy.ts

@@ -0,0 +1,23 @@
+import { type Language } from '@/features/language';
+import { createIncludeLanguageAppPath } from '@/features/url';
+import { assertNever } from '@/utils/assertNever';
+import type { LinkAttribute } from './linkAttribute';
+
+export const createPrivacyPolicyLinksFromLanguages = (
+  language: Language,
+): LinkAttribute => {
+  switch (language) {
+    case 'en':
+      return {
+        text: 'Privacy Policy',
+        link: createIncludeLanguageAppPath('privacy', language),
+      };
+    case 'ja':
+      return {
+        text: 'プライバシーポリシー',
+        link: createIncludeLanguageAppPath('privacy', language),
+      };
+    default:
+      return assertNever(language);
+  }
+};

src/features/termsOfUse.ts

@@ -0,0 +1,23 @@
+import { type Language } from '@/features/language';
+import { createIncludeLanguageAppPath } from '@/features/url';
+import { assertNever } from '@/utils/assertNever';
+import type { LinkAttribute } from './linkAttribute';
+
+export const createTermsOfUseLinksFromLanguages = (
+  language: Language,
+): LinkAttribute => {
+  switch (language) {
+    case 'en':
+      return {
+        text: 'Terms of Use',
+        link: createIncludeLanguageAppPath('terms', language),
+      };
+    case 'ja':
+      return {
+        text: '利用規約',
+        link: createIncludeLanguageAppPath('terms', language),
+      };
+    default:
+      return assertNever(language);
+  }
+};