feat: 모바일 반응형 카드 스타일 변경

src/components/atoms/LocationClassificationBtn/index.tsx

@@ -45,7 +45,7 @@ const LocationClassificationBtn = ({
   };
 
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap lg:max-w-540 lg:px-10 gap-2">
       {classifications.map((item, index) => (
         <button
           key={item.id}

src/components/molecules/Store/index.tsx

@@ -36,7 +36,7 @@ const Store = ({
   }, [selectedClassificationName, classifications]);
 
   return (
-    <>
+    <div className="flex flex-col justify-center items-start lg:items-center">
       {storeList.map((store, index) => (
         <div key={index}>
           <div
@@ -49,7 +49,7 @@ const Store = ({
                 )?.name
               : ""}
           </div>
-          <div className="grid grid-cols-3 grid-flow-row lg:grid-cols-2 gap-4">
+          <div className="grid grid-cols-3 grid-flow-row gap-4 lg:grid-cols-2 mdMaxlg:grid-cols-2">
             {store.stores.map((storeItem, itemIndex) => (
               <div
                 className="flex mb-12"
@@ -67,18 +67,18 @@ const Store = ({
                   }
                 }}
               >
-                <div className="flex flex-col items-center">
+                <div className="flex flex-col items-center justify-center">
                   {storeItem.thumbnail ? (
                     <img
                       src={`${storeItem.thumbnail}`}
                       alt="Image"
-                      className="w-248 h-174 rounded-12 sm:h-106 "
+                      className="w-248 h-174 rounded-12 sm:w-152 sm:h-106 smMaxLg:h-204 smMaxLg:w-292"
                     />
                   ) : (
                     <img
                       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAACiCAMAAAATIHpEAAAAwFBMVEUNDQ3///9UxQMAAAAICAhdXV1RvwMYGBjr6+sAAA3Ly8vBwcHd3d2ampqsrKyAgIBWywFlZWWOjo4uZwn4+Ph0dHTQ0NAwbQkycgmPj481NTWhoaHm5uaysrLy8vLW1tZPT09FwQBlyTE2ewg4gAglJSUsLCw/Pz9FRUUbGxt4eHhMTExXV1dsbGwrXwlyzULY8cjQ7rvi9dS15Jru+eaH1VlgyCOY2XfF6q9wzT/v+eeq4IyC0lna8c6t4JaK1WYVU2AwAAADtklEQVR4nO3b21baQBSAYchQMVJEEbCAVEMVPHNQDtbT+79VgUJmBwYySS+Q5v/W6kUHajP/2gECmEoBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiEn5TGuZ7R3YF1ctzlX9JVVYLFZrhDPKpNK+m0Uj9dNf+6Y2/vPEkt2yfrd9uoWgWzx0i4du8dAtHrrFQ7d46BZPYrtl/u0iMiHdVPAqfNrsqnWVXW2nTJfrhtVkdFP1w7lGW01GrX14NttdqVLMBjao8v4dr/UN6r6xWC3OVxPSTV5wK3Wo95wuFeTIqe/+DceiW8FfPUhWN7mhmv7LTE6Eo1uA2NB9u5RekhOF6CbJDelT1lf0N0m3ALGhpZN0pnS12CXdApSplpCnm1FYt326GYV1S7fm26RbQLDbwUMtWyufy6UC3UwC3crTq6vJn6pYq9PNRHYr+I9lDb3YoJuJ2NCZfq12o7eeo5uJ2FBd5NAPcXQzEhsqixz6RKWbkXlDqk63zdZ0y9NtM7rFQ7d46BZPnG4P4o5Full3KxifeOkW1u1Q3DFHN+tu+oIso/RHEnQzd6voHLdq9X50S5m7Hegcpdb00/mMUsd6jW4pczf5kXQ631ZKXTTkEt3M3W7TAaWfS5+20s3crZXejG7GbvI9ObpF6VY21eJ1SFi3wCuRhTOuT8O73ax876bUoltot5S6Xgq3307u+yHGX9Qzd5tMXOBUzU1ewyW2W+5grnIn31arLFbrcptK3fsX8rkLlUmph5U7ZlLn/o/U3fR/c/FfdLP+urO+oVYuFgt3+nvUy3fMmH63ee0PTI5k7x4AAAAAEsjd9gHsJvdk20ewk9wTZ9uHsIvcx6O9bR/DDppkc+gWmXty5NAtsum00S2y2bTRLaq/00a3iObTRrdo/Gx0i0Jno1sE7qmfjW72xLTRzZ6cNrpZC0wb3WwFp41ulpaz0c3KSja62VjNRjcLhmx0C+f+WM1Gt1Bi2rwO3WzpafO6nZ7n0c2KyNbv9PvdJ7rZEI9tXvO5+TwY0s2CzDYav/weNHl8syCfSYev3f4bzws23F86m/fe7PX8aZvY9sF9XfIkHfSePj9EtqPTbR/dlxV4bOv0xj1PZuP7SGvIk/Rz1HseOGSzoKet6Y2euqO3F7JZ0NPmvb9+fAzH8iQ9Idsa8iQddkfj7pBpsyCyea+j5vsn02ZDTpsz6vc7e2SzEMjmeM7YIZsF99LwNiXZwgSnjWyWmLZYmLZYNk7bI9nWIFss7qWzt46znO0P0C5RpYuDlLsAAAAASUVORK5CYII="
                       alt="Image"
-                      className="w-248 h-174 rounded-12 sm:h-106"
+                      className="w-248 h-174 rounded-12 sm:w-152 sm:h-106 smMaxLg:h-204 smMaxLg:w-292"
                     />
                   )}
                   <div className="text-gray-700 text-16 font-semibold mt-12">{storeItem.name}</div>
@@ -89,7 +89,7 @@ const Store = ({
           </div>
         </div>
       ))}
-    </>
+    </div>
   );
 };
 

src/components/pages/RentalLocation/RentalLocationPage.tsx

@@ -19,6 +19,7 @@ import ClassificationsButtons from "@/components/pages/RentalLocation/Classifica
 const RentalInfo = () => {
   const { naver } = window;
   const mapElement = useRef<HTMLDivElement | null>(null);
+
   // Ref를 사용하여 맵의 너비 동적으로 가져오기
   const mapWidth = mapElement.current?.offsetWidth ?? null;
 
@@ -119,6 +120,34 @@ const RentalInfo = () => {
     storeListRes,
   ]);
 
+  useEffect(() => {
+    if (storeMarker.data && storeMarker.data.length > 0 && showInitialCard) {
+      const randomIndex = Math.floor(Math.random() * storeMarker.data.length);
+      const randomStore = storeMarker.data[randomIndex].id;
+      setSelectedStoreId(randomStore);
+      setShowInitialCard(false);
+    }
+  }, [storeMarker.data, showInitialCard]);
+
+  useEffect(() => {
+    if (userPosition && storeMarker.data && storeMarker.data.length > 0) {
+      const distances = storeMarker.data.map((store) =>
+        getDistanceFromLatLonInKm(
+          userPosition.lat,
+          userPosition.lng,
+          store.latitude,
+          store.longitude
+        )
+      );
+
+      const minDistanceIndex = distances.indexOf(Math.min(...distances));
+
+      if (!showInitialCard) {
+        setSelectedStoreId(storeMarker.data[minDistanceIndex].id);
+      }
+    }
+  }, [userPosition, storeMarker.data, showInitialCard]);
+
   useEffect(() => {
     getUserPosition().then(
       (position) =>
@@ -153,6 +182,7 @@ const RentalInfo = () => {
     }
   }, [storeListRes, userPosition]);
 
+
   return (
     <div className="flex flex-col mt-24">
       <div className="flex justify-center">

src/components/pages/rentalOffice/RentalOfficePage.tsx

@@ -22,7 +22,7 @@ const RentalOfficePage = () => {
   const { data: useGetStoreDetailData } = useGetStoreDetail(selectedStoreId ?? 1);
 
   return (
-    <div className="flex justify-center mt-24 md:mt-0 md:flex-col sm:px-20">
+    <div className="flex justify-center mt-24 md:mt-0 md:flex-col sm:px-0">
       <div className="flex mr-24 md:hidden lg:hidden">
         {useGetStoreDetailData && <Card storeDetail={useGetStoreDetailData} />}
       </div>

tailwind.config.js

@@ -10,6 +10,8 @@ export default {
       md: { max: "640px" },
       mdMaxMin: { max: "640px", min: "360px" },
       lg: { max: "1024px" },
+      smMaxLg: { max: "1024px", min: "360px" },
+      mdMaxlg: { max: "1279px", min: "1025px" },
       lgMaxMin: { max: "1024px", min: "360px" },
       xl: { min: "1025px" },
     },