bugfix/icdc 3694

src/components/Breadcrumb/BreadcrumbView.styled.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div({
+  color: '#5e8ca5',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+export const BreadcrumbNavLink = styled(Link)({
+  paddingLeft: '2px',
+  paddingRight: '2px',
+  textDecoration: 'none',
+  color: '#0B4E75',
+  fontFamily: 'Lato',
+  fontWeight: '700',
+  fontSize: '12px',
+  letterSpacing: '0.025em',
+});
+
+export const BreadcrumbSpan = styled.span({
+  paddingLeft: '2px',
+  paddingRight: '2px',
+  textDecoration: 'none',
+  color: '#0B4E75',
+  fontFamily: 'Lato',
+  fontWeight: '500',
+  fontSize: '12px',
+  letterSpacing: '0.025em',
+});

src/components/Breadcrumb/BreadcrumbView.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  BreadcrumbNavLink,
+  BreadcrumbSpan,
+  Container,
+} from './BreadcrumbView.styled';
+
+export interface BreadcrumbData {
+  name: string | undefined | null;
+  to?: string;
+  isALink: boolean;
+}
+interface CustomBreadcrumbProps {
+  data: BreadcrumbData[];
+}
+
+const CustomBreadcrumb: React.FC<CustomBreadcrumbProps> = ({ data }) => {
+  return (
+    <Container>
+      {data
+        .reduce<React.ReactNode[]>((acc, current, index) => {
+          if (current.isALink && current.to) {
+            acc.push(
+              <BreadcrumbNavLink to={current.to}>
+                {current.name}
+              </BreadcrumbNavLink>
+            );
+          } else {
+            acc.push(<BreadcrumbSpan>{current.name}</BreadcrumbSpan>);
+          }
+          if (index < data.length - 1) {
+            acc.push(<div style={{ fontSize: '15px' }}>{'>'}</div>);
+          }
+          return acc;
+        }, [])
+        .map(item => item)}
+    </Container>
+  );
+};
+
+export default CustomBreadcrumb;