[#439] [독서모임] 모임 목록 페이지 리팩토링 #440
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,37 @@ | ||
| 'use client'; | ||
|
|
||
| import TopHeader from '@/ui/Base/TopHeader'; | ||
| 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/useMyGroupsQuery'; | ||
| import { Skeleton, VStack } from '@chakra-ui/react'; | ||
| import { useEffect } from 'react'; | ||
| import { useInView } from 'react-intersection-observer'; | ||
|
|
||
| const GroupPage = () => { | ||
| const { ref, inView } = useInView(); | ||
|
|
||
| const { | ||
| isSuccess: entireGroupsIsSuccess, | ||
| data: entireGroupsData, | ||
| isLoading, | ||
| fetchNextPage, | ||
| hasNextPage, | ||
| isFetchingNextPage, | ||
| } = useEntireGroupsQuery(); | ||
|
|
||
| const { isSuccess: myGroupsIsSuccess, data: myGroupsData } = | ||
| useMyGroupsQuery(); | ||
|
|
||
| useEffect(() => { | ||
| if (inView && hasNextPage) { | ||
| fetchNextPage(); | ||
| } | ||
| }, [fetchNextPage, inView, hasNextPage]); | ||
|
|
||
| if (isLoading) | ||
| return ( | ||
| <VStack gap="0.5rem" align="stretch" w="100%"> | ||
|
|
@@ -63,22 +43,73 @@ const GroupPage = () => { | |
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <TopHeader pathname={'/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} | ||
| 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 => { | ||
|
Comment on lines
+71
to
+73
There was a problem hiding this comment. 받아온 데이터를 두 번 풀어서 사용해야 하는 상황에서 반복문을 두 번 돌리는 것이 어색한 것 같아 별도의 방법을 찾아보던 중 |
||
| const { | ||
| title, | ||
| introduce, | ||
| book, | ||
| startDate, | ||
| endDate, | ||
| owner, | ||
| memberCount, | ||
| 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={memberCount} | ||
| commentCount={commentCount} | ||
| isPublic={isPublic} | ||
| bookGroupId={bookGroupId} | ||
| /> | ||
| ); | ||
| }); | ||
| })} | ||
| </div> | ||
| </div> | ||
| <div ref={ref} /> | ||
| {isFetchingNextPage && <Skeleton w="100%" height="28rem" />} | ||
| {/* <Link href={'/group/create'}> | ||
| <FloatingButton position="bottom-right" /> | ||
| </Link> */} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,7 +14,7 @@ type BookCoverSize = | |
| type BookCoverProps = Required< | ||
| Pick<ComponentPropsWithoutRef<typeof Image>, 'src'> | ||
| > & { | ||
| title?: string; | ||
| size?: BookCoverSize; | ||
| }; | ||
|
Comment on lines
14
to
19
There was a problem hiding this comment. p5; There was a problem hiding this comment. @minjongbaek There was a problem hiding this comment. @minjongbaek There was a problem hiding this comment.
@WooDaeHyun 따로 참고한 레퍼런스는 없습니다. prop이 HTML 요소에서 지원하는 속성을 위해 사용된다면 DX 측면에서 동일한 이름을 사용하는 것이 좋지 않을까? 라고 생각하는데 이런 생각이 코드에 반영되는 것 같아요. 이 부분은 주관적인 내용을 포함하고 있기에 '누구는 이런 기준으로 prop 명을 정하는구나.' 라고 봐주시면 좋을 것 같아요. 🙇 그렇기 때문에 코멘트에 p5를 적용했습니다. 만약 대현님께서 다른 생각을 가지고 있다면 공유해주시고, 제 피드백을 반영하지 않아도 좋아요! There was a problem hiding this comment. @minjongbaek There was a problem hiding this comment. 고민해봤는데 저는 이미지를 보여줄 수 없을 때 |
||
|
|
||
|
|
@@ -48,7 +48,7 @@ const BookCover = ({ src, title, size = 'medium' }: BookCoverProps) => { | |
| <div className={`relative ${sizeClasses}`}> | ||
| <Image | ||
| src={src} | ||
| alt={title || 'book-cover'} | ||
| placeholder="blur" | ||
| blurDataURL={DATA_URL['placeholder']} | ||
| className="object-fit rounded-[0.5rem] shadow-bookcover" | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ask;
기존에 있던
search1.kakaocdn.net호스트 외에 두 호스트 에서 받아오는 이미지가 있나요? 👀There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@minjongbaek
네 말씀주신 호스트 외에 독서 모임 목록 페이지에서 위의 두 호스트에서 받아오는 이미지가 존재하여 에러가 발생해 추가로 작성하게 되었습니다! 👀