jomoo.dev 페이지 디렉터리 리팩터링

<script setup>
const route = useRoute();
const { category, detail } = route.params;

const { data: posts } = await useAsyncData(
  `${detail}-posts`,
  () => {
    return queryContent(category, detail).only(['_path', 'description', 'title', 'date']).find();
  },
  {
    transform(posts) {
      return posts.reverse();
    },
  },
);

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

<template>
  <NuxtLayout name="side-bar">
    <ContentCard
      v-for="{ _path, description, title, date } in posts"
      :key="title"
      :page-link="_path"
      :description="description"
      :title="title"
      :date="date"
    />
  </NuxtLayout>
</template>

<script setup>
import { PREVIOUS, NEXT } from '~/constants/postDirection';

const route = useRoute();
const { detail, post } = route.params;
const directions = [PREVIOUS, NEXT];

const { data: surrounds } = await useAsyncData(
  `post-${post}-surrounds`,
  () => {
    return queryContent().only(['_path', 'title', '_dir']).findSurround(route.path);
  },
  {
    transform: (surrounds) => {
      return surrounds.map((surround) => (surround && surround._dir === detail ? surround : null));
    },
  },
);
</script>

<template>
  <NuxtLayout name="side-bar">
    <div class="prose min-w-full md:px-2">
      <ContentDoc />
    </div>
    <div v-if="surrounds?.length" class="flex flex-col md:flex-row w-full gap-2.5 justify-between">
      <div v-for="(surround, index) in surrounds" :key="surround" class="md:w-1/3">
        <PostMoveCard
          v-if="surround"
          :direction="directions[index]"
          :title="surround.title"
          :path="surround._path"
        />
      </div>
    </div>
  </NuxtLayout>
</template>

export const PREVIOUS = 'previous';
export const NEXT = 'next';
export const PREVIOUS_POST_TEXT = '이전 포스트';
export const NEXT_POST_TEXT = '다음 포스트';

<template>
  <div
    class="w-full border rounded-xl py-2.5 px-3.5 cursor-pointer hover:ring-2 ring-emerald-400"
    @click="movePost"
  >
    <div v-if="props.postDirection === -1" class="flex items-center gap-x-1.5">
      <div class="md:w-2/12 flex justify-start">
        <Icon name="icon-park:arrow-left" size="32" />
      </div>
      <div class="w-10/12">
        <div class="flex justify-start text-sm font-semibold text-zinc-500">이전 포스트</div>
        <div class="flex items-center">
          <p class="m-0 text-lg font-bold text-zinc-700 truncate">
            {{ pageData.title }}
          </p>
        </div>
      </div>
    </div>
    <div v-else class="flex items-center justify-end gap-x-1.5">
      <div class="w-10/12">
        <div class="flex justify-end text-sm font-semibold text-zinc-500">이후 포스트</div>
        <div class="flex justify-end items-center">
          <p class="m-0 text-lg font-bold text-zinc-700 truncate">
            {{ pageData.title }}
          </p>
        </div>
      </div>
      <div class="md:w-2/12 flex justify-end">
        <Icon name="icon-park:arrow-right" size="32" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { usePostStore } from '~/store/postStore';

const props = defineProps({
  postDirection: {
    type: Number,
    required: true,
  },
  pageNumber: {
    type: Number,
    default: 0,
  },
  dataKind: {
    type: String,
    default: 'voca',
  },
});

const postStore = usePostStore();
const router = useRouter();
const pageData = ref(null);

pageData.value = postStore.pickPosts(props.dataKind)[props.pageNumber];

function movePost() {
  router.push({ path: pageData.value._path });
}
</script>

<script setup>
import { PREVIOUS, PREVIOUS_POST_TEXT, NEXT_POST_TEXT } from '~/constants/postDirection';

const props = defineProps({
  direction: {
    type: String,
    required: true,
  },

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

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

const router = useRouter();

const iconName = computed(() =>
  props.direction === PREVIOUS ? 'icon-park:arrow-left' : 'icon-park:arrow-right',
);

const directionText = computed(() =>
  props.direction === PREVIOUS ? PREVIOUS_POST_TEXT : NEXT_POST_TEXT,
);

const directionJustify = computed(() =>
  props.direction === PREVIOUS ? 'justify-start' : 'justify-end',
);

const directionFlexRow = computed(() =>
  props.direction === PREVIOUS ? 'flex-row' : 'flex-row-reverse',
);

function movePost() {
  router.push({ path: props.path });
}
</script>

<template>
  <div
    class="w-full border rounded-xl py-2.5 px-3.5 cursor-pointer hover:ring-2 ring-emerald-400"
    @click="movePost"
  >
    <div class="flex items-center gap-x-5 md:gap-x-1.5" :class="directionFlexRow">
      <div class="md:w-2/12 flex" :class="directionJustify">
        <Icon :name="iconName" size="32" />
      </div>
      <div class="w-10/12">
        <div class="flex text-sm font-semibold text-zinc-500" :class="directionJustify">
          {{ directionText }}
        </div>
        <div class="flex items-center" :class="directionJustify">
          <span class="text-lg font-bold text-zinc-700 truncate">{{ props.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 변경 전 -->
<NuxtLink
  class="link"
  :to="path"
  :class="{ link: path, link_active: active }"
  @click="closeCategoriesMenu"
>
  {{ category }}
</NuxtLink>

<!-- 변경 후 -->
<NuxtLink class="link" :to="path" :class="{ link: path, link_active: active }">
  {{ category }}
</NuxtLink>

<script setup>
// ...
const closeCategoriesMenu = inject('closeCategoriesMenu');

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