Merge pull request #33 from GDSC-PKNU-21-22/feat/#9

Feat/#9: 하단 탭 구현

src/components/FooterTab/index.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+
+import FooterTab from './index';
+
+describe('하단 탭 아이콘 클릭 테스트', () => {
+  const getIcons = () => screen.getAllByRole('button');
+
+  it('클릭된 버튼을 primary 색으로 설정', () => {
+    render(<FooterTab />, { wrapper: MemoryRouter });
+    const icons = getIcons();
+
+    icons.forEach(async (icon) => {
+      await userEvent.click(icon);
+      icons.forEach((i) => {
+        const expectedColor = i === icon ? '#71BC5C' : 'black';
+        expect(i).toHaveStyle(`color: ${expectedColor}`);
+      });
+    });
+  });
+
+  it('버튼 클릭 시 URL 이동', () => {
+    render(<FooterTab />, { wrapper: MemoryRouter });
+    const icons = getIcons();
+
+    const { location } = window;
+    window.location = { ...location, href: '' };
+
+    const urls = ['/map', '/', '/my'];
+    icons.forEach(async (icon, index) => {
+      await userEvent.click(icon);
+
+      expect(window.location.href).toBe(urls[index]);
+    });
+
+    window.location = location;
+  });
+});

src/components/FooterTab/index.tsx

@@ -1,5 +1,61 @@
+import Icon from '@components/Icon';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { IconKind } from '@type/styles/icon';
+import { useNavigate } from 'react-router-dom';
+
+const footerIcons = [
+  { kind: 'map', path: '/map' },
+  { kind: 'home', path: '/' },
+  { kind: 'accountCircle', path: '/my' },
+] as const;
+
 const FooterTab = () => {
-  return <h1>FooterTab</h1>;
+  const navigate = useNavigate();
+
+  const handleIconClick = (kind: IconKind, path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <Footer>
+      {footerIcons.map(({ kind, path }) => (
+        <IconContainer
+          key={kind}
+          role="button"
+          onClick={() => handleIconClick(kind, path)}
+        >
+          <Icon
+            key={kind}
+            kind={kind}
+            color={
+              window.location.pathname === path
+                ? THEME.PRIMARY
+                : THEME.TEXT.BLACK
+            }
+          />
+        </IconContainer>
+      ))}
+    </Footer>
+  );
 };
 
+const Footer = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: space-around;
+  bottom: 0;
+  width: 100vw;
+  height: 70px;
+  background: white;
+`;
+
+const IconContainer = styled.div`
+  width: 100%;
+  text-align: center;
+  &: hover {
+    cursor: pointer;
+  }
+`;
+
 export default FooterTab;