[Trouble Shooting] 상품 수정 등록 후 뒤로가기 경로 문제

- 세컨핸드 프로젝트를 수정하면서 겪은 고민과 문제 해결에 대해서 기록해보고자 한다.

- 먼저 아래 두 개의 영상을 보면 사용자 입장에서 불편함을 느낄 수 있다고 생각한다.

홈화면 - 상품상세 - 상품수정

판매내역 - 상품상세 - 상품수정

- 프로젝트의 로직은 아래와 같다.

1. 홈화면 또는 판매내역에서 상품을 선택했을 때, 해당 상품의 상세페이지로 이동을 한다.

2. 만약 내가 등록한 상품이라면 상품 게시글을 수정할 수 있고, 수정 완료가 되면 해당 상품의 상세페이지로 이동한다.

 

- 이때, 위의 두 개의 영상에서 확인할 수 있듯이 상품의 수정 완료를 하고 해당 상품의 상세 페이지로 이동했을 때, 뒤로가기 버튼을 클릭하면 상품의 상세페이지의 진입점(홈화면 또는 판매내역)이 아닌 다시 상품 수정 페이지로 이동을 한다.

- 사용자입장에서는 상품의 수정을 완료한 상황에서 뒤로가기 버튼을 눌렀을 때는 처음 상품의 상세페이지의 진입점(홈화면 또는 판매내역)으로 이동을 원할 것이다.

- 따라서, 상품 상세페이지에서 상품을 수정하고 다시 상품 상세페이지로 이동했을 때, 뒤로가기 버튼의 경로를 설정해주어야 한다.

 

시도한 방법

- 상품의 상세페이지로 navigate를 할 때, 진입점에 대한 정보를 가지고 이동하는 방법에 대해서 고민했다.

- 기존의 로직은 상품 상세페이지의 뒤로가기 버튼을 클릭했을 때는 아래와 같이 path prop을 "back"으로 전달하고 있었고, NavbarBtn 컴포넌트에서는 path가 "back"일 경우 뒤로가기 버튼을 클릭하면 navigate(-1)로 이동하고 있었다.

// DetailPage.tsx에서 NavbarBtn을 사용하는 부분
       <NavbarBtn
          path="back"
	// ...
        />
    //...

// NavbarBtn.tsx
export const NavbarBtn = ({
  path,
  // ...
}: NavigateBtnProps) => {
  const navigate = useNavigate();
  const handleOnClick = () => {
    path && (path === 'back' ? navigate(-1) : navigate(path));
  };
  return (
    <Button
      onClick={handleOnClick}
    />
  );
};

 

- 그렇다면 path를 정의해주면 되겠다라고 생각했지만, 상품 상세페이지의 진입점은 홈화면 또는 판매내역으로 두 가지가 있기 때문에 진입점에 대한 경로를 상품페이지 - 상품 수정 페이지 - 수정 완료 후 상품페이지로 전달이 필요했다.

- 나는 구글링을 통해 방법을 찾기 시작했고, navigate의 state로 이동하는 페이지에 값을 전달할 수 있는 방법을 찾았다.

- 먼저 최종 작성된 코드는 아래와 같다.

// 상품 상세페이지의 진입점(홈화면 또는 판매내역)에서 상품 상세페이지로 이동할 때,
// navigate의 state로 현재 경로를 전달해주는 방법
// useLocation을 사용해서 현재 경로(pathname)을 확인한다
// navigate를 할 때 state로 pathname을 전달해준다
import { useLocation, useNavigate } from 'react-router-dom';
      
  const { pathname } = useLocation();
  const navigate = useNavigate();
  
      <ListItem
	// ...
        onClick={() => {
          navigate(`/item/${item.itemIdx}`, { state: pathname });
        }}
      />

// DetailPage.tsx에서 진입점에서 navigate로 전달된 state를 확인하는 방법
import { useLocation } from 'react-router-dom';

const prevPathname = useLocation().state;

// DetailPage.tsx에서 NavbarBtn(뒤로가기 버튼)을 사용하는 부분
// path prop으로 "back"이 아닌 이전 경로를 전달
       <NavbarBtn
          path={prevPath}
	// ...
        />
    // ...

// DetailPage.tsx에서 Menu 컴포넌트 사용 부분
// 게시글 수정 버튼을 눌렀을 때, 상품 수정 페이지에도 진입점에 대한 경로를 전달
      <Menu
        menuButtonPropsList={[
          {
            shape: 'large',
            state: 'default',
            color: 'systemDefault',
            name: '게시글 수정',
            onClick: () =>
              navigate(`/edit/${itemIdxStr}`, { state: prevPathname }),
          },
          {
            shape: 'large',
            state: 'default',
            color: 'systemWarning',
            name: '삭제',
            onClick: () => setDeleteDialogOpen(true),
          },
        ]}
      />

// 상품 수정 페이지에서 완료버튼을 누르고 상품 상세페이지로 이동할 때,
// 상품 상세페이지에서 받은 이전 경로를 navgiate의 state로 전달해주어야 한다.

import { useNavigate, useLocation } from 'react-router-dom';

  const prevPathName = useLocation().state;

  const handleConfirmDialogBtnClick = () => {
 	navigate(`/item/${uploadState.data?.itemIdx}`, { state: prevPathName })
        // ...		
  };

 

* 최종 완성 화면

 

홈화면 - 상품상세 - 상품수정

판매내역 - 상품상세 - 상품수정

 

아쉬운 점

- 뒤로가기 버튼을 눌렀을 때의 이동하는 경로에 대한 문제는 해결해서 좋았지만, 브라우저의 뒤로가기 버튼을 눌렀을 때는 아직 동일한 현상이 발생하고 있기 때문에, 추가 학습을 통해 수정이 필요한 상태이다 🫠