refact: 발송 예약 메일과 미발송 예약 메일로 UI 변경

Author: Yejiin21

src/pages/dashboard/ui/mail/MailBoxPage.tsx

@@ -7,10 +7,11 @@ import { mailInfo } from '../../../../shared/types/mailInfoType';
 import EmailDeleteMoal from '../../../../widgets/dashboard/ui/EmailDeleteModal';
 
 const MailBoxPage = () => {
-  const [listType, setListType] = useState<'all' | 'pending'>('all');
+  const [listType, setListType] = useState<'completed' | 'pending'>('completed');
   const [isModalOpen, setIsModalOpen] = useState(false);
   const currentDate = new Date();
 
+  const completedMails = mailInfo.filter(mail => new Date(mail.date) < currentDate);
   const pendingMails = mailInfo.filter(mail => new Date(mail.date) > currentDate);
 
   return (
@@ -22,17 +23,17 @@ const MailBoxPage = () => {
         </div>
         <div className="flex gap-3 font-semibold text-15">
           <TextButton
-            label="모든 메일"
-            onClick={() => setListType('all')}
-            className={listType === 'all' ? 'text-main' : ''}
+            label="발송 예약 메일"
+            onClick={() => setListType('completed')}
+            className={listType === 'completed' ? 'text-main' : ''}
           />
           <TextButton
             label="미발송 예약 메일"
             onClick={() => setListType('pending')}
             className={listType === 'pending' ? 'text-main' : ''}
           />
         </div>
-        {(listType === 'all' ? mailInfo : pendingMails).map(mail => (
+        {(listType === 'completed' ? completedMails : pendingMails).map(mail => (
           <SentMailCard
             key={mail.id}
             mail={mail}