YAPP-Github · dladncks1217 · Sep 13, 2024
@@ -17,14 +17,14 @@ const ArticleFooter = ({ mailId }: ArticleFooterProps) => {
       { mailId },
       {
         onSuccess: () => {
-          router.push('/main?tab=Digest'); // 클라이언트 사이드에서 리디렉션
+          router.push('/main?tab=Digest');
         },
       },
     );
   };
 
   const handleRedirectMain = () => {
-    router.push('/main?tab=Digest'); // 클라이언트 사이드에서 리디렉션
+    router.push('/main?tab=Digest');
   };
 
   return (

@@ -6,14 +6,15 @@ import CloseIcon from '@/assets/icons/CloseIcon';
 import FolderIcon from '@/assets/icons/FolderIcon.svg';
 import { useState } from 'react';
 import DomainPortal from './DomainPortal';
+import { useGroupOverlayStore } from '@/utils/hooks/useGroupOverlayStore';
 
 interface Props {
   name: string;
 }
 
 const DomainListItem = ({ name }: Props) => {
   const [isHover, setIsHover] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { open, setOpen: setModalOpen } = useGroupOverlayStore();
 
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -28,12 +29,12 @@ const DomainListItem = ({ name }: Props) => {
   };
 
   const handleAddGroupAction = () => {
-    setIsModalOpen(true);
+    setModalOpen(true);
   };
 
   const handlecloseModal = () => {
     setIsHover(false);
-    setIsModalOpen(false);
+    setModalOpen(false);
   };
 
   return (
@@ -76,7 +77,7 @@ const DomainListItem = ({ name }: Props) => {
             </span>
           </div>
         )}
-        {isModalOpen && <DomainPortal handleCloseModal={handlecloseModal} />}
+        {open && <DomainPortal handleCloseModal={handlecloseModal} />}
       </span>
     </div>
   );

@@ -5,6 +5,8 @@ import FolderImage from '@/assets/images/FolderImage.svg';
 import { useFunnel } from '@/utils/hooks/useFunnel';
 import PlusIcon from '@/assets/icons/PlusIcon';
 import { useState } from 'react';
+import { GroupsType, useFetchGroupListQuery } from '@/api/hooks/useFetchGroupListQuery';
+import { H14Image, H24Image } from '@/components/Image';
 
 interface DomainPortalProps {
   handleCloseModal: () => void;
@@ -14,14 +16,64 @@ interface StepProps {
   onNextStep: () => void;
 }
 
-const DefaultStep = ({ onNextStep }: StepProps) => {
+interface DefaultStepProps extends StepProps {
+  data: GroupsType;
+}
+
+const DefaultStep = ({ onNextStep, data }: DefaultStepProps) => {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const handleMouseEnter = (id: string) => {
+    setHoveredId(id);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredId(null);
+  };
+
   return (
-    <div className='flex flex-col justify-end w-full h-full px-4 pb-4'>
-      <div className='absolute flex flex-col items-center justify-center gap-6 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
-        <Image src={FolderImage} alt='folder' width={80} height={80} />
-        <span className='text-body2'>뉴스레터를 관심사별 그룹핑 해보세요!</span>
-      </div>
-      <span className='flex justify-end w-full cursor-pointer text-btn1 text-blue' onClick={onNextStep}>
+    <div className='flex flex-col w-full h-full px-4 pb-4'>
+      {!data.length ? (
+        <div className='absolute flex flex-col items-center justify-center gap-6 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
+          <Image src={FolderImage} alt='folder' width={80} height={80} />
+          <span className='text-body2'>뉴스레터를 관심사별 그룹핑 해보세요!</span>
+        </div>
+      ) : (
+        <div className='w-full'>
+          {data.map(mail => {
+            return (
+              <div key={mail.groupId} className='flex w-full justify-between py-3'>
+                <div>{mail.name}</div>
+                <span
+                  className='relative'
+                  onMouseEnter={() => handleMouseEnter(mail.groupId)}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <H24Image src={'dots.svg'} className='cursor-pointer' />
+                  {hoveredId === mail.groupId && (
+                    <div
+                      style={{
+                        width: '120px',
+                        borderRadius: 'var(--Number-Spacing-spacing-3, 8px)',
+                        background: 'var(--Color-Neutral-white, #FFF)',
+                        boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
+                        transform: 'translateX(-92px)',
+                      }}
+                      className='absolute cursor-pointer flex items-center gap-2 z-50 py-2 px-3 text-body2'
+                    >
+                      <div>
+                        <H14Image src='trash.svg' />
+                      </div>
+                      <div className='text-body2'>그룹 삭제하기</div>
+                    </div>
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <span className='flex mt-auto justify-end w-full cursor-pointer text-btn1 text-blue' onClick={onNextStep}>
         + 뉴스레터 그룹 만들기
       </span>
     </div>
@@ -53,6 +105,7 @@ const steps = ['default', 'create'];
 
 const DomainPortal = ({ handleCloseModal }: DomainPortalProps) => {
   const { Funnel, Step, setStep } = useFunnel(steps[0]);
+  const { data } = useFetchGroupListQuery();
 
   return (
     <Portal selector='#portal'>
@@ -72,7 +125,7 @@ const DomainPortal = ({ handleCloseModal }: DomainPortalProps) => {
           </div>
           <Funnel>
             <Step name={steps[0]}>
-              <DefaultStep onNextStep={() => setStep(steps[1])} />
+              <DefaultStep data={data ? data.groups : []} onNextStep={() => setStep(steps[1])} />
             </Step>
             <Step name={steps[1]}>
               <CreateStep onNextStep={() => setStep(steps[0])} />

@@ -24,6 +24,13 @@ function H8Image({ src, width = 8, ...props }: ImageProps) {
   return <Image src={`/H8/${src}`} alt={alt} width={width} height={8} priority {...props} />;
 }
 
+function H12Image({ src, width = 12, ...props }: ImageProps) {
+  const fileName = src.split('.')[0];
+  const alt = getAlt(fileName);
+
+  return <Image src={`/H12/${src}`} alt={alt} width={width} height={12} priority {...props} />;
+}
+
 function H14Image({ src, width = 14, ...props }: ImageProps) {
   const fileName = src.split('.')[0];
   const alt = getAlt(fileName);
@@ -66,4 +73,4 @@ function H92Image({ src, width = 92, ...props }: ImageProps) {
   return <Image src={`/H92/${src}`} alt={alt} width={width} height={92} priority {...props} />;
 }
 
-export { H8Image, H14Image, H16Image, H24Image, H36Image, H56Image, H92Image };
+export { H8Image, H12Image, H14Image, H16Image, H24Image, H36Image, H56Image, H92Image };
@@ -9,7 +9,7 @@ interface ListItemProps extends ComponentPropsWithoutRef<'div'> {
   onClick?: () => void;
 }
 
-const ListItem = ({ id, name, isActive, tapCnt, onClick, ...attributes }: ListItemProps) => {
+const ListItem = ({ id, name, isActive, tapCnt, onClick, children, ...attributes }: ListItemProps) => {
   return (
     <div {...attributes}>
       <Link
@@ -20,6 +20,7 @@ const ListItem = ({ id, name, isActive, tapCnt, onClick, ...attributes }: ListIt
         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`}
       >
+        {children}
         {name}
         {tapCnt && <span className='text-base font-light text-blue'>{tapCnt}</span>}
       </Link>

@@ -2,22 +2,28 @@
 
 import { GroupsType, useFetchGroupListQuery } from '@/api/hooks/useFetchGroupListQuery';
 import ListItem from '@/components/ListTap/ListItem';
+import { useGroupOverlayStore } from '@/utils/hooks/useGroupOverlayStore';
 import { useSearchParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ComponentPropsWithoutRef, MouseEvent, useCallback, useEffect, useState } from 'react';
 
 const MainListTap = () => {
   const searchParams = useSearchParams();
   const [currentTab, setCurrentTab] = useState(searchParams.get('tab') ?? 'today');
-  const [showOverlay, setShowOverlay] = useState(false);
+  const [isHover, setIsHover] = useState(false);
 
   const { data } = useFetchGroupListQuery();
 
   const handleClickListItem = (id: string) => {
     setCurrentTab(id);
   };
 
-  const handleMouseoverDigest = useCallback((hover: boolean) => {
-    setShowOverlay(hover);
+  const handleMouseEnterDigest = useCallback(() => {
+    setIsHover(true);
+  }, []);
+
+  const handleMouseLeaveDigest = useCallback(() => {
+    setIsHover(false);
   }, []);
 
   useEffect(() => {
@@ -34,15 +40,28 @@ const MainListTap = () => {
           name={'오늘의 인사이트'}
           isActive={currentTab === 'today'}
         />
-        <div onMouseOver={() => handleMouseoverDigest(true)} onMouseOut={() => handleMouseoverDigest(false)}>
-          <ListItem
-            onClick={() => handleClickListItem('Digest')}
-            key={'Digest'}
-            id={'Digest'}
-            name={'Digest'}
-            isActive={currentTab === 'Digest'}
-          />
-          {showOverlay ? <DigestTabOverlay data={data ? data.groups : []} /> : <></>}
+        <ListItem
+          onClick={() => handleClickListItem('탐색')}
+          key={'탐색'}
+          id={'search'}
+          name={'탐색    🔎'}
+          isActive={currentTab === 'search'}
+        />
+        <div
+          onMouseEnter={handleMouseEnterDigest}
+          onMouseLeave={handleMouseLeaveDigest}
+          style={{ position: 'relative' }}
+        >
+          <span className='relative' onMouseEnter={handleMouseEnterDigest} onMouseLeave={handleMouseLeaveDigest}>
+            <ListItem
+              onClick={() => handleClickListItem('Digest')}
+              key={'Digest'}
+              id={'Digest'}
+              name={'Digest'}
+              isActive={currentTab === 'Digest'}
+            />
+            {isHover && <DigestTabOverlay data={data ? data.groups : []} />}
+          </span>
         </div>
         <ListItem
           onClick={() => handleClickListItem('탐색')}
@@ -58,13 +77,19 @@ const MainListTap = () => {
 
 export default MainListTap;
 
-interface TabOverlayProps {
+interface TabOverlayProps extends ComponentPropsWithoutRef<'div'> {
   data: GroupsType;
 }
 
-const DigestTabOverlay = ({ data }: TabOverlayProps) => {
-  const handleGroupMake = () => {
-    console.log('클릭시 [마이페이지>구독관리>그룹생성 팝업] 랜딩');
+const DigestTabOverlay = ({ data, onMouseEnter, onMouseLeave }: TabOverlayProps) => {
+  const { setOpen } = useGroupOverlayStore();
+  const router = useRouter();
+
+  const handleGroupMake = (e: MouseEvent) => {
+    e.preventDefault();
+
+    setOpen(true);
+    router.push('/mypage/subscribe');
   };
 
   if (!data.length) {
@@ -95,7 +120,9 @@ const DigestTabOverlay = ({ data }: TabOverlayProps) => {
         background: 'var(--Color-Neutral-white, #FFF)',
         boxShadow: '0px 0px 12px 0px rgba(0, 0, 0, 0.25)',
       }}
-      className='absolute z-50 p-4 m-2 text-body2'
+      className='absolute z-50 p-4 text-body2'
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       {data.map(group => (
         <div key={group.name} className='pb-2'>

@@ -155,10 +155,20 @@ export const handlers = [
     return HttpResponse.json({
       groups: [
         {
-          groupId: 'mongo objecrt Id',
+          groupId: '7534132413243241',
           name: '그룹 이름',
           senders: [{ name: '발신인 이름', address: '발신인 주소' }],
         },
+        {
+          groupId: '1234132413243251',
+          name: '그룹 이름2',
+          senders: [{ name: '발신인 이름', address: '발신인 주소' }],
+        },
+        {
+          groupId: '1234132413243241',
+          name: '그룹 이름3',
+          senders: [{ name: '발신인 이름', address: '발신인 주소' }],
+        },
       ],
     });
   }),
@@ -247,6 +257,21 @@ export const handlers = [
     return HttpResponse.json(mailListData);
   }),
 
+  http.get('/inbox/subscriptions', () => {
+    return HttpResponse.json({
+      subscriptions: [
+        {
+          name: '[mock] LinkedIn',
+          address: '[email protected]',
+        },
+        {
+          name: '[mock] LinkedIn2',
+          address: '[email protected]',
+        },
+      ],
+    });
+  }),
+
   http.get('/inbox/subscriptions-list', () => {
     return HttpResponse.json({
       subscriptions: {

@@ -0,0 +1,14 @@
+import { createWithEqualityFn } from 'zustand/traditional';
+
+interface groupOverlayStoreProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const useGroupOverlayStore = createWithEqualityFn<groupOverlayStoreProps>()(
+  set => ({
+    open: false,
+    setOpen: (open: boolean) => set({ open }),
+  }),
+  Object.is,
+);
@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-function useThrottleCallback<Parameter extends any[]>(callback: (...rest: Parameter) => void, delay: number) {
+const useThrottleCallback = <Parameter extends any[]>(callback: (...rest: Parameter) => void, delay: number) => {
   const timerRef = useRef<NodeJS.Timeout>();
   const restRef = useRef<Parameter>();
 
@@ -21,6 +21,6 @@ function useThrottleCallback<Parameter extends any[]>(callback: (...rest: Parame
     clearTimeout(timerRef.current);
     timerRef.current = setTimeout(timeoutCallback, delay);
   };
-}
+};
 
 export default useThrottleCallback;