전역 dialog 관련 상태 추가

Author: MU-Software

src/dialogs/index.tsx

@@ -0,0 +1,19 @@
+import React, { useCallback } from 'react'
+import { useSelector } from "react-redux"
+
+import { RootState } from "store"
+import { PossibleGlobalDialogTyle } from "store/Core"
+import { DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024, DIALOG_TYPE_PROGRAM_NOT_HELD_ON_2024 } from 'store/Core/dialog'
+import { ProgramNotHeldOn2024 } from './program'
+
+export const useGlobalDialog = () => {
+  const globalDialogState = useSelector<RootState, PossibleGlobalDialogTyle>((state) => state.core.globalDialog);
+  return useCallback((key: DIALOG_TYPE_PROGRAM_NOT_HELD_ON_2024) => globalDialogState === key, [globalDialogState]);
+};
+
+export const DialogCollection: React.FC = () => {
+  const dialogOpenMgr = useGlobalDialog();
+  return <>
+    <ProgramNotHeldOn2024 open={dialogOpenMgr(DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024)} />
+  </>
+}

src/dialogs/program.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+
+import { closeGlobalDialog } from 'store/Core'
+import styled from 'styled-components'
+
+export const ProgramNotHeldOn2024: React.FC<{open?: boolean}> = (props) => {
+  const dispatch = useDispatch()
+  return <dialog {...props}>
+    <DialogAside>
+      <div>
+        <h1>튜토리얼 및 스프린트 관련 안내</h1>
+        올해도 파이썬의 저변을 넓히는 활동의 하나로 튜토리얼 프로그램을 준비하고 있었으나,<br />
+        아쉽게도 올해는 내부 사정으로 인해 올해는 튜토리얼 프로그램이 진행되지 않음을 알려드립니다.<br />
+        <br />
+        이러한 안내를 드리게 되어 저희도 매우 아쉬운 마음이며,<br />
+        많은 파이써니스타 여러분들께 너른 양해를 구합니다.<br />
+      </div>
+      <br />
+      <DialogCloseButton onClick={() => dispatch(closeGlobalDialog())}>확인</DialogCloseButton>
+    </DialogAside>
+  </dialog>
+}
+
+const DialogAside = styled.aside`
+  background-color: #333;
+  padding: 1rem;
+  border-radius: 0.25rem;
+`
+
+const DialogCloseButton = styled.button`
+  width: 100%;
+  padding: 0.25rem;
+`

src/routes.tsx

@@ -29,6 +29,7 @@ const Router = () => {
         <Route path="*" element={<Navigate replace to={"/404"} />} />
       </Routes>
       <Footer />
+      <DialogCollection />
     </BrowserRouter>
   );
 };

src/store/Core/dialog.ts

@@ -0,0 +1,2 @@
+export const DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024 = "PROGRAM_NOT_HELD_ON_2024";
+export type DIALOG_TYPE_PROGRAM_NOT_HELD_ON_2024 = typeof DIALOG_CONST_PROGRAM_NOT_HELD_ON_2024;

src/store/Core/index.ts

@@ -1,23 +1,37 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit"
 
+import { DIALOG_TYPE_PROGRAM_NOT_HELD_ON_2024 } from "./dialog"
+
+export type PossibleLanguage = "KOR" | "ENG";
+export type PossibleGlobalDialogTyle = DIALOG_TYPE_PROGRAM_NOT_HELD_ON_2024 | null;
 export type CoreState = {
-  language: "KOR" | "ENG";
+  language: PossibleLanguage;
+  globalDialog: PossibleGlobalDialogTyle;
 };
 
 const initialState: CoreState = {
   language: "KOR",
+  globalDialog: null,
 };
 
 const core = createSlice({
   name: "core",
   initialState,
   reducers: {
+    // Set page language
     setLanguage: (state, { payload }: { payload: CoreState["language"] }) => {
       state.language = payload;
     },
+    // Show global dialog
+    openGlobalDialog: (state, { payload }: { payload: PossibleGlobalDialogTyle }) => {
+      state.globalDialog = payload;
+    },
+    closeGlobalDialog: (state) => {
+      state.globalDialog = null;
+    },
   },
 });
 
-export const { setLanguage } = core.actions;
+export const { setLanguage, openGlobalDialog, closeGlobalDialog } = core.actions;
 
 export default core.reducer;