diff --git a/jest.config.js b/jest.config.js
index 65ddb8a..f3d0a53 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,8 @@
 /* eslint-disable no-undef */
 module.exports = {
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1' // '@' 접두사를 'src' 디렉토리로 매핑
+    '^@/(.*)$': '<rootDir>/src/$1', // '@' 접두사를 'src' 디렉토리로 매핑
+    '^@utils/(.*)$': '<rootDir>/src/utils/$1'
   },
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
diff --git a/src/components/layout/footer/Footer.test.tsx b/src/components/layout/footer/Footer.test.tsx
new file mode 100644
index 0000000..2354d2e
--- /dev/null
+++ b/src/components/layout/footer/Footer.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Footer from '@/components/layout/footer/Footer';
+import { useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+  usePathname: jest.fn()
+}));
+
+describe('Footer 컴포넌트', () => {
+  const pushMock = jest.fn();
+  beforeEach(() => {
+    (useRouter as jest.Mock).mockImplementation(() => ({
+      push: pushMock
+    }));
+    (usePathname as jest.Mock).mockImplementation(() => '/'); // 기본 경로를 '/'로 설정
+    sessionStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  test('정상적으로 렌더링되는지 확인', () => {
+    render(<Footer />);
+    expect(screen.getByText('홈')).toBeInTheDocument();
+    expect(screen.getByText('예약')).toBeInTheDocument();
+    expect(screen.getByText('내 주변')).toBeInTheDocument();
+    expect(screen.getByText('커뮤니티')).toBeInTheDocument();
+    expect(screen.getByText('마이')).toBeInTheDocument();
+  });
+
+  test('각 링크가 올바른 경로로 이동하는지 확인', () => {
+    render(<Footer />);
+    expect(screen.getByText('홈').closest('a')).toHaveAttribute('href', '/');
+    expect(screen.getByText('예약').closest('a')).toHaveAttribute('href', '/reservation');
+    expect(screen.getByText('내 주변').closest('a')).toHaveAttribute('href', '/map');
+    expect(screen.getByText('마이').closest('a')).toHaveAttribute('href', '/mypage');
+  });
+
+  test('현재 경로에 따라 활성 링크 스타일이 적용되는지 확인', () => {
+    (usePathname as jest.Mock).mockImplementation(() => '/community');
+    render(<Footer />);
+    expect(screen.getByAltText('community')).toHaveAttribute(
+      'src',
+      '/CheckedCommunity.svg'
+    );
+  });
+
+  test('커뮤니티 클릭 시 세션 스토리지에서 데이터가 제거되고, /community로 이동하는지 확인', () => {
+    sessionStorage.setItem('scrollPosition', '123');
+    sessionStorage.setItem('savedData', 'data');
+    render(<Footer />);
+    fireEvent.click(screen.getByText('커뮤니티'));
+    expect(sessionStorage.getItem('scrollPosition')).toBeNull();
+    expect(sessionStorage.getItem('savedData')).toBeNull();
+    expect(pushMock).toHaveBeenCalledWith('/community');
+  });
+});
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
index 53a6f95..e521aa8 100644
--- a/src/components/layout/footer/Footer.tsx
+++ b/src/components/layout/footer/Footer.tsx
@@ -1,8 +1,8 @@
 import deleteFirstWord from '@/utils/deleteFirtstWord';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useRouter } from 'next/router';
-
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 const Footer = () => {
   const router = useRouter();
   const pathName = usePathname();
@@ -21,9 +21,9 @@ const Footer = () => {
           <div className="  h-[44.84px] flex-col justify-start items-center gap-2.5 inline-flex">
             <div className="w-[22.06px] h-[21.82px] flex-col justify-center items-center">
               {filteredPathName === '' ? (
-                <img className="w-5 h-5 " src="/CheckedHome.svg" alt="home" />
+                <Image src="/CheckedHome.svg" alt="home" width={20} height={20} />
               ) : (
-                <img className="w-5 h-5 " src="/Home.svg" alt="home" />
+                <Image src="/Home.svg" alt="home" width={20} height={20} />
               )}
             </div>
             <div className="text-center text-black text-xs font-normal font-['Pretendard']">
diff --git a/src/components/shared/Button.test.tsx b/src/components/shared/Button.test.tsx
new file mode 100644
index 0000000..44725f5
--- /dev/null
+++ b/src/components/shared/Button.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+
+import Button from './Button';
+
+describe('Button', () => {
+  test('renders the Button component', () => {
+    render(<Button label="Hello world!" />);
+  });
+});
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
new file mode 100644
index 0000000..471562e
--- /dev/null
+++ b/src/components/shared/Button.tsx
@@ -0,0 +1,9 @@
+export interface ButtonProps {
+  label: string;
+}
+
+const Button = (props: ButtonProps) => {
+  return <button>{props.label}</button>;
+};
+
+export default Button;