브랜드 분석페이지 조정 작업 .
parent
e66eca1aca
commit
bff54aefe1
44
index.css
44
index.css
|
|
@ -2327,13 +2327,28 @@
|
|||
}
|
||||
|
||||
.bi-page-icon {
|
||||
color: #2dd4bf;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.bi-page-icon svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
.bi-star-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
animation: twinkle 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.4));
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 16px rgba(45, 212, 191, 0.7));
|
||||
}
|
||||
}
|
||||
|
||||
.bi-page-title {
|
||||
|
|
@ -2366,32 +2381,19 @@
|
|||
}
|
||||
|
||||
.bi-card-title {
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bi-card-title svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #2dd4bf;
|
||||
}
|
||||
|
||||
/* 섹션 라벨 */
|
||||
.bi-section-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #2dd4bf;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 브랜드명 (대형) */
|
||||
|
|
|
|||
|
|
@ -21,36 +21,6 @@ const MapPinIcon = () => (
|
|||
</svg>
|
||||
);
|
||||
|
||||
const TargetIcon = () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M12 2v4M22 12h-4M12 22v-4M2 12h4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const UsersIcon = () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M16 11a4 4 0 10-8 0" />
|
||||
<path d="M4 20c0-3.3 3.6-6 8-6s8 2.7 8 6" />
|
||||
<circle cx="12" cy="7" r="3" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LayoutGridIcon = () => (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="3" y="3" width="7" height="7" />
|
||||
<rect x="14" y="3" width="7" height="7" />
|
||||
<rect x="14" y="14" width="7" height="7" />
|
||||
<rect x="3" y="14" width="7" height="7" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const ChartIcon = () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 20V10M12 20V4M6 20v-6" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
// 범용 애니메이션 아이템 컴포넌트
|
||||
interface AnimatedItemProps {
|
||||
|
|
@ -355,7 +325,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
{/* Page Header */}
|
||||
<div className="bi-page-header">
|
||||
<div className="bi-page-icon">
|
||||
<SparklesIcon className="w-10 h-10 animate-pulse" />
|
||||
<img src="/assets/images/star-icon.svg" alt="Star" className="bi-star-icon" />
|
||||
</div>
|
||||
<h1 className="bi-page-title">브랜드 인텔리전스</h1>
|
||||
<p className="bi-page-desc">
|
||||
|
|
@ -364,7 +334,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
</div>
|
||||
|
||||
{/* Main Grid */}
|
||||
<div ref={containerRef} className="max-w-7xl mx-auto px-4 md:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div ref={containerRef} className="max-w-[1440px] mx-auto px-4 md:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* 왼쪽 컬럼 */}
|
||||
<div className="space-y-6">
|
||||
{/* 브랜드 정체성 카드 */}
|
||||
|
|
@ -372,7 +342,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
<div className="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-[#2dd4bf] to-[#AE72F9]"></div>
|
||||
|
||||
<div className="bi-section-label mb-4">
|
||||
<LayoutGridIcon /> 브랜드 정체성
|
||||
브랜드 정체성
|
||||
</div>
|
||||
|
||||
<h2 className="bi-brand-name">{processed_info?.customer_name || '브랜드명'}</h2>
|
||||
|
|
@ -400,7 +370,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
{/* 시장 포지셔닝 카드 */}
|
||||
<div className="bi-card">
|
||||
<h3 className="bi-card-title">
|
||||
<TargetIcon /> 시장 포지셔닝
|
||||
시장 포지셔닝
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
|
|
@ -422,7 +392,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
{/* 타겟 페르소나 카드 */}
|
||||
<div className="bi-card">
|
||||
<h3 className="bi-card-title">
|
||||
<UsersIcon /> 타겟 페르소나
|
||||
타겟 페르소나
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{targetPersonas.length === 0 && <p className="bi-body-text" style={{ color: '#6AB0B3' }}>정보 없음</p>}
|
||||
|
|
@ -459,13 +429,13 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
{/* 주요 셀링 포인트 카드 */}
|
||||
<div className="bi-card min-h-[500px] flex flex-col">
|
||||
<h3 className="bi-card-title mb-6">
|
||||
<ChartIcon /> 주요 셀링 포인트 (USP)
|
||||
주요 셀링 포인트 (USP)
|
||||
</h3>
|
||||
|
||||
{/* 레이더 차트 */}
|
||||
{sellingPoints.length > 0 && (
|
||||
<div className="mb-8">
|
||||
<RadarChart data={sellingPoints} size={320} />
|
||||
<RadarChart data={sellingPoints} size={280} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -497,7 +467,7 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
|
|||
</div>
|
||||
|
||||
{/* 추천 타겟 키워드 */}
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-8 mt-10">
|
||||
<div className="max-w-[1440px] mx-auto px-4 md:px-8 mt-10">
|
||||
<div className="bi-card">
|
||||
<h3 className="bi-card-title">추천 타겟 키워드</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
|
|
|
|||
Loading…
Reference in New Issue