Merge pull request #293 from ttaerrim/76-pagination

[Feat] Pagination 컴포넌트 추가

app/frontend/src/components/Pagination/index.css.ts

@@ -0,0 +1,49 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansRegular16 } from '@/styles/font.css';
+
+const { grayscale200, grayscale500, grayscale50 } = vars.color;
+
+export const container = style({
+  display: 'flex',
+  gap: '1.2rem',
+  justifyContent: 'center',
+  width: '100%',
+});
+
+globalStyle(`${container} button`, {
+  padding: '0.4rem',
+  borderRadius: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+globalStyle(`${container} button:hover`, {
+  backgroundColor: grayscale50,
+});
+
+export const current = style({});
+export const page = style([
+  sansRegular16,
+  {
+    color: grayscale200,
+
+    selectors: {
+      [`${current}&`]: {
+        color: grayscale500,
+      },
+    },
+
+    '@media': {
+      'screen and (max-width: 768px)': {
+        fontSize: '1.2rem',
+      },
+    },
+  },
+]);
+
+export const rotateArrow = style({
+  transform: 'rotate(180deg)',
+});

app/frontend/src/components/Pagination/index.tsx

@@ -0,0 +1,51 @@
+import { ReactComponent as Arrow } from '@/assets/icons/arrow_left.svg';
+import { vars } from '@/styles';
+import { createRangeArray, get10UnitRange } from '@/utils';
+
+import * as styles from './index.css';
+
+const { grayscale200 } = vars.color;
+type PaginationProps = {
+  currentPage: number;
+  onClickPrev: () => void;
+  onClickNext: () => void;
+  onClickItem: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+export function Pagination({
+  currentPage,
+  onClickPrev,
+  onClickNext,
+  onClickItem,
+}: PaginationProps) {
+  const [start, end] = get10UnitRange(currentPage);
+  const array = createRangeArray(start, end);
+  const arrow = <Arrow width={16} height={16} fill={grayscale200} />;
+  return (
+    <div className={styles.container}>
+      <button type="button" onClick={onClickPrev}>
+        {arrow}
+      </button>
+      {array.map((page) => (
+        <button
+          onClick={onClickItem}
+          className={`${styles.page} ${
+            currentPage === page ? styles.current : ''
+          }`}
+          type="button"
+          key={page}
+          value={page}
+        >
+          {page}
+        </button>
+      ))}
+      <button
+        type="button"
+        className={styles.rotateArrow}
+        onClick={onClickNext}
+      >
+        {arrow}
+      </button>
+    </div>
+  );
+}

app/frontend/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './Modal/InputModal';
 export * from './Modal/MapModal';
 export * from './Modal/ModalContainer';
 export * from './MogacoItem';
+export * from './Pagination';
 export * from './Popover';
 export * from './Sidebar';
 export * from './Sidebar/Contents/Chatting';

app/frontend/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useDebounce';
 export * from './useModal';
+export * from './usePagination';
 export * from './useRouter';
 export * from './useSetUserInfo';

app/frontend/src/hooks/usePagination.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+export const usePagination = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const onClickNext = () => {
+    setCurrentPage(currentPage + 1);
+  };
+
+  const onClickPrev = () => {
+    setCurrentPage(currentPage - 1);
+  };
+
+  const onClickItem = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setCurrentPage(Number(e.currentTarget.value));
+  };
+
+  return { currentPage, onClickItem, onClickNext, onClickPrev };
+};

app/frontend/src/utils/createRangeArray.ts

@@ -0,0 +1,2 @@
+export const createRangeArray = (start: number, end: number) =>
+  Array.from({ length: end - start + 1 }, (_, k) => k + start);

app/frontend/src/utils/get10UnitRange.ts

@@ -0,0 +1,5 @@
+export const get10UnitRange = (current: number) => {
+  const start = Math.floor((current - 1) / 10) * 10 + 1;
+  const end = start + 9;
+  return [start, end];
+};

app/frontend/src/utils/index.ts

@@ -1,2 +1,4 @@
 export * from './cookies';
+export * from './createRangeArray';
+export * from './get10UnitRange';
 export * from './mocking';