[Feat] AI 탐색 목록 페이지 구현

src/__mocks/AICard.mock.ts

@@ -0,0 +1,19 @@
+type Item = {
+  id: string | number;
+  name: string;
+  serenity: number;
+  themeTag: string;
+  likeCount: number;
+  thumbnail?: string;
+}; //목데이터용 임시타입...
+
+export const mockAICard: Item[] = [
+  { id: '1001', name: '경포해수욕장', serenity: 2, themeTag: '자연관광지', likeCount: 0 },
+  { id: '1002', name: '안목해변 커피거리', serenity: 1, themeTag: '체험관광지', likeCount: 12 },
+  { id: '1003', name: '하회마을', serenity: 3, themeTag: '역사관광지', likeCount: 87 },
+  { id: '1004', name: '가천대학교', serenity: 1, themeTag: '문화시설', likeCount: 1002 },
+  { id: '5', name: '행궁동', serenity: 5, themeTag: '자연관광지', likeCount: 11 },
+  { id: '6', name: '문막천 산책길', serenity: 5, themeTag: '산책', likeCount: 11 },
+  { id: '7', name: '물향기수목원', serenity: 5, themeTag: '자연관광지', likeCount: 11 },
+  { id: '8', name: '물향기수목원', serenity: 5, themeTag: '자연관광지', likeCount: 11 },
+];

src/component/common/Badge/Badge.styled.ts

@@ -1,4 +1,4 @@
-export const BADGE_BASE = 'items-center justify-center inline-flex w-fit text-caption2';
+export const BADGE_BASE = 'items-center justify-center inline-flex w-fit text-caption2 shrink-0';
 
 export const BADGE_SIZE = {
   sm: 'px-[11px] py-[3px]',

src/component/common/Card/PlaceCard.tsx

@@ -9,6 +9,7 @@ type PlaceCardProps = {
   likeCount: number;
   showRemoveButton?: boolean;
   onRemove?: () => void;
+  onClick?: () => void;
 };
 
 export default function PlaceCard({
@@ -19,9 +20,13 @@ export default function PlaceCard({
   likeCount,
   showRemoveButton,
   onRemove,
+  onClick,
 }: PlaceCardProps) {
   return (
-    <div className="bg-yellow2 flex h-19 w-full max-w-[430px] cursor-pointer items-start rounded-[10px] px-3 py-2 transition-all hover:scale-[1.01] hover:shadow-md active:scale-95">
+    <div
+      className="bg-yellow2 flex h-19 w-full max-w-[430px] cursor-pointer items-start rounded-[10px] px-3 py-2 transition-all hover:scale-[1.01] hover:shadow-md active:scale-95"
+      onClick={onClick}
+    >
       {/*썸네일*/}
       <div className="bg-gray1 flex aspect-square w-15 flex-shrink-0 items-center justify-center overflow-hidden rounded-[5px]">
         {imgUrl ? (
@@ -38,7 +43,7 @@ export default function PlaceCard({
         </div>
 
         {/* 뱃지 2개 */}
-        <div className="mt-5 flex flex-wrap gap-3">
+        <div className="mt-5 flex shrink-0 gap-3">
           <Badge type="default" color="green" count={quietLevel}>
             한적함
           </Badge>
@@ -57,9 +62,11 @@ export default function PlaceCard({
           <div className="h-3 w-3" />
         )}
         {/* 좋아요 수 */}
-        <div className="text-caption5 mt-6 ml-6 flex items-center justify-center gap-1">
+        <div className="text-caption5 mt-6 ml-5 flex items-center justify-center gap-[3px]">
           <HeartFillIcon className="h-3 w-3" />
-          <span>{likeCount}</span>
+          <span className="w-[3ch] leading-none whitespace-nowrap tabular-nums">
+            {likeCount > 99 ? '99+' : likeCount}
+          </span>
         </div>
       </div>
     </div>

src/index.css

@@ -209,6 +209,9 @@
   .bg-green4 {
     background-color: var(--color-green4);
   }
+  .bg-red1 {
+    background-color: var(--color-red1);
+  }
   .bg-red2 {
     background-color: var(--color-red2);
   }

src/pages/ai/AIResultPage.tsx

@@ -0,0 +1,65 @@
+import { Header, PlaceCard, Sidebar } from '@/component';
+import { useState } from 'react';
+import { mockAICard } from '@/__mocks/AICard.mock';
+import { useNavigate } from 'react-router-dom';
+
+function getRankBadgeClass(n: number) {
+  if (n === 1) return 'bg-red1 text-black';
+  if (n === 2) return 'bg-orange text-black';
+  if (n === 3) return 'bg-mint text-black';
+  return 'bg-gray1 text-gray-700';
+}
+
+export default function AIResultPage() {
+  const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const handleMenuClick = () => {
+    setIsSidebarOpen(true);
+  };
+
+  const handleSidebarClose = () => {
+    setIsSidebarOpen(false);
+  };
+  //투두: 추후 API 연결하면서 로딩 화면 연결
+
+  return (
+    <div className="min-h-screen">
+      <Header onMenuClick={handleMenuClick} />
+      <Sidebar isOpen={isSidebarOpen} onClose={handleSidebarClose} position="left" />{' '}
+      <div className="mx-auto flex w-full max-w-[480px] flex-col pt-14">
+        <div className="bg-green3-light text-caption3 text-green1 h-10 w-full items-center py-[10px] text-center">
+          AI 맞춤 여행지 탐색
+        </div>
+        <ul className="w-full space-y-4 py-5 pr-8 pl-5">
+          {mockAICard.map((it, idx) => {
+            const rank = idx + 1;
+            return (
+              <li key={it.id}>
+                <div className="flex items-center gap-3">
+                  {/*순위*/}
+                  <span
+                    className={`grid h-6 w-6 shrink-0 place-items-center rounded-full text-[11px] font-semibold shadow-sm ${getRankBadgeClass(rank)}`}
+                  >
+                    {rank}
+                  </span>
+
+                  <div className="flex-1">
+                    <PlaceCard
+                      imgUrl={it.thumbnail}
+                      title={it.name}
+                      theme={it.themeTag}
+                      quietLevel={it.serenity}
+                      likeCount={it.likeCount}
+                      onClick={() => navigate(`/place/${it.id}`)}
+                    />
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/routes/router.tsx

@@ -11,6 +11,7 @@ import ThemeSelcetPage from '@/pages/ai/ThemeSelect';
 import Filter from '@/pages/explore/Filter';
 import TravelSpotDetail from '@/pages/ai/TravelSpotDetail';
 import AILoadingPage from '@/pages/ai/AILoadingPage';
+import AIResultPage from '@/pages/ai/AIResultPage';
 export const router = createBrowserRouter([
   {
     path: '/',
@@ -41,6 +42,10 @@ export const router = createBrowserRouter([
         path: 'loading',
         element: <AILoadingPage />,
       },
+      {
+        path: 'result',
+        element: <AIResultPage />,
+      },
     ],
   },
   //여행지 상세페이지