From 8a15c9c1ccf0a70e7c3cb06e11c3683b0e1fd762 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 10 Feb 2025 14:45:13 +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=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue      | 125 +++++++++++++++++++++++
 src/components/list/ProjectCardList.vue  |  67 ++++++++++++
 src/layouts/TheMenu.vue                  |   6 ++
 src/router/index.js                      |   4 +
 src/views/projectlist/TheProjectList.vue |  24 +++++
 5 files changed, 226 insertions(+)
 create mode 100644 src/components/list/ProjectCard.vue
 create mode 100644 src/components/list/ProjectCardList.vue
 create mode 100644 src/views/projectlist/TheProjectList.vue

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
new file mode 100644
index 0000000..123f367
--- /dev/null
+++ b/src/components/list/ProjectCard.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="card mb-3 shadow-sm">
+        <div class="row g-0">
+            <!-- 게시물 내용 섹션 -->
+            <div :class="contentColClass">
+                <div class="card-body">
+                    <!-- 제목 -->
+                    <h5 class="card-title">
+                        {{ title }}
+                        <span class="text-muted me-3" v-if="attachment">
+                            <i class="fa-solid fa-paperclip"></i>
+                        </span>
+                    </h5>
+                    <!-- 본문 -->
+                    <div class="card-text str_wrap my-5">{{ content }}</div>
+                    <!-- 날짜 -->
+                    <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>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { defineProps } from 'vue';
+
+// Props 정의
+const props = defineProps({
+    category: {
+        type: String,
+        required: false,
+    },
+    title: {
+        type: String,
+        required: true,
+    },
+    content: {
+        type: String,
+        required: true,
+    },
+    date: {
+        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);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
+        date.getDate()
+    ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
+        date.getMinutes()
+    ).padStart(2, "0")}`;
+});
+</script>
+
+<style>
+/* 카드 스타일 */
+.card {
+    border: 1px solid #e6e6e6;
+    border-radius: 8px;
+    transition: transform 0.2s ease-in-out;
+}
+
+.card:hover {
+    transform: scale(1.02);
+}
+
+/* 텍스트 줄임 표시 */
+.str_wrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+/* 이미지 스타일 */
+.img-fluid {
+    border-radius: 8px 0 0 8px;
+}
+
+/* 태그 배지 스타일 */
+.badge {
+    font-size: 0.8rem;
+    padding: 5px 10px;
+}
+</style>
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
new file mode 100644
index 0000000..5ac0f5d
--- /dev/null
+++ b/src/components/list/ProjectCardList.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="mt-4">
+        <div v-if="posts.length === 0" class="text-center">
+            <p class="text-muted mt-4">게시물이 없습니다.</p>
+        </div>
+
+        <div v-for="post in posts" :key="post.id" @click="goDetail(post.id)">
+            <ProjectCard
+                :category="post.category || ''"
+                :title="post.title"
+                :content="post.content"
+                :date="post.date"
+                :views="post.views || 0"
+                v-bind="getProjectCardProps(post)"
+                :attachment="post.attachment || false"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue';
+import ProjectCard from './ProjectCard.vue';
+
+// 테스트용 데이터
+const posts = ref([
+    {
+        id: 1,
+        title: 'Vue 3 Composition API 소개',
+        content: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
+        date: '2025-02-10',
+        views: 120,
+        likes: 15,
+        comments: 4,
+        attachment: true
+    },
+    {
+        id: 2,
+        title: 'Spring Boot로 REST API 만들기',
+        content: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
+        date: '2025-02-09',
+        views: 89,
+        likes: 8,
+        comments: 2,
+        attachment: false
+    }
+]);
+
+const emit = defineEmits(['click']);
+
+// 상세 페이지 이동
+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/layouts/TheMenu.vue b/src/layouts/TheMenu.vue
index ea814c5..28a7b45 100644
--- a/src/layouts/TheMenu.vue
+++ b/src/layouts/TheMenu.vue
@@ -61,6 +61,12 @@
                     <div class="text-truncate">vacation</div>
                 </RouterLink>
             </li>
+            <li class="menu-item" :class="$route.path.includes('/projectlist') ? 'active' : ''">
+                <RouterLink class="menu-link" to="/projectlist">
+                    <i class="menu-icon icon-base bx bx-list-ul"></i>
+                    <div class="text-truncate">project</div>
+                </RouterLink>
+            </li>
             <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
                     <i class="menu-icon tf-icons bx bx-calendar"></i>
diff --git a/src/router/index.js b/src/router/index.js
index 0c6965f..2957e04 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -76,6 +76,10 @@ const routes = [
 
         ]
     },
+    {
+        path: '/projectlist',
+        component: () => import('@v/projectlist/TheProjectList.vue'),
+    },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),
diff --git a/src/views/projectlist/TheProjectList.vue b/src/views/projectlist/TheProjectList.vue
new file mode 100644
index 0000000..bf1de2a
--- /dev/null
+++ b/src/views/projectlist/TheProjectList.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <SearchBar />
+        <CategoryBtn :lists="testData" />
+        <ProjectCardList :category="selectedCategory" />
+    </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' },
+];
+
+</script>