fix(components): CSS 변수명 수정 + dead code 제거
- --border-line → --line (5개 컴포넌트 8곳) - --gradient-accent → --grad-accent (FAB) - --text-default → --text (MobileSheet) - useSwipe.js 삭제 (미사용 dead code) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,7 +9,7 @@
|
|||||||
height: var(--bottom-nav-h);
|
height: var(--bottom-nav-h);
|
||||||
padding-bottom: var(--safe-area-bottom);
|
padding-bottom: var(--safe-area-bottom);
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border-top: 1px solid var(--border-line);
|
border-top: 1px solid var(--line);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
z-index: 299;
|
z-index: 299;
|
||||||
padding: 16px 12px 12px;
|
padding: 16px 12px 12px;
|
||||||
background: var(--surface-raised);
|
background: var(--surface-raised);
|
||||||
border-top: 1px solid var(--border-line);
|
border-top: 1px solid var(--line);
|
||||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
@@ -137,7 +137,7 @@
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
border: 1px solid var(--border-line);
|
border: 1px solid var(--line);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
|
transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
width: 56px;
|
width: 56px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--gradient-accent);
|
background: var(--grad-accent);
|
||||||
border: none;
|
border: none;
|
||||||
color: #000;
|
color: #000;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
|||||||
@@ -26,7 +26,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
background: var(--bg-secondary);
|
background: var(--bg-secondary);
|
||||||
border-top: 1px solid var(--border-line);
|
border-top: 1px solid var(--line);
|
||||||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||||||
z-index: 401;
|
z-index: 401;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -73,7 +73,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 20px 12px;
|
padding: 0 20px 12px;
|
||||||
border-bottom: 1px solid var(--border-line);
|
border-bottom: 1px solid var(--line);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mobile-sheet__close:hover {
|
.mobile-sheet__close:hover {
|
||||||
color: var(--text-default);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollable body */
|
/* Scrollable body */
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--surface-card);
|
background: var(--surface-card);
|
||||||
border: 1px solid var(--border-line);
|
border: 1px solid var(--line);
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border: 2px solid var(--border-line);
|
border: 2px solid var(--line);
|
||||||
border-top-color: var(--neon-cyan);
|
border-top-color: var(--neon-cyan);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: ptr-spin 0.7s linear infinite;
|
animation: ptr-spin 0.7s linear infinite;
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
padding: 4px;
|
padding: 4px;
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
border: 1px solid var(--border-line);
|
border: 1px solid var(--line);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
import { useSwipeable } from 'react-swipeable';
|
|
||||||
|
|
||||||
export function useSwipe({ onSwipedLeft, onSwipedRight, threshold = 50 } = {}) {
|
|
||||||
const handlers = useSwipeable({
|
|
||||||
onSwipedLeft,
|
|
||||||
onSwipedRight,
|
|
||||||
delta: threshold,
|
|
||||||
trackMouse: false,
|
|
||||||
preventScrollOnSwipe: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
return handlers;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user