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

homework1

Browse Source
This commit is contained in:
koreacomp5
2025-11-05 21:07:49 +09:00
parent ecf2dab35c
commit 12044587c9
2 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,6 +56,13 @@ export function BoardPanelClient({
const selectedBoardData = boardsData.find(bd => bd.board.id === selectedBoardId) || boardsData[0]; const selectedBoardData = boardsData.find(bd => bd.board.id === selectedBoardId) || boardsData[0];
const { board, categoryName, siblingBoards } = selectedBoardData; const { board, categoryName, siblingBoards } = selectedBoardData;
const isNewWithin1Hour = (createdAt: Date | string | number | null | undefined): boolean => {
if (!createdAt) return false;
const t = new Date(createdAt).getTime();
if (Number.isNaN(t)) return false;
return (Date.now() - t) <= 60 * 60 * 1000;
};
function formatDateYmd(d: Date) { function formatDateYmd(d: Date) {
const date = new Date(d); const date = new Date(d);
const yyyy = date.getFullYear(); const yyyy = date.getFullYear();
@@ -103,7 +110,7 @@ export function BoardPanelClient({
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 ${ 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]" 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}
@@ -178,8 +185,8 @@ export function BoardPanelClient({
<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 ${ 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]" 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}
@@ -216,8 +223,14 @@ export function BoardPanelClient({
</div> </div>
<div className="flex items-center gap-[4px] overflow-hidden"> <div className="flex items-center gap-[4px] overflow-hidden">
<div className="relative w-[16px] h-[16px] shrink-0"> <div className="relative w-[16px] h-[16px] shrink-0">
<div className="absolute inset-0 rounded-full bg-[#f45f00] opacity-0" /> {isNewWithin1Hour(post.createdAt) && (
<div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div> <>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fillRule="evenodd" clipRule="evenodd" d="M1 8C1 4.5691 4.26184 2 8 2C11.7382 2 15 4.5691 15 8C15 11.4309 11.7382 14 8 14C7.57698 14 7.16215 13.9679 6.7588 13.9061C5.85852 14.4801 4.81757 14.8544 3.6995 14.9654C3.41604 14.9936 3.1411 14.8587 2.98983 14.6174C2.83857 14.376 2.83711 14.0698 2.98605 13.8269C3.21838 13.4482 3.38055 13.0221 3.45459 12.5659C1.97915 11.4858 1 9.86014 1 8Z" fill="#F45F00"/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
</>
)}
</div> </div>
<span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate">{stripHtml(post.title)}</span> <span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate">{stripHtml(post.title)}</span>
{(post.stat?.commentsCount ?? 0) > 0 && ( {(post.stat?.commentsCount ?? 0) > 0 && (
@@ -255,7 +268,7 @@ export function BoardPanelClient({
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 ${ 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]" 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}
@@ -264,10 +277,12 @@ 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="rounded-xl overflow-hidden h-full min-h-0 flex flex-col bg-white">
<div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between"> {!isTextMain && (
<Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link> <div className="px-3 py-2 border-b border-neutral-200 flex items-center justify-between">
<Link href={`/boards/${board.slug}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link> <Link href={`/boards/${board.slug}`} className="text-lg md:text-xl font-bold text-neutral-800 truncate">{board.name}</Link>
</div> <Link href={`/boards/${board.slug}`} className="text-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
</div>
)}
<div className="flex-1 min-h-0 overflow-hidden p-0"> <div className="flex-1 min-h-0 overflow-hidden p-0">
{isTextMain && selectedBoardData.textPosts ? ( {isTextMain && selectedBoardData.textPosts ? (
<div className="bg-white px-[24px] pt-[8px] pb-[16px]"> <div className="bg-white px-[24px] pt-[8px] pb-[16px]">
@@ -277,8 +292,14 @@ export function BoardPanelClient({
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<Link href={`/posts/${p.id}`} className="flex items-center gap-[4px] h-[24px] overflow-hidden flex-1 min-w-0"> <Link href={`/posts/${p.id}`} className="flex items-center gap-[4px] h-[24px] overflow-hidden flex-1 min-w-0">
<div className="relative w-[16px] h-[16px] shrink-0"> <div className="relative w-[16px] h-[16px] shrink-0">
<div className="absolute inset-0 rounded-full bg-[#f45f00] opacity-0" /> {isNewWithin1Hour(p.createdAt) && (
<div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div> <>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fillRule="evenodd" clipRule="evenodd" d="M1 8C1 4.5691 4.26184 2 8 2C11.7382 2 15 4.5691 15 8C15 11.4309 11.7382 14 8 14C7.57698 14 7.16215 13.9679 6.7588 13.9061C5.85852 14.4801 4.81757 14.8544 3.6995 14.9654C3.41604 14.9936 3.1411 14.8587 2.98983 14.6174C2.83857 14.376 2.83711 14.0698 2.98605 13.8269C3.21838 13.4482 3.38055 13.0221 3.45459 12.5659C1.97915 11.4858 1 9.86014 1 8Z" fill="#F45F00"/>
</svg>
<div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
</>
)}
</div> </div>
<span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate max-w-[calc(100vw-280px)]">{stripHtml(p.title)}</span> <span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate max-w-[calc(100vw-280px)]">{stripHtml(p.title)}</span>
{(p.stat?.commentsCount ?? 0) > 0 && ( {(p.stat?.commentsCount ?? 0) > 0 && (

4
src/app/components/HeroBanner.tsx
View File

@@ -88,7 +88,7 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
className={ className={
s.id === activeSubId s.id === activeSubId
? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap" ? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap"
: "px-3 h-[28px] rounded-full bg-transparent text-white/85 hover:text-white border border-white/30 text-[12px] leading-[28px] whitespace-nowrap" : "px-3 h-[28px] rounded-full bg-transparent text-white/85 hover:bg-[#F94B37] hover:text-white text-[12px] leading-[28px] whitespace-nowrap"
} }
> >
{s.name} {s.name}
@@ -161,7 +161,7 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
className={ className={
s.id === activeSubId s.id === activeSubId
? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap" ? "px-3 h-[28px] rounded-full bg-[#F94B37] text-white text-[12px] leading-[28px] whitespace-nowrap"
: "px-3 h-[28px] rounded-full bg-transparent text-white/85 hover:text-white border border-white/30 text-[12px] leading-[28px] whitespace-nowrap" : "px-3 h-[28px] rounded-full bg-transparent text-white/85 hover:bg-[#F94B37] hover:text-white text-[12px] leading-[28px] whitespace-nowrap"
} }
> >
{s.name} {s.name}