ICE-AdvICE · kanado5385-k · Aug 5, 2024
diff --git a/frontend/public/codingzone_attendence.png b/frontend/public/codingzone_attendence.png
diff --git a/frontend/src/apis/Codingzone-api.js b/frontend/src/apis/Codingzone-api.js
@@ -2,9 +2,16 @@ import axios from 'axios';
 
 const DOMAIN = 'http://localhost:4000';
 const API_DOMAIN = `${DOMAIN}/api/v1`;
-
+
+const GET_CZ_AUTH_TYPE = () => `${API_DOMAIN}/coding-zone/auth-type`;
+const GET_CZ_ATTEND_LIST = () => `${API_DOMAIN}/coding-zone/attend-list`;
+const authorization = (accessToken) => {
+    return { headers: { Authorization: `Bearer ${accessToken}` } }
+};
+
+
 // 11.모든 게시글을 리스트 형태로 불러오는 API
-export const getcodingzoneListRequest  = async (token, grade) => {
+export const getcodingzoneListRequest = async (token, grade) => {
     try {
         const response = await axios.get(`${API_DOMAIN}/coding-zone/class-list/${grade}`, {
             headers: { Authorization: `Bearer ${token}` }
@@ -38,3 +45,26 @@ export const getcodingzoneListRequest  = async (token, grade) => {
         return false;
     }
 };
+
+// 7.운영자 권한 종류 확인 API
+export const getczauthtypetRequest = async (accessToken) => {
+    try {
+        const response = await axios.get(GET_CZ_AUTH_TYPE(), authorization(accessToken));
+        return response.data;
+    } catch (error) {
+        if (!error.response || !error.response.data) return null;
+        return error.response.data;
+    }
+};
+// 12.특정 사용자의 출/결석된 수업 리스트로 반환 API 
+export const getczattendlistRequest = async (accessToken) => {
+    try {
+        const response = await axios.get(GET_CZ_ATTEND_LIST(), authorization(accessToken));
+        return response.data;
+    } catch (error) {
+        if (!error.response || !error.response.data) return null;
+        return error.response.data;
+    }
+};
+
+
diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -5,9 +5,9 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import Main from './layouts/HomePage';
 import ArticleMain from './layouts/ArticleMain';
 import CodingMain from './layouts/Coding-zone/CodingMain';
+import Codingzone_Attendence from './layouts/Coding-zone/Codingzone_Attendence';
 import EditPage from'./layouts/EditPage';
 import NavBar from './components/NavBar';
-import Footer from './components/Footer';
 import CreatePage from './layouts/CreatePage';
 import ShowPage from './layouts/ShowPage';
 import './layouts/css/NavBar.css';
@@ -20,9 +20,9 @@ ReactDOM.render(
       <Route path="/article-main/create" element={<CreatePage />} />
       <Route path="/article-main/:articleNum/edit" element={<EditPage />} />
       <Route path="/article-main/:articleNum" element={<ShowPage />} />
-      <Route path="/coding-zone" element={<CodingMain />} />
+      <Route path="/coding-zone/CodingMain" element={<CodingMain />} />
+      <Route path="/coding-zone/Codingzone_Attendence" element={<Codingzone_Attendence />} />
     </Routes>
-    <Footer />
   </BrowserRouter>,
   document.getElementById('root')
 );
diff --git a/frontend/src/layouts/Coding-zone/CodingMain.js b/frontend/src/layouts/Coding-zone/CodingMain.js
@@ -3,10 +3,12 @@ import '../css/codingzone/codingzone-main.css';
 import { useCookies } from "react-cookie";
 import CzCard from '../../components/czCard';  
 import { getcodingzoneListRequest } from '../../apis/Codingzone-api.js'; // API 함수 임포트
+import { useNavigate } from 'react-router-dom';
 
 
 const ClassList = ({ classList, handleCardClick }) => {
   return (
+
     <div className='cz-card'>
       {classList.map((classItem) => (
         <CzCard
@@ -31,6 +33,11 @@ const CodingMain = () => {
     const [token, setToken] = useState('');  
     const [grade, setGrade] = useState(1);  
     const [cookies] = useCookies('accessToken');
+    const navigate = useNavigate();
+
+    const handlecodingzoneattendence =  () => {
+        navigate(`/coding-zone/Codingzone_Attendence`);
+     };
 
     useEffect(() => {
         const fetchData = async () => {
@@ -55,7 +62,7 @@ const CodingMain = () => {
                 <span> | </span>
                 <button>코딩존 예약</button>
                 <span> | </span>
-                <button>출결 관리</button>
+                <button onClick={handlecodingzoneattendence} >출결 관리</button>
                 <span> | </span>
                 <button>문의 하기</button>
                 <span> | </span>

diff --git a/frontend/src/layouts/Coding-zone/Codingzone_Attendence.js b/frontend/src/layouts/Coding-zone/Codingzone_Attendence.js
@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { getczauthtypetRequest, getczattendlistRequest } from '../../apis/Codingzone-api.js';
+import { useCookies } from 'react-cookie';
+import '../css/codingzone/codingzone-main.css';
+import '../css/codingzone/codingzone_attend.css';
+
+
+
+
+
+const Codingzone_Attendence = () => {
+
+    const [authMessage, setAuthMessage] = useState('');
+    const [attendList, setAttendList] = useState([]);
+    const [showAdminButton, setShowAdminButton] = useState(false);
+    const [cookies, setCookie] = useCookies(['accessToken']);
+    const [activeButton, setActiveButton] = useState('check');
+    const token = cookies.accessToken;
+
+    const formatTime = (timeString) => {
+        const [hours, minutes] = timeString.split(':');
+        return `${hours}:${minutes}`;
+    };
+
+    const isFutureDate = (classDate, classTime) => {
+        const now = new Date();
+        const classDateTime = new Date(`${classDate}T${classTime}`);
+        return classDateTime > now;
+    };
+
+    useEffect(() => {
+        const fetchAuthType = async () => {
+            const response = await getczauthtypetRequest(token);
+            if (response) {
+                switch (response.code) {
+                    case "SU":
+                    case "EA":
+                    case "NU":
+                    case "DBE":
+                        break;
+                    case "CA":
+                        setShowAdminButton(true);
+                        break;
+                    default:
+                        setShowAdminButton(false);
+                        break;
+                }
+
+
+            }
+        };
+
+        fetchAuthType();
+    }, [token, authMessage]);
+
+    useEffect(() => {
+        const fetchAttendList = async () => {
+            const response = await getczattendlistRequest(token);
+            if (response && response.code === "SU") {
+                setAttendList(response.attendList);
+            } else {
+                // 오류 처리
+                console.error(response.message);
+            }
+        };
+
+        fetchAttendList();
+    }, [token]);
+
+
+
+    return (
+        <div>
+            <div className="codingzone-container">
+                <div className='select-container'>
+                    <span> | </span>
+                    <button>코딩존 예약</button>
+                    <span> | </span>
+                    <button>출결 관리</button>
+                    <span> | </span>
+                    <button>문의 하기</button>
+                    <span> | </span>
+                </div>
+                <div className="banner_img_container">
+                    <img src="/codingzone_Attendence.png" className="banner" />
+                </div>
+            </div>
+            <div className="cza_button_container" style={{ textAlign: 'center' }}>
+                <button
+                    className={`btn-attend ${activeButton === 'check' ? 'active' : ''}`}
+                    onClick={() => setActiveButton('check')}
+                >
+                    출결 확인
+                </button>
+                {showAdminButton && (
+                    <>
+                        <div className="divider"></div>
+                        <button
+                            className={`btn-attend ${activeButton === 'manage' ? 'active' : ''}`}
+                            onClick={() => setActiveButton('manage')}
+                        >
+                            출결 관리
+                        </button>
+                    </>
+                )}
+            </div>
+
+            <div className="line-container1">
+                {/* 실선 영역이여*/}
+            </div>
+
+            <div className="info-container">
+                <div className="info_inner">
+                    <div className="info_date">날짜</div>
+                    <div className="info_time">시간</div>
+                    <div className="info_bar"></div>
+                    <div className="info_classname">과목명</div>
+                    <div className="info_assistant">조교</div>
+                    <div className="info_status">출결</div>
+                </div>
+            </div>
+            <div className="line-container2">
+                {/* 실선 영역이여  */}
+            </div>
+
+            <div className="info_data_container">
+                {attendList.map((item, index) => (
+                    <div key={index} className="info_data_inner">
+                        <div className="info_data_date">{item.classDate}</div>
+                        <div className="info_data_time">{formatTime(item.classTime)}</div>
+                        <div className="info_data_bar"></div>
+                        <div className="info_data_classname">{item.className}</div>
+                        <div className="info_data_assistant">{item.assistantName}</div>
+                        <div className="info_data_status">
+                            {isFutureDate(item.classDate, item.classTime) ? '진행중' : (item.attendance === '1' ? 'Y' : 'N')}
+                        </div>
+
+                    </div>
+                ))}
+            </div>
+        </div>
+
+
+
+
+
+    );
+};
+
+export default Codingzone_Attendence;
diff --git a/frontend/src/layouts/Main/MainPage.js b/frontend/src/layouts/Main/MainPage.js
@@ -9,7 +9,7 @@ const MainPage = () => {
   };
 
   const handlecodingzone = async () => {
-    navigate(`/coding-zone`);
+    navigate(`/coding-zone/CodingMain`);
  };
 
   return (