블로그 메인 페이지 변경하기

---
title: 글 제목
...
category: projects
detail: jomoodev
---

<script setup>
const props = defineProps({
  path: {
    type: String,
    required: true,
  },

  title: {
    type: String,
    required: true,
  },

  description: {
    type: String,
    required: true,
  },

  date: {
    type: String,
    required: true,
  },
});
</script>

<template>
  <div class="flex flex-col py-3">
    <div class="flex flex-1">
      <NuxtLink :to="props.path">
        <div class="text-2xl font-bold truncate pb-3">
          {{ props.title }}
        </div>
        <div class="text-zinc-500 text-base leading-5">
          {{ props.description }}
        </div>
      </NuxtLink>
    </div>
    <div class="font-semibold text-sm">
      <slot name="tags" />
    </div>
    <div class="flex text-sm text-zinc-400">
      {{ props.date }}
    </div>
  </div>
</template>

const categoriesMap = {
  note: {
    description: '학습한 내용들을 기록하는 장소입니다.',
    itmes: [
      {
        detail: 'programmers',
        text: '프로그래머스',
        description: '프로그래머스 코딩 테스트 연습',
        path: '/note/programmers',
        iconName: 'ProgrammersIcon',
      },
      {
        detail: 'algorithms',
        text: '알고리즘',
        description: '학습한 알고리즘 정리',
        path: '/note/algorithms',
        iconName: 'mynaui:math-square',
      },
      {
        detail: 'wootecos',
        text: '우테코',
        description: '우테코 프리코스',
        path: '/note/wootecos',
        iconName: 'devicon-plain:woocommerce',
      },
      {
        detail: 'js',
        text: '자바스크립트',
        description: '학습한 자바스크립트 정리',
        path: '/note/js',
        iconName: 'fa6-brands:square-js',
      },
    ],
  },

  projects: {
    description: '진행한 토이 프로젝트를 기술하는 장소입니다.',
    itmes: [
      {
        detail: 'vocabularynote',
        text: 'vocabulary',
        description: 'vue3로 만든 토이 프로젝트 영어 단어장',
        path: '/projects/vocabularynote',
        iconName: 'healthicons:i-note-action-outline',
      },
      {
        detail: 'jomoodev',
        text: 'jomoo.dev',
        description: `nuxt3와 nuxt-content로 만든 블로그`,
        path: '/projects/jomoodev',
        iconName: 'material-symbols-light:logo-dev-rounded',
      },
    ],
  },
};

export function useCategory() {
  const category = ref('');
  const categoryDescription = ref('');
  const categoryItems = ref([]);
  const route = useRoute();

  category.value = route.params.category;
  categoryDescription.value = categoriesMap[category.value].description;
  categoryItems.value = categoriesMap[category.value].itmes;

  return { category, categoryDescription, categoryItems };
}

<script setup>
const { category, categoryDescription, categoryItems } = useCategory();

useHead({
  title: category,
  meta: [{ name: 'description', content: `${category}의 detail 항목들` }],
});
</script>

<template>
  <NuxtLayout name="side-bar">
    <div class="flex flex-col gap-y-5 py-3">
      <div class="flex flex-col gap-y-1.5">
        <h1 class="text-xl font-bold capitalize">{{ category }}</h1>
        <p class="text-slate-500/80 text-sm md:text-base font-medium">
          {{ categoryDescription }}
        </p>
      </div>
      <div class="grid sm:grid-cols-2 gap-x-2 gap-y-8 xl:grid-cols-3">
        <div
          v-for="{ text, path, description, iconName } in categoryItems"
          :key="text"
          class="sm:max-w-72 md:w-80 h-44 lg:min-w-80 xl:w-72 xl:min-w-72"
        >
          <CategoryDetailCard
            :detail-text="text"
            :path="path"
            :description="description"
            :icon-name="iconName"
          />
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
defineProps({
  detailText: {
    type: String,
    default: 'category detail',
  },

  description: {
    type: String,
    default: 'category detail에 대한 설명',
  },

  iconName: {
    type: String,
    default: 'ion:accessibility',
  },

  path: {
    type: String,
    default: '/',
  },
});
</script>

<template>
  <NuxtLink :to="path">
    <div
      class="ring-1 ring-slate-300 hover:ring-emerald-500 hover:ring-2 rounded-xl w-full h-full py-3 px-4"
    >
      <div class="w-full h-20 flex items-center">
        <Icon :name="iconName" size="55" />
      </div>
      <div class="flex flex-col">
        <h3 class="text-lg py-1 font-medium truncate text-slate-800">{{ detailText }}</h3>
        <p class="text-[14px] leading-4 text-slate-700/80 text-ellipsis overflow-hidden capitalize">
          {{ description }}
        </p>
      </div>
    </div>
  </NuxtLink>
</template>

<script setup>
const h1Text1 = '안녕하세요! 이곳은 개발자의 성장 이야기와 코드의 흔적을 기록하는 곳입니다.';
const h1Text2 = '모듈을 활용하여 만들어진 이 블로그는 지식의 나눔을 추구합니다.';
const pText = `주요 주제로 코딩 테스트, 알고리즘, 자바스크립트 학습 내용과 진행했던 토이 프로젝트 관련 내용을 다룹니다!`;

const { data: recentWritePosts } = await useAsyncData(
  'recentWritePosts',
  () => {
    return queryContent('/')
      .sort({ date: -1 })
      .limit(5)
      .only(['_path', 'title', 'description', 'date', 'category', 'detail'])
      .find();
  },
  {
    transform(recentWritePosts) {
      return recentWritePosts.map((post) => {
        const tags = [
          { text: post.category, path: post.category },
          { text: post.detail, path: `${post.category}/${post.detail}` },
        ];
        return { ...post, tags };
      });
    },
  },
);

useHead({
  title: 'jomoo.dev',
  meta: [
    {
      name: 'description',
      content: pText,
    },
  ],
});
</script>

<template>
  <div class="flex flex-col gap-y-20">
    <section
      class="h-[calc(100vh-430px)] flex justify-center items-center flex-col gap-y-1 break-keep capitalize"
    >
      <h1 class="text-xl font-semibold text-center text-slate-700">
        {{ h1Text1 }}
        <br />
        <NuxtLink to="https://nuxt.com/" target="_blank">
          <span class="text-emerald-500">nuxt</span></NuxtLink
        >와
        <NuxtLink to="https://content.nuxt.com/" target="_blank"
          ><span class="text-emerald-500">nuxt-content</span></NuxtLink
        >
        {{ h1Text2 }}
      </h1>
      <p class="text-base text-gray-500 font-medium">
        {{ pText }}
      </p>
    </section>
    <section class="lg:mx-24">
      <div class="flex flex-col gap-y-3 md:gap-y-4 py-4">
        <h2 class="text-2xl md:text-3xl text-zinc-700 font-extrabold">최신 글</h2>
        <div class="flex flex-col gap-y-2">
          <PostCard
            v-for="{ _path, title, description, date, tags } in recentWritePosts"
            :key="title"
            :date="date"
            :title="title"
            :path="_path"
            :description="description"
            class="min-h-[174px] max-h-[174px]"
          >
            <template #tags>
              <div class="flex gap-x-2 relative bottom-3">
                <NuxtLink v-for="{ path, text } in tags" :key="text" :to="path">
                  <div
                    class="flex bg-slate-200/60 rounded-xl px-[9px] py-[3px] hover:bg-gray-100 text-emerald-600/90 hover:text-emerald-700/90"
                  >
                    {{ text }}
                  </div>
                </NuxtLink>
              </div>
            </template>
          </PostCard>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// default.vue에서 CategoriesMenu를 제거하는 함수 closeCategoriesMenu를 주입받고
// onMounted 훅에서 실행하여 CategoriesMenu를 제거하는 코드
...
const closeCategoriesMenu = inject('closeCategoriesMenu');

onMounted(() => closeCategoriesMenu());
...
</script>

<script setup>
import { CATEGORIES_DETAILS } from '~/constants/categoriesDetail';

const route = useRoute();
const { category, detail } = route.params;

const categoryDetailItems = CATEGORIES_DETAILS[category].map((categoryDetail) => {
  const active = categoryDetail.detail === detail;
  return { ...categoryDetail, active };
});
</script>

<template>
  <!-- 생략 -->
        <nav>
          <ul class="font-bold flex gap-x-4 md:block">
            <li v-for="{ path, text, active } in categoryDetailItems" :key="path">
              <NuxtLink :to="path">
                <div
                  class="hover:text-emerald-500 py-1.5"
                  :class="active ? 'text-emerald-600' : 'text-black'"
                >
                  {{ text }}
                </div>
              </NuxtLink>
            </li>
          </ul>
        </nav>
  <!-- 생략 -->
</template>

<script setup>
const route = useRoute();
const currentDetail = route.params.detail;

const { categoryItems } = useCategory();
</script>

<template>
  <!-- 생략 -->
        <nav>
          <ul class="font-bold flex gap-x-4 md:block text-sm md:text-base">
            <li v-for="{ path, text, detail } in categoryItems" :key="path">
              <NuxtLink :to="path">
                <div
                  class="hover:text-emerald-500 py-1.5"
                  :class="currentDetail === detail ? 'text-emerald-600' : 'text-black'"
                >
                  {{ text }}
                </div>
              </NuxtLink>
            </li>
          </ul>
        </nav>
  <!-- 생략 -->
</template>