From 95a6457a68e6d67f2750655e41940c4529dfadd9 Mon Sep 17 00:00:00 2001
From: Matthew Song <songww1997@naver.com>
Date: Mon, 9 Sep 2024 14:20:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9A=B0=EC=B8=A1=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/ProgressBar/ProgressBar.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ProgressBar/ProgressBar.tsx b/src/app/components/ProgressBar/ProgressBar.tsx
index e20c321d..986f6bbf 100644
--- a/src/app/components/ProgressBar/ProgressBar.tsx
+++ b/src/app/components/ProgressBar/ProgressBar.tsx
@@ -8,6 +8,7 @@ import { IconArrow, IconCheckCircle, IconPerson } from '@/public/icons';
  * @param {number} participantNumber - 참여 인원 수
  * @param {boolean} hasParticipantNumber - 참여 인원 수 렌더링 여부
  * @param {boolean} hasOpeningConfirmed - 개설 확정 렌더링 여부
+ * @param {boolean} hasText - 우측 텍스트 (join now 혹은 Closed) 렌더링 여부
  */
 
 interface ProgressBarProps {
@@ -15,6 +16,7 @@ interface ProgressBarProps {
   capacity: number;
   hasParticipantNumber: boolean;
   hasOpeningConfirmed: boolean;
+  hasText: boolean;
 }
 
 const ProgressBar = ({
@@ -22,6 +24,7 @@ const ProgressBar = ({
   capacity,
   hasParticipantNumber,
   hasOpeningConfirmed,
+  hasText,
 }: ProgressBarProps) => {
   const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
   const isClosedGathering = participantNumber === capacity; // 참여 인원이 다 찬 경우 (boolean)
@@ -58,11 +61,15 @@ const ProgressBar = ({
       </div>
       {/* user action */}
       {isClosedGathering ? (
-        <div className='text-16 flex items-center font-semibold text-var-orange-400'>
+        <div
+          className={`${hasText ? 'block' : 'hidden'} text-16 flex items-center font-semibold text-var-orange-400`}
+        >
           Closed
         </div>
       ) : (
-        <div className='text-16 flex items-center gap-8 whitespace-nowrap font-semibold text-var-orange-600'>
+        <div
+          className={`${hasText ? 'block' : 'hidden'} text-16 flex items-center gap-8 whitespace-nowrap font-semibold text-var-orange-600`}
+        >
           join now
           <IconArrow className='h-[18px] w-[18px]' />
         </div>