Feature/#52 implement page transition（ページトランジションを実装する）

.eslintrc.cjs

@@ -44,6 +44,7 @@ const config = {
         message: 'DO NOT DECLARE ENUM',
       },
     ],
+    'no-plusplus': 'off',
     /* typescript */
     '@typescript-eslint/ban-ts-comment': [
       'error',
@@ -90,6 +91,7 @@ const config = {
     'react-hooks/exhaustive-deps': 'warn',
     'react/no-unknown-property': ['error', { ignore: ['space'] }],
     'react/require-default-props': 'off',
+    'react/no-array-index-key': 'warn',
     /* import */
     'unused-imports/no-unused-imports': 'error',
     'import/prefer-default-export': 'off',

src/app/about/page.tsx

@@ -1,17 +1,35 @@
+'use client';
+
+import { useState } from 'react';
+
+import MenuIcon from '@/components/MenuIcon/MenuIcon';
+import MenuList from '@/components/MenuList/MenuList';
+import PixelBackground from '@/components/PixelBackground/PixelBackground';
 import Profile from '@/components/Profile/Profile';
 import AnimatedText from '@/components/commons/AnimatedText/AnimatedText';
 import ContentsLayout from '@/components/layouts/ContentsLayout/ContentsLayout';
 
 import type { NextPage } from 'next';
 
 const About: NextPage = () => {
+  const [menuIsActive, setMenuIsActive] = useState<boolean>(false);
+
   return (
-    <main className="flex-center w-full flex-col bg-light" role="main">
-      <ContentsLayout className="mt-40">
-        <AnimatedText text="Persistence pays off!" className="mb-16" />
-        <Profile />
-      </ContentsLayout>
-    </main>
+    <>
+      {/* TODO: menuIsActivedでないときはhiddenにする（ページの要素と重なるため） */}
+      {/* TODO: HOMEページ以外で配置するようにlayoutに配置する */}
+      <div className="fixed right-8 top-3 z-50">
+        <MenuIcon menuIsActive={menuIsActive} setMenuIsActive={setMenuIsActive} />
+      </div>
+      <MenuList menuIsActive={menuIsActive} />
+      <PixelBackground menuIsActive={menuIsActive} />
+      <main className="flex-center w-full flex-col bg-light text-dark" role="main">
+        <ContentsLayout className="mt-40">
+          <AnimatedText text="Persistence pays off!" className="mb-16" />
+          <Profile />
+        </ContentsLayout>
+      </main>
+    </>
   );
 };
 

src/app/page.tsx

@@ -29,6 +29,7 @@ const Home: NextPage = () => {
       <div className={`dark-bg absolute inset-y-0 right-1/2 bg-dark ${isClicked ? 'h-full w-1/2' : 'h-0 w-2'}`} />
       {/* Bear */}
       <motion.div
+        // TODO: アニメーション後に領域がずれるので修正対応する
         className="flex-center absolute inset-0"
         animate={isClicked ? 'clicked' : 'default'}
         variants={variants}

src/components/MenuIcon/MenuIcon.stories.tsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import MenuIcon from './MenuIcon';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof MenuIcon> = {
+  component: MenuIcon,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MenuIcon>;
+
+const MenuIconWithProps = () => {
+  const [menuIsActive, setMenuIsActive] = useState<boolean>(false);
+  return <MenuIcon menuIsActive={menuIsActive} setMenuIsActive={setMenuIsActive} />;
+};
+
+export const Standard: Story = {
+  render: () => <MenuIconWithProps />,
+};

src/components/MenuIcon/MenuIcon.test.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import MenuIcon from './MenuIcon';
+
+describe('src/components/MenuIcon/MenuIcon.test.tsx', () => {
+  it('should render the MenuIcon component with the button element', () => {
+    const { getByRole } = render(<MenuIcon menuIsActive={false} setMenuIsActive={() => {}} />);
+    expect(getByRole('button')).toBeInTheDocument();
+  });
+
+  it('should calls setMenuIsActive when the button is clicked', () => {
+    const setMenuIsActiveMock = jest.fn();
+    const { getByRole } = render(<MenuIcon menuIsActive={false} setMenuIsActive={setMenuIsActiveMock} />);
+    const buttonElement = getByRole('button');
+
+    fireEvent.click(buttonElement);
+    expect(setMenuIsActiveMock).toHaveBeenCalled();
+  });
+
+  it('should toggle menuIsActive state when the button is clicked', () => {
+    const { getAllByTestId } = render(<MenuIcon menuIsActive setMenuIsActive={() => {}} />);
+
+    const lineElements = getAllByTestId('menu-icon-line');
+    lineElements.forEach((lineElement) => {
+      expect(lineElement).toHaveClass('translate-x-10');
+    });
+  });
+
+  // TODO: useStateのテスト
+});

src/components/MenuIcon/MenuIcon.tsx

@@ -0,0 +1,54 @@
+import type { Dispatch, FC, SetStateAction } from 'react';
+
+interface Props {
+  menuIsActive: boolean;
+  setMenuIsActive: Dispatch<SetStateAction<boolean>>;
+}
+
+const MenuIcon: FC<Props> = ({ menuIsActive, setMenuIsActive }) => {
+  const handleClick = () => {
+    setMenuIsActive((prevMenuIsActive) => !prevMenuIsActive);
+  };
+
+  return (
+    <button className="group relative overflow-hidden" type="button" onClick={handleClick}>
+      <div className="flex h-7 w-8 origin-center flex-col justify-between transition-all duration-300">
+        <div
+          className={`h-1 w-8 origin-left rounded bg-dark transition-all duration-300 ${
+            menuIsActive ? 'translate-x-10' : ''
+          }`}
+          data-testid="menu-icon-line"
+        />
+        <div
+          className={`h-1 w-8 origin-left rounded bg-dark transition-all delay-75 duration-300 ${
+            menuIsActive ? 'translate-x-10' : ''
+          }`}
+          data-testid="menu-icon-line"
+        />
+        <div
+          className={`h-1 w-8 origin-left rounded bg-dark transition-all delay-150 duration-300 ${
+            menuIsActive ? 'translate-x-10' : ''
+          }`}
+          data-testid="menu-icon-line"
+        />
+        <div
+          className={`absolute inset-0 flex w-0 -translate-x-10 items-center justify-between transition-all duration-500 group-focus:w-12 ${
+            menuIsActive ? 'translate-x-0' : ''
+          }`}>
+          <div
+            className={`absolute h-1 w-7 rotate-0 rounded bg-dark transition-all delay-300 duration-500 ${
+              menuIsActive ? 'rotate-45' : ''
+            }`}
+          />
+          <div
+            className={`absolute h-1 w-7 -rotate-0 rounded bg-dark transition-all delay-300 duration-500 ${
+              menuIsActive ? '-rotate-45' : ''
+            }`}
+          />
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export default MenuIcon;

src/components/MenuList/MenuList.stories.tsx

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

src/components/MenuList/MenuList.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+
+import MenuList from './MenuList';
+
+describe('src/components/MenuList/MenuList.test.tsx', () => {
+  it('should render the MenuList component', () => {
+    const { getByRole } = render(<MenuList />);
+  });
+});

src/components/MenuList/MenuList.tsx

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { MENU_ITEMS } from '@/constants/menu';
+
+interface Props {
+  menuIsActive: boolean;
+}
+
+const variants = {
+  initial: {
+    opacity: 0,
+  },
+  open: {
+    opacity: 1,
+  },
+  close: {
+    opacity: 0,
+  },
+};
+
+const MenuList: FC<Props> = ({ menuIsActive }) => {
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      className="relative z-40 w-full"
+      variants={variants}
+      initial="initial"
+      animate={menuIsActive ? 'open' : 'close'}>
+      <div className="flex-center fixed inset-0 -left-1/4">
+        <ul className="flex flex-col gap-y-4">
+          {MENU_ITEMS.map((menuItem) => (
+            // TODO: framer-motionでホバーリンクをアニメーションさせる
+            <li key={menuItem.id}>
+              <Link
+                className={`text-9xl font-black text-dark opacity-40 transition-opacity hover:opacity-100 ${
+                  !menuItem.isValid ? 'pointer-events-none line-through !opacity-5' : ''
+                } ${menuItem.href === pathname ? '!opacity-100' : ''}`}
+                href={menuItem.href}
+                aria-disabled={!menuItem.isValid}>
+                {menuItem.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.div>
+  );
+};
+
+export default MenuList;

src/components/PixelBackground/PixelBackground.stories.tsx

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

src/components/PixelBackground/PixelBackground.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+
+import PixelBackground from './PixelBackground';
+
+describe('src/components/PixelBackground/PixelBackground.test.tsx', () => {
+  it('should render the PixelBackground component', () => {
+    const { getByRole } = render(<PixelBackground />);
+  });
+});

src/components/PixelBackground/PixelBackground.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-param-reassign */
+
+'use client';
+
+import { type FC } from 'react';
+
+import { motion } from 'framer-motion';
+
+const variants = {
+  initial: {
+    opacity: 0,
+  },
+  open: (delays: number[]) => ({
+    opacity: 1,
+    transition: { duration: 0, delay: 0.02 * delays[0] },
+  }),
+  close: (delays: number[]) => ({
+    opacity: 0,
+    transition: { duration: 0, delay: 0.02 * delays[1] },
+  }),
+};
+
+interface Props {
+  menuIsActive: boolean;
+}
+
+const PixelBackground: FC<Props> = ({ menuIsActive }) => {
+  /**
+   * Shuffles array in place (Fisher–Yates shuffle).
+   * @param {Array} a items An array containing the items.
+   */
+  const shuffle = (a: []) => {
+    let j;
+    let x;
+    for (let i = a.length - 1; i > 0; i--) {
+      j = Math.floor(Math.random() * (i + 1));
+      x = a[i];
+      a[i] = a[j];
+      a[j] = x;
+    }
+    return a;
+  };
+
+  const getBlocks = (indexOfColumn: number) => {
+    let width: number;
+    let height: number;
+    if (typeof window !== 'undefined') {
+      const { innerWidth, innerHeight } = window;
+      width = innerWidth;
+      height = innerHeight;
+    }
+
+    const blockSize = width * 0.04;
+    const amountOfBlocks = Math.ceil(height / blockSize);
+    const delays = shuffle([...Array(amountOfBlocks)].map((_, i) => i));
+    return delays.map((randomDelay: number, i) => {
+      return (
+        <motion.div
+          className="h-[4vw] w-full bg-pinkSalmon"
+          key={`block-${i}`}
+          variants={variants}
+          initial="initial"
+          animate={menuIsActive ? 'open' : 'close'}
+          custom={[indexOfColumn + randomDelay, 20 - indexOfColumn + randomDelay]}
+        />
+      );
+    });
+  };
+
+  return (
+    <div className="fixed z-20 flex h-screen overflow-hidden">
+      {[...Array(25)].map((_, i) => {
+        return (
+          <div className="h-full w-[4vw]" key={`col-${i}`}>
+            {getBlocks(i)}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PixelBackground;