[Bug] 뷰/ui 관련 에러 처리#1519

components/LoginChecker.tsx

@@ -7,7 +7,7 @@ interface LoginCheckerProps {
 }
 
 export default function LoginChecker({ children }: LoginCheckerProps) {
-  // return <>{children}</>;
+  return <>{children}</>;
 
   const [isLoading, loggedIn] = useLoginCheck();
   // return <>{children}</>;

components/agenda/Form/AgendaForm.tsx

@@ -73,14 +73,14 @@ const AgendaForm = ({
     if (!Array.isArray(newValue)) {
       return;
     }
-
     if (newValue[1] - newValue[0] < minDistance) {
       if (activeThumb === 0) {
         const clamped = Math.min(newValue[0], 100 - minDistance);
         setTeamLimit([clamped, clamped + minDistance]);
       } else {
         const clamped = Math.max(newValue[1], minDistance);
-        setTeamLimit([clamped - minDistance, clamped]);
+        if (clamped - minDistance < newValue[0]) setTeamLimit([2, 12]);
+        else setTeamLimit([clamped - minDistance, clamped]);
       }
     } else {
       setTeamLimit(newValue as number[]);

components/agenda/Home/AgendaInfo.tsx

@@ -8,10 +8,10 @@ import styles from 'styles/agenda/Home/AgendaInfo.module.scss';
 // Props: API data
 const AgendaInfo = ({
   agendaInfo,
-  key,
+  idx,
 }: {
   agendaInfo: AgendaDataProps;
-  key: number;
+  idx: number;
 }) => {
   if (!agendaInfo) {
     return <div>There is no agenda</div>;
@@ -20,7 +20,7 @@ const AgendaInfo = ({
   const endDate = new Date(agendaInfo.agendaEndTime);
 
   return (
-    <div className={styles.agendaInfoContainer} key={key}>
+    <div className={styles.agendaInfoContainer} key={idx}>
       <div className={styles.agendaDateBox}>
         <div className={styles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}

components/agenda/Home/AgendaList.tsx

@@ -9,49 +9,48 @@ const AgendaList = ({ agendaList }: { agendaList: AgendaDataProps[] }) => {
   const [selectedItem, setSelectedItem] = useState<number | null>(0);
 
   return (
-    <div className={styles.container}>
-      <div className={styles.agendaListContainer}>
-        <div className={styles.agendaListItemContainer}>
-          {!agendaList || !agendaList.length ? (
-            <div>
-              <div className={styles.emptyContainer}>일정이 없습니다.</div>
+    <>
+      {!agendaList || !agendaList.length ? (
+        <div className={styles.emptyContainer}>일정이 없습니다.</div>
+      ) : (
+        <div className={styles.container}>
+          <div className={styles.agendaListContainer}>
+            <div className={styles.agendaListItemContainer}>
+              {agendaList.map((agendaInfo, idx) => {
+                agendaInfo.idx = idx;
+                return (
+                  <AgendaListItem
+                    agendaInfo={agendaInfo}
+                    key={idx}
+                    idx={idx}
+                    type='list'
+                    className={idx === selectedItem ? styles.selected : ''}
+                    setSelectedItem={setSelectedItem}
+                  />
+                );
+              })}
             </div>
-          ) : (
-            agendaList.map((agendaInfo, idx) => {
-              agendaInfo.idx = idx;
-              return (
-                <AgendaListItem
-                  agendaInfo={agendaInfo}
-                  key={idx}
-                  type='list'
-                  className={idx === selectedItem ? styles.selected : ''}
-                  setSelectedItem={setSelectedItem}
-                />
-              );
-            })
-          )}
+          </div>
+          <AgendaListItem
+            agendaInfo={agendaList[selectedItem || 0]}
+            idx={selectedItem || 0}
+            type='big'
+          />
         </div>
-      </div>
-      {agendaList.length && (
-        <AgendaListItem
-          agendaInfo={agendaList[selectedItem || 0]}
-          key={selectedItem || 0}
-          type='big'
-        />
       )}
-    </div>
+    </>
   );
 };
 
 const AgendaListItem = ({
   agendaInfo,
-  key,
+  idx,
   type,
   className,
   setSelectedItem,
 }: {
   agendaInfo: AgendaDataProps;
-  key: number;
+  idx: number;
   type?: string;
   className?: string;
   setSelectedItem?: (key: number) => void;
@@ -69,20 +68,24 @@ const AgendaListItem = ({
           agendaInfo.agendaPosterUrl || '/image/agenda/42.jpg'
         }) lightgray 50% / cover no-repeat`,
       }}
-      key={key}
+      key={idx}
       onClick={() => {
         if (window.innerWidth < 961) {
           router.push(href);
           return;
         }
-        if (type === 'list' && setSelectedItem && agendaInfo.idx) {
+        if (
+          type === 'list' &&
+          setSelectedItem &&
+          typeof agendaInfo.idx === 'number'
+        ) {
           setSelectedItem(agendaInfo.idx);
           return;
         }
         router.push(href);
       }}
     >
-      <AgendaInfo agendaInfo={agendaInfo} key={key} />
+      <AgendaInfo agendaInfo={agendaInfo} idx={idx} />
       <AgendaDeadLine />
     </button>
   );

components/agenda/Home/MyAgendaBtn.tsx

@@ -31,7 +31,6 @@ const MyAgendaBtn = () => {
   };
   const myList =
     useFetchGet<MyTeamDataProps[]>('/profile/current/list')?.data || [];
-  console.log(myList);
   return (
     <div
       className={`${styles.myAgendaContainer} ${
@@ -61,7 +60,7 @@ const MyAgendaBtn = () => {
               key={idx}
             >
               <div className={styles.myagendaItemContainer} key={idx}>
-                <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} />
+                <MyTeamInfo myTeamInfo={myTeamInfo} key={idx} idx={idx} />
               </div>
             </Link>
           ))

components/agenda/Home/MyTeamInfo.tsx

@@ -7,10 +7,10 @@ import styles from 'styles/agenda/Home/MyTeamInfo.module.scss';
 // Props: API data
 const MyTeamInfo = ({
   myTeamInfo,
-  key,
+  idx,
 }: {
   myTeamInfo: MyTeamDataProps;
-  key: number;
+  idx: number;
 }) => {
   if (!myTeamInfo) {
     return <div>참가중인 일정이 없습니다.</div>;
@@ -19,7 +19,7 @@ const MyTeamInfo = ({
   const startDate = new Date(myTeamInfo.agendaStartTime as string);
   //아래 주석달린 부분은 api 변경시 추가 예정입니다.
   return (
-    <div className={styles.Container} key={key}>
+    <div className={styles.Container} key={idx}>
       <div className={agendastyles.agendaDateBox}>
         <div className={agendastyles.agendaStartDateMonth}>
           {fillZero(`${startDate.getMonth()}`, 2)}

components/agenda/utils/PageController.tsx

@@ -41,7 +41,7 @@ const PageController = ({
   const max = data.length;
 
   const fetchAgendaList = async () => {
-    const url = '/list';
+    const url = '/open';
     const data = await instanceInAgenda
       .get(url)
       .then((res) => {
@@ -73,39 +73,43 @@ const PageController = ({
 
   return (
     <div className={styles.container}>
-      <button
+      <div
         className={styles.agendaInfoContainer}
         style={{
-          background: `linear-gradient(0deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${
+          background: `linear-gradient(180deg, #fff 7rem, rgba(0, 0, 0, 0) 10rem), url(${
             data[current]?.agendaPosterUrl || '/image/agenda/42.jpg'
           }) lightgray 50% / cover no-repeat`,
         }}
-        onClick={(e) => {
-          const target = e.target as HTMLElement;
-          if (
-            target.className.includes(styles.moveButton) ||
-            target.closest(styles.moveButton)
-          )
-            return;
-          data.length && data[current]
-            ? handleNavigation('/agenda/' + data[current].agendaKey)
-            : null;
-        }}
       >
         <button
           onClick={movePrev}
           className={`${styles.moveButton} ${styles.moveButtonPrev}`}
         >
           <div className={styles.prev} />
         </button>
+        <button
+          onClick={(e) => {
+            const target = e.target as HTMLElement;
+            if (
+              target.className.includes(styles.moveButton) ||
+              target.closest(styles.moveButton)
+            )
+              return;
+            data.length && data[current]
+              ? handleNavigation('/agenda/' + data[current].agendaKey)
+              : null;
+          }}
+          className={styles.toClick}
+        />
+
         <button
           className={`${styles.moveButton} ${styles.moveButtonNext}`}
           onClick={moveNext}
         >
           <div className={styles.next} />
         </button>
-        <AgendaInfo agendaInfo={data[current]} key={current || 0} />
-      </button>
+        <AgendaInfo agendaInfo={data[current]} idx={current || 0} />
+      </div>
       <PageControllerNavigator
         currentPage={current}
         maxPage={data.length}

pages/agenda/index.tsx

@@ -10,20 +10,15 @@ import styles from 'styles/agenda/Home/Agenda.module.scss';
 import listStyles from 'styles/agenda/Home/AgendaList.module.scss';
 
 const Agenda: NextPage = () => {
-  const [showCurrent, setShowCurrent] = useState<boolean>(true);
+  const [showCurrent, setShowCurrent] = useState<string>('open');
 
   const { PagaNationElementProps, content: historyData } =
     usePageNation<AgendaDataProps>({
       url: '/history',
     });
 
-  const { data: currentData } = useFetchGet<AgendaDataProps[]>('/list');
-  const toggleStatus = (e: React.MouseEvent) => {
-    const target = e.target as HTMLButtonElement;
-    const status = showCurrent ? 'ongoing' : 'closed';
-    if ((target && target.name === status) || !target.name) return;
-    setShowCurrent(target.name === 'ongoing');
-  };
+  const { data: currentData } = useFetchGet<AgendaDataProps[]>('/confirm');
+  const { data: openData } = useFetchGet<AgendaDataProps[]>('/open');
 
   return (
     <div className={styles.agendaPageContainer}>
@@ -33,28 +28,40 @@ const Agenda: NextPage = () => {
           <h2>AGENDA LIST</h2>
           <div>
             <button
-              className={`${listStyles.agendaListStatus} ${
-                showCurrent ? listStyles.selectedStatus : ''
-              }`}
+              className={`${listStyles.agendaListStatus} 
+                ${showCurrent === 'open' ? listStyles.selectedStatus : ''}`}
               name='ongoing'
-              onClick={toggleStatus}
+              onClick={() => setShowCurrent('open')}
+            >
+              모집중
+            </button>
+            {' | '}
+            <button
+              className={`${listStyles.agendaListStatus} 
+            ${showCurrent === 'current' ? listStyles.selectedStatus : ''}`}
+              name='closed'
+              onClick={() => setShowCurrent('current')}
             >
               진행중
             </button>
             {' | '}
             <button
               className={`${listStyles.agendaListStatus} 
-            ${showCurrent ? '' : listStyles.selectedStatus}`}
+              ${showCurrent === 'history' ? listStyles.selectedStatus : ''}`}
               name='closed'
-              onClick={toggleStatus}
+              onClick={() => setShowCurrent('history')}
             >
               종료된
             </button>
           </div>
         </div>
 
-        {showCurrent ? (
-          <AgendaList agendaList={currentData || []} />
+        {showCurrent !== 'history' ? (
+          <AgendaList
+            agendaList={
+              showCurrent === 'open' ? openData || [] : currentData || []
+            }
+          />
         ) : (
           <>
             <AgendaList agendaList={historyData || []} />

pages/index.tsx

@@ -14,12 +14,17 @@ const Index: NextPage = () => {
 
   return (
     <div className={styles.layout}>
-      <h2 className={styles.title} onClick={() => handleNavigation('/agenda')}>
-        Agenda
-      </h2>
-      <PageController handleNavigation={handleNavigation} />
-      <h2 className={styles.title}>Ticket & PingPong</h2>
-      <div className={styles.flex + ' ' + styles.content}>
+      <div className={styles.top}>
+        <h2
+          className={styles.title}
+          onClick={() => handleNavigation('/agenda')}
+        >
+          Agenda
+        </h2>
+        <PageController handleNavigation={handleNavigation} />
+      </div>
+      <div className={styles.ticket}>
+        <h2 className={styles.title}>Ticket</h2>
         <button
           className={styles.container}
           onClick={() => handleNavigation('/agenda/ticket')}
@@ -32,6 +37,11 @@ const Index: NextPage = () => {
             style={{ width: '100%', height: '100%' }}
           />
         </button>
+      </div>
+      <div className={styles.pingpong}>
+        <h2 className={styles.title} onClick={() => handleNavigation('/takgu')}>
+          PingPong
+        </h2>
         <button
           className={styles.container}
           onClick={() => handleNavigation('/takgu')}
@@ -40,9 +50,15 @@ const Index: NextPage = () => {
         </button>
       </div>
 
-      <button className={styles.container + ' ' + styles.match}>
-        아우터 매치 준비중입니다.
-      </button>
+      <div className={styles.match}>
+        <h2
+          className={styles.title}
+          // onClick={() => handleNavigation('/takgu')}
+        >
+          Outer match
+        </h2>
+        <button className={styles.container}>아우터 매치 준비중입니다.</button>
+      </div>
     </div>
   );
 };