게시글 목차와 댓글 등록 상태 정리 v1.5.16

components/comments/PostComments.vue

@@ -19,6 +19,8 @@ const replyBody = ref('')
 const activeReplyTargetId = ref('')
 const sortOption = ref('best')
 const brokenAvatarCommentIds = ref([])
+const canSubmitComment = computed(() => Boolean(newCommentBody.value.trim()) && !submitting.value)
+const canSubmitReply = computed(() => Boolean(replyBody.value.trim()) && !submittingReplyId.value)
 
 /**
  * 댓글 시간을 상대 시간 형식으로 변환한다.
@@ -313,15 +315,15 @@ onMounted(async () => {
     </div>
 
     <div class="mt-3 flex items-center gap-2 text-xs site-muted">
-      <label for="comment-sort">Sort by:</label>
+      <label for="comment-sort">정렬:</label>
       <select
         id="comment-sort"
         v-model="sortOption"
         class="rounded-md border border-[var(--site-line)] bg-transparent px-2 py-1 text-xs font-semibold text-[var(--site-ink)] outline-none"
       >
-        <option value="best">Best</option>
-        <option value="latest">Latest</option>
-        <option value="oldest">Oldest</option>
+        <option value="best">인기순</option>
+        <option value="latest">최신순</option>
+        <option value="oldest">오래된순</option>
       </select>
     </div>
 
@@ -339,8 +341,8 @@ onMounted(async () => {
         <div class="mt-2 flex justify-end">
           <button
             type="button"
-            class="site-accent-button rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:opacity-60"
-            :disabled="submitting"
+            class="site-accent-button rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:cursor-not-allowed disabled:opacity-60"
+            :disabled="!canSubmitComment"
             @click="submitComment"
           >
             {{ submitting ? '등록 중...' : '댓글 등록' }}
@@ -448,7 +450,7 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div v-if="activeReplyTargetId === comment.id" class="mt-2 rounded-[10px] border border-[var(--site-line)] p-2">
+          <div v-if="activeReplyTargetId === comment.id" class="mt-2 rounded-[10px] p-2">
             <textarea
               v-model="replyBody"
               rows="3"
@@ -464,8 +466,8 @@ onMounted(async () => {
               </button>
               <button
                 type="button"
-                class="site-accent-button rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:opacity-60"
-                :disabled="submittingReplyId === comment.id"
+                class="site-accent-button rounded-[10px] px-3 py-1.5 text-xs font-semibold disabled:cursor-not-allowed disabled:opacity-60"
+                :disabled="!canSubmitReply"
                 @click="submitReply(comment.id)"
               >
                 {{ submittingReplyId === comment.id ? '등록 중...' : '답글 등록' }}
@@ -543,4 +545,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-