Merge pull request #431 from Kernel360/feat-add-badge

feat: 서치 컴포넌트에 배지 추가
Kernel360 · Dec 18, 2024 · 57dd30d · 57dd30d
2 parents 74affd1 + 3b55390
commit 57dd30d
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/app/(default)/search/page.tsx b/src/app/(default)/search/page.tsx
@@ -4,7 +4,7 @@ import { Suspense } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
-import { Clock, Eye } from 'lucide-react';
+import { BookOpen, Clock, Eye, Headphones } from 'lucide-react';
 
 import { useFetchSearchResults } from '@/api/hooks/useSearch';
 import EmptyAlert from '@/components/common/EmptyAlert';
@@ -80,7 +80,21 @@ function SearchResultsList() {
                 )
               }
               coverImageUrl={result.thumbnailUrl}
-              leftBadge={<Badge>{result.category}</Badge>}
+              leftBadge={
+                <div className="flex gap-1">
+                  <Badge className="">{result.category}</Badge>
+
+                  {result.contentType !== 'READING' ? (
+                    <div className="flex justify-center items-center bg-gradient-to-l from-red-500 to-orange-500 rounded-sm shadow-sm">
+                      <Headphones className="p-1 h-6 w-6 text-white" />
+                    </div>
+                  ) : (
+                    <div className="flex justify-center items-center bg-gradient-to-l from-blue-500 to-sky-500 rounded-sm shadow-sm  ">
+                      <BookOpen className="p-1 h-6 w-6  text-white" />
+                    </div>
+                  )}
+                </div>
+              }
               rightBadge={
                 <div className="flex items-center gap-1 text-gray-400">
                   <Eye className="w-4 h-4" />