[EC-220] FE/fix: 학습자 관리 버튼 수정 (#229)

* [EC-220] refactor: 안쓰는 컴포넌트 삭제

* [EC-220] fix: 버튼 수정

Author: ysc13245

client/src/components/tag/Tag.jsx

@@ -1,38 +1,51 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './Tag.module.css';
 import { getTagColors, getIsClickable, tagList } from '../../utils/buttonContentList';
 import DropBoxButton from '../buttons/dropBoxButton/DropBoxButton';
 
-export default function Tag({ title, onTagChange }) {
+export default function Tag({ title }) {
   const tagColors = getTagColors(title);
   const isClickable = getIsClickable(title);
 
   // TODO : 관리자 페이지의 학습자 관리 tag에만 사용
   const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
 
-  const handleOpenDropBox = () => {
-    setIsOpen(true);
+  const handleToggleDropBox = () => {
+    setIsOpen((prev) => !prev);
   };
 
   const handleCloseDropBox = () => {
     setIsOpen(false);
   };
 
   const handleTagClick = (newTagTitle) => {
-    onTagChange(newTagTitle);
+    // TODO : patch 요청
     setIsOpen(false);
   };
 
   const dropBoxButtonList = tagList.map((item, index) => (
     <DropBoxButton key={index} title={item} handleClick={() => handleTagClick(item)} />
   ));
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className={styles.tagBox}>
+    <div ref={containerRef} className={styles.tagBox}>
       <button
         disabled={!isClickable}
-        onClick={handleOpenDropBox}
-        // onBlur={handleCloseDropBox}
+        onClick={handleToggleDropBox}
         className={`${styles.tag} ${tagColors ? styles[tagColors] : ''}`}
       >
         {title}

client/src/pages/Test.jsx

@@ -15,7 +15,6 @@ import StaffStudentManage from '../pages/staffStudentManage/StaffStudentManage';
 import TmpLayout from '../layout/TmpLayout';
 import { URL_PATHS } from '../constants/urlPaths';
 import RoomReservation from '../pages/roomReservation/RoomReservation';
-import Test from '../pages/Test';
 import AttendanceSheet from '../pages/attendanceSheet/AttendanceSheet';
 
 const router = createBrowserRouter([