💄 ui: update page navigation to navigate gallery page

Bear29ers · Jun 30, 2024 · 7ce4916 · 7ce4916
1 parent abcadfe
commit 7ce4916
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 20 deletions.
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>
     </>
   );
 };