Merge branch 'test-deploy' of https://github.com/42organization/42gg.…

…client into 6th_party
42organization · Apr 5, 2024 · 379bc71 · 379bc71
2 parents 071b58e + 1e1a45a
commit 379bc71
Show file tree

Hide file tree

Showing 109 changed files with 4,946 additions and 239 deletions.
diff --git a/.github/workflows/test-deploy.yml b/.github/workflows/test-deploy.yml
@@ -4,9 +4,9 @@ on:
   push:
     branches:
       - test-deploy
-      
+
   workflow_dispatch:
-  
+
 jobs:
   continuous-deployment:
     runs-on: macos-12

diff --git a/components/DynamicQuill.tsx b/components/DynamicQuill.tsx
@@ -0,0 +1,10 @@
+// dynamic import로 Quill 불러오는 컴포넌트
+import dynamic from 'next/dynamic';
+
+// TODO : 로딩 컴포넌트 구체화 필요함.
+const DynamicQuill = dynamic(() => import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>,
+});
+
+export default DynamicQuill;
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router';
 import { useRecoilValue } from 'recoil';
-import { colorModeState } from 'utils/recoil/colorMode';
 import { openCurrentMatchState } from 'utils/recoil/match';
 import AdminReject from 'components/admin/AdminReject';
 import AdminLayout from 'components/admin/Layout';
@@ -10,7 +9,7 @@ import Header from 'components/Layout/Header';
 import HeaderStateContext from 'components/Layout/HeaderContext';
 import MainPageProfile from 'components/Layout/MainPageProfile';
 import Megaphone from 'components/Layout/MegaPhone';
-import StyledButton from 'components/UI/StyledButton';
+import RecruitLayout from 'components/recruit/RecruitLayout';
 import Statistics from 'pages/statistics';
 import useAnnouncementCheck from 'hooks/Layout/useAnnouncementCheck';
 import useGetUserSeason from 'hooks/Layout/useGetUserSeason';
@@ -19,16 +18,16 @@ import useSetAfterGameModal from 'hooks/Layout/useSetAfterGameModal';
 import { useUser } from 'hooks/Layout/useUser';
 import useAxiosResponse from 'hooks/useAxiosResponse';
 import styles from 'styles/Layout/Layout.module.scss';
+import PlayButton from './PlayButton';
+import UserLayout from './UserLayout';
 
 type AppLayoutProps = {
   children: React.ReactNode;
 };
 
 export default function AppLayout({ children }: AppLayoutProps) {
   const user = useUser();
-  const colorMode = useRecoilValue(colorModeState);
   const presentPath = useRouter().asPath;
-  const router = useRouter();
   const openCurrentMatch = useRecoilValue(openCurrentMatchState);
 
   useAxiosResponse();
@@ -37,59 +36,38 @@ export default function AppLayout({ children }: AppLayoutProps) {
   useLiveCheck(presentPath);
   useAnnouncementCheck(presentPath);
 
-  const onClickMatch = () => {
-    router.replace('/');
-    router.push(`/match`);
-  };
+  if (!user || !user.intraId) return null;
 
-  if (!user) return null;
+  if (presentPath.includes('/admin')) {
+    if (!user.isAdmin) return <AdminReject />;
+    return <AdminLayout>{children}</AdminLayout>;
+  }
 
-  return presentPath.includes('/admin') ? (
-    user.isAdmin ? (
-      <AdminLayout>{children}</AdminLayout>
-    ) : (
-      <AdminReject />
-    )
-  ) : (
-    <div className={styles.appContainer}>
-      <div
-        className={`${styles.background} ${
-          colorMode ? styles[colorMode.toLowerCase()] : styles.basic
-        } `}
-      >
-        <div>
-          {presentPath === '/statistics' && user.isAdmin ? (
-            <Statistics />
-          ) : (
-            user.intraId && (
-              <>
-                <HeaderStateContext>
-                  <Header />
-                </HeaderStateContext>
-                {presentPath !== '/match' &&
-                  presentPath !== '/manual' &&
-                  presentPath !== '/store' &&
-                  !presentPath.startsWith('/party') && (
-                    <div className={styles.buttonContainer}>
-                      <div className={styles.buttonWrapper}>
-                        <StyledButton onClick={onClickMatch} width={'5.5rem'}>
-                          Play
-                        </StyledButton>
-                      </div>
-                    </div>
-                  )}
-                <div className={styles.topInfo}>
-                  <Megaphone />
-                  {openCurrentMatch && <CurrentMatch />}
-                  {presentPath === '/' && <MainPageProfile />}
-                </div>
-                {children}
-                <Footer />
-              </>
-            )
-          )}
-        </div>
+  if (presentPath.includes('/recruit')) {
+    return <RecruitLayout>{children}</RecruitLayout>;
+  }
+
+  // NOTE : 외부 툴을 사용해보고 외부 툴로 대체가 가능하다면 삭제 예정
+  if (presentPath === '/statistics' && user.isAdmin)
+    return (
+      <UserLayout>
+        <Statistics />
+      </UserLayout>
+    );
+
+  return (
+    <UserLayout>
+      <HeaderStateContext>
+        <Header />
+      </HeaderStateContext>
+      <PlayButton />
+      <div className={styles.topInfo}>
+        <Megaphone />
+        {openCurrentMatch && <CurrentMatch />}
+        {presentPath === '/' && <MainPageProfile />}
       </div>
-    </div>
+      {children}
+      <Footer />
+    </UserLayout>
   );
 }
diff --git a/components/Layout/MenuBar/MenuBarElement.tsx b/components/Layout/MenuBar/MenuBarElement.tsx
@@ -14,10 +14,12 @@ import CurrentMatchEmoji from 'public/image/menu_currentMatch.svg';
 import HallOfFameEmoji from 'public/image/menu_halloffame.svg';
 import ManualEmoji from 'public/image/menu_manual.svg';
 import RankingEmoji from 'public/image/menu_ranking.svg';
+import RecruitEmoji from 'public/image/menu_recruit.svg';
 import ReportEmoji from 'public/image/menu_report.svg';
 import SignOutEmoji from 'public/image/menu_signOut.svg';
 import StatisticsEmoji from 'public/image/menu_statistics.svg';
 import { useUser } from 'hooks/Layout/useUser';
+import useCheckRecruit from 'hooks/recruit/useCheckRecruit';
 import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/Layout/MenuBar.module.scss';
 
@@ -69,10 +71,20 @@ const MenuItem = ({ itemName, onClick }: menuItemProps) => {
       name: '관리자',
       svg: <AdminEmoji />,
     },
+    Recruit: {
+      name: '지원하기',
+      svg: <RecruitEmoji />,
+    },
   };
   return (
     <div className={styles.menuItem} onClick={onClick}>
-      <div className={styles.imageWrapper}>{menuList[itemName].svg}</div>
+      <div
+        className={
+          itemName === 'Recruit' ? styles.recruit : styles.imageWrapper
+        }
+      >
+        {menuList[itemName].svg}
+      </div>
       <div className={styles.menuText}>{menuList[itemName].name}</div>
     </div>
   );
@@ -89,6 +101,7 @@ const MenuLink = ({ link, onClick, itemName }: MenuLinkProps) => {
 export const MainMenu = () => {
   const HeaderState = useContext<HeaderContextState | null>(HeaderContext);
   const setModal = useSetRecoilState<Modal>(modalState);
+  const { isRecruiting } = useCheckRecruit();
 
   const getAnnouncementHandler = useAxiosGet<any>({
     url: '/pingpong/announcement',
@@ -106,6 +119,13 @@ export const MainMenu = () => {
 
   return (
     <nav className={styles.mainMenu}>
+      {isRecruiting && (
+        <MenuLink
+          link='/recruit'
+          itemName='Recruit'
+          onClick={HeaderState?.resetOpenMenuBarState}
+        />
+      )}
       <MenuLink
         link='/store'
         itemName='Store'

diff --git a/components/Layout/PlayButton.tsx b/components/Layout/PlayButton.tsx
@@ -0,0 +1,32 @@
+import { useRouter } from 'next/router';
+import StyledButton from 'components/UI/StyledButton';
+import styles from 'styles/Layout/Layout.module.scss';
+
+const PlayButton = () => {
+  const presentPath = useRouter().asPath;
+  const router = useRouter();
+
+  const onClickMatch = () => {
+    router.replace('/');
+    router.push(`/match`);
+  };
+
+  if (
+    presentPath === '/match' ||
+    presentPath === '/manual' ||
+    presentPath === '/store' ||
+    presentPath.startsWith('/party')
+  )
+    return null;
+  return (
+    <div className={styles.buttonContainer}>
+      <div className={styles.buttonWrapper}>
+        <StyledButton onClick={onClickMatch} width={'5.5rem'}>
+          Play
+        </StyledButton>
+      </div>
+    </div>
+  );
+};
+
+export default PlayButton;
diff --git a/components/Layout/UserLayout.tsx b/components/Layout/UserLayout.tsx
@@ -0,0 +1,24 @@
+import { useRecoilValue } from 'recoil';
+import { colorModeState } from 'utils/recoil/colorMode';
+import styles from 'styles/Layout/Layout.module.scss';
+
+const UserLayout = ({ children }: { children: React.ReactNode }) => {
+  const colorMode = useRecoilValue(colorModeState);
+
+  return (
+    <div className={styles.appContainer}>
+      <div
+        className={`${styles.background} ${
+          colorMode ? styles[colorMode.toLowerCase()] : styles.basic
+        } `}
+      >
+        <div>
+          {/* TODO : 상위 div 컴포넌트 필요한지 다시 확인해보기 */}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserLayout;
diff --git a/components/UI/DraggableList.tsx b/components/UI/DraggableList.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  OnDragEndResponder,
+  Draggable,
+} from 'react-beautiful-dnd';
+import { ListItem, ListItemAvatar, makeStyles } from '@mui/material';
+import styles from 'styles/UI/DraggableList.module.scss';
+
+export type DraggableListProps = {
+  children: React.ReactNode[];
+  onDragEnd: OnDragEndResponder;
+};
+
+const DraggableList = React.memo(
+  ({ onDragEnd, children }: DraggableListProps) => {
+    return (
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId='droppable-list'>
+          {(provided) => (
+            <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              style={{ width: '100%' }}
+            >
+              {children.map((item, index) => (
+                <Draggable
+                  draggableId={`item-${index}`}
+                  index={index}
+                  key={index}
+                >
+                  {(provided, snapshot) => (
+                    <ListItem
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className={
+                        snapshot.isDragging ? styles.draggingListItem : ''
+                      }
+                    >
+                      {item}
+                    </ListItem>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+);
+
+DraggableList.displayName = 'DraggableList';
+export default DraggableList;
diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx
@@ -21,11 +21,11 @@ import {
   TbPaperBag,
   TbTrophy,
   TbNote,
-  TbChartBar,
   TbFileReport,
   TbMessageReport,
   TbBuildingWarehouse,
   TbPlaylistAdd,
+  TbWallet,
 } from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
@@ -140,6 +140,14 @@ export default function SideNav() {
         <TbTrophy className={styles.logo} />
       </SideNavContent>
 
+      <SideNavContent
+        url={'/recruitments'}
+        menuName={'공고 관리'}
+        currentPath={currentPath}
+      >
+        <TbWallet className={styles.logo} />
+      </SideNavContent>
+
       <div
         className={styles.menuItem}
         onClick={() => setPartyOpen(!isPartyOpen)}

diff --git a/components/admin/announcement/AnnounceEdit.tsx b/components/admin/announcement/AnnounceEdit.tsx
@@ -1,19 +1,14 @@
-import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { QUILL_EDIT_MODULES, QUILL_FORMATS } from 'types/quillTypes';
 import { instanceInManage, instance } from 'utils/axios';
 import { toastState } from 'utils/recoil/toast';
+import DynamicQuill from 'components/DynamicQuill';
 import { useUser } from 'hooks/Layout/useUser';
 import styles from 'styles/admin/announcement/AnnounceEdit.module.scss';
 import 'react-quill/dist/quill.snow.css';
 import 'react-quill/dist/quill.bubble.css';
 
-const Quill = dynamic(() => import('react-quill'), {
-  ssr: false,
-  loading: () => <p>Loading ...</p>,
-});
-
 export default function AnnounceEdit() {
   const user = useUser();
   const setSnackbar = useSetRecoilState(toastState);
@@ -92,7 +87,7 @@ export default function AnnounceEdit() {
         {content ? (
           <div className={styles.announceModalContainer}>
             <div className={styles.modalTitle}>Notice!</div>
-            <Quill
+            <DynamicQuill
               className={styles.quillViewer}
               readOnly={true}
               formats={QUILL_FORMATS}
@@ -116,7 +111,7 @@ export default function AnnounceEdit() {
         )}
       </div>
       <div className={styles.editorContainer}>
-        <Quill
+        <DynamicQuill
           className={styles.quillEditor}
           modules={QUILL_EDIT_MODULES}
           formats={QUILL_FORMATS}