Merge pull request #36 from Chapter-1/dev

Deploy: 배포 test

package.json

@@ -12,16 +12,19 @@
     "deploy": "gh-pages -d dist -b main"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "axios": "^1.7.7",
+    "chart.js": "^4.4.6",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
     "pinia": "^2.2.6",
     "pinia-plugin-persistedstate": "^4.1.2",
+    "swiper": "^11.1.14",
     "vue": "^3.4.21",
     "vue-awesome-paginate": "^1.2.0",
     "vue-router": "^4.3.0"

src/components/cards/ContentCard.vue

@@ -65,7 +65,7 @@
                 class="text-blue-500 underline"
                 target="_blank"
                 rel="noopener noreferrer"
-              >신청 페이지</a>
+              >상세 정보 페이지</a>
             </div>
           </div>
         </div>
@@ -104,6 +104,5 @@
   </script>
 
   <style scoped>
-  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
   </style>
 

src/components/home/BannerSlider.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref } from 'vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, Pagination } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/autoplay';
+import richableImage from '@/assets/richable-home-bg.png';
+
+const banners = ref([
+    {
+    subtitle: "어려운 정책, 이제는 쉽고 간편하게! 새로운 정책의 기회를 놓치지 마세요",
+    title: "[BluePrint] AI 맞춤형 정책 추천 플랫폼",
+    link: "#",
+    backgroundColor: 'bg-blue-500',
+  },
+  {
+    subtitle: "AI로 더 빠르고 똑똑하게 정책 확인",
+    title: "청사진",
+    link: "#",
+    backgroundColor: 'bg-yellow-500',
+  },
+  {
+    subtitle: "자산 관리 서비스",
+    title: "Richable",
+    link: "https://www.richable.site/",
+    backgroundImage: {
+      src: richableImage,
+      alt: 'Richable Background'
+    },
+  },
+  
+]);
+
+const modules = [Autoplay, Pagination];
+</script>
+<template>
+  <swiper
+    :modules="modules"
+    :autoplay="{
+      delay: 3000,
+      disableOnInteraction: false
+    }"
+    :pagination="{ clickable: true }"
+    loop="true"
+    class="mySwiper"
+  >
+    <swiper-slide
+      v-for="(banner, index) in banners"
+      :key="index"
+      :class="['slide-content', banner.backgroundColor, 'text-white', 'p-4', 'rounded-lg']"
+    >
+    <img
+        v-if="banner.backgroundImage"
+        :src="banner.backgroundImage.src"
+        :alt="banner.backgroundImage.alt"
+        class="absolute inset-0 w-full h-full object-fill -z-10"
+      />
+
+      <div class="text" :class="{'text-red-500': banner.backgroundImage}">
+        <em class="block text-sm mb-2">{{ banner.subtitle }}</em>
+        <strong class="block text-2xl font-bold mb-4">{{ banner.title }}</strong>
+        <a :href="banner.link" target="_blank" class="['underline', banner.backgroundImage ? 'text-red-500' : 'text-white']">자세히보기 &gt;</a>
+      </div>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<style scoped>
+.mySwiper {
+  width: 100%;
+  max-width: 100%;
+  height: 300px;
+  margin: 0;
+}
+.swiper-slide {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px;
+  border-radius: 10px;
+}
+.text {
+  max-width: 600px;
+}
+.swiper-button-next,
+.swiper-button-prev {
+  display: none;
+}
+</style>

src/components/home/FilterResult.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  filteredPolicies: Array,  // 부모 컴포넌트로부터 전달받은 검색 결과
+});
+
+const currentPage = ref(1);
+const pageSize = 5; // 페이지당 출력할 항목 수
+
+// 페이지네이션을 위한 필터된 데이터
+const paginatedPolicies = computed(() => {
+  const start = (currentPage.value - 1) * pageSize;
+  const end = start + pageSize;
+  return props.filteredPolicies.slice(start, end);
+});
+
+// 전체 페이지 수 계산
+const totalPages = computed(() => {
+  return Math.ceil(props.filteredPolicies.length / pageSize);
+});
+
+// 페이지 변경 함수
+const changePage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page;
+  }
+};
+</script>
+
+<template>
+  <section class="mt-8">
+    <h2 class="text-2xl font-semibold mb-4">추천 정책</h2>
+
+    <!-- 결과가 있을 때 -->
+    <div v-if="filteredPolicies.length > 0">
+      <div v-for="policy in paginatedPolicies" :key="policy.idx" class="bg-white p-4 rounded-lg shadow-md mb-4">
+        <h3 class="text-xl font-semibold">{{ policy.subject }}</h3>
+        <p class="text-gray-500">{{ policy.condition }}</p>
+        <a :href="policy.url" class="text-blue-500 mt-2 inline-block">자세히 보기</a>
+      </div>
+
+      <!-- 페이지네이션 -->
+      <div class="flex justify-center mt-4">
+        <button 
+          @click="changePage(currentPage - 1)" 
+          :disabled="currentPage === 1" 
+          class="px-4 py-2 bg-gray-200 rounded-md">이전</button>
+
+        <span class="mx-4">페이지 {{ currentPage }} / {{ totalPages }}</span>
+
+        <button 
+          @click="changePage(currentPage + 1)" 
+          :disabled="currentPage === totalPages" 
+          class="px-4 py-2 bg-gray-200 rounded-md">다음</button>
+      </div>
+    </div>
+
+    <!-- 결과가 없을 때 -->
+    <div v-else class="text-center text-gray-500">
+      만족하는 조건이 없습니다
+    </div>
+  </section>
+</template>