fix: 소식·커뮤니티 섹션의 본문 래퍼를 SectionBoundary 바깥으로 분리
SectionBoundary 에 직접 붙이던 __body 클래스를 감싸는 div 로 옮겼다. 경계 컴포넌트가 자기 레이아웃을 갖지 않게 되어, 상태(로딩·실패·비어 있음)가 바뀌어도 섹션 본문의 자리가 흔들리지 않는다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0128kgT8ycCATfJVFULQMa9b
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user