merge: dev to main

src/Layout/PageLayout.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { BREAKPOINTS } from '@/styles';
+
 const Inner = styled.div`
   display: ${({ hasSideBar }) =>
     hasSideBar === undefined ? undefined : 'flex'};
@@ -13,13 +15,29 @@ const SideBarLayout = styled.div`
   }
 `;
 
+const Contents = styled.div`
+  --top-navigation-height: 57px;
+
+  overflow-y: auto;
+  display: flex;
+  width: 100%;
+  height: calc(100vh - var(--top-navigation-height));
+
+  @media (max-width: ${BREAKPOINTS[1]}px) {
+    --top-navigation-height: 55px;
+  }
+  @media (max-width: ${BREAKPOINTS[0]}px) {
+    --top-navigation-height: 54px;
+  }
+`;
+
 export default function PageLayout({ topNavigation, sideBar, children }) {
   return (
     <div>
       {topNavigation}
       <Inner hasSideBar={sideBar !== undefined}>
         <SideBarLayout>{sideBar}</SideBarLayout>
-        {children}
+        <Contents>{children}</Contents>
       </Inner>
     </div>
   );

src/apis/attendance.js

@@ -1,16 +1,14 @@
 import { axiosInstance } from '@/axios';
 
-export const getAttendanceList = async (userId, eventId) => {
-  const { data } = await axiosInstance.get(
-    `/api/v1/attendance/list/${userId}/${eventId}`,
-  );
+export const getAttendanceList = async (eventId) => {
+  const { data } = await axiosInstance.get(`/api/v1/attendancelist/${eventId}`);
 
   return data;
 };
 
-export const updateAttendanceList = async (userId, eventId, body) => {
+export const updateAttendanceList = async (eventId, body) => {
   const { data } = await axiosInstance.put(
-    `/api/v1/attendance/list/${userId}/${eventId}`,
+    `/api/v1/attendance/manage/${eventId}`,
     body,
   );
 

src/apis/event.js

@@ -12,9 +12,9 @@ export const deleteEvent = async (eventId) => {
   return data;
 };
 
-export const postEventManager = async (eventId, body) => {
-  const { data } = await axiosInstance.post(
-    `/api/v1/events/manger/${eventId}`,
+export const putEventManager = async (eventId, body) => {
+  const { data } = await axiosInstance.put(
+    `/api/v1/events/manager/${eventId}`,
     body,
   );
 
@@ -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;
+};

src/components/Button/Button.style.jsx

@@ -7,13 +7,19 @@ export const Button = styled.button`
   align-items: center;
   border-radius: 8px;
   padding: 13px 22px;
+  height: 45px;
   background: ${(props) => props.backgroundColor};
   color: ${(props) => props.textColor};
   font-size: 16px;
   font-weight: 600;
 
-  @media (max-width: ${BREAKPOINTS[0]}px) {
+  @media (max-width: ${BREAKPOINTS[1]}px) {
     padding: 10px 18px;
-    font-size: 14px;
+    height: 35px;
+    font-size: 12px;
+  }
+  @media (max-width: ${BREAKPOINTS[0]}px) {
+    padding: 6px 10px;
+    height: 30px;
   }
 `;

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`

src/components/EventCard/EventCard.jsx

@@ -15,6 +15,7 @@ const EventCard = ({ id, title, poster, startDate, endDate }) => {
 
   const attendanceCheck = (event) => {
     event.stopPropagation();
+    setContent(id);
     navigate('/attendance/student-id');
   };
 

src/components/EventTypeCard/EventTypeCard.jsx → src/components/EventTypeRadioGroup/EventTypeRadioGroup.jsx

@@ -1,15 +1,11 @@
-import { eventTypeState } from '@/recoil/atoms/state';
-import { useRecoilState } from 'recoil';
-import * as S from './EventTypeCard.style';
-
-const EventTypeCard = ({ handleEventType }) => {
-  const [eventType, setEventType] = useRecoilState(eventTypeState);
+import * as S from './EventTypeRadioGroup.style';
 
+const EventTypeRadioGroup = ({ value, onChange }) => {
   return (
     <S.FlexWrapper style={{ flexWrap: 'wrap' }}>
       <S.ChoiceBox
-        onClick={() => handleEventType('ONLINE')}
-        isSelected={eventType === 'ONLINE'}
+        onClick={() => onChange('ONLINE')}
+        isSelected={value === 'ONLINE'}
       >
         <S.TitleWrapper>
           <S.Category>온라인 행사</S.Category>
@@ -19,8 +15,8 @@ const EventTypeCard = ({ handleEventType }) => {
       </S.ChoiceBox>
 
       <S.ChoiceBox
-        onClick={() => handleEventType('OFFLINE')}
-        isSelected={eventType === 'OFFLINE'}
+        onClick={() => onChange('OFFLINE')}
+        isSelected={value === 'OFFLINE'}
       >
         <S.TitleWrapper>
           <S.Category>오프라인 행사</S.Category>
@@ -32,4 +28,4 @@ const EventTypeCard = ({ handleEventType }) => {
   );
 };
 
-export default EventTypeCard;
+export default EventTypeRadioGroup;

src/components/EventTypeRadioGroup/index.js

@@ -0,0 +1 @@
+export { default as EventTypeRadioGroup } from './EventTypeRadioGroup';

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',

src/components/Sidebar/Sidebar.style.jsx

@@ -9,8 +9,8 @@ export const Sidebar = styled.div`
   flex-shrink: 0;
   padding-top: 35px;
   min-width: 180px;
-  height: 100vh;
-
+  border-right: 1px solid #ebedf0;
+  height: 100%;
   /* @media (max-width: ${BREAKPOINTS[0]}px) {
     display: none;
   } */

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,
@@ -21,6 +22,15 @@ const AttendeeTable = ({
     return <FaArrowDownShortWide />;
   };
 
+  // 시간 형식 HH:MM
+  const formatAttendTime = (time) => {
+    if (!time) return '-';
+    const date = new Date(time);
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+
   return (
     <S.TableContainer>
       <S.Table>
@@ -45,21 +55,22 @@ 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')}>
               휴대폰 번호
               <SortIcon columnKey="phoneNumber" />
             </S.TableHeader>
-            <S.TableHeader onClick={() => sortData('email')}>
-              이메일 주소
-              <SortIcon columnKey="email" />
+            {/* 출석 시간 열 추가 */}
+            <S.TableHeader onClick={() => sortData('attendTime')}>
+              출석 시간
+              <SortIcon columnKey="attendTime" />
             </S.TableHeader>
-            <S.TableHeader></S.TableHeader>
+            {/* <S.TableHeader></S.TableHeader> */}
           </tr>
         </thead>
         <tbody>
@@ -88,13 +99,14 @@ 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>{data.email}</S.TableData>
               <S.TableData>
-                <BsEye />
+                {data.attendTime === null
+                  ? '-'
+                  : format(new Date(data.attendTime), 'HH:mm')}
               </S.TableData>
             </tr>
           ))}

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;

src/components/TopNavigation/TopNavigation.jsx

@@ -2,16 +2,16 @@ import { useEffect, useState } from 'react';
 import * as S from './TopNavigation.style';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { FaBars, FaCircleUser } from 'react-icons/fa6';
-import { Sidebar, SlimButton } from '@/components';
+import { Sidebar, SlimButton, UserDropdown } from '@/components';
 import { BREAKPOINTS } from '@/styles';
 import { axiosInstance } from '@/axios';
 
 export default function TopNavigation({ eventTitle } = {}) {
   const name = sessionStorage.getItem('name');
-  const USER_ID = sessionStorage.getItem('id');
   const nav = useNavigate();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
   const location = useLocation();
 
@@ -31,6 +31,10 @@ export default function TopNavigation({ eventTitle } = {}) {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
+  const handleUserControl = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
   useEffect(() => {
     const handleResizeOrScroll = () => {
       if (window.innerWidth > BREAKPOINTS[0] || window.scrollY > 0) {
@@ -97,7 +101,12 @@ export default function TopNavigation({ eventTitle } = {}) {
       </S.LogoMenuWrapper>
       <S.ProfileMenuWrapper>
         {isLoggedIn ? (
-          <b onClick={() => handleLogout()}>{name}</b>
+          <>
+            <div onClick={handleUserControl}>
+              {name}
+              {isDropdownOpen && <UserDropdown />}
+            </div>
+          </>
         ) : (
           <SlimButton label={'로그인'} onClick={handleLoginClick} />
         )}

src/components/UploadBox/UploadBox.jsx

@@ -1,8 +1,5 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as S from './UploadBox.style';
-import FileButton from '../../pages/RegisterPage/RegisterComponents/Button/FileButton';
-
-//미리보기 선택 시 전체 프리뷰 기능 미구현
 
 // FileInfo 컴포넌트
 const FileInfo = ({ uploadedInfo }) => {
@@ -15,22 +12,27 @@ const FileInfo = ({ uploadedInfo }) => {
 
   return (
     <S.PreviewWrapper>
-      <S.PreviewBox
-        style={{
-          backgroundImage: `url(${uploadedInfo.previewURL})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      >
-        <S.PreviewLabel onClick={handlePreviewClick}>미리보기</S.PreviewLabel>
-      </S.PreviewBox>
-      <FileButton content={uploadedInfo.name} type={'white'} />
+      {uploadedInfo.previewURL ? (
+        <S.PreviewBox
+          style={{
+            backgroundImage: `url(${uploadedInfo.previewURL})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        >
+          <S.PreviewLabel onClick={handlePreviewClick}>미리보기</S.PreviewLabel>
+        </S.PreviewBox>
+      ) : (
+        <S.NoPreviewMsg>
+          엑셀 파일은 미리보기를 제공하지 않습니다.
+        </S.NoPreviewMsg>
+      )}
     </S.PreviewWrapper>
   );
 };
 
 // UploadBox 컴포넌트
-const UploadBox = ({ accept, onFileUpload }) => {
+const UploadBox = ({ defaultImageUrl, accept, onFileUpload }) => {
   const [isActive, setActive] = useState(false);
   const [uploadedInfo, setUploadedInfo] = useState(null);
 
@@ -41,9 +43,14 @@ const UploadBox = ({ accept, onFileUpload }) => {
   };
 
   const setFileInfo = (file) => {
-    const name = file.name;
-    const previewURL = URL.createObjectURL(file);
-    setUploadedInfo({ name, previewURL });
+    let previewURL = null;
+
+    // 이미지 파일만 미리보기 URL 생성
+    if (file.type.startsWith('image/')) {
+      previewURL = URL.createObjectURL(file);
+    }
+
+    setUploadedInfo({ previewURL });
     if (onFileUpload) {
       onFileUpload(file);
     }
@@ -64,6 +71,13 @@ const UploadBox = ({ accept, onFileUpload }) => {
     setFileInfo(file);
   };
 
+  useEffect(() => {
+    setUploadedInfo({
+      name: '',
+      previewURL: defaultImageUrl,
+    });
+  }, [defaultImageUrl]);
+
   return (
     <S.StyledLabel
       className={`preview${isActive ? ' active' : ''}`}