132 lines
7.0 KiB
TypeScript
Executable File
132 lines
7.0 KiB
TypeScript
Executable File
|
|
import React from 'react';
|
|
import { CrawlingResponse } from '../../types/api';
|
|
|
|
interface AnalysisResultSectionProps {
|
|
onBack: () => void;
|
|
onGenerate?: () => void;
|
|
data: CrawlingResponse;
|
|
}
|
|
|
|
const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, onGenerate, data }) => {
|
|
const { processed_info, marketing_analysis, image_list } = data;
|
|
const tags = marketing_analysis.tags || [];
|
|
const facilities = marketing_analysis.facilities || [];
|
|
|
|
return (
|
|
<div className="w-full h-[100dvh] text-white flex flex-col p-3 py-2 sm:p-4 sm:py-3 md:p-6 lg:p-8 overflow-hidden bg-[#121a1d]">
|
|
{/* 뒤로가기 버튼 */}
|
|
<div className="w-full flex justify-start mb-2 sm:mb-3 shrink-0">
|
|
<button
|
|
onClick={onBack}
|
|
className="flex items-center gap-1.5 py-1 px-3 sm:py-1.5 sm:px-4 rounded-full border border-gray-700 hover:bg-gray-800 transition-colors text-[9px] sm:text-[10px] md:text-xs text-gray-300"
|
|
>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M15 18l-6-6 6-6" />
|
|
</svg>
|
|
뒤로가기
|
|
</button>
|
|
</div>
|
|
|
|
{/* 헤더 - 높이가 작을 때 숨김 */}
|
|
<div className="hidden sm:flex flex-col items-center text-center mb-2 md:mb-4 shrink-0">
|
|
<div className="text-[#a682ff] mb-1 animate-bounce">
|
|
<svg className="w-4 h-4 md:w-5 md:h-5" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2l2.4 7.2L22 12l-7.6 2.4L12 22l-2.4-7.2L2 12l7.6-2.4z" />
|
|
</svg>
|
|
</div>
|
|
<h1 className="text-lg md:text-xl lg:text-2xl font-bold mb-0.5">브랜드 분석</h1>
|
|
<p className="text-gray-400 text-[9px] md:text-[10px] lg:text-xs font-light max-w-lg px-4">
|
|
쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요.
|
|
</p>
|
|
</div>
|
|
|
|
{/* 메인 콘텐츠 그리드 */}
|
|
<div className="max-w-6xl mx-auto w-full grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3 md:gap-4 flex-1 min-h-0 overflow-hidden">
|
|
{/* 브랜드 정체성 */}
|
|
<div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 flex flex-col border border-white/5 shadow-xl overflow-hidden">
|
|
<span className="text-[#a6ffea] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block shrink-0">브랜드 정체성</span>
|
|
<h2 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold mb-0.5 shrink-0">{processed_info.customer_name}</h2>
|
|
<p className="text-gray-500 text-[10px] sm:text-xs md:text-sm mb-2 sm:mb-3 shrink-0">{processed_info.region} · {processed_info.detail_region_info}</p>
|
|
|
|
{/* 이미지 미리보기 */}
|
|
{image_list.length > 0 && (
|
|
<div className="mt-auto min-h-0 overflow-hidden">
|
|
<span className="text-gray-500 text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 block shrink-0">수집된 이미지 ({image_list.length}장)</span>
|
|
<div className="grid grid-cols-4 gap-1 sm:gap-1.5">
|
|
{image_list.slice(0, 8).map((img, idx) => (
|
|
<div key={idx} className="aspect-square rounded sm:rounded-md overflow-hidden bg-[#121a1d]">
|
|
<img src={img} alt={`이미지 ${idx + 1}`} className="w-full h-full object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
{image_list.length > 8 && (
|
|
<p className="text-gray-500 text-[9px] sm:text-[10px] mt-1 text-center">+{image_list.length - 8}장 더 있음</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 오른쪽 카드들 */}
|
|
<div className="flex flex-col gap-2 sm:gap-3 overflow-hidden">
|
|
{/* 시설 정보 */}
|
|
<div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl shrink-0">
|
|
<span className="text-[#a682ff] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block">주요 시설</span>
|
|
<div className="flex flex-wrap gap-1 sm:gap-1.5">
|
|
{facilities.slice(0, 6).map((facility, idx) => (
|
|
<span key={idx} className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-gray-400 border border-white/5">
|
|
{facility}
|
|
</span>
|
|
))}
|
|
{facilities.length > 6 && (
|
|
<span className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-gray-500 border border-white/5">
|
|
+{facilities.length - 6}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 추천 태그 */}
|
|
<div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl shrink-0">
|
|
<span className="text-[#a6ffea] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block">추천 마케팅 태그</span>
|
|
<div className="flex flex-wrap gap-1 sm:gap-1.5">
|
|
{tags.slice(0, 6).map((tag, idx) => (
|
|
<span key={idx} className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-[#a6ffea]/80 border border-[#a6ffea]/10">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{tags.length > 6 && (
|
|
<span className="px-2 sm:px-2.5 py-1 sm:py-1.5 bg-[#121a1d]/40 rounded-full text-[9px] sm:text-[10px] text-[#a6ffea]/50 border border-[#a6ffea]/10">
|
|
+{tags.length - 6}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 마케팅 분석 요약 */}
|
|
<div className="bg-[#1c2a2e] rounded-xl sm:rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-5 border border-white/5 shadow-xl flex-1 min-h-0 overflow-hidden flex flex-col">
|
|
<span className="text-[#a682ff] text-[8px] sm:text-[9px] md:text-[10px] font-bold uppercase tracking-wider mb-1.5 sm:mb-2 block shrink-0">마케팅 분석</span>
|
|
<div className="text-gray-400 text-[9px] sm:text-[10px] leading-relaxed overflow-y-auto custom-scrollbar flex-1 min-h-0">
|
|
{marketing_analysis.report.split('\n').slice(0, 3).map((line, idx) => (
|
|
<p key={idx} className="mb-1 sm:mb-1.5">{line.replace(/^#+\s*/, '')}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 하단 버튼 */}
|
|
<div className="mt-2 sm:mt-3 md:mt-4 flex justify-center shrink-0 py-2 sm:py-3 md:py-4">
|
|
<button
|
|
onClick={onGenerate}
|
|
className="bg-[#a682ff] hover:bg-[#9570f0] text-white font-bold py-2 sm:py-2.5 md:py-3 px-6 sm:px-10 md:px-14 rounded-full transition-all transform active:scale-95 shadow-lg shadow-[#a682ff33] text-[9px] sm:text-[10px] md:text-xs"
|
|
>
|
|
콘텐츠 생성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AnalysisResultSection;
|