[EC-211] FE/fix: 세부 출결 현황 페이지 새로고침 시 랜더링 문제 (#221)

* [EC-211] feat: refresh 요청과 일반 api 요청 순서 보장

* [EC-211] chore: 개발환경 redis docker compose 설정

Author: devyejin

api/compose.yaml

@@ -1,17 +1,17 @@
 version: "3.8"
 
 services:
-  mysql:
-    image: mysql:8.0
-    container_name: mysql_local2
-    ports:
-      - "${DATABASE_PORT}:3306"
-    environment:
-      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
-      MYSQL_DATABASE: ${DATABASE_NAME}
-      TZ: Asia/Seoul
-    volumes:
-      - mysql-volume:/var/lib/mysql2
+  #  mysql:
+  #    image: mysql:8.0
+  #    container_name: mysql_local2
+  #    ports:
+  #      - "${DATABASE_PORT}:3306"
+  #    environment:
+  #      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
+  #      MYSQL_DATABASE: ${DATABASE_NAME}
+  #      TZ: Asia/Seoul
+  #    volumes:
+  #      - mysql-volume:/var/lib/mysql2
 
   redis:
     image: redis:alpine
@@ -26,4 +26,4 @@ services:
 
 volumes:
   redis-volume:
-  mysql-volume:
+#  mysql-volume:

api/src/main/resources/application.properties

@@ -5,8 +5,8 @@ spring.datasource.password=${DATABASE_PASSWORD}
 spring.data.redis.host=${REDIS_HOST}
 spring.data.redis.port=${REDIS_PORT}
 spring.data.redis.password=${REDIS_PASSWORD}
-#spring.docker.compose.lifecycle-management=start-and-stop
-spring.docker.compose.enabled=false
+spring.docker.compose.lifecycle-management=start-and-stop
+#spring.docker.compose.enabled=false
 spring.jpa.show-sql=true
 spring.jpa.hibernate.ddl-auto=update
 logging.level.org.springframework.security=DEBUG

client/src/pages/staffAttendanceDetail/StaffAttendanceDetail.jsx

@@ -5,9 +5,11 @@ import BaseListItem from '../../components/listItem/baseListItem/BaseListItem';
 import DataBoard from '../../components/dataBoard/DataBoard';
 import { attendanceApi } from '../../api/attendanceApi';
 import { useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 export default function StaffAttendanceDetail() {
   const { courseId, studentId } = useParams();
+  const accessToken = useSelector((state) => state.auth.accessToken);
   const [studentAttendance, setStudentAttendance] = useState({
     studentName: '',
     studentPhoneNumber: '',
@@ -17,6 +19,8 @@ export default function StaffAttendanceDetail() {
 
   useEffect(() => {
     const studentAttendanceById = async () => {
+      console.log(accessToken);
+      if (!courseId || !studentId || !accessToken) return;
       try {
         const response = await attendanceApi.getStudentAttendances(courseId, studentId);
         const studentAttendanceData = response.data.data;
@@ -28,7 +32,7 @@ export default function StaffAttendanceDetail() {
     };
 
     studentAttendanceById();
-  }, [courseId, studentId]);
+  }, [courseId, studentId, accessToken]);
 
   return (
     <div className={styles.container}>