캐러셀

데이터 로딩: mounted 라이프사이클 훅에서 초기 데이터를 로드합니다. 이 데이터는 ref를 사용하여 로컬 상태에 저장됩니다.
데이터 표시: 캐러셀에서 한 번에 두 개의 아이템만 표시되도록 합니다. 이를 위해 v-for 디렉티브를 사용하고, 인덱스를 현재 표시되는 아이템 범위로 제한합니다.
네비게이션: 오른쪽 버튼을 누르면, 표시되는 아이템 범위의 시작 인덱스를 증가시킵니다. 이렇게 하면 다음 아이템이 표시됩니다.
데이터 추가 로딩: 사용자가 4개 이상의 아이템을 볼 때마다, 추가 데이터를 로드합니다. 이를 위해 watch를 사용하여 현재 표시되는 아이템 범위를 감시하고, 범위가 초기 데이터의 끝에 도달하면 추가 데이터를 로드합니다.

<template>
  <div>
    <div v-for="(item, index) in displayedItems" :key="index">
      <!-- 카드 아이템 컴포넌트 -->
    </div>
    <button @click="nextItem">다음</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const items = ref([]);
    let startIndex = ref(0);

    const displayedItems = computed(() => {
      return items.value.slice(startIndex.value, startIndex.value + 2);
    });

    watch(displayedItems, (newVal, oldVal) => {
      if (startIndex.value >= items.value.length - 1) {
        fetchMoreData();
      }
    });

    const fetchMoreData = async () => {
      // 새로운 데이터를 fetch하고 items에 추가
    };

    const nextItem = () => {
      startIndex.value += 1;
    };

    return {
      items,
      displayedItems,
      nextItem
    };
  },
  mounted() {
    // 초기 데이터 로드
  }
};
</script>