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.

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

REV-390/헤더 페이지 이동방지 모달 #103

Merged
merged 5 commits into from
Dec 3, 2023

Conversation

khj0426
Copy link
Collaborator

@khj0426 khj0426 commented Dec 3, 2023

📑 구현

리뷰 응답 페이지, 리뷰 생성 페이지에서 마이페이지 이동, 홈으로 이동할 때 모달을 띄워줍니다!
추가로 리뷰 전송, 리뷰 마감시에도 모달을 띄워놓았습니다.!

image

chrome-capture-2023-11-3.webm
chrome-capture-2023-11-3.1.webm

내용


🚧 참고 사항

location의 pathname을 의존성에 추가해서 페이지 이동시마다 pathname을 검사합니다.
이렇게 되니깐 매번 헤더가 새로 갱신되어 버리는데 어떻게 이를 막을 수 있을 지 잘 모르겠습니다..

리뷰 생성이나 리뷰 응답페이지를 pathname이 바뀔때마다 검사할 필요가 있고 해당 페이지에 따라 상태가 바뀌는데
ref를 써서 한번 시도해볼게요!


@khj0426 khj0426 added 리팩토링 리팩토링을 위한 이슈입니다. 기능 새로운 기능을 개발합니다. labels Dec 3, 2023
@khj0426 khj0426 self-assigned this Dec 3, 2023
Copy link
Member

Choose a reason for hiding this comment

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

다른 작업을 하셨군요..!

Copy link
Member

Choose a reason for hiding this comment

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

쉽게 구현할 수 있는 걸 너무 어렵게 구현한 것 같아요!

Copy link
Member

Choose a reason for hiding this comment

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

여기에 그냥

  const handleNavigate = (path: string) => {
    if (pathname === '/review-creation' || pathname === '/review-reply') {
      // 모달 라벨 click()

      return
    }

    navigate(path)
  }

요런 식으로 구현할 수는 없을까요?!

Comment on lines +141 to +157
<Modal
modalId="mypage"
content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
label="이동하기"
handleClickLabel={() => {
navigate('/profile')
}}
/>

<Modal
modalId="mainpage"
content={`페이지를 벗어나면 지금까지 작성한 내용이 모두 삭제됩니다.\n\n 이동하시겠습니까?`}
label="이동하기"
handleClickLabel={() => {
navigate('/')
}}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

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

굿굿 👍👍

@khj0426 khj0426 merged commit 5065e7f into develop Dec 3, 2023
1 check passed
@khj0426 khj0426 deleted the REV-390/헤더-페이지-이동방지-모달 branch December 3, 2023 17:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
기능 새로운 기능을 개발합니다. 리팩토링 리팩토링을 위한 이슈입니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants