Merge pull request #1574 from 42organization/agenda

[test-deploy] 버그 및 css 수정
42organization · Oct 11, 2024 · da0dd89 · da0dd89
2 parents bb1bf91 + 4cb1199
commit da0dd89
Show file tree

Hide file tree

Showing 41 changed files with 475 additions and 165 deletions.
diff --git a/.github/workflows/main-deploy.yml b/.github/workflows/main-deploy.yml
@@ -20,6 +20,7 @@ jobs:
       - name: Build
         env:
           NEXT_PUBLIC_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_SERVER_ENDPOINT }}
+          NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_AGENDA_SERVER_ENDPOINT }}
           NEXT_PUBLIC_CLIENT_ENDPOINT: ${{ secrets.NEXT_PUBLIC_CLIENT_ENDPOINT }}
           NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_MANAGE_SERVER_ENDPOINT }}
           NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT: ${{ secrets.NEXT_PUBLIC_PARTY_MANAGE_SERVER_ENDPOINT }}

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,8 +1,10 @@
 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';
 import StartDate from 'components/agenda/utils/StartDate';
+import RightArrow from 'public/image/agenda/ChevronRight.svg';
 import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 
 // Props: API data
@@ -14,7 +16,20 @@ const AgendaInfo = ({
   idx: number;
 }) => {
   if (!agendaInfo) {
-    return <div>There is no agenda</div>;
+    return (
+      <div className={styles.emptyContainer}>
+        <div>현재 모집 중인 행사가 없습니다.</div>
+        <div className={styles.emptyContent}>
+          <div>Agenda 가기</div>
+          <RightArrow
+            className={styles.arrowIcon}
+            onClick={() => {
+              router.push('/agenda');
+            }}
+          />
+        </div>
+      </div>
+    );
   }
   const startDate = new Date(agendaInfo.agendaStartTime);
   const endDate = new Date(agendaInfo.agendaEndTime);

diff --git a/components/agenda/Home/AgendaTitle.tsx b/components/agenda/Home/AgendaTitle.tsx
@@ -7,7 +7,7 @@ const AgendaTitle = () => {
   return (
     <>
       <div className={styles.agendaTitleContainer}>
-        <div className={`${styles.agendaTitle}`}>AGENDA</div>
+        <div className={`${styles.agendaTitle}`}>Agenda</div>
         <div className={styles.agendaTitleButton}>
           <Link href={`/agenda/create`}>
             <button className={styles.agendaCreateBtn}>

diff --git a/components/agenda/Layout/AgendaHeader.tsx b/components/agenda/Layout/AgendaHeader.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { createContext, Dispatch, SetStateAction, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import Logo from 'public/image/main-logo.svg';
@@ -30,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/Profile/CurrentList.tsx b/components/agenda/Profile/CurrentList.tsx
@@ -16,7 +16,9 @@ const CurrentList = ({
           </div>
         ))
       ) : (
-        <div className={styles.currentTeamEmpty}>참여중 아젠다가 없습니다.</div>
+        <div className={styles.currentTeamEmpty}>
+          아젠다 목록이 비어있습니다. 새로운 아젠다를 시작해보세요!
+        </div>
       )}
     </div>
   );

diff --git a/components/agenda/Profile/HistoryList.tsx b/components/agenda/Profile/HistoryList.tsx
@@ -110,7 +110,9 @@ const HistoryList = ({ historyListData }: HistoryListProps) => {
             }
           )
         ) : (
-          <div className={styles.historyEmpty}>아젠다 기록이 없습니다.</div>
+          <div className={styles.historyEmpty}>
+            아젠다 기록이 없습니다. 새로운 아젠다를 시작해보세요!
+          </div>
         )}
       </div>
     </>

diff --git a/components/agenda/Profile/ProfileCard.tsx b/components/agenda/Profile/ProfileCard.tsx
@@ -217,7 +217,12 @@ const ProfileCard = ({
                             key={index}
                             className={styles.acheivementImageWrapper}
                           >
-                            <CustomImage src={parsedUrl} alt='achievement' />
+                            <CustomImage
+                              src={parsedUrl}
+                              alt='achievement'
+                              name={data.name}
+                              description={data.description}
+                            />
                           </div>
                         );
                       }

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/agenda/agendaDetail/tabs/AgendaDescription.tsx b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx
@@ -37,7 +37,7 @@ export default function AgendaDescription({ agendaData }: AgendaProps) {
         <div className={styles.midContainer}>
           <div className={styles.descriptionItem}>
             <h3>대회 설명</h3>
-            <span>{agendaContent}</span>
+            <span className={styles.preWrap}>{agendaContent}</span>
           </div>
           <div className={styles.descriptionItem}>
             <h3>모집 완료 기간</h3>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,9 @@ const CurrentList = ({ @@
               </div>
             ))
           ) : (
-            <div className={styles.currentTeamEmpty}>참여중 아젠다가 없습니다.</div>
+            <div className={styles.currentTeamEmpty}>
+              아젠다 목록이 비어있습니다. 새로운 아젠다를 시작해보세요!
+            </div>
           )}
         </div>
       );
@@ Expand Down @@