Compare commits
6 Commits
18b5271110
...
3b8298bba2
| Author | SHA1 | Date | |
|---|---|---|---|
| 3b8298bba2 | |||
| fde7c8f6e1 | |||
| 1f6921c587 | |||
| cdddb913a0 | |||
| 1cdb47ec2e | |||
| 23938871b0 |
@ -13,7 +13,7 @@
|
||||
},
|
||||
"sidebar": {
|
||||
"dashboard": "Dashboard",
|
||||
"newProject": "Create New Project",
|
||||
"newProject": "New Project",
|
||||
"ado2Contents": "ADO2 Contents",
|
||||
"myContents": "My Contents",
|
||||
"myInfo": "My Info",
|
||||
@ -175,7 +175,6 @@
|
||||
"searchPlaceholder": "Business name, or paste a Naver Map link",
|
||||
"searchButton": "Search",
|
||||
"searching": "Searching",
|
||||
"change": "Change",
|
||||
"cost": "Cost",
|
||||
"costValue": "1 credit",
|
||||
"submit": "Create Ssulbox",
|
||||
@ -211,15 +210,21 @@
|
||||
"selectedImages": "Selected Images",
|
||||
"imageAlt": "Image",
|
||||
"uploadBadge": "Uploaded",
|
||||
"previewUnavailable": "No preview",
|
||||
"imageUpload": "Image Upload",
|
||||
"dragAndDrop": "Drag & drop or\nclick to upload",
|
||||
"videoRatio": "Video Ratio",
|
||||
"minImages": "Min. 5 images",
|
||||
"minImages": "Recommended 30+ 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"
|
||||
},
|
||||
@ -427,7 +432,7 @@
|
||||
"tabContents": "My Contents",
|
||||
"tabCalendar": "Calendar",
|
||||
"tabPayment": "Payment",
|
||||
"tabBusiness": "SNS Management",
|
||||
"tabBusiness": "SNS",
|
||||
"paymentPlaceholder": "Payment information settings are coming soon.",
|
||||
"myBusiness": "My Business",
|
||||
"noBusinessTitle": "No registered business yet",
|
||||
|
||||
@ -175,10 +175,9 @@
|
||||
"searchButton": "검색",
|
||||
"searching": "검색 중",
|
||||
"placeLoading": "가게를 찾는 중… (몇 초 걸려요)",
|
||||
"change": "변경",
|
||||
"hintUrlOk": "네이버 링크로 이 가게를 직접 크롤링합니다.",
|
||||
"hintDefault": "가게를 선택하면 그 가게의 사진과 정보를 크롤링해 썰박스에 씁니다.",
|
||||
"hintScenario": "{{name}} 시나리오로 수 분 내외 생성됩니다",
|
||||
"hintScenario": "{{name}} 시나리오로 약 5~6분 소요됩니다.",
|
||||
"noResult": "검색 결과가 없어요. 이름을 바꾸거나 네이버 지도 링크를 붙여넣어 주세요.",
|
||||
"cost": "생성 비용",
|
||||
"costValue": "1 크레딧",
|
||||
@ -191,7 +190,7 @@
|
||||
"step2": "스토리보드 구성 중",
|
||||
"step3": "이미지·목소리 생성 중",
|
||||
"step4": "영상 합성 중",
|
||||
"takesTime": "보통 수 분 걸려요. 다른 작업을 하셔도 계속 진행됩니다.",
|
||||
"takesTime": "약 5~6분 소요됩니다. 다른 작업을 하셔도 계속 진행됩니다.",
|
||||
"failTitle": "생성에 실패했어요",
|
||||
"failDefault": "잠시 후 다시 시도해주세요.",
|
||||
"refunded": "차감된 크레딧은 환불되었습니다.",
|
||||
@ -259,15 +258,21 @@
|
||||
"selectedImages": "선택된 이미지",
|
||||
"imageAlt": "이미지",
|
||||
"uploadBadge": "업로드",
|
||||
"previewUnavailable": "미리보기 없음",
|
||||
"imageUpload": "이미지 업로드",
|
||||
"dragAndDrop": "이미지를 끌어다 놓거나\n클릭하여 업로드",
|
||||
"videoRatio": "영상 비율",
|
||||
"minImages": "최소 5장",
|
||||
"minImages": "권장 30장 이상",
|
||||
"youtubeShorts": "유튜브 쇼츠",
|
||||
"youtubeVideo": "유튜브 일반",
|
||||
"back": "뒤로가기",
|
||||
"loadMore": "더보기",
|
||||
"uploadFailed": "이미지 업로드에 실패했습니다.",
|
||||
"uploadErrorTitle": "이미지 업로드 초과",
|
||||
"uploadErrorConfirm": "확인",
|
||||
"duplicateSkippedTitle": "중복 이미지 제외",
|
||||
"duplicateSkippedMessage": "이미 추가된 이미지 {{count}}장을 제외했습니다.",
|
||||
"preparingPreviews": "미리보기 준비 중 ({{done}} / {{total}})",
|
||||
"uploading": "업로드 중 (30~60초 소요)",
|
||||
"nextStep": "다음 단계"
|
||||
},
|
||||
|
||||
@ -3,13 +3,19 @@ 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: (files: File[]) => void;
|
||||
onAddImages: (
|
||||
files: File[],
|
||||
onProgress: (done: number, total: number) => void
|
||||
) => Promise<void>;
|
||||
}
|
||||
|
||||
type VideoRatio = 'vertical' | 'horizontal';
|
||||
@ -27,9 +33,11 @@ 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;
|
||||
@ -38,12 +46,26 @@ 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 => {
|
||||
const getImageSrc = (item: ImageItem): string | null => {
|
||||
return item.type === 'url' ? item.preview_url : item.preview;
|
||||
};
|
||||
|
||||
@ -52,7 +74,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
|
||||
setIsUploading(true);
|
||||
setUploadProgress(0);
|
||||
setUploadError(null);
|
||||
setDialog(null);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setUploadProgress(prev => {
|
||||
@ -85,13 +107,37 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
} catch (error) {
|
||||
clearInterval(interval);
|
||||
console.error('Image upload failed:', error);
|
||||
setUploadError(error instanceof Error ? error.message : t('assetManagement.uploadFailed'));
|
||||
setDialog({
|
||||
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();
|
||||
@ -100,10 +146,8 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const files = Array.from(e.dataTransfer.files).filter((file: File) =>
|
||||
file.type.startsWith('image/')
|
||||
);
|
||||
if (files.length > 0) onAddImages(files);
|
||||
const files = Array.from(e.dataTransfer.files).filter(isImageInputFile);
|
||||
if (files.length > 0) void runAddImages(files);
|
||||
};
|
||||
|
||||
const handleFileSelect = () => {
|
||||
@ -113,7 +157,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
onAddImages(Array.from(files));
|
||||
void runAddImages(Array.from(files));
|
||||
e.target.value = '';
|
||||
}
|
||||
};
|
||||
@ -123,6 +167,25 @@ 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">
|
||||
@ -146,6 +209,37 @@ 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 && (
|
||||
@ -169,6 +263,13 @@ 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">
|
||||
@ -182,27 +283,46 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
<div className="asset-image-list">
|
||||
{visibleImages.length > 0 && (
|
||||
<div className="asset-image-grid">
|
||||
{visibleImages.map((item, i) => (
|
||||
<div key={i} className="asset-image-item">
|
||||
<img
|
||||
src={getImageSrc(item)}
|
||||
alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
{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>
|
||||
))}
|
||||
{visibleImages.map((item, i) => {
|
||||
const src = getImageSrc(item);
|
||||
const fileName = item.type === 'file' ? item.file.name : '';
|
||||
return (
|
||||
<div key={i} className="asset-image-item">
|
||||
{src ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
|
||||
referrerPolicy="no-referrer"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
) : (
|
||||
<div className="asset-image-placeholder" title={fileName}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<path d="M21 15l-5-5L5 21"/>
|
||||
</svg>
|
||||
<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>
|
||||
@ -268,9 +388,6 @@ 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}
|
||||
@ -283,7 +400,7 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
accept="image/*,.heic,.heif"
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
|
||||
@ -402,7 +402,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
{summary.completed > 0 && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#1ba64f', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
{t('contentCalendar.completedCount', { count: summary.completed })}
|
||||
</span>
|
||||
</div>
|
||||
@ -410,7 +410,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
{summary.scheduled > 0 && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#2563eb', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
{t('contentCalendar.scheduledCount', { count: summary.scheduled })}
|
||||
</span>
|
||||
</div>
|
||||
@ -418,7 +418,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
{summary.failed > 0 && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: '#e15252', flexShrink: 0 }} />
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 11, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
<span style={{ fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 12, color: '#01191a', lineHeight: 1, whiteSpace: 'nowrap' }}>
|
||||
{t('contentCalendar.failedCount', { count: summary.failed })}
|
||||
</span>
|
||||
</div>
|
||||
@ -541,13 +541,13 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
backgroundColor: statusColor(item.status as UploadStatus), flexShrink: 0,
|
||||
}} />
|
||||
<span style={{
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13,
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14,
|
||||
color: statusColor(item.status as UploadStatus), lineHeight: 1,
|
||||
}}>
|
||||
{t(statusLabelKey(item.status as UploadStatus))}
|
||||
</span>
|
||||
<span style={{
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 400, fontSize: 13,
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 400, fontSize: 14,
|
||||
color: '#9bcacc', lineHeight: 1, marginLeft: 'auto',
|
||||
}}>
|
||||
{formatTime(item)}
|
||||
@ -595,7 +595,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
style={{
|
||||
height: 30, padding: '0 12px', borderRadius: 8,
|
||||
border: '1px solid #379599', backgroundColor: 'transparent',
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13,
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14,
|
||||
color: '#9bcacc', cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
@ -608,7 +608,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
style={{
|
||||
height: 30, padding: '0 12px', borderRadius: 8,
|
||||
border: 'none', backgroundColor: '#a65eff',
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 13,
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 500, fontSize: 14,
|
||||
color: '#ffffff', cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
@ -703,17 +703,19 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||
paddingTop: 24, paddingBottom: 20, width: '100%',
|
||||
paddingTop: embedded ? 0 : 24, paddingBottom: 20, width: '100%',
|
||||
boxSizing: 'border-box', position: 'relative',
|
||||
}}>
|
||||
<div style={{ width: '100%', paddingBottom: 24, paddingLeft: 20, paddingRight: 20, boxSizing: 'border-box' }}>
|
||||
<p style={{
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 700, fontSize: 30,
|
||||
color: '#ffffff', letterSpacing: '-0.18px', lineHeight: 1.3, margin: 0,
|
||||
}}>
|
||||
{t('contentCalendar.title')}
|
||||
</p>
|
||||
</div>
|
||||
{!embedded && (
|
||||
<div style={{ width: '100%', paddingBottom: 24, paddingLeft: 20, paddingRight: 20, boxSizing: 'border-box' }}>
|
||||
<p style={{
|
||||
fontFamily: 'Pretendard, sans-serif', fontWeight: 700, fontSize: 30,
|
||||
color: '#ffffff', letterSpacing: '-0.18px', lineHeight: 1.3, margin: 0,
|
||||
}}>
|
||||
{t('contentCalendar.title')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: 'column', gap: 16,
|
||||
|
||||
@ -740,7 +740,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
|
||||
borderRadius: '8px',
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
padding: '5px 10px',
|
||||
fontSize: '13px',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
minWidth: '160px',
|
||||
}}
|
||||
@ -788,7 +788,7 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
|
||||
display: 'flex', alignItems: 'center', gap: '8px',
|
||||
padding: '8px 12px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
fontSize: '14px',
|
||||
background: acc.id === selectedAccountId ? 'rgba(255,255,255,0.08)' : 'transparent',
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
}}
|
||||
@ -940,8 +940,8 @@ const DashboardContent: React.FC<DashboardContentProps> = ({ onNavigate }) => {
|
||||
onClick={() => setShowMockData(prev => !prev)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: '24px',
|
||||
right: '24px',
|
||||
top: '10px',
|
||||
right: '5px',
|
||||
zIndex: 9999,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
|
||||
@ -18,8 +18,18 @@ import { crawlUrl, autocomplete, marketingAnalysis, AutocompleteRequest, getUser
|
||||
import WizardStepper from '../../components/WizardStepper';
|
||||
import { NAV, GATED_ITEMS, sanitizeActiveItem, MyInfoTab } from '../../components/navItems';
|
||||
import { useIsMobile } from '../../utils/useIsMobile';
|
||||
import { createPreviewThumbnail } from '../../utils/imageCompression';
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
};
|
||||
import { Pipeline } from '../../components/PipelineTabs';
|
||||
import { Scen } from '../Ssulbox/ssulData';
|
||||
import SsulMakingContent, { SsulJob } from '../Ssulbox/SsulMakingContent';
|
||||
@ -241,6 +251,15 @@ 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 업데이트
|
||||
@ -249,6 +268,8 @@ 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 })));
|
||||
}
|
||||
}
|
||||
@ -258,21 +279,35 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
||||
const handleRemoveImage = (index: number) => {
|
||||
setImageList(prev => {
|
||||
const item = prev[index];
|
||||
// 파일 이미지인 경우 메모리 해제
|
||||
if (item.type === 'file') {
|
||||
// 파일 이미지인 경우 썸네일 메모리 해제 (생성 실패 시 preview 는 null)
|
||||
if (item.type === 'file' && item.preview) {
|
||||
URL.revokeObjectURL(item.preview);
|
||||
}
|
||||
return prev.filter((_, i) => i !== index);
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddImages = (files: File[]) => {
|
||||
const newImages: ImageItem[] = files.map(file => ({
|
||||
type: 'file',
|
||||
file,
|
||||
preview: URL.createObjectURL(file),
|
||||
}));
|
||||
// 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
|
||||
const handleAddImages = async (
|
||||
files: File[],
|
||||
onProgress: (done: number, total: number) => void
|
||||
) => {
|
||||
const total = files.length;
|
||||
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]);
|
||||
};
|
||||
|
||||
@ -284,6 +319,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
|
||||
setSongTaskId(null);
|
||||
setImageTaskId(null);
|
||||
setAnalysisData(null);
|
||||
revokeAllPreviews(imageListRef.current);
|
||||
setImageList([]);
|
||||
setActiveItem(NAV.HOME);
|
||||
};
|
||||
|
||||
@ -218,9 +218,6 @@ const SsulCreateForm: React.FC<SsulCreateFormProps> = ({ onSubmitted, onNeedCred
|
||||
<b>{selected.title}</b>
|
||||
<span>{selected.roadAddress || selected.address}</span>
|
||||
</div>
|
||||
<button type="button" className="ssul-picked__change" onClick={() => setSelected(null)}>
|
||||
{t('ssulbox.create.change')}
|
||||
</button>
|
||||
</div>
|
||||
) : isUrl ? (
|
||||
<div className="ssul-hint ok">{t('ssulbox.create.hintUrlOk')}</div>
|
||||
|
||||
@ -921,8 +921,8 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-gray-400);
|
||||
background: none;
|
||||
@ -930,6 +930,11 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-nav-item svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.bottom-nav-item.active {
|
||||
color: var(--color-mint);
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.settings-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
.settings-description {
|
||||
color: var(--color-text-gray-400);
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
line-height: 1.625;
|
||||
opacity: 0.8;
|
||||
@ -124,7 +124,7 @@
|
||||
|
||||
.settings-card-title {
|
||||
color: var(--color-mint);
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 0.1em;
|
||||
@ -234,7 +234,7 @@
|
||||
|
||||
.social-item-connect {
|
||||
color: var(--color-mint);
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
background: none;
|
||||
border: none;
|
||||
@ -321,7 +321,7 @@
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: #379599;
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
@ -333,7 +333,7 @@
|
||||
}
|
||||
|
||||
.footer-link-divider {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: #379599;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
border: 1px solid rgba(155, 202, 204, 0.3);
|
||||
background: transparent;
|
||||
color: #9BCACC;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
@ -54,7 +54,7 @@
|
||||
}
|
||||
|
||||
.ado2-contents-count {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #9BCACC;
|
||||
}
|
||||
@ -281,7 +281,7 @@
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
color: var(--color-text-white);
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
@ -321,7 +321,7 @@
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
background: rgba(255,255,255,0.05);
|
||||
color: var(--color-text-white);
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -453,7 +453,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #9BCACC;
|
||||
white-space: nowrap;
|
||||
@ -963,7 +963,7 @@
|
||||
background: #1A8F93;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -979,7 +979,7 @@
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -993,7 +993,7 @@
|
||||
|
||||
/* 댓글 닉네임 */
|
||||
.video-detail-comment-nickname {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #9BCACC;
|
||||
display: block;
|
||||
@ -1009,7 +1009,7 @@
|
||||
}
|
||||
|
||||
.video-detail-comments-title {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
@ -1463,31 +1463,31 @@
|
||||
background-color: rgba(148, 251, 224, 0.15);
|
||||
color: #94FBE0;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.social-connect-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.social-connect-message {
|
||||
font-size: 1rem;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.social-connect-detail {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.social-connect-countdown {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
color: #94FBE0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -1502,7 +1502,7 @@
|
||||
width: 100%;
|
||||
padding: 0.875rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@ -1590,7 +1590,7 @@
|
||||
}
|
||||
|
||||
.myinfo-title {
|
||||
font-size: 1.75rem;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 1.5rem;
|
||||
@ -1599,7 +1599,6 @@
|
||||
/* 탭 네비게이션 */
|
||||
.myinfo-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@ -1609,7 +1608,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.9rem;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@ -1648,7 +1647,7 @@
|
||||
}
|
||||
|
||||
.myinfo-section-title {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-transform: uppercase;
|
||||
@ -1657,7 +1656,7 @@
|
||||
|
||||
.myinfo-placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
@ -1683,20 +1682,20 @@
|
||||
|
||||
.myinfo-credits-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.95rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.myinfo-credits-value {
|
||||
color: #a6ffea;
|
||||
font-size: 1.4rem;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.myinfo-credits-desc {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
@ -1707,7 +1706,7 @@
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #002224;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@ -1745,7 +1744,7 @@
|
||||
|
||||
.myinfo-popup-title {
|
||||
color: #fff;
|
||||
font-size: 1.05rem;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5rem;
|
||||
align-self: flex-start;
|
||||
@ -1753,7 +1752,7 @@
|
||||
|
||||
.myinfo-popup-message {
|
||||
color: #fff;
|
||||
font-size: 1.1rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@ -1768,7 +1767,7 @@
|
||||
|
||||
.myinfo-popup-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.myinfo-popup-counter {
|
||||
@ -1784,7 +1783,7 @@
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
width: 48px;
|
||||
min-width: 48px;
|
||||
height: 44px;
|
||||
@ -1802,7 +1801,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
font-size: 16px;
|
||||
padding: 0.6rem 0.875rem;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
@ -1834,7 +1833,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
padding: 0.6rem 0.875rem;
|
||||
outline: none;
|
||||
resize: none;
|
||||
@ -1861,7 +1860,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
@ -1876,7 +1875,7 @@
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
@ -1900,14 +1899,14 @@
|
||||
}
|
||||
|
||||
.myinfo-business-empty-title {
|
||||
font-size: 1.1rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.myinfo-business-empty-desc {
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
@ -1925,7 +1924,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.myinfo-business-input::placeholder {
|
||||
@ -1943,7 +1942,7 @@
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: #002224;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@ -1971,7 +1970,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@ -2054,13 +2053,13 @@
|
||||
}
|
||||
|
||||
.myinfo-connected-channel {
|
||||
font-size: 0.9rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.myinfo-connected-platform {
|
||||
font-size: 0.7rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
@ -2076,7 +2075,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #a6ffea;
|
||||
}
|
||||
@ -2087,7 +2086,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 6px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@ -2099,7 +2098,7 @@
|
||||
}
|
||||
|
||||
.myinfo-loading {
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
@ -2113,7 +2112,7 @@
|
||||
}
|
||||
|
||||
.myinfo-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.myinfo-tabs {
|
||||
@ -2129,7 +2128,7 @@
|
||||
.myinfo-tab {
|
||||
white-space: nowrap;
|
||||
padding: 0.625rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.myinfo-business-input-row {
|
||||
|
||||
@ -232,7 +232,7 @@
|
||||
color: var(--color-bg-dark);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 20px 25px -5px rgba(166, 255, 234, 0.2);
|
||||
}
|
||||
@ -269,7 +269,7 @@
|
||||
.chart-xaxis {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0 1rem;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
@ -601,7 +601,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -699,7 +699,7 @@
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.yoy-chart-xaxis {
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
/* Completion Page Title */
|
||||
.completion-title {
|
||||
font-size: 1.75rem;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #E5F1F2;
|
||||
line-height: 1.19;
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.completion-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 40px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@ -185,7 +185,7 @@
|
||||
}
|
||||
|
||||
.video-overlay-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.3;
|
||||
@ -196,7 +196,7 @@
|
||||
}
|
||||
|
||||
.video-overlay-logo {
|
||||
font-size: 0.375rem;
|
||||
font-size: 6px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.3;
|
||||
@ -225,7 +225,7 @@
|
||||
}
|
||||
|
||||
.ai-optimization-title {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #94FBE0;
|
||||
line-height: 1.19;
|
||||
@ -264,7 +264,7 @@
|
||||
}
|
||||
|
||||
.ai-tag-text {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #E5F1F2;
|
||||
line-height: 1.19;
|
||||
@ -336,7 +336,7 @@
|
||||
}
|
||||
|
||||
.completion-social-name {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.19;
|
||||
@ -344,7 +344,7 @@
|
||||
}
|
||||
|
||||
.completion-social-email {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #94FBE0;
|
||||
line-height: 1.19;
|
||||
@ -359,7 +359,7 @@
|
||||
}
|
||||
|
||||
.completion-social-channel {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #94FBE0;
|
||||
line-height: 1.19;
|
||||
@ -377,14 +377,14 @@
|
||||
}
|
||||
|
||||
.completion-social-channel-name {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.completion-social-platform {
|
||||
font-size: 0.7rem;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.2;
|
||||
@ -405,7 +405,7 @@
|
||||
|
||||
/* Social Card Status */
|
||||
.completion-social-status {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
@ -438,7 +438,7 @@
|
||||
}
|
||||
|
||||
.completion-social-disconnect {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #f87171;
|
||||
background: transparent;
|
||||
@ -461,7 +461,7 @@
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
@ -486,7 +486,7 @@
|
||||
border: 1px solid #AE72F9;
|
||||
border-radius: var(--radius-full);
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
@ -531,7 +531,7 @@
|
||||
gap: 4px;
|
||||
background-color: #462E64;
|
||||
color: #CFABFB;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 1.25rem 0 0.5rem;
|
||||
height: 36px;
|
||||
@ -1262,7 +1262,7 @@
|
||||
.report-content {
|
||||
color: #CEE5E6;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.006em;
|
||||
@ -1270,7 +1270,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.report-content {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
}
|
||||
@ -1385,7 +1385,7 @@
|
||||
|
||||
.selling-point-content p {
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #CEE5E6;
|
||||
letter-spacing: -0.006em;
|
||||
@ -1395,7 +1395,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.selling-point-content p {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
@ -1419,7 +1419,7 @@
|
||||
background-color: #034A4D;
|
||||
border-radius: 999px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #CEE5E6;
|
||||
letter-spacing: -0.006em;
|
||||
@ -1428,7 +1428,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.feature-tag {
|
||||
font-size: 17px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1665,7 +1665,7 @@
|
||||
}
|
||||
|
||||
.bi-usp-category {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6AB0B3;
|
||||
text-transform: uppercase;
|
||||
@ -1678,7 +1678,7 @@
|
||||
}
|
||||
|
||||
.bi-usp-description {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 1.5;
|
||||
@ -1694,7 +1694,7 @@
|
||||
}
|
||||
|
||||
.bi-usp-english-category {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6AB0B3;
|
||||
text-transform: uppercase;
|
||||
@ -1749,7 +1749,7 @@
|
||||
}
|
||||
|
||||
.bi-chart-sublabel {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -1885,7 +1885,7 @@
|
||||
}
|
||||
|
||||
.bi2-subtitle {
|
||||
font-size: 21px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #E5F1F2;
|
||||
letter-spacing: -0.006em;
|
||||
@ -2357,7 +2357,7 @@
|
||||
color: var(--Color-white, #FFF);
|
||||
text-align: center;
|
||||
font-family: Pretendard;
|
||||
font-size: 45px;
|
||||
font-size: 46px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
@ -2432,7 +2432,7 @@
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.006em;
|
||||
color: var(--color-text-gray-400);
|
||||
@ -2491,7 +2491,7 @@
|
||||
border: 1px dashed var(--color-border-white-10);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
@ -2801,12 +2801,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.wizard-stepper {
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 노드 셀: 노드 너비와 동일한 2rem 고정. 라벨은 이 밖으로 넘침 */
|
||||
.wizard-step {
|
||||
flex: none;
|
||||
|
||||
@ -384,7 +384,7 @@
|
||||
width: 100%;
|
||||
gap: 12px;
|
||||
color: var(--color-text-gray-300);
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero-divider::before,
|
||||
@ -581,7 +581,7 @@
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: #E5F1F2;
|
||||
@ -591,13 +591,13 @@
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.welcome-title {
|
||||
font-size: 2rem;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.welcome-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -617,7 +617,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.welcome-subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -833,7 +833,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #9BCACC;
|
||||
letter-spacing: -0.006em;
|
||||
@ -850,7 +850,7 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.feature-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1425,18 +1425,18 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.login-title {
|
||||
font-size: 3rem;
|
||||
font-size: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.login-title {
|
||||
font-size: 3.75rem;
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.8;
|
||||
@ -1509,7 +1509,7 @@
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
font-size: 2rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.006em;
|
||||
line-height: 1.19;
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
background: rgba(166, 130, 255, 0.15);
|
||||
border: 1px solid rgba(166, 130, 255, 0.3);
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #a682ff;
|
||||
}
|
||||
@ -153,7 +153,7 @@
|
||||
border: 1px dashed rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 1rem;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
||||
@ -281,7 +281,7 @@
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 0.7rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
@ -290,11 +290,11 @@
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.social-posting-no-accounts-hint {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
@ -355,7 +355,7 @@
|
||||
}
|
||||
|
||||
.mini-calendar-title {
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
@ -364,7 +364,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 1.2rem;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
@ -385,7 +385,7 @@
|
||||
|
||||
.mini-calendar-day-label {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
padding: 4px 0;
|
||||
}
|
||||
@ -394,7 +394,7 @@
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.78rem;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 5px 2px;
|
||||
border-radius: 6px;
|
||||
@ -435,7 +435,7 @@
|
||||
}
|
||||
|
||||
.schedule-time-label {
|
||||
font-size: 0.8rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -451,7 +451,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.85rem;
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@ -468,7 +468,7 @@
|
||||
}
|
||||
|
||||
.schedule-datetime-preview {
|
||||
font-size: 0.8rem;
|
||||
font-size: 12px;
|
||||
color: #a65eff;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
@ -485,7 +485,7 @@
|
||||
}
|
||||
|
||||
.social-posting-footer-note {
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
@ -503,7 +503,7 @@
|
||||
.social-posting-btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@ -619,7 +619,7 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -683,7 +683,7 @@
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@ -744,7 +744,7 @@
|
||||
}
|
||||
|
||||
.upload-progress-title {
|
||||
font-size: 1.125rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
@ -835,7 +835,7 @@
|
||||
|
||||
/* Status Text */
|
||||
.upload-progress-status {
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin: 0;
|
||||
@ -879,7 +879,7 @@
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@ -905,13 +905,13 @@
|
||||
}
|
||||
|
||||
.upload-progress-label {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.upload-progress-value {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: right;
|
||||
word-break: break-word;
|
||||
@ -928,7 +928,7 @@
|
||||
|
||||
.upload-progress-error p {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
color: #f87171;
|
||||
text-align: center;
|
||||
}
|
||||
@ -941,7 +941,7 @@
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #f87171;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
@ -968,7 +968,7 @@
|
||||
}
|
||||
|
||||
.upload-progress-calendar-link {
|
||||
font-size: 0.8rem;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
@ -982,7 +982,7 @@
|
||||
.upload-progress-btn {
|
||||
padding: 0.75rem 2rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@ -1001,7 +1001,7 @@
|
||||
|
||||
.upload-progress-note {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
@ -1068,7 +1068,7 @@
|
||||
}
|
||||
|
||||
.manual-modal-subtitle {
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(155, 202, 204, 0.7);
|
||||
padding: 15px 20px 0;
|
||||
|
||||
@ -121,13 +121,13 @@
|
||||
|
||||
.ssul-scn__name {
|
||||
position: relative;
|
||||
font-size: 13.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ssul-scn__desc {
|
||||
position: relative;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
@ -170,7 +170,7 @@
|
||||
background: var(--color-bg-card-inner);
|
||||
color: var(--color-text-white);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--transition-normal);
|
||||
@ -224,12 +224,12 @@
|
||||
}
|
||||
|
||||
.ssul-places b {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ssul-places span {
|
||||
font-size: 11.5px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
@ -254,25 +254,13 @@
|
||||
}
|
||||
|
||||
.ssul-picked__body b {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ssul-picked__body span {
|
||||
font-size: 11.5px;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
.ssul-picked__change {
|
||||
flex: none;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border-white-10);
|
||||
border-radius: 999px;
|
||||
background: none;
|
||||
color: var(--color-text-gray-300);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
.ssul-hint {
|
||||
@ -318,7 +306,7 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px 4px;
|
||||
font-size: 12.5px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
@ -331,7 +319,7 @@
|
||||
}
|
||||
|
||||
.ssul-create__coin {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -346,7 +334,7 @@
|
||||
background: linear-gradient(90deg, #ff8a5c, var(--color-ssul-accent));
|
||||
color: #1a1200;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
transition: filter var(--transition-normal), box-shadow var(--transition-normal);
|
||||
@ -381,18 +369,18 @@
|
||||
margin: auto;
|
||||
padding: 48px 20px;
|
||||
text-align: center;
|
||||
gap: 10px;
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.ssul-making__scenario {
|
||||
font-size: 13px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.ssul-making__title {
|
||||
margin: 0 0 24px;
|
||||
font-size: 19px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
@ -408,8 +396,8 @@
|
||||
.ssul-making__spinner {
|
||||
position: relative;
|
||||
flex: none;
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 4px 0 26px;
|
||||
}
|
||||
|
||||
@ -439,6 +427,7 @@
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
margin-top: 20px;
|
||||
background: var(--color-bg-card-inner);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -455,7 +444,7 @@
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
font-size: 12.5px;
|
||||
font-size: 16px;
|
||||
color: var(--color-text-gray-300);
|
||||
}
|
||||
|
||||
@ -466,14 +455,14 @@
|
||||
|
||||
.ssul-making__desc {
|
||||
margin: 22px 0 0;
|
||||
font-size: 12.5px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-text-gray-400);
|
||||
}
|
||||
|
||||
.ssul-making__refund {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12.5px;
|
||||
font-size: 14px;
|
||||
color: var(--color-mint);
|
||||
}
|
||||
|
||||
@ -485,7 +474,7 @@
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text-white);
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-normal);
|
||||
|
||||
@ -110,18 +110,18 @@
|
||||
|
||||
.ssul-scope .card .meta {position:absolute;left:9px;right:9px;bottom:8px;z-index:2}
|
||||
|
||||
.ssul-scope .card .title {color:#fff;font-size:12.5px;font-weight:700;line-height:1.28;
|
||||
.ssul-scope .card .title {color:#fff;font-size:12px;font-weight:700;line-height:1.28;
|
||||
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
|
||||
text-shadow:0 1px 3px rgba(0,0,0,.5);}
|
||||
|
||||
.ssul-scope .card .sub {display:flex;align-items:center;gap:4px;margin-top:5px;color:rgba(255,255,255,.9);font-size:11px;font-variant-numeric:tabular-nums}
|
||||
.ssul-scope .card .sub {display:flex;align-items:center;gap:4px;margin-top:5px;color:rgba(255,255,255,.9);font-size:12px;font-variant-numeric:tabular-nums}
|
||||
|
||||
.ssul-scope .card .sub svg {width:12px;height:12px;fill:currentColor}
|
||||
|
||||
.ssul-scope .badge {position:absolute;top:8px;left:8px;z-index:2;
|
||||
display:inline-flex;align-items:center;gap:4px;
|
||||
padding:3px 8px;border-radius:999px;
|
||||
font-size:10.5px;font-weight:700;color:#fff;
|
||||
font-size:10px;font-weight:700;color:#fff;
|
||||
background:rgba(0,0,0,.32);backdrop-filter:blur(3px);}
|
||||
|
||||
.ssul-scope .badge i {width:7px;height:7px;border-radius:50%;display:inline-block}
|
||||
@ -152,7 +152,7 @@
|
||||
.ssul-scope .chips::-webkit-scrollbar {display:none}
|
||||
|
||||
.ssul-scope .chip {flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--surface-2);
|
||||
font-size:13px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.15s}
|
||||
font-size:14px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:.15s}
|
||||
|
||||
.ssul-scope .chip[aria-pressed="true"] {background:var(--fg);color:var(--bg)}
|
||||
|
||||
@ -179,7 +179,7 @@
|
||||
|
||||
.ssul-scope .bio .name {font-weight:700;font-size:14px}
|
||||
|
||||
.ssul-scope .bio .bio-txt {font-size:13px;color:var(--fg);margin-top:3px;line-height:1.45;white-space:pre-wrap}
|
||||
.ssul-scope .bio .bio-txt {font-size:14px;color:var(--fg);margin-top:3px;line-height:1.45;white-space:pre-wrap}
|
||||
|
||||
.ssul-scope .bio .bio-txt.muted {color:var(--faint)}
|
||||
|
||||
@ -187,7 +187,7 @@
|
||||
|
||||
.ssul-scope .pe-av-btns {display:flex;gap:8px}
|
||||
|
||||
.ssul-scope .pe-av-btns button {font-size:13px;font-weight:700;color:var(--samgukji);padding:6px 12px;border-radius:9px;background:var(--surface-2)}
|
||||
.ssul-scope .pe-av-btns button {font-size:14px;font-weight:700;color:var(--samgukji);padding:6px 12px;border-radius:9px;background:var(--surface-2)}
|
||||
|
||||
.ssul-scope .pe-av-btns button.rm {color:var(--muted)}
|
||||
|
||||
@ -202,18 +202,18 @@
|
||||
|
||||
.ssul-scope .token-card .tk-left {display:flex;flex-direction:column;gap:1px;min-width:0}
|
||||
|
||||
.ssul-scope .token-card .tk-left span {font-size:11.5px;color:var(--muted);font-weight:600}
|
||||
.ssul-scope .token-card .tk-left span {font-size:12px;color:var(--muted);font-weight:600}
|
||||
|
||||
.ssul-scope .token-card .tk-left b {font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
|
||||
.ssul-scope .token-card .tk-left b {font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
|
||||
|
||||
.ssul-scope .token-card .tk-left em {font-size:11px;color:var(--muted);font-style:normal;margin-top:2px}
|
||||
.ssul-scope .token-card .tk-left em {font-size:12px;color:var(--muted);font-style:normal;margin-top:2px}
|
||||
|
||||
.ssul-scope .token-card .tk-btn {flex:0 0 auto;padding:11px 20px;border-radius:11px;color:#fff;font-weight:800;font-size:13px;
|
||||
.ssul-scope .token-card .tk-btn {flex:0 0 auto;padding:11px 20px;border-radius:11px;color:#fff;font-weight:800;font-size:14px;
|
||||
background:var(--ig);box-shadow:0 4px 12px rgba(220,39,67,.28)}
|
||||
|
||||
.ssul-scope .pf-actions {display:flex;gap:8px;margin:12px 0 4px}
|
||||
|
||||
.ssul-scope .pf-actions button {flex:1;padding:8px;border-radius:9px;background:var(--surface-2);font-size:13px;font-weight:700}
|
||||
.ssul-scope .pf-actions button {flex:1;padding:8px;border-radius:9px;background:var(--surface-2);font-size:14px;font-weight:700}
|
||||
|
||||
.ssul-scope .pf-tabs {display:flex;border-top:1px solid var(--border);margin-top:12px}
|
||||
|
||||
@ -241,13 +241,13 @@
|
||||
|
||||
.ssul-scope .sheet-h {display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px;border-bottom:1px solid var(--border)}
|
||||
|
||||
.ssul-scope .sheet-h h3 {font-size:17px;font-weight:800}
|
||||
.ssul-scope .sheet-h h3 {font-size:18px;font-weight:800}
|
||||
|
||||
.ssul-scope .sheet-h button {color:var(--muted);font-size:22px;line-height:1;padding:4px}
|
||||
|
||||
.ssul-scope .sheet-body {overflow-y:auto;padding:16px}
|
||||
|
||||
.ssul-scope .step-label {font-size:13px;font-weight:700;color:var(--muted);margin:2px 2px 10px}
|
||||
.ssul-scope .step-label {font-size:14px;font-weight:700;color:var(--muted);margin:2px 2px 10px}
|
||||
|
||||
.ssul-scope .step-label b {color:var(--fg)}
|
||||
|
||||
@ -265,9 +265,9 @@
|
||||
|
||||
.ssul-scope .scn .tx {flex:1}
|
||||
|
||||
.ssul-scope .scn .tx .t {font-weight:800;font-size:15px}
|
||||
.ssul-scope .scn .tx .t {font-weight:800;font-size:16px}
|
||||
|
||||
.ssul-scope .scn .tx .d {font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
|
||||
.ssul-scope .scn .tx .d {font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
|
||||
|
||||
.ssul-scope .scn .ck {width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex:0 0 auto;display:grid;place-items:center}
|
||||
|
||||
@ -277,7 +277,7 @@
|
||||
|
||||
.ssul-scope .field {margin-top:20px}
|
||||
|
||||
.ssul-scope .field > label {display:block;font-size:13px;font-weight:700;margin-bottom:8px}
|
||||
.ssul-scope .field > label {display:block;font-size:14px;font-weight:700;margin-bottom:8px}
|
||||
|
||||
.ssul-scope .input {display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:12px;padding:12px 14px;border:1.5px solid transparent}
|
||||
|
||||
@ -285,15 +285,15 @@
|
||||
|
||||
.ssul-scope .input svg {width:17px;height:17px;color:var(--muted);flex:0 0 auto}
|
||||
|
||||
.ssul-scope .input input {flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:15px}
|
||||
.ssul-scope .input input {flex:1;background:none;border:none;outline:none;color:var(--fg);font-size:16px}
|
||||
|
||||
.ssul-scope .input input::placeholder {color:var(--faint)}
|
||||
|
||||
.ssul-scope .hint {font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5;padding:0 2px}
|
||||
.ssul-scope .hint {font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5;padding:0 2px}
|
||||
|
||||
.ssul-scope .sheet-foot {padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
|
||||
|
||||
.ssul-scope .cta {width:100%;padding:15px;border-radius:14px;font-size:15px;font-weight:800;color:#fff;background:var(--ig);
|
||||
.ssul-scope .cta {width:100%;padding:15px;border-radius:14px;font-size:16px;font-weight:800;color:#fff;background:var(--ig);
|
||||
transition:.15s;box-shadow:0 6px 18px rgba(220,39,67,.32)}
|
||||
|
||||
.ssul-scope .cta:disabled {background:var(--surface-2);color:var(--faint);box-shadow:none;cursor:not-allowed}
|
||||
@ -302,9 +302,9 @@
|
||||
|
||||
@keyframes sp{to{transform:rotate(360deg)}}
|
||||
|
||||
.ssul-scope .making h4 {font-size:17px;font-weight:800}
|
||||
.ssul-scope .making h4 {font-size:18px;font-weight:800}
|
||||
|
||||
.ssul-scope .making p {font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}
|
||||
.ssul-scope .making p {font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
|
||||
|
||||
.ssul-scope .making .prog {margin-top:22px;display:flex;align-items:center;gap:12px}
|
||||
|
||||
@ -353,7 +353,7 @@
|
||||
|
||||
.ssul-scope .vrail {position:absolute;right:10px;bottom:120px;z-index:3;display:flex;flex-direction:column;gap:20px;align-items:center}
|
||||
|
||||
.ssul-scope .vrail button {color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
|
||||
.ssul-scope .vrail button {color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
|
||||
|
||||
.ssul-scope .vrail svg {width:29px;height:29px;fill:#fff}
|
||||
|
||||
@ -361,14 +361,14 @@
|
||||
padding-bottom:calc(56px + env(safe-area-inset-bottom));
|
||||
background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
|
||||
|
||||
.ssul-scope .vbottom .vt {color:#fff;font-weight:800;font-size:17px;line-height:1.3}
|
||||
.ssul-scope .vbottom .vt {color:#fff;font-weight:800;font-size:18px;line-height:1.3}
|
||||
|
||||
.ssul-scope .vbottom .vn {color:rgba(255,255,255,.86);font-size:13px;margin-top:8px;line-height:1.5;
|
||||
.ssul-scope .vbottom .vn {color:rgba(255,255,255,.86);font-size:14px;margin-top:8px;line-height:1.5;
|
||||
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
|
||||
|
||||
.ssul-scope .vbottom .vbadge {margin-bottom:10px}
|
||||
|
||||
.ssul-scope .note-pill {display:inline-block;margin-top:12px;font-size:11px;color:rgba(255,255,255,.7);
|
||||
.ssul-scope .note-pill {display:inline-block;margin-top:12px;font-size:12px;color:rgba(255,255,255,.7);
|
||||
background:rgba(255,255,255,.12);padding:5px 10px;border-radius:8px}
|
||||
|
||||
@media (min-width:860px) {
|
||||
@ -401,7 +401,7 @@
|
||||
|
||||
.ssul-scope .cmts-list {flex:1;overflow-y:auto;padding:6px 16px}
|
||||
|
||||
.ssul-scope .cmts-empty {color:var(--muted);font-size:13px;text-align:center;padding:30px 0}
|
||||
.ssul-scope .cmts-empty {color:var(--muted);font-size:14px;text-align:center;padding:30px 0}
|
||||
|
||||
.ssul-scope .cmt {padding:9px 0;border-bottom:1px solid var(--border)}
|
||||
|
||||
@ -409,7 +409,7 @@
|
||||
|
||||
.ssul-scope .cmt .bd {font-size:14px;margin-top:2px;line-height:1.4}
|
||||
|
||||
.ssul-scope .cmt .del {font-size:11px;color:var(--faint);float:right}
|
||||
.ssul-scope .cmt .del {font-size:12px;color:var(--faint);float:right}
|
||||
|
||||
.ssul-scope .cmt .rep {margin:8px 0 0 16px;padding-left:10px;border-left:2px solid var(--border)}
|
||||
|
||||
@ -421,11 +421,11 @@
|
||||
|
||||
.ssul-scope .cmts-in button:disabled {color:var(--faint)}
|
||||
|
||||
.ssul-scope .lbl-sub {font-weight:500;color:var(--muted);font-size:11px}
|
||||
.ssul-scope .lbl-sub {font-weight:500;color:var(--muted);font-size:12px}
|
||||
|
||||
.ssul-scope .input.search {align-items:center}
|
||||
|
||||
.ssul-scope .srch-btn {flex:0 0 auto;padding:8px 14px;border-radius:9px;background:var(--fg);color:var(--bg);font-size:13px;font-weight:800}
|
||||
.ssul-scope .srch-btn {flex:0 0 auto;padding:8px 14px;border-radius:9px;background:var(--fg);color:var(--bg);font-size:14px;font-weight:800}
|
||||
|
||||
.ssul-scope .srch-btn:disabled {opacity:.4}
|
||||
|
||||
@ -446,15 +446,15 @@
|
||||
|
||||
.ssul-scope .picked .pk-body {flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
|
||||
|
||||
.ssul-scope .picked .pk-body b {font-size:15px;font-weight:800;color:var(--fg)}
|
||||
.ssul-scope .picked .pk-body b {font-size:16px;font-weight:800;color:var(--fg)}
|
||||
|
||||
.ssul-scope .picked .pk-body b::before {content:"✓ ";color:#22c55e}
|
||||
|
||||
.ssul-scope .picked .pk-body span {font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
|
||||
.ssul-scope .pk-change {flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--muted);padding:6px 10px;border-radius:8px;background:var(--surface-2)}
|
||||
.ssul-scope .pk-change {flex:0 0 auto;font-size:12px;font-weight:800;color:var(--muted);padding:6px 10px;border-radius:8px;background:var(--surface-2)}
|
||||
|
||||
.ssul-scope .place-loading {margin:10px 2px 0;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
|
||||
.ssul-scope .place-loading {margin:10px 2px 0;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
|
||||
|
||||
.ssul-scope .spin.sm {width:16px;height:16px;border-width:2px;margin:0}
|
||||
|
||||
@ -468,7 +468,7 @@
|
||||
|
||||
.ssul-scope .sns-h span {font-size:14px;font-weight:800}
|
||||
|
||||
.ssul-scope .sns-h em {font-style:normal;font-size:11.5px;color:var(--muted)}
|
||||
.ssul-scope .sns-h em {font-style:normal;font-size:12px;color:var(--muted)}
|
||||
|
||||
.ssul-scope .sns-row {display:flex;align-items:center;gap:11px;padding:11px 16px}
|
||||
|
||||
@ -482,9 +482,9 @@
|
||||
|
||||
.ssul-scope .sns-dot {width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block}
|
||||
|
||||
.ssul-scope .sns-soon {font-style:normal;font-size:10.5px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:10px}
|
||||
.ssul-scope .sns-soon {font-style:normal;font-size:10px;font-weight:800;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:10px}
|
||||
|
||||
.ssul-scope .sns-btn {padding:7px 15px;border-radius:20px;font-size:13px;font-weight:800;background:var(--fg);color:var(--bg)}
|
||||
.ssul-scope .sns-btn {padding:7px 15px;border-radius:20px;font-size:14px;font-weight:800;background:var(--fg);color:var(--bg)}
|
||||
|
||||
.ssul-scope .sns-btn.on {background:var(--surface-2);color:var(--muted)}
|
||||
|
||||
@ -500,9 +500,9 @@
|
||||
|
||||
.ssul-scope .share-row+.share-row {border-top:1px solid var(--border)}
|
||||
|
||||
.ssul-scope .share-name {flex:1;text-align:left;font-size:15px;font-weight:700;color:var(--fg)}
|
||||
.ssul-scope .share-name {flex:1;text-align:left;font-size:16px;font-weight:700;color:var(--fg)}
|
||||
|
||||
.ssul-scope .share-state {font-size:12.5px;font-weight:800;color:var(--samgukji)}
|
||||
.ssul-scope .share-state {font-size:12px;font-weight:800;color:var(--samgukji)}
|
||||
|
||||
.ssul-scope .share-row:disabled .share-state {color:var(--faint)}
|
||||
|
||||
@ -524,7 +524,7 @@
|
||||
|
||||
.ssul-scope .toast {position:fixed;left:50%;bottom:86px;z-index:60;transform:translate(-50%,14px);opacity:0;pointer-events:none;
|
||||
max-width:min(88vw,420px);padding:12px 18px;border-radius:14px;background:rgba(20,18,16,.94);color:#fff;
|
||||
font-size:13.5px;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.4);
|
||||
font-size:14px;font-weight:600;line-height:1.45;text-align:center;box-shadow:0 10px 34px rgba(0,0,0,.4);
|
||||
transition:opacity .2s,transform .2s}
|
||||
|
||||
.ssul-scope .toast.on {opacity:1;transform:translate(-50%,0)}
|
||||
@ -534,7 +534,7 @@
|
||||
}
|
||||
|
||||
.ssul-scope .job-badge {position:fixed;right:14px;bottom:86px;z-index:55;padding:11px 16px;border-radius:999px;
|
||||
background:rgba(20,18,16,.94);color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 34px rgba(0,0,0,.4);
|
||||
background:rgba(20,18,16,.94);color:#fff;font-size:14px;font-weight:700;box-shadow:0 10px 34px rgba(0,0,0,.4);
|
||||
display:flex;align-items:center;gap:6px;cursor:pointer}
|
||||
|
||||
.ssul-scope .job-badge.err {background:#b3261e}
|
||||
@ -554,18 +554,18 @@
|
||||
|
||||
.ssul-scope .prod:disabled {opacity:.55}
|
||||
|
||||
.ssul-scope .prod-tag {position:absolute;top:-9px;left:14px;background:var(--samgukji);color:#fff;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px}
|
||||
.ssul-scope .prod-tag {position:absolute;top:-9px;left:14px;background:var(--samgukji);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px}
|
||||
|
||||
.ssul-scope .prod-cr {grid-area:cr;font-size:15px;color:var(--muted);font-weight:600}
|
||||
.ssul-scope .prod-cr {grid-area:cr;font-size:16px;color:var(--muted);font-weight:600}
|
||||
|
||||
.ssul-scope .prod-cr b {font-size:22px;color:var(--fg);font-weight:800;margin-right:3px}
|
||||
|
||||
.ssul-scope .prod-bonus {grid-area:bonus;font-size:11.5px;color:var(--samgukji);font-weight:700}
|
||||
.ssul-scope .prod-bonus {grid-area:bonus;font-size:12px;color:var(--samgukji);font-weight:700}
|
||||
|
||||
.ssul-scope .prod-name {grid-area:name;font-size:12px;color:var(--faint)}
|
||||
|
||||
.ssul-scope .prod-price {grid-area:price;font-size:16px;font-weight:800;color:var(--fg);white-space:nowrap}
|
||||
|
||||
.ssul-scope .tb-login {background:var(--samgukji);color:#fff;font-size:13px;font-weight:800;padding:8px 15px;border-radius:20px}
|
||||
.ssul-scope .tb-login {background:var(--samgukji);color:#fff;font-size:14px;font-weight:800;padding:8px 15px;border-radius:20px}
|
||||
|
||||
.ssul-scope :focus-visible {outline:2px solid var(--samgukji);outline-offset:2px}
|
||||
|
||||
@ -80,7 +80,7 @@
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
@ -92,14 +92,14 @@
|
||||
}
|
||||
|
||||
.progress-current {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-white);
|
||||
}
|
||||
|
||||
.progress-divider,
|
||||
.progress-total {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #379599;
|
||||
}
|
||||
@ -122,7 +122,7 @@
|
||||
|
||||
/* Sound Studio Title */
|
||||
.sound-studio-title {
|
||||
font-size: 2rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
@ -192,7 +192,7 @@
|
||||
|
||||
/* Column Title */
|
||||
.column-title {
|
||||
font-size: 1.125rem;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-mint);
|
||||
line-height: 1.19;
|
||||
@ -337,7 +337,7 @@
|
||||
}
|
||||
|
||||
.language-flag {
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
line-height: 1.19;
|
||||
letter-spacing: -0.006em;
|
||||
}
|
||||
@ -415,7 +415,7 @@
|
||||
}
|
||||
|
||||
.language-dropdown-item .language-flag {
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.language-dropdown-item .language-name {
|
||||
@ -642,7 +642,7 @@
|
||||
.charge-credits-link {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
color: #AE72F9;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
@ -795,7 +795,7 @@
|
||||
}
|
||||
|
||||
.column-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.lyrics-display {
|
||||
@ -832,6 +832,72 @@
|
||||
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: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.asset-upload-error-message {
|
||||
margin: 0.75rem 0 1.5rem;
|
||||
color: #E5F1F2;
|
||||
font-size: 16px;
|
||||
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: 16px;
|
||||
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 {
|
||||
@ -865,7 +931,7 @@
|
||||
gap: 4px;
|
||||
background-color: #462E64;
|
||||
color: #CFABFB;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0 1.25rem 0 0.5rem;
|
||||
height: 36px;
|
||||
@ -944,7 +1010,7 @@
|
||||
|
||||
/* Asset Title */
|
||||
.asset-title {
|
||||
font-size: 2rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #E5F1F2;
|
||||
padding: 0 0 1.5rem;
|
||||
@ -1024,16 +1090,30 @@
|
||||
}
|
||||
|
||||
.asset-section-subtitle {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6AB0B3;
|
||||
line-height: 1.19;
|
||||
letter-spacing: -0.006em;
|
||||
}
|
||||
|
||||
.asset-section-count {
|
||||
font-size: 14px;
|
||||
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;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #94FBE0;
|
||||
line-height: 1.19;
|
||||
@ -1048,7 +1128,7 @@
|
||||
gap: 4px;
|
||||
background-color: #94FBE0;
|
||||
color: #000;
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
@ -1097,7 +1177,7 @@
|
||||
padding: 0.625rem 1rem;
|
||||
background-color: #002224;
|
||||
color: #9BCACC;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: 1px solid #379599;
|
||||
border-radius: 8px;
|
||||
@ -1133,13 +1213,37 @@
|
||||
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: 12px;
|
||||
line-height: 1.2;
|
||||
color: #9BCACC;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.asset-image-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
background-color: #EFE3FE;
|
||||
color: #AE72F9;
|
||||
font-size: 0.75rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
@ -1204,7 +1308,7 @@
|
||||
}
|
||||
|
||||
.asset-upload-text {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #9BCACC;
|
||||
text-align: center;
|
||||
@ -1248,7 +1352,7 @@
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1.19;
|
||||
letter-spacing: -0.006em;
|
||||
@ -1270,7 +1374,7 @@
|
||||
}
|
||||
|
||||
.asset-ratio-subtitle {
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BCACC;
|
||||
}
|
||||
@ -1305,7 +1409,7 @@
|
||||
.asset-next-button {
|
||||
background-color: #AE72F9;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.875rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 10px 40px;
|
||||
border: none;
|
||||
@ -1328,7 +1432,7 @@
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 639px) {
|
||||
.asset-title {
|
||||
font-size: 1.5rem;
|
||||
font-size: 24px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -1343,7 +1447,7 @@
|
||||
|
||||
@media (min-width: 640px) and (max-width: 767px) {
|
||||
.asset-title {
|
||||
font-size: 1.75rem;
|
||||
font-size: 28px;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
@ -1355,7 +1459,7 @@
|
||||
/* Height-based responsive adjustments */
|
||||
@media (max-height: 700px) {
|
||||
.asset-title {
|
||||
font-size: 1.75rem;
|
||||
font-size: 28px;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
:root {
|
||||
/* 모바일 하단 탭바 높이 (safe-area 포함).
|
||||
탭바 자신과, 탭바에 가리면 안 되는 fixed 요소(캘린더 바텀시트 등)가 공유한다 */
|
||||
--bottom-nav-height: calc(64px + env(safe-area-inset-bottom));
|
||||
--bottom-nav-height: calc(72px + env(safe-area-inset-bottom));
|
||||
|
||||
/* Primary Colors */
|
||||
--color-mint: #a6ffea;
|
||||
@ -64,14 +64,14 @@
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Font Sizes */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 30px;
|
||||
--text-4xl: 36px;
|
||||
|
||||
/* Transitions */
|
||||
--transition-fast: 150ms;
|
||||
|
||||
@ -61,8 +61,8 @@ export interface UrlImage {
|
||||
// 업로드된 파일 이미지
|
||||
export interface FileImage {
|
||||
type: 'file';
|
||||
file: File;
|
||||
preview: string; // createObjectURL로 생성된 미리보기 URL
|
||||
file: File; // 업로드용 원본. 썸네일로 대체하지 않는다.
|
||||
preview: string | null; // 미리보기용 축소 썸네일 objectURL. 생성 실패 시 null.
|
||||
}
|
||||
|
||||
export type ImageItem = UrlImage | FileImage;
|
||||
|
||||
@ -37,6 +37,7 @@ import {
|
||||
ContentType,
|
||||
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);
|
||||
@ -718,18 +719,10 @@ export async function uploadImages(
|
||||
imageUrls: ImageUrlItem[],
|
||||
files: File[]
|
||||
): Promise<ImageUploadResponse> {
|
||||
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);
|
||||
});
|
||||
return uploadImagesSequentially(imageUrls, files, postImageUpload);
|
||||
}
|
||||
|
||||
async function postImageUpload(formData: FormData): Promise<ImageUploadResponse> {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), IMAGE_UPLOAD_TIMEOUT);
|
||||
|
||||
@ -740,19 +733,21 @@ export async function uploadImages(
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
305
src/utils/imageCompression.ts
Normal file
305
src/utils/imageCompression.ts
Normal file
@ -0,0 +1,305 @@
|
||||
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();
|
||||
}
|
||||
}
|
||||
49
src/utils/imageDedup.ts
Normal file
49
src/utils/imageDedup.ts
Normal file
@ -0,0 +1,49 @@
|
||||
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 };
|
||||
}
|
||||
83
src/utils/imageUpload.ts
Normal file
83
src/utils/imageUpload.ts
Normal file
@ -0,0 +1,83 @@
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user