Merge pull request #1542 from 42organization/agenda

[test-deploy] 라우터 쿼리, 반응형 ui, 에러처리
42organization · Sep 5, 2024 · bab532f · bab532f
2 parents 88a8229 + 77083c6
commit bab532f
Show file tree

Hide file tree

Showing 89 changed files with 952 additions and 586 deletions.
diff --git a/Layout/LayoutProvider.tsx b/Layout/LayoutProvider.tsx
@@ -13,9 +13,9 @@ type LayoutProviderProps = {
 // 현재 페이지가 어떤 레이아웃을 사용할지 결정
 // 로그인 스테이트 등은 각 레이아웃에서 확인
 const LayoutProvider = ({ children }: LayoutProviderProps) => {
-  const isLogin = useRecoilValue(loginState);
+  useRecoilValue(loginState);
   useAxiosResponse();
-  console.log(isLogin);
+
   const app = usePathname();
   switch (app) {
     case '':

diff --git a/Layout/TakguLayout.tsx b/Layout/TakguLayout.tsx
@@ -65,8 +65,8 @@ function TakguLayout({ children }: TakguLayoutProps) {
             <PlayButton />
             <div className={styles.topInfo}>
               <Megaphone />
-              {openCurrentMatch && <CurrentMatch />}
-              {presentPath === '/' && <MainPageProfile />}
+              {openCurrentMatch ? <CurrentMatch /> : ''}
+              {presentPath === '/' ? <MainPageProfile /> : ''}
             </div>
             {children}
             <Footer />

diff --git a/components/Layout.tsx b/components/Layout.tsx
diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx
@@ -7,8 +7,6 @@ interface LoginCheckerProps {
 }
 
 export default function LoginChecker({ children }: LoginCheckerProps) {
-  // return <>{children}</>;
-
   const [isLoading, loggedIn] = useLoginCheck();
   // return <>{children}</>;
 

diff --git a/components/Pagination.tsx b/components/Pagination.tsx
@@ -22,7 +22,7 @@ function PageNation({
   const router = useRouter();
   return (
     <div className={router.pathname.includes('takgu') ? '' : styles.container}>
-      {totalPages && totalPages > 1 && (
+      {totalPages && totalPages > 1 ? (
         <Pagination
           activePage={curPage}
           itemsCountPerPage={1}
@@ -34,6 +34,8 @@ function PageNation({
           nextPageText={<IoCaretForwardSharp />}
           onChange={(page) => pageChangeHandler(page)}
         />
+      ) : (
+        ''
       )}
     </div>
   );

diff --git a/components/agenda/Form/CreateTeamForm.tsx b/components/agenda/Form/CreateTeamForm.tsx
@@ -1,4 +1,5 @@
 import router from 'next/router';
+import { useEffect, useState } from 'react';
 import { SetterOrUpdater, useSetRecoilState } from 'recoil';
 import { agendaModal } from 'types/agenda/modalTypes';
 import { TeamDetailProps } from 'types/agenda/teamDetail/TeamDetailTypes';
@@ -9,10 +10,12 @@ import CheckBoxInput from 'components/agenda/Input/CheckboxInput';
 import DescriptionInput from 'components/agenda/Input/DescriptionInput';
 import SelectInput from 'components/agenda/Input/SelectInput';
 import TitleInput from 'components/agenda/Input/TitleInput';
+import { useModal } from 'components/agenda/modal/useModal';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
+import useAgendaTeamKey from 'hooks/agenda/useAgendaTeamKey';
 import useFetchRequest from 'hooks/agenda/useFetchRequest';
 import styles from 'styles/agenda/Form/Form.module.scss';
-import { useModal } from '../modal/useModal';
-
+AgendaLoading;
 const teamlocation = ['SEOUL', 'GYEONGSAN', 'NIX'];
 interface CreateTeamFormProps {
   location: AgendaLocation | null;
@@ -38,6 +41,7 @@ const transformFormData = (formData: FormData) => {
 
   return data;
 };
+
 const teamdataToMsg = (data: { [key: string]: string }) => {
   const msgdata: { [key: string]: string } = {};
   let msg = '';
@@ -59,7 +63,8 @@ const SubmitTeamForm = (
   agendaKey: string,
   openModal: (props: agendaModal) => void,
   teamKey?: string,
-  onProceed?: () => void
+  onProceed?: () => void,
+  handleConvert?: () => void
 ) => {
   target.preventDefault();
 
@@ -112,8 +117,11 @@ const SubmitTeamForm = (
         (res: any) => {
           if (isEdit) {
             onProceed && onProceed();
+            handleConvert && handleConvert();
           } else {
-            router.push(`/agenda/${agendaKey}/${res.teamKey}`);
+            router.push(
+              `/agenda/detail/team?agenda_key=${agendaKey}&team_key=${res.teamKey}`
+            );
           }
         },
         (err: string) => {
@@ -133,9 +141,21 @@ const CreateTeamForm = ({
   handleConvert,
 }: CreateTeamFormProps) => {
   const sendRequest = useFetchRequest().sendRequest;
-  const { teamUID } = router.query;
+  const teamUID = useAgendaTeamKey();
   const { openModal } = useModal();
   const setSnackBar = useSetRecoilState(toastState);
+  const [flag, setFlag] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (teamUID) {
+      // useAgendaTeamKey()로 teamUID 가져왔을 시
+      setFlag(true);
+    }
+  }, [teamUID]);
+
+  if (!flag) {
+    return <AgendaLoading />;
+  }
 
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     SubmitTeamForm(
@@ -146,7 +166,8 @@ const CreateTeamForm = ({
       agendaKey,
       openModal,
       teamUID as string,
-      onProceed
+      onProceed,
+      handleConvert
     );
   };
 

diff --git a/components/agenda/Form/SubmitAgendaForm.tsx b/components/agenda/Form/SubmitAgendaForm.tsx
@@ -148,7 +148,7 @@ const SubmitAgendaForm = async (
             onProceed && onProceed();
           if (!isEdit) {
             console.log(res.data.agendaKey);
-            router.push(`/agenda/${res.data.agendaKey}`);
+            router.push(`/agenda/detail?agenda_key=${res.data.agendaKey}`);
           }
         })
         .catch((err) => {

diff --git a/components/agenda/Home/AgendaDeadLine.tsx b/components/agenda/Home/AgendaDeadLine.tsx
@@ -1,13 +1,30 @@
+import React from 'react';
 import styles from 'styles/agenda/Home/AgendaDeadLine.module.scss';
 
-// props : API
-const AgendaDeadLine = () => {
-  return (
-    <div className={styles.agendaItemDeadLineBox}>
-      <div className={styles.agendaDeadLineText}>모집마감</div>
-      <div className={styles.agendaDeadLine}>D-2</div>
-    </div>
-  );
+interface deadLineProps {
+  deadLine: string | Date;
+}
+
+const AgendaDeadLine = ({ deadLine }: deadLineProps) => {
+  const currentDate = new Date();
+  const deadLineDate = new Date(deadLine);
+
+  const timeDiff = deadLineDate.getTime() - currentDate.getTime();
+  let daysLeft;
+
+  if (timeDiff == 0) daysLeft = 'Day';
+  else if (timeDiff > 0) daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
+
+  if (timeDiff >= 0) {
+    return (
+      <div className={styles.agendaItemDeadLineBox}>
+        <div className={styles.agendaDeadLineText}>모집마감</div>
+        <div className={styles.agendaDeadLine}>D-{daysLeft}</div>
+      </div>
+    );
+  }
+
+  return null;
 };
 
 export default AgendaDeadLine;
diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaTypes';
-import { showPeriod, fillZero } from 'utils/handleTime';
-import { AgendaTag } from 'components/agenda/utils/AgendaTag';
-import { isSoloTeam } from 'components/agenda/utils/team';
+import { showPeriod } from 'utils/handleTime';
+import AgendaTags from 'components/agenda/utils/AgendaTags';
+import StartDate from 'components/agenda/utils/StartDate';
 import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 
 // Props: API data
@@ -21,16 +21,9 @@ const AgendaInfo = ({
 
   return (
     <div className={styles.agendaInfoContainer} key={idx}>
-      <div className={styles.agendaDateBox}>
-        <div className={styles.agendaStartDateMonth}>
-          {fillZero(`${startDate.getMonth()}`, 2)}
-        </div>
-
-        <div className={styles.agendaStartDateDay}>
-          {fillZero(`${startDate.getDate()}`, 2)}
-        </div>
-      </div>
-
+      {agendaInfo.agendaStartTime
+        ? StartDate(agendaInfo.agendaStartTime as string)
+        : ''}
       <div className={styles.agendaInfoWrapper}>
         <div className={styles.agendaItemTitleBox}>
           {agendaInfo.agendaTitle}
@@ -52,7 +45,7 @@ const AgendaInfo = ({
           <div className={styles.agendaItemTimeWrapper}>
             <div className={styles.imageWrapper}>
               <Image
-                src={'/image/agenda/Time.svg'}
+                src={'/image/agenda/User.svg'}
                 width={15}
                 height={15}
                 alt='count'
@@ -64,19 +57,7 @@ const AgendaInfo = ({
             </div>
           </div>
         </div>
-
-        <div className={styles.agendaItemTagBox}>
-          {agendaInfo.isOfficial && <AgendaTag tagName='공식' />}
-          {isSoloTeam(
-            agendaInfo.agendaMinPeople,
-            agendaInfo.agendaMaxPeople
-          ) ? (
-            <AgendaTag tagName='개인' />
-          ) : (
-            <AgendaTag tagName='팀' />
-          )}
-          {agendaInfo.isRanking && <AgendaTag tagName='대회' />}
-        </div>
+        {AgendaTags(agendaInfo)}
       </div>
     </div>
   );

diff --git a/components/agenda/Home/AgendaList.tsx b/components/agenda/Home/AgendaList.tsx
@@ -56,7 +56,7 @@ const AgendaListItem = ({
   setSelectedItem?: (key: number) => void;
 }) => {
   const router = useRouter();
-  const href = `/agenda/${agendaInfo.agendaKey}`;
+  const href = `/agenda/detail?agenda_key=${agendaInfo.agendaKey}`;
   return (
     <button
       className={`${styles.agendaListItemBtn} ${
@@ -86,7 +86,9 @@ const AgendaListItem = ({
       }}
     >
       <AgendaInfo agendaInfo={agendaInfo} idx={idx} />
-      <AgendaDeadLine />
+      <div className={`${type === 'list' && styles.show}`}>
+        <AgendaDeadLine deadLine={agendaInfo.agendaDeadLine} />
+      </div>
     </button>
   );
 };

diff --git a/components/agenda/Home/MyTeamInfo.tsx b/components/agenda/Home/MyTeamInfo.tsx
@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import { MyTeamDataProps } from 'types/agenda/agendaDetail/agendaTypes';
-import { fillZero } from 'utils/handleTime';
 import { AgendaTag } from 'components/agenda/utils/AgendaTag';
-import agendastyles from 'styles/agenda/Home/AgendaInfo.module.scss';
+import StartDate from 'components/agenda/utils/StartDate';
 import styles from 'styles/agenda/Home/MyTeamInfo.module.scss';
 
 // Props: API data
@@ -16,25 +15,10 @@ const MyTeamInfo = ({
   if (!myTeamInfo) {
     return <div>참가중인 일정이 없습니다.</div>;
   }
-  const startDate = new Date(myTeamInfo.agendaStartTime as string);
-
   return (
-    <Link
-      href={`/agenda/${myTeamInfo.agendaKey}${
-        myTeamInfo.teamKey ? '/' + myTeamInfo.teamKey : ''
-      }`}
-      key={idx}
-    >
+    <Link href={`/agenda/detail?agenda_key=${myTeamInfo.agendaKey}`} key={idx}>
       <div className={styles.Container} key={idx}>
-        <div className={agendastyles.agendaDateBox}>
-          <div className={agendastyles.agendaStartDateMonth}>
-            {fillZero(`${startDate.getMonth()}`, 2)}
-          </div>
-
-          <div className={agendastyles.agendaStartDateDay}>
-            {fillZero(`${startDate.getDate()}`, 2)}
-          </div>
-        </div>
+        {StartDate(myTeamInfo.agendaStartTime as string)}
         <div className={styles.infoContainer}>
           <div className={styles.teamInfoContainer}>
             {myTeamInfo.teamName ? (