Merge pull request #30 from pknu-wap/develop

[release] v0.1.2 배포

client/src/App.tsx

@@ -3,13 +3,15 @@ import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import './App.css';
 import MainQrCheckIn from './pages/QrCheckIn/MainQrCheckIn';
 import EventDetail from './pages/EventDetail/EventDetail';
+import MainEventList from './pages/MainEventList/MainEventList';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<MainEventList />} />
+        <Route path="/eventDetail" element={<EventDetail />} />
         <Route path="/qrScan" element={<MainQrCheckIn />} />
-        <Route path="/" element={<EventDetail />} />
       </Routes>
     </BrowserRouter>
   );

client/src/components/event_detail/CheckInTable/CheckInTable.tsx

@@ -2,8 +2,12 @@ import React from 'react';
 import * as Styled from './CheckInTable.styles';
 import useCheckInStudent from '../../../hooks/useCheckInStudent';
 
-const CheckInTable = () => {
-  const {students} = useCheckInStudent('8');
+interface CheckInTableProps {
+  eventId: string;
+}
+
+const CheckInTable: React.FC<CheckInTableProps> = ({eventId}) => {
+  const {students} = useCheckInStudent(eventId);
 
   const eventStudentStatusImage = (rowEventStudentStatus: string) => {
     if (rowEventStudentStatus === 'CHECK_IN') {
@@ -13,6 +17,7 @@ const CheckInTable = () => {
       <img src="images/notCheckInDot.png" alt="Not Check In" width={'16px'} />
     );
   };
+
   return (
     <>
       <Styled.Table>

client/src/pages/EventDetail/EventDetail.tsx

@@ -1,30 +1,34 @@
 import React from 'react';
 import * as Styled from './EventDetail.styles';
-import {useNavigate} from 'react-router-dom';
+import {useNavigate, useLocation} from 'react-router-dom';
 import CheckInTable from '../../components/event_detail/CheckInTable/CheckInTable';
 import Header from '../../components/common/Header/Header';
 import SearchAndButtonFrame from '../../components/common/SearchAndButtonFrame/SearchAndButtonFrame';
 
 const EventDetail = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const eventId: string = location.state?.eventId || 'No Event ID'; // 전달된 eventId 받기
+
   const navigateToQrScanner = () => {
     navigate('/qrScan');
   };
+
   return (
     <Styled.Wrapper>
       <Header />
       <div>
         <SearchAndButtonFrame>
           <div>검색 박스 준비 중... 🙇🏻‍♂️</div>
-
+          <p>Event ID: {eventId}</p> {/* 전달받은 eventId 표시 */}
           <img
             src="images/qrCheckInButton.png"
             alt={'qrCheckIn'}
             style={{width: '150px', height: '50px'}}
             onClick={navigateToQrScanner}
           />
         </SearchAndButtonFrame>
-        <CheckInTable />
+        <CheckInTable eventId={eventId} />
       </div>
     </Styled.Wrapper>
   );

client/src/pages/MainEventList/MainEventList.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {useNavigate} from 'react-router-dom';
+
+const MainEventList = () => {
+  const [eventId, setEventId] = React.useState<string | null>(null);
+  const navigate = useNavigate();
+
+  // Handle changes in the input field and update the state
+  const handleEventIdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setEventId(event.target.value);
+  };
+
+  // Navigate to event detail with eventId
+  const navigateToEventDetail = () => {
+    if (eventId) {
+      navigate('/eventDetail', {state: {eventId}});
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={eventId || ''}
+        onChange={handleEventIdChange}
+        placeholder="Enter Event ID"
+      />
+      <button onClick={navigateToEventDetail}>Go to Event</button>
+    </div>
+  );
+};
+
+export default MainEventList;