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

chysis · 2024-10-16T08:06:15Z

resolves [FE] 리뷰 작성 완료 페이지에 url로 직접 접근하는 행위를 방지한다. #864

🚀 어떤 기능을 구현했나요 ?

리뷰 작성 완료 페이지에 url로 직접 접근하지 못하게 막았습니다.

🔥 어떻게 해결했나요 ?

리뷰 작성 페이지에서 제출 버튼을 누를 때 navigate와 함께 state로 isValidAccess 플래그를 전달합니다. 리뷰 작성 완료 페이지에서는 state가 비어있거나, isValidAccess가 false일 때 홈페이지로 리다이렉션합니다.
PrivateRoute를 사용하는 방식도 있지만(https://velog.io/@somda/React-PrivateRoute-%EB%A7%8C%EB%93%A4%EA%B8%B0react-router-dom-v6), 이는 인증되지 않은 경우에 url 접근을 막는 것이라 다른 상황이라 판단했습니다.

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

ImxYJL

앞으로 리뷰미의 볼륨이 늘어난다 해도 프리하게 접근할 수 있는 작성 페이지 쪽보다는 쿠키 검증을 거치는 리뷰 확인 쪽이 아닐까 싶어요.

작성 관련 페이지들이 늘어난다면 이렇게 접근 경로 체크할 일이 늘어날 수도 있으니 별도의 라우팅 관리 로직을 분리해서 관리하는 게 좋겠지만, 그렇지 않을 것 같아욥

그래서 에프이 구현대로 작성 페이지-작성 완료 페이지에서
간단하게 체크하고 넘어가는 것으로 충분할 것 같습니다~~

BadaHertz52

홈으로 리다이렉션되는 것에 대한 ux 우려가 있어요. 해당 코멘트 확인 부탁드려요

BadaHertz52 · 2024-10-17T01:48:16Z

frontend/src/pages/ReviewWritingCompletePage/index.tsx

@@ -8,6 +9,13 @@ import * as S from './styles';

 const ReviewWritingCompletePage = () => {
  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {


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

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

BadaHertz52 · 2024-10-17T01:56:09Z

frontend/src/pages/ReviewWritingPage/form/hooks/answers/useSubmitAnswers.ts

@@ -21,7 +21,7 @@ const useSubmitAnswers = ({ closeSubmitConfirmModal }: UseSubmitAnswersProps) =>
  const navigate = useNavigate();

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


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

_2024_10_17_10_57_15_141.mp4

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

chysis · 2024-10-19T17:00:28Z

수정사항

1. Breadcrumb 수정

현재는 number 타입의 path를 쓰지 않고 있어서 타입을 수정했습니다.
location을 사용해서, 현재 페이지가 리뷰 작성 완료 페이지라면 뒤로가기로 돌아갈 수 없게 수정했습니다.

리뷰 작성 완료 페이지

유효한 접근인 경우: 리뷰 작성 폼 제출 버튼 클릭 시
유효한 접근이 아닌 경우, ErrorSection을 보여주어 사용자가 새로고침 또는 홈으로 이동할 수 있게 수정했습니다.

url 직접 접근 막기.webm
▲ 살짝 화질구지입니다..

여러 상황을 가정하고 테스트 해보았지만 혹시나 추가적인 버그 발견 시 제보 부탁합니다

ImxYJL · 2024-10-20T03:55:00Z

frontend/src/components/common/Breadcrumb/index.tsx

 export interface Path {
  pageName: string;
-  path: PathType;
+  path: string;


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

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

ImxYJL · 2024-10-20T04:02:36Z

frontend/src/pages/ReviewWritingCompletePage/index.tsx

+    return (
+      <ErrorSection
+        errorMessage="유효하지 않은 접근이에요"
+        handleReload={() => navigate(0)}


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

BadaHertz52 · 2024-10-20T10:24:46Z

frontend/src/components/common/Breadcrumb/index.tsx


-  const handleNavigation = (path: PathType) => {
+  const handleNavigation = (path: string) => {
    if (typeof path === 'number') {


path가 string 타입만 있다면 typeof path === 'number'는 필요없어지겠네요

현재는 제거된 상태입니다

BadaHertz52 · 2024-10-20T10:37:03Z

frontend/src/components/common/Breadcrumb/index.tsx

-      navigate(path);
-    }
+  const handleNavigation = (path: string) => {
+    navigate(path, { replace: location.pathname.includes(`/${ROUTE.reviewWritingComplete}`) });


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

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

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

fb089aa

chysis added 🍀 FE 🐛 버그 labels Oct 16, 2024

chysis added this to the 6차 스프린트: 최종장 milestone Oct 16, 2024

chysis requested review from BadaHertz52, soosoo22 and ImxYJL October 16, 2024 08:06

chysis self-assigned this Oct 16, 2024

chysis linked an issue Oct 16, 2024 that may be closed by this pull request

[FE] 리뷰 작성 완료 페이지에 url로 직접 접근하는 행위를 방지한다. #864

Open

ImxYJL approved these changes Oct 16, 2024

View reviewed changes

BadaHertz52 requested changes Oct 17, 2024

View reviewed changes

BadaHertz52 reviewed Oct 17, 2024

View reviewed changes

chysis added 3 commits October 20, 2024 01:43

chore: 뒤로가기를 통해 리뷰 작성 페이지로 갈 수 없게 수정

9a5f4c0

fix: 작성 완료 페이지에 url로 바로 접근 시 에러 페이지를 보여주도록 수정

9626945

chore: 변경된 path 타입 적용

fc6fd9f

ImxYJL reviewed Oct 20, 2024

View reviewed changes

BadaHertz52 reviewed Oct 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chysis commented Oct 16, 2024 •

edited

Loading

ImxYJL left a comment

BadaHertz52 left a comment

BadaHertz52 Oct 17, 2024

BadaHertz52 Oct 17, 2024 •

edited

Loading

chysis Oct 18, 2024

chysis commented Oct 19, 2024 •

edited

Loading

ImxYJL Oct 20, 2024

chysis Oct 20, 2024

ImxYJL Oct 20, 2024

BadaHertz52 Oct 20, 2024

chysis Oct 20, 2024

BadaHertz52 Oct 20, 2024 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

chysis commented Oct 16, 2024 • edited Loading

🚀 어떤 기능을 구현했나요 ?

🔥 어떻게 해결했나요 ?

📝 어떤 부분에 집중해서 리뷰해야 할까요?

📚 참고 자료, 할 말

ImxYJL left a comment

Choose a reason for hiding this comment

BadaHertz52 left a comment

Choose a reason for hiding this comment

BadaHertz52 Oct 17, 2024

Choose a reason for hiding this comment

BadaHertz52 Oct 17, 2024 • edited Loading

Choose a reason for hiding this comment

chysis Oct 18, 2024

Choose a reason for hiding this comment

chysis commented Oct 19, 2024 • edited Loading

수정사항

1. Breadcrumb 수정

리뷰 작성 완료 페이지

ImxYJL Oct 20, 2024

Choose a reason for hiding this comment

chysis Oct 20, 2024

Choose a reason for hiding this comment

ImxYJL Oct 20, 2024

Choose a reason for hiding this comment

BadaHertz52 Oct 20, 2024

Choose a reason for hiding this comment

chysis Oct 20, 2024

Choose a reason for hiding this comment

BadaHertz52 Oct 20, 2024 • edited Loading

Choose a reason for hiding this comment

chysis commented Oct 16, 2024 •

edited

Loading

BadaHertz52 Oct 17, 2024 •

edited

Loading

chysis commented Oct 19, 2024 •

edited

Loading

BadaHertz52 Oct 20, 2024 •

edited

Loading