[DP-402] 네이버 로고 여백 변경

app/(main)/test-logos/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { SourceLogo } from "@/components/features/home/SourceLogo";
+
+const SOURCES = [
+  "velog",
+  "naver_d2",
+  "kakao_tech",
+  "toss_tech",
+  "oliveyoung_tech",
+  "stack overflow",
+  "medium",
+  "우아한형제들",
+  "unknown_source",
+];
+
+export default function TestLogosPage() {
+  return (
+    <div className="mx-auto max-w-xl px-6 py-10">
+      <h1 className="mb-8 text-xl font-bold">SourceLogo 테스트</h1>
+
+      {/* size=17 — FeedCard */}
+      <section className="mb-10">
+        <p className="mb-4 text-sm font-semibold text-muted-foreground">
+          size=17 (FeedCard 배지)
+        </p>
+        <div className="flex flex-col gap-4">
+          {SOURCES.map((name) => (
+            <div key={name} className="flex items-center gap-3">
+              <SourceLogo sourceName={name} size={17} />
+              <span className="text-sm text-foreground">{name}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* size=20 — 검색 아코디언 */}
+      <section className="mb-10">
+        <p className="mb-4 text-sm font-semibold text-muted-foreground">
+          size=20 (검색 결과 아코디언)
+        </p>
+        <div className="flex flex-col gap-4">
+          {SOURCES.map((name) => (
+            <div key={name} className="flex items-center gap-3">
+              <SourceLogo sourceName={name} size={20} />
+              <span className="text-sm text-foreground">{name}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

components/features/home/SourceLogo.tsx

@@ -13,8 +13,12 @@ type LogoConfig = {
 
 const SOURCE_LOGO: Record<string, LogoConfig> = {
   velog: { src: "/icons/sources/velog.svg" },
-  naver_d2: { src: "/icons/sources/naver.svg", bg: "#03C75A", innerPadding: 2 },
-  kakao_tech: { src: "/icons/sources/kakao.svg", bg: "#FEE500", innerPadding: 2 },
+  naver_d2: { src: "/icons/sources/naver.svg", bg: "#03C75A", innerPadding: 5 },
+  kakao_tech: {
+    src: "/icons/sources/kakao.svg",
+    bg: "#FEE500",
+    innerPadding: 2,
+  },
   toss_tech: { src: "/icons/sources/toss.png" },
   oliveyoung_tech: { src: "/icons/sources/oliveyoung.svg" },
 };
@@ -61,7 +65,11 @@ export function SourceLogo({ sourceName, size = 17 }: SourceLogoProps) {
   return (
     <span
       className="flex shrink-0 items-center justify-center rounded-full bg-muted text-[9px] font-bold text-muted-foreground"
-      style={{ width: size, height: size, minWidth: size }}
+      style={{
+        width: size,
+        height: size,
+        minWidth: size,
+      }}
     >
       {sourceName.charAt(0).toUpperCase()}
     </span>

lib/mock/home-search-results.ts

@@ -166,6 +166,28 @@ const MOCK_SEARCH_RESULTS: SearchResultItem[] = [
     tags: ["React", "Zustand", "Frontend", "State"],
     url: "/home/sr-015",
   },
+  {
+    id: "sr-016",
+    title: "Why is my JavaScript async function not returning the expected value?",
+    sourceName: "stack overflow",
+    publishedAt: "2026-03-30",
+    thumbnailUrl: null,
+    summary:
+      "A deep dive into how async/await works under the hood and why returning a value from an async function always wraps it in a Promise. Top-voted answers explain the event loop and common pitfalls.",
+    tags: ["JavaScript", "Async", "Frontend"],
+    url: "/home/sr-016",
+  },
+  {
+    id: "sr-017",
+    title: "The Pragmatic Engineer's Guide to System Design in 2026",
+    sourceName: "medium",
+    publishedAt: "2026-03-28",
+    thumbnailUrl: null,
+    summary:
+      "A practical walkthrough of system design principles covering scalability, availability, and consistency trade-offs. Includes real-world examples from distributed systems at scale.",
+    tags: ["SystemDesign", "Backend", "Architecture"],
+    url: "/home/sr-017",
+  },
 ];
 
 export function searchMockResults(query: string): SearchResultItem[] {