브랜드 분석페이지 점수 표시 삭제 .

main
hbyang 2026-02-02 16:47:24 +09:00
parent fd9db31e52
commit dc42d26e6b
1 changed files with 2 additions and 60 deletions

View File

@ -82,51 +82,14 @@ const AnimatedItem: React.FC<AnimatedItemProps> = ({ children, index, baseDelay
); );
}; };
// 애니메이션 숫자 카운터 컴포넌트
interface AnimatedScoreProps {
score: number;
duration?: number;
delay?: number;
className?: string;
}
const AnimatedScore: React.FC<AnimatedScoreProps> = ({ score, duration = 1000, delay = 0, className = '' }) => {
const [displayScore, setDisplayScore] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
const startTime = Date.now();
const animate = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeProgress = 1 - Math.pow(1 - progress, 3);
setDisplayScore(Math.round(score * easeProgress));
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}, delay);
return () => clearTimeout(timer);
}, [score, duration, delay]);
return <span className={className}>{displayScore}</span>;
};
// 애니메이션 USP 아이템 컴포넌트 // 애니메이션 USP 아이템 컴포넌트
interface AnimatedUSPItemProps { interface AnimatedUSPItemProps {
usp: { category: string; description: string; score: number }; usp: { category: string; description: string; score: number };
index: number; index: number;
isTop?: boolean; isTop?: boolean;
getScoreColor: (score: number) => string;
} }
const AnimatedUSPItem: React.FC<AnimatedUSPItemProps> = ({ usp, index, isTop = false, getScoreColor }) => { const AnimatedUSPItem: React.FC<AnimatedUSPItemProps> = ({ usp, index, isTop = false }) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const delay = index * 150; // 각 아이템마다 150ms 딜레이 const delay = index * 150; // 각 아이템마다 150ms 딜레이
@ -153,12 +116,6 @@ const AnimatedUSPItem: React.FC<AnimatedUSPItemProps> = ({ usp, index, isTop = f
</div> </div>
<div className="text-lg font-bold text-white">{usp.description}</div> <div className="text-lg font-bold text-white">{usp.description}</div>
</div> </div>
<AnimatedScore
score={usp.score}
delay={delay + 300}
duration={1200}
className={`text-4xl font-bold ${getScoreColor(usp.score)}`}
/>
</div> </div>
</div> </div>
); );
@ -166,7 +123,7 @@ const AnimatedUSPItem: React.FC<AnimatedUSPItemProps> = ({ usp, index, isTop = f
return ( return (
<div <div
className={`p-4 rounded-xl bg-brand-bg/40 border border-white/5 hover:bg-brand-bg/60 transition-all duration-500 flex justify-between items-center ${ className={`p-4 rounded-xl bg-brand-bg/40 border border-white/5 hover:bg-brand-bg/60 transition-all duration-500 ${
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4' isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4'
}`} }`}
> >
@ -174,12 +131,6 @@ const AnimatedUSPItem: React.FC<AnimatedUSPItemProps> = ({ usp, index, isTop = f
<div className="text-xs text-brand-muted font-bold uppercase tracking-tight mb-1">{usp.category}</div> <div className="text-xs text-brand-muted font-bold uppercase tracking-tight mb-1">{usp.category}</div>
<div className="text-base font-bold text-white">{usp.description}</div> <div className="text-base font-bold text-white">{usp.description}</div>
</div> </div>
<AnimatedScore
score={usp.score}
delay={delay + 300}
duration={1000}
className={`text-3xl font-bold ${getScoreColor(usp.score)} ml-4`}
/>
</div> </div>
); );
}; };
@ -421,13 +372,6 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
? [...sellingPoints].sort((a, b) => b.score - a.score)[0] ? [...sellingPoints].sort((a, b) => b.score - a.score)[0]
: null; : null;
// 점수에 따른 색상
const getScoreColor = (score: number) => {
if (score >= 90) return 'text-brand-accent';
if (score >= 85) return 'text-green-400';
if (score >= 80) return 'text-yellow-400';
return 'text-gray-400';
};
return ( return (
<div className="min-h-screen bg-brand-bg text-brand-text pb-24 selection:bg-brand-accent/30 font-sans"> <div className="min-h-screen bg-brand-bg text-brand-text pb-24 selection:bg-brand-accent/30 font-sans">
@ -576,7 +520,6 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
usp={topUSP} usp={topUSP}
index={0} index={0}
isTop={true} isTop={true}
getScoreColor={getScoreColor}
/> />
)} )}
@ -591,7 +534,6 @@ const AnalysisResultSection: React.FC<AnalysisResultSectionProps> = ({ onBack, o
usp={usp} usp={usp}
index={idx + 1} index={idx + 1}
isTop={false} isTop={false}
getScoreColor={getScoreColor}
/> />
))} ))}
</div> </div>