Feat/listpage

src/pages/List/ListItems.jsx

@@ -1,5 +1,6 @@
 import MessagesIcon from '../../assets/Icon/Messages.svg';
 import ProfileImg from '../../assets/images/profile.png';
+import { Avatar } from '../../components/Avatar';
 import styles from './ListItems.module.css';
 
 import { useNavigate } from 'react-router-dom';
@@ -14,7 +15,10 @@ function ListItem({ item }) {
 
   return (
     <div className={styles.listItem} onClick={handleClick}>
-      <img src={ProfileImg} alt="프로필 이미지" className={styles.profile} />
+      <Avatar className={styles.profile}>
+        <Avatar.Image src={item.imageSource} alt={`${item.name} 프로필`} />
+        <Avatar.Fallback />
+      </Avatar>
 
       <div className={styles.name}>{item.name}</div>
       <div className={styles.question}>

src/pages/List/ListItems.module.css

@@ -8,6 +8,7 @@
   background-color: #ffffff;
   box-sizing: border-box;
   height: 187px;
+  cursor: pointer;
 }
 
 .profile {

src/pages/List/ListPage.jsx

@@ -5,15 +5,12 @@ import styles from './ListPage.module.css';
 import { useNavigate } from 'react-router-dom';
 import BoxButton from '../../components/Button/BoxButton';
 import { useEffect, useMemo, useState } from 'react';
-import { instance } from '../../services/instance';
 import ListItem from './ListItems';
-import MoreMenu from '../../components/Editmenu/Moremenu';
-import Reaction from '../../components/Reaction/Reaction';
+import { useSubjects } from './hooks/subjectApi';
 
 function List() {
   const navigate = useNavigate();
 
-  const [list, setList] = useState([]);
   const [page, setPage] = useState(1);
 
   const [limit, setLimit] = useState(getLimitWidth());
@@ -30,6 +27,12 @@ function List() {
     return 6;
   }
 
+  const { list, totalCount } = useSubjects({
+    page,
+    limit,
+    sort: sortType === 'name' ? 'name' : 'time',
+  });
+
   // 창 크기 변경시 limit 재설정
   useEffect(() => {
     const handleResize = () => {
@@ -40,26 +43,6 @@ function List() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // 아이템 불러오기 함수
-  useEffect(() => {
-    const fetchAllItems = async () => {
-      try {
-        // 전체 아이템 요청 100개 한도
-        // 추후 변동 가능
-        const response = await instance(`subjects/?limit=100`, {
-          method: 'GET',
-        });
-
-        const data = await response.json();
-        setList(data.results);
-      } catch (e) {
-        console.error(e);
-      }
-    };
-
-    fetchAllItems();
-  }, []);
-
   const totalPage = Math.ceil(list.length / limit);
 
   // page 계산
@@ -103,7 +86,7 @@ function List() {
         />
         <div className={styles.listButton}>
           <BoxButton isArrow variant="beige" onClick={goToAnswer}>
-            질문하러 가기
+            답변하러 가기
           </BoxButton>
         </div>
       </header>
@@ -123,8 +106,8 @@ function List() {
         ))}
       </div>
       <Pagination
-        totalCount={list.length}
-        page={safePage}
+        totalCount={totalCount}
+        page={page}
         setPage={setPage}
         limit={limit}
       />
@@ -133,5 +116,3 @@ function List() {
 }
 
 export default List;
-
-// 데이터 클릭시 개별피드 데이터로 이동

src/pages/List/ListPage.module.css

@@ -77,11 +77,11 @@ body {
     margin-left: 24px;
     font-size: 24px;
     margin-top: 15px;
-    justify-content: center;
   }
 
   .titleArea {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     width: 100%;

src/pages/List/Pagination.jsx

@@ -1,29 +1,45 @@
 import ArrowLeft from '../../assets/Icon/Pagination-left.svg';
 import ArrowRight from '../../assets/Icon/Pagination-right.svg';
+import { getPagination } from './hooks/pagination';
 import styles from './Pagination.module.css';
 
 // 한 그룹당 페이지 수
-const SIZE_PER_PAGE_GROUP = 5;
-
 function Pagination({ totalCount, page, setPage, limit }) {
-  const totalPage = Math.ceil(totalCount / limit);
-  if (totalPage <= 1) return null;
+  const { totalPage, startPage, endPage, isFirstPage, isLastPage } =
+    getPagination({
+      totalCount,
+      page,
+      limit,
+    });
+
+  if (totalPage === 0) return null;
+
+  // 이전 페이지 이동
+  const handlePrev = () => {
+    if (isFirstPage) return;
+    setPage(prev => prev - 1);
+  };
+
+  // 다음 페이지 이동
+  const handleNext = () => {
+    if (isLastPage) return;
+    setPage(prev => prev + 1);
+  };
 
-  // 현재 페이지 그룹 계산
-  const groupedPages = Math.floor((page - 1) / SIZE_PER_PAGE_GROUP);
-  const startPage = groupedPages * SIZE_PER_PAGE_GROUP + 1;
-  const endPage = Math.min(startPage + SIZE_PER_PAGE_GROUP - 1, totalPage);
+  // 특정 페이지 이동
+  const handleMove = targetPage => {
+    if (targetPage === page) return;
+    setPage(targetPage);
+  };
 
-  // 페이지 이동 함수
-  const handlePrev = () => setPage(prev => Math.max(prev - 1, 1));
-  const handleNext = () => setPage(prev => Math.min(prev + 1, totalPage));
+  // 2
 
   return (
     <div className={styles.pagination}>
       <button
         className={styles.pageButtonLeft}
         onClick={handlePrev}
-        disabled={page === 1}
+        disabled={isFirstPage}
       >
         <img src={ArrowLeft} alt="이전 페이지" />
       </button>
@@ -36,7 +52,7 @@ function Pagination({ totalCount, page, setPage, limit }) {
         <button
           key={p}
           className={`${styles.pageButton} ${p === page ? styles.active : ''}`}
-          onClick={() => setPage(p)}
+          onClick={() => handleMove(p)}
         >
           {p}
         </button>
@@ -45,7 +61,7 @@ function Pagination({ totalCount, page, setPage, limit }) {
       <button
         className={styles.pageButtonRight}
         onClick={handleNext}
-        disabled={page === totalPage}
+        disabled={isLastPage}
       >
         <img src={ArrowRight} alt="다음 페이지" />
       </button>

src/pages/List/Pagination.module.css

@@ -4,8 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16.5px;
-  margin: 20px 0;
+  gap: 7.5px;
   font-family: 'Actor', sans-serif;
   margin-top: 46px;
 }
@@ -40,9 +39,3 @@
   border: none;
   color: var(--gray-40);
 }
-
-@media (max-width: 1199px) {
-}
-
-@media (max-width: 767px) {
-}

src/pages/List/hooks/pagination.js

@@ -0,0 +1,35 @@
+// 페이지 번호 갯수
+const SIZE_PER_PAGE_GROUP = 5;
+
+export function getPagination({ totalCount, page, limit }) {
+  // 기본값 반환
+  if (!totalCount || !limit) {
+    return {
+      totalPage: 0,
+      startPage: 0,
+      endPage: -1,
+      isFirstPage: true,
+      isLastPage: true,
+    };
+  }
+
+  // 전체 페이지 수 계산
+  const totalPage = Math.ceil(totalCount / limit);
+
+  const groupPages = Math.floor((page - 1) / SIZE_PER_PAGE_GROUP);
+
+  // 시작 페이지
+  const startPage = groupPages * SIZE_PER_PAGE_GROUP + 1;
+
+  // 끝 페이지
+  const endPage = Math.min(startPage + SIZE_PER_PAGE_GROUP - 1, totalPage);
+
+  // 계산된 페이지 전보 반환
+  return {
+    totalPage,
+    startPage,
+    endPage,
+    isFirstPage: page === 1,
+    isLastPage: page === totalPage,
+  };
+}

src/pages/List/hooks/subjectApi.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { getSubjects } from '../../../services/subjectsApi';
+
+export const useSubjects = ({ page, limit }) => {
+  const [list, setList] = useState([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchSubjects = async () => {
+      try {
+        setLoading(true);
+
+        const data = await getSubjects({
+          limit,
+          offset: (page - 1) * limit,
+        });
+
+        if (mounted) {
+          setList(data.results);
+          setTotalCount(data.count);
+        }
+      } catch (e) {
+        if (mounted) setError(e);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    };
+
+    fetchSubjects();
+
+    return () => {
+      mounted = false;
+    };
+  }, [page, limit]);
+
+  return { list, totalCount, loading, error };
+};