From 3b831c5ad2b4ffd7402099f9753ad68ff3d6b55f Mon Sep 17 00:00:00 2001
From: TtiPo <kysung114y@gmail.com>
Date: Fri, 11 Sep 2026 01:43:18 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=86=8C=EC=8B=9D=C2=B7=EC=BB=A4?=
 =?UTF-8?q?=EB=AE=A4=EB=8B=88=ED=8B=B0=20=EC=84=B9=EC=85=98=EC=9D=98=20?=
 =?UTF-8?q?=EB=B3=B8=EB=AC=B8=20=EB=9E=98=ED=8D=BC=EB=A5=BC=20SectionBound?=
 =?UTF-8?q?ary=20=EB=B0=94=EA=B9=A5=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SectionBoundary 에 직접 붙이던 __body 클래스를 감싸는 div 로 옮겼다.
경계 컴포넌트가 자기 레이아웃을 갖지 않게 되어, 상태(로딩·실패·비어 있음)가
바뀌어도 섹션 본문의 자리가 흔들리지 않는다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
---
 .../src/components/home/CommunitySection.vue  | 153 +++++++++---------
 frontend/src/components/home/NewsSection.vue  |  79 ++++-----
 2 files changed, 117 insertions(+), 115 deletions(-)

diff --git a/frontend/src/components/home/CommunitySection.vue b/frontend/src/components/home/CommunitySection.vue
index 1568995..be7d64a 100644
--- a/frontend/src/components/home/CommunitySection.vue
+++ b/frontend/src/components/home/CommunitySection.vue
@@ -39,84 +39,85 @@ const selectedTab = ref('popular')
       label="커뮤니티 정렬"
     />
 
-    <SectionBoundary
-      class="community__body"
-      :status="resource.status.value"
-      :error-message="resource.errorMessage.value"
-      empty-title="아직 올라온 글이 없어요"
-      empty-link-label="첫 글 쓰러 가기"
-      min-height="24rem"
-      @retry="resource.reload"
-    >
-      <template #skeleton>
-        <div class="community__grid">
-          <SkeletonBox
-            v-for="index in 4"
-            :key="index"
-            ratio="1 / 1"
-            :radius="'var(--sz-radius-post)'"
-          />
-        </div>
-      </template>
-
-      <div class="community__grid">
-        <a
-          v-for="post in resource.data.value ?? []"
-          :key="post.id"
-          class="community__card"
-          :class="`community__card--${post.kind}`"
-          :style="{ background: post.placeholderColor }"
-          href="#"
-        >
-          <!-- 사진이 없는 글은 본문이 그대로 카드가 된다 -->
-          <p
-            v-if="post.kind === 'text'"
-            class="community__excerpt"
-          >
-            {{ post.excerpt }}
-          </p>
-
-          <img
-            v-else-if="post.thumbnailUrl"
-            class="community__thumb"
-            :src="post.thumbnailUrl"
-            :alt="post.excerpt ?? ''"
-          >
-
-          <!-- 여러 장 표시 -->
-          <span
-            v-if="post.kind === 'album'"
-            class="community__album"
-          >
-            <AppIcon
-              name="album"
-              :size="17"
+    <div class="community__body">
+      <SectionBoundary
+        :status="resource.status.value"
+        :error-message="resource.errorMessage.value"
+        empty-title="아직 올라온 글이 없어요"
+        empty-link-label="첫 글 쓰러 가기"
+        min-height="24rem"
+        @retry="resource.reload"
+      >
+        <template #skeleton>
+          <div class="community__grid">
+            <SkeletonBox
+              v-for="index in 4"
+              :key="index"
+              ratio="1 / 1"
+              :radius="'var(--sz-radius-post)'"
             />
-          </span>
-
-          <!-- 클립 재생 표시 -->
-          <span
-            v-if="post.kind === 'clip'"
-            class="community__play"
-          >
-            <AppIcon
-              name="play"
-              :size="17"
-            />
-          </span>
-
-          <div class="community__author">
-            <AvatarCircle
-              size="1.25rem"
-              :color="post.authorAvatarColor"
-              :image-url="post.authorAvatarUrl"
-            />
-            <span class="community__nickname">{{ post.authorNickname }}</span>
-            <span class="community__count">{{ formatCount(post.reactionCount) }}</span>
           </div>
-        </a>
-      </div>
-    </SectionBoundary>
+        </template>
+
+        <div class="community__grid">
+          <a
+            v-for="post in resource.data.value ?? []"
+            :key="post.id"
+            class="community__card"
+            :class="`community__card--${post.kind}`"
+            :style="{ background: post.placeholderColor }"
+            href="#"
+          >
+            <!-- 사진이 없는 글은 본문이 그대로 카드가 된다 -->
+            <p
+              v-if="post.kind === 'text'"
+              class="community__excerpt"
+            >
+              {{ post.excerpt }}
+            </p>
+
+            <img
+              v-else-if="post.thumbnailUrl"
+              class="community__thumb"
+              :src="post.thumbnailUrl"
+              :alt="post.excerpt ?? ''"
+            >
+
+            <!-- 여러 장 표시 -->
+            <span
+              v-if="post.kind === 'album'"
+              class="community__album"
+            >
+              <AppIcon
+                name="album"
+                :size="17"
+              />
+            </span>
+
+            <!-- 클립 재생 표시 -->
+            <span
+              v-if="post.kind === 'clip'"
+              class="community__play"
+            >
+              <AppIcon
+                name="play"
+                :size="17"
+              />
+            </span>
+
+            <div class="community__author">
+              <AvatarCircle
+                size="1.25rem"
+                :color="post.authorAvatarColor"
+                :image-url="post.authorAvatarUrl"
+              />
+              <span class="community__nickname">{{ post.authorNickname }}</span>
+              <span class="community__count">{{ formatCount(post.reactionCount) }}</span>
+            </div>
+          </a>
+        </div>
+      </SectionBoundary>
+    </div>
   </section>
 </template>
 
diff --git a/frontend/src/components/home/NewsSection.vue b/frontend/src/components/home/NewsSection.vue
index 33a4d11..f64e148 100644
--- a/frontend/src/components/home/NewsSection.vue
+++ b/frontend/src/components/home/NewsSection.vue
@@ -37,46 +37,47 @@ const selectedTab = ref('notice')
       :label="`${title} 분류`"
     />
 
-    <SectionBoundary
-      class="news__body"
-      :status="resource.status.value"
-      :error-message="resource.errorMessage.value"
-      empty-title="등록된 소식이 없어요"
-      empty-icon="document"
-      min-height="18rem"
-      @retry="resource.reload"
-    >
-      <template #skeleton>
-        <div
-          v-for="index in 6"
-          :key="index"
-          class="news__row"
-        >
-          <SkeletonBox
-            width="60%"
-            height="0.875rem"
-          />
-          <SkeletonBox
-            width="2.25rem"
-            height="0.8125rem"
-          />
-        </div>
-      </template>
-
-      <a
-        v-for="item in resource.data.value ?? []"
-        :key="item.id"
-        class="news__row"
-        href="#"
+    <div class="news__body">
+      <SectionBoundary
+        :status="resource.status.value"
+        :error-message="resource.errorMessage.value"
+        empty-title="등록된 소식이 없어요"
+        empty-icon="document"
+        min-height="18rem"
+        @retry="resource.reload"
       >
-        <span class="news__title">{{ item.title }}</span>
-        <span
-          v-if="item.isNew"
-          class="news__new"
-        >신규</span>
-        <span class="news__date">{{ item.date }}</span>
-      </a>
-    </SectionBoundary>
+        <template #skeleton>
+          <div
+            v-for="index in 6"
+            :key="index"
+            class="news__row"
+          >
+            <SkeletonBox
+              width="60%"
+              height="0.875rem"
+            />
+            <SkeletonBox
+              width="2.25rem"
+              height="0.8125rem"
+            />
+          </div>
+        </template>
+
+        <a
+          v-for="item in resource.data.value ?? []"
+          :key="item.id"
+          class="news__row"
+          href="#"
+        >
+          <span class="news__title">{{ item.title }}</span>
+          <span
+            v-if="item.isNew"
+            class="news__new"
+          >신규</span>
+          <span class="news__date">{{ item.date }}</span>
+        </a>
+      </SectionBoundary>
+    </div>
   </section>
 </template>