사이드바 구현

.storybook/preview.js

@@ -2,6 +2,7 @@ import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from '@emotion/react';
 import GlobalStyle from '../src/styles/global';
 import theme from '../src/styles/theme';
+import { BrowserRouter } from 'react-router-dom';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -18,7 +19,9 @@ export const decorators = [
     <RecoilRoot>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
-        <Story />
+        <BrowserRouter>
+          <Story />
+        </BrowserRouter>
       </ThemeProvider>
     </RecoilRoot>
   ),

src/@types/image.d.ts

@@ -1,2 +1,3 @@
 declare module '*.jpg';
 declare module '*.png';
+declare module '*.svg';

src/App.tsx

@@ -1,15 +1,19 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import PrivateRoute from './components/common/PrivateRoute';
 import ErrorBoundary from './components/common/ErrorBoundary';
+
 import Uri from './constants/uri';
+
 import HomePage from './pages/HomePage';
 import NotFoundPage from './pages/NotFoundPage';
 import ServiceEditPage from './pages/ServiceEditPage';
 import ServicePage from './pages/ServicePage';
 import SigninPage from './pages/SigninPage';
 import SignupPage from './pages/SignupPage';
-import PrivateRoute from './components/common/PrivateRoute';
+import FeedbackMessagePage from './pages/FeedbackMessagePage';
+
 import { useUserStateValue } from './atoms/userState';
 
 const App: FC = () => {
@@ -39,7 +43,15 @@ const App: FC = () => {
           component={ServicePage}
           isAccessible={isAuthenticated}
         />
+
+        {/* 
+          @TODO PrivateRoute로 변경
+            요 두 개의 페이지는 원래 Private으로 가야 하지만 아직은 테스트 용이성을 위해 Route로 남깁니다.
+            추후 채팅을 구현할 때 PrivateRoute로 변경합시다!
+         */}
         <Route path={Uri.serviceEdit} exact component={ServiceEditPage} />
+        <Route path={Uri.feedback} exact component={FeedbackMessagePage} />
+
         <Route component={NotFoundPage} />
       </Switch>
     </ErrorBoundary>

src/components/common/IconTabBar/index.test.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import IconTabBar from '.';
+
+describe('<IconTabBar/> component test', () => {
+  it('탭 요소들을 렌더링 해야 합니다.', () => {
+    render(
+      <MemoryRouter>
+        <IconTabBar>
+          <IconTabBar.TabItem>ITEM 1</IconTabBar.TabItem>
+          <IconTabBar.TabItem>ITEM 2</IconTabBar.TabItem>
+          <IconTabBar.TabItem>ITEM 3</IconTabBar.TabItem>
+          <IconTabBar.TabIcon src="#">ICON 1</IconTabBar.TabIcon>
+          <IconTabBar.TabIcon src="#">ICON 2</IconTabBar.TabIcon>
+          <IconTabBar.TabIcon src="#">ICON 3</IconTabBar.TabIcon>
+        </IconTabBar>
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByText('ITEM 1')).toBeInTheDocument();
+    expect(screen.queryByText('ITEM 2')).toBeInTheDocument();
+    expect(screen.queryByText('ITEM 3')).toBeInTheDocument();
+
+    expect(screen.queryByAltText('ICON 1')).toBeInTheDocument();
+    expect(screen.queryByAltText('ICON 2')).toBeInTheDocument();
+    expect(screen.queryByAltText('ICON 3')).toBeInTheDocument();
+  });
+
+  describe('<IconTabBar.TabItem/> component test', () => {
+    it('자식 요소를 렌더링 해야 합니다.', () => {
+      render(
+        <MemoryRouter>
+          <IconTabBar.TabItem>Content</IconTabBar.TabItem>
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByText('Content')).toBeInTheDocument();
+    });
+
+    it('함수로 전달된 자식 요소에 URL을 기반으로한 선택 여부를 전달해야 합니다.', () => {
+      render(
+        <MemoryRouter initialEntries={['/target']}>
+          <IconTabBar.TabItem to="/target">
+            {(selected) => selected && 'TRUE'}
+          </IconTabBar.TabItem>
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByText('TRUE')).toBeInTheDocument();
+    });
+
+    it('클릭 핸들러가 지정된 탭 요소를 클릭하면 해당 클릭 핸들러가 호출되어야 합니다.', () => {
+      let isClickHandlerCalled = false;
+
+      render(
+        <MemoryRouter>
+          <IconTabBar.TabItem
+            onClickHandler={() => {
+              isClickHandlerCalled = true;
+            }}
+          >
+            ITEM
+          </IconTabBar.TabItem>
+        </MemoryRouter>,
+      );
+
+      fireEvent.click(screen.getByText('ITEM'));
+
+      expect(isClickHandlerCalled).toBeTruthy();
+    });
+
+    it('링크 URL이 지정된 탭 요소를 클릭하면 해당 URL로 이동해야 합니다.', () => {
+      const history = createMemoryHistory();
+
+      render(
+        <Router history={history}>
+          <IconTabBar.TabItem to="/target">ITEM</IconTabBar.TabItem>
+        </Router>,
+      );
+
+      fireEvent.click(screen.getByText('ITEM'));
+
+      expect(history.location.pathname).toBe('/target');
+    });
+  });
+
+  describe('<IconTabBar.TabIcon/> component test', () => {
+    const DEFAULT_ALT_TEXT = 'icon';
+
+    it('클릭 핸들러가 지정된 아이콘을 클릭하면 해당 클릭 핸들러가 호출되어야 합니다.', () => {
+      let isClickHandlerCalled = false;
+
+      render(
+        <MemoryRouter>
+          <IconTabBar.TabIcon
+            src="#"
+            onClickHandler={() => {
+              isClickHandlerCalled = true;
+            }}
+          />
+        </MemoryRouter>,
+      );
+
+      fireEvent.click(screen.getByRole('img', { name: DEFAULT_ALT_TEXT }));
+
+      expect(isClickHandlerCalled).toBeTruthy();
+    });
+
+    it('링크 URL이 지정된 아이콘을 클릭하면 해당 URL로 이동해야 합니다.', () => {
+      const history = createMemoryHistory();
+
+      render(
+        <Router history={history}>
+          <IconTabBar.TabIcon src="#" to="/target" />
+        </Router>,
+      );
+
+      fireEvent.click(screen.getByRole('img', { name: DEFAULT_ALT_TEXT }));
+
+      expect(history.location.pathname).toBe('/target');
+    });
+
+    it('아이콘 이미지의 대체 텍스트를 지정할 수 있어야 합니다.', () => {
+      render(
+        <MemoryRouter>
+          <IconTabBar.TabIcon src="#" to="/target">
+            Icon Alt Text
+          </IconTabBar.TabIcon>
+        </MemoryRouter>,
+      );
+
+      expect(screen.queryByAltText('Icon Alt Text')).toBeInTheDocument();
+    });
+  });
+});

src/components/common/IconTabBar/index.tsx

@@ -0,0 +1,118 @@
+import { Theme } from '@emotion/react';
+import React, { FC, MouseEventHandler } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import {
+  tabBarStyle,
+  tabIconStyle,
+  tabItemStyle,
+  tabCurvedBlockStyle,
+} from './style';
+
+type TabItemProps = {
+  to?: string;
+  onClickHandler?: MouseEventHandler<HTMLButtonElement>;
+  children: React.ReactNode | ((selected: boolean) => React.ReactNode);
+};
+
+const TabItem: FC<TabItemProps> = ({ children, to, onClickHandler }) => {
+  const history = useHistory();
+  const location = useLocation();
+
+  const onClickTabItem: MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (to) {
+      history.push(to);
+    }
+    if (onClickHandler) {
+      onClickHandler(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className="tab-item"
+      css={tabItemStyle}
+      onClick={onClickTabItem}
+    >
+      {typeof children === 'function'
+        ? children(to === location.pathname)
+        : children}
+    </button>
+  );
+};
+
+TabItem.defaultProps = {
+  to: null,
+  onClickHandler: null,
+};
+
+type TabIconProps = {
+  src: string;
+  children?: string;
+  selectable?: boolean;
+} & Omit<TabItemProps, 'children'>;
+
+const TabIcon: FC<TabIconProps> = ({
+  children,
+  src,
+  to,
+  selectable,
+  onClickHandler,
+}) => {
+  return (
+    <TabItem to={to} onClickHandler={onClickHandler}>
+      {(selected) => (
+        <div
+          css={tabCurvedBlockStyle}
+          className={`curved-block-wrap ${
+            !selected || !selectable ? 'not-selected' : ''
+          }`}
+        >
+          <div className="curved-block start" />
+          <div
+            css={tabIconStyle}
+            className={`tab-icon ${selected && selectable ? 'selected' : ''}`}
+          >
+            <img src={src} alt={children} />
+          </div>
+          <div className="curved-block end" />
+        </div>
+      )}
+    </TabItem>
+  );
+};
+
+TabIcon.defaultProps = {
+  children: 'icon',
+  selectable: true,
+};
+
+type IconTabBarProps = {
+  direction?: 'top' | 'right' | 'bottom' | 'left';
+};
+
+const IconTabBar: FC<IconTabBarProps> & {
+  TabIcon: FC<TabIconProps>;
+  TabItem: FC<TabItemProps>;
+} = ({ children, direction }) => {
+  const isRow = direction === 'top' || direction === 'bottom';
+
+  return (
+    <div
+      className={direction}
+      css={(cssTheme: Theme) => tabBarStyle(cssTheme, isRow)}
+    >
+      {children}
+    </div>
+  );
+};
+
+IconTabBar.defaultProps = {
+  direction: 'right',
+};
+
+IconTabBar.TabIcon = TabIcon;
+IconTabBar.TabItem = TabItem;
+
+export default IconTabBar;