From 12044587c952a7a2cc609213596d3252f37ea6ba Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Wed, 5 Nov 2025 21:07:49 +0900
Subject: [PATCH] homework1

---
 src/app/components/BoardPanelClient.tsx | 45 ++++++++++++++++++-------
 src/app/components/HeroBanner.tsx       |  4 +--
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/app/components/BoardPanelClient.tsx b/src/app/components/BoardPanelClient.tsx
index d9cb16d..f338646 100644
--- a/src/app/components/BoardPanelClient.tsx
+++ b/src/app/components/BoardPanelClient.tsx
@@ -56,6 +56,13 @@ export function BoardPanelClient({
   const selectedBoardData = boardsData.find(bd => bd.board.id === selectedBoardId) || boardsData[0];
   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) {
     const date = new Date(d);
     const yyyy = date.getFullYear();
@@ -103,7 +110,7 @@ export function BoardPanelClient({
                 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]"
+                  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}
@@ -178,8 +185,8 @@ export function BoardPanelClient({
               <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]"
+              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"
                 }`}
               >
                 {sb.name}
@@ -216,8 +223,14 @@ export function BoardPanelClient({
                           </div>
                           <div className="flex items-center gap-[4px] overflow-hidden">
                             <div className="relative w-[16px] h-[16px] shrink-0">
-                              <div className="absolute inset-0 rounded-full bg-[#f45f00] opacity-0" />
-                              <div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
+                              {isNewWithin1Hour(post.createdAt) && (
+                                <>
+                                  <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>
                             <span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate">{stripHtml(post.title)}</span>
                             {(post.stat?.commentsCount ?? 0) > 0 && (
@@ -255,7 +268,7 @@ export function BoardPanelClient({
               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]"
+                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}
@@ -264,10 +277,12 @@ export function BoardPanelClient({
         </div>
       </div>
       <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">
-          <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-xs px-3 py-1 rounded-full border border-neutral-300 text-neutral-700 hover:bg-neutral-100">더보기</Link>
-        </div>
+        {!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>
+            <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">
           {isTextMain && selectedBoardData.textPosts ? (
             <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">
                       <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="absolute inset-0 rounded-full bg-[#f45f00] opacity-0" />
-                          <div className="absolute inset-0 flex items-center justify-center text-[10px] text-white font-extrabold select-none">n</div>
+                          {isNewWithin1Hour(p.createdAt) && (
+                            <>
+                              <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>
                         <span className="text-[16px] leading-[22px] text-[#5c5c5c] truncate max-w-[calc(100vw-280px)]">{stripHtml(p.title)}</span>
                         {(p.stat?.commentsCount ?? 0) > 0 && (
diff --git a/src/app/components/HeroBanner.tsx b/src/app/components/HeroBanner.tsx
index 6b58cab..94a871b 100644
--- a/src/app/components/HeroBanner.tsx
+++ b/src/app/components/HeroBanner.tsx
@@ -88,7 +88,7 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
                   className={
                     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-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}
@@ -161,7 +161,7 @@ export function HeroBanner({ subItems, activeSubId, hideSubOnMobile }: { subItem
                 className={
                   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-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}