[FE] 314 기능개선전체 전반적 fe uiux 개선 (#315)

* [FE] 출석 관리 페이지 디자인 수정

* [FE] 출석 조회 가로 스크롤 추가

* [FE] 모달이 사이드바에 가려지는 문제 해결, 비밀번호 입력 시 확인 기능 추가 등

* [FE] 사이드바 출석 관리 페이지 권한 조정

* [FE] 회원가입 시 비밀번호 확인 일치 여부 확인

* [FE] PR 요구사항 - 모바일 화면 css 개선

* [FE] 세션 유저 추가 시 팀 필터링 및 리스트 페이징

* [FE] 세션별 유저 관리에서 유저 권한 조정 및 삭제 시 취소 버튼 안되는 오류 수정

Author: sangkyu39

frontend/src/components/AdminMemberApproval/AdminMemberApproval.module.css

@@ -230,7 +230,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 100;
+  z-index: 3000;
 }
 
 .modalCard {

frontend/src/components/AdminMemberManage/AdminMemberManage.module.css

@@ -232,7 +232,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: 3000;
 }
 
 .modalCard {

frontend/src/components/Board/CreateSubBoardModal.module.css

@@ -8,7 +8,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 3000;
   padding: 20px;
 }
 

frontend/src/components/Board/Modal.module.css

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1200;
+  z-index: 3000;
 }
 
 .modal {

frontend/src/components/Board/PostDetail/CommentSection.jsx

@@ -58,7 +58,9 @@ const CommentItem = ({
           <div className={styles.menuContainer}>
             <button
               className={styles.menuButton}
-              onClick={() => setShowCommentMenu(commentId)}
+              onClick={() =>
+                setShowCommentMenu((prev) => (prev === commentId ? null : commentId))
+              }
               aria-label="댓글 메뉴"
             >
               ⋮

frontend/src/components/LoginAndSignUpForm.module.css

@@ -76,6 +76,39 @@
   box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
+.inputWithToggle {
+  position: relative;
+}
+
+.inputWithToggle input {
+  padding-right: 46px;
+}
+
+.passwordToggleButton {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  border: none;
+  background: transparent;
+  color: #4b5563;
+  cursor: pointer;
+  padding: 4px;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.passwordToggleButton:hover {
+  color: #111827;
+}
+
+.passwordToggleButton svg {
+  pointer-events: none;
+}
+
 .loginButton {
   width: 100%;
   padding: 12px;
@@ -174,6 +207,20 @@
   color: #28a745;
 }
 
+.passwordMatchMessage {
+  margin: 8px 0 0 8px;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.passwordMatchMessageSuccess {
+  color: #28a745;
+}
+
+.passwordMatchMessageError {
+  color: #e03131;
+}
+
 .radioGroup {
   margin-bottom: 12px;
   text-align: left;

frontend/src/components/Sidebar.jsx

@@ -10,6 +10,12 @@ import { isAllBoardName, normalizeBoardPath, toBoardPath } from '../utils/boardR
 import DropdownArrowIcon from '../assets/boardSelectArrow.svg';
 
 const ADMIN_VISIBLE_ROLES = ['SYSTEM_ADMIN', 'PRESIDENT'];
+const ATTENDANCE_MANAGE_VISIBLE_ROLES = [
+  'SYSTEM_ADMIN',
+  'PRESIDENT',
+  'VICE_PRESIDENT',
+  'TEAM_LEADER',
+];
 
 const Sidebar = ({ isOpen, isRoot, onClose }) => {
   const nav = useNavigate();
@@ -19,6 +25,7 @@ const Sidebar = ({ isOpen, isRoot, onClose }) => {
   const [isBoardMenuOpen, setIsBoardMenuOpen] = useState(false);
   const { isLoggedIn, logout } = useAuth();
   const [canSeeAdminMenu, setCanSeeAdminMenu] = useState(false);
+  const [canSeeAttendanceManageMenu, setCanSeeAttendanceManageMenu] = useState(false);
 
   useEffect(() => {
     const loadParentBoards = async () => {
@@ -64,15 +71,20 @@ const Sidebar = ({ isOpen, isRoot, onClose }) => {
     const checkAdminRole = async () => {
       if (!isLoggedIn) {
         setCanSeeAdminMenu(false);
+        setCanSeeAttendanceManageMenu(false);
         return;
       }
 
       try {
         const { data } = await api.get('/api/user/details');
         const normalizedRole = String(data?.role || '').trim().toUpperCase();
         setCanSeeAdminMenu(ADMIN_VISIBLE_ROLES.includes(normalizedRole));
+        setCanSeeAttendanceManageMenu(
+          ATTENDANCE_MANAGE_VISIBLE_ROLES.includes(normalizedRole)
+        );
       } catch {
         setCanSeeAdminMenu(false);
+        setCanSeeAttendanceManageMenu(false);
       }
     };
 
@@ -188,17 +200,19 @@ const Sidebar = ({ isOpen, isRoot, onClose }) => {
                   출석조회
                 </NavLink>
               </li>
-              <li>
-                <NavLink
-                  to="/attendance-manage"
-                  className={({ isActive }) =>
-                    isActive ? styles['active-link'] : styles['inactive-link']
-                  }
-                  onClick={handleNavLinkClick}
-                >
-                  출석관리(담당자)
-                </NavLink>
-              </li>
+              {isLoggedIn && canSeeAttendanceManageMenu && (
+                <li>
+                  <NavLink
+                    to="/attendance-manage"
+                    className={({ isActive }) =>
+                      isActive ? styles['active-link'] : styles['inactive-link']
+                    }
+                    onClick={handleNavLinkClick}
+                  >
+                    출석관리(담당자)
+                  </NavLink>
+                </li>
+              )}
             </ul>
           </div>
 

frontend/src/components/VerificationModal.module.css

@@ -8,7 +8,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  padding: 20px 12px;
+  overflow-y: auto;
+  z-index: 3000;
 }
 
 .modal {
@@ -188,6 +190,29 @@ h1 {
   padding: 10px 10px 30px;
 }
 
+.teamHeaderWithFilter {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.teamFilterInlineSelect {
+  min-width: 90px;
+  height: 28px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  color: #111827;
+  font-size: 12px;
+  padding: 0 8px;
+}
+
+.teamFilterInlineSelect:focus {
+  outline: none;
+  border-color: #1d80f4;
+  box-shadow: 0 0 0 2px rgba(29, 128, 244, 0.15);
+}
+
 .inputGroup {
   display: flex;
   flex-direction: column;
@@ -331,6 +356,11 @@ h1 {
     padding: 18px 16px;
   }
 
+  .teamFilterInlineSelect {
+    min-width: 84px;
+    font-size: 11px;
+  }
+
   .titleDiv {
     gap: 8px;
     flex-wrap: wrap;
@@ -458,6 +488,8 @@ h1 {
 .roundAddModal {
   width: 620px;
   max-width: calc(100vw - 24px);
+  max-height: calc(100dvh - 40px - env(safe-area-inset-bottom));
+  overflow-y: auto;
   border-radius: 16px;
   padding: 28px 28px 22px;
   font-family: Pretendard, Inter, sans-serif;
@@ -597,8 +629,15 @@ h1 {
 }
 
 @media (max-width: 768px) {
+  .overlay {
+    align-items: flex-start;
+    padding-top: max(12px, env(safe-area-inset-top));
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+  }
+
   .roundAddModal {
     width: calc(100vw - 16px);
+    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
     padding: 18px 16px;
   }
 

frontend/src/components/attendance/SessionManage.jsx

@@ -115,35 +115,37 @@ const SessionManage = ({ sessions = [], selectedSession = '', loading, error })
         출석 목록
       </div>
 
-      <table className={styles.table} role="grid">
-        <thead>
-          <tr>
-            <th>일자</th>
-            <th>출석시작시간</th>
-            <th>회차</th>
-            <th>이름</th>
-            <th>출석 상태</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          {rows.map((s) => {
-            const sessionTitle = normalizeSessionTitle(s.sessionTitle);
-            const roundKey = getRoundKey(s);
-            const roundIndex = roundIndexMapBySession.get(sessionTitle)?.get(roundKey) ?? '-';
-
-            return (
-            <tr key={s.attendanceId}>
-              <td>{formatDate(s.roundDate)}</td>
-              <td>{formatTime(s.roundStartAt)}</td>
-              <td>{roundIndex}</td>
-              <td>{s.userName}</td>
-              <td>{formatAttendanceStatus(s.attendanceStatus)}</td>
+      <div className={styles.tableWrap}>
+        <table className={styles.table} role="grid">
+          <thead>
+            <tr>
+              <th>일자</th>
+              <th>출석시작시간</th>
+              <th>회차</th>
+              <th>이름</th>
+              <th>출석 상태</th>
             </tr>
-            );
-          })}
-        </tbody>
-      </table>
+          </thead>
+
+          <tbody>
+            {rows.map((s) => {
+              const sessionTitle = normalizeSessionTitle(s.sessionTitle);
+              const roundKey = getRoundKey(s);
+              const roundIndex = roundIndexMapBySession.get(sessionTitle)?.get(roundKey) ?? '-';
+
+              return (
+              <tr key={s.attendanceId}>
+                <td>{formatDate(s.roundDate)}</td>
+                <td>{formatTime(s.roundStartAt)}</td>
+                <td>{roundIndex}</td>
+                <td>{s.userName}</td>
+                <td>{formatAttendanceStatus(s.attendanceStatus)}</td>
+              </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };

frontend/src/components/attendance/SessionManage.module.css

@@ -1,6 +1,7 @@
 .card {
   width: 100%;
   max-width: 955px;
+  min-width: 0;
   min-height: 280px;
   box-sizing: border-box;
   border: 1px solid #d9d9d9;
@@ -22,18 +23,36 @@
   color: #000000;
 }
 
-.table {
+.tableWrap {
   width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
+  max-width: 100%;
   overflow-x: auto;
-  display: block;
+  overflow-y: hidden;
+}
+
+.tableWrap::-webkit-scrollbar {
+  height: 10px;
+}
+
+.tableWrap::-webkit-scrollbar-track {
+  background: #f1f5f9;
+  border-radius: 5px;
 }
 
-.table thead,
-.table tbody {
-  display: table;
+.tableWrap::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 5px;
+  border: 2px solid #f1f5f9;
+}
+
+.tableWrap::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+.table {
   width: 100%;
+  min-width: 640px;
+  border-collapse: collapse;
   table-layout: fixed;
 }
 
@@ -62,11 +81,6 @@
     font-size: 20px;
   }
 
-  .table {
-    display: table;
-    overflow-x: visible;
-  }
-
   .table thead th,
   .table tbody td {
     font-size: 16px;