335 lines
12 KiB
React
335 lines
12 KiB
React
|
/**
|
||
|
|
* 모드팩 페이지 - GitHub Release 스타일
|
||
|
|
*/
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Download, Package, ChevronDown, ChevronUp, Calendar, HardDrive, Gamepad2, Box, Image } from 'lucide-react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
|
||
|
|
// 더미 데이터
|
||
|
|
const DUMMY_MODPACKS = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
version: '1.2.0',
|
||
|
|
name: '테스트 서버 모드팩',
|
||
|
|
minecraftVersion: '1.21.1',
|
||
|
|
modLoader: 'NeoForge',
|
||
|
|
modLoaderVersion: '21.1.213',
|
||
|
|
changelog: `### 새로운 기능
|
||
|
|
- Create 모드 추가
|
||
|
|
- JEI (Just Enough Items) 추가
|
||
|
|
- Jade 모드 추가
|
||
|
|
|
||
|
|
### 버그 수정
|
||
|
|
- 일부 텍스처 누락 문제 해결`,
|
||
|
|
fileSize: 15728640, // 15MB
|
||
|
|
downloadCount: 42,
|
||
|
|
createdAt: '2024-12-20T10:30:00Z',
|
||
|
|
contents: {
|
||
|
|
mods: [
|
||
|
|
{ name: 'Create', version: '0.5.1' },
|
||
|
|
{ name: 'Just Enough Items', version: '15.2.0' },
|
||
|
|
{ name: 'Jade', version: '11.7.1' },
|
||
|
|
{ name: 'JourneyMap', version: '5.9.18' },
|
||
|
|
{ name: 'Sodium', version: '0.5.8' },
|
||
|
|
],
|
||
|
|
resourcepacks: [
|
||
|
|
{ name: 'Faithful 32x', version: '1.21' },
|
||
|
|
],
|
||
|
|
shaderpacks: [
|
||
|
|
{ name: 'Complementary Shaders', version: '5.2.1' },
|
||
|
|
{ name: 'BSL Shaders', version: '8.2.09' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
version: '1.1.0',
|
||
|
|
name: '테스트 서버 모드팩',
|
||
|
|
minecraftVersion: '1.21.1',
|
||
|
|
modLoader: 'NeoForge',
|
||
|
|
modLoaderVersion: '21.1.200',
|
||
|
|
changelog: `### 변경사항
|
||
|
|
- JourneyMap 추가
|
||
|
|
- Sodium 성능 모드 추가`,
|
||
|
|
fileSize: 12582912, // 12MB
|
||
|
|
downloadCount: 128,
|
||
|
|
createdAt: '2024-12-15T14:00:00Z',
|
||
|
|
contents: {
|
||
|
|
mods: [
|
||
|
|
{ name: 'Just Enough Items', version: '15.1.0' },
|
||
|
|
{ name: 'JourneyMap', version: '5.9.17' },
|
||
|
|
{ name: 'Sodium', version: '0.5.7' },
|
||
|
|
],
|
||
|
|
resourcepacks: [],
|
||
|
|
shaderpacks: [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
version: '1.0.0',
|
||
|
|
name: '테스트 서버 모드팩',
|
||
|
|
minecraftVersion: '1.21.1',
|
||
|
|
modLoader: 'NeoForge',
|
||
|
|
modLoaderVersion: '21.1.180',
|
||
|
|
changelog: `### 최초 릴리즈
|
||
|
|
- 기본 모드 구성`,
|
||
|
|
fileSize: 8388608, // 8MB
|
||
|
|
downloadCount: 256,
|
||
|
|
createdAt: '2024-12-01T09:00:00Z',
|
||
|
|
contents: {
|
||
|
|
mods: [
|
||
|
|
{ name: 'Just Enough Items', version: '15.0.0' },
|
||
|
|
],
|
||
|
|
resourcepacks: [],
|
||
|
|
shaderpacks: [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// 파일 크기 포맷
|
||
|
|
const formatFileSize = (bytes) => {
|
||
|
|
if (bytes < 1024) return `${bytes} B`;
|
||
|
|
if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
|
||
|
|
if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
|
||
|
|
return `${(bytes / 1073741824).toFixed(2)} GB`;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 날짜 포맷
|
||
|
|
const formatDate = (dateString) => {
|
||
|
|
const date = new Date(dateString);
|
||
|
|
return date.toLocaleDateString('ko-KR', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 모드팩 카드 컴포넌트
|
||
|
|
const ModpackCard = ({ modpack, isLatest }) => {
|
||
|
|
const [showChangelog, setShowChangelog] = useState(isLatest);
|
||
|
|
const [showContents, setShowContents] = useState(false);
|
||
|
|
|
||
|
|
const totalMods = modpack.contents.mods.length;
|
||
|
|
const totalResourcepacks = modpack.contents.resourcepacks.length;
|
||
|
|
const totalShaderpacks = modpack.contents.shaderpacks.length;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`bg-zinc-900 border rounded-2xl overflow-hidden ${isLatest ? 'border-mc-green' : 'border-zinc-800'}`}>
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="p-5">
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className={`p-2.5 rounded-xl ${isLatest ? 'bg-mc-green/20' : 'bg-zinc-800'}`}>
|
||
|
|
<Package className={isLatest ? 'text-mc-green' : 'text-zinc-400'} size={24} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<h3 className="text-xl font-bold text-white">v{modpack.version}</h3>
|
||
|
|
{isLatest && (
|
||
|
|
<span className="px-2 py-0.5 bg-mc-green/20 text-mc-green text-xs font-medium rounded-full">
|
||
|
|
최신
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-zinc-400 mt-0.5">{modpack.name}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 다운로드 버튼 */}
|
||
|
|
<button className="flex items-center gap-2 px-4 py-2.5 bg-mc-green hover:bg-mc-green/80 text-white font-medium rounded-xl transition-colors">
|
||
|
|
<Download size={18} />
|
||
|
|
<span>다운로드</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 메타 정보 */}
|
||
|
|
<div className="flex flex-wrap gap-4 mt-4 text-sm text-zinc-400">
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<Gamepad2 size={14} />
|
||
|
|
<span>MC {modpack.minecraftVersion}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<Box size={14} />
|
||
|
|
<span>{modpack.modLoader} {modpack.modLoaderVersion}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<HardDrive size={14} />
|
||
|
|
<span>{formatFileSize(modpack.fileSize)}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1.5">
|
||
|
|
<Calendar size={14} />
|
||
|
|
<span>{formatDate(modpack.createdAt)}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 포함 콘텐츠 요약 */}
|
||
|
|
<div className="flex gap-3 mt-4">
|
||
|
|
{totalMods > 0 && (
|
||
|
|
<span className="px-2.5 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-lg">
|
||
|
|
모드 {totalMods}개
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{totalResourcepacks > 0 && (
|
||
|
|
<span className="px-2.5 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-lg">
|
||
|
|
리소스팩 {totalResourcepacks}개
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
{totalShaderpacks > 0 && (
|
||
|
|
<span className="px-2.5 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-lg">
|
||
|
|
셰이더 {totalShaderpacks}개
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 변경 로그 토글 */}
|
||
|
|
<button
|
||
|
|
onClick={() => setShowChangelog(!showChangelog)}
|
||
|
|
className="w-full flex items-center justify-between px-5 py-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-400 text-sm transition-colors border-t border-zinc-800"
|
||
|
|
>
|
||
|
|
<span>변경 로그</span>
|
||
|
|
{showChangelog ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* 변경 로그 내용 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{showChangelog && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ height: 0, opacity: 0 }}
|
||
|
|
animate={{ height: 'auto', opacity: 1 }}
|
||
|
|
exit={{ height: 0, opacity: 0 }}
|
||
|
|
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||
|
|
className="overflow-hidden"
|
||
|
|
>
|
||
|
|
<div className="px-5 py-4 bg-zinc-800/30 border-t border-zinc-800">
|
||
|
|
<div className="prose prose-sm prose-invert max-w-none">
|
||
|
|
{modpack.changelog.split('\n').map((line, i) => {
|
||
|
|
if (line.startsWith('###')) {
|
||
|
|
return <h4 key={i} className="text-white font-semibold mt-3 mb-2 text-sm">{line.replace('### ', '')}</h4>;
|
||
|
|
}
|
||
|
|
if (line.startsWith('- ')) {
|
||
|
|
return <p key={i} className="text-zinc-400 text-sm my-1 pl-3">• {line.replace('- ', '')}</p>;
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
|
||
|
|
{/* 포함 콘텐츠 토글 */}
|
||
|
|
<button
|
||
|
|
onClick={() => setShowContents(!showContents)}
|
||
|
|
className="w-full flex items-center justify-between px-5 py-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-400 text-sm transition-colors border-t border-zinc-800"
|
||
|
|
>
|
||
|
|
<span>포함된 콘텐츠</span>
|
||
|
|
{showContents ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* 포함 콘텐츠 내용 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{showContents && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ height: 0, opacity: 0 }}
|
||
|
|
animate={{ height: 'auto', opacity: 1 }}
|
||
|
|
exit={{ height: 0, opacity: 0 }}
|
||
|
|
transition={{ duration: 0.2, ease: 'easeInOut' }}
|
||
|
|
className="overflow-hidden"
|
||
|
|
>
|
||
|
|
<div className="px-5 py-4 bg-zinc-800/30 border-t border-zinc-800">
|
||
|
|
{/* 모드 */}
|
||
|
|
{modpack.contents.mods.length > 0 && (
|
||
|
|
<div className="mb-4">
|
||
|
|
<h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
|
||
|
|
<Box size={14} className="text-blue-400" />
|
||
|
|
모드
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||
|
|
{modpack.contents.mods.map((mod, i) => (
|
||
|
|
<div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
|
||
|
|
<span className="text-zinc-300 text-sm">{mod.name}</span>
|
||
|
|
<span className="text-zinc-500 text-xs">{mod.version}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 리소스팩 */}
|
||
|
|
{modpack.contents.resourcepacks.length > 0 && (
|
||
|
|
<div className="mb-4">
|
||
|
|
<h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
|
||
|
|
<Image size={14} className="text-purple-400" />
|
||
|
|
리소스팩
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||
|
|
{modpack.contents.resourcepacks.map((pack, i) => (
|
||
|
|
<div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
|
||
|
|
<span className="text-zinc-300 text-sm">{pack.name}</span>
|
||
|
|
<span className="text-zinc-500 text-xs">{pack.version}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 셰이더 */}
|
||
|
|
{modpack.contents.shaderpacks.length > 0 && (
|
||
|
|
<div>
|
||
|
|
<h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
|
||
|
|
<span className="text-orange-400">✨</span>
|
||
|
|
셰이더
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||
|
|
{modpack.contents.shaderpacks.map((shader, i) => (
|
||
|
|
<div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
|
||
|
|
<span className="text-zinc-300 text-sm">{shader.name}</span>
|
||
|
|
<span className="text-zinc-500 text-xs">{shader.version}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Modpack() {
|
||
|
|
const modpacks = DUMMY_MODPACKS;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-mc-dark p-4 sm:p-6">
|
||
|
|
<div className="max-w-4xl mx-auto">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="mb-6">
|
||
|
|
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
|
||
|
|
<Package className="text-mc-green" />
|
||
|
|
모드팩
|
||
|
|
</h1>
|
||
|
|
<p className="text-zinc-400 mt-1">서버 접속에 필요한 모드팩을 다운로드하세요</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 모드팩 목록 */}
|
||
|
|
<div className="space-y-4">
|
||
|
|
{modpacks.map((modpack, index) => (
|
||
|
|
<ModpackCard key={modpack.id} modpack={modpack} isLatest={index === 0} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 빈 상태 (모드팩이 없을 때) */}
|
||
|
|
{modpacks.length === 0 && (
|
||
|
|
<div className="text-center py-16">
|
||
|
|
<Package className="mx-auto text-zinc-600 mb-4" size={48} />
|
||
|
|
<p className="text-zinc-400">등록된 모드팩이 없습니다</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|