[#101] ♻️ use state to label maps in team card

Author: KingNono1030

src/components/team/TeamRecruitmentCard.tsx

@@ -1,4 +1,6 @@
+import { recruitmentStatusMap } from '@/contants/stateToLabelMaps'
 import { TeamRecruitmentListItem } from '@/types/api/Team.types'
+import clsx from 'clsx'
 
 import { Chip } from '@/components/common/chip'
 import { Divider } from '@/components/common/divider'
@@ -24,7 +26,7 @@ export const TeamRecruitmentCard = ({
     createdAt,
   } = teamRecruitmentItem
   const { nickname, imageUrl } = writer
-  const activeRecruitmentLabel = teamIsActive ? '모집 중' : '모집 완료'
+  const activeRecruitmentLabel = recruitmentStatusMap[`${teamIsActive}`]
   const recruitmentNumLabel = `모집인원 : ${1}/${teamRecruitmentNum}`
   const teckStackLabel = (teamTechStack ?? [])
     .map(stack => `#${stack}`)
@@ -39,21 +41,9 @@ export const TeamRecruitmentCard = ({
         <Card.Title>{teamTitle}</Card.Title>
       </div>
       <div className='flex items-center gap-10'>
-        <Text.Body variant='body1' color='gray700' className='shrink-0'>
-          {teamPosition}
-        </Text.Body>
-        <Divider />
-        <Text.Body variant='body1' color='gray700' className='shrink-0'>
-          {recruitmentNumLabel}
-        </Text.Body>
-        <Divider />
-        <Text.Body
-          variant='body1'
-          color='gray700'
-          className='shrink overflow-x-hidden overflow-ellipsis'
-        >
-          {teckStackLabel}
-        </Text.Body>
+        <ItemWithDivider label={teamPosition} />
+        <ItemWithDivider label={recruitmentNumLabel} />
+        <ItemWithDivider label={teckStackLabel} isLast />
       </div>
       <div className='my-12 flex items-center gap-8'>
         <Card.Wrtier nickname={nickname} imageUrl={imageUrl} />
@@ -66,3 +56,29 @@ export const TeamRecruitmentCard = ({
     </Card>
   )
 }
+
+interface ItemWithDividerProps {
+  label: string
+  isLast?: boolean
+}
+
+const ItemWithDivider = ({
+  label,
+  isLast,
+}: ItemWithDividerProps): JSX.Element => (
+  <>
+    <Text.Body
+      variant='body1'
+      color='gray700'
+      className={clsx(
+        { 'shrink-0': !isLast },
+        {
+          'shrink overflow-x-hidden overflow-ellipsis': isLast,
+        }
+      )}
+    >
+      {label}
+    </Text.Body>
+    {!isLast && <Divider />}
+  </>
+)