diff --git a/src/constants/tempData.js b/src/constants/tempData.js index f661e2e..95e478a 100644 --- a/src/constants/tempData.js +++ b/src/constants/tempData.js @@ -17,4 +17,4 @@ export const USER_ID = 500; export const EVENT_ID = 2255; -export const EVENT_DATE = '2024-07-12'; +export const EVENT_DATE = '2024-07-13'; diff --git a/src/pages/EventDetail/AttendanceList.jsx b/src/pages/EventDetail/AttendanceList.jsx index 5532250..9dbe87d 100644 --- 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 index 3d3a56d..47fbfc9 100644 --- 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} - + 출석 명단 전송 - + + 출석체크 페이지로 이동 + + )} diff --git a/src/pages/EventDetail/EventDetailPage.style.jsx b/src/pages/EventDetail/EventDetailPage.style.jsx index e3aeeb9..de9e1ad 100644 --- 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; +`;