Merge branch 'main' into #26/feature_select_student_modal

team-aliens · Jun 3, 2023 · 12efbd6 · 12efbd6
2 parents 3e29887 + adbace3
commit 12efbd6
Show file tree

Hide file tree

Showing 20 changed files with 372 additions and 195 deletions.
diff --git a/services/admin/public/index.html b/services/admin/public/index.html
@@ -9,5 +9,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="side-bar"></div>
   </body>
 </html>
diff --git a/services/admin/src/apis/points/index.ts b/services/admin/src/apis/points/index.ts
@@ -31,14 +31,12 @@ export const getStudentPointHistory = async (
   page?: number,
   size?: number,
 ) => {
-  if (student_id) {
-    const { data } = await instance.get<Promise<StudentPointHistoryResponse>>(
-      `${router}/history/students/${student_id}${
-        page || size ? `?page=${page}&size=${size}` : ''
-      }`,
-    );
-    return data;
-  }
+  const { data } = await instance.get<Promise<StudentPointHistoryResponse>>(
+    `${router}/history/students/${student_id}${
+      page || size ? `?page=${page}&size=${size}` : ''
+    }`,
+  );
+  return data;
 };
 
 /** 학생 상/벌점 최근 내역 조회 */

diff --git a/services/admin/src/apis/points/response.ts b/services/admin/src/apis/points/response.ts
@@ -28,6 +28,7 @@ export interface RecentStudentPointResponse {
 
 export interface StudentPointHistoryType {
   point_history_id: string;
+  date?: string;
   type: PointType;
   score: number;
   name: string;

diff --git a/services/admin/src/components/apply/study/SeatSetting.tsx b/services/admin/src/components/apply/study/SeatSetting.tsx
@@ -18,6 +18,8 @@ import {
 import { SeatType } from '@/apis/studyRooms/response';
 import { SelectedModalType } from '@/context/modal';
 import { useStudyRoom } from '@/hooks/useStudyRoom';
+import { SideBar } from '@/components/sidebar';
+import SideBarPortal from '@/components/sidebar/SideBarPortal';
 
 const seatStatus = ['AVAILABLE', 'UNAVAILABLE', 'EMPTY'].map(
   (i: SeatStatusType) => seatStatusToKorean(i),
@@ -53,14 +55,13 @@ export function SeatSetting({
   };
 
   return (
-    <OutsideClickHandler onOutsideClick={!addSeat && closeSeatSetting}>
-      <_Wrapper>
-        <_EscapeWrapper onClick={closeSeatSetting}>
-          <Escape size={24} />
-        </_EscapeWrapper>
-        <Text color="gray10" size="titleL" margin={['top', 50]}>
-          자리 설정
-        </Text>
+    <SideBarPortal>
+      <SideBar
+        title="자리 설정"
+        close={() => {
+          !addSeat && closeSeatSetting();
+        }}
+      >
         <DropDown
           items={seatStatus}
           placeholder="사용 가능"
@@ -155,8 +156,8 @@ export function SeatSetting({
             확인
           </Button>
         </_Buttons>
-      </_Wrapper>
-    </OutsideClickHandler>
+      </SideBar>
+    </SideBarPortal>
   );
 }
 

diff --git a/services/admin/src/components/main/DetailBox/DetailBox.tsx b/services/admin/src/components/main/DetailBox/DetailBox.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 import { Button, Text } from '@team-aliens/design-system';
 import { GetStudentDetailResponse } from '@/apis/managers/response';
-import { PointItem } from './PointItem';
+import { StudentPointItem } from './PointItem';
 import { StudentProfile } from './StudentInfo';
 import { PointBox } from './PointBox';
 import { PointType } from '@/apis/points';
@@ -36,33 +36,33 @@ export function DetailBox({
       <_DetailBox>
         <StudentProfile
           student_id={selectedStudentId[0]}
-          name={studentDetail.name}
-          gcn={studentDetail.gcn}
-          sex={studentDetail.sex}
-          room_number={studentDetail.room_number}
-          profile_image_url={studentDetail.profile_image_url}
+          name={studentDetail?.name}
+          gcn={studentDetail?.gcn}
+          sex={studentDetail?.sex}
+          room_number={studentDetail?.room_number}
+          profile_image_url={studentDetail?.profile_image_url}
         />
         {availableFeature?.point_service && (
           <_PointWrapper>
             <PointBox
               currentPointType={currentPointType}
               setCurrentPointType={setCurrentPointType}
               pointType="BONUS"
-              point={studentDetail.bonus_point}
+              point={studentDetail?.bonus_point}
             />
             <PointBox
               currentPointType={currentPointType}
               setCurrentPointType={setCurrentPointType}
               pointType="MINUS"
-              point={studentDetail.minus_point}
+              point={studentDetail?.minus_point}
             />
           </_PointWrapper>
         )}
         <Text size="bodyS" color="gray6" margin={['top', 40]}>
           동일 호실 학생
         </Text>
         <_MateList>
-          {studentDetail.room_mates.map((item) => (
+          {studentDetail?.room_mates.map((item) => (
             <Button
               key={item.id}
               kind="outline"
@@ -77,7 +77,7 @@ export function DetailBox({
           학생 태그
         </Text>
         <_MateList>
-          {studentDetail.tags?.map((tag) => {
+          {studentDetail?.tags?.map((tag) => {
             return (
               <Tag
                 key={tag.id}
@@ -103,12 +103,14 @@ export function DetailBox({
                       currentPointType === 'ALL',
                   )
                   .map((history) => {
-                    const { point_history_id, name, type, score } = history;
+                    const { point_history_id, name, type, score, date } =
+                      history;
                     return (
-                      <PointItem
+                      <StudentPointItem
                         key={point_history_id}
                         point_history_id={point_history_id}
                         name={name}
+                        date={date}
                         type={type}
                         score={score}
                         canDelete={canDelete}
@@ -132,6 +134,7 @@ const _DetailBox = styled.div`
   flex-direction: column;
   box-shadow: 0px 1px 20px rgba(238, 238, 238, 0.8);
   border-radius: 4px;
+  overflow: scroll;
 `;
 
 const _PointWrapper = styled.div`

diff --git a/services/admin/src/components/main/DetailBox/PointItem.tsx b/services/admin/src/components/main/DetailBox/PointItem.tsx
@@ -8,6 +8,7 @@ import {
 import { PointEnum, PointType } from '@/apis/points';
 import { usePointHistoryId } from '@/store/usePointHistoryId';
 import { useRecentStudentPointHistory } from '@/hooks/usePointsApi';
+import { useState } from 'react';
 
 interface PropsType extends StudentPointHistoryType {
   isDeleteListOption?: boolean;
@@ -123,6 +124,79 @@ export function RecentPointItem({ studentId }: { studentId: string }) {
         <Text color="primary">{recentStudentPointHistory?.point_score}</Text>
       </>
     </_Student>
+
+export function StudentPointItem({
+  isDeleteListOption = false,
+  canDelete = false,
+  canClick = false,
+  onClick,
+  OptionSelected,
+  point_history_id,
+  date,
+  name,
+  score,
+  type,
+}: PropsType) {
+  const { selectModal } = useModal();
+  const [setPointHistoryId] = usePointHistoryId((state) => [
+    state.setPointHistoryId,
+  ]);
+  const openCancelPointModal = () => {
+    selectModal('DELETE_POINT_LIST');
+    setPointHistoryId(point_history_id);
+  };
+
+  const openDeletePointModal = () => {
+    selectModal('DELETE_POINT_OPTION');
+  };
+
+  const [mouseOver, setMouseOver] = useState<boolean>(false);
+
+  return (
+    <_Wrapper
+      onMouseOver={() => {
+        setMouseOver(true);
+      }}
+      onMouseOut={() => {
+        setMouseOver(false);
+      }}
+      className="grantPoint"
+      canClick={canClick}
+      type={type}
+      onClick={() => onClick && onClick(point_history_id, name, score, type)}
+      OptionSelected={OptionSelected === point_history_id}
+    >
+      <Text className="grantPoint" margin={[0, 20]} color="gray6" size="BtnM">
+        {name}
+      </Text>
+      <_PointDate
+        className="grantPoint"
+        margin={['left', 'auto']}
+        color="gray6"
+        size="bodyS"
+      >
+        {date}
+      </_PointDate>
+      <_Line className="grantPoint" />
+      {!mouseOver ? (
+        <Text
+          className="grantPoint"
+          margin={[0, 30]}
+          color={type === 'BONUS' ? 'primary' : 'error'}
+        >
+          {score}
+        </Text>
+      ) : (
+        <_Delete
+          onClick={
+            isDeleteListOption ? openDeletePointModal : openCancelPointModal
+          }
+        >
+          <Trash colorKey="gray5" />
+        </_Delete>
+      )}
+      {canDelete}
+    </_Wrapper>
   );
 }
 
@@ -146,31 +220,40 @@ export function AllPointItem({
     setPointHistoryId(point_history_id);
   };
 
+  const [mouseOver, setMouseOver] = useState<boolean>(false);
+
   return (
-    <_AllPointWrapper>
-      <Text margin={[0, 20, 0, 30]} color="gray10" size="bodyL">
+    <_AllPointWrapper
+      onMouseOver={() => {
+        setMouseOver(true);
+      }}
+      onMouseOut={() => {
+        setMouseOver(false);
+      }}
+    >
+      <Text margin={[0, 16, 0, 30]} color="gray10" size="bodyM">
         {student_name}
       </Text>
-      <Text margin={['right', 'auto']} color="gray6" size="bodyL">
+      <Text margin={['right', 'auto']} color="gray6" size="bodyM">
         {student_gcn}
       </Text>
       <Text margin={[0, 30]} color="gray6" size="BtnM">
         {point_name}
       </Text>
       <_Line />
-      <Text
-        margin={[0, 30]}
-        color={point_type === 'BONUS' ? 'primary' : 'error'}
-        size="bodyS"
-      >
-        {point_type === 'BONUS' ? '상점' : '벌점'}
-      </Text>
-      <_Line />
-      <Text margin={[0, 30]}>{point_score}</Text>
-      <_Line />
-      <_Delete onClick={openCancelPointModal}>
-        <Trash colorKey="gray5" />
-      </_Delete>
+      {!mouseOver ? (
+        <Text
+          margin={[0, 30]}
+          color={point_type === 'BONUS' ? 'primary' : 'error'}
+          size="bodyM"
+        >
+          {point_score}
+        </Text>
+      ) : (
+        <_Delete onClick={openCancelPointModal}>
+          <Trash colorKey="gray5" />
+        </_Delete>
+      )}
     </_AllPointWrapper>
   );
 }
@@ -214,13 +297,21 @@ const _Line = styled.div`
   background-color: #eeeeee;
 `;
 
-const _PointType = styled(Text)`
-  margin-right: 30px;
+const _PointDate = styled(Text)`
+  margin-right: 20px;
 `;
 
+const _PointType = styled(_PointDate)``;
+
 const _Delete = styled.div`
-  margin: 0 12px;
+  margin: 0 26px;
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
+  background-color: ${({ theme }) => theme.color.gray2};
+  border-radius: 50%;
 `;
 
 const _Student = styled.div`

diff --git a/services/admin/src/components/main/DetailBox/StudentDetailPoint.tsx b/services/admin/src/components/main/DetailBox/StudentDetailPoint.tsx
@@ -30,14 +30,15 @@ export function StudentDetailPointList({
       <_PointItemList>
         {availableFeature?.point_service &&
           historyList?.slice(0, 4).map((history) => {
-            const { name, point_history_id, score, type } = history;
+            const { name, point_history_id, date, score, type } = history;
             return (
               <PointItem
                 key={point_history_id}
                 canDelete={false}
                 name={name}
                 point_history_id={point_history_id}
                 score={score}
+                date={date}
                 type={type}
               />
             );

diff --git a/services/admin/src/components/main/PointList.tsx b/services/admin/src/components/main/PointList.tsx
@@ -65,21 +65,6 @@ export function PointList() {
 
   return (
     <_Wrapper>
-      <Button
-        margin={['left', 'auto']}
-        className="pointList"
-        onClick={openPointOptionModal}
-      >
-        상/벌점 항목 보기
-      </Button>
-      <_Display>
-        <Text margin={['bottom', 10]} color="gray6" size="titleL">
-          전체 학생 상/벌점
-        </Text>
-        <Button color="gray" kind="outline" onClick={downloadPointHistory}>
-          엑셀 출력
-        </Button>
-      </_Display>
       {data?.point_histories &&
         data.point_histories.map((res, i) => {
           const {
@@ -95,7 +80,7 @@ export function PointList() {
           return (
             <>
               {!isSameDate && (
-                <Text margin={[30, 0, 9, 0]} color="gray6" size="titleS">
+                <Text margin={[30, 0, 9, 0]} color="gray6" size="bodyL">
                   {date}
                 </Text>
               )}
@@ -137,10 +122,7 @@ export function PointList() {
 }
 
 const _Wrapper = styled.div`
-  width: 670px;
-  margin-right: 361px;
-  margin-left: 50px;
-  margin-bottom: 150px;
+  width: 418px;
 `;
 
 const _Display = styled.div`
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,6 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <div id="side-bar"></div>
       </body>
     </html>