From 37aa4218cbabf53b32a89b97d02bd41c1e7677da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=98=EC=9D=80?=
<117327533+hankim0904@users.noreply.github.com>
Date: Tue, 30 Apr 2024 10:48:57 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=8A=A4=ED=83=9D=20=EC=95=84?=
=?UTF-8?q?=EC=9D=B4=EC=BD=98=20svg=20sprite=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
co-kkiri/.prettierrc.json | 11 +-
co-kkiri/src/App.tsx | 4 +-
.../commons/GlobalStackSvgSprite.tsx | 401 ++++++++++++++++++
co-kkiri/src/components/commons/Stack.tsx | 6 +-
co-kkiri/src/constants/stacks.ts | 63 +--
co-kkiri/vite.config.ts | 4 +-
6 files changed, 453 insertions(+), 36 deletions(-)
create mode 100644 co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx
diff --git a/co-kkiri/.prettierrc.json b/co-kkiri/.prettierrc.json
index 2401b0ca..31b3c61e 100644
--- 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
index f2cef273..bc8daddb 100644
--- 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() {
-
+
+
);
diff --git a/co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx b/co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx
new file mode 100644
index 00000000..655a0568
--- /dev/null
+++ b/co-kkiri/src/components/commons/GlobalStackSvgSprite.tsx
@@ -0,0 +1,401 @@
+import { createPortal } from "react-dom";
+
+const stackSvgSpriteCode = (
+
+);
+
+export function GlobalStackSvgSprite() {
+ return createPortal(stackSvgSpriteCode, document.body);
+}
diff --git a/co-kkiri/src/components/commons/Stack.tsx b/co-kkiri/src/components/commons/Stack.tsx
index 5001652c..350d47fb 100644
--- 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 (
-
+
+
+
);
}
@@ -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
index 6ba56b7d..b59c8512 100644
--- 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
index 1eedf7fc..a8df4fdc 100644
--- 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,
- }
+ },
});
``;