feat: add Object Detail page breadcrumb (#1962)

Closes #1814

front/src/pages/settings/SettingsObjectDetail.tsx

@@ -1,8 +1,13 @@
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 
+import { AppPath } from '@/types/AppPath';
+import { Breadcrumb } from '@/ui/breadcrumb/components/Breadcrumb';
 import { IconSettings } from '@/ui/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 
+import { activeObjectItems } from './constants/mockObjects';
 import { objectSettingsWidth } from './constants/objectSettings';
 
 const StyledContainer = styled.div`
@@ -10,8 +15,27 @@ const StyledContainer = styled.div`
   width: ${objectSettingsWidth};
 `;
 
-export const SettingsObjectDetail = () => (
-  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <StyledContainer />
-  </SubMenuTopBarContainer>
-);
+export const SettingsObjectDetail = () => {
+  const navigate = useNavigate();
+  const { pluralObjectName = '' } = useParams();
+  const activeObject = activeObjectItems.find(
+    (activeObject) => activeObject.name.toLowerCase() === pluralObjectName,
+  );
+
+  useEffect(() => {
+    if (!activeObject) navigate(AppPath.NotFound);
+  }, [activeObject, navigate]);
+
+  return (
+    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
+      <StyledContainer>
+        <Breadcrumb
+          links={[
+            { children: 'Objects', href: '/settings/objects' },
+            { children: activeObject?.name ?? '' },
+          ]}
+        />
+      </StyledContainer>
+    </SubMenuTopBarContainer>
+  );
+};