From 136d64382064c1b2d32f0e271d118d7d8cc54714 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Fri, 24 Oct 2025 18:42:38 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fix=20:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=AA=BB=20=EB=B6=88=EB=9F=AC=EC=98=AC=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B0=B0=EA=B2=BD=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(pages)/save/_components/course-card.tsx  | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/(pages)/save/_components/course-card.tsx b/src/app/(pages)/save/_components/course-card.tsx
index 144bda8..a14da8a 100644
--- a/src/app/(pages)/save/_components/course-card.tsx
+++ b/src/app/(pages)/save/_components/course-card.tsx
@@ -25,22 +25,28 @@ export function CourseCard({
     router.push(`/course/${crsIdx}`);
   };
 
+  // 이미지 URL 유효성 검사
+  const hasValidImage = imageUrl && imageUrl.trim() !== '';
+
   return (
     <div
       className={cn(
         'relative cursor-pointer overflow-hidden rounded-2xl transition-transform hover:scale-101',
+        !hasValidImage && 'bg-black',
         className,
       )}
       onClick={handleClick}
     >
-      <Image
-        src={imageUrl}
-        alt={title}
-        fill
-        className='h-full w-full object-cover'
-        priority
-        sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
-      />
+      {hasValidImage && (
+        <Image
+          src={imageUrl}
+          alt={title}
+          fill
+          className='h-full w-full object-cover'
+          priority
+          sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
+        />
+      )}
       <div className='absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/60 to-transparent p-4'>
         <h3 className='text-title2 text-white'>{title}</h3>
         <p className='text-body4 text-white'>{location}</p>

From 32b2785995631689b2467a9bbd800ac4783e3698 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Fri, 24 Oct 2025 18:52:57 +0900
Subject: [PATCH 2/8] =?UTF-8?q?fix=20:=20=EC=BD=94=EC=8A=A4=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(pages)/contest/[id]/_components/recommended-courses.tsx    | 2 +-
 src/app/(pages)/contest/_components/contest-card.tsx            | 2 +-
 src/app/(pages)/home/_components/course-list/course-card.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
index 9f50b72..eebd3fd 100644
--- a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
+++ b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
@@ -36,7 +36,7 @@ function ContestCourseCard({ course }: { course: Course }) {
 
       <div className='absolute inset-0 bg-gradient-to-t from-black/60 to-transparent' />
 
-      <div className='absolute bottom-4 left-4 text-white'>
+      <div className='keep absolute bottom-4 px-4 text-white'>
         <p className='text-white000 text-[18px] leading-[140%] font-bold'>
           {course.title}
         </p>
diff --git a/src/app/(pages)/contest/_components/contest-card.tsx b/src/app/(pages)/contest/_components/contest-card.tsx
index f43b9c5..ca1ed9c 100644
--- a/src/app/(pages)/contest/_components/contest-card.tsx
+++ b/src/app/(pages)/contest/_components/contest-card.tsx
@@ -29,7 +29,7 @@ export function ContestCard({
     <div
       className={cn(
         'cursor-pointer rounded-[20px] bg-white px-6 py-5 transition-transform active:scale-95',
-        'shadow-[0_4px_16px_0_rgba(158,170,181,0.20)]',
+        'mb-8 shadow-[0_4px_16px_0_rgba(158,170,181,0.20)]',
         className,
       )}
       onClick={() => onClick?.(id)}
diff --git a/src/app/(pages)/home/_components/course-list/course-card.tsx b/src/app/(pages)/home/_components/course-list/course-card.tsx
index a1cd4cd..6a3d734 100644
--- a/src/app/(pages)/home/_components/course-list/course-card.tsx
+++ b/src/app/(pages)/home/_components/course-list/course-card.tsx
@@ -40,7 +40,7 @@ export function CourseCard({
 
       <div className='absolute inset-0 bg-gradient-to-t from-black/60 to-transparent' />
 
-      <div className='absolute bottom-4 left-4 text-white'>
+      <div className='absolute bottom-4 px-4 break-keep text-white'>
         <p className='text-white000 text-[18px] leading-[140%] font-bold'>
           {title}
         </p>

From 1e4658135dea1ac3e93c347e28cb3209888568f2 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Fri, 24 Oct 2025 18:53:23 +0900
Subject: [PATCH 3/8] =?UTF-8?q?fix=20:=20=EC=BD=94=EC=8A=A4=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/course-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/course-card.tsx b/src/components/course-card.tsx
index f2531d2..4ea59e2 100644
--- a/src/components/course-card.tsx
+++ b/src/components/course-card.tsx
@@ -27,7 +27,7 @@ export default function CourseCard({
 
       <div className='absolute inset-0 bg-gradient-to-t from-black/60 to-transparent' />
 
-      <div className='absolute bottom-4 left-4 text-white'>
+      <div className='absolute bottom-4 px-4 break-keep text-white'>
         <p className='text-white000 text-[18px] leading-[140%] font-bold'>
           {title}
         </p>

From 0cb524a0bfc4da2226cb41dc892311926d63c64b Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Mon, 27 Oct 2025 05:25:02 +0900
Subject: [PATCH 4/8] =?UTF-8?q?fix=20:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=AA=BB=20=EB=B6=88=EB=9F=AC=EC=98=AC=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B0=B0=EA=B2=BD=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[id]/_components/recommended-courses.tsx  | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
index eebd3fd..ec460f2 100644
--- a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
+++ b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
@@ -22,17 +22,22 @@ function ContestCourseCard({ course }: { course: Course }) {
     }
   };
 
+  // 이미지 URL 유효성 검사
+  const hasValidImage = course.imageUrl && course.imageUrl.trim() !== '';
+
   return (
     <div
-      className='relative h-[196px] w-[168px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[20px] transition-transform hover:scale-105'
+      className={`relative h-[196px] w-[168px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[20px] transition-transform hover:scale-105 ${!hasValidImage ? 'bg-black' : ''}`}
       onClick={handleClick}
     >
-      <Image
-        src={course.imageUrl}
-        alt={`${course.title} 코스 이미지`}
-        fill
-        className='object-cover'
-      />
+      {hasValidImage && (
+        <Image
+          src={course.imageUrl}
+          alt={`${course.title} 코스 이미지`}
+          fill
+          className='object-cover'
+        />
+      )}
 
       <div className='absolute inset-0 bg-gradient-to-t from-black/60 to-transparent' />
 

From 4be9a959ee5a3624c96ca4a4fb7ba8495d6ff222 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Mon, 27 Oct 2025 05:25:34 +0900
Subject: [PATCH 5/8] =?UTF-8?q?fix=20:=20=EC=B0=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/save/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(pages)/save/page.tsx b/src/app/(pages)/save/page.tsx
index e0469de..7d2787c 100644
--- a/src/app/(pages)/save/page.tsx
+++ b/src/app/(pages)/save/page.tsx
@@ -10,8 +10,8 @@ export default async function SavePage() {
       </header>
       <div className='mt-14'>
         <SavePageContent favoriteCourses={favoriteCourses.data!} />
+        <div className='h-16' />
       </div>
-      <div className='h-25' />
     </div>
   );
 }

From e127b584e390130d082f886507c44007a3179228 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Mon, 27 Oct 2025 06:10:30 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix=20:=20=EC=BD=94=EC=8A=A4=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contest/[id]/_components/recommended-courses.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
index ec460f2..5271fe2 100644
--- a/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
+++ b/src/app/(pages)/contest/[id]/_components/recommended-courses.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
+import { cn } from '@/utils/cn';
 
 interface Course {
   id: string;
@@ -27,7 +28,10 @@ function ContestCourseCard({ course }: { course: Course }) {
 
   return (
     <div
-      className={`relative h-[196px] w-[168px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[20px] transition-transform hover:scale-105 ${!hasValidImage ? 'bg-black' : ''}`}
+      className={cn(
+        'relative h-[196px] w-[168px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[20px] transition-transform hover:scale-105',
+        !hasValidImage && 'bg-black',
+      )}
       onClick={handleClick}
     >
       {hasValidImage && (
@@ -66,9 +70,9 @@ export function RecommendedCourses({ courses }: RecommendedCoursesProps) {
       <nav className='bg-gray-0 h-2 w-full' />
       <div className='h-7' />
 
-      <div className='px-4'>
+      <div className='pl-4'>
         <h2 className='text-title2 mb-4'>같이 달리기 좋은 코스</h2>
-        <div className='scrollbar-hide flex gap-3 overflow-x-auto'>
+        <div className='scrollbar-hide flex gap-3 overflow-x-auto pr-4'>
           {courses.map(course => (
             <ContestCourseCard key={course.id} course={course} />
           ))}

From 11d36ce130c725801d0c8b9f3b7f63f5bfe13a0f Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Mon, 27 Oct 2025 06:10:56 +0900
Subject: [PATCH 7/8] =?UTF-8?q?fix=20:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
index 33a97fe..5856ac0 100644
--- a/src/components/page-header.tsx
+++ b/src/components/page-header.tsx
@@ -17,7 +17,7 @@ export function PageHeader({
   return (
     <header
       className={cn(
-        'relative mt-[6px] mb-1 flex h-[52px] shrink-0 items-center justify-center',
+        'border-gray-0 bg-gray-bg mobile-area fixed top-0 right-0 left-0 z-50 flex h-[62px] flex-col items-center justify-center border-b-4 pt-1.5 pb-1',
         className,
       )}
     >

From e9a2de2d4748a23c936b3a6393c843c5f34f8bbc Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Mon, 27 Oct 2025 06:12:34 +0900
Subject: [PATCH 8/8] =?UTF-8?q?fix=20:=20=EB=9F=AC=EB=8B=9D=20=EB=8C=80?=
 =?UTF-8?q?=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AC=B4=ED=95=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/contest/[id]/page.tsx | 85 ++++++++++++------------
 src/app/(pages)/contest/page.tsx      | 93 +++++++++++++++++++--------
 2 files changed, 107 insertions(+), 71 deletions(-)

diff --git a/src/app/(pages)/contest/[id]/page.tsx b/src/app/(pages)/contest/[id]/page.tsx
index 5a5ab78..dd7d6a6 100644
--- a/src/app/(pages)/contest/[id]/page.tsx
+++ b/src/app/(pages)/contest/[id]/page.tsx
@@ -45,7 +45,7 @@ export default function ContestDetailPage({ params }: ContestDetailPageProps) {
           isLeftIcon
           onClickLeftIcon={() => router.back()}
         />
-        <div className='flex flex-1 items-center justify-center'>
+        <div className='mt-14 flex flex-1 items-center justify-center'>
           <div>로딩 중...</div>
         </div>
       </div>
@@ -60,7 +60,7 @@ export default function ContestDetailPage({ params }: ContestDetailPageProps) {
           isLeftIcon
           onClickLeftIcon={() => router.back()}
         />
-        <div className='flex flex-1 items-center justify-center'>
+        <div className='mt-14 flex flex-1 items-center justify-center'>
           <div>대회 정보를 찾을 수 없습니다.</div>
         </div>
       </div>
@@ -74,55 +74,54 @@ export default function ContestDetailPage({ params }: ContestDetailPageProps) {
         isLeftIcon
         onClickLeftIcon={() => router.back()}
       />
+      <div className='mt-14'>
+        <nav className='bg-gray-0 h-2 w-full' />
 
-      <nav className='bg-gray-0 h-2 w-full' />
+        <div className='flex-1 overflow-y-auto'>
+          <ContestInfo
+            date={`${contestData.month}. ${contestData.day}.`}
+            day={contestData.dayOfWeek}
+            title={contestData.title}
+            location={contestData.addr}
+            distances={contestData.prices.map(price => price.type)}
+          />
 
-      <div className='flex-1 overflow-y-auto'>
-        <ContestInfo
-          date={`${contestData.month}. ${contestData.day}.`}
-          day={contestData.dayOfWeek}
-          title={contestData.title}
-          location={contestData.addr}
-          distances={contestData.prices.map(price => price.type)}
-        />
+          <ContestDetails
+            organizer={contestData.host}
+            fees={contestData.prices.map(price => ({
+              distance: price.type,
+              price: price.price,
+              label: `(${price.type})`,
+            }))}
+          />
 
-        <ContestDetails
-          organizer={contestData.host}
-          fees={contestData.prices.map(price => ({
-            distance: price.type,
-            price: price.price,
-            label: `(${price.type})`,
-          }))}
-        />
+          <div className='h-9' />
 
-        <div className='h-9' />
+          <RecommendedCourses
+            courses={contestData.courseInfos.map(course => ({
+              id: course.crsIdx,
+              title: course.crsKorNm,
+              location: course.sigun,
+              imageUrl: course.crsImgUrl,
+              crsIdx: course.crsIdx,
+            }))}
+          />
 
-        <RecommendedCourses
-          courses={contestData.courseInfos.map(course => ({
-            id: course.crsIdx,
-            title: course.crsKorNm,
-            location: course.sigun,
-            imageUrl: course.crsImgUrl,
-            crsIdx: course.crsIdx,
-          }))}
-        />
-
-        <div className='h-12' />
-        <div
-          className={cn('px-5 pt-5', {
-            'border-gray-1 border-t': contestData.courseInfos.length > 0,
-          })}
-        >
-          <button
-            className='text-title2 bg-point-400 w-full rounded-[12px] py-3 text-white'
-            onClick={() => window.open(contestData.homepageUrl, '_blank')}
+          <div className='h-12' />
+          <div
+            className={cn('px-5 pt-5', {
+              'border-gray-1 border-t': contestData.courseInfos.length > 0,
+            })}
           >
-            홈페이지로 이동하기
-          </button>
+            <button
+              className='text-title2 bg-point-400 w-full rounded-[12px] py-3 text-white'
+              onClick={() => window.open(contestData.homepageUrl, '_blank')}
+            >
+              홈페이지로 이동하기
+            </button>
+          </div>
         </div>
       </div>
-
-      <div className='h-25' />
     </div>
   );
 }
diff --git a/src/app/(pages)/contest/page.tsx b/src/app/(pages)/contest/page.tsx
index 46bc39b..2c461e4 100644
--- a/src/app/(pages)/contest/page.tsx
+++ b/src/app/(pages)/contest/page.tsx
@@ -2,17 +2,53 @@
 
 import { useQuery } from '@tanstack/react-query';
 import { ContestCard } from './_components/contest-card';
-import { PageHeader } from '@/components/page-header';
 import { useRouter } from 'next/navigation';
 import { getMarathons } from '@/lib/api/contest';
-import { ContestSkeleton } from './_components/contest-skeleton';
+import { useInfiniteScroll } from '../course/_hooks/use-infinite-scroll';
+import { useCallback, useEffect, useState } from 'react';
+import { Marathon } from '@/interfaces/contest/contest.types';
 
 export default function ContestPage() {
   const router = useRouter();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [allMarathons, setAllMarathons] = useState<Marathon[]>([]);
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const { data: marathonData, isLoading } = useQuery({
-    queryKey: ['marathons', 1],
-    queryFn: () => getMarathons(1),
+  const { data: marathonData, isLoading: loading } = useQuery({
+    queryKey: ['marathons', currentPage],
+    queryFn: () => getMarathons(currentPage),
+  });
+
+  // 새로운 대회 데이터가 로드될 때마다 상태 업데이트
+  useEffect(() => {
+    if (marathonData?.data) {
+      const newMarathons = marathonData.data.content.map(item => item.data);
+
+      if (currentPage === 1) {
+        setAllMarathons(newMarathons);
+      } else {
+        setAllMarathons(prev => [...prev, ...newMarathons]);
+      }
+
+      setHasNextPage(!marathonData.data.last);
+      setIsLoading(false);
+    }
+  }, [marathonData, currentPage]);
+
+  const handleLoadMore = useCallback(() => {
+    if (!loading && hasNextPage) {
+      setIsLoading(true);
+      setCurrentPage(prev => prev + 1);
+    }
+  }, [loading, hasNextPage]);
+
+  const { lastElementRef } = useInfiniteScroll({
+    hasNextPage,
+    isLoading: loading || isLoading,
+    onLoadMore: handleLoadMore,
+    threshold: 0.1,
+    rootMargin: '100px',
   });
 
   const handleContestClick = (id: string) => {
@@ -21,34 +57,35 @@ export default function ContestPage() {
 
   return (
     <div className='flex h-screen flex-col'>
-      <PageHeader title='러닝 대회' />
+      <header className='border-gray-0 bg-gray-bg mobile-area fixed top-0 right-0 left-0 z-50 flex h-[62px] flex-col items-center justify-center border-b-4 pt-1.5 pb-1'>
+        <p className='text-title1'>러닝 대회</p>
+      </header>
+      <div className='mt-14'>
+        {/* 대회 목록 */}
+        <div className='flex-1 overflow-y-auto px-5 pt-9'>
+          {allMarathons.map((marathon, index) => {
+            const shouldAttachObserver = index % 10 === 5;
 
-      <nav className='bg-gray-0 h-2 w-full' />
-
-      {/* 대회 목록 */}
-      {isLoading ? (
-        <ContestSkeleton />
-      ) : (
-        <div className='flex flex-col gap-7 overflow-y-auto px-4 py-5'>
-          {marathonData?.data?.content?.map(item => {
-            const marathon = item.data;
             return (
-              <ContestCard
-                key={marathon.marathonId}
-                id={marathon.marathonId.toString()}
-                date={`${marathon.month}. ${marathon.day}.`}
-                day={marathon.dayOfWeek}
-                title={marathon.title}
-                location={marathon.addr}
-                distances={marathon.types}
-                onClick={handleContestClick}
-              />
+              <div
+                key={`${marathon.marathonId}-${index}`}
+                ref={shouldAttachObserver ? lastElementRef : null}
+              >
+                <ContestCard
+                  id={marathon.marathonId.toString()}
+                  date={`${marathon.month}. ${marathon.day}.`}
+                  day={marathon.dayOfWeek}
+                  title={marathon.title}
+                  location={marathon.addr}
+                  distances={marathon.types}
+                  onClick={handleContestClick}
+                />
+              </div>
             );
           })}
         </div>
-      )}
-
-      <div className='h-50' />
+        <div className='h-16' />
+      </div>
     </div>
   );
 }