유튜브 동영상 임베드 기능 구현

package.json

@@ -61,6 +61,7 @@
     "lint-staged": "^15.5.1",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
+    "react-youtube": "^10.1.0",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.2.9",
     "typescript": "^5",

src/features/post/contents/react-compiler.mdx

@@ -16,10 +16,14 @@ thumbnail: '/images/react-compiler-thumbnail.webp'
 
 그러던 중 우연히 유튜브 숏츠를 보다가 제로초 채널에서 React Compiler 1.0에 대해 소개하는 영상을 만나보게 되었다.
 
+<YouTube videoId="JVKT7z8w5q0" title="리액트가 알아서 성능최적화를 해준다...? (React compiler, 리액트 컴파일러 정식 출시)" />
+
 [리액트가 알아서 성능최적화를 해준다...? (React compiler, 리액트 컴파일러 정식 출시)](https://youtube.com/shorts/JVKT7z8w5q0?si=fqdeVTPfRInWCMkY)
 
 대충 React.memo, useMemo, useCallback 등을 사용하지 않아도 React가 알아서 성능 최적화를 해준다는 내용이었다. 조금 더 찾아보니 실제로 코드를 작성해보며 리액트 컴파일러를 사용했을때와 하지 않았을때를 비교하는 영상도 발견할 수 있었다.
 
+<YouTube videoId="4WyLSzwRMGg" title="리액트가 알아서 성능최적화를 해준다...? (React compiler, 리액트 컴파일러 정식 출시)" />
+
 [React Compiler 1.0 완벽 정리｜드디어 베타 끝!](https://youtu.be/4WyLSzwRMGg?si=zrW_HlS4vNeAGuHj)
 
 이 영상을 통해 리액트 컴파일러를 사용하게 되면 React 에서 알아서 불필요한 리렌더링을 방지해주고, 메모이제이션 또한 자동으로 처리해준다는 것을 알 수 있었다.

src/shared/components/features/mdx/MDXComponents.tsx

@@ -1,5 +1,7 @@
 import type { MDXComponents } from 'mdx/types';
 
+import { YouTube } from '../youtube';
+
 export const mdxComponents: MDXComponents = {
   // 제목 스타일링 (반응형)
   h1: ({ children }) => (
@@ -121,4 +123,6 @@ export const mdxComponents: MDXComponents = {
       {children}
     </td>
   ),
+
+  YouTube,
 };

src/shared/components/features/youtube/YouTubeEmbed.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import YouTube, { YouTubeProps } from 'react-youtube';
+
+type Props = {
+  videoId: string;
+  title: string;
+};
+
+export const YouTubeEmbed = ({ videoId, title }: Props) => {
+  const opts: YouTubeProps['opts'] = {
+    width: '100%',
+    height: '100%',
+    playerVars: {
+      autoplay: 0,
+      modestbranding: 1,
+      rel: 0,
+    },
+  };
+
+  return (
+    <div className='relative my-8 aspect-video w-full'>
+      <YouTube
+        className='absolute top-0 left-0 h-full w-full'
+        opts={opts}
+        title={title}
+        videoId={videoId}
+      />
+    </div>
+  );
+};

src/shared/components/features/youtube/index.ts

@@ -0,0 +1 @@
+export { YouTubeEmbed as YouTube } from './YouTubeEmbed';