From 119988f7649146a2dc5f1f1b72b5b60449ce2750 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 24 Dec 2025 16:53:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=9C=ED=8C=A9=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20UI=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 다운로드 버튼 모바일에서 전체 너비로 표시
- 헤더 레이아웃을 세로 배치로 변경
- 메타 정보 및 태그 줄바꿈 허용
---
 frontend/src/pages/Modpack.jsx | 55 +++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/Modpack.jsx b/frontend/src/pages/Modpack.jsx
index 947fda8..11f4851 100644
--- a/frontend/src/pages/Modpack.jsx
+++ b/frontend/src/pages/Modpack.jsx
@@ -37,43 +37,42 @@ const ModpackCard = ({ modpack, isLatest }) => {
     <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 className="flex items-center gap-3 mb-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 className="flex-1 min-w-0">
+            <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 truncate">{modpack.name}</p>
           </div>
-          
-          {/* 다운로드 버튼 */}
-          <a 
-            href={`/api/modpacks/${modpack.id}/download`}
-            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>
-          </a>
         </div>
+        
+        {/* 다운로드 버튼 - 모바일에서 전체 너비 */}
+        <a 
+          href={`/api/modpacks/${modpack.id}/download`}
+          className="flex items-center justify-center gap-2 w-full sm:w-auto 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>
+        </a>
 
         {/* 메타 정보 */}
-        <div className="flex flex-wrap gap-4 mt-4 text-sm text-zinc-400">
+        <div className="flex flex-wrap gap-x-4 gap-y-2 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>
+            <span>{modpack.modLoader}</span>
           </div>
           <div className="flex items-center gap-1.5">
             <HardDrive size={14} />
@@ -86,7 +85,7 @@ const ModpackCard = ({ modpack, isLatest }) => {
         </div>
 
         {/* 포함 콘텐츠 요약 */}
-        <div className="flex gap-3 mt-4">
+        <div className="flex flex-wrap gap-2 mt-4">
           {totalMods > 0 && (
             <span className="px-2.5 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-lg">
               모드 {totalMods}개