채팅방-갤러리 탭 분리하기

이중 탭으로 구성된 채팅방 UI가 필요하다.

현재 구조에서 채팅방을 두 개의 탭으로 나누고, 각 탭에서 서로 다른 콘텐츠(채팅 메시지 + 입력창 / 채팅방 갤러리)를 표시하려면 탭 컴포넌트를 별도로 분리하는 것이 유지보수성과 재사용성을 높이는 데 유리하다.

탭 컴포넌트 분리하기

1. 탭의 전환을 관리하는 상태와 UI를 캡슐화한 Tabs 컴포넌트를 생성하자. 각 탭의 콘텐츠는 props.children 또는 특정 컴포넌트를 렌더링하도록 설계할 수 있다.
2. ChatRoomPage 컴포넌트에서는 탭 컴포넌트를 사용해 두 개의 탭을 표시할 것이다.
   • 탭 1: 채팅 메시지, 채팅 입력창
   • 탭 2: 갤러리
3. Tabs 컴포넌트 만들기

import { useState } from "react";

interface TabProps {
  labels: string[];
  children: React.ReactNode[];
}

const Tabs = ({ labels, children }: TabProps) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div className="flex border-b">
        {labels.map((label, index) => (
          <button
            key={index}
            className={`px-4 py-2 ${activeTab === index ? "border-b-2 border-blue-500" : ""}`}
            onClick={() => setActiveTab(index)}
          >
            {label}
          </button>
        ))}
      </div>
      <div className="p-4">{children[activeTab]}</div>
    </div>
  );
};

export default Tabs;

 

4. 페이지에 적용하기

import Tabs from "./_components/Tabs";

export default function ChatRoomPage({ params }: ChatRoomPageProps) {
  const { id: roomId } = params;
  const currentUser = useAuthStore((state) => state.user);

  return (
    <div className="p-5 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4 text-center">채팅방</h1>
      {currentUser ? (
        <Tabs labels={["Chat", "Gallery"]}>
          {/* 탭 1: 채팅 */}
          <div>
            <ChatMessages roomId={roomId} currentUserId={currentUser.id} />
            <ChatInput roomId={roomId} memberId={currentUser.id} />
          </div>
          {/* 탭 2: 갤러리 */}
          <div>
            <p>채팅방에서 업로드한 이미지들을 표시합니다.</p>
            {/* 갤러리 컴포넌트 추가 */}
          </div>
        </Tabs>
      ) : (
        <p className="text-center text-gray-500">
          로그인 후에 메시지를 입력할 수 있습니다.
        </p>
      )}
    </div>
  );
}