feat: 홈 API 연동 및 인증/캐러셀 개선

.claude/settings.local.json

@@ -3,7 +3,8 @@
     "allow": [
       "Bash(gh pr view:*)",
       "Bash(gh api:*)",
-      "Bash(npm run lint)"
+      "Bash(npm run lint)",
+      "mcp__ide__getDiagnostics"
     ]
   }
 }

auth.ts

@@ -6,6 +6,61 @@ import { TokenRefreshReqDto, TokenRefreshResDto } from '@/types/domain/auth';
 import { ApiResponse } from '@/types/common';
 
 const TOKEN_REFRESH_BUFFER = 60 * 1000;
+const REDACTED = '[REDACTED]';
+const SENSITIVE_TOKEN_KEYS = new Set([
+  'accessToken',
+  'refreshToken',
+  'access_token',
+  'refresh_token',
+  'id_token',
+  'token',
+  'email',
+  'password',
+  'username',
+]);
+
+function maskSensitiveUrl(url: string): string {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.searchParams.has('code')) {
+      parsedUrl.searchParams.set('code', REDACTED);
+    }
+    return parsedUrl.toString();
+  } catch {
+    return url.replace(/([?&]code=)[^&]*/i, `$1${REDACTED}`);
+  }
+}
+
+function maskTokenField(value: unknown): string {
+  if (typeof value !== 'string') return REDACTED;
+  if (value.length <= 10) return REDACTED;
+  return `${value.slice(0, 4)}...${value.slice(-4)}`;
+}
+
+function sanitizeLogData(value: unknown, seen = new WeakSet<object>): unknown {
+  if (Array.isArray(value)) {
+    return value.map((entry) => sanitizeLogData(entry, seen));
+  }
+
+  if (value && typeof value === 'object') {
+    if (seen.has(value as object)) {
+      return '[Circular]';
+    }
+    seen.add(value as object);
+
+    return Object.entries(value as Record<string, unknown>).reduce(
+      (acc, [key, entryValue]) => {
+        acc[key] = SENSITIVE_TOKEN_KEYS.has(key)
+          ? maskTokenField(entryValue)
+          : sanitizeLogData(entryValue, seen);
+        return acc;
+      },
+      {} as Record<string, unknown>,
+    );
+  }
+
+  return value;
+}
 
 async function refreshAccessToken(token: JWT): Promise<JWT | null> {
   try {
@@ -58,21 +113,35 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
         if (!parsed.success) return null;
         const { provider, code } = parsed.data;
 
-        const backendUrl = `${process.env.BACKEND_API_URL}/auth/oauth/${provider}?code=${code}`;
-        console.log(backendUrl);
+        const backendUrl = `${process.env.BACKEND_API_URL}/auth/oauth/${provider}?code=${encodeURIComponent(code)}`;
+        const method = provider === 'google' ? 'GET' : 'POST';
+        console.log(
+          `[${provider}] OAuth Request:`,
+          method,
+          maskSensitiveUrl(backendUrl),
+        );
+
         try {
+          // Google uses GET, Kakao uses POST
           const res = await fetch(backendUrl, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
+            method,
+            ...(method === 'POST' && {
+              headers: { 'Content-Type': 'application/json' },
+            }),
           });
 
+          console.log(`[${provider}] Response status:`, res.status);
+
           if (!res.ok) {
             const error = await res.json();
-            console.log(error);
+            console.error(
+              `[${provider}] Backend error:`,
+              sanitizeLogData(error),
+            );
             throw new Error('Backend verification failed');
           }
           const { data } = await res.json();
-          console.log(data);
+          console.log(`[${provider}] Success data:`, sanitizeLogData(data));
 
           return {
             userId: data.userId,
@@ -115,7 +184,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
 
           if (!res.ok) throw new Error('Invalid credentials');
           const { data } = await res.json();
-          console.log(data);
+          console.log('Credentials login success:', sanitizeLogData(data));
 
           return {
             userId: data.userId,
@@ -148,6 +217,11 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
         };
       }
 
+      // Only attempt refresh if we have a refresh token (user is logged in)
+      if (!token.refreshToken) {
+        return token;
+      }
+
       if (Date.now() < (token.accessTokenExpires ?? 0) - TOKEN_REFRESH_BUFFER) {
         return token;
       }

next.config.ts

@@ -16,6 +16,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'example.com', // TODO: 실제 API 이미지 호스트로 교체 필요
       },
+      {
+        protocol: 'https',
+        hostname: 'ongil-bucket.s3.ap-northeast-2.amazonaws.com', // 광고 이미지 S3 버킷
+      },
       {
         protocol: 'http',
         hostname: 'img1.kakaocdn.net', // 카카오 프로필 이미지 호스팅

src/app/page.tsx

@@ -1,46 +1,60 @@
-import { CarouselWithDots } from '@/components/banner-carousel';
-import {
-  RecommendedCategoryCard,
-  RecommendCarousel,
-  RecommendCarouselItem,
-  RecommendedProductCard,
-} from '@/components/recommend-carousel';
-import { MAIN_CATEGORIES } from '@/mocks/categories';
+import BannerCarouselContainer from '@/components/banner-carousel';
 import MainHeader from '@/components/layout/main-header';
 import MainNavBar from '@/components/layout/main-nav-bar';
-
-import { BRANDS, MOCK_PRODUCTS } from '@/mocks/brands-and-products';
 import RecommendedBrandContainer from '@/components/recommend-brand/recommended-brand-container';
 import RecommendCategoryContainer from '@/components/recommend-carousel/recommend-category-container';
 import { Suspense } from 'react';
-// import { api } from '@/lib/api-client';
-// import { Advertisement } from '@/types/domain/etc';
-// import { Category } from '@/types/domain/category';
+import RecommendProductContainer from '@/components/recommend-carousel/recommend-product-container';
 
 export default async function Home() {
-  const p1 = MOCK_PRODUCTS.slice(0, 6);
-  const p2 = MOCK_PRODUCTS.slice(6, 12);
-  const p3 = MOCK_PRODUCTS.slice(12, 18);
-  // TODO: 카테고리 데이터를 UI에 연결
-  // const categories = await api.get<Category[]>('/categories');
-
   return (
     <div className="flex flex-col items-center">
       <MainHeader />
 
-      <CarouselWithDots />
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense
+        fallback={
+          <div className="h-[420px] w-full animate-pulse bg-gray-100 md:h-[520px]" />
+        }
+      >
+        <BannerCarouselContainer />
+      </Suspense>
+      <Suspense
+        fallback={
+          <div className="h-[120px] w-full animate-pulse bg-gray-50 px-5 py-4" />
+        }
+      >
         <RecommendCategoryContainer />
       </Suspense>
-      <RecommendCarousel heading="추천 상품">
-        {MOCK_PRODUCTS.map((product) => (
-          <RecommendCarouselItem key={product.id}>
-            <RecommendedProductCard productInfo={product} />
-          </RecommendCarouselItem>
-        ))}
-      </RecommendCarousel>
 
-      <RecommendedBrandContainer brands={BRANDS} productLists={[p1, p2, p3]} />
+      <Suspense
+        fallback={
+          <div className="h-[360px] w-full animate-pulse bg-gray-50 px-5 py-4" />
+        }
+      >
+        <RecommendProductContainer
+          endpoint="/products/special-sale"
+          heading="특가 상품"
+        />
+      </Suspense>
+
+      <Suspense
+        fallback={
+          <div className="h-[360px] w-full animate-pulse bg-gray-50 px-5 py-4" />
+        }
+      >
+        <RecommendProductContainer
+          endpoint="/products/recommend"
+          heading="추천 상품"
+        />
+      </Suspense>
+
+      <Suspense
+        fallback={
+          <div className="h-[460px] w-full animate-pulse bg-gray-50 px-5 py-4" />
+        }
+      >
+        <RecommendedBrandContainer />
+      </Suspense>
 
       <MainNavBar />
     </div>

src/components/banner-carousel/banner-carousel-container.tsx

@@ -0,0 +1,9 @@
+import { api } from '@/lib/api-client';
+import { Advertisement } from '@/types/domain/advertisement';
+import CarouselWithDots from './carousel-with-dots';
+
+export default async function BannerCarouselContainer() {
+  const advertisements = await api.get<Advertisement[]>('/advertisements/home');
+
+  return <CarouselWithDots advertisements={advertisements} />;
+}

src/components/banner-carousel/carousel-with-dots.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from '@/components/ui/carousel';
+import { useCarouselDots } from './use-carousel-dots';
+import { DotNavigation } from './dot-navigation';
+import Autoplay from 'embla-carousel-autoplay';
+import { Advertisement } from '@/types/domain/advertisement';
+
+interface CarouselWithDotsProps {
+  advertisements: Advertisement[];
+}
+
+export default function CarouselWithDots({
+  advertisements,
+}: CarouselWithDotsProps) {
+  if (advertisements.length === 0) return null;
+
+  const [api, setApi] = useState<CarouselApi>();
+  const { current, count, scrollTo } = useCarouselDots(api);
+
+  return (
+    <div
+      className="w-screen max-w-200"
+      role="region"
+      aria-roledescription="carousel"
+      aria-label="배너 광고"
+    >
+      <Carousel
+        setApi={setApi}
+        opts={{
+          loop: true,
+        }}
+        plugins={[
+          Autoplay({
+            delay: 3000,
+            stopOnInteraction: false,
+          }),
+        ]}
+      >
+        <CarouselContent className="m-0 max-h-125 w-full">
+          {advertisements.map((item, index) => (
+            <CarouselItem key={item.id} className="p-0">
+              <div className="relative aspect-380/275 h-full w-full overflow-hidden">
+                <Image
+                  src={item.imageUrl}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                  priority={index === 0}
+                  sizes="(max-width: 800px) 100vw, 800px"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
+                  <h3 className="mb-2 text-2xl font-black break-keep">
+                    {item.title}
+                  </h3>
+                  <p className="text-lg font-medium break-keep opacity-90">
+                    {item.description}
+                  </p>
+                </div>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <DotNavigation count={count} current={current} onDotClick={scrollTo} />
+    </div>
+  );
+}