refactor(post) : 포스트 이미지가 없을 경우, 내용 추가 표시 처리

Triumers · Jun 13, 2024 · af5c2b7 · af5c2b7
1 parent 35f7337
commit af5c2b7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/src/components/post/SelectedPostList.vue b/src/components/post/SelectedPostList.vue
@@ -44,7 +44,7 @@
                 </div>
                 <div class="preview-main">
                   <h5 class="card-title"><strong>{{ post.title }}</strong></h5>
-                  <div class="content-preview">{{ stripHtmlTags(post.content) }}</div>
+                  <div :class="{'no-postImg': !post.postImg, 'content-preview': true}">{{ stripHtmlTags(post.content) }}</div>
                   <b-card-img v-if="post.postImg" :src="post.postImg"
                      class="card-img" alt="Image" bottom></b-card-img>
                 </div>
@@ -319,28 +319,4 @@ function zergRush() {
 
 <style>
 @import url('@/styles/post/PostList.css');
-
-.zerg-unit {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  background-color: white;
-  border: 3px solid navy;
-  border-radius: 50%;
-  position: absolute;
-  cursor: pointer;
-  animation: zergAnimation 20s linear infinite; /* 애니메이션 적용 */
-}
-
-@keyframes zergAnimation {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(50vh); /* 바닥까지 떨어지는 위치로 변경 */
-  }
-  100% {
-    transform: translateY(100vh); /* 바닥까지 떨어지는 위치로 변경 */
-  }
-}
 </style>
diff --git a/src/styles/post/PostList.css b/src/styles/post/PostList.css
@@ -4,10 +4,18 @@
     /* 두 줄을 표시하고 넘어가면 말줄임표 표시 */
     -webkit-box-orient: vertical;
     overflow: hidden;
+    white-space: normal;
     text-overflow: ellipsis;
     min-height: 50px;
     margin-top: 10px;
     margin-bottom: 10px;
+    max-width: 100%;
+    line-height: 1.8em;
+}
+
+.content-preview.no-postImg{
+    -webkit-line-clamp: 9;
+    min-height: 260px;
 }
 
 .card-title {
@@ -101,4 +109,29 @@
     bottom: 20px;
     right: 20px;
     color: #042444;
-}
+}
+
+
+.zerg-unit {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-color: white;
+    border: 3px solid navy;
+    border-radius: 50%;
+    position: absolute;
+    cursor: pointer;
+    animation: zergAnimation 20s linear infinite; /* 애니메이션 적용 */
+  }
+
+  @keyframes zergAnimation {
+    0% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(50vh); /* 바닥까지 떨어지는 위치로 변경 */
+    }
+    100% {
+      transform: translateY(100vh); /* 바닥까지 떨어지는 위치로 변경 */
+    }
+  }