fix: sprite svg로 변경

src/components/common/BottomNavigation/index.tsx

@@ -1,10 +1,8 @@
-import { ReactComponent as HomeIcon } from 'assets/svg/common/home.svg';
-import { ReactComponent as WriteIcon } from 'assets/svg/common/write.svg';
-import { ReactComponent as MyPageIcon } from 'assets/svg/common/my-page.svg';
 import { Link, useLocation } from 'react-router-dom';
 import cn from 'utils/ts/classNames';
 import { useAuth } from 'store/auth';
 import styles from './BottomNavigation.module.scss';
+import SpriteSvg from '../SpriteSvg';
 
 export default function BottomNavigation(): JSX.Element {
   const { pathname } = useLocation();
@@ -13,17 +11,17 @@ export default function BottomNavigation(): JSX.Element {
   const NAV_TABS = [
     {
       pathname: '/',
-      icon: HomeIcon,
+      icon: 'home',
       text: '홈',
     },
     {
       pathname: '/post',
-      icon: WriteIcon,
+      icon: 'write',
       text: '글쓰기',
     },
     {
       pathname: auth ? '/profile' : '/login',
-      icon: MyPageIcon,
+      icon: 'my-page',
       text: '마이페이지',
     },
   ];
@@ -40,7 +38,10 @@ export default function BottomNavigation(): JSX.Element {
             })}
           >
             <Link className={styles.tab__link} to={tab.pathname}>
-              <tab.icon className={styles.tab__icon} aria-hidden />
+              <div className={styles.tab__icon}>
+
+                <SpriteSvg id={`${tab.icon}`} />
+              </div>
               <div className={styles.tab__text}>{tab.text}</div>
             </Link>
           </li>

src/components/common/SideNavigation/index.tsx

@@ -1,19 +1,14 @@
-import { ReactComponent as LogoIcon } from 'assets/svg/common/logo.svg';
-import { ReactComponent as SettingIcon } from 'assets/svg/common/setting.svg';
-import { ReactComponent as WriteIcon } from 'assets/svg/common/write.svg';
-import { ReactComponent as MyPageIcon } from 'assets/svg/common/my-page.svg';
 import { ReactComponent as SearchIcon } from 'assets/svg/search/lens.svg';
 import { ReactComponent as StoreFrontIcon } from 'assets/svg/home/storefront.svg';
 import { ReactComponent as BookMarkIcon } from 'assets/svg/home/bookmark.svg';
 import { ReactComponent as GroupIcon } from 'assets/svg/home/group.svg';
-import { ReactComponent as ExpandIcon } from 'assets/svg/common/expand.svg';
-import { ReactComponent as FoldIcon } from 'assets/svg/common/fold.svg';
 import { useAuth, useClearAuth } from 'store/auth';
 import cn from 'utils/ts/classNames';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import { Link, useLocation } from 'react-router-dom';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';
 import styles from './SideNavigation.module.scss';
+import SpriteSvg from '../SpriteSvg';
 
 export default function TopNavigation(): JSX.Element {
   const auth = useAuth();
@@ -33,7 +28,7 @@ export default function TopNavigation(): JSX.Element {
   const TABS = [
     {
       name: '',
-      icon: <LogoIcon />,
+      icon: <SpriteSvg id="logo" height="45" width="43" />,
       link: '/',
 
     },
@@ -45,17 +40,17 @@ export default function TopNavigation(): JSX.Element {
     },
     {
       name: '글쓰기',
-      icon: <WriteIcon />,
+      icon: <SpriteSvg id="write" height="24" width="24" />,
       link: '/search',
     },
     {
       name: '마이페이지',
-      icon: <MyPageIcon />,
+      icon: <SpriteSvg id="my-page" height="24" width="18" />,
       link: auth ? '/profile' : '/login',
     },
     {
       name: '설정',
-      icon: <SettingIcon />,
+      icon: <SpriteSvg id="setting" height="24" width="24" />,
       link: '/setting',
     },
   ];
@@ -117,7 +112,7 @@ export default function TopNavigation(): JSX.Element {
           onClick={toggle}
           aria-label="펼치기"
         >
-          {visible ? <FoldIcon /> : <ExpandIcon />}
+          {visible ? <SpriteSvg id="fold" /> : <SpriteSvg id="expand" />}
         </button>
       </nav>
       <div

src/components/common/SpriteSvg/index.tsx

@@ -0,0 +1,15 @@
+import spriteSvg from 'assets/svg/common/sprite-svg.svg';
+
+interface SpriteProps {
+  id: string;
+  height?: string;
+  width?: string;
+}
+
+export default function SpriteSvg({ id, height = '24', width = '24' }:SpriteProps): JSX.Element {
+  return (
+    <svg height={height} width={width} fill="#FFFFFF">
+      <use xlinkHref={`${spriteSvg}#${id}`} />
+    </svg>
+  );
+}

src/pages/Home/components/Map/index.tsx

@@ -1,4 +1,3 @@
-// import useGeolocation from 'utils/hooks/useGeolocation';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import { useEffect } from 'react';
 import { useFilterFriend, useFilterNearby, useFilterScrap } from 'store/filter';