Skip to content

Commit

Permalink
Revert "[#453] [모임] 모임 목록 페이지 개선 (#475)"
Browse files Browse the repository at this point in the history 
This reverts commit c6b1ab1.
  • Loading branch information
@gxxrxn
gxxrxn authored Aug 20, 2024
1 parent dc1204d commit aaa2547
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 178 deletions.
206 changes: 78 additions & 128 deletions src/app/group/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,31 @@
'use client';

import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

import SSRSafeSuspense from '@/components/SSRSafeSuspense';
import TopHeader from '@/v1/base/TopHeader';
import SearchGroupInput from '@/v1/bookGroup/SearchGroup';
import SimpleBookGroupCard, {
SimpleBookGroupCardSkeleton,
} from '@/v1/bookGroup/SimpleBookGroupCard';
import DetailBookGroupCard, {
DetailBookGroupCardSkeleton,
} from '@/v1/bookGroup/DetailBookGroupCard';
import SearchGroup from '@/v1/bookGroup/SearchGroup';
import SimpleBookGroupCard from '@/v1/bookGroup/SimpleBookGroupCard';
import DetailBookGroupCard from '@/v1/bookGroup/DetailBookGroupCard';

import useEntireGroupsQuery from '@/queries/group/useEntireGroupsQuery';
import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
import { isAuthed } from '@/utils/helpers';
import useMounted from '@/hooks/useMounted';
import Loading from '@/v1/base/Loading';
import { Skeleton, VStack } from '@chakra-ui/react';
import { useEffect } from 'react';
import { useInView } from 'react-intersection-observer';

const GroupPage = () => {
const handleSearchInputClick = () => {
alert('아직 준비 중인 기능이에요.');
};

return (
<>
<TopHeader text="Group" />
<div className="flex w-full flex-col gap-[2rem]">
<SearchGroupInput onClick={handleSearchInputClick} />
<SSRSafeSuspense fallback={<PageSkeleton />}>
{isAuthed() && <MyBookGroupList />}
<EntireBookGroupList />
</SSRSafeSuspense>
</div>
{/* <Link href={'/group/create'}>
<FloatingButton position="bottom-right" />
</Link> */}
</>
);
};

export default GroupPage;

const MyBookGroupList = () => {
const {
data: { bookGroups },
} = useMyGroupsQuery({ enabled: isAuthed() });
const { data: myId } = useMyProfileId({ enabled: isAuthed() });

return (
<div className="flex gap-[1rem] overflow-scroll">
{bookGroups.map(({ title, book, bookGroupId, owner }) => (
<SimpleBookGroupCard
key={bookGroupId}
title={title}
imageSource={book.imageUrl}
isOwner={owner.id === myId}
bookGroupId={bookGroupId}
/>
))}
</div>
);
};

const PageSkeleton = () => {
const isMounted = useMounted();

if (!isMounted) {
return <Loading fullpage />;
}

return (
<>
<MyBookGroupListSkeleton />
<div className="flex flex-col gap-[1rem]">
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
</div>
</>
);
};

const MyBookGroupListSkeleton = () => (
<div className="flex min-h-[16.3rem] animate-pulse gap-[1rem] overflow-hidden">
<SimpleBookGroupCardSkeleton />
<SimpleBookGroupCardSkeleton />
<SimpleBookGroupCardSkeleton />
<SimpleBookGroupCardSkeleton />
</div>
);

const EntireBookGroupList = () => {
const { ref, inView } = useInView();

const {
isSuccess,
data,
isSuccess: entireGroupsIsSuccess,
data: entireGroupsData,
isLoading,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useEntireGroupsQuery();

const { isSuccess: myGroupsIsSuccess, data: myGroupsData } =
useMyGroupsQuery();

useEffect(() => {
if (inView && hasNextPage) {
fetchNextPage();
Expand All @@ -114,53 +34,83 @@ const EntireBookGroupList = () => {

if (isLoading)
return (
<div className="flex flex-col gap-[1rem]">
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
<DetailBookGroupCardSkeleton />
</div>
<VStack gap="0.5rem" align="stretch" w="100%">
<Skeleton height="9rem" />
<Skeleton height="28rem" />
<Skeleton height="28rem" />
<Skeleton height="28rem" />
</VStack>
);

return (
<>
<div className="flex flex-col gap-[1rem]">
{isSuccess &&
data.pages.map(({ bookGroups }) =>
bookGroups.map(
({
bookGroupId,
title,
introduce,
book,
startDate,
endDate,
owner,
memberCount,
commentCount,
isPublic,
}) => (
<DetailBookGroupCard
<TopHeader text="Group" />
<div className="mt-[2rem] flex w-full flex-col gap-[1.5rem]">
<SearchGroup
onClick={() => {
alert('추후 업데이트 될 예정입니다.');
}}
/>
<div className="mt-[0.7rem] flex gap-[1rem] overflow-scroll">
{myGroupsIsSuccess &&
myGroupsData.bookGroups.map(group => {
const { title, book, bookGroupId } = group;
return (
//API isOwner 값이 존재하지 않아 비교하는 로직 추가 필요
<SimpleBookGroupCard
key={bookGroupId}
title={title}
description={introduce}
bookImageSrc={book.imageUrl}
date={{ start: startDate, end: endDate }}
owner={{
name: owner.nickname,
profileImageSrc: owner.profileUrl,
}}
memberCount={memberCount}
commentCount={commentCount}
isPublic={isPublic}
imageSource={book.imageUrl}
isOwner={false}
bookGroupId={bookGroupId}
/>
)
)
)}
);
})}
</div>
<div className="flex flex-col gap-[1rem]">
{entireGroupsIsSuccess &&
entireGroupsData.pages.map(groups => {
return groups.bookGroups.map(group => {
const {
title,
introduce,
book,
startDate,
endDate,
owner,
currentMemberCount,
commentCount,
isPublic,
bookGroupId,
} = group;
return (
<DetailBookGroupCard
key={bookGroupId}
title={title}
description={introduce}
bookImageSrc={book.imageUrl}
date={{ start: startDate, end: endDate }}
owner={{
name: owner.nickname,
profileImageSrc: owner.profileUrl,
}}
memberCount={currentMemberCount}
commentCount={commentCount}
isPublic={isPublic}
bookGroupId={bookGroupId}
/>
);
});
})}
</div>
</div>
{isFetchingNextPage && <DetailBookGroupCardSkeleton />}
<div ref={ref} />
{isFetchingNextPage && <Skeleton w="100%" height="28rem" />}
{/* <Link href={'/group/create'}>
<FloatingButton position="bottom-right" />
</Link> */}
</>
);
};

export default GroupPage;
8 changes: 3 additions & 5 deletions src/app/profile/me/group/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
'use client';

import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
import { isAuthed } from '@/utils/helpers';

import BackButton from '@/v1/base/BackButton';
import TopNavigation from '@/v1/base/TopNavigation';
import DetailBookGroupCard from '@/v1/bookGroup/DetailBookGroupCard';
Expand All @@ -22,7 +20,7 @@ const UserGroupPage = () => {
};

const UserGroupContent = () => {
const { data, isSuccess } = useMyGroupsQuery({ enabled: isAuthed() });
const { data, isSuccess } = useMyGroupsQuery();

if (!isSuccess) {
return (
Expand Down Expand Up @@ -60,7 +58,7 @@ const UserGroupContent = () => {
startDate,
endDate,
owner,
memberCount,
currentMemberCount,
commentCount,
isPublic,
bookGroupId,
Expand All @@ -75,7 +73,7 @@ const UserGroupContent = () => {
name: owner.nickname,
profileImageSrc: owner.profileUrl,
}}
memberCount={memberCount}
memberCount={currentMemberCount}
commentCount={commentCount}
isPublic={isPublic}
bookGroupId={bookGroupId}
Expand Down
4 changes: 2 additions & 2 deletions src/queries/group/useMyGroupQuery.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import GroupAPI from '@/apis/group';
import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
import { useQuery } from '@tanstack/react-query';
import type { QueryOptions } from '@/types/query';
import type { APIGroupPagination } from '@/types/group';
import bookGroupKeys from './key';

const useMyGroupsQuery = (options?: QueryOptions<APIGroupPagination>) =>
useQueryWithSuspense(
useQuery(
bookGroupKeys.me(),
() => GroupAPI.getMyGroups().then(({ data }) => data),
options
Expand Down
14 changes: 7 additions & 7 deletions src/types/group.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface APIGroupDetail extends APIGroup {
}

export interface APIGroupPagination extends Pagination {
bookGroups: (APIGroup & { memberCount: number })[];
bookGroups: APIGroup[];
}

export interface APICreateGroup
Expand Down Expand Up @@ -76,16 +76,16 @@ export interface APIGroupCommentPagination extends Pagination {
}

export type BookGroupDetail = {
title: APIGroupDetail['title'];
description: APIGroupDetail['introduce'];
title: APIGroup['title'];
description: APIGroup['introduce'];
bookId: APIBook['bookId'];
owner: { isMe: boolean; id: APIUser['userId'] };
date: { start: APIGroupDetail['startDate']; end: APIGroupDetail['endDate'] };
date: { start: APIGroup['startDate']; end: APIGroup['endDate'] };
memberCount: {
current: APIGroupDetail['currentMemberCount'];
max: APIGroupDetail['maxMemberCount'];
current: APIGroup['currentMemberCount'];
max: APIGroup['maxMemberCount'];
};
isPublic: APIGroupDetail['isPublic'];
isPublic: APIGroup['isPublic'];
isMember: APIGroupDetail['isGroupMember'];
};

Expand Down
23 changes: 0 additions & 23 deletions src/v1/bookGroup/DetailBookGroupCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,26 +138,3 @@ const CommentCount = ({ commentCount }: { commentCount: number }) => {
</div>
);
};

export const DetailBookGroupCardSkeleton = () => (
<div className="w-full animate-pulse rounded-[0.5rem] p-[1.5rem] shadow-[0_0_0.6rem_rgba(180,180,180,0.25)]">
<div className="flex gap-[0.5rem]">
<div className="h-[1.9rem] w-[4.8rem] rounded-[0.5rem] bg-black-400" />
<div className="h-[2rem] w-[3.8rem] rounded-[0.5rem] bg-black-400" />
</div>
<div className="flex justify-between gap-[1.5rem] pt-[1rem]">
<div className="flex flex-grow flex-col justify-between ">
<div className="h-[2.2rem] w-[65%] bg-black-400" />
<div className="h-[1.3rem] w-[75%] bg-black-400" />
<div className="h-[1.3rem] w-[60%] bg-black-400" />
<div className="flex w-full items-center gap-[0.5rem]">
<div className="h-[2rem] w-[2rem] rounded-full bg-black-400" />
<div className="h-[1.3rem] w-[4rem] bg-black-400" />
<div className="flex-grow" />
<div className="h-[1.3rem] w-[5rem] bg-black-400" />
</div>
</div>
<div className="h-[10.5rem] w-[7.5rem] rounded-[0.5rem] bg-black-400"></div>
</div>
</div>
);
27 changes: 14 additions & 13 deletions src/v1/bookGroup/SimpleBookGroupCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Image from 'next/image';
import Link from 'next/link';
import BookCover from '../book/BookCover';

interface SimpleBookGroupCardProps {
title: string;
Expand All @@ -16,23 +16,24 @@ const SimpleBookGroupCard = ({
}: SimpleBookGroupCardProps) => {
return (
<Link href={`/group/${bookGroupId}`}>
<div className="flex w-[10rem] flex-col gap-[1rem]">
<div className="flex w-[10rem] flex-col gap-[0.5rem]">
<div className="bg-orange-100 px-[1.8rem] py-[1.6rem]">
<BookCover size="xsmall" src={imageSource} />
<Image
src={imageSource}
alt="bookgroup"
width={65}
height={90}
className="rounded-[0.5rem]"
/>
</div>
<div>
<p className="break-keep text-center text-xs leading-6">
{isOwner ? `👑 ${title}` : title}
</p>
</div>
<p className="break-keep text-center text-xs leading-tight">
{isOwner ? `👑 ${title}` : title}
</p>
</div>
</Link>
);
};

export default SimpleBookGroupCard;

export const SimpleBookGroupCardSkeleton = () => (
<div className="flex animate-pulse flex-col gap-[1rem]">
<div className="h-[12.3rem] w-[10rem] rounded-[0.5rem] bg-black-400" />
<div className="h-[1.3rem] w-[5rem] self-center bg-black-400" />
</div>
);

0 comments on commit aaa2547

Please sign in to comment.