src/App.tsx

@@ -354,14 +354,14 @@ const App: React.FC = () => {
   };
 
   // 업체명·주소 수동 입력으로 마케팅 분석 API 호출
-  const handleManualInput = async (businessName: string, address: string, category: string, officialSiteUrl?: string) => {
+  const handleManualInput = async (businessName: string, address: string, category: string) => {
     setAfterLoadTarget('generation_flow');
     setViewMode('loading');
     setIsAnalysisComplete(false);
     setError(null);
 
     try {
-      const data = await marketingAnalysis(businessName, address, category, officialSiteUrl);
+      const data = await marketingAnalysis(businessName, address, category);
 
       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, officialSiteUrl: string) => void;
+  onSubmit: (businessName: string, address: string, category: string) => void;
 }
 
 const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose, onSubmit }) => {
@@ -14,7 +14,6 @@ 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(() => {
@@ -43,12 +42,7 @@ const BusinessNameInputModal: React.FC<BusinessNameInputModalProps> = ({ onClose
   const handleSubmit = () => {
     if (!isValid) return;
     const fullAddress = `${selectedCity} ${detailAddress.trim()}`;
-    // 프로토콜 없이 입력하면 https:// 를 붙여서 전달
+    onSubmit(businessName.trim(), fullAddress, category.trim());
-    const trimmedUrl = officialSiteUrl.trim();
-    const normalizedUrl = trimmedUrl && !/^https?:\/\//i.test(trimmedUrl)
-      ? `https://${trimmedUrl}`
-      : trimmedUrl;
-    onSubmit(businessName.trim(), fullAddress, category.trim(), normalizedUrl);
     onClose();
   };
 
@@ -124,19 +118,6 @@ 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,13 +1,12 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { API_URL, toggleVideoLike } from '../utils/api';
+import { 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;
@@ -16,7 +15,7 @@ interface ContentCardSocialActionsProps {
 const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
   videoId,
   storeName,
-  title,
+  region,
   commentCount,
   initialLikeCount,
   initialIsLiked = false,
@@ -25,27 +24,101 @@ 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 = buildVideoShareUrl(API_URL, videoId);
+  const shareUrl = `${window.location.origin}/video/${videoId}`;
-  const shareTitle = title || storeName || t('videoDetail.kakaoDefaultTitle');
 
-  const handleShareBtnClick = async (e: React.MouseEvent) => {
+  useEffect(() => {
-    e.stopPropagation();
+    if (!shareMenuOpen) return;
 
-    const handled = await tryNativeShare({
+    const closeMenu = () => setShareMenuOpen(false);
-      title: shareTitle,
+
-      url: shareUrl,
+    const handleClickOutside = (e: MouseEvent) => {
-    });
+      if (
-    if (handled) {
+        shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node) &&
-      return;
+        shareBtnRef.current && !shareBtnRef.current.contains(e.target as Node)
+      ) {
+        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) => {
@@ -71,6 +144,17 @@ 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
@@ -91,6 +175,7 @@ const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
       </span>
 
       <button
+        ref={shareBtnRef}
         className="content-card-share-btn"
         onClick={handleShareBtnClick}
         title={t('videoDetail.share')}
@@ -100,6 +185,42 @@ 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, officialSiteUrl?: string) => void;
+  onManualInput?: (businessName: string, address: string, category: 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, officialSiteUrl) => {
+          onSubmit={(businessName, address, category) => {
             setIsManualModalOpen(false);
-            onManualInput?.(businessName, address, category, officialSiteUrl);
+            onManualInput?.(businessName, address, category);
           }}
         />
       )}

src/components/SocialPostingModal.tsx

@@ -142,7 +142,10 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
   const channelDropdownRef = useRef<HTMLDivElement>(null);
   const privacyDropdownRef = useRef<HTMLDivElement>(null);
   const hasBeenOpenedRef = useRef(false);
-  const loadedForVideoIdRef = useRef<number | null>(null);
+  const loadedForTaskIdRef = useRef<string | 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);
@@ -209,30 +212,28 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
 
   // 소셜 계정 로드
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen) return;
-      loadedForVideoIdRef.current = null;
+
-      return;
+    const now = Date.now();
-    }
 
     loadSocialAccounts();
 
-    const videoId = video?.video_id ?? null;
+    const taskId = video?.task_id ?? null;
-    if (!videoId || videoId === loadedForVideoIdRef.current) {
+    const expired = now - loadedAtRef.current > SEO_CACHE_TTL;
-      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);
@@ -258,20 +259,29 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
   };
 
   const loadAutocomplete = async () => {
-    if (!video?.video_id) return;
+    if (!video?.task_id) return;
 
     setIsLoadingAutoDescription(true);
     try {
       const requestPayload = {
-        video_id: video.video_id,
+        task_id : video.task_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,11 +7,8 @@ import {
   deleteComment,
   toggleVideoLike,
   isLoggedIn,
-  getUserMe,
-  API_URL,
 } from '../utils/api';
-import { VideoDetailItem, CommentItem, UserMeResponse } from '../types/api';
+import { VideoDetailItem, CommentItem } from '../types/api';
-import { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
 import LoginPromptModal from './LoginPromptModal';
 
 interface VideoDetailContentProps {
@@ -32,8 +29,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[]>([]);
@@ -45,7 +42,16 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
   const [commentSubmitting, setCommentSubmitting] = useState(false);
   const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const [currentUser, setCurrentUser] = useState<UserMeResponse | null>(null);
+  const [commentNickname, setCommentNickname] = useState('');
+  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);
@@ -69,7 +75,6 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     const fetchVideo = async () => {
       setLoading(true);
       setError(null);
-      setShowSiteOverlay(false);
       try {
         const data = await getVideoById(videoId);
         setVideo(data);
@@ -87,13 +92,6 @@ 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() });
@@ -104,8 +102,7 @@ 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 = buildVideoShareUrl(API_URL, videoId);
+  const shareUrl = `${window.location.origin}/video/${videoId}`;
-  const shareTitle = video?.title || video?.store_name || t('videoDetail.kakaoDefaultTitle');
 
   const handleCopyLink = async () => {
     try {
@@ -117,17 +114,50 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     setTimeout(() => setCopied(false), 2000);
   };
 
-  const handleShareButtonClick = async () => {
+  const handleKakaoShare = () => {
-    const handled = await tryNativeShare({
+    const kakao = window.Kakao;
-      title: shareTitle,
+    if (kakao?.Share) {
-      url: shareUrl,
+      kakao.Share.sendDefault({
-    });
+        objectType: 'feed',
-    if (handled) {
+        content: {
-      return;
+          title: video?.store_name ?? t('videoDetail.kakaoDefaultTitle'),
+          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();
     }
-    await 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 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 = () => {
@@ -167,11 +197,13 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
     if (!commentInput.trim() || commentSubmitting) return;
     setCommentSubmitting(true);
     try {
-      await postVideoComment(videoId, commentInput.trim());
+      await postVideoComment(videoId, commentInput.trim(), commentNickname);
       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);
@@ -223,46 +255,18 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
         <div className="ado2-contents-error"><p>{error}</p></div>
       ) : video ? (
         <div className={`video-detail-content ${isLandscape ? 'landscape' : ''}`}>
-          <div className="video-detail-player-wrap">
+          <video
-            <video
+            src={video.result_movie_url}
-              src={video.result_movie_url}
+            controls
-              controls
+            autoPlay
-              autoPlay
+            controlsList="nodownload"
-              controlsList="nodownload"
+            onContextMenu={(e) => e.preventDefault()}
-              onContextMenu={(e) => e.preventDefault()}
+            className="video-detail-player"
-              className="video-detail-player"
+            onLoadedMetadata={(e) => {
-              onLoadedMetadata={(e) => {
+              const v = e.currentTarget;
-                const v = e.currentTarget;
+              setIsLandscape(v.videoWidth > v.videoHeight);
-                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>
@@ -280,17 +284,52 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 </svg>
                 {likeCount}
               </button>
-              <button
+              <div style={{ position: 'relative' }} ref={shareMenuRef}>
-                className="video-detail-copy-btn"
+                <button
-                onClick={handleShareButtonClick}
+                  className="video-detail-copy-btn"
-                title={t('videoDetail.share')}
+                  onClick={() => setShareMenuOpen(v => !v)}
-              >
+                >
-                <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>
 
             {/* 댓글 섹션 */}
@@ -300,17 +339,25 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 <span className="video-detail-comments-count">{commentsTotal}</span>
               </div>
 
-              {/* 댓글 작성자 프로필 (카카오 로그인 정보) */}
+              {/* 댓글 작성자 프로필 선택 */}
-              {authed && currentUser && (
+              {authed && (
                 <div className="video-detail-comment-profile">
-                  {currentUser.profile_image_url && (
+                  <img
-                    <img
+                    src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
-                      src={currentUser.profile_image_url}
+                    alt={t('videoDetail.changeAvatarTitle')}
-                      alt={currentUser.nickname}
+                    className="video-detail-comment-avatar"
-                      className="video-detail-comment-avatar"
+                    onClick={handleChangeAvatar}
-                    />
+                    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>
               )}
 
@@ -351,13 +398,11 @@ 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">
-                      {c.profile_image_url && (
+                      <img
-                        <img
+                        src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${c.id}`}
-                          src={c.profile_image_url}
+                        alt="avatar"
-                          alt={c.nickname || t('videoDetail.anonymous')}
+                        className="video-detail-comment-avatar"
-                          className="video-detail-comment-avatar"
+                      />
-                        />
-                      )}
                       <div className="video-detail-comment-body">
                         <span className="video-detail-comment-nickname">
                           {c.nickname || t('videoDetail.anonymous')}
@@ -382,13 +427,11 @@ 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">
-                                {r.profile_image_url && (
+                                <img
-                                  <img
+                                  src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${r.id}`}
-                                    src={r.profile_image_url}
+                                  alt="avatar"
-                                    alt={r.nickname || t('videoDetail.anonymous')}
+                                  className="video-detail-comment-avatar small"
-                                    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,9 +208,7 @@
       "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",
@@ -262,21 +260,15 @@
     "selectedImages": "Selected Images",
     "imageAlt": "Image",
     "uploadBadge": "Uploaded",
-    "previewUnavailable": "No preview",
     "imageUpload": "Image Upload",
     "dragAndDrop": "Drag & drop or\nclick to upload",
     "videoRatio": "Video Ratio",
-    "minImages": "Recommended 30+ images",
+    "minImages": "Min. 5 images",
     "youtubeShorts": "YouTube Shorts",
     "youtubeVideo": "YouTube Video",
     "back": "Go Back",
     "loadMore": "Load more",
     "uploadFailed": "Image upload failed.",
-    "uploadErrorTitle": "Image Upload Error",
-    "uploadErrorConfirm": "OK",
-    "duplicateSkippedTitle": "Duplicate Images Skipped",
-    "duplicateSkippedMessage": "Skipped {{count}} image(s) that were already added.",
-    "preparingPreviews": "Preparing previews ({{done}} / {{total}})",
     "uploading": "Uploading... (30 sec – 1 min)",
     "nextStep": "Next Step"
   },
@@ -622,16 +614,18 @@
     "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,9 +207,7 @@
       "manualPlaceholderAddress": "주소를 입력하세요.",
       "manualPlaceholderRegion": "지역을 선택하세요.",
       "manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)",
-      "manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)",
+      "manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)"
-      "manualLabelSiteUrl": "홈페이지 링크 (선택)",
-      "manualPlaceholderSiteUrl": "공식 홈페이지 주소를 입력하세요. (예: https://example.com)"
     },
     "welcome": {
       "title": "ADO2.AI에 오신 것을 환영합니다.",
@@ -261,21 +259,15 @@
     "selectedImages": "선택된 이미지",
     "imageAlt": "이미지",
     "uploadBadge": "업로드",
-    "previewUnavailable": "미리보기 없음",
     "imageUpload": "이미지 업로드",
     "dragAndDrop": "이미지를 끌어다 놓거나\n클릭하여 업로드",
     "videoRatio": "영상 비율",
-    "minImages": "권장 30장 이상",
+    "minImages": "최소 5장",
     "youtubeShorts": "유튜브 쇼츠",
     "youtubeVideo": "유튜브 일반",
     "back": "뒤로가기",
     "loadMore": "더보기",
     "uploadFailed": "이미지 업로드에 실패했습니다.",
-    "uploadErrorTitle": "이미지 업로드 초과",
-    "uploadErrorConfirm": "확인",
-    "duplicateSkippedTitle": "중복 이미지 제외",
-    "duplicateSkippedMessage": "이미 추가된 이미지 {{count}}장을 제외했습니다.",
-    "preparingPreviews": "미리보기 준비 중 ({{done}} / {{total}})",
     "uploading": "업로드 중 (30~60초 소요)",
     "nextStep": "다음 단계"
   },
@@ -621,16 +613,18 @@
     "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,15 +151,7 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = () => {
                 onKeyDown={(e) => e.key === 'Enter' && handleCardClick(video.video_id)}
               >
                 <div className="content-card-thumbnail ado2-gallery-thumbnail-wrap">
-                  {video.poster_url ? (
+                  {video.thumbnail_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}
@@ -194,7 +186,6 @@ 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/AssetManagementContent.tsx

@@ -3,19 +3,13 @@ import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageItem, ImageUrlItem } from '../../types/api';
 import { uploadImages } from '../../utils/api';
-import { isImageInputFile } from '../../utils/imageCompression.ts';
-import { MAX_IMAGES_PER_UPLOAD_TASK } from '../../utils/imageUpload.ts';
-import { splitDuplicateFiles } from '../../utils/imageDedup.ts';
 
 interface AssetManagementContentProps {
   onNext: (imageTaskId: string) => void;
   onBack?: () => void;
   imageList: ImageItem[];
   onRemoveImage: (index: number) => void;
-  onAddImages: (
+  onAddImages: (files: File[]) => void;
-    files: File[],
-    onProgress: (done: number, total: number) => void
-  ) => Promise<void>;
 }
 
 type VideoRatio = 'vertical' | 'horizontal';
@@ -33,11 +27,9 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
-  // 업로드 실패와 중복 제외 안내가 같은 다이얼로그 마크업을 공유한다.
+  const [uploadError, setUploadError] = useState<string | null>(null);
-  const [dialog, setDialog] = useState<{ title: string; message: string } | null>(null);
   const [videoRatio, setVideoRatio] = useState<VideoRatio>('vertical');
   const [displayCount, setDisplayCount] = useState(IMAGES_PER_PAGE);
-  const [thumbnailProgress, setThumbnailProgress] = useState<{ done: number; total: number } | null>(null);
 
   useEffect(() => {
     const savedRatio = localStorage.getItem('castad_video_ratio') as VideoRatio;
@@ -46,26 +38,12 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
     }
   }, []);
 
-  useEffect(() => {
-    if (!dialog) return;
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        setDialog(null);
-      }
-    };
-
-    window.addEventListener('keydown', handleEscape);
-    return () => window.removeEventListener('keydown', handleEscape);
-  }, [dialog]);
-
   const handleVideoRatioChange = (ratio: VideoRatio) => {
     setVideoRatio(ratio);
     localStorage.setItem('castad_video_ratio', ratio);
   };
 
-  const getImageSrc = (item: ImageItem): string | null => {
+  const getImageSrc = (item: ImageItem): string => {
     return item.type === 'url' ? item.preview_url : item.preview;
   };
 
@@ -74,7 +52,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
     setIsUploading(true);
     setUploadProgress(0);
-    setDialog(null);
+    setUploadError(null);
 
     const interval = setInterval(() => {
       setUploadProgress(prev => {
@@ -107,37 +85,13 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
     } catch (error) {
       clearInterval(interval);
       console.error('Image upload failed:', error);
-      setDialog({
+      setUploadError(error instanceof Error ? error.message : t('assetManagement.uploadFailed'));
-        title: t('assetManagement.uploadErrorTitle'),
-        message: error instanceof Error ? error.message : t('assetManagement.uploadFailed'),
-      });
     } finally {
       setIsUploading(false);
       setUploadProgress(0);
     }
   };
 
-  const runAddImages = async (files: File[]) => {
-    const { newFiles, duplicateCount } = splitDuplicateFiles(imageList, files);
-
-    if (newFiles.length > 0) {
-      setThumbnailProgress({ done: 0, total: newFiles.length });
-      try {
-        await onAddImages(newFiles, (done, total) => setThumbnailProgress({ done, total }));
-      } finally {
-        setThumbnailProgress(null);
-      }
-    }
-
-    // 썸네일 생성 오버레이에 가려지지 않도록 작업이 끝난 뒤에 안내한다.
-    if (duplicateCount > 0) {
-      setDialog({
-        title: t('assetManagement.duplicateSkippedTitle'),
-        message: t('assetManagement.duplicateSkippedMessage', { count: duplicateCount }),
-      });
-    }
-  };
-
   const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -146,8 +100,10 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    const files = Array.from(e.dataTransfer.files).filter(isImageInputFile);
+    const files = Array.from(e.dataTransfer.files).filter((file: File) =>
-    if (files.length > 0) void runAddImages(files);
+      file.type.startsWith('image/')
+    );
+    if (files.length > 0) onAddImages(files);
   };
 
   const handleFileSelect = () => {
@@ -157,7 +113,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
-      void runAddImages(Array.from(files));
+      onAddImages(Array.from(files));
       e.target.value = '';
     }
   };
@@ -167,25 +123,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
   return (
     <main className="asset-page">
-      {thumbnailProgress && (
-        <div className="asset-upload-overlay">
-          <div className="asset-upload-overlay-content">
-            <div className="loading-spinner">
-              <div className="loading-ring"></div>
-              <div className="loading-dot">
-                <div className="loading-dot-inner"></div>
-              </div>
-            </div>
-            <p className="comp2-loading-text">
-              {t('assetManagement.preparingPreviews', {
-                done: thumbnailProgress.done,
-                total: thumbnailProgress.total,
-              })}
-            </p>
-          </div>
-        </div>
-      )}
-
       {isUploading && (
         <div className="asset-upload-overlay">
           <div className="asset-upload-overlay-content">
@@ -209,37 +146,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
         </div>
       )}
 
-      {dialog && (
-        <div
-          className="asset-upload-error-overlay"
-          onClick={() => setDialog(null)}
-        >
-          <div
-            className="asset-upload-error-dialog"
-            role="alertdialog"
-            aria-modal="true"
-            aria-labelledby="asset-upload-error-title"
-            aria-describedby="asset-upload-error-message"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <h2 id="asset-upload-error-title" className="asset-upload-error-title">
-              {dialog.title}
-            </h2>
-            <p id="asset-upload-error-message" className="asset-upload-error-message">
-              {dialog.message}
-            </p>
-            <button
-              type="button"
-              className="asset-upload-error-confirm"
-              onClick={() => setDialog(null)}
-              autoFocus
-            >
-              {t('assetManagement.uploadErrorConfirm')}
-            </button>
-          </div>
-        </div>
-      )}
-
       {/* Fixed Header - 뒤로가기 버튼 */}
       <div className="asset-sticky-header">
         {onBack && (
@@ -263,13 +169,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
               <div className="asset-section-header-left">
                 <h3 className="asset-section-title">{t('assetManagement.selectedImages')}</h3>
                 <span className="asset-section-subtitle">{t('assetManagement.minImages')}</span>
-                <span
-                  className={`asset-section-count${
-                    imageList.length > MAX_IMAGES_PER_UPLOAD_TASK ? ' asset-section-count-over' : ''
-                  }`}
-                >
-                  {imageList.length} / {MAX_IMAGES_PER_UPLOAD_TASK}
-                </span>
               </div>
               <button onClick={handleFileSelect} className="asset-mobile-upload-btn">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
@@ -283,46 +182,27 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
             <div className="asset-image-list">
               {visibleImages.length > 0 && (
                 <div className="asset-image-grid">
-                  {visibleImages.map((item, i) => {
+                  {visibleImages.map((item, i) => (
-                    const src = getImageSrc(item);
+                    <div key={i} className="asset-image-item">
-                    const fileName = item.type === 'file' ? item.file.name : '';
+                      <img
-                    return (
+                        src={getImageSrc(item)}
-                      <div key={i} className="asset-image-item">
+                        alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
-                        {src ? (
+                        referrerPolicy="no-referrer"
-                          <img
+                      />
-                            src={src}
+                      {item.type === 'file' && (
-                            alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
+                        <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
-                            referrerPolicy="no-referrer"
+                      )}
-                            loading="lazy"
+                      <button
-                            decoding="async"
+                        onClick={() => onRemoveImage(i)}
-                          />
+                        className="asset-image-remove"
-                        ) : (
+                      >
-                          <div className="asset-image-placeholder" title={fileName}>
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                          <line x1="18" y1="6" x2="6" y2="18"/>
-                              <rect x="3" y="3" width="18" height="18" rx="2"/>
+                          <line x1="6" y1="6" x2="18" y2="18"/>
-                              <circle cx="8.5" cy="8.5" r="1.5"/>
+                        </svg>
-                              <path d="M21 15l-5-5L5 21"/>
+                      </button>
-                            </svg>
+                    </div>
-                            <span className="asset-image-placeholder-name">
+                  ))}
-                              {fileName || t('assetManagement.previewUnavailable')}
-                            </span>
-                          </div>
-                        )}
-                        {item.type === 'file' && (
-                          <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
-                        )}
-                        <button
-                          onClick={() => onRemoveImage(i)}
-                          className="asset-image-remove"
-                        >
-                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                            <line x1="18" y1="6" x2="6" y2="18"/>
-                            <line x1="6" y1="6" x2="18" y2="18"/>
-                          </svg>
-                        </button>
-                      </div>
-                    );
-                  })}
                 </div>
               )}
             </div>
@@ -388,6 +268,9 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
 
       {/* Fixed Footer - 다음 단계 버튼 */}
       <div className="asset-sticky-footer">
+        {uploadError && (
+          <p className="text-red-500 text-sm mb-2">{uploadError}</p>
+        )}
         <button
           onClick={handleNextWithUpload}
           disabled={imageList.length === 0 || isUploading}
@@ -400,7 +283,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
       <input
         ref={fileInputRef}
         type="file"
-        accept="image/*,.heic,.heif"
+        accept="image/*"
         multiple
         onChange={handleFileChange}
         className="hidden"

src/pages/Dashboard/CompletionContent.tsx

@@ -563,7 +563,6 @@ 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

@@ -20,7 +20,6 @@ import { useTutorial } from '../../components/Tutorial/useTutorial';
 import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
 import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay';
 import WizardStepper from '../../components/WizardStepper';
-import { createPreviewThumbnail } from '../../utils/imageCompression.ts';
 
 const WIZARD_STEP_KEY = 'castad_wizard_step';
 const ACTIVE_ITEM_KEY = 'castad_active_item';
@@ -29,15 +28,6 @@ const IMAGE_TASK_ID_KEY = 'castad_image_task_id';
 const ANALYSIS_DATA_KEY = 'castad_analysis_data';
 import { saveSearchHistory } from '../../components/SearchHistory/useSearchHistory';
 
-/** 파일 이미지의 썸네일 objectURL 을 일괄 해제한다. preview 가 null 인 항목은 건너뛴다. */
-const revokeAllPreviews = (items: ImageItem[]) => {
-  items.forEach(item => {
-    if (item.type === 'file' && item.preview) {
-      URL.revokeObjectURL(item.preview);
-    }
-  });
-};
-
 // 다른 컴포넌트에서 사용하는 storage key들 (초기화용)
 const SONG_GENERATION_KEY = 'castad_song_generation';
 const VIDEO_GENERATION_KEY = 'castad_video_generation';
@@ -185,15 +175,6 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   };
 
   const [imageList, setImageList] = useState<ImageItem[]>(getInitialImageList());
-  const imageListRef = useRef<ImageItem[]>(imageList);
-  imageListRef.current = imageList;
-
-  // 의존성 배열에 imageList 를 넣으면 이미지를 추가할 때마다 cleanup 이 돌아
-  // 방금 만든 썸네일이 즉시 revoke 된다. 반드시 빈 배열이어야 한다.
-  useEffect(() => {
-    return () => revokeAllPreviews(imageListRef.current);
-  }, []);
-
   const prevAnalysisMIdRef = useRef<number | null | undefined>(analysisData?.m_id);
 
   // analysisData 변경 시 m_id가 바뀐 경우(새로운 분석)에만 imageList 업데이트
@@ -202,8 +183,6 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     console.log('[GenerationFlow] analysisData updated, m_id:', analysisData?.m_id);
     if (analysisData?.image_list && analysisData.image_list.length > 0) {
       if (prevAnalysisMIdRef.current !== analysisData.m_id) {
-        // 목록을 통째로 교체하므로 기존 파일 썸네일을 먼저 해제한다.
-        revokeAllPreviews(imageListRef.current);
         setImageList(analysisData.image_list.map(item => ({ type: 'url' as const, url: item.original, preview_url: item.preview })));
       }
     }
@@ -213,35 +192,21 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   const handleRemoveImage = (index: number) => {
     setImageList(prev => {
       const item = prev[index];
-      // 파일 이미지인 경우 썸네일 메모리 해제 (생성 실패 시 preview 는 null)
+      // 파일 이미지인 경우 메모리 해제
-      if (item.type === 'file' && item.preview) {
+      if (item.type === 'file') {
         URL.revokeObjectURL(item.preview);
       }
       return prev.filter((_, i) => i !== index);
     });
   };
 
-  const handleAddImages = async (
+  const handleAddImages = (files: File[]) => {
-    files: File[],
+    const newImages: ImageItem[] = files.map(file => ({
-    onProgress: (done: number, total: number) => void
+      type: 'file',
-  ) => {
+      file,
-    const total = files.length;
+      preview: URL.createObjectURL(file),
-    const newImages: ImageItem[] = [];
+    }));
-
+    // 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
-    onProgress(0, total);
-
-    // 반드시 순차 처리한다. Promise.all 로 동시에 돌리면 원본 크기 비트맵이
-    // 한꺼번에 메모리에 올라가, 이 작업이 없애려던 문제가 그대로 재현된다.
-    for (const file of files) {
-      const preview = await createPreviewThumbnail(file);
-      newImages.push({ type: 'file', file, preview });
-      onProgress(newImages.length, total);
-      // 진행률이 실제로 화면에 그려지도록 매 장마다 렌더링 기회를 넘긴다.
-      await new Promise(resolve => setTimeout(resolve, 0));
-    }
-
-    // 장마다 setState 하면 그리드가 N 번 재조정된다. 전부 끝난 뒤 한 번만 반영한다.
-    // 새로 추가된 이미지를 배열 앞에 둔다 (최신 이미지가 상단에 표시)
     setImageList(prev => [...newImages, ...prev]);
   };
 
@@ -253,7 +218,6 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     setSongTaskId(null);
     setImageTaskId(null);
     setAnalysisData(null);
-    revokeAllPreviews(imageListRef.current);
     setImageList([]);
     onHome();
   };
@@ -299,13 +263,13 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   };
 
   // 업체명·주소 수동 입력으로 마케팅 분석 API 호출
-  const handleManualInput = async (businessName: string, address: string, category: string, officialSiteUrl?: string) => {
+  const handleManualInput = async (businessName: string, address: string, category: string) => {
     goToWizardStep(-1);
     setIsAnalysisComplete(false);
     setAnalysisError(null);
 
     try {
-      const data = await marketingAnalysis(businessName, address, category, officialSiteUrl);
+      const data = await marketingAnalysis(businessName, address, category);
 
       if (data.processed_info) {
         data.processed_info.customer_name = data.processed_info.customer_name || businessName;

src/pages/Dashboard/MyContentsPage.tsx

@@ -248,15 +248,7 @@ const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
                   style={{ cursor: 'pointer' }}
                   onClick={() => setSelectedVideoId(video.video_id)}
                 >
-                  {video.poster_url ? (
+                  {video.result_movie_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"
@@ -291,7 +283,6 @@ 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, officialSiteUrl?: string) => void;
+  onManualInput?: (businessName: string, address: string, category: 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, officialSiteUrl?: string) => void;
+  onManualInput?: (businessName: string, address: string, category: 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, officialSiteUrl) => {
+          onSubmit={(businessName, address, category) => {
             if (tutorial.isActive) tutorial.nextHint();
             setIsManualModalOpen(false);
-            onManualInput?.(businessName, address, category, officialSiteUrl);
+            onManualInput?.(businessName, address, category);
           }}
         />
       )}

src/styles/contents-social.css

@@ -689,6 +689,10 @@
   flex-direction: column;
 }
 
+.video-detail-header {
+  /* margin-bottom: 24px; */
+}
+
 .video-detail-back-btn {
   display: flex;
   align-items: center;
@@ -720,77 +724,18 @@
   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-site-overlay-text {
+.video-detail-content.landscape .video-detail-player {
-  display: flex;
+  max-width: 100%;
-  flex-direction: column;
+  width: 100%;
-  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 {
@@ -1217,7 +1162,7 @@
   .video-detail-content {
     flex-direction: column;
   }
-  .video-detail-player-wrap {
+  .video-detail-player {
     max-width: 100%;
     width: 100%;
   }

src/styles/generation-flow.css

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

src/styles/studio-assets.css

@@ -832,72 +832,6 @@
   gap: 0;
 }
 
-/* Upload Error Dialog */
-.asset-upload-error-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background: rgba(0, 17, 18, 0.82);
-  backdrop-filter: blur(4px);
-}
-
-.asset-upload-error-dialog {
-  width: min(100%, 420px);
-  padding: 1.5rem;
-  background: #01393B;
-  border: 1px solid #379599;
-  border-radius: 20px;
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-}
-
-.asset-upload-error-title {
-  margin: 0;
-  color: #94FBE0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 1.3;
-}
-
-.asset-upload-error-message {
-  margin: 0.75rem 0 1.5rem;
-  color: #E5F1F2;
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-.asset-upload-error-confirm {
-  width: 100%;
-  min-height: 44px;
-  padding: 0.75rem 1rem;
-  color: #002224;
-  background: #94FBE0;
-  border: 0;
-  border-radius: 999px;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  cursor: pointer;
-  transition: background-color 0.2s, transform 0.2s;
-}
-
-.asset-upload-error-confirm:hover {
-  background: #B8FFE9;
-}
-
-.asset-upload-error-confirm:active {
-  transform: translateY(1px);
-}
-
-.asset-upload-error-confirm:focus-visible {
-  outline: 3px solid #CFABFB;
-  outline-offset: 3px;
-}
-
 
 /* Fixed Header - 뒤로가기 */
 .asset-sticky-header {
@@ -1098,20 +1032,6 @@
   letter-spacing: -0.006em;
 }
 
-.asset-section-count {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #9BCACC;
-  line-height: 1.19;
-  letter-spacing: -0.006em;
-  font-variant-numeric: tabular-nums;
-}
-
-/* 업로드 상한(100장)을 넘긴 상태. 추가 자체는 막지 않고 시각적으로만 경고한다. */
-.asset-section-count-over {
-  color: #fca5a5;
-}
-
 /* Asset Section Title */
 .asset-section-title {
   font-size: 1.5rem;
@@ -1146,36 +1066,6 @@
   }
 }
 
-/* 모바일: 제목은 한 줄로 유지하고, 권장 수량/카운트는 그 아래 줄로 내린다 */
-@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;
@@ -1244,30 +1134,6 @@
   object-fit: cover;
 }
 
-.asset-image-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px;
-  background-color: #001416;
-  color: #379599;
-  text-align: center;
-}
-
-.asset-image-placeholder-name {
-  width: 100%;
-  font-size: 0.6875rem;
-  line-height: 1.2;
-  color: #9BCACC;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .asset-image-badge {
   position: absolute;
   top: 8px;

src/types/api.ts

@@ -61,8 +61,8 @@ export interface UrlImage {
 // 업로드된 파일 이미지
 export interface FileImage {
   type: 'file';
-  file: File;             // 업로드용 원본. 썸네일로 대체하지 않는다.
+  file: File;
-  preview: string | null; // 미리보기용 축소 썸네일 objectURL. 생성 실패 시 null.
+  preview: string; // createObjectURL로 생성된 미리보기 URL
 }
 
 export type ImageItem = UrlImage | FileImage;
@@ -276,28 +276,19 @@ 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;
@@ -318,7 +309,6 @@ export interface VideosListResponse {
 export interface CommentReply {
   id: number;
   nickname: string;
-  profile_image_url: string | null;
   content: string | null;
   is_deleted: boolean;
   is_mine: boolean;
@@ -329,7 +319,6 @@ export interface CommentReply {
 export interface CommentItem {
   id: number;
   nickname: string;
-  profile_image_url: string | null;
   content: string | null;
   is_deleted: boolean;
   is_mine: boolean;
@@ -401,7 +390,7 @@ export interface SocialDisconnectResponse {
 
 // 유튜브 SEO Description 자동완성 요청
 export interface YTAutoSeoRequest {
-  video_id: number;
+  task_id: string;           // 아카이브의 비디오 ID
 }
 
 // 유튜브 SEO Description 자동완성 응답

src/utils/api.ts

@@ -35,7 +35,6 @@ import {
   CommentItem,
   LikeToggleResponse,
 } from '../types/api';
-import { uploadImagesSequentially } from './imageUpload.ts';
 
 export const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
 console.log('[API] API_URL:', API_URL);
@@ -609,12 +608,12 @@ export async function getVideoComments(videoId: string, page: number = 1, pageSi
   return response.json();
 }
 
-// 댓글 작성 (작성자 닉네임/프로필은 서버가 로그인된 카카오 정보로 채움)
+// 댓글 작성
-export async function postVideoComment(videoId: string, content: string, parentId?: number): Promise<CommentItem> {
+export async function postVideoComment(videoId: string, content: string, nickname?: 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, parent_id: parentId ?? null }),
+    body: JSON.stringify({ content, nickname: nickname || '익명', parent_id: parentId ?? null }),
   });
 
   if (!response.ok) {
@@ -656,10 +655,18 @@ export async function uploadImages(
   imageUrls: ImageUrlItem[],
   files: File[]
 ): Promise<ImageUploadResponse> {
-  return uploadImagesSequentially(imageUrls, files, postImageUpload);
+  const formData = new FormData();
-}
+
+  // URL 이미지들을 images_json으로 전달
+  if (imageUrls.length > 0) {
+    formData.append('images_json', JSON.stringify(imageUrls));
+  }
+
+  // 파일들을 files로 전달
+  files.forEach((file) => {
+    formData.append('files', file);
+  });
 
-async function postImageUpload(formData: FormData): Promise<ImageUploadResponse> {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), IMAGE_UPLOAD_TIMEOUT);
 
@@ -670,21 +677,19 @@ async function postImageUpload(formData: FormData): Promise<ImageUploadResponse>
       signal: controller.signal,
     });
 
+    clearTimeout(timeoutId);
+
     if (!response.ok) {
-      if (response.status === 413) {
-        throw new Error('이미지 파일이 너무 커서 업로드할 수 없습니다. 더 작은 이미지를 선택해주세요.');
-      }
       throw new Error(`HTTP error! status: ${response.status}`);
     }
 
     return response.json();
   } catch (error) {
+    clearTimeout(timeoutId);
     if (error instanceof Error && error.name === 'AbortError') {
       throw new Error('이미지 업로드 시간이 초과되었습니다. 다시 시도해주세요.');
     }
     throw error;
-  } finally {
-    clearTimeout(timeoutId);
   }
 }
 
@@ -1093,7 +1098,7 @@ export async function autocomplete(request: AutocompleteRequest): Promise<Crawli
 }
 
 // 업체명·주소 직접 입력으로 마케팅 분석
-export async function marketingAnalysis(storeName: string, address: string, category = '', officialSiteUrl?: string): Promise<CrawlingResponse> {
+export async function marketingAnalysis(storeName: string, address: string, category = ''): Promise<CrawlingResponse> {
   const controller = new AbortController();
   const timeoutId = setTimeout(() => controller.abort(), CRAWL_TIMEOUT);
 
@@ -1103,12 +1108,7 @@ export async function marketingAnalysis(storeName: string, address: string, cate
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
+      body: JSON.stringify({ store_name: storeName, address, category }),
-        store_name: storeName,
-        address,
-        category,
-        official_site_url: officialSiteUrl?.trim() || null,
-      }),
       signal: controller.signal,
     });
 

src/utils/imageCompression.ts

@@ -1,305 +0,0 @@
-export const MAX_UPLOAD_IMAGE_BYTES = 2 * 1024 * 1024;
-export const MAX_UPLOAD_IMAGE_DIMENSION = 2048;
-export const MAX_FALLBACK_UPLOAD_IMAGE_BYTES = 15 * 1024 * 1024;
-
-const OUTPUT_MIME_TYPE = 'image/jpeg';
-const OUTPUT_EXTENSION = 'jpg';
-const BACKEND_IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'webp', 'heic', 'heif']);
-const BACKEND_IMAGE_MIME_TYPES = new Set([
-  'image/jpeg',
-  'image/png',
-  'image/webp',
-  'image/heic',
-  'image/heif',
-  'image/heic-sequence',
-  'image/heif-sequence',
-]);
-
-interface ImageDimensions {
-  width: number;
-  height: number;
-}
-
-interface DecodedImage extends ImageDimensions {
-  source: CanvasImageSource;
-  dispose: () => void;
-}
-
-interface CompressionAttempt {
-  scale: number;
-  quality: number;
-}
-
-const COMPRESSION_ATTEMPTS: CompressionAttempt[] = [
-  { scale: 1, quality: 0.86 },
-  { scale: 1, quality: 0.74 },
-  { scale: 1, quality: 0.62 },
-  { scale: 1, quality: 0.5 },
-  { scale: 0.85, quality: 0.7 },
-  { scale: 0.7, quality: 0.65 },
-  { scale: 0.55, quality: 0.6 },
-  { scale: 0.4, quality: 0.55 },
-];
-
-export function calculateTargetDimensions(
-  width: number,
-  height: number,
-  maxDimension = MAX_UPLOAD_IMAGE_DIMENSION
-): ImageDimensions {
-  if (
-    !Number.isFinite(width) ||
-    !Number.isFinite(height) ||
-    !Number.isFinite(maxDimension) ||
-    width <= 0 ||
-    height <= 0 ||
-    maxDimension <= 0
-  ) {
-    throw new Error('Image dimensions must be positive finite numbers.');
-  }
-
-  const scale = Math.min(1, maxDimension / Math.max(width, height));
-
-  return {
-    width: Math.max(1, Math.round(width * scale)),
-    height: Math.max(1, Math.round(height * scale)),
-  };
-}
-
-export function shouldCompressImage(
-  fileSize: number,
-  dimensions: ImageDimensions,
-  maxBytes = MAX_UPLOAD_IMAGE_BYTES,
-  maxDimension = MAX_UPLOAD_IMAGE_DIMENSION
-): boolean {
-  return (
-    fileSize > maxBytes ||
-    dimensions.width > maxDimension ||
-    dimensions.height > maxDimension
-  );
-}
-
-export function buildCompressedFileName(fileName: string): string {
-  const extensionIndex = fileName.lastIndexOf('.');
-  const baseName = extensionIndex > 0 ? fileName.slice(0, extensionIndex) : fileName;
-  return `${baseName || 'image'}.${OUTPUT_EXTENSION}`;
-}
-
-function getFileExtension(fileName: string): string {
-  const extensionIndex = fileName.lastIndexOf('.');
-  return extensionIndex >= 0 ? fileName.slice(extensionIndex + 1).toLowerCase() : '';
-}
-
-export function isImageInputFile(file: Pick<File, 'name' | 'type'>): boolean {
-  return file.type.startsWith('image/') || BACKEND_IMAGE_EXTENSIONS.has(getFileExtension(file.name));
-}
-
-export function canUploadOriginalImage(file: Pick<File, 'name' | 'type'>): boolean {
-  const hasAllowedExtension = BACKEND_IMAGE_EXTENSIONS.has(getFileExtension(file.name));
-  const hasAllowedMimeType = file.type === '' || BACKEND_IMAGE_MIME_TYPES.has(file.type.toLowerCase());
-  return hasAllowedExtension && hasAllowedMimeType;
-}
-
-export function canUploadOriginalAfterCompressionFailure(
-  fileSize: number,
-  maxBytes = MAX_FALLBACK_UPLOAD_IMAGE_BYTES
-): boolean {
-  return fileSize <= maxBytes;
-}
-
-function useOriginalOrThrow(file: File, cause: unknown): File {
-  if (!canUploadOriginalImage(file)) {
-    throw new Error(
-      `${file.name} 파일을 지원하는 이미지 형식으로 변환할 수 없습니다. ` +
-        'JPEG, PNG 또는 WebP로 변환한 뒤 다시 시도해주세요.',
-      { cause }
-    );
-  }
-
-  if (!canUploadOriginalAfterCompressionFailure(file.size)) {
-    throw new Error(
-      `${file.name} 파일은 15 MB보다 크고 브라우저에서 크기를 줄일 수 없습니다. ` +
-        'JPEG나 PNG로 변환하거나 더 작은 이미지를 선택해주세요.',
-      { cause }
-    );
-  }
-
-  console.warn(`Image compression was unavailable for ${file.name}; uploading the original.`, cause);
-  return file;
-}
-
-function decodeWithImageElement(file: File): Promise<DecodedImage> {
-  return new Promise((resolve, reject) => {
-    const objectUrl = URL.createObjectURL(file);
-    const image = new Image();
-
-    image.onload = () => {
-      resolve({
-        source: image,
-        width: image.naturalWidth,
-        height: image.naturalHeight,
-        dispose: () => URL.revokeObjectURL(objectUrl),
-      });
-    };
-    image.onerror = () => {
-      URL.revokeObjectURL(objectUrl);
-      reject(new Error(`Unable to decode image: ${file.name}`));
-    };
-    image.src = objectUrl;
-  });
-}
-
-async function decodeImage(file: File): Promise<DecodedImage> {
-  if (typeof createImageBitmap === 'function') {
-    const bitmap = await createImageBitmap(file);
-    return {
-      source: bitmap,
-      width: bitmap.width,
-      height: bitmap.height,
-      dispose: () => bitmap.close(),
-    };
-  }
-
-  return decodeWithImageElement(file);
-}
-
-function canvasToBlob(canvas: HTMLCanvasElement, quality: number): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) {
-          resolve(blob);
-        } else {
-          reject(new Error('The browser could not compress the image.'));
-        }
-      },
-      OUTPUT_MIME_TYPE,
-      quality
-    );
-  });
-}
-
-export async function compressImageForUpload(file: File): Promise<File> {
-  if (!isImageInputFile(file)) {
-    throw new Error(`지원하지 않는 이미지 파일입니다: ${file.name}`);
-  }
-
-  let decoded: DecodedImage;
-  try {
-    decoded = await decodeImage(file);
-  } catch (error) {
-    return useOriginalOrThrow(file, error);
-  }
-
-  try {
-    if (
-      canUploadOriginalImage(file) &&
-      !shouldCompressImage(file.size, {
-        width: decoded.width,
-        height: decoded.height,
-      })
-    ) {
-      return file;
-    }
-
-    const baseDimensions = calculateTargetDimensions(decoded.width, decoded.height);
-    let smallestBlob: Blob | null = null;
-
-    try {
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-
-      if (!context) {
-        throw new Error('The browser does not support image compression.');
-      }
-
-      for (const attempt of COMPRESSION_ATTEMPTS) {
-        canvas.width = Math.max(1, Math.round(baseDimensions.width * attempt.scale));
-        canvas.height = Math.max(1, Math.round(baseDimensions.height * attempt.scale));
-
-        // JPEG has no alpha channel. A white background avoids transparent pixels
-        // becoming black when PNG/WebP images are converted.
-        context.fillStyle = '#ffffff';
-        context.fillRect(0, 0, canvas.width, canvas.height);
-        context.drawImage(decoded.source, 0, 0, canvas.width, canvas.height);
-
-        const blob = await canvasToBlob(canvas, attempt.quality);
-        if (!smallestBlob || blob.size < smallestBlob.size) {
-          smallestBlob = blob;
-        }
-
-        if (blob.size <= MAX_UPLOAD_IMAGE_BYTES) {
-          return new File([blob], buildCompressedFileName(file.name), {
-            type: blob.type || OUTPUT_MIME_TYPE,
-            lastModified: file.lastModified,
-          });
-        }
-      }
-    } catch (error) {
-      return useOriginalOrThrow(file, error);
-    }
-
-    const measuredSize = smallestBlob?.size ?? file.size;
-    throw new Error(
-      `${file.name} 파일을 ${Math.round(MAX_UPLOAD_IMAGE_BYTES / (1024 * 1024))} MB 이하로 ` +
-        `압축할 수 없습니다(압축 결과: ${Math.ceil(measuredSize / (1024 * 1024))} MB).`
-    );
-  } finally {
-    decoded.dispose();
-  }
-}
-
-export const MAX_PREVIEW_DIMENSION = 400;
-export const PREVIEW_QUALITY = 0.7;
-
-/**
- * 그리드 미리보기 전용 축소 썸네일을 만든다.
- *
- * 업로드에는 원본 File 을 그대로 쓰고, 여기서 만든 objectURL 은 <img> 에만 쓰인다.
- * 핵심은 finally 의 dispose() 로, createImageBitmap 경로에서 원본 비트맵을 즉시
- * 해제해 메모리에 원본 크기 비트맵이 남지 않게 한다.
- *
- * 실패해도 예외를 던지지 않고 null 을 돌려준다. 호출부가 자리표시자를 그린다.
- */
-export async function createPreviewThumbnail(file: File): Promise<string | null> {
-  if (!isImageInputFile(file)) {
-    return null;
-  }
-
-  let decoded: DecodedImage;
-  try {
-    decoded = await decodeImage(file);
-  } catch (error) {
-    console.warn(`미리보기 썸네일 디코딩 실패: ${file.name}`, error);
-    return null;
-  }
-
-  try {
-    const { width, height } = calculateTargetDimensions(
-      decoded.width,
-      decoded.height,
-      MAX_PREVIEW_DIMENSION
-    );
-
-    const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
-
-    const context = canvas.getContext('2d');
-    if (!context) {
-      return null;
-    }
-
-    // JPEG 에는 알파 채널이 없다. 투명 픽셀이 검게 나오지 않도록 흰 배경을 깐다.
-    context.fillStyle = '#ffffff';
-    context.fillRect(0, 0, width, height);
-    context.drawImage(decoded.source, 0, 0, width, height);
-
-    const blob = await canvasToBlob(canvas, PREVIEW_QUALITY);
-    return URL.createObjectURL(blob);
-  } catch (error) {
-    console.warn(`미리보기 썸네일 생성 실패: ${file.name}`, error);
-    return null;
-  } finally {
-    decoded.dispose();
-  }
-}

src/utils/imageDedup.ts

@@ -1,49 +0,0 @@
-import type { ImageItem } from '../types/api';
-
-/**
- * 같은 파일을 가리키는지 판별하기 위한 키.
- *
- * 브라우저는 동일한 파일에 대해 name/size/lastModified 를 항상 동일하게 주므로,
- * 내용 해시를 계산하지 않고도 비용 없이 중복을 걸러낼 수 있다.
- */
-export function getFileIdentity(file: Pick<File, 'name' | 'size' | 'lastModified'>): string {
-  return `${file.name}|${file.size}|${file.lastModified}`;
-}
-
-export interface FileDedupResult {
-  /** 목록에 새로 넣어야 할 파일 */
-  newFiles: File[];
-  /** 중복이라 제외된 파일 수 */
-  duplicateCount: number;
-}
-
-/**
- * 이미 목록에 있는 파일, 그리고 이번 배치 안에서 서로 겹치는 파일을 걸러낸다.
- *
- * url 타입 이미지(크롤링으로 가져온 원격 이미지)는 로컬 파일과 비교할 수단이
- * 없으므로 비교 대상에서 제외한다.
- */
-export function splitDuplicateFiles(existing: ImageItem[], incoming: File[]): FileDedupResult {
-  const seen = new Set<string>();
-
-  for (const item of existing) {
-    if (item.type === 'file') {
-      seen.add(getFileIdentity(item.file));
-    }
-  }
-
-  const newFiles: File[] = [];
-  let duplicateCount = 0;
-
-  for (const file of incoming) {
-    const identity = getFileIdentity(file);
-    if (seen.has(identity)) {
-      duplicateCount += 1;
-      continue;
-    }
-    seen.add(identity);
-    newFiles.push(file);
-  }
-
-  return { newFiles, duplicateCount };
-}

src/utils/imageUpload.ts

@@ -1,83 +0,0 @@
-import type { ImageUploadResponse, ImageUrlItem } from '../types/api';
-import { compressImageForUpload } from './imageCompression.ts';
-
-export const MAX_IMAGES_PER_UPLOAD_TASK = 100;
-
-export type ImageUploadRequest = (formData: FormData) => Promise<ImageUploadResponse>;
-export type ImageCompressor = (file: File) => Promise<File>;
-
-interface ImageUploadFormOptions {
-  imageUrls?: ImageUrlItem[];
-  file?: File;
-  taskId?: string;
-  finalize?: boolean;
-}
-
-export function createImageUploadFormData({
-  imageUrls = [],
-  file,
-  taskId,
-  finalize,
-}: ImageUploadFormOptions): FormData {
-  const formData = new FormData();
-
-  if (imageUrls.length > 0) {
-    formData.append('images_json', JSON.stringify(imageUrls));
-  }
-  if (taskId) {
-    formData.append('task_id', taskId);
-  }
-  if (finalize !== undefined) {
-    formData.append('finalize', String(finalize));
-  }
-  if (file) {
-    formData.append('files', file);
-  }
-
-  return formData;
-}
-
-export async function uploadImagesSequentially(
-  imageUrls: ImageUrlItem[],
-  files: File[],
-  sendRequest: ImageUploadRequest,
-  compressFile: ImageCompressor = compressImageForUpload
-): Promise<ImageUploadResponse> {
-  const totalImageCount = imageUrls.length + files.length;
-  if (totalImageCount > MAX_IMAGES_PER_UPLOAD_TASK) {
-    throw new Error(`이미지는 최대 ${MAX_IMAGES_PER_UPLOAD_TASK}장까지 업로드할 수 있습니다.`);
-  }
-
-  if (files.length === 0) {
-    return sendRequest(createImageUploadFormData({ imageUrls }));
-  }
-
-  let taskId: string | undefined;
-  let finalResponse: ImageUploadResponse | undefined;
-
-  for (let index = 0; index < files.length; index += 1) {
-    // Compress and upload one source at a time. This prevents both decoded
-    // image buffers and multipart request bodies from accumulating in memory.
-    const compressedFile = await compressFile(files[index]);
-    const isFirstRequest = index === 0;
-    const isLastRequest = index === files.length - 1;
-    const formData = createImageUploadFormData({
-      imageUrls: isFirstRequest ? imageUrls : [],
-      file: compressedFile,
-      taskId,
-      finalize: isLastRequest,
-    });
-
-    finalResponse = await sendRequest(formData);
-    if (!finalResponse.task_id) {
-      throw new Error('이미지 업로드 응답에 작업 ID가 없습니다.');
-    }
-    if (taskId && finalResponse.task_id !== taskId) {
-      throw new Error('이미지 업로드 작업 ID가 요청 사이에 변경되었습니다. 다시 시도해주세요.');
-    }
-    taskId = finalResponse.task_id;
-  }
-
-  // files.length > 0 guarantees that the loop produced a response.
-  return finalResponse as ImageUploadResponse;
-}

src/utils/nativeShare.ts

@@ -1,29 +0,0 @@
-/**
- * 기기의 네이티브 공유 시트를 열고 요청을 처리했는지 반환합니다.
- *
- * 긴 `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))}`;
-}