Merge pull request #1573 from 42organization/Refactor/#1572-refactor-…

…agenda [Refactor] 가시성 개선 및 css 버그 수정 #1572
42organization · Oct 11, 2024 · 4cb1199 · 4cb1199
2 parents cae0445 + 5566686
commit 4cb1199
Show file tree

Hide file tree

Showing 21 changed files with 277 additions and 93 deletions.
diff --git a/Layout/TakguLayout.tsx b/Layout/TakguLayout.tsx
@@ -1,7 +1,6 @@
+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';
@@ -16,7 +15,6 @@ 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';
@@ -27,35 +25,33 @@ type TakguLayoutProps = {
   children: React.ReactNode;
 };
 
-function TakguLayout({ children }: TakguLayoutProps) {
+const TakguLayout = ({ children }: TakguLayoutProps) => {
   const user = useUser();
   const presentPath = usePathname();
+  const path = useRouter().pathname;
   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'):
+  const renderContent = () => {
+    if (path.includes('takgu/recruit')) {
       return <RecruitLayout>{children}</RecruitLayout>;
+    }
 
-    case presentPath === 'takgu/statistics' && user.isAdmin:
+    if (path.includes('takgu/statistics') && user.isAdmin) {
       return (
         <UserLayout>
           <Statistics />
         </UserLayout>
       );
+    }
 
-    case presentPath.includes('takgu'):
+    if (presentPath.includes('takgu')) {
       return (
         <>
           <UserLayout>
@@ -71,12 +67,15 @@ function TakguLayout({ children }: TakguLayoutProps) {
             {children}
             <Footer />
           </UserLayout>
+          <ModalProvider />
         </>
       );
-    default:
-      return <>{children}</>;
-  }
-}
+    }
+    return <>{children}</>;
+  };
+
+  return renderContent();
+};
 
 {
   /* UserLayout : 배경색 제공 */
@@ -86,11 +85,8 @@ function TakguLayout({ children }: TakguLayoutProps) {
 const TakguAppLayout = ({ children }: TakguLayoutProps) => {
   return (
     <>
-      <UserLayout>
-        <TakguLayout>{children}</TakguLayout>
-        <CustomizedSnackbars />
-      </UserLayout>
-      <ModalProvider />
+      <TakguLayout>{children}</TakguLayout>
+      <CustomizedSnackbars />
     </>
   );
 };

diff --git a/components/agenda/Form/AgendaResultForm.tsx b/components/agenda/Form/AgendaResultForm.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
+import router from 'next/router';
+import React, { useEffect, useRef } from 'react';
 import {
   AddElementBtn,
   DragBtn,
@@ -178,7 +179,11 @@ const AgendaResultForm = ({
   });
 
   return (
-    <form className={styles.container} onSubmit={SubmitAgendaResult}>
+    <form
+      id='result'
+      className={styles.container}
+      onSubmit={SubmitAgendaResult}
+    >
       <div
         className={`${styles.titleContainer} ${dragStyles.dropzone}`}
         id={'0'}
@@ -202,7 +207,7 @@ const AgendaResultForm = ({
             <div className={styles.awardContainer} key={`${award_idx}`}>
               <div className={styles.awardTitleContainer} id={`${award_idx}`}>
                 <p>
-                  {award_idx}
+                  {award_idx + 1}
                   {': '}
                 </p>
                 <p key={`${award_idx}`} className={styles.awardTitle}>
@@ -245,7 +250,7 @@ const AgendaResultForm = ({
                 id='newAwardInput'
                 ref={newAwardInputRef}
                 type='text'
-                placeholder='추가할 상을 입력해주세요...'
+                placeholder='상을 입력해주세요.'
                 onKeyUp={addAwardEnter}
               />
               <AddElementBtn onClick={addAward} />
@@ -254,7 +259,25 @@ const AgendaResultForm = ({
           </div>
         </li>
       </ul>
-      <button type='submit'>submit</button>
+      <div className={styles.buttonContainer}>
+        <button
+          type='button'
+          className={`${styles.formBtn} ${styles.cancel}`}
+          onClick={(e) => {
+            e.preventDefault();
+            router.back();
+          }}
+        >
+          취소하기
+        </button>
+        <button
+          type='submit'
+          form='result'
+          className={`${styles.formBtn} ${styles.submit}`}
+        >
+          제출하기
+        </button>
+      </div>
     </form>
   );
 };

diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import router from 'next/router';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
 import { showPeriod } from 'utils/handleTime';
 import AgendaTags from 'components/agenda/utils/AgendaTags';
@@ -19,8 +20,13 @@ const AgendaInfo = ({
       <div className={styles.emptyContainer}>
         <div>현재 모집 중인 행사가 없습니다.</div>
         <div className={styles.emptyContent}>
-          <div>Agenda 페이지 이동</div>
-          <RightArrow className={styles.arrowIcon} />
+          <div>Agenda 가기</div>
+          <RightArrow
+            className={styles.arrowIcon}
+            onClick={() => {
+              router.push('/agenda');
+            }}
+          />
         </div>
       </div>
     );

diff --git a/components/agenda/Layout/AgendaHeader.tsx b/components/agenda/Layout/AgendaHeader.tsx
@@ -29,15 +29,16 @@ export default function AgendaHeader() {
     <HeaderContext.Provider value={HeaderState}>
       <div className={styles.headerContainer}>
         <div className={styles.headerWrap}>
+          <FiMenu
+            className={styles.menuIcon}
+            onClick={() => HeaderState?.setOpenMenuBarState(!menu)}
+          />
+
           <div className={styles.headerLeft}>
             <Link href='/' onClick={HeaderState.resetOpenMenuBarState}>
               <Logo className={styles.logo} />
             </Link>
           </div>
-          <FiMenu
-            className={styles.menuIcon}
-            onClick={() => HeaderState?.setOpenMenuBarState(!menu)}
-          />
         </div>
       </div>
       <MenuBar headerstate={HeaderState} />

diff --git a/components/agenda/Layout/MenuBar.tsx b/components/agenda/Layout/MenuBar.tsx
@@ -40,16 +40,20 @@ const MenuBar = ({ headerstate }: { headerstate: HeaderContextState }) => {
           headerstate.openMenuState ? styles.active : styles.inactive
         }`}
       >
-        <MenuBarContent
-          content={`Hello. ${user?.intraId}`}
-          href={`/agenda/profile/user?id=${user?.intraId}`}
-          as='h2'
-        />
+        <div className={styles.row}>
+          <MenuBarContent
+            content={`Hello, ${user?.intraId}`}
+            href={`/agenda/profile/user?id=${user?.intraId}`}
+            as='h2'
+          />
+        </div>
+        {/* <button className={styles.profile}>내 프로필</button> */}
+
         <MenuBarContent content='Home' href='/' as='h1' />
         <div className={styles.divider} />
         <MenuBarContent content='Agenda' href='/agenda' as='h1' />
         <MenuBarContent
-          content='내 대회'
+          content='내 프로필'
           href={`/agenda/profile/user?id=${user?.intraId}`}
         />
         <MenuBarContent content='티켓 확인하기' href='/agenda/ticket' />
@@ -58,6 +62,8 @@ const MenuBar = ({ headerstate }: { headerstate: HeaderContextState }) => {
         <MenuBarContent content='랭크' href='/takgu/rank' />
         <MenuBarContent content='게임' href='/takgu/game' />
         <MenuBarContent content='상점' href='/takgu/store' />
+        <div className={styles.divider} />
+        <MenuBarContent content='지원하기' href='/takgu/recruit' />
         <div className={styles.last}>
           {user?.isAdmin ? (
             <>

diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx
@@ -28,10 +28,6 @@ const subscribeTeam = ({ router, agendaKey }: CallbackProps) => {
   router.push(`/agenda/detail/team/create?agenda_key=${agendaKey}`);
 };
 
-const submitResults = ({ router, agendaKey }: CallbackProps) => {
-  router.push(`/agenda/detail/host/result?agenda_key=${agendaKey}`);
-};
-
 export default function AgendaInfo({
   agendaData,
   isHost,
@@ -99,7 +95,7 @@ export default function AgendaInfo({
 
     switch (agendaData.agendaStatus) {
       case AgendaStatus.CONFIRM:
-        return isHost ? { text: '결과입력', callback: submitResults } : null;
+        return isHost ? { text: '주최자 관리', callback: hostMode } : null;
       case AgendaStatus.OPEN:
         if (isHost) {
           // 주최자

diff --git a/components/takgu/Layout/Header.tsx b/components/takgu/Layout/Header.tsx
@@ -78,7 +78,7 @@ export default function Header() {
             <FiMenu className={styles.menuIcon} onClick={openMenuBarHandler} />
           )}
         </div>
-        <Link className={styles.logoWrap} href={'/'}>
+        <Link className={styles.logoWrap} href={'/takgu'}>
           42GG
         </Link>
         <div className={styles.headerRight}>

diff --git a/components/takgu/Layout/MenuBar/MenuBarElement.tsx b/components/takgu/Layout/MenuBar/MenuBarElement.tsx
@@ -12,6 +12,7 @@ import AdminEmoji from 'public/image/takgu/menu_admin.svg';
 import AnnouncementEmoji from 'public/image/takgu/menu_announcement.svg';
 import CurrentMatchEmoji from 'public/image/takgu/menu_currentMatch.svg';
 import HallOfFameEmoji from 'public/image/takgu/menu_halloffame.svg';
+import HomeEmoji from 'public/image/takgu/menu_home.svg';
 import ManualEmoji from 'public/image/takgu/menu_manual.svg';
 import RankingEmoji from 'public/image/takgu/menu_ranking.svg';
 import RecruitEmoji from 'public/image/takgu/menu_recruit.svg';
@@ -75,6 +76,10 @@ const MenuItem = ({ itemName, onClick }: menuItemProps) => {
       name: '지원하기',
       svg: <RecruitEmoji />,
     },
+    Home: {
+      name: 'Home',
+      svg: <HomeEmoji />,
+    },
   };
   return (
     <div className={styles.menuItem} onClick={onClick}>
@@ -126,6 +131,12 @@ export const MainMenu = () => {
           onClick={HeaderState?.resetOpenMenuBarState}
         />
       )}
+      <Link href={`/`}>
+        <MenuItem
+          itemName='Home'
+          onClick={HeaderState?.resetOpenMenuBarState}
+        />
+      </Link>
       <MenuLink
         link='/store'
         itemName='Store'
@@ -179,11 +190,12 @@ export const AdminMenu = () => {
       {isAdmin && (
         <div>
           <MenuLink link='/statistics' itemName='Statistics' />
-          <MenuLink
-            link='/admin'
-            onClick={HeaderState?.resetOpenMenuBarState}
-            itemName='Admin'
-          />
+          <Link href={`/admin/takgu`}>
+            <MenuItem
+              itemName='Admin'
+              onClick={HeaderState?.resetOpenMenuBarState}
+            />
+          </Link>
         </div>
       )}
       <div className={`${styles.logoutWrap} ${logutBottomStyle}`}>

diff --git a/pages/agenda/detail/host/index.tsx b/pages/agenda/detail/host/index.tsx
@@ -20,6 +20,7 @@ const ModifyAgenda = () => {
   const { sendRequest } = useFetchRequest();
   const { openModal } = useModal();
   const agendaStatus = agendaData?.agendaStatus;
+  const agendaIsRanking = agendaData?.isRanking;
   const setSnackbar = useSetRecoilState(toastState);
 
   const handleClick = (description: string, onProceed: () => void) => {
@@ -70,9 +71,14 @@ const ModifyAgenda = () => {
 
   const resultAgenda = () => {
     if (agendaStatus && agendaStatus === AgendaStatus.CONFIRM) {
-      handleClick('행사를 상 입력 없이 종료하시겠습니까?', () => {
-        sendRequest('PATCH', 'finish', {}, { agenda_key: agendaKey });
-        router.push(`/agenda/detail?agenda_key=${agendaKey}`);
+      handleClick('행사를 종료하시겠습니까?', () => {
+        sendRequest(
+          'PATCH',
+          'finish',
+          { awards: [] },
+          { agenda_key: agendaKey }
+        );
+        window.location.href = `/agenda/detail?agenda_key=${agendaKey}`;
       });
     } else {
       setSnackbar({
@@ -86,7 +92,7 @@ const ModifyAgenda = () => {
 
   const resultFormAgenda = () => {
     if (agendaStatus && agendaStatus === AgendaStatus.CONFIRM) {
-      handleClick('행사 종료 후 상 입력을 하시겠습니까?', () => {
+      handleClick('행사 종료 및 상 입력을 하시겠습니까?', () => {
         router.push(`/agenda/detail/host/result?agenda_key=${agendaKey}`);
       });
     } else {
@@ -111,6 +117,7 @@ const ModifyAgenda = () => {
   if (!agendaKey) {
     return <AgendaLoading />;
   }
+  console.log('data', agendaData);
   return (
     <>
       <div className={styles.container}>
@@ -150,11 +157,14 @@ const ModifyAgenda = () => {
               행사가 진행 중인 상태에서만 행사를 종료할 수 있습니다.
             </div>
             <div className={styles.buttonWarp}>
-              <UploadBtn text='행사 종료하기' onClick={resultAgenda} />
-              <UploadBtn
-                text='상 입력 후 종료하기'
-                onClick={resultFormAgenda}
-              />
+              {agendaIsRanking ? (
+                <UploadBtn
+                  text='상 입력 후 종료하기'
+                  onClick={resultFormAgenda}
+                />
+              ) : (
+                <UploadBtn text='행사 종료하기' onClick={resultAgenda} />
+              )}
             </div>
           </div>
         </div>