init: svgr 세팅 & 번들링 안되던 에러(절대경로) resolve

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "svgr" : "npx @svgr/cli --out-dir src/assets/svgs --typescript -- public/svgs"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -18,6 +19,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@svgr/cli": "^8.1.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/assets/svgs/BtnFFloating.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgBtnFFloating = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#btnFFloating_svg__a)">
+      <circle cx={32} cy={32} r={32} fill="#FF006B" />
+      <path
+        fill="url(#btnFFloating_svg__b)"
+        d="m41.11 32.916-4.173-13.185L34.891 13l-1.995 6.826-4.443 17.693-3.444-9.15-2.087-6.674-2.703 6.583-2.198 4.638H14v3.722h7.127l1.748-3.311L26.78 45.3 29.161 52l1.649-6.838 4.351-17.334 2.787 8.81H50v-3.722z"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="btnFFloating_svg__b"
+        x1={30.845}
+        x2={29.865}
+        y1={13}
+        y2={58.68}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.258} stopColor="#fff" />
+        <stop offset={1} stopColor="#fff" stopOpacity={0.16} />
+      </linearGradient>
+      <clipPath id="btnFFloating_svg__a">
+        <path fill="#fff" d="M0 0h64v64H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgBtnFFloating;

src/assets/svgs/BtnFloating.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgBtnFloating = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#btn_floating_svg__a)">
+      <circle cx={32} cy={32} r={32} fill="#FF006B" />
+      <path
+        fill="url(#btn_floating_svg__b)"
+        d="m41.11 32.916-4.173-13.185L34.891 13l-1.995 6.826-4.443 17.693-3.444-9.15-2.087-6.674-2.703 6.583-2.198 4.638H14v3.722h7.127l1.748-3.311L26.78 45.3 29.161 52l1.649-6.838 4.351-17.334 2.787 8.81H50v-3.722z"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="btn_floating_svg__b"
+        x1={30.845}
+        x2={29.865}
+        y1={13}
+        y2={58.68}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.258} stopColor="#fff" />
+        <stop offset={1} stopColor="#fff" stopOpacity={0.16} />
+      </linearGradient>
+      <clipPath id="btn_floating_svg__a">
+        <path fill="#fff" d="M0 0h64v64H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgBtnFloating;

src/assets/svgs/Hihi.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgHihi = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+  >
+    <g clipPath="url(#hihi_svg__a)">
+      <circle cx={32} cy={32} r={32} fill="#FF006B" />
+      <path
+        fill="url(#hihi_svg__b)"
+        d="m41.11 32.916-4.173-13.185L34.891 13l-1.995 6.826-4.443 17.693-3.444-9.15-2.087-6.674-2.703 6.583-2.198 4.638H14v3.722h7.127l1.748-3.311L26.78 45.3 29.161 52l1.649-6.838 4.351-17.334 2.787 8.81H50v-3.722z"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="hihi_svg__b"
+        x1={30.845}
+        x2={29.865}
+        y1={13}
+        y2={58.68}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.258} stopColor="#fff" />
+        <stop offset={1} stopColor="#fff" stopOpacity={0.16} />
+      </linearGradient>
+      <clipPath id="hihi_svg__a">
+        <path fill="#fff" d="M0 0h64v64H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgHihi;

src/assets/svgs/index.ts

@@ -0,0 +1,3 @@
+export { default as BtnFFloating } from "./BtnFFloating";
+export { default as BtnFloating } from "./BtnFloating";
+export { default as Hihi } from "./Hihi";

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
-import GlobalStyle from '@styles/GlobalStyle.ts'
+import GlobalStyle from '@styles/GlobalStyle.tsx'
 import { ThemeProvider } from '@emotion/react'
 import theme from '@styles/theme.ts'
 

src/pages/Layout/Layout.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import * as S from "./Layout.styled"
+import { Outlet } from 'react-router-dom'
 
 const Layout = () => {
   return (
     <S.LayoutWrapper>
-
+      <Outlet/>
     </S.LayoutWrapper>
   )
 }

src/pages/Main/Main.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import * as S from "./Main.styled"
+import { BtnFloating } from '@assets/svgs'
 
 const Main = () => {
   return (
     <S.MainWrapper>
-
+      테스트테스트
+      <BtnFloating width={'100px'} height={'100px'}/>
     </S.MainWrapper>
   )
 }

vite.config.ts

@@ -4,4 +4,16 @@ import react from '@vitejs/plugin-react-swc'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [
+      { find: "@assets", replacement: "/src/assets" },
+      { find: "@pages", replacement: "/src/pages" },
+      { find: "@components", replacement: "/src/components" },
+      { find: "@styles", replacement: "/src/styles" },
+      { find: "@constants", replacement: "/src/constants" },
+      { find: "@hooks", replacement: "/src/hooks" },
+      { find: "@utils", replacement: "/src/utils" },
+      { find: "@apis", replacement: "/src/apis" },
+    ],
+  },
 })