Merge pull request #31 from Bear29ers/feature/#27_create_footer_compo…

…nent

Feature/#27 Create footer component（Footerコンポーネントを作成する）

src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import Footer from './Footer';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Footer> = {
+  component: Footer,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Standard: Story = {
+  render: () => <Footer />,
+};

src/components/Footer/Footer.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+
+import Footer from './Footer';
+
+describe('src/components/Footer/Footer.test.tsx', () => {
+  it('should render Footer component', () => {
+    const { getByRole } = render(<Footer />);
+    expect(getByRole('contentinfo')).toBeInTheDocument();
+  });
+
+  it('should render Footer component with two span tags', () => {
+    const { container } = render(<Footer />);
+    expect(container.querySelectorAll('span')).toHaveLength(2);
+  });
+});

src/components/Footer/Footer.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+
+const Footer: FC = () => {
+  return (
+    <footer className="w-full  text-sm" role="contentinfo">
+      <div className="flex-between px-32 pb-2">
+        <span>{new Date().getFullYear()} &copy; All Rights Reserved.</span>
+        <div className="flex items-center">
+          Build With&nbsp;
+          <span className="px-1 text-2xl text-primary">&#9825;</span>
+          &nbsp;by&nbsp;Bear29ers
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/PageLayout/PageLayout.test.tsx

@@ -11,4 +11,22 @@ describe('src/components/PageLayout/PageLayout.test.tsx', () => {
     );
     expect(getByRole('presentation')).toBeInTheDocument();
   });
+
+  it('should render PageLayout component with Navbar', () => {
+    const { getByRole } = render(
+      <PageLayout>
+        <div>PageLayout</div>
+      </PageLayout>
+    );
+    expect(getByRole('banner')).toBeInTheDocument();
+  });
+
+  it('should render PageLayout component with Footer', () => {
+    const { getByRole } = render(
+      <PageLayout>
+        <div>PageLayout</div>
+      </PageLayout>
+    );
+    expect(getByRole('contentinfo')).toBeInTheDocument();
+  });
 });

src/components/PageLayout/PageLayout.tsx

@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 
+import Footer from '../Footer/Footer';
 import Navbar from '../Navbar/Navbar';
 
 type Props = {
@@ -11,6 +12,7 @@ const PageLayout: FC<Props> = ({ children }) => {
     <div role="presentation">
       <Navbar />
       {children}
+      <Footer />
     </div>
   );
 };