perf: 활동 피드 무제한 렌더링 방지(상한 + 페이지네이션)
활발한 프로젝트/업무에서 활동이 한 번에 전부 내려와 렌더링되던 문제 보완. - 업무 상세 활동 탭: 최신 100건으로 조회 상한 추가(기존 무제한) - 프로젝트 활동 피드: 200건 통째 조회 → 오프셋 페이지네이션 전환 - 컨트롤러 page/size 쿼리 지원, 서비스 findAndCount - 프론트 스토어 누적 + hasMore/loadMore, 활동 페이지 "더 보기" 버튼 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -242,6 +242,21 @@ const ActIcon = defineComponent({
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 더 보기 — 서버 페이지네이션(누적). 필터와 무관하게 다음 페이지를 불러온다 -->
|
||||
<div
|
||||
v-if="!loading && activityStore.hasMore"
|
||||
class="more-row"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="more-btn"
|
||||
:disabled="activityStore.loadingMore"
|
||||
@click="activityStore.loadMore()"
|
||||
>
|
||||
{{ activityStore.loadingMore ? '불러오는 중…' : '더 보기' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AppShell>
|
||||
</template>
|
||||
@@ -373,6 +388,30 @@ const ActIcon = defineComponent({
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* 더 보기 */
|
||||
.more-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.875rem;
|
||||
}
|
||||
.more-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
font-size: 0.813rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.more-btn:hover:not(:disabled) {
|
||||
background: #f4f5f7;
|
||||
}
|
||||
.more-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 로딩/빈 상태 */
|
||||
.feed-state {
|
||||
background: var(--panel);
|
||||
|
||||
Reference in New Issue
Block a user