chore: libraries-test에 폴딩 네브바 예시 추가

packages/libraries-test/package.json

@@ -38,6 +38,7 @@
     "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
+    "@musma/eslint-config-react": "^0.1.16",
     "@babel/core": "7.20.12",
     "@emotion/babel-plugin": "^11.10.5",
     "@types/lodash-es": "^4.17.6",

packages/libraries-test/src/App.tsx

@@ -1,6 +1,9 @@
-import { MusmaProvider, DefaultTheme } from '@musma/react-component'
+import { Suspense } from 'react'
+import { RouterProvider } from 'react-router-dom'
 
-import { Component } from './Component'
+import { MusmaProvider, DefaultTheme, LoadingScreen } from '@musma/react-component'
+
+import { router } from './routes'
 
 const theme = {
   ...DefaultTheme,
@@ -19,7 +22,9 @@ const theme = {
 export const App = () => {
   return (
     <MusmaProvider theme={theme}>
-      <Component />
+      <Suspense fallback={<LoadingScreen />}>
+        <RouterProvider router={router} />
+      </Suspense>
     </MusmaProvider>
   )
 }

packages/libraries-test/src/Component.tsx

@@ -62,3 +62,5 @@ export const Component = () => {
     </Box>
   )
 }
+
+export default Component

packages/libraries-test/src/layout/AppLayout.tsx

@@ -0,0 +1,87 @@
+import { Outlet } from 'react-router-dom'
+
+import { useTheme } from '@emotion/react'
+import {
+  AppShell,
+  Header,
+  HeaderLeftSection,
+  HeaderRightSection,
+  NavBar,
+  NavBarLink,
+  Image,
+} from '@musma/react-component'
+import { FillBookmarkIcon, FillAlarmIcon } from '@musma/react-icons'
+
+import musma_logo from './images/logo.svg'
+
+export const AppLayout = () => {
+  const theme = useTheme()
+
+  const menus = [
+    {
+      label: '홈',
+      icon: () => <FillBookmarkIcon color="white" />,
+      to: '/',
+    },
+    {
+      label: 'Sample',
+      icon: () => <FillAlarmIcon color="white" />,
+      children: [
+        {
+          label: 'Sample1',
+          to: '/1',
+        },
+        {
+          label: 'Sample2',
+          to: '/2',
+        },
+        {
+          label: 'Sample3',
+          to: '/3',
+        },
+      ],
+    },
+  ]
+
+  return (
+    <AppShell
+      header={
+        <Header>
+          <HeaderLeftSection
+            css={{
+              backgroundColor: theme.colors.blue.main,
+            }}
+            logo={<Image src={musma_logo} alt="무스마 로고...가 아니넹 ㅋ" width="100%" />}
+          ></HeaderLeftSection>
+          <HeaderRightSection isFoldingMode>메뉴지롱 메롱메롱</HeaderRightSection>
+        </Header>
+      }
+      navBar={
+        <NavBar
+          items={menus}
+          css={{
+            backgroundColor: theme.colors.blue.main,
+            '& p, svg': {
+              color: 'white',
+            },
+            '& p': {
+              paddingLeft: 8,
+            },
+            '& .active > div': {
+              backgroundColor: 'hsla(0, 100%, 100%, 0.1)',
+            },
+            '& a div:hover': {
+              backgroundColor: 'hsla(0, 100%, 100%, 0.1)',
+            },
+          }}
+        >
+          {/* NavBar에 items를 넘겼기때문에 아래 children 들은 무시됩니다 */}
+          <NavBarLink to="/" label="meme" />
+          <NavBarLink to="/" label="meme" />
+        </NavBar>
+      }
+    >
+      <Outlet />
+    </AppShell>
+  )
+}

packages/libraries-test/src/layout/index.ts

@@ -1,2 +1 @@
-export * from './AppContainer'
-export * from './AuthContainer'
+export * from './AppLayout'

packages/libraries-test/src/main.tsx

@@ -1,15 +1,15 @@
 import { StrictMode } from 'react'
-import { render } from 'react-dom'
+
+import { createRoot } from 'react-dom/client'
 
 import { App } from './App'
 
-const rootElement = document.getElementById('root')
+const container = document.getElementById('root')
 
-if (rootElement) {
-  render(
+if (container) {
+  createRoot(container).render(
     <StrictMode>
       <App />
     </StrictMode>,
-    rootElement,
   )
 }

packages/libraries-test/src/pages/Sample1.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@musma/react-component'
+
+const Sample1 = () => {
+  return <Box>Sample1</Box>
+}
+
+export default Sample1

packages/libraries-test/src/pages/Sample2.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@musma/react-component'
+
+export const Sample2 = () => {
+  return <Box>Sample2</Box>
+}
+
+export default Sample2

packages/libraries-test/src/pages/Sample3.tsx

@@ -0,0 +1,7 @@
+import { Box } from '@musma/react-component'
+
+export const Sample3 = () => {
+  return <Box>Sample3</Box>
+}
+
+export default Sample3

packages/libraries-test/src/routes/RoutePaths.ts

@@ -0,0 +1,6 @@
+export const RoutePaths = {
+  홈: '/',
+  샘플1: '/1',
+  샘플2: '/2',
+  샘플3: '/3',
+}

packages/libraries-test/src/routes/Router.tsx

@@ -0,0 +1,63 @@
+import { lazy } from 'react'
+import { createBrowserRouter } from 'react-router-dom'
+
+import { LoadingScreen } from '@musma/react-component'
+
+import { AppLayout } from 'src/layout'
+
+import { RoutePaths } from './RoutePaths'
+
+const P_홈 = lazy(() => import('src/Component'))
+const P_샘플1 = lazy(() => import('src/pages/Sample1'))
+const P_샘플2 = lazy(() => import('src/pages/Sample2'))
+const P_샘플3 = lazy(() => import('src/pages/Sample3'))
+
+export const router = createBrowserRouter([
+  {
+    path: RoutePaths.홈,
+    element: <AppLayout />,
+    errorElement: <LoadingScreen type="fallback" />,
+    children: [
+      {
+        path: RoutePaths.홈,
+        element: <P_홈 />,
+        handle: {
+          breadcrumb: {
+            label: '홈',
+            to: RoutePaths.홈,
+          },
+        },
+      },
+      {
+        path: RoutePaths.샘플1,
+        element: <P_샘플1 />,
+        handle: {
+          breadcrumb: {
+            label: '샘플1',
+            to: RoutePaths.샘플1,
+          },
+        },
+      },
+      {
+        path: RoutePaths.샘플2,
+        element: <P_샘플2 />,
+        handle: {
+          breadcrumb: {
+            label: '샘플2',
+            to: RoutePaths.샘플2,
+          },
+        },
+      },
+      {
+        path: RoutePaths.샘플3,
+        element: <P_샘플3 />,
+        handle: {
+          breadcrumb: {
+            label: '샘플3',
+            to: RoutePaths.샘플3,
+          },
+        },
+      },
+    ],
+  },
+])

packages/libraries-test/src/routes/index.ts

@@ -0,0 +1,2 @@
+export * from './RoutePaths'
+export * from './Router'

packages/react-component/src/Component.tsx

@@ -239,6 +239,7 @@ const Component = () => {
             },
           }}
         >
+          {/* NavBar에 items를 넘겼기때문에 아래 children 들은 무시됩니다 */}
           <NavBarLink to="/" label="meme" />
           <NavBarLink to="/" label="meme" />
         </NavBar>