“나를 제외한 멤버 불러오기 + 모집 기간 마감 시 버튼 활성화까지”

최근에 온핏(On-Fit) 프로젝트에서 “함께 운동한 멤버에게 칭찬 리뷰 남기기” 기능을 개발하게 됐다.

개발하면서 자연스럽게 Next.js App Router, Supabase, API 설계, 그리고 UX적인 고민까지 이어졌고,

내가 어떤 과정을 거쳐 기능을 완성했는지 기록해보고자 한다.

이번에 구현한 핵심 기능은 크게 두 가지다.

1. 리뷰 페이지에서 ‘나’를 제외한 참여자 목록만 불러오기
2. 채팅방에서 모집 기간(= 운동 시작 시간)이 지났을 때만 ‘리뷰하기 / 나가기’ 버튼 활성화

이 두 가지가 합쳐져야 전체 리뷰 플로우가 자연스럽게 연결된다.

---

1. 리뷰 페이지: “나를 제외한 참여자만 가져오기”

리뷰는 다른 사람에게만 남길 수 있기 때문에,

API에서 참여자 정보 받을 때 내 정보는 제외해야 한다.

원래 참여자 조회는 이렇게 되어 있었다.

const { data, error } = await supabase
  .from("participants")
  .select(`
    user_id,
    role,
    joined_at,
    profiles (
      id,
      nickname,
      profile_image
    )
  `)
  .eq("room_id", roomId);

문제는 나까지 포함되어 있다는 것.

처음엔 프론트에서 필터링할까 했지만,

API 단에서 필터링하는 게 더 깔끔했고, 협업 시에도 명확했다.

그래서 API에 excludeSelf=true 옵션을 주면 나를 빼도록 개선했다.

const { ok: hasUser, user, response } = await requireUserOr401(supabase);
if (!hasUser || !user) return response;

const { data, error } = await supabase
  .from("participants")
  .select("user_id, role, profiles(nickname, profile_image)")
  .eq("room_id", roomId)
  .neq("user_id", user.id);  // 🎯 나 제외

이제 리뷰 페이지에서는 이렇게 불러오기만 하면 된다.

api.get("/api/chat/participants", {
  params: { roomId, excludeSelf: true },
});

이걸 적용하니 리뷰 페이지에는 정말 "다른 멤버들만" 뜨게 되었고,

UX적으로도 훨씬 자연스러워졌다.

---

2. 모집 기간이 끝나면만 버튼 활성화

다음으로 고민한 건 언제 리뷰를 할 수 있게 할 것인가였다.

온핏에서는 post의 date_time이 운동 시작 시간이자 모집 마감 시간이다.

• 모집 전 → 그냥 채팅방 기능만 가능
• 모집 후 → 참가자 상태 확정 → 리뷰, 방 나가기 가능

즉, 조건은 간단하다.

posts.date_time < 현재 시각(now) 일 때만 버튼을 보여주자

그러기 위해 /api/chat/rooms 응답에

각 room의 모집 마감 시간과 canReview 여부를 추가했다.

const now = new Date();

const recruitEndAt = post?.date_time ?? null;

const canReview =
  recruitEndAt !== null ? new Date(recruitEndAt) <= now : false;

rooms API에서 내려주는 최종 데이터는 이렇게 변했다.

{
  "roomId": "123",
  "title": "강남 배드민턴",
  "currentParticipants": 4,
  "lastMessage": "내일 뵈어요!",
  "recruitEndAt": "2025-01-21T18:00:00Z",
  "canReview": true}

프론트에서는 그냥 이 값만 보고 렌더링하면 된다.

---

3. ChatRoomCard에서 조건부 렌더링

{canReview && (
  <div className="mt-3 flex justify-end gap-2">
    <Button variant="outline" size="sm" onClick={handleLeaveClick}>
      나가기
    </Button>
    <Button variant="default" size="sm" onClick={handleReviewClick}>
      리뷰하러가기
    </Button>
  </div>
)}

canReview 결과가 true일 때만 버튼이 보인다!

이제 모집이 끝나기 전에는

• “리뷰하기” 버튼 없음
• “나가기” 버튼 없음

모집이 끝난 후에는

• 두 버튼 모두 나타남

아주 자연스러운 UX 흐름.

---

4. 방 나가기 기능과 새로고침 문제 해결

처음에는 나가기 후 router.refresh()를 사용했는데,

ChatRoomList가 클라이언트 컴포넌트(useEffect + axios)라서 새로고침처럼 보이지 않았다.

그래서 아래처럼 state에서 해당 room을 직접 제거하는 방식으로 해결했다.

onLeave={(roomId) => {
  setRooms(prev => prev.filter(r => r.roomId !== roomId));
}}

결과적으로 즉시 UI에서 사라지고, 훨씬 자연스러운 UX가 완성되었다.

---

✨ 이번 작업에서 얻은 인사이트

1. 서버에서 처리할 수 있는 것은 서버에서 처리하자

• “나 제외하기”는 API 단에서 처리하는 것이 가장 깔끔하다.

2. 클라이언트 상태 관리 때문에 router.refresh()가 안 먹힐 수 있다

• App Router라고 해도 클라 컴포넌트에서 axios 쓰면 state 기반이기 때문에 서버 새로고침이 의미 없을 때가 있다.
  

3. 도메인 로직은 API에서 계산해서 내려주는 게 좋다

• 모집 마감 여부(canReview)를 프론트에서 매번 계산하는 대신 API에서 처리하면 UI 코드가 훨씬 간결해진다.
  

---

🔥 마무리

이번 기능은 단순히 UI 하나 추가하는 것처럼 보였지만

“데이터 흐름 → API 설계 → UI 조건 분기 → UX 자연스러움”까지

전반적인 로직을 다시 정비하는 계기가 되었다.

특히:

• 참여자 불러올 때 나를 제외하는 처리
• 모집 마감 시점 계산해서 기능 활성화
• 방 나가기 후 자연스러운 리스트 갱신

이 세 가지가 조화롭게 동작하도록 만들면서

도메인 주도적인 설계의 중요성을 다시 체감할 수 있었다.

앞으로는 “리뷰 점수 시각화”, “리뷰 알림”, “리뷰 통계” 같은 기능도 추가해볼 계획이다.