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

Compare commits

base: motaju:2d722a89c790b6547b458fbd87911327382d90ce
Branches Tags
motaju:main
..
compare: motaju:1fb859fdf99b8efd249110b9601ac333b00e85df
Branches Tags
motaju:main

2 Commits
2d722a89c7 ... 1fb859fdf9

Author SHA1 Message Date
koreacomp5
1fb859fdf9 메인화면 게시글 뷰 컨테이너 라디우스
All checks were successful
deploy-on-main / deploy (push) Successful in 27s
Details
2025-11-06 00:04:40 +09:00
koreacomp5
e91085b4ed 메인 게시판뷰 디자인 디테일 2025-11-06 00:02:13 +09:00
1 changed files with 13 additions and 13 deletions
Expand all files Collapse all files

26
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 flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2"> <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl: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-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div> <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl: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-[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"> <div className="flex items-center gap-[6px] md:gap-[6px] 2xl: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-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" className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl: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}
@@ -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 flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2"> <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] lg: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-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div> <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] lg:text-[30px] lg: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-[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"> <div className="flex items-center gap-[6px] md:gap-[6px] lg: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-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" className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] lg:px-[16px] lg:py-[8px] lg:text-[14px] lg: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}
@@ -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 flex-col md:flex-row gap-[8px] md:gap-[30px] items-start w-full mb-2"> <div className="content-stretch flex flex-col md:flex-row gap-[8px] md:gap-[16px] 2xl: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-[20px] leading-[20px] md:text-[30px] md:leading-[30px] text-[#5c5c5c]">{categoryName || board.name}</div> <div className="text-[20px] leading-[20px] md:text-[24px] md:leading-[24px] 2xl:text-[30px] 2xl: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-[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"> <div className="flex items-center gap-[6px] md:gap-[6px] 2xl: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-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" className={`px-3 py-1.5 text-[12px] rounded-[12px] md:px-3.5 md:py-[6px] md:text-[13px] md:rounded-[12px] 2xl:px-[16px] 2xl:py-[8px] 2xl:text-[14px] 2xl: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=" overflow-hidden h-full min-h-0 flex flex-col bg-white"> <div className="rounded-xl 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>