feat(portfolio): 기술 스택을 SimpleIcons 로고 무한 캐러셀로 표시

LogoLoop 컴포넌트를 추가해 카테고리별(언어/프레임워크/인프라/도구) 4줄 가로 스크롤 캐러셀로 skill 로고를 표시. simpleicons CDN을 사용하며 매칭 안 되는 항목(APScheduler, KIS Open API)은 텍스트 칩으로 자동 fallback. 편집 모드에서는 기존 칩 UI를 유지해 편집·삭제 가능. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-28 02:43:57 +09:00
parent 1bd680e47f
commit c68cee502a
4 changed files with 573 additions and 9 deletions
--- a/src/components/LogoLoop.css
+++ b/src/components/LogoLoop.css
@@ -0,0 +1,147 @@
+.logoloop {
+    position: relative;
+    overflow: hidden;
+}
+
+.logoloop:not(.logoloop--vertical) {
+    overflow-x: hidden;
+}
+
+.logoloop--vertical {
+    overflow-y: hidden;
+    height: 100%;
+    display: inline-block;
+}
+
+.logoloop__track {
+    display: flex;
+    flex-direction: row;
+    width: max-content;
+    will-change: transform;
+    user-select: none;
+    position: relative;
+    z-index: 0;
+}
+
+.logoloop__track--vertical {
+    flex-direction: column;
+    width: 100%;
+    height: max-content;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .logoloop__track {
+        transform: none !important;
+    }
+}
+
+.logoloop__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.logoloop__list--vertical {
+    flex-direction: column;
+}
+
+.logoloop__item {
+    flex: none;
+    font-size: var(--logoloop-logoHeight, 36px);
+    line-height: 1;
+}
+
+.logoloop__list:not(.logoloop__list--vertical) .logoloop__item {
+    margin-right: var(--logoloop-gap, 32px);
+}
+
+.logoloop__list--vertical .logoloop__item {
+    margin-bottom: var(--logoloop-gap, 32px);
+}
+
+.logoloop__item--scalable {
+    overflow: visible;
+}
+
+.logoloop__link {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: opacity 0.2s linear;
+    color: inherit;
+}
+
+.logoloop__link:hover {
+    opacity: 0.8;
+}
+
+.logoloop__link:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+
+.logoloop__node {
+    display: inline-flex;
+    align-items: center;
+}
+
+.logoloop__node--scale,
+.logoloop__img--scale {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.logoloop__item--scalable:hover .logoloop__node--scale,
+.logoloop__item--scalable:hover .logoloop__img--scale {
+    transform: scale(1.18);
+}
+
+.logoloop__img {
+    height: var(--logoloop-logoHeight, 36px);
+    width: auto;
+    display: block;
+    object-fit: contain;
+    -webkit-user-drag: none;
+    pointer-events: none;
+    image-rendering: -webkit-optimize-contrast;
+}
+
+.logoloop__fade {
+    position: absolute;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.logoloop__fade--left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: clamp(24px, 8%, 120px);
+    background: linear-gradient(to right, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
+}
+
+.logoloop__fade--right {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: clamp(24px, 8%, 120px);
+    background: linear-gradient(to left, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
+}
+
+.logoloop__fade--top {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: clamp(24px, 8%, 120px);
+    background: linear-gradient(to bottom, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
+}
+
+.logoloop__fade--bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: clamp(24px, 8%, 120px);
+    background: linear-gradient(to top, var(--logoloop-fadeColor, var(--bg-primary, #0b0b0b)) 0%, transparent 100%);
+}