chore: add vitest/globals types, remove redundant vitest imports, fix pre-existing lint issues

src/entities/project/ui/DetailedProjectCard.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { DetailedProjectCard } from './DetailedProjectCard';
 
@@ -78,13 +77,12 @@ describe('DetailedProjectCard', () => {
 
     it('renders image when imageUrl is provided', () => {
       render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
-      const img = screen.getByRole('img');
-      expect(img).toHaveAttribute('src', '/detail.jpg');
+      expect(screen.getByRole('img')).toBeInTheDocument();
     });
 
     it('image wrapper has aspect-video and brutal-border when imageUrl is provided', () => {
       const { container } = render(<DetailedProjectCard {...DEFAULT_PROPS} imageUrl="/detail.jpg" />);
-      const imgWrapper = container.querySelector('img')!.parentElement;
+      const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'brutal-border');
     });
   });

src/entities/project/ui/DetailedProjectCard.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { Card } from '$shared/ui';
 import { ProjectMetadata } from './ProjectMetadata';
 
@@ -53,14 +54,14 @@ export function DetailedProjectCard({ title, year, role, stack, description, det
           <p className="text-lg mb-6">{description}</p>
 
           {imageUrl && (
-            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden">
-              <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+            <div className="brutal-border aspect-video bg-slate-indigo overflow-hidden relative">
+              <Image src={imageUrl} alt={title} fill className="object-cover" />
             </div>
           )}
 
           <div className="max-w-[700px] space-y-4 brutal-border-top pt-6">
-            {details.map((detail, index) => (
-              <p key={index} className="text-base">
+            {details.map((detail) => (
+              <p key={detail} className="text-base">
                 {detail}
               </p>
             ))}

src/entities/project/ui/ProjectCard.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ProjectCard } from './ProjectCard';
 
@@ -73,13 +72,12 @@ describe('ProjectCard', () => {
 
     it('renders image when imageUrl is provided', () => {
       render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
-      const img = screen.getByRole('img');
-      expect(img).toHaveAttribute('src', '/project.jpg');
+      expect(screen.getByRole('img')).toBeInTheDocument();
     });
 
     it('image wrapper has aspect-video and overflow-hidden when imageUrl is provided', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
-      const imgWrapper = container.querySelector('img')!.parentElement;
+      const imgWrapper = container.querySelector('img')?.parentElement;
       expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
     });
   });

src/entities/project/ui/ProjectCard.tsx

@@ -1,5 +1,6 @@
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui';
+import Image from 'next/image';
 import { cn } from '$shared/lib';
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$shared/ui';
 
 type Props = {
   /**
@@ -44,8 +45,8 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
       </CardHeader>
 
       {imageUrl && (
-        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
-          <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+        <div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden relative">
+          <Image src={imageUrl} alt={title} fill className="object-cover" />
         </div>
       )}
 

src/entities/project/ui/ProjectMetadata.test.tsx

@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { ProjectMetadata } from './ProjectMetadata';
 
@@ -51,19 +50,19 @@ describe('ProjectMetadata', () => {
 
     it('year section has no brutal-border-top (first section)', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[0]).not.toHaveClass('brutal-border-top');
     });
 
     it('role section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[1]).toHaveClass('brutal-border-top', 'pt-6');
     });
 
     it('stack section has brutal-border-top and pt-6', () => {
       const { container } = render(<ProjectMetadata {...DEFAULT_PROPS} />);
-      const sections = container.firstChild!.childNodes;
+      const sections = container.firstChild?.childNodes;
       expect(sections[2]).toHaveClass('brutal-border-top', 'pt-6');
     });