hofix: 주변다른식당 클릭 이후 뒤로가기가 동작하지 않는 오류 개선 (#703)

* refactor: YoutubeEmbed 컴포넌트로 iframe 분리 - key props 적용 * refactor: YoutubeEmbed 컴포넌트 적용 * refactor: 페이지 라우팅 로직 변경 - window.location.href 방식에서 useNavigate 방식으로
woowacourse-teams · Apr 10, 2024 · 87ef8ca · 87ef8ca
1 parent 3bc7b4e
commit 87ef8ca
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 32 deletions.
diff --git a/frontend/src/components/@common/VideoCarousel/VideoCarousel.tsx b/frontend/src/components/@common/VideoCarousel/VideoCarousel.tsx
@@ -1,9 +1,10 @@
 import { styled } from 'styled-components';
 import Slider from 'react-slick';
-import { BORDER_RADIUS, hideScrollBar, paintSkeleton } from '~/styles/common';
+import { hideScrollBar } from '~/styles/common';
 import type { Video } from '~/@types/api.types';
 import { VideoCarouselSettings } from '~/constants/carouselSettings';
 import useMediaQuery from '~/hooks/useMediaQuery';
+import YoutubeEmbed from '~/components/YoutubeEmbed';
 
 interface VideoCarouselProps {
   title: string;
@@ -18,25 +19,15 @@ function VideoCarousel({ title, videos }: VideoCarouselProps) {
       {isMobile || videos.length <= 2 ? (
         <StyledVideoContainer>
           {videos.map(({ name, youtubeVideoKey }) => (
-            <StyledVideo
-              title={`${name}의 영상`}
-              src={`https://www.youtube.com/embed/${youtubeVideoKey}`}
-              allow="encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
+            <YoutubeEmbed pathParam={youtubeVideoKey} title={name} />
           ))}
         </StyledVideoContainer>
       ) : (
         <StyledSliderContainer>
           <Slider {...VideoCarouselSettings}>
             {videos.map(({ name, youtubeVideoKey }) => (
-              <StyledVideoWrapper>
-                <StyledVideo
-                  title={`${name}의 영상`}
-                  src={`https://www.youtube.com/embed/${youtubeVideoKey}`}
-                  allow="encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                />
+              <StyledVideoWrapper key={youtubeVideoKey}>
+                <YoutubeEmbed pathParam={youtubeVideoKey} title={name} />
               </StyledVideoWrapper>
             ))}
           </Slider>
@@ -59,15 +50,6 @@ const StyledVideoWrapper = styled.div`
   width: 100%;
 `;
 
-const StyledVideo = styled.iframe`
-  ${paintSkeleton}
-  width: 352px;
-  max-width: 352px;
-  height: 196px;
-
-  border-radius: ${BORDER_RADIUS.md};
-`;
-
 const StyledVideoContainer = styled.div`
   display: flex;
   gap: 2rem;

diff --git a/frontend/src/components/MiniRestaurantCard/MiniRestaurantCard.tsx b/frontend/src/components/MiniRestaurantCard/MiniRestaurantCard.tsx
@@ -1,5 +1,6 @@
 import { css, styled } from 'styled-components';
 import { MouseEventHandler, memo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Love from '~/assets/icons/love.svg';
 import { FONT_SIZE, truncateText } from '~/styles/common';
 import Star from '~/assets/icons/star.svg';
@@ -36,10 +37,11 @@ function MiniRestaurantCard({
 }: MiniRestaurantCardProps) {
   const { id, images, name, roadAddress, category, rating, distance } = restaurant;
   const { toggleRestaurantLike, isLiked } = useToggleLikeNotUpdate(restaurant);
+  const navigate = useNavigate();
 
   const register = useOnClickBlock({
     callback: () => {
-      window.location.href = `/restaurants/${id}?celebId=${celebs[0].id}`;
+      navigate(`/restaurants/${id}?celebId=${celebs[0].id}`);
     },
   });
 

diff --git a/frontend/src/components/YoutubeEmbed/YoutubeEmbed.tsx b/frontend/src/components/YoutubeEmbed/YoutubeEmbed.tsx
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
+
+interface YoutubeEmbedProps {
+  title: string;
+  pathParam: string;
+}
+
+function YoutubeEmbed({ title, pathParam }: YoutubeEmbedProps) {
+  return (
+    <StyledVideo
+      key={pathParam}
+      title={`${title}의 영상`}
+      src={`https://www.youtube.com/embed/${pathParam}`}
+      allow="encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    />
+  );
+}
+
+export default YoutubeEmbed;
+
+const StyledVideo = styled.iframe`
+  ${paintSkeleton}
+  border-radius: ${BORDER_RADIUS.md};
+`;
diff --git a/frontend/src/components/YoutubeEmbed/index.tsx b/frontend/src/components/YoutubeEmbed/index.tsx
@@ -0,0 +1,3 @@
+import YoutubeEmbed from './YoutubeEmbed';
+
+export default YoutubeEmbed;
diff --git a/frontend/src/pages/RestaurantDetailPage/DetailInformation.tsx b/frontend/src/pages/RestaurantDetailPage/DetailInformation.tsx
@@ -10,6 +10,7 @@ import { getRestaurantDetail, getRestaurantVideo } from '~/api/restaurant';
 import SuggestionButton from '~/components/SuggestionButton';
 
 import Naver from '~/assets/icons/naver-place.svg';
+import YoutubeEmbed from '~/components/YoutubeEmbed';
 
 interface DetailInformationProps {
   restaurantId: string;
@@ -23,13 +24,13 @@ function DetailInformation({ restaurantId, celebId }: DetailInformationProps) {
     data: { celebs, category, phoneNumber, roadAddress, naverMapUrl },
   } = useQuery<RestaurantData>({
     queryKey: ['restaurantDetail', restaurantId, celebId],
-    queryFn: async () => getRestaurantDetail(restaurantId, celebId),
+    queryFn: () => getRestaurantDetail(restaurantId, celebId),
     suspense: true,
   });
 
   const { data: restaurantVideo } = useQuery<VideoList>({
     queryKey: ['restaurantVideo', restaurantId],
-    queryFn: async () => getRestaurantVideo(restaurantId),
+    queryFn: () => getRestaurantVideo(restaurantId),
     suspense: true,
   });
 
@@ -93,12 +94,7 @@ function DetailInformation({ restaurantId, celebId }: DetailInformationProps) {
       </div>
       <StyledMainVideo>
         <h5>영상으로 보기</h5>
-        <iframe
-          title={`${restaurantVideo.content[0].name}의 영상`}
-          src={`https://www.youtube.com/embed/${restaurantVideo.content[0].youtubeVideoKey}`}
-          allow="encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        />
+        <YoutubeEmbed title={restaurantVideo.content[0].name} pathParam={restaurantVideo.content[0].youtubeVideoKey} />
       </StyledMainVideo>
     </StyledDetailInfo>
   );

diff --git a/frontend/src/pages/RestaurantDetailPage/RestaurantVideoList.tsx b/frontend/src/pages/RestaurantDetailPage/RestaurantVideoList.tsx
@@ -50,4 +50,10 @@ const StyledVideoSection = styled.section`
   display: flex;
   flex-direction: column;
   gap: 3.2rem 0;
+
+  iframe {
+    width: 352px;
+    max-width: 352px;
+    height: 196px;
+  }
 `;