Merge branch 'dev'

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,18 +1,16 @@
 ---
 name: Bug report
 about: 버그 발생 관련 이슈 발행
-title: ""
+title: ''
 labels: bug
-assignees: ""
+assignees: ''
 ---
 
 ## 버그 설명 <!-- 발생한 버그에 대한 간단한 설명 작성 -->
 
-## 버그 발생 단계 <!-- 필요할 경우 스크린샷 등 첨부 -->
-
-## 예상 동작 <!-- 필요할 경우 스크린샷 등 첨부 -->
+## 해결 방법 <!-- 필요할 경우 스크린샷 등 첨부 -->
 
 ## 진행 사항 <!-- 할 일 목록을 만들고 진행 사항 표시 -->
 
-- [ ] todo1
-- [ ] todo2
+-   [ ] todo1
+-   [ ] todo2

.github/auto_assign.yml

@@ -3,5 +3,4 @@ addReviewers: true
 addAssignees: author
 
 reviewers:
-    - 05lazy
-    - paperdeer
+    - Juone2

README.md

@@ -1,28 +1,45 @@
 ![png](https://user-images.githubusercontent.com/68860610/233824618-8b764a7f-51dc-41ca-aa84-fd9ee3b76849.png)
 
-# DMS
+## DMS
 
 DMS는 Dormitory Management System의 약자로, 학교와 학생의 기숙사 생활을 편리하게 하기 위한 서비스입니다.
 저희는 학생들의 편리한 기숙사 생활을 위한 기능을 제공합니다.
 
 DMS는 기숙사를 위한 편의 시스템을 목표로 하고 있기 때문에, 사용자의 의견을 적극 수용하여 기숙사 생활을 개선하는 데 전념하고 있습니다.
 
-**DMS Admin**은 사감 선생님을 위한 웹 서비스 입니다. 사감선생님과 학생들의 의견에 귀기울이며 노력하고 유지보수 하며 개선하기 위해 노력합니다.
+## DMS-FrontEnd
+**Team aliens의 DMS-FrontEnd 레포지토리 입니다.** <br />
 
-## 홈 & 마이페이지
+**DMS Admin(FrontEnd)는** 사감 선생님을 위한 웹 서비스 입니다. 사감선생님의 의견에 귀기울이며 서비스를 개선 및 유지보수하며 더 나은 서비스를 위해 노력합니다.
+
+## 서비스 소개
+### 홈 & 마이페이지
 - 홈 화면에서는 학생들의 목록과 호실 정보, 상 벌점을 조회하고 내역을 볼 수 있어요.
 - 마이페이지에선 학생을 등록하거나 호실 및 정보 변경, 비밀번호 변경과 로그아웃을 할 수 있어요.
 ![image](https://github.com/team-aliens/DMS/assets/103497968/ea5d1f69-33c2-4bf5-b867-0708c632b54f)
 
-## 사감선생님 공지 등록
+### 사감선생님 공지 등록
 - 사감선생님께서 학생들에게 공지할 내용을 작성하고 내역을 볼 수 있어요.
 ![image](https://github.com/team-aliens/DMS/assets/103497968/a9843169-3a4b-4e9d-bff7-7aa4bab28755)
 
-## 자습실 신청 & 잔류 신청 확인
+### 자습실 신청 & 잔류 신청 확인
 - 학생들이 자습실을 신청하거나 주말 잔류 신청 여부를 확인 및 관리할 수 있어요.
 ![image](https://github.com/team-aliens/DMS/assets/103497968/d4658aba-c48e-4257-87a5-c8c84891a37b)
 
-## 외출 신청 관리 & 상 벌점 부여
+### 외출 신청 관리 & 상 벌점 부여
 - 학생들이 신청한 외출 현황을 관리할 수 있어요.
 - 학생들에게 상 벌점을 부여할 수 있어요.
 ![image](https://github.com/team-aliens/DMS/assets/103497968/68de2fe6-5c37-4fe4-9bf3-08c06620f451)
+
+## 명령어
+### 시작하기
+```
+yarn
+yarn install
+```
+### 개발 서버 실행하기
+```
+yarn workspace @service/admin dev
+````
+### 개발 wiki 바로가기
+> https://github.com/team-aliens/DMS-Frontend/wiki

package.json

@@ -24,6 +24,7 @@
         "postpublish": "pinst --enable"
     },
     "dependencies": {
-        "@team-aliens/design-system": "^1.5.0"
+        "@team-aliens/design-system": "^1.5.0",
+        "react-slick": "^0.30.2"
     }
 }

services/admin/package.json

@@ -61,7 +61,7 @@
   "dependencies": {
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-query-devtools": "^4.29.12",
-    "@team-aliens/design-system": "^1.4.11",
+    "@team-aliens/design-system": "^1.5.2",
     "@types/styled-components": "^5.1.26",
     "axios": "^1.1.3",
     "core-js": "^3.24.1",
@@ -73,6 +73,7 @@
     "react-dom": "^18.2.0",
     "react-outside-click-handler": "^1.3.0",
     "react-router-dom": "^6.4.2",
+    "react-slick": "^0.30.2",
     "styled-components": "^5.3.6",
     "styled-normalize": "^8.0.7",
     "zustand": "^4.3.8"

services/admin/src/apis/outing/index.ts

@@ -9,9 +9,10 @@ import { getFileNameFromContentDisposition } from '@/utils/decoder';
 import { useToast } from '@/hooks/useToast';
 import {
   OutingListExcelQueryStringType,
-  OutingTypeReqeustType,
+  OutingTypeRequestType,
+  EditOutingRequestType,
+  SettingOutingRequestType,
 } from './request';
-import { EditOutingRequestType, SettingOutingRequestType } from './request';
 import { DAY } from '../remains';
 
 const router = '/outings';
@@ -48,14 +49,16 @@ export const updateOutingApplicationStatus = async (
   outingApplicationId: string,
   outing_status: OutingStatusType,
 ) => {
-  return await instance.patch(
-    `${router}/${outingApplicationId}?outing_status=${outing_status}`,
-  );
+  return await instance
+    .patch(`${router}/${outingApplicationId}?outing_status=${outing_status}`)
+    .then(() => {
+      window.location.reload();
+    });
 };
 
 /** 외출 유형 조회 */
 export const getOutingType = async () => {
-  const { data } = await instance.get<Promise<OutingTypeReqeustType>>(
+  const { data } = await instance.get<Promise<OutingTypeRequestType>>(
     `${router}/types`,
   );
   return data;
@@ -150,6 +153,15 @@ export const deleteOutingApplicationTime = async (
 };
 
 /** 외출 가능 시간 조회 */
-export const getOutingApplicationTime = async (dayOfWeek: DAY) => {
+export const getOutingApplicationTime = async (dayOfWeek: DAY | string) => {
   return await instance.get(`${router}/available-time?dayOfWeek=${dayOfWeek}`);
 };
+
+/** 외출 가능 시간 활성 여부 변경 */
+export const updateOutingApplicationAction = async (
+  outingAvailableTimeId: string,
+) => {
+  return await instance.patch(
+    `${router}/available-time/toggle/${outingAvailableTimeId}`,
+  );
+};

services/admin/src/apis/outing/request.ts

@@ -1,6 +1,6 @@
 import { DAY } from '../remains';
 
-export interface ApplyOutingReqeustType {
+export interface ApplyOutingRequestType {
   student_name?: string;
   date: string;
 }
@@ -10,21 +10,21 @@ export interface OutingListExcelQueryStringType {
   endDates: string;
 }
 
-export interface OutingTypeReqeustType {
+export interface OutingTypeRequestType {
   titles: string[];
 }
 
-export interface AddOutingTypeReqeust {
+export interface AddOutingTypeRequest {
   outing_list_type_search_name?: string;
   title: string;
 }
 
-export interface SearchOutingTypeReqeust {
+export interface SearchOutingTypeRequest {
   outing_list_type: string;
 }
 
 export interface SettingOutingRequestType {
-  day_of_week: DAY;
+  day_of_week: string;
   outing_time: string;
   arrival_time: string;
 }

services/admin/src/apis/studyRooms/index.ts

@@ -64,7 +64,6 @@ export const useCreateStudyRoom = (body: CreateStudyRoomRequest) => {
       },
       onError: (error: unknown) => {
         const customErr = error as CustomError;
-        console.log(customErr.response.data.field_error);
 
         if (customErr.response.data) {
           switch (customErr.response.status) {

services/admin/src/components/modals/OutingDetailInfoModal.tsx

@@ -3,25 +3,23 @@ import styled from 'styled-components';
 import { OutingInfoWrapper } from '../outings/OutingDataInfo';
 import { OutingStudentList } from '../main/DetailBox/OutingStudentList';
 import { useModal } from '@/hooks/useModal';
-import { SelectedModalType } from '@/context/modal';
 import { useNavigate } from 'react-router-dom';
 import { useParams } from 'react-router-dom';
 import { useOutingApplicationDetail } from '@/hooks/useOutingApi';
-import { fetchOutingApplicationDetail } from '@/apis/outing';
+import { Dispatch, SetStateAction } from 'react';
 
 interface PropsType {
   tagColor: string;
   tagBackGroundColor: string;
   text: string;
-  SelectedModalType?: SelectedModalType;
 }
 
 export function OutingDetailInfoModal({
   tagColor,
   tagBackGroundColor,
   text,
 }: PropsType) {
-  const { closeModal, selectModal, modalState } = useModal();
+  const { closeModal, selectModal } = useModal();
   const { id } = useParams();
   const navigate = useNavigate();
   const { data: outingDetailInfo } = useOutingApplicationDetail(id);
@@ -72,12 +70,12 @@ export function OutingDetailInfoModal({
       <_OutingStudentListWrapper>
         <OutingStudentList detailInfoData={outingDetailInfo} />
       </_OutingStudentListWrapper>
-      <_OutingReasonWrapper>
+      <div>
         <Text size="bodyM" color="gray6">
           사유
         </Text>
         <ReasonWrapper>{outingDetailInfo?.reason}</ReasonWrapper>
-      </_OutingReasonWrapper>
+      </div>
     </Modal>
   );
 }
@@ -90,8 +88,6 @@ const _OutingStudentListWrapper = styled.div`
   height: 150px;
 `;
 
-const _OutingReasonWrapper = styled.div``;
-
 const OutingInfoContainer = styled.div`
   margin-bottom: 15px;
 `;

services/admin/src/components/modals/OutingListExcel.tsx

@@ -49,7 +49,7 @@ export default function OutingListExcel({ todayDate }: IProps) {
   const startDateInput = `${timeState.startYear}${timeState.startMonth}${timeState.startDays}`;
   const endDateInput = `${timeState.endYear}${timeState.endMonth}${timeState.endDays}`;
 
-  const startDate = regexFunction(startDateInput) || '2024-04-01';
+  const startDate = regexFunction(startDateInput) || '2024-06-01';
   const endDate = regexFunction(endDateInput) || todayDate;
 
   const outingListExcel = useGetOutingListExcel({
@@ -69,7 +69,7 @@ export default function OutingListExcel({ todayDate }: IProps) {
       inputList={[
         <>
           <Text size="bodyS" color="error">
-            값을 입력하지 않으면 4월 1일 ~ <strong>오늘 날짜</strong>로 입력
+            값을 입력하지 않으면 6월 1일 ~ <strong>설정한 날짜</strong>로 입력
             됩니다.
           </Text>
           <_TimeWrapper>
@@ -165,5 +165,5 @@ const _TimeWrapper = styled.div`
 
 const _DateWrapper = styled.div`
   position: absolute;
-  top: 515px;
+  top: 500px;
 `;

services/admin/src/components/modals/PressTimeButton.tsx

@@ -27,13 +27,11 @@ export function TimePressButton({
     setOnPress(true);
     sliceTime();
     setSelect([...select, timeSlotId]);
-    console.log(select);
   };
 
   const unPush = () => {
     setOnPress(false);
     setSelect(select.filter((id) => id !== timeSlotId));
-    console.log(select);
   };
 
   const sliceTime = () => {

services/admin/src/components/modals/ViewOutingTypeModal.tsx

@@ -11,9 +11,9 @@ import { useModal } from '@/hooks/useModal';
 import styled from 'styled-components';
 import { useForm } from '@/hooks/useForm';
 import {
-  OutingTypeReqeustType,
-  SearchOutingTypeReqeust,
-  AddOutingTypeReqeust,
+  OutingTypeRequestType,
+  SearchOutingTypeRequest,
+  AddOutingTypeRequest,
 } from '@/apis/outing/request';
 import { useAddOutingType } from '@/apis/outing';
 import { useToast } from '@/hooks/useToast';
@@ -23,7 +23,7 @@ import { OutingItemBox } from '../main/DetailBox/OutingItemBox';
 interface PropsType {
   selectedTag: string;
   setSelectedTag: Dispatch<SetStateAction<string>>;
-  outingTypeList: OutingTypeReqeustType;
+  outingTypeList: OutingTypeRequestType;
   refetchOutingTypeList: () => void;
 }
 
@@ -50,13 +50,13 @@ export function ViewOutingTypeModal({
     state: addTypeList,
     setState: setAddTypeList,
     onHandleChange,
-  } = useForm<AddOutingTypeReqeust>({
+  } = useForm<AddOutingTypeRequest>({
     outing_list_type_search_name: '',
     title: '',
   });
 
   const { state: searchType, onHandleChange: searchHandleChange } =
-    useForm<SearchOutingTypeReqeust>({
+    useForm<SearchOutingTypeRequest>({
       outing_list_type: '',
     });
 

services/admin/src/components/outings/DeleteOutingTime.tsx

@@ -22,6 +22,7 @@ export default function DeleteOutingTime({
           message: '외출 시간이 성공적으로 삭제되었습니다.',
         });
         closeModal();
+        window.location.reload();
       })
       .catch(() => {
         toastDispatch({

services/admin/src/components/outings/MemberBox.tsx

@@ -1,8 +1,5 @@
 import styled from 'styled-components';
-import {
-  OutingApplicationsResponse,
-  OutingApplication,
-} from '@/apis/outing/response';
+import { OutingApplication } from '@/apis/outing/response';
 import { Text } from '@team-aliens/design-system';
 import { useNavigate } from 'react-router-dom';
 import { useModal } from '@/hooks/useModal';
@@ -18,6 +15,7 @@ export function MemberBox({
   arrival_time,
   outing_type,
   student_name,
+  outing_companion_count,
 }: PropsType) {
   const navigate = useNavigate();
   const { selectModal } = useModal();
@@ -35,7 +33,15 @@ export function MemberBox({
       >
         <_DetailWrapper>
           <Text className="name" size="bodyM" margin={['right', 22]}>
-            {student_name}
+            <>
+              {outing_companion_count !== 0 ? (
+                <>
+                  {student_name} 외 {outing_companion_count}명
+                </>
+              ) : (
+                student_name
+              )}
+            </>
           </Text>
           <Text
             className="outing-type"