이 글은 온핏(On-Fit) 프로젝트의 채팅 기능을 실제로 구현한 과정 전체를 정리한 것이다.

단순히 코드만 나열하는 것이 아니라,

DB 스키마 → Rooms 생성 로직 → Participants 관리 → 채팅방 리스트 API 구성 → 화면 렌더링 → 라우팅 문제 해결 과정까지

실제 구현 흐름을 상세히 기록한다.

---

📌 1. 채팅 기능의 기본 구조

온핏에서 채팅은 게시글(Post) 을 중심으로 이루어진다.

• 사용자가 운동 번개 글(Post)을 올리면
• 해당 게시글에 대해 하나의 채팅방(Room) 을 만든다
• 채팅방에는 참여자(participants) 가 등록된다
• 메시지(messages)가 쌓이고
• 사용자는 내가 참여한 채팅방만 리스트에서 확인한다

즉 구조는 이렇게 된다:

posts ---1:1---> rooms ---1:N---> participants ---1:N---> messages

---

📌 2. Supabase 테이블 설계

posts

컬럼	설명
id (PK)	게시글 ID
title	제목
sport	종목
location	위치
date_time	날짜/시간
level	난이도
author_id	작성자
room_id	해당 게시글과 연결된 채팅방 ID

rooms

컬럼	설명
id (PK)
name	채팅방 이름 (보통 게시글 제목)
post_id	어떤 게시글의 채팅방인지
host_id	방장
created_at	생성 시각

participants

컬럼	설명
room_id	어떤 방인지
user_id	유저가 누구인지
role	host / member
joined_at	참여 시각

messages

컬럼	설명
room_id	어떤 방인지
sender_id	보낸 사람
content	텍스트
created_at	시간

---

📌 3. 게시글 → 채팅방 생성 API 만들기

게시글이 생성되면 동시에 채팅방도 생성하고 싶기 때문에

아래와 같은 API를 만들었다.

/api/chat/route.ts

import { createSupabaseServerClient } from "@/lib/route-helpers";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const { postId } = await req.json();

    if (!postId) {
      return NextResponse.json({ error: "Missing postId" }, { status: 400 });
    }

    const supabase = await createSupabaseServerClient();

    // 1) 게시글 정보 조회
    const { data: post } = await supabase
      .from("posts")
      .select("title, author_id")
      .eq("id", postId)
      .single();

    // 2) 채팅방 생성
    const { data: room } = await supabase
      .from("rooms")
      .insert({
        name: post.title,
        post_id: postId,
        host_id: post.author_id,
        created_at: new Date().toISOString(),
      })
      .select("id")
      .single();

    // 3) 호스트를 participants 테이블에 자동 등록
    await supabase.from("participants").insert({
      room_id: room.id,
      user_id: post.author_id,
      role: "host",
      joined_at: new Date().toISOString(),
    });

    // 4) posts에 room_id 업데이트
    await supabase
      .from("posts")
      .update({ room_id: room.id })
      .eq("id", postId);

    return NextResponse.json({ roomId: room.id }, { status: 201 });
  } catch (err) {
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  }
}

---

📌 4. “내가 참여한 채팅방 리스트” API 만들기

이 API는 가장 중요한 부분이다.

프론트의 채팅 리스트 화면에서 필요한 모든 정보를 조합해 반환한다.

• participants에서 방 목록 가져오기
• rooms 테이블 연결
• posts 테이블 연결하여 제목, 스포츠 종류 가져오기
• messages 테이블에서 각 방의 “마지막 메시지”까지 가져오기

/api/chat/rooms GET

👉 이 API는 매우 복잡하지만 채팅 리스트 화면을 위해 반드시 필요하다.

최종 완성본은 아래와 같다:

import {
  createSupabaseServerClient,
  fail,
  ok,
  requireUserOr401,
} from "@/lib/route-helpers";

export async function GET() {
  const supabase = await createSupabaseServerClient();

  // 1) 로그인 유저 검사
  const { ok: hasUser, user, response } = await requireUserOr401(supabase);
  if (!hasUser || !user) return response;

  // 2) 내가 참여한 방(room_id) 가져오기
  const { data: myParticipants } = await supabase
    .from("participants")
    .select("room_id, role, joined_at")
    .eq("user_id", user.id);

  if (!myParticipants || myParticipants.length === 0)
    return ok({ items: [] });

  const roomIds = myParticipants.map((p) => p.room_id);

  // 3) rooms 테이블
  const { data: rooms } = await supabase
    .from("rooms")
    .select("id, name, post_id, created_at")
    .in("id", roomIds);

  // 4) posts 테이블 연결 (sport, title)
  const postIds = rooms.map((r) => r.post_id);

  const { data: posts } = await supabase
    .from("posts")
    .select("id, title, sport, date_time")
    .in("id", postIds);

  const postsById: any = {};
  posts?.forEach((post) => (postsById[post.id] = post));

  // 5) 마지막 메시지 가져오기
  const { data: messages } = await supabase
    .from("messages")
    .select("room_id, content, created_at")
    .in("room_id", roomIds)
    .order("created_at", { ascending: false });

  const lastMessageByRoom: any = {};
  messages?.forEach((msg) => {
    if (!lastMessageByRoom[msg.room_id]) {
      lastMessageByRoom[msg.room_id] = msg;
    }
  });

  // 6) participants 데이터로 role, 참여자 수 계산
  const countByRoom: any = {};
  const roleByRoom: any = {};
  myParticipants.forEach((p) => {
    countByRoom[p.room_id] = (countByRoom[p.room_id] || 0) + 1;
    roleByRoom[p.room_id] = p.role;
  });

  // 7) 최종 응답 변환
  const items = rooms.map((room) => {
    const post = postsById[room.post_id];
    const lastMsg = lastMessageByRoom[room.id];

    return {
      roomId: room.id,
      title: post?.title ?? room.name,
      sport: post?.sport ?? null,
      tag: post?.sport ?? null,
      currentParticipants: countByRoom[room.id] ?? 1,
      lastMessage: lastMsg?.content ?? "",
      lastMessageTime: lastMsg?.created_at ?? room.created_at,
      role: roleByRoom[room.id],
    };
  });

  return ok({ items });
}

---

📌 5. 채팅방 리스트 UI 생성

/chat/list/page.tsx

import ChatRoomList from "../components/ChatRoomList";

export default function ChatListPage() {
  return <ChatRoomList />;
}

리스트 UI는 이렇게 구성했다:

ChatRoomList.tsx

'use client';

import { useEffect, useState } from 'react';
import { api } from '@/lib/axios';
import ChatRoomCard from './ChatRoomCard';

export default function ChatRoomList() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    api.get('/api/chat/rooms').then((res) => {
      setRooms(res.data.items);
    });
  }, []);

  return (
    <div>
      {rooms.map((room) => (
        <ChatRoomCardkey={room.roomId}
          roomId={room.roomId}
          title={room.title}
          member={room.currentParticipants}
          time={room.lastMessageTime}
          chatting={room.lastMessage}
          tag={room.tag}
        />
      ))}
    </div>
  );
}

---

📌 6. 채팅 카드 컴포넌트 & 페이지 이동 처리

처음에는 useRouter()를 써서 push 했는데

Next.js App Router에서는 종종

NextRouter was not mounted

에러가 났다.

그래서 Link 방식으로 해결했다.

ChatRoomCard.tsx

'use client'

import Link from "next/link"
import { Card, CardHeader } from "@/components/common/Card";
import StatusBadge from "@/components/main/StatusBadge";
import Image from "next/image";

export default function ChatRoomCard({
  roomId,
  title,
  member,
  time,
  chatting,
  tag
}) {
  return (
    <Link href={`/chat/${roomId}`} className="block">
      <Card className="m-4 relative cursor-pointer">
        <CardHeader className="flex-row gap-3 items-start">
          <Image src="/onfit.png" width={40} height={40} alt="profile" />

          <div className="gap-2">
            <div className="flex flex-row gap-2">
              <h3>{title}</h3>
              <StatusBadge>{member}</StatusBadge>
              <span className="text-xs absolute right-3">{time}</span>
            </div>

            <p className="text-xs mt-2 mb-2">{chatting}</p>
            <StatusBadge>{tag}</StatusBadge>
          </div>
        </CardHeader>
      </Card>
    </Link>
  );
}

---

📌 7. /chat/[id] 상세 페이지

여기서는

• 해당 방의 참가자 목록
• 게시글 정보
• 메시지 목록

을 API 하나로 불러온다.

(추후 메시지 실시간 기능(Supabase Realtime)을 붙일 수 있다.)

---

📌 8. 레이아웃 문제 해결 과정 (/chat에서 헤더 안 나옴)

처음 구조는:

app/(main)/layout.tsx → MainLayoutShell

하지만 MainLayoutShell 안에서 아래처럼 조건이 들어있었다:

pathname.startsWith('/chat') ? <></> : <Header/>

이 조건 때문에

/chat, /chat/list, /chat/123 모두 헤더가 보이지 않는 문제 발생.

나는 원하는 동작을 다시 정리했다:

경로	헤더	BottomNav
/chat	O	O
/chat/...	X	X
그 외	O	O

그래서 최종 MainLayoutShell은 이렇게 수정했다:

const isChatRoot = pathname === "/chat";
const isChatOther = pathname.startsWith("/chat") && !isChatRoot;

그 후 조건 분기 전체를 수정해서

원하는 UI 구조를 완벽하게 해결했다.

---

📌 9. 채팅방 sport 표시 버그 문제 해결

처음에는 카드 아래에 sport 태그가 안 나왔다.

콘솔로 확인해보니:

sport: null
tag: null

원인은 API에서 posts 데이터를 select 할 때

존재하지 않는 컬럼 date, time 을 select 하고 있어서 쿼리가 실패했고

결과적으로 postsById가 빈 객체가 되어 sport가 null 로 떨어진 것이었다.

해결: 컬럼명을 date_time으로 수정

.select("id, title, sport, location, date_time")

이후 sport 정상 출력.

---

📌 10. 정리 – 배운 점

✔ Supabase를 쓸 때 SELECT 컬럼명은 반드시 실제 스키마와 일치해야 한다

오타나 잘못된 컬럼 때문에 join 전체가 실패할 수 있다.

✔ App Router에서는 router.push보다 Link가 더 안정적이다

특히 layout 기준이 복잡할 때는 Link가 가장 믿을 수 있다.

✔ layout에서 pathname 조건 분기 실수하면 전체 UI가 아닌 곳에서 사라진다

✔ participants 테이블은 모든 채팅 로직의 핵심이다

내가 참여한 방을 필터링하는 모든 기반.

✔ API는 작업 흐름 단위로 나누는 것이 좋다

• 게시글 → 방 생성
• 내가 참여한 방 리스트
• 방 상세
• 메시지 전송 이렇게 분리하는 것이 유지보수에도 좋다.
  

---

✨ 마무리

이번 채팅 기능 구현은 꽤 많은 구조를 다뤘지만

결과적으로 Supabase + Next.js App Router 조합으로

정말 강력하고 깔끔한 실시간 채팅 기반 구조를 만들 수 있었다.