[5주차] 이효린 미션 제출합니다.

image.d.ts

@@ -4,6 +4,8 @@ declare module '*.png' {
 }
 
 declare module '*.svg' {
-  const value: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default value;
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
 }

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg"
   },
   "dependencies": {
     "@typescript-eslint/parser": "^8.6.0",
@@ -35,6 +36,7 @@
     "globals": "^15.9.0",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/assets/svg/Home.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgHome = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    viewBox="0 0 90 90"
+    {...props}
+  >
+    <path fill="url(#Home_svg__a)" d="M0 0h90v90H0z" />
+    <defs>
+      <pattern
+        id="Home_svg__a"
+        width={1}
+        height={1}
+        patternContentUnits="objectBoundingBox"
+      >
+        <use xlinkHref="#Home_svg__b" transform="scale(.01111)" />
+      </pattern>
+      <image
+        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAACjElEQVR4nO2csWoUURSGP1FimsDWKlZaxC42PoLaaKudlZWa0tbO5BGshOgLaOUTqGmMlY2VYmKpMRACikcGZkAHd7PZnJlz5u7/wd/ssCz349+7c7jLgBBCCCGE+JdFYB3YAb4Ca/VrwpEzwFvAWnkHnJdpH1aAT/+R3GQbuCLZx+MWsD9BcpMD4I5kH52T9R5sR8wT4NQMnzeXLAEvZpDc5BUwil5Edi4AH44huclHYDl6MVm5CnxzkNzkB3AjelHZuAv8dJTc5BfwMHpxGVgENjoQ3M7GFMPNwl8DUfv2ca2+PtghZLMHyU02688cx2F3OdX14oYQ6yg7E4abdpPbqcb+QXF7yiGkq4wbbqZ5b9FDiHWU9nBThOgl4GUCuZOGm8GLvug0hHSVZrgZtOjrwPcEMg/LtINSSlbrgcEKSipOA08TSLGSRY87CbFCkoLLwOcEMqxk0dFDiJUuOtsQYiWKHtU3/DZHGfUtOfsQYh0ON5f6knzN+STEBpbq5OZm15JLHEJshvwGHgEnvAVXpwvPEyzQkuWZ98nL4wSLsqSp3LixnWBBljTVyYxE073oL56i52koscitY6GWrS2EmL8h2JwljOiFm0THSzE1mnBh2jrIHe3RSPRg2qdGI9Hhe6ap0RLtSnRrTY2WaFeiW2tqtES7Et1aU6Ml2pXo1poaLdGuRLfW1GiJdiW6taZGS7Qr0a01NVqiXYluranREu1KdGtNjZZoV6Jba2q0RLsS3VpL/i2RaCSa6NambPRegsVbT9mNFN3nAwItOG8iRT9IIMB6yr3ox/q8TyDBOs5WhmeTnitc9hZwliRUzb5f72Ml/EDuAa/r7SK8yUIIIYQQQgghhBAk4w9m9qGhd3r3SQAAAABJRU5ErkJggg=="
+        id="Home_svg__b"
+        width={90}
+        height={90}
+      />
+    </defs>
+  </svg>
+);
+export default SvgHome;

src/assets/svg/Plus.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgPlus = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    viewBox="0 0 90 90"
+    {...props}
+  >
+    <path fill="url(#Plus_svg__a)" d="M0 0h90v90H0z" />
+    <defs>
+      <pattern
+        id="Plus_svg__a"
+        width={1}
+        height={1}
+        patternContentUnits="objectBoundingBox"
+      >
+        <use xlinkHref="#Plus_svg__b" transform="scale(.01111)" />
+      </pattern>
+      <image
+        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1UlEQVR4nO3byUoDURSE4do5D+/g9HgOIILDQvDpVNxonBLwEYygy1DScHUhIumm23v75P/gbMzm3KIWEU4kAAAAALNgQdJ87iWiWpd0IelFktOMJJ1LWsu9XBQ7PwL+OVXg27mX7LtlScM/Qv6aJ0lLuZfts6MpQv6aw9zL9tlNjaCvcy/bZx81gn7PvWyfueagIYL+J6bRBB2KaTRBh2IaTdChmEYTdCim0QQdimk0QYdiGk3QoZhGE3QoptEEHYppNEGHYhpN0J2q7tsO0lXQW4PGueczTm/f7/LWr7rYvC/gsS5kBpI2u7jqJGT9esXa6n32WQENcqFz2mbQowIe5EKnut9uxZykSQEPcqEzSRkRtHoStKb8ecOszlAtOi3gQS50jtv+ejco4FEubB4lrapl1ZdzwtZ3yLeSNtSRRUl7kq7Sv6OesRlLupS0m7IIwzUHDRH0PzGNJuhQTKMJOhTTaIIOxTSaoEMxjSboUEyjCToU02iCDsU0mqBDMY0m6FBMowk6FNNogg5lXKPRr7mX7bPrGkFXF0Ro6KBG0NWZFhpamvKw8i7aLVwOW5Ie/gj5vsurzlmzIukkXddP0jynv1WfoQNzbf5mBAAAAICK9QkSkO5NnQjE8wAAAABJRU5ErkJggg=="
+        id="Plus_svg__b"
+        width={90}
+        height={90}
+      />
+    </defs>
+  </svg>
+);
+export default SvgPlus;

src/assets/svg/Search.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgSearch = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 25"
+    {...props}
+  >
+    <path
+      fill="#000"
+      d="m20.417 21.875-6.563-6.563a6.35 6.35 0 0 1-3.958 1.354c-1.893 0-3.494-.655-4.805-1.966-1.31-1.31-1.966-2.912-1.966-4.804 0-1.893.655-3.494 1.966-4.805 1.31-1.31 2.912-1.966 4.805-1.966 1.892 0 3.494.655 4.804 1.966 1.311 1.31 1.967 2.912 1.967 4.805a6.35 6.35 0 0 1-1.355 3.958l6.563 6.563-1.458 1.458ZM9.896 14.583c1.302 0 2.409-.455 3.32-1.367.912-.911 1.367-2.018 1.367-3.32s-.455-2.409-1.367-3.32c-.911-.912-2.018-1.368-3.32-1.368s-2.409.456-3.32 1.368c-.912.911-1.368 2.018-1.368 3.32s.456 2.409 1.368 3.32c.911.912 2.018 1.367 3.32 1.367Z"
+    />
+  </svg>
+);
+export default SvgSearch;

src/assets/svg/Video.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgVideo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    fill="none"
+    viewBox="0 0 90 90"
+    {...props}
+  >
+    <path fill="url(#Video_svg__a)" d="M0 0h90v90H0z" />
+    <defs>
+      <pattern
+        id="Video_svg__a"
+        width={1}
+        height={1}
+        patternContentUnits="objectBoundingBox"
+      >
+        <use xlinkHref="#Video_svg__b" transform="scale(.01111)" />
+      </pattern>
+      <image
+        xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEBUlEQVR4nO2dSWyNURTHf7S0hphWqARBYm3aGCNlJ1ggMcW8KapEbO0MCaGJha0NK2OCsEeE1BBigViYdSAS2mh75SbnJS+NJ1V3ON/33V/y37y893LPPy/fvefcc++DRCKRSCQSiUQikUj0mypgLrAdOA5cBp4Ar4B2oEvULq89kfcck8/Mke9I/IFJwD7gGvANMP+pr8BVoBGoo+AMAzYBt4EeB+ZWUjdwC9gI1FIgRsov7Z1HcyvpM3AYGE2OGQIcBNoiGNxXdgwHZEy5YiHwVIHBffUCqCcH2GfiGaBXgamVZMfWDNSQUaYA9xQYafqph8B0Mka9o2WaCSy7LFxKRlgN/FRgmhmgbDK0DuXs8rwmNoFkY9iJUlZJchDbJOPQ7LUowz7XOhWYYzw8RpajhBkZnfjMP0yQ02KbXCPLIpNzPYi9zj6jwAQTSDapiZZWa874jGPZWBeHNrkaeKwgeBNYT0MXog4qCNpEUlPIenKrgoBNJLWKB945pCBYE1m2lu19++mj5yDOA3uBZwoMraT3vrfFNgUIYmzZhLtHyY7Mn7TBp9G3AwTQF2v8aeCXAnPLdQNP1AUqGlViJnBdgcHlRScvrQz7AgXQnyrhSwVGW+3GA9eUGI0kDY0KilkXcYxtsepQZHSJCcDZiHXwDtftZ3MDDn6g47sTyezZOGSHcqNLrADeBDZ6Kw45nhGjLcMle/0eaLxHcMiVDBld3qF6LkAp1+mEGLIk6ppFQIvH8drvdkbI554PBgObPdVpXrscaMiyqE9su+4Jx8vBLy4H2JUTo0s0ORyvbbNwRt6M3q/V6Lw8OsYAJx23rTl9dKTJkDCTYZaXd4uztLxLCQthEpaspeCHgR9ZTMG3Z8DoQcCaCEWlLUUqk84D7gY2uKRZRSr89+Sl8I+crdZi9NC8bmUhgWkwerXcamAUqMGH0RMVtBvcUGBuSdaL8XjiVgSjxxWtgQa5iiFkS9heuQDFKNR6302OHzwHcEGadZ4rMLOS3oW4+6PITehGZMus3hkhpUFTULWGakRHGrFNQdVIQOxE9UhB0Cbvh4UsC9Lxt3A0K/iVmUA6RURq5PiuybnuS30lKtPkYLrJqTqAqShhScZvnTEVZNsslqGMlTm8GGUNStmZk6t+uqUnXDWrMv4Y6dR4xc/frv75mtGJbwkZY3LEDVMzAD3QcKXP/6yzm5VnkL2SjERfJ7tK1x8rMLWv7JjmkzOqpS9ZQ4n1i1Th7JhyywgJ8m0Egz9Ju9goCkStXMVw03Oi0y0bqeuLdvV8pY4je4D9kqPN2Hb5rgafLQFZp0r62bYBR6UbqEWaZtrK/h6kTV5rkfcclVOs9rPp70ESiUQikUgkEolEgn7yG1n2Mpqx9z2YAAAAAElFTkSuQmCC"
+        id="Video_svg__b"
+        width={90}
+        height={90}
+      />
+    </defs>
+  </svg>
+);
+export default SvgVideo;

src/assets/svg/index.ts

@@ -0,0 +1,4 @@
+export { default as Home } from './Home';
+export { default as Plus } from './Plus';
+export { default as Search } from './Search';
+export { default as Video } from './Video';

src/components/Header/index.tsx

@@ -1,15 +1,21 @@
 import { bell, bellOff, camera, chevronLeft } from '@assets/png';
 import * as S from './Header.styles';
 import Title from './Title';
+import { useNavigate } from 'react-router-dom';
+import { ROUTE } from '@constants';
 
 interface HeaderProps {
   alarmOff: boolean;
   setAlarmOff: (alarmOff: boolean) => void;
 }
 
 function Header({ alarmOff, setAlarmOff }: HeaderProps) {
+  const navigate = useNavigate();
+  const goChatList = () => {
+    navigate(ROUTE.CHATLIST);
+  };
   return (
-    <S.Wrapper>
+    <S.Wrapper onClick={goChatList}>
       <S.ActionIcon>
         <S.Icon src={chevronLeft} />
         <Title />

vite.config.js

@@ -2,11 +2,19 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { fileURLToPath } from 'url';
-
+import svgr from 'vite-plugin-svgr';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    svgr({
+      exportAsDefault: true,
+      svgrOptions: {
+        icon: true,
+      },
+    }),
+  ],
   server: {
     port: 3000,
     open: true,