From a9d9540f6139ee1866bcb09d89d56cfd2eb26d4e Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 28 Apr 2026 02:49:00 +0900
Subject: [PATCH] =?UTF-8?q?fix(portfolio):=20=EA=B8=B0=EC=88=A0=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=9D=20=EB=A1=9C=EA=B3=A0=EB=A5=BC=20=EC=A0=95?=
 =?UTF-8?q?=EC=A0=81=204=EC=A4=84=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LogoLoop 무한 캐러셀이 항목 수가 적은 카테고리에서 반복돼 시각적으로 산만한
문제. 카테고리별로 단순 flex-wrap 줄로 정적 표시. SkillLogoNode와 fallback
로직은 유지. LogoLoop 컴포넌트 자체는 다른 페이지에서 재사용 여지를 위해 보존.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/portfolio/Portfolio.css  |  7 +++++--
 src/pages/portfolio/ProfileTab.jsx | 29 ++++++++---------------------
 2 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/pages/portfolio/Portfolio.css b/src/pages/portfolio/Portfolio.css
index 09fcc88..851c3b7 100644
--- a/src/pages/portfolio/Portfolio.css
+++ b/src/pages/portfolio/Portfolio.css
@@ -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 {
diff --git a/src/pages/portfolio/ProfileTab.jsx b/src/pages/portfolio/ProfileTab.jsx
index ca660e0..c655935 100644
--- a/src/pages/portfolio/ProfileTab.jsx
+++ b/src/pages/portfolio/ProfileTab.jsx
@@ -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>