Merge branch 'agenda' into Style/#1504-responsive-css

42organization · Sep 4, 2024 · 7b4128f · 7b4128f
2 parents 72ddb51 + 470d84e
commit 7b4128f
Show file tree

Hide file tree

Showing 30 changed files with 211 additions and 129 deletions.
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/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/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} ${

diff --git a/components/agenda/Home/MyTeamInfo.tsx b/components/agenda/Home/MyTeamInfo.tsx
@@ -16,12 +16,7 @@ const MyTeamInfo = ({
     return <div>참가중인 일정이 없습니다.</div>;
   }
   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}>
         {StartDate(myTeamInfo.agendaStartTime as string)}
         <div className={styles.infoContainer}>

diff --git a/components/agenda/Layout/MenuBar.tsx b/components/agenda/Layout/MenuBar.tsx
@@ -43,7 +43,7 @@ const MenuBar = ({ headerstate }: { headerstate: HeaderContextState }) => {
       >
         <MenuBarContent
           content={`Hello. ${user?.intraId}`}
-          href={`/agenda/profile/${user?.intraId}`}
+          href={`/agenda/profile/user?id=${user?.intraId}`}
           as='h2'
         />
         <MenuBarContent content='Home' href='/' as='h1' />

diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/components/agenda/agendaDetail/AgendaInfo.tsx
@@ -21,15 +21,15 @@ const copyLink = () => {
 };
 
 const hostMode = ({ router, agendaKey }: CallbackProps) => {
-  router.push(`/agenda/${agendaKey}/host/modify`);
+  router.push(`/agenda/detail/host?agenda_key=${agendaKey}`);
 };
 
 const subscribeTeam = ({ router, agendaKey }: CallbackProps) => {
-  router.push(`/agenda/${agendaKey}/create-team`);
+  router.push(`/agenda/detail/team/create?agenda_key=${agendaKey}`);
 };
 
 const submitResults = ({ router, agendaKey }: CallbackProps) => {
-  router.push(`/agenda/${agendaKey}/host/result`);
+  router.push(`/agenda/detail/host/result?agenda_key=${agendaKey}`);
 };
 
 export default function AgendaInfo({

diff --git a/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx b/components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx
@@ -2,26 +2,25 @@ import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { AnnouncementProps } from 'types/agenda/agendaDetail/announcementTypes';
 import AnnouncementItem from 'components/agenda/agendaDetail/tabs/AnnouncementItem';
-import { UploadBtn } from 'components/agenda/button/UploadBtn';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
 import PageNation from 'components/Pagination';
+import useAgendaKey from 'hooks/agenda/useAgendaKey';
 import usePageNation from 'hooks/agenda/usePageNation';
 import styles from 'styles/agenda/agendaDetail/tabs/AgendaAnnouncements.module.scss';
 
-export default function AgendaAnnouncements({ isHost }: { isHost: boolean }) {
-  const router = useRouter();
-  const { agendaKey } = router.query;
+export default function AgendaAnnouncements() {
+  const agendaKey = useAgendaKey();
+  const [selected, setSelected] = useState<number>(0);
 
   const { content, PagaNationElementProps } = usePageNation<AnnouncementProps>({
     url: `/announcement`,
     params: { agenda_key: agendaKey },
     size: 5,
   });
 
-  const newAnnouncement = () => {
-    router.push(`/agenda/${agendaKey}/host/createAnnouncement`);
-  };
-
-  const [selected, setSelected] = useState<number>(0);
+  if (!agendaKey || !content) {
+    return <AgendaLoading />;
+  }
 
   return (
     <>
@@ -40,27 +39,10 @@ export default function AgendaAnnouncements({ isHost }: { isHost: boolean }) {
               />
             ))}
             <PageNation {...PagaNationElementProps} />
-            {isHost ? (
-              <div className={styles.buttonWarp}>
-                <UploadBtn text='공지사항 추가' onClick={newAnnouncement} />
-              </div>
-            ) : null}
           </div>
-          {content.length > 0 && selected >= 0 && selected < content.length ? (
-            <AnnouncementItem
-              key={content[selected].id}
-              id={content[selected].id}
-              title={content[selected].title}
-              content={content[selected].content}
-              createdAt={content[selected].createdAt}
-              isSelected={true}
-            />
-          ) : (
-            ''
-          )}
         </>
       ) : (
-        <div className={styles.emptyContainer}>공지사항이 없습니다.</div>
+        <div className={styles.container}>공지사항이 없습니다.</div>
       )}
     </>
   );

diff --git a/components/agenda/agendaDetail/tabs/ParticipantTeam.tsx b/components/agenda/agendaDetail/tabs/ParticipantTeam.tsx
@@ -4,10 +4,12 @@ import {
   ParticipantTeamProps,
   PeopleCount,
 } from 'types/agenda/agendaDetail/tabs/participantTypes';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
 import { countCoalitions } from 'components/agenda/utils/coalition/countCoalitions';
 import { getCoalitionEnum } from 'components/agenda/utils/coalition/getCoalitionEnum';
 import ColorList from 'components/agenda/utils/ColorList';
 import TeamLeaderIcon from 'public/image/agenda/rock-and-roll-hand.svg';
+import useAgendaKey from 'hooks/agenda/useAgendaKey';
 import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss';
 
 const totalPeople = (peopleCount: PeopleCount) => {
@@ -22,8 +24,7 @@ export default function ParticipantTeam({
   maxMateCount,
   coalitions,
 }: ParticipantTeamProps) {
-  const router = useRouter();
-  const { agendaKey } = router.query;
+  const agendaKey = useAgendaKey();
   const coalitionEnum = getCoalitionEnum(coalitions);
   const peopleCount = countCoalitions(coalitionEnum);
 
@@ -51,12 +52,15 @@ export default function ParticipantTeam({
     />
   );
 
+  if (!agendaKey) {
+    return <AgendaLoading />;
+  }
   return (
     <>
       {teamKey ? (
         <Link
           className={styles.participantTeamContainer}
-          href={`/agenda/${agendaKey}/${teamKey}`}
+          href={`/agenda/detail/team?agenda_key=${agendaKey}&team_key=${teamKey}`}
         >
           {content}
           {colorList}

diff --git a/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx b/components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx
@@ -1,8 +1,9 @@
-import { useRouter } from 'next/router';
 import { ParticipantTeamListProps } from 'types/agenda/agendaDetail/tabs/participantTypes';
 import { TeamDataProps } from 'types/agenda/team/teamDataTypes';
 import ParticipantTeam from 'components/agenda/agendaDetail/tabs/ParticipantTeam';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
 import PageNation from 'components/Pagination';
+import useAgendaKey from 'hooks/agenda/useAgendaKey';
 import usePageNation from 'hooks/agenda/usePageNation';
 import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss';
 
@@ -11,8 +12,7 @@ export default function ParticipantTeamList({
   maxPeople,
   myTeam,
 }: ParticipantTeamListProps) {
-  const router = useRouter();
-  const { agendaKey } = router.query;
+  const agendaKey = useAgendaKey();
 
   const {
     content: openTeams,
@@ -30,16 +30,15 @@ export default function ParticipantTeamList({
     params: { agenda_key: agendaKey },
   });
 
-  const openTeamsCount = openTeams ? openTeams.length : 0;
-  const confirmedTeamsCount = confirmedTeams ? confirmedTeams.length : 0;
-
-  if (!agendaKey) {
-    return <div>Loading...</div>;
-  }
   const noParticipants = (
     <div className={styles.noParticipants}>팀이 없습니다.</div>
   );
+  const openTeamsCount = openTeams ? openTeams.length : 0;
+  const confirmedTeamsCount = confirmedTeams ? confirmedTeams.length : 0;
 
+  if (!agendaKey || !openTeams || !confirmedTeams) {
+    return <AgendaLoading />;
+  }
   return (
     <>
       <div className={styles.participantsContainer}>

diff --git a/components/agenda/agendaDetail/tabs/ParticipantsList.tsx b/components/agenda/agendaDetail/tabs/ParticipantsList.tsx
@@ -1,16 +1,16 @@
-import { useRouter } from 'next/router';
 import {
   numberProps,
   ParticipantProps,
 } from 'types/agenda/agendaDetail/tabs/participantTypes';
 import Participant from 'components/agenda/agendaDetail/tabs/Participant';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
 import PageNation from 'components/Pagination';
+import useAgendaKey from 'hooks/agenda/useAgendaKey';
 import usePageNation from 'hooks/agenda/usePageNation';
 import styles from 'styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss';
 
 export default function ParticipantsList({ max }: numberProps) {
-  const router = useRouter();
-  const { agendaKey } = router.query;
+  const agendaKey = useAgendaKey();
 
   const { content: participants, PagaNationElementProps } =
     usePageNation<ParticipantProps>({
@@ -19,10 +19,10 @@ export default function ParticipantsList({ max }: numberProps) {
     });
 
   const curPeople = participants ? participants.length : 0;
-  if (!participants) {
-    return <div className={styles.noParticipants}>Loading...</div>;
-  }
 
+  if (!agendaKey || !participants) {
+    return <AgendaLoading />;
+  }
   return (
     <>
       <div className={styles.participantsTitle}>

diff --git a/components/agenda/teamDetail/TeamInfo.tsx b/components/agenda/teamDetail/TeamInfo.tsx
@@ -1,12 +1,13 @@
-import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { TeamInfoProps } from 'types/agenda/teamDetail/TeamInfoTypes';
 import { colorMapping } from 'types/agenda/utils/colorList';
 import { TeamStatus, Authority } from 'constants/agenda/agenda';
 import { ShareBtn } from 'components/agenda/button/Buttons';
 import CreateTeamForm from 'components/agenda/Form/CreateTeamForm';
 import TeamButtons from 'components/agenda/teamDetail/TeamButtons';
+import AgendaLoading from 'components/agenda/utils/AgendaLoading';
 import EditIcon from 'public/image/agenda/edit.svg';
+import useAgendaKey from 'hooks/agenda/useAgendaKey';
 import styles from 'styles/agenda/TeamDetail/TeamInfo.module.scss';
 
 const TeamInfo = ({
@@ -18,13 +19,16 @@ const TeamInfo = ({
   submitTeamForm,
 }: TeamInfoProps) => {
   // EditTeam UI <-> TeamInfo UI 전환
-  const router = useRouter();
-  const { agendaKey } = router.query;
   const [convert, setConvert] = useState(true);
+  const agendaKey = useAgendaKey();
 
   const handleConvert = () => {
     setConvert(!convert);
   };
+
+  if (!agendaKey) {
+    return <AgendaLoading />;
+  }
   return convert ? (
     /* TeamInfo */
     <>

diff --git a/components/agenda/utils/AgendaLoading.tsx b/components/agenda/utils/AgendaLoading.tsx
@@ -0,0 +1,7 @@
+import styles from 'styles/agenda/utils/AgendaLoading.module.scss';
+
+const AgendaLoading = () => {
+  return <div className={styles.container}>Lodaing...</div>;
+};
+
+export default AgendaLoading;
diff --git a/components/agenda/utils/PageController.tsx b/components/agenda/utils/PageController.tsx
@@ -96,7 +96,9 @@ const PageController = ({
             )
               return;
             data.length && data[current]
-              ? handleNavigation('/agenda/' + data[current].agendaKey)
+              ? handleNavigation(
+                  '/agenda/detail?agenda_key=' + data[current].agendaKey
+                )
               : null;
           }}
           className={styles.toClick}