fix(portfolio): 기술 스택 로고를 정적 4줄 레이아웃으로 변경
LogoLoop 무한 캐러셀이 항목 수가 적은 카테고리에서 반복돼 시각적으로 산만한 문제. 카테고리별로 단순 flex-wrap 줄로 정적 표시. SkillLogoNode와 fallback 로직은 유지. LogoLoop 컴포넌트 자체는 다른 페이지에서 재사용 여지를 위해 보존. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -384,8 +384,11 @@
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px 0;
|
||||
overflow: hidden;
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 24px 28px;
|
||||
}
|
||||
|
||||
.pf-skill-logo {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import LogoLoop from '../../components/LogoLoop';
|
||||
|
||||
const CAREER_CATEGORIES = { company: '회사', education: '교육', etc: '기타' };
|
||||
const SKILL_CATEGORIES = { language: '언어', framework: '프레임워크', infra: '인프라', tool: '도구' };
|
||||
@@ -46,14 +45,6 @@ function SkillLogoNode({ name, slug }) {
|
||||
);
|
||||
}
|
||||
|
||||
function buildSkillLogos(items) {
|
||||
return items.map((s) => ({
|
||||
node: <SkillLogoNode name={s.name} slug={SKILL_LOGO_SLUGS[s.name]} />,
|
||||
ariaLabel: s.name,
|
||||
title: s.name,
|
||||
}));
|
||||
}
|
||||
|
||||
export default function ProfileTab({ data, editing, api, onRefresh }) {
|
||||
const { profile, careers, skills } = data;
|
||||
const [editingProfile, setEditingProfile] = useState(null);
|
||||
@@ -241,18 +232,14 @@ export default function ProfileTab({ data, editing, api, onRefresh }) {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="pf-skill-loop">
|
||||
<LogoLoop
|
||||
logos={buildSkillLogos(items)}
|
||||
speed={40}
|
||||
logoHeight={36}
|
||||
gap={48}
|
||||
pauseOnHover
|
||||
fadeOut
|
||||
fadeOutColor="var(--bg-primary, #0b0b0b)"
|
||||
scaleOnHover
|
||||
ariaLabel={`${SKILL_CATEGORIES[cat]} 기술 스택`}
|
||||
<div className="pf-skill-loop" aria-label={`${SKILL_CATEGORIES[cat]} 기술 스택`}>
|
||||
{items.map((s) => (
|
||||
<SkillLogoNode
|
||||
key={s.id}
|
||||
name={s.name}
|
||||
slug={SKILL_LOGO_SLUGS[s.name]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user