diff --git a/app.vue b/app.vue
index 70b1a23..3bd5bd8 100644
--- a/app.vue
+++ b/app.vue
@@ -22,7 +22,7 @@ provide(ID_INJECTION_KEY, {
   current: 0
 })
 
-const { loadMenuData } = useLoadComposable()
+const { loadMenuData } = useFetchComposable()
 
 const seoTitle = 'Developer Dewdew | 개발자 이연주'
 const seoDescription = '안녕하세요. FE 개발자 이연주입니다.'
diff --git a/assets/scss/mobile/pages/tech_list.scss b/assets/scss/mobile/pages/tech_list.scss
index af28137..bc00b34 100644
--- a/assets/scss/mobile/pages/tech_list.scss
+++ b/assets/scss/mobile/pages/tech_list.scss
@@ -9,13 +9,16 @@
   .write-button-container {
     margin-left: unset;
   }
-  .tech-timeline {
+  .articles {
     padding-left: unset;
     .tech-card {
-      .card-header {
+      .card-card-title {
         flex-direction: column;
         align-items: flex-start;
       }
+      .card-sub-head {
+        width: $space-percent-100;
+      }
     }
   }
 }
diff --git a/assets/scss/shared/components/header.scss b/assets/scss/shared/components/header.scss
index a5e3b25..50933d8 100644
--- a/assets/scss/shared/components/header.scss
+++ b/assets/scss/shared/components/header.scss
@@ -10,7 +10,7 @@
   align-items: center;
   background-color: var(--d-header-bg-color);
   filter: alpha(opacity=30);
-  z-index: 100;
+  z-index: 10;
   .header-container {
     width: $space-1000;
     .logo {
@@ -34,25 +34,6 @@
         }
       }
     }
-    .float-mobile-menu {
-      position: fixed;
-      align-items: center;
-      bottom: calc($space-20vh + $space-10vh);
-      right: $space-30;
-      opacity: .4;
-      width: $space-50;
-      height: calc($space-200 + $space-60);
-      padding: $space-4 0;
-      gap: $space-8;
-      border-radius: $space-12;
-      background-color: var(--d-bg-white-color);
-      .mobile-menu-links {
-        margin: $space-4 auto;
-        @include headline3;
-        color: var(--d-text-dark-color);
-        cursor: pointer;
-      }
-    }
     .github {
       padding: $space-2 0;
       cursor: pointer;
@@ -60,4 +41,21 @@
       height: auto;
     }
   }
+}
+
+.mobile-logo {
+  cursor: pointer;
+}
+
+.mobile-menu-links {
+  @include headline4;
+  text-decoration: none;
+  transition: all .1s ease-in-out;
+  cursor: pointer;
+  &:hover {
+    scale: 1.1;
+  }
+  &:hover, &:focus {
+    cursor: pointer;
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/shared/pages/tech_detail.scss b/assets/scss/shared/pages/tech_detail.scss
index fbc2b9e..a9cecea 100644
--- a/assets/scss/shared/pages/tech_detail.scss
+++ b/assets/scss/shared/pages/tech_detail.scss
@@ -65,15 +65,7 @@
       margin: $space-20 $space-10;
       @include headline4;
     }
-    .el-timeline {
-      margin-top: $space-20;
-      .el-timeline-item {
-        width: $space-percent-100;
-        .el-timeline-item__content {
-          @include tiptap-template;
-        }
-      }
-    }
+    @include tiptap-template;
     .message-component {
       .name {
         @include headline6;
diff --git a/assets/scss/shared/pages/tech_list.scss b/assets/scss/shared/pages/tech_list.scss
index e53d4ff..254e565 100644
--- a/assets/scss/shared/pages/tech_list.scss
+++ b/assets/scss/shared/pages/tech_list.scss
@@ -7,7 +7,6 @@
 */
 .tech-lists {
   position: relative;
-  height: $space-80vh;
   width: $space-100vw;
   overflow-x: hidden;
   .write-button-container {
@@ -15,13 +14,9 @@
     margin-top: $space-100;
     overflow-y: auto;
   }
-  .tech-timeline {
+  .articles {
     max-height: $space-60vh;
     width: $space-80vw;
-    scrollbar-width: none;
-    ::-webkit-scrollbar {
-      display: none;
-    }
     .tech-card {
       cursor: pointer;
       .title {
diff --git a/components/AHeader.client.vue b/components/AHeader.client.vue
index d5120ab..4a24278 100644
--- a/components/AHeader.client.vue
+++ b/components/AHeader.client.vue
@@ -13,14 +13,13 @@
       </nuxt-link>
       <div class="flex-auto" />
       <div
+        v-if="desktopModeTrigger"
         class="desktop-menu flex flex-fixed gap-40"
-        :class="{'float-mobile-menu flex flex-column': !desktopModeTrigger}"
       >
         <nuxt-link
           v-for="(menu, index) in mainMenuData"
           :key="index"
           class="menu-links flex-align-center"
-          :class="{'mobile-menu-links flex flex-justify-center': !desktopModeTrigger}"
           :to="menu.url"
           :aria-label="menu.title"
         >
@@ -68,7 +67,6 @@
         </template>
       </DDSelectMenu>
       <AButton
-        custom-class="mr-20"
         aria-label="theme"
         button-variant="ghost"
         use-icon
@@ -76,6 +74,52 @@
         :icon-size="24"
         @click:button="isDark = !isDark"
       />
+      <AButton
+        v-if="!desktopModeTrigger"
+        aria-label="mobile-menu"
+        button-variant="ghost"
+        use-icon
+        icon-name="line-md:close-to-menu-transition"
+        :icon-size="24"
+        @click:button="() => sideMenuTrigger = true"
+      />
+      <DDSlideover
+        v-model="sideMenuTrigger"
+        class="mobile-menu"
+        label="side-menu"
+      >
+        <div class="flex flex-align-center flex-space-between p-5">
+          <nuxt-img
+            class="mobile-logo flex-fixed"
+            :src="url('dewdew_logo.webp', 'assets', 'logo')"
+            legacy-format="webp"
+            loading="lazy"
+            :img-attrs="{class: 'dewdew-logo'}"
+            alt="logo"
+            @click="clickLogo"
+          />
+          <AButton
+            color="violet"
+            button-variant="ghost"
+            use-icon
+            icon-name="line-md:menu-to-close-alt-transition"
+            @click="sideMenuTrigger = false"
+          />
+        </div>
+        <nuxt-link
+          v-for="(menu, index) in mainMenuData"
+          :key="index"
+          class="mobile-menu-links flex-align-center p-5"
+          :to="menu.url"
+          :aria-label="menu.title"
+          @click="() => sideMenuTrigger = false"
+        >
+          <Icon :name="`line-md:${menu.icon}`" />
+          <span class="ml-2">
+            {{ menu.title }}
+          </span>
+        </nuxt-link>
+      </DDSlideover>
     </div>
   </div>
 </template>
@@ -93,6 +137,7 @@ const { url } = useImageStorage()
 const desktopModeTrigger = computed(() => {
   return width.value > 999
 })
+const sideMenuTrigger = ref(false)
 
 const locales = [
   { label: t('localeMenu.korean'), value: 'ko' },
@@ -118,4 +163,9 @@ const isDark = computed({
   }
 })
 
+const clickLogo = () => {
+  navigateTo('/')
+  sideMenuTrigger.value = false
+}
+
 </script>
diff --git a/components/atoms/CardComponent.vue b/components/atoms/CardComponent.vue
index 36d8d47..6cd33ed 100644
--- a/components/atoms/CardComponent.vue
+++ b/components/atoms/CardComponent.vue
@@ -1,16 +1,26 @@
 <template>
   <DDCard class="tech-card">
     <template #header>
-      <div class="card-header flex flex-row flex-align-center gap-8">
+      <div class="card-title flex flex-row flex-align-center gap-8">
         <span class="title">
           {{ cardItem.title }}
         </span>
+      </div>
+      <div class="card-sub-head flex flex-justify-end mt-2 space-x-2">
         <DDBadge
-          color="violet"
+          :color="badgeColor(cardItem.like)"
+          size="md"
           variant="soft"
         >
           {{ cardItem.like + ' ❤️' }}
         </DDBadge>
+        <DDBadge
+          :color="badgeColor(cardItem.view_count ?? 0)"
+          size="md"
+          variant="soft"
+        >
+          {{ (cardItem.view_count ?? 0) + ' 👀' }}
+        </DDBadge>
       </div>
     </template>
     <div class="desc">
@@ -21,6 +31,8 @@
 
 <script setup lang="ts">
 
+const { badgeColor } = useUi()
+
 defineProps<{
   cardItem: SerializeObject
 }>()
diff --git a/components/atoms/article/ArticleAddOn.vue b/components/atoms/article/ArticleAddOn.vue
index 52d5868..326b3cf 100644
--- a/components/atoms/article/ArticleAddOn.vue
+++ b/components/atoms/article/ArticleAddOn.vue
@@ -1,29 +1,32 @@
 <template>
-  <div class="article-add-on flex flex-justify-end mt-default mb-default">
+  <div class="article-add-on flex flex-justify-end mb-default space-x-4">
+    <AButton
+      :button-color="badgeColor(data.like)"
+      button-variant="outline"
+      :button-text="data.like + ' ❤️' "
+      @click="$emit('update-count')"
+    />
     <DDBadge
-      class="like"
-      color="violet"
+      :color="badgeColor(data.view_count ?? 0)"
+      size="md"
       variant="soft"
-      size="lg"
-      @click="$emit('update-count')"
     >
-      {{ `${data.like} ❤️` }}
+      {{ (data.view_count ?? 0) + ' 👀' }}
     </DDBadge>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'
+
+const { badgeColor } = useUi()
 
 withDefaults(
   defineProps<{
     articleId: string,
-    tagSize?: EpPropMergeType<StringConstructor, '' | 'default' | 'large' | 'small', unknown>,
     data: SerializeObject,
     activateLike?: boolean
   }>(),
   {
-    tagSize: 'large',
     activateLike: false
   }
 )
diff --git a/components/atoms/article/ArticleComments.vue b/components/atoms/article/ArticleComments.vue
index fd2bd37..f760851 100644
--- a/components/atoms/article/ArticleComments.vue
+++ b/components/atoms/article/ArticleComments.vue
@@ -3,32 +3,29 @@
     <span class="comments-title">
       {{ commentTitle }}
     </span>
-    <el-timeline v-if="commentData.length">
-      <el-timeline-item
-        v-for="(comment, index) in commentData"
-        :key="index"
-        center
-        color="#D3E3D2"
-      >
-        <ANuxtTime :date-time="comment.created_at" />
-        <div class="comments-item flex flex-row flex-space-between flex-align-center">
-          <div class="message-component mr-40">
-            <span class="name">
-              {{ comment.name }}
-            </span>
-            <div v-dompurify-html="comment.message" />
-          </div>
-          <AButton
-            round-button
-            use-icon
-            icon-name="line-md:close-small"
-            @click:button="openPasswordDialog(comment)"
-          />
+    <DDCard
+      v-for="(comment, index) in commentData"
+      v-show="commentData.length"
+      :key="index"
+      class="mt-4 mb-4"
+    >
+      <div class="flex flex-row flex-space-between flex-align-center">
+        <div class="message-component">
+          <span class="name">
+            {{ comment.name }}
+          </span>
+          <div v-dompurify-html="comment.message" />
         </div>
-      </el-timeline-item>
-    </el-timeline>
+        <AButton
+          round-button
+          use-icon
+          icon-name="line-md:close-small"
+          @click:button="openPasswordDialog(comment)"
+        />
+      </div>
+    </DDCard>
     <DDSkeleton
-      v-else
+      v-show="!commentData.length"
       class="empty-comments mt-4 mb-4"
       :ui="{ rounded: 'rounded-fill'}"
     />
diff --git a/components/atoms/article/ArticleCreateComment.vue b/components/atoms/article/ArticleCreateComment.vue
index 72b9b4e..66e42d1 100644
--- a/components/atoms/article/ArticleCreateComment.vue
+++ b/components/atoms/article/ArticleCreateComment.vue
@@ -57,7 +57,6 @@
           clearable
           aria-label="password"
           :ui="{ icon: { trailing: { pointer: '' } } }"
-          @keyup.enter="onSubmit"
         >
           <template #trailing>
             <div class="flex flex-justify-center space-x-1">
diff --git a/components/dialog/ImageUploadDialog.vue b/components/dialog/ImageUploadDialog.vue
index fe8c41d..c9e21c1 100644
--- a/components/dialog/ImageUploadDialog.vue
+++ b/components/dialog/ImageUploadDialog.vue
@@ -70,10 +70,10 @@ import { genFileId } from 'element-plus'
 
 const imageUpload = ref<UploadInstance>()
 
-const client = useSupabaseClient<SupabaseDataBase>()
-
 const { t } = useLocale()
 
+const { loadStorage, uploadStorage } = useFetchComposable()
+
 const { notify } = useAlarm()
 
 withDefaults(
@@ -135,13 +135,9 @@ const fileFailedProcess = (message:string) => {
 const uploadImage = async (file:File) => {
   const fileExt = file.name.split('.').pop()
   const filePath = `${genUid()}.${fileExt}`
-  const { error: uploadError } = await client.storage
-    .from('tech')
-    .upload(filePath, file, {
-      cacheControl: '3600',
-      upsert: true
-    })
-  console.log(filePath)
+
+  const uploadError = await uploadStorage('tech', filePath, file)
+
   if (uploadError) {
     notify('', 'error', String(uploadError), true, 3000, 0)
   }
@@ -151,11 +147,8 @@ const uploadImage = async (file:File) => {
 
 const downloadImage = async (imageName:string) => {
   if (!imageName) { return }
-  const { data } = await client.storage
-    .from('tech')
-    .getPublicUrl(imageName)
 
-  exportUrl.value = data.publicUrl
+  exportUrl.value = await loadStorage('tech', imageName)
 }
 
 const submitImage = () => {
diff --git a/components/molecules/main/MainSkillContents.vue b/components/molecules/main/MainSkillContents.vue
index 4b11a96..1906e7b 100644
--- a/components/molecules/main/MainSkillContents.vue
+++ b/components/molecules/main/MainSkillContents.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="main-skills flex flex-column">
-    <LazyMainSkillsDescriptions
+    <MainSkillsDescriptions
       :skills-title="mainSkillTitle"
       :skills-first-text="mainSkillFirstText"
       :skills-second-text="mainSkillSecondText"
       :skills-third-text="mainSkillThirdText"
       :skills-text-trigger="skillsTextTrigger"
     />
-    <LazyMainSkillsImage
+    <MainSkillsImage
       :skills-image="stackLogoData"
       :skills-bg-trigger="skillsBgTrigger"
     />
@@ -24,7 +24,7 @@
             v-for="item in frontEnd"
             :key="item.title"
           >
-            <LazyMainSkillProgress :progress-data="item" />
+            <MainSkillProgress :progress-data="item" />
           </div>
         </div>
         <div class="backend-list flex flex-column flex-justify-center mb-40">
@@ -35,7 +35,7 @@
             v-for="item in backEnd"
             :key="item.title"
           >
-            <LazyMainSkillProgress :progress-data="item" />
+            <MainSkillProgress :progress-data="item" />
           </div>
         </div>
       </div>
@@ -47,7 +47,7 @@
           v-for="item in devOps"
           :key="item.title"
         >
-          <LazyMainSkillProgress :progress-data="item" />
+          <MainSkillProgress :progress-data="item" />
         </div>
       </div>
     </div>
diff --git a/components/molecules/tiptap/TiptapExtraGroup.vue b/components/molecules/tiptap/TiptapExtraGroup.vue
index 4f451c3..60828bc 100644
--- a/components/molecules/tiptap/TiptapExtraGroup.vue
+++ b/components/molecules/tiptap/TiptapExtraGroup.vue
@@ -7,38 +7,38 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditSpecialButtons
+        <EditSpecialButtons
           v-if="fullOption"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHorizontalRule().run() : null"
           icon-type="ri:separator"
           :tooltip-text="$t('tiptap.separator')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="false"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().setHardBreak().run() : null"
           icon-type="ri:corner-down-left-line"
           :tooltip-text="$t('tiptap.moreLine')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('code')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleCode().run() : null"
           icon-type="ri:code-fill"
           :tooltip-text="$t('tiptap.code')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :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
+        <EditSpecialButtons
           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
+        <EditSpecialButtons
           v-if="fullOption"
           :disabled="!tiptapEditor.can().chain().focus().redo().run()"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().redo().run() : null"
diff --git a/components/molecules/tiptap/TiptapHeadingGroup.vue b/components/molecules/tiptap/TiptapHeadingGroup.vue
index fe66a82..f5ba26f 100644
--- a/components/molecules/tiptap/TiptapHeadingGroup.vue
+++ b/components/molecules/tiptap/TiptapHeadingGroup.vue
@@ -7,42 +7,42 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           v-if="fullOption"
           :editor="tiptapEditor"
           :is-active="tiptapEditor.isActive('heading', { level: 6 })"
diff --git a/components/molecules/tiptap/TiptapLinkGroup.vue b/components/molecules/tiptap/TiptapLinkGroup.vue
index 5613c0e..80f7c95 100644
--- a/components/molecules/tiptap/TiptapLinkGroup.vue
+++ b/components/molecules/tiptap/TiptapLinkGroup.vue
@@ -7,19 +7,19 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('link')"
           :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-hyper-link') : null"
           icon-type="ri:link"
           :tooltip-text="$t('tiptap.link')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('link')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().unsetLink().run() : null"
           icon-type="ri:link-unlink"
           :tooltip-text="$t('tiptap.unlink')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="false"
           :action="() => tiptapEditor ? tiptapLinkGroupEmits('open-youtube-link') : null"
           icon-type="ri:youtube-line"
diff --git a/components/molecules/tiptap/TiptapStrokeGroup.vue b/components/molecules/tiptap/TiptapStrokeGroup.vue
index 5b42944..e4e2c19 100644
--- a/components/molecules/tiptap/TiptapStrokeGroup.vue
+++ b/components/molecules/tiptap/TiptapStrokeGroup.vue
@@ -7,26 +7,26 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('underline')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleUnderline().run() : null"
           icon-type="ri:underline"
           :tooltip-text="$t('tiptap.underline')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('strike')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleStrike().run() : null"
           icon-type="ri:strikethrough-2"
           :tooltip-text="$t('tiptap.strikethrough')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           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
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('highlight', { color: '#ffc078' })"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleHighlight({ color: '#ffc078' }).run() : null"
           icon-type="ri:mark-pen-line"
diff --git a/components/molecules/tiptap/TiptapTableGroup.vue b/components/molecules/tiptap/TiptapTableGroup.vue
index 6e8d1df..77c739b 100644
--- a/components/molecules/tiptap/TiptapTableGroup.vue
+++ b/components/molecules/tiptap/TiptapTableGroup.vue
@@ -7,47 +7,47 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :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
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnBefore().run() : null"
           icon-type="ri:layout-left-fill"
           :tooltip-text="$t('tiptap.addColumnBefore')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().addColumnAfter().run() : null"
           icon-type="ri:layout-right-fill"
           :tooltip-text="$t('tiptap.addColumnAfter')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteColumn().run() : null"
           icon-type="ri:delete-column"
           :tooltip-text="$t('tiptap.deleteColumn')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowBefore().run() : null"
           icon-type="ri:layout-top-fill"
           :tooltip-text="$t('tiptap.addRowBefore')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().addRowAfter().run() : null"
           icon-type="ri:layout-bottom-fill"
           :tooltip-text="$t('tiptap.addRowAfter')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteRow().run() : null"
           icon-type="ri:delete-row"
           :tooltip-text="$t('tiptap.deleteRow')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().mergeOrSplit().run() : null"
           icon-type="ri:merge-cells-horizontal"
           :tooltip-text="$t('tiptap.mergeOrSplit')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().deleteTable().run() : null"
           icon-type="ci:table-delete"
           :tooltip-text="$t('tiptap.deleteTable')"
diff --git a/components/molecules/tiptap/TiptapTextAlignGroup.vue b/components/molecules/tiptap/TiptapTextAlignGroup.vue
index 9190f8e..4802a88 100644
--- a/components/molecules/tiptap/TiptapTextAlignGroup.vue
+++ b/components/molecules/tiptap/TiptapTextAlignGroup.vue
@@ -7,28 +7,28 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           v-if="fullOption"
           :is-active="tiptapEditor.isActive({ textAlign: 'justify' })"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().setTextAlign('justify').run() : null"
diff --git a/components/molecules/tiptap/TiptapTextListGroup.vue b/components/molecules/tiptap/TiptapTextListGroup.vue
index 08004cb..df5ec45 100644
--- a/components/molecules/tiptap/TiptapTextListGroup.vue
+++ b/components/molecules/tiptap/TiptapTextListGroup.vue
@@ -7,28 +7,28 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditNormalButtons
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           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
+        <EditNormalButtons
           v-if="fullOption"
           :is-active="tiptapEditor.isActive('blockquote')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBlockquote().run() : null"
diff --git a/components/molecules/tiptap/TiptapTextStyleGroup.vue b/components/molecules/tiptap/TiptapTextStyleGroup.vue
index 5330992..141b940 100644
--- a/components/molecules/tiptap/TiptapTextStyleGroup.vue
+++ b/components/molecules/tiptap/TiptapTextStyleGroup.vue
@@ -7,18 +7,18 @@
     />
     <template #panel>
       <div class="flex gap-2">
-        <LazyEditColorInput
+        <EditColorInput
           :color-value="tiptapEditor ? selectColor(tiptapEditor) : null"
           :tiptap-editor="tiptapEditor"
           :tooltip-text="$t('tiptap.colors')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           :is-active="tiptapEditor.isActive('bold')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleBold().run() : null"
           icon-type="ri:bold"
           :tooltip-text="$t('tiptap.bold')"
         />
-        <LazyEditNormalButtons
+        <EditNormalButtons
           v-if="fullOption"
           :is-active="tiptapEditor.isActive('italic')"
           :action="() => tiptapEditor ? tiptapEditor.chain().focus().toggleItalic().run() : null"
diff --git a/composables/fetch/loadData.ts b/composables/fetch/index.ts
similarity index 64%
rename from composables/fetch/loadData.ts
rename to composables/fetch/index.ts
index 4632347..21e4032 100644
--- a/composables/fetch/loadData.ts
+++ b/composables/fetch/index.ts
@@ -1,4 +1,6 @@
-export const useLoadComposable = () => {
+export const useFetchComposable = () => {
+  const client = useSupabaseClient()
+
   /**
    * ! Load Data !
    */
@@ -56,6 +58,93 @@ export const useLoadComposable = () => {
     portfolioData.value = data.value
   }
 
+  const loadArchiveData = async () => {
+    const { data }: SerializeObject = await useFetch('/api/archive', {
+      headers: useRequestHeaders(['cookie']),
+      immediate: true
+    })
+
+    return data.value
+  }
+
+  const countData = async (table: string) => {
+    const { count } = await client
+      .from(table)
+      .select('*', { count: 'exact' })
+
+    return { count }
+  }
+
+  const insertData = async (insertData: SerializeObject, table: string) => {
+    const { error } = await client
+      .from(table)
+      .insert(insertData)
+
+    if (error) {
+      return error
+    }
+  }
+
+  const upsertData = async (upsertData: SerializeObject, table: string) => {
+    const { error } = await client
+      .from(table)
+      .upsert(upsertData)
+
+    if (error) {
+      return error
+    }
+  }
+
+  const loadStorage = async (storage: string, imageName: string) => {
+    const { data } = await client
+      .storage
+      .from(storage)
+      .getPublicUrl(imageName)
+
+    return data.publicUrl
+  }
+
+  const uploadStorage = async (storage: string, path: string, file: File) => {
+    const { error } = await client
+      .storage
+      .from(storage)
+      .upload(path, file, {
+        cacheControl: '3600',
+        upsert: true
+      })
+
+    return error
+  }
+
+  const deleteData = async (deleteId: string, table: string, admin: boolean, matOpt: string, matOptVal: string, subMatOpt: string, subMatOptVal: string) => {
+    if (admin) {
+      const { error } = await client
+        .from(table)
+        .delete()
+        .eq('id', deleteId)
+        .eq(matOpt, matOptVal)
+
+      if (error) {
+        return error
+      }
+    } else {
+      const { error } = await client
+        .from(table)
+        .delete()
+        .eq('id', deleteId)
+        .eq(matOpt, matOptVal)
+        .eq(subMatOpt, subMatOptVal)
+
+      if (error) {
+        return error
+      }
+    }
+  }
+
+  const logout = async () => {
+    await client.auth.signOut()
+  }
+
   const replaceMenuData = (menuData:{ orderIndex: { index: number }, title: string, icon: string, menu_type: string, url: string, image_url: string, deleted: boolean }[] | null, menuType:string) => {
     switch (menuType) {
       case 'root' :
@@ -109,6 +198,14 @@ export const useLoadComposable = () => {
     loadMenuData,
     loadMainData,
     loadStackData,
-    loadPortfolioData
+    loadPortfolioData,
+    loadArchiveData,
+    countData,
+    insertData,
+    upsertData,
+    loadStorage,
+    uploadStorage,
+    deleteData,
+    logout
   }
 }
diff --git a/composables/util/ui.ts b/composables/util/ui.ts
index 9360a2a..c8ea9b0 100644
--- a/composables/util/ui.ts
+++ b/composables/util/ui.ts
@@ -75,6 +75,25 @@ export const useUi = () => {
     return randomFront.concat(' ', randomBack)
   }
 
+  const badgeColor = (likeCount:number) => {
+    if (likeCount === 0) {
+      return 'orange'
+    } else if (likeCount > 0 && likeCount < 20) {
+      return 'yellow'
+    } else if (likeCount >= 20 && likeCount < 50) {
+      return 'emerald'
+    } else if (likeCount >= 50 && likeCount < 100) {
+      return 'teal'
+    } else if (likeCount >= 100 && likeCount < 250) {
+      return 'sky'
+    } else if (likeCount >= 250 && likeCount < 500) {
+      return 'cyan'
+    } else if (likeCount >= 500 && likeCount < 1000) {
+      return 'violet'
+    } else if (likeCount >= 1000) {
+      return 'rose'
+    }
+  }
 
   const progressColor = (percent: number) => {
     const colors = ['rose', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'red', 'rose']
@@ -100,6 +119,7 @@ export const useUi = () => {
     genFileDate,
     currentDateIosFormat,
     generateCommentName,
+    badgeColor,
     progressColor
   }
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 87370b8..05891cb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="layout-container">
-    <LazyAHeader />
+    <AHeader />
     <slot />
-    <LazyAFooter />
+    <AFooter />
     <InstallPwa />
-    <LazyLeaveCounter />
+    <LeaveCounter />
   </div>
 </template>
diff --git a/package.json b/package.json
index 4179c09..276d2e4 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "1.13.0",
+  "version": "1.14.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",
diff --git a/pages/archives/[year].vue b/pages/archives/[year].vue
index 7fd65fa..a0ad860 100644
--- a/pages/archives/[year].vue
+++ b/pages/archives/[year].vue
@@ -25,11 +25,11 @@
 
 <script setup lang="ts">
 
-const client = useSupabaseClient()
-
 const { t } = useLocale()
 const { path } = useRoute()
 
+// const { loadArchiveDetailData } = useFetchComposable()
+
 useHead({
   title: t('pageTitle.archives'),
   meta: [
@@ -47,18 +47,12 @@ definePageMeta({
 const selectImageData = ref<SerializeObject>()
 const imageDialogTrigger = ref(false)
 
-const { data: yearData }:SerializeObject = await useAsyncData('archiveDetailData', async () => {
-  const { data, error } = await client
-    .from('archiveImage')
-    .select('title, years, url, deleted')
-    .eq('years', path.split('/archives/')[1])
-    .eq('deleted', false)
-
-  if (error) {
-    throw createError({ statusMessage: error.message })
-  }
-
-  return data
+const { data: yearData }: SerializeObject = await useFetch('/api/archive/detail', {
+  headers: useRequestHeaders(['cookie']),
+  params: {
+    years: path.split('/archives/')[1]
+  },
+  immediate: true
 })
 
 const openImageDialog = (imageData:SerializeObject) => {
diff --git a/pages/archives/index.vue b/pages/archives/index.vue
index 5fb7122..fb6d0ae 100644
--- a/pages/archives/index.vue
+++ b/pages/archives/index.vue
@@ -12,10 +12,10 @@
 
 <script setup lang="ts">
 
-const client = useSupabaseClient()
-
 const { t } = useLocale()
 
+const { loadArchiveData } = useFetchComposable()
+
 const { randomOrder } = useUi()
 
 useHead({
@@ -30,16 +30,7 @@ useHead({
 
 
 const { data: thumbImageData } = useAsyncData('archiveData', async () => {
-  const { data, error } = await client
-    .from('archiveIndex')
-    .select('index, title, deleted, archiveImage(title, years, url)')
-    .eq('deleted', false)
-
-  if (error) {
-    throw createError({ statusMessage: error.message })
-  }
-
-  if (!data) { return }
+  const data = await loadArchiveData()
 
   return generateThumbImageData(data)
 }, {
diff --git a/pages/confirm.vue b/pages/confirm.vue
index 3955f53..9fec695 100644
--- a/pages/confirm.vue
+++ b/pages/confirm.vue
@@ -9,45 +9,38 @@
 <script setup lang="ts">
 
 const user = useSupabaseUser()
-const client = useSupabaseClient()
 
 const { t } = useLocale()
 const { notify } = useAlarm()
 
 const { adminAccess } = storeToRefs(useTechStore())
 
+const { logout } = useFetchComposable()
+
 definePageMeta({
   layout: 'login'
 })
 
 const setUserCoreData = async (userId:string) => {
-  const { data, error } = await client
-    .from('profiles')
-    .select('admin')
-    .eq('id', userId)
-    .eq('deleted', false)
-    .single()
-
-  if (error) {
-    throw createError({ statusMessage: error.message })
-  }
-
-  if (data.admin) {
-    adminAccess.value = data.admin
-    notify('', 'success', t('messages.welcome'), true, 3000, 0)
-    navigateTo('/tech')
-  } else {
-    await client.auth
-      .signOut()
-    notify('', 'error', t('messages.notAdmin'), true, 3000, 0)
-    navigateTo('/')
-  }
-  return data
+  const { data }: SerializeObject = await useFetch('/api/admin', {
+    headers: useRequestHeaders(['cookie']),
+    query: {
+      userId
+    },
+    immediate: true
+  })
+
+  data.value.admin
+    ? adminAccess.value = data.value.admin
+    : logout()
+
+  notify('', data.value.admin ? 'success' : 'warning', data.value.admin ? t('messages.welcome') : t('messages.notAdmin'), true, 3000, 0)
+  navigateTo(data.value.admin ? '/tech' : '/')
 }
 
-watch(() => user.value, async () => {
+watch(() => user.value, () => {
   if (user.value) {
-    await setUserCoreData(user.value?.id)
+    setUserCoreData(user.value?.id)
   }
 }, { immediate: true })
 
diff --git a/pages/index.vue b/pages/index.vue
index 02b7d0f..4610670 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -41,7 +41,7 @@ const { y } = useWindowScroll()
 const { mainIntroTitle, mainIntroText, mainIntroScrollText, mainResumeTitle, mainEducatedText, mainCareerText, mainPortfolioTitle, mainPortfolioText, mainPortfolioBackground } = storeToRefs(useMainStore())
 const { portfolioData } = storeToRefs(usePortfolioStore())
 
-const { loadMainData, loadStackData, loadPortfolioData } = useLoadComposable()
+const { loadMainData, loadStackData, loadPortfolioData } = useFetchComposable()
 
 useHead({
   meta: [
diff --git a/pages/projects/colorTranslate.vue b/pages/projects/colorTranslate.vue
index 34fe86f..c327e54 100644
--- a/pages/projects/colorTranslate.vue
+++ b/pages/projects/colorTranslate.vue
@@ -186,7 +186,6 @@ watch(() => formData.hexColor, () => {
     formData.hexColor = ''
     return
   }
-  console.log(formData.hexColor)
   if (!formData.hexColor.startsWith('#')) {
     formData.hexColor = '#'.concat(formData.hexColor)
   }
diff --git a/pages/tech/[id].vue b/pages/tech/[id].vue
index e32e321..f1a6e79 100644
--- a/pages/tech/[id].vue
+++ b/pages/tech/[id].vue
@@ -42,12 +42,11 @@
 <script setup lang="ts">
 
 const user = useSupabaseUser()
-const client = useSupabaseClient()
 const { y } = useWindowScroll()
 
 const { t } = useLocale()
 
-// const { loadTechBlogCommentData } = useLoadComposable()
+const { insertData, upsertData, deleteData } = useFetchComposable()
 
 const { clickedTechArticle, adminAccess } = storeToRefs(useTechStore())
 
@@ -62,20 +61,11 @@ const techBlogLikeTrigger = ref(false)
 const displayFloatButtonTrigger = ref(false)
 const editTrigger = ref(false)
 
-const { data: techDetailData, refresh: techRefresh } = useAsyncData('blogDetailData', async () => {
-  const { data, error } = await client
-    .from('tech')
-    .select('id, title, desc, raw_article, like, update_user_id, created_at, updated_at, deleted')
-    .eq('id', techId.value)
-    .eq('deleted', false)
-    .single()
-
-  if (error) {
-    throw createError({ statusMessage: error.message })
-  }
-
-  return data
-}, {
+const { data: techDetailData, refresh: techRefresh }: SerializeObject = await useFetch('/api/tech/detail', {
+  headers: useRequestHeaders(['cookie']),
+  query: {
+    techBlogId: techId.value
+  },
   immediate: true
 })
 
@@ -113,26 +103,34 @@ const editArticle = (text:string, rawText:string) => {
   updateData.value.update_user_id = user.value?.id ?? ''
 }
 
+const updateViewCount = async () => {
+  const countData:SerializeObject = {
+    id: techId.value,
+    view_count: (techDetailData.value?.view_count ?? 0) + 1
+  }
+
+  const error = await upsertData(countData, 'tech')
+
+  if (!error) {
+    techRefresh()
+  }
+}
+
 const updateArticle = async () => {
-  await client
-    .from('tech')
-    .upsert(updateData.value)
+  const error = await upsertData(updateData.value, 'tech')
 
-  editTrigger.value = false
-  notify('', 'success', t('messages.edit'), true, 3000, 0)
-  techRefresh()
+  if (!error) {
+    notify('', 'success', t('messages.edit'), true, 3000, 0)
+    editTrigger.value = false
+    techRefresh()
+  }
 }
 
 const updateLikeCount = () => {
-  console.log(clickedTechArticle.value)
   const alreadyLike = clickedTechArticle.value.includes(techDetailData.value?.id ?? '')
-  if (!alreadyLike) {
-    updateTechBlogLikeCount()
-    clickedTechArticle.value.push(techDetailData.value?.id ?? '')
-    notify('', 'success', t('messages.successPressLike'), true, 1000, 0)
-  } else {
-    notify('', 'warning', t('messages.alreadyPressLike'), true, 1000, 0)
-  }
+  !alreadyLike
+    ? updateTechBlogLikeCount()
+    : notify('', 'warning', t('messages.alreadyPressLike'), true, 1000, 0)
 }
 
 const updateTechBlogLikeCount = async () => {
@@ -140,11 +138,12 @@ const updateTechBlogLikeCount = async () => {
     id: techId.value,
     like: parseInt(techDetailData.value?.like ?? '') + 1
   }
-  const { error } = await client
-    .from('tech')
-    .upsert(countData)
+
+  const error = await upsertData(countData, 'tech')
 
   if (!error) {
+    notify('', 'success', t('messages.successPressLike'), true, 1000, 0)
+    clickedTechArticle.value.push(techDetailData.value?.id ?? '')
     techRefresh()
   }
 }
@@ -154,9 +153,8 @@ const createComment = async (commentData:CreateComment) => {
     ...commentData,
     tech_id: techId.value
   }
-  const { error } = await client
-    .from('techComment')
-    .insert(createCommentData)
+
+  const error = await insertData(createCommentData, 'techComment')
 
   if (!error) {
     notify('', 'error', t('messages.successCreateComment'), true, 1000, 0)
@@ -165,11 +163,7 @@ const createComment = async (commentData:CreateComment) => {
 }
 
 const deleteAdminComment = async (comment:SerializeObject) => {
-  const { error } = await client
-    .from('techComment')
-    .delete()
-    .eq('id', comment.id)
-    .eq('tech_id', techId.value)
+  const error = await deleteData(comment.id, 'techComment', true, 'tech_id', techId.value, '', '')
 
   if (!error) {
     notify('', 'error', t('messages.deleteComment'), true, 1000, 0)
@@ -178,12 +172,7 @@ const deleteAdminComment = async (comment:SerializeObject) => {
 }
 
 const deleteComment = async (comment:SerializeObject, password:string) => {
-  const { error } = await client
-    .from('techComment')
-    .delete()
-    .eq('id', comment.id)
-    .eq('tech_id', techId.value)
-    .eq('password', password)
+  const error = await deleteData(comment.id, 'techComment', false, 'tech_id', techId.value, 'password', password)
 
   if (!error) {
     notify('', 'error', t('messages.deleteComment'), true, 1000, 0)
@@ -197,4 +186,6 @@ const clickEditArticle = () => {
     : notify('', 'error', t('messages.unAuthorizedWrite'), true, 3000, 0)
 }
 
+updateViewCount()
+
 </script>
diff --git a/pages/tech/index.vue b/pages/tech/index.vue
index a7a9be6..122b4f6 100644
--- a/pages/tech/index.vue
+++ b/pages/tech/index.vue
@@ -1,47 +1,43 @@
 <template>
   <div class="tech-lists flex flex-column flex-justify-center flex-align-center">
     <div class="write-button-container flex flex-justify-end">
-      <AButton
-        v-if="adminAccess"
-        custom-class="write-tech-blog"
-        button-size="lg"
-        button-label="write-article"
-        :button-text="$t('texts.write')"
-        @click:button="openCreateArticleDialog"
-      />
+      <client-only>
+        <AButton
+          v-if="adminAccess"
+          custom-class="write-tech-blog"
+          button-size="lg"
+          button-label="write-article"
+          :button-text="$t('texts.write')"
+          @click:button="openCreateArticleDialog"
+        />
+      </client-only>
     </div>
-    <el-timeline
-      v-if="techData?.count"
-      class="tech-timeline"
+    <div
+      v-for="(item, index) in techData"
+      v-show="count"
+      :key="index"
+      class="articles mt-6 mb-4"
+      @click="() => navigateTo(`/tech/${item.id}`)"
     >
-      <el-timeline-item
-        v-for="item in techData.article"
-        :key="item.id"
-        center
-        :color="item.like > 10 ? '#C74436' : '#D3E3D2'"
-        placement="top"
-        @click="() => navigateTo(`/tech/${item.id}`)"
-      >
-        <ANuxtTime
-          :date-time="item.created_at"
-          :full-date-time="false"
-        />
-        <LazyCardComponent :card-item="item" />
-      </el-timeline-item>
-      <DDPagination
-        v-model="currentPage"
-        class="flex flex-justify-center m-4 pb-8"
-        :active-button="{ variant: 'outline', color: 'violet' }"
-        :inactive-button="{ color: 'gray' }"
-        :page-count="currentPageSize"
-        :total="techData.count"
-        show-first
-        show-last
+      <ANuxtTime
+        :date-time="item.created_at"
+        :full-date-time="false"
       />
-    </el-timeline>
+      <LazyCardComponent :card-item="item" />
+    </div>
+    <DDPagination
+      v-model="currentPage"
+      class="flex flex-justify-center m-4 pb-8"
+      :active-button="{ variant: 'outline', color: 'violet' }"
+      :inactive-button="{ color: 'gray' }"
+      :page-count="currentPageSize"
+      :total="count ?? 0"
+      show-first
+      show-last
+    />
     <DDSkeleton
-      v-else
-      class="tech-timeline"
+      v-show="!count"
+      class="articles"
       :ui="{ rounded: 'rounded-fill'}"
     />
     <CreateArticleDialog
@@ -55,11 +51,12 @@
 <script setup lang="ts">
 
 const user = useSupabaseUser()
-const client = useSupabaseClient()
 
 const { t } = useLocale()
 
-const { adminAccess } = storeToRefs(useTechStore())
+const { countData, upsertData } = useFetchComposable()
+
+const { currentPage, currentPageSize, adminAccess } = storeToRefs(useTechStore())
 const { notify } = useAlarm()
 
 useHead({
@@ -72,9 +69,6 @@ useHead({
   ]
 })
 
-const currentPage = ref(1)
-const currentPageSize = ref(2)
-
 const createArticleTrigger = ref(false)
 
 const { data: techData, refresh: techRefresh } = useAsyncData('techData', async () => {
@@ -88,19 +82,17 @@ const { data: techData, refresh: techRefresh } = useAsyncData('techData', async
     watch: [currentPage, currentPageSize]
   })
 
-  const { count, error: countError } = await client
-    .from('tech')
-    .select('*', { count: 'exact' })
-
-  if (countError) {
-    throw createError({ statusMessage: countError.message })
-  }
-
-  return { article: data.value, count }
+  return data.value
 }, {
   watch: [currentPage, currentPageSize]
 })
 
+const { data: count } = useAsyncData('techCount', async () => {
+  const data = await countData('tech')
+
+  return data.count
+})
+
 const openCreateArticleDialog = () => {
   adminAccess.value
     ? createArticleTrigger.value = true
@@ -112,13 +104,14 @@ const writeArticle = async (recordData:Article) => {
     update_user_id: user.value?.id,
     ...recordData
   }
-  await client
-    .from('tech')
-    .upsert(articleData)
 
-  createArticleTrigger.value = false
-  notify('', 'success', t('messages.write'), true, 3000, 0)
-  techRefresh()
+  const error = await upsertData(articleData, 'tech')
+
+  if (!error) {
+    createArticleTrigger.value = false
+    notify('', 'success', t('messages.write'), true, 3000, 0)
+    techRefresh()
+  }
 }
 
 </script>
diff --git a/plugins/elementPlus.ts b/plugins/elementPlus.ts
index d9101da..203a851 100644
--- a/plugins/elementPlus.ts
+++ b/plugins/elementPlus.ts
@@ -1,7 +1,5 @@
-import { ElTimeline, ElTimelineItem, ElUpload } from 'element-plus'
+import { ElUpload } from 'element-plus'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.component(ElTimeline.name ?? 'el-timeline', ElTimeline)
-  nuxtApp.vueApp.component(ElTimelineItem.name ?? 'el-timeline-item', ElTimelineItem)
   nuxtApp.vueApp.component(ElUpload.name ?? 'el-upload', ElUpload)
 })
diff --git a/server/api/admin/index.ts b/server/api/admin/index.ts
new file mode 100644
index 0000000..9f51ab3
--- /dev/null
+++ b/server/api/admin/index.ts
@@ -0,0 +1,20 @@
+import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const user = await serverSupabaseUser(event)
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+  const query = getQuery(event)
+
+  const { data, error } = await client
+    .from('profiles')
+    .select('admin')
+    .eq('id', query.userId ?? String(user?.id))
+    .eq('deleted', false)
+    .single()
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/archive/detail.ts b/server/api/archive/detail.ts
new file mode 100644
index 0000000..5d2de95
--- /dev/null
+++ b/server/api/archive/detail.ts
@@ -0,0 +1,19 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const query = getQuery(event)
+
+  const { data, error } = await client
+    .from('archiveImage')
+    .select('title, years, url, deleted')
+    .eq('years', query.years)
+    .eq('deleted', false)
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/archive/index.ts b/server/api/archive/index.ts
new file mode 100644
index 0000000..0a9081f
--- /dev/null
+++ b/server/api/archive/index.ts
@@ -0,0 +1,16 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const { data, error } = await client
+    .from('archiveIndex')
+    .select('index, title, deleted, archiveImage(title, years, url)')
+    .eq('deleted', false)
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/tech/comment.ts b/server/api/tech/comment.ts
index aa37bba..01ffef8 100644
--- a/server/api/tech/comment.ts
+++ b/server/api/tech/comment.ts
@@ -12,7 +12,6 @@ export default defineEventHandler(async (event) => {
     .eq('deleted', false)
     .order('created_at', { ascending: false })
 
-  console.log(data)
   if (error) {
     throw createError({ statusMessage: error.message })
   }
diff --git a/server/api/tech/detail.ts b/server/api/tech/detail.ts
new file mode 100644
index 0000000..e0cca70
--- /dev/null
+++ b/server/api/tech/detail.ts
@@ -0,0 +1,20 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient<SupabaseDataBase>(event)
+
+  const query = getQuery(event)
+
+  const { data, error } = await client
+    .from('tech')
+    .select('id, title, desc, raw_article, view_count, like, update_user_id, created_at, updated_at, deleted')
+    .eq('deleted', false)
+    .eq('id', query.techBlogId)
+    .single()
+
+  if (error) {
+    throw createError({ statusMessage: error.message })
+  }
+
+  return data
+})
diff --git a/server/api/tech/index.ts b/server/api/tech/index.ts
index 28c7386..1d4a4ec 100644
--- a/server/api/tech/index.ts
+++ b/server/api/tech/index.ts
@@ -4,6 +4,8 @@ export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient<SupabaseDataBase>(event)
 
   const query = getQuery(event)
+  const page = query.page ? Number(query.page) : 1
+  const pageCount = query.pageCount ? Number(query.pageCount) : 10
 
   const supabasePageCalc = (page:number, pageCount:number, firstRange:boolean): number => {
     return firstRange
@@ -13,10 +15,10 @@ export default defineEventHandler(async (event) => {
 
   const { data, error } = await client
     .from('tech')
-    .select('id, title, desc, raw_article, like, update_user_id, created_at, updated_at, deleted')
+    .select('id, title, desc, raw_article, view_count, like, update_user_id, created_at, updated_at, deleted')
     .eq('deleted', false)
     .order('created_at', { ascending: false })
-    .range(supabasePageCalc(query.page, query.pageCount, true), supabasePageCalc(query.page, query.pageCount, false))
+    .range(supabasePageCalc(page, pageCount, true), supabasePageCalc(page, pageCount, false))
 
   if (error) {
     throw createError({ statusMessage: error.message })
diff --git a/stores/techData.ts b/stores/techData.ts
index 47cd162..237e954 100644
--- a/stores/techData.ts
+++ b/stores/techData.ts
@@ -4,15 +4,21 @@ export const useTechStore = defineStore('techStoreData', () => {
   /**
    * ! Pinia State !
    *
+   * @param currentPage 현재 페이지
+   * @param currentPageSize 현재 페이지 사이즈
    * @param clickedTechArticle 좋아요 누른 태크 블로그 글
    * @param adminAccess 권한
    *
    */
 
+  const currentPage = ref<number>(1)
+  const currentPageSize = ref<number>(3)
   const clickedTechArticle = ref<string[]>([])
   const adminAccess = ref<boolean>(false)
 
   return {
+    currentPage,
+    currentPageSize,
     clickedTechArticle,
     adminAccess
   }