수집 블로그 소스 20개 추가 및 번역 제목 표시 수정

components/features/history/ActivityTimelineItem.tsx

@@ -33,6 +33,7 @@ export default function ActivityTimelineItem({ item, isLast }: Props) {
   const Icon = meta.icon;
   const href = getHref(item);
   const title =
+    item.content?.translatedTitle ??
     item.content?.title ??
     item.post?.title ??
     (item.actionType === "daily_login" ? "출석을 완료했어요" : null);

components/features/history/HistoryTimelineItem.tsx

@@ -36,7 +36,7 @@ export default function HistoryTimelineItem({ item, isLast }: Props) {
   const meta = ACTION_META[item.actionType];
   const Icon = meta.icon;
   const href = getHref(item);
-  const title = item.content?.title ?? item.post?.title ?? null;
+  const title = item.content?.translatedTitle ?? item.content?.title ?? item.post?.title ?? null;
   const preview = item.content?.preview ?? null;
 
   const card = (

components/features/home/RecommendedContents.tsx

@@ -25,7 +25,7 @@ export function RecommendedContents({ items }: RecommendedContentsProps) {
                   {item.thumbnailUrl ? (
                     <Image
                       src={item.thumbnailUrl}
-                      alt={item.title}
+                      alt={item.translatedTitle ?? item.title}
                       fill
                       className="object-cover"
                       sizes="288px"
@@ -40,7 +40,7 @@ export function RecommendedContents({ items }: RecommendedContentsProps) {
                 {/* 텍스트 */}
                 <div className="p-3">
                   <p className="mb-1.5 line-clamp-2 text-sm font-semibold leading-snug text-foreground">
-                    {item.title}
+                    {item.translatedTitle ?? item.title}
                   </p>
                   <span className="text-xs text-muted-foreground font-medium">
                     {item.sourceName}

components/features/home/SourceLogo.tsx

@@ -9,18 +9,63 @@ type LogoConfig = {
   src: string;
   bg?: string;
   innerPadding?: number;
+  iconColor?: string;
 };
 
 const SOURCE_LOGO: Record<string, LogoConfig> = {
   velog: { src: "/icons/sources/velog.svg" },
-  naver_d2: { src: "/icons/sources/naver.svg", bg: "#03C75A", innerPadding: 5 },
+  naver_d2: { src: "/icons/sources/naver.svg", bg: "#03C75A", innerPadding: 6 },
   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" },
+  woowahan_tech: { src: "/icons/sources/woowahan_tech.png", bg: "#FFFFFF" },
+  socar_tech: {
+    src: "/icons/sources/socar_tech.png",
+    bg: "#FFFFFF",
+    innerPadding: 2,
+  },
+  skplanet_tech: { src: "/icons/sources/skplanet_tech.svg", bg: "#FFFFFF" },
+  nongshim_cloud_tech: {
+    src: "/icons/sources/nongshim_cloud_tech.png",
+    bg: "#FFFFFF",
+    innerPadding: 2,
+  },
+  kakaopay_tech: { src: "/icons/sources/kakaopay_tech.png", bg: "#FEE500" },
+  meta_engineering: {
+    src: "/icons/sources/meta_engineering.svg",
+    bg: "#FFFFFF",
+    iconColor: "#0668E1",
+  },
+  cloudflare_blog: { src: "/icons/sources/cloudflare_blog.svg", bg: "#FFFFFF" },
+  github_blog: { src: "/icons/sources/github_blog.svg", bg: "#FFFFFF" },
+  aws_korea_tech: { src: "/icons/sources/aws_korea_tech.svg", bg: "#FFFFFF" },
+  ms_devblogs: {
+    src: "/icons/sources/ms_devblogs.svg",
+    bg: "#FFFFFF",
+    innerPadding: 2,
+  },
+  nvidia_developer: {
+    src: "/icons/sources/nvidia_developer.svg",
+    bg: "#FFFFFF",
+    iconColor: "#77B900",
+  },
+  grab_engineering: {
+    src: "/icons/sources/grab_engineering.svg",
+    bg: "#FFFFFF",
+    iconColor: "#00983A",
+  },
+  google_developers: {
+    src: "/icons/sources/google_developers.svg",
+    bg: "#FFFFFF",
+    innerPadding: 2,
+  },
+  spring_blog: { src: "/icons/sources/spring_blog.svg", bg: "#FFFFFF" },
+  flex_tech: { src: "/icons/sources/flex_tech.jpg", bg: "#FFFFFF" },
+  nextjs_blog: { src: "/icons/sources/nextjs_blog.svg", bg: "#FFFFFF" },
 };
 
 export function SourceLogo({ sourceName, size = 17 }: SourceLogoProps) {
@@ -50,14 +95,34 @@ export function SourceLogo({ sourceName, size = 17 }: SourceLogoProps) {
           padding: pad > 0 ? pad : undefined,
         }}
       >
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          src={config.src}
-          alt={sourceName}
-          width={innerSize}
-          height={innerSize}
-          style={{ objectFit: "contain", display: "block" }}
-        />
+        {config.iconColor ? (
+          <span
+            style={{
+              width: innerSize,
+              height: innerSize,
+              minWidth: innerSize,
+              display: "block",
+              backgroundColor: config.iconColor,
+              WebkitMaskImage: `url(${config.src})`,
+              maskImage: `url(${config.src})`,
+              WebkitMaskSize: "contain",
+              maskSize: "contain",
+              WebkitMaskRepeat: "no-repeat",
+              maskRepeat: "no-repeat",
+              WebkitMaskPosition: "center",
+              maskPosition: "center",
+            }}
+          />
+        ) : (
+          /* eslint-disable-next-line @next/next/no-img-element */
+          <img
+            src={config.src}
+            alt={sourceName}
+            width={innerSize}
+            height={innerSize}
+            style={{ objectFit: "contain", display: "block" }}
+          />
+        )}
       </span>
     );
   }

components/features/landing/LandingPage.tsx

@@ -311,9 +311,124 @@ const SOURCES = [
     logo: "/icons/sources/oliveyoung.svg",
     logoPadding: "p-1.5",
   },
+  {
+    name: "우아한형제들",
+    sub: "기술 블로그",
+    containerBg: "bg-white",
+    logo: "/icons/sources/woowahan_tech.png",
+    logoPadding: "",
+  },
+  {
+    name: "SOCAR Tech",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/socar_tech.png",
+    logoPadding: "p-1.5",
+  },
+  {
+    name: "SK Planet",
+    sub: "기술 블로그",
+    containerBg: "bg-white",
+    logo: "/icons/sources/skplanet_tech.svg",
+    logoPadding: "p-1",
+  },
+  {
+    name: "농심 클라우드",
+    sub: "기술 블로그",
+    containerBg: "bg-white",
+    logo: "/icons/sources/nongshim_cloud_tech.png",
+    logoPadding: "p-1.5",
+  },
+  {
+    name: "KakaoPay Tech",
+    sub: "",
+    containerBg: "bg-[#FEE500]",
+    logo: "/icons/sources/kakaopay_tech.png",
+    logoPadding: "",
+  },
+  {
+    name: "Meta Engineering",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/meta_engineering.svg",
+    logoPadding: "p-1.5",
+    iconColor: "#0668E1",
+  },
+  {
+    name: "Cloudflare",
+    sub: "Blog",
+    containerBg: "bg-white",
+    logo: "/icons/sources/cloudflare_blog.svg",
+    logoPadding: "p-1",
+  },
+  {
+    name: "GitHub Blog",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/github_blog.svg",
+    logoPadding: "p-1.5",
+  },
+  {
+    name: "AWS Korea",
+    sub: "Tech",
+    containerBg: "bg-white",
+    logo: "/icons/sources/aws_korea_tech.svg",
+    logoPadding: "p-1.5",
+  },
+  {
+    name: "Microsoft",
+    sub: "DevBlogs",
+    containerBg: "bg-white",
+    logo: "/icons/sources/ms_devblogs.svg",
+    logoPadding: "p-2",
+  },
+  {
+    name: "NVIDIA",
+    sub: "Developer",
+    containerBg: "bg-white",
+    logo: "/icons/sources/nvidia_developer.svg",
+    logoPadding: "p-1.5",
+    iconColor: "#77B900",
+  },
+  {
+    name: "Grab",
+    sub: "Engineering",
+    containerBg: "bg-white",
+    logo: "/icons/sources/grab_engineering.svg",
+    logoPadding: "p-1.5",
+    iconColor: "#00983A",
+  },
+  {
+    name: "Google Developers",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/google_developers.svg",
+    logoPadding: "p-2",
+  },
+  {
+    name: "Spring Blog",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/spring_blog.svg",
+    logoPadding: "p-2",
+  },
+  {
+    name: "Flex",
+    sub: "기술 블로그",
+    containerBg: "bg-white",
+    logo: "/icons/sources/flex_tech.jpg",
+    logoPadding: "",
+  },
+  {
+    name: "Next.js Blog",
+    sub: "",
+    containerBg: "bg-white",
+    logo: "/icons/sources/nextjs_blog.svg",
+    logoPadding: "p-2",
+  },
   {
     name: "Medium",
-    sub: "당근 · 무신사 · 마이리얼트립 · 넷플릭스",
+    sub: "당근 · 무신사 · 마이리얼트립 · 넷플릭스 · 에어비앤비 · 핀터레스트 · 여기어때 · Flutter",
     containerBg: "bg-white",
     logo: "/icons/sources/medium.svg",
     logoPadding: "",
@@ -411,12 +526,29 @@ function FeaturesSection() {
                 <div
                   className={`flex h-12 w-12 items-center justify-center overflow-hidden rounded-lg shadow-sm ${source.containerBg} ${source.logoPadding}`}
                 >
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
-                    src={source.logo}
-                    alt={source.name}
-                    className="h-full w-full object-contain"
-                  />
+                  {"iconColor" in source && source.iconColor ? (
+                    <span
+                      className="block h-full w-full"
+                      style={{
+                        backgroundColor: source.iconColor,
+                        WebkitMaskImage: `url(${source.logo})`,
+                        maskImage: `url(${source.logo})`,
+                        WebkitMaskSize: "contain",
+                        maskSize: "contain",
+                        WebkitMaskRepeat: "no-repeat",
+                        maskRepeat: "no-repeat",
+                        WebkitMaskPosition: "center",
+                        maskPosition: "center",
+                      }}
+                    />
+                  ) : (
+                    /* eslint-disable-next-line @next/next/no-img-element */
+                    <img
+                      src={source.logo}
+                      alt={source.name}
+                      className="h-full w-full object-contain"
+                    />
+                  )}
                 </div>
                 <div className="text-center">
                   <p className="text-sm font-semibold text-foreground">