dialogのlazyload

mehm8128 · Mar 23, 2024 · 36f8170 · 36f8170
1 parent 5b7ad21
commit 36f8170
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 74 deletions.
diff --git a/workspaces/app/src/foundation/components/CompanyDialogContent.tsx 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">
+      <Text as="h2" color={Color.MONO_100} id={companyDialogA11yId} typography={Typography.NORMAL16}>
+        運営会社
+      </Text>
+      <Spacer height={Space * 1} />
+      <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
+        {COMPANY}
+      </Text>
+    </_Content>
+  );
+}
diff --git a/workspaces/app/src/foundation/components/ContactDialogContent.tsx 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">
+      <Text as="h2" color={Color.MONO_100} id={contactDialogA11yId} typography={Typography.NORMAL16}>
+        お問い合わせ
+      </Text>
+      <Spacer height={Space * 1} />
+      <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
+        {CONTACT}
+      </Text>
+    </_Content>
+  );
+}
diff --git a/workspaces/app/src/foundation/components/Footer.tsx b/workspaces/app/src/foundation/components/Footer.tsx
@@ -1,112 +1,50 @@
 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);
 
   React.useEffect(() => {
     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">
-        <Text as="h2" color={Color.MONO_100} id={termDialogA11yId} typography={Typography.NORMAL16}>
-          利用規約
-        </Text>
-        <Spacer height={Space * 1} />
-        <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
-          {TERM}
-        </Text>
-      </_Content>,
-    );
+    updateDialogContent(<TermDialogContent />);
   };
 
   const handleRequestToContactDialogOpen = () => {
-    updateDialogContent(
-      <_Content aria-labelledby={contactDialogA11yId} role="dialog">
-        <Text as="h2" color={Color.MONO_100} id={contactDialogA11yId} typography={Typography.NORMAL16}>
-          お問い合わせ
-        </Text>
-        <Spacer height={Space * 1} />
-        <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
-          {CONTACT}
-        </Text>
-      </_Content>,
-    );
+    updateDialogContent(<ContactDialogContent />);
   };
 
   const handleRequestToQuestionDialogOpen = () => {
-    updateDialogContent(
-      <_Content aria-labelledby={questionDialogA11yId} role="dialog">
-        <Text as="h2" color={Color.MONO_100} id={questionDialogA11yId} typography={Typography.NORMAL16}>
-          Q&A
-        </Text>
-        <Spacer height={Space * 1} />
-        <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
-          {QUESTION}
-        </Text>
-      </_Content>,
-    );
+    updateDialogContent(<QuestionDialogContent />);
   };
 
   const handleRequestToCompanyDialogOpen = () => {
-    updateDialogContent(
-      <_Content aria-labelledby={companyDialogA11yId} role="dialog">
-        <Text as="h2" color={Color.MONO_100} id={companyDialogA11yId} typography={Typography.NORMAL16}>
-          運営会社
-        </Text>
-        <Spacer height={Space * 1} />
-        <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
-          {COMPANY}
-        </Text>
-      </_Content>,
-    );
+    updateDialogContent(<CompanyDialogContent />);
   };
 
   const handleRequestToOverviewDialogOpen = () => {
-    updateDialogContent(
-      <_Content aria-labelledby={overviewDialogA11yId} role="dialog">
-        <Text as="h2" color={Color.MONO_100} id={overviewDialogA11yId} typography={Typography.NORMAL16}>
-          Cyber TOONとは
-        </Text>
-        <Spacer height={Space * 1} />
-        <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
-          {OVERVIEW}
-        </Text>
-      </_Content>,
-    );
+    updateDialogContent(<OverviewDialogContent />);
   };
 
   return (

diff --git a/workspaces/app/src/foundation/components/OverviewDialogContent.tsx 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">
+      <Text as="h2" color={Color.MONO_100} id={overviewDialogA11yId} typography={Typography.NORMAL16}>
+        Cyber TOONとは
+      </Text>
+      <Spacer height={Space * 1} />
+      <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
+        {OVERVIEW}
+      </Text>
+    </_Content>
+  );
+}
diff --git a/workspaces/app/src/foundation/components/QuestionDialogContent.tsx 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">
+      <Text as="h2" color={Color.MONO_100} id={questionDialogA11yId} typography={Typography.NORMAL16}>
+        Q&A
+      </Text>
+      <Spacer height={Space * 1} />
+      <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
+        {QUESTION}
+      </Text>
+    </_Content>
+  );
+}
diff --git a/workspaces/app/src/foundation/components/TermDialogContent.tsx 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">
+      <Text as="h2" color={Color.MONO_100} id={termDialogA11yId} typography={Typography.NORMAL16}>
+        利用規約
+      </Text>
+      <Spacer height={Space * 1} />
+      <Text as="p" color={Color.MONO_100} typography={Typography.NORMAL12}>
+        {TERM}
+      </Text>
+    </_Content>
+  );
+}