Merge pull request #125 from Bear29ers/feature/#121_create_a_gallery_…

…page Feature/#121 Create a gallery page（Galleryページの作成）
Bear29ers · Jun 30, 2024 · a43636c · a43636c
2 parents 6aac6e4 + 1b5601b
commit a43636c
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 26 deletions.
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
@@ -0,0 +1,18 @@
+import AnimatedText from '@/components/common/AnimatedText/AnimatedText';
+import Footer from '@/components/layout/Footer/Footer';
+
+import type { NextPage } from 'next';
+
+const Gallery: NextPage = () => {
+  return (
+    <div className="flex w-full flex-col items-center px-2.5 text-white xs:px-5 lg:px-0">
+      <div className="my-24">
+        <AnimatedText text="Gallery" classes="text-[48px] xs:text-[60px] xsm:text-[80px]" />
+      </div>
+      {/* Footer */}
+      <Footer />
+    </div>
+  );
+};
+
+export default Gallery;
diff --git a/src/components/common/menus/MenuList/MenuList.test.tsx b/src/components/common/menus/MenuList/MenuList.test.tsx
@@ -52,7 +52,7 @@ describe('src/components/common/menus/MenuList/MenuList.test.tsx', () => {
   });
 
   it('should have pointer-events-none and line-through class with the Gallery menu item', () => {
-    expect(screen.getByRole('link', { name: 'Gallery' })).toHaveClass('pointer-events-none line-through');
+    expect(screen.getByRole('link', { name: 'Gallery' })).not.toHaveClass('pointer-events-none line-through');
   });
 
   it('should render the GithubIcon component', () => {

diff --git a/src/components/common/menus/MenuList/MenuList.tsx b/src/components/common/menus/MenuList/MenuList.tsx
@@ -10,6 +10,7 @@ import getIconComponent from '@/utils/getIconComponent';
 import type { MenuItem } from '@/types/menuItems';
 import type { SocialMedia } from '@/types/socialMedia';
 
+// TODO: すべてリンクが有効になったらvariatnsを修正する（whileHoverやwhileTapもvariantsに含める）
 const activeMenuVariants = {
   initial: {
     opacity: 0,

diff --git a/src/components/ui/PageNavigation/PageNavigation.test.tsx b/src/components/ui/PageNavigation/PageNavigation.test.tsx
@@ -36,11 +36,11 @@ describe('src/components/ui/PageNavigation/PageNavigation.test.tsx', () => {
       expect(screen.getByRole('link', { name: 'Experience' })).toHaveClass('text-white');
     });
 
-    it('should render the Gallery text', () => {
-      expect(screen.getByText('Gallery')).toBeInTheDocument();
+    it('should render the Gallery link', () => {
+      expect(screen.getByRole('link', { name: 'Gallery' })).toBeInTheDocument();
     });
 
-    it('should have text-white class with the Gallery text', () => {
+    it('should have text-white class with the Gallery page link', () => {
       expect(screen.getByText('Gallery')).toHaveClass('text-white');
     });
   });
@@ -64,12 +64,12 @@ describe('src/components/ui/PageNavigation/PageNavigation.test.tsx', () => {
       expect(screen.getByRole('link', { name: 'About' })).toHaveClass('text-white');
     });
 
-    it('should have lg:text-dark class with the Gallery text', () => {
-      expect(screen.getByText('Gallery')).toHaveClass('lg:text-dark');
+    it('should have lg:text-dark class with the Gallery page link', () => {
+      expect(screen.getByRole('link', { name: 'Gallery' })).toHaveClass('lg:text-dark');
     });
 
-    it('should have text-white class with the Gallery text', () => {
-      expect(screen.getByText('Gallery')).toHaveClass('text-white');
+    it('should have text-white class with the Gallery page link', () => {
+      expect(screen.getByRole('link', { name: 'Gallery' })).toHaveClass('text-white');
     });
   });
 });
diff --git a/src/components/ui/PageNavigation/PageNavigation.tsx b/src/components/ui/PageNavigation/PageNavigation.tsx
@@ -9,44 +9,71 @@ interface Props {
   isClicked: boolean;
 }
 
+const animateTransitionValue = {
+  type: 'spring',
+  duration: 1.5,
+  delay: 1.0,
+};
+
+const bounceTransitionValue = {
+  type: 'spring',
+  stiffness: 400,
+  damping: 10,
+};
+
+const variants = {
+  hover: {
+    scale: 1.1,
+    transition: bounceTransitionValue,
+  },
+  tap: {
+    scale: 0.9,
+    transition: bounceTransitionValue,
+  },
+};
+
 // TODO: すべてリンクとして使用できるようになったら、個別のリンクとしてコンポーネント化する
 const PageNavigation: FC<Props> = ({ isClicked }) => {
   return (
     <>
       <motion.div
         className="absolute -right-4 top-1/2 z-40 -translate-y-1/2 rotate-90 text-xl font-semibold text-white line-through xs:-right-2.5 xxs:right-0 md:text-2xl"
         initial={{ x: 200, rotate: 90 }}
-        animate={{ x: 0, rotate: 90 }}
-        transition={{ type: 'spring', duration: 1.5, delay: 1.0 }}>
+        animate={{ x: 0, rotate: 90, transition: animateTransitionValue }}>
         Works
       </motion.div>
       <div className="absolute bottom-2 flex w-screen justify-around xxs:bottom-3">
         <MotionLink
           href="/about"
           className={`z-40 text-xl font-semibold md:text-2xl ${isClicked ? 'text-white lg:text-dark' : 'text-white'}`}
           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 } }}>
+          variants={variants}
+          animate={{ y: 0, transition: animateTransitionValue }}
+          whileHover="hover"
+          whileTap="tap">
           About
         </MotionLink>
         <MotionLink
           href="/experience"
           className="z-40 text-xl font-semibold text-white md:text-2xl"
+          variants={variants}
           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 } }}>
+          animate={{ y: 0, transition: animateTransitionValue }}
+          whileHover="hover"
+          whileTap="tap">
           Experience
         </MotionLink>
       </div>
-      <motion.div
-        className={`absolute -left-4 top-1/2 z-40 -translate-y-1/2 -rotate-90 text-xl font-semibold line-through xs:-left-2.5 xxs:left-0 md:text-2xl ${isClicked ? 'text-white lg:text-dark' : 'text-white'}`}
+      <MotionLink
+        href="/gallery"
+        className={`absolute -left-4 top-1/2 z-40 -translate-y-1/2 -rotate-90 text-xl font-semibold xs:-left-2.5 xxs:left-0 md:text-2xl ${isClicked ? 'text-white lg:text-dark' : 'text-white'}`}
+        variants={variants}
         initial={{ x: -200, rotate: -90 }}
-        animate={{ x: 0, rotate: -90 }}
-        transition={{ type: 'spring', duration: 1.5, delay: 1.0 }}>
+        animate={{ x: 0, rotate: -90, transition: animateTransitionValue }}
+        whileHover="hover"
+        whileTap="tap">
         Gallery
-      </motion.div>
+      </MotionLink>
     </>
   );
 };

diff --git a/src/constants/menuItems.ts b/src/constants/menuItems.ts
@@ -21,14 +21,14 @@ export const MENU_ITEMS: MenuItem[] = [
   },
   {
     id: 4,
-    href: '/works',
-    text: 'Works',
-    isAvaliable: false,
+    href: '/gallery',
+    text: 'Gallery',
+    isAvaliable: true,
   },
   {
     id: 5,
-    href: '/gallery',
-    text: 'Gallery',
+    href: '/works',
+    text: 'Works',
     isAvaliable: false,
   },
 ];