create user Board component and withUserConnected hoc

src/components/VolunteerBoard/Board.tsx

@@ -0,0 +1,15 @@
+import { FC, memo } from "react"
+import DayWishes from "./DayWishes/DayWishes"
+import DayWishesFormModal from "./DayWishesForm/DayWishesFormModal"
+import DDayInformations from "./DDayInformations/DDaysInformations"
+import withUserConnected from "../../utils/withUserConnected"
+
+const Board: FC = (): JSX.Element => (
+    <div>
+        <DayWishes />
+        <DayWishesFormModal />
+        <DDayInformations />
+    </div>
+)
+
+export default memo(withUserConnected(Board))

src/pages/Board/Board.tsx

@@ -5,10 +5,8 @@ import { useSelector } from "react-redux"
 import { AppThunk } from "../../store"
 import { fetchVolunteerDayWishesSetIfNeed } from "../../store/volunteerDayWishesSet"
 import { selectUserJwtToken } from "../../store/auth"
-import DDayInformations from "../../components/VolunteerBoard/DDayInformations/DDaysInformations"
-import DayWishes from "../../components/VolunteerBoard/DayWishes/DayWishes"
-import DayWishesFormModal from "../../components/VolunteerBoard/DayWishesForm/DayWishesFormModal"
 import Page from "../../components/Page/Page"
+import Board from "../../components/VolunteerBoard/Board"
 
 export type Props = RouteComponentProps
 
@@ -19,9 +17,7 @@ const BoardPage: FC<Props> = (): JSX.Element => {
     if (jwtToken) {
         return (
             <Page>
-                <DayWishes />
+                <Board />
-                <DayWishesFormModal />
-                <DDayInformations />
             </Page>
         )
     }

src/utils/withUserConnected.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { useSelector } from "react-redux"
+import { isUserConnected } from "../store/auth"
+
+function withUserConnected<T>(Component: React.ComponentType<T>) {
+    return (props: T): JSX.Element | null => {
+        const connected = useSelector(isUserConnected)
+        return connected ? <Component {...props} /> : null
+    }
+}
+
+export default withUserConnected