ScPagination

ScPagination 컴포넌트는 목록과 같은 페이징이 필요한 UI에서 이전/다음 10단위 이동, 첫/마지막 페이지 바로가기, 페이지 번호, 직접 이동 입력 기능을 제공합니다.

---

✅ 기본 사용법

1

2

3

4

5

6

7

8

9

10

...

1235

rowsPerPage

currentPage

totalItems

{ "rowsPerPage": 10, "currentPage": 1, "totalItems": 12345 }

<sc-pagination v-model="page" @change="search" />

<div class="w-[250px] inline-grid grid-cols-2 gap-2 mt-[50px]">
  <div>rowsPerPage</div>
  <sc-text-field v-model.number="page.rowsPerPage" />
  <div>currentPage</div>
  <sc-text-field v-model.number="page.currentPage" />
  <div>totalItems</div>
  <sc-text-field v-model="page.totalItems" type="number" />
</div>

<div>
  {{JSON.stringify(page, null, 2)}}
</div>

<script setup>
  import { usePage } from 'slsoft-components';

  const { page, rowsPerPageItems, pageParams } = usePage();

  // 페이지 샘플 초기값
  page.value = {
    rowsPerPage: 10,
    currentPage: 1,
    totalItems: 12345,
  };

  const search = async (pageNumber = 1) => {
    console.log('페이지 검색:', pageNumber);
    page.value.currentPage = pageNumber; // 현재 페이지 업데이트

    // 여기에 페이지 변경에 따른 검색 로직을 추가하세요.
    // 예: API 호출, 데이터 필터링 등
    const params = {
      ...pageParams.value,
      searchType: 'TITLE',
      searchKeyword: '검색어',
    };

    console.log('검색 파라미터:', params);
    // const response = await fetchData(params); // API 호출 예시
    // console.log('검색 결과:', response);
    // response를 통해 페이지 데이터 업데이트 로직 추가

    // 페이지 데이터 업데이트
    page.value.totalItems = 12345; // response.totalItems 예시로 총 항목 수를 업데이트
  };


</script>

🛠️ Props

이름	타입	기본값	설명
modelValue	Object	{ rowsPerPage: 10, currentPage: 1, totalItems: 0 }	페이지네이션 설정(v-model)

modelValue 필드

필드명	타입	설명
rowsPerPage	Number	한 페이지당 항목 개수
currentPage	Number	현재 페이지 번호
totalItems	Number	전체 항목 수

---

📤 이벤트 (Emits)

이벤트	파라미터	설명
update:modelValue	newModelValue	v-model 업데이트 시 발생
change	page (Number)	페이지 변경 완료 시 발생

---

🔳 슬롯 (Slots)

이 컴포넌트는 슬롯을 제공하지 않습니다.

---

🎨 스타일 클래스

클래스명	설명
sc-pagination	컴포넌트 최상위 래퍼
sc-pagination-navi	이전/다음 버튼 래퍼
sc-pagination-icon-disable	비활성화된 버튼 상태
sc-pagination-number	페이지 번호 버튼
sc-pagination-selected	현재 페이지 강조
sc-pagination-number-dots	생략 구분자(…)
sc-pagination-goto	직접 이동 입력 영역
sc-counter / sc-counter-medium / sc-counter-input	입력 필드 스타일
sc-button-border / sc-button-default	GO 버튼 스타일

---