프로젝트 목록

src/components/list/ProjectCard.vue

@@ -2,7 +2,7 @@
     <div class="card mb-3 shadow-sm border">
         <div class="row g-0">
             <!-- 게시물 내용 섹션 -->
-            <div :class="contentColClass">
+            <div>
                 <div class="card-body">
                     <!-- 제목 -->
                     <h5 class="card-title">
@@ -16,18 +16,6 @@
                     <!-- 날짜 -->
                     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
                         <small class="text-muted">{{ formattedDate }}</small>
-                        <!-- 조회수, 좋아요, 댓글 -->
-                        <div class="d-flex mt-2 mt-sm-0">
-                            <span class="text-muted me-3">
-                                <i class="fa-regular fa-eye"></i> {{ views || 0 }}
-                            </span>
-                            <span class="text-muted me-3" v-if="likes != null">
-                                <i class="bx bx-like"></i> {{ likes }}
-                            </span>
-                            <span class="text-muted" v-if="comments !== null">
-                                <i class="bx bx-comment"></i> {{ comments }}
-                            </span>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -57,29 +45,12 @@ const props = defineProps({
         type: String,
         required: true,
     },
-    views: {
-        type: Number,
-        default: 0,
-    },
-    likes: {
-        type: Number,
-        default: null,
-    },
-    comments: {
-        type: Number,
-        default: null,
-    },
     attachment: {
         type: Boolean,
         default: false,
     }
 });
 
-// computed 속성
-const contentColClass = computed(() => {
-    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
-});
-
 // formattedDate을 computed로 정의
 const formattedDate = computed(() => {
     const date = new Date(props.date);

src/components/list/ProjectCardList.vue

@@ -9,8 +9,6 @@
                 :title="post.title"
                 :content="post.content"
                 :date="post.date"
-                :views="post.views || 0"
-                v-bind="getProjectCardProps(post)"
                 :attachment="post.attachment || false"
             />
         </div>
@@ -28,8 +26,6 @@ const posts = ref([
         title: 'Vue 3 Composition API 소개',
         content: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다. Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
         date: '2025-02-10',
-        views: 120,
-        likes: 15,
         comments: 4,
         attachment: true
     },
@@ -38,8 +34,6 @@ const posts = ref([
         title: 'Spring Boot로 REST API 만들기',
         content: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
         date: '2025-02-09',
-        views: 89,
-        likes: 8,
         comments: 2,
         attachment: false
     }
@@ -52,15 +46,4 @@ const goDetail = (id) => {
     emit('click', id);
 };
 
-// 없는 데이터는 상위 페이지에서 삭제해도 되게끔 설정
-const getProjectCardProps = (post) => {
-    const projectCardProps = {};
-    if ('likes' in post) {
-        projectCardProps.likes = post.likes;
-    }
-    if ('comments' in post) {
-        projectCardProps.comments = post.comments;
-    }
-    return projectCardProps;
-};
 </script>

src/components/projectlist/ProjectList.vue

@@ -0,0 +1,19 @@
+<template>
+    <SearchBar />
+    <CategoryBtn :lists="yearCategory" />
+    <ProjectCardList :category="selectedCategory" />
+</template>
+
+<script setup>
+import SearchBar from '@c/search/SearchBar.vue';
+import ProjectCardList from '@c/list/ProjectCardList.vue';
+import CategoryBtn from '@c/category/CategoryBtn.vue';
+import commonApi from '@/common/commonApi'
+import { ref } from 'vue';
+
+const selectedCategory = ref(null);
+
+const { yearCategory } = commonApi();
+
+
+</script>

src/views/projectlist/TheProjectList.vue

@@ -1,24 +1,10 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <SearchBar />
-        <CategoryBtn :lists="testData" />
-        <ProjectCardList :category="selectedCategory" />
+        <ProjectList />
     </div>
 </template>
 
 <script setup>
-import SearchBar from '@c/search/SearchBar.vue';
-import ProjectCardList from '@c/list/ProjectCardList.vue';
-import CategoryBtn from '@c/category/CategoryBtn.vue';
-import { ref } from 'vue';
-
-const selectedCategory = ref(null);
-
-// 테스트용 데이터
-const testData = [
-    { CMNCODVAL: 'cat1', CMNCODNAM: 'All' },
-    { CMNCODVAL: 'cat2', CMNCODNAM: '2024' },
-    { CMNCODVAL: 'cat3', CMNCODNAM: '2025' },
-];
+import ProjectList from '@c/projectlist/ProjectList.vue';
 
 </script>