From b514f2aa822c8df97b83c31b5cf24f660aa22584 Mon Sep 17 00:00:00 2001
From: ImxYJL <111052302+ImxYJL@users.noreply.github.com>
Date: Fri, 20 Sep 2024 17:35:42 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20feature:=20Breadcrumb=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=B6=94=EA=B0=80=20(#645)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Breadcrumb 컴포넌트에 반응형 코드 추가

* chore: 폰트 크기에 theme 반영
---
 frontend/src/components/common/Breadcrumb/styles.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/components/common/Breadcrumb/styles.ts b/frontend/src/components/common/Breadcrumb/styles.ts
index fb48378c1..ac47b8499 100644
--- a/frontend/src/components/common/Breadcrumb/styles.ts
+++ b/frontend/src/components/common/Breadcrumb/styles.ts
@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import media from '@/utils/media';
+
 export const BreadcrumbList = styled.ul`
   display: flex;
 
@@ -7,6 +9,11 @@ export const BreadcrumbList = styled.ul`
   padding: ${({ theme }) => theme.breadcrumbSize.paddingLeft} 0 0 2.5rem;
 
   font-size: 1.5rem;
+
+  ${media.xSmall} {
+    ${({ theme }) => theme.fontSize.small};
+  }
+
   list-style: none;
 `;
 
@@ -17,6 +24,10 @@ export const BreadcrumbItem = styled.li`
   &:not(:last-child)::after {
     content: '/';
     margin: 0 2rem;
+
+    ${media.xSmall} {
+      margin: 0 1rem;
+    }
   }
 
   &:last-child {