메인화면 모바일 등등

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>