From f50f3930c6cfded56cb83f7921fdac6643cf8161 Mon Sep 17 00:00:00 2001 From: Daehyun Date: Thu, 23 Nov 2023 18:53:20 +0900 Subject: [PATCH] =?UTF-8?q?[#439]=20[=EB=8F=85=EC=84=9C=EB=AA=A8=EC=9E=84]?= =?UTF-8?q?=20=EB=AA=A8=EC=9E=84=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20(#440)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 모임 목록 페이지 리팩토링 * fix: type error 수정 * fix: build error 수정 * Chore: 이벤트 핸들러 명칭 수정 * Chore: storybook prop 수정 * Fix: Simple,DetailBookGroupCard Link 태그로 전환 * Fix: owner.name type 정의 수정 * Fix: SimpleBookGroupCard href 수정 * Fix: build 에러 수정 --- next.config.js | 12 ++ src/app/group/page.tsx | 125 +++++++++++------- .../bookGroup/DetailBookGroupCard.stories.tsx | 9 +- src/stories/bookGroup/SearchGroup.stories.tsx | 4 +- .../bookGroup/SimpleBookGroupCard.stories.tsx | 8 +- src/types/group.ts | 3 +- src/ui/Base/FloatingButton.tsx | 2 +- src/v1/book/BookCover.tsx | 4 +- src/v1/bookGroup/DetailBookGroupCard.tsx | 81 ++++-------- src/v1/bookGroup/SearchGroup.tsx | 8 +- src/v1/bookGroup/SimpleBookGroupCard.tsx | 40 +++--- 11 files changed, 154 insertions(+), 142 deletions(-) diff --git a/next.config.js b/next.config.js index 5bbcb6c8..43d4b393 100644 --- a/next.config.js +++ b/next.config.js @@ -34,6 +34,18 @@ const nextConfig = { port: '', pathname: '/**', }, + { + protocol: 'http', + hostname: 'k.kakaocdn.net', + port: '', + pathname: '/**', + }, + { + protocol: 'https', + hostname: 'blog.kakaocdn.net', + port: '', + pathname: '/**', + }, ], }, }; diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx index 200fc3bf..8c769882 100644 --- a/src/app/group/page.tsx +++ b/src/app/group/page.tsx @@ -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 GroupHeader from '@/ui/Group/GroupHeader'; -import GroupList from '@/ui/Group/GroupList'; -import GroupSearch from '@/ui/Group/GroupSearch'; -import { Box, Skeleton, VStack } from '@chakra-ui/react'; -import { useState, useEffect } from 'react'; +import useMyGroupsQuery from '@/queries/group/useMyGroupsQuery'; +import { Skeleton, VStack } from '@chakra-ui/react'; +import { useEffect } from 'react'; import { useInView } from 'react-intersection-observer'; -interface SearchValue { - [key: string]: string; - input: string; - select: string; -} - const GroupPage = () => { - const [searchValue, setSearchValue] = useState({ - input: '', - select: '모임', - }); 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(); } }, [fetchNextPage, inView, hasNextPage]); - const handleSumbit = () => { - const { input } = searchValue; - if (input.trim().length === 0) { - /*공백만 입력한 경우 전체 데이터 렌더링 */ - } else { - /*검색 API호출 및 setMeetingListData 업데이트 */ - } - }; - - const handleChange = (name: string, value: string) => { - if (!(name in searchValue)) return; - const tempSearchValue = { ...searchValue }; - tempSearchValue[name] = value; - setSearchValue(tempSearchValue); - }; - if (isLoading) return ( @@ -63,22 +43,73 @@ const GroupPage = () => { ); return ( - - - - + +
+ { + alert('추후 업데이트 될 예정입니다.'); + }} /> - {isSuccess && - data.pages.map((groups, idx) => { - return ; - })} - - +
+ {myGroupsIsSuccess && + myGroupsData.bookGroups.map(group => { + const { title, book, bookGroupId } = group; + return ( + //API isOwner 값이 존재하지 않아 비교하는 로직 추가 필요 + + ); + })} +
+
+ {entireGroupsIsSuccess && + entireGroupsData.pages.map(groups => { + return groups.bookGroups.map(group => { + const { + title, + introduce, + book, + startDate, + endDate, + owner, + memberCount, + commentCount, + isPublic, + bookGroupId, + } = group; + return ( + + ); + }); + })} +
+
+
{isFetchingNextPage && } - + {/* + + */} + ); }; diff --git a/src/stories/bookGroup/DetailBookGroupCard.stories.tsx b/src/stories/bookGroup/DetailBookGroupCard.stories.tsx index 0241f0ef..6125e0fd 100644 --- a/src/stories/bookGroup/DetailBookGroupCard.stories.tsx +++ b/src/stories/bookGroup/DetailBookGroupCard.stories.tsx @@ -17,10 +17,7 @@ export const Default: Story = { title: '프롱이 리팩터링 스터디', description: '제1차 프롱이 기수연합 독서 스터디 입니다. 마틴 파울러의 저서 ‘리팩터링 2판’과 함께 진행합니다.', - book: { - title: '리팩터링 2판', - bookImageSrc: 'https://image.yes24.com/goods/89649360/XL', - }, + bookImageSrc: 'https://image.yes24.com/goods/89649360/XL', date: { start: '2023-10-31', end: '2023-11-27', @@ -32,8 +29,6 @@ export const Default: Story = { }, isPublic: false, commentCount: 12, - handleClick: () => { - alert('모임 상세 페이지로 이동'); - }, + bookGroupId: 1, }, }; diff --git a/src/stories/bookGroup/SearchGroup.stories.tsx b/src/stories/bookGroup/SearchGroup.stories.tsx index 8c9376cc..d78175a6 100644 --- a/src/stories/bookGroup/SearchGroup.stories.tsx +++ b/src/stories/bookGroup/SearchGroup.stories.tsx @@ -11,7 +11,7 @@ export default meta; type Story = StoryObj; -const alertMessage = () => { +const handleClick = () => { document.getElementById('groupSearching')?.blur(); alert( ` @@ -22,5 +22,5 @@ const alertMessage = () => { }; export const Default: Story = { - render: () => , + render: () => , }; diff --git a/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx b/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx index fa80ae93..ecf95895 100644 --- a/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx +++ b/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx @@ -11,16 +11,12 @@ export default meta; type Story = StoryObj; -const handleClick = () => { - alert('모임 상세 페이지로 이동'); -}; - export const Default: Story = { args: { title: '데일카네기 인간관계론', imageSource: 'https://image.yes24.com/goods/79297023/XL', isOwner: false, - onClick: handleClick, + bookGroupId: 1, }, }; @@ -29,6 +25,6 @@ export const OwnerCase: Story = { title: '데일카네기 인간관계론', imageSource: 'https://image.yes24.com/goods/79297023/XL', isOwner: true, - onClick: handleClick, + bookGroupId: 1, }, }; diff --git a/src/types/group.ts b/src/types/group.ts index 4aed9396..fee99ab6 100644 --- a/src/types/group.ts +++ b/src/types/group.ts @@ -5,7 +5,8 @@ import { Pagination } from './common'; type APIGroupOwner = { id: APIUser['userId']; profileUrl: APIUser['profileImage']; - nickname: APIUser['nickname']; + // FIXME nickname: APIUser['nickname'] nullable 하지 않게 수정 후 다시 반영 + nickname: string; }; type APIGroupBook = { diff --git a/src/ui/Base/FloatingButton.tsx b/src/ui/Base/FloatingButton.tsx index b09d047c..ea9f1b41 100644 --- a/src/ui/Base/FloatingButton.tsx +++ b/src/ui/Base/FloatingButton.tsx @@ -28,7 +28,7 @@ const FloatingButton = ({ position, ...props }: FloatingButtonProps) => { return createPortal(