프로젝트 목록

src/components/list/ProjectCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card mb-3 shadow-sm">
+    <div class="card mb-3 shadow-sm border">
         <div class="row g-0">
             <!-- 게시물 내용 섹션 -->
             <div :class="contentColClass">
@@ -12,7 +12,7 @@
                         </span>
                     </h5>
                     <!-- 본문 -->
-                    <div class="card-text str_wrap my-5">{{ content }}</div>
+                    <div class="card-text line-clamp-2 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>
@@ -90,36 +90,3 @@ const formattedDate = computed(() => {
     ).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>

src/components/list/ProjectCardList.vue

@@ -6,7 +6,6 @@
 
         <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"
@@ -27,7 +26,7 @@ const posts = ref([
     {
         id: 1,
         title: 'Vue 3 Composition API 소개',
-        content: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
+        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,

src/layouts/TheMenu.vue

@@ -46,25 +46,25 @@
             <li class="menu-item" :class="$route.path.includes('/wordDict') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/wordDict">
                     <i class="menu-icon icon-base bx bx-book-open"></i>
-                    <div class="text-truncate">wordDict</div>
+                    <div class="text-truncate">WordDict</div>
                 </RouterLink>
             </li>
             <li class="menu-item" :class="$route.path.includes('/voteboard') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/voteboard">
                     <i class="menu-icon icon-base bx bx-box"></i>
-                    <div class="text-truncate">voteboard</div>
+                    <div class="text-truncate">Voteboard</div>
                 </RouterLink>
             </li>
             <li class="menu-item" :class="$route.path.includes('/vacation') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/vacation">
                     <i class="menu-icon tf-icons bx bx-calendar"></i>
-                    <div class="text-truncate">vacation</div>
+                    <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>
+                    <div class="text-truncate">Project</div>
                 </RouterLink>
             </li>
             <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">