From 34acf8aedb67de745c3848247eb49b18010e154a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 10 Feb 2025 16:07:24 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        | 31 +---------------------
 src/components/list/ProjectCardList.vue    | 17 ------------
 src/components/projectlist/ProjectList.vue | 19 +++++++++++++
 src/views/projectlist/TheProjectList.vue   | 18 ++-----------
 4 files changed, 22 insertions(+), 63 deletions(-)
 create mode 100644 src/components/projectlist/ProjectList.vue

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 5e7b03e..138df97 100644
--- a/src/components/list/ProjectCard.vue
+++ b/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);
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 4c17427..aed26b8 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/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>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
new file mode 100644
index 0000000..bae6f34
--- /dev/null
+++ b/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>
diff --git a/src/views/projectlist/TheProjectList.vue b/src/views/projectlist/TheProjectList.vue
index bf1de2a..502636a 100644
--- a/src/views/projectlist/TheProjectList.vue
+++ b/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>