[FE] [FEAT] : 출석하기(담당자) 페이지 디자인 수정 및 기능 api 연결 (#165)

* fix: CSS디자인 수정 및 유저관련 api를 제외하고 모두 연결

* feat: 세션에 사용자 추가 모달 구현 및 사용자 상태변경 기능 구현

* fix: 출석관리 페이지 디자인 수정

* fix: 출석관리(담당자) 페이지 alert문 toast로 변경 및 디자인 수정

Author: GamjaIsMine02

frontend/src/assets/calendar-icon.svg

@@ -183,3 +183,54 @@ h1 {
 }
 .modifyButtonGroup button:disabled {
 }
+
+.modalContent {
+  padding: 10px 10px 30px;
+}
+
+.inputGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #555;
+}
+
+.selectInput {
+  width: 100%;
+  padding: 10px;
+  font-size: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  outline: none;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.selectInput:focus {
+  border-color: #3b82f6;
+}
+
+.button {
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 6px;
+  cursor: pointer;
+  border: none;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

frontend/src/components/VerificationModal.module.css

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react';
+import styles from '../VerificationModal.module.css';
+import { useAttendance } from '../../contexts/AttendanceContext';
+import { getUserList } from '../../utils/attendanceManage';
+
+const AddUsersModal = () => {
+  const { sessions, selectedSessionId, handleAddUsers, closeAddUsersModal } =
+    useAttendance();
+  const [selectedUserId, setSelectedUserId] = useState(null);
+  const [users, setUsers] = useState([]);
+
+  // ESC 키로 모달 또는 토스트를 닫는 기능
+  useEffect(() => {
+    // 유저 리스트 가져오기
+    const fetchUsers = async () => {
+      try {
+        const userList = await getUserList();
+        setUsers(userList);
+      } catch (err) {
+        console.error('사용자 목록을 불러오는 데 실패했습니다:', err);
+      }
+    };
+    if (selectedSessionId) {
+      fetchUsers();
+    }
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        closeAddUsersModal();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeAddUsersModal]);
+
+  const handleComplete = () => {
+    const currentSession = sessions.find(
+      (s) => s.attendanceSessionId === selectedSessionId
+    );
+
+    if (!currentSession) {
+      alert('세션을 먼저 선택해주세요.');
+      return;
+    }
+    if (!selectedUserId) {
+      alert('추가할 인원를 1명 이상 선택해주세요.');
+      return;
+    }
+
+    handleAddUsers(selectedSessionId, selectedUserId);
+    closeAddUsersModal();
+  };
+
+  return (
+    <div className={styles.overlay}>
+      <div className={styles.modal}>
+        <div className={styles.modalHeader}>
+          <h1>세션에 유저 추가하기</h1>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={() => {
+              closeAddUsersModal();
+            }}
+          >
+            &times;
+          </button>
+        </div>
+
+        <div className={styles.modalContent}>
+          <div className={styles.inputGroup}>
+            <label htmlFor="userSelect" className={styles.label}>
+              유저 선택
+            </label>
+            <select
+              id="userSelect"
+              className={styles.selectInput}
+              value={selectedUserId || ''}
+              onChange={(e) => setSelectedUserId(e.target.value)}
+            >
+              <option value="" disabled>
+                ------ 유저를 선택하세요 ------
+              </option>
+              {users &&
+                users.map((user) => (
+                  <option key={user.userId} value={user.userId}>
+                    {user.name} ({user.email})
+                  </option>
+                ))}
+            </select>
+          </div>
+        </div>
+
+        <div className={styles.modifyButtonGroup}>
+          <button
+            className={`${styles.button} ${styles.submitButton}`}
+            onClick={handleComplete}
+          >
+            추가
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddUsersModal;

frontend/src/components/attendancemanage/AddUsersModal.jsx

@@ -1,10 +1,43 @@
 import styles from './AttendanceManagementCard.module.css';
 
 import { useAttendance } from '../../contexts/AttendanceContext';
+import { useEffect, useState } from 'react';
+import { getRoundUserAttendance } from '../../utils/attendanceManage';
+
+const attendanceEnglishToKorean = {
+  PRESENT: '출석',
+  LATE: '지각',
+  ABSENT: '결석',
+  EXCUSED: '공결',
+  PENDING: '미정',
+};
 
 const AttendanceManagementCard = ({ styles: commonStyles }) => {
-  const { selectedRound, handleAttendanceChange, participants } =
-    useAttendance();
+  const {
+    selectedSessionId,
+    selectedRound,
+    handleAttendanceChange,
+    roundAttendanceVersion,
+  } = useAttendance();
+
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      if (selectedSessionId && selectedRound) {
+        const userList = await getRoundUserAttendance(selectedRound);
+        // const sortedUsers = (userList || []).sort(
+        //   (a, b) =>
+        //     new Date(`${a.date}T${a.startTime}`) -
+        //     new Date(`${b.date}T${b.startTime}`)
+        // );
+        setUsers(userList);
+      } else {
+        setUsers([]);
+      }
+    };
+    fetchUsers();
+  }, [selectedSessionId, selectedRound, roundAttendanceVersion]);
 
   return (
     <div className={styles.attendanceManagementCardContainer}>
@@ -18,7 +51,7 @@ const AttendanceManagementCard = ({ styles: commonStyles }) => {
               <th>이름</th>
               <th>상태</th>
               <th>변경</th>
-              <th>횟수</th>
+              <th>이메일</th>
             </tr>
           </thead>
           <tbody>
@@ -28,27 +61,28 @@ const AttendanceManagementCard = ({ styles: commonStyles }) => {
                   회차를 선택해주세요.
                 </td>
               </tr>
-            ) : participants.length > 0 ? (
-              participants.map((participant) => (
-                <tr key={participant.memberId}>
-                  <td>{participant.name}</td>
-                  <td>{participant.attendance}</td>
+            ) : users.length > 0 ? (
+              users.map((user) => (
+                <tr key={user.userId}>
+                  <td>{user.userName}</td>
+                  <td>{attendanceEnglishToKorean[user.attendanceStatus]}</td>
                   <td>
                     <select
                       className={styles.attendanceSelect}
-                      value={participant.attendance}
+                      value={user.attendanceStatus}
                       onChange={(e) =>
-                        handleAttendanceChange(
-                          participant.memberId,
-                          e.target.value
-                        )
+                        handleAttendanceChange(user.userId, e.target.value)
                       }
                     >
-                      <option value="출석">출석</option>
-                      <option value="결석">결석</option>
+                      {/* 출석(PRESENT), 지각(LATE), 결석(ABSENT), 공결(EXCUSED)   */}
+                      <option value="PRESENT">출석</option>
+                      <option value="ABSENT">결석</option>
+                      <option value="LATE">지각</option>
+                      <option value="EXCUSED">공결</option>
+                      <option value="PENDING">미정</option>
                     </select>
                   </td>
-                  <td>-</td>
+                  <td>{user.email}</td>
                 </tr>
               ))
             ) : (

frontend/src/components/attendancemanage/AttendanceManagementCard.jsx

@@ -1,9 +1,9 @@
 .attendanceManagementCardContainer {
   border-radius: 12px;
-  min-width: 300px;
-  max-width: 335px;
+  width: 100%;
   background: #fafbfc;
-  padding: 32px 20px;
+  padding: 26px 40px;
+  border: 1px solid #c9bebe;
 }
 
 .tableGroup {
@@ -26,15 +26,30 @@
   border-radius: 4px;
   border: 0.8px solid #afafaf;
 }
-.table thead th,
+.table thead th {
+  text-align: left;
+  color: var(--text);
+  padding: 8px 7px;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 100%;
+
+  position: sticky;
+  top: 0;
+  background-color: #fafbfc;
+}
 .table tbody td {
   text-align: left;
   color: var(--text);
   padding: 8px 7px;
   border-bottom: 1px solid var(--line);
   white-space: nowrap;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 100%;
@@ -47,4 +62,4 @@
   text-align: center;
   padding: 20px;
   color: #888;
-}
+}

frontend/src/components/attendancemanage/AttendanceManagementCard.module.css

@@ -3,7 +3,6 @@ import styles from '../VerificationModal.module.css';
 
 import { DayPicker } from 'react-day-picker';
 import 'react-day-picker/style.css';
-import { v4 as uuid } from 'uuid';
 import { useAttendance } from '../../contexts/AttendanceContext';
 
 const RoundDayPicker = () => {
@@ -29,7 +28,9 @@ const RoundDayPicker = () => {
   }, [closeAddRoundsModal]);
 
   const handleComplete = () => {
-    const currentSession = sessions.find((s) => s.id === selectedSessionId);
+    const currentSession = sessions.find(
+      (s) => s.attendanceSessionId === selectedSessionId
+    );
 
     if (!currentSession) {
       alert('세션을 먼저 선택해주세요.');
@@ -46,12 +47,12 @@ const RoundDayPicker = () => {
       const dateString = dateWithoutOffset.toISOString().split('T')[0];
 
       return {
-        id: `round-${uuid()}`,
-        date: dateString,
+        // id: `round-${uuid()}`,
+        roundDate: dateString,
         startTime: currentSession.defaultStartTime,
         availableMinutes: currentSession.defaultAvailableMinutes,
-        status: 'opened',
-        participants: [],
+        // status: 'opened',
+        // participants: [],
       };
     });
 

frontend/src/components/attendancemanage/RoundDayPicker.jsx

@@ -6,6 +6,7 @@ import ConfirmationToast from './ConfirmationToast';
 const RoundModifyModal = ({
   styles: commonStyles,
   onClose,
+  sessionId,
   round,
   onSave,
   onDelete,
@@ -80,10 +81,12 @@ const RoundModifyModal = ({
     if (!isFormValid(hour, minute, second, availableMinute)) return;
 
     // 상위 컴포넌트로 업데이트된 회차 데이터 전달
-    onSave({
-      id: round.id,
+    onSave(round.id, {
+      // roundId: round.id,
+      sessionId: sessionId,
+      roundDate: round.date,
       startTime: `${hh.padStart(2, '0')}:${mm.padStart(2, '0')}:${ss.padStart(2, '0')}`,
-      availableMinutes: availableMinute,
+      allowedMinutes: availableMinute,
     });
 
     onClose();
@@ -127,7 +130,7 @@ const RoundModifyModal = ({
         </div>
 
         <div className={styles.form}>
-          <div className={commonStyles.inputGroup}>
+          <div className={commonStyles.modalInputGroup}>
             <label htmlFor="sessionStartTime" className={commonStyles.label}>
               출석 시작 시간
             </label>