영상카드에 공유하기 좋아요 클릭 추가

src/components/ContentCardSocialActions.tsx

@@ -0,0 +1,228 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { toggleVideoLike } from '../utils/api';
+
+interface ContentCardSocialActionsProps {
+  videoId: number;
+  storeName: string;
+  region?: string;
+  commentCount: number;
+  initialLikeCount: number;
+  initialIsLiked?: boolean;
+}
+
+const ContentCardSocialActions: React.FC<ContentCardSocialActionsProps> = ({
+  videoId,
+  storeName,
+  region,
+  commentCount,
+  initialLikeCount,
+  initialIsLiked = false,
+}) => {
+  const { t } = useTranslation();
+
+  const [likeCount, setLikeCount] = useState(initialLikeCount);
+  const [isLiked, setIsLiked] = useState(initialIsLiked);
+  const [copied, setCopied] = useState(false);
+  const [shareMenuOpen, setShareMenuOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
+  const [anchorRect, setAnchorRect] = useState<{ top: number; bottom: number; left: number } | null>(null);
+
+  const shareBtnRef = useRef<HTMLButtonElement>(null);
+  const shareMenuRef = useRef<HTMLDivElement>(null);
+  const likeDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const shareUrl = `${window.location.origin}/video/${videoId}`;
+
+  useEffect(() => {
+    if (!shareMenuOpen) 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://demo.castad.net/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) => {
+    e.stopPropagation();
+
+    const prevLiked = isLiked;
+    const prevCount = likeCount;
+
+    setIsLiked(!prevLiked);
+    setLikeCount(prevLiked ? prevCount - 1 : prevCount + 1);
+
+    if (likeDebounceRef.current) clearTimeout(likeDebounceRef.current);
+    likeDebounceRef.current = setTimeout(async () => {
+      try {
+        const res = await toggleVideoLike(String(videoId));
+        setIsLiked(res.is_liked);
+        setLikeCount(res.like_count);
+      } catch (err) {
+        console.error('Failed to toggle like:', err);
+        setIsLiked(prevLiked);
+        setLikeCount(prevCount);
+      }
+    }, 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
+        className={`content-card-like-btn ${isLiked ? 'liked' : ''}`}
+        onClick={handleLikeClick}
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill={isLiked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
+          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+        </svg>
+        {likeCount}
+      </button>
+
+      <span className="content-card-comment">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+        {commentCount}
+      </span>
+
+      <button
+        ref={shareBtnRef}
+        className="content-card-share-btn"
+        onClick={handleShareBtnClick}
+        title={t('videoDetail.share')}
+      >
+        <svg width="15" height="15" 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" />
+          <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>
+  );
+};
+
+export default ContentCardSocialActions;

src/locales/en.json

@@ -524,7 +524,7 @@
     "delete": "Delete",
     "previous": "Previous",
     "next": "Next",
-    "uploadToSocial": "Upload to social media",
+    "uploadToSocial": "Upload to social",
     "sortLatest": "Latest",
     "sortOldest": "Oldest",
     "sortLikes": "Most Liked",

src/locales/ko.json

@@ -523,7 +523,7 @@
     "delete": "삭제",
     "previous": "이전",
     "next": "다음",
-    "uploadToSocial": "소셜 미디어에 업로드",
+    "uploadToSocial": "SNS 업로드",
     "sortLatest": "최신순",
     "sortOldest": "오래된순",
     "sortLikes": "좋아요 많은순",

src/pages/Dashboard/ADO2ContentsPage.tsx

@@ -5,6 +5,7 @@ import { VideoListItem } from '../../types/api';
 import LoginPromptModal from '../../components/LoginPromptModal';
 import VideoDetailModal from '../../components/VideoDetailModal';
 import CitySelectModal from '../../components/CitySelectModal';
+import ContentCardSocialActions from '../../components/ContentCardSocialActions';
 
 interface ADO2ContentsPageProps {
   onBack?: () => void;
@@ -181,16 +182,14 @@ const ADO2ContentsPage: React.FC<ADO2ContentsPageProps> = () => {
                     <h3 className="content-card-title">{video.store_name}</h3>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                       <p className="content-card-date">{formatDate(video.created_at)}</p>
-                      <span className="content-card-like">
+                      <ContentCardSocialActions
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
+                        videoId={video.video_id}
-                          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                        storeName={video.store_name}
-                        </svg>
+                        region={video.region}
-                        {video.like_count ?? 0}
+                        commentCount={video.comment_count ?? 0}
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginLeft: '6px' }}>
+                        initialLikeCount={video.like_count ?? 0}
-                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                        initialIsLiked={video.is_liked_by_me}
-                        </svg>
+                      />
-                        {video.comment_count ?? 0}
-                      </span>
                     </div>
                   </div>
                 </div>

src/pages/Dashboard/MyContentsPage.tsx

@@ -5,6 +5,7 @@ import { getVideosList, deleteVideo } from '../../utils/api';
 import { VideoListItem } from '../../types/api';
 import SocialPostingModal from '../../components/SocialPostingModal';
 import VideoDetailModal from '../../components/VideoDetailModal';
+import ContentCardSocialActions from '../../components/ContentCardSocialActions';
 import { useTutorial } from '../../components/Tutorial/useTutorial';
 import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
 
@@ -278,16 +279,14 @@ const MyContentsPage: React.FC<MyContentsPageProps> = ({ onNavigate }) => {
                       <p className="content-card-date">
                         {formatDate(video.created_at)}
                       </p>
-                      <span className="content-card-like">
+                      <ContentCardSocialActions
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
+                        videoId={video.video_id}
-                          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                        storeName={video.store_name}
-                        </svg>
+                        region={video.region}
-                        {video.like_count ?? 0}
+                        commentCount={video.comment_count ?? 0}
-                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginLeft: '6px' }}>
+                        initialLikeCount={video.like_count ?? 0}
-                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                        initialIsLiked={video.is_liked_by_me}
-                        </svg>
+                      />
-                        {video.comment_count ?? 0}
-                      </span>
                     </div>
                   </div>
 

src/styles/contents-social.css

@@ -448,11 +448,11 @@
   text-overflow: ellipsis;
 }
 
-.content-card-like {
+.content-card-social {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 10px;
   font-size: 15px;
   font-weight: 500;
   color: #9BCACC;
@@ -461,6 +461,49 @@
   margin-left: 8px;
 }
 
+.content-card-like-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: #9BCACC;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.content-card-like-btn:hover {
+  color: #fff;
+}
+
+.content-card-like-btn.liked {
+  color: #ff6b6b;
+}
+
+.content-card-comment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.content-card-share-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  color: #9BCACC;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.content-card-share-btn:hover {
+  color: #fff;
+}
+
 .content-card-date {
   font-size: 14px;
   font-weight: 400;
@@ -1157,6 +1200,46 @@
   }
 }
 
+@media (max-width: 480px) {
+  .ado2-contents-page {
+    padding: 12px;
+  }
+
+  .ado2-contents-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .content-card-info {
+    padding: 10px;
+    gap: 8px;
+  }
+
+  .content-card-social {
+    gap: 6px;
+  }
+
+  .content-card-actions {
+    gap: 4px;
+  }
+
+  .content-download-btn {
+    padding: 8px 4px;
+  }
+
+  .content-download-btn span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .content-delete-btn,
+  .content-upload-btn {
+    width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+  }
+}
+
 /* =====================================================
    Delete Confirmation Modal
    ===================================================== */

src/styles/generation-flow.css

@@ -511,7 +511,7 @@
 
 .comp2-page {
   height: 100%;
-  background: #002224;
+  background: var(--color-bg-darker);
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/styles/studio-assets.css

@@ -5,7 +5,7 @@
 /* Sound Studio Page */
 .sound-studio-page {
   height: 100%;
-  background-color: #002224;
+  background-color: var(--color-bg-darker);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 30px 1rem 120px;