최상단 메뉴 라우트 로직 추가 및 로그인 폼 적용

package.json

@@ -23,7 +23,6 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-intl": "^5.0.2",
-    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "recoil": "0.0.10",

src/CommonRouter.tsx

@@ -1,17 +1,31 @@
 import React, { Suspense, lazy, FunctionComponent } from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { routerMeta } from 'meta';
+import { assignRouteProps } from 'utils';
 
 interface ICustomRotuerProps {
 }
 
-const Home = lazy(() => import('containers/Home'));
-const About = lazy(() => import('containers/About'));
+const lazyImport = (containerName: string) => lazy(() => import(`containers/${containerName}`));
+
+interface AssignRoute {
+  component: any,
+  props: any
+}
+
+const assignRouter: AssignRoute[] = Object.keys(routerMeta).map((componentKey: string) => {
+  const props: any = assignRouteProps(routerMeta[componentKey])
+
+  return {
+    component: lazyImport(componentKey),
+    props 
+  }
+})
 
 const CustomRotuer: FunctionComponent<ICustomRotuerProps> = (props) => {
   return <Suspense fallback={<div>Loading...</div>}>
       <Switch>
-        <Route exact path="/" component={Home}/>
-        <Route path="/about" component={About}/>
+        {assignRouter.map(({ component, props }) => <Route key={props.path} component={component} {...props} />)}
       </Switch>
     </Suspense>;
 };

src/components/DefaultLayout/DefaultLayout.tsx

@@ -1,16 +1,16 @@
-import React, { FunctionComponent } from "react";
-
+import React, { FunctionComponent, useEffect, useMemo } from "react";
 import { Layout, Menu, Breadcrumb } from "antd";
-
 import { useIntl } from "react-intl";
+import { routerMeta } from 'meta';
 
 import {
   UserOutlined,
   LaptopOutlined,
   NotificationOutlined,
 } from "@ant-design/icons";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import LanguageSelector from "components/LanguageSelector";
+import { assignRouteProps } from "utils";
 
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
@@ -27,9 +27,31 @@ const menuStyle = {
   display: 'flex'
 }
 
+const defaultMenus = Object.keys(routerMeta).reduce((prev: any[], componentKey: string) => {
+  const { path } = assignRouteProps(routerMeta[componentKey])
+  const slashLength: number = (path.match(/\//gi) || []).length
+  if (slashLength === 1) {
+    return [ ...prev, { componentKey, path } ]
+  } else {
+    return prev
+  }
+}, [])
+
 const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
   const { children } = props;
   const { formatMessage: fm } = useIntl();
+  const location  = useLocation();
+
+  useEffect(() => {
+    console.log('location', location)
+  }, [location])
+
+  const pathDom = useMemo(() => {
+    const { pathname } = location
+    const pathArray = pathname.split('/')
+    const emptyToSpace = (text: string) => text === '' ? ' ' : text
+    return pathArray.map(path => <Breadcrumb.Item key={path}>{emptyToSpace(path)}</Breadcrumb.Item>)
+  }, [location])
 
   return (
     <Layout style={defaultStyle}>
@@ -38,14 +60,11 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
           {fm({ id: "title" })}
         </div>
         <Menu theme="dark" mode="horizontal" style={menuStyle} defaultSelectedKeys={["1"]}>
-          <Menu.Item key="1">
-            <Link to="/">Home</Link>
-          </Menu.Item>
-          <Menu.Item key="2">
-            <Link to="/about">About</Link>
-          </Menu.Item>
+          {defaultMenus.map(({ componentKey, path }) => <Menu.Item key={componentKey}>
+            <Link to={path}>{componentKey}</Link>
+          </Menu.Item>)}
 
-          <Menu.Item key="3" disabled style={{ opacity: 1, marginLeft: 'auto' }}>
+          <Menu.Item key="language-selector" disabled style={{ opacity: 1, marginLeft: 'auto' }}>
             <LanguageSelector />
           </Menu.Item>
         </Menu>
@@ -84,9 +103,7 @@ const DefaultLayout: FunctionComponent<IDefaultLayoutProps> = (props) => {
         </Sider>
         <Layout style={{ padding: "0 24px 24px" }}>
           <Breadcrumb style={{ margin: "16px 0" }}>
-            <Breadcrumb.Item>Home</Breadcrumb.Item>
-            <Breadcrumb.Item>List</Breadcrumb.Item>
-            <Breadcrumb.Item>App</Breadcrumb.Item>
+            {pathDom}
           </Breadcrumb>
           <Content
             className="site-layout-background"

src/components/LanguageSelector/LanguageSelector.tsx

@@ -13,7 +13,7 @@ const LanguageSelector: FunctionComponent = () => {
 
   const dom = useMemo<ReactElement[]>(() => {
     const languages: Lang[] = Object.keys(messages) as Lang[]
-    return languages.map((lang: Lang) => <Option value={lang}>{fm({ id: lang })}</Option>)
+    return languages.map((lang: Lang) => <Option key={lang} value={lang}>{fm({ id: lang })}</Option>)
   }, [fm])
 
   return <Select

src/components/LoginForm/LoginForm.tsx

@@ -0,0 +1,62 @@
+import React, { FunctionComponent, useCallback } from "react";
+
+import { Form, Input, Button, Checkbox } from "antd";
+
+interface ILoginFormProps {}
+
+const layout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 18 },
+};
+
+const tailLayout = {
+  wrapperCol: { offset: 6, span: 18 },
+};
+
+const LoginForm: FunctionComponent<ILoginFormProps> = (props) => {
+  const onFinish = useCallback((values: any) => {
+    console.log("Success:", values);
+  }, []);
+
+  const onFinishFailed = useCallback((errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  }, []);
+
+  return (
+    <Form
+      {...layout}
+      name="basic"
+      initialValues={{ remember: true }}
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+    >
+      <Form.Item
+        label="Username"
+        name="username"
+        rules={[{ required: true, message: "Please input your username!" }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="Password"
+        name="password"
+        rules={[{ required: true, message: "Please input your password!" }]}
+      >
+        <Input.Password />
+      </Form.Item>
+
+      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
+        <Checkbox>Remember me</Checkbox>
+      </Form.Item>
+
+      <Form.Item {...tailLayout}>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default LoginForm;

src/components/LoginForm/index.ts

@@ -0,0 +1,2 @@
+import LoginForm from './LoginForm'
+export default LoginForm

src/containers/Login/Login.tsx

@@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react';
+import LoginForm from 'components/LoginForm';
+
+interface ILoginProps {
+}
+
+const Login: FunctionComponent<ILoginProps> = (props) => {
+  return <LoginForm />;
+};
+
+export default Login;

src/containers/Login/index.ts

@@ -0,0 +1,2 @@
+import Login from './Login'
+export default Login

src/meta/index.ts

@@ -0,0 +1 @@
+export { default as routerMeta } from './routerMeta'

src/meta/routerMeta.ts

@@ -0,0 +1,11 @@
+import { RouteProps } from "react-router"
+
+export type RouterMetaType = { [key: string] : (string | Omit<RouteProps, 'component'>) } 
+
+const routerMeta: RouterMetaType = {
+  Home: { path: '/', exact: true },
+  About: '/about',
+  Login: '/login'
+}
+
+export default routerMeta

src/utils/assignRouteProps/assignRouteProps.ts

@@ -0,0 +1,3 @@
+const assignRouteProps = (props: any) => typeof props === 'object' ? props : ({ path: props })
+
+export default assignRouteProps

src/utils/assignRouteProps/index.ts

@@ -0,0 +1,2 @@
+import assignRouteProps from './assignRouteProps'
+export default assignRouteProps

src/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as assignRouteProps } from './assignRouteProps'
+export { default as range } from './range'

src/utils/range/index.ts

@@ -0,0 +1,2 @@
+import range from './range'
+export default range

src/utils/range/range.ts

@@ -0,0 +1,5 @@
+const range = (x: number, y: number) => Array.from((function *() {
+  while (x <= y) yield x++;
+})());
+
+export default range

tsconfig.paths.json

@@ -7,7 +7,9 @@
       "meta/*": ["meta/*"],
       "state/*": ["state/*"],
       "locale/*": ["locale/*"],
-      "interface/*": ["interface/*"]
+      "interface/*": ["interface/*"],
+      "utils/*": ["utils/*"],
+      "utils": ["utils"]
     }
   }
 }