+ {/* 총 수익 카드 (고정) */}
+
+
+
+
+
+ 총 결정 개수
+ MAX_PER_ACCOUNT ? 'text-amber-400' : 'text-gray-200'}`}>
+ {accountUsage}/{MAX_PER_ACCOUNT}
+
+
+
+
MAX_PER_ACCOUNT ? 'bg-amber-500' : 'bg-emerald-500'}`}
+ style={{ width: `${usagePct}%` }}
+ />
+
+ {totalCount > MAX_PER_ACCOUNT && (
+
⚠ 한도 {totalCount - MAX_PER_ACCOUNT}개 초과
+ )}
+
+
+
+ {/* 캐릭터 추가 (고정) */}
+
+
+ {/* 캐릭터 목록 (스크롤) */}
+ {characters.length > 0 && (
+
+
+ {characters.map((char) => (
+
+ ))}
+
+
+ )}
+
+
setConfirmRemove(null)}
+ onConfirm={() => {
+ onRemove(confirmRemove.character_name)
+ setConfirmRemove(null)
+ }}
+ title="캐릭터 삭제"
+ description={confirmRemove ? `"${confirmRemove.character_name}" 캐릭터를 목록에서 삭제하시겠습니까?\n\n저장된 보스 선택도 함께 삭제됩니다.` : ''}
+ confirmText="삭제"
+ destructive
+ />
+
+ )
+}
diff --git a/frontend/src/hooks/useFitText.js b/frontend/src/hooks/useFitText.js
new file mode 100644
index 0000000..640de5c
--- /dev/null
+++ b/frontend/src/hooks/useFitText.js
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * 텍스트가 컨테이너에 들어가도록 자동으로 폰트 크기 축소
+ * @param {number} maxFontSize - 최대 폰트 크기 (px)
+ * @param {number} minFontSize - 최소 폰트 크기 (px)
+ * @param {string} value - 텍스트 (변경 감지용)
+ */
+export function useFitText({ maxFontSize = 30, minFontSize = 12, value }) {
+ const containerRef = useRef(null)
+ const textRef = useRef(null)
+ const [fontSize, setFontSize] = useState(maxFontSize)
+
+ useEffect(() => {
+ if (!containerRef.current || !textRef.current) return
+
+ const fit = () => {
+ const container = containerRef.current
+ const text = textRef.current
+ if (!container || !text) return
+
+ // 일단 최대 크기로 시도
+ let size = maxFontSize
+ text.style.fontSize = `${size}px`
+
+ // 컨테이너보다 크면 줄여나감
+ while (text.scrollWidth > container.clientWidth && size > minFontSize) {
+ size -= 1
+ text.style.fontSize = `${size}px`
+ }
+
+ setFontSize(size)
+ }
+
+ fit()
+
+ const ro = new ResizeObserver(fit)
+ ro.observe(containerRef.current)
+ return () => ro.disconnect()
+ }, [value, maxFontSize, minFontSize])
+
+ return { containerRef, textRef, fontSize }
+}
diff --git a/frontend/src/hooks/useSmoothSticky.js b/frontend/src/hooks/useSmoothSticky.js
new file mode 100644
index 0000000..2a44493
--- /dev/null
+++ b/frontend/src/hooks/useSmoothSticky.js
@@ -0,0 +1,95 @@
+import { useCallback, useRef } from 'react'
+
+/**
+ * 구글폼 사이드 패널처럼 스크롤을 부드럽게 따라오는 sticky 효과
+ * - 부모 컨테이너의 위/아래 경계를 넘지 않음
+ * - lerp(선형보간)로 부드러운 움직임
+ *
+ * Callback ref 패턴이라 element가 마운트되는 시점에 자동 setup
+ *
+ * @returns {Function} ref 콜백
+ */
+export function useSmoothSticky({ offsetTop = 80, bottomMargin = 16, lerp = 0.18 } = {}) {
+ const cleanupRef = useRef(null)
+
+ return useCallback((el) => {
+ // 이전 element의 cleanup
+ if (cleanupRef.current) {
+ cleanupRef.current()
+ cleanupRef.current = null
+ }
+
+ if (!el || !el.parentElement) return
+
+ let rafId = null
+ let target = 0
+ let current = 0
+
+ const calcTarget = () => {
+ const containerRect = el.parentElement.getBoundingClientRect()
+ const containerHeight = el.parentElement.offsetHeight
+ const elementHeight = el.offsetHeight
+ const viewportHeight = window.innerHeight
+ const availableSpace = viewportHeight - offsetTop - bottomMargin
+ const maxOffset = Math.max(0, containerHeight - elementHeight - bottomMargin)
+
+ let desired
+ if (elementHeight <= availableSpace) {
+ // 패널이 viewport에 들어감 → 상단에 sticky
+ desired = Math.max(0, offsetTop - containerRect.top)
+ } else {
+ // 패널이 viewport보다 큼 → 자연스럽게 스크롤되다가 하단이 viewport 하단에 닿으면 멈춤
+ desired = Math.max(0, viewportHeight - bottomMargin - containerRect.top - elementHeight)
+ }
+
+ target = Math.min(desired, maxOffset)
+ }
+
+ const tick = () => {
+ const diff = target - current
+ if (Math.abs(diff) > 0.3) {
+ current += diff * lerp
+ el.style.transform = `translate3d(0, ${current}px, 0)`
+ rafId = requestAnimationFrame(tick)
+ } else {
+ current = target
+ el.style.transform = `translate3d(0, ${current}px, 0)`
+ rafId = null
+ }
+ }
+
+ const startTick = () => {
+ if (rafId === null) rafId = requestAnimationFrame(tick)
+ }
+
+ const onScroll = () => {
+ calcTarget()
+ startTick()
+ }
+
+ // 초기 위치 설정
+ calcTarget()
+ current = target
+ el.style.transform = `translate3d(0, ${current}px, 0)`
+ el.style.willChange = 'transform'
+
+ window.addEventListener('scroll', onScroll, { passive: true })
+ window.addEventListener('resize', onScroll)
+
+ const ro = new ResizeObserver(onScroll)
+ ro.observe(el)
+ ro.observe(el.parentElement)
+
+ cleanupRef.current = () => {
+ if (rafId !== null) cancelAnimationFrame(rafId)
+ window.removeEventListener('scroll', onScroll)
+ window.removeEventListener('resize', onScroll)
+ ro.disconnect()
+ if (el.isConnected) {
+ el.style.transform = ''
+ el.style.willChange = ''
+ }
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9d417b4..e2a8b08 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,6 +5,11 @@
--font-maple: "Maplestory", "Noto Sans KR", sans-serif;
}
+html, body, #root {
+ height: 100%;
+ background: #030712;
+}
+
html {
font-family: "Maplestory", "Noto Sans KR", system-ui, sans-serif;
}
@@ -34,3 +39,27 @@ input[type="number"]::-webkit-outer-spin-button {
input[type="number"] {
-moz-appearance: textfield;
}
+
+/* 커스텀 스크롤바 */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+*::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.08);
+ border-radius: 4px;
+ transition: background 0.2s;
+}
+*::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.18);
+}
+*::-webkit-scrollbar-corner {
+ background: transparent;
+}
-
- 메이플스토리 유틸리티
-
-
-