From a646dfd09ff6adb0503c20680eaa3f6ec393c7a9 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Wed, 5 Nov 2025 23:38:35 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=93=B1=EB=93=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/BoardPanelClient.tsx | 30 ++++++++++++-------------
 src/app/page.tsx                        |  4 ++--
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/components/BoardPanelClient.tsx b/src/app/components/BoardPanelClient.tsx
index 74f949f..f368624 100644
--- a/src/app/components/BoardPanelClient.tsx
+++ b/src/app/components/BoardPanelClient.tsx
@@ -100,9 +100,9 @@ export function BoardPanelClient({
   if (isSpecialRank && selectedBoardData.specialRankUsers) {
     return (
       <div className="h-full min-h-0 flex flex-col">
-        <div className="content-stretch flex gap-[30px] items-start w-full mb-2">
+        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
           <div className="flex items-center gap-[8px] shrink-0">
-            <div className="text-[30px] text-[#5c5c5c] leading-[30px]">{categoryName || board.name}</div>
+            <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
             <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                 <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
@@ -112,12 +112,12 @@ export function BoardPanelClient({
               </svg>
             </Link>
           </div>
-          <div className="flex items-center gap-[8px] overflow-x-auto flex-nowrap min-w-0 flex-1 no-scrollbar">
+          <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
             {siblingBoards.map((sb) => (
               <button
                 key={sb.id}
                 onClick={() => setSelectedBoardId(sb.id)}
-                className={`px-[16px] py-[8px] rounded-[14px] text-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                   }`}
               >
                 {sb.name}
@@ -125,7 +125,7 @@ export function BoardPanelClient({
             ))}
           </div>
         </div>
-        <div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
+        <div className="overflow-hidden h-full min-h-0 flex flex-col">
           <div className="flex-1 min-h-0 overflow-hidden p-0">
             <div className="px-[0px] pt-[6px] pb-[6px]">
               <div className="flex flex-col gap-[6px]">
@@ -187,9 +187,9 @@ export function BoardPanelClient({
   if (isPreview && selectedBoardData.previewPosts) {
     return (
       <div className="h-full min-h-0 flex flex-col">
-        <div className="content-stretch flex gap-[30px] items-start w-full mb-2">
+        <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
           <div className="flex items-center gap-[8px] shrink-0">
-            <div className="text-[30px] text-[#5c5c5c] leading-[30px]">{categoryName || board.name}</div>
+            <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
             <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
                 <path d="M10.25 12.5L13.25 9.5M13.25 9.5L10.25 6.5M13.25 9.5L5.75 9.5M18.5 9.5C18.5 14.4706 14.4706 18.5 9.5 18.5C4.52944 18.5 0.5 14.4706 0.5 9.5C0.5 4.52944 4.52944 0.5 9.5 0.5C14.4706 0.5 18.5 4.52944 18.5 9.5Z" stroke="#8C8C8C" strokeLinecap="round" strokeLinejoin="round" />
@@ -199,12 +199,12 @@ export function BoardPanelClient({
               </svg>
             </Link>
           </div>
-          <div className="flex items-center gap-[8px] overflow-x-auto flex-nowrap min-w-0 flex-1 no-scrollbar">
+          <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
             {siblingBoards.map((sb) => (
               <button
                 key={sb.id}
                 onClick={() => setSelectedBoardId(sb.id)}
-                className={`px-[16px] py-[8px] rounded-[14px] text-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+                className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                   }`}
               >
                 {sb.name}
@@ -212,7 +212,7 @@ export function BoardPanelClient({
             ))}
           </div>
         </div>
-        <div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
+        <div className=" overflow-hidden h-full min-h-0 flex flex-col">
           <div className="flex-1 min-h-0 overflow-hidden p-0">
             <div className="px-[0px] pt-[6px] pb-[6px]">
               <div className="flex flex-col gap-[6px]">
@@ -274,9 +274,9 @@ export function BoardPanelClient({
   // 텍스트 메인 타입 또는 기본 타입 렌더링
   return (
     <div className="h-full min-h-0 flex flex-col">
-      <div className="content-stretch flex gap-[30px] items-start w-full mb-2">
+      <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2">
         <div className="flex items-center gap-[8px] shrink-0">
-          <div className="text-[30px] text-[#5c5c5c] leading-[30px]">{categoryName || board.name}</div>
+          <div className="text-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div>
           <Link href={`/boards/${board.slug}`} aria-label={`${board.name} 게시판으로 이동`} className="shrink-0 group">
             {/* 기본 아이콘 */}
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 19" fill="none" className="block group-hover:hidden">
@@ -288,12 +288,12 @@ export function BoardPanelClient({
             </svg>
           </Link>
         </div>
-        <div className="flex items-center gap-[8px] overflow-x-auto flex-nowrap min-w-0 flex-1 no-scrollbar">
+        <div className="flex items-center gap-[6px] md:gap-[8px] flex-wrap w-full md:w-auto min-w-0 md:flex-1 md:overflow-x-auto md:flex-nowrap no-scrollbar">
           {siblingBoards.map((sb) => (
             <button
               key={sb.id}
               onClick={() => setSelectedBoardId(sb.id)}
-              className={`px-[16px] py-[8px] rounded-[14px] text-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
+              className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-[16px] md:py-[8px] md:text-[14px] md:rounded-[14px] shrink-0 cursor-pointer ${sb.id === selectedBoardId ? "bg-[#5c5c5c] text-white border border-[#5c5c5c]" : "bg-white text-[#5c5c5c] border border-[#d5d5d5] hover:bg-[#5c5c5c] hover:text-white hover:border-[#5c5c5c] transition-colors"
                 }`}
             >
               {sb.name}
@@ -301,7 +301,7 @@ export function BoardPanelClient({
           ))}
         </div>
       </div>
-      <div className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col bg-white">
+      <div className=" overflow-hidden h-full min-h-0 flex flex-col bg-white">
         {!isTextMain && (
           <div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
             <Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2b045cc..86be0a3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -315,7 +315,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
               </div>
             </div>
             {(await Promise.all(firstTwo.map((b) => prepareBoardPanelData(b)))).map((panelData, idx) => (
-              <div key={firstTwo[idx].id} className="rounded-xl overflow-hidden xl:h-[514px] h-full min-h-0 flex flex-col flex-1">
+              <div key={firstTwo[idx].id} className="overflow-hidden xl:h-[514px] h-full min-h-0 flex flex-col flex-1">
                 <BoardPanelClient initialBoardId={panelData.initialBoardId} boardsData={panelData.boardsData} />
               </div>
             ))}
@@ -332,7 +332,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
               <section key={`rest-${i}`} className="min-h-[395px] md:h-[540px] overflow-hidden">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full min-h-0">
                   {(await Promise.all(pair.map((b) => prepareBoardPanelData(b)))).map((panelData, idx) => (
-                    <div key={pair[idx].id} className="rounded-xl overflow-hidden h-full min-h-0 flex flex-col">
+                    <div key={pair[idx].id} className="overflow-hidden h-full min-h-0 flex flex-col">
                       <BoardPanelClient initialBoardId={panelData.initialBoardId} boardsData={panelData.boardsData} />
                     </div>
                   ))}