Refactor: 스택 아이콘 svg sprite 적용

co-KKIRI · Apr 30, 2024 · 37aa421 · 37aa421
1 parent 0493a36
commit 37aa421
Show file tree

Hide file tree

Showing 6 changed files with 453 additions and 36 deletions.
diff --git a/co-kkiri/.prettierrc.json b/co-kkiri/.prettierrc.json
@@ -6,5 +6,14 @@
   "useTabs": false,
   "tabWidth": 2,
   "bracketSameLine": true,
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": "./src/constants/stacks.ts",
+      "options": {
+        "quoteProps": "preserve",
+        "printWidth": 300
+      }
+    }
+  ]
 }
diff --git a/co-kkiri/src/App.tsx b/co-kkiri/src/App.tsx
@@ -3,6 +3,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import GlobalStyles from "./styles/globals";
 import PageRouter from "./PageRouter";
 import Toasts from "./components/commons/Widgets/Toast";
+import { GlobalStackSvgSprite } from "./components/commons/GlobalStackSvgSprite";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,7 +20,8 @@ function App() {
         <GlobalStyles />
         <ReactQueryDevtools initialIsOpen={false} />
         <PageRouter />
-        <Toasts/>
+        <GlobalStackSvgSprite />
+        <Toasts />
       </QueryClientProvider>
     </>
   );

diff --git a/co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx b/co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx
diff --git a/co-kkiri/src/components/commons/Stack.tsx b/co-kkiri/src/components/commons/Stack.tsx
@@ -20,7 +20,9 @@ export default function Stack({ stack, className }: StackProps) {
 
   return (
     <Background className={className}>
-      <Icon src={icon.src} alt={icon.alt} />
+      <Icon>
+        <use href={icon.src} />
+      </Icon>
     </Background>
   );
 }
@@ -40,7 +42,7 @@ const Background = styled.div`
   justify-content: center;
 `;
 
-const Icon = styled.img`
+const Icon = styled.svg`
   width: 100%; /* 컨테이너 너비에 맞춤 */
   height: 100%; /* 컨테이너 높이에 맞춤 */
   object-fit: contain;

diff --git a/co-kkiri/src/constants/stacks.ts b/co-kkiri/src/constants/stacks.ts
@@ -1,36 +1,39 @@
 import { Stacks } from "@/types/stackTypes";
 
 export const STACKS: Stacks = {
-    "JavaScript": { name: "JavaScript", img: "https://cdn.svgporn.com/logos/javascript.svg", relatedPosition: ["FRONT_END", "BACK_END"] },
-    "TypeScript": { name: "TypeScript", img: "https://cdn.svgporn.com/logos/typescript-icon.svg", relatedPosition: ["FRONT_END", "BACK_END"] },
-    "React": { name: "React", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["FRONT_END"] },
-    "Vue.js": { name: "Vue.js", img: "https://cdn.svgporn.com/logos/vue.svg", relatedPosition: ["FRONT_END"] },
-    "Angular": { name: "Angular", img: "https://cdn.svgporn.com/logos/angular-icon.svg", relatedPosition: ["FRONT_END"] },
-    "React Query": { name: "React Query", img: "https://cdn.svgporn.com/logos/react-query-icon.svg", relatedPosition: ["FRONT_END"] },
-    "Redux": { name: "Redux", img: "https://cdn.svgporn.com/logos/redux.svg", relatedPosition: ["FRONT_END"] },
-    "Node.js": { name: "Node.js", img: "https://cdn.svgporn.com/logos/nodejs-icon.svg", relatedPosition: ["BACK_END"] },
-    "Spring": { name: "Spring", img: "https://cdn.svgporn.com/logos/spring-icon.svg", relatedPosition: ["BACK_END"] },
-    "Django": { name: "Django", img: "https://cdn.svgporn.com/logos/django-icon.svg", relatedPosition: ["BACK_END"] },
-    "Python": { name: "Python", img: "https://cdn.svgporn.com/logos/python.svg", relatedPosition: ["BACK_END", "OTHERS"] }, // AI 포함
-    "Java": { name: "Java", img: "https://cdn.svgporn.com/logos/java.svg", relatedPosition: ["BACK_END", "MOBILE"] },
-    "MySQL": { name: "MySQL", img: "https://cdn.svgporn.com/logos/mysql-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스
-    "MongoDB": { name: "MongoDB", img: "https://cdn.svgporn.com/logos/mongodb-icon.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스
-    "PostgreSQL": { name: "PostgreSQL", img: "https://cdn.svgporn.com/logos/postgresql.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스
-    "Redis": { name: "Redis", img: "https://cdn.svgporn.com/logos/redis.svg", relatedPosition: ["BACK_END"] }, // 데이터베이스
-    "GraphQL": { name: "GraphQL", img: "https://cdn.svgporn.com/logos/graphql.svg", relatedPosition: ["BACK_END", "FRONT_END"] }, // API
-    "Kotlin": { name: "Kotlin", img: "https://cdn.svgporn.com/logos/kotlin-icon.svg", relatedPosition: ["BACK_END", "MOBILE"] },
-    "Swift": { name: "Swift", img: "https://cdn.svgporn.com/logos/swift.svg", relatedPosition: ["MOBILE"] },
-    "Flutter": { name: "Flutter", img: "https://cdn.svgporn.com/logos/flutter.svg", relatedPosition: ["MOBILE"] },
-    "React Native": { name: "React Native", img: "https://cdn.svgporn.com/logos/react.svg", relatedPosition: ["MOBILE"] },
-    "Figma": { name: "Figma", img: "https://cdn.svgporn.com/logos/figma.svg", relatedPosition: ["OTHERS"] }, // 디자인
-    "Adobe XD": { name: "Adobe XD", img: "https://cdn.svgporn.com/logos/adobe-xd.svg", relatedPosition: ["OTHERS"] }, // 디자인
-    "AWS": { name: "AWS", img: "https://cdn.svgporn.com/logos/aws.svg", relatedPosition: ["OTHERS"] }, // 클라우드 서비스
-    "Docker": { name: "Docker", img: "https://cdn.svgporn.com/logos/docker-icon.svg", relatedPosition: ["OTHERS"] }, // 데브옵스
-    "Kubernetes": { name: "Kubernetes", img: "https://cdn.svgporn.com/logos/kubernetes.svg", relatedPosition: ["OTHERS"] }, // 데브옵스
-    "Git": { name: "Git", img: "https://cdn.svgporn.com/logos/git-icon.svg", relatedPosition: ["OTHERS"] }, // 버전 관리
-    "Jira": { name: "Jira", img: "https://cdn.svgporn.com/logos/jira.svg", relatedPosition: ["OTHERS"] }, // 프로젝트 관리
-    "TensorFlow": { name: "TensorFlow", img: "https://cdn.svgporn.com/logos/tensorflow.svg", relatedPosition: ["OTHERS"] }, // AI
-    "PyTorch": { name: "PyTorch", img: "https://cdn.svgporn.com/logos/pytorch-icon.svg", relatedPosition: ["OTHERS"] }, // AI
+  "JavaScript": { name: "JavaScript", img: `#javascript`, relatedPosition: ["FRONT_END", "BACK_END"] },
+  "TypeScript": { name: "TypeScript", img: `#typescript`, relatedPosition: ["FRONT_END", "BACK_END"] },
+  "React": { name: "React", img: `#react`, relatedPosition: ["FRONT_END"] },
+  "Vue.js": { name: "Vue.js", img: `#vue`, relatedPosition: ["FRONT_END"] },
+  "Angular": { name: "Angular", img: `#angular`, relatedPosition: ["FRONT_END"] },
+  "React Query": { name: "React Query", img: `#react-query`, relatedPosition: ["FRONT_END"] },
+  "Redux": { name: "Redux", img: `#redux`, relatedPosition: ["FRONT_END"] },
+  "Next.js": { name: "Next.js", img: `#nextjs`, relatedPosition: ["FRONT_END"] },
+  "Node.js": { name: "Node.js", img: `#nodejs`, relatedPosition: ["BACK_END"] },
+  "Spring": { name: "Spring", img: `#spring`, relatedPosition: ["BACK_END"] },
+  "Django": { name: "Django", img: `#django`, relatedPosition: ["BACK_END"] },
+  "Nest.js": { name: "Nest.js", img: `#nestjs`, relatedPosition: ["BACK_END"] },
+  "Express": { name: "Express", img: `#express`, relatedPosition: ["BACK_END"] },
+  "Python": { name: "Python", img: `#python`, relatedPosition: ["BACK_END", "OTHERS"] }, // AI 포함
+  "Java": { name: "Java", img: `#java`, relatedPosition: ["BACK_END", "MOBILE"] },
+  "MySQL": { name: "MySQL", img: `#mysql`, relatedPosition: ["BACK_END"] }, // 데이터베이스
+  "MongoDB": { name: "MongoDB", img: `#mongodb`, relatedPosition: ["BACK_END"] }, // 데이터베이스
+  "PostgreSQL": { name: "PostgreSQL", img: `#postgresql`, relatedPosition: ["BACK_END"] }, // 데이터베이스
+  "Redis": { name: "Redis", img: `#redis`, relatedPosition: ["BACK_END"] }, // 데이터베이스
+  "GraphQL": { name: "GraphQL", img: `#graphql`, relatedPosition: ["BACK_END", "FRONT_END"] }, // API
+  "Kotlin": { name: "Kotlin", img: `#kotlin`, relatedPosition: ["BACK_END", "MOBILE"] },
+  "Swift": { name: "Swift", img: `#swift`, relatedPosition: ["MOBILE"] },
+  "Flutter": { name: "Flutter", img: `#flutter`, relatedPosition: ["MOBILE"] },
+  "React Native": { name: "React Native", img: `#react`, relatedPosition: ["MOBILE"] },
+  "Figma": { name: "Figma", img: `#figma`, relatedPosition: ["OTHERS"] }, // 디자인
+  "Adobe XD": { name: "Adobe XD", img: `#adobe-xd`, relatedPosition: ["OTHERS"] }, // 디자인
+  "AWS": { name: "AWS", img: `#aws`, relatedPosition: ["OTHERS"] }, // 클라우드 서비스
+  "Docker": { name: "Docker", img: `#docker`, relatedPosition: ["OTHERS"] }, // 데브옵스
+  "Kubernetes": { name: "Kubernetes", img: `#kubernetes`, relatedPosition: ["OTHERS"] }, // 데브옵스
+  "Git": { name: "Git", img: `#git`, relatedPosition: ["OTHERS"] }, // 버전 관리
+  "Jira": { name: "Jira", img: `#jira`, relatedPosition: ["OTHERS"] }, // 프로젝트 관리
+  "TensorFlow": { name: "TensorFlow", img: `#tensorflow`, relatedPosition: ["OTHERS"] }, // AI
+  "PyTorch": { name: "PyTorch", img: `#pytorch`, relatedPosition: ["OTHERS"] }, // AI
 } as const;
 
 export const STACK_NAMES = Object.keys(STACKS);
diff --git a/co-kkiri/vite.config.ts b/co-kkiri/vite.config.ts
@@ -13,8 +13,8 @@ export default defineConfig({
     alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }] as Alias[],
   },
   server: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: 80,
-  }
+  },
 });
 ``;