Merge pull request #52 from yeonjulee1005/develop

🚎 [version: 1.14.0]

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 개발자 이연주입니다.'

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;
+      }
     }
   }
 }

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,30 +34,28 @@
         }
       }
     }
-    .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;
       width: $space-30;
       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;
+  }
 }

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;

assets/scss/shared/pages/tech_list.scss

@@ -7,21 +7,16 @@
 */
 .tech-lists {
   position: relative;
-  height: $space-80vh;
   width: $space-100vw;
   overflow-x: hidden;
   .write-button-container {
     width: $space-80vw;
     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 {

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,14 +67,59 @@
         </template>
       </DDSelectMenu>
       <AButton
-        custom-class="mr-20"
         aria-label="theme"
         button-variant="ghost"
         use-icon
         :icon-name="isDark ? 'line-md:moon-filled-loop' : 'line-md:moon-filled-alt-to-sunny-filled-loop-transition'"
         :icon-size="24"
         @click:button="isDark = !isDark"
       />
+      <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>

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
 }>()

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
   }
 )

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'}"
     />

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">