Merge branch 'dev'

package.json

@@ -22,5 +22,8 @@
         "postinstall": "husky install",
         "prepublishOnly": "pinst --disable",
         "postpublish": "pinst --enable"
+    },
+    "dependencies": {
+        "@team-aliens/design-system": "^1.5.0"
     }
 }

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

@@ -12,6 +12,7 @@ import {
   OutingTypeReqeustType,
 } from './request';
 import { EditOutingRequestType, SettingOutingRequestType } from './request';
+import { DAY } from '../remains';
 
 const router = '/outings';
 
@@ -147,3 +148,8 @@ export const deleteOutingApplicationTime = async (
     `${router}/available-time/${outingAvailableTimeId}`,
   );
 };
+
+/** 외출 가능 시간 조회 */
+export const getOutingApplicationTime = async (dayOfWeek: DAY) => {
+  return await instance.get(`${router}/available-time?dayOfWeek=${dayOfWeek}`);
+};

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

@@ -1,3 +1,5 @@
+import { DAY } from '../remains';
+
 export interface ApplyOutingReqeustType {
   student_name?: string;
   date: string;
@@ -22,7 +24,7 @@ export interface SearchOutingTypeReqeust {
 }
 
 export interface SettingOutingRequestType {
-  day_of_week: Week;
+  day_of_week: DAY;
   outing_time: string;
   arrival_time: string;
 }
@@ -31,13 +33,3 @@ export interface EditOutingRequestType {
   outing_time: string;
   arrival_time: string;
 }
-
-export type Week =
-  | 'MONDAY'
-  | 'TUESDAY'
-  | 'WEDNESDAY'
-  | 'THURSDAY'
-  | 'FRIDAY'
-  | 'SATURDAY'
-  | 'SUNDAY'
-  | 'COMMON';

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

@@ -1,4 +1,5 @@
 import { OutingStatusType } from '.';
+import { DAY } from '../remains';
 
 export interface Student {
   id: string;
@@ -23,12 +24,21 @@ export interface OutingApplication {
   outing_application_id: string;
   student_name: string;
   outing_type: string;
-  outing_status: OutingStatusType;
-  outing_companion_count: number;
+  outing_status?: OutingStatusType;
+  outing_companion_count?: number;
   outing_time: string;
   arrival_time: string;
 }
 
 export interface OutingApplicationsResponse {
   outings: OutingApplication[];
 }
+
+export interface OutingApplicationTimeResponse {
+  id: string;
+  school_id: string;
+  outing_time: string;
+  arrival_time: string;
+  enabled: boolean;
+  day_of_week: DAY;
+}

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

@@ -1,47 +1,60 @@
 import styled from 'styled-components';
-import { OutingApplication } from '@/apis/outing/response';
+import {
+  OutingApplicationsResponse,
+  OutingApplication,
+} from '@/apis/outing/response';
 import { Text } from '@team-aliens/design-system';
 import { useNavigate } from 'react-router-dom';
-import { OutingStatusType } from '@/apis/outing/index';
-import { useRef } from 'react';
+import { useModal } from '@/hooks/useModal';
 
-interface PropsType {
-  outingApplyList: OutingApplication[];
+interface PropsType extends OutingApplication {
+  isReqeustModal?: boolean;
 }
 
-export function MemberBox({ outingApplyList }: PropsType) {
+export function MemberBox({
+  isReqeustModal,
+  outing_application_id,
+  outing_time,
+  arrival_time,
+  outing_type,
+  student_name,
+}: PropsType) {
   const navigate = useNavigate();
+  const { selectModal } = useModal();
+
+  const openOutingApplyModal = () => selectModal('OUTING_REQUESTED');
+  const openDoneModal = () => selectModal('OUTING_DONE');
+
+  const modalPropsType = isReqeustModal ? openOutingApplyModal : openDoneModal;
 
   return (
-    <_Wrapper>
-      {outingApplyList?.map((item) => (
-        <InfoContainer
-          key={item.outing_application_id}
-          onClick={() => navigate(`/outing/${item.outing_application_id}`)}
-        >
-          <_DetailWrapper>
-            <Text className="name" size="bodyM" margin={['right', 22]}>
-              {item.student_name}
-            </Text>
-            <Text
-              className="outing-type"
-              size="bodyS"
-              color="gray5"
-              margin={['right', 70]}
-            >
-              {item.outing_type}
-            </Text>
-            <Text className="time" size="bodyS">
-              {item.outing_time} ~ {item.arrival_time}
-            </Text>
-          </_DetailWrapper>
-        </InfoContainer>
-      ))}
+    <_Wrapper onClick={modalPropsType}>
+      <InfoContainer
+        key={outing_application_id}
+        onClick={() => navigate(`/outing/${outing_application_id}`)}
+      >
+        <_DetailWrapper>
+          <Text className="name" size="bodyM" margin={['right', 22]}>
+            {student_name}
+          </Text>
+          <Text
+            className="outing-type"
+            size="bodyS"
+            color="gray5"
+            margin={['right', 70]}
+          >
+            {outing_type}
+          </Text>
+          <Text className="time" size="bodyS">
+            {outing_time} ~ {arrival_time}
+          </Text>
+        </_DetailWrapper>
+      </InfoContainer>
     </_Wrapper>
   );
 }
 
-const _Wrapper = styled.li`
+const _Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 7px;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useForm } from '@/hooks/useForm';
 import { useToast } from '@/hooks/useToast';
 import { StudyTimeSlotsResponse } from '@/apis/studyRooms/response';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { hourToArray, minToArray } from '@/utils/timeToArray';
 import { getTextWithDay } from '@/utils/translate';
 import { useGetRemainTime } from '@/hooks/useRemainApi';

services/admin/src/pages/outing/Header.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight } from '@/assets';
 import { useModal } from '@/hooks/useModal';
 import OutingListExcel from '@/components/modals/OutingListExcel';
 import { Link } from 'react-router-dom';
+
 interface HeaderProps {
   date: string;
   onArrowClick: (increase: number) => void;
@@ -17,14 +18,6 @@ const Header = ({ date, onArrowClick }: HeaderProps) => {
   const openOutingListType = () => selectModal('OUTING_TYPE');
   const { toastDispatch } = useToast();
 
-  const developmentClick = () => {
-    toastDispatch({
-      actionType: 'APPEND_TOAST',
-      toastType: 'INFORMATION',
-      message: '개발 중인 기능입니다.',
-    });
-  };
-
   return (
     <_Container>
       <_DateBox>
@@ -42,7 +35,9 @@ const Header = ({ date, onArrowClick }: HeaderProps) => {
           외출 유형
         </Button>
         <Divider height={43} width={2} margin="0" />
-        <Button onClick={developmentClick}>외출 시간 설정</Button>
+        <Link to={'/outing/time'}>
+          <Button>외출 시간 설정</Button>
+        </Link>
       </_ButtonWrapper>
       {modalState.selectedModal === 'OUTING_EXCEL' ? (
         <OutingListExcel todayDate={date} />