크레딧기능 추가

index.css

@@ -780,6 +780,16 @@
   white-space: nowrap;
 }
 
+.profile-credits {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 12px;
+  font-weight: 500;
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Sidebar Language Switch */
 .sidebar-language-switch {
   padding: 0 1rem 0.75rem;
@@ -7990,6 +8000,25 @@
   resize: none;
   outline: none;
   line-height: 1.6;
+  scrollbar-width: thin;
+  scrollbar-color: #046266 transparent;
+}
+
+.lyrics-textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.lyrics-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.lyrics-textarea::-webkit-scrollbar-thumb {
+  background: #046266;
+  border-radius: 3px;
+}
+
+.lyrics-textarea::-webkit-scrollbar-thumb:hover {
+  background: #379599;
 }
 
 .lyrics-placeholder {
@@ -8042,6 +8071,15 @@
   text-align: center;
 }
 
+.charge-credits-link {
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+  color: #AE72F9;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 /* Video Generate Button */
 .btn-video-generate {
   padding: 0.625rem 2.5rem;
@@ -8450,6 +8488,23 @@
   overflow-y: auto;
 }
 
+.asset-image-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.asset-image-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.asset-image-list::-webkit-scrollbar-thumb {
+  background: #067C80;
+  border-radius: 3px;
+}
+
+.asset-image-list::-webkit-scrollbar-thumb:hover {
+  background: #088a8e;
+}
+
 /* Load More Button */
 .asset-load-more {
   width: 100%;

src/components/Sidebar.tsx

@@ -37,9 +37,10 @@ interface SidebarProps {
   onHome?: () => void;
   userInfo?: UserMeResponse | null;
   onLogout?: () => void;
+  credits?: number | null;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout }) => {
+const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userInfo, onLogout, credits }) => {
   const { t } = useTranslation();
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -180,6 +181,9 @@ const Sidebar: React.FC<SidebarProps> = ({ activeItem, onNavigate, onHome, userI
             {!isCollapsed && (
               <div className="flex-1 min-w-0">
                 <p className="profile-name">{userInfo?.nickname || t('sidebar.defaultUser')}</p>
+                {credits !== null && credits !== undefined && (
+                  <p className="profile-credits">{t('sidebar.credits', { count: credits })}</p>
+                )}
               </div>
             )}
           </div>

src/components/SocialPostingModal.tsx

@@ -217,7 +217,9 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
       const activeAccounts = response.accounts?.filter(acc => acc.is_active) || [];
       setSocialAccounts(activeAccounts);
       if (activeAccounts.length > 0) {
-        setSelectedChannel(activeAccounts[0].platform_user_id);
+        const lastUsed = localStorage.getItem('lastUsedSocialChannel');
+        const defaultAccount = activeAccounts.find(acc => acc.platform_user_id === lastUsed) || activeAccounts[0];
+        setSelectedChannel(defaultAccount.platform_user_id);
       }
     } catch (error) {
       if (error instanceof TokenExpiredError) {
@@ -335,6 +337,8 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
         throw new Error(uploadResponse.message || t('social.uploadStartFailed'));
       }
 
+      localStorage.setItem('lastUsedSocialChannel', selectedAcc.platform_user_id);
+
       if (publishTime === 'schedule') {
         // 예약 업로드: 폴링 없이 바로 완료 처리
         setUploadStatus('completed');

src/locales/en.json

@@ -12,6 +12,7 @@
     "myContents": "My Contents",
     "myInfo": "My Info",
     "defaultUser": "User",
+    "credits": "Credits left: {{count}} / 3",
     "loggingOut": "Logging out...",
     "logout": "Log Out",
     "tutorialRestart": "Restart Tutorial",
@@ -250,7 +251,10 @@
     "musicGenerationFailed": "Music generation failed.",
     "multipleRetryFailed": "Music generation failed after multiple attempts. Please try again.",
     "musicGenerationError": "An error occurred during music generation.",
-    "songRegenerationError": "An error occurred during music regeneration."
+    "songRegenerationError": "An error occurred during music regeneration.",
+    "creditsRemaining": "{{count}} left",
+    "creditsExhausted": "Not enough credits.",
+    "chargeCredits": "Purchase credits"
   },
   "completion": {
     "back": "Go Back",
@@ -474,7 +478,11 @@
     "generateContent": "Generate Content",
     "pageDescBefore": " reveals ",
     "pageDescAfter": "'s core strategy.",
-    "loadingTitle": "Analyzing Brand"
+    "loadingTitle": "Analyzing Brand",
+    "loadingStep1": "Collecting brand information...",
+    "loadingStep2": "Analyzing collected data...",
+    "loadingStep3": "Deriving key strategies...",
+    "loadingStep4": "Organizing results..."
   },
   "common": {
     "back": "Go Back",
@@ -490,13 +498,13 @@
     "title": "Content Calendar",
     "tabs": {
       "all": "All",
-      "completed": "Completed",
+      "completed": "Done",
-      "scheduled": "Scheduled",
+      "scheduled": "Planned",
       "failed": "Failed"
     },
     "status": {
-      "completed": "Completed",
+      "completed": "Done",
-      "scheduled": "Scheduled",
+      "scheduled": "Planned",
       "failed": "Failed"
     },
     "months": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],

src/locales/ko.json

@@ -12,6 +12,7 @@
     "myContents": "내 콘텐츠",
     "myInfo": "내 정보",
     "defaultUser": "사용자",
+    "credits": "잔여 크레딧: {{count}} / 3",
     "loggingOut": "로그아웃 중...",
     "logout": "로그아웃",
     "tutorialRestart": "튜토리얼 다시 보기",
@@ -250,7 +251,10 @@
     "musicGenerationFailed": "음악 생성에 실패했습니다.",
     "multipleRetryFailed": "여러 번 시도했지만 음악 생성에 실패했습니다. 다시 시도해주세요.",
     "musicGenerationError": "음악 생성 중 오류가 발생했습니다.",
-    "songRegenerationError": "음악 재생성 중 오류가 발생했습니다."
+    "songRegenerationError": "음악 재생성 중 오류가 발생했습니다.",
+    "creditsRemaining": "잔여 {{count}}",
+    "creditsExhausted": "크레딧이 부족합니다.",
+    "chargeCredits": "크레딧 충전하기"
   },
   "completion": {
     "back": "뒤로가기",
@@ -474,7 +478,11 @@
     "generateContent": "콘텐츠 생성",
     "pageDescBefore": "을 통해 도출된 ",
     "pageDescAfter": "의 핵심 전략입니다.",
-    "loadingTitle": "브랜드 분석 중"
+    "loadingTitle": "브랜드 분석 중",
+    "loadingStep1": "브랜드 정보를 수집하는 중...",
+    "loadingStep2": "수집한 데이터를 분석하는 중...",
+    "loadingStep3": "핵심 전략을 도출하는 중...",
+    "loadingStep4": "결과를 정리하는 중..."
   },
   "common": {
     "back": "뒤로가기",
@@ -502,7 +510,7 @@
     "months": ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],
     "days": ["일","월","화","수","목","금","토"],
     "yearMonth": "{{year}}년 {{month}}",
-    "monthDay": "{{month}}월 {{day}}",
+    "monthDay": "{{month}} {{day}}일",
     "loading": "불러오는 중...",
     "noResults": "최근 결과 없음",
     "noResultsDesc": "제작한 콘텐츠를 소셜 채널에 업로드해 보세요",

src/pages/Analysis/LoadingSection.tsx

@@ -38,6 +38,13 @@ const LoadingSection: React.FC<LoadingSectionProps> = ({ onComplete, isComplete
     return () => clearTimeout(timer);
   }, [isComplete]);
 
+  const getStepMessage = (p: number) => {
+    if (p < 30) return t('analysis.loadingStep1');
+    if (p < 50) return t('analysis.loadingStep2');
+    if (p < 80) return t('analysis.loadingStep3');
+    return t('analysis.loadingStep4');
+  };
+
   return (
     <div className="loading-container">
       <div className="loading-content">
@@ -67,6 +74,7 @@ const LoadingSection: React.FC<LoadingSectionProps> = ({ onComplete, isComplete
             </div>
             <span className="loading-progress-text">{Math.floor(progress)}%</span>
           </div>
+          <p className="loading-step-message">{getStepMessage(progress)}</p>
         </div>
       </div>
     </div>

src/pages/Dashboard/CompletionContent.tsx

@@ -12,6 +12,7 @@ interface CompletionContentProps {
   songTaskId: string | null;
   onVideoStatusChange?: (status: 'idle' | 'generating' | 'complete' | 'error') => void;
   onVideoProgressChange?: (progress: number) => void;
+  onVideoComplete?: () => void;
 }
 
 type VideoStatus = 'idle' | 'generating' | 'polling' | 'complete' | 'error';
@@ -32,7 +33,8 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
   onBack,
   songTaskId,
   onVideoStatusChange,
-  onVideoProgressChange
+  onVideoProgressChange,
+  onVideoComplete,
 }) => {
   const { t } = useTranslation();
   const [videoStatus, setVideoStatus] = useState<VideoStatus>('idle');
@@ -253,6 +255,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
         setVideoStatus('complete');
         setStatusMessage('');
         saveToStorage(videoTaskId, currentSongTaskId, 'complete', videoUrlFromResponse, videoId);
+        onVideoComplete?.();
       } else {
         throw new Error(t('completion.videoUrlMissing'));
       }

src/pages/Dashboard/DashboardContent.tsx

@@ -618,7 +618,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
 
   // showMockData=true면 전체 mock 강제, 아니면 API 우선 / isEmptyState 시 mock 폴백
   const useReal = !showMockData && !isEmptyState;
-  const hasRealContentMetrics = useReal && !!dashboardData?.contentMetrics?.slice(0, -1).some((m: ContentMetric) => m.value > 0);
+  const hasRealContentMetrics = useReal && !!dashboardData?.contentMetrics?.some((m: ContentMetric) => m.value > 0);
   const contentMetrics = hasRealContentMetrics ? dashboardData!.contentMetrics : MOCK_CONTENT_METRICS;
 
   // 블러 조건: 1)계정 미연결  2)업로드 영상 없음  3)데이터 없음  4)에러 있음  5)실제 지표 없음

src/pages/Dashboard/GenerationFlow.tsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Sidebar from '../../components/Sidebar';
 import AssetManagementContent from './AssetManagementContent';
@@ -14,7 +14,7 @@ import ContentCalendarContent from './ContentCalendarContent';
 import LoadingSection from '../Analysis/LoadingSection';
 import AnalysisResultSection from '../Analysis/AnalysisResultSection';
 import { ImageItem, CrawlingResponse, UserMeResponse } from '../../types/api';
-import { crawlUrl, autocomplete, AutocompleteRequest, getUserMe, clearTokens } from '../../utils/api';
+import { crawlUrl, autocomplete, AutocompleteRequest, getUserMe, getUserCredits, clearTokens } from '../../utils/api';
 import { useTutorial } from '../../components/Tutorial/useTutorial';
 import { TUTORIAL_KEYS } from '../../components/Tutorial/tutorialSteps';
 import TutorialOverlay, { TutorialRestartPopup } from '../../components/Tutorial/TutorialOverlay';
@@ -117,14 +117,25 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   const [analysisError, setAnalysisError] = useState<string | null>(null);
   const [isAnalysisComplete, setIsAnalysisComplete] = useState(false);
   const [userInfo, setUserInfo] = useState<UserMeResponse | null>(null);
+  const [credits, setCredits] = useState<number | null>(null);
   const tutorial = useTutorial();
 
-  // 로그인 직후 사용자 정보 조회
+  const refreshCredits = useCallback(async () => {
+    try {
+      const { credits } = await getUserCredits();
+      setCredits(credits);
+    } catch (e) {
+      console.error('Failed to refresh credits:', e);
+    }
+  }, []);
+
+  // 로그인 직후 사용자 정보 + 크레딧 조회
   useEffect(() => {
     const fetchUserInfo = async () => {
       try {
-        const data = await getUserMe();
+        const [data, creditsData] = await Promise.all([getUserMe(), getUserCredits()]);
         setUserInfo(data);
+        setCredits(creditsData.credits);
       } catch (error) {
         console.error('Failed to fetch user info:', error);
       }
@@ -467,6 +478,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
             songTaskId={songTaskId}
             onVideoStatusChange={setVideoGenerationStatus}
             onVideoProgressChange={setVideoGenerationProgress}
+            onVideoComplete={refreshCredits}
           />
         );
       default:
@@ -572,7 +584,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
     return (
       <div className="analysis-page-wrapper">
         {showSidebar && (
-          <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} />
+          <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
         )}
         <main className="analysis-page-main">
           {renderContent()}
@@ -585,7 +597,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
   return (
     <div className={`flex w-full bg-[#002224] text-white ${needsScroll ? 'min-h-[100dvh]' : 'h-[100dvh] overflow-hidden'}`}>
       {showSidebar && (
-        <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} />
+        <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} />
       )}
       {tutorialUI}
       <div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>

src/pages/Dashboard/SoundStudioContent.tsx

@@ -42,7 +42,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
   mId,
   onStatusChange,
   videoGenerationStatus = 'idle',
-  videoGenerationProgress = 0
+  videoGenerationProgress = 0,
 }) => {
   const { t } = useTranslation();
   const [selectedType, setSelectedType] = useState('보컬');
@@ -533,12 +533,20 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
             </button>
           )}
 
-          {errorMessage && (
+          {errorMessage && (() => {
+            const isCreditsError = errorMessage.includes('credit');
+            return (
               <div className="error-message-new">
-              {errorMessage}
+                {isCreditsError ? t('soundStudio.creditsExhausted') : errorMessage}
-            </div>
+                {isCreditsError && (
+                  <a href="#" className="charge-credits-link">
+                    {t('soundStudio.chargeCredits')}
+                  </a>
                 )}
               </div>
+            );
+          })()}
+          </div>
 
           {/* Right Column - Lyrics */}
           <div className="lyrics-column">

src/types/api.ts

@@ -254,6 +254,10 @@ export interface UserMeResponse {
   created_at: string;
 }
 
+export interface UserCreditsResponse {
+  credits: number;
+}
+
 // 비디오 목록 아이템
 export interface VideoListItem {
   video_id: number;

src/utils/api.ts

@@ -28,6 +28,7 @@ import {
   TokenExpiredErrorResponse,
   YTAutoSeoRequest,
   YTAutoSeoResponse,
+  UserCreditsResponse,
 } from '../types/api';
 
 export const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
@@ -651,6 +652,19 @@ export async function getUserMe(): Promise<UserMeResponse> {
   return response.json();
 }
 
+// 사용자 크레딧 조회
+export async function getUserCredits(): Promise<UserCreditsResponse> {
+  const response = await authenticatedFetch(`${API_URL}/user/auth/me/credits`, {
+    method: 'GET',
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return response.json();
+}
+
 // 로그인 여부 확인
 export function isLoggedIn(): boolean {
   return !!getAccessToken();