Merge branch 'feature/video-official-site-overlay': 영상 종료 전 공식 링크 오버레이

- BusinessNameInputModal에 선택 입력 URL 필드 추가 (프로토콜 미입력 시 https:// 보정)
- onManualInput 콜백 체인(officialSiteUrl) 확장
- POST /marketing 요청 body에 official_site_url 전달 (미입력 시 null)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DKTAqpFj8pbWzgvq7MRDHk

src/App.tsx

@@ -354,14 +354,14 @@ const App: React.FC = () => {
   };
 
   // 업체명·주소 수동 입력으로 마케팅 분석 API 호출
-  const handleManualInput = async (businessName: string, address: string, category: string) => {
+  const handleManualInput = async (businessName: string, address: string, category: string, officialSiteUrl?: string) => {
     setAfterLoadTarget('generation_flow');
     setViewMode('loading');
     setIsAnalysisComplete(false);
     setError(null);
 
     try {
-      const data = await marketingAnalysis(businessName, address, category);
+      const data = await marketingAnalysis(businessName, address, category, officialSiteUrl);
 
       if (!validateCrawlingResponse(data)) {
         throw new Error(t('app.autocompleteError'));

src/components/BusinessNameInputModal.tsx

@@ -5,7 +5,7 @@ import CitySelectModal, { REGIONS } from './CitySelectModal';
 
 interface BusinessNameInputModalProps {
   onClose: () => void;
-  onSubmit: (businessName: string, address: string, category: string) => void;
+  onSubmit: (businessName: string, address: string, category: string, officialSiteUrl: string) => void;
 }
 
 const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
@@ -14,6 +14,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
   const [selectedCity, setSelectedCity] = useState('');
   const [detailAddress, setDetailAddress] = useState('');
   const [category, setCategory] = useState('');
+  const [officialSiteUrl, setOfficialSiteUrl] = useState('');
   const [isCityModalOpen, setIsCityModalOpen] = useState(false);
 
   useEffect(() => {
@@ -42,7 +43,12 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
   const handleSubmit = () => {
     if (!isValid) return;
     const fullAddress = `${selectedCity} ${detailAddress.trim()}`;
-    onSubmit(businessName.trim(), fullAddress, category.trim());
+    // 프로토콜 없이 입력하면 https:// 를 붙여서 전달
+    const trimmedUrl = officialSiteUrl.trim();
+    const normalizedUrl = trimmedUrl && !/^https?:\/\//i.test(trimmedUrl)
+      ? `https://${trimmedUrl}`
+      : trimmedUrl;
+    onSubmit(businessName.trim(), fullAddress, category.trim(), normalizedUrl);
     onClose();
   };
 
@@ -118,6 +124,19 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
               />
             </div>
 
+            <div className="manual-modal-field">
+              <label className="manual-modal-label">{t('landing.hero.manualLabelSiteUrl')}</label>
+              <input
+                type="url"
+                className="manual-modal-input"
+                placeholder={t('landing.hero.manualPlaceholderSiteUrl')}
+                value={officialSiteUrl}
+                onChange={e => setOfficialSiteUrl(e.target.value)}
+                onKeyDown={handleKeyDown}
+                maxLength={2048}
+              />
+            </div>
+
             <div className="manual-modal-actions">
               <button type="button" className="manual-modal-cancel" onClick={onClose}>
                 {t('common.cancel')}

src/components/ContentCardSocialActions.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { toggleVideoLike } from '../utils/api';
+import { API_URL, toggleVideoLike } from '../utils/api';
+import { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
 
 interface ContentCardSocialActionsProps {
   videoId: number;
   storeName: string;
   region?: string;
+  title?: string | null;
   commentCount: number;
   initialLikeCount: number;
   initialIsLiked?: boolean;
@@ -15,7 +16,7 @@ interface ContentCardSocialActionsProps {
 const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
   videoId,
   storeName,
-  region,
+  title,
   commentCount,
   initialLikeCount,
   initialIsLiked = false,
@@ -24,101 +25,27 @@ const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
 
   const [likeCount, setLikeCount] = useState(initialLikeCount);
   const [isLiked, setIsLiked] = useState(initialIsLiked);
-  const [copied, setCopied] = useState(false);
-  const [shareMenuOpen, setShareMenuOpen] = useState(false);
-  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
-  const [anchorRect, setAnchorRect] = useState<{ top: number; bottom: number; left: number } | null>(null);
-
-  const shareBtnRef = useRef<HTMLButtonElement>(null);
-  const shareMenuRef = useRef<HTMLDivElement>(null);
   const likeDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const shareUrl = `${window.location.origin}/video/${videoId}`;
+  const shareUrl = buildVideoShareUrl(API_URL, videoId);
+  const shareTitle = title || storeName || t('videoDetail.kakaoDefaultTitle');
 
-  useEffect(() => {
+  const handleShareBtnClick = async (e: React.MouseEvent) => {
-    if (!shareMenuOpen) return;
+    e.stopPropagation();
 
-    const closeMenu = () => setShareMenuOpen(false);
+    const handled = await tryNativeShare({
-
+      title: shareTitle,
-    const handleClickOutside = (e: MouseEvent) => {
+      url: shareUrl,
-      if (
+    });
-        shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node) &&
+    if (handled) {
-        shareBtnRef.current && !shareBtnRef.current.contains(e.target as Node)
+      return;
-      ) {
-        closeMenu();
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    window.addEventListener('scroll', closeMenu, true);
-    window.addEventListener('resize', closeMenu);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      window.removeEventListener('scroll', closeMenu, true);
-      window.removeEventListener('resize', closeMenu);
-    };
-  }, [shareMenuOpen]);
-
-  // 메뉴가 뷰포트 밖으로 넘어가지 않도록 실제 렌더된 크기 기준으로 위치 보정
-  useLayoutEffect(() => {
-    if (!shareMenuOpen || !anchorRect || !shareMenuRef.current) return;
-    const margin = 8;
-    const menuRect = shareMenuRef.current.getBoundingClientRect();
-
-    let left = anchorRect.left;
-    if (left + menuRect.width > window.innerWidth - margin) {
-      left = window.innerWidth - menuRect.width - margin;
     }
-    left = Math.max(margin, left);
 
-    let top = anchorRect.bottom + 6;
-    if (top + menuRect.height > window.innerHeight - margin) {
-      top = anchorRect.top - menuRect.height - 6;
-    }
-    top = Math.max(margin, top);
-
-    setMenuPos((prev) => (prev && prev.top === top && prev.left === left ? prev : { top, left }));
-  }, [shareMenuOpen, anchorRect]);
-
-  const handleCopyLink = async () => {
     try {
       await navigator.clipboard.writeText(shareUrl);
     } catch {
       // clipboard API 미지원 환경에서는 무시
     }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  const handleKakaoShare = () => {
-    const kakao = window.Kakao;
-    if (kakao?.Share) {
-      kakao.Share.sendDefault({
-        objectType: 'feed',
-        content: {
-          title: storeName || t('videoDetail.kakaoDefaultTitle'),
-          description: t('videoDetail.kakaoDescription', { region: region ?? '' }),
-          imageUrl: 'https://ado2.o2osolution.ai/favicon_48.svg',
-          link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
-        },
-        buttons: [{ title: t('videoDetail.kakaoButtonTitle'), link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
-      });
-    } else if (navigator.share) {
-      navigator.share({ url: shareUrl }).catch(() => {});
-    } else {
-      handleCopyLink();
-    }
-    setShareMenuOpen(false);
-  };
-
-  const handleFacebookShare = () => {
-    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
-    setShareMenuOpen(false);
-  };
-
-  const handleTwitterShare = () => {
-    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
-    setShareMenuOpen(false);
   };
 
   const handleLikeClick = (e: React.MouseEvent) => {
@@ -144,17 +71,6 @@ const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
     }, 500);
   };
 
-  const handleShareBtnClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const rect = shareBtnRef.current?.getBoundingClientRect();
-    if (rect) {
-      // 초기 추정 위치(측정 전 첫 렌더용) — useLayoutEffect가 실제 크기 기준으로 다시 보정한다
-      setAnchorRect({ top: rect.top, bottom: rect.bottom, left: rect.left });
-      setMenuPos({ top: rect.bottom + 6, left: rect.left });
-    }
-    setShareMenuOpen((v) => !v);
-  };
-
   return (
     <div className="content-card-social" onClick={(e) => e.stopPropagation()}>
       <button
@@ -175,7 +91,6 @@ const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
       </span>
 
       <button
-        ref={shareBtnRef}
         className="content-card-share-btn"
         onClick={handleShareBtnClick}
         title={t('videoDetail.share')}
@@ -185,42 +100,6 @@ const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
           <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" /><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
         </svg>
       </button>
-
-      {shareMenuOpen && menuPos && createPortal(
-        <div
-          ref={shareMenuRef}
-          className="video-detail-share-menu"
-          style={{ position: 'fixed', top: menuPos.top, left: menuPos.left }}
-        >
-          <button className="video-detail-share-item" onClick={handleKakaoShare}>
-            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="20" height="20" rx="4" fill="#FEE500" />
-              <path fillRule="evenodd" clipRule="evenodd" d="M10 3.5C6.134 3.5 3 6.01 3 9.1c0 1.98 1.2 3.72 3.01 4.76l-.74 2.75a.19.19 0 0 0 .28.21l3.37-2.23c.34.04.69.06 1.06.06 3.866 0 7-2.51 7-5.6S13.866 3.5 10 3.5z" fill="#3C1E1E" />
-            </svg>
-            {t('videoDetail.shareKakao')}
-          </button>
-          <button className="video-detail-share-item" onClick={handleFacebookShare}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
-              <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.887v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z" />
-            </svg>
-            {t('videoDetail.shareFacebook')}
-          </button>
-          <button className="video-detail-share-item" onClick={handleTwitterShare}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-            </svg>
-            {t('videoDetail.shareTwitter')}
-          </button>
-          <button className="video-detail-share-item" onClick={() => { handleCopyLink(); setShareMenuOpen(false); }}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <rect x="9" y="9" width="13" height="13" rx="2" />
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-            </svg>
-            {copied ? t('videoDetail.copied') : t('videoDetail.copyUrl')}
-          </button>
-        </div>,
-        document.body
-      )}
     </div>
   );
 };

src/components/SearchInputForm.tsx

@@ -38,7 +38,7 @@ const extractUrl = (text: string): string | null => {
 interface SearchInputFormProps {
   onAnalyze?: (value: string, type: SearchType) => void;
   onAutocomplete?: (data: AutocompleteRequest) => void;
-  onManualInput?: (businessName: string, address: string, category: string) => void;
+  onManualInput?: (businessName: string, address: string, category: string, officialSiteUrl?: string) => void;
   /** 직접입력 버튼 클릭 시 기본 동작(모달 열기)을 대체합니다. 제공 시 모달을 직접 관리해야 합니다. */
   onManualButtonClick?: () => void;
   error?: string | null;
@@ -340,9 +340,9 @@ const SearchInputForm: React.FC<SearchInputFormProps> = ({
       {!onManualButtonClick && isManualModalOpen && (
         <BusinessNameInputModal
           onClose={() => setIsManualModalOpen(false)}
-          onSubmit={(businessName, address, category) => {
+          onSubmit={(businessName, address, category, officialSiteUrl) => {
             setIsManualModalOpen(false);
-            onManualInput?.(businessName, address, category);
+            onManualInput?.(businessName, address, category, officialSiteUrl);
           }}
         />
       )}

src/components/SocialPostingModal.tsx

@@ -142,10 +142,7 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
   const channelDropdownRef = useRef<HTMLDivElement>(null);
   const privacyDropdownRef = useRef<HTMLDivElement>(null);
   const hasBeenOpenedRef = useRef(false);
-  const loadedForTaskIdRef = useRef<string | null>(null);
+  const loadedForVideoIdRef = useRef<number | null>(null);
-  const loadedAtRef = useRef<number>(0);
-  const seoCache = useRef<Map<string, { title: string; description: string; tags: string }>>(new Map());
-  const SEO_CACHE_TTL = 50 * 60 * 1000;
 
   // Upload progress modal state
   const [showUploadProgress, setShowUploadProgress] = useState(false);
@@ -212,28 +209,30 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
 
   // 소셜 계정 로드
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen) {
-
+      loadedForVideoIdRef.current = null;
-    const now = Date.now();
+      return;
+    }
 
     loadSocialAccounts();
 
-    const taskId = video?.task_id ?? null;
+    const videoId = video?.video_id ?? null;
-    const expired = now - loadedAtRef.current > SEO_CACHE_TTL;
+    if (!videoId || videoId === loadedForVideoIdRef.current) {
-
+      return;
-    if (taskId && (taskId !== loadedForTaskIdRef.current || expired)) {
-      loadedForTaskIdRef.current = taskId;
-      loadedAtRef.current = now;
-      loadAutocomplete();
-    } else if (taskId) {
-      const cached = seoCache.current.get(taskId);
-      if (cached) {
-        setTitle(cached.title);
-        setDescription(cached.description);
-        setTags(cached.tags);
-      }
     }
-  }, [isOpen, video?.task_id]);
+
+    loadedForVideoIdRef.current = videoId;
+
+    if (video?.title) {
+      setTitle(video.title);
+      setDescription(video.description || '');
+      setTags((video.hashtags || []).join(','));
+      setIsLoadingAutoDescription(false);
+      return;
+    }
+
+    loadAutocomplete();
+  }, [isOpen, video?.video_id, video?.title, video?.description, video?.hashtags]);
 
   const loadSocialAccounts = async () => {
     setIsLoadingAccounts(true);
@@ -259,29 +258,20 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
   };
 
   const loadAutocomplete = async () => {
-    if (!video?.task_id) return;
+    if (!video?.video_id) return;
 
     setIsLoadingAutoDescription(true);
     try {
       const requestPayload = {
-        task_id : video.task_id,
+        video_id: video.video_id,
       };
-      // Call autoSEO API
-      console.log('[Upload] Request payload:', requestPayload);
       const autoSeoResponse = await getAutoSeoYoutube(requestPayload);
 
-      // 각 필드가 있을 때만 덮어씌움 (기존 값 보호)
       if (autoSeoResponse.title) setTitle(autoSeoResponse.title);
       if (autoSeoResponse.description) setDescription(autoSeoResponse.description);
       if (autoSeoResponse.keywords) setTags(autoSeoResponse.keywords.join(','));
-      seoCache.current.set(video.task_id, {
-        title: autoSeoResponse.title || '',
-        description: autoSeoResponse.description || '',
-        tags: autoSeoResponse.keywords?.join(',') || '',
-      });
     } catch (error) {
       console.error('Failed to load autocomplete:', error);
-      // 실패해도 사용자에게 별도 알림 없이 조용히 처리
     } finally {
       setIsLoadingAutoDescription(false);
     }

src/components/VideoDetailContent.tsx

@@ -7,8 +7,11 @@ import {
   deleteComment,
   toggleVideoLike,
   isLoggedIn,
+  getUserMe,
+  API_URL,
 } from '../utils/api';
-import { VideoDetailItem, CommentItem } from '../types/api';
+import { VideoDetailItem, CommentItem, UserMeResponse } from '../types/api';
+import { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
 import LoginPromptModal from './LoginPromptModal';
 
 interface VideoDetailContentProps {
@@ -29,8 +32,8 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
   const [isLiked, setIsLiked] = useState(false);
 
   const [copied, setCopied] = useState(false);
-  const [shareMenuOpen, setShareMenuOpen] = useState(false);
   const [isLandscape, setIsLandscape] = useState(false);
+  const [showSiteOverlay, setShowSiteOverlay] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
 
   const [comments, setComments] = useState<CommentItem[]>([]);
@@ -42,16 +45,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
   const [commentSubmitting, setCommentSubmitting] = useState(false);
   const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [commentNickname, setCommentNickname] = useState('');
+  const [currentUser, setCurrentUser] = useState<UserMeResponse | null>(null);
-  const [commentAvatarSeedIdx, setCommentAvatarSeedIdx] = useState(0);
-
-  // 고정 seed 목록: 브라우저가 캐싱하여 중복 요청 없음
-  const AVATAR_SEEDS = ['42', '77', '123', '256', '512', '888', '1024', '2048', '3141', '9999'];
-  const commentAvatarSeed = AVATAR_SEEDS[commentAvatarSeedIdx % AVATAR_SEEDS.length];
-
-  const handleChangeAvatar = useCallback(() => {
-    setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
-  }, []);
 
   const fetchComments = useCallback(async (page: number, append = false) => {
     setCommentsLoading(true);
@@ -75,6 +69,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     const fetchVideo = async () => {
       setLoading(true);
       setError(null);
+      setShowSiteOverlay(false);
       try {
         const data = await getVideoById(videoId);
         setVideo(data);
@@ -92,6 +87,13 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     fetchComments(1);
   }, [videoId, fetchComments]);
 
+  useEffect(() => {
+    if (!authed) return;
+    getUserMe().then(setCurrentUser).catch((err) => {
+      console.error('Failed to fetch current user:', err);
+    });
+  }, [authed]);
+
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
     return t('videoDetail.dateFormat', { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() });
@@ -102,7 +104,8 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
   };
 
-  const shareUrl = `${window.location.origin}/video/${videoId}`;
+  const shareUrl = buildVideoShareUrl(API_URL, videoId);
+  const shareTitle = video?.title || video?.store_name || t('videoDetail.kakaoDefaultTitle');
 
   const handleCopyLink = async () => {
     try {
@@ -114,50 +117,17 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleKakaoShare = () => {
+  const handleShareButtonClick = async () => {
-    const kakao = window.Kakao;
+    const handled = await tryNativeShare({
-    if (kakao?.Share) {
+      title: shareTitle,
-      kakao.Share.sendDefault({
+      url: shareUrl,
-        objectType: 'feed',
+    });
-        content: {
+    if (handled) {
-          title: video?.store_name ?? t('videoDetail.kakaoDefaultTitle'),
+      return;
-          description: t('videoDetail.kakaoDescription', { region: video?.region ?? '' }),
-          imageUrl: 'https://ado2.o2osolution.ai/favicon_48.svg',
-          link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
-        },
-        buttons: [{ title: t('videoDetail.kakaoButtonTitle'), link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
-      });
-    } else if (navigator.share) {
-      navigator.share({ url: shareUrl }).catch(() => {});
-    } else {
-      handleCopyLink();
     }
-    setShareMenuOpen(false);
+    await handleCopyLink();
   };
 
-  const handleFacebookShare = () => {
-    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
-    setShareMenuOpen(false);
-  };
-
-  const handleTwitterShare = () => {
-    window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`, '_blank', 'noopener,width=600,height=600');
-    setShareMenuOpen(false);
-  };
-
-  const shareMenuRef = React.useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!shareMenuOpen) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node)) {
-        setShareMenuOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [shareMenuOpen]);
-
   const likeDebounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleLike = () => {
@@ -197,13 +167,11 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     if (!commentInput.trim() || commentSubmitting) return;
     setCommentSubmitting(true);
     try {
-      await postVideoComment(videoId, commentInput.trim(), commentNickname);
+      await postVideoComment(videoId, commentInput.trim());
       setCommentInput('');
       if (commentTextareaRef.current) {
         commentTextareaRef.current.style.height = 'auto';
       }
-      setCommentNickname('');
-      setCommentAvatarSeedIdx(prev => (prev + 1) % AVATAR_SEEDS.length);
       await fetchComments(1);
     } catch (err) {
       console.error('Failed to post comment:', err);
@@ -255,18 +223,46 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
         <div className="ado2-contents-error"><p>{error}</p></div>
       ) : video ? (
         <div className={`video-detail-content ${isLandscape ? 'landscape' : ''}`}>
-          <video
+          <div className="video-detail-player-wrap">
-            src={video.result_movie_url}
+            <video
-            controls
+              src={video.result_movie_url}
-            autoPlay
+              controls
-            controlsList="nodownload"
+              autoPlay
-            onContextMenu={(e) => e.preventDefault()}
+              controlsList="nodownload"
-            className="video-detail-player"
+              onContextMenu={(e) => e.preventDefault()}
-            onLoadedMetadata={(e) => {
+              className="video-detail-player"
-              const v = e.currentTarget;
+              onLoadedMetadata={(e) => {
-              setIsLandscape(v.videoWidth > v.videoHeight);
+                const v = e.currentTarget;
-            }}
+                setIsLandscape(v.videoWidth > v.videoHeight);
-          />
+              }}
+              onTimeUpdate={(e) => {
+                if (!video.official_site_url) return;
+                const v = e.currentTarget;
+                // 영상 종료 3초 전부터 공식 홈페이지 오버레이 노출
+                setShowSiteOverlay(
+                  Number.isFinite(v.duration) && v.duration - v.currentTime <= 3
+                );
+              }}
+            />
+            {video.official_site_url && showSiteOverlay && (
+              <a
+                href={video.official_site_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="video-site-overlay"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="12" cy="12" r="10"/>
+                  <line x1="2" y1="12" x2="22" y2="12"/>
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+                </svg>
+                <span className="video-site-overlay-text">
+                  <strong>{video.store_name}</strong>
+                  {t('videoDetail.siteOverlayLabel')}
+                </span>
+              </a>
+            )}
+          </div>
 
           <div className="video-detail-info">
             <h2 className="video-detail-store">{video.store_name}</h2>
@@ -284,52 +280,17 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 </svg>
                 {likeCount}
               </button>
-              <div style={{ position: 'relative' }} ref={shareMenuRef}>
+              <button
-                <button
+                className="video-detail-copy-btn"
-                  className="video-detail-copy-btn"
+                onClick={handleShareButtonClick}
-                  onClick={() => setShareMenuOpen(v => !v)}
+                title={t('videoDetail.share')}
-                >
+              >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
+                  <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
-                    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
-                  </svg>
+                </svg>
-                  {copied ? t('videoDetail.copied') : t('videoDetail.share')}
+                {copied ? t('videoDetail.copied') : t('videoDetail.share')}
-                </button>
+              </button>
-                {shareMenuOpen && (
-                  <div className="video-detail-share-menu">
-                    {/* 카카오톡 */}
-                    <button className="video-detail-share-item" onClick={handleKakaoShare}>
-                      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <rect width="20" height="20" rx="4" fill="#FEE500"/>
-                        <path fillRule="evenodd" clipRule="evenodd" d="M10 3.5C6.134 3.5 3 6.01 3 9.1c0 1.98 1.2 3.72 3.01 4.76l-.74 2.75a.19.19 0 0 0 .28.21l3.37-2.23c.34.04.69.06 1.06.06 3.866 0 7-2.51 7-5.6S13.866 3.5 10 3.5z" fill="#3C1E1E"/>
-                      </svg>
-                      {t('videoDetail.shareKakao')}
-                    </button>
-                    {/* 페이스북 */}
-                    <button className="video-detail-share-item" onClick={handleFacebookShare}>
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
-                        <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.887v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
-                      </svg>
-                      {t('videoDetail.shareFacebook')}
-                    </button>
-                    {/* X (트위터) */}
-                    <button className="video-detail-share-item" onClick={handleTwitterShare}>
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
-                      </svg>
-                      {t('videoDetail.shareTwitter')}
-                    </button>
-                    {/* URL 복사 */}
-                    <button className="video-detail-share-item" onClick={() => { handleCopyLink(); setShareMenuOpen(false); }}>
-                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <rect x="9" y="9" width="13" height="13" rx="2"/>
-                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-                      </svg>
-                      {copied ? t('videoDetail.copied') : t('videoDetail.copyUrl')}
-                    </button>
-                  </div>
-                )}
-              </div>
             </div>
 
             {/* 댓글 섹션 */}
@@ -339,25 +300,17 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 <span className="video-detail-comments-count">{commentsTotal}</span>
               </div>
 
-              {/* 댓글 작성자 프로필 선택 */}
+              {/* 댓글 작성자 프로필 (카카오 로그인 정보) */}
-              {authed && (
+              {authed && currentUser && (
                 <div className="video-detail-comment-profile">
-                  <img
+                  {currentUser.profile_image_url && (
-                    src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
+                    <img
-                    alt={t('videoDetail.changeAvatarTitle')}
+                      src={currentUser.profile_image_url}
-                    className="video-detail-comment-avatar"
+                      alt={currentUser.nickname}
-                    onClick={handleChangeAvatar}
+                      className="video-detail-comment-avatar"
-                    style={{ cursor: 'pointer' }}
+                    />
-                    title={t('videoDetail.changeAvatarTitle')}
+                  )}
-                  />
+                  <span className="video-detail-comment-nickname">{currentUser.nickname}</span>
-                  <input
-                    className="video-detail-nickname-input"
-                    type="text"
-                    placeholder={t('videoDetail.nicknamePlaceholder')}
-                    value={commentNickname}
-                    onChange={(e) => setCommentNickname(e.target.value)}
-                    maxLength={20}
-                  />
                 </div>
               )}
 
@@ -398,11 +351,13 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 <ul className="video-detail-comment-list">
                   {comments.map((c) => (
                     <li key={c.id} className="video-detail-comment-item">
-                      <img
+                      {c.profile_image_url && (
-                        src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${c.id}`}
+                        <img
-                        alt="avatar"
+                          src={c.profile_image_url}
-                        className="video-detail-comment-avatar"
+                          alt={c.nickname || t('videoDetail.anonymous')}
-                      />
+                          className="video-detail-comment-avatar"
+                        />
+                      )}
                       <div className="video-detail-comment-body">
                         <span className="video-detail-comment-nickname">
                           {c.nickname || t('videoDetail.anonymous')}
@@ -427,11 +382,13 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                           <ul className="video-detail-reply-list">
                             {c.replies.map((r) => (
                               <li key={r.id} className="video-detail-reply-item">
-                                <img
+                                {r.profile_image_url && (
-                                  src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${r.id}`}
+                                  <img
-                                  alt="avatar"
+                                    src={r.profile_image_url}
-                                  className="video-detail-comment-avatar small"
+                                    alt={r.nickname || t('videoDetail.anonymous')}
-                                />
+                                    className="video-detail-comment-avatar small"
+                                  />
+                                )}
                                 <div className="video-detail-comment-body">
                                   <span className="video-detail-comment-nickname">
                                     {r.nickname || t('videoDetail.anonymous')}

src/locales/en.json

@@ -208,7 +208,9 @@
       "manualPlaceholderAddress": "Enter the address",
       "manualPlaceholderRegion": "Select a region",
       "manualPlaceholderDetail": "Enter detail address (e.g. Gangnam-gu Teheran-ro 123)",
-      "manualPlaceholderCategory": "Enter the business category (e.g. pension, cafe, salon)"
+      "manualPlaceholderCategory": "Enter the business category (e.g. pension, cafe, salon)",
+      "manualLabelSiteUrl": "Website link (optional)",
+      "manualPlaceholderSiteUrl": "Enter the official website URL (e.g. https://example.com)"
     },
     "welcome": {
       "title": "Welcome to ADO2.AI",
@@ -620,18 +622,16 @@
     "dateFormat": "{{month}}/{{day}}/{{year}}",
     "kakaoDefaultTitle": "ADO2 Video",
     "kakaoDescription": "{{region}} · ADO2 AI Marketing Video",
-    "kakaoButtonTitle": "Watch Video",
     "deletedComment": "(This comment has been deleted.)",
     "closeAriaLabel": "Close",
     "share": "Share",
     "copied": "Copied!",
+    "siteOverlayLabel": "View more",
     "shareKakao": "KakaoTalk",
     "shareFacebook": "Facebook",
     "shareTwitter": "X (Twitter)",
     "copyUrl": "Copy URL",
     "commentsTitle": "Comments",
-    "changeAvatarTitle": "Click to change avatar",
-    "nicknamePlaceholder": "Author name",
     "commentPlaceholder": "Write a comment...",
     "commentLoginRequired": "Please log in to write a comment",
     "commentSubmitting": "Submitting",

src/locales/ko.json

@@ -207,7 +207,9 @@
       "manualPlaceholderAddress": "주소를 입력하세요.",
       "manualPlaceholderRegion": "지역을 선택하세요.",
       "manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)",
-      "manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)"
+      "manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)",
+      "manualLabelSiteUrl": "홈페이지 링크 (선택)",
+      "manualPlaceholderSiteUrl": "공식 홈페이지 주소를 입력하세요. (예: https://example.com)"
     },
     "welcome": {
       "title": "ADO2.AI에 오신 것을 환영합니다.",
@@ -619,18 +621,16 @@
     "dateFormat": "{{year}}년 {{month}}월 {{day}}일",
     "kakaoDefaultTitle": "ADO2 영상",
     "kakaoDescription": "{{region}} · ADO2 AI 마케팅 영상",
-    "kakaoButtonTitle": "영상 보기",
     "deletedComment": "(삭제된 댓글입니다.)",
     "closeAriaLabel": "닫기",
     "share": "공유하기",
     "copied": "복사됨!",
+    "siteOverlayLabel": "자세히 보기",
     "shareKakao": "카카오톡",
     "shareFacebook": "페이스북",
     "shareTwitter": "X (트위터)",
     "copyUrl": "URL 복사",
     "commentsTitle": "댓글",
-    "changeAvatarTitle": "클릭하여 아바타 변경",
-    "nicknamePlaceholder": "작성자 이름",
     "commentPlaceholder": "댓글을 입력하세요...",
     "commentLoginRequired": "로그인 후 댓글을 작성할 수 있습니다",
     "commentSubmitting": "작성 중",

src/pages/Dashboard/ADO2ContentsPage.tsx

@@ -151,7 +151,15 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = () => {
                 onKeyDown={(e) => e.key === 'Enter' && handleCardClick(video.video_id)}
               >
                 <div className="content-card-thumbnail ado2-gallery-thumbnail-wrap">
-                  {video.thumbnail_url ? (
+                  {video.poster_url ? (
+                    <img
+                      src={video.poster_url}
+                      alt={video.store_name}
+                      loading="lazy"
+                      decoding="async"
+                      className="content-video-preview"
+                    />
+                  ) : video.thumbnail_url ? (
                     <img
                       src={video.thumbnail_url}
                       alt={video.store_name}
@@ -186,6 +194,7 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = () => {
                         videoId={video.video_id}
                         storeName={video.store_name}
                         region={video.region}
+                        title={video.title}
                         commentCount={video.comment_count ?? 0}
                         initialLikeCount={video.like_count ?? 0}
                         initialIsLiked={video.is_liked_by_me}

src/pages/Dashboard/CompletionContent.tsx

@@ -563,6 +563,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
             created_at: new Date().toISOString(),
             like_count: 0,
             comment_count: 0,
+            is_liked_by_me: false,
           } : null}
         />
 

src/pages/Dashboard/GenerationFlow.tsx

@@ -299,13 +299,13 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   };
 
   // 업체명·주소 수동 입력으로 마케팅 분석 API 호출
-  const handleManualInput = async (businessName: string, address: string, category: string) => {
+  const handleManualInput = async (businessName: string, address: string, category: string, officialSiteUrl?: string) => {
     goToWizardStep(-1);
     setIsAnalysisComplete(false);
     setAnalysisError(null);
 
     try {
-      const data = await marketingAnalysis(businessName, address, category);
+      const data = await marketingAnalysis(businessName, address, category, officialSiteUrl);
 
       if (data.processed_info) {
         data.processed_info.customer_name = data.processed_info.customer_name || businessName;

src/pages/Dashboard/MyContentsPage.tsx

@@ -248,7 +248,15 @@ const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
                   style={{ cursor: 'pointer' }}
                   onClick={() => setSelectedVideoId(video.video_id)}
                 >
-                  {video.result_movie_url ? (
+                  {video.poster_url ? (
+                    <img
+                      src={video.poster_url}
+                      alt={video.store_name}
+                      loading="lazy"
+                      decoding="async"
+                      className="content-video-preview"
+                    />
+                  ) : video.result_movie_url ? (
                     <VideoPreviewCard
                       src={video.result_movie_url}
                       className="content-video-preview"
@@ -283,6 +291,7 @@ const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
                         videoId={video.video_id}
                         storeName={video.store_name}
                         region={video.region}
+                        title={video.title}
                         commentCount={video.comment_count ?? 0}
                         initialLikeCount={video.like_count ?? 0}
                         initialIsLiked={video.is_liked_by_me}

src/pages/Dashboard/UrlInputContent.tsx

@@ -5,7 +5,7 @@ import SearchInputForm, { SearchType } from '../../components/SearchInputForm';
 interface UrlInputContentProps {
   onAnalyze: (value: string, type?: SearchType) => void;
   onAutocomplete?: (data: AutocompleteRequest) => void;
-  onManualInput?: (businessName: string, address: string, category: string) => void;
+  onManualInput?: (businessName: string, address: string, category: string, officialSiteUrl?: string) => void;
   error: string | null;
 }
 

src/pages/Landing/HeroSection.tsx

@@ -35,7 +35,7 @@ const orbConfigs: OrbConfig[] = [
 interface HeroSectionProps {
   onAnalyze?: (value: string, type?: SearchType) => void;
   onAutocomplete?: (data: AutocompleteRequest) => void;
-  onManualInput?: (businessName: string, address: string, category: string) => void;
+  onManualInput?: (businessName: string, address: string, category: string, officialSiteUrl?: string) => void;
   onNext?: () => void;
   error?: string | null;
   scrollProgress?: number;
@@ -184,10 +184,10 @@ const HeroSection: React.FC<HeroSectionProps> = ({ onAnalyze, onAutocomplete, on
       {isManualModalOpen && (
         <BusinessNameInputModal
           onClose={() => setIsManualModalOpen(false)}
-          onSubmit={(businessName, address, category) => {
+          onSubmit={(businessName, address, category, officialSiteUrl) => {
             if (tutorial.isActive) tutorial.nextHint();
             setIsManualModalOpen(false);
-            onManualInput?.(businessName, address, category);
+            onManualInput?.(businessName, address, category, officialSiteUrl);
           }}
         />
       )}

src/styles/contents-social.css

@@ -720,18 +720,77 @@
   flex-direction: column;
 }
 
+.video-detail-player-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 360px;
+  flex-shrink: 0;
+}
+
+.video-detail-content.landscape .video-detail-player-wrap {
+  max-width: 100%;
+  width: 100%;
+}
+
 .video-detail-player {
   display: block;
   width: 100%;
   height: auto;
-  max-width: 360px;
   border-radius: 12px;
+}
+
+/* 영상 종료 직전 공식 홈페이지 링크 오버레이 (유튜브 엔드스크린 스타일) */
+.video-site-overlay {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 64px; /* 네이티브 컨트롤 바를 가리지 않도록 */
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 10px;
+  color: #fff;
+  text-decoration: none;
+  font-size: 13px;
+  line-height: 1.35;
+  backdrop-filter: blur(4px);
+  animation: video-site-overlay-in 0.3s ease-out;
+  transition: background 0.2s;
+}
+
+.video-site-overlay:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+.video-site-overlay svg {
   flex-shrink: 0;
 }
 
-.video-detail-content.landscape .video-detail-player {
+.video-site-overlay-text {
-  max-width: 100%;
+  display: flex;
-  width: 100%;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.video-site-overlay-text strong {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes video-site-overlay-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .video-detail-info {
@@ -1158,7 +1217,7 @@
   .video-detail-content {
     flex-direction: column;
   }
-  .video-detail-player {
+  .video-detail-player-wrap {
     max-width: 100%;
     width: 100%;
   }

src/styles/generation-flow.css

@@ -2805,6 +2805,7 @@
   .wizard-stepper {
     padding: 2rem;
     max-width: 100%;
+    margin-top: 30px;
   }
 
   .wizard-stepper-node {

src/styles/studio-assets.css

@@ -1146,6 +1146,36 @@
   }
 }
 
+/* 모바일: 제목은 한 줄로 유지하고, 권장 수량/카운트는 그 아래 줄로 내린다 */
+@media (max-width: 1023px) {
+  .asset-section-header {
+    align-items: flex-start;
+  }
+
+  .asset-section-header-left {
+    flex: 1;
+    min-width: 0;
+    flex-wrap: wrap;
+    row-gap: 4px;
+  }
+
+  .asset-section-header-left .asset-section-title {
+    order: 1;
+    white-space: nowrap;
+  }
+
+  .asset-section-header-left .asset-section-count {
+    order: 2;
+    white-space: nowrap;
+  }
+
+  .asset-section-header-left .asset-section-subtitle {
+    order: 3;
+    width: 100%;
+    white-space: nowrap;
+  }
+}
+
 /* Asset Image List */
 .asset-image-list {
   background-color: #002224;

src/types/api.ts

@@ -276,19 +276,28 @@ export interface VideoListItem {
   region: string;
   task_id: string;
   result_movie_url: string;
+  poster_url?: string | null;
   thumbnail_url?: string;
+  title?: string | null;
+  description?: string | null;
+  hashtags?: string[] | null;
+  official_site_url?: string | null;
   created_at: string;
   like_count: number;
   comment_count: number;
-  is_liked_by_me?: boolean;
+  is_liked_by_me: boolean;
 }
 
 // 비디오 상세 아이템
 export interface VideoDetailItem {
   video_id: number;
   result_movie_url: string;
+  poster_url?: string | null;
   store_name: string;
   region: string;
+  title?: string | null;
+  description?: string | null;
+  official_site_url?: string | null;
   created_at: string;
   like_count: number;
   is_liked_by_me: boolean;
@@ -309,6 +318,7 @@ export interface VideosListResponse {
 export interface CommentReply {
   id: number;
   nickname: string;
+  profile_image_url: string | null;
   content: string | null;
   is_deleted: boolean;
   is_mine: boolean;
@@ -319,6 +329,7 @@ export interface CommentReply {
 export interface CommentItem {
   id: number;
   nickname: string;
+  profile_image_url: string | null;
   content: string | null;
   is_deleted: boolean;
   is_mine: boolean;
@@ -390,7 +401,7 @@ export interface SocialDisconnectResponse {
 
 // 유튜브 SEO Description 자동완성 요청
 export interface YTAutoSeoRequest {
-  task_id: string;           // 아카이브의 비디오 ID
+  video_id: number;
 }
 
 // 유튜브 SEO Description 자동완성 응답

src/utils/api.ts

@@ -609,12 +609,12 @@ export async function getVideoComments(videoId: string, page: number = 1, pageSi
   return response.json();
 }
 
-// 댓글 작성
+// 댓글 작성 (작성자 닉네임/프로필은 서버가 로그인된 카카오 정보로 채움)
-export async function postVideoComment(videoId: string, content: string, nickname?: string, parentId?: number): Promise<CommentItem> {
+export async function postVideoComment(videoId: string, content: string, parentId?: number): Promise<CommentItem> {
   const response = await authenticatedFetch(`${API_URL}/comment/video/${videoId}`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ content, nickname: nickname || '익명', parent_id: parentId ?? null }),
+    body: JSON.stringify({ content, parent_id: parentId ?? null }),
   });
 
   if (!response.ok) {
@@ -1093,7 +1093,7 @@ export async function autocomplete(request: AutocompleteRequest): Promise<Crawli
 }
 
 // 업체명·주소 직접 입력으로 마케팅 분석
-export async function marketingAnalysis(storeName: string, address: string, category = ''): Promise<CrawlingResponse> {
+export async function marketingAnalysis(storeName: string, address: string, category = '', officialSiteUrl?: string): Promise<CrawlingResponse> {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), CRAWL_TIMEOUT);
 
@@ -1103,7 +1103,12 @@ export async function marketingAnalysis(storeName: string, address: string, cate
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ store_name: storeName, address, category }),
+      body: JSON.stringify({
+        store_name: storeName,
+        address,
+        category,
+        official_site_url: officialSiteUrl?.trim() || null,
+      }),
       signal: controller.signal,
     });
 

src/utils/nativeShare.ts

@@ -0,0 +1,29 @@
+/**
+ * 기기의 네이티브 공유 시트를 열고 요청을 처리했는지 반환합니다.
+ *
+ * 긴 `text`를 넣으면 카카오 등이 URL을 미리보기가 아니라 본문 텍스트로만 보냅니다.
+ * 제목·설명은 OG 페이지(`og:title`, `og:description`)에 두고, 여기에는 url(과 짧은 title)만 넘깁니다.
+ *
+ * 사용자가 공유 시트를 닫은 경우도 정상적으로 처리된 것으로 간주합니다.
+ */
+export async function tryNativeShare(data: ShareData): Promise<boolean> {
+  if (typeof navigator.share !== 'function') {
+    return false;
+  }
+
+  try {
+    await navigator.share(data);
+    return true;
+  } catch (error) {
+    if (error instanceof Error && error.name === 'AbortError') {
+      return true;
+    }
+
+    return false;
+  }
+}
+
+/** API 서버가 제공하는 영상별 Open Graph 공유 페이지 URL을 만듭니다. */
+export function buildVideoShareUrl(apiBaseUrl: string, videoId: number | string): string {
+  return `${apiBaseUrl.replace(/\/$/, '')}/video/share/${encodeURIComponent(String(videoId))}`;
+}