QA : 온보딩 페이지 디자인 QA 반영

src/components/ListTap/MainListTap.tsx

@@ -98,7 +98,9 @@ const DigestTabOverlay = ({ data }: TabOverlayProps) => {
       className='absolute z-50 p-4 m-2 text-body2'
     >
       {data.map(group => (
-        <div className='pb-2'>{group.name}</div>
+        <div key={group.name} className='pb-2'>
+          {group.name}
+        </div>
       ))}
       <div className='flex justify-end w-full cursor-pointer text-body2 text-blue' onClick={handleGroupMake}>
         + 뉴스레터 그룹 만들기

src/components/PageInteraction/Onboard/EmailListInteraction.tsx

@@ -26,6 +26,7 @@ const EmailListInteraction = ({ incomingSenders }: EmailListInteractionProps) =>
   const router = useRouter();
   const subscribtionMutation = useSubscribtionMutation();
   const isReady = selectedEmailList.length > 0;
+  const [isFirst, setIsFirst] = useState(true);
 
   useEffect(() => {
     // Initialize the set with unique email addresses from incomingSenders
@@ -44,7 +45,7 @@ const EmailListInteraction = ({ incomingSenders }: EmailListInteractionProps) =>
   };
 
   const handleSelectAll = () => {
-    if (selectedEmailList.length === incomingSenders.senders.length) {
+    if (selectedEmailList.length === emailSet.size) {
       setSelectedEmailList([]);
       return;
     }
@@ -65,6 +66,7 @@ const EmailListInteraction = ({ incomingSenders }: EmailListInteractionProps) =>
         incomingSenders.senders.find(sender => sender.from.address === Array.from(emailSet)[currentIndex + 1])!,
       );
     }
+    setIsFirst(false);
   };
 
   // Function to handle navigating to the next email
@@ -128,7 +130,7 @@ const EmailListInteraction = ({ incomingSenders }: EmailListInteractionProps) =>
                       <span className='text-darkgrey'> 뉴스레터에요.</span>
                     </span>
                     <span className='cursor-pointer text-blue' onClick={handleSelectAll}>
-                      전체선택
+                      {selectedEmailList.length === emailSet.size ? '전체 해제' : '전체 선택'}
                     </span>
                   </span>
                   <div className='flex flex-col h-full gap-2 overflow-auto noScrollbar'>
@@ -175,14 +177,22 @@ const EmailListInteraction = ({ incomingSenders }: EmailListInteractionProps) =>
                         onClick={handleNextArticle}
                         className='cursor-pointer'
                       />
-                      <FoldIconWithDirection
-                        width={24}
-                        height={24}
-                        rotate='down'
-                        fill={hasPrevArticle ? '#797979' : '#DBDBDB'}
-                        onClick={handlePrevArticle}
-                        className='cursor-pointer'
-                      />
+                      <div className='relative'>
+                        <FoldIconWithDirection
+                          width={24}
+                          height={24}
+                          rotate='down'
+                          fill={hasPrevArticle ? '#797979' : '#DBDBDB'}
+                          onClick={handlePrevArticle}
+                          className='cursor-pointer'
+                        />
+                        {isFirst && (
+                          <div className='absolute flex top-[calc(100%+4px)] -left-1 w-[69px] p-2 text-xs font-normal text-white bg-black rounded-lg -tracking-[0.48px] '>
+                            다음 발신인
+                            <div className='absolute bottom-full left-3 w-0 h-0 border-b-[4px] border-b-black border-x-[4px] border-x-transparent'></div>
+                          </div>
+                        )}
+                      </div>
                     </span>
                   </span>
                   <SubscribeButton