[FE] 헤더 뒤로가기 기능 구현 (#411)

* design: 토스트 컨테이너 패딩 조절

- 토스트 메시지의 padding 속성으로 입력부분이 가려지는 문제가 있어 위와 아래의 패딩을 0으로 설정

* refactor: GlobalLayout 폴더 구조 수정

* chore: 라이브러리 수정

- @types/jest 설치
- storybook 업데이트

* feat(ContentLayout): 전역적으로 사용할 main태그 레이아웃 구현

* refactor(Header): 로그인 버튼 제거 및 추상화

* feat(useRouter): 라우팅 커스텀 훅 구현

* chore: 뒤로가기, 공유 SVG 추가 및 체크 SVG 수정

* refactor: 페이지별 헤더 추가, ContentLayout 적용

- 필요한 헤더에 뒤로가기 라우팅, 공유 기능 구현

* design: 전체적인 레이아웃 변경으로 인한 CSS 수정

* refactor: 새로고침 시, failed to fetch 에러가 발생하는 문제로
기본 형태를 반환할 수 있도록 수정

* refactor(useRouter): useNavigate를 담는 변수명 수정

* refactor(useRouter): uuid제거 및 뒤로가기 기능 추가

* feat(useUuid): uuid를 불러오는 훅 구현

* refactor: useParams, navigate를 사용하는 함수에 useRouter, useUuid 적용

* refactor(GlobalLayout, ContentLayout): `index`로 이름 수정

* feat(UuidLayout, UuidProvider): uuid 내부에서만 사용할 수 있는 UuidLayout 구현

* refactor: useUuid 삭제 및 UuidContext로 대체

* refactor(meetingHandlers): 중복 로직 `||` 연산자로 수정

* feat(BackButton): 뒤로가기 버튼 컴포넌트 구현

* refactor: 사용되던 뒤로가기 버튼을 `BackButton` 컴포넌트로 교체

* refactor(useRouter): routeWithState 함수 추가 및 useNavigate 사용처 useRouter로 변경

* fix: ConfirmModal 변경사항 누락 부분 수정

frontend/package.json

@@ -61,6 +61,7 @@
     "@testing-library/dom": "10.3.2",
     "@testing-library/react": "16.0.0",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/jest": "29.5.13",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.16.0",
@@ -82,7 +83,7 @@
     "postcss": "8.4.39",
     "postcss-styled-syntax": "0.6.4",
     "react-lottie": "^1.2.4",
-    "storybook": "8.2.4",
+    "storybook": "8.3.5",
     "stylelint": "16.6.1",
     "stylelint-config-clean-order": "6.1.0",
     "stylelint-config-standard": "36.0.1",

frontend/src/components/MeetingConfirmCalendar/Picker/index.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import type { Mode } from 'types/schedule';
 
 import { AuthContext } from '@contexts/AuthProvider';
 import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider';
+import { UuidContext } from '@contexts/UuidProvider';
 
 import {
   s_bottomFixedButtonContainer,
@@ -13,6 +13,7 @@ import { Button } from '@components/_common/Buttons/Button';
 import Calendar from '@components/_common/Calendar';
 
 import useCalendarPick from '@hooks/useCalendarPick/useCalendarPick';
+import useRouter from '@hooks/useRouter/useRouter';
 
 import { usePostScheduleByMode } from '@stores/servers/schedule/mutations';
 
@@ -28,10 +29,8 @@ interface PickerProps {
 }
 
 export default function Picker({ availableDates, mode }: PickerProps) {
-  const navigate = useNavigate();
-
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
+  const { routeTo } = useRouter();
+  const { uuid } = useContext(UuidContext);
 
   const { userName } = useContext(AuthContext).state;
   const { handleToggleIsTimePickerUpdate } = useContext(TimePickerUpdateStateContext);
@@ -51,10 +50,6 @@ export default function Picker({ availableDates, mode }: PickerProps) {
     return { uuid, requestData: convertedData };
   };
 
-  const handleMeetingViewerNavigate = () => {
-    navigate(`/meeting/${uuid}/viewer`);
-  };
-
   const handleScheduleSave = () => {
     if (mode === 'register' && selectedDates.length === 0) {
       return;
@@ -89,7 +84,11 @@ export default function Picker({ availableDates, mode }: PickerProps) {
         <div css={s_fullButtonContainer}>
           {mode === 'register' ? (
             <>
-              <Button size="full" variant="secondary" onClick={handleMeetingViewerNavigate}>
+              <Button
+                size="full"
+                variant="secondary"
+                onClick={() => routeTo(`/meeting/${uuid}/viewer`)}
+              >
                 약속 현황 조회
               </Button>
               <Button

frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx

@@ -1,9 +1,9 @@
 import { useContext, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import type { MeetingAllSchedules, MeetingSingleSchedule } from 'types/schedule';
 
 import { AuthContext } from '@contexts/AuthProvider';
 import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider';
+import { UuidContext } from '@contexts/UuidProvider';
 
 import { s_attendeesContainer } from '@pages/MeetingConfirmPage/MeetingTimeConfirmPage.styles';
 
@@ -16,6 +16,8 @@ import { Button } from '@components/_common/Buttons/Button';
 import TabButton from '@components/_common/Buttons/TabButton';
 import Calendar from '@components/_common/Calendar';
 
+import useRouter from '@hooks/useRouter/useRouter';
+
 import { useGetSchedules } from '@stores/servers/schedule/queries';
 
 import { getFullDate } from '@utils/date';
@@ -40,9 +42,8 @@ export default function Viewer({
   hostName,
   isLocked,
 }: ViewerProps) {
-  const navigate = useNavigate();
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
+  const { routeTo } = useRouter();
+  const { uuid } = useContext(UuidContext);
   const [selectedAttendee, setSelectedAttendee] = useState('');
 
   const { data: meetingSchedules } = useGetSchedules(uuid, selectedAttendee);
@@ -52,7 +53,7 @@ export default function Viewer({
   const handleScheduleUpdate = () => {
     if (!isLoggedIn) {
       alert('로그인 해주세요');
-      navigate(`/meeting/${uuid}/login`);
+      routeTo(`/meeting/${uuid}/login`);
       return;
     }
 
@@ -123,15 +124,15 @@ export default function Viewer({
               <Button
                 size="full"
                 variant="primary"
-                onClick={() => navigate(`/meeting/${uuid}/confirm`)}
+                onClick={() => routeTo(`/meeting/${uuid}/confirm`)}
               >
                 약속 시간 확정하기
               </Button>
             ) : (
               <Button
                 size="full"
                 variant="primary"
-                onClick={() => navigate(`/meeting/${uuid}/recommend`)}
+                onClick={() => routeTo(`/meeting/${uuid}/recommend`)}
               >
                 약속 시간 추천받기
               </Button>

frontend/src/components/Schedules/SchedulePicker/SchedulePickerContainer.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react';
-import { useParams } from 'react-router-dom';
 import type { MeetingDateTime } from 'types/meeting';
 import type { Mode } from 'types/schedule';
 
 import { AuthContext } from '@contexts/AuthProvider';
+import { UuidContext } from '@contexts/UuidProvider';
 
 import { useGetMyScheduleQuery } from '@stores/servers/schedule/queries';
 
@@ -19,8 +19,7 @@ export default function SchedulePickerContainer({
   availableDates,
   mode,
 }: SchedulePickerContainerProps) {
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
+  const { uuid } = useContext(UuidContext);
   const { userName } = useContext(AuthContext).state;
   const { data: meetingSchedules } = useGetMyScheduleQuery(uuid, userName);
 

frontend/src/components/Schedules/SchedulePicker/index.tsx

@@ -1,16 +1,17 @@
 import { useContext, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import type { MeetingDateTime } from 'types/meeting';
 import type { MeetingSingleSchedule, Mode } from 'types/schedule';
 
 import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider';
+import { UuidContext } from '@contexts/UuidProvider';
 
 import ScheduleTimeList from '@components/Schedules/ScheduleTableFrame/ScheduleTimeList';
 import { Button } from '@components/_common/Buttons/Button';
 import TabButton from '@components/_common/Buttons/TabButton';
 import Text from '@components/_common/Text';
 
 import usePagedTimePick from '@hooks/usePagedTimePick/usePagedTimePick';
+import useRouter from '@hooks/useRouter/useRouter';
 
 import { usePostScheduleByMode } from '@stores/servers/schedule/mutations';
 
@@ -50,10 +51,8 @@ export default function SchedulePicker({
   meetingSingleSchedule,
   mode,
 }: SchedulePickerProps) {
-  const navigate = useNavigate();
-
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
+  const { routeTo } = useRouter();
+  const { uuid } = useContext(UuidContext);
 
   const { handleToggleIsTimePickerUpdate } = useContext(TimePickerUpdateStateContext);
 
@@ -81,10 +80,6 @@ export default function SchedulePicker({
 
   const [selectMode, setSelectMode] = useState<keyof typeof TIME_SELECT_MODE>('available');
 
-  const handleMeetingViewerNavigate = () => {
-    navigate(`/meeting/${uuid}/viewer`);
-  };
-
   const convertSelectedDatesToRequest = () => {
     const convertedData = convertToSchedule({
       availableDates,
@@ -182,7 +177,11 @@ export default function SchedulePicker({
         <div css={s_fullButtonContainer}>
           {mode === 'register' ? (
             <>
-              <Button size="full" variant="secondary" onClick={handleMeetingViewerNavigate}>
+              <Button
+                size="full"
+                variant="secondary"
+                onClick={() => routeTo(`/meeting/${uuid}/viewer`)}
+              >
                 약속 현황 조회
               </Button>
               <Button

frontend/src/components/Schedules/ScheduleViewer/ScheduleTable.tsx

@@ -1,6 +1,8 @@
-import { useParams } from 'react-router-dom';
+import { useContext } from 'react';
 import type { MeetingAllSchedules, MeetingSingleSchedule } from 'types/schedule';
 
+import { UuidContext } from '@contexts/UuidProvider';
+
 import ScheduleDateDayList from '@components/Schedules/ScheduleTableFrame/ScheduleDateDayList';
 import ScheduleTimeList from '@components/Schedules/ScheduleTableFrame/ScheduleTimeList';
 
@@ -29,8 +31,7 @@ export default function ScheduleTable({
   meetingAttendees,
   selectedAttendee,
 }: ScheduleTableProps) {
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
+  const { uuid } = useContext(UuidContext);
 
   const { data: meetingSchedules } = useGetSchedules(uuid, selectedAttendee);
 

frontend/src/components/Schedules/ScheduleViewer/SchedulesViewer.tsx

@@ -1,13 +1,14 @@
 import { useContext } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import type { MeetingDateTime } from 'types/meeting';
 
 import { AuthContext } from '@contexts/AuthProvider';
 import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider';
+import { UuidContext } from '@contexts/UuidProvider';
 
 import { Button } from '@components/_common/Buttons/Button';
 import TabButton from '@components/_common/Buttons/TabButton';
 
+import useRouter from '@hooks/useRouter/useRouter';
 import useSelectSchedule from '@hooks/useSelectSchedule/useSelectSchedule';
 
 import Check from '@assets/images/attendeeCheck.svg';
@@ -38,10 +39,8 @@ export default function SchedulesViewer({
   availableDates,
   meetingAttendees,
 }: SchedulesViewerProps) {
-  const params = useParams<{ uuid: string }>();
-  const uuid = params.uuid!;
-
-  const navigate = useNavigate();
+  const { routeTo } = useRouter();
+  const { uuid } = useContext(UuidContext);
 
   const { handleToggleIsTimePickerUpdate } = useContext(TimePickerUpdateStateContext);
   const { isLoggedIn, userName } = useContext(AuthContext).state;
@@ -60,7 +59,7 @@ export default function SchedulesViewer({
   const handleScheduleUpdate = () => {
     if (!isLoggedIn) {
       alert('로그인 해주세요');
-      navigate(`/meeting/${uuid}/login`);
+      routeTo(`/meeting/${uuid}/login`);
       return;
     }
 
@@ -114,15 +113,15 @@ export default function SchedulesViewer({
             <Button
               size="full"
               variant="primary"
-              onClick={() => navigate(`/meeting/${uuid}/confirm`)}
+              onClick={() => routeTo(`/meeting/${uuid}/confirm`)}
             >
               약속 시간 확정하기
             </Button>
           ) : (
             <Button
               size="full"
               variant="primary"
-              onClick={() => navigate(`/meeting/${uuid}/recommend`)}
+              onClick={() => routeTo(`/meeting/${uuid}/recommend`)}
             >
               약속 시간 추천받기
             </Button>

frontend/src/components/Schedules/Schedules.styles.ts

@@ -125,7 +125,7 @@ export const s_bottomFixedButtonContainer = css`
   width: calc(100% + 1.6rem * 2);
   height: 6rem;
   margin: 1.6rem 0 0 -1.6rem;
-  padding: 0 1.6rem;
+  padding: 0.6rem 1.6rem;
 
   background-color: #fff;
   box-shadow: 0 -4px 4px rgb(0 0 0 / 25%);

frontend/src/components/_common/Buttons/BackButton/index.tsx

@@ -0,0 +1,24 @@
+import useRouter from '@hooks/useRouter/useRouter';
+
+import BackSVG from '@assets/images/back.svg';
+
+import { s_headerIconButton } from '../Button/Button.styles';
+
+interface BackButtonProps {
+  path?: string;
+}
+
+export default function BackButton({ path }: BackButtonProps) {
+  const { routeTo, goBack } = useRouter();
+
+  const handleBackButtonClick = () => {
+    if (path === undefined) goBack();
+    else routeTo(path);
+  };
+
+  return (
+    <button css={s_headerIconButton} onClick={handleBackButtonClick}>
+      <BackSVG width="24" height="24" />
+    </button>
+  );
+}

frontend/src/components/_common/Buttons/Button/Button.styles.ts

@@ -93,3 +93,9 @@ export const s_size = (size: ButtonSize) => css`
   height: ${buttonSize[size].height};
   padding: ${buttonSize[size].padding};
 `;
+
+export const s_headerIconButton = css`
+  width: 2.4rem;
+  height: 2.4rem;
+  background-color: inherit;
+`;

frontend/src/components/_common/Header/Header.styles.ts

@@ -13,21 +13,18 @@ export const s_header = css`
   justify-content: space-between;
 
   width: 100%;
-  height: 6rem;
+  height: 4.8rem;
   padding: 0 1.6rem;
 
+  text-align: center;
+
   background-color: #fff;
   box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
 `;
 
-export const s_logoContainer = css`
-  display: flex;
-  gap: 1.2rem;
-  align-items: center;
-  height: 3.6rem;
-`;
-
 export const s_title = css`
-  font-size: 2.4rem;
-  font-weight: ${theme.typography.titleBold};
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: ${theme.typography.bodyBold};
 `;