Merge pull request #139 from yeonjulee1005/stage

🚓 [version: 2.3.0] push to master
yeonjulee1005 · Jan 15, 2024 · ac95cf7 · ac95cf7
2 parents 197d0b4 + fd7b38f
commit ac95cf7
Show file tree

Hide file tree

Showing 50 changed files with 417 additions and 278 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+        }
+      }
+    }
   }
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
+      }
+    }
   }
 }
diff --git 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
@@ -12,14 +12,21 @@
   .write-button-container {
     width: $space-80vw;
     max-width: $space-1000;
-    margin-top: $space-100;
+    margin-top: $space-160;
     overflow-y: clip;
   }
   .tech-card {
     max-height: $space-60vh;
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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