Fix(client): 리마인드 시간 24시간 내에서만 카드 뜨도록 수정 (#171)

* fix: remind time이 24시간 내로 들어오는 아티클만 card ui 띄워주도록 수정

* feat: badge 컴포넌트 leftIcon interface 추가

* feat: remind badge 임시 아이콘 적용

* fix: badge interface 다시 수정

* feat: badge countNum 0 관련 guard 추가

Author: constantly-dev

apps/client/src/pages/remind/Remind.tsx

@@ -55,7 +55,18 @@ const Remind = () => {
     containerRef,
   } = useAnchoredMenu((anchor) => belowOf(anchor, 8));
 
-  const articlesToDisplay = data?.pages.flatMap((page) => page.articles) ?? [];
+  // const articlesToDisplay = data?.pages.flatMap((page) => page.articles) ?? [];
+
+  const articlesToDisplay =
+    data?.pages
+      .flatMap((page) => page.articles)
+      .filter((article) => {
+        const now = new Date().getTime();
+        const remindTime = new Date(article.remindAt).getTime();
+        const displayTimeLimit = 24 * 60 * 60 * 1000;
+
+        return remindTime > now && remindTime <= now + displayTimeLimit;
+      }) ?? [];
 
   const getItemTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
@@ -97,22 +108,23 @@ const Remind = () => {
     return <div>Loading...</div>;
   }
 
-  const unreadArticleCount = data?.pages[0]?.unreadArticleCount || 0;
-  const readArticleCount = data?.pages[0]?.readArticleCount || 0;
+  // TODO: 임시
+  // const unreadArticleCount = data?.pages[0]?.unreadArticleCount || 0;
+  // const readArticleCount = data?.pages[0]?.readArticleCount || 0;
 
   return (
     <div className="flex flex-col py-[5.2rem] pl-[8rem] pr-[5rem]">
       <p className="head3">리마인드</p>
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
           text="안 읽음"
-          countNum={unreadArticleCount}
+          // countNum={unreadArticleCount}
           onClick={() => handleBadgeClick('notRead')}
           isActive={activeBadge === 'notRead'}
         />
         <Badge
           text="읽음"
-          countNum={readArticleCount}
+          // countNum={readArticleCount}
           onClick={() => handleBadgeClick('read')}
           isActive={activeBadge === 'read'}
         />

packages/design-system/src/components/badge/Badge.tsx

@@ -42,9 +42,12 @@ const Badge = ({ text, countNum, isActive, onClick }: BadgeProps) => {
       <span className={BadgeTxtStyleVariants({ active: isActive })}>
         {text}
       </span>
-      <span className={BadgeStyleVariants({ active: isActive })}>
-        {countNum}
-      </span>
+
+      {typeof countNum === 'number' && countNum >= 0 && (
+        <span className={BadgeStyleVariants({ active: isActive })}>
+          {countNum}
+        </span>
+      )}
     </div>
   );
 };

packages/design-system/src/components/card/RemindCard.tsx

@@ -28,7 +28,8 @@ const RemindCard = ({
   const [displayTime, setDisplayTime] = useState('');
 
   useEffect(() => {
-    const endTime = new Date(timeRemaining).getTime() + 24 * 60 * 60 * 1000;
+    // const endTime = new Date(timeRemaining).getTime() + 24 * 60 * 60 * 1000;
+    const endTime = new Date(timeRemaining).getTime();
 
     const updateRemainingTime = () => {
       const now = new Date().getTime();