Merge pull request #720 from woowacourse-teams/develop

Release v1.8.1
woowacourse-teams · Oct 26, 2022 · 9d1d8e1 · 9d1d8e1
2 parents 5a52f81 + 7d60cce
commit 9d1d8e1
Show file tree

Hide file tree

Showing 24 changed files with 258 additions and 119 deletions.
diff --git a/README.md b/README.md
@@ -7,13 +7,13 @@
 [![티타임 소개영상](http://img.youtube.com/vi/R8y-4GqqSg0/0.jpg)](https://youtu.be/R8y-4GqqSg0)<br>
 ⬆️ 티타임 소개 영상 보러가기<br><br>
 
-|스케줄 등록|예약하기|
+|예약하기|질문지 작성|
 |---|---|
-|![aRHRNGbqVSnKssVF2PnVSVCDzMmoHRoHTYl3PBmNlXSJ8rh9TIAM3m06lbcFEtHlF1bAxyFe2gkgZDQs6mc4mVYbqYyRsUYkh9vmy8HJ5w](https://user-images.githubusercontent.com/60432062/196632784-5c153630-6676-445e-8e5a-4e506845ed5c.gif)|![S2rlanEzVoBhhNWdQ2D-e9mhnCnrwQl7GvQvckVZKm4UVWuE3sq-pfJFvcDZB0IDTmI1_pqMyXI9vVHZ_bTGsvOJn8jKUo93KgHteST1ig](https://user-images.githubusercontent.com/60432062/196633002-204e05b1-ef89-4259-a82d-480a42731f00.gif)|
+|![S2rlanEzVoBhhNWdQ2D-e9mhnCnrwQl7GvQvckVZKm4UVWuE3sq-pfJFvcDZB0IDTmI1_pqMyXI9vVHZ_bTGsvOJn8jKUo93KgHteST1ig](https://user-images.githubusercontent.com/60432062/196633002-204e05b1-ef89-4259-a82d-480a42731f00.gif)|![sK5Gy2E9y0BjmpTG-RKwfLTrSPqZ-aaxGesEmfr7yy9F7n4EvFzrzx4rGnNvf1iHjtHLPrGfnJKf1SYP9mZWMS5PVCdeta7MBcKUpvQU5A](https://user-images.githubusercontent.com/60432062/196633305-d4b72c43-eabe-4333-be00-40a952e9571b.gif)|
 
-|질문지 작성|일정 관리|
+|스케줄 등록|일정 관리|
 |---|---|
-|![sK5Gy2E9y0BjmpTG-RKwfLTrSPqZ-aaxGesEmfr7yy9F7n4EvFzrzx4rGnNvf1iHjtHLPrGfnJKf1SYP9mZWMS5PVCdeta7MBcKUpvQU5A](https://user-images.githubusercontent.com/60432062/196633305-d4b72c43-eabe-4333-be00-40a952e9571b.gif)|![imCmlf3extrTxRytSDEj0pKyYE-YEiFx_VN8oGn7XeDb4QsAVD-DEjWCdUKyx_keJiltim5Hr3VuhoInXqILmKmE9SKr39Exi-Dd9XGKgA](https://user-images.githubusercontent.com/60432062/196633487-6faabe26-343d-4211-8723-720fc422287a.gif)|
+|![aRHRNGbqVSnKssVF2PnVSVCDzMmoHRoHTYl3PBmNlXSJ8rh9TIAM3m06lbcFEtHlF1bAxyFe2gkgZDQs6mc4mVYbqYyRsUYkh9vmy8HJ5w](https://user-images.githubusercontent.com/60432062/196632784-5c153630-6676-445e-8e5a-4e506845ed5c.gif)|![imCmlf3extrTxRytSDEj0pKyYE-YEiFx_VN8oGn7XeDb4QsAVD-DEjWCdUKyx_keJiltim5Hr3VuhoInXqILmKmE9SKr39Exi-Dd9XGKgA](https://user-images.githubusercontent.com/60432062/196633487-6faabe26-343d-4211-8723-720fc422287a.gif)|
 <br>
 
 # 기술 스택 🛠
@@ -24,7 +24,7 @@
 # 인프라 구조 🎢
 |Product|CI/CD|
 |---|---|
-|![image](https://user-images.githubusercontent.com/60432062/196639115-095e362d-e27b-4dd7-aa37-5333af326da1.png)|![image-2](https://user-images.githubusercontent.com/60432062/196639106-2735aec4-f53b-4e3c-bc6b-fa11086db7c0.png)|
+|<img width="500" alt="image" src="https://user-images.githubusercontent.com/60432062/197088620-df54e8e3-805a-4550-844c-45c7e1c03e3f.png">|<img width="500" alt="image" src="https://user-images.githubusercontent.com/60432062/196639106-2735aec4-f53b-4e3c-bc6b-fa11086db7c0.png">|
 <br>
 
 # 팀원들 👩‍💻🧑‍💻

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -23,6 +23,7 @@ const HistorySheet = lazy(() => import('@pages/HistorySheet'));
 const CrewHistory = lazy(() => import('@pages/CrewHistory'));
 const CoachHistory = lazy(() => import('@pages/CoachHistory'));
 const CoachProfile = lazy(() => import('@pages/CoachProfile'));
+const Error = lazy(() => import('@pages/Error'));
 
 const App = () => {
   return (
@@ -35,6 +36,7 @@ const App = () => {
               <Route path={ROUTES.HOME} element={<Home />} />
               <Route path={ROUTES.CERTIFICATION} element={<Certification />} />
               <Route path="/*" element={<NotFound />} />
+              <Route path={ROUTES.ERROR} element={<Error />} />
               <Route element={<AuthRoute role="CREW" />}>
                 <Route path={ROUTES.CREW} element={<CrewMain />} />
                 <Route path={ROUTES.CREW_HISTORY} element={<CrewHistory />} />

diff --git a/front/src/components/ErrorMessage/index.tsx b/front/src/components/ErrorMessage/index.tsx
@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+
+import { UserStateContext } from '@context/UserProvider';
+import { ROUTES } from '@constants/index';
+import NotFoundImage from '@assets/not-found.png';
+import * as S from './styles';
+
+interface ErrorMessageProps {
+  title: string;
+  description: string;
+}
+
+const ErrorMessage = ({ title, description }: ErrorMessageProps) => {
+  const { userData } = useContext(UserStateContext);
+
+  return (
+    <S.Container>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <img src={NotFoundImage} />
+      <S.HomeLink to={userData ? `/${userData.role.toLowerCase()}` : ROUTES.HOME}>
+        홈으로 이동하기
+      </S.HomeLink>
+    </S.Container>
+  );
+};
+
+export default ErrorMessage;
diff --git a/front/src/pages/NotFound/styles.ts → front/src/components/ErrorMessage/styles.ts b/front/src/pages/NotFound/styles.ts → front/src/components/ErrorMessage/styles.ts
@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-const Layout = styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -44,4 +44,4 @@ const HomeLink = styled(Link)`
   }
 `;
 
-export { Layout, HomeLink };
+export { Container, HomeLink };
diff --git a/front/src/components/Header/index.tsx b/front/src/components/Header/index.tsx
@@ -9,8 +9,9 @@ import useOutsideClick from '@hooks/useOutsideClick';
 import useBoolean from '@hooks/useBoolean';
 import { UserStateContext, UserDispatchContext } from '@context/UserProvider';
 import { SnackbarContext } from '@context/SnackbarProvider';
+import { logError } from '@utils/logError';
 import { logout } from '@api/auth';
-import { ROUTES, MAX_LENGTH } from '@constants/index';
+import { ROUTES, MAX_LENGTH, ERROR_MESSAGE } from '@constants/index';
 import { editCrewNickName } from '@api/crew';
 import * as S from './styles';
 
@@ -48,11 +49,13 @@ const Header = () => {
       closeModal();
     } catch (error) {
       if (error instanceof AxiosError) {
-        alert(error.response?.data?.message);
-        console.log(error);
+        alert(ERROR_MESSAGE.FAIL_NICKNAME_CHANGE);
+        logError(error);
         return;
       }
-      if (error instanceof Error) alert(error.message);
+      if (error instanceof Error) {
+        alert(error.message);
+      }
     } finally {
       setNickName('');
     }

diff --git a/front/src/components/ReservationTimeList/index.tsx b/front/src/components/ReservationTimeList/index.tsx
@@ -8,7 +8,7 @@ import * as S from './styles';
 interface ReservationTimeListProps {
   daySchedule: TimeSchedule[];
   selectedTimeId: number | null;
-  onClickTime: (id: number) => void;
+  onClickTime: (id: number, isPossible?: boolean) => void;
   onClickReservation: (scheduleId: number) => void;
 }
 
@@ -20,26 +20,26 @@ const ReservationTimeList = ({
 }: ReservationTimeListProps) => {
   return (
     <S.TimeListContainer>
-      {daySchedule.map((schedule, index) => {
-        const time = getHourMinutes(schedule.dateTime);
+      {daySchedule.map(({ id, isPossible, dateTime }, index) => {
+        const time = getHourMinutes(dateTime);
 
         return (
-          <Fragment key={schedule.id}>
-            <Conditional condition={selectedTimeId === schedule.id}>
+          <Fragment key={id}>
+            <Conditional condition={selectedTimeId === id}>
               <S.ReserveButtonWrapper>
                 <div>{time}</div>
-                <button onClick={() => onClickReservation(schedule.id)} autoFocus>
+                <button onClick={() => onClickReservation(id)} autoFocus>
                   예약하기
                 </button>
               </S.ReserveButtonWrapper>
             </Conditional>
 
-            <Conditional condition={selectedTimeId !== schedule.id}>
+            <Conditional condition={selectedTimeId !== id}>
               <S.ReservationTimeBox
-                aria-label={schedule.isPossible ? '' : `${time} 예약 불가`}
+                aria-label={isPossible ? '' : `${time} 예약 불가`}
                 autoFocus={index === 0}
-                isPossible={schedule.isPossible}
-                onClick={() => onClickTime(schedule.id)}
+                isPossible={isPossible}
+                onClick={() => onClickTime(id, isPossible)}
               >
                 {time}
               </S.ReservationTimeBox>

diff --git a/front/src/components/ScheduleTimeList/styles.ts b/front/src/components/ScheduleTimeList/styles.ts
@@ -70,7 +70,9 @@ const ButtonContainer = styled.div`
   }
 `;
 
-const CheckButton = styled.button``;
+const CheckButton = styled.button`
+  background-color: ${({ theme }) => theme.colors.GRAY_200};
+`;
 
 const ConfirmButton = styled.button`
   background-color: ${({ theme }) => theme.colors.BLUE_300};

diff --git a/front/src/components/Sheet/index.tsx b/front/src/components/Sheet/index.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import Textarea from '@components/Textarea';
 import { Sheets } from '@typings/domain';
-import { MAX_LENGTH } from '@constants/index';
+import { ERROR_MESSAGE, MAX_LENGTH } from '@constants/index';
 import * as S from './styles';
 
 interface SheetProps {
@@ -18,7 +18,7 @@ const Sheet = ({ title, sheets, onSubmit, isReadOnly }: SheetProps) => {
 
   const handleChangeContent = (e: React.ChangeEvent<HTMLTextAreaElement>, index: number) => {
     if (e.target.value.length > MAX_LENGTH.SHEET) {
-      alert('더 이상 작성할 수 없습니다.');
+      alert(ERROR_MESSAGE.EXCEED_TEXT_LENGTH);
       e.target.value = e.target.value.substring(0, MAX_LENGTH.SHEET);
     }
     setContents((prevContent) => {

diff --git a/front/src/constants/index.ts b/front/src/constants/index.ts
@@ -12,6 +12,7 @@ const ROUTES = {
   COACH_HISTORY: '/coach-history',
   COACH_PROFILE: '/coach-profile',
   CERTIFICATION: '/certification',
+  ERROR: '/error',
 };
 
 const DAY_OF_WEEKS = ['일', '월', '화', '수', '목', '금', '토'];
@@ -58,6 +59,18 @@ const ERROR_MESSAGE = {
   INVALID_TOKEN: '유효하지 않은 토큰입니다.',
   WRONG_TOKEN: '토큰이 잘못되었습니다.',
   NOT_EXIST_TOKEN: '헤더에 토큰이 존재하지 않습니다.',
+  EXCEED_TEXT_LENGTH: '더이상 작성할 수 없습니다. 글자수를 조정해주세요.',
+  FAIL_NICKNAME_CHANGE: '닉네임 변경이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_LOGIN: '에러가 발생했습니다. 다시 로그인해주세요.',
+  FAIL_APPROVE: '승인이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_COMPLETE_RESERVATION: '면담을 완료할 수 없습니다. 다시 시도해주세요.',
+  FAIL_REJECT_RESERVATION: '면담을 거절할 수 없습니다. 다시 시도해주세요.',
+  FAIL_CANCEL_RESERVATION: '면담을 취소할 수 없습니다. 다시 시도해주세요.',
+  FAIL_EDIT_PROFILE: '프로필 수정이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_REQUEST: '요청이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_SAVE: '저장이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_SUBMIT: '제출이 실패하였습니다. 다시 시도해주세요.',
+  FAIL_ENROLL_SCHEDULE: '스케줄 등록에 실패하였습니다. 다시 시도해주세요.',
 };
 
 export {

diff --git a/front/src/pages/Certification/index.tsx b/front/src/pages/Certification/index.tsx
@@ -5,7 +5,8 @@ import { AxiosError } from 'axios';
 import Loading from '@components/Loading';
 import { UserDispatchContext } from '@context/UserProvider';
 import { login } from '@api/auth';
-import { ROUTES } from '@constants/index';
+import { ERROR_MESSAGE, ROUTES } from '@constants/index';
+import { logError } from '@utils/logError';
 
 const Certification = () => {
   const navigate = useNavigate();
@@ -21,9 +22,9 @@ const Certification = () => {
         navigate(`/${userData.role.toLowerCase()}`, { replace: true });
       } catch (error) {
         if (error instanceof AxiosError) {
-          alert('에러가 발생했습니다. 다시 로그인해주세요.');
+          alert(ERROR_MESSAGE.FAIL_LOGIN);
           navigate(ROUTES.HOME, { replace: true });
-          console.log(error);
+          logError(error);
         }
       }
     })();

diff --git a/front/src/pages/CoachHistory/index.tsx b/front/src/pages/CoachHistory/index.tsx
@@ -8,6 +8,7 @@ import Filter from '@components/Filter';
 import { ROUTES } from '@constants/index';
 import { getCoachHistories } from '@api/coach';
 import type { CoachHistory as CoachHistoryType, CoachHistoryStatus } from '@typings/domain';
+import { logError } from '@utils/logError';
 import { theme } from '@styles/theme';
 import * as S from '../CrewHistory/styles';
 
@@ -58,8 +59,9 @@ const CoachHistory = () => {
         setHistoryList(data);
       } catch (error) {
         if (error instanceof AxiosError) {
-          alert(error.response?.data?.message);
-          console.log(error);
+          logError(error);
+          navigate(ROUTES.ERROR);
+          return;
         }
       }
     })();

diff --git a/front/src/pages/CoachMain/index.tsx b/front/src/pages/CoachMain/index.tsx
@@ -5,7 +5,6 @@ import { AxiosError } from 'axios';
 import Board from '@components/Board';
 import BoardItem from '@components/BoardItem';
 import BoardSelectList from '@components/BoardSelectList';
-import { UserDispatchContext } from '@context/UserProvider';
 import useWindowFocus from '@hooks/useWindowFocus';
 import useWindowSize from '@hooks/useWindowSize';
 import { SnackbarContext } from '@context/SnackbarProvider';
@@ -18,8 +17,9 @@ import {
 } from '@api/reservation';
 import { getCoachReservations } from '@api/coach';
 import { getDateTime } from '@utils/date';
-import { BOARD, ROUTES } from '@constants/index';
+import { BOARD, ERROR_MESSAGE, ROUTES } from '@constants/index';
 import type { BoardValue, CrewListMap } from '@typings/domain';
+import { logError } from '@utils/logError';
 import { theme, size } from '@styles/theme';
 import * as S from './styles';
 
@@ -50,7 +50,6 @@ const CoachMain = () => {
   const isWindowFocused = useWindowFocus();
   const selectedBoard = useContext(BoardStateContext);
   const showSnackbar = useContext(SnackbarContext);
-  const dispatch = useContext(UserDispatchContext);
   const [crews, setCrews] = useState<CrewListMap>({
     beforeApproved: [],
     approved: [],
@@ -105,8 +104,9 @@ const CoachMain = () => {
       showSnackbar({ message: '승인되었습니다. ✅' });
     } catch (error) {
       if (error instanceof AxiosError) {
-        alert(error.response?.data?.message);
-        console.log(error);
+        logError(error);
+        alert(ERROR_MESSAGE.FAIL_APPROVE);
+        return;
       }
     }
   };
@@ -131,8 +131,9 @@ const CoachMain = () => {
       deleteBoardItem(status, index);
     } catch (error) {
       if (error instanceof AxiosError) {
-        alert(error.response?.data?.message);
-        console.log(error);
+        logError(error);
+        alert(ERROR_MESSAGE.FAIL_COMPLETE_RESERVATION);
+        return;
       }
     }
   };
@@ -150,8 +151,9 @@ const CoachMain = () => {
       showSnackbar({ message: '거절되었습니다. ✅' });
     } catch (error) {
       if (error instanceof AxiosError) {
-        alert(error.response?.data?.message);
-        console.log(error);
+        logError(error);
+        alert(ERROR_MESSAGE.FAIL_REJECT_RESERVATION);
+        return;
       }
     }
   };
@@ -165,8 +167,9 @@ const CoachMain = () => {
       showSnackbar({ message: '취소되었습니다. ✅' });
     } catch (error) {
       if (error instanceof AxiosError) {
-        alert(error.response?.data?.message);
-        console.log(error);
+        logError(error);
+        alert(ERROR_MESSAGE.FAIL_CANCEL_RESERVATION);
+        return;
       }
     }
   };
@@ -243,13 +246,9 @@ const CoachMain = () => {
         setCrews(crewListMap);
       } catch (error) {
         if (error instanceof AxiosError) {
-          if (error.response?.status === 401) {
-            dispatch({ type: 'DELETE_USER' });
-            showSnackbar({ message: '토큰이 만료되었습니다. 다시 로그인해주세요.' });
-            navigate(ROUTES.HOME);
-            return;
-          }
-          alert(error);
+          logError(error);
+          navigate(ROUTES.ERROR);
+          return;
         }
       }
     };