Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] fix: 리뷰 작성 완료 페이지에 url로 직접 접근하는 행위 방지 #866

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
+28 −15
Open

[FE] fix: 리뷰 작성 완료 페이지에 url로 직접 접근하는 행위 방지 #866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb089aa
fix: 리뷰 작성 완료 페이지에 url로 직접 접근하는 행위 방지
chysis Oct 16, 2024
9a5f4c0
chore: 뒤로가기를 통해 리뷰 작성 페이지로 갈 수 없게 수정
chysis Oct 19, 2024
9626945
fix: 작성 완료 페이지에 url로 바로 접근 시 에러 페이지를 보여주도록 수정
chysis Oct 19, 2024
fc6fd9f
chore: 변경된 path 타입 적용
chysis Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions frontend/src/components/common/Breadcrumb/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react';
import { useNavigate } from 'react-router';
import { useLocation, useNavigate } from 'react-router';

import { ROUTE } from '@/constants/route';

import UndraggableWrapper from '../UndraggableWrapper';

import * as S from './styles';

type PathType = string | number;

export interface Path {
pageName: string;
path: PathType;
path: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

순수 궁금증) 왜 기존 Path 타입에 number도 있었을까요? 지나치면서 궁금했었는데 이제야 질문을...ㅎ

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

breadcrumb 리팩토링 이전에는 navigate(0), navigate(-1)도 함께 사용되었어요 :0

}

interface BreadcrumbProps {
Expand All @@ -18,13 +18,10 @@ interface BreadcrumbProps {

const Breadcrumb = ({ pathList }: BreadcrumbProps) => {
const navigate = useNavigate();
const location = useLocation();

const handleNavigation = (path: PathType) => {
if (typeof path === 'number') {
navigate(path);
} else {
navigate(path);
}
const handleNavigation = (path: string) => {
navigate(path, { replace: location.pathname.includes(`/${ROUTE.reviewWritingComplete}`) });
Copy link
Contributor

@BadaHertz52 BadaHertz52 Oct 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

완료 페이지에서 뒤로가기를 막기 보다, 작성 -> 작성 완료 로 넘어갈 때 주는 state를 작성 완료 페이지 마운트 시useNavigate로 페이지 이동은 하지 않으면서 state:null로 바꾸는 것은 어떨까요? (pathname이 현재와 같으면 페이지 이동을 하지 않는다고 해요)

작성->작성 완료 -> 작성 에서 다시 이전 으로 돌아기로 작성 완료로 가도 유효하지 않은 접근이라는 것을 보여주고 새로 고침 시에도 유효하지 않은 접근으로 처리할 수 있을 것 같아요

};

return (
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/hooks/useBreadcrumbPaths.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const useBreadcrumbPaths = () => {
if (pathname.includes(`/${ROUTE.reviewWritingComplete}`)) {
breadcrumbPathList.push(
{ pageName: '리뷰 작성', path: `${ROUTE.reviewWriting}/${reviewRequestCode}` },
{ pageName: '리뷰 작성 완료 페이지', path: pathname },
{ pageName: '리뷰 작성 완료', path: pathname },
);
}

Expand Down
21 changes: 19 additions & 2 deletions frontend/src/pages/ReviewWritingCompletePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,35 @@
import { useNavigate } from 'react-router';
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router';

import PrimaryHomeIcon from '@/assets/primaryHome.svg';
import SmileIcon from '@/assets/smile.svg';
import { Button } from '@/components';
import { Button, ErrorSection } from '@/components';

import * as S from './styles';

const ReviewWritingCompletePage = () => {
const [isValid, setIsValid] = useState(true);
const navigate = useNavigate();
const location = useLocation();

useEffect(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 유저라면 url로 리뷰 완료 페이지 들어왔을때, 아무런 설명없이 바로 홈으로 리다이렉션이 되면 당황스러울 것 같아요.

저희가 ux를 생각해 오류가 나도 유저가 오류를 스스로 대응할 수 있는 선택권(홈,새로고침버튼)을 주었듯이, 유효하지 않은 리뷰 작성 완료 페이지에 접근하면 해당 접근이 유효하지 않다는 문구와 함께 홈으로 가는 이동 버튼을 제공하면 어떨까 싶어요

if (!location.state || !location.state.isValidAccess) setIsValid(false);
}, [location]);

const handleClickHomeButton = () => {
navigate('/', { replace: true });
};

if (!isValid) {
return (
<ErrorSection
errorMessage="유효하지 않은 접근이에요"
handleReload={() => navigate(0)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

유효하지 않은 접근에 새로고침이 필요할까? 싶은 생각이 들었어요. 어차피 유효하지 않은 접근이었다면 아무리 새로고침해도 계속 똑같은 페이지를 보게 될 것이기 때문에...
다른 UI들을 살펴보니 바로 홈으로 리다이렉트시키지는 않지만, 선택지를 홈으로 돌아가기 하나만 주고 있었어요~

handleGoOtherPage={() => navigate('/', { replace: true })}
/>
);
}

return (
<S.Layout>
<S.Container>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/ReviewWritingPage/form/hooks/answers/useSubmitAnswers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const useSubmitAnswers = ({ closeSubmitConfirmModal }: UseSubmitAnswersProps) =>
const navigate = useNavigate();

const executeAfterMutateSuccess = () => {
navigate(`/${ROUTE.reviewWritingComplete}/${reviewRequestCode}`);
navigate(`/${ROUTE.reviewWritingComplete}/${reviewRequestCode}`, { state: { isValidAccess: true } });
Copy link
Contributor

@BadaHertz52 BadaHertz52 Oct 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리뷰 작성 -> 리뷰 작성 완료 -> 리뷰 작성 시에 다시 리뷰 작성 완료 페이지로 문제 없이 갈 수 있는데, 이 부분이 의도된 것인지 궁금해요

_2024_10_17_10_57_15_141.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

홈으로 돌아가기 버튼을 누른 경우에는 뒤로가기가 막혀 있는데, 위 영상처럼 이동할 때는 인지하지 못하고 있었네요. 수정해보겠습니다 :)

closeSubmitConfirmModal();
};

Expand Down
1 change: 0 additions & 1 deletion frontend/src/pages/ReviewZonePage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ const ReviewZonePage = () => {
<S.ReviewZonePage>
<S.ReviewZoneMainImg src={ReviewZoneIcon} alt="" />
<S.ReviewGuideContainer>
{/* NOTE: 추후 API 연동되면 서버에서 받아온 이름들을 출력하도록 수정해야 함 */}
<S.ReviewGuide>{`${reviewGroupData.projectName}${calculateParticle({ target: reviewGroupData.projectName, particles: { withFinalConsonant: '을', withoutFinalConsonant: '를' } })} 함께한`}</S.ReviewGuide>
<S.ReviewGuide>{`${reviewGroupData.revieweeName}의 리뷰 공간이에요`}</S.ReviewGuide>
</S.ReviewGuideContainer>
Expand Down