[Fix] Test deploy main 동기화

.github/workflows/test-deploy.yml

@@ -4,9 +4,9 @@ on:
   push:
     branches:
       - test-deploy
-      
+
   workflow_dispatch:
-  
+
 jobs:
   continuous-deployment:
     runs-on: macos-12
@@ -22,6 +22,8 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_DEV_PUBLIC_SERVER_ENDPOINT }}
+          NEXT_PUBLIC_CLIENT_ENDPOINT: ${{ secrets.DEV_NEXT_PUBLIC_CLIENT_ENDPOINT }}
+          NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT: ${{ secrets.DEV_NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT }}
           NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_DEV_PUBLIC_MANAGE_SERVER_ENDPOINT }}
           GENERATE_SOURCEMAP: ${{ secrets.GENERATE_SOURCEMAP }}
         run: |

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;

components/Layout/Header.tsx

@@ -1,7 +1,9 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useEffect, useContext } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { BsMegaphone } from 'react-icons/bs';
+import { FaArrowLeft } from 'react-icons/fa';
 import { FiMenu } from 'react-icons/fi';
 import { IoStorefrontOutline } from 'react-icons/io5';
 import { Modal } from 'types/modalTypes';
@@ -18,6 +20,7 @@ import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/Layout/Header.module.scss';
 
 export default function Header() {
+  const router = useRouter();
   const [live, setLive] = useRecoilState(liveState);
   const HeaderState = useContext<HeaderContextState | null>(HeaderContext);
   const openMenuBarHandler = () => {
@@ -54,11 +57,26 @@ export default function Header() {
     type: 'setError',
   });
 
+  // 현재 경로가 뒤로 가기 버튼을 사용해야 하는 경로 패턴 중 하나와 일치하는지 확인
+  const isBackButtonRoute = () => {
+    const path = router.asPath.split('?')[0]; // 쿼리 스트링 제거
+    const patterns = [
+      /^\/party\/create$/, // '/party/create'
+      /^\/party\/[0-9]+$/, // '/party/[roomId]'
+    ];
+
+    return patterns.some((pattern) => pattern.test(path));
+  };
+
   return (
     <div className={styles.headerContainer}>
       <div className={styles.headerWrap}>
         <div className={styles.headerLeft}>
-          <FiMenu className={styles.menuIcon} onClick={openMenuBarHandler} />
+          {isBackButtonRoute() ? (
+            <FaArrowLeft onClick={router.back} />
+          ) : (
+            <FiMenu className={styles.menuIcon} onClick={openMenuBarHandler} />
+          )}
         </div>
         <Link className={styles.logoWrap} href={'/'}>
           42GG

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,58 +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' && (
-                    <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>
   );
 }

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'

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;

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;

components/UI/DraggableList.tsx

@@ -0,0 +1,58 @@
+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 &&
+                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;