design(TemplateCard): 제목과 설명 사이 gap 추가

woowacourse-teams · Oct 24, 2024 · 4768e18 · 4768e18
1 parent 9b35548
commit 4768e18
Showing 1 changed file with 14 additions and 12 deletions.
diff --git a/frontend/src/components/TemplateCard/TemplateCard.tsx b/frontend/src/components/TemplateCard/TemplateCard.tsx
@@ -60,19 +60,21 @@ const TemplateCard = ({ template }: Props) => {
         </Flex>
 
         <Link to={END_POINTS.template(template.id)}>
-          <S.EllipsisTextWrapper>
-            <Text.XLarge color={theme.color.light.secondary_900} weight='bold'>
-              {title}
-            </Text.XLarge>
-          </S.EllipsisTextWrapper>
+          <Flex direction='column' gap='0.5rem'>
+            <S.EllipsisTextWrapper>
+              <Text.XLarge color={theme.color.light.secondary_900} weight='bold'>
+                {title}
+              </Text.XLarge>
+            </S.EllipsisTextWrapper>
 
-          <S.EllipsisTextWrapper>
-            {description ? (
-              <Text.Medium color={theme.color.light.secondary_600}>{description}</Text.Medium>
-            ) : (
-              <S.BlankDescription />
-            )}
-          </S.EllipsisTextWrapper>
+            <S.EllipsisTextWrapper>
+              {description ? (
+                <Text.Medium color={theme.color.light.secondary_600}>{description}</Text.Medium>
+              ) : (
+                <S.BlankDescription />
+              )}
+            </S.EllipsisTextWrapper>
+          </Flex>
         </Link>
       </Flex>