Merge pull request #89 from Team-B1ND/Feat/#88

feat :: redisualStudentPage #88

src/components/Out/Redisual/RedisualItem/index.tsx

@@ -0,0 +1,49 @@
+import * as S from './style';
+import { TBody, TD, TR } from '@b1nd/b1nd-dodamdodam-ui';
+import profileImg from 'assets/profileImg.svg';
+import { outSleepingDataFilter } from 'utils/Out/outSleepingDataFilter';
+import { useGetRedisualQuery } from 'queries/Redisual/redisual.query';
+
+interface OffBasePassProps {
+  studentName: string;
+  selectGrade: number;
+  selectApproval: string | undefined;
+  selectRoom: string;
+}
+
+const OffbaseRedisualItem = ({ selectApproval, selectGrade, studentName, selectRoom }: OffBasePassProps) => {
+  const { data: redisualStudent } = useGetRedisualQuery();
+
+  return (
+    <>
+      {!outSleepingDataFilter ||
+      outSleepingDataFilter(redisualStudent, studentName, selectGrade, selectApproval, selectRoom)?.length === 0 ? (
+        <S.NoneTile>현재 잔류 중인 학생이 없습니다.</S.NoneTile>
+      ) : (
+        <>
+          <TBody customStyle={S.OffBaseTBody}>
+            {outSleepingDataFilter(redisualStudent, studentName, selectGrade, selectApproval, selectRoom)?.map(
+              (redisual) => (
+                <TR customStyle={S.OffBaseTR}>
+                  <TD customStyle={S.OffBaseTD}>
+                    <S.MemberImage src={profileImg} />
+                  </TD>
+                  <TD customStyle={S.OffBaseTD}>{redisual.student.name}</TD>
+                  <TD customStyle={S.OffBaseTD}>
+                    {redisual.student.grade}학년
+                    {redisual.student.room}반{redisual.student.number}번
+                  </TD>
+                  <TD customStyle={S.OffBaseTD}>
+                    <div>{redisual.phone}</div>
+                  </TD>
+                </TR>
+              )
+            )}
+          </TBody>
+        </>
+      )}
+    </>
+  );
+};
+
+export default OffbaseRedisualItem;

src/components/Out/Redisual/RedisualItem/style.ts

@@ -0,0 +1,110 @@
+import styled from "styled-components";
+import { CSSObject } from "styled-components";
+
+export const OffBaseTBody: CSSObject = {
+  width: "100%",
+  fontSize: "14px",
+  fontWeight: "600",
+  marginTop: "5px",
+  display: "flex",
+  rowGap: "5px",
+  flexDirection: "column",
+  whiteSpace: "normal",
+  cursor: "pointer",
+  tr: {
+    "&:hover": {
+      filter: "unset",
+    },
+  },
+};
+
+export const OffBaseTR: CSSObject = {
+  width: "100%",
+  height: "80px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  columnGap: "10px",
+  borderTop: "1px solid #d9d9d9",
+  borderBottom: "1px solid #d9d9d9",
+};
+
+export const OffBaseTD: CSSObject = {
+  width: "14%",
+  fontSize: "16px",
+  lineHeight: "20px",
+};
+
+export const BusLeaveTime: CSSObject = {
+  width: "14%",
+  fontSize: "16px",
+  lineHeight: "20px",
+  whiteSpace: "nowrap",
+};
+
+export const PassengerStyle: CSSObject = {
+  width: "65px",
+  height: "30px",
+  borderRadius: "7px",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    boxShadow: "0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)",
+  },
+};
+
+export const ButtonContainerStyle: CSSObject = {
+  width: "14%",
+  display: "flex",
+  alignItems: "center",
+  columnGap: "5px",
+
+  marginRight: "10px",
+};
+
+export const EditStyle: CSSObject = {
+  width: "5rem",
+  height: "2rem",
+  borderRadius: "5px",
+  fontSize: "18px",
+  transition: "all 0.2s ease-in-out",
+
+  "&:hover": {
+    boxShadow: "0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4)",
+  },
+};
+
+export const DelStyle: CSSObject = {
+  width: "5rem",
+  height: "2rem",
+
+  fontSize: "18px",
+  borderRadius: "5px",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    boxShadow: "0 0 0 1px #fff, 0 0 0 3px #ddd",
+  },
+};
+
+export const MemberImage = styled.img`
+  width: 38px;
+  height: 38px;
+  object-fit: cover;
+  border-radius: 4rem;
+`;
+
+export const NoneTile = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 64vh;
+
+  font-size: 16px;
+  color: #212529;
+`;
+
+export const DateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: 60px;
+`;

src/components/Out/Redisual/index.tsx

@@ -0,0 +1,73 @@
+import * as S from './style';
+import { Suspense, useState } from 'react';
+import ErrorBoundary from 'components/common/ErrorBoundary';
+import TableAttribute from 'components/common/TableAttribute';
+import TodayOffBaseItem from './RedisualItem/index';
+import { REDISUAL_ITEMS } from 'constants/Out/offbase.constant';
+import { SearchBar, Select } from '@b1nd/b1nd-dodamdodam-ui';
+import { useRecoilState } from 'recoil';
+import { SelectApprovalAtom, SelectGradeAtom } from 'stores/Out/out.store';
+import { changeApproval } from 'utils/Out/changeApproval';
+import { changeGrade } from 'utils/Member/changeGrade';
+import { GRADE_ITEMS } from 'constants/Grade/grade.constant';
+import { CsvButtonContainer } from 'components/Bus/BusModal/BusPassenger/style';
+import CsvButton from 'components/common/ExtractCsvData';
+import dayjs from 'dayjs';
+import useOffBaseLeave from 'hooks/Out/OutSleeping/useOutsleeping';
+import { PointSelectRoom } from 'stores/Point/point.store';
+import { useGetRedisualQuery } from 'queries/Redisual/redisual.query';
+import { redisualMemberCalc } from 'utils/Out/redisualMemberCalc';
+import useRedisual from 'hooks/Out/Redisual/useRedisual';
+
+const OffbaseRedisual = () => {
+  const [studentName, setStudentName] = useState('');
+  const [selectGrade, setSelectGrade] = useRecoilState(SelectGradeAtom);
+  const [selectApproval, setSelectApproval] = useRecoilState(SelectApprovalAtom);
+  const [room, setRoom] = useRecoilState(PointSelectRoom);
+
+  const { redisualStudent } = useRedisual();
+
+  const { data: redesualStudent } = useGetRedisualQuery();
+
+  return (
+    <>
+      <S.OffBaseHeaderContainer>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <SearchBar value={studentName} onChange={setStudentName} />
+          <span style={{ marginLeft: 10 }}>
+            {redisualMemberCalc(redesualStudent?.data!).length === 0
+              ? '오늘은 외박 잔류자가 없습니다.'
+              : `오늘의 외박 잔류자 수 : ${redisualMemberCalc(redesualStudent?.data!).length}명`}
+          </span>
+        </div>
+        <S.SelectContainer>
+          <CsvButtonContainer>
+            <CsvButton csvData={redisualStudent} fileName={dayjs().format('YYYY-MM-DD') + '잔류 중인 학생'} />
+          </CsvButtonContainer>
+          <Select items={GRADE_ITEMS} value={selectGrade} onChange={setSelectGrade} zIndex={2} />
+          <Select
+            items={['모든 학반', '1반', '2반', '3반', '4반']}
+            value={room || '학반을 선택해주세요'}
+            onChange={setRoom}
+            zIndex={2}
+          />
+        </S.SelectContainer>
+      </S.OffBaseHeaderContainer>
+
+      <TableAttribute constant={REDISUAL_ITEMS} thStyle={{ width: '14%' }}>
+        <ErrorBoundary fallback={<>오늘의 외박 잔류자를 불러오지 못했습니다.</>}>
+          <Suspense fallback={<>로딩중...</>}>
+            <TodayOffBaseItem
+              selectRoom={room}
+              selectApproval={changeApproval(selectApproval)}
+              selectGrade={changeGrade(selectGrade)}
+              studentName={studentName}
+            />
+          </Suspense>
+        </ErrorBoundary>
+      </TableAttribute>
+    </>
+  );
+};
+
+export default OffbaseRedisual;

src/components/Out/Redisual/style.ts

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+export const SelectContainer = styled.div`
+  display: flex;
+  column-gap: 10px;
+`;
+
+export const OffBaseHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  z-index: 900;
+`;

src/components/Router/index.tsx

@@ -1,16 +1,17 @@
-import { Routes, Route } from "react-router-dom";
-import MemberPage from "pages/MemberPage";
-import BusListPage from "pages/Bus/BusListPage";
-import BusDatePage from "pages/Bus/BusDatePage";
-import AuthPage from "pages/Auth/AuthPage";
-import OffBasePassPage from "pages/Out/OutGoingPage";
-import OffBaseLeavePage from "pages/Out/OutSleepingPage";
-import TodayOffBaseLeavePage from "pages/Out/TodayOutSleepingPage";
-import { NightStudyAllowPage } from "pages/NightStudy/NightStudyAllowPage";
-import { NightStudyTodayPage } from "pages/NightStudy/NightStudyTodayPage";
-import PointScore from "components/Point/PointScore";
-import PointReason from "components/Point/PointReason";
-import ScheduleManage from "components/Schedule/ScheduleManage";
+import { Routes, Route } from 'react-router-dom';
+import MemberPage from 'pages/MemberPage';
+import BusListPage from 'pages/Bus/BusListPage';
+import BusDatePage from 'pages/Bus/BusDatePage';
+import AuthPage from 'pages/Auth/AuthPage';
+import OffBasePassPage from 'pages/Out/OutGoingPage';
+import OffBaseLeavePage from 'pages/Out/OutSleepingPage';
+import TodayOffBaseLeavePage from 'pages/Out/TodayOutSleepingPage';
+import { NightStudyAllowPage } from 'pages/NightStudy/NightStudyAllowPage';
+import { NightStudyTodayPage } from 'pages/NightStudy/NightStudyTodayPage';
+import PointScore from 'components/Point/PointScore';
+import PointReason from 'components/Point/PointReason';
+import ScheduleManage from 'components/Schedule/ScheduleManage';
+import OffbaseRedisualPage from 'pages/Out/RedisualPage';
 
 const Router = () => {
   return (
@@ -22,6 +23,7 @@ const Router = () => {
       <Route path="/offbase-pass" element={<OffBasePassPage />} />
       <Route path="/offbase-leave" element={<OffBaseLeavePage />} />
       <Route path="/offbase-leave-ing" element={<TodayOffBaseLeavePage />} />
+      <Route path="/offbase-redisual" element={<OffbaseRedisualPage />} />
       <Route path="/nightStudy-allow" element={<NightStudyAllowPage />} />
       <Route path="/nightStudy-today" element={<NightStudyTodayPage />} />
       <Route path="/PointScore" element={<PointScore />} />

src/components/common/SideBar/SideBarDropdown/index.tsx

@@ -1,7 +1,7 @@
-import MenuDropdownChild from "../../MenuDropdown/MenuDropdownChild";
-import MenuDropdownWrapper from "../../MenuDropdown/MenuDropdownWrapper";
-import MenuItem from "../../MenuItem";
-import { SideBarDropdownContainer } from "./style";
+import MenuDropdownChild from '../../MenuDropdown/MenuDropdownChild';
+import MenuDropdownWrapper from '../../MenuDropdown/MenuDropdownWrapper';
+import MenuItem from '../../MenuItem';
+import { SideBarDropdownContainer } from './style';
 
 const SideBarDropdown = () => {
   return (
@@ -15,6 +15,7 @@ const SideBarDropdown = () => {
         <MenuDropdownChild title="외출" redirectUrl="/offbase-pass" />
         <MenuDropdownChild title="외박" redirectUrl="/offbase-leave" />
         <MenuDropdownChild title="외박 중인 학생" redirectUrl="/offbase-leave-ing" />
+        <MenuDropdownChild title="현재 잔류 중인 학생" redirectUrl="/offbase-redisual" />
       </MenuDropdownWrapper>
       <MenuDropdownWrapper title="상벌점">
         <MenuDropdownChild title="기숙사 점수 관리" redirectUrl="/PointScore?type=DORMITORY" />

src/constants/Out/offbase.constant.ts

@@ -1,3 +1,5 @@
-export const OUT_GOING_ITEMS = ["사진", "이름", "학반", "출발", "도착", "사유", "식사 여부", "승인여부"];
+export const OUT_GOING_ITEMS = ['사진', '이름', '학반', '출발', '도착', '사유', '식사 여부', '승인여부'];
 
-export const OUT_SLEEPING_ITEMS = ["사진", "이름", "학반", "출발", "도착", "사유", "승인여부"];
+export const OUT_SLEEPING_ITEMS = ['사진', '이름', '학반', '출발', '도착', '사유', '승인여부'];
+
+export const REDISUAL_ITEMS = ['사진', '이름', '학반', '전화번호'];

src/hooks/Out/Redisual/useRedisual.ts

@@ -0,0 +1,33 @@
+import { QUERY_KEYS } from 'queries/queryKey';
+import { useGetRedisualQuery } from 'queries/Redisual/redisual.query';
+import { useEffect, useState } from 'react';
+
+const useRedisual = () => {
+  const { data: redisual } = useGetRedisualQuery();
+  const [redisualStudent, setRedisualStudent] = useState([
+    {
+      이름: '',
+      반번호: '',
+      전화번호: '',
+      비고: '',
+    },
+  ]);
+
+  useEffect(() => {
+    if (redisual?.data) {
+      const newData = redisual.data.map((data) => ({
+        이름: data.student.name,
+        반번호: `${data.student.grade}학년 ${data.student.room}반 ${data.student.number}번`,
+        전화번호: data.phone,
+        비고: '',
+      }));
+      setRedisualStudent(newData);
+    }
+  }, [redisual]);
+
+  return {
+    redisualStudent,
+  };
+};
+
+export default useRedisual;

src/pages/Out/RedisualPage.tsx

@@ -0,0 +1,12 @@
+import OffbaseRedisual from 'components/Out/Redisual';
+import SectionHeaderProvider from 'components/common/SectionHeaderProvider';
+
+const OffbaseRedisualPage = () => {
+  return (
+    <SectionHeaderProvider title="잔류중" subTitle="현재 잔류 중인 학생이 보여집니다.">
+      <OffbaseRedisual />
+    </SectionHeaderProvider>
+  );
+};
+
+export default OffbaseRedisualPage;

src/queries/Redisual/redisual.query.ts

@@ -0,0 +1,12 @@
+import { AxiosError } from 'axios';
+import { QUERY_KEYS } from 'queries/queryKey';
+import { useQuery, UseQueryOptions } from 'react-query';
+import redisualRepositoryImpl from 'repositories/Redisual/redisual.repositoryImpl';
+import { OutResponse } from 'types/Out/out.type';
+
+export const useGetRedisualQuery = (options?: UseQueryOptions<OutResponse, AxiosError, OutResponse, string>) =>
+  useQuery(QUERY_KEYS.redisual.getResidual, () => redisualRepositoryImpl.getResdisual(), {
+    staleTime: 1000 * 60 * 60,
+    cacheTime: 1000 * 60 * 60,
+    ...options,
+  });

src/queries/queryKey.ts

@@ -22,6 +22,9 @@ export const QUERY_KEYS = Object.freeze({
   offbasemeal: {
     getMealDemand: (date: string) => ["/out-going/meal-demand", date]
   },
+  redisual: {
+    getResidual: "/out-sleeping/redisual",
+  },
   nightstudy: {
     getPendingNightStudy: "/night-study/pending",
     getNightStudyList: "/night-study",

src/repositories/Redisual/redisual.repository.ts

@@ -0,0 +1,5 @@
+import { OutResponse } from 'types/Out/out.type';
+
+export interface RedisualRepository {
+  getResdisual(): Promise<OutResponse>;
+}