digest group list 가져오기 기능 추가 (#26)

* feat: 그룹 list 가져오기 기능 추가 * chore: list item 네이밍 수정 * chore: 탐색버튼 텍스트 간격조정
YAPP-Github · Aug 29, 2024 · 9ecaa9a · 9ecaa9a
1 parent 56c89a7
commit 9ecaa9a
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 48 deletions.
diff --git a/src/api/hooks/useFetchGroupListQuery.ts b/src/api/hooks/useFetchGroupListQuery.ts
@@ -0,0 +1,35 @@
+import { axiosInstance } from '@/api/axiosInstance';
+import { useQuery } from '@tanstack/react-query';
+import { AxiosError, AxiosResponse } from 'axios';
+
+interface Response {
+  groups: {
+    groupId: string;
+    name: string;
+    senders: {
+      name: string;
+      address: string;
+    }[];
+  }[];
+}
+
+export type GroupsType = {
+  groupId: string;
+  name: string;
+  senders: {
+    name: string;
+    address: string;
+  }[];
+}[];
+
+export const fetchGroupList = () => {
+  return axiosInstance.get('/inbox/groups');
+};
+
+export const useFetchGroupListQuery = () => {
+  return useQuery<AxiosResponse<Response>, AxiosError, Response>({
+    queryKey: ['groupList'],
+    queryFn: fetchGroupList,
+    select: ({ data }) => data,
+  });
+};
diff --git a/src/app/main/layout.tsx b/src/app/main/layout.tsx
@@ -2,18 +2,6 @@ import MainListTap from '@/components/ListTap/MainListTap';
 import MainPageHeader from '@/components/Header/MainPageHeader';
 import { Suspense } from 'react';
 
-const tabData = {
-  today: {
-    name: '오늘의 인사이트',
-  },
-  search: {
-    name: '탐색     🔍',
-  },
-  Digest: {
-    name: 'Digest',
-  },
-};
-
 export default function MainPageLayout({
   children,
 }: Readonly<{
@@ -24,7 +12,7 @@ export default function MainPageLayout({
       <MainPageHeader />
       <div className='flex flex-col items-center w-full'>
         <Suspense fallback={<div></div>}>
-          <MainListTap tabData={tabData} />
+          <MainListTap />
         </Suspense>
         <div className='flex justify-center h-full w-content'>{children}</div>
       </div>

diff --git a/src/components/ListTap/ListItem.tsx b/src/components/ListTap/ListItem.tsx
@@ -1,26 +1,29 @@
 import Link from 'next/link';
+import type { ComponentPropsWithoutRef } from 'react';
 
-interface ListItemProps {
+interface ListItemProps extends ComponentPropsWithoutRef<'div'> {
   id: string;
   name: string;
   isActive: boolean;
   tapCnt?: number;
   onClick?: () => void;
 }
 
-const ListItem = ({ id, name, isActive, tapCnt, onClick }: ListItemProps) => {
+const ListItem = ({ id, name, isActive, tapCnt, onClick, ...attributes }: ListItemProps) => {
   return (
-    <Link
-      href={{
-        pathname: '/main',
-        query: { tab: id },
-      }}
-      onClick={onClick}
-      className={`${isActive ? (id === 'Digest' ? 'bg-background_grey rounded-t border-bottom-gradient text-black' : 'border-bottom-gradient text-black') : 'text-darkgrey'} flex flex-row items-center gap-4 px-6 py-3 whitespace-pre-wrap text-body3`}
-    >
-      {name}
-      {tapCnt && <span className='text-base font-light text-blue'>{tapCnt}</span>}
-    </Link>
+    <div {...attributes}>
+      <Link
+        href={{
+          pathname: '/main',
+          query: { tab: id },
+        }}
+        onClick={onClick}
+        className={`${isActive ? (id === 'Digest' ? 'bg-background_grey rounded-t border-bottom-gradient text-black' : 'border-bottom-gradient text-black') : 'text-darkgrey'} flex flex-row items-center gap-4 px-6 py-3 whitespace-pre-wrap text-body3`}
+      >
+        {name}
+        {tapCnt && <span className='text-base font-light text-blue'>{tapCnt}</span>}
+      </Link>
+    </div>
   );
 };
 

diff --git a/src/components/ListTap/MainListTap.tsx b/src/components/ListTap/MainListTap.tsx
@@ -1,49 +1,110 @@
 'use client';
 
+import { GroupsType, useFetchGroupListQuery } from '@/api/hooks/useFetchGroupListQuery';
 import ListItem from '@/components/ListTap/ListItem';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-interface TabData {
-  name: string;
-}
-
-interface MainListTapProps {
-  tabData: { [key: string]: TabData };
-}
-
-/**
- *
- * @param tabData tab에 들어갈 data
- * @returns
- */
-const MainListTap = ({ tabData }: MainListTapProps) => {
+const MainListTap = () => {
   const searchParams = useSearchParams();
   const [currentTab, setCurrentTab] = useState(searchParams.get('tab') ?? 'today');
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  const { data } = useFetchGroupListQuery();
 
   const handleClickListItem = (id: string) => {
     setCurrentTab(id);
   };
 
+  const handleMouseoverDigest = useCallback((hover: boolean) => {
+    setShowOverlay(hover);
+  }, []);
+
   useEffect(() => {
     setCurrentTab(searchParams.get('tab') ?? 'today');
   }, [searchParams]);
 
   return (
     <div className='flex justify-center w-full h-12 border-b border-lightgrey'>
       <div className='flex flex-row h-full gap-4 w-content'>
-        {Object.keys(tabData).map(id => (
+        <ListItem
+          onClick={() => handleClickListItem('오늘의 인사이트')}
+          key={'오늘의 인사이트'}
+          id={'today'}
+          name={'오늘의 인사이트'}
+          isActive={currentTab === '오늘의 인사이트'}
+        />
+        <ListItem
+          onClick={() => handleClickListItem('탐색')}
+          key={'탐색'}
+          id={'search'}
+          name={'탐색    🔎'}
+          isActive={currentTab === '탐색'}
+        />
+        <div>
           <ListItem
-            onClick={() => handleClickListItem(id)}
-            key={id}
-            id={id}
-            name={tabData[id].name}
-            isActive={currentTab === id}
+            onClick={() => handleClickListItem('Digest')}
+            key={'Digest'}
+            id={'Digest'}
+            name={'Digest'}
+            isActive={currentTab === 'Digest'}
+            onMouseOver={() => handleMouseoverDigest(true)}
+            onMouseOut={() => handleMouseoverDigest(false)}
           />
-        ))}
+          {showOverlay ? <DigestTabOverlay data={data ? data.groups : []} /> : <></>}
+        </div>
       </div>
     </div>
   );
 };
 
 export default MainListTap;
+
+interface TabOverlayProps {
+  data: GroupsType;
+}
+
+const DigestTabOverlay = ({ data }: TabOverlayProps) => {
+  const handleGroupMake = () => {
+    console.log('클릭시 [마이페이지>구독관리>그룹생성 팝업] 랜딩');
+  };
+
+  if (!data.length) {
+    return (
+      <div
+        style={{
+          width: '258px',
+          borderRadius: 'var(--Number-Spacing-spacing-3, 8px)',
+          background: 'var(--Color-Neutral-white, #FFF)',
+          boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
+        }}
+        className='absolute p-4 text-body2 m-2'
+      >
+        <div>뉴스레터 그룹을 만들어</div>
+        <div className='pb-2'>주제별로 편하게 모아보세요!</div>
+        <div className='w-full flex justify-end text-body2 text-blue cursor-pointer' onClick={handleGroupMake}>
+          + 뉴스레터 그룹 만들기
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        width: '258px',
+        borderRadius: 'var(--Number-Spacing-spacing-3, 8px)',
+        background: 'var(--Color-Neutral-white, #FFF)',
+        boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
+      }}
+      className='absolute p-4 text-body2 m-2'
+    >
+      {data.map(group => (
+        <div className='pb-2'>{group.name}</div>
+      ))}
+      <div className='w-full flex justify-end text-body2 text-blue cursor-pointer' onClick={handleGroupMake}>
+        + 뉴스레터 그룹 만들기
+      </div>
+    </div>
+  );
+};
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -146,6 +146,18 @@ export const handlers = [
     });
   }),
 
+  http.get('/inbox/groups', req => {
+    return HttpResponse.json({
+      groups: [
+        {
+          groupId: 'mongo objecrt Id',
+          name: '그룹 이름',
+          senders: [{ name: '발신인 이름', address: '발신인 주소' }],
+        },
+      ],
+    });
+  }),
+
   http.get('/articleList', req => {
     const { currentTab } = req.params;
     return HttpResponse.json({