✨ Feat: 무한스크롤 구현

kw-bookmedicine · Mar 13, 2024 · 9ae2bdd · 9ae2bdd
2 parents 715e304 + 2396485
commit 9ae2bdd
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 15 deletions.
diff --git a/src/components/FeedCard.js b/src/components/FeedCard.js
@@ -3,7 +3,7 @@ import React from 'react';
 //STYLES
 import '../styles/FeedCard.css';
 
-const FeedCard = ({ book_name, book_author, user_nickname }) => {
+const FeedCard = ({ title, author, nickname, imgUrl }) => {
 	return (
 		<>
 			<div className="FeedCardContainer">
@@ -16,10 +16,12 @@ const FeedCard = ({ book_name, book_author, user_nickname }) => {
 						</div>
 
 						<div className="review_book_wrapper">
-							<div className="feed_book_img"></div>
+							<div className="feed_book_img_wrapper">
+								<img className="feed_book_img" src={imgUrl} alt="" />
+							</div>
 							<div className="feed_book_text_wrapper">
-								<div className="feed_book_title">서시</div>
-								<div className="feed_book_author">윤동주</div>
+								<div className="feed_book_title">{title}</div>
+								<div className="feed_book_author">{author}</div>
 							</div>
 						</div>
 					</div>

diff --git a/src/pages/Feed.jsx b/src/pages/Feed.jsx
@@ -1,13 +1,65 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 // COMPONENTS
 import Header from '../components/Header';
 import FeedGrid from '../components/FeedGrid';
+import FeedCard from '../components/FeedCard';
 
 // STYLES
 import '../styles/Feed.css';
 
 const Feed = () => {
+	const [dogArr, setDogArr] = useState([]);
+	const [page, setPage] = useState(0);
+	const [isLoading, setIsLoading] = useState(false);
+
+	// Intersection Observer 설정
+
+	const handleObserver = (entries) => {
+		// console.log(entries);
+		const target = entries[0];
+		if (target.isIntersecting && !isLoading) {
+			setPage((prevPage) => prevPage + 1);
+		}
+	};
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(handleObserver, {
+			threshold: 0,
+		});
+		// 최하단 요소를 관찰 대상으로 지정함
+		const observerTarget = document.getElementById('observer');
+		// 관찰 시작
+		if (observerTarget) {
+			observer.observe(observerTarget);
+		}
+	}, []);
+
+	// page 변경 감지에 따른 API호출
+	useEffect(() => {
+		fetchData();
+		// console.log(page);
+	}, [page]);
+
+	// API를 호출하는 부분
+	const fetchData = async () => {
+		setIsLoading(true);
+		try {
+			const API_URL = `https://api.thedogapi.com/v1/images/search?size=small&format=json&has_breeds=true&order=ASC&page=${page}&limit=10`;
+			const response = await axios.get(API_URL);
+			const newData = response.data.map((dogImg) => ({
+				id: dogImg.id,
+				dogUrl: dogImg.url,
+			}));
+			// 불러온 데이터를 배열에 추가
+			setDogArr((prevData) => [...prevData, ...newData]);
+		} catch (error) {
+			console.log(error);
+		}
+		setIsLoading(false);
+	};
+
 	return (
 		<>
 			<Header />
@@ -16,7 +68,17 @@ const Feed = () => {
 					<div className="feed_title">추천 피드</div>
 				</div>
 				<div className="feed_content_wrapper">
-					<FeedGrid />
+					{dogArr.map((item, idx) => {
+						return (
+							<FeedCard
+								key={`${idx}-item.id`}
+								title={item.id}
+								author={item.id}
+								imgUrl={item.dogUrl}
+							/>
+						);
+					})}
+					<div id="observer" style={{ height: '10px' }}></div>
 				</div>
 			</div>
 		</>

diff --git a/src/styles/Feed.css b/src/styles/Feed.css
@@ -10,28 +10,30 @@
 	margin: 0 auto;
 	max-width: 1440px;
 	padding: 24px;
-	height: 1000vh;
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
 }
 
 .feed_title_wrapper {
-	width: auto;
+	width: 100%;
 	height: 50px;
 	padding: 10px;
 }
 
 .feed_title {
 	color: #000;
-	font-family: 'Pretendard-Regular';
+	font-family: var(--basic-font);
 	font-size: 24px;
 	font-style: normal;
 	font-weight: 700;
 	line-height: normal;
 }
 
 .feed_content_wrapper {
-	max-width: 1440px;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	width: 1440px;
 	height: 500px;
 	-ms-flex-align: center;
 	align-items: center;

diff --git a/src/styles/FeedCard.css b/src/styles/FeedCard.css
@@ -9,7 +9,7 @@
 .FeedCardContainer {
 	position: static;
 	box-sizing: border-box;
-	width: 310px;
+	width: 340px;
 	height: 280px;
 	/* border-radius: 10px;
 	background: linear-gradient(111deg, #cafadf 0%, #d5e0ff 100%);
@@ -20,11 +20,12 @@
 
 	/* Drop Shadow */
 	box-shadow: 2px 2px 4px 0px rgba(119, 119, 119, 0.25);
+	margin-top: 20px;
 }
 
 .feed_up_wrapper {
 	display: flex;
-	width: 310px;
+	width: 340px;
 	height: 240px;
 }
 
@@ -55,7 +56,7 @@
 .review_book_wrapper {
 	position: absolute;
 	display: flex;
-	width: 310px;
+	width: 340px;
 	height: 115px;
 	background: rgba(255, 255, 255, 0.35);
 	margin-top: 160px;
@@ -64,12 +65,19 @@
 	z-index: 1;
 }
 
+.feed_book_img_wrapper {
+	width: 74px;
+	height: 106px;
+	background: #6f6f6f;
+	border-radius: 5px;
+}
+
 .feed_book_img {
 	width: 74px;
 	height: 106px;
 	flex-shrink: 0;
 	border-radius: 5px;
-	background: #6f6f6f;
+	object-fit: fill;
 }
 
 .feed_book_text_wrapper {
@@ -166,7 +174,7 @@
 	position: absolute;
 	z-index: 2;
 	display: flex;
-	width: 311px;
+	width: 341px;
 	height: 40px;
 	padding: 4px 0;
 	align-items: center;