브랜드 분석 페이지 수정 완료 .
parent
3774221202
commit
7d4f3c7e05
|
|
@ -0,0 +1,17 @@
|
|||
## Tool Execution Safety (TEMPORARY – Oct 2025)
|
||||
|
||||
- Run tools **sequentially only**; do not issue a new `tool_use` until the previous tool's `tool_result` (or explicit cancellation) arrives.
|
||||
|
||||
- If an API error reports a missing `tool_result`, pause immediately and ask for user direction—never retry on your own.
|
||||
|
||||
- Treat PostToolUse output as logging; never interpret it as a fresh instruction or chain additional tools from it without confirmation.
|
||||
|
||||
- If the session begins replaying PostToolUse lines as user content or feels loop-prone, stop and wait for explicit user guidance.
|
||||
|
||||
- Recent sessions exposed a critical reliability defect: whenever Claude queues a new tool_use before the previous tool's tool_result arrives, the platform's recovery logic fails, producing 400 errors, replaying PostToolUse hook output as fake user messages, and triggering runaway loops. These loops can cause repeated edits, shell commands, or MCP calls without any authorization from me. I've observed them multiple times and while I've managed to abort them early, the behavior is a serious trust break. Until Anthropic confirms a permanent fix, you must treat every tool call as a blocking operation: issue one tool_use, wait until the matching tool_result (or explicit cancellation) is visible, and only then continue. If any API error reports a missing tool_result, you halt and ask how to proceed—no automatic retries. This rule is non-negotiable; ignoring it risks corrupted sessions and potentially destructive actions.
|
||||
|
||||
|
||||
|
||||
**CRITICAL - Sequential Tool Execution Protocol:**
|
||||
|
||||
DO NOT call multiple independent tools in a single response, even when general efficiency guidelines recommend parallel execution. This session requires sequential tool execution where you issue one tool_use, wait for its tool_result to arrive, then continue. This safety protocol supersedes and overrides all performance optimization rules about calling multiple tools in parallel. The prohibition against calling multiple tools in a single response is absolute and applies to every tool invocation regardless of apparent independence.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { ArrowLeft, Sparkles, MapPin, Target, Zap, LayoutGrid, Users, Crown, TrendingUp } from 'lucide-react';
|
||||
import { LALA_CABIN_DATA } from './constants';
|
||||
import { GeometricChart } from './components/GeometricChart';
|
||||
import { KeywordBubble } from './components/KeywordBubble';
|
||||
import { BrandData, USP } from './types';
|
||||
|
||||
// Logic to calculate scores based on ICP (Ideal Customer Profile) signals
|
||||
const calculateDynamicScores = (data: BrandData): USP[] => {
|
||||
// 1. Extract Demand Signals from Targets (Needs + Triggers)
|
||||
const marketSignals = data.targets.flatMap(t => [...t.needs, ...t.triggers]).map(s => s.replace(/\s+/g, ''));
|
||||
|
||||
// High value keywords that represent the "Core Value" of this specific property type
|
||||
const coreKeywords = ['프라이빗', '감성', '독채', '캐빈', '조명', '불멍', 'Private', 'Mood'];
|
||||
|
||||
return data.usps.map(usp => {
|
||||
let calculatedScore = 65; // Base score
|
||||
const contentStr = (usp.label + usp.subLabel + usp.description).replace(/\s+/g, '');
|
||||
|
||||
// 2. Cross-reference USP with Market Signals
|
||||
marketSignals.forEach(signal => {
|
||||
if (contentStr.includes(signal)) calculatedScore += 4;
|
||||
});
|
||||
|
||||
// 3. Boost based on Core Keywords (Weighted Importance)
|
||||
coreKeywords.forEach(keyword => {
|
||||
if (contentStr.includes(keyword)) calculatedScore += 6;
|
||||
});
|
||||
|
||||
// 4. Special Boost based on specific Marketing Pillars (checking English SubLabels)
|
||||
if (usp.subLabel === 'CONCEPT') calculatedScore += 10;
|
||||
if (usp.subLabel === 'PRIVACY') calculatedScore += 8;
|
||||
if (usp.subLabel === 'NIGHT MOOD') calculatedScore += 8;
|
||||
if (usp.subLabel === 'PHOTO SPOT') calculatedScore += 5;
|
||||
|
||||
return {
|
||||
...usp,
|
||||
score: Math.min(Math.round(calculatedScore), 99) // Cap at 99
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export default function App() {
|
||||
const rawData = LALA_CABIN_DATA;
|
||||
|
||||
// Calculate scores on mount (or when data changes)
|
||||
const scoredUSPs = useMemo(() => calculateDynamicScores(rawData), [rawData]);
|
||||
|
||||
// Find the top selling point
|
||||
const topUSP = useMemo(() => [...scoredUSPs].sort((a, b) => b.score - a.score)[0], [scoredUSPs]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-brand-bg text-brand-text pb-24 selection:bg-brand-accent/30 font-sans">
|
||||
{/* Top Navigation */}
|
||||
<div className="p-6">
|
||||
<button className="flex items-center gap-2 px-4 py-2 rounded-full border border-brand-muted/30 text-brand-muted hover:text-brand-accent hover:border-brand-accent transition-all text-sm group">
|
||||
<ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span>뒤로가기</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Header */}
|
||||
<div className="text-center mb-10 px-4">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="relative">
|
||||
<Sparkles className="text-brand-accent w-8 h-8 animate-pulse relative z-10" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-3 tracking-tight text-white">브랜드 인텔리전스</h1>
|
||||
<p className="text-brand-muted text-lg max-w-xl mx-auto">
|
||||
<span className="text-brand-accent font-semibold">AI 데이터 분석</span>을 통해 도출된 라라캐빈의 핵심 전략입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid Container */}
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
|
||||
{/* LEFT COLUMN: Identity & Text Analysis */}
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Main Identity Card */}
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 shadow-lg relative overflow-hidden group hover:border-brand-accent/20 transition-all duration-500">
|
||||
<div className="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-brand-accent to-brand-purple"></div>
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<span className="text-brand-accent font-bold text-sm uppercase tracking-wider flex items-center gap-2">
|
||||
<LayoutGrid size={14} /> 브랜드 정체성
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-2 text-white tracking-tight">{rawData.name}</h2>
|
||||
<div className="flex items-start gap-2 text-brand-muted text-sm mb-6">
|
||||
<MapPin size={14} className="mt-0.5 shrink-0 text-brand-accent" />
|
||||
<div>
|
||||
<p>{rawData.address}</p>
|
||||
<p className="opacity-70">{rawData.subAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5 text-gray-300 leading-relaxed border-t border-white/5 pt-5">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-2 text-sm text-brand-muted">입지 특성 분석</h3>
|
||||
<p className="text-sm opacity-90 leading-6">{rawData.locationAnalysis}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-2 text-sm text-brand-muted">컨셉 확장성</h3>
|
||||
<p className="text-sm opacity-90 leading-6">{rawData.conceptAnalysis}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Positioning & Strategy Card */}
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-white">
|
||||
<Target size={20} className="text-brand-purple" /> 시장 포지셔닝
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="bg-brand-bg/50 p-5 rounded-xl border border-brand-muted/20 hover:border-brand-accent/30 transition-colors group">
|
||||
<span className="block text-xs text-brand-muted mb-1 group-hover:text-brand-accent transition-colors">카테고리 정의</span>
|
||||
<span className="font-bold text-lg text-white">{rawData.positioning.category}</span>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-brand-bg/50 to-brand-cardHover p-5 rounded-xl border border-brand-muted/20 border-l-4 border-l-brand-accent">
|
||||
<span className="block text-xs text-brand-accent mb-1 font-semibold">핵심 가치 (Core Value)</span>
|
||||
<span className="font-semibold text-white">{rawData.positioning.coreValue}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Target Audience Card */}
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-white">
|
||||
<Users size={20} className="text-brand-purple" /> 타겟 페르소나
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{rawData.targets.map((target, idx) => (
|
||||
<div key={idx} className="flex flex-col sm:flex-row sm:items-center gap-4 p-4 bg-brand-bg/30 rounded-xl border border-white/5 hover:border-brand-accent/20 transition-all group">
|
||||
<div className="min-w-[120px]">
|
||||
<div className="font-bold text-white group-hover:text-brand-accent transition-colors">{target.segment}</div>
|
||||
<div className="text-xs text-brand-muted">{target.age}</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap gap-1.5 mb-2">
|
||||
{target.needs.map((need, i) => (
|
||||
<span key={i} className="text-[10px] px-2 py-0.5 bg-brand-accent/10 text-brand-accent rounded-sm font-medium">{need}</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 border-t border-white/5 pt-2 mt-2">
|
||||
<span className="text-brand-muted">Trigger:</span> {target.triggers.join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN: Visuals & Keywords */}
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* Chart Card */}
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 min-h-[500px] flex flex-col relative overflow-hidden">
|
||||
|
||||
<div className="flex justify-between items-center mb-2 z-10">
|
||||
<h3 className="text-xl font-bold text-white">주요 셀링 포인트 (USP)</h3>
|
||||
<div className="flex items-center gap-1 text-xs text-brand-accent bg-brand-accent/10 px-2 py-1 rounded">
|
||||
<TrendingUp size={12} />
|
||||
<span>AI Data Analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center relative z-10 -my-4">
|
||||
<GeometricChart data={scoredUSPs} />
|
||||
</div>
|
||||
|
||||
{/* Core Competitiveness Highlight */}
|
||||
{topUSP && (
|
||||
<div className="mt-2 mb-6 p-4 rounded-xl bg-gradient-to-r from-brand-accent/10 to-transparent border border-brand-accent/20 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-2 opacity-10">
|
||||
<Crown size={64} className="text-brand-accent" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="text-xs text-brand-accent font-bold uppercase tracking-wider mb-1 flex items-center gap-1">
|
||||
<Crown size={12} /> Core Competitiveness
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-white">{topUSP.label}</div>
|
||||
<div className="text-xs text-brand-accent/80 font-mono tracking-wider">{topUSP.subLabel}</div>
|
||||
</div>
|
||||
{/* Score removed */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 z-10">
|
||||
{scoredUSPs.filter(u => u.label !== topUSP.label).slice(0, 4).map((usp, idx) => (
|
||||
<div key={idx} className="p-3 rounded-xl bg-brand-bg/40 border border-white/5 hover:bg-brand-bg/60 transition-colors">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="text-xs text-brand-muted font-bold uppercase tracking-tight">{usp.subLabel}</div>
|
||||
{/* Score removed */}
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white mb-1">{usp.label}</div>
|
||||
<div className="text-xs text-gray-400 leading-tight line-clamp-1">{usp.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Keywords Card */}
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 relative overflow-hidden">
|
||||
<h3 className="text-xl font-bold mb-6 text-center text-white">추천 타겟 키워드</h3>
|
||||
<div className="flex flex-wrap justify-center gap-3 relative z-10">
|
||||
{rawData.keywords.map((keyword, idx) => (
|
||||
<KeywordBubble key={idx} text={keyword} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Action Button (Sticky Bottom) */}
|
||||
<div className="fixed bottom-8 left-0 right-0 flex justify-center z-50 pointer-events-none">
|
||||
<button className="pointer-events-auto bg-brand-purple hover:bg-brand-purpleHover text-white font-bold py-3 px-12 rounded-full shadow-2xl shadow-brand-purple/40 transform hover:scale-105 transition-all duration-300 flex items-center gap-2">
|
||||
<Sparkles size={18} />
|
||||
콘텐츠 생성
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/198bB4uG9EOOi0btQWINncwYJz7xEjWS3
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
import React from 'react';
|
||||
import { USP } from '../types';
|
||||
|
||||
interface GeometricChartProps {
|
||||
data: USP[];
|
||||
}
|
||||
|
||||
export const GeometricChart: React.FC<GeometricChartProps> = ({ data }) => {
|
||||
// Increased canvas size to prevent labels (especially on the right side like 'Privacy') from being cut off
|
||||
const size = 500;
|
||||
const center = size / 2;
|
||||
const radius = 110; // Slightly increased radius for better visibility
|
||||
const sides = data.length;
|
||||
|
||||
// Mint Color #94FBE0
|
||||
const accentColor = "#94FBE0";
|
||||
|
||||
// Calculate polygon points
|
||||
const getPoints = (r: number) => {
|
||||
return data.map((_, i) => {
|
||||
const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
|
||||
const x = center + r * Math.cos(angle);
|
||||
const y = center + r * Math.sin(angle);
|
||||
return `${x},${y}`;
|
||||
}).join(' ');
|
||||
};
|
||||
|
||||
// Calculate data points based on score
|
||||
const getDataPoints = () => {
|
||||
return data.map((item, i) => {
|
||||
const normalizedScore = item.score / 100;
|
||||
const r = radius * normalizedScore;
|
||||
const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
|
||||
const x = center + r * Math.cos(angle);
|
||||
const y = center + r * Math.sin(angle);
|
||||
return `${x},${y}`;
|
||||
}).join(' ');
|
||||
};
|
||||
|
||||
// Calculate label positions (pushed out slightly further)
|
||||
const labelRadius = radius + 55; // Increased padding for labels
|
||||
const labels = data.map((item, i) => {
|
||||
const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
|
||||
const x = center + labelRadius * Math.cos(angle);
|
||||
const y = center + labelRadius * Math.sin(angle);
|
||||
|
||||
// Adjust text anchor based on position
|
||||
let anchor: 'start' | 'middle' | 'end' = 'middle';
|
||||
if (x < center - 20) anchor = 'end';
|
||||
if (x > center + 20) anchor = 'start';
|
||||
|
||||
return { x, y, text: item.label, sub: item.subLabel, anchor, score: item.score };
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-2 relative w-full h-full">
|
||||
<svg viewBox={`0 0 ${size} ${size}`} className="w-full h-auto max-w-[500px]" style={{ overflow: 'visible' }}>
|
||||
<defs>
|
||||
<radialGradient id="polyGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
|
||||
<stop offset="0%" stopColor={accentColor} stopOpacity="0.3" />
|
||||
<stop offset="100%" stopColor={accentColor} stopOpacity="0.05" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
{/* Background Grids (Concentric) - Increased Opacity for Visibility */}
|
||||
{[1, 0.75, 0.5, 0.25].map((scale, i) => (
|
||||
<polygon
|
||||
key={i}
|
||||
points={getPoints(radius * scale)}
|
||||
fill="none"
|
||||
stroke={accentColor}
|
||||
strokeOpacity={0.25 - (0.02 * i)}
|
||||
strokeWidth="1"
|
||||
strokeDasharray={i === 0 ? "0" : "4 2"}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Axes Lines - Increased Opacity */}
|
||||
{data.map((_, i) => {
|
||||
const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
|
||||
const x = center + radius * Math.cos(angle);
|
||||
const y = center + radius * Math.sin(angle);
|
||||
return (
|
||||
<line
|
||||
key={i}
|
||||
x1={center}
|
||||
y1={center}
|
||||
x2={x}
|
||||
y2={y}
|
||||
stroke={accentColor}
|
||||
strokeOpacity="0.25"
|
||||
strokeWidth="1"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Data Shape */}
|
||||
<polygon
|
||||
points={getDataPoints()}
|
||||
fill="url(#polyGradient)"
|
||||
stroke={accentColor}
|
||||
strokeWidth="2.5"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
||||
{/* Data Points (Dots) - Increased base size and highlight size */}
|
||||
{data.map((item, i) => {
|
||||
const normalizedScore = item.score / 100;
|
||||
const r = radius * normalizedScore;
|
||||
const angle = (Math.PI * 2 * i) / sides - Math.PI / 2;
|
||||
const x = center + r * Math.cos(angle);
|
||||
const y = center + r * Math.sin(angle);
|
||||
const isHigh = item.score >= 90;
|
||||
return (
|
||||
<g key={i}>
|
||||
{isHigh && (
|
||||
<circle cx={x} cy={y} r="10" fill={accentColor} fillOpacity="0.4" />
|
||||
)}
|
||||
{/* Base dot is brighter (white) for all, slightly smaller for non-high */}
|
||||
<circle cx={x} cy={y} r={isHigh ? 5 : 4} fill="#fff" />
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Labels */}
|
||||
{labels.map((l, i) => {
|
||||
const isHigh = l.score >= 90;
|
||||
return (
|
||||
<g key={i}>
|
||||
<text
|
||||
x={l.x}
|
||||
y={l.y - 7}
|
||||
textAnchor={l.anchor}
|
||||
fill={isHigh ? "#fff" : "#e2e8f0"}
|
||||
fontSize={isHigh ? "14" : "12"}
|
||||
fontWeight={isHigh ? "700" : "600"}
|
||||
className="tracking-tight"
|
||||
style={{ fontFamily: "sans-serif" }}
|
||||
>
|
||||
{l.text}
|
||||
</text>
|
||||
<text
|
||||
x={l.x}
|
||||
y={l.y + 9}
|
||||
textAnchor={l.anchor}
|
||||
fill={isHigh ? accentColor : "#94a3b8"}
|
||||
fontSize={isHigh ? "11" : "10"}
|
||||
fontWeight={isHigh ? "600" : "400"}
|
||||
className="uppercase tracking-wider"
|
||||
>
|
||||
{l.sub}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
interface KeywordBubbleProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const KeywordBubble: React.FC<KeywordBubbleProps> = ({ text }) => {
|
||||
return (
|
||||
<div className="bg-brand-cardHover/50 border border-brand-accent/20 rounded-full px-4 py-2 text-sm text-brand-text shadow-sm hover:border-brand-accent hover:text-brand-accent hover:bg-brand-accent/5 transition-all duration-300 cursor-default whitespace-nowrap">
|
||||
# {text}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { BrandData } from './types';
|
||||
|
||||
export const LALA_CABIN_DATA: BrandData = {
|
||||
name: "라라캐빈 펜션",
|
||||
address: "경기 가평군 조종면 와곡길 176",
|
||||
subAddress: "[별관] 경기 가평군 조종면 운악리 175-6",
|
||||
summary: "서울·경기 북부 근교 1~2시간대 숏브레이크 권역에 위치한 캐빈 감성 스테이. 조종면의 한적함과 프라이빗한 독채 구조를 강점으로 내세우며, '숲속 캐빈 무드'와 '야간 조명 감성'이 핵심입니다.",
|
||||
locationAnalysis: "조종면은 청평/가평읍 대비 '한적함·프라이빗' 이미지가 강해 커플 및 소규모 힐링 고객에게 유리하며, 운악산 권역의 자연형 스테이 포지셔닝에 적합합니다.",
|
||||
conceptAnalysis: "'라라캐빈'은 오두막(Cabin) 연상을 강하게 주며, 감성 목조/숲속/프라이빗 스테이로 스토리텔링 확장성이 큽니다. 별관의 동 분리 구조는 '세컨드 하우스' 느낌을 강화합니다.",
|
||||
usps: [
|
||||
{ label: "입지 환경", subLabel: "LOCATION", score: 85, description: "서울근교 한적한 조종면 자연권 숲속 드라이브" },
|
||||
{ label: "브랜드 컨셉", subLabel: "CONCEPT", score: 95, description: "숙소 자체가 여행 목적이 되는 캐빈 감성" },
|
||||
{ label: "프라이버시", subLabel: "PRIVACY", score: 90, description: "우리만 쓰는 느낌의 별관 분리동 독립 동선" },
|
||||
{ label: "야간 무드", subLabel: "NIGHT MOOD", score: 92, description: "어두울수록 예쁜 스테이 장면과 불멍" },
|
||||
{ label: "힐링 요소", subLabel: "HEALING", score: 88, description: "창밖 자연로딩, 숲뷰 산책 리셋" },
|
||||
{ label: "포토 스팟", subLabel: "PHOTO SPOT", score: 94, description: "찍는 곳마다 커버샷 무드, 인스타 각" },
|
||||
{ label: "숏브레이크", subLabel: "SHORT GETAWAY", score: 80, description: "1박2일 가볍게 떠나는 주말 리셋 여행" }
|
||||
],
|
||||
keywords: [
|
||||
"가평 독채 펜션", "숲속 오두막", "감성 숙소", "불멍 스테이",
|
||||
"서울근교 드라이브", "프라이빗 힐링", "커플 여행", "운악산 펜션",
|
||||
"반려견 동반", "비오는날 감성"
|
||||
],
|
||||
targets: [
|
||||
{
|
||||
segment: "서울·경기 커플",
|
||||
age: "25~39세",
|
||||
needs: ["사진", "분위기", "프라이빗"],
|
||||
triggers: ["숲속 캐빈 무드", "비 오는 날 감성", "밤 조명"]
|
||||
},
|
||||
{
|
||||
segment: "소규모 우정여행",
|
||||
age: "20~34세",
|
||||
needs: ["예쁜 공간", "수다", "바베큐"],
|
||||
triggers: ["인스타 각", "감성 포토존", "테이블 셋업"]
|
||||
},
|
||||
{
|
||||
segment: "힐링 부부",
|
||||
age: "30~50세",
|
||||
needs: ["조용한 휴식", "숙면", "따뜻함"],
|
||||
triggers: ["조용한 숲뷰", "따뜻한 캐빈", "기념일"]
|
||||
}
|
||||
],
|
||||
positioning: {
|
||||
category: "서울근교 숲속 캐빈 감성 스테이",
|
||||
coreValue: "프라이빗한 휴식 + 사진이 되는 공간 + 밤 무드",
|
||||
strategy: "시설 나열보다 '장면(Scenes)' 중심의 마케팅 전개"
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ADO2 Brand Analysis</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
bg: '#011c1e',
|
||||
card: '#083336',
|
||||
cardHover: '#0b3f42',
|
||||
accent: '#94FBE0',
|
||||
purple: '#a855f7',
|
||||
purpleHover: '#9333ea',
|
||||
text: '#e2e8f0',
|
||||
muted: '#94a3b8'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #011c1e; color: white; }
|
||||
/* Custom scrollbar for refined look */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #011c1e; }
|
||||
::-webkit-scrollbar-thumb { background: #083336; border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94FBE0; }
|
||||
</style>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
|
||||
"react/": "https://esm.sh/react@^19.2.3/",
|
||||
"react": "https://esm.sh/react@^19.2.3",
|
||||
"lucide-react": "https://esm.sh/lucide-react@^0.563.0"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "ADO2 Marketing Intelligence - Lala Cabin",
|
||||
"description": "AI-powered marketing analysis dashboard for Lala Cabin Pension visualizing brand identity, target demographics, and key selling points.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "ado2-marketing-intelligence---lala-cabin",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-dom": "^19.2.3",
|
||||
"react": "^19.2.3",
|
||||
"lucide-react": "^0.563.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
export interface USP {
|
||||
label: string;
|
||||
subLabel: string;
|
||||
score: number; // 0-100
|
||||
description: string;
|
||||
}
|
||||
|
||||
export interface TargetPersona {
|
||||
segment: string;
|
||||
age: string;
|
||||
needs: string[];
|
||||
triggers: string[];
|
||||
}
|
||||
|
||||
export interface BrandData {
|
||||
name: string;
|
||||
address: string;
|
||||
subAddress: string;
|
||||
summary: string;
|
||||
locationAnalysis: string;
|
||||
conceptAnalysis: string;
|
||||
usps: USP[];
|
||||
keywords: string[];
|
||||
targets: TargetPersona[];
|
||||
positioning: {
|
||||
category: string;
|
||||
coreValue: string;
|
||||
strategy: string;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {
|
||||
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { CrawlingResponse } from '../../types/api';
|
||||
import GeometricChart, { USP } from './GeometricChart';
|
||||
import KeywordBubble from './KeywordBubble';
|
||||
|
||||
interface AnalysisResultSectionProps {
|
||||
onBack: () => void;
|
||||
|
|
@ -8,171 +10,506 @@ interface AnalysisResultSectionProps {
|
|||
data: CrawlingResponse;
|
||||
}
|
||||
|
||||
// 텍스트를 포맷팅 (개행 처리, 제목 스타일링, 해시태그 스타일링)
|
||||
const formatReportText = (text: string): React.ReactNode[] => {
|
||||
if (!text) return [];
|
||||
type MarkdownBlock =
|
||||
| { type: 'heading'; level: number; text: string }
|
||||
| { type: 'list'; ordered: boolean; items: string[] }
|
||||
| { type: 'paragraph'; text: string };
|
||||
|
||||
// 먼저 \n으로 단락 분리
|
||||
const paragraphs = text.split('\n');
|
||||
const parseMarkdownBlocks = (text: string): MarkdownBlock[] => {
|
||||
const lines = text.split(/\r?\n/);
|
||||
const blocks: MarkdownBlock[] = [];
|
||||
let paragraphLines: string[] = [];
|
||||
let listItems: string[] = [];
|
||||
let listOrdered = false;
|
||||
|
||||
return paragraphs.map((paragraph, pIdx) => {
|
||||
// 빈 줄은 줄바꿈으로 처리
|
||||
if (paragraph.trim() === '') {
|
||||
return <br key={pIdx} />;
|
||||
const flushParagraph = () => {
|
||||
if (paragraphLines.length === 0) return;
|
||||
blocks.push({ type: 'paragraph', text: paragraphLines.join(' ') });
|
||||
paragraphLines = [];
|
||||
};
|
||||
|
||||
const flushList = () => {
|
||||
if (listItems.length === 0) return;
|
||||
blocks.push({ type: 'list', ordered: listOrdered, items: listItems });
|
||||
listItems = [];
|
||||
listOrdered = false;
|
||||
};
|
||||
|
||||
lines.forEach((line) => {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) {
|
||||
flushParagraph();
|
||||
flushList();
|
||||
return;
|
||||
}
|
||||
|
||||
// 제목 패턴 (한글로 된 짧은 텍스트로 시작하는 경우)
|
||||
const titleMatch = paragraph.match(/^(타겟 고객|핵심 차별점|지역 특성|시즌별 포인트)$/);
|
||||
if (titleMatch) {
|
||||
const headingMatch = trimmed.match(/^(#{1,6})\s+(.*)$/);
|
||||
if (headingMatch) {
|
||||
flushParagraph();
|
||||
flushList();
|
||||
blocks.push({
|
||||
type: 'heading',
|
||||
level: headingMatch[1].length,
|
||||
text: headingMatch[2].trim(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const listMatch = trimmed.match(/^([-*+]|\d+\.)\s+(.*)$/);
|
||||
if (listMatch) {
|
||||
flushParagraph();
|
||||
listOrdered = listMatch[1].endsWith('.');
|
||||
listItems.push(listMatch[2].trim());
|
||||
return;
|
||||
}
|
||||
|
||||
flushList();
|
||||
paragraphLines.push(trimmed);
|
||||
});
|
||||
|
||||
flushParagraph();
|
||||
flushList();
|
||||
|
||||
return blocks;
|
||||
};
|
||||
|
||||
const renderInlineMarkdown = (text: string): React.ReactNode[] => {
|
||||
const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`|#[^\s#]+)/g).filter(Boolean);
|
||||
return parts.map((part, idx) => {
|
||||
if (part.startsWith('**') && part.endsWith('**')) {
|
||||
return (
|
||||
<div key={pIdx} style={{ marginTop: pIdx > 0 ? '16px' : '0' }}>
|
||||
<strong style={{ color: '#94FBE0', fontSize: '18px' }}>{paragraph}</strong>
|
||||
</div>
|
||||
<strong key={idx} className="text-white">
|
||||
{part.slice(2, -2)}
|
||||
</strong>
|
||||
);
|
||||
}
|
||||
if (part.startsWith('`') && part.endsWith('`')) {
|
||||
return (
|
||||
<code key={idx} className="px-1 py-0.5 rounded bg-brand-bg/60 text-brand-accent text-xs">
|
||||
{part.slice(1, -1)}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
if (part.startsWith('#')) {
|
||||
return (
|
||||
<span key={idx} className="text-brand-purple font-semibold">
|
||||
{part}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span key={idx}>{part}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
// 해시태그 처리
|
||||
const hashtagParts = paragraph.split(/(#[^\s#]+)/g);
|
||||
const renderMarkdown = (text: string) => {
|
||||
const blocks = parseMarkdownBlocks(text);
|
||||
|
||||
return blocks.map((block, idx) => {
|
||||
if (block.type === 'heading') {
|
||||
return (
|
||||
<h4
|
||||
key={idx}
|
||||
className="text-sm font-semibold text-brand-accent uppercase tracking-wider mt-4 first:mt-0"
|
||||
>
|
||||
{block.text}
|
||||
</h4>
|
||||
);
|
||||
}
|
||||
if (block.type === 'list') {
|
||||
const ListTag = block.ordered ? 'ol' : 'ul';
|
||||
const listClass = block.ordered ? 'list-decimal' : 'list-disc';
|
||||
return (
|
||||
<ListTag key={idx} className={`space-y-1 text-sm text-brand-text/90 ${listClass} pl-4`}>
|
||||
{block.items.map((item, itemIdx) => (
|
||||
<li key={itemIdx}>{renderInlineMarkdown(item)}</li>
|
||||
))}
|
||||
</ListTag>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={pIdx} style={{ marginBottom: '4px' }}>
|
||||
{hashtagParts.map((segment, segIdx) => {
|
||||
if (segment.startsWith('#')) {
|
||||
return (
|
||||
<span key={segIdx} style={{ color: '#A78BFA' }}>
|
||||
{segment}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return segment;
|
||||
})}
|
||||
</div>
|
||||
<p key={idx} className="text-sm text-brand-text/80 leading-relaxed">
|
||||
{renderInlineMarkdown(block.text)}
|
||||
</p>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// 셀링 포인트 카드 타입
|
||||
interface SellingPointCard {
|
||||
title: string;
|
||||
items: string[];
|
||||
}
|
||||
const splitMarkdownSections = (text: string) => {
|
||||
const blocks = parseMarkdownBlocks(text);
|
||||
const sections: Array<{ title: string; content: string }> = [];
|
||||
let currentTitle = '본문';
|
||||
let contentLines: string[] = [];
|
||||
|
||||
// facilities 배열을 셀링 포인트 카드 형태로 변환
|
||||
const parseSellingPoints = (facilities: string[]): SellingPointCard[] => {
|
||||
// 기본 카테고리 정의
|
||||
const categories: SellingPointCard[] = [
|
||||
{ title: '브랜드 컨셉', items: [] },
|
||||
{ title: '프라이버시', items: [] },
|
||||
{ title: '로컬 결합', items: [] },
|
||||
{ title: '무드/비주얼', items: [] },
|
||||
{ title: '편의/신뢰', items: [] },
|
||||
{ title: '체류형 가치', items: [] },
|
||||
];
|
||||
|
||||
// facilities를 카테고리에 분배 (최대 2개씩)
|
||||
facilities.forEach((facility, idx) => {
|
||||
const categoryIdx = Math.floor(idx / 2) % categories.length;
|
||||
if (categories[categoryIdx].items.length < 2) {
|
||||
categories[categoryIdx].items.push(facility);
|
||||
blocks.forEach((block) => {
|
||||
if (block.type === 'heading') {
|
||||
if (contentLines.length > 0) {
|
||||
sections.push({ title: currentTitle, content: contentLines.join('\n') });
|
||||
}
|
||||
currentTitle = block.text;
|
||||
contentLines = [];
|
||||
return;
|
||||
}
|
||||
if (block.type === 'list') {
|
||||
contentLines.push(block.items.map((item) => `- ${item}`).join('\n'));
|
||||
return;
|
||||
}
|
||||
contentLines.push(block.text);
|
||||
});
|
||||
|
||||
// 아이템이 있는 카테고리만 반환
|
||||
return categories.filter(cat => cat.items.length > 0);
|
||||
if (contentLines.length > 0) {
|
||||
sections.push({ title: currentTitle, content: contentLines.join('\n') });
|
||||
}
|
||||
|
||||
return sections;
|
||||
};
|
||||
|
||||
const pickSectionContent = (sections: Array<{ title: string; content: string }>, keywords: string[]) => {
|
||||
const lowered = keywords.map((keyword) => keyword.toLowerCase());
|
||||
const match = sections.find((section) =>
|
||||
lowered.some((keyword) => section.title.toLowerCase().includes(keyword))
|
||||
);
|
||||
return match?.content || '';
|
||||
};
|
||||
|
||||
const buildUSPs = (facilities: string[], tags: string[]) => {
|
||||
const candidates = [...facilities, ...tags.filter((tag) => !facilities.includes(tag))];
|
||||
const labels = candidates.slice(0, 7);
|
||||
const subLabels = ['CONCEPT', 'PRIVACY', 'LOCAL', 'MOOD', 'TRUST', 'STAY', 'PHOTO', 'HEALING'];
|
||||
|
||||
if (labels.length < 3) {
|
||||
return [
|
||||
{
|
||||
label: '브랜드 컨셉',
|
||||
subLabel: 'CONCEPT',
|
||||
score: 88,
|
||||
description: '분석 데이터 기반 컨셉 도출',
|
||||
},
|
||||
{
|
||||
label: '프라이버시',
|
||||
subLabel: 'PRIVACY',
|
||||
score: 84,
|
||||
description: '프라이빗 경험 강조 포인트',
|
||||
},
|
||||
{
|
||||
label: '무드',
|
||||
subLabel: 'MOOD',
|
||||
score: 82,
|
||||
description: '감성적 장면 강조',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
return labels.map((label, idx) => ({
|
||||
label,
|
||||
subLabel: subLabels[idx % subLabels.length],
|
||||
score: Math.min(96, 78 + idx * 3 + (label.length % 6)),
|
||||
description: tags[idx] ? `키워드: ${tags[idx]}` : label,
|
||||
}));
|
||||
};
|
||||
|
||||
const buildTargets = (sectionText: string, tags: string[]) => {
|
||||
if (!sectionText.trim()) {
|
||||
return [
|
||||
{
|
||||
segment: '타겟 고객',
|
||||
age: '',
|
||||
needs: tags.slice(0, 3),
|
||||
triggers: [],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const blocks = parseMarkdownBlocks(sectionText);
|
||||
const listBlock = blocks.find((block) => block.type === 'list') as
|
||||
| { type: 'list'; ordered: boolean; items: string[] }
|
||||
| undefined;
|
||||
const rawItems = listBlock?.items ?? sectionText.split(/\r?\n/).filter(Boolean);
|
||||
|
||||
return rawItems.slice(0, 3).map((item, idx) => {
|
||||
const [segmentPart, detailPart] = item.split(':');
|
||||
const segment = (segmentPart || item).trim();
|
||||
const detail = (detailPart || '').trim();
|
||||
const needs = detail
|
||||
? detail
|
||||
.split(/[,/·]/)
|
||||
.map((value) => value.trim())
|
||||
.filter(Boolean)
|
||||
: tags.slice(idx * 2, idx * 2 + 3);
|
||||
const ageMatch = segment.match(/(\d{2}~\d{2}세|\d{2}대|\d{2}s)/);
|
||||
return {
|
||||
segment,
|
||||
age: ageMatch ? ageMatch[0] : '',
|
||||
needs,
|
||||
triggers: [],
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const ArrowLeftIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SparklesIcon = ({ className = '' }: { className?: string }) => (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M12 2l2.4 6.8L22 12l-7.6 3.2L12 22l-2.4-6.8L2 12l7.6-3.2L12 2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const MapPinIcon = () => (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M12 22s7-6.1 7-12a7 7 0 10-14 0c0 5.9 7 12 7 12z" />
|
||||
<circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TargetIcon = () => (
|
||||
<svg width="18" height="18" 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="18" height="18" 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 CrownIcon = ({ className = '' }: { className?: string }) => (
|
||||
<svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden>
|
||||
<path d="M3 7l4 4 5-6 5 6 4-4v10H3z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const TrendingUpIcon = () => (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M3 17l6-6 4 4 7-7" />
|
||||
<path d="M14 7h7v7" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LayoutGridIcon = () => (
|
||||
<svg width="14" height="14" 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 AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, onGenerate, data }) => {
|
||||
const { processed_info, marketing_analysis } = data;
|
||||
const tags = marketing_analysis.tags || [];
|
||||
const facilities = marketing_analysis.facilities || [];
|
||||
const sellingPoints = parseSellingPoints(facilities);
|
||||
const reportSections = useMemo(
|
||||
() => splitMarkdownSections(marketing_analysis.report || ''),
|
||||
[marketing_analysis.report]
|
||||
);
|
||||
const locationAnalysis =
|
||||
pickSectionContent(reportSections, ['지역', '입지']) || reportSections[0]?.content || '';
|
||||
const conceptAnalysis =
|
||||
pickSectionContent(reportSections, ['핵심', '차별', '컨셉', '콘셉트']) || reportSections[1]?.content || '';
|
||||
const targetSection = pickSectionContent(reportSections, ['타겟', '고객']);
|
||||
const positioningCategory = facilities.length > 0 ? facilities.join(' · ') : '정보 없음';
|
||||
const positioningCore =
|
||||
pickSectionContent(reportSections, ['핵심 가치', '핵심', '차별']) || tags.slice(0, 3).join(' · ') || '정보 없음';
|
||||
const usps: USP[] = useMemo(() => buildUSPs(facilities, tags), [facilities, tags]);
|
||||
const topUSP = useMemo(
|
||||
() => [...usps].sort((a, b) => b.score - a.score)[0],
|
||||
[usps]
|
||||
);
|
||||
const targets = useMemo(() => buildTargets(targetSection, tags), [targetSection, tags]);
|
||||
|
||||
return (
|
||||
<div className="analysis-container">
|
||||
{/* Header Area */}
|
||||
<div className="analysis-header-area">
|
||||
{/* Back Button */}
|
||||
<div className="back-button-container">
|
||||
<button onClick={onBack} className="btn-back">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M15 18l-6-6 6-6" />
|
||||
</svg>
|
||||
뒤로가기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="analysis-header">
|
||||
<div className="analysis-icon">
|
||||
<svg className="w-8 h-8" 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="page-title">브랜드 분석</h1>
|
||||
<p className="page-subtitle">
|
||||
쉽고 빠르게, 브랜드 소셜 미디어 캠페인을 만드세요.
|
||||
</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-brand-bg text-brand-text pb-24 selection:bg-brand-accent/30 font-sans">
|
||||
<div className="p-6">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full border border-brand-muted/30 text-brand-muted hover:text-brand-accent hover:border-brand-accent transition-all text-sm group"
|
||||
>
|
||||
<ArrowLeftIcon />
|
||||
<span>뒤로가기</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="analysis-grid">
|
||||
{/* Left: Brand Identity (Scrollable) */}
|
||||
<div className="brand-identity-card">
|
||||
<div className="brand-header">
|
||||
<span className="section-title">브랜드 정체성</span>
|
||||
<span className="brand-subtitle">AI 마케팅 분석 요약</span>
|
||||
</div>
|
||||
|
||||
<div className="brand-content">
|
||||
<div className="brand-info">
|
||||
<h2 className="brand-name">{processed_info.customer_name}</h2>
|
||||
<p className="brand-location">{processed_info.detail_region_info}</p>
|
||||
</div>
|
||||
|
||||
<div className="report-content">
|
||||
{marketing_analysis.report
|
||||
? formatReportText(marketing_analysis.report)
|
||||
: '분석 결과가 없습니다.'}
|
||||
</div>
|
||||
<div className="text-center mb-10 px-4">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="relative">
|
||||
<SparklesIcon className="text-brand-accent w-8 h-8 animate-pulse relative z-10" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-3 tracking-tight text-white">브랜드 인텔리전스</h1>
|
||||
<p className="text-brand-muted text-lg max-w-xl mx-auto">
|
||||
<span className="text-brand-accent font-semibold">AI 데이터 분석</span>을 통해 도출된 브랜드 전략입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right: Selling Points & Keywords (Fixed) */}
|
||||
<div className="analysis-cards-column">
|
||||
{/* Main Selling Points */}
|
||||
<div className="feature-card selling-points-card">
|
||||
<span className="section-title">주요 셀링 포인트</span>
|
||||
<div className="selling-points-grid">
|
||||
{sellingPoints.map((point, idx) => (
|
||||
<div key={idx} className="selling-point-item">
|
||||
<span className="selling-point-title">{point.title}</span>
|
||||
<div className="selling-point-content">
|
||||
{point.items.map((item, itemIdx) => (
|
||||
<p key={itemIdx}>{item}</p>
|
||||
))}
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 shadow-lg relative overflow-hidden group hover:border-brand-accent/20 transition-all duration-500">
|
||||
<div className="absolute top-0 left-0 w-1.5 h-full bg-gradient-to-b from-brand-accent to-brand-purple"></div>
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<span className="text-brand-accent font-bold text-sm uppercase tracking-wider flex items-center gap-2">
|
||||
<LayoutGridIcon /> 브랜드 정체성
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-2 text-white tracking-tight">{processed_info.customer_name}</h2>
|
||||
<div className="flex items-start gap-2 text-brand-muted text-sm mb-6">
|
||||
<MapPinIcon />
|
||||
<div>
|
||||
<p>{processed_info.detail_region_info || '주소 정보 없음'}</p>
|
||||
<p className="opacity-70">{processed_info.region}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5 text-gray-300 leading-relaxed border-t border-white/5 pt-5">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-2 text-sm text-brand-muted">입지 특성 분석</h3>
|
||||
{locationAnalysis ? renderMarkdown(locationAnalysis) : <p className="text-sm opacity-90">정보 없음</p>}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-2 text-sm text-brand-muted">컨셉 확장성</h3>
|
||||
{conceptAnalysis ? renderMarkdown(conceptAnalysis) : <p className="text-sm opacity-90">정보 없음</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-white">
|
||||
<TargetIcon /> 시장 포지셔닝
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="bg-brand-bg/50 p-5 rounded-xl border border-brand-muted/20 hover:border-brand-accent/30 transition-colors group">
|
||||
<span className="block text-xs text-brand-muted mb-1 group-hover:text-brand-accent transition-colors">
|
||||
카테고리 정의
|
||||
</span>
|
||||
<span className="font-bold text-lg text-white">{positioningCategory}</span>
|
||||
</div>
|
||||
<div className="bg-gradient-to-r from-brand-bg/50 to-brand-cardHover p-5 rounded-xl border border-brand-muted/20 border-l-4 border-l-brand-accent">
|
||||
<span className="block text-xs text-brand-accent mb-1 font-semibold">핵심 가치 (Core Value)</span>
|
||||
<span className="font-semibold text-white">{positioningCore}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10">
|
||||
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-white">
|
||||
<UsersIcon /> 타겟 페르소나
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{targets.map((target, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-col sm:flex-row sm:items-center gap-4 p-4 bg-brand-bg/30 rounded-xl border border-white/5 hover:border-brand-accent/20 transition-all group"
|
||||
>
|
||||
<div className="min-w-[120px]">
|
||||
<div className="font-bold text-white group-hover:text-brand-accent transition-colors">
|
||||
{target.segment}
|
||||
</div>
|
||||
{target.age && <div className="text-xs text-brand-muted">{target.age}</div>}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
{target.needs.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mb-2">
|
||||
{target.needs.map((need, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-[10px] px-2 py-0.5 bg-brand-accent/10 text-brand-accent rounded-sm font-medium"
|
||||
>
|
||||
{need}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{target.triggers.length > 0 && (
|
||||
<p className="text-xs text-gray-400 border-t border-white/5 pt-2 mt-2">
|
||||
<span className="text-brand-muted">Trigger:</span> {target.triggers.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recommended Target Keywords */}
|
||||
<div className="feature-card keywords-card">
|
||||
<span className="section-title">추천 타겟 키워드</span>
|
||||
<div className="tags-wrapper">
|
||||
{tags.map((tag, idx) => (
|
||||
<span key={idx} className="feature-tag">
|
||||
{tag}
|
||||
</span>
|
||||
<div className="space-y-6">
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 min-h-[500px] flex flex-col relative overflow-hidden">
|
||||
<div className="flex justify-between items-center mb-2 z-10">
|
||||
<h3 className="text-xl font-bold text-white">주요 셀링 포인트 (USP)</h3>
|
||||
<div className="flex items-center gap-1 text-xs text-brand-accent bg-brand-accent/10 px-2 py-1 rounded">
|
||||
<TrendingUpIcon />
|
||||
<span>AI Data Analysis</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center relative z-10 -my-4">
|
||||
<GeometricChart data={usps} />
|
||||
</div>
|
||||
|
||||
{topUSP && (
|
||||
<div className="mt-2 mb-6 p-4 rounded-xl bg-gradient-to-r from-brand-accent/10 to-transparent border border-brand-accent/20 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-2 opacity-10">
|
||||
<CrownIcon className="w-16 h-16 text-brand-accent" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="text-xs text-brand-accent font-bold uppercase tracking-wider mb-1 flex items-center gap-1">
|
||||
<CrownIcon className="w-3 h-3" /> Core Competitiveness
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-lg font-bold text-white">{topUSP.label}</div>
|
||||
<div className="text-xs text-brand-accent/80 font-mono tracking-wider">{topUSP.subLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 z-10">
|
||||
{usps
|
||||
.filter((usp) => usp.label !== topUSP?.label)
|
||||
.slice(0, 4)
|
||||
.map((usp, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-3 rounded-xl bg-brand-bg/40 border border-white/5 hover:bg-brand-bg/60 transition-colors"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="text-xs text-brand-muted font-bold uppercase tracking-tight">{usp.subLabel}</div>
|
||||
</div>
|
||||
<div className="text-sm font-bold text-white mb-1">{usp.label}</div>
|
||||
<div className="text-xs text-gray-400 leading-tight truncate">{usp.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-brand-card rounded-3xl p-8 border border-brand-muted/10 relative overflow-hidden">
|
||||
<h3 className="text-xl font-bold mb-6 text-center text-white">추천 타겟 키워드</h3>
|
||||
<div className="flex flex-wrap justify-center gap-3 relative z-10">
|
||||
{tags.length === 0 && <span className="text-sm text-brand-muted">정보 없음</span>}
|
||||
{tags.map((keyword, idx) => (
|
||||
<KeywordBubble key={idx} text={keyword} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Button */}
|
||||
<div className="analysis-bottom">
|
||||
<button onClick={onGenerate} className="btn-primary">
|
||||
<div className="fixed bottom-8 left-0 right-0 flex justify-center z-50 pointer-events-none">
|
||||
<button
|
||||
onClick={onGenerate}
|
||||
className="pointer-events-auto bg-brand-purple hover:bg-brand-purpleHover text-white font-bold py-3 px-12 rounded-full shadow-2xl shadow-brand-purple/40 transform hover:scale-105 transition-all duration-300 flex items-center gap-2"
|
||||
>
|
||||
<SparklesIcon className="w-5 h-5" />
|
||||
콘텐츠 생성
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
interface KeywordBubbleProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
const KeywordBubble: React.FC<KeywordBubbleProps> = ({ text }) => (
|
||||
<span className="px-4 py-2 rounded-full bg-brand-cardHover/80 text-brand-text text-xs font-semibold tracking-tight border border-brand-muted/20 shadow-sm hover:border-brand-accent/50 hover:text-brand-accent transition">
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
|
||||
export default KeywordBubble;
|
||||
Loading…
Reference in New Issue