Merge pull request #1512 from 42organization/agenda

[test-deploy] 아젠다 기능 구현 테스트(재)

.github/PULL_REQUEST_TEMPLATE.md

@@ -5,10 +5,19 @@
   3. 새로운 모듈 설치시 PR message에 기재할 것.
   4. PR 올리기전에 branch 반드시 확인할 것.
  -->
- ## 📌 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
-  -
- ## 💻 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
-  -
- ## ✅ 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
-  -
-
+
+## 📌 개요 <!-- PR내용에 대해 축약해서 적어주세요. -->
+
+-
+
+## 💻 작업사항 <!-- PR내용에 대해 상세설명이 필요하다면 이 부분에 기재 해주세요. -->
+
+-
+
+## ✅ 변경로직 <!-- 고친 사항을 적어주세요. 재PR 시에만 사용해 주세요! (재PR 아닌 경우 삭제) -->
+
+-
+
+## 💡관련 Issue <!-- 관련 Issue 번호를 기록해주세요. close가 필요한 경우에는 close #[이슈번호]를 해주세요 -->
+
+-

.gitignore

@@ -42,4 +42,7 @@ yarn-error.log*
 .eslintcache
 
 #cypressConfig
-cypress.config.*
+cypress.config.*
+
+#siwolee: ignore local file I can't remove
+*anima*

.storybook/preview.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import { StoryFn } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
+import { QueryClient } from 'react-query';
+import { QueryClientProvider } from 'react-query';
+import 'styles/globals.css';
+
+const queryClient = new QueryClient();
 
 const preview: Preview = {
   parameters: {
@@ -13,14 +18,39 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      default: 'purple',
-      values: [{ name: 'purple', value: '#301451' }],
+      default: 'light-bg',
+      values: [
+        { name: 'purple', value: '#301451' },
+        {
+          name: 'light-bg',
+          value: 'linear-gradient(180deg, #c9c9c9 0%, #6d5b93 100%)',
+        },
+        {
+          name: 'dark-bg',
+          value: 'linear-gradient(180deg, #6d5b93 0%, #301451 100%)',
+        },
+      ],
     },
   },
   decorators: [
     (Story: StoryFn) => (
       <RecoilRoot>
-        <Story />
+        <QueryClientProvider client={queryClient}>
+          <button
+            onClick={() => {
+              const theme = document.documentElement.getAttribute('data-theme');
+              if (theme === 'dark') {
+                document.documentElement.setAttribute('data-theme', 'light');
+                return;
+              } else {
+                document.documentElement.setAttribute('data-theme', 'dark');
+              }
+            }}
+          >
+            theme
+          </button>
+          <Story />
+        </QueryClientProvider>
       </RecoilRoot>
     ),
   ],

Layout/AdminLayout.tsx

@@ -0,0 +1,37 @@
+import { usePathname } from 'next/navigation';
+import AdminReject from 'components/admin/AdminReject';
+import AdminLayout from 'components/admin/Layout';
+import AgendaModalProvider from 'components/agenda/modal/AgendaModalProvider';
+import ModalProvider from 'components/takgu/modal/ModalProvider';
+import { useUser } from 'hooks/agenda/Layout/useUser';
+
+type AdminLayoutProps = {
+  children: React.ReactNode;
+};
+
+function AdminAppLayout({ children }: AdminLayoutProps) {
+  const user = useUser();
+  const presentPath = usePathname();
+
+  // 사용자 정보가 없거나 관리자가 아닐 경우
+  if (!user || !user.intraId) return null;
+
+  if (!user.isAdmin) return <AdminReject />;
+
+  // 모달 제공자 결정
+  let ModalProviderComponent;
+  if (presentPath.includes('admin/takgu')) {
+    ModalProviderComponent = ModalProvider;
+  } else if (presentPath.includes('admin/agenda')) {
+    ModalProviderComponent = AgendaModalProvider;
+  }
+
+  return (
+    <AdminLayout>
+      {children}
+      {ModalProviderComponent && <ModalProviderComponent />}
+    </AdminLayout>
+  );
+}
+
+export default AdminAppLayout;

Layout/AgendaLayout.tsx

@@ -0,0 +1,40 @@
+import { instanceInAgenda } from 'utils/axios';
+import AgendaHeader from 'components/agenda/Layout/AgendaHeader';
+import AgendaModalProvider from 'components/agenda/modal/AgendaModalProvider';
+import Footer from 'components/takgu/Layout/Footer';
+import { useUser } from 'hooks/agenda/Layout/useUser';
+import useAxiosWithToast from 'hooks/useAxiosWithToast';
+import styles from 'styles/agenda/Layout/Layout.module.scss';
+
+type AgendaLayoutProps = {
+  children: React.ReactNode;
+};
+
+function AgendaAppLayout({ children }: AgendaLayoutProps) {
+  useAxiosWithToast(instanceInAgenda); // API의 성공 실패 스낵바로 알리는 기능
+
+  const user = useUser();
+
+  if (!user || !user.intraId) return null;
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <AgendaHeader />
+      <div className={styles.background}></div>
+      <div className={styles.app}>
+        {children}
+        <Footer />
+        <AgendaModalProvider />
+      </div>
+      <button onClick={scrollToTop} className={styles.floatingButton}>
+        ↑
+      </button>
+    </>
+  );
+}
+
+export default AgendaAppLayout;

Layout/LayoutProvider.tsx

@@ -0,0 +1,27 @@
+import AdminAppLayout from 'Layout/AdminLayout';
+import AgendaAppLayout from 'Layout/AgendaLayout';
+import TakguAppLayout from 'Layout/TakguLayout';
+import { usePathname } from 'hooks/agenda/Layout/usePathname';
+
+type LayoutProviderProps = {
+  children: React.ReactNode;
+};
+
+// 현재 페이지가 어떤 레이아웃을 사용할지 결정
+// 로그인 스테이트 등은 각 레이아웃에서 확인
+const LayoutProvider = ({ children }: LayoutProviderProps) => {
+  const app = usePathname();
+  switch (app) {
+    case '':
+    case 'agenda':
+      return <AgendaAppLayout>{children}</AgendaAppLayout>;
+    case 'takgu':
+      return <TakguAppLayout>{children}</TakguAppLayout>;
+    case 'admin':
+      return <AdminAppLayout>{children}</AdminAppLayout>;
+    default:
+      return <>{children}</>;
+  }
+};
+
+export default LayoutProvider;

Layout/TakguLayout.tsx

@@ -0,0 +1,96 @@
+import { useRecoilValue } from 'recoil';
+import { openCurrentMatchState } from 'utils/recoil/takgu/match';
+import AdminReject from 'components/admin/AdminReject';
+import AdminLayout from 'components/admin/Layout';
+import CurrentMatch from 'components/takgu/Layout/CurrentMatch';
+import Footer from 'components/takgu/Layout/Footer';
+import Header from 'components/takgu/Layout/Header';
+import HeaderStateContext from 'components/takgu/Layout/HeaderContext';
+import MainPageProfile from 'components/takgu/Layout/MainPageProfile';
+import Megaphone from 'components/takgu/Layout/MegaPhone';
+import RecruitLayout from 'components/takgu/recruit/RecruitLayout';
+import Statistics from 'pages/takgu/statistics';
+import { usePathname } from 'hooks/agenda/Layout/usePathname';
+import useAnnouncementCheck from 'hooks/takgu/Layout/useAnnouncementCheck';
+import useGetUserSeason from 'hooks/takgu/Layout/useGetUserSeason';
+import useLiveCheck from 'hooks/takgu/Layout/useLiveCheck';
+import useSetAfterGameModal from 'hooks/takgu/Layout/useSetAfterGameModal';
+import { useUser } from 'hooks/takgu/Layout/useUser';
+import useAxiosResponse from 'hooks/useAxiosResponse';
+import styles from 'styles/takgu/Layout/Layout.module.scss';
+import PlayButton from '../components/takgu/Layout/PlayButton';
+import UserLayout from '../components/takgu/Layout/UserLayout';
+import ModalProvider from '../components/takgu/modal/ModalProvider';
+import CustomizedSnackbars from '../components/toastmsg/toastmsg';
+
+type TakguLayoutProps = {
+  children: React.ReactNode;
+};
+
+function TakguLayout({ children }: TakguLayoutProps) {
+  const user = useUser();
+  const presentPath = usePathname();
+  const openCurrentMatch = useRecoilValue(openCurrentMatchState);
+
+  useAxiosResponse();
+  useGetUserSeason(presentPath);
+  useSetAfterGameModal();
+  useLiveCheck(presentPath);
+  useAnnouncementCheck(presentPath);
+
+  if (!user || !user.intraId) return null;
+
+  switch (true) {
+    case presentPath.includes('takgu/admin'):
+      if (!user.isAdmin) return <AdminReject />;
+      return <AdminLayout>{children}</AdminLayout>;
+
+    case presentPath.includes('takgu/recruit'):
+      return <RecruitLayout>{children}</RecruitLayout>;
+
+    case presentPath === 'takgu/statistics' && user.isAdmin:
+      return (
+        <UserLayout>
+          <Statistics />
+        </UserLayout>
+      );
+
+    case presentPath.includes('takgu'):
+      return (
+        <>
+          <UserLayout>
+            <HeaderStateContext>
+              <Header />
+            </HeaderStateContext>
+            <PlayButton />
+            <div className={styles.topInfo}>
+              <Megaphone />
+              {openCurrentMatch && <CurrentMatch />}
+              {presentPath === '/' && <MainPageProfile />}
+            </div>
+            {children}
+            <Footer />
+          </UserLayout>
+        </>
+      );
+    default:
+      return <>{children}</>;
+  }
+}
+
+{
+  /* UserLayout : 배경색 제공 */
+  /* LoginChecker : 미로그인시 에러 던짐 */
+  /* ErrorChecker : 에러 리코일 체크해서 에러 페이지로 던짐 */
+}
+const TakguAppLayout = ({ children }: TakguLayoutProps) => {
+  return (
+    <UserLayout>
+      <TakguLayout>{children}</TakguLayout>
+      <ModalProvider />
+      <CustomizedSnackbars />
+    </UserLayout>
+  );
+};
+
+export default TakguAppLayout;

components/Layout.tsx

@@ -0,0 +1,95 @@
+import { useRouter } from 'next/router';
+import { useRecoilValue } from 'recoil';
+import { openCurrentMatchState } from 'utils/recoil/takgu/match';
+import AdminReject from 'components/admin/AdminReject';
+import AdminLayout from 'components/admin/Layout';
+import CurrentMatch from 'components/takgu/Layout/CurrentMatch';
+import Footer from 'components/takgu/Layout/Footer';
+import Header from 'components/takgu/Layout/Header';
+import HeaderStateContext from 'components/takgu/Layout/HeaderContext';
+import MainPageProfile from 'components/takgu/Layout/MainPageProfile';
+import Megaphone from 'components/takgu/Layout/MegaPhone';
+import RecruitLayout from 'components/takgu/recruit/RecruitLayout';
+import Statistics from 'pages/takgu/statistics';
+import useAnnouncementCheck from 'hooks/takgu/Layout/useAnnouncementCheck';
+import useGetUserSeason from 'hooks/takgu/Layout/useGetUserSeason';
+import useLiveCheck from 'hooks/takgu/Layout/useLiveCheck';
+import useSetAfterGameModal from 'hooks/takgu/Layout/useSetAfterGameModal';
+import { useUser } from 'hooks/takgu/Layout/useUser';
+import useAxiosResponse from 'hooks/useAxiosResponse';
+import styles from 'styles/takgu/Layout/Layout.module.scss';
+import AgendaFooter from './agenda/Layout/AgendaFooter';
+import AgendaHeader from './agenda/Layout/AgendaHeader';
+import AgendaUserLayout from './agenda/Layout/AgendaUserLayout';
+import PlayButton from './takgu/Layout/PlayButton';
+import UserLayout from './takgu/Layout/UserLayout';
+import ModalProvider from './takgu/modal/ModalProvider';
+
+type AppLayoutProps = {
+  children: React.ReactNode;
+};
+
+function AppLayout({ children }: AppLayoutProps) {
+  const user = useUser();
+  const presentPath = useRouter().asPath;
+  const openCurrentMatch = useRecoilValue(openCurrentMatchState);
+
+  useAxiosResponse();
+  useGetUserSeason(presentPath);
+  useSetAfterGameModal();
+  useLiveCheck(presentPath);
+  useAnnouncementCheck(presentPath);
+
+  if (!user || !user.intraId) return null;
+
+  switch (true) {
+    case presentPath.includes('/admin'):
+      if (!user.isAdmin) return <AdminReject />;
+      return <AdminLayout>{children}</AdminLayout>;
+
+    case presentPath.includes('/takgu/recruit'):
+      return <RecruitLayout>{children}</RecruitLayout>;
+
+    case presentPath === '/takgu/statistics' && user.isAdmin:
+      return (
+        <UserLayout>
+          <Statistics />
+        </UserLayout>
+      );
+
+    case presentPath.includes('/takgu'):
+      return (
+        <>
+          <UserLayout>
+            <HeaderStateContext>
+              <Header />
+            </HeaderStateContext>
+            <PlayButton />
+            <div className={styles.topInfo}>
+              <Megaphone />
+              {openCurrentMatch && <CurrentMatch />}
+              {presentPath === '/' && <MainPageProfile />}
+            </div>
+            {children}
+            <Footer />
+          </UserLayout>
+          <ModalProvider />
+        </>
+      );
+
+    case presentPath.includes('/agenda'):
+      return (
+        <>
+          <AgendaUserLayout>
+            <AgendaHeader />
+            {children}
+            <AgendaFooter />
+          </AgendaUserLayout>
+        </>
+      );
+    default:
+      return <>{children}</>;
+  }
+}
+
+export default AppLayout;