feat: 공통 컴포넌트 추가 생성

web-app/app/shared/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,58 @@
+import type { FC } from 'react';
+import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs } from 'react-aria-components';
+
+export interface BreadcrumbsProps {
+  items: string[];
+}
+const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
+  const { items } = props;
+
+  return (
+    <nav aria-label="Breadcrumb">
+      <AriaBreadcrumbs className="flex items-center gap-2.5">
+        <AriaBreadcrumb aria-label="홈">
+          <svg
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="19"
+            height="18"
+            viewBox="0 0 19 18"
+            fill="none"
+          >
+            <path
+              d="M6.75 14.4545H4.25V7.83333L9.25 4L14.25 7.83333V14.4545H11.75"
+              stroke="#6C7789"
+              strokeLinecap="square"
+            />
+            <path d="M10.8381 12.9615V10.3633H7.65625V12.9615" stroke="#6C7789" />
+          </svg>
+        </AriaBreadcrumb>
+        {items.map((item, index) => (
+          <AriaBreadcrumb
+            className="flex items-center gap-2.5 text-xs text-dabeeo-black-47 data-current:text-dabeeo-black-22"
+            key={`breadcrumb-${index}-${item}`}
+          >
+            <>
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="6"
+                height="8"
+                viewBox="0 0 6 8"
+                fill="none"
+              >
+                <path
+                  d="M2.70722 4.00064L0.25 1.54349L1.4556 0.337891L5.12572 4.00064L1.45572 7.66347L0.250117 6.45786L2.70722 4.00064Z"
+                  fill="#6C7789"
+                />
+              </svg>
+              {item}
+            </>
+          </AriaBreadcrumb>
+        ))}
+      </AriaBreadcrumbs>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;