대댓글 폼 여는 버튼 한번 더 클릭시 닫히는데 그때 x버튼으로 바뀌게

src/components/board/BoardComment.vue

@@ -48,7 +48,10 @@
         <!-- <template v-if="isDeleted">
             <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
         </template> -->
-        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
+        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6">
+            <i class="icon-base bx bx-plus beforeRotate" :class="{ rotate: isComment }"></i>
+        </PlusButton>
+
         <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
 
         <slot name="reply"></slot>
@@ -174,3 +177,13 @@
         emit('editClick', props.comment);
     };
 </script>
+<style>
+    .beforeRotate {
+        transition: transform 0.3s ease-in-out;
+    }
+
+    .rotate {
+        transform: rotate(45deg);
+        transition: transform 0.3s ease-in-out;
+    }
+</style>

src/components/button/PlusBtn.vue

@@ -1,13 +1,14 @@
 <template>
     <button class="btn btn-label-primary btn-icon">
-   <i class="icon-base bx bx-plus"></i>
-   </button>
+        <slot>
+            <i class="icon-base bx bx-plus"></i>
+        </slot>
+    </button>
 </template>
 
 <script>
-export default {
-   name: 'PlusButton',
-   methods: {
-     },
-   };
+    export default {
+        name: 'PlusButton',
+        methods: {},
+    };
 </script>