댓글 시스템 복구

frontend/src/views/TierEditorView.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import * as htmlToImage from 'html-to-image'
 import SvgIcon from '../components/SvgIcon.vue'
+import TierListCommentsCard from '../components/TierListCommentsCard.vue'
 import addColumnRightIcon from '../assets/icons/add_column_right.svg'
 import addRowBelowIcon from '../assets/icons/add_row_below.svg'
 import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
@@ -159,6 +160,8 @@ const canRequestTemplateCreate = computed(
 const canRequestTemplateUpdate = computed(
   () => canEdit.value && hasSavedTierList.value && templateId.value !== 'freeform' && customItems.value.length > 0
 )
+const activeTierListId = computed(() => persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : ''))
+const currentUserId = computed(() => auth.user?.id || '')
 const canSubmitTemplateCreateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const canSubmitTemplateUpdateRequest = computed(() => !!templateRequestDraftTitle.value.trim() && !!templateRequestDraftDescription.value.trim())
 const templateRequestTargetLabel = computed(() => (templateId.value === 'freeform' ? '새로운 템플릿' : (templateName.value || templateId.value || '선택한 주제')))
@@ -1061,12 +1064,20 @@ async function copyShareUrl() {
 
 function openViewerMode() {
   if (!canSwitchToViewerMode.value) return
-  router.push(editorPath(templateId.value, persistedTierListId.value || tierListId.value, { preview: true }))
+  router.push({
+    path: editorPath(templateId.value, persistedTierListId.value || tierListId.value),
+    query: { ...route.query, preview: '1' },
+  })
 }
 
 function openEditMode() {
   if (!canSwitchToEditMode.value) return
-  router.push(editorPath(templateId.value, persistedTierListId.value || tierListId.value))
+  const nextQuery = { ...route.query }
+  delete nextQuery.preview
+  router.push({
+    path: editorPath(templateId.value, persistedTierListId.value || tierListId.value),
+    query: nextQuery,
+  })
 }
 
 function closeNavigationConfirmModal() {
@@ -1354,7 +1365,10 @@ async function loadEditorState() {
       isFavorited.value = !!t.isFavorited
 
       if (!previewMode.value && !canEdit.value) {
-        router.replace(editorPath(templateId.value, t.id, { preview: true }))
+        router.replace({
+          path: editorPath(templateId.value, t.id),
+          query: { ...route.query, preview: '1' },
+        })
         return
       }
 
@@ -1465,6 +1479,14 @@ onUnmounted(() => {
         <span>{{ formatExportDate(fallbackTimestamp) }}</span>
       </div>
     </div>
+    <TierListCommentsCard
+      v-if="activeTierListId"
+      :tier-list-id="activeTierListId"
+      :can-write="!!auth.user"
+      :current-user-id="currentUserId"
+      title="댓글"
+      description="이 티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요."
+    />
 
     <Teleport :to="localRightRailTarget">
       <template v-if="globalRightRailOpen">
@@ -1797,6 +1819,14 @@ onUnmounted(() => {
               <li>아이템이 많아 한 번에 보기 어렵다면 브라우저 확대/축소(`Ctrl +`, `Ctrl -`)로 화면 밀도를 조절해보세요.</li>
             </ul>
           </div>
+          <TierListCommentsCard
+            v-if="activeTierListId"
+            :tier-list-id="activeTierListId"
+            :can-write="!!auth.user"
+            :current-user-id="currentUserId"
+            title="댓글"
+            description="이 티어표에 대한 의견을 남기고 답글로 대화를 이어갈 수 있어요."
+          />
         </div>
 
         <div class="sidebarStickyFrame">