Merge pull request #174 from CheckMate-sookmyung/dev

#164 merge: dev to main
CheckMate-sookmyung · Jul 24, 2024 · 1bc0978 · 1bc0978
2 parents 06fd9c8 + cba15a0
commit 1bc0978
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 65 deletions.
diff --git a/src/Layout/PageLayout.jsx b/src/Layout/PageLayout.jsx
@@ -7,10 +7,16 @@ const Container = styled.div`
   width: 100%;
 `;
 
+const SideBarLayout = styled.div`
+  @media (max-width: 480px) {
+    display: none;
+  }
+`;
+
 export default function PageLayout({ sideBar, children }) {
   return (
     <Container hasSideBar={sideBar !== undefined}>
-      {sideBar}
+      <SideBarLayout>{sideBar}</SideBarLayout>
       {children}
     </Container>
   );

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -1,18 +1,19 @@
 import PropTypes from 'prop-types';
 import * as S from './Modal.style';
 import { useNavigate } from 'react-router-dom';
-import { useState } from 'react';
 import Portal from '../Portal/Portal';
 
-const Modal = ({ name, major, studentId, isOpen, onClose }) => {
+const Modal = ({ isOpen, onClose, attendees }) => {
   const navigate = useNavigate();
 
-  const handleCompletedButtonClick = async () => {
+  const handlePersonClick = (studentInfo) => {
     onClose();
-    navigate('/attendance/sign');
+    navigate('/attendance/sign', {
+      state: { studentInfo },
+    });
   };
 
-  const handleCancelButtonClick = async () => {
+  const handleCancelButtonClick = () => {
     onClose();
     navigate('/attendance/student-id');
   };
@@ -24,38 +25,35 @@ const Modal = ({ name, major, studentId, isOpen, onClose }) => {
   return (
     <Portal portalKey="modal-layout">
       <S.ModalLayout>
-        <S.Title>
-          <strong>{name}</strong>님이 맞으십니까?
-        </S.Title>
+        <S.Title>출석 체크 할 사람을 선택해주세요.</S.Title>
         <S.ContentContainer>
-          <S.Content>
-            <S.ContentTitle>학과</S.ContentTitle>
-            <S.ContentDescription>{major}</S.ContentDescription>
-          </S.Content>
-          <S.Content>
-            <S.ContentTitle>학번</S.ContentTitle>
-            <S.ContentDescription>{studentId}</S.ContentDescription>
-          </S.Content>
+          {attendees.map((attendee, index) => (
+            <S.Content key={index} onClick={() => handlePersonClick(attendee)}>
+              <S.ContentTitle>{attendee.name}</S.ContentTitle>
+              <S.ContentDescription>{attendee.major}</S.ContentDescription>
+            </S.Content>
+          ))}
         </S.ContentContainer>
         <S.ButtonContainer>
           <S.CancelButton onClick={handleCancelButtonClick}>
-            아니요
+            이전페이지로 돌아가기.
           </S.CancelButton>
-          <S.CompletedButton onClick={handleCompletedButtonClick}>
-            네, 서명하러 하기
-          </S.CompletedButton>
         </S.ButtonContainer>
       </S.ModalLayout>
     </Portal>
   );
 };
 
 Modal.propTypes = {
-  name: PropTypes.string.isRequired,
-  major: PropTypes.string.isRequired,
-  studentId: PropTypes.string.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  attendees: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      major: PropTypes.string.isRequired,
+      studentId: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
 };
 
 export default Modal;
diff --git a/src/components/Navigator/Navigator.jsx b/src/components/Navigator/Navigator.jsx
@@ -15,6 +15,14 @@ export default function Navigator() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const EVENT_ID = useRecoilValue(eventIDState);
 
+  const handleDimClick = () => {
+    setIsSidebarOpen(false);
+  };
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
   useEffect(() => {
     console.log('USER_ID:', USER_ID);
     console.log('EVENT_ID:', EVENT_ID);
@@ -55,9 +63,19 @@ export default function Navigator() {
     };
   }, []);
 
-  const toggleSidebar = () => {
-    setIsSidebarOpen(!isSidebarOpen);
-  };
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 0) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   return (
     <>
@@ -93,6 +111,7 @@ export default function Navigator() {
         <S.Sidebar isOpen={isSidebarOpen}>
           <Sidebar />
         </S.Sidebar>
+        {isSidebarOpen && <S.Dim onClick={handleDimClick} />}
       </S.Navigator>
     </>
   );

diff --git a/src/components/Navigator/Navigator.style.jsx b/src/components/Navigator/Navigator.style.jsx
@@ -175,3 +175,14 @@ export const Sidebar = styled.div`
   transform: ${({ isOpen }) => (isOpen ? 'translateX(0)' : 'translateX(100%)')};
   transition: transform 0.3s ease-in-out;
 `;
+
+export const Dim = styled.div`
+  opacity: 0.2;
+  position: fixed;
+  top: 55px;
+  z-index: 1;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+`;
diff --git a/src/components/Navigator/Sidebar.jsx b/src/components/Navigator/Sidebar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import * as S from './Sidebar.style';
 import {
   FaTableList,
@@ -7,8 +7,13 @@ import {
   FaUsers,
   FaChartPie,
 } from 'react-icons/fa6';
-import { useLocation } from 'react-router-dom';
+import { USER_ID } from '../../constants';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { eventIDState } from '../../recoil/atoms/state';
+import { axiosInstance } from '../../axios';
 
+// 개별 메뉴
 const menuItems = [
   { to: '/event/dashboard', icon: <FaTableList />, text: '대시보드' },
   {
@@ -40,8 +45,73 @@ function MenuItem({ to, icon, text, isActive }) {
   );
 }
 
+// 사이드바 전체
 export default function Sidebar() {
+  const [parsedEvents, setParsedEvents] = useState(null);
+  const [isAttendanceButtonActive, setIsAttendanceButtonActive] =
+    useState(false);
   const location = useLocation();
+  const EVENT_ID = useRecoilValue(eventIDState);
+
+  useEffect(() => {
+    console.log('USER_ID:', USER_ID);
+    console.log('EVENT_ID:', EVENT_ID);
+    const fetchData = async () => {
+      try {
+        const response = await axiosInstance.get(
+          `/api/v1/events/${USER_ID}/${EVENT_ID}`,
+        );
+        const eventData = response.data;
+        if (eventData) {
+          const now = new Date();
+
+          const schedules = eventData.eventSchedules.map((schedule) => ({
+            date: schedule.eventDate,
+            startTime: schedule.eventStartTime,
+            endTime: schedule.eventEndTime,
+            attendanceList: schedule.attendanceListResponseDtos,
+          }));
+
+          const firstSchedule = schedules[0];
+          const lastSchedule = schedules[schedules.length - 1];
+
+          const firstScheduleStartDateTime = new Date(
+            `${firstSchedule.date}T${firstSchedule.startTime}`,
+          );
+          const lastScheduleEndDateTime = new Date(
+            `${lastSchedule.date}T${lastSchedule.endTime}`,
+          );
+
+          // 현재 시간이 행사 기간 내에 있는지 확인
+          if (
+            now >= firstScheduleStartDateTime &&
+            now <= lastScheduleEndDateTime
+          ) {
+            setIsAttendanceButtonActive(true);
+          } else {
+            setIsAttendanceButtonActive(false);
+          }
+
+          const parsedEvent = {
+            title: eventData.eventTitle,
+            detail: eventData.eventDetail,
+            image: eventData.eventImage,
+            schedules,
+            totalSessions: eventData.eventSchedules.length,
+            totalParticipants: schedules[0].attendanceList.length,
+            eventType: eventData.eventType,
+            eventTarget: eventData.eventTarget,
+          };
+
+          setParsedEvents(parsedEvent);
+        }
+      } catch (error) {
+        console.error('이벤트 데이터를 가져오는 중 오류:', error);
+      }
+    };
+
+    fetchData();
+  }, [EVENT_ID]);
 
   return (
     <S.Sidebar>
@@ -76,8 +146,10 @@ export default function Sidebar() {
       </S.MenuWrapper>
 
       <S.ButtonWrapper>
-        <S.AttendanceBtn>
-          <S.StyledLink to="/attendance/student-id">
+        <S.AttendanceBtn disabled={!isAttendanceButtonActive}>
+          <S.StyledLink
+            to={isAttendanceButtonActive ? '/attendance/student-id' : '#'}
+          >
             출석화면으로 이동
           </S.StyledLink>
         </S.AttendanceBtn>

diff --git a/src/components/Navigator/Sidebar.style.jsx b/src/components/Navigator/Sidebar.style.jsx
@@ -78,8 +78,15 @@ export const AttendanceBtn = styled.button`
   line-height: 100%;
   letter-spacing: -0.01em;
   color: #ffffff;
+  cursor: pointer;
+  transition: background 0.3s ease;
 
   &:hover {
     background: #2b90fc;
   }
+
+  &:disabled {
+    background: #cccccc;
+    cursor: not-allowed;
+  }
 `;
diff --git a/src/pages/AttendancePage/AttendanceSignPage.jsx b/src/pages/AttendancePage/AttendanceSignPage.jsx
@@ -21,6 +21,7 @@ const AttendanceSignPage = ({ name, major, studentId }) => {
   const [isSigned, setIsSigned] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [eventTitle, setEventTitle] = useState('');
+  const [eventTarget, setEventTarget] = useState('INTERNAL');
 
   const signatureRef = useRef(null);
   const { getSessionStorage } = useSessionStorages();
@@ -70,17 +71,19 @@ const AttendanceSignPage = ({ name, major, studentId }) => {
   };
 
   useEffect(() => {
-    const fetchEventTitle = async () => {
+    const fetchEventDetails = async () => {
       try {
         const response = await axiosInstance.get(
           `/api/v1/events/${USER_ID}/${EVENT_ID}`,
         );
-        setEventTitle(response.data.eventTitle);
+        const eventData = response.data;
+        setEventTitle(eventData.eventTitle);
+        setEventTarget(eventData.eventTarget);
       } catch (error) {
         console.error('이벤트 타이틀 에러', error);
       }
     };
-    fetchEventTitle();
+    fetchEventDetails();
   }, []);
 
   return (
@@ -91,13 +94,15 @@ const AttendanceSignPage = ({ name, major, studentId }) => {
       </S.Title>
       <S.ContentContainer>
         <S.Content>
-          <S.ContentTitle>학과</S.ContentTitle>
+          <S.ContentTitle>소속</S.ContentTitle>
           <S.ContentDescription>{studentInfo.major}</S.ContentDescription>
         </S.Content>
-        <S.Content>
-          <S.ContentTitle>학번</S.ContentTitle>
-          <S.ContentDescription>{studentInfo.number}</S.ContentDescription>
-        </S.Content>
+        {eventTarget === 'INTERNAL' && (
+          <S.Content>
+            <S.ContentTitle>학번</S.ContentTitle>
+            <S.ContentDescription>{studentInfo.number}</S.ContentDescription>
+          </S.Content>
+        )}
       </S.ContentContainer>
 
       {/* 서명 */}

diff --git a/src/pages/AttendancePage/AttendanceSignPage.style.jsx b/src/pages/AttendancePage/AttendanceSignPage.style.jsx
@@ -36,7 +36,7 @@ export const ContentContainer = styled.div`
   width: 100%;
   max-width: 900px;
   gap: 16px;
-  padding: 20px 0;
+  padding-bottom: 20px;
 
   @media (max-width: ${BREAKPOINTS[0]}px) {
     flex-direction: column;
@@ -119,9 +119,9 @@ export const CanvasPlaceholder = styled.p`
 
 export const SignatureCanvasContainer = styled.div`
   width: 100%;
-  max-width: 900px;
-  height: auto;
-  aspect-ratio: 900 / 400;
+  max-width: 800px;
+  height: inherit;
+  aspect-ratio: 900 / 300;
 
   canvas {
     width: 100%;