당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 배열
  • 회고
  • 프론트엔드
  • 팀프로젝트
  • next.js
  • emotion
  • 공통 컴포넌트
  • JS
  • 부트캠프
  • HTML
  • 알고리즘
  • graphql
  • 리액트
  • react
  • typescript
  • javascrpit
  • algorithm
  • 자바스크립트
  • 코딩 부트캠프
  • 코딩
  • React-hook-form
  • refreshtoken
  • 코드캠프
  • CSS
  • ssg
  • 팀플
  • 배포
  • 프로그래머스
  • javascript
  • 팀 프로젝트

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

230504 로그인 후 보던 페이지로 이동시키고 싶어
프론트엔드✏️/팀 프로젝트✨

230504 로그인 후 보던 페이지로 이동시키고 싶어

2023. 5. 4. 11:37
728x90
반응형

 
🚨 문제 발생! 
 

const handleOk = () => {
    setModalState({
      text: "",
      openModal: false,
    });
    localStorage.setItem("prevPage", router.asPath);
    router.push("/signin");
  };

  useEffect(() => {
    if (!accessToken) {
      console.log("hi");
      setModalState({
        text: "로그인이 필요합니다.",
        openModal: true,
        icontype: "warning",
        ok: "확인",
        onClickOk: handleOk,
      });
    }
  }, [accessToken]);

useAuth() 

  const handleLoginButton = async () => {
    event?.preventDefault();
    await login(inputs.email, inputs.password).then((data) => {
      console.log(data);
      // 페이지 새로고침시 state가 초기화되는 현상을 막기위헤,  로컬 스토리지에 담아준다!
      if (typeof window !== "undefined") {
        localStorage.setItem("accessToken", data);
      }
      // Recoil state 업데이트
      setAccessToken(data);

      const page = localStorage.getItem("prevPage");
      router.push(String(page));
    });

현재 로그인 컴포넌트
 
로그인 후에 이전에 보던 페이지로 보내준다.
 
💣 이전 페이지가 오류 페이지였으면 오류 페이지로 보낸다. ->  아직 해결 못함
 
💣 useAuth() 를 통해서 가야만 보던 페이지로 보내준다. 
 
💣 동적 라우팅 부분에선 막힌다. 
 
 

page는 /boards/[communityId]/edit 로 찍힌다. 
 
[communityId] 
동적 라우팅된 부분이 먹히지 않음. 
 

asPath로 하면 되나?하고 asPath로 바꿔보았음
 
 
 
http://localhost:3000/boards/1qeqdasd
 
여기서 헤더에 있는 로그인 버튼을 눌러서 들어간다면?

디테일 페이지에서 router를 찍어본 것
 
그렇지만 로컬 스토리지를 세팅하는 건 useAuth() 에서 하기 때문에 "prevPage"가 /boards/eqrqsd 가 아니라 최근에 useAuth가 실행되어 저장돼있던  곳으로 설정되어있다. 그래서 뜬금없이 /boards/write 페이지로 이동했다. 
 
그래서 prevPage를 저장하는 건 헤더에 있는 로그인 버튼을 눌렀을 때와 로그인으로 이동하는 모달 버튼을 눌렀을 때여야 한다. 
 

이걸

div로 바꾸고 onClick을 주었다.
 

const handleLoginButton = () => {
    localStorage.setItem("prevPage", router.asPath);
    router.push("/signin");
  };

 
 
 

 const handleOk = () => {
    setModalState({
      text: "",
      openModal: false,
    });
    localStorage.setItem("prevPage", router.asPath);
    router.push("/signin");
  };

모달에서 ok 버튼을 눌렀을 때에도 추가해줬다. 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 팀 프로젝트✨' 카테고리의 다른 글

0427 오늘의 에러  (0) 2023.04.27
팀 프로젝트 room:in us 회고  (0) 2022.08.08
[roominus] 팀 프로젝트 4주차 - 주차별 회고(4)  (0) 2022.08.01
프론트엔드에서 검색을 해보자~~~!!!  (0) 2022.07.29
JavaScript heap out of memory - 힙 메모리 누수 확인, 디버깅  (0) 2022.07.28
    '프론트엔드✏️/팀 프로젝트✨' 카테고리의 다른 글
    • 0427 오늘의 에러
    • 팀 프로젝트 room:in us 회고
    • [roominus] 팀 프로젝트 4주차 - 주차별 회고(4)
    • 프론트엔드에서 검색을 해보자~~~!!!
    당근먹는하니
    당근먹는하니

    티스토리툴바