hotfix: #130 상세 페이지 내 페이지 이동 버튼 추가

CheckMate-sookmyung · Jul 12, 2024 · d1781d4 · d1781d4
1 parent 5acd220
commit d1781d4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/src/pages/EventDetail/AttendanceList.jsx b/src/pages/EventDetail/AttendanceList.jsx
@@ -22,7 +22,7 @@ const AttendanceList = () => {
         const response = await axiosInstance.get(
           `/api/v1/events/attendanceList/${USER_ID}/${EVENT_ID}`,
         );
-        const parsedStudents = response.data[0].attendanceListResponseDtos.map(
+        const parsedStudents = response.data[1].attendanceListResponseDtos.map(
           (student) => ({
             name: student.studentName,
             number: student.studentNumber,

diff --git a/src/pages/EventDetail/EventDetailPage.jsx b/src/pages/EventDetail/EventDetailPage.jsx
@@ -17,10 +17,10 @@ const EventDetailPage = () => {
     console.log('EVENT_ID:', EVENT_ID);
     const fetchData = async () => {
       try {
-        const response = await axiosInstance.get(
+        const { data } = await axiosInstance.get(
           `/api/v1/events/${USER_ID}/${EVENT_ID}`,
         );
-        const eventData = response.data;
+        const eventData = data.eventSchedules[1];
         if (eventData) {
           const parsedEvent = {
             title: eventData.eventTitle,
@@ -100,9 +100,12 @@ const EventDetailPage = () => {
                 {parsedEvents.detail}
               </S.EventContentDescription>
             </S.EventContent>
-            <S.SendButtonWrapper>
+            <S.ButtonWrapper>
               <S.SendButton onClick={handleEmail}>출석 명단 전송</S.SendButton>
-            </S.SendButtonWrapper>
+              <S.GotoAttendancePageLink to="/attendance/student-id">
+                출석체크 페이지로 이동
+              </S.GotoAttendancePageLink>
+            </S.ButtonWrapper>
           </S.EventSection>
         </S.DetailWrapper>
       )}

diff --git a/src/pages/EventDetail/EventDetailPage.style.jsx b/src/pages/EventDetail/EventDetailPage.style.jsx
@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { BREAKPOINTS } from '../../styles';
+import { Link } from 'react-router-dom';
 
 export const Background = styled.div`
   display: flex;
@@ -148,24 +149,40 @@ export const EventContentDescription = styled.p`
   font-size: 16px;
 `;
 
-export const SendButtonWrapper = styled.div`
+export const ButtonWrapper = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  margin: 20px 0px;
+  margin: 20px 0;
+  gap: 6px;
 `;
 
-export const SendButton = styled.button`
+const buttonStyle = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   height: 40px;
   border: none;
   border-radius: 4px;
-  background-color: #0075ff;
-  color: white;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+`;
+
+export const SendButton = styled.button`
+  ${buttonStyle};
+  background-color: #0075ff;
+  color: white;
 
   &:hover {
     background-color: #0167cd;
   }
 `;
+
+export const GotoAttendancePageLink = styled(Link)`
+  ${buttonStyle}
+  background-color: #ffffff;
+  color: #383636;
+  border: 2px solid #0075ff;
+`;