diff --git a/workspaces/app/src/foundation/components/CompanyDialogContent.tsx b/workspaces/app/src/foundation/components/CompanyDialogContent.tsx
new file mode 100644
index 000000000..e2ab16b5b
--- /dev/null
+++ b/workspaces/app/src/foundation/components/CompanyDialogContent.tsx
@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import styled from 'styled-components';
+
+import { COMPANY } from '../constants/Company';
+import { Color, Space, Typography } from '../styles/variables';
+
+import { Spacer } from './Spacer';
+import { Text } from './Text';
+
+const _Content = styled.section`
+ white-space: pre-line;
+`;
+export default function CompanyDialogContent() {
+ const companyDialogA11yId = useId();
+
+ return (
+ <_Content aria-labelledby={companyDialogA11yId} role="dialog">
+
+ 運営会社
+
+
+
+ {COMPANY}
+
+
+ );
+}
diff --git a/workspaces/app/src/foundation/components/ContactDialogContent.tsx b/workspaces/app/src/foundation/components/ContactDialogContent.tsx
new file mode 100644
index 000000000..29a197aee
--- /dev/null
+++ b/workspaces/app/src/foundation/components/ContactDialogContent.tsx
@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import styled from 'styled-components';
+
+import { CONTACT } from '../constants/Contact';
+import { Color, Space, Typography } from '../styles/variables';
+
+import { Spacer } from './Spacer';
+import { Text } from './Text';
+
+const _Content = styled.section`
+ white-space: pre-line;
+`;
+export default function ContactDialogContent() {
+ const contactDialogA11yId = useId();
+
+ return (
+ <_Content aria-labelledby={contactDialogA11yId} role="dialog">
+
+ お問い合わせ
+
+
+
+ {CONTACT}
+
+
+ );
+}
diff --git a/workspaces/app/src/foundation/components/Footer.tsx b/workspaces/app/src/foundation/components/Footer.tsx
index c5a876ab4..630bcb747 100644
--- a/workspaces/app/src/foundation/components/Footer.tsx
+++ b/workspaces/app/src/foundation/components/Footer.tsx
@@ -1,29 +1,23 @@
import { useSetAtom } from 'jotai';
-import React, { useId } from 'react';
+import React from 'react';
import styled from 'styled-components';
import { DialogContentAtom } from '../atoms/DialogContentAtom';
-import { COMPANY } from '../constants/Company';
-import { CONTACT } from '../constants/Contact';
-import { OVERVIEW } from '../constants/Overview';
-import { QUESTION } from '../constants/Question';
-import { TERM } from '../constants/Term';
-import { Color, Space, Typography } from '../styles/variables';
+import { Color, Space } from '../styles/variables';
import { Box } from './Box';
import { Button } from './Button';
+import CompanyDialogContent from './CompanyDialogContent';
+import ContactDialogContent from './ContactDialogContent';
import { Flex } from './Flex';
-import { Spacer } from './Spacer';
-import { Text } from './Text';
+import OverviewDialogContent from './OverviewDialogContent';
+import QuestionDialogContent from './QuestionDialogContent';
+import TermDialogContent from './TermDialogContent';
const _Button = styled(Button)`
color: ${Color.MONO_A};
`;
-const _Content = styled.section`
- white-space: pre-line;
-`;
-
export const Footer: React.FC = () => {
const [isClient, setIsClient] = React.useState(false);
@@ -31,82 +25,26 @@ export const Footer: React.FC = () => {
setIsClient(true);
}, []);
- const termDialogA11yId = useId();
- const contactDialogA11yId = useId();
- const questionDialogA11yId = useId();
- const companyDialogA11yId = useId();
- const overviewDialogA11yId = useId();
-
const updateDialogContent = useSetAtom(DialogContentAtom);
const handleRequestToTermDialogOpen = () => {
- updateDialogContent(
- <_Content aria-labelledby={termDialogA11yId} role="dialog">
-
- 利用規約
-
-
-
- {TERM}
-
- ,
- );
+ updateDialogContent();
};
const handleRequestToContactDialogOpen = () => {
- updateDialogContent(
- <_Content aria-labelledby={contactDialogA11yId} role="dialog">
-
- お問い合わせ
-
-
-
- {CONTACT}
-
- ,
- );
+ updateDialogContent();
};
const handleRequestToQuestionDialogOpen = () => {
- updateDialogContent(
- <_Content aria-labelledby={questionDialogA11yId} role="dialog">
-
- Q&A
-
-
-
- {QUESTION}
-
- ,
- );
+ updateDialogContent();
};
const handleRequestToCompanyDialogOpen = () => {
- updateDialogContent(
- <_Content aria-labelledby={companyDialogA11yId} role="dialog">
-
- 運営会社
-
-
-
- {COMPANY}
-
- ,
- );
+ updateDialogContent();
};
const handleRequestToOverviewDialogOpen = () => {
- updateDialogContent(
- <_Content aria-labelledby={overviewDialogA11yId} role="dialog">
-
- Cyber TOONとは
-
-
-
- {OVERVIEW}
-
- ,
- );
+ updateDialogContent();
};
return (
diff --git a/workspaces/app/src/foundation/components/OverviewDialogContent.tsx b/workspaces/app/src/foundation/components/OverviewDialogContent.tsx
new file mode 100644
index 000000000..f0a2255b5
--- /dev/null
+++ b/workspaces/app/src/foundation/components/OverviewDialogContent.tsx
@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import styled from 'styled-components';
+
+import { OVERVIEW } from '../constants/Overview';
+import { Color, Space, Typography } from '../styles/variables';
+
+import { Spacer } from './Spacer';
+import { Text } from './Text';
+
+const _Content = styled.section`
+ white-space: pre-line;
+`;
+export default function OverviewDialogContent() {
+ const overviewDialogA11yId = useId();
+
+ return (
+ <_Content aria-labelledby={overviewDialogA11yId} role="dialog">
+
+ Cyber TOONとは
+
+
+
+ {OVERVIEW}
+
+
+ );
+}
diff --git a/workspaces/app/src/foundation/components/QuestionDialogContent.tsx b/workspaces/app/src/foundation/components/QuestionDialogContent.tsx
new file mode 100644
index 000000000..980cc7478
--- /dev/null
+++ b/workspaces/app/src/foundation/components/QuestionDialogContent.tsx
@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import styled from 'styled-components';
+
+import { QUESTION } from '../constants/Question';
+import { Color, Space, Typography } from '../styles/variables';
+
+import { Spacer } from './Spacer';
+import { Text } from './Text';
+
+const _Content = styled.section`
+ white-space: pre-line;
+`;
+export default function QuestionDialogContent() {
+ const questionDialogA11yId = useId();
+
+ return (
+ <_Content aria-labelledby={questionDialogA11yId} role="dialog">
+
+ Q&A
+
+
+
+ {QUESTION}
+
+
+ );
+}
diff --git a/workspaces/app/src/foundation/components/TermDialogContent.tsx b/workspaces/app/src/foundation/components/TermDialogContent.tsx
new file mode 100644
index 000000000..eb92ff65d
--- /dev/null
+++ b/workspaces/app/src/foundation/components/TermDialogContent.tsx
@@ -0,0 +1,27 @@
+import { useId } from 'react';
+import styled from 'styled-components';
+
+import { TERM } from '../constants/Term';
+import { Color, Space, Typography } from '../styles/variables';
+
+import { Spacer } from './Spacer';
+import { Text } from './Text';
+
+const _Content = styled.section`
+ white-space: pre-line;
+`;
+export default function TermDialogContent() {
+ const termDialogA11yId = useId();
+
+ return (
+ <_Content aria-labelledby={termDialogA11yId} role="dialog">
+
+ 利用規約
+
+
+
+ {TERM}
+
+
+ );
+}