[#439] [독서모임] 모임 목록 페이지 리팩토링 (#440)

* refactor: 모임 목록 페이지 리팩토링 * fix: type error 수정 * fix: build error 수정 * Chore: 이벤트 핸들러 명칭 수정 * Chore: storybook prop 수정 * Fix: Simple,DetailBookGroupCard Link 태그로 전환 * Fix: owner.name type 정의 수정 * Fix: SimpleBookGroupCard href 수정 * Fix: build 에러 수정
prgrms-web-devcourse · Jun 17, 2024 · f50f393 · f50f393
1 parent 91b8171
commit f50f393
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 142 deletions.
diff --git 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
@@ -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<SearchValue>({
-    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 (
       <VStack gap="0.5rem" align="stretch" w="100%">
@@ -63,22 +43,73 @@ const GroupPage = () => {
     );
 
   return (
-    <VStack align="center">
-      <Box w="100%">
-        <GroupHeader />
-        <GroupSearch
-          searchValue={searchValue}
-          handleChange={handleChange}
-          handleSumbit={handleSumbit}
+    <>
+      <TopHeader pathname={'/group'} />
+      <div className="mt-[2rem] flex w-full flex-col gap-[1.5rem]">
+        <SearchGroup
+          onClick={() => {
+            alert('추후 업데이트 될 예정입니다.');
+          }}
         />
-        {isSuccess &&
-          data.pages.map((groups, idx) => {
-            return <GroupList key={idx} bookGroups={groups.bookGroups} />;
-          })}
-      </Box>
-      <Box ref={ref} />
+        <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 => {
+                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" />}
-    </VStack>
+      {/* <Link href={'/group/create'}>
+        <FloatingButton position="bottom-right" />
+      </Link> */}
+    </>
   );
 };
 

diff --git 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
@@ -11,7 +11,7 @@ export default meta;
 
 type Story = StoryObj<typeof SearchGroup>;
 
-const alertMessage = () => {
+const handleClick = () => {
   document.getElementById('groupSearching')?.blur();
   alert(
     `
@@ -22,5 +22,5 @@ const alertMessage = () => {
 };
 
 export const Default: Story = {
-  render: () => <SearchGroup handleClick={alertMessage} />,
+  render: () => <SearchGroup onClick={handleClick} />,
 };
diff --git a/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx b/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx
@@ -11,16 +11,12 @@ export default meta;
 
 type Story = StoryObj<typeof SimpleBookGroupCard>;
 
-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
@@ -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
@@ -28,7 +28,7 @@ const FloatingButton = ({ position, ...props }: FloatingButtonProps) => {
 
   return createPortal(
     <button
-      className={`absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 ${positionClasses}`}
+      className={`${positionClasses} fixed left-[50%] top-[50%] flex h-[5.1rem] w-[5.1rem] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-main-900`}
       {...props}
     >
       <IconPlus />

diff --git a/src/v1/book/BookCover.tsx b/src/v1/book/BookCover.tsx
@@ -14,7 +14,7 @@ type BookCoverSize =
 type BookCoverProps = Required<
   Pick<ComponentPropsWithoutRef<typeof Image>, 'src'>
 > & {
-  title: string;
+  title?: string;
   size?: BookCoverSize;
 };
 
@@ -48,7 +48,7 @@ const BookCover = ({ src, title, size = 'medium' }: BookCoverProps) => {
     <div className={`relative ${sizeClasses}`}>
       <Image
         src={src}
-        alt={title}
+        alt={title || 'book-cover'}
         placeholder="blur"
         blurDataURL={DATA_URL['placeholder']}
         className="object-fit rounded-[0.5rem] shadow-bookcover"