Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] refactor: 리뷰 목록 페이지에서 isLastPage가 true일 때, IntersectionObserver 해제 #737

Merged
merged 6 commits into from
Sep 26, 2024
Merged

[FE] refactor: 리뷰 목록 페이지에서 isLastPage가 true일 때, IntersectionObserver 해제 #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
86a4d7c
refactor: 가로 스크롤을 숨기기 위해 AnswerListModalContent 추가
soosoo22 Sep 26, 2024
917ce6a
refactor: ReviewList 인터페이스에 isLastPage 추가
soosoo22 Sep 26, 2024
a80fdfc
refactor: isLastPage가 true일 때, IntersectionObserver 해제
soosoo22 Sep 26, 2024
1febfdb
refactor: 리뷰 요청 개수 size를 10으로 수정
soosoo22 Sep 26, 2024
ec1c673
refactor: 목 데이터 응답에 isLastPage 값 추가
soosoo22 Sep 26, 2024
8c77d47
chore: stylelint 적용
soosoo22 Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/hooks/review/useGetReviewList/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const useGetReviewList = () => {
queryFn: ({ pageParam }) =>
getReviewListApi({
lastReviewId: pageParam === 0 ? null : pageParam, // 첫 api 요청 시, null 값 보내기
size: pageParam === 0 ? 10 : 5, // 첫 api 요청 시, 10개의 리뷰를 불러오고 그 이후로는 5개씩 불러온다.
size: 10,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

나중에 상수화 합시당~

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

size 변경 이유가 뭘까요?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

중간에 정책이 바꼈는데 아직 공지가 안 됐던 상황이라고 들었어요

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵넵 에프이 말이 맞아요🙂 중간에 바뀌었는데 공지가 안 되었어요.. 다들 바쁘다 보니까😭

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

추가로 받아오는 리뷰 개수가 10개 미만이어도 오류는 없는건가요?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일단 목 데이터 개수 조절해서 해봤는데 오류는 없네요..

}),

initialPageParam: 0,
Expand Down
1 change: 1 addition & 0 deletions frontend/src/mocks/handlers/review.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ const getReviewList = (lastReviewId: number | null, size: number) => {
revieweeName: REVIEW_LIST.revieweeName,
projectName: REVIEW_LIST.projectName,
lastReviewId: !isLastPage && lastReviewId !== null ? lastReviewId + size : null,
isLastPage: isLastPage,
reviews: paginatedReviews,
});
});
Expand Down
1 change: 1 addition & 0 deletions frontend/src/mocks/mockData/reviewListMockData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export const REVIEW_LIST: ReviewList = {
revieweeName: '쑤쑤',
projectName: 'review-me',
lastReviewId: 12,
isLastPage: false,
reviews: [
{
reviewId: 5,
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/pages/ReviewListPage/components/PageContents/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ const PageContents = () => {
paramKey: 'reviewRequestCode',
});

const lastReviewElementRef = useInfiniteScroll({ fetchNextPage, hasNextPage, isLoading });
const lastReviewElementRef = useInfiniteScroll({
fetchNextPage,
hasNextPage,
isLoading,
isLastPage: data.pages[0].isLastPage,
});

const handleReviewClick = (id: number) => {
navigate(`/${ROUTE.detailedReview}/${reviewRequestCode}/${id}`);
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ export interface InfiniteScrollProps {
fetchNextPage: () => void;
hasNextPage: boolean;
isLoading: boolean;
isLastPage: boolean;
}

const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading }: InfiniteScrollProps) => {
const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading, isLastPage }: InfiniteScrollProps) => {
const observer = useRef<IntersectionObserver | null>(null);

const lastElementRef = useCallback(
(node: HTMLElement | null) => {
if (isLoading) return;
if (isLoading || isLastPage) return;
if (observer.current) observer.current.disconnect();

observer.current = new IntersectionObserver((entries) => {
Expand All @@ -22,7 +23,7 @@ const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading }: InfiniteSc

if (node) observer.current.observe(node);
},
[isLoading, fetchNextPage, hasNextPage],
[isLoading, fetchNextPage, hasNextPage, isLastPage],
);

return lastElementRef;
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/pages/ReviewWritingCompletePage/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,21 @@ export const Container = styled.div`
left: 50%;
transform: translate(-50%, -50%);

width: 100%;

display: flex;
flex-direction: column;
gap: 3.5rem;
align-items: center;
justify-content: center;

width: 100%;
`;

export const ReviewComplete = styled.div`
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
align-items: center;
justify-content: center;

width: 100%;

img {
Expand Down Expand Up @@ -56,8 +57,8 @@ export const HomeIcon = styled.img`
`;

export const HomeText = styled.p`
margin-left: 0.5rem;
height: 1.6rem;
margin-left: 0.5rem;

${media.xSmall} {
height: 1.2rem;
Expand Down
70 changes: 36 additions & 34 deletions frontend/src/pages/ReviewWritingPage/modals/components/AnswerListRecheckModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,41 +30,43 @@ const AnswerListRecheckModal = ({ questionSectionList, answerMap, closeModal }:

return (
<ContentModal handleClose={closeModal}>
<S.AnswerListContainer>
{questionSectionList.map((section) => (
<ReviewWritingCardLayout cardSection={section} key={section.sectionId}>
{section.questions.map((question) => (
<QnABoxLayout question={question} isNeedGuideLine={false} key={question.questionId}>
{question.questionType === 'CHECKBOX' && (
<>
{question.optionGroup?.options.map((option, index) => (
<CheckboxItem
key={`${question.questionId}_${index}`}
id={`${question.questionId}_${index}`}
name={`${question.questionId}_${index}`}
isChecked={isSelectedChoice(question.questionId, option.optionId)}
isDisabled={true}
label={option.content}
$isReadonly={true}
/>
))}
</>
)}
<S.AnswerListModalContent>
<S.AnswerListContainer>
{questionSectionList.map((section) => (
<ReviewWritingCardLayout cardSection={section} key={section.sectionId}>
{section.questions.map((question) => (
<QnABoxLayout question={question} isNeedGuideLine={false} key={question.questionId}>
{question.questionType === 'CHECKBOX' && (
<>
{question.optionGroup?.options.map((option, index) => (
<CheckboxItem
key={`${question.questionId}_${index}`}
id={`${question.questionId}_${index}`}
name={`${question.questionId}_${index}`}
isChecked={isSelectedChoice(question.questionId, option.optionId)}
isDisabled={true}
label={option.content}
$isReadonly={true}
/>
))}
</>
)}

{question.questionType === 'TEXT' && (
<>
{findTextAnswer(question.questionId) ? (
<MultilineTextViewer text={findTextAnswer(question.questionId) as string} />
) : (
<S.EmptyTextAnswer>작성한 답변이 없어요</S.EmptyTextAnswer>
)}
</>
)}
</QnABoxLayout>
))}
</ReviewWritingCardLayout>
))}
</S.AnswerListContainer>
{question.questionType === 'TEXT' && (
<>
{findTextAnswer(question.questionId) ? (
<MultilineTextViewer text={findTextAnswer(question.questionId) as string} />
) : (
<S.EmptyTextAnswer>작성한 답변이 없어요</S.EmptyTextAnswer>
)}
</>
)}
</QnABoxLayout>
))}
</ReviewWritingCardLayout>
))}
</S.AnswerListContainer>
</S.AnswerListModalContent>
</ContentModal>
);
};
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/pages/ReviewWritingPage/modals/components/AnswerListRecheckModal/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ import styled from '@emotion/styled';

import media from '@/utils/media';

export const AnswerListModalContent = styled.div`
overflow-x: hidden;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stylint 적용하면 overflow-x가 width 위에 있어야해요

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

적용했습니다. 고마워요!!

width: 100%;
`;

export const AnswerListContainer = styled.div`
position: relative;

Expand Down
1 change: 1 addition & 0 deletions frontend/src/types/review.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export interface ReviewList {
revieweeName: string;
projectName: string;
lastReviewId: number | null;
isLastPage: boolean;
reviews: ReviewInfo[];
}

Expand Down