diff --git a/src/components/article/CommentItem.vue b/src/components/article/CommentItem.vue
index bdaf265..3db939b 100644
--- a/src/components/article/CommentItem.vue
+++ b/src/components/article/CommentItem.vue
@@ -1,13 +1,15 @@
 <script setup>
 import { ref } from 'vue';
 import TextButton from '../common/TextButton.vue';
+import { deleteComment } from '@/api/comment';
 
-const { comment } = defineProps({ comment: Object });
+const { comment, userId } = defineProps({ comment: Object, userId: String });
 const isDeleted = ref(false);
 
 function handleDelete() {
-  console.log('delete', comment.id);
-  // TODO: add api call
+  deleteComment(comment.id).then(() => {
+    isDeleted.value = true;
+  });
 }
 </script>
 
@@ -18,7 +20,7 @@ function handleDelete() {
         <div class="nickname">{{ comment.nickname }}</div>
         <div class="date">{{ comment.date }}</div>
       </div>
-      <div v-if="!comment.isAuthor" class="control">
+      <div v-if="comment.authorId === userId" class="control">
         <TextButton @click="handleDelete">삭제</TextButton>
       </div>
     </div>
diff --git a/src/components/article/CommentList.vue b/src/components/article/CommentList.vue
index 81e0ea0..549a779 100644
--- a/src/components/article/CommentList.vue
+++ b/src/components/article/CommentList.vue
@@ -1,12 +1,19 @@
 <script setup>
+import { useMemberStore } from '@/stores/memberStore';
 import CommentItem from './CommentItem.vue';
 
 const { comments } = defineProps({ comments: Array });
+const { userId } = useMemberStore();
 </script>
 
 <template>
   <ul>
-    <CommentItem v-for="comment in comments" :key="comment.id" :comment="comment" />
+    <CommentItem
+      v-for="comment in comments"
+      :key="comment.id"
+      :comment="comment"
+      :userId="userId"
+    />
   </ul>
 </template>