From b6ca052dae4911627e53bf069ee3c7190e9308ec Mon Sep 17 00:00:00 2001
From: yeonjulee1005 <yeonju.lee1005@gmail.com>
Date: Mon, 15 Jan 2024 23:35:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=93=20develop=20(dewdew)=20version?=
 =?UTF-8?q?:=202.3.0=20-=20=EB=A9=94=EC=9D=B8=20>=20Tech=20=EB=AF=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20Flicking=20=EA=B5=AC=ED=98=84=20-?=
 =?UTF-8?q?=20=EB=A9=94=EC=9D=B8=20>=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20activate=20=EB=8F=99=EC=9E=91=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=ED=8F=AC=EC=A7=80=EC=85=98=20=EC=88=98=EC=A0=95=20-?=
 =?UTF-8?q?=20Tech=20>=20=EB=8C=93=EA=B8=80=20=EC=82=AD=EC=A0=9C=EB=B6=88?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20-=20Portf?=
 =?UTF-8?q?olio=20>=20=EC=B2=98=EC=9D=8C=20=EC=84=A0=ED=83=9D=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=AF=B8=ED=91=9C=EC=8B=9C=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=EC=88=98=EC=A0=95=20-=20defineModel()=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=EC=B2=98=EB=A6=AC=20-=20=EA=B0=81=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/desktop/components/main_contact.scss |  2 +-
 .../scss/desktop/components/main_resume.scss  |  9 ++-
 .../scss/mobile/components/main_contact.scss  |  3 +-
 .../scss/mobile/components/main_resume.scss   |  9 ++-
 assets/scss/mobile/pages/tech_detail.scss     |  1 +
 assets/scss/mobile/pages/tech_list.scss       |  1 +
 .../components/archive_main_slider.scss       | 11 +++-
 .../shared/components/content_container.scss  |  2 +-
 .../scss/shared/components/main_contact.scss  |  6 +-
 .../shared/components/main_prev_tech.scss     | 25 +++++++
 .../scss/shared/components/main_skills.scss   |  2 +-
 assets/scss/shared/pages/portfolio.scss       | 11 +++-
 assets/scss/shared/pages/tech_detail.scss     |  2 +-
 assets/scss/shared/pages/tech_list.scss       |  9 ++-
 assets/scss/shared/share_combine.scss         |  1 +
 .../scss/tablet/components/main_contact.scss  |  5 +-
 .../scss/tablet/components/main_resume.scss   |  9 ++-
 components/A/Accordion.vue                    |  2 +-
 components/A/Header.vue                       |  2 +-
 components/Footer/Information.vue             |  2 +-
 components/Main/Contact.vue                   | 12 ++--
 components/Main/IntroBanner.vue               | 19 +++---
 components/Main/Portfolio.vue                 | 18 ++---
 components/Main/PrevTech.vue                  | 65 ++++++++++++++++++
 components/Main/Resume.vue                    | 26 ++++----
 components/Main/ScrollDown.vue                | 12 ++--
 components/Main/Skills/Contents.vue           | 32 ++++-----
 components/Main/Skills/Descriptions.vue       | 12 ++--
 components/Main/Skills/Image.vue              | 18 ++---
 components/Main/Skills/Progress.vue           | 12 +---
 components/Tech/CardComponent.vue             |  5 +-
 components/Tech/Comments.vue                  |  4 +-
 components/Tech/CreateComment.vue             | 25 ++-----
 components/Tiptap/Editor.vue                  |  6 +-
 components/dialog/Archive.vue                 | 17 +++--
 components/dialog/CreateArticle.vue           | 12 ++--
 components/dialog/HyperLink.vue               | 12 ++--
 components/dialog/ImageUpload.vue             | 12 ++--
 components/dialog/MagicLink.vue               | 13 ++--
 components/dialog/PasswordCheck.vue           | 12 ++--
 components/dialog/YoutubeLink.vue             | 12 ++--
 composables/fetch/index.ts                    | 29 +++++++-
 locales/en.ts                                 | 19 ++++--
 locales/ko.ts                                 | 19 ++++--
 pages/archives/[year].vue                     |  2 +-
 pages/main.vue                                | 63 ++++++++++--------
 pages/portfolio.vue                           | 66 ++++++++++---------
 pages/tech/index.vue                          |  2 +-
 types/global.d.ts                             | 23 +++++++
 49 files changed, 416 insertions(+), 277 deletions(-)
 create mode 100644 assets/scss/shared/components/main_prev_tech.scss
 create mode 100644 components/Main/PrevTech.vue

diff --git a/assets/scss/desktop/components/main_contact.scss b/assets/scss/desktop/components/main_contact.scss
index 2a423a0..4290e50 100644
--- a/assets/scss/desktop/components/main_contact.scss
+++ b/assets/scss/desktop/components/main_contact.scss
@@ -9,7 +9,7 @@
     width: $space-800;
     .email {
       .email-form {
-        width: $space-300;
+        width: calc($space-300 + $space-60);
       }
     }
   }
diff --git a/assets/scss/desktop/components/main_resume.scss b/assets/scss/desktop/components/main_resume.scss
index 40971fd..77ad82b 100644
--- a/assets/scss/desktop/components/main_resume.scss
+++ b/assets/scss/desktop/components/main_resume.scss
@@ -5,10 +5,15 @@
 * *  Desktop *
 */
 .main-resume {
-  margin: calc($space-200 + $space-40) auto $space-200;
+  margin: calc($space-100 + $space-20) auto $space-200;
   .resume-container {
     .resume-title {
-      @include headline1;
+      @include headline5;
+      text-align: center;
+      &:last-child {
+        @include headline6;
+        text-align: center;
+      }
     }
     .educate-group,
     .career-group {
diff --git a/assets/scss/mobile/components/main_contact.scss b/assets/scss/mobile/components/main_contact.scss
index 1c99839..d95b129 100644
--- a/assets/scss/mobile/components/main_contact.scss
+++ b/assets/scss/mobile/components/main_contact.scss
@@ -17,10 +17,9 @@
       }
     }
     .email {
-      width: $space-90vw;
       margin-top: $space-40;
       .email-form {
-        width: $space-90vw;
+        width: $space-80vw;
       }
     }
   }
diff --git a/assets/scss/mobile/components/main_resume.scss b/assets/scss/mobile/components/main_resume.scss
index 2a446ae..0dcfc68 100644
--- a/assets/scss/mobile/components/main_resume.scss
+++ b/assets/scss/mobile/components/main_resume.scss
@@ -5,7 +5,7 @@
 * *  Mobile *
 */
 .main-resume {
-  margin: $space-200 auto $space-200;
+  margin: $space-80 auto $space-200;
   .resume-container {
     flex-direction: column;
     align-items: center;
@@ -17,7 +17,12 @@
       margin: $space-20 auto;
     }
     .resume-title {
-      @include headline3;
+      @include headline5;
+      text-align: center;
+      &:last-child {
+        @include headline6;
+        text-align: center;
+      }
     }
     .accordion {
       padding: $space-20;
diff --git a/assets/scss/mobile/pages/tech_detail.scss b/assets/scss/mobile/pages/tech_detail.scss
index 33190ab..0e6fe6f 100644
--- a/assets/scss/mobile/pages/tech_detail.scss
+++ b/assets/scss/mobile/pages/tech_detail.scss
@@ -7,6 +7,7 @@
 */
 .tech-article {
   .article-header {
+    margin-top: $space-100;
     flex-direction: column;
     align-items: flex-start;
     .time {
diff --git a/assets/scss/mobile/pages/tech_list.scss b/assets/scss/mobile/pages/tech_list.scss
index 761b246..220361a 100644
--- a/assets/scss/mobile/pages/tech_list.scss
+++ b/assets/scss/mobile/pages/tech_list.scss
@@ -7,6 +7,7 @@
 */
 .tech-lists {
   .write-button-container {
+    margin-top: $space-100;
     margin-left: unset;
   }
   .tech-card {
diff --git a/assets/scss/shared/components/archive_main_slider.scss b/assets/scss/shared/components/archive_main_slider.scss
index 860636e..7ccaf41 100644
--- a/assets/scss/shared/components/archive_main_slider.scss
+++ b/assets/scss/shared/components/archive_main_slider.scss
@@ -14,7 +14,7 @@
 
 .prev-button {
   position: relative;
-  top: calc($space-100 + $space-20);
+  top: $space-160;
   left: $space-10vw;
   z-index: 10;
 }
@@ -74,5 +74,14 @@
         align-self: flex-end;
       }
     }
+    &:hover {
+      .text-group {
+        .title,
+        .subtitle {
+          color: var(--d-red-color);
+          transition: color .3s;
+        }
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/assets/scss/shared/components/content_container.scss b/assets/scss/shared/components/content_container.scss
index df727bc..5bf0399 100644
--- a/assets/scss/shared/components/content_container.scss
+++ b/assets/scss/shared/components/content_container.scss
@@ -8,7 +8,7 @@
   max-width: $space-1000;
   width: $space-90vw;
   margin: 0 auto;
-  padding: $space-100 $space-20;
+  padding: $space-160 $space-20;
 
   .time {
     @include headline5;
diff --git a/assets/scss/shared/components/main_contact.scss b/assets/scss/shared/components/main_contact.scss
index 13c02ab..f9858b2 100644
--- a/assets/scss/shared/components/main_contact.scss
+++ b/assets/scss/shared/components/main_contact.scss
@@ -25,18 +25,14 @@
       .kakao-button,
       .linkedin-button,
       .instagram-button {
-        width: $space-percent-100;
+        width: $space-percent-80;
       }
     }
     .email {
-      width: $space-percent-50;
       .email-title {
         @include headline3;
         color: var(--d-blue-color);
       }
-      .email-form {
-        width: $space-300;
-      }
     }
   }
   &.activate {
diff --git a/assets/scss/shared/components/main_prev_tech.scss b/assets/scss/shared/components/main_prev_tech.scss
new file mode 100644
index 0000000..bdd8404
--- /dev/null
+++ b/assets/scss/shared/components/main_prev_tech.scss
@@ -0,0 +1,25 @@
+@use '../../variables' as *;
+
+/**
+* ! Main Prev Tech Style !
+* *  Shared *
+*/
+.main-prev-tech {
+  margin-top: $space-400;
+  opacity: 0;
+  transition: opacity .75s;
+  .title {
+    @include headline1;
+  }
+  .prev-card {
+    @include headline5;
+    cursor: pointer;
+    &:hover {
+      color: var(--d-red-color);
+      transition: color .3s;
+    }
+  }
+  &.activate {
+    opacity: 1;
+  }
+}
diff --git a/assets/scss/shared/components/main_skills.scss b/assets/scss/shared/components/main_skills.scss
index c8f4cf9..a692e12 100644
--- a/assets/scss/shared/components/main_skills.scss
+++ b/assets/scss/shared/components/main_skills.scss
@@ -274,7 +274,7 @@
     position: relative;
     height: fit-content;
     z-index: 9;
-    transition: opacity .9s, all .3s;
+    transition: opacity .75s, all .3s;
     opacity: 0;
     &.activate {
       opacity: 1;
diff --git a/assets/scss/shared/pages/portfolio.scss b/assets/scss/shared/pages/portfolio.scss
index 63c693b..08536a1 100644
--- a/assets/scss/shared/pages/portfolio.scss
+++ b/assets/scss/shared/pages/portfolio.scss
@@ -10,7 +10,7 @@
   max-width: $space-1000;
   width: $space-80vw;
   margin: 0 auto;
-  padding: calc($space-100 + $space-20) $space-8 $space-40;
+  padding: calc($space-100 + $space-60) $space-8 $space-40;
   overflow: clip;
   .flicking-viewport {
     margin-bottom: $space-30;
@@ -41,7 +41,14 @@
   .card-description {
     @include headline6;
   }
-  .card-image {
+  .portfolio-card {
     cursor: pointer;
+    &:hover {
+      .card-title,
+      .card-description {
+        color: var(--d-red-color);
+        transition: color .3s
+      }
+    }
   }
 }
\ 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 2d7295c..097d695 100644
--- a/assets/scss/shared/pages/tech_detail.scss
+++ b/assets/scss/shared/pages/tech_detail.scss
@@ -13,7 +13,7 @@
   .article-header {
     width: $space-80vw;
     max-width: $space-1000;
-    margin-top: calc($space-100 + $space-20);
+    margin-top: $space-160;
     .title {
       @include headline3;
       align-self: flex-start;
diff --git a/assets/scss/shared/pages/tech_list.scss b/assets/scss/shared/pages/tech_list.scss
index 42e7f88..9f6e564 100644
--- a/assets/scss/shared/pages/tech_list.scss
+++ b/assets/scss/shared/pages/tech_list.scss
@@ -12,7 +12,7 @@
   .write-button-container {
     width: $space-80vw;
     max-width: $space-1000;
-    margin-top: $space-100;
+    margin-top: $space-160;
     overflow-y: clip;
   }
   .tech-card {
@@ -20,6 +20,13 @@
     width: $space-80vw;
     max-width: $space-1000;
     cursor: pointer;
+    &:hover {
+      .title,
+      .desc {
+        color: var(--d-red-color);
+        transition: color .3s;
+      }
+    }
     .title {
       @include headline4;
     }
diff --git a/assets/scss/shared/share_combine.scss b/assets/scss/shared/share_combine.scss
index d012c54..69e8c1c 100644
--- a/assets/scss/shared/share_combine.scss
+++ b/assets/scss/shared/share_combine.scss
@@ -8,6 +8,7 @@
 @forward './components/footer';
 @forward './components/pwa';
 @forward './components/main_intro_banner';
+@forward './components/main_prev_tech';
 @forward './components/main_resume';
 @forward './components/main_skills';
 @forward './components/main_portfolio';
diff --git a/assets/scss/tablet/components/main_contact.scss b/assets/scss/tablet/components/main_contact.scss
index 955dd2c..7edef40 100644
--- a/assets/scss/tablet/components/main_contact.scss
+++ b/assets/scss/tablet/components/main_contact.scss
@@ -10,14 +10,13 @@
     align-items: center;
     width: $space-percent-100;
     .social {
-      width: $space-90vw;
+      width: $space-60vw;
       margin-bottom: $space-30;
     }
     .email {
-      width: $space-90vw;
       margin-top: $space-40;
       .email-form {
-        width: $space-300;
+        width: $space-50vw;
       }
     }
   }
diff --git a/assets/scss/tablet/components/main_resume.scss b/assets/scss/tablet/components/main_resume.scss
index 89488e1..6527a5e 100644
--- a/assets/scss/tablet/components/main_resume.scss
+++ b/assets/scss/tablet/components/main_resume.scss
@@ -5,7 +5,7 @@
 * *  Tablet *
 */
 .main-resume {
-  margin: calc($space-200 + $space-20) auto $space-200;
+  margin: $space-100 auto $space-200;
   .resume-container {
     flex-direction: column;
     align-items: center;
@@ -16,7 +16,12 @@
       margin: $space-20 auto;
     }
     .resume-title {
-      @include headline2;
+      @include headline3;
+      text-align: center;
+      &:last-child {
+        @include headline5;
+        text-align: center;
+      }
     }
     .accordion {
       padding: $space-30;
diff --git a/components/A/Accordion.vue b/components/A/Accordion.vue
index 892b7fe..8383ddb 100644
--- a/components/A/Accordion.vue
+++ b/components/A/Accordion.vue
@@ -1,6 +1,6 @@
 <template>
   <DDAccordion
-    class="accordion"
+    class="accordion px-10 gap-2"
     :variant="accordionVariant"
     :color="accordionColor"
     :size="accordionSize"
diff --git a/components/A/Header.vue b/components/A/Header.vue
index 003ad19..80d3687 100644
--- a/components/A/Header.vue
+++ b/components/A/Header.vue
@@ -4,8 +4,8 @@
       <HeaderLogo />
       <div class="flex-auto" />
       <HeaderDesktopMenu />
-      <ALanguageChange />
       <AThemeChange />
+      <ALanguageChange />
       <HeaderMobileMenu />
     </div>
     <LazyHeaderForecast
diff --git a/components/Footer/Information.vue b/components/Footer/Information.vue
index 67ed010..5e55940 100644
--- a/components/Footer/Information.vue
+++ b/components/Footer/Information.vue
@@ -10,7 +10,7 @@
       {{ $t('texts.version', { version: config.public.serviceVersion.replaceAll('"', '') }) }}
     </span>
     <DialogMagicLink
-      :dialog-trigger="magicLinkDialogTrigger"
+      v-model:dialog-trigger="magicLinkDialogTrigger"
       :title="$t('placeholder.inputEmail')"
       @submit:email="loginMagicLink"
       @close:dialog="() => magicLinkDialogTrigger = false"
diff --git a/components/Main/Contact.vue b/components/Main/Contact.vue
index 2ca5e46..3023803 100644
--- a/components/Main/Contact.vue
+++ b/components/Main/Contact.vue
@@ -60,13 +60,9 @@ const { url } = useImageStorage()
 
 const { socialMenuData } = storeToRefs(useMenuStore())
 
-withDefaults(
-  defineProps<{
-    contactTrigger?: boolean
-  }>(),
-  {
-    contactTrigger: false
-  }
-)
+const contactTrigger = defineModel('contactTrigger', {
+  type: Boolean,
+  default: false
+})
 
 </script>
diff --git a/components/Main/IntroBanner.vue b/components/Main/IntroBanner.vue
index 28817fa..f23dfed 100644
--- a/components/Main/IntroBanner.vue
+++ b/components/Main/IntroBanner.vue
@@ -37,15 +37,14 @@
 
 const { url } = useImageStorage()
 
-withDefaults(
-  defineProps<{
-    mainTitleTrigger?: boolean,
-    mainTextTrigger?: boolean
-  }>(),
-  {
-    mainTitleTrigger: false,
-    mainTextTrigger: false
-  }
-)
+const mainTitleTrigger = defineModel('mainTitleTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const mainTextTrigger = defineModel('mainTextTrigger', {
+  type: Boolean,
+  default: false
+})
 
 </script>
diff --git a/components/Main/Portfolio.vue b/components/Main/Portfolio.vue
index 917278d..aeb4416 100644
--- a/components/Main/Portfolio.vue
+++ b/components/Main/Portfolio.vue
@@ -73,15 +73,15 @@ const { locale } = useLocale()
 
 const { selectedPortfolioData } = storeToRefs(usePortfolioStore())
 
-withDefaults(
-  defineProps<{
-    portfolioImageData: { orderIndex: {index: number }, title: { ko: string, en: string }, description: { ko: string, en: string }, url: string, image: string, dynamic_thumbnail:string, thumbnail: string, alt: string, deleted: boolean }[] | null | undefined,
-    portfolioTrigger?: boolean
-  }>(),
-  {
-    portfolioTrigger: false
-  }
-)
+const portfolioTrigger = defineModel('portfolioTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const portfolioImageData = defineModel('portfolioImageData', {
+  type: Array<PortfolioType>,
+  default: []
+})
 
 const navigatePortfolio = (item: SerializeObject) => {
   selectedPortfolioData.value = item
diff --git a/components/Main/PrevTech.vue b/components/Main/PrevTech.vue
new file mode 100644
index 0000000..6a43e1e
--- /dev/null
+++ b/components/Main/PrevTech.vue
@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="main-prev-tech flex flex-column mt-20 gap-8"
+    :class="{'activate': prevTechTrigger}"
+  >
+    <div>
+      <span class="title mx-10">
+        {{ $t('pageTitle.tech').split(' ')[0] }}
+      </span>
+    </div>
+    <Flicking
+      :options="option"
+      :plugins="plugin"
+    >
+      <DDCard
+        v-for="tech in techData"
+        :key="tech.id"
+        class="prev-card mx-5"
+        :ui="{ ring: 'ring-0', rounded: 'rounded-2xl', background: 'bg-zinc-100 dark:bg-neutral-900' }"
+        @click="navigateTech(tech.id)"
+        @touchstart="navigateTech(tech.id)"
+      >
+        <span>
+          {{ tech.title }}
+        </span>
+      </DDCard>
+    </Flicking>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Flicking from '@egjs/vue3-flicking'
+import { AutoPlay } from '@egjs/flicking-plugins'
+import '@egjs/vue3-flicking/dist/flicking.css'
+
+const { loadTechData } = useFetchComposable()
+
+const plugin = [
+  new AutoPlay({
+    duration: 0,
+    animationDuration: 10000,
+    direction: 'NEXT',
+    stopOnHover: true
+  })
+]
+
+const option = {
+  movetype: 'freeScroll',
+  inputType: ['touch', 'mouse'],
+  circular: true,
+  deceleration: 0.0035
+}
+
+const prevTechTrigger = defineModel('prevTechTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const techData = await loadTechData(1, 10)
+
+const navigateTech = (techId: string) => {
+  navigateTo(`/tech/${techId}`)
+}
+
+</script>
diff --git a/components/Main/Resume.vue b/components/Main/Resume.vue
index 8f30ac5..d753012 100644
--- a/components/Main/Resume.vue
+++ b/components/Main/Resume.vue
@@ -4,10 +4,7 @@
     :class="{'activate': mainResumeTrigger}"
   >
     <div class="resume-container flex p-10 gap-8">
-      <div class="flex flex-column flex-align-center gap-4">
-        <p class="resume-title">
-          {{ $t('main.resume.title') }}
-        </p>
+      <div class="flex flex-column flex-align-center gap-8">
         <nuxt-img
           class="resume-image"
           :class="{'reverse': toggleTrigger}"
@@ -22,6 +19,15 @@
           @contextmenu.prevent
           @click="() => toggleTrigger = !toggleTrigger"
         />
+        <div>
+          <p
+            v-for="(text, index) in $tm('main.resume.name')"
+            :key="index"
+            class="resume-title"
+          >
+            {{ $rt(text) }}
+          </p>
+        </div>
       </div>
       <AAccordion :accordion-items="locale === 'ko' ? resumeKoList : resumeEnList" />
     </div>
@@ -36,14 +42,10 @@ const { url } = useImageStorage()
 
 const { resumeKoList, resumeEnList } = useResumeData()
 
-withDefaults(
-  defineProps<{
-    mainResumeTrigger?: boolean
-  }>(),
-  {
-    mainResumeTrigger: false
-  }
-)
+const mainResumeTrigger = defineModel('mainResumeTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const resumeImage = computed(() => {
   return toggleTrigger.value ? url('resume_img.webp', 'assets', 'banner') : url('resume_img_reverse.webp', 'assets', 'banner')
diff --git a/components/Main/ScrollDown.vue b/components/Main/ScrollDown.vue
index 0863b80..1c8fe27 100644
--- a/components/Main/ScrollDown.vue
+++ b/components/Main/ScrollDown.vue
@@ -9,13 +9,9 @@
 
 <script setup lang="ts">
 
-withDefaults(
-  defineProps<{
-    scrollDownTrigger?: boolean
-  }>(),
-  {
-    scrollDownTrigger: false
-  }
-)
+const scrollDownTrigger = defineModel('scrollDownTrigger', {
+  type: Boolean,
+  default: false
+})
 
 </script>
diff --git a/components/Main/Skills/Contents.vue b/components/Main/Skills/Contents.vue
index 10b3061..b5cfcbb 100644
--- a/components/Main/Skills/Contents.vue
+++ b/components/Main/Skills/Contents.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="main-skills flex flex-column">
-    <LazyMainSkillsDescriptions :skills-text-trigger="skillsTextTrigger" />
+    <LazyMainSkillsDescriptions v-model:skills-text-trigger="skillsTextTrigger" />
     <MainSkillsImage
-      :skills-image="stackLogoData"
-      :skills-bg-trigger="skillsBgTrigger"
+      v-model:skills-image="stackLogoData"
+      v-model:skills-bg-trigger="skillsBgTrigger"
     />
     <div
       class="skill-list flex flex-align-start"
@@ -49,17 +49,19 @@ const { stackLogoData } = storeToRefs(useStackStore())
 
 const { skillTitleList, frontEnd, backEnd, devOps } = useSkillData()
 
-withDefaults(
-  defineProps<{
-    skillsTextTrigger?: boolean,
-    skillsBgTrigger?: boolean,
-    skillsListTrigger?: boolean
-  }>(),
-  {
-    skillsTextTrigger: false,
-    skillsBgTrigger: false,
-    skillsListTrigger: false
-  }
-)
+const skillsTextTrigger = defineModel('skillsTextTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const skillsBgTrigger = defineModel('skillsBgTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const skillsListTrigger = defineModel('skillsListTrigger', {
+  type: Boolean,
+  default: false
+})
 
 </script>
diff --git a/components/Main/Skills/Descriptions.vue b/components/Main/Skills/Descriptions.vue
index 46853d6..4f4bd00 100644
--- a/components/Main/Skills/Descriptions.vue
+++ b/components/Main/Skills/Descriptions.vue
@@ -48,14 +48,10 @@
 
 <script setup lang="ts">
 
-withDefaults(
-  defineProps<{
-    skillsTextTrigger?: boolean
-  }>(),
-  {
-    skillsTextTrigger: false
-  }
-)
+const skillsTextTrigger = defineModel('skillsTextTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const toggleTrigger = ref(true)
 
diff --git a/components/Main/Skills/Image.vue b/components/Main/Skills/Image.vue
index 6995dd2..a482ac8 100644
--- a/components/Main/Skills/Image.vue
+++ b/components/Main/Skills/Image.vue
@@ -21,14 +21,14 @@
 
 <script setup lang="ts">
 
-withDefaults(
-  defineProps<{
-    skillsImage: { orderIndex: { index: number }, title: string, url: string, deleted: boolean }[] | null | undefined,
-    skillsBgTrigger?: boolean
-  }>(),
-  {
-    skillsBgTrigger: false
-  }
-)
+const skillsBgTrigger = defineModel('skillsBgTrigger', {
+  type: Boolean,
+  default: false
+})
+
+const skillsImage = defineModel('skillsImage', {
+  type: Array<SkillsImage>,
+  default: []
+})
 
 </script>
diff --git a/components/Main/Skills/Progress.vue b/components/Main/Skills/Progress.vue
index b6f4815..6c3b013 100644
--- a/components/Main/Skills/Progress.vue
+++ b/components/Main/Skills/Progress.vue
@@ -14,14 +14,8 @@
 
 <script setup lang="ts">
 
-withDefaults(
-  defineProps<{
-    progressData: ProgressData,
-    maxSize?: number | string[]
-  }>(),
-  {
-    maxSize: 100
-  }
-)
+defineProps<{
+  progressData: ProgressData,
+}>()
 
 </script>
diff --git a/components/Tech/CardComponent.vue b/components/Tech/CardComponent.vue
index 8733f9b..5899d31 100644
--- a/components/Tech/CardComponent.vue
+++ b/components/Tech/CardComponent.vue
@@ -1,5 +1,8 @@
 <template>
-  <DDCard class="tech-card mt-6 mb-4">
+  <DDCard
+    class="tech-card mt-6 mb-4"
+    :ui="{ ring: 'ring-0', divide: 'divide-violet-200 dark:divide-violet-950', rounded: 'rounded-2xl', background: 'bg-zinc-100 dark:bg-neutral-900' }"
+  >
     <template #header>
       <div class="flex flex-col gap-6">
         <AParagSkeleton
diff --git a/components/Tech/Comments.vue b/components/Tech/Comments.vue
index a36633a..f5ca4a6 100644
--- a/components/Tech/Comments.vue
+++ b/components/Tech/Comments.vue
@@ -30,7 +30,7 @@
       :ui="{ rounded: 'rounded-fill'}"
     />
     <DialogPasswordCheck
-      :dialog-trigger="passwordDialogTrigger"
+      v-model:dialog-trigger="passwordDialogTrigger"
       @confirm-password="(password:string) => confirmDeleteComment(password)"
       @close-dialog="() => passwordDialogTrigger = false"
     />
@@ -63,7 +63,7 @@ const openPasswordDialog = (commentData: SerializeObject) => {
   }
 }
 
-const confirmDeleteComment = (password:string) => {
+const confirmDeleteComment = (password: string) => {
   emits('delete:comment', selectCommentData.value, password)
   passwordDialogTrigger.value = false
 }
diff --git a/components/Tech/CreateComment.vue b/components/Tech/CreateComment.vue
index 4bfcd5b..c24e40a 100644
--- a/components/Tech/CreateComment.vue
+++ b/components/Tech/CreateComment.vue
@@ -7,7 +7,7 @@
       @submit="onSubmit"
     >
       <DDFormGroup
-        :label="nameLabel"
+        :label="$t('tech.name')"
         name="name"
         size="xl"
         required
@@ -32,7 +32,7 @@
         </DDInput>
       </DDFormGroup>
       <DDFormGroup
-        :label="contentLabel"
+        :label="$t('tech.content')"
         name="message"
         size="xl"
         required
@@ -43,14 +43,14 @@
         />
       </DDFormGroup>
       <DDFormGroup
-        :label="passwordLabel"
+        :label="$t('tech.password')"
         name="password"
         size="xl"
         required
       >
         <DDInput
           v-model="formData.password"
-          :placeholder="passwordLabel"
+          :placeholder="$t('placeholder.inputPassword')"
           color="violet"
           size="lg"
           type="password"
@@ -106,19 +106,6 @@ const router = useRouter()
 
 const { passwordRegex, generateCommentName } = useUi()
 
-withDefaults(
-  defineProps<{
-    nameLabel?: string,
-    contentLabel?: string,
-    passwordLabel?: string
-  }>(),
-  {
-    nameLabel: '이름',
-    contentLabel: '내용',
-    passwordLabel: '비밀번호'
-  }
-)
-
 const emits = defineEmits([
   'create-comment'
 ])
@@ -136,7 +123,7 @@ const schema = object({
 
 type Schema = InferType<typeof schema>
 
-const formData = reactive({
+const formData = ref({
   name: generateCommentName(),
   message: '',
   password: ''
@@ -144,7 +131,7 @@ const formData = reactive({
 
 const onSubmit = (event: FormSubmitEvent<Schema>) => {
   if (!event.isTrusted) { return }
-  emits('create-comment', formData)
+  emits('create-comment', formData.value)
 }
 
 </script>
diff --git a/components/Tiptap/Editor.vue b/components/Tiptap/Editor.vue
index 03d7f81..48383ac 100644
--- a/components/Tiptap/Editor.vue
+++ b/components/Tiptap/Editor.vue
@@ -115,17 +115,17 @@
       </span>
     </div>
     <DialogHyperLink
-      :dialog-trigger="hyperLinkDialogTrigger"
+      v-model:dialog-trigger="hyperLinkDialogTrigger"
       @submit:link="submitHyperLink"
       @close:dialog="(trigger:boolean) => hyperLinkDialogTrigger = trigger"
     />
     <DialogYoutubeLink
-      :dialog-trigger="youtubeLinkDialogTrigger"
+      v-model:dialog-trigger="youtubeLinkDialogTrigger"
       @submit:link="submitYoutubeLink"
       @close:dialog="(trigger:boolean) => youtubeLinkDialogTrigger = trigger"
     />
     <DialogImageUpload
-      :dialog-trigger="imageUploadDialogTrigger"
+      v-model:dialog-trigger="imageUploadDialogTrigger"
       @submit:image="submitImage"
       @close:dialog="(trigger:boolean) => imageUploadDialogTrigger = trigger"
     />
diff --git a/components/dialog/Archive.vue b/components/dialog/Archive.vue
index 0cd43ca..f11ac59 100644
--- a/components/dialog/Archive.vue
+++ b/components/dialog/Archive.vue
@@ -24,15 +24,14 @@
 
 <script setup lang="ts">
 
-withDefaults(
-  defineProps<{
-    selectImageData: SerializeObject
-    dialogTrigger?: boolean
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+defineProps<{
+  selectImageData: SerializeObject
+}>()
+
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 defineEmits([
   'close:dialog'
diff --git a/components/dialog/CreateArticle.vue b/components/dialog/CreateArticle.vue
index 3f61fb8..f025e53 100644
--- a/components/dialog/CreateArticle.vue
+++ b/components/dialog/CreateArticle.vue
@@ -53,14 +53,10 @@ import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
 const { t } = useLocale()
 
-withDefaults(
-  defineProps<{
-    createArticleTrigger?: boolean
-  }>(),
-  {
-    createArticleTrigger: false
-  }
-)
+const createArticleTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'create:article',
diff --git a/components/dialog/HyperLink.vue b/components/dialog/HyperLink.vue
index 13a16b7..71ec3ad 100644
--- a/components/dialog/HyperLink.vue
+++ b/components/dialog/HyperLink.vue
@@ -44,14 +44,10 @@ const { t } = useLocale()
 
 const { hyperLinkRegex } = useUi()
 
-withDefaults(
-  defineProps<{
-    dialogTrigger?: boolean
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'close:dialog',
diff --git a/components/dialog/ImageUpload.vue b/components/dialog/ImageUpload.vue
index bec9840..3ee3139 100644
--- a/components/dialog/ImageUpload.vue
+++ b/components/dialog/ImageUpload.vue
@@ -67,14 +67,10 @@ const { loadStorage, uploadStorage } = useFetchComposable()
 
 const toast = useToast()
 
-withDefaults(
-  defineProps<{
-    dialogTrigger?: boolean
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'close:dialog',
diff --git a/components/dialog/MagicLink.vue b/components/dialog/MagicLink.vue
index a825c92..0db4813 100644
--- a/components/dialog/MagicLink.vue
+++ b/components/dialog/MagicLink.vue
@@ -44,21 +44,16 @@ const { t } = useLocale()
 
 const toast = useToast()
 
-withDefaults(
-  defineProps<{
-    dialogTrigger?: boolean
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'close:dialog',
   'submit:email'
 ])
 
-
 const schema = object({
   email: string()
     .email(t('messages.emailFormat'))
diff --git a/components/dialog/PasswordCheck.vue b/components/dialog/PasswordCheck.vue
index fca16bc..5b1f00a 100644
--- a/components/dialog/PasswordCheck.vue
+++ b/components/dialog/PasswordCheck.vue
@@ -42,14 +42,10 @@ const { t } = useLocale()
 
 const { passwordRegex } = useUi()
 
-withDefaults(
-  defineProps<{
-    dialogTrigger?: boolean
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'confirm-password',
diff --git a/components/dialog/YoutubeLink.vue b/components/dialog/YoutubeLink.vue
index 6f53c6a..30715b4 100644
--- a/components/dialog/YoutubeLink.vue
+++ b/components/dialog/YoutubeLink.vue
@@ -44,14 +44,10 @@ const { t } = useLocale()
 
 const { youtubeRegex } = useUi()
 
-withDefaults(
-  defineProps<{
-    dialogTrigger?: boolean,
-  }>(),
-  {
-    dialogTrigger: false
-  }
-)
+const dialogTrigger = defineModel('dialogTrigger', {
+  type: Boolean,
+  default: false
+})
 
 const emits = defineEmits([
   'close:dialog',
diff --git a/composables/fetch/index.ts b/composables/fetch/index.ts
index b6f0ae9..092f4d3 100644
--- a/composables/fetch/index.ts
+++ b/composables/fetch/index.ts
@@ -8,7 +8,7 @@ export const useFetchComposable = () => {
   const { mainMenuData, subMenuData, socialMenuData } = storeToRefs(useMenuStore())
 
   const { stackLogoData } = storeToRefs(useStackStore())
-  const { portfolioData } = storeToRefs(usePortfolioStore())
+  const { portfolioData, selectedPortfolioData } = storeToRefs(usePortfolioStore())
 
   const loadMenuData = async (menuType:string) => {
     const { data }: SerializeObject = await useFetch('/api/menu', {
@@ -38,6 +38,7 @@ export const useFetchComposable = () => {
     })
 
     portfolioData.value = data.value
+    selectedPortfolioData.value = data.value[0]
   }
 
   const loadArchiveData = async () => {
@@ -49,6 +50,19 @@ export const useFetchComposable = () => {
     return data.value
   }
 
+  const loadTechData = async (page: number, pageCount: number) => {
+    const { data } = await useFetch('/api/tech', {
+      headers: useRequestHeaders(['cookie']),
+      query: {
+        page,
+        pageCount
+      },
+      immediate: true
+    })
+
+    return data.value
+  }
+
   const countData = async (table: string) => {
     const { count } = await client
       .from(table)
@@ -109,7 +123,7 @@ export const useFetchComposable = () => {
       if (error) {
         return error
       }
-    } else {
+    } else if (subMatOpt && subMatOptVal) {
       const { error } = await client
         .from(table)
         .delete()
@@ -117,6 +131,16 @@ export const useFetchComposable = () => {
         .eq(matOpt, matOptVal)
         .eq(subMatOpt, subMatOptVal)
 
+      if (error) {
+        return error
+      }
+    } else {
+      const { error } = await client
+        .from(table)
+        .delete()
+        .eq('id', deleteId)
+        .eq(matOpt, matOptVal)
+
       if (error) {
         return error
       }
@@ -146,6 +170,7 @@ export const useFetchComposable = () => {
     loadStackData,
     loadPortfolioData,
     loadArchiveData,
+    loadTechData,
     countData,
     insertData,
     upsertData,
diff --git a/locales/en.ts b/locales/en.ts
index 860fdd5..31b37a1 100644
--- a/locales/en.ts
+++ b/locales/en.ts
@@ -61,7 +61,10 @@ export default {
       diffusion: 'Air Exposed'
     },
     resume: {
-      title: 'RESUME'
+      name: [
+        'Software Engineer Yeonju',
+        'A.K.A Dewdew'
+      ]
     },
     skills: {
       frontDescription: {
@@ -142,12 +145,14 @@ export default {
     historyTitle: 'HISTORY OF'
   },
   tech: {
-    write: '글쓰기',
-    writeComment: '댓글쓰기',
-    articleTitle: '글제목',
-    article: '컨텐츠',
-    commentTitle: '댓글',
-    password: '비밀번호',
+    write: 'Write',
+    writeComment: 'Write Comment',
+    articleTitle: 'Article Title',
+    article: 'Content',
+    commentTitle: 'Comment',
+    name: 'Name',
+    content: 'Content',
+    password: 'Password',
     estimateReadTime: '{time} minutes'
   },
   blog: {
diff --git a/locales/ko.ts b/locales/ko.ts
index f88bf7e..9fc55b5 100644
--- a/locales/ko.ts
+++ b/locales/ko.ts
@@ -2,13 +2,13 @@ export default {
   pageTitle: {
     yeonju: '개발자 이연주',
     dewdew: 'Dewdew',
-    main: '메인',
-    portfolio: '포트폴리오',
-    project: '프로젝트',
+    main: 'Main',
+    portfolio: 'Portfolio',
+    project: 'Project',
     colorsTranslate: '내 색상 찾아줘!',
-    blog: '블로그',
-    tech: '테크 블로그',
-    archives: '아카이브'
+    blog: 'Blog',
+    tech: 'Tech Blog',
+    archives: 'Archives'
   },
   pageSubTitle: {
     colorsTranslate: '내 색상 찾아줘..',
@@ -61,7 +61,10 @@ export default {
       diffusion: '대기정체'
     },
     resume: {
-      title: 'RESUME'
+      name: [
+        'Software Engineer 이연주',
+        'A.K.A Dewdew'
+      ]
     },
     skills: {
       frontDescription: {
@@ -146,6 +149,8 @@ export default {
     articleTitle: '글제목',
     article: '컨텐츠',
     commentTitle: '댓글',
+    name: '이름',
+    content: '내용',
     password: '비밀번호',
     estimateReadTime: '{time}분'
   },
diff --git a/pages/archives/[year].vue b/pages/archives/[year].vue
index 4ec8d7f..78fe44f 100644
--- a/pages/archives/[year].vue
+++ b/pages/archives/[year].vue
@@ -16,7 +16,7 @@
       @open-dialog="openImageDialog"
     />
     <DialogArchive
-      :dialog-trigger="imageDialogTrigger"
+      v-model:dialog-trigger="imageDialogTrigger"
       :select-image-data="selectImageData"
       @close:dialog="() => imageDialogTrigger = false"
     />
diff --git a/pages/main.vue b/pages/main.vue
index ab09ea6..8cdd181 100644
--- a/pages/main.vue
+++ b/pages/main.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="main">
     <LazyMainIntroBanner
-      :main-title-trigger="mainTitleTrigger"
-      :main-text-trigger="mainTextTrigger"
+      v-model:main-title-trigger="mainTitleTrigger"
+      v-model:main-text-trigger="mainTextTrigger"
     />
-    <LazyMainScrollDown :scroll-down-trigger="scrollDownTrigger" />
-    <LazyMainResume :main-resume-trigger="mainResumeTrigger" />
+    <LazyMainScrollDown v-model:scroll-down-trigger="scrollDownTrigger" />
+    <LazyMainPrevTech v-model:prev-tech-trigger="prevTechTrigger" />
+    <LazyMainResume v-model:main-resume-trigger="mainResumeTrigger" />
     <LazyMainSkillsContents
-      :skills-text-trigger="mainSkillsTextTrigger"
-      :skills-bg-trigger="mainSkillsBgTrigger"
-      :skills-list-trigger="mainSkillsListTrigger"
+      v-model:skills-text-trigger="mainSkillsTextTrigger"
+      v-model:skills-bg-trigger="mainSkillsBgTrigger"
+      v-model:skills-list-trigger="mainSkillsListTrigger"
     />
     <LazyMainPortfolio
-      :portfolio-image-data="portfolioData"
-      :portfolio-trigger="referenceListTrigger"
+      v-model:portfolio-trigger="referenceListTrigger"
+      v-model:portfolio-image-data="portfolioData"
     />
-    <LazyMainContact :contact-trigger="contactTrigger" />
+    <LazyMainContact v-model:contact-trigger="contactTrigger" />
   </div>
 </template>
 
@@ -36,6 +37,7 @@ useHead({
 const mainTitleTrigger = ref(true)
 const mainTextTrigger = ref(true)
 const scrollDownTrigger = ref(true)
+const prevTechTrigger = ref(false)
 const mainResumeTrigger = ref(false)
 const mainSkillsTextTrigger = ref(false)
 const mainSkillsBgTrigger = ref(false)
@@ -66,37 +68,40 @@ const scrollDetect = () => {
 const mobile = (scrollY:number) => {
   mainTitleTrigger.value = scrollY < 200
   mainTextTrigger.value = scrollY < 350
-  scrollDownTrigger.value = scrollY < 160
-  mainResumeTrigger.value = scrollY > 200 && scrollY < 1400
-  mainSkillsTextTrigger.value = scrollY > 1500 && scrollY < 2600
+  scrollDownTrigger.value = scrollY < 150
+  prevTechTrigger.value = scrollY > 180
+  mainResumeTrigger.value = scrollY > 200 && scrollY < 1500
+  mainSkillsTextTrigger.value = scrollY > 1500 && scrollY < 2700
   mainSkillsBgTrigger.value = scrollY > 1300 && scrollY < 2900
-  mainSkillsListTrigger.value = scrollY > 2400 && scrollY < 5500
-  referenceListTrigger.value = scrollY > 5100 && scrollY < 10800
-  contactTrigger.value = scrollY > 10700
+  mainSkillsListTrigger.value = scrollY > 2800 && scrollY < 5850
+  referenceListTrigger.value = scrollY > 5800 && scrollY < 11000
+  contactTrigger.value = scrollY > 11200
 }
 
 const tablet = (scrollY:number) => {
   mainTitleTrigger.value = scrollY < 300
   mainTextTrigger.value = scrollY < 500
   scrollDownTrigger.value = scrollY < 200
-  mainResumeTrigger.value = scrollY > 300 && scrollY < 1600
-  mainSkillsTextTrigger.value = scrollY > 1500 && scrollY < 2500
-  mainSkillsBgTrigger.value = scrollY > 1200 && scrollY < 3500
-  mainSkillsListTrigger.value = scrollY > 2700 && scrollY < 5600
-  referenceListTrigger.value = scrollY > 5700 && scrollY < 8200
+  prevTechTrigger.value = scrollY > 280
+  mainResumeTrigger.value = scrollY > 400
+  mainSkillsTextTrigger.value = scrollY > 1900
+  mainSkillsBgTrigger.value = scrollY > 1400
+  mainSkillsListTrigger.value = scrollY > 2700
+  referenceListTrigger.value = scrollY > 5700
   contactTrigger.value = scrollY > 8000
 }
 
 const desktop = (scrollY:number) => {
-  mainTitleTrigger.value = scrollY < 500
+  mainTitleTrigger.value = scrollY < 400
   mainTextTrigger.value = scrollY < 450
-  scrollDownTrigger.value = scrollY < 650
-  mainResumeTrigger.value = scrollY > 150 && scrollY < 1250
-  mainSkillsTextTrigger.value = scrollY > 1300 && scrollY < 2200
-  mainSkillsBgTrigger.value = scrollY > 900 && scrollY < 3000
-  mainSkillsListTrigger.value = scrollY > 2300 && scrollY < 3800
-  referenceListTrigger.value = scrollY > 3600 && scrollY < 5800
-  contactTrigger.value = scrollY > 5600
+  scrollDownTrigger.value = scrollY < 250
+  prevTechTrigger.value = scrollY > 350 && scrollY < 1150
+  mainResumeTrigger.value = scrollY > 500 && scrollY < 1600
+  mainSkillsTextTrigger.value = scrollY > 1650 && scrollY < 2400
+  mainSkillsBgTrigger.value = scrollY > 1100 && scrollY < 3200
+  mainSkillsListTrigger.value = scrollY > 2500 && scrollY < 4000
+  referenceListTrigger.value = scrollY > 3800 && scrollY < 6200
+  contactTrigger.value = scrollY > 6000
 }
 
 loadStackData()
diff --git a/pages/portfolio.vue b/pages/portfolio.vue
index 86663d8..a80378e 100644
--- a/pages/portfolio.vue
+++ b/pages/portfolio.vue
@@ -1,40 +1,43 @@
 <template>
   <div class="portfolio">
-    <ClientOnly>
-      <Flicking
-        :options="option"
-        :plugins="plugin"
-      >
-        <nuxt-picture
-          v-for="item in portfolioData"
-          :key="item.url"
-          class="portfolio-picture"
-          :src="item?.image ?? ''"
-          width="200"
-          height="200"
-          format="webp"
-          fit="cover"
-          :alt="item?.alt"
-          :img-attrs="{ class: 'portfolio-image' }"
-          :draggable="false"
-          @contextmenu.prevent
-          @click="selectPortfolio(item)"
-          @mouseenter="selectPortfolio(item)"
-        />
-        <template #viewport>
-          <div class="flicking-pagination" />
-        </template>
-      </Flicking>
-    </ClientOnly>
-    <DDCard v-if="selectedPortfolioData">
+    <Flicking
+      :options="option"
+      :plugins="plugin"
+    >
+      <nuxt-picture
+        v-for="item in portfolioData"
+        :key="item.url"
+        class="portfolio-picture"
+        :src="item?.image ?? ''"
+        width="200"
+        height="200"
+        format="webp"
+        fit="cover"
+        :alt="item?.alt"
+        :img-attrs="{ class: 'portfolio-image' }"
+        :draggable="false"
+        @contextmenu.prevent
+        @click="selectPortfolio(item)"
+        @mouseenter="selectPortfolio(item)"
+      />
+      <template #viewport>
+        <div class="flicking-pagination" />
+      </template>
+    </Flicking>
+    <DDCard
+      v-if="selectedPortfolioData"
+      class="portfolio-card"
+      :ui="{ ring: 'ring-0', divide: 'divide-fuchsia-200 dark:divide-fuchsia-950', rounded: 'rounded-2xl', background: 'bg-zinc-100 dark:bg-neutral-900' }"
+      @click="navigateTo(selectedPortfolioData.url, { external: true, open: { target: '_blank' } })"
+    >
       <template #header>
         <div class="flex flex-column gap-10">
-          <span class="card-title mb-default">
+          <p class="card-title mb-default">
             {{ locale === 'ko' ? selectedPortfolioData.title.ko : selectedPortfolioData.title.en }}
-          </span>
-          <span class="card-description mb-default">
+          </p>
+          <p class="card-description mb-default">
             {{ locale === 'ko' ? selectedPortfolioData.description.ko : selectedPortfolioData.description.en }}
-          </span>
+          </p>
         </div>
       </template>
       <nuxt-picture
@@ -48,7 +51,6 @@
         :img-attrs="{ class: 'image' }"
         :draggable="false"
         @contextmenu.prevent
-        @click="navigateTo(selectedPortfolioData.url, { external: true, open: { target: '_blank' } })"
       />
     </DDCard>
   </div>
diff --git a/pages/tech/index.vue b/pages/tech/index.vue
index c86a601..f1cc6ca 100644
--- a/pages/tech/index.vue
+++ b/pages/tech/index.vue
@@ -30,7 +30,7 @@
       show-last
     />
     <DialogCreateArticle
-      :create-article-trigger="createArticleTrigger"
+      v-model:dialog-trigger="createArticleTrigger"
       @create:article="writeArticle"
       @close:dialog="() => createArticleTrigger = false"
     />
diff --git a/types/global.d.ts b/types/global.d.ts
index a9f102d..904a732 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -55,6 +55,29 @@ interface AccordionItem {
   description: string[] | string
 }
 
+/**
+ * ? Main Interface ?
+ */
+
+interface PortfolioType {
+  orderIndex: { index: number },
+  title: { ko: string; en: string },
+  description: { ko: string; en: string },
+  url: string,
+  image: string,
+  dynamic_thumbnail: string,
+  thumbnail: string,
+  alt: string,
+  deleted: boolean
+}
+
+interface SkillsImage {
+  orderIndex: { index: number },
+  title: string,
+  url: string,
+  deleted: boolean
+}
+
 /**
  * ? Weather Interfaces ?
  */

From 71240f23add5c4c054329f04fcc2799ed80251c0 Mon Sep 17 00:00:00 2001
From: yeonjulee1005 <yeonju.lee1005@gmail.com>
Date: Mon, 15 Jan 2024 23:35:47 +0900
Subject: [PATCH 2/2] 2.3.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f1e5530..46773e2 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "name": "Dewdew",
     "email": "yeonju.lee1005@gmail.com"
   },
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "scripts": {
     "build": "nuxt build",