motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인화면 모바일 등등
All checks were successful
deploy-on-main / deploy (push) Successful in 28s
Details

Browse Source
This commit is contained in:
koreacomp5
2025-11-05 23:38:35 +09:00
parent 4d1e7343c3
commit a646dfd09f
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/components/BoardPanelClient.tsx
View File

@@ -100,9 +100,9 @@ export function BoardPanelClient({
if (isSpecialRank && selectedBoardData.specialRankUsers) { if (isSpecialRank && selectedBoardData.specialRankUsers) {
return ( return (
<div className="h-full min-h-0 flex flex-col"> <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="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"> <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"> <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" /> <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> </svg>
</Link> </Link>
</div> </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) => ( {siblingBoards.map((sb) => (
<button <button
key={sb.id} key={sb.id}
onClick={() => setSelectedBoardId(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} {sb.name}
@@ -125,7 +125,7 @@ export function BoardPanelClient({
))} ))}
</div> </div>
</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="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[0px] pt-[6px] pb-[6px]"> <div className="px-[0px] pt-[6px] pb-[6px]">
<div className="flex flex-col gap-[6px]"> <div className="flex flex-col gap-[6px]">
@@ -187,9 +187,9 @@ export function BoardPanelClient({
if (isPreview && selectedBoardData.previewPosts) { if (isPreview && selectedBoardData.previewPosts) {
return ( return (
<div className="h-full min-h-0 flex flex-col"> <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="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"> <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"> <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" /> <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> </svg>
</Link> </Link>
</div> </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) => ( {siblingBoards.map((sb) => (
<button <button
key={sb.id} key={sb.id}
onClick={() => setSelectedBoardId(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} {sb.name}
@@ -212,7 +212,7 @@ export function BoardPanelClient({
))} ))}
</div> </div>
</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="flex-1 min-h-0 overflow-hidden p-0">
<div className="px-[0px] pt-[6px] pb-[6px]"> <div className="px-[0px] pt-[6px] pb-[6px]">
<div className="flex flex-col gap-[6px]"> <div className="flex flex-col gap-[6px]">
@@ -274,9 +274,9 @@ export function BoardPanelClient({
// 텍스트 메인 타입 또는 기본 타입 렌더링 // 텍스트 메인 타입 또는 기본 타입 렌더링
return ( return (
<div className="h-full min-h-0 flex flex-col"> <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="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"> <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"> <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> </svg>
</Link> </Link>
</div> </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) => ( {siblingBoards.map((sb) => (
<button <button
key={sb.id} key={sb.id}
onClick={() => setSelectedBoardId(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} {sb.name}
@@ -301,7 +301,7 @@ export function BoardPanelClient({
))} ))}
</div> </div>
</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 && ( {!isTextMain && (
<div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between"> <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> <Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>

4
src/app/page.tsx
View File

@@ -315,7 +315,7 @@ export default async function Home({ searchParams }: { searchParams: Promise<{ s
</div> </div>
</div> </div>
{(await Promise.all(firstTwo.map((b) => prepareBoardPanelData(b)))).map((panelData, idx) => ( {(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} /> <BoardPanelClient initialBoardId={panelData.initialBoardId} boardsData={panelData.boardsData} />
</div> </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"> <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"> <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) => ( {(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} /> <BoardPanelClient initialBoardId={panelData.initialBoardId} boardsData={panelData.boardsData} />
</div> </div>
))} ))}