From 2d7cfaab21fca0e18e64d2e556ada19a641b146b Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Fri, 11 Jul 2025 19:03:28 +0900
Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EC=9E=A5=EC=86=8C=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=99=BC=EC=AA=BD=20?=
 =?UTF-8?q?=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/RecommendationPanel/SpaceCard.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
index 35066f9..cb81ac8 100644
--- a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
+++ b/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]">

From cf152ce3a140fecff0ecc7ca22702cd2aea042cc Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Fri, 11 Jul 2025 19:31:43 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=20UI=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=EB=8F=84=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RecommendationPanel/SkeletonCard.tsx      | 16 +++++-----
 src/components/Loading/Skeleton.tsx           | 30 -------------------
 2 files changed, 7 insertions(+), 39 deletions(-)
 delete mode 100644 src/components/Loading/Skeleton.tsx

diff --git a/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx b/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx
index 83eb1a9..5b9df75 100644
--- a/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx
+++ b/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>
diff --git a/src/components/Loading/Skeleton.tsx b/src/components/Loading/Skeleton.tsx
deleted file mode 100644
index 9b4016b..0000000
--- a/src/components/Loading/Skeleton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import clsx from "clsx";
-
-interface SkeletonProps {
-  width?: string;
-  height?: string;
-  rounded?: string;
-  className?: string;
-}
-
-const Skeleton = ({
-  width = "100%",
-  height = "1rem",
-  rounded = "rounded-md",
-  className,
-}: SkeletonProps) => {
-  return (
-    <div
-      className={clsx(
-        "animate-pulse bg-slate-200",
-        width,
-        height,
-        rounded,
-        className
-      )}
-      style={{ width, height }}
-    />
-  );
-};
-
-export default Skeleton;

From e5150b2d44c2974ab615bff7bb07009922e93c60 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Fri, 11 Jul 2025 19:59:01 +0900
Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=A7=80=EB=8F=84=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20=EC=8B=9C=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/recommend/_components/MapView/index.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/recommend/_components/MapView/index.tsx b/src/app/recommend/_components/MapView/index.tsx
index 8b2345f..3fa9180 100644
--- a/src/app/recommend/_components/MapView/index.tsx
+++ b/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();