fix(fe) - fix card

FourPointSevenFive · Dec 5, 2024 · 2137c85 · 2137c85
1 parent 53160cc
commit 2137c85
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/frontend/app/_components/PhotoUploader.tsx b/frontend/app/_components/PhotoUploader.tsx
@@ -80,11 +80,11 @@ const PhotoUploader = ({ locationId }: { locationId?: number }) => {
     <div className="flex flex-col items-center">
       {/* 클릭 트리거 */}
       <div
-        className="flex cursor-pointer items-center justify-center gap-1 rounded-md bg-neutral-200 p-4 hover:bg-neutral-300"
+        className="flex cursor-pointer items-center justify-center gap-1 rounded-xl border border-blue-300 p-1 hover:bg-neutral-300"
         onClick={handleClick}
       >
-        <p className="text-sm font-bold text-neutral-500">ADD</p>
-        <MdAddToPhotos size={24} className="text-neutral-500" />
+        <p className="text-sm font-bold text-blue-500">ADD</p>
+        <MdAddToPhotos size={15} className="text-blue-500" />
       </div>
 
       {/* 숨겨진 파일 입력 */}

diff --git a/frontend/app/map/[id]/page.tsx b/frontend/app/map/[id]/page.tsx
@@ -72,8 +72,8 @@ function StampSection() {
       const distance = calculateDistance(
         latitude,
         longitude,
-        37.555778909,
-        127.023026145,
+        loc?.latitude ?? 0,
+        loc?.longitude ?? 0,
       );
 
       // 1km 이하일 경우 GPS 활성화
@@ -216,6 +216,8 @@ function ProofShoots({ locationId }: { locationId: number | undefined }) {
     }
   };
 
+  //photouploader가 바뀔 경우 useEffect 실행
+
   useEffect(() => {
     getProofShots();
     //console.log(proofShots);

diff --git a/frontend/app/map/_components/LocationCard.tsx b/frontend/app/map/_components/LocationCard.tsx
@@ -72,12 +72,15 @@ export default function LocationCard({
     return data;
   };
 
+  const [favoriteCnt, setFavoriteCnt] = useState(locationinfo.favorite_cnt);
+
   useEffect(() => {
     if (status !== "authenticated") return;
     getIsfavorite().then((data) => {
       //console.log(data);
       const favoriteData = data as IsFavoriteProps;
       setIsFavorite(favoriteData.result);
+      setFavoriteCnt(favoriteData.total);
     });
   }, []);
 
@@ -97,8 +100,10 @@ export default function LocationCard({
     setIsFavorite(!isFavorite);
 
     if (!isFavorite) {
+      setFavoriteCnt(favoriteCnt ? favoriteCnt + 1 : 1);
       postFavoriteOn();
     } else {
+      setFavoriteCnt(favoriteCnt ? favoriteCnt - 1 : 0);
       postFavoriteOff();
     }
   };
@@ -110,12 +115,16 @@ export default function LocationCard({
         <div className="w-64 text-sm font-bold">{locationinfo.title}</div>
         <div>
           {status === "authenticated" && (
-            <FaHeart
-              className={
-                cn("size-6") + (isFavorite ? " text-red-500" : " text-gray-500")
-              }
-              onClick={handleFavoriteClick}
-            />
+            <div className="flex flex-col items-center">
+              <FaHeart
+                className={
+                  cn("size-6") +
+                  (isFavorite ? " text-red-500" : " text-gray-500")
+                }
+                onClick={handleFavoriteClick}
+              />
+              <p className="text-sm text-neutral-500">{favoriteCnt}</p>
+            </div>
           )}
         </div>
       </div>