feat: 최근 학생 상/벌점 조회하기

team-aliens · Jun 3, 2023 · 3e29887 · 3e29887
1 parent 1051d3c
commit 3e29887
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 61 deletions.
diff --git a/services/admin/src/apis/points/index.ts b/services/admin/src/apis/points/index.ts
@@ -10,6 +10,7 @@ import { instance } from '..';
 import {
   AllPointListResponse,
   AllPointsOptionResponse,
+  RecentStudentPointResponse,
   StudentPointHistoryResponse,
 } from './response';
 import { useToast } from '@/hooks/useToast';
@@ -40,6 +41,22 @@ export const getStudentPointHistory = async (
   }
 };
 
+/** 학생 상/벌점 최근 내역 조회 */
+export const getRecentStudentPointHistory = async (
+  student_id: string,
+  page?: number,
+  size?: number,
+) => {
+  if (student_id) {
+    const { data } = await instance.get<Promise<RecentStudentPointResponse>>(
+      `${router}/history/students/${student_id}/recent${
+        page || size ? `?page=${page}&size=${size}` : ''
+      }`,
+    );
+    return data;
+  }
+};
+
 /** 상/벌점 전체 조회 */
 export const getAllPoints = async () => {
   const { data } = await instance.get<Promise<AllPointsOptionResponse>>(

diff --git a/services/admin/src/apis/points/response.ts b/services/admin/src/apis/points/response.ts
@@ -18,6 +18,14 @@ export interface StudentPointHistoryResponse {
   point_histories: StudentPointHistoryType[];
 }
 
+export interface RecentStudentPointResponse {
+  student_name: string;
+  student_gcn: string;
+  point_type: PointType;
+  point_score: number;
+  point_name: string;
+}
+
 export interface StudentPointHistoryType {
   point_history_id: string;
   type: PointType;

diff --git a/services/admin/src/components/main/DetailBox/PointItem.tsx b/services/admin/src/components/main/DetailBox/PointItem.tsx
@@ -7,6 +7,7 @@ import {
 } from '@/apis/points/response';
 import { PointEnum, PointType } from '@/apis/points';
 import { usePointHistoryId } from '@/store/usePointHistoryId';
+import { useRecentStudentPointHistory } from '@/hooks/usePointsApi';
 
 interface PropsType extends StudentPointHistoryType {
   isDeleteListOption?: boolean;
@@ -100,6 +101,31 @@ export function PointItem({
   );
 }
 
+export function RecentPointItem({ studentId }: { studentId: string }) {
+  const { data: recentStudentPointHistory } =
+    useRecentStudentPointHistory(studentId);
+
+  return (
+    <_Student>
+      <>
+        <Text>{recentStudentPointHistory?.student_name}</Text>
+        <Text>{recentStudentPointHistory?.student_gcn}</Text>
+      </>
+      <_Divider />
+      <>
+        <_HollowBox width={80}>
+          <Text
+            color={recentStudentPointHistory?.point_name ? 'gray10' : 'gray5'}
+          >
+            {recentStudentPointHistory?.point_name || '내역 없음'}
+          </Text>
+        </_HollowBox>
+        <Text color="primary">{recentStudentPointHistory?.point_score}</Text>
+      </>
+    </_Student>
+  );
+}
+
 // 전체내역 확인할 때 사용되는 컴포넌트
 export function AllPointItem({
   point_history_id,
@@ -196,3 +222,36 @@ const _Delete = styled.div`
   margin: 0 12px;
   cursor: pointer;
 `;
+
+const _Student = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 57px;
+  background-color: #f9f9f9;
+  margin-bottom: 8px;
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  padding: 0 28px;
+`;
+
+const _HollowBox = styled.div<{ width: number }>`
+  div {
+    width: ${({ width }) => width}px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const _Divider = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 47%;
+  transform: translate(-50%, -50%);
+  width: 1px;
+  height: 28px;
+  background-color: ${({ theme }) => theme.color.gray3};
+`;
diff --git a/services/admin/src/components/main/StudentList.tsx b/services/admin/src/components/main/StudentList.tsx
@@ -85,16 +85,14 @@ export function StudentList({
   refetchSearchStudents,
   availableFeature,
 }: Props) {
-  const [selectedStudentId] = useSelectedStudentIdStore((state) => [
-    state.selectedStudentId,
-    state.resetStudentId,
-    state.appendStudentId,
-    state.deleteStudentId,
-  ]);
+  const [selectedStudentId, resetStudentId, appendStudentId, deleteStudentId] =
+    useSelectedStudentIdStore((state) => [
+      state.selectedStudentId,
+      state.resetStudentId,
+      state.appendStudentId,
+      state.deleteStudentId,
+    ]);
 
-  const [clickedStudentId, setClickedStudentId] = useClickedStudentIdStore(
-    (state) => [state.clickedStudentId, state.setClickedStudentId],
-  );
   const [pointHistoryId] = usePointHistoryId((state) => [state.pointHistoryId]);
   const [tagId] = useDeleteTagIdStore((state) => [state.deleteTagId]);
   const { modalState, selectModal, closeModal } = useModal();
@@ -202,22 +200,6 @@ export function StudentList({
 
   const deleteStudentTag = useDeleteStudentTag(selectedStudentId[0], tagId);
 
-  const [selectedStudentId, resetStudentId, appendStudentId, deleteStudentId] =
-    useSelectedStudentIdStore((state) => [
-      state.selectedStudentId,
-      state.resetStudentId,
-      state.appendStudentId,
-      state.deleteStudentId,
-    ]);
-
-  const [selectedStudentId, resetStudentId, appendStudentId, deleteStudentId] =
-    useSelectedStudentIdStore((state) => [
-      state.selectedStudentId,
-      state.resetStudentId,
-      state.appendStudentId,
-      state.deleteStudentId,
-    ]);
-
   return (
     <_Wrapper>
       <_Filter className="filter">

diff --git a/services/admin/src/components/modals/StudentSelectModal.tsx b/services/admin/src/components/modals/StudentSelectModal.tsx
@@ -5,8 +5,8 @@ import { Text, Button } from '@team-aliens/design-system';
 import { fadeInRight } from '../../components/animation/fade';
 import { Divider } from '../main/Divider';
 import { useModal } from '@/hooks/useModal';
-import { useStudentPointHistory } from '@/hooks/usePointsApi';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { RecentPointItem } from '../main/DetailBox/PointItem';
 
 export default function StudentSelectModal() {
   const [selectedStudentId] = useSelectedStudentIdStore((state) => [
@@ -23,25 +23,17 @@ export default function StudentSelectModal() {
     <OutsideClickHandler onOutsideClick={() => setClick(false)}>
       <_Wrapper>
         <_Header>
-          <Text color="gray6">기본정보</Text>
-          <Text color="gray6" margin={[0, 88, 0, 0]}>
+          <Text color="gray6" margin={['left', 5]}>
+            기본정보
+          </Text>
+          <Text color="gray6" margin={[0, 80, 0, 5]}>
             최근 부여 항목
           </Text>
         </_Header>
         <_StudentWrapper>
-          {selectedStudentId.map((student) => (
-            <_Student>
-              <>
-                <Text margin={[0, 16, 0, 0]}>박준수</Text>
-                <Text>1111</Text>
-              </>
-              <Divider height={28} />
-              <>
-                <Text margin={[0, 16, 0, 0]}>타호실 출입</Text>
-                <Text color="primary">+4</Text>
-              </>
-            </_Student>
-          ))}
+          {selectedStudentId.map((student) => {
+            return <RecentPointItem studentId={student} />;
+          })}
         </_StudentWrapper>
         <_UnderWrapper>
           <Text size="BtnM">
@@ -93,25 +85,13 @@ const _Header = styled.div`
 
 const _StudentWrapper = styled.div`
   width: 338px;
-  height: 260px;
+  height: 285px;
+  margin-bottom: 30px;
   position: relative;
   overflow-y: scroll;
   margin-top: 10px;
 `;
 
-const _Student = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  width: 100%;
-  height: 57px;
-  background-color: #f9f9f9;
-  margin-bottom: 8px;
-  border: 1px solid #eeeeee;
-  border-radius: 5px;
-  padding: 0 28px;
-`;
-
 const _UnderWrapper = styled.div`
   display: flex;
   justify-content: space-between;

diff --git a/services/admin/src/hooks/usePointsApi.tsx b/services/admin/src/hooks/usePointsApi.tsx
@@ -8,12 +8,14 @@ import {
   cancelPointHistory,
   getAllPointHistory,
   getAllPoints,
+  getRecentStudentPointHistory,
   getStudentPointHistory,
   PointType,
 } from '@/apis/points';
 import { usePointHistoryList } from './usePointHistoryList';
 import { useToast } from './useToast';
 import { useModal } from './useModal';
+import { RecentStudentPointResponse } from '@/apis/points/response';
 
 export const useAllPointHistory = (pointType: PointType) =>
   useQuery(
@@ -44,6 +46,22 @@ export const useStudentPointHistory = (
   );
 };
 
+export const useRecentStudentPointHistory = (
+  student_id: string,
+  isActive?: boolean,
+  page?: number,
+  size?: number,
+) => {
+  return useQuery(
+    [`getStudentPointHistory`, student_id],
+    () => getRecentStudentPointHistory(student_id, page, size),
+    {
+      refetchOnWindowFocus: true,
+      enabled: isActive && Boolean(student_id),
+    },
+  );
+};
+
 export const usePointOptionList = () =>
   useQuery(['usePointList'], () => getAllPoints(), {
     refetchOnWindowFocus: true,

diff --git a/services/admin/src/pages/Home.tsx b/services/admin/src/pages/Home.tsx
@@ -81,12 +81,6 @@ export function Home() {
 
   const { data: availableFeature } = useAvailAbleFeatures();
 
-  const { data: studentPointHistory, refetch: refetchStudentPointHistory } =
-    useStudentPointHistory(
-      selectedStudentId[selectedStudentId.length - 1],
-      availableFeature?.point_service,
-    );
-
   const onChangeSortType = () => {
     const value: SortType = filter.sort === 'GCN' ? 'NAME' : 'GCN';
     changeObjectValue('sort', value);