✨ Feat: /api/feeds/all api 연결

kw-bookmedicine · Mar 16, 2024 · 5d94e0b · 5d94e0b
2 parents 9ae2bdd + b8c4232
commit 5d94e0b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 22 deletions.
diff --git a/src/components/FeedCard.js b/src/components/FeedCard.js
@@ -3,16 +3,14 @@ import React from 'react';
 //STYLES
 import '../styles/FeedCard.css';
 
-const FeedCard = ({ title, author, nickname, imgUrl }) => {
+const FeedCard = ({ title, author, nickname, imgUrl, comment }) => {
 	return (
 		<>
 			<div className="FeedCardContainer">
 				<div className="feed_up_wrapper">
 					<div className="feed_review_wrapper">
 						<div className="feed_review_text_wrapper">
-							<p className="feed_review_text">
-								죽는 날까지 하늘을 우러러 한 점 부끄럼이 없기를
-							</p>
+							<p className="feed_review_text">{comment}</p>
 						</div>
 
 						<div className="review_book_wrapper">
@@ -29,7 +27,7 @@ const FeedCard = ({ title, author, nickname, imgUrl }) => {
 				<div className="feed_bottom_wrapper">
 					<div className="user_wrapper">
 						<div className="user_profile"></div>
-						<div className="user_nicknameText">별헤는밤</div>
+						<div className="user_nicknameText">{nickname}</div>
 					</div>
 				</div>
 			</div>

diff --git a/src/pages/Feed.jsx b/src/pages/Feed.jsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
+// SERVICES
+import api from '../services/api';
+
 // COMPONENTS
 import Header from '../components/Header';
 import FeedGrid from '../components/FeedGrid';
@@ -11,11 +14,11 @@ import '../styles/Feed.css';
 
 const Feed = () => {
 	const [dogArr, setDogArr] = useState([]);
+	const [feedArr, setFeedArr] = useState([]);
 	const [page, setPage] = useState(0);
 	const [isLoading, setIsLoading] = useState(false);
 
 	// Intersection Observer 설정
-
 	const handleObserver = (entries) => {
 		// console.log(entries);
 		const target = entries[0];
@@ -39,21 +42,44 @@ const Feed = () => {
 	// page 변경 감지에 따른 API호출
 	useEffect(() => {
 		fetchData();
-		// console.log(page);
+		console.log(page);
 	}, [page]);
 
+	let feedFetchData = { page: { page }, size: 9 };
+
 	// 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,
+			// api.get('/api/feeds/all', feedFetchData).then((res) => {
+			// 	// console.log(res.data.content);
+			// 	setFeedArr(res.data.content);
+			// 	setFeedArr((prevData) => [...prevData, ...res.data.content]);
+			// });
+			const API_URL =
+				'https://port-0-backend-book-pharmacy-umnqdut2blqqhv7sd.sel5.cloudtype.app/api/feeds/all?page=0&size=9';
+
+			const response = await axios.get(API_URL, feedFetchData);
+			// .then((res) => {
+			// 	// console.log(res.data.content);
+			// 	setFeedArr(res.data.content);
+			// });
+
+			// const newData = response.data.map((dogImg) => ({
+			// 	id: dogImg.id,
+			// 	dogUrl: dogImg.url,
+			// }));
+
+			const newData = response.data.content.map((item) => ({
+				title: item.bookTitle,
+				author: item.bookAuthor,
+				comment: item.comment,
+				image: item.imgUrl,
+				nickName: item.clientNickname,
 			}));
-			// 불러온 데이터를 배열에 추가
-			setDogArr((prevData) => [...prevData, ...newData]);
+
+			// //불러온 데이터를 배열에 추가
+			setFeedArr((prevData) => [...prevData, ...newData]);
 		} catch (error) {
 			console.log(error);
 		}
@@ -68,18 +94,20 @@ const Feed = () => {
 					<div className="feed_title">추천 피드</div>
 				</div>
 				<div className="feed_content_wrapper">
-					{dogArr.map((item, idx) => {
+					{feedArr.map((item, idx) => {
 						return (
 							<FeedCard
 								key={`${idx}-item.id`}
-								title={item.id}
-								author={item.id}
-								imgUrl={item.dogUrl}
+								title={item.title}
+								author={item.author}
+								comment={item.comment}
+								imgUrl={item.image}
+								nickname={item.nickName}
 							/>
 						);
 					})}
-					<div id="observer" style={{ height: '10px' }}></div>
 				</div>
+				<div id="observer" style={{ height: '10px' }}></div>
 			</div>
 		</>
 	);

diff --git a/src/styles/Feed.css b/src/styles/Feed.css
@@ -10,7 +10,7 @@
 	margin: 0 auto;
 	max-width: 1440px;
 	padding: 24px;
-	height: 100vh;
+	/* height: 108vh; */
 	display: flex;
 	flex-direction: column;
 }
@@ -34,7 +34,7 @@
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	width: 1440px;
-	height: 500px;
+	/* height: 860px; */
 	-ms-flex-align: center;
 	align-items: center;
 	margin-left: auto;

diff --git a/src/styles/FeedCard.css b/src/styles/FeedCard.css
@@ -31,7 +31,6 @@
 
 .feed_review_wrapper {
 	display: flex;
-	flex-direction: column;
 	align-items: center;
 }