Skip to content

Commit

Permalink
[FE] 헤더 뒤로가기 기능 구현 (#411)
Browse files Browse the repository at this point in the history
* 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 변경사항 누락 부분 수정
  • Loading branch information
Largopie authored Oct 21, 2024
1 parent b70fad0 commit fa329ba
Show file tree
Hide file tree
Showing 49 changed files with 4,921 additions and 5,108 deletions.
9,026 changes: 4,319 additions & 4,707 deletions frontend/package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/assets/images/attendeeCheck.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions frontend/src/assets/images/back.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions frontend/src/assets/images/share.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 9 additions & 10 deletions frontend/src/components/MeetingConfirmCalendar/Picker/index.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';

Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
15 changes: 8 additions & 7 deletions frontend/src/components/MeetingConfirmCalendar/Viewer/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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';
Expand All @@ -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);
Expand All @@ -52,7 +53,7 @@ export default function Viewer({
const handleScheduleUpdate = () => {
if (!isLoggedIn) {
alert('로그인 해주세요');
navigate(`/meeting/${uuid}/login`);
routeTo(`/meeting/${uuid}/login`);
return;
}

Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);

Expand Down
19 changes: 9 additions & 10 deletions frontend/src/components/Schedules/SchedulePicker/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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);

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -60,7 +59,7 @@ export default function SchedulesViewer({
const handleScheduleUpdate = () => {
if (!isLoggedIn) {
alert('로그인 해주세요');
navigate(`/meeting/${uuid}/login`);
routeTo(`/meeting/${uuid}/login`);
return;
}

Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Schedules/Schedules.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
24 changes: 24 additions & 0 deletions frontend/src/components/_common/Buttons/BackButton/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
17 changes: 7 additions & 10 deletions frontend/src/components/_common/Header/Header.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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};
`;
Loading

0 comments on commit fa329ba

Please sign in to comment.