diff --git a/services/admin/src/apis/points/index.ts b/services/admin/src/apis/points/index.ts index 48513cd..a7814c0 100644 --- 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>( + `${router}/history/students/${student_id}/recent${ + page || size ? `?page=${page}&size=${size}` : '' + }`, + ); + return data; + } +}; + /** 상/벌점 전체 조회 */ export const getAllPoints = async () => { const { data } = await instance.get>( diff --git a/services/admin/src/apis/points/response.ts b/services/admin/src/apis/points/response.ts index 6a762ec..c8bbb96 100644 --- 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 index 726a6f7..3d4414f 100644 --- 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> + <> + {recentStudentPointHistory?.student_name} + {recentStudentPointHistory?.student_gcn} + + <_Divider /> + <> + <_HollowBox width={80}> + + {recentStudentPointHistory?.point_name || '내역 없음'} + + + {recentStudentPointHistory?.point_score} + + + ); +} + // 전체내역 확인할 때 사용되는 컴포넌트 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 index 70ca3cd..94ffa25 100644 --- 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 index 490f66f..8ecaa49 100644 --- 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() { setClick(false)}> <_Wrapper> <_Header> - 기본정보 - + + 기본정보 + + 최근 부여 항목 <_StudentWrapper> - {selectedStudentId.map((student) => ( - <_Student> - <> - 박준수 - 1111 - - - <> - 타호실 출입 - +4 - - - ))} + {selectedStudentId.map((student) => { + return ; + })} <_UnderWrapper> @@ -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 index 6781754..64ce181 100644 --- 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 index 62fdd27..a7a6d73 100644 --- 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);