test: 테스트 추가

Author: GitDaun

README.md

@@ -43,9 +43,6 @@ SI 업체에서 근무하면서 언제나 기술적인 목마름을 느꼈습니
 
   - next-themes: 0.4.4 :  Next.js에서 다크모드 지원을 위한 라이브러리
 
-- SVG 파일 처리
-
-  - @svgr/webpack: 8.1.0                    :  SVG 파일을 React 컴포넌트로 변환
 
 - 웹 에니메이션
 

package-lock.json

@@ -14,7 +14,6 @@
     "coverage:ui": "vitest run --coverage && npx vite preview coverage"
   },
   "dependencies": {
-    "@svgr/webpack": "^8.1.0",
     "clsx": "^2.1.1",
     "motion": "^11.15.0",
     "next": "15.1.3",

package.json

@@ -2,29 +2,19 @@
 
 import { useState, useEffect } from 'react'   
 import { motion, AnimatePresence } from 'framer-motion'
+import clsx from 'clsx'
 
-import AboutMe from '@/assets/aboutMe.svg'
-import Blog from '@/assets/blog.svg'
-// import Portfolio from '@/assets/portfolio.svg'
 import DarkModeToggle from './sub/DarkModeToggle'
 import { usePreventScroll } from '@/hooks/usePreventScroll'
-import Button from './sub/Button'
+import { useSmoothScroll } from '@/hooks/useSmoothScroll'
+import { navbarData } from '@/assets/index'
 
-interface NavItem {
-  icon: any;
-  text: string;
-  href: string;
-}
+import Button from './sub/Button'
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(true);
-
-  const navItems: NavItem[] = [
-    { icon: AboutMe, text: 'About Me', href: '/' },
-    { icon: Blog, text: 'Blog', href: 'https://daunje0.tistory.com/' },
-    // { icon: Portfolio, text: 'Portfolio', href: '/' },
-  ];
+  const { scrollToElement } = useSmoothScroll();
 
   useEffect(() => {
     const handleResize = () => {
@@ -41,11 +31,17 @@ export default function Header() {
     setIsOpen(!isOpen);
   };
 
+  // 스크롤 이동과 메뉴 닫기를 함께 처리하는 핸들러
+  const handleScrollAndClose = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    setIsOpen(false);
+    scrollToElement(e, id);
+  };
+
   usePreventScroll(isOpen && isMobile);
 
   return (
-    <header className="relative z-50">
-      <div className="flex justify-between items-center">
+    <header className="fixed top-0 left-0 w-full pt-8 bg-white/80 dark:bg-black/80 backdrop-blur-sm z-50 px-4 py-2">
+      <div className="flex justify-between items-center max-w-7xl mx-auto">
         <nav className='relative flex-grow' >
           <AnimatePresence>
             {(isOpen || !isMobile) && (
@@ -65,23 +61,28 @@ export default function Header() {
                   bg-slate-100/95 dark:bg-black/95 dark:sm:bg-transparent sm:bg-transparent
                   flex flex-col items-center justify-center gap-10 z-50
                 `}
-               
               >
-                {navItems.map(({ icon: Icon, text, href }) => (
+                {navbarData.map((item, i) => (
                   <motion.div 
-                    key={text}
+                    key={item.id}
                     whileHover={{ scale: 1.2 }}
                     whileTap={{ scale: 0.9 }}
                     transition={{ type: "spring", stiffness: 400, damping: 17 }}
                   >
-                    <Icon className='size-6'/>
-                    <li>
-                      {/* <Link href={href}>{text}</Link> */}
-                      <a href={href}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >{text}</a>
-                    </li>
+                    <a 
+                      href={`/#${item.id}`} 
+                      onClick={(e) => handleScrollAndClose(e, item.id)}
+                      className="flex flex-row items-center gap-x-2"
+                    >
+                      <i className={`${item.icon} text-3xl text-yellow-600 leading-none`}></i>
+                      <span className={clsx(
+                        'text-xl tracking-wide text-center dark:text-white leading-none',
+                        'transition-all duration-300',
+                        'sm:opacity-0 sm:group-hover:opacity-100 md:opacity-100'
+                      )}>
+                        {item.name}
+                      </span>
+                    </a>
                   </motion.div>
                 ))}
               </motion.ul>
@@ -115,6 +116,6 @@ export default function Header() {
           <DarkModeToggle />
         </div>
       </div>
-    </header> 
+    </header>
   )
 }

src/app/_components/Header.tsx

@@ -42,9 +42,14 @@ const Modal = ({ onClose }: ModalProps) => {
   return (
     <dialog
       ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image gallery modal"
+      data-testid="modal-dialog"
       className="fixed inset-0 bg-transparent p-0 border-none outline-none"
     >
       <motion.div
+        data-testid="modal-backdrop"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}

src/app/_components/sub/Modal.tsx

@@ -14,8 +14,18 @@ const Swiper = () => {
           [--swiper-navigation-color:theme(colors.black)] dark:[--swiper-navigation-color:theme(colors.white)]
           [--swiper-pagination-color:theme(colors.black)] dark:[--swiper-pagination-color:theme(colors.white)]
           dark:[--swiper-pagination-fraction-color:theme(colors.black)]
+          [--swiper-navigation-size:1.25rem] sm:[--swiper-navigation-size:2rem]
+          [--swiper-navigation-sides-offset:1px] sm:[--swiper-navigation-sides-offset:5rem]
         "
-        spaceBetween={50}
+        spaceBetween={20}
+        breakpoints={{
+          320: {
+            spaceBetween: 20,
+          },
+          640: {
+            spaceBetween: 50,
+          }
+        }}
         virtual={true}
         pagination={{
           type: 'fraction',
@@ -27,7 +37,7 @@ const Swiper = () => {
       >
         {swiperData.map((slide, index) => (
           <SwiperSlide key={index} className="flex items-center justify-center">
-            <div className="relative w-full h-[37.5rem] sm:h-[43.75rem] flex items-center justify-center">
+            <div className="relative w-full h-[30rem] md:h-[43.75rem] flex items-center justify-center">
               <Image 
                 src={slide.imgPath}
                 alt={slide.title}

src/app/_components/sub/Swiper.tsx

@@ -0,0 +1,70 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import DarkModeToggle from '../_components/sub/DarkModeToggle';
+import { vi } from 'vitest';
+
+// next-themes 모킹
+const mockSetTheme = vi.fn();
+vi.mock('next-themes', () => ({
+  useTheme: () => ({
+    theme: 'light',
+    setTheme: mockSetTheme,
+  }),
+}));
+
+// Framer Motion 모킹
+vi.mock('framer-motion', () => ({
+  motion: {
+    button: ({ children, onClick, ...props }: any) => (
+      <button onClick={onClick}>{children}</button>
+    ),
+    i: ({ children, className }: any) => (
+      <i className={className}>{children}</i>
+    ),
+  },
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+describe('DarkModeToggle 컴포넌트', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it('초기 마운트 시 로컬스토리지의 테마를 사용해야 함', () => {
+    localStorage.setItem('theme', 'dark');
+    render(<DarkModeToggle />);
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('로컬스토리지에 테마가 없을 경우 시스템 테마를 사용해야 함', () => {
+    Object.defineProperty(window, 'matchMedia', {
+      value: vi.fn().mockImplementation(query => ({
+        matches: true,
+        media: query,
+      })),
+    });
+
+    render(<DarkModeToggle />);
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('토글 버튼 클릭 시 테마가 변경되어야 함', () => {
+    render(<DarkModeToggle />);
+    const button = screen.getByRole('button');
+    
+    fireEvent.click(button);
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+    expect(localStorage.getItem('theme')).toBe('dark');
+  });
+
+  it('matchMedia API를 사용할 수 없는 경우 기본값으로 light를 사용해야 함', () => {
+    Object.defineProperty(window, 'matchMedia', {
+      value: vi.fn().mockImplementation(() => {
+        throw new Error('matchMedia not supported');
+      }),
+    });
+
+    render(<DarkModeToggle />);
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+}); 

src/app/_test/DarkModeToggle.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import Experience from '../_components/Experience';
+import { experienceData } from '@/assets/index';
+
+// Framer Motion 모킹
+vi.mock('framer-motion', () => ({
+  motion: {
+    div: ({ children, className, onClick, ...props }: any) => (
+      <div className={className} onClick={onClick}>{children}</div>
+    ),
+  },
+  useScroll: () => ({ scrollYProgress: 0 }),
+  useSpring: () => 0,
+  AnimatePresence: ({ children }: any) => <>{children}</>,
+}));
+
+// Heading 컴포넌트 모킹
+vi.mock('../_components/sub/Heading', () => ({
+  default: ({ text }: { text: string }) => <h1>{text}</h1>
+}));
+
+// Modal 컴포넌트 모킹
+vi.mock('../_components/sub/Modal', () => ({
+  default: ({ onClose }: any) => (
+    <>
+      <div 
+        data-testid="modal-backdrop"
+        className="fixed inset-0 bg-black/50 z-50"
+        onClick={onClose}
+      />
+      <div
+        data-testid="modal-content"
+        className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
+      >
+        <button 
+          onClick={onClose} 
+          data-testid="modal-close-button"
+        >
+          Close
+        </button>
+      </div>
+    </>
+  )
+}));
+
+describe('Experience 컴포넌트', () => {
+  beforeEach(() => {
+    render(<Experience />);
+  });
+
+  it('제목이 올바르게 렌더링되어야 함', () => {
+    expect(screen.getByText('Experience & Education')).toBeInTheDocument();
+  });
+
+  it('swaper가 true인 항목 클릭시 모달이 열려야 함', () => {
+    const swaperItem = experienceData.find(data => data.swaper);
+    if (swaperItem) {
+      const cardElement = screen.getByText(swaperItem.title).closest('div');
+      fireEvent.click(cardElement!);
+      
+      expect(screen.getByTestId('modal-backdrop')).toBeInTheDocument();
+      expect(screen.getByTestId('modal-content')).toBeInTheDocument();
+    }
+  });
+
+  it('모달이 열린 상태에서 닫기 버튼 클릭시 모달이 닫혀야 함', () => {
+    const swaperItem = experienceData.find(data => data.swaper);
+    if (swaperItem) {
+      // 모달 열기
+      const cardElement = screen.getByText(swaperItem.title).closest('div');
+      fireEvent.click(cardElement!);
+
+      // 닫기 버튼 클릭
+      const closeButton = screen.getByTestId('modal-close-button');
+      fireEvent.click(closeButton);
+
+      // 모달이 닫혔는지 확인
+      expect(screen.queryByTestId('modal-content')).not.toBeInTheDocument();
+    }
+  });
+
+  it('모달 backdrop 클릭시 모달이 닫혀야 함', () => {
+    const swaperItem = experienceData.find(data => data.swaper);
+    if (swaperItem) {
+      // 모달 열기
+      const cardElement = screen.getByText(swaperItem.title).closest('div');
+      fireEvent.click(cardElement!);
+
+      // backdrop 클릭
+      const backdrop = screen.getByTestId('modal-backdrop');
+      fireEvent.click(backdrop);
+
+      // 모달이 닫혔는지 확인
+      expect(screen.queryByTestId('modal-backdrop')).not.toBeInTheDocument();
+    }
+  });
+});