Merge branch 'feat/COT-102_handle_attendance_api_change' into release

IT-Cotato · Dec 26, 2024 · e7b18c4 · e7b18c4
2 parents 6fc9360 + 4570815
commit e7b18c4
Show file tree

Hide file tree

Showing 16 changed files with 518 additions and 377 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "cotato-openapi-clients": "2.241122.0",
+    "cotato-openapi-clients": "2.241122.0-attendance.2",
     "craco-alias": "^3.0.1",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",

diff --git a/src/components/CotatoTimePicker.tsx b/src/components/CotatoTimePicker.tsx
@@ -11,37 +11,49 @@ import { useTheme } from 'styled-components';
 //
 
 interface CotatoTimePickerProps {
+  readonly?: boolean;
   date: Date;
-  onDateChange: (date: Date) => void;
+  onDateChange?: (date: Date) => void;
 }
 
 //
 //
 //
 
-const CotatoTimePicker: React.FC<CotatoTimePickerProps> = ({ date, onDateChange }) => {
+const CotatoTimePicker: React.FC<CotatoTimePickerProps> = ({
+  readonly = false,
+  date,
+  onDateChange,
+}) => {
   const theme = useTheme();
 
   const handleDateChange = (newDate: Dayjs | null) => {
+    if (readonly || !onDateChange) {
+      return;
+    }
+
     onDateChange(newDate?.toDate() || date);
   };
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ko">
       <TimePicker
+        readOnly={readonly}
         value={dayjs(date)}
         onChange={handleDateChange}
         sx={{
-          ['& .MuiFormControl-root']: { width: '10rem' },
+          ['& .MuiFormControl-root']: {
+            width: '10rem',
+          },
           ['& .MuiInputBase-root']: {
             border: `1px solid ${theme.colors.gray60}`,
             borderRadius: '0.5rem',
-            background: theme.colors.common.white_const,
+            background: readonly ? theme.colors.gray20 : theme.colors.common.white_const,
             width: '9rem',
           },
           ['& .MuiInputBase-input']: {
             fontFamily: 'Pretendard',
-            color: theme.colors.gray90,
+            color: readonly ? theme.colors.gray40 : theme.colors.gray90,
             fontSize: '0.875rem',
             fontWeight: 300,
             padding: '0.5rem 0.75rem',
@@ -51,6 +63,15 @@ const CotatoTimePicker: React.FC<CotatoTimePickerProps> = ({ date, onDateChange
             border: 'none',
           },
         }}
+        slotProps={{
+          inputAdornment: {
+            sx: {
+              ['& .MuiSvgIcon-root']: {
+                fill: readonly ? theme.colors.gray40 : theme.colors.gray60,
+              },
+            },
+          },
+        }}
       />
     </LocalizationProvider>
   );

diff --git a/src/components/SearchLocation/SearchLocationModal.tsx b/src/components/SearchLocation/SearchLocationModal.tsx
@@ -12,25 +12,26 @@ import { IconButton } from '@mui/material';
 //
 //
 
-// interface Place {
-//   place_name: string;
-//   address_name: string;
-//   phone: string;
-//   x: string;
-//   y: string;
-// }
-
 interface SearchLocationModalProps {
+  width?: string;
+  height?: string;
   setIsSearchModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setLocationName?: React.Dispatch<React.SetStateAction<string>>;
   onPlaceChange?: (place: Place) => void;
 }
 
+interface BackgroundProps {
+  $width: string;
+  $height: string;
+}
+
 //
 //
 //
 
 const SearchLocationModal: React.FC<SearchLocationModalProps> = ({
+  width = '34rem',
+  height = '38rem',
   setIsSearchModalOpen,
   setLocationName,
   onPlaceChange,
@@ -54,7 +55,7 @@ const SearchLocationModal: React.FC<SearchLocationModalProps> = ({
   }
 
   return (
-    <Background>
+    <Background $width={width} $height={height}>
       <Modal>
         <Header>
           <StyledIconButton onClick={() => setIsSearchModalOpen(false)}>
@@ -110,28 +111,29 @@ const SearchLocationModal: React.FC<SearchLocationModalProps> = ({
 //
 //
 
-const Background = styled.div`
+const Background = styled.div<BackgroundProps>`
   background: rgba(0, 0, 0, 0);
-  width: 100vw;
-  height: 100vh;
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
   overflow: hidden;
   box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 210;
 `;
 
 const Modal = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: absolute;
-  width: 34rem;
-  height: 38rem;
+  width: 100%;
+  height: 100%;
   border-radius: 1.725rem;
   background-color: ${({ theme }) => theme.colors.common.white_const};
   padding: 2.5rem 2.25rem;
+
   h3 {
     width: 100%;
     text-align: center;

diff --git a/src/components/attendance/attedance-card/AttendanceCardStatus.tsx b/src/components/attendance/attedance-card/AttendanceCardStatus.tsx
@@ -5,104 +5,92 @@ import { ReactComponent as AbsentIcon } from '@assets/attendance_absent_icon.svg
 import { ReactComponent as OnlineIcon } from '@assets/attendance_online_icon.svg';
 import CotatoIcon from '@components/CotatoIcon';
 import {
-  CotatoAttendanceResponseOpenStatusEnum,
-  CotatoAttendanceRecordResponseResultEnum,
+  CotatoMemberAttendResponseOpenStatusEnum,
+  CotatoMemberAttendResponseResultEnum,
 } from 'cotato-openapi-clients';
 
 //
 //
 //
 
 interface AttendaceStatusProps {
-  isOpened?: CotatoAttendanceResponseOpenStatusEnum;
-  attendanceResult?: CotatoAttendanceRecordResponseResultEnum | null;
-}
-
-enum AttendanceStatus {
-  Before,
-  Open,
-  PresentOffline,
-  PresentOnline,
-  LateOffline,
-  LateOnline,
-  Absent,
+  openStatus?: CotatoMemberAttendResponseOpenStatusEnum;
+  attendanceResult?: CotatoMemberAttendResponseResultEnum | null;
 }
 
 //
 //
 //
 
-const AttendaceCardStatus: React.FC<AttendaceStatusProps> = ({ isOpened, attendanceResult }) => {
+const AttendaceCardStatus: React.FC<AttendaceStatusProps> = ({ openStatus, attendanceResult }) => {
   const theme = useTheme();
 
-  /**
-   *
-   */
-  const getAttendanceStatus = () => {
-    // if (isOpened === AttendResponseIsOpenedEnum.Before) {
-    if (isOpened === CotatoAttendanceResponseOpenStatusEnum.Before) {
-      return AttendanceStatus.Before;
+  const getStatusStyle = () => {
+    if (openStatus === CotatoMemberAttendResponseOpenStatusEnum.Before) {
+      return {
+        backgroundColor: theme.colors.gray40,
+        icon: null,
+        textColor: theme.colors.common.white_const,
+        text: '출석예정',
+      };
+    } else if (
+      openStatus === CotatoMemberAttendResponseOpenStatusEnum.Open &&
+      attendanceResult === null
+    ) {
+      return {
+        backgroundColor: theme.colors.primary80,
+        icon: null,
+        textColor: theme.colors.common.white_const,
+        text: '출석중',
+      };
+    } else if (attendanceResult === CotatoMemberAttendResponseResultEnum.Offline) {
+      return {
+        backgroundColor: theme.colors.gray10,
+        icon: <CotatoIcon icon="user-check-solid" color={(theme) => theme.colors.sub3[40]} />,
+        textColor: theme.colors.common.black_const,
+        text: '출석',
+      };
+    } else if (attendanceResult === CotatoMemberAttendResponseResultEnum.Online) {
+      return {
+        backgroundColor: theme.colors.gray10,
+        icon: <OnlineIcon />,
+        textColor: theme.colors.common.black_const,
+        text: '출석',
+      };
+    } else if (attendanceResult === CotatoMemberAttendResponseResultEnum.Late) {
+      return {
+        backgroundColor: theme.colors.gray10,
+        icon: (
+          <CotatoIcon icon="bell-exclaimation-solid" color={(theme) => theme.colors.secondary80} />
+        ),
+        textColor: theme.colors.common.black_const,
+        text: '지각',
+      };
     } else if (
-      isOpened === CotatoAttendanceResponseOpenStatusEnum.Open &&
+      openStatus === CotatoMemberAttendResponseOpenStatusEnum.Closed &&
       attendanceResult === null
     ) {
-      return AttendanceStatus.Open;
-    } else if (attendanceResult === CotatoAttendanceRecordResponseResultEnum.Offline) {
-      return AttendanceStatus.PresentOffline;
-    } else if (attendanceResult === CotatoAttendanceRecordResponseResultEnum.Online) {
-      return AttendanceStatus.PresentOnline;
-    } else if (attendanceResult === CotatoAttendanceRecordResponseResultEnum.Late) {
-      return AttendanceStatus.LateOffline;
+      return {
+        backgroundColor: theme.colors.gray10,
+        icon: null,
+        textColor: theme.colors.common.black_const,
+        text: '미입력',
+      };
+    } else if (attendanceResult === CotatoMemberAttendResponseResultEnum.Absent) {
+      return {
+        backgroundColor: theme.colors.gray10,
+        icon: <AbsentIcon />,
+        textColor: theme.colors.common.black_const,
+        text: '결석',
+      };
     }
 
-    return AttendanceStatus.Absent;
-  };
-
-  const getStatusStyle = () => {
-    switch (getAttendanceStatus()) {
-      case AttendanceStatus.Before:
-        return {
-          backgroundColor: theme.colors.gray40,
-          icon: null,
-          textColor: theme.colors.common.white_const,
-          text: '출석예정',
-        };
-      case AttendanceStatus.Open:
-        return {
-          backgroundColor: theme.colors.primary80,
-          icon: null,
-          textColor: theme.colors.common.white_const,
-          text: '출석중',
-        };
-      case AttendanceStatus.PresentOffline:
-        return {
-          backgroundColor: theme.colors.gray10,
-          icon: <CotatoIcon icon="user-check-solid" color={(theme) => theme.colors.sub3[40]} />,
-          textColor: theme.colors.common.black_const,
-          text: '출석',
-        };
-      case AttendanceStatus.PresentOnline:
-        return {
-          backgroundColor: theme.colors.gray10,
-          icon: <OnlineIcon />,
-          textColor: theme.colors.common.black_const,
-          text: '출석',
-        };
-      case AttendanceStatus.LateOffline:
-        return {
-          backgroundColor: theme.colors.gray10,
-          icon: <CotatoIcon icon="user-check-solid" color={(theme) => theme.colors.sub3[40]} />,
-          textColor: theme.colors.common.black_const,
-          text: '출석',
-        };
-      case AttendanceStatus.Absent:
-        return {
-          backgroundColor: theme.colors.gray10,
-          icon: <AbsentIcon />,
-          textColor: theme.colors.common.black_const,
-          text: '결석',
-        };
-    }
+    return {
+      backgroundColor: '',
+      icon: null,
+      textColor: '',
+      text: '',
+    };
   };
 
   const { backgroundColor, icon, textColor, text } = getStatusStyle();

diff --git a/src/components/attendance/attedance-card/AttendanceGridCard.tsx b/src/components/attendance/attedance-card/AttendanceGridCard.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import {
-  CotatoAttendanceRecordResponseResultEnum,
-  CotatoMemberAttendResponse,
-} from 'cotato-openapi-clients';
+import { CotatoMemberAttendResponse } from 'cotato-openapi-clients';
 import { Stack } from '@mui/material';
 import AttendanceCardStatus from '@components/attendance/attedance-card/AttendanceCardStatus';
 import { media } from '@theme/media';
 import dayjs from 'dayjs';
-import CotatoIcon from '@components/CotatoIcon';
 
 //
 //
@@ -31,21 +27,15 @@ const AttendanceGridCard: React.FC<AttendanceCardProps> = ({
 }) => {
   return (
     <Container onClick={() => onClick(attendance)}>
-      {attendance.attendanceResult === CotatoAttendanceRecordResponseResultEnum.Late && (
-        <StyledLateIcon
-          icon="bell-exclaimation-solid"
-          color={(theme) => theme.colors.secondary80}
-        />
-      )}
       <Stack gap="0.25rem">
         <DateText>{dayjs(attendance.sessionDateTime).format('YYYY.MM.DD')}</DateText>
         <TitleText>
           {generationNumber}기 {attendance.sessionTitle}
         </TitleText>
       </Stack>
       <AttendanceCardStatus
-        isOpened={attendance.isOpened}
-        attendanceResult={attendance.attendanceResult}
+        openStatus={attendance.openStatus}
+        attendanceResult={attendance.result}
       />
     </Container>
   );
@@ -78,14 +68,6 @@ const Container = styled.div`
   `}
 `;
 
-const StyledLateIcon = styled(CotatoIcon)`
-  position: absolute;
-  top: 0.625rem;
-  right: 0.625rem;
-  width: 1rem;
-  height: 1rem;
-`;
-
 const DateText = styled.p`
   margin: 0;
   font-family: Ycomputer;