Skip to content

Commit

Permalink
Merge pull request #68 from epigram5-9/feat/FE-18
Browse files Browse the repository at this point in the history
FE-18 ✨ 최근 댓글 더보기 기능 구현
  • Loading branch information
newjinlee authored Jul 24, 2024
2 parents f013f30 + 504a044 commit 427e2a9
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 8 deletions.
4 changes: 2 additions & 2 deletions src/apis/getRecentComments.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import type { GetRecentCommentsResponseType } from '@/schema/recentcomment';
import httpClient from './index';

const getRecentComments = async (): Promise<GetRecentCommentsResponseType> => {
const getRecentComments = async (limit: number): Promise<GetRecentCommentsResponseType> => {
const response = await httpClient.get('/comments', {
params: {
limit: 3,
limit,
},
});
return response.data;
Expand Down
23 changes: 20 additions & 3 deletions src/components/main/RecentComment.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
import React from 'react';
import React, { useState } from 'react';
import useGetRecentComments from '@/hooks/useGetRecentComments';
import CommentCard from '@/components/Card/CommentCard';
import type { CommentType } from '@/schema/recentcomment';
import LoadMoreButton from './LoadMoreButton';

function RecentComments() {
const { data, error, isLoading } = useGetRecentComments();
const [comments, setComments] = useState<CommentType[]>([]);
const [limit, setLimit] = useState(3);
const { data, error, isLoading } = useGetRecentComments(limit);

React.useEffect(() => {
if (data?.list) {
setComments(data.list);
}
}, [data]);

const handleLoadMore = () => {
setLimit((prevLimit) => prevLimit + 4);
};

if (isLoading) return <p>로딩 중...</p>;
if (error) return <p>{error.message}</p>;

return (
<div>
<h1>최신 댓글</h1>
{data?.list.map((comment) => <CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />)}
{comments.map((comment) => (
<CommentCard key={comment.id} writer={comment.writer} content={comment.content} createdAt={new Date(comment.createdAt)} status='view' />
))}
{data?.totalCount && comments.length < data.totalCount && <LoadMoreButton onClick={handleLoadMore} />}
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useGetRecentComments.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { useQuery } from '@tanstack/react-query';
import getRecentComments from '@/apis/getRecentComments';
import { GetRecentCommentsResponseType } from '@/schema/recentcomment';

const useGetRecentComments = () =>
const useGetRecentComments = (limit: number) =>
useQuery<GetRecentCommentsResponseType, Error>({
queryKey: ['recentComments', 3],
queryFn: getRecentComments,
queryKey: ['recentComments', limit],
queryFn: () => getRecentComments(limit),
});

export default useGetRecentComments;

0 comments on commit 427e2a9

Please sign in to comment.