팔로우 피드 보기 전환 추가

frontend/src/App.vue

@@ -32,7 +32,14 @@ const leftRailCollapsed = ref(false)
 const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
-const leftRailSearchPlaceholder = computed(() => (route.name === 'templates' ? '주제 템플릿 검색' : '공개 티어표 검색'))
+const leftRailSearchPlaceholder = computed(() => {
+  if (route.name === 'templates') return '주제 템플릿 검색'
+  if (route.name === 'topicHub') return '이 템플릿의 공개 티어표 검색'
+  if (route.name === 'followingFeed') return '팔로우한 사람의 공개 티어표 검색'
+  if (route.name === 'favorites') return '즐겨찾기한 티어표 검색'
+  if (route.name === 'me') return '내 티어표 검색'
+  return '공개 티어표 검색'
+})
 const isCollapsedSearchOpen = ref(false)
 const isGuideModalOpen = ref(false)
 const themeMode = ref('dark')
@@ -157,7 +164,7 @@ const isGuideNextDisabled = computed(() => guideStepIndex.value >= guideSteps.le
 const isLightTheme = computed(() => themeMode.value === 'light')
 const themeToggleLabel = computed(() => (isLightTheme.value ? '다크 모드' : '라이트 모드'))
 const showSettingsThemePanel = computed(() => route.name === 'profile')
-const showTopicViewToggle = computed(() => ['home', 'templates', 'topicHub', 'me', 'favorites'].includes(String(route.name || '')))
+const showTopicViewToggle = computed(() => ['home', 'templates', 'topicHub', 'me', 'favorites', 'followingFeed'].includes(String(route.name || '')))
 const topicViewMode = computed(() => (route.query.view === 'list' ? 'list' : 'grid'))
 const showBackendFallback = computed(() => !isPreviewMode.value && ['maintenance', 'offline'].includes(backendState.value))
 const shouldLockRightRailBodyScroll = computed(() => isRightRailOverlay.value && rightRailOpen.value && !showBackendFallback.value)

frontend/src/views/FollowingFeedView.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { editorPath, loginPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
@@ -8,6 +8,7 @@ import { useToast } from '../composables/useToast'
 import { displayInitialFrom } from '../lib/display'
 
 const router = useRouter()
+const route = useRoute()
 const toast = useToast()
 
 const tierLists = ref([])
@@ -15,6 +16,7 @@ const query = ref('')
 const isLoading = ref(false)
 const error = ref('')
 const brokenThumbnailIds = ref({})
+const isListView = computed(() => route.query.view === 'list')
 
 watch(error, (message) => {
   if (!message) return
@@ -95,9 +97,9 @@ onMounted(loadFollowingFeed)
     <section class="panel">
       <div v-if="isLoading" class="empty">팔로우 피드를 불러오고 있어요.</div>
       <div v-else-if="tierLists.length === 0" class="empty">아직 팔로우한 작성자의 공개 티어표가 없어요.</div>
-      <div v-else class="list">
-        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard">
-          <button class="boardCard__body" type="button" @click="openTierList(tierList)">
+      <div v-else class="list" :class="{ 'list--table': isListView }">
+        <article v-for="tierList in tierLists" :key="tierList.id" class="boardCard" :class="{ 'boardCard--list': isListView }">
+          <button class="boardCard__body" :class="{ 'boardCard__body--list': isListView }" type="button" @click="openTierList(tierList)">
             <div class="boardCard__thumbWrap">
               <img
                 v-if="tierListThumbnailUrl(tierList)"
@@ -174,6 +176,9 @@ onMounted(loadFollowingFeed)
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 18px;
 }
+.list--table {
+  grid-template-columns: 1fr;
+}
 .boardCard {
   min-width: 0;
   border-radius: 22px;
@@ -200,6 +205,19 @@ onMounted(loadFollowingFeed)
   color: inherit;
   padding: 0;
   display: grid;
+  overflow: hidden;
+}
+.boardCard__body--list {
+  grid-template-columns: 200px minmax(0, 1fr);
+  align-items: stretch;
+}
+.boardCard__body--list .boardCard__thumbWrap {
+  height: 100%;
+  padding: 14px;
+}
+.boardCard__body--list .boardCard__thumb,
+.boardCard__body--list .boardCard__thumbPlaceholder {
+  min-height: 100%;
 }
 .boardCard__thumbWrap {
   width: 100%;
@@ -230,6 +248,11 @@ onMounted(loadFollowingFeed)
   padding: 16px 18px 0;
   display: grid;
   gap: 6px;
+  overflow: hidden;
+}
+.boardCard--list .boardCard__head {
+  align-content: center;
+  padding: 16px 18px 16px 0;
 }
 .boardCard__titleRow {
   min-width: 0;
@@ -321,6 +344,14 @@ onMounted(loadFollowingFeed)
     grid-template-columns: 1fr;
   }
 
+  .boardCard__body--list {
+    grid-template-columns: 1fr;
+  }
+
+  .boardCard--list .boardCard__head {
+    padding: 16px 18px 0;
+  }
+
   .input {
     min-width: 0;
     width: 100%;