Merge pull request #359 from ttaerrim/355-pagination-improve

[Modify] 페이지네이션 없는 페이지에 접근 시 게시물 없음 처리

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

@@ -0,0 +1,21 @@
+import { style } from '@vanilla-extract/css';
+
+export const background = style({
+  width: '80%',
+  height: '80%',
+  opacity: '0.1',
+});
+
+export const container = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  maxWidth: '80rem',
+  position: 'relative',
+});
+
+export const wrapper = style({
+  position: 'absolute',
+  width: '80%',
+});

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

@@ -0,0 +1,19 @@
+import BackgroundImage from '@/assets/images/main.png';
+
+import * as styles from './index.css';
+
+type MessageWrapperProps = {
+  children: React.ReactNode;
+};
+export function MessageWrapper({ children }: MessageWrapperProps) {
+  return (
+    <div className={styles.container}>
+      <img
+        src={BackgroundImage}
+        alt="morak background"
+        className={styles.background}
+      />
+      <div className={styles.wrapper}>{children}</div>
+    </div>
+  );
+}

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

@@ -24,6 +24,11 @@ globalStyle(`${container} button:hover`, {
   backgroundColor: grayscale50,
 });
 
+globalStyle(`${container} button[disabled]`, {
+  cursor: 'not-allowed',
+  backgroundColor: 'transparent',
+});
+
 export const current = style({});
 export const page = style([
   sansRegular16,

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

@@ -7,6 +7,7 @@ import * as styles from './index.css';
 const { grayscale200 } = vars.color;
 type PaginationProps = {
   currentPage: number;
+  pageCount?: number;
   onClickPrev: () => void;
   onClickNext: () => void;
   onClickItem: React.MouseEventHandler<HTMLButtonElement>;
@@ -15,17 +16,22 @@ type PaginationProps = {
 
 export function Pagination({
   currentPage,
+  pageCount,
   onClickPrev,
   onClickNext,
   onClickItem,
   className,
 }: PaginationProps) {
   const [start, end] = get10UnitRange(currentPage);
-  const array = createRangeArray(start, end);
+  const lastPageNum = pageCount ? Math.min(end, pageCount) : end;
+  const array = createRangeArray(start, lastPageNum);
   const arrow = <Arrow width={16} height={16} fill={grayscale200} />;
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === lastPageNum;
+
   return (
     <div className={`${styles.container} ${className}`}>
-      <button type="button" onClick={onClickPrev}>
+      <button type="button" onClick={onClickPrev} disabled={isFirstPage}>
         {arrow}
       </button>
       {array.map((page) => (
@@ -45,6 +51,7 @@ export function Pagination({
         type="button"
         className={styles.rotateArrow}
         onClick={onClickNext}
+        disabled={isLastPage}
       >
         {arrow}
       </button>

app/frontend/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './Layout';
 export * from './Loading';
 export * from './Loading/LoadingIndicator';
 export * from './Map';
+export * from './MessageWrapper';
 export * from './Modal';
 export * from './Modal/InputModal';
 export * from './Modal/MapModal';

app/frontend/src/hooks/usePagination.ts

@@ -16,9 +16,7 @@ export const usePagination = () => {
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search);
     const page = searchParams.get('page');
-    if (page) {
-      setCurrentPage(Number(page));
-    }
+    setCurrentPage(page ? Number(page) : 1);
   }, [location]);
 
   const onClickNext = () => {

app/frontend/src/pages/Mogaco/EmptyPage.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@/styles';
+import { sansBold16, sansRegular16 } from '@/styles/font.css';
+
+const { morakGreen } = vars.color;
+
+export const back = style([
+  sansBold16,
+  {
+    textDecorationLine: 'underline',
+    marginTop: '0.6rem',
+    color: morakGreen,
+    cursor: 'pointer',
+  },
+]);
+
+export const text = style([
+  sansRegular16,
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+  },
+]);

app/frontend/src/pages/Mogaco/EmptyPage.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+
+import { MessageWrapper } from '@/components';
+
+import * as styles from './EmptyPage.css';
+
+export function EmptyPage() {
+  const navigate = useNavigate();
+  const onClickBack = () => navigate(-1);
+
+  return (
+    <MessageWrapper>
+      <p className={styles.text}>
+        게시물이 없습니다.
+        <button type="button" className={styles.back} onClick={onClickBack}>
+          이전 페이지로 돌아가기
+        </button>
+      </p>
+    </MessageWrapper>
+  );
+}

app/frontend/src/pages/Mogaco/MogacoList.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Loading, MogacoItem } from '@/components';
 import { queryKeys } from '@/queries';
 
+import { EmptyPage } from './EmptyPage';
 import * as styles from './MogacoList.css';
 
 type MogacoListProp = {
@@ -24,8 +25,7 @@ export function MogacoList({ currentPage }: MogacoListProp) {
 
   return (
     <div className={styles.container}>
-      {mogacoList &&
-        mogacoList.length > 0 &&
+      {mogacoList && mogacoList.length > 0 ? (
         mogacoList.map(
           ({
             id,
@@ -51,7 +51,10 @@ export function MogacoList({ currentPage }: MogacoListProp) {
               group={group}
             />
           ),
-        )}
+        )
+      ) : (
+        <EmptyPage />
+      )}
     </div>
   );
 }

app/frontend/src/pages/Mogaco/index.tsx

@@ -1,24 +1,39 @@
+import { useQuery } from '@tanstack/react-query';
+
 import { Pagination } from '@/components';
 import { usePagination } from '@/hooks';
+import { queryKeys } from '@/queries';
 
 import * as styles from './index.css';
 import { MogacoList } from './MogacoList';
 import { MogacoListHeader } from './MogacoListHeader';
 
+const PAGE_UNIT = 10;
 export function MogacoPage() {
   const { currentPage, onClickItem, onClickNext, onClickPrev } =
     usePagination();
+
+  const { data: mogacoList } = useQuery(
+    queryKeys.mogaco.list({ page: currentPage.toString() }),
+  );
+  const { data: allMogacoList } = useQuery(queryKeys.mogaco.list());
+
+  const maxPage = Math.floor((allMogacoList?.length || 0) / PAGE_UNIT + 1);
+
   return (
     <div className={styles.container}>
       <MogacoListHeader />
       <MogacoList currentPage={currentPage} />
-      <Pagination
-        className={styles.pagination}
-        currentPage={currentPage}
-        onClickItem={onClickItem}
-        onClickNext={onClickNext}
-        onClickPrev={onClickPrev}
-      />
+      {mogacoList?.length !== 0 && (
+        <Pagination
+          className={styles.pagination}
+          currentPage={currentPage}
+          pageCount={maxPage}
+          onClickItem={onClickItem}
+          onClickNext={onClickNext}
+          onClickPrev={onClickPrev}
+        />
+      )}
     </div>
   );
 }