From 6ec0178b3355935e341789bc88780867a7b7afa4 Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Sun, 1 Dec 2024 23:25:28 +0900
Subject: [PATCH 1/3] refactor(ui): replaced static svc with tabler-icon
 components.

---
 web-frontend/package-lock.json                | 25 +++++++++++++++++++
 web-frontend/package.json                     |  1 +
 web-frontend/src/components/icons/Contact.vue | 20 ++++++---------
 .../src/components/icons/Facebook.vue         | 19 ++++++--------
 web-frontend/src/components/icons/GitHub.vue  | 19 ++++++--------
 .../src/components/icons/Instagram.vue        | 21 ++++++----------
 .../src/components/icons/LinkedIn.vue         | 23 ++++++-----------
 web-frontend/src/components/icons/X.vue       | 20 ++++++---------
 8 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json
index 3fc37a5a..2f2c3f16 100644
--- a/web-frontend/package-lock.json
+++ b/web-frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "web-frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@tabler/icons-vue": "^3.23.0",
         "axios": "^1.7.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
@@ -699,6 +700,30 @@
         "win32"
       ]
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.23.0.tgz",
+      "integrity": "sha512-Cz+X58jfRm0g/KcupXXuPw5knj671lNR054AnmLXvCjudiQBWI0wZulDDSsqDoGezvBzMTNPQtNcjLkZs82ZxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-vue": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-vue/-/icons-vue-3.23.0.tgz",
+      "integrity": "sha512-py3ZSu80dIIEoSjGqv/4i+OppiMloz0kgBGSH4Px2Me16nS/kgvXxQSwiW6w3eZZM6hoDauxucioxU8tVItvjA==",
+      "dependencies": {
+        "@tabler/icons": "3.23.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
diff --git a/web-frontend/package.json b/web-frontend/package.json
index b4870bc6..8aeaa5e5 100644
--- a/web-frontend/package.json
+++ b/web-frontend/package.json
@@ -12,6 +12,7 @@
     "node": "20.9.0"
   },
   "dependencies": {
+    "@tabler/icons-vue": "^3.23.0",
     "axios": "^1.7.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
diff --git a/web-frontend/src/components/icons/Contact.vue b/web-frontend/src/components/icons/Contact.vue
index 9f9bd291..09c21d23 100644
--- a/web-frontend/src/components/icons/Contact.vue
+++ b/web-frontend/src/components/icons/Contact.vue
@@ -1,17 +1,11 @@
+<script setup>
+import { IconMail } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconMail
     class="icon icon-tabler icon-tabler-mail"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
-    <path d="M3 7l9 6l9 -6" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/Facebook.vue b/web-frontend/src/components/icons/Facebook.vue
index 11c154f6..c6a46536 100644
--- a/web-frontend/src/components/icons/Facebook.vue
+++ b/web-frontend/src/components/icons/Facebook.vue
@@ -1,16 +1,11 @@
+<script setup>
+import { IconBrandFacebook } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandFacebook
     class="icon icon-tabler icon-tabler-brand-facebook"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/GitHub.vue b/web-frontend/src/components/icons/GitHub.vue
index 46ebdcab..2266643e 100644
--- a/web-frontend/src/components/icons/GitHub.vue
+++ b/web-frontend/src/components/icons/GitHub.vue
@@ -1,16 +1,11 @@
+<script setup>
+import { IconBrandGithub } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandGithub
     class="icon icon-tabler icon-tabler-brand-github"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/Instagram.vue b/web-frontend/src/components/icons/Instagram.vue
index 5d469a2b..4402697b 100644
--- a/web-frontend/src/components/icons/Instagram.vue
+++ b/web-frontend/src/components/icons/Instagram.vue
@@ -1,18 +1,11 @@
+<script setup>
+import { IconBrandInstagram } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandInstagram
     class="icon icon-tabler icon-tabler-brand-instagram"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
-    <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
-    <path d="M16.5 7.5l0 .01" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/LinkedIn.vue b/web-frontend/src/components/icons/LinkedIn.vue
index bcd00a44..ef78f46c 100644
--- a/web-frontend/src/components/icons/LinkedIn.vue
+++ b/web-frontend/src/components/icons/LinkedIn.vue
@@ -1,20 +1,11 @@
+<script setup>
+import { IconBrandLinkedin } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandLinkedin
     class="icon icon-tabler icon-tabler-brand-linkedin"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
-    <path d="M8 11l0 5" />
-    <path d="M8 8l0 .01" />
-    <path d="M12 16l0 -5" />
-    <path d="M16 16v-3a2 2 0 0 0 -4 0" />
-  </svg>
+    />
 </template>
diff --git a/web-frontend/src/components/icons/X.vue b/web-frontend/src/components/icons/X.vue
index 7292eb1c..1694edd5 100644
--- a/web-frontend/src/components/icons/X.vue
+++ b/web-frontend/src/components/icons/X.vue
@@ -1,17 +1,11 @@
+<script setup>
+import { IconBrandX } from '@tabler/icons-vue';
+</script>
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <IconBrandX
     class="icon icon-tabler icon-tabler-brand-x"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    stroke-width="1.5"
-    stroke="currentColor"
+    stroke={1.5}
     fill="none"
-    stroke-linecap="round"
-    stroke-linejoin="round" >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
-    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
-  </svg>
+    />
 </template>

From d97446ec24aa49f17df39a8300880a85f7015449 Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Mon, 2 Dec 2024 01:09:52 +0900
Subject: [PATCH 2/3] fix(ui): removed JSX syntax and used v-bind.

---
 web-frontend/src/components/icons/Contact.vue   | 4 ++--
 web-frontend/src/components/icons/Facebook.vue  | 4 ++--
 web-frontend/src/components/icons/GitHub.vue    | 3 ++-
 web-frontend/src/components/icons/Instagram.vue | 4 ++--
 web-frontend/src/components/icons/LinkedIn.vue  | 4 ++--
 web-frontend/src/components/icons/X.vue         | 4 ++--
 6 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web-frontend/src/components/icons/Contact.vue b/web-frontend/src/components/icons/Contact.vue
index 09c21d23..62d3769e 100644
--- a/web-frontend/src/components/icons/Contact.vue
+++ b/web-frontend/src/components/icons/Contact.vue
@@ -4,8 +4,8 @@ import { IconMail } from '@tabler/icons-vue';
 
 <template>
   <IconMail
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-mail"
-    stroke={1.5}
-    fill="none"
     />
 </template>
diff --git a/web-frontend/src/components/icons/Facebook.vue b/web-frontend/src/components/icons/Facebook.vue
index c6a46536..eebd2fbd 100644
--- a/web-frontend/src/components/icons/Facebook.vue
+++ b/web-frontend/src/components/icons/Facebook.vue
@@ -4,8 +4,8 @@ import { IconBrandFacebook } from '@tabler/icons-vue';
 
 <template>
   <IconBrandFacebook
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-brand-facebook"
-    stroke={1.5}
-    fill="none"
     />
 </template>
diff --git a/web-frontend/src/components/icons/GitHub.vue b/web-frontend/src/components/icons/GitHub.vue
index 2266643e..4a0d6dd1 100644
--- a/web-frontend/src/components/icons/GitHub.vue
+++ b/web-frontend/src/components/icons/GitHub.vue
@@ -4,8 +4,9 @@ import { IconBrandGithub } from '@tabler/icons-vue';
 
 <template>
   <IconBrandGithub
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-brand-github"
     stroke={1.5}
-    fill="none"
     />
 </template>
diff --git a/web-frontend/src/components/icons/Instagram.vue b/web-frontend/src/components/icons/Instagram.vue
index 4402697b..1e23269c 100644
--- a/web-frontend/src/components/icons/Instagram.vue
+++ b/web-frontend/src/components/icons/Instagram.vue
@@ -4,8 +4,8 @@ import { IconBrandInstagram } from '@tabler/icons-vue';
 
 <template>
   <IconBrandInstagram
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-brand-instagram"
-    stroke={1.5}
-    fill="none"
     />
 </template>
diff --git a/web-frontend/src/components/icons/LinkedIn.vue b/web-frontend/src/components/icons/LinkedIn.vue
index ef78f46c..e8e36456 100644
--- a/web-frontend/src/components/icons/LinkedIn.vue
+++ b/web-frontend/src/components/icons/LinkedIn.vue
@@ -4,8 +4,8 @@ import { IconBrandLinkedin } from '@tabler/icons-vue';
 
 <template>
   <IconBrandLinkedin
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-brand-linkedin"
-    stroke={1.5}
-    fill="none"
     />
 </template>
diff --git a/web-frontend/src/components/icons/X.vue b/web-frontend/src/components/icons/X.vue
index 1694edd5..ca0f6b0f 100644
--- a/web-frontend/src/components/icons/X.vue
+++ b/web-frontend/src/components/icons/X.vue
@@ -4,8 +4,8 @@ import { IconBrandX } from '@tabler/icons-vue';
 
 <template>
   <IconBrandX
+    :stroke="1.5"
+    :fill="none"
     class="icon icon-tabler icon-tabler-brand-x"
-    stroke={1.5}
-    fill="none"
     />
 </template>

From 56237dadfa34f8b24adc7d5523dd646879c884e2 Mon Sep 17 00:00:00 2001
From: hwakabh <hrykwkbys1024@gmail.com>
Date: Mon, 2 Dec 2024 01:12:21 +0900
Subject: [PATCH 3/3] fix(ui): removed fill props from each icon components.

---
 web-frontend/src/components/icons/Contact.vue   | 1 -
 web-frontend/src/components/icons/Facebook.vue  | 1 -
 web-frontend/src/components/icons/GitHub.vue    | 2 --
 web-frontend/src/components/icons/Instagram.vue | 1 -
 web-frontend/src/components/icons/LinkedIn.vue  | 1 -
 web-frontend/src/components/icons/X.vue         | 1 -
 6 files changed, 7 deletions(-)

diff --git a/web-frontend/src/components/icons/Contact.vue b/web-frontend/src/components/icons/Contact.vue
index 62d3769e..b4e34076 100644
--- a/web-frontend/src/components/icons/Contact.vue
+++ b/web-frontend/src/components/icons/Contact.vue
@@ -5,7 +5,6 @@ import { IconMail } from '@tabler/icons-vue';
 <template>
   <IconMail
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-mail"
     />
 </template>
diff --git a/web-frontend/src/components/icons/Facebook.vue b/web-frontend/src/components/icons/Facebook.vue
index eebd2fbd..8ca06d23 100644
--- a/web-frontend/src/components/icons/Facebook.vue
+++ b/web-frontend/src/components/icons/Facebook.vue
@@ -5,7 +5,6 @@ import { IconBrandFacebook } from '@tabler/icons-vue';
 <template>
   <IconBrandFacebook
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-brand-facebook"
     />
 </template>
diff --git a/web-frontend/src/components/icons/GitHub.vue b/web-frontend/src/components/icons/GitHub.vue
index 4a0d6dd1..0a4aef7e 100644
--- a/web-frontend/src/components/icons/GitHub.vue
+++ b/web-frontend/src/components/icons/GitHub.vue
@@ -5,8 +5,6 @@ import { IconBrandGithub } from '@tabler/icons-vue';
 <template>
   <IconBrandGithub
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-brand-github"
-    stroke={1.5}
     />
 </template>
diff --git a/web-frontend/src/components/icons/Instagram.vue b/web-frontend/src/components/icons/Instagram.vue
index 1e23269c..89ce8f09 100644
--- a/web-frontend/src/components/icons/Instagram.vue
+++ b/web-frontend/src/components/icons/Instagram.vue
@@ -5,7 +5,6 @@ import { IconBrandInstagram } from '@tabler/icons-vue';
 <template>
   <IconBrandInstagram
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-brand-instagram"
     />
 </template>
diff --git a/web-frontend/src/components/icons/LinkedIn.vue b/web-frontend/src/components/icons/LinkedIn.vue
index e8e36456..460cdbe3 100644
--- a/web-frontend/src/components/icons/LinkedIn.vue
+++ b/web-frontend/src/components/icons/LinkedIn.vue
@@ -5,7 +5,6 @@ import { IconBrandLinkedin } from '@tabler/icons-vue';
 <template>
   <IconBrandLinkedin
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-brand-linkedin"
     />
 </template>
diff --git a/web-frontend/src/components/icons/X.vue b/web-frontend/src/components/icons/X.vue
index ca0f6b0f..507e1cc1 100644
--- a/web-frontend/src/components/icons/X.vue
+++ b/web-frontend/src/components/icons/X.vue
@@ -5,7 +5,6 @@ import { IconBrandX } from '@tabler/icons-vue';
 <template>
   <IconBrandX
     :stroke="1.5"
-    :fill="none"
     class="icon icon-tabler icon-tabler-brand-x"
     />
 </template>