Merge pull request #29 from CarToi/refactor/#26/progress-style

[design] 추천 결과 페이지 디자인 수정

Author: kimD0ngjun

src/app/recommend/_components/MapView/index.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import { useState } from "react";
 import { Map, MapMarker, Polyline, useKakaoLoader } from "react-kakao-maps-sdk";
 import { RecommendationResponse } from "@/lib/type";
 import { COORDINATE } from "@/constants/spaceData";
 import { Coordinate, getMidpoint } from "@/utils/getMidpoint";
 import { getDestination } from "@/utils/getDestination";
 import RecommendationMarker from "./RecommendationMarker";
-import { useState } from "react";
+import ErrorScreen from "@/components/ErrorScreen";
 
 export default function MapView({
   spaceData,
@@ -18,8 +19,9 @@ export default function MapView({
   });
   const [selectedSpace, setSelectedSpace] = useState<Coordinate | null>(null);
 
-  if (loading) return <div>Loading</div>;
-  if (error) return <div>Error</div>;
+  if (loading)
+    return <div className="h-full w-full animate-pulse bg-slate-200" />;
+  if (error) return <ErrorScreen />;
 
   const origin = COORDINATE.SAEMANGEUM;
   const destination = getDestination();

src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx

@@ -1,15 +1,13 @@
-import Skeleton from "@/components/Loading/Skeleton";
-
 export default function SkeletonCard() {
   return (
-    <div className="flex h-full w-full animate-pulse gap-2 sm:flex-col sm:gap-3">
-      <div className="size-40 rounded-[6px] sm:h-[180px] sm:w-full" />
+    <div className="flex h-full w-full gap-2 sm:flex-col sm:gap-3">
+      <div className="size-40 shrink-0 animate-pulse rounded-md bg-slate-200 sm:h-[180px] sm:w-full" />
       <div className="flex flex-1 flex-col gap-2">
-        <Skeleton width="80%" height="1rem" />
-        <Skeleton width="60%" height="0.875rem" />
-        <div className="mt-2 flex gap-2">
-          <Skeleton width="60px" height="1.5rem" className="rounded-[6px]" />
-          <Skeleton width="40px" height="1.5rem" className="rounded-[6px]" />
+        <div className="h-[26px] w-4/5 animate-pulse rounded-md bg-slate-200" />
+        <div className="h-[20px] w-3/5 animate-pulse rounded-md bg-slate-200" />
+        <div className="mt-1 flex gap-2">
+          <div className="h-[28px] w-12 animate-pulse rounded-md bg-slate-200" />
+          <div className="h-[28px] w-12 animate-pulse rounded-md bg-slate-200" />
         </div>
       </div>
     </div>

src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx

@@ -30,14 +30,14 @@ export default function SpaceCard({
       />
       <div>
         <div className="flex flex-col gap-1">
-          <div className="flex items-center">
-            <h2 className="text-title-small text-[#1F2229]">{title}</h2>
-          </div>
+          <h2 className="text-title-small text-left text-[#1F2229]">{title}</h2>
           <div className="flex items-start gap-1">
             <div className="size-4 py-0.5">
               <MapPin size={16} color="#616A80" />
             </div>
-            <div className="text-body-small text-[#616A80]">{position}</div>
+            <div className="text-body-small text-left text-[#616A80]">
+              {position}
+            </div>
           </div>
         </div>
         <div className="mt-[8px] flex gap-[8px]">