minecraft-web/frontend/tailwind.config.js
caadiq 00be44fc33 feat: 모드팩 배포 시스템 UI/UX 개선
백엔드:
- 중복 모드팩 업로드 시 409 에러 반환
- changelog UTF-8 인코딩 수정
- S3 경로에서 한글 제거 (ASCII만 사용)

프론트엔드:
- 업로드 중 로딩 인디케이터 추가
- 에러 토스트 빨간색/성공 초록색 구분
- 다이얼로그 배경 클릭 시 닫히지 않음 + 스케일 바운스 효과
- 취소 버튼 로딩 중 비활성화
2025-12-23 17:15:32 +09:00

86 lines
2.9 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
sans: ["Pretendard", "Inter", "sans-serif"],
},
colors: {
mc: {
// 기존 다크 테마에서 약간 밝게 조정
bg: "#141414",
card: "#1c1c1c",
green: {
DEFAULT: "#4ade80",
hover: "#22c55e",
dark: "#166534",
light: "#22c55e20",
},
emerald: "#10b981",
diamond: "#22d3ee",
gold: "#fbbf24",
gray: "#252525",
"gray-light": "#333333",
"gray-dark": "#64748b",
},
},
// 애니메이션 키프레임 정의
keyframes: {
shimmer: {
"0%": { backgroundPosition: "-200% 0" },
"100%": { backgroundPosition: "200% 0" },
},
float: {
"0%, 100%": { transform: "translateY(0px)" },
"50%": { transform: "translateY(-10px)" },
},
"glow-pulse": {
"0%, 100%": { boxShadow: "0 0 20px rgba(74, 222, 128, 0.3)" },
"50%": { boxShadow: "0 0 40px rgba(74, 222, 128, 0.5)" },
},
"border-glow": {
"0%, 100%": { borderColor: "rgba(74, 222, 128, 0.3)" },
"50%": { borderColor: "rgba(74, 222, 128, 0.6)" },
},
"fade-in-up": {
"0%": { opacity: "0", transform: "translateY(20px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
"scale-in": {
"0%": { opacity: "0", transform: "scale(0.95)" },
"100%": { opacity: "1", transform: "scale(1)" },
},
shake: {
"0%, 100%": { transform: "scale(1)" },
"50%": { transform: "scale(1.02)" },
},
},
animation: {
shimmer: "shimmer 2s infinite linear",
float: "float 3s ease-in-out infinite",
"glow-pulse": "glow-pulse 2s ease-in-out infinite",
"border-glow": "border-glow 2s ease-in-out infinite",
"fade-in-up": "fade-in-up 0.5s ease-out",
"scale-in": "scale-in 0.3s ease-out",
},
boxShadow: {
glow: "0 0 20px rgba(74, 222, 128, 0.3)",
"glow-lg": "0 0 40px rgba(74, 222, 128, 0.4)",
"glow-emerald": "0 0 20px rgba(16, 185, 129, 0.3)",
"glow-diamond": "0 0 20px rgba(34, 211, 238, 0.3)",
"inner-glow": "inset 0 0 20px rgba(74, 222, 128, 0.1)",
soft: "0 4px 20px rgba(0, 0, 0, 0.3)",
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"mc-gradient": "linear-gradient(135deg, #4ade80 0%, #22d3ee 100%)",
"mc-gradient-dark":
"linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%)",
},
},
},
plugins: [],
};