refactor: BookList 렌더링 방식 변경

JHWorld0214 · Aug 27, 2024 · 3644cc7 · 3644cc7
1 parent a979e0a
commit 3644cc7
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 62 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/components/BookList.tsx b/components/BookList.tsx
@@ -1,64 +1,27 @@
-import { useState } from 'react';
 import Book, { BookProps } from '@/components/Book';
-import { IconNext, IconPrev } from '@/public/icons';
 
-interface BookListProps{
-  title: string;
+interface BookListProps {
+  visible: number;
+  currPage: number;
   contents: BookProps[];
 }
 
-const BookList = ({ title, contents }: BookListProps) => {
-  const [visibleIdx, setVisibileIdx] = useState(0);
-
-  const booksPerPage = 4;
-
-  const visibleBooks = contents.slice(visibleIdx, visibleIdx + booksPerPage);
-
-  const handleNext = ()=>{
-    if(visibleIdx + booksPerPage < contents.length) {
-      setVisibileIdx(visibleIdx + booksPerPage);
-    }
-  };
-
-  const handlePrev = () => {
-    if(visibleIdx - booksPerPage >= 0){
-      setVisibileIdx(visibleIdx - booksPerPage);
-    }
-  }
+const BookList = ({ visible, currPage, contents }: BookListProps) => {
+  const visibleBooks = contents.slice(currPage * visible, (currPage + 1) * visible);
 
   return (
-    <>
-      <h2 className="text-[20px] font-bold text-gray-400 mb-6">{title}</h2>
-      <div className="flex flex-row gap-5 items-center px-2">
-        {visibleIdx > 0 && (
-          <IconPrev
-            alt="prev icon"
-            className="cursor-pointer"
-            onClick={handlePrev} />
-        )}
-
-        <div className="flex flex-row gap-10 items-start">
-        {visibleBooks.map((book, index) => (
-          <Book
-            key={index}
-            coverImg={book.coverImg}
-            title={book.title}
-            writer={book.writer}
-            date={book.date}
-          />
-        ))}
-        </div>
-
-        {visibleIdx + booksPerPage < contents.length &&
-          <IconNext
-          alt="next icon"
-          className="cursor-pointer"
-          onClick={handleNext}/>
-        }
-
-      </div>
-    </>
+    <div className="grid grid-cols-4 gap-10 mx-8">
+      {visibleBooks.map((book, index) => (
+        <Book
+          key={index}
+          coverImg={book.coverImg}
+          title={book.title}
+          writer={book.writer}
+          date={book.date}
+        />
+      ))}
+    </div>
   );
 };
 
-export default BookList;
+export default BookList;
diff --git a/pages/home.tsx b/pages/home.tsx
@@ -1,10 +1,11 @@
 import SideNavigationBar from '@/components/NavigationBar';
-import { IconArrowDown, IconNextTriangle, IconSearch } from '@/public/icons';
+import { IconArrowDown, IconNext, IconNextTriangle, IconPrev, IconSearch } from '@/public/icons';
 import Logo from '@/public/images/small-logo.png';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import BookList from '@/components/BookList';
 import SearchBar from '@/components/SearchBar';
+import { useState } from 'react';
 
 // 더미 데이터
 const writingBooks = [
@@ -50,6 +51,18 @@ const writingBooks = [
     writer: 'Jake Knapp',
     date: '2024-08-25',
   },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-25',
+  },
+  {
+    coverImg: '/path/to/cover3.png',
+    title: 'Sprint: How to solve big problems...',
+    writer: 'Jake Knapp',
+    date: '2024-08-25',
+  },
 ];
 
 const doneBooks = [
@@ -100,6 +113,34 @@ const doneBooks = [
 
 function Home() {
   const router = useRouter();
+  const [ingCurrPage, setIngCurrPage] = useState(0);
+  const [doneCurrPage, setDoneCurrPage] = useState(0);
+
+  const visible = 4;
+
+  const handleNext = (category: string)=>{
+    if(category === 'ing'){
+      if((ingCurrPage+1)*visible < writingBooks.length){
+        setIngCurrPage(ingCurrPage+1);
+      }
+    }else if(category === 'done'){
+      if((doneCurrPage + 1)*visible < doneBooks.length){
+        setDoneCurrPage(doneCurrPage+1);
+      }
+    }
+  };
+
+  const handlePrev = (category: string) => {
+    if (category === 'ing') {
+      if (ingCurrPage > 0) {
+        setIngCurrPage(ingCurrPage - 1);
+      }
+    } else if (category === 'done') {
+      if (doneCurrPage > 0) {
+        setDoneCurrPage(doneCurrPage - 1);
+      }
+    }
+  };
 
   return (
     <div className="w-full h-[100vh] flex flex-col items-center justify-center pl-[280px]">
@@ -129,13 +170,47 @@ function Home() {
         </div>
 
         {/*만들던 이야기 리스트*/}
-        <div className="w-4/5 p-4 pb-12">
-          <BookList title="만들던 이야기" contents={writingBooks} />
+        <div className="w-5/6 pb-12">
+          <h2 className="text-[20px] font-bold text-gray-400 mb-6">만들던 이야기</h2>
+          <div className="flex flex-row items-center">
+            {ingCurrPage > 0 && (
+              <IconPrev
+                alt="prev icon"
+                className="cursor-pointer"
+                onClick={() => handlePrev('ing')}
+              />
+            )}
+            <BookList visible={visible} currPage={ingCurrPage} contents={writingBooks} />
+            {(ingCurrPage + 1) * visible < writingBooks.length && (
+              <IconNext
+                alt="next icon"
+                className="cursor-pointer"
+                onClick={() => handleNext('ing')}
+              />
+            )}
+          </div>
         </div>
 
-        {/*완성된 이야기 리스트*/}
-        <div className="w-4/5 p-4 pb-12">
-          <BookList title="완성한 이야기" contents={doneBooks} />
+        {/*완성한 이야기 리스트*/}
+        <div className="w-5/6 pb-12">
+          <h2 className="text-[20px] font-bold text-gray-400 mb-6">완성한 이야기</h2>
+          <div className="flex flex-row items-center">
+            {doneCurrPage > 0 && (
+              <IconPrev
+                alt="prev icon"
+                className="cursor-pointer"
+                onClick={() => handlePrev('done')}
+              />
+            )}
+            <BookList visible={visible} currPage={doneCurrPage} contents={doneBooks} />
+            {(doneCurrPage + 1) * visible < doneBooks.length && (
+              <IconNext
+                alt="next icon"
+                className="cursor-pointer"
+                onClick={() => handleNext('done')}
+              />
+            )}
+          </div>
         </div>
 
       </div>