다른 경로로부터 상세페이지로의 링크 이동 관련 이슈

[Yujeong Lee]

🚧 이슈

소셜 공유 시, 또는 마이페이지에서 좋아요 누른 동영상이나 댓글을 클릭했을 때 상세페이지로 이동되면 빈 화면이 되어버린다는 이슈가 있습니다.

🤔 원인 파악

한줄로 요약하자면 상세페이지에 해당하는 <DetailView> 컴포넌트가 이전 페이지인 <Media> 컴포넌트에 종속되어 있어 독립적인 컴포넌트가 되지 못했다는 것이 원인입니다.

이 문제의 원인을 찾기 위해서는 우리 프로젝트의 유튜브 API를 어떻게 얻어오는지의 흐름을 파악해야 합니다.
우리 프로젝트는 현재 메인 페이지에서 클릭시 얻는 유튜브 채널 아이디를 이용해서 API를 호출하여 리스트를 받아오고 있습니다.
API 호출은 미디어 페이지에서 이루어지고 있는데, 아래와 같이 주소값에서 채널 아이디를 가져와서 리덕스에 저장 후 데이터를 가져오고 있습니다.

// pages/Media.tsx

export default function Media() {
  const dispatch = useAppDispatch();
  const location = useLocation();

  const channelId = location.pathname.substring(1);

  useEffect(() => {
    dispatch(getSearchVideos({ channelId }));
  }, [dispatch, channelId]);

  const { search } = useAppSelector((state) => state.media);

  return (
    <>
      <DetailBackColor>
        <Title>최신미디어</Title>
        <DetailWrap>
          {search.map((item: any) => (
            <SearchList item={item} key={item.id.videoId} />
          ))}
        </DetailWrap>
      </DetailBackColor>
    </>
  );
}

각각의 유튜브 썸네일에 해당하는 <SearchList> 컴포넌트는 클릭시 유튜브 정보(item)를 params로 넘겨주고 있는데,
마이페이지나 소셜공유로 얻은 링크로 접속 할 때 이 유튜브 정보를 갖고 넘어오지 않기 때문에 발생한 오류입니다.

export default function SearchList({ item }: { item: any }) {
  const { title, thumbnails, publishedAt } = item.snippet;
  const navigate = useNavigate();

  return (
    <Wrapper
      onClick={() => {
        navigate(`${item.id.videoId}`, { state: { item } });
      }}
    >
...

// components/Detail/DetailView.tsx

export default function DetailView() {
  const {
    state: { item }, // 다른 페이지에서 넘어올 경우 이 데이터가 없는 상태
  } = useLocation();
...
}

⭐️ 해결 방안

1. URL 구조에 대한 전반적인 수정이 필요

현재 : /채널아이디/영상아이디
수정안 : /아티스트명?v=영상아이디

위와 같은 수정안으로 관련 컴포넌트들의 수정이 필요할 것 같습니다.

2. 상세페이지에서 videoId를 통해 영상 정보를 얻어올 수 있도록 API호출 추가

videoId를 통해서 유튜브 영상으로 접근할 수 있고, 상세페이지로 넘어올 수 있는 모든 경우의 수는 아래와 같습니다.

• 미디어페이지 -> 상세페이지
• 마이페이지 좋아요 영상 -> 상세페이지
• 마이페이지 유저가 남긴 댓글 -> 상세페이지
• 공유된 소셜링크 -> 상세페이지

모두 공통적으로 videoId 값을 데이터로 가지고 있습니다. 이 부분을 활용해서 <DetailView> 컴포넌트가 <Media> 페이지로부터 값을 내려받는 것이 아니라, 컴포넌트 내에서 videoId를 통해 영상 정보를 얻어오는 유튜브 API를 호출하는 부분을 추가하여 렌더링 하는 방식으로 수정이 되어야 할 것 같습니다.

[Jinyang Park]

다음 프로젝트때 적용해보겠슴다

[kimwonjuun]

알겠습니다.