Feature/#46 Change Home page design（Homeページのデザインを変更する）

.eslintrc.cjs

@@ -89,6 +89,7 @@ const config = {
     'react/react-in-jsx-scope': 'off',
     'react-hooks/exhaustive-deps': 'warn',
     'react/no-unknown-property': ['error', { ignore: ['space'] }],
+    'react/require-default-props': 'off',
     /* import */
     'unused-imports/no-unused-imports': 'error',
     'import/prefer-default-export': 'off',

_templates/generator/components/component.test.ejs.t

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react';
 import <%= h.changeCase.pascal(component_name) %> from './<%= h.changeCase.pascal(component_name) %>';
 
 describe('src/components/<%= h.changeCase.pascal(component_name) %>/<%= h.changeCase.pascal(component_name) %>.test.tsx', () => {
-  it('should render <%= h.changeCase.pascal(component_name) %> component', () => {
+  it('should render the <%= h.changeCase.pascal(component_name) %> component', () => {
     const { getByRole } = render(<<%= h.changeCase.pascal(component_name) %> />);
   });
 });

src/app/about/page.test.tsx

@@ -1,13 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import Page from './page';
 
 describe('src/app/about/page.test.tsx', () => {
-  it('should render About page with PageLayout and ContentLayout', () => {
-    render(<Page />);
-    const layouts = screen.getAllByRole('presentation');
-    expect(layouts).toHaveLength(2);
-    layouts.map((layout) => expect(layout).toBeInTheDocument());
+  it('should render About page with ContentLayout', () => {
+    const { getByRole } = render(<Page />);
+    expect(getByRole('presentation')).toBeInTheDocument();
   });
 
   it('should render Animated text heading', () => {

src/app/about/page.tsx

@@ -1,20 +1,17 @@
 import Profile from '@/components/Profile/Profile';
 import AnimatedText from '@/components/commons/AnimatedText/AnimatedText';
 import ContentsLayout from '@/components/layouts/ContentsLayout/ContentsLayout';
-import PageLayout from '@/components/layouts/PageLayout/PageLayout';
 
 import type { NextPage } from 'next';
 
 const About: NextPage = () => {
   return (
-    <PageLayout isNotHome>
-      <main className="flex-center w-full flex-col" role="main">
-        <ContentsLayout className="mt-40">
-          <AnimatedText text="Persistence pays off!" className="mb-16" />
-          <Profile />
-        </ContentsLayout>
-      </main>
-    </PageLayout>
+    <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>
   );
 };
 

src/app/globals.scss

@@ -14,6 +14,66 @@
   .trapezoid {
     clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
   }
+
+  .bear {
+    &-body {
+      &-radius {
+        border-radius: 50% / 40% 40% 60% 60%;
+      }
+    }
+    &-eyes {
+      &-transition {
+        transition: all 0.3s linear;
+      }
+    }
+    &-eye {
+      &-transition {
+        transition: all 0.3s ease;
+      }
+    }
+    &-nose {
+      &-radius {
+        border-radius: 50% / 60% 60% 30% 30%;
+      }
+      &-transition {
+        transition: 0.4s ease;
+      }
+      &-inner {
+        &-radius {
+          border-radius: 50% / 40% 40% 60% 60%;
+          &::after {
+            content: '';
+            width: 10px;
+            height: 10px;
+            background: #2d120f;
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            border-radius: 50%;
+            transform: translateX(-50%);
+            box-shadow: 10px 2.4px 0 #d1a68f, -10px 2.4px 0 #d1a68f;
+          }
+        }
+      }
+    }
+  }
+
+  .dark-bg {
+    transition: height 0.5s ease, width 1s ease 0.5s;
+  }
+
+  .intro {
+    &-dark {
+      &-bg {
+        background: linear-gradient(to right, #d2d8d9 50%, #202f55 50%) bottom,
+          linear-gradient(to right, #d2d8d9 50%, #202f55 50%) top;
+        background-repeat: no-repeat;
+        background-size: 100% 4px;
+        border-right: 4px solid #202f55;
+        border-left: 4px solid #d2d8d9;
+      }
+    }
+  }
 }
 
 .flex-center {

src/app/page.test.tsx

@@ -1,26 +1,27 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 // import mockRouter from 'next-router-mock';
 // import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
 
 import Page from './page';
 
 describe('src/app/page.test.tsx', () => {
-  it('should render Home pege with PageLayout and HomeContentsLayout', () => {
-    render(<Page />);
-    const layouts = screen.getAllByRole('presentation');
-    expect(layouts).toHaveLength(2);
-    layouts.map((layout) => expect(layout).toBeInTheDocument());
-  });
+  // it('should render Home pege with PageLayout and HomeContentsLayout', () => {
+  //   render(<Page />);
+  //   const layouts = screen.getAllByRole('presentation');
+  //   expect(layouts).toHaveLength(2);
+  //   layouts.map((layout) => expect(layout).toBeInTheDocument());
+  // });
 
   it('should render Home page with main role', () => {
     const { getByRole } = render(<Page />);
     expect(getByRole('main')).toBeInTheDocument();
   });
 
-  it('should render Home page with a profile image', () => {
-    const { getByAltText } = render(<Page />);
-    expect(getByAltText('Bear29ers')).toBeInTheDocument();
-  });
+  // TODO:プロフィール画像を入れたあとにコメントアウト
+  // it('should render Home page with a profile image', () => {
+  //   const { getByAltText } = render(<Page />);
+  //   expect(getByAltText('Bear29ers')).toBeInTheDocument();
+  // });
 
   // TODO:HOMEページコンテンツを修正後にテスト対応
   // it('should render Home page with the animated text', () => {

src/app/page.tsx

@@ -1,41 +1,83 @@
-import ProfileCard from '@/components/ProfileCard/ProfileCard';
-import Tbd from '@/components/Tbd/Tbd';
-import HomeContentsLayout from '@/components/layouts/HomeContentsLayout/HomeContentsLayout';
-import PageLayout from '@/components/layouts/PageLayout/PageLayout';
+'use client';
 
-import { HOME_TEXT } from '@/constants/home';
+import { useState } from 'react';
+
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+
+import Bear from '@/components/Bear/Bear';
+import Intro from '@/components/Intro/Intro';
+import SocialIcons from '@/components/SocialIcons/SocialIcons';
 
 import type { NextPage } from 'next';
 
+const MotionLink = motion(Link);
+
+const variants = {
+  default: { x: '0%', y: '0%' },
+  clicked: { x: '40%', y: '32%' },
+};
+
 const Home: NextPage = () => {
+  const [isClicked, setIsClicked] = useState<boolean>(false);
+
   return (
-    <div className="bg-iron">
-      <PageLayout isNotHome={false}>
-        <main className="flex min-h-screen w-full items-center" role="main">
-          <HomeContentsLayout>
-            <div className="flex w-full justify-between gap-x-8">
-              <div className="w-[38%]">
-                <ProfileCard />
-              </div>
-              <div className="flex w-[62%] flex-col gap-y-8">
-                <h2 className="text-6xl font-extrabold">{HOME_TEXT.quote}</h2>
-                <div className="flex h-72 w-full gap-x-8 rounded-2xl">
-                  <div className="h-72 w-9/12 rounded-2xl bg-orange-200">Gallery</div>
-                  <div className="flex h-72 w-3/12 flex-col rounded-2xl bg-yellow-200">
-                    <div className="h-1/2 rounded-t-2xl bg-rose-200">Time</div>
-                    <div className="h-1/2 rounded-b-2xl bg-fuchsia-200">Weather</div>
-                  </div>
-                </div>
-                <div className="flex w-full grow gap-x-8 rounded-2xl">
-                  <Tbd width="w-5/12" />
-                  <Tbd width="w-7/12" />
-                </div>
-              </div>
-            </div>
-          </HomeContentsLayout>
-        </main>
-      </PageLayout>
-    </div>
+    <main role="main" className="relative h-screen w-screen bg-iron">
+      {/* Intro */}
+      <div className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2">{isClicked && <Intro />}</div>
+      {/* Dark background */}
+      <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
+        className="flex-center absolute inset-0"
+        animate={isClicked ? 'clicked' : 'default'}
+        variants={variants}
+        transition={{
+          duration: 0.8,
+          ease: 'easeOut',
+        }}>
+        <Bear setIsClicked={setIsClicked} />
+      </motion.div>
+      {/* Social Icons */}
+      <SocialIcons isClicked={isClicked} />
+      {/* Page Navigation TODO: コンポーネント化したい */}
+      {/* TODO: AnimatePresenseでtransitionを実装 */}
+      {/* https://maxschmitt.me/posts/nextjs-page-transitions-framer-motion */}
+      <motion.div
+        className="absolute right-0 top-1/2 -translate-y-1/2 rotate-90 text-2xl font-semibold text-dark line-through"
+        initial={{ x: 200, rotate: 90 }}
+        animate={{ x: 0, rotate: 90 }}
+        transition={{ type: 'spring', duration: 1.5, delay: 1.0 }}>
+        Works
+      </motion.div>
+      <div className="absolute bottom-3 flex w-screen justify-around">
+        <MotionLink
+          href="/about"
+          className={`text-2xl font-semibold ${isClicked ? 'text-iron' : 'text-dark'}`}
+          initial={{ y: 200 }}
+          animate={{ y: 0, transition: { type: 'spring', duration: 1.5, delay: 1.0 } }}
+          whileHover={{ scale: 1.1, transition: { type: 'spring', stiffness: 400, damping: 10 } }}
+          whileTap={{ scale: 0.9, transition: { type: 'spring', stiffness: 400, damping: 10 } }}>
+          About
+        </MotionLink>
+        <motion.div
+          className="text-2xl font-semibold text-dark line-through"
+          initial={{ y: 200 }}
+          animate={{ y: 0 }}
+          transition={{ type: 'spring', duration: 1.5, delay: 1.0 }}>
+          Experience
+        </motion.div>
+      </div>
+      <motion.div
+        className={`absolute left-0 top-1/2 -translate-y-1/2 -rotate-90 text-2xl font-semibold line-through ${
+          isClicked ? 'text-iron' : 'text-dark'
+        }`}
+        initial={{ x: -200, rotate: -90 }}
+        animate={{ x: 0, rotate: -90 }}
+        transition={{ type: 'spring', duration: 1.5, delay: 1.0 }}>
+        Gallery
+      </motion.div>
+    </main>
   );
 };
 

src/components/Bear/Bear.stories.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import Bear from './Bear';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Bear> = {
+  component: Bear,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Bear>;
+
+export const Standard: Story = {
+  render: function Compo() {
+    const [_, setValue] = useState<boolean>(false);
+    return (
+      <div className="relative h-screen w-screen">
+        <Bear setIsClicked={setValue} />
+      </div>
+    );
+  },
+};

src/components/Bear/Bear.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+
+import Bear from './Bear';
+
+import type { RenderResult } from '@testing-library/react';
+
+describe('src/components/Bear/Bear.test.tsx', () => {
+  const setIsClickedMock = jest.fn();
+  let renderResult: RenderResult;
+
+  beforeEach(() => {
+    renderResult = render(<Bear setIsClicked={setIsClickedMock} />);
+  });
+
+  afterEach(() => {
+    renderResult.unmount();
+  });
+
+  it('should render the Bear component with the button element', () => {
+    expect(renderResult.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the left-ear element', () => {
+    expect(renderResult.getByTestId('left-ear')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the right-ear element', () => {
+    expect(renderResult.getByTestId('right-ear')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the left-eye element', () => {
+    expect(renderResult.getByTestId('left-eye')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the right-eye element', () => {
+    expect(renderResult.getByTestId('right-eye')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the nose element', () => {
+    expect(renderResult.getByTestId('nose')).toBeInTheDocument();
+  });
+
+  it('should render the Bear component with the shadow element', () => {
+    expect(renderResult.getByTestId('shadow')).toBeInTheDocument();
+  });
+
+  it('should called props function when the button element clicked', () => {
+    const buttonElement = renderResult.getByRole('button');
+    fireEvent.click(buttonElement);
+    expect(setIsClickedMock).toHaveBeenCalledTimes(1);
+  });
+});