fix: Remove car_id property from adminAddVehicle call to fix TypeScript error

2026-02-01 21:16:03 +09:00
parent 5881126408
commit b340d338ff
31 changed files with 7071 additions and 1 deletions
--- a/temp_youtube_display.tsx
+++ b/temp_youtube_display.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { contentVideosApi, ContentVideoPublic } from "@/lib/api";
+import { Youtube, Play, X } from "lucide-react";
+
+interface YouTubeVideoDisplayProps {
+  entityType: "project" | "solution" | "product";
+  entityId: number;
+}
+
+export default function YouTubeVideoDisplay({
+  entityType,
+  entityId,
+}: YouTubeVideoDisplayProps) {
+  const { locale } = useLanguage();
+  const [videos, setVideos] = useState<ContentVideoPublic[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [playingVideo, setPlayingVideo] = useState<ContentVideoPublic | null>(null);
+
+  useEffect(() => {
+    const fetchVideos = async () => {
+      try {
+        const data = await contentVideosApi.getForEntity(entityType, entityId, locale);
+        setVideos(data);
+      } catch (error) {
+        console.error("Failed to fetch videos:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVideos();
+  }, [entityType, entityId, locale]);
+
+  if (loading || videos.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Video Section */}
+      <div className="mt-12">
+        <div className="flex items-center gap-2 mb-6">
+          <Youtube className="w-6 h-6 text-red-500" />
+          <h3 className="text-xl font-bold text-gray-900">
+            {locale === "ko" ? "관련 영상" :
+             locale === "en" ? "Related Videos" :
+             locale === "ja" ? "関連動画" : "相关视频"}
+          </h3>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {videos.map((video) => (
+            <div
+              key={video.id}
+              className="group relative bg-gray-100 rounded-xl overflow-hidden cursor-pointer"
+              onClick={() => setPlayingVideo(video)}
+            >
+              {/* Thumbnail */}
+              <div className="aspect-video relative">
+                <img
+                  src={video.thumbnail_url}
+                  alt={video.title}
+                  className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).src =
+                      `https://img.youtube.com/vi/${video.youtube_id}/hqdefault.jpg`;
+                  }}
+                />
+                {/* Play button overlay */}
+                <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/40 transition-colors">
+                  <div className="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform">
+                    <Play className="w-8 h-8 text-white ml-1" fill="white" />
+                  </div>
+                </div>
+              </div>
+              {/* Title */}
+              <div className="p-3">
+                <h4 className="font-medium text-gray-900 line-clamp-2">
+                  {video.title}
+                </h4>
+                {video.description && (
+                  <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+                    {video.description}
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Video Modal */}
+      {playingVideo && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+          onClick={() => setPlayingVideo(null)}
+        >
+          <div
+            className="relative w-full max-w-4xl mx-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Close button */}
+            <button
+              onClick={() => setPlayingVideo(null)}
+              className="absolute -top-12 right-0 text-white hover:text-gray-300 transition"
+            >
+              <X className="w-8 h-8" />
+            </button>
+
+            {/* Video iframe */}
+            <div className="aspect-video bg-black rounded-lg overflow-hidden">
+              <iframe
+                src={`${playingVideo.youtube_embed_url}?autoplay=1`}
+                title={playingVideo.title}
+                className="w-full h-full"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+              />
+            </div>
+
+            {/* Video title */}
+            <div className="mt-4 text-white">
+              <h3 className="text-xl font-semibold">{playingVideo.title}</h3>
+              {playingVideo.description && (
+                <p className="text-gray-300 mt-2">{playingVideo.description}</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}