From 22a836d0b565288dc963adbc3fbdcf2bdcf43a49 Mon Sep 17 00:00:00 2001
From: Jeremy <102432453+shackstack@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:50:38 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20YoutubeEmbed=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20iframe=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- key props 적용
---
 .../components/YoutubeEmbed/YoutubeEmbed.tsx  | 26 +++++++++++++++++++
 .../src/components/YoutubeEmbed/index.tsx     |  3 +++
 2 files changed, 29 insertions(+)
 create mode 100644 frontend/src/components/YoutubeEmbed/YoutubeEmbed.tsx
 create mode 100644 frontend/src/components/YoutubeEmbed/index.tsx

diff --git a/frontend/src/components/YoutubeEmbed/YoutubeEmbed.tsx b/frontend/src/components/YoutubeEmbed/YoutubeEmbed.tsx
new file mode 100644
index 000000000..19f78f7e2
--- /dev/null
+++ 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
new file mode 100644
index 000000000..52a4a4af9
--- /dev/null
+++ b/frontend/src/components/YoutubeEmbed/index.tsx
@@ -0,0 +1,3 @@
+import YoutubeEmbed from './YoutubeEmbed';
+
+export default YoutubeEmbed;

From e7ed2f952920d5dd276031439f14ac061b886f29 Mon Sep 17 00:00:00 2001
From: Jeremy <102432453+shackstack@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:50:57 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20YoutubeEmbed=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../@common/VideoCarousel/VideoCarousel.tsx   | 28 ++++---------------
 .../DetailInformation.tsx                     | 12 +++-----
 .../RestaurantVideoList.tsx                   |  6 ++++
 3 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/@common/VideoCarousel/VideoCarousel.tsx b/frontend/src/components/@common/VideoCarousel/VideoCarousel.tsx
index 56d5359d0..07931c692 100644
--- 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/pages/RestaurantDetailPage/DetailInformation.tsx b/frontend/src/pages/RestaurantDetailPage/DetailInformation.tsx
index 910d95a32..4f3cc8f35 100644
--- 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
index aff8fb3d5..a475234c6 100644
--- 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;
+  }
 `;

From b13d61d32f172366fc07a35afa3311e5b9406a38 Mon Sep 17 00:00:00 2001
From: Jeremy <102432453+shackstack@users.noreply.github.com>
Date: Wed, 10 Apr 2024 09:51:44 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EB=A1=9C=EC=A7=81=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- window.location.href 방식에서 useNavigate 방식으로
---
 .../src/components/MiniRestaurantCard/MiniRestaurantCard.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MiniRestaurantCard/MiniRestaurantCard.tsx b/frontend/src/components/MiniRestaurantCard/MiniRestaurantCard.tsx
index c4415bc58..b1716c5b8 100644
--- 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}`);
     },
   });