-
- 답변 확인 표시
-
-
-
질문·2주 전
-
{question.content}
-
- {question.answer !== null && (
-
-
![유저 이미지]()
-
-
-
{question.answer.content}
+
+
+
+
+
+
{questions.length > 0 ? `${questions.length}개의 질문이 있습니다` : '아직 질문이 없습니다.'}
+
+ {questions.length > 0 ? (
+
+ {questions.map((question) => (
+ -
+
+
+ 답변 확인 표시
+
+
+
질문·2주 전
+
{question.content}
+
+ {question.answer !== null && (
+
+
![유저 이미지]()
+
+
+
{question.answer.content}
- )}
-
-
-
- ))}
-
- ) : (
-
- )}
-
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
);
};
From f311990002056402d028cff29c4c61b1d0bde1ba Mon Sep 17 00:00:00 2001
From: CJewon <112820744+CJewon@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:51:35 +0900
Subject: [PATCH 04/18] =?UTF-8?q?Feat/=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC?=
=?UTF-8?q?=EB=A1=A4=20=EA=B5=AC=ED=98=84=20(#37)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* :art: refactor : intersection observer API 사용시, fetchQuestions 함수에 보내야하는 파라미터들이 추가될것 같아 fetchQuestion함수를 내부로 refactor 하는 작업을 함
* :sparkles: feat : 데이터 로딩을 확인하기 위해 데이터 불러오기 버튼을 임시 생성
* :sparkles: feat : 무한 스크롤 기능 구현
---
src/pages/Feed/index.jsx | 95 ++++++++++++++++++++++++++++------------
1 file changed, 66 insertions(+), 29 deletions(-)
diff --git a/src/pages/Feed/index.jsx b/src/pages/Feed/index.jsx
index 707cf03..034b98c 100644
--- a/src/pages/Feed/index.jsx
+++ b/src/pages/Feed/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getQuestionBySubjectId } from 'api/questions';
@@ -6,45 +6,81 @@ import messagesIcon from 'assets/images/icons/Messages.svg';
import qusetionBoxImg from 'assets/images/img_QusetionBox.svg';
import CountingFavorite from 'components/Feed/favorite';
-const fetchQuestions = async (subjectId, setQuestions, setGetLoading, setGetError) => {
- try {
- setGetLoading(true);
- setGetError('');
- const params = { limit: 10, offset: 0 };
- const response = await getQuestionBySubjectId(subjectId, params);
- if (response.results) {
- setQuestions(response.results);
- } else {
- throw new Error('질문 데이터를 가져오는 데 실패했습니다.');
- }
- } catch (err) {
- setGetError(err.message);
- } finally {
- setGetLoading(false);
- }
-};
-
const Feed = () => {
const { id: subjectId } = useParams();
const [questions, setQuestions] = useState([]);
- const [getLoading, setGetLoading] = useState(true);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+ const [offset, setOffset] = useState(0);
+ const [hasMore, setHasMore] = useState(false);
+ const observerRef = useRef(null);
+
+ useEffect(() => {
+ const fetchQuestions = async () => {
+ try {
+ setLoading(true);
+ setError('');
+ const params = { limit: 3, offset };
+ const response = await getQuestionBySubjectId(subjectId, params);
+ if (response.results) {
+ setQuestions((prev) => [...prev, ...response.results]);
+ setHasMore(response.results.length > 0);
+ } else {
+ throw new Error('질문 데이터를 가져오는 데 실패했습니다.');
+ }
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchQuestions();
+ }, [subjectId, offset]);
- const [getError, setGetError] = useState('');
+ const loadMoreQuestions = useCallback(
+ (entries) => {
+ const [entry] = entries;
+ if (entry.isIntersecting && hasMore && !loading) {
+ setOffset((prev) => prev + 3);
+ }
+ },
+ [hasMore, loading],
+ );
useEffect(() => {
- fetchQuestions(subjectId, setQuestions, setGetLoading, setGetError);
- }, [subjectId]);
+ const observer = new IntersectionObserver(loadMoreQuestions, {
+ root: null,
+ rootMargin: '0px',
+ threshold: 1.0,
+ });
+
+ const targetCurrent = observerRef.current;
+
+ if (targetCurrent) {
+ observer.observe(targetCurrent);
+ }
+
+ return () => {
+ if (targetCurrent) {
+ observer.unobserve(targetCurrent);
+ }
+ };
+ }, [loadMoreQuestions]);
- if (getLoading) return
로딩 중...
;
- if (getError) return
오류: {getError}
;
+ if (loading && questions.length === 0) return
로딩 중...
;
+ if (error) return
오류: {error}
;
return (
-
+
-
-
{questions.length > 0 ? `${questions.length}개의 질문이 있습니다` : '아직 질문이 없습니다.'}
+ {questions.length > 0 ? (
+
{questions.length}개의 질문이 있습니다
+ ) : (
+
아직 질문이 없습니다.
+ )}
{questions.length > 0 ? (
@@ -70,7 +106,7 @@ const Feed = () => {