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

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;

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}`);
     },
   });
 

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};
+`;

frontend/src/components/YoutubeEmbed/index.tsx

@@ -0,0 +1,3 @@
+import YoutubeEmbed from './YoutubeEmbed';
+
+export default YoutubeEmbed;

frontend/src/pages/RestaurantDetailPage/DetailInformation.tsx

@@ -10,6 +10,7 @@
 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 @@
     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,
   });
 
@@ -43,9 +44,9 @@
     async () => {
       try {
         await navigator.clipboard.writeText(text);
         alert('클립보드에 저장되었어요.');
       } catch (err) {
         alert('클립보드에 저장하는데 문제가 생겼어요.');
       }
     };
 
@@ -93,12 +94,7 @@
       </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>
   );

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;
+  }
 `;