[ 무물 ] 근처 사용자 찾기 #3 : 나와 동일한 프로필 유형 클릭하면 스탬프 적립 및 실시간 알림 애니메이션

내 주변 찾기를 통해 감지된 사용자 중 프로필 유형(Chat, Youtube,SNS, Books, Savings, Call) 중 동일한 유형을 클릭했을 때 나의 stamp 가 즉각적으로 +1 이 되고, 또 내가 다른 사용자 B를 클릭했을 때 B의 화면에 알림이 가도록 하였습니다.

 

🧭 요구 사항

 

• 사용자 A가 B를 클릭하면 B의 화면에 A의 아바타 위에 💛 하트 이모지 표시
• A는 클릭한 위치에 empty_stamp 애니메이션을 보여주고 해당 위치를 유지
• 이미 클릭한 사용자는 다시 클릭해도 반응 없음
• A와 B가 같은 프로필 유형일 경우 A의 invited_count가 실시간으로 증가
• invited_count에 따라 A의 아바타 이미지 및 boosterDisplay 업데이트
• 등장 시 바운스 애니메이션 적용
• 성능 최적화
  • boosterDisplay 및 아바타가 로딩 중에 default 이미지로 먼저 뜨는 현상을 해결

 

 

이전 글에서 실시간 사용자를 감지하고, userId로 사용자 프로필 유형을 가져왔으므로, 이제는 클릭했을 때 이벤트 처리를 할 단계입니다. 

기능뿐만 아니라 애니메이션 추가 및 성능 최적화까지 고려한 과정입니다.

 

---

 

🧭 기능 흐름 요약

  participant A as 사용자 A
  participant B as 사용자 B
  participant Server as WebSocket 서버
  participant DB as Prisma API

  A->>Server: user_click 이벤트 전송 (A → B)
  Server-->>B: click_notice 이벤트 수신 (A가 당신을 클릭함)
  B->>화면: 💛 하트 애니메이션 표시

  A->>화면: empty_stamp 애니메이션 표시
  A->>DB: B의 type 확인 → A와 같으면 invited_count +1
  DB-->>A: count 반환 → UI 업데이트

 

---

 

✅ 기능1 : A가 B를 클릭하면 B 화면에 하트 애니메이션 띄우기

사용자 A가 B를 클릭했을 때, B의 화면에 A 아바타 위에 하트 이모지가 2초간 떠야 합니다.
실시간으로 동작해야 하며, 여러 사용자가 동시에 있을 경우에도 정확한 대상에게만 보여야 합니다.

 

사용자 A가 B를 클릭
   ↓
A 클라이언트에서 서버에 user_click 메시지 전송
   ↓
서버는 toUserId(B)에게만 click_notice 이벤트 전송
   ↓
B 클라이언트는 fromUserId(A)의 아바타에 하트 표시
   ↓
2초 후 하트 사라짐

 

1️⃣ 클라이언트 → 서버: 클릭 메시지 전송

// 📍 NearbyUserAvatar.tsx
const handleClick = () => {
  if (isClicked || !wsRef.current) return;

  wsRef.current.send(
    JSON.stringify({
      type: "user_click",
      fromUserId: myUserId,
      toUserId: userId,
      fromUserName: myName, // 💡 이름도 함께 전송
    })
  );

  setClicked(true); // 한 번 클릭 후 재클릭 방지
};

 

 

• 중복 클릭을 방지하기 위해 isClicked 상태로 제어합니다.
• 서버로는 fromUserId, toUserId, 그리고 발신자의 이름도 함께 전송하여, 상대방이 알림을 받을 때 누가 클릭했는지 표시할 수 있도록 했습니다.

 

 

2️⃣ 서버에서 메시지 수신 후 → 클릭된 사용자에게 알림 전송

else if (data.type === "user_click" && data.fromUserId && data.toUserId) {
  const senderName = data.fromUserName || data.fromUserId;

  for (const [targetWs, info] of clients.entries()) {
    if (info.userId === data.toUserId && targetWs.readyState === WebSocket.OPEN) {
      targetWs.send(
        JSON.stringify({
          type: "click_notice",
          fromUserId: data.fromUserId,
          fromUserName: senderName,
          toUserId: data.toUserId,
        })
      );
    }
  }
}

 

 

• 웹 소켓에 user_click 타입의 메시지가 들어오면,
• 수신자의 userId와 일치하는 WebSocket을 찾아 해당 사용자에게만 click_notice 타입의 메시지를 보냅니다.
• 이름은 익명 마스킹 처리할 수 있도록 별도로 포함해 전달합니다.

 

3️⃣ 수신 클라이언트: 하트 애니메이션 표시

// 📍 NearbyContent.tsx
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);

  if (message.type === "click_notice") {
    const { fromUserId } = message;
    setHeartAnimation((prev) => ({
      ...prev,
      [fromUserId]: true, // 💛 하트 표시 시작
    }));

    // 2초 뒤 자동 제거
    setTimeout(() => {
      setHeartAnimation((prev) => ({
        ...prev,
        [fromUserId]: false,
      }));
    }, 2000);
  }
};

 

 

• click_notice 타입 메시지를 감지하여 수신자 화면에서만 하트 표시를 유도합니다.
• fromUserId를 기준으로 하트 애니메이션을 사용자 별로 관리하기 위해 객체 형태로 setHeartAnimation을 구성했습니다.
• 2초 뒤 자동으로 사라지도록 setTimeout 처리했습니다.

 

4️⃣ 실제 하트 애니메이션 렌더링

🧩 위치: NearbyUserAvatar.tsx

<AnimatePresence>
  {showHeart && (
    <motion.div
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: -30 }}
      exit={{ opacity: 0, y: -50 }}
      transition={{ duration: 1 }}
      className="absolute -top-6 text-2xl"
    >
      💛
    </motion.div>
  )}
</AnimatePresence>

 

• AnimatePresence는 framer-motion에서 요소의 진입/퇴장 애니메이션을 깔끔하게 처리합니다.
• 하트는 위쪽으로 살짝 떠오르며 나타났다가 사라지도록 Y축 애니메이션을 주었습니다.
• 한눈에 들어오는 즉각적인 피드백을 주기 위해 프로젝트 메인 컬러인 노랑색 💛 이모지를 사용했습니다.

 

---

 

 

✅ 기능 2 :  A가 클릭한 위치에 empty_stamp 애니메이션 표시 및 고정

사용자 A가 B를 클릭하면, B의 아바타 위치에 empty_stamp 이미지가 애니메이션과 함께 표시되어야 하며,
이후 렌더링에서도 동일한 위치에 고정되어 있어야 합니다.
이미 클릭한 사용자는 다시 클릭해도 아무런 반응이 없어야 합니다.

사용자 A가 B를 클릭
↓
A 클라이언트는 클릭 당시 B의 위치(angle, distance)를 저장
↓
해당 위치에 empty_stamp 애니메이션 렌더링
↓
다시 렌더링할 때도 저장된 위치를 기준으로 empty_stamp 유지
↓
이미 클릭한 B는 다시 클릭되지 않음

 

😓 문제 발생

 

처음에는 positionCache를 기준으로 클릭된 사용자에게 empty_stamp를 렌더링했습니다.

// NearbyContent.tsx
const position = positionCache.current.get(user.userId);

 

하지만 이렇게 작성하면 렌더링 타이밍이나 위치 계산 순서에 따라
클릭 당시 위치가 아닌 새로운 위치에 empty_stamp가 찍히는 문제가 발생했습니다.

• 실제로는 B가 angle 45°, distance 100px에 있었지만
• 렌더링될 때는 다른 유저들과 겹치지 않게 새롭게 할당된 위치로 표시됨
  → empty_stamp가 '뜬금없는 곳'에 찍힘...!

 

🧨 문제 코드

let position = wasClicked
  ? positionCache.current.get(user.userId) // ❌ 클릭 당시 위치가 아님
  : positionCache.current.get(user.userId);

• positionCache에 해당 사용자의 위치가 없을 경우,
  • 주변 유저들과 겹치지 않도록
  • 랜덤한 angle, distance 조합을 여러 번 시도하여 위치를 정합니다.
  즉, positionCache의 위치는 매 렌더링마다 "다시 계산될 가능성"이 있었고,
  특히 새로 등장한 사용자나 positionCache가 초기화된 경우엔 항상 새 위치에 icon이 생성되는 문제가 있었습니다.

 

✅ 그래서 어떻게 해결했나?

1️⃣ A 클라이언트에서 클릭 당시 위치 별도 저장

// NearbyContent.tsx
if (clickedType === myType) {
  const pos = positionCache.current.get(targetId);
  if (pos) clickedUserPositions.current.set(targetId, pos); // 클릭 시 위치 저장

  setInteractedUserIds((prev) => new Set(prev).add(targetId));
  ...
}

 

2️⃣ 렌더링 시에는 clickedUserPositions를 우선 사용

let position = wasClicked
  ? clickedUserPositions.current.get(user.userId) // ✅ 클릭 당시 위치
  : positionCache.current.get(user.userId);

 

클릭 시점의 위치를 따로 저장하는 clickedUserPositions 구조를 만들고, empty_stamp 렌더링은 항상 이 저장된 값을 기준으로 처리했습니다

• 클릭 당시의 위치(angle, distance)를 clickedUserPositions에 저장합니다.
• 같은 사용자를 두 번 클릭하지 않도록 처음에 조건문으로 걸러냅니다.

 

 

 

---

 

✅ 기능 3 : invited_count에 따라 boosterDisplay 및 아바타 이미지 실시간 변경

사용자 A가 동일한 유형의 사용자 B를 클릭했을 때, A의 invited_count가 1 증가해야 합니다.
이 수치는 바로 UI에 반영되어야 하며, 레벨 조건(5/10)을 만족하면 아바타 이미지도 갱신됩니다.
boosterDisplay 문구("레벨업까지 N명!" 또는 "만렙!")도 함께 업데이트되어야 합니다.

 

A가 B를 클릭
↓
A와 B의 성향을 비교
↓
동일하면 /api/invite/increase 호출
↓
A의 초대 수(invited_count) +1
↓
쿼리 갱신 → boosterDisplay 및 아바타 이미지 실시간 업데이트

 

 

 

1️⃣ 초대 수 증가 API

// 📍 /api/invite/increase.ts
export async function POST(req: NextRequest) {
  const { inviterId } = await req.json();

  const updated = await prisma.user.update({
    where: { id: inviterId },
    data: {
      invited_count: {
        increment: 1,
      },
    },
  });

  return NextResponse.json({ invited_count: updated.invited_count });
}

• inviterId만 전달하면 초대 수를 1 증가시킵니다.
• 예외 상황(없는 유저 ID 등)에 대한 에러 처리는 status code로 명확하게 처리했습니다.

 

2️⃣ invited_count 증가 요청 - 커스텀 훅 useIncreaseInvitedCount

import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";

export function useIncreaseInvitedCount(userId?: string) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      const res = await axios.post("/api/invite/increase", {
        inviterId: userId,
      });
      return res.data;
    },
    onSuccess: () => {
      // 🔁 캐시 업데이트 → 실시간 UI 반영
      queryClient.invalidateQueries({
        queryKey: ["userInfo", userId],
      });
    },
  });
}

 

• 단발성 POST 요청을 안정적으로 처리하고, 성공 시에만 UI를 갱신하기 위해 useMutation을 사용했습니다.
  
  • 우선 초대 수 증가 로직은 클릭 시 한번만 서버에 POST 요청을 보내는 작업이므로 코드 한줄의 호출로 명확하게 작성할 수 있었습니다.

 

• 또, 요청 성공 시인 onSuccess에만 쿼리를 invalidate하여 갱신하도록 구성함으로써, "DB에 정말 반영된 경우에만" 프론트에 반영될 수 있도록 하고, userInfo 관련 데이터를 다시 불러오게 만들어 UI에 실시간 반영합니다.

 

3️⃣ 클릭한 사용자가 동일 유형일 때 mutation.mutate() 호출

// NearbyContent.tsx
if (clickedType === myCharacterType && clickedUserId !== myUserId) {
  increaseInvitedCountMutation.mutate(); // ✅ 실시간 invited_count 증가
}

 

• 타입이 동일한 경우에만 카운트를 증가시킵니다.
• clickedUserId !== myUserId 조건으로 자기 자신을 클릭해도 증가하지 않도록 예외 처리합니다.

 

 

4️⃣ 실시간 UI 반영 - boosterDisplay, 아바타 업데이트

// NearbyUserAvatar.tsx
const invitedCount = userInfo?.invited_count ?? 0;
const level = invitedCount >= 10 ? 3 : invitedCount >= 5 ? 2 : 1;

const imageSrc =
  characterType === "default"
    ? "/assets/moono/default-moono.png"
    : `/assets/moono/${level === 1 ? "" : `lv${level}/`}${characterType}-moono.png`;

 

• 초대 수(invitedCount)에 따라 레벨을 계산하고, 해당 레벨별 폴더에서 이미지 경로를 동적으로 불러옵니다.

{invitedCount >= 10 ? (
  <span className="font-bold text-green-600">만렙!</span>
) : (
  <span className="font-bold text-yellow-600">
    레벨업까지 {5 - (invitedCount % 5)}명 남음!
  </span>
)}

 

 

• invited_count가 10 이상이면 "만렙!", 아니면 "레벨업까지 N명 남음"을 보여줍니다.
• useMutation의 invalidateQueries → useQuery → 캐시 갱신 흐름이 연결되어 있기 때문에 클릭 시에 자동으로 업데이트됩니다.

 

 

---

 

 

✅ 기능 4: 로딩 성능 최적화

boosterDisplay 및 아바타가 로딩될 때 기본 이미지로 깜빡이는 현상 없이, 모든 데이터 로딩이 끝난 후에 렌더링되도록 개선합니다.
성능 최적화를 위해 불필요한 리렌더링과 로딩 중 UI 깜빡임을 최소화합니다.

 

 

❗ 문제 상황: 로딩 중 깜빡임 (default 이미지 / 잘못된 booster 문구)

 

🔍 증상 1. boosterDisplay에서 "0명" 문구가 잠깐 나타남

• 사용자 invited_count는 useGetUserInfo(userId)를 통해 비동기로 가져오는데,
• 컴포넌트가 먼저 렌더링되며 undefined 또는 0을 기준으로 잘못된 booster 문구가 먼저 뜨는 문제 발생했습니다.

문제 코드

const invitedCount = userInfo?.invited_count ?? 0;

const boosterText = invitedCount >= 10
  ? "만렙!"
  : `레벨업까지 ${5 - (invitedCount % 5)}명!`; // 잘못된 문구 출력 가능

 

 

• userInfo가 undefined일 때 0으로 fallback되며 "레벨업까지 5명!"이 먼저 출력됩니다.
• 이후 서버 응답 도착 후 "레벨업까지 2명!" 등의 진짜 값으로 갱신되지만, 사용자 입장에서는 깜빡인 것처럼 보였습니다.

 

 

 

 

🔍 증상 2. 아바타 이미지가 default-moono.png로 깜빡였다가 실제 이미지로 바뀜

const characterType = profile?.type?.toLowerCase() ?? "default";
const imageSrc = `/assets/moono/${characterType}-moono.png`;

return (
  <Image src={imageSrc} alt="user-avatar" />
);

 

• useGetUserCharacterProfile(userId)에서 데이터를 아직 받아오기 전에는 undefined로 간주되어 기본값 "default"를 먼저 렌더링
• 실제 이미지 타입이 도착하면 다시 lv1/xxx-moono.png로 바뀌면서 두 번 렌더링
• 이 과정에서 default 이미지가 잠깐 깜빡였다가 교체됨 → UX 저하

 

🔨 개선 코드 1 : 아바타 렌더링 최적화

if (loading) return null; → 로딩 완료 후에만 렌더링 수행

• 아예 데이터가 도착하기 전에는 컴포넌트를 렌더링하지 않음으로써, 사용자가 처음 보는 화면이 완성된 정보 기반으로 안정적으로 보이도록 개선하였습니다.

 

 

🔨 개선 코드 2 : boosterDisplay 깜빡임 방지

const { data: userInfo, isLoading } = useGetUserInfo(userId);

if (isLoading || !userInfo) return null;

const invitedCount = userInfo.invited_count;

const boosterText = invitedCount >= 10
  ? "만렙!"
  : `레벨업까지 ${5 - (invitedCount % 5)}명!`;

 

 

• isLoading 또는 userInfo가 undefined일 때 boosterText를 렌더링하지 않게 하였습니다.
• fallback 값(0명)을 넣는 대신 정확한 invited_count가 도착한 뒤에만 booster 문구를 보여줄 수 있도록 하였습니다.

 

 

---

결과 화면

 

---

 

마치며... 추가로 성능 개선할 점이 없었을까?

우선, 3주라는 짧은 시간동안 기획부터 디자인, 개발, 발표까지 이루어졌기 때문에 굉장히 바빴습니다. 그래서 이번 블로그를 정리하면서 이 기능에서는 더 성능 최적화가 되었을텐데 코드를 이렇게 밖에 못 짰나? 하는 생각이 들었습니다. 아마 웹 개발에 아직 미숙하여 개발 중에 그런 점을 고려하지 않고 완성에만 몰두해서 그런 것 같습니다.

 

우선 지금 생각나는 개선 방향은, 

 

✅ 위치 캐싱 로직 통합하기

중복되는 부분

 

NearbyContent에서 아바타 등장 위치가 서로 겹치지 않기 위해 캐싱하는데, 이 부분이 NearbyContent 에서도 별도로 캐싱하고 있고, NearbyUserAvataer에서도 위치를 계산하고 있습니다.

이 로직을 분리해서 별도 커스텀 훅으로 만들면 더 깔끔하고 중복 계산을 방지할 수 있었을 것 같습니다.

 

---

 

✅ boosterDisplay를  useMemo로 캐싱하여 변경될 때만 재계산하기 + key

 

현재 useMutation으로 실시간 업데이트는 반영했지만 boosterDisplay 자체가 렌더링마다 계속 재계산되는 문제를 발견했습니다.

아직 데이터를 불러오기 전에 렌더링되는 것을 방지하여 텍스트가 깜빡이는 문제는 방지하였지만, 특히 AnimatedCount 애니메이션도 추가 적용하여 숫자가 스크롤되며 올라가는 효과를 추가했는데, 이 내부 애니메이션도 재시작되는... 아주 불필요한 계산이 들어가 있었습니다.

그래서 useMemo를 통해 캐싱하는 방법이 추가로 떠올랐습니다 (물론 시간 없어서 업데이트는 못했지만..)

const boosterDisplay = useMemo(() => {
  ...

}, [localInvitedCount, loading]);

 

그러면 loading 이 완료되었거나, invitedCount 가 변경되었을 때만 boosterDisplay가 재계산되고 애니메이션도 매번 재랜더링되지 않아도 되었을 것 같습니다.

 

추가로 AnimatedCount 자체에서도 useMemo로 감싸면 리렌더링 방지하고, invitedCount 값만 변경될 때 렌더링을 다시 하면 되므로 key에 value로 해당 값이 변경될 때만 재랜더링을 유도하는 방법도 추가하면 좋을 것 같네요.

 

 

 

https://github.com/Ureka-Middle-Team1/moo-mool/issues/216

[FEAT] 근거리 통신_나와 동일한 유형 클릭하면 스탬프 적립 · Issue #216 · Ureka-Middle-Team1/moo-mool