Compare commits
No commits in common. "main" and "feature-image-upload" have entirely different histories.
main
...
feature-im
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
@ -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'));
|
||||
|
||||
@ -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:// 를 붙여서 전달
|
||||
const trimmedUrl = officialSiteUrl.trim();
|
||||
const normalizedUrl = trimmedUrl && !/^https?:\/\//i.test(trimmedUrl)
|
||||
? `https://${trimmedUrl}`
|
||||
: trimmedUrl;
|
||||
onSubmit(businessName.trim(), fullAddress, category.trim(), normalizedUrl);
|
||||
onSubmit(businessName.trim(), fullAddress, category.trim());
|
||||
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')}
|
||||
|
||||
@ -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 { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
|
||||
import { toggleVideoLike } from '../utils/api';
|
||||
|
||||
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 shareTitle = title || storeName || t('videoDetail.kakaoDefaultTitle');
|
||||
const shareUrl = `${window.location.origin}/video/${videoId}`;
|
||||
|
||||
const handleShareBtnClick = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
useEffect(() => {
|
||||
if (!shareMenuOpen) return;
|
||||
|
||||
const handled = await tryNativeShare({
|
||||
title: shareTitle,
|
||||
url: shareUrl,
|
||||
});
|
||||
if (handled) {
|
||||
return;
|
||||
const closeMenu = () => setShareMenuOpen(false);
|
||||
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (
|
||||
shareMenuRef.current && !shareMenuRef.current.contains(e.target as Node) &&
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -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) {
|
||||
loadedForVideoIdRef.current = null;
|
||||
return;
|
||||
}
|
||||
if (!isOpen) return;
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
loadSocialAccounts();
|
||||
|
||||
const videoId = video?.video_id ?? null;
|
||||
if (!videoId || videoId === loadedForVideoIdRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
loadedForVideoIdRef.current = videoId;
|
||||
|
||||
if (video?.title) {
|
||||
setTitle(video.title);
|
||||
setDescription(video.description || '');
|
||||
setTags((video.hashtags || []).join(','));
|
||||
setIsLoadingAutoDescription(false);
|
||||
return;
|
||||
}
|
||||
const taskId = video?.task_id ?? null;
|
||||
const expired = now - loadedAtRef.current > SEO_CACHE_TTL;
|
||||
|
||||
if (taskId && (taskId !== loadedForTaskIdRef.current || expired)) {
|
||||
loadedForTaskIdRef.current = taskId;
|
||||
loadedAtRef.current = now;
|
||||
loadAutocomplete();
|
||||
}, [isOpen, video?.video_id, video?.title, video?.description, video?.hashtags]);
|
||||
} else if (taskId) {
|
||||
const cached = seoCache.current.get(taskId);
|
||||
if (cached) {
|
||||
setTitle(cached.title);
|
||||
setDescription(cached.description);
|
||||
setTags(cached.tags);
|
||||
}
|
||||
}
|
||||
}, [isOpen, video?.task_id]);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@ -7,11 +7,8 @@ import {
|
||||
deleteComment,
|
||||
toggleVideoLike,
|
||||
isLoggedIn,
|
||||
getUserMe,
|
||||
API_URL,
|
||||
} from '../utils/api';
|
||||
import { VideoDetailItem, CommentItem, UserMeResponse } from '../types/api';
|
||||
import { buildVideoShareUrl, tryNativeShare } from '../utils/nativeShare';
|
||||
import { VideoDetailItem, CommentItem } from '../types/api';
|
||||
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 shareTitle = video?.title || video?.store_name || t('videoDetail.kakaoDefaultTitle');
|
||||
const shareUrl = `${window.location.origin}/video/${videoId}`;
|
||||
|
||||
const handleCopyLink = async () => {
|
||||
try {
|
||||
@ -117,17 +114,50 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const handleShareButtonClick = async () => {
|
||||
const handled = await tryNativeShare({
|
||||
title: shareTitle,
|
||||
url: shareUrl,
|
||||
const handleKakaoShare = () => {
|
||||
const kakao = window.Kakao;
|
||||
if (kakao?.Share) {
|
||||
kakao.Share.sendDefault({
|
||||
objectType: 'feed',
|
||||
content: {
|
||||
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 } }],
|
||||
});
|
||||
if (handled) {
|
||||
return;
|
||||
} 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,7 +255,6 @@ 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
|
||||
src={video.result_movie_url}
|
||||
controls
|
||||
@ -235,34 +266,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
|
||||
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>
|
||||
@ -280,10 +284,10 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
|
||||
</svg>
|
||||
{likeCount}
|
||||
</button>
|
||||
<div style={{ position: 'relative' }} ref={shareMenuRef}>
|
||||
<button
|
||||
className="video-detail-copy-btn"
|
||||
onClick={handleShareButtonClick}
|
||||
title={t('videoDetail.share')}
|
||||
onClick={() => setShareMenuOpen(v => !v)}
|
||||
>
|
||||
<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"/>
|
||||
@ -291,6 +295,41 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
|
||||
</svg>
|
||||
{copied ? t('videoDetail.copied') : t('videoDetail.share')}
|
||||
</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
|
||||
src={currentUser.profile_image_url}
|
||||
alt={currentUser.nickname}
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
|
||||
alt={t('videoDetail.changeAvatarTitle')}
|
||||
className="video-detail-comment-avatar"
|
||||
onClick={handleChangeAvatar}
|
||||
style={{ cursor: 'pointer' }}
|
||||
title={t('videoDetail.changeAvatarTitle')}
|
||||
/>
|
||||
<input
|
||||
className="video-detail-nickname-input"
|
||||
type="text"
|
||||
placeholder={t('videoDetail.nicknamePlaceholder')}
|
||||
value={commentNickname}
|
||||
onChange={(e) => setCommentNickname(e.target.value)}
|
||||
maxLength={20}
|
||||
/>
|
||||
)}
|
||||
<span className="video-detail-comment-nickname">{currentUser.nickname}</span>
|
||||
</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
|
||||
src={c.profile_image_url}
|
||||
alt={c.nickname || t('videoDetail.anonymous')}
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${c.id}`}
|
||||
alt="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
|
||||
src={r.profile_image_url}
|
||||
alt={r.nickname || t('videoDetail.anonymous')}
|
||||
src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${r.id}`}
|
||||
alt="avatar"
|
||||
className="video-detail-comment-avatar small"
|
||||
/>
|
||||
)}
|
||||
<div className="video-detail-comment-body">
|
||||
<span className="video-detail-comment-nickname">
|
||||
{r.nickname || t('videoDetail.anonymous')}
|
||||
|
||||
@ -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)",
|
||||
"manualLabelSiteUrl": "Website link (optional)",
|
||||
"manualPlaceholderSiteUrl": "Enter the official website URL (e.g. https://example.com)"
|
||||
"manualPlaceholderCategory": "Enter the business category (e.g. pension, cafe, salon)"
|
||||
},
|
||||
"welcome": {
|
||||
"title": "Welcome to ADO2.AI",
|
||||
@ -622,16 +620,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",
|
||||
|
||||
@ -207,9 +207,7 @@
|
||||
"manualPlaceholderAddress": "주소를 입력하세요.",
|
||||
"manualPlaceholderRegion": "지역을 선택하세요.",
|
||||
"manualPlaceholderDetail": "상세 주소를 입력하세요. (예: 강남구 테헤란로 123)",
|
||||
"manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)",
|
||||
"manualLabelSiteUrl": "홈페이지 링크 (선택)",
|
||||
"manualPlaceholderSiteUrl": "공식 홈페이지 주소를 입력하세요. (예: https://example.com)"
|
||||
"manualPlaceholderCategory": "업종을 입력하세요. (예: 펜션, 카페, 미용실)"
|
||||
},
|
||||
"welcome": {
|
||||
"title": "ADO2.AI에 오신 것을 환영합니다.",
|
||||
@ -621,16 +619,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": "작성 중",
|
||||
|
||||
@ -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 ? (
|
||||
<img
|
||||
src={video.poster_url}
|
||||
alt={video.store_name}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="content-video-preview"
|
||||
/>
|
||||
) : video.thumbnail_url ? (
|
||||
{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}
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
|
||||
@ -299,13 +299,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;
|
||||
|
||||
@ -248,15 +248,7 @@ const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setSelectedVideoId(video.video_id)}
|
||||
>
|
||||
{video.poster_url ? (
|
||||
<img
|
||||
src={video.poster_url}
|
||||
alt={video.store_name}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="content-video-preview"
|
||||
/>
|
||||
) : video.result_movie_url ? (
|
||||
{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}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -720,77 +720,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 {
|
||||
display: flex;
|
||||
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-content.landscape .video-detail-player {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-detail-info {
|
||||
@ -1217,7 +1158,7 @@
|
||||
.video-detail-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
.video-detail-player-wrap {
|
||||
.video-detail-player {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -2805,7 +2805,6 @@
|
||||
.wizard-stepper {
|
||||
padding: 2rem;
|
||||
max-width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.wizard-stepper-node {
|
||||
|
||||
@ -1146,36 +1146,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;
|
||||
|
||||
@ -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 자동완성 응답
|
||||
|
||||
@ -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, 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) {
|
||||
@ -1093,7 +1093,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 +1103,7 @@ export async function marketingAnalysis(storeName: string, address: string, cate
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
store_name: storeName,
|
||||
address,
|
||||
category,
|
||||
official_site_url: officialSiteUrl?.trim() || null,
|
||||
}),
|
||||
body: JSON.stringify({ store_name: storeName, address, category }),
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
|
||||
@ -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))}`;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user