From e758772225d3362e3375b623517c95b05cc0c416 Mon Sep 17 00:00:00 2001
From: dewdew <yeonju.lee1005@gmail.com>
Date: Wed, 13 Dec 2023 22:21:18 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=8E=20develop=20version:=201.10.0=20-?=
 =?UTF-8?q?=20el-button,=20el-popover,=20el-tooltip,=20el-radio=20>=20nuxt?=
 =?UTF-8?q?-ui=20=EB=8C=80=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

예정: 키보드 숏컷 추가예정
---
 .vscode/settings.json                         |   1 +
 README.md                                     |   2 +-
 assets/scss/desktop/pages/tech_list.scss      |  12 --
 assets/scss/mobile/pages/tech_list.scss       |   4 -
 .../shared/components/content_container.scss  |   1 -
 .../scss/shared/components/main_contact.scss  |  10 --
 assets/scss/shared/components/pwa.scss        |   7 --
 assets/scss/shared/components/tiptap.scss     |  67 ++++------
 assets/scss/style.scss                        |   2 -
 assets/scss/tablet/pages/tech_list.scss       |  12 --
 components/ADialog.vue                        |  51 ++++----
 components/AHeader.client.vue                 |  24 ++--
 components/InstallPwa.client.vue              |  46 +++----
 components/atoms/AButton.vue                  |  77 ++++++++++++
 components/atoms/CardComponent.vue            |  11 +-
 components/atoms/UploadFile.vue               |   4 +-
 components/atoms/article/ArticleAddOn.vue     |   9 +-
 components/atoms/article/ArticleComments.vue  |  13 +-
 .../atoms/article/ArticleControlButton.vue    |  38 +++---
 .../atoms/article/ArticleCreateComment.vue    |  20 +--
 .../atoms/article/ArticleLikeButton.vue       |  18 ++-
 components/atoms/main/MainEmailContact.vue    |  13 +-
 components/atoms/main/MainSkillsImage.vue     |   4 +-
 components/atoms/tiptap/EditColorInput.vue    |  29 ++---
 components/atoms/tiptap/EditNormalButtons.vue |  29 ++---
 .../atoms/tiptap/EditSpecialButtons.vue       |  30 ++---
 components/atoms/tiptap/EditTextButtons.vue   |  37 ++----
 components/dialog/CreateArticleDialog.vue     |  14 +--
 components/dialog/ImageUploadDialog.vue       |  27 ++--
 components/dialog/PasswordCheckDialog.vue     |   9 +-
 components/molecules/tiptap/TextEditor.vue    |   4 +-
 .../molecules/tiptap/TiptapExtraGroup.vue     | 101 ++++++++-------
 .../molecules/tiptap/TiptapHeadingGroup.vue   | 111 ++++++++---------
 .../molecules/tiptap/TiptapLinkGroup.vue      |  61 +++++-----
 .../molecules/tiptap/TiptapStrokeGroup.vue    |  75 ++++++------
 .../molecules/tiptap/TiptapTableGroup.vue     | 115 +++++++++---------
 .../molecules/tiptap/TiptapTextAlignGroup.vue |  81 ++++++------
 .../molecules/tiptap/TiptapTextListGroup.vue  |  81 ++++++------
 .../molecules/tiptap/TiptapTextStyleGroup.vue |  61 +++++-----
 composables/fetch/loadData.ts                 |   2 +-
 pages/archives/[year].vue                     |  26 ++--
 pages/projects/colorTranslate.vue             |  60 ++++-----
 pages/tech/index.vue                          |  13 +-
 stores/stackLogoData.ts                       |   2 +-
 44 files changed, 663 insertions(+), 751 deletions(-)
 delete mode 100644 assets/scss/desktop/pages/tech_list.scss
 delete mode 100644 assets/scss/tablet/pages/tech_list.scss
 create mode 100644 components/atoms/AButton.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 722639f..f312bd2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -45,6 +45,7 @@
     "pinia",
     "Please",
     "plus",
+    "Popover",
     "Press",
     "recommended",
     "Rights",
diff --git a/README.md b/README.md
index efd9074..ed72df5 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
 
 ## 안녕하세요. FE 개발자 이연주 입니다.
 
-## Current Version: 1.8.0
+## Current Version: 1.10.0
 
 ## 🖥️ 사용한 스킬은 아래와 같습니다.
 
diff --git a/assets/scss/desktop/pages/tech_list.scss b/assets/scss/desktop/pages/tech_list.scss
deleted file mode 100644
index 10bbf37..0000000
--- a/assets/scss/desktop/pages/tech_list.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use '../../variables' as *;
-
-/**
-* ! Tech Blog List Page Style !
-*a
-* ? Desktop ?
-*/
-.tech-lists {
-  .write-button-container {
-    margin-left: $space-40;
-  }
-}
\ No newline at end of file
diff --git a/assets/scss/mobile/pages/tech_list.scss b/assets/scss/mobile/pages/tech_list.scss
index a5e1fea..af28137 100644
--- a/assets/scss/mobile/pages/tech_list.scss
+++ b/assets/scss/mobile/pages/tech_list.scss
@@ -15,10 +15,6 @@
       .card-header {
         flex-direction: column;
         align-items: flex-start;
-        .like {
-          margin-top: $space-16;
-          margin-left: unset;
-        }
       }
     }
   }
diff --git a/assets/scss/shared/components/content_container.scss b/assets/scss/shared/components/content_container.scss
index f1d925c..04ab26c 100644
--- a/assets/scss/shared/components/content_container.scss
+++ b/assets/scss/shared/components/content_container.scss
@@ -55,7 +55,6 @@
       padding: $space-4;
       border-radius: $space-6;
       background-color: var(--el-border-color);
-      color: var(--el-color-primary);
       box-decoration-break: clone;
     }
     pre {
diff --git a/assets/scss/shared/components/main_contact.scss b/assets/scss/shared/components/main_contact.scss
index d3310b0..1c67c8d 100644
--- a/assets/scss/shared/components/main_contact.scss
+++ b/assets/scss/shared/components/main_contact.scss
@@ -40,16 +40,6 @@
         .el-form-item {
           .el-form-item__content {
             justify-content: flex-end;
-            .el-button {
-              color: var(--d-text-color);
-              background-color: var(--d-footer-bg-color);
-              border-color: var(--d-footer-bg-color);
-              &:hover,
-              &:focus {
-              background-color: var(--d-footer-bg-color-deep);
-              border-color: var(--d-footer-bg-color-deep);
-              }
-            }
           }
         }
       }
diff --git a/assets/scss/shared/components/pwa.scss b/assets/scss/shared/components/pwa.scss
index d270d99..9699168 100644
--- a/assets/scss/shared/components/pwa.scss
+++ b/assets/scss/shared/components/pwa.scss
@@ -16,13 +16,6 @@
   z-index: 30;
   text-align: left;
   box-shadow: calc($space-2) $space-4 calc($space-4) 0 $pwa-border;
-  .el-button {
-    border: $space-1 solid $pwa-border;
-    outline: none;
-    margin-right: calc($space-4);
-    border-radius: $space-2;
-    padding: calc($space-2) $space-10;
-  }
   .message {
     margin-bottom: $space-8;
   }
diff --git a/assets/scss/shared/components/tiptap.scss b/assets/scss/shared/components/tiptap.scss
index 826ea73..7e21e67 100644
--- a/assets/scss/shared/components/tiptap.scss
+++ b/assets/scss/shared/components/tiptap.scss
@@ -49,7 +49,7 @@
     appearance: none;
     width: $space-24;
     height: $space-24;
-    margin: 0 $space-12;
+    margin: 0 $space-4;
     padding: 0;
     background-color: transparent;
     border: $space-2 solid var(--el-border-color);
@@ -69,20 +69,6 @@
       border-radius: 0;
     }
   }
-  el-button {
-    width: $space-60;
-    border: none;
-    background: none;
-    color: var(--d-text-color);
-    font-size: 0.85rem;
-    font-weight: 500;
-    padding: 0 0.2rem;
-    opacity: 0.6;
-    &:hover,
-    &.is-active {
-      opacity: 1;
-    }
-  }
 }
 
 .tiptap-menu-item {
@@ -142,35 +128,30 @@ th.has-focus {
 /**
 * ?  Tiptap Menu Popper Style ?
 */
-.tiptap-editor-group-menu {
-  display: flex;
-  align-items: center;
-  padding: $space-4 $space-8 !important;
-  border-radius: $space-8 !important;
-  .edit-color-input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    width: $space-40;
-    height: $space-30;
-    margin: 0.15rem calc(0.15rem + $space-12) 0 $space-12;
+.edit-color-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: $space-30;
+  height: $space-30;
+  margin: 0.15rem 0 0 $space-4;
+  padding: 0;
+  border: 1px solid var(--el-border-color);
+  background-color: transparent;
+  border-radius: $space-4;
+  cursor: pointer;
+  &::-webkit-color-swatch-wrapper {
     padding: 0;
-    background-color: transparent;
-    border-radius: $space-4;
-    cursor: pointer;
-    &::-webkit-color-swatch-wrapper {
-      padding: 0;
-    }
-    &::-webkit-color-swatch {
-      padding: 0;
-      border: 0;
-      border-radius: 0;
-    }
-    &::-moz-color-swatch {
-      padding: 0;
-      border: 0;
-      border-radius: 0;
-    }
+  }
+  &::-webkit-color-swatch {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  &::-moz-color-swatch {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
   }
 }
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 9866a84..ab195c6 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -33,7 +33,6 @@
   */
   @include meta.load-css('desktop/pages/projects');
   @include meta.load-css('desktop/pages/color_translate');
-  @include meta.load-css('desktop/pages/tech_list');
   @include meta.load-css('desktop/pages/tech_detail');
 }
 
@@ -59,7 +58,6 @@
   @include meta.load-css('tablet/pages/404');
   @include meta.load-css('tablet/pages/projects');
   @include meta.load-css('tablet/pages/color_translate');
-  @include meta.load-css('tablet/pages/tech_list');
   @include meta.load-css('tablet/pages/tech_detail');
 }
 
diff --git a/assets/scss/tablet/pages/tech_list.scss b/assets/scss/tablet/pages/tech_list.scss
deleted file mode 100644
index 74a7b8d..0000000
--- a/assets/scss/tablet/pages/tech_list.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use '../../variables' as *;
-
-/**
-* ! Tech Blog List Page Style !
-*a
-* ? Tablet ?
-*/
-.tech-lists {
-  .write-button-container {
-    margin-left: $space-40;
-  }
-}
diff --git a/components/ADialog.vue b/components/ADialog.vue
index 471e1ab..aafa827 100644
--- a/components/ADialog.vue
+++ b/components/ADialog.vue
@@ -42,41 +42,32 @@
       <template #footer>
         <div
           v-if="!hideDoubleButton"
-          class="A-dialog-double-button"
+          class="A-dialog-double-button flex flex-justify-end gap-16 "
         >
-          <el-button
+          <AButton
             v-if="!hideFirstButton"
-            class="A-double-first-button"
-            :class="{'activate-first-button': activeFirstButton}"
-            :disabled="activeFirstButton"
-            size="large"
-            @click="emits('click-first-button')"
-          >
-            {{ doubleFirstText }}
-          </el-button>
-          <el-button
+            :custom-class="`A-double-first-button ${activeFirstButton ? 'activate-first-button' : ''}`"
+            :button-disabled="activeFirstButton"
+            button-size="lg"
+            :button-text="doubleFirstText"
+            @click:button="emits('click-first-button')"
+          />
+          <AButton
             v-if="!hideSecondButton"
-            class="A-double-second-button"
-            size="large"
-            @click="emits('click-second-button')"
-          >
-            {{ doubleSecondText }}
-          </el-button>
+            custom-class="A-double-second-button"
+            button-size="lg"
+            :button-text="doubleSecondText"
+            @click:button="emits('click-second-button')"
+          />
         </div>
-        <div
+        <AButton
           v-if="!hideSingleButton"
-          class="A-dialog-single-button"
-        >
-          <el-button
-            v-if="!hideSingleButton"
-            class="A-single-button"
-            type="primary"
-            size="large"
-            @click="emits('click-single-button')"
-          >
-            {{ singleText }}
-          </el-button>
-        </div>
+          custom-class="A-single-button"
+          button-variant="soft"
+          button-size="lg"
+          :button-text="singleText"
+          @click:button="emits('click-single-button')"
+        />
       </template>
     </el-dialog>
   </client-only>
diff --git a/components/AHeader.client.vue b/components/AHeader.client.vue
index dd2d95f..2eea5ab 100644
--- a/components/AHeader.client.vue
+++ b/components/AHeader.client.vue
@@ -69,21 +69,15 @@
           {{ selectLocale }}
         </template>
       </DDSelectMenu>
-      <DDButton
-        class="mr-20"
-        color="violet"
-        variant="ghost"
-        aria-label="Theme"
-        @click="isDark = !isDark"
-      >
-        <template #leading>
-          <Icon
-            :name="isDark ? 'line-md:moon-filled-loop' : 'line-md:moon-filled-alt-to-sunny-filled-loop-transition'"
-            :width="24"
-            :height="24"
-          />
-        </template>
-      </DDButton>
+      <AButton
+        custom-class="mr-20"
+        aria-label="theme"
+        button-variant="ghost"
+        use-icon
+        :icon-name="isDark ? 'line-md:moon-filled-loop' : 'line-md:moon-filled-alt-to-sunny-filled-loop-transition'"
+        :icon-size="24"
+        @click:button="isDark = !isDark"
+      />
     </div>
   </div>
 </template>
diff --git a/components/InstallPwa.client.vue b/components/InstallPwa.client.vue
index 7367b6b..411facb 100644
--- a/components/InstallPwa.client.vue
+++ b/components/InstallPwa.client.vue
@@ -13,34 +13,36 @@
           {{ $t('pwa.newContent') }}
         </span>
       </div>
-      <el-button
-        v-if="$pwa.needRefresh"
-        @click="$pwa.updateServiceWorker()"
-      >
-        {{ $t('pwa.reload') }}
-      </el-button>
-      <el-button @click="$pwa.cancelPrompt()">
-        {{ $t('pwa.close') }}
-      </el-button>
+      <div class="flex gap-4">
+        <AButton
+          v-if="$pwa.needRefresh"
+          :button-text="$t('pwa.reload')"
+          @click:button="$pwa.updateServiceWorker()"
+        />
+        <AButton
+          :button-text="$t('pwa.close')"
+          @click:button="$pwa.cancelPrompt()"
+        />
+      </div>
     </div>
     <div
       v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh"
-      class="pwa-toast flex"
+      class="pwa-toast flex gap-4"
       role="alert"
     >
       <div class="flex flex-column flex-align-center">
-        <div class="message">
-          <span>
-            {{ $t('pwa.installPwa') }}
-          </span>
-        </div>
-        <div>
-          <el-button @click="$pwa.install()">
-            {{ $t('pwa.install') }}
-          </el-button>
-          <el-button @click="$pwa.cancelInstall()">
-            {{ $t('pwa.cancel') }}
-          </el-button>
+        <span class="message">
+          {{ $t('pwa.installPwa') }}
+        </span>
+        <div class="flex gap-4">
+          <AButton
+            :button-text="$t('pwa.install')"
+            @click:button="$pwa.install()"
+          />
+          <AButton
+            :button-text="$t('pwa.cancel')"
+            @click:button="$pwa.cancelInstall()"
+          />
         </div>
       </div>
       <Icon
diff --git a/components/atoms/AButton.vue b/components/atoms/AButton.vue
new file mode 100644
index 0000000..2d16d43
--- /dev/null
+++ b/components/atoms/AButton.vue
@@ -0,0 +1,77 @@
+<template>
+  <DDButton
+    :class="customClass"
+    :ui="roundButton ? { rounded: 'rounded-full' } : ''"
+    :disabled="buttonDisabled"
+    :padding="buttonPadding"
+    :color="buttonColor"
+    :size="buttonSize"
+    :variant="buttonVariant"
+    :aria-label="buttonLabel"
+    @click="$emit('click:button')"
+    @mouseenter="$emit('mouseenter:button')"
+    @mouseleave="$emit('mouseleave:button')"
+  >
+    <template
+      v-if="useIcon"
+      #leading
+    >
+      <Icon
+        :name="iconName"
+        :width="iconSize"
+        :height="iconSize"
+      />
+    </template>
+    <span
+      v-if="buttonText"
+      :style="buttonTextStyle"
+    >
+      {{ buttonText }}
+    </span>
+  </DDButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonSize, ButtonVariant } from '@nuxt/ui/dist/runtime/types/button'
+
+
+withDefaults(
+  defineProps<{
+    customClass?: string,
+    roundButton?: boolean,
+    buttonDisabled?: boolean,
+    buttonPadding?: boolean,
+    buttonColor?: string,
+    buttonSize?: ButtonSize | undefined,
+    buttonVariant?: ButtonVariant | undefined,
+    buttonLabel?: string,
+    useIcon?: boolean,
+    iconName?: string,
+    iconSize?: number,
+    buttonTextStyle?: string,
+    buttonText?: string
+  }>(),
+  {
+    customClass: '',
+    roundButton: false,
+    buttonDisabled: false,
+    buttonPadding: true,
+    buttonColor: 'violet',
+    buttonSize: 'sm',
+    buttonVariant: 'outline',
+    buttonLabel: 'button',
+    useIcon: false,
+    iconName: '',
+    iconSize: 24,
+    buttonTextStyle: '',
+    buttonText: ''
+  }
+)
+
+defineEmits([
+  'click:button',
+  'mouseenter:button',
+  'mouseleave:button'
+])
+
+</script>
diff --git a/components/atoms/CardComponent.vue b/components/atoms/CardComponent.vue
index 9a75eba..3c97b20 100644
--- a/components/atoms/CardComponent.vue
+++ b/components/atoms/CardComponent.vue
@@ -1,16 +1,15 @@
 <template>
   <el-card class="tech-card">
-    <div class="card-header flex flex-row flex-align-center">
+    <div class="card-header flex flex-row flex-align-center gap-2">
       <span class="title">
         {{ cardItem.title }}
       </span>
-      <el-tag
-        class="like ml-default"
-        type="success"
-        effect="light"
+      <DDBadge
+        color="violet"
+        variant="soft"
       >
         {{ cardItem.like + ' ❤️' }}
-      </el-tag>
+      </DDBadge>
     </div>
     <div class="desc mt-default">
       {{ cardItem.raw_article }}
diff --git a/components/atoms/UploadFile.vue b/components/atoms/UploadFile.vue
index 994939c..ce1f233 100644
--- a/components/atoms/UploadFile.vue
+++ b/components/atoms/UploadFile.vue
@@ -19,7 +19,7 @@
         alt="image-prev"
       />
     </div>
-    <el-icon
+    <div
       v-else
       class="el-icon--upload flex-column"
     >
@@ -31,7 +31,7 @@
         </span>
         {{ $t('colorsTranslate.checkDropper') }}
       </span>
-    </el-icon>
+    </div>
     <template #tip>
       <span class="el-upload__tip">
         {{ props.fileTypeAlarm.concat(', ', props.fileSizeAlarm) }}
diff --git a/components/atoms/article/ArticleAddOn.vue b/components/atoms/article/ArticleAddOn.vue
index 3d1b1dd..52d5868 100644
--- a/components/atoms/article/ArticleAddOn.vue
+++ b/components/atoms/article/ArticleAddOn.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="article-add-on flex flex-justify-end mt-default mb-default">
-    <el-tag
+    <DDBadge
       class="like"
-      :size="tagSize"
-      :effect="activateLike ? 'light' : 'plain'"
+      color="violet"
+      variant="soft"
+      size="lg"
       @click="$emit('update-count')"
     >
       {{ `${data.like} ❤️` }}
-    </el-tag>
+    </DDBadge>
   </div>
 </template>
 
diff --git a/components/atoms/article/ArticleComments.vue b/components/atoms/article/ArticleComments.vue
index abf7fb7..1b8b471 100644
--- a/components/atoms/article/ArticleComments.vue
+++ b/components/atoms/article/ArticleComments.vue
@@ -18,13 +18,12 @@
             </span>
             <div v-dompurify-html="comment.message" />
           </div>
-          <el-button
-            circle
-            size="small"
-            @click="openPasswordDialog(comment)"
-          >
-            <Icon name="line-md:close-small" />
-          </el-button>
+          <AButton
+            round-button
+            use-icon
+            icon-name="line-md:close-small"
+            @click:button="openPasswordDialog(comment)"
+          />
         </div>
       </el-timeline-item>
     </el-timeline>
diff --git a/components/atoms/article/ArticleControlButton.vue b/components/atoms/article/ArticleControlButton.vue
index 993aef4..2cfce9a 100644
--- a/components/atoms/article/ArticleControlButton.vue
+++ b/components/atoms/article/ArticleControlButton.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="button-group flex flex-justify-end mb-20">
-    <el-button
+  <div class="button-group flex flex-justify-end gap-16 mb-20">
+    <AButton
       v-if="!editTrigger"
-      class="edit-blog"
-      @click="() => $emit('check:admin')"
-    >
-      {{ $t('texts.edit') }}
-    </el-button>
-    <el-button
+      button-class="edit-blog"
+      button-size="lg"
+      :button-text="$t('texts.edit')"
+      @click:button="() => $emit('check:admin')"
+    />
+    <AButton
       v-if="editTrigger"
-      class="write-tech-blog"
-      @click="() => $emit('update:article')"
-    >
-      {{ $t('texts.save') }}
-    </el-button>
-    <el-button
+      button-class="write-tech-blog"
+      button-size="lg"
+      :button-text="$t('texts.save')"
+      @click:button="() => $emit('update:article')"
+    />
+    <AButton
       v-if="editTrigger"
-      class="write-tech-blog"
-      @click="() => $emit('edit:cancel')"
-    >
-      {{ $t('texts.cancel') }}
-    </el-button>
+      button-class="write-tech-blog"
+      button-size="lg"
+      :button-text="$t('texts.cancel')"
+      @click:button="() => $emit('edit:cancel')"
+    />
   </div>
 </template>
 
diff --git a/components/atoms/article/ArticleCreateComment.vue b/components/atoms/article/ArticleCreateComment.vue
index 187aeb3..9539ee0 100644
--- a/components/atoms/article/ArticleCreateComment.vue
+++ b/components/atoms/article/ArticleCreateComment.vue
@@ -21,9 +21,12 @@
           label="name"
         >
           <template #append>
-            <el-button @click="() => createCommentData.name = generateCommentName()">
-              <Icon name="charm:refresh" />
-            </el-button>
+            <AButton
+              use-icon
+              icon-name="charm:refresh"
+              :icon-size="10"
+              @click:button="createCommentData.name = generateCommentName()"
+            />
           </template>
         </el-input>
       </el-form-item>
@@ -43,14 +46,13 @@
           show-password
           clearable
           label="password"
+          @keyup.enter="submitArticle(createCommentRef)"
         >
           <template #append>
-            <el-button
-              class="submit-button mt-20"
-              @click="submitArticle(createCommentRef)"
-            >
-              {{ $t('tech.writeComment') }}
-            </el-button>
+            <AButton
+              :button-text="$t('tech.writeComment')"
+              @click:button="submitArticle(createCommentRef)"
+            />
           </template>
         </el-input>
       </el-form-item>
diff --git a/components/atoms/article/ArticleLikeButton.vue b/components/atoms/article/ArticleLikeButton.vue
index 4d0ce9b..52d00dc 100644
--- a/components/atoms/article/ArticleLikeButton.vue
+++ b/components/atoms/article/ArticleLikeButton.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="like-button flex flex-justify-end flex-align-center">
-    <el-button
-      class="fixed-like"
-      :class="{'fixed-like-on': trigger}"
-      circle
-      size="large"
-      :type="activateLike ? 'danger' : ''"
-      @click="$emit('click-affix')"
-    >
-      {{ buttonText }}
-    </el-button>
+    <AButton
+      :custom-class="`fixed-like ${trigger ? 'fixed-like-on' : ''}`"
+      round-button
+      button-size="lg"
+      :button-color="activateLike ? 'rose' : 'violet'"
+      :button-text="buttonText"
+      @click:button="$emit('click-affix')"
+    />
   </div>
 </template>
 
diff --git a/components/atoms/main/MainEmailContact.vue b/components/atoms/main/MainEmailContact.vue
index 3671be2..25086da 100644
--- a/components/atoms/main/MainEmailContact.vue
+++ b/components/atoms/main/MainEmailContact.vue
@@ -47,13 +47,12 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button
-          class="submit-button"
-          type="primary"
-          @click="submitForm(contactRuleFormRef)"
-        >
-          {{ $t('texts.send') }}
-        </el-button>
+        <AButton
+          custom-class="submit-button"
+          button-size="lg"
+          :button-text="$t('texts.send')"
+          @click:button="submitForm(contactRuleFormRef)"
+        />
       </el-form-item>
     </el-form>
   </div>
diff --git a/components/atoms/main/MainSkillsImage.vue b/components/atoms/main/MainSkillsImage.vue
index 204c749..416138d 100644
--- a/components/atoms/main/MainSkillsImage.vue
+++ b/components/atoms/main/MainSkillsImage.vue
@@ -5,7 +5,7 @@
   >
     <nuxt-img
       v-for="image in skillsImage"
-      :key="image.index"
+      :key="image.url"
       :class="image.title"
       :src="image.url"
       height="400"
@@ -21,7 +21,7 @@
 
 withDefaults(
   defineProps<{
-    skillsImage: SerializeObject[],
+    skillsImage: { orderIndex: { index: number }, title: string, url: string, deleted: boolean }[] | null | undefined,
     skillsBgTrigger?: boolean
   }>(),
   {
diff --git a/components/atoms/tiptap/EditColorInput.vue b/components/atoms/tiptap/EditColorInput.vue
index c53500d..ccd664b 100644
--- a/components/atoms/tiptap/EditColorInput.vue
+++ b/components/atoms/tiptap/EditColorInput.vue
@@ -1,20 +1,13 @@
 <template>
-  <client-only>
-    <el-tooltip
-      :disabled="tooltipTrigger"
-      effect="dark"
-      placement="bottom"
-      :content="tooltipText"
+  <DDTooltip :text="tooltipText">
+    <input
+      class="edit-color-input"
+      type="color"
+      :value="colorValue"
+      label="color"
+      @input="tiptapEditor.chain().focus().setColor(imageColor($event)).run()"
     >
-      <input
-        class="edit-color-input"
-        type="color"
-        :value="colorValue"
-        label="color"
-        @input="tiptapEditor.chain().focus().setColor(imageColor($event)).run()"
-      >
-    </el-tooltip>
-  </client-only>
+  </DDTooltip>
 </template>
 
 <script setup lang="ts">
@@ -25,13 +18,11 @@ withDefaults(
   defineProps<{
     colorValue?: string,
     tiptapEditor: Editor,
-    tooltipText?: string,
-    tooltipTrigger?: boolean
+    tooltipText?: string
   }>(),
   {
     colorValue: '#ffffff',
-    tooltipText: '',
-    tooltipTrigger: false
+    tooltipText: ''
   }
 )
 
diff --git a/components/atoms/tiptap/EditNormalButtons.vue b/components/atoms/tiptap/EditNormalButtons.vue
index b09b0c5..f1cdd30 100644
--- a/components/atoms/tiptap/EditNormalButtons.vue
+++ b/components/atoms/tiptap/EditNormalButtons.vue
@@ -1,22 +1,13 @@
 <template>
-  <client-only>
-    <el-tooltip
-      :visible="visible"
-      effect="dark"
-      placement="bottom"
-      :content="tooltipText"
-    >
-      <el-button
-        class="menu-item"
-        :class="{'is-active': isActive}"
-        @mouseenter="!tooltipTrigger ? visible = false : visible = true"
-        @mouseleave="visible = false"
-        @click="clickAction"
-      >
-        <Icon :name="iconType" />
-      </el-button>
-    </el-tooltip>
-  </client-only>
+  <DDTooltip :text="tooltipText">
+    <AButton
+      :custom-class="`menu-item ${isActive ? 'is-active' : ''}}`"
+      use-icon
+      button-size="xs"
+      :icon-name="iconType"
+      @click:button="clickAction"
+    />
+  </DDTooltip>
 </template>
 
 <script setup lang="ts">
@@ -40,8 +31,6 @@ const emits = defineEmits([
   'select-button'
 ])
 
-const visible = ref(false)
-
 const clickAction = () => {
   props.action()
   emits('select-button')
diff --git a/components/atoms/tiptap/EditSpecialButtons.vue b/components/atoms/tiptap/EditSpecialButtons.vue
index 5e506b5..2f1d0b9 100644
--- a/components/atoms/tiptap/EditSpecialButtons.vue
+++ b/components/atoms/tiptap/EditSpecialButtons.vue
@@ -1,22 +1,14 @@
 <template>
-  <client-only>
-    <el-tooltip
-      :visible="visible"
-      effect="dark"
-      placement="bottom"
-      :content="tooltipText"
-    >
-      <el-button
-        class="menu-item"
-        :disabled="disabled"
-        @mouseenter="!tooltipTrigger ? visible = false : visible = true"
-        @mouseleave="visible = false"
-        @click="clickAction"
-      >
-        <Icon :name="iconType" />
-      </el-button>
-    </el-tooltip>
-  </client-only>
+  <DDTooltip :text="tooltipText">
+    <AButton
+      custom-class="menu-item"
+      :button-disabled="disabled"
+      use-icon
+      button-size="xs"
+      :icon-name="iconType"
+      @click:button="clickAction"
+    />
+  </DDTooltip>
 </template>
 
 <script setup lang="ts">
@@ -40,8 +32,6 @@ const emits = defineEmits([
   'select-button'
 ])
 
-const visible = ref(false)
-
 const clickAction = () => {
   props.action()
   emits('select-button')
diff --git a/components/atoms/tiptap/EditTextButtons.vue b/components/atoms/tiptap/EditTextButtons.vue
index 4ee554b..1a35b43 100644
--- a/components/atoms/tiptap/EditTextButtons.vue
+++ b/components/atoms/tiptap/EditTextButtons.vue
@@ -1,24 +1,13 @@
 <template>
-  <client-only>
-    <el-tooltip
-      :visible="visible"
-      effect="dark"
-      placement="bottom"
-      :content="text"
-    >
-      <el-button
-        class="tiptap-text-menu-item"
-        :class="{'is-active': isActive}"
-        @mouseenter="!tooltipTrigger ? visible = false : visible = true"
-        @mouseleave="visible = false"
-        @click="clickAction"
-      >
-        <span :style="{ fontFamily: fontFamilyName }">
-          {{ text }}
-        </span>
-      </el-button>
-    </el-tooltip>
-  </client-only>
+  <DDTooltip :text="tooltipText">
+    <AButton
+      :custom-class="`tiptap-text-menu-item ${isActive ? 'is-active' : ''}`"
+      :button-text-style="`{ fontFamily: ${fontFamilyName} }`"
+      button-size="xs"
+      :button-text="tooltipText"
+      @click:button="clickAction"
+    />
+  </DDTooltip>
 </template>
 
 <script setup lang="ts">
@@ -28,13 +17,11 @@ const props = withDefaults(
     isActive: boolean,
     action: Function,
     fontFamilyName?: string,
-    tooltipTrigger?: boolean,
-    text?: string
+    tooltipText?: string
   }>(),
   {
-    tooltipTrigger: true,
     fontFamilyName: '',
-    text: ''
+    tooltipText: ''
   }
 )
 
@@ -42,8 +29,6 @@ const emits = defineEmits([
   'select-button'
 ])
 
-const visible = ref(false)
-
 const clickAction = () => {
   props.action()
   emits('select-button')
diff --git a/components/dialog/CreateArticleDialog.vue b/components/dialog/CreateArticleDialog.vue
index e2a22b6..e193923 100644
--- a/components/dialog/CreateArticleDialog.vue
+++ b/components/dialog/CreateArticleDialog.vue
@@ -33,13 +33,13 @@
         />
       </el-form-item>
       <el-form-item class="submit-form-item">
-        <el-button
-          class="submit-button"
-          type="primary"
-          @click="submitArticle(createArticleRef)"
-        >
-          {{ $t('tech.write') }}
-        </el-button>
+        <AButton
+          custom-class="submit-button"
+          button-variant="soft"
+          button-size="lg"
+          :button-text="$t('tech.write')"
+          @click:button="submitArticle(createArticleRef)"
+        />
       </el-form-item>
     </el-form>
   </LazyADialog>
diff --git a/components/dialog/ImageUploadDialog.vue b/components/dialog/ImageUploadDialog.vue
index 8d19b58..a21e069 100644
--- a/components/dialog/ImageUploadDialog.vue
+++ b/components/dialog/ImageUploadDialog.vue
@@ -22,16 +22,12 @@
       :http-request="changeImage"
     >
       <template #trigger>
-        <el-tooltip
-          :content="$t('texts.upload')"
-          :offset="8"
-          placement="bottom"
-        >
+        <DDTooltip :text="$t('texts.upload')">
           <Icon
             class="save-icon"
             name="ri:upload-cloud-2-line"
           />
-        </el-tooltip>
+        </DDTooltip>
       </template>
       <template #file="{ file }">
         <div class="upload-file-information">
@@ -43,20 +39,6 @@
         </div>
       </template>
     </el-upload>
-    <el-radio-group v-model="imageHyperLinkTrigger">
-      <el-radio
-        :label="true"
-        size="large"
-      >
-        {{ $t('texts.insertLink') }}
-      </el-radio>
-      <el-radio
-        :label="false"
-        size="large"
-      >
-        {{ $t('texts.noUse') }}
-      </el-radio>
-    </el-radio-group>
     <el-input
       v-if="imageHyperLinkTrigger"
       v-model="hyperLink"
@@ -65,6 +47,11 @@
       label="link"
       clearable
     />
+    <DDCheckbox
+      v-model="imageHyperLinkTrigger"
+      color="violet"
+      :label="imageHyperLinkTrigger ? $t('texts.noUse') : $t('texts.insertLink')"
+    />
   </ADialog>
 </template>
 
diff --git a/components/dialog/PasswordCheckDialog.vue b/components/dialog/PasswordCheckDialog.vue
index 2663f9c..475ceec 100644
--- a/components/dialog/PasswordCheckDialog.vue
+++ b/components/dialog/PasswordCheckDialog.vue
@@ -30,9 +30,12 @@
           @keyup.enter="checkPassword(passwordRef)"
         >
           <template #append>
-            <el-button @click="checkPassword(passwordRef)">
-              <Icon name="line-md:coffee-filled" />
-            </el-button>
+            <AButton
+              use-icon
+              icon-name="line-md:coffee-filled"
+              :icon-size="10"
+              @click:button="checkPassword(passwordRef)"
+            />
           </template>
         </el-input>
       </el-form-item>
diff --git a/components/molecules/tiptap/TextEditor.vue b/components/molecules/tiptap/TextEditor.vue
index a08dba4..3b9d984 100644
--- a/components/molecules/tiptap/TextEditor.vue
+++ b/components/molecules/tiptap/TextEditor.vue
@@ -3,7 +3,7 @@
     v-if="editor"
     class="tiptap-editor"
   >
-    <div class="tiptap-editor__header">
+    <div class="tiptap-editor__header gap-2">
       <TiptapHeadingGroup
         v-if="!commentOption"
         :tiptap-editor="editor"
@@ -54,7 +54,7 @@
       />
     </div>
     <bubble-menu
-      class="bubble-menu"
+      class="bubble-menu flex gap-2"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
     >
diff --git a/components/molecules/tiptap/TiptapExtraGroup.vue b/components/molecules/tiptap/TiptapExtraGroup.vue
index b852031..312bac4 100644
--- a/components/molecules/tiptap/TiptapExtraGroup.vue
+++ b/components/molecules/tiptap/TiptapExtraGroup.vue
@@ -1,56 +1,53 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:more-line" />
-        </el-button>
-      </template>
-      <LazyEditSpecialButtons
-        v-if="fullOption"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHorizontalRule().run() : null"
-        icon-type="ri:separator"
-        :tooltip-text="$t('tiptap.separator')"
-      />
-      <LazyEditNormalButtons
-        :is-active="false"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHardBreak().run() : null"
-        icon-type="ri:corner-down-left-line"
-        :tooltip-text="$t('tiptap.moreLine')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('code')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCode().run() : null"
-        icon-type="ri:code-fill"
-        :tooltip-text="$t('tiptap.code')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('codeBlock')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCodeBlock().run() : null"
-        icon-type="ri:code-box-line"
-        :tooltip-text="$t('tiptap.codeBlock')"
-      />
-      <LazyEditSpecialButtons
-        v-if="fullOption"
-        :disabled="!tiptapEditor.can().chain().focus().undo().run()"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().undo().run() : null"
-        icon-type="ri:arrow-go-back-line"
-        :tooltip-text="$t('tiptap.goBack')"
-      />
-      <LazyEditSpecialButtons
-        v-if="fullOption"
-        :disabled="!tiptapEditor.can().chain().focus().redo().run()"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().redo().run() : null"
-        icon-type="ri:arrow-go-forward-line"
-        :tooltip-text="$t('tiptap.goForward')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:more-line"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditSpecialButtons
+          v-if="fullOption"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHorizontalRule().run() : null"
+          icon-type="ri:separator"
+          :tooltip-text="$t('tiptap.separator')"
+        />
+        <LazyEditNormalButtons
+          :is-active="false"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHardBreak().run() : null"
+          icon-type="ri:corner-down-left-line"
+          :tooltip-text="$t('tiptap.moreLine')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('code')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCode().run() : null"
+          icon-type="ri:code-fill"
+          :tooltip-text="$t('tiptap.code')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('codeBlock')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCodeBlock().run() : null"
+          icon-type="ri:code-box-line"
+          :tooltip-text="$t('tiptap.codeBlock')"
+        />
+        <LazyEditSpecialButtons
+          v-if="fullOption"
+          :disabled="!tiptapEditor.can().chain().focus().undo().run()"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().undo().run() : null"
+          icon-type="ri:arrow-go-back-line"
+          :tooltip-text="$t('tiptap.goBack')"
+        />
+        <LazyEditSpecialButtons
+          v-if="fullOption"
+          :disabled="!tiptapEditor.can().chain().focus().redo().run()"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().redo().run() : null"
+          icon-type="ri:arrow-go-forward-line"
+          :tooltip-text="$t('tiptap.goForward')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapHeadingGroup.vue b/components/molecules/tiptap/TiptapHeadingGroup.vue
index 7697776..7d1c787 100644
--- a/components/molecules/tiptap/TiptapHeadingGroup.vue
+++ b/components/molecules/tiptap/TiptapHeadingGroup.vue
@@ -1,61 +1,58 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:heading" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('heading', { level: 1 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 1 }).run() : null"
-        icon-type="ri:h-1"
-        :tooltip-text="$t('tiptap.h1')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('heading', { level: 2 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 2 }).run() : null"
-        icon-type="ri:h-2"
-        :tooltip-text="$t('tiptap.h2')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('heading', { level: 3 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 3 }).run() : null"
-        icon-type="ri:h-3"
-        :tooltip-text="$t('tiptap.h3')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('heading', { level: 4 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 4 }).run() : null"
-        icon-type="ri:h-4"
-        :tooltip-text="$t('tiptap.h4')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('heading', { level: 5 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 5 }).run() : null"
-        icon-type="ri:h-5"
-        :tooltip-text="$t('tiptap.h5')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :editor="tiptapEditor"
-        :is-active="tiptapEditor.isActive('heading', { level: 6 })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 6 }).run() : null"
-        icon-type="ri:h-6"
-        :tooltip-text="$t('tiptap.h6')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:heading"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('heading', { level: 1 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 1 }).run() : null"
+          icon-type="ri:h-1"
+          :tooltip-text="$t('tiptap.h1')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('heading', { level: 2 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 2 }).run() : null"
+          icon-type="ri:h-2"
+          :tooltip-text="$t('tiptap.h2')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('heading', { level: 3 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 3 }).run() : null"
+          icon-type="ri:h-3"
+          :tooltip-text="$t('tiptap.h3')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('heading', { level: 4 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 4 }).run() : null"
+          icon-type="ri:h-4"
+          :tooltip-text="$t('tiptap.h4')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('heading', { level: 5 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 5 }).run() : null"
+          icon-type="ri:h-5"
+          :tooltip-text="$t('tiptap.h5')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :editor="tiptapEditor"
+          :is-active="tiptapEditor.isActive('heading', { level: 6 })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHeading({ level: 6 }).run() : null"
+          icon-type="ri:h-6"
+          :tooltip-text="$t('tiptap.h6')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapLinkGroup.vue b/components/molecules/tiptap/TiptapLinkGroup.vue
index 27d226e..2410dad 100644
--- a/components/molecules/tiptap/TiptapLinkGroup.vue
+++ b/components/molecules/tiptap/TiptapLinkGroup.vue
@@ -1,36 +1,33 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:attachment-2" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('link')"
-        :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-hyper-link') : null"
-        icon-type="ri:link"
-        :tooltip-text="$t('tiptap.link')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('link')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().unsetLink().run() : null"
-        icon-type="ri:link-unlink"
-        :tooltip-text="$t('tiptap.unlink')"
-      />
-      <LazyEditNormalButtons
-        :is-active="false"
-        :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-youtube-link') : null"
-        icon-type="ri:youtube-line"
-        :tooltip-text="$t('tiptap.youtube')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:attachment-2"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('link')"
+          :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-hyper-link') : null"
+          icon-type="ri:link"
+          :tooltip-text="$t('tiptap.link')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('link')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().unsetLink().run() : null"
+          icon-type="ri:link-unlink"
+          :tooltip-text="$t('tiptap.unlink')"
+        />
+        <LazyEditNormalButtons
+          :is-active="false"
+          :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-youtube-link') : null"
+          icon-type="ri:youtube-line"
+          :tooltip-text="$t('tiptap.youtube')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapStrokeGroup.vue b/components/molecules/tiptap/TiptapStrokeGroup.vue
index fa0505b..0c61784 100644
--- a/components/molecules/tiptap/TiptapStrokeGroup.vue
+++ b/components/molecules/tiptap/TiptapStrokeGroup.vue
@@ -1,43 +1,40 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:pen-nib-line" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('underline')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleUnderline().run() : null"
-        icon-type="ri:underline"
-        :tooltip-text="$t('tiptap.underline')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('strike')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleStrike().run() : null"
-        icon-type="ri:strikethrough-2"
-        :tooltip-text="$t('tiptap.strikethrough')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('highlight')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHighlight().run() : null"
-        icon-type="ri:mark-pen-fill"
-        :tooltip-text="$t('tiptap.marker1')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('highlight', { color: '#ffc078' })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHighlight({ color: '#ffc078' }).run() : null"
-        icon-type="ri:mark-pen-line"
-        :tooltip-text="$t('tiptap.marker2')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:pen-nib-line"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('underline')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleUnderline().run() : null"
+          icon-type="ri:underline"
+          :tooltip-text="$t('tiptap.underline')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('strike')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleStrike().run() : null"
+          icon-type="ri:strikethrough-2"
+          :tooltip-text="$t('tiptap.strikethrough')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('highlight')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHighlight().run() : null"
+          icon-type="ri:mark-pen-fill"
+          :tooltip-text="$t('tiptap.marker1')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('highlight', { color: '#ffc078' })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHighlight({ color: '#ffc078' }).run() : null"
+          icon-type="ri:mark-pen-line"
+          :tooltip-text="$t('tiptap.marker2')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapTableGroup.vue b/components/molecules/tiptap/TiptapTableGroup.vue
index 803a31c..31b1906 100644
--- a/components/molecules/tiptap/TiptapTableGroup.vue
+++ b/components/molecules/tiptap/TiptapTableGroup.vue
@@ -1,63 +1,60 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:table-2" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() : null"
-        icon-type="ri:table-2"
-        :tooltip-text="$t('tiptap.createTable')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnBefore().run() : null"
-        icon-type="ri:layout-left-fill"
-        :tooltip-text="$t('tiptap.addColumnBefore')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnAfter().run() : null"
-        icon-type="ri:layout-right-fill"
-        :tooltip-text="$t('tiptap.addColumnAfter')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteColumn().run() : null"
-        icon-type="ri:delete-column"
-        :tooltip-text="$t('tiptap.deleteColumn')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowBefore().run() : null"
-        icon-type="ri:layout-top-fill"
-        :tooltip-text="$t('tiptap.addRowBefore')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowAfter().run() : null"
-        icon-type="ri:layout-bottom-fill"
-        :tooltip-text="$t('tiptap.addRowAfter')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteRow().run() : null"
-        icon-type="ri:delete-row"
-        :tooltip-text="$t('tiptap.deleteRow')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().mergeOrSplit().run() : null"
-        icon-type="ri:merge-cells-horizontal"
-        :tooltip-text="$t('tiptap.mergeOrSplit')"
-      />
-      <LazyEditNormalButtons
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteTable().run() : null"
-        icon-type="ci:table-delete"
-        :tooltip-text="$t('tiptap.deleteTable')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:table-2"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() : null"
+          icon-type="ri:table-2"
+          :tooltip-text="$t('tiptap.createTable')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnBefore().run() : null"
+          icon-type="ri:layout-left-fill"
+          :tooltip-text="$t('tiptap.addColumnBefore')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnAfter().run() : null"
+          icon-type="ri:layout-right-fill"
+          :tooltip-text="$t('tiptap.addColumnAfter')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteColumn().run() : null"
+          icon-type="ri:delete-column"
+          :tooltip-text="$t('tiptap.deleteColumn')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowBefore().run() : null"
+          icon-type="ri:layout-top-fill"
+          :tooltip-text="$t('tiptap.addRowBefore')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowAfter().run() : null"
+          icon-type="ri:layout-bottom-fill"
+          :tooltip-text="$t('tiptap.addRowAfter')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteRow().run() : null"
+          icon-type="ri:delete-row"
+          :tooltip-text="$t('tiptap.deleteRow')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().mergeOrSplit().run() : null"
+          icon-type="ri:merge-cells-horizontal"
+          :tooltip-text="$t('tiptap.mergeOrSplit')"
+        />
+        <LazyEditNormalButtons
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteTable().run() : null"
+          icon-type="ci:table-delete"
+          :tooltip-text="$t('tiptap.deleteTable')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapTextAlignGroup.vue b/components/molecules/tiptap/TiptapTextAlignGroup.vue
index 809b08a..5759eff 100644
--- a/components/molecules/tiptap/TiptapTextAlignGroup.vue
+++ b/components/molecules/tiptap/TiptapTextAlignGroup.vue
@@ -1,46 +1,43 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:menu-add-line" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive({ textAlign: 'left' })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('left').run() : null"
-        icon-type="ri:align-left"
-        :tooltip-text="$t('tiptap.alignLeft')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive({ textAlign: 'center' })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('center').run() : null"
-        icon-type="ri:align-center"
-        :tooltip-text="$t('tiptap.alignCenter')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive({ textAlign: 'right' })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('right').run() : null"
-        icon-type="ri:align-right"
-        :tooltip-text="$t('tiptap.alignRight')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive({ textAlign: 'justify' })"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('justify').run() : null"
-        icon-type="ri:align-justify"
-        :tooltip-text="$t('tiptap.alignJustify')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:menu-add-line"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive({ textAlign: 'left' })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('left').run() : null"
+          icon-type="ri:align-left"
+          :tooltip-text="$t('tiptap.alignLeft')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive({ textAlign: 'center' })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('center').run() : null"
+          icon-type="ri:align-center"
+          :tooltip-text="$t('tiptap.alignCenter')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive({ textAlign: 'right' })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('right').run() : null"
+          icon-type="ri:align-right"
+          :tooltip-text="$t('tiptap.alignRight')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive({ textAlign: 'justify' })"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('justify').run() : null"
+          icon-type="ri:align-justify"
+          :tooltip-text="$t('tiptap.alignJustify')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapTextListGroup.vue b/components/molecules/tiptap/TiptapTextListGroup.vue
index f70b063..045753e 100644
--- a/components/molecules/tiptap/TiptapTextListGroup.vue
+++ b/components/molecules/tiptap/TiptapTextListGroup.vue
@@ -1,46 +1,43 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:list-settings-line" />
-        </el-button>
-      </template>
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('bulletList')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBulletList().run() : null"
-        icon-type="ri:list-unordered"
-        :tooltip-text="$t('tiptap.dotList')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('orderedList')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleOrderedList().run() : null"
-        icon-type="ri:list-ordered"
-        :tooltip-text="$t('tiptap.list')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('taskList')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleTaskList().run() : null"
-        icon-type="ri:task-line"
-        :tooltip-text="$t('tiptap.tasks')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('blockquote')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBlockquote().run() : null"
-        icon-type="ri:double-quotes-l"
-        :tooltip-text="$t('tiptap.quotes')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:list-settings-line"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('bulletList')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBulletList().run() : null"
+          icon-type="ri:list-unordered"
+          :tooltip-text="$t('tiptap.dotList')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('orderedList')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleOrderedList().run() : null"
+          icon-type="ri:list-ordered"
+          :tooltip-text="$t('tiptap.list')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('taskList')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleTaskList().run() : null"
+          icon-type="ri:task-line"
+          :tooltip-text="$t('tiptap.tasks')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('blockquote')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBlockquote().run() : null"
+          icon-type="ri:double-quotes-l"
+          :tooltip-text="$t('tiptap.quotes')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/components/molecules/tiptap/TiptapTextStyleGroup.vue b/components/molecules/tiptap/TiptapTextStyleGroup.vue
index 31baa2c..c4063f4 100644
--- a/components/molecules/tiptap/TiptapTextStyleGroup.vue
+++ b/components/molecules/tiptap/TiptapTextStyleGroup.vue
@@ -1,36 +1,33 @@
 <template>
-  <client-only>
-    <el-popover
-      trigger="hover"
-      width="auto"
-      :show-arrow="false"
-      popper-class="tiptap-editor-group-menu"
-    >
-      <template #reference>
-        <el-button>
-          <Icon name="ri:palette-line" />
-        </el-button>
-      </template>
-      <LazyEditColorInput
-        :color-value="tiptapEditor ? selectColor(tiptapEditor) : null"
-        :tiptap-editor="tiptapEditor"
-        :tooltip-text="$t('tiptap.colors')"
-      />
-      <LazyEditNormalButtons
-        :is-active="tiptapEditor.isActive('bold')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBold().run() : null"
-        icon-type="ri:bold"
-        :tooltip-text="$t('tiptap.bold')"
-      />
-      <LazyEditNormalButtons
-        v-if="fullOption"
-        :is-active="tiptapEditor.isActive('italic')"
-        :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleItalic().run() : null"
-        icon-type="ri:italic"
-        :tooltip-text="$t('tiptap.italic')"
-      />
-    </el-popover>
-  </client-only>
+  <DDPopover mode="hover">
+    <AButton
+      use-icon
+      button-size="xs"
+      icon-name="ri:palette-line"
+    />
+    <template #panel>
+      <div class="flex gap-2">
+        <LazyEditColorInput
+          :color-value="tiptapEditor ? selectColor(tiptapEditor) : null"
+          :tiptap-editor="tiptapEditor"
+          :tooltip-text="$t('tiptap.colors')"
+        />
+        <LazyEditNormalButtons
+          :is-active="tiptapEditor.isActive('bold')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBold().run() : null"
+          icon-type="ri:bold"
+          :tooltip-text="$t('tiptap.bold')"
+        />
+        <LazyEditNormalButtons
+          v-if="fullOption"
+          :is-active="tiptapEditor.isActive('italic')"
+          :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleItalic().run() : null"
+          icon-type="ri:italic"
+          :tooltip-text="$t('tiptap.italic')"
+        />
+      </div>
+    </template>
+  </DDPopover>
 </template>
 
 <script setup lang="ts">
diff --git a/composables/fetch/loadData.ts b/composables/fetch/loadData.ts
index 32cee41..68d22ac 100644
--- a/composables/fetch/loadData.ts
+++ b/composables/fetch/loadData.ts
@@ -42,7 +42,7 @@ export const useLoadComposable = () => {
       }
 
       return data
-    })
+    }, { immediate: true })
 
     if (!data.value) { return }
 
diff --git a/pages/archives/[year].vue b/pages/archives/[year].vue
index e2d88fd..d6050bc 100644
--- a/pages/archives/[year].vue
+++ b/pages/archives/[year].vue
@@ -1,22 +1,14 @@
 <template>
   <div class="archive-detail">
-    <DDButton
-      class="prev-button"
-      color="violet"
-      variant="ghost"
-      size="lg"
-      aria-label="back"
-      @click="navigateTo('/archives')"
-    >
-      <template #leading>
-        <Icon
-          name="line-md:arrow-small-left"
-          :width="24"
-          :height="24"
-        />
-        {{ $t('archives.back') }}
-      </template>
-    </DDButton>
+    <AButton
+      custom-class="prev-button"
+      button-size="lg"
+      button-variant="ghost"
+      button-label="back"
+      use-icon
+      icon-name="line-md:arrow-small-left"
+      @click:button="navigateTo('/archives')"
+    />
     <ImageSlider
       :image-data="yearData"
       :inner-archive-trigger="true"
diff --git a/pages/projects/colorTranslate.vue b/pages/projects/colorTranslate.vue
index f77df8e..b80864f 100644
--- a/pages/projects/colorTranslate.vue
+++ b/pages/projects/colorTranslate.vue
@@ -4,15 +4,13 @@
     :style="backgroundColor"
   >
     <div class="flex flex-column gap-20">
-      <el-button
-        class="eye-dropper"
-        @click="colorPicker"
-      >
-        <Icon name="wpf:color-dropper" />
-        <span>
-          {{ $t('colorsTranslate.dropper') }}
-        </span>
-      </el-button>
+      <AButton
+        custom-class="eye-dropper flex-justify-center"
+        use-icon
+        icon-name="wpf:color-dropper"
+        :button-text="$t('colorsTranslate.dropper')"
+        @click:button="colorPicker"
+      />
       <LazyUploadFile
         :file-size-alarm="$t('colorsTranslate.fileSize')"
         :file-type-alarm="$t('colorsTranslate.fileType')"
@@ -35,12 +33,13 @@
             label="hex"
           >
             <template #append>
-              <el-button
+              <AButton
                 v-if="isSupported"
-                @click="copy(hexColor)"
-              >
-                <Icon name="line-md:document-add" />
-              </el-button>
+                use-icon
+                icon-name="line-md:document-add"
+                :icon-size="10"
+                @click:button="copy(hexColor)"
+              />
             </template>
           </el-input>
         </el-form-item>
@@ -61,12 +60,13 @@
           label="rgb"
         >
           <template #append>
-            <el-button
+            <AButton
               v-if="isSupported"
-              @click="copy(rgbColor)"
-            >
-              <Icon name="line-md:document-add" />
-            </el-button>
+              use-icon
+              icon-name="line-md:document-add"
+              :icon-size="10"
+              @click:button="copy(rgbColor)"
+            />
           </template>
         </el-input>
       </el-form-item>
@@ -77,12 +77,13 @@
           label="hsl"
         >
           <template #append>
-            <el-button
+            <AButton
               v-if="isSupported"
-              @click="copy(hslColor)"
-            >
-              <Icon name="line-md:document-add" />
-            </el-button>
+              use-icon
+              icon-name="line-md:document-add"
+              :icon-size="10"
+              @click:button="copy(hslColor)"
+            />
           </template>
         </el-input>
       </el-form-item>
@@ -93,12 +94,13 @@
           label="cmyk"
         >
           <template #append>
-            <el-button
+            <AButton
               v-if="isSupported"
-              @click="copy(cmykColor)"
-            >
-              <Icon name="line-md:document-add" />
-            </el-button>
+              use-icon
+              icon-name="line-md:document-add"
+              :icon-size="10"
+              @click:button="copy(cmykColor)"
+            />
           </template>
         </el-input>
       </el-form-item>
diff --git a/pages/tech/index.vue b/pages/tech/index.vue
index a109075..4f8fdb3 100644
--- a/pages/tech/index.vue
+++ b/pages/tech/index.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="tech-lists flex flex-column flex-justify-center flex-align-center">
     <div class="write-button-container flex flex-justify-end">
-      <el-button
+      <AButton
         v-if="adminAccess"
-        class="write-tech-blog"
-        @click="openCreateArticleDialog"
-      >
-        {{ $t('texts.write') }}
-      </el-button>
+        custom-class="write-tech-blog"
+        button-size="lg"
+        button-label="write-article"
+        :button-text="$t('texts.write')"
+        @click:button="openCreateArticleDialog"
+      />
     </div>
     <el-timeline
       v-if="techData?.count"
diff --git a/stores/stackLogoData.ts b/stores/stackLogoData.ts
index bf9db9f..f0270da 100644
--- a/stores/stackLogoData.ts
+++ b/stores/stackLogoData.ts
@@ -8,7 +8,7 @@ export const useStackStore = defineStore('stackData', () => {
    *
    */
 
-  const stackLogoData = ref<SerializeObject>()
+  const stackLogoData = ref<{ orderIndex: { index: number }, title: string, url: string, deleted: boolean }[] | null>()
 
   return {
     stackLogoData