refactor: 지원버튼 활성화 범위 조정, 활동보고서 삭제 제한 (#97)

* refactor: 지원버튼 활성화 범위 조정 * refactor: 활동 보고서 삭제 제한 * chore: 불필요한 코드 제거
COW-dev · Sep 19, 2023 · 92ad0ef · 92ad0ef
1 parent c12e66b
commit 92ad0ef
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 87 deletions.
diff --git a/src/components/club/ClubHeading.tsx b/src/components/club/ClubHeading.tsx
@@ -3,6 +3,7 @@ import { toast } from 'react-hot-toast';
 import Admin from '@/assets/admin.jpg';
 import Heading from '@/components/common/Heading';
 import { deptCaptionColor } from '@/constants/color';
+import { useAllClubs } from '@/hooks/api/club/useAllClubs';
 import { ClubDetail } from '@/types/club';
 import { parseImgUrl } from '@/utils/parse';
 
@@ -27,6 +28,10 @@ export default function ClubHeading({ info }: ClubHeadingProps) {
 
   const imageSrc =
     profileImageUrls.length > 0 ? parseImgUrl(profileImageUrls[0]) : Admin;
+  const { data } = useAllClubs();
+  const isRecruit =
+    data?.data.find((club) => club.name === name)?.recruitStatus ===
+      '모집 중' && formUrl;
   return (
     <>
       <div className="flex flex-col">
@@ -85,12 +90,12 @@ export default function ClubHeading({ info }: ClubHeadingProps) {
 
         <button
           className={`ml-6 hidden rounded-xl bg-blue-500 text-lg font-bold text-white transition-colors hover:bg-blue-600 lg:block lg:w-[25%] ${
-            !formUrl && `cursor-not-allowed bg-gray-300 hover:bg-gray-300 `
+            !isRecruit && `cursor-not-allowed bg-gray-300 hover:bg-gray-300 `
           }`}
-          disabled={!formUrl}
+          disabled={!isRecruit}
         >
           <a
-            href={formUrl ? formUrl : void 0}
+            href={isRecruit ? formUrl : void 0}
             target="_blank"
             className="inline-block w-full py-3.5"
           >

diff --git a/src/components/common/ColorSelect.tsx b/src/components/common/ColorSelect.tsx
@@ -52,7 +52,7 @@ export default function ColorSelect({ name, setData, list }: SelectProps) {
             <div
               key={`option-${index}`}
               className={`block rounded-lg px-4 py-2 text-sm hover:bg-gray-50  text-${item.color}-500`}
-              onClick={(e) => {
+              onClick={() => {
                 setValue(item);
                 setData((prev: any) => ({
                   ...prev,

diff --git a/src/components/fixzone/FixAdminList.tsx b/src/components/fixzone/FixAdminList.tsx
@@ -1,7 +1,5 @@
-import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
 import { useAllFix } from '@/hooks/api/fixzone/useAllFix';
-import { Fix } from '@/types/fixzone';
 import FixItem from './FixItem';
 
 export default function FixAdminList() {

diff --git a/src/components/layout/AdminHeader.tsx b/src/components/layout/AdminHeader.tsx
@@ -23,7 +23,7 @@ export default function AdminHeader() {
   const isLoginPage = curPath.endsWith('login');
 
   return (
-    <header className="fixed z-20 flex h-16 w-full items-center justify-center border-b bg-white md:h-18">
+    <header className="fixed z-40 flex h-16 w-full items-center justify-center border-b bg-white md:h-18">
       <div className="flex w-full max-w-6xl items-center justify-between px-6 md:px-16">
         <Link
           href={isLoginPage ? '/login' : '/'}

diff --git a/src/components/report/detail/Time.tsx b/src/components/report/detail/Time.tsx
@@ -5,7 +5,7 @@ type Prop = {
 };
 export default function Time({ place }: Prop) {
   return (
-    <div className="flex h-10 flex-row items-center  rounded-xl border-[1.5px] border-gray-100 bg-gray-50 px-4 text-sm font-semibold md:mx-3 md:mt-0 md:text-base">
+    <div className="flex h-10 flex-row items-center whitespace-nowrap rounded-xl border-[1.5px] border-gray-100 bg-gray-50 px-4 text-xl font-semibold md:mx-3 md:mt-0 md:text-base">
       <Image src={Place} alt="장소" width={25} height={25} />
       <span className="mx-2 pr-2 text-sm text-gray-400">{place}</span>
     </div>

diff --git a/src/components/report/detail/index.tsx b/src/components/report/detail/index.tsx
@@ -54,19 +54,9 @@ export default function Index({ reportData, isEditing, setReportData }: Props) {
         return updatedReportData;
       });
   }
-  // function handleDateChange(startdate: string, key: string, id: number) {
-  //   setReportData &&
-  //     setReportData((prev) => {
-  //       const updatedReportData = prev.map((report) =>
-  //         report.id === id ? { ...report, [key]: startdate } : report,
-  //       );
-  //       return updatedReportData;
-  //     });
-  //   console.log(reportData);
-  // }
 
   return (
-    <div className=" flex flex-col items-center md:m-3 md:flex-row md:justify-evenly lg:justify-between ">
+    <div className=" flex flex-col items-center md:m-3 md:flex-row md:justify-evenly lg:justify-between">
       <div className="mb-2 flex flex-col">
         {/* sm */}
         <div className="mb-4 inline-block md:hidden">
@@ -150,9 +140,9 @@ export default function Index({ reportData, isEditing, setReportData }: Props) {
                 role === ROLE_TYPE.ROLE_CLUB && `lg:grid-cols-2`
               }`}
             >
-              {participants?.map((participant) => (
+              {participants?.map((participant, index) => (
                 <li
-                  key={participant.name}
+                  key={`participant-${index}`}
                   className={`${participant.name === '' && `hidden`}`}
                 >
                   {participant.name} | {participant.studentId} |

diff --git a/src/pages/admin/report/[term]/[name]/index.tsx b/src/pages/admin/report/[term]/[name]/index.tsx
@@ -5,6 +5,7 @@ import { useCookies } from 'react-cookie';
 import Accordion from '@/components/common/Accordion';
 import Heading from '@/components/common/Heading';
 import Detail from '@/components/report/detail/index';
+import { useCurrentReports } from '@/hooks/api/club/useCurrentReports';
 import { useDeleteReport } from '@/hooks/api/club/useDeleteReport';
 import { useMyClub } from '@/hooks/api/club/useMyClub';
 import { useReportInfo } from '@/hooks/api/club/useReportInfo';
@@ -17,6 +18,7 @@ type ReportDetailProps = {
 
 export default function Index({ term, name }: ReportDetailProps) {
   const [{ token }] = useCookies(['token']);
+  const currentTermData = useCurrentReports(token).data?.data.term ?? 1;
   const {
     data: { data: clubData },
   } = useMyClub(token);
@@ -29,78 +31,16 @@ export default function Index({ term, name }: ReportDetailProps) {
   useEffect(() => {
     if (reportDataList?.data) {
       setReportData([reportDataList.data[0], reportDataList.data[1]]);
-      // parseTime(reportData[0]?.id);
-      // parseTime(reportData[1]?.id);
     }
   }, [reportDataList]);
   if (reportData.length === 0) return;
 
-  // function handleClickCancel() {
-  //   setIsEditing(false);
-  //   reportDataList &&
-  //     setReportData([reportDataList.data[0], reportDataList.data[1]]);
-  // }
-  // function parseTime(index: number) {
-  //   setReportData((prev) => {
-  //     const updatedReportData = prev?.map((report) =>
-  //       report.id === index
-  //         ? {
-  //             ...report,
-  //             startTime: report.startDate.split(' ')[1],
-  //             endTime: report.endDate.split(' ')[1],
-  //             startDate: report.startDate.split(' ')[0],
-  //             endDate: report.endDate.split(' ')[0],
-  //           }
-  //         : report,
-  //     );
-  //     console.log('updatedReportData2324', updatedReportData);
-  //     return updatedReportData;
-  //   });
-  // }
-
   function handleClickDelete() {
     deleteMutation.mutate({
       term,
       token: token,
     });
   }
-  // function handleClickSubmit() {
-  //   setIsEditing(false);
-  //   const formData = new FormData();
-  //   const newReportData = [
-  //     {
-  //       term: 1,
-  //       date: {
-  //         startDate: reportData[0].startDate + ' ' + reportData[0].startTime,
-  //         endDate: reportData[0].endDate + ' ' + reportData[0].endTime,
-  //       },
-  //       place: reportData[0].place,
-  //       content: reportData[0].content,
-  //       participants: reportData[0].participants,
-  //     },
-  //     {
-  //       term: 1,
-  //       date: {
-  //         startDate: reportData[1].startDate + ' ' + reportData[1].startTime,
-  //         endDate: reportData[1].endDate + ' ' + reportData[1].startTime,
-  //       },
-  //       place: reportData[0].place,
-  //       content: reportData[0].content,
-  //       participants: reportData[0].participants,
-  //     },
-  //   ];
-  //   formData.append(
-  //     'reportData',
-  //     new Blob([JSON.stringify(newReportData)], { type: 'application/json' }),
-  //   );
-  //   updateFileOne &&
-  //     formData.append('uploadFiles1', updateFileOne, `uploadFiles`);
-  //   updateFileTwo &&
-  //     formData.append('uploadFiles2', updateFileTwo, `uploadFiles`);
-  //   formData.append('token', token);
-  //   return updateMutation.mutate(formData);
-  // }
-
   return (
     <>
       <Head>
@@ -143,7 +83,9 @@ export default function Index({ term, name }: ReportDetailProps) {
       </div>
       <div className=" fixed bottom-4 right-4 md:mt-6 ">
         <button
-          className="mb-4 min-w-fit rounded-xl bg-red-50 px-3.5 py-2 text-sm font-bold text-red-400 transition-colors hover:bg-blue-200 md:mb-2 md:px-4 md:py-2.5 md:text-base"
+          className={`mb-4 min-w-fit rounded-xl bg-red-50 px-3.5 py-2 text-sm font-bold text-red-400 transition-colors hover:bg-blue-200 md:mb-2 md:px-4 md:py-2.5 md:text-base ${
+            currentTermData !== term && `hidden`
+          }`}
           onClick={handleClickDelete}
         >
           보고서 삭제하기

diff --git a/src/pages/club/[id]/index.tsx b/src/pages/club/[id]/index.tsx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import type { GetServerSideProps } from 'next/types';
-import toast from 'react-hot-toast';
 import BottomButton from '@/components/club/BottomButton';
 import ClubHeading from '@/components/club/ClubHeading';
+import { useAllClubs } from '@/hooks/api/club/useAllClubs';
 import { useClubInfo } from '@/hooks/api/club/useClubInfo';
 import { parseImgUrl } from '@/utils/parse';
 
@@ -17,6 +17,7 @@ export default function Index({ clubId }: ClubDetailProps) {
     const expUrl = /https?:\/\/[^\s"]/;
     return expUrl.test(strUrl);
   }
+
   function parseUrl(line: string) {
     if (checkUrl(line)) {
       const words = line.split(' ');
@@ -45,12 +46,17 @@ export default function Index({ clubId }: ClubDetailProps) {
   if (isError) {
     <div>error</div>;
   }
+  const { data: allClubs } = useAllClubs();
 
   if (isSuccess) {
     const clubInfo = data.data;
-    const { name, introduction, activity, ideal, introduceImageUrls } =
+    const { name, introduction, activity, ideal, formUrl, introduceImageUrls } =
       clubInfo;
 
+    const isRecruit =
+      allClubs?.data.find((club) => club.name === name)?.recruitStatus ===
+        '모집 중' && formUrl;
+
     const parsedImg = introduceImageUrls && parseImgUrl(introduceImageUrls[0]);
     return (
       <>
@@ -108,7 +114,7 @@ export default function Index({ clubId }: ClubDetailProps) {
             </ul>
           </section>
         </main>
-        <div className={`${!clubInfo.formUrl && 'hidden'}`}>
+        <div className={`${!isRecruit && 'hidden'}`}>
           <BottomButton href={clubInfo.formUrl}>지원하기</BottomButton>
         </div>
       </>