Merge pull request #214 from INtiful/fix/homin/KAN-133-gatherings-tag…

…-message fix: tag message 렌더링 수정
INtiful · Oct 18, 2024 · 481805b · 481805b
2 parents 89f1150 + 24c445b
commit 481805b
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 45 deletions.
diff --git a/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx b/src/app/(main)/gatherings/[id]/_component/GatheringDetail.tsx
@@ -12,6 +12,7 @@ import {
   ReviewsType,
 } from '@/types/data.type';
 import { UserData } from '@/types/client.type';
+import isGatheringFull from '@/app/(main)/gatherings/_helpers/isGatheringFull';
 
 interface GatheringDetailProps {
   gatheringInfo: GatheringInfoType;
@@ -32,6 +33,11 @@ const GatheringDetail = ({
     setCurrentPage(page);
   };
 
+  const isFull = isGatheringFull(
+    gatheringInfo.participantCount,
+    gatheringInfo.capacity,
+  );
+
   return (
     <>
       <div className='mx-auto h-full max-w-[1200px]'>
@@ -41,6 +47,7 @@ const GatheringDetail = ({
             <GatheringImage
               image={gatheringInfo.image}
               endTime={gatheringInfo.registrationEnd}
+              isFull={isFull}
             />
             <GatheringInfo
               name={gatheringInfo.name || ''}

diff --git a/src/app/(main)/gatherings/[id]/_component/GatheringImage.tsx b/src/app/(main)/gatherings/[id]/_component/GatheringImage.tsx
@@ -1,22 +1,25 @@
 'use client';
 
+import { useState } from 'react';
 import Image from 'next/image';
 
 import { IconAlarm } from '@/public/icons';
-import getDaysUntilRegistrationEnd from '@/utils/getDaysUntilRegistrationEnd';
-import getTagMessage from '@/utils/getTagMessage';
-import { useState } from 'react';
+import getDaysUntilRegistrationEnd from '@/app/(main)/gatherings/_helpers/getDaysUntilRegistrationEnd';
+import getTagMessage from '@/app/(main)/gatherings/_helpers/getTagMessage';
+import isClosingTagVisible from '@/app/(main)/gatherings/_helpers/isClosingTagVisible';
 
 interface GatheringImageProps {
   image: string;
   endTime: string;
+  isFull: boolean;
 }
 
-const GatheringImage = ({ image, endTime }: GatheringImageProps) => {
+const GatheringImage = ({ image, endTime, isFull }: GatheringImageProps) => {
   const [isLoading, setIsLoading] = useState(true);
 
-  const daysLeft = endTime ? getDaysUntilRegistrationEnd(endTime) : null;
-  const tagMessage = getTagMessage(daysLeft, endTime);
+  const daysLeft = getDaysUntilRegistrationEnd(endTime);
+  const tagMessage = getTagMessage(daysLeft, endTime, isFull);
+  const isRenderTag = isClosingTagVisible(daysLeft, isFull);
 
   return (
     <div className='relative h-[270px] w-full md:w-[50vw] lg:max-w-[486px]'>
@@ -34,7 +37,7 @@ const GatheringImage = ({ image, endTime }: GatheringImageProps) => {
         onLoadingComplete={() => setIsLoading(false)}
       />
 
-      {daysLeft !== null && daysLeft <= 7 && (
+      {isRenderTag && (
         <div className='absolute right-0 top-0 flex items-center gap-4 rounded-bl-[12px] rounded-tr-[20px] bg-orange-600 py-2 pl-4 pr-6 text-xs font-medium text-var-white'>
           <IconAlarm width='24' height='24' />
           <span className='text-12 font-semibold'>{tagMessage}</span>

diff --git a/src/app/(main)/gatherings/[id]/page.tsx b/src/app/(main)/gatherings/[id]/page.tsx
@@ -29,7 +29,6 @@ const GatheringsDetailPage = async ({
   };
 }) => {
   const gatheringInfo: GatheringInfoType = await getGatheringInfo(params.id);
-
   const gatheringParticipants: GatheringParticipantsType[] =
     gatheringInfo.participantCount >= 1
       ? await getGatheringParticipants(
@@ -40,7 +39,6 @@ const GatheringsDetailPage = async ({
   const reviews: ReviewsType[] = await getReviewList({
     gatheringId: params.id,
   });
-
   const userData: UserData | null = await getUserData();
 
   return (

diff --git a/src/utils/getDaysUntilRegistrationEnd.ts → ...s/_helpers/getDaysUntilRegistrationEnd.ts b/src/utils/getDaysUntilRegistrationEnd.ts → ...s/_helpers/getDaysUntilRegistrationEnd.ts
diff --git a/src/app/(main)/gatherings/_helpers/getTagMessage.ts b/src/app/(main)/gatherings/_helpers/getTagMessage.ts
@@ -0,0 +1,25 @@
+import { formatTimeHours } from '../../../../utils/formatDate';
+
+const getTagMessage = (
+  daysLeft: number | null,
+  endTime: string,
+  isGatheringFull?: boolean,
+) => {
+  if (isGatheringFull) {
+    return '마감된 모임입니다.';
+  }
+
+  if (daysLeft === null) return '';
+
+  if (daysLeft < 0) {
+    return '마감된 모임입니다.';
+  } else if (Object.is(daysLeft, -0)) {
+    return '마감된 모임입니다.';
+  } else if (daysLeft === 0) {
+    return `오늘 ${formatTimeHours(endTime)}시 마감`;
+  } else {
+    return `${daysLeft}일 후 마감`;
+  }
+};
+
+export default getTagMessage;
diff --git a/src/app/(main)/gatherings/_helpers/isClosingTagVisible.ts b/src/app/(main)/gatherings/_helpers/isClosingTagVisible.ts
@@ -0,0 +1,10 @@
+import { CLOSING_IN_A_WEEK } from '@/constants/common';
+
+const isClosingTagVisible = (
+  daysLeft: number,
+  isGatheringFull: boolean,
+): boolean => {
+  return daysLeft <= CLOSING_IN_A_WEEK || isGatheringFull;
+};
+
+export default isClosingTagVisible;
diff --git a/src/app/(main)/gatherings/_helpers/isGatheringFull.ts b/src/app/(main)/gatherings/_helpers/isGatheringFull.ts
@@ -0,0 +1,8 @@
+const isGatheringFull = (
+  participantCount: number,
+  capacity: number,
+): boolean => {
+  return participantCount >= capacity;
+};
+
+export default isGatheringFull;
diff --git a/src/app/components/CardList/CardList.test.tsx b/src/app/components/CardList/CardList.test.tsx
@@ -40,6 +40,14 @@ jest.mock('@/public/icons', () => ({
   IconPerson: () => <div data-testid='IconPerson' />,
 }));
 
+// 함수 모킹
+jest.mock('@/app/(main)/gatherings/_helpers/getTagMessage', () =>
+  jest.fn().mockReturnValue('오늘 15시 마감'),
+);
+jest.mock('@/app/(main)/gatherings/_helpers/isClosingTagVisible', () =>
+  jest.fn().mockReturnValue(true),
+);
+
 // 기본 렌더링 테스트
 describe('CardList Component', () => {
   const MOCK_DATA = {
@@ -92,8 +100,7 @@ describe('Tag Component Render', () => {
     };
 
     render(<CardList data={MOCK_DATA} />);
-    const tagElement = screen.getByText(/오늘 \d{1,2}시 마감/);
-    expect(tagElement).toBeInTheDocument();
+    expect(screen.getByText(/오늘 \d{1,2}시 마감/)).toBeInTheDocument();
   });
 });
 

diff --git a/src/app/components/CardList/CardList.tsx b/src/app/components/CardList/CardList.tsx
@@ -9,16 +9,15 @@ import {
   IconSaveDiscardBtn,
   IconSaveInactive,
 } from '@/public/icons';
-import {
-  formatDate,
-  formatTimeColon,
-  formatTimeHours,
-} from '@/utils/formatDate';
-import getDaysUntilRegistrationEnd from '@/utils/getDaysUntilRegistrationEnd';
+import { formatDate, formatTimeColon } from '@/utils/formatDate';
+import getDaysUntilRegistrationEnd from '@/app/(main)/gatherings/_helpers/getDaysUntilRegistrationEnd';
 import { GatheringType } from '@/types/data.type';
 import Tag from '@/app/components/Tag/Tag';
 import InfoChip from '@/app/components/Chip/InfoChip';
 import ProgressBar from '@/app/components/ProgressBar/ProgressBar';
+import getTagMessage from '@/app/(main)/gatherings/_helpers/getTagMessage';
+import isGatheringFull from '@/app/(main)/gatherings/_helpers/isGatheringFull';
+import isClosingTagVisible from '@/app/(main)/gatherings/_helpers/isClosingTagVisible';
 
 interface CardProps {
   data: GatheringType;
@@ -27,13 +26,16 @@ interface CardProps {
 }
 
 const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => {
+  const isChallengeEnded =
+    new Date(data.dateTime) <= new Date() ||
+    isGatheringFull(data.participantCount, data.capacity);
   const daysRemaining = getDaysUntilRegistrationEnd(data.registrationEnd);
-
-  // 모임의 날짜와 현재 날짜를 비교하여 태그 렌더링
-  const isRenderTag = daysRemaining >= 0 && daysRemaining <= 7;
-
-  // 모임의 날짜와 현재 날짜를 비교하여 마감 여부 표시
-  const isChallengeEnded = new Date(data.dateTime) <= new Date();
+  const tagMessage = getTagMessage(
+    daysRemaining,
+    data.registrationEnd,
+    isChallengeEnded,
+  );
+  const isRenderTag = isClosingTagVisible(daysRemaining, isChallengeEnded);
 
   const [isSavedActive, setSavedActive] = useState<boolean>(isSaved || false);
 
@@ -64,13 +66,7 @@ const CardList = ({ data, isSaved, handleButtonClick }: CardProps) => {
           quality={85}
           sizes='(max-width: 768px) 100vw, 280px'
         />
-        {isRenderTag && (
-          <Tag>
-            {daysRemaining === 0
-              ? `오늘 ${formatTimeHours(data.registrationEnd)}시 마감`
-              : `${daysRemaining}일 후 마감`}
-          </Tag>
-        )}
+        {isRenderTag && <Tag>{tagMessage}</Tag>}
       </div>
 
       {/* 정보 */}

diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -49,3 +49,6 @@ export const EXPIRY_TIME = 3600 * 1000; //1시간
 
 // 모임 만들기 내 모임 날짜 기한
 export const MAKING_GATHERING_DATE_DEADLINE = 365;
+
+// 일주일 이내 마감
+export const CLOSING_IN_A_WEEK = 7;
diff --git a/src/utils/getTagMessage.ts b/src/utils/getTagMessage.ts