gahusb
9800d067b9
- AchievementToast, PrestigeModal, AchievementsScreen 컴포넌트 추가 - BottomTabBar에 업적 탭 연결 - useGameStore 프레스티지/업적 상태 로직 수정 - pages/index.tsx 라우팅 업데이트 Co-Authored-By: Paperclip <noreply@paperclip.ing>
73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { css } from '@emotion/react';
|
|
import type { TabName } from '../store/useGameStore';
|
|
|
|
interface TabItem {
|
|
key: TabName;
|
|
label: string;
|
|
icon: string;
|
|
}
|
|
|
|
const TABS: TabItem[] = [
|
|
{ key: 'elements', label: '원소', icon: '⚗️' },
|
|
{ key: 'evolution', label: '강화', icon: '⬆️' },
|
|
{ key: 'fusion', label: '합성', icon: '🔮' },
|
|
{ key: 'shop', label: '상점', icon: '🛒' },
|
|
{ key: 'achievements', label: '업적', icon: '🏆' },
|
|
{ key: 'settings', label: '설정', icon: '⚙️' },
|
|
];
|
|
|
|
interface BottomTabBarProps {
|
|
activeTab: TabName;
|
|
onTabChange: (tab: TabName) => void;
|
|
}
|
|
|
|
const containerStyle = css`
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid #e8e8e8;
|
|
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
z-index: 100;
|
|
`;
|
|
|
|
const tabItemStyle = css`
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 0 10px;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
gap: 4px;
|
|
`;
|
|
|
|
const iconStyle = css`
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
`;
|
|
|
|
const labelStyle = (active: boolean) => css`
|
|
font-size: 10px;
|
|
font-weight: ${active ? 600 : 400};
|
|
color: ${active ? '#3182F6' : '#8b8b8b'};
|
|
letter-spacing: -0.2px;
|
|
`;
|
|
|
|
export function BottomTabBar({ activeTab, onTabChange }: BottomTabBarProps) {
|
|
return (
|
|
<nav css={containerStyle}>
|
|
{TABS.map((tab) => (
|
|
<button key={tab.key} css={tabItemStyle} onClick={() => onTabChange(tab.key)}>
|
|
<span css={iconStyle}>{tab.icon}</span>
|
|
<span css={labelStyle(activeTab === tab.key)}>{tab.label}</span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|