diff --git a/src/app/(route)/completes/[completeId]/page.tsx b/src/app/(route)/completes/[completeId]/page.tsx index 8dae6c92..979be568 100644 --- a/src/app/(route)/completes/[completeId]/page.tsx +++ b/src/app/(route)/completes/[completeId]/page.tsx @@ -1,3 +1,4 @@ +import { PageContainer } from '@/components/common/PageContainer'; import { CompleteComments } from '@/components/Complete/Comments'; import { CompleteHeader } from '@/components/Complete/CompleteHeader'; import { CompletePost } from '@/components/Complete/Post'; @@ -12,15 +13,15 @@ export default async function CompletePage({ params: Promise; }) { const { completeId } = await params; + return ( -
+ -
-
+
); } diff --git a/src/components/Complete/Comments/index.tsx b/src/components/Complete/Comments/index.tsx index 05a919a3..d7e6a9be 100644 --- a/src/components/Complete/Comments/index.tsx +++ b/src/components/Complete/Comments/index.tsx @@ -1,10 +1,12 @@ 'use client'; import { useRouter } from 'next/navigation'; + import { FollowsSkeleton } from '@/components/Skeletons/FollowsSkeleton'; import { useGetCompleteDetailQuery } from '@/hooks/apis/Complete/useGetCompleteDetailQuery'; -import { CommentList } from './CommentList'; + import { CommentInput } from './CommentInput'; +import { CommentList } from './CommentList'; interface CompleteCommentsProps { completeId: number; @@ -23,7 +25,7 @@ export const CompleteComments = (props: CompleteCommentsProps) => { } return ( -
+
{isLoading ? ( ) : complete ? ( diff --git a/src/components/Complete/Post/index.tsx b/src/components/Complete/Post/index.tsx index 2cd9a6bc..1e173ddb 100644 --- a/src/components/Complete/Post/index.tsx +++ b/src/components/Complete/Post/index.tsx @@ -1,12 +1,13 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { FollowsSkeleton } from '@/components/Skeletons/FollowsSkeleton'; -import { useGetCompleteDetailQuery } from '@/hooks/apis/Complete/useGetCompleteDetailQuery'; + import { PostContent } from '@/components/Follows/Post/PostContent'; import { PostImage } from '@/components/Follows/Post/PostImage'; import { PostLike } from '@/components/Follows/Post/PostLike'; import { PostProfile } from '@/components/Follows/Post/PostProfile'; +import { FollowsSkeleton } from '@/components/Skeletons/FollowsSkeleton'; +import { useGetCompleteDetailQuery } from '@/hooks/apis/Complete/useGetCompleteDetailQuery'; import { PostGoalAndTodo } from './PostGoalAndTodo'; interface CompletePostProps { @@ -32,7 +33,7 @@ export const CompletePost = (props: CompletePostProps) => { {isLoading ? ( ) : complete ? ( -
+
{ - const heartClass = cn( - 'absolute right-8 top-8 size-28 p-4', - follower.likeStatus ? 'text-error' : 'text-custom-gray-200', - ); + const router = useRouter(); + const pic = follower.completePic; + + const handleClickImage = () => { + router.push(`/completes/${follower.completeId}`); + }; return ( -
-
- -
-
- {follower.name} +
+ {pic ? ( + 팔로워 인증 사진 + ) : ( +
+ )} +
+ {follower.username} {formatDateToRelativeTime(follower.createdAt)} diff --git a/src/components/Dashboard/Follower/index.tsx b/src/components/Dashboard/Follower/index.tsx index 73a68ae9..7db1fa33 100644 --- a/src/components/Dashboard/Follower/index.tsx +++ b/src/components/Dashboard/Follower/index.tsx @@ -1,15 +1,26 @@ +'use client'; + import { Card } from '@/components/common/Card'; +import { Spinner } from '@/components/common/Spinner'; import { DashboardItemContainer } from '@/components/Dashboard/DashboardItemContainer'; -import { FOLLOWER_DATA } from '@/mocks/followerData'; +import { FollowStorySkeleton } from '@/components/Skeletons/FollowStorySkeleton'; +import { useGetFollowPosts } from '@/hooks/apis/Follows/useGetFollowPostsQuery'; +import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'; import { FollowerStory } from './FollowerStory'; export const Follwer = () => { + const { follows, isLoading, fetchNextPage, isFetchingNextPage } = + useGetFollowPosts(); + const { observerRef } = useInfiniteScroll({ fetchNextPage, isLoading }); + return ( - {FOLLOWER_DATA.length === 0 ? ( + {isLoading ? ( + + ) : follows.length === 0 ? (

찍찍이들 팔로우 하고 인증 보기 @@ -17,9 +28,15 @@ export const Follwer = () => { ) : (

- {FOLLOWER_DATA.map((follower) => ( - + {follows.map((follower) => ( + ))} + {isFetchingNextPage && ( + + + + )} +
)}
diff --git a/src/components/Follows/FollowsContainer.tsx b/src/components/Follows/FollowsContainer.tsx index ac6cc87a..b71c50d1 100644 --- a/src/components/Follows/FollowsContainer.tsx +++ b/src/components/Follows/FollowsContainer.tsx @@ -1,6 +1,7 @@ 'use client'; import { useRouter } from 'next/navigation'; + import { useGetFollowPosts } from '@/hooks/apis/Follows/useGetFollowPostsQuery'; import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'; import { FollowsSkeleton } from '../Skeletons/FollowsSkeleton'; @@ -23,12 +24,11 @@ export const FollowsContainer = () => { } return ( - -
-

+ +
+

팔로워

-
{isLoading ? ( ) : follows.length > 0 ? ( diff --git a/src/components/Follows/Post/PostImage.tsx b/src/components/Follows/Post/PostImage.tsx index 23a253c9..edeface7 100644 --- a/src/components/Follows/Post/PostImage.tsx +++ b/src/components/Follows/Post/PostImage.tsx @@ -17,7 +17,7 @@ export function PostImage(props: PostImageProps) { if (!completePic) { return (
); @@ -27,7 +27,6 @@ export function PostImage(props: PostImageProps) { post-image +
{ const router = useRouter(); + const path = usePathname(); const { goals } = useGoalsQuery(); @@ -58,10 +59,17 @@ export const Sidebar = () => { return (
- {isOpen ? : } +
{ + router.push('/dashboard'); + close(); + }} + > + {isOpen ? : } +
{isOpen ? ( ) : ( @@ -70,6 +78,14 @@ export const Sidebar = () => { onClick={open} /> )} + {path === '/follows' && !isOpen && ( + { + router.push('/search'); + }} + /> + )}
{isOpen && (
diff --git a/src/components/Skeletons/FollowStorySkeleton/index.tsx b/src/components/Skeletons/FollowStorySkeleton/index.tsx new file mode 100644 index 00000000..f980acbb --- /dev/null +++ b/src/components/Skeletons/FollowStorySkeleton/index.tsx @@ -0,0 +1,17 @@ +import { Skeleton } from '@/components/common/Skeleton'; + +export const FollowStorySkeleton = () => { + return ( +
+ {Array.from({ length: 3 }).map((_, index) => ( +
+ +
+ + +
+
+ ))} +
+ ); +}; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index 7661ce1b..6a822c77 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -1,7 +1,8 @@ 'use client'; -import { FaBarsStaggered, FaBell, FaMagnifyingGlass } from 'react-icons/fa6'; import { useRouter } from 'next/navigation'; +import { FaBars, FaBell, FaMagnifyingGlass } from 'react-icons/fa6'; + import { useSidebarStore } from '@/store/useSidebarStore'; interface HeaderProps { @@ -20,7 +21,7 @@ export const Header = ({ title = '', search = false }: HeaderProps) => { return (
- GET( - `${API_ENDPOINTS.TODOS.GET_GOALS}?lastGoalId=${pageParam}&size=3`, + `${API_ENDPOINTS.TODOS.GET_GOALS}?lastGoalId=${pageParam}&size=5`, ), getNextPageParam: (lastPage) => { const nextCursor = lastPage.data.nextCursor; diff --git a/src/mocks/followerData.ts b/src/mocks/followerData.ts deleted file mode 100644 index a3b38a22..00000000 --- a/src/mocks/followerData.ts +++ /dev/null @@ -1,102 +0,0 @@ -export interface FollowerTypes { - id: number; - name: string; - img: string; - comment: number; - like: number; - likeStatus: boolean; - createdAt: string; -} - -export const FOLLOWER_DATA = [ - { - id: 1, - name: '김준호', - img: '', - comment: 5, - like: 12, - likeStatus: true, - createdAt: '2024-12-23T10:00:00', - }, - { - id: 2, - name: '이지은', - img: '', - comment: 3, - like: 8, - likeStatus: false, - createdAt: '2024-12-23T10:00:00', - }, - { - id: 3, - name: '박지혜', - img: '', - comment: 7, - like: 15, - likeStatus: true, - createdAt: '2024-12-23T10:00:00', - }, - { - id: 4, - name: '정준호', - img: '', - comment: 2, - like: 4, - likeStatus: false, - createdAt: '2024-12-22T10:00:00', - }, - { - id: 5, - name: '김민지', - img: '', - comment: 10, - like: 20, - likeStatus: true, - createdAt: '2024-12-21T10:00:00', - }, - { - id: 6, - name: '최지훈', - img: '', - comment: 6, - like: 9, - likeStatus: false, - createdAt: '2024-12-20T10:00:00', - }, - { - id: 7, - name: '오수연', - img: '', - comment: 4, - like: 11, - likeStatus: true, - createdAt: '2024-10-14T10:00:00', - }, - { - id: 8, - name: '김소영', - img: '', - comment: 8, - like: 14, - likeStatus: true, - createdAt: '2024-08-13T10:00:00', - }, - { - id: 9, - name: '정하영', - img: '', - comment: 1, - like: 3, - likeStatus: false, - createdAt: '2023-12-12T10:00:00', - }, - { - id: 10, - name: '이성민', - img: '', - comment: 9, - like: 17, - likeStatus: true, - createdAt: '2023-12-11T10:00:00', - }, -];