메인 페이지에 최근글 사이드바 추가

🤖 1042 in / 764 out / 1806 total tokens

메인 페이지에 최근글 사이드바를 추가해 2단 레이아웃을 구성했다. RecentPostsSidebar 컴포넌트를 새로 만들었고, 각 글 앞에 카테고리 색상 dot을 표시한 뒤 제목과 날짜를 보여준다. PostList에 bare prop을 추가해 사이드바 옆에서는 불필요한 wrapper 스타일이 적용되지 않도록 했다. 사이드바는 lg(1024px) 이상에서만 노출되어 모바일에서는 기존과 동일한 싱글 컬럼 레이아웃을 유지한다.

export const RecentPostsSidebar = ({ posts, title }: RecentPostsSidebarProps) => {
  if (posts.length === 0) return null;
 
  return (
    <aside className="hidden lg:block w-64 shrink-0">
      <h3 className="text-sm font-medium text-text-secondary mb-4">
        {title}
      </h3>
      <ul className="space-y-3">
        {posts.slice(0, 5).map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <span className={categoryDot[post.category]} />
              <span>{post.title}</span>
              <span>{post.date}</span>
            </Link>
          </li>
        ))}
      </ul>
    </aside>
  );
};

bare prop 하나로 컴포넌트 재사용성이 확 올라갔다. 간단한 변경이지만 레이아웃 유연해졌다.

nextjs react layout sidebar i18n