Merge pull request #327 from CheckMate-sookmyung/fix/#326-api

#326 fix: api 및 페이지 내용 일부 수정
CheckMate-sookmyung · Sep 22, 2024 · 38cd1d5 · 38cd1d5
2 parents 252fa1c + 260690a
commit 38cd1d5
Show file tree

Hide file tree

Showing 21 changed files with 90 additions and 68 deletions.
diff --git a/src/apis/attendance.js b/src/apis/attendance.js
@@ -1,9 +1,7 @@
 import { axiosInstance } from '@/axios';
 
 export const getAttendanceList = async (eventId) => {
-  const { data } = await axiosInstance.get(
-    `/api/v1/events/attendanceList/${eventId}`,
-  );
+  const { data } = await axiosInstance.get(`/api/v1/attendancelist/${eventId}`);
 
   return data;
 };

diff --git a/src/apis/event.js b/src/apis/event.js
@@ -26,3 +26,11 @@ export const updateEventDetail = async (eventId, body) => {
 
   return data;
 };
+
+export const getEventStatistic = async (eventId) => {
+  const { data } = await axiosInstance.get(
+    `/api/v1/events/statistic/${eventId}`,
+  );
+
+  return data;
+};
diff --git a/src/components/Dropdown/Dropdown.style.jsx b/src/components/Dropdown/Dropdown.style.jsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export const Dropdown = styled.div`
   position: relative;
   display: inline-block;
+  overflow: visible;
 `;
 
 export const DropdownButton = styled.button`

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -24,12 +24,12 @@ const menuItems = [
   {
     to: '/events/dashboard/email',
     icon: <FaEnvelopeCircleCheck />,
-    text: '이메일 예약 발송',
+    text: '행사 안내 메일',
   },
   {
     to: '/events/dashboard/survey',
     icon: <FaClipboardList />,
-    text: '설문 조사 링크 발송',
+    text: '설문조사 안내 메일',
   },
   {
     to: '/events/dashboard/attendee',

diff --git a/src/components/Table/AttendeeTable.jsx b/src/components/Table/AttendeeTable.jsx
@@ -6,6 +6,7 @@ import {
 } from 'react-icons/fa6';
 import { BsEye } from 'react-icons/bs';
 import { Dropdown } from '@/components';
+import { format } from 'date-fns';
 
 const AttendeeTable = ({
   attendees,
@@ -54,10 +55,10 @@ const AttendeeTable = ({
                   학번
                   <SortIcon columnKey="number" />
                 </S.TableHeader>
-                <S.TableHeader onClick={() => sortData('year')}>
+                {/* <S.TableHeader onClick={() => sortData('year')}>
                   학년
                   <SortIcon columnKey="year" />
-                </S.TableHeader>
+                </S.TableHeader> */}
               </>
             )}
             <S.TableHeader onClick={() => sortData('phoneNumber')}>
@@ -98,14 +99,15 @@ const AttendeeTable = ({
               {showStudentInfo && (
                 <>
                   <S.TableData>{data.number}</S.TableData>
-                  <S.TableData>{data.year}</S.TableData>
+                  {/* <S.TableData>{data.year}</S.TableData> */}
                 </>
               )}
               <S.TableData>{data.phoneNumber}</S.TableData>
-              <S.TableData>{formatAttendTime(data.attendTime)}</S.TableData>
-              {/* <S.TableData>
-                <BsEye />
-              </S.TableData> */}
+              <S.TableData>
+                {data.attendTime === null
+                  ? '-'
+                  : format(new Date(data.attendTime), 'HH:mm')}
+              </S.TableData>
             </tr>
           ))}
         </tbody>

diff --git a/src/components/Table/Table.style.jsx b/src/components/Table/Table.style.jsx
@@ -35,7 +35,6 @@ export const TableData = styled.td`
   font-size: 14px;
   color: #555;
   white-space: nowrap;
-  overflow: hidden;
 
   &:first-child {
     text-align: left;

diff --git a/src/pages/DashboardPage/DashboardAttendeePage/DashboardAttendeePage.jsx b/src/pages/DashboardPage/DashboardAttendeePage/DashboardAttendeePage.jsx
@@ -110,6 +110,7 @@ export default function DashboardAttendeePage() {
         phoneNumber: student.attendeePhoneNumber || '-',
         email: student.attendeeEmail || '-',
         attendance: student.attendance,
+        attendTime: student.attendTime,
       }));
     });
 
@@ -155,6 +156,7 @@ export default function DashboardAttendeePage() {
           phoneNumber: student.attendeePhoneNumber || '-',
           email: student.attendeeEmail || '-',
           attendance: student.attendance,
+          attendTime: student.attendTime,
         }));
       });
 
@@ -236,7 +238,7 @@ export default function DashboardAttendeePage() {
   const handleDownload = async () => {
     try {
       const response = await axiosInstance.get(
-        `/api/v1/events/attendance/list/${eventId}`,
+        `/api/v1/attendance/list/${eventId}`,
         { responseType: 'blob' },
       );
 

diff --git a/src/pages/DashboardPage/DashboardAttendeePage/DashboardAttendeePage.style.jsx b/src/pages/DashboardPage/DashboardAttendeePage/DashboardAttendeePage.style.jsx
@@ -5,6 +5,7 @@ export const DashboardAttendee = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: fit-content;
   padding: 50px;
   gap: 10px;
 

diff --git a/src/pages/DashboardPage/DashboardEmailPage/DashboardEmailPage.jsx b/src/pages/DashboardPage/DashboardEmailPage/DashboardEmailPage.jsx
@@ -28,14 +28,11 @@ export default function DashboardEmailPage() {
   useEffect(() => {
     const getEmailContent = async () => {
       try {
-        const response = await axiosInstance.get(
-          `/api/v1/events/mail/content/${eventId}`,
-          {
-            params: {
-              mailType: 'REMIND',
-            },
+        const response = await axiosInstance.get(`/api/v1/mail/${eventId}`, {
+          params: {
+            mailType: 'REMIND',
           },
-        );
+        });
         if (response.status === 200) {
           setEmailContent(response.data.mailContent);
           setEmailTitle(response.data.mailTitle);
@@ -125,12 +122,23 @@ export default function DashboardEmailPage() {
 
         <S.ContentContainer>
           <S.Content>
-            <S.ContentTitle>리마인드 메일 내용 수정</S.ContentTitle>
+            <S.ContentTitle>행사 안내 메일 발송</S.ContentTitle>
             <S.ContentDesc>
               <em>행사 시작 24시간 전</em>에 참석자들에게 발송 될&nbsp;
               <em>행사 안내 메일 내용</em>을 수정해 주세요.
+              <br />
+              행사 담당자에게도 참석자들에게 발송된 메일과 <em>동일한 내용</em>
+              의 메일이 발송됩니다.
             </S.ContentDesc>
           </S.Content>
+          <S.Content>
+            <S.ContentTitle>행사 안내 메일 링크</S.ContentTitle>
+            <Input
+              placeholder="행사 안내 링크를 입력해 주세요."
+              // value={emailTitle}
+              // onChange={handleTitleChange}
+            />
+          </S.Content>
           <S.Content>
             <S.ContentTitle>메일 제목</S.ContentTitle>
             <Input

diff --git a/src/pages/DashboardPage/DashboardEmailPage/DashboardEmailPage.style.jsx b/src/pages/DashboardPage/DashboardEmailPage/DashboardEmailPage.style.jsx
@@ -5,6 +5,7 @@ export const DashboardEmailPage = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: fit-content;
   padding: 50px;
   gap: 10px;
 

diff --git a/src/pages/DashboardPage/DashboardInfoPage/DashboardInfoPage.jsx b/src/pages/DashboardPage/DashboardInfoPage/DashboardInfoPage.jsx
@@ -270,16 +270,16 @@ export default function DashboardInfoPage() {
             />
           </S.Content>
 
-          <S.Content>
+          {/* 행사 일정 수정이 안되는 관계로 임시 주석 처리 */}
+          {/* <S.Content>
             <S.ContentTitle>행사 기간</S.ContentTitle>
-            {/* 행사 일정 컴포넌트 적용 */}
             <EventScheduleList
               eventSchedules={eventSchedules}
               handleScheduleChange={handleScheduleChange}
               handleAddSchedule={handleAddSchedule}
               handleDeleteSchedule={handleDeleteSchedule}
             />
-          </S.Content>
+          </S.Content> */}
 
           <S.Content>
             <S.ContentTitle>온라인/오프라인 여부</S.ContentTitle>
@@ -339,15 +339,6 @@ export default function DashboardInfoPage() {
               onSelect={handleSelect}
             />
           </S.Content>
-
-          <S.Content>
-            <S.ContentTitle>WISE 주소</S.ContentTitle>
-            <Input
-              placeholder="등록하실 행사의 WISE 주소를 입력해주세요."
-              value={eventUrlAddress}
-              onChange={(e) => setEventUrlAddress(e.target.value)}
-            />
-          </S.Content>
         </S.ContentContainer>
       </S.DashboardInfo>
     </PageLayout>

diff --git a/src/pages/DashboardPage/DashboardInfoPage/DashboardInfoPage.style.jsx b/src/pages/DashboardPage/DashboardInfoPage/DashboardInfoPage.style.jsx
@@ -3,7 +3,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { BREAKPOINTS } from '@/styles';
 
 export const DashboardInfo = styled.div`
-  flex-grow: 1;
+  height: fit-content;
   padding: 50px;
 
   @media (max-width: ${BREAKPOINTS[0]}px) {

diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
@@ -167,7 +167,7 @@ export default function DashboardPage() {
     const parsedEvent = {
       title: eventDetail.eventTitle,
       detail: eventDetail.eventDetail,
-      image: eventDetail.eventImage,
+      image: eventDetail.eventImage || 'img/logo-background.svg',
       schedules,
       totalSessions: eventDetail.eventSchedules.length,
       // totalParticipants,

diff --git a/src/pages/DashboardPage/DashboardPage.style.jsx b/src/pages/DashboardPage/DashboardPage.style.jsx
@@ -7,6 +7,7 @@ export const DashboardPage = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: fit-content;
   padding: 50px;
   gap: 12px;
 

diff --git a/src/pages/DashboardPage/DashboardStatisticPage/CompletionChart.jsx b/src/pages/DashboardPage/DashboardStatisticPage/CompletionChart.jsx
@@ -5,8 +5,8 @@ import { ATTENDEE_LIST } from './attendee';
 
 ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
 
-const CompletionChart = () => {
-  const totalStudents = ATTENDEE_LIST[0].eventRatioDetailResponseDtos.length;
+const CompletionChart = ({ attendeeList }) => {
+  const totalStudents = attendeeList.eventRatioDetailResponseDtos.length;
   const completedStudents =
     ATTENDEE_LIST[0].eventRatioDetailResponseDtos.filter(
       (student) => student.completion,

diff --git a/src/pages/DashboardPage/DashboardStatisticPage/DashboardStatisticPage.jsx b/src/pages/DashboardPage/DashboardStatisticPage/DashboardStatisticPage.jsx
@@ -6,7 +6,7 @@ import YearChart from './YearChart';
 import CompletionChart from './CompletionChart';
 import { ATTENDEE_LIST } from './attendee';
 import { eventIDState } from '@/recoil/atoms/state';
-import { getEventDetail } from '@/apis';
+import { getEventDetail, getEventStatistic } from '@/apis';
 import { useQuery } from '@tanstack/react-query';
 import { useRecoilValue } from 'recoil';
 
@@ -18,18 +18,27 @@ const DetailStatisticsPage = () => {
 
   const {
     data: eventDetail,
-    isPending,
-    isError,
+    isPending: isEventDetailPending,
+    isError: isEventDetailError,
   } = useQuery({
     queryKey: ['getEventDetail', eventId],
     queryFn: () => getEventDetail(eventId),
   });
 
-  if (isPending) {
+  const {
+    data: eventStatistic,
+    isPending: isEventStatisticPending,
+    isError: isEventStatisticError,
+  } = useQuery({
+    queryKey: ['getEventStatistic', eventId],
+    queryFn: () => getEventStatistic(eventId),
+  });
+
+  if (isEventDetailPending || isEventStatisticPending) {
     return <div>Loading...</div>;
   }
 
-  if (isError) {
+  if (isEventDetailError || isEventStatisticError) {
     return null;
   }
 
@@ -42,29 +51,29 @@ const DetailStatisticsPage = () => {
         <S.TopContainer>
           <S.Title>세부 통계</S.Title>
           <S.EventDate>
-            {startDate} ~ {endDate}
+            {`${eventStatistic.eventDates[0]} ~ ${eventStatistic.eventDates[eventStatistic.eventDates.length - 1]}`}
           </S.EventDate>
         </S.TopContainer>
 
         <S.ContentContainer>
           <S.ChartWrapper>
             <S.ChartTitle>전공별 참석 비율</S.ChartTitle>
             <S.Chart>
-              <MajorChart />
+              <MajorChart attendeeList={eventStatistic} />
             </S.Chart>
           </S.ChartWrapper>
 
           <S.ChartWrapper>
             <S.ChartTitle>학번별 참석 비율</S.ChartTitle>
             <S.Chart>
-              <YearChart />
+              <YearChart attendeeList={eventStatistic} />
             </S.Chart>
           </S.ChartWrapper>
 
           <S.ChartWrapper>
             <S.ChartTitle>전체 학생 중 이수 비율</S.ChartTitle>
             <S.Chart>
-              <CompletionChart />
+              <CompletionChart attendeeList={eventStatistic} />
             </S.Chart>
           </S.ChartWrapper>
         </S.ContentContainer>

diff --git a/src/pages/DashboardPage/DashboardStatisticPage/DashboardStatisticPage.style.jsx b/src/pages/DashboardPage/DashboardStatisticPage/DashboardStatisticPage.style.jsx
@@ -5,6 +5,7 @@ export const DetailStatisticsPage = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  height: fit-content;
   padding: 50px;
   gap: 12px;
 

diff --git a/src/pages/DashboardPage/DashboardStatisticPage/MajorChart.jsx b/src/pages/DashboardPage/DashboardStatisticPage/MajorChart.jsx
@@ -5,19 +5,19 @@ import { ATTENDEE_LIST } from './attendee';
 
 ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
 
-const MajorChart = () => {
+const MajorChart = ({ attendeeList }) => {
   const majorAttendance = {};
   let totalCompletedStudentsByMajor = 0;
 
-  ATTENDEE_LIST[0].eventRatioDetailResponseDtos.forEach((student) => {
-    if (student.completion) {
-      totalCompletedStudentsByMajor++;
-      if (majorAttendance[student.studentMajor]) {
-        majorAttendance[student.studentMajor]++;
-      } else {
-        majorAttendance[student.studentMajor] = 1;
-      }
+  attendeeList.eventRatioDetailResponseDtos.forEach((student) => {
+    // if (student.completion) {
+    totalCompletedStudentsByMajor++;
+    if (majorAttendance[student.studentMajor]) {
+      majorAttendance[student.studentMajor]++;
+    } else {
+      majorAttendance[student.studentMajor] = 1;
     }
+    // }
   });
 
   const sortedMajorAttendance = Object.entries(majorAttendance).sort(

diff --git a/src/pages/DashboardPage/DashboardStatisticPage/YearChart.jsx b/src/pages/DashboardPage/DashboardStatisticPage/YearChart.jsx
@@ -5,20 +5,20 @@ import { ATTENDEE_LIST } from './attendee';
 
 ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
 
-const YearChart = () => {
+const YearChart = ({ attendeeList }) => {
   const yearAttendance = {};
   let totalCompletedStudentsByYear = 0;
 
-  ATTENDEE_LIST[0].eventRatioDetailResponseDtos.forEach((student) => {
-    if (student.completion) {
-      totalCompletedStudentsByYear++;
-      const year = String(student.studentNumber).substring(0, 2);
-      if (yearAttendance[year]) {
-        yearAttendance[year]++;
-      } else {
-        yearAttendance[year] = 1;
-      }
+  attendeeList.eventRatioDetailResponseDtos.forEach((student) => {
+    // if (student.completion) {
+    totalCompletedStudentsByYear++;
+    const year = String(student.studentNumber).substring(0, 2);
+    if (yearAttendance[year]) {
+      yearAttendance[year]++;
+    } else {
+      yearAttendance[year] = 1;
     }
+    // }
   });
 
   const sortedYearAttendance = Object.entries(yearAttendance).sort(