클래스 진행도 및 진행횟수 로직 변경

Eunseo-jo · Mar 25, 2024 · fd0954c · fd0954c
2 parents 1704ed0 + 9c5a8a0
commit fd0954c
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 27 deletions.
diff --git a/src/app/mypage/instructor/manage/myclass/[id]/_components/ClassOverview.tsx b/src/app/mypage/instructor/manage/myclass/[id]/_components/ClassOverview.tsx
@@ -9,20 +9,19 @@ import {
   getAllRegisterLists,
   getScheduleRegisterLists,
 } from '@/lib/apis/classApis';
+import { useClassProgressStore } from '@/store';
 
 interface ClassOverViewProps {
-  totalClassNum: number;
-  pastClassNum: number;
+  totalClassNum?: number;
+  pastClassNum?: number;
   selectedClass: { label: string | null; id: number | null };
   lectureId: string;
 }
 
-const ClassOverview = ({
-  totalClassNum,
-  pastClassNum,
-  selectedClass,
-  lectureId,
-}: ClassOverViewProps) => {
+const ClassOverview = (props: ClassOverViewProps) => {
+  const { totalClassNum, pastClassNum, selectedClass, lectureId } = props;
+  const { totalClass, pastClass } = useClassProgressStore();
+
   const fetchRegisterList = async () => {
     if (selectedClass.id) {
       const registerData = await getScheduleRegisterLists(selectedClass.id);
@@ -39,41 +38,40 @@ const ClassOverview = ({
   } = useQuery({
     queryKey: ['registerList', lectureId, selectedClass.id],
     queryFn: fetchRegisterList,
-    refetchOnWindowFocus: 'always',
   });
 
   if (!registerList || registerList instanceof Error || error)
     return (
-      <aside className="flex h-fit flex-col whitespace-nowrap rounded-lg bg-white p-4 font-medium shadow-float shadow-float">
+      <aside className="flex h-fit flex-col whitespace-nowrap rounded-lg bg-white p-4 font-medium shadow-float">
         <ErrorFallback />
       </aside>
     );
 
   return (
-    <aside className="flex h-fit flex-col whitespace-nowrap rounded-lg bg-white shadow-float shadow-float ">
-      <div className="flex h-[5.13rem] divide-x  divide-solid divide-gray-700 border-b border-solid border-gray-700 py-[0.69rem] text-sm font-semibold text-gray-100">
+    <aside className="flex h-fit flex-col whitespace-nowrap rounded-lg bg-white shadow-float">
+      <div className="flex h-20 divide-x divide-solid divide-gray-700 border-b border-solid border-gray-700 py-2.5 text-sm font-semibold text-gray-100">
         <div className="flex w-1/2 items-center justify-center gap-2.5 lg:flex-col lg:gap-0">
           진행한 클래스
           <span className="text-xl font-bold text-sub-color1">
-            {pastClassNum}회
+            {pastClassNum || pastClass}회
           </span>
         </div>
         <div className="flex w-1/2 items-center justify-center gap-2.5 lg:flex-col lg:gap-0">
           총 클래스
           <span className="text-xl font-bold text-gray-100">
-            {totalClassNum}회
+            {totalClassNum || totalClass}회
           </span>
         </div>
       </div>
-      <div className="flex flex-col px-[1.31rem] py-[0.81rem]">
+      <div className="flex flex-col px-5 py-3.5">
         <h3 className="flex items-center justify-between text-lg font-semibold">
           {selectedClass.label === null
             ? '전체 수강생 리스트'
             : `${selectedClass.label}`}
 
           <button
             aria-label="전체 채팅"
-            className="flex h-[1.75rem] w-[5.5625rem] items-center justify-center gap-[0.13rem] rounded-[0.3125rem] bg-black text-sm text-white"
+            className="flex h-7 w-[5.5625rem] items-center justify-center gap-0.5 rounded-md bg-black text-sm text-white"
           >
             <ChatSVG width="16" height="17" fill="white" />
             전체 채팅

diff --git a/src/app/mypage/instructor/manage/myclass/[id]/_components/RegularClassTable.tsx b/src/app/mypage/instructor/manage/myclass/[id]/_components/RegularClassTable.tsx
@@ -7,6 +7,7 @@ import {
   processedScheduleData,
 } from '../_utils/formatSchedule';
 import { IRegularClassSchedule } from '@/types/class';
+import { useClassProgressStore } from '@/store';
 import { getRegularScheduleTime } from '@/utils/scheduleDateUtils';
 
 const TableCellStyle = 'border border-solid border-gray-700 py-2';
@@ -25,6 +26,7 @@ const RegularClassTable = (props: ClassTableProps) => {
   const [selectedTime, setSelectedTime] = useState(0);
   const [showPastClasses, setShowPastClasses] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { setTotalClass, setPastClass } = useClassProgressStore();
 
   const totalClass = processedScheduleData(
     regularSchedules[selectedTime].regularLectureSchedule,
@@ -42,6 +44,11 @@ const RegularClassTable = (props: ClassTableProps) => {
     const scheduleId =
       regularSchedules[selectedTime].regularLectureSchedule[0].id;
     handleSelectClassId(regularSchedulesList[selectedTime], scheduleId);
+
+    setTotalClass(totalClass.length);
+    const futureClass = filterSchedulesByDate(false, totalClass);
+    const pastClass = totalClass.length - futureClass.length;
+    setPastClass(pastClass);
   }, [selectedTime]);
 
   const tableSchedules = filterSchedulesByDate(showPastClasses, totalClass);
@@ -53,7 +60,7 @@ const RegularClassTable = (props: ClassTableProps) => {
 
   return (
     <>
-      <ul className="flex flex-wrap gap-x-4">
+      <ul className="flex flex-wrap gap-x-4 gap-y-2">
         {regularSchedulesList.map((list, index) => (
           <li
             key={index}

diff --git a/src/app/mypage/instructor/manage/myclass/[id]/page.tsx b/src/app/mypage/instructor/manage/myclass/[id]/page.tsx
@@ -126,6 +126,11 @@ const ClassDetailPage = ({ params: { id } }: { params: { id: string } }) => {
     return [];
   })();
 
+  const pastClassNum =
+    scheduleData &&
+    futureScheduleData &&
+    scheduleData.length - futureScheduleData.length;
+
   return (
     <div className="grid grid-cols-1 gap-4 px-4 md:px-9 xl:grid-cols-[2fr,1fr] xl:px-0">
       <section className="mb-18 flex h-full flex-col rounded-lg bg-white shadow-float">
@@ -216,8 +221,8 @@ const ClassDetailPage = ({ params: { id } }: { params: { id: string } }) => {
       </section>
       <section className="mt-4 lg:mt-0">
         <ClassOverview
-          totalClassNum={processedScheduleData?.length || 0} // 정기 클래스일 때 처리 필요
-          pastClassNum={futureScheduleData?.length || 0} // 정기 클래스일 때 처리 필요
+          totalClassNum={scheduleData?.length}
+          pastClassNum={pastClassNum}
           selectedClass={selectedClass}
           lectureId={id}
         />

diff --git a/src/app/mypage/instructor/manage/myclass/_components/ClassList.tsx b/src/app/mypage/instructor/manage/myclass/_components/ClassList.tsx
@@ -9,16 +9,18 @@ interface ClassListProps extends ILecturerClassListResonse {
 const ClassList = ({
   isProgress,
   id,
-  allSchedule,
-  completedSchedule,
+  schedulesCount,
+  completedSchedulesCount,
   startDate,
   endDate,
   title,
 }: ClassListProps) => {
   const router = useRouter();
   const status = isProgress ? '모집중' : '마감';
   const range = `${formatShortDate(startDate)} - ${formatShortDate(endDate)}`;
-  const progressRate = Math.floor((completedSchedule / allSchedule) * 100);
+  const progressRate = Math.floor(
+    (completedSchedulesCount / schedulesCount) * 100,
+  );
 
   const handleTitleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -66,10 +68,11 @@ const ClassList = ({
         <>
           <div className="mb-2 flex items-center border-t border-solid border-gray-700 px-5 pt-3.5 text-sm">
             <p className="mr-3.5 text-sub-color1">
-              진행<span className="font-bold"> {completedSchedule}회</span>
+              진행
+              <span className="font-bold"> {completedSchedulesCount}회</span>
             </p>
             <p className="text-gray-100">
-              전체<span className="font-bold"> {allSchedule}회</span>
+              전체<span className="font-bold"> {schedulesCount}회</span>
             </p>
             <span className="flex flex-1 justify-end text-base font-bold">
               {progressRate}%

diff --git a/src/store/classProgressStore.ts b/src/store/classProgressStore.ts
@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface IClassProgressStore {
+  totalClass: number;
+  pastClass: number;
+  setTotalClass: (data: number) => void;
+  setPastClass: (data: number) => void;
+}
+
+export const useClassProgressStore = create<IClassProgressStore>()((set) => ({
+  totalClass: 0,
+  pastClass: 0,
+  setTotalClass: (data: number) => set({ totalClass: data }),
+  setPastClass: (data: number) => set({ pastClass: data }),
+}));
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -9,3 +9,5 @@ export { useClassScheduleStore } from './classScheduleStore';
 export { useClassCreateStore } from './classCreate';
 
 export { usefilterStore } from './filterStore';
+
+export { useClassProgressStore } from './classProgressStore';
diff --git a/src/types/class.d.ts b/src/types/class.d.ts
@@ -427,12 +427,12 @@ interface IImage {
 
 export interface ILecturerClassListResonse {
   id: number;
-  allSchedule: number;
-  completedSchedule: number;
+  schedulesCount: number;
+  completedSchedulesCount: number;
   startDate: string;
   endDate: string;
   title: string;
-  [key: string]: any;
+  lectureMethod: { name: string };
 }
 
 export interface ILecturerClassDetailResonse {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,5 @@ export { useClassScheduleStore } from './classScheduleStore';
		export { useClassCreateStore } from './classCreate';

		export { usefilterStore } from './filterStore';

		export { useClassProgressStore } from './classProgressStore';