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

This reverts commit f50f393.
prgrms-web-devcourse · Aug 20, 2024 · 4ef2403 · 4ef2403
1 parent 477a776
commit 4ef2403
Show file tree

Hide file tree

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

diff --git a/src/stories/bookGroup/DetailBookGroupCard.stories.tsx b/src/stories/bookGroup/DetailBookGroupCard.stories.tsx
@@ -17,7 +17,10 @@ export const Default: Story = {
     title: '프롱이 리팩터링 스터디',
     description:
       '제1차 프롱이 기수연합 독서 스터디 입니다. 마틴 파울러의 저서 ‘리팩터링 2판’과 함께 진행합니다.',
-    bookImageSrc: 'https://image.yes24.com/goods/89649360/XL',
+    book: {
+      title: '리팩터링 2판',
+      bookImageSrc: 'https://image.yes24.com/goods/89649360/XL',
+    },
     date: {
       start: '2023-10-31',
       end: '2023-11-27',
@@ -29,6 +32,8 @@ export const Default: Story = {
     },
     isPublic: false,
     commentCount: 12,
-    bookGroupId: 1,
+    handleClick: () => {
+      alert('모임 상세 페이지로 이동');
+    },
   },
 };
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 handleClick = () => {
+const alertMessage = () => {
   document.getElementById('groupSearching')?.blur();
   alert(
     `
@@ -22,5 +22,5 @@ const handleClick = () => {
 };
 
 export const Default: Story = {
-  render: () => <SearchGroup onClick={handleClick} />,
+  render: () => <SearchGroup handleClick={alertMessage} />,
 };
diff --git a/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx b/src/stories/bookGroup/SimpleBookGroupCard.stories.tsx
@@ -11,12 +11,16 @@ 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,
-    bookGroupId: 1,
+    onClick: handleClick,
   },
 };
 
@@ -25,6 +29,6 @@ export const OwnerCase: Story = {
     title: '데일카네기 인간관계론',
     imageSource: 'https://image.yes24.com/goods/79297023/XL',
     isOwner: true,
-    bookGroupId: 1,
+    onClick: handleClick,
   },
 };
diff --git a/src/types/group.ts b/src/types/group.ts
@@ -5,8 +5,7 @@ import { Pagination } from './common';
 type APIGroupOwner = {
   id: APIUser['userId'];
   profileUrl: APIUser['profileImage'];
-  // FIXME nickname: APIUser['nickname'] nullable 하지 않게 수정 후 다시 반영
-  nickname: string;
+  nickname: APIUser['nickname'];
 };
 
 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={`${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`}
+      className={`absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 ${positionClasses}`}
       {...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 || 'book-cover'}
+        alt={title}
         placeholder="blur"
         blurDataURL={DATA_URL['placeholder']}
         className="object-fit rounded-[0.5rem] shadow-bookcover"