feat: 진행중인 방 상세보기 및 독서메이트 조회 API 연동 구현

src/api/rooms/getRoomMembers.ts

@@ -0,0 +1,54 @@
+import { apiClient } from '../index';
+
+export interface RoomMember {
+  userId: number;
+  nickname: string;
+  imageUrl: string;
+  aliasName: string;
+  followerCount: number;
+}
+
+// 독서메이트 조회 응답 타입
+export interface RoomMembersResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    userList: RoomMember[];
+  };
+}
+
+// 기존 Member 타입과 연결하기 위한 변환 함수
+export interface Member {
+  id: string;
+  nickname: string;
+  role: string;
+  followersCount?: number;
+  profileImageUrl?: string;
+}
+
+export const convertRoomMembersToMembers = (roomMembers: RoomMember[]): Member[] => {
+  const convertedMembers = roomMembers.map(member => {
+    const convertedMember: Member = {
+      id: member.userId.toString(),
+      nickname: member.nickname || '익명',
+      role: member.aliasName || '독서메이트',
+      followersCount: member.followerCount || 0,
+      profileImageUrl: member.imageUrl || undefined,
+    };
+
+    return convertedMember;
+  });
+
+  return convertedMembers;
+};
+
+export const getRoomMembers = async (roomId: number): Promise<RoomMembersResponse> => {
+  try {
+    const response = await apiClient.get<RoomMembersResponse>(`/rooms/${roomId}/users`);
+    return response.data;
+  } catch (error) {
+    console.error('독서메이트 조회 API 오류:', error);
+    throw error;
+  }
+};

src/api/rooms/getRoomPlaying.ts

@@ -0,0 +1,72 @@
+import { apiClient } from '../index';
+
+// 투표 아이템 타입
+export interface VoteItem {
+  itemName: string;
+}
+
+// 현재 투표 타입
+export interface CurrentVote {
+  content: string;
+  page: number;
+  isOverview: boolean;
+  voteItems: VoteItem[];
+}
+
+// 진행중인 방 상세 정보 응답 타입
+export interface RoomPlayingResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    isHost: boolean;
+    roomId: number;
+    roomName: string;
+    roomImageUrl: string;
+    isPublic: boolean;
+    progressStartDate: string;
+    progressEndDate: string;
+    category: string;
+    categoryColor: string;
+    roomDescription: string;
+    memberCount: number;
+    recruitCount: number;
+    isbn: string;
+    bookTitle: string;
+    authorName: string;
+    currentPage: number;
+    userPercentage: number;
+    currentVotes: CurrentVote[];
+  };
+}
+
+// HotTopicSection에서 사용할 Poll 타입 (API 데이터를 변환)
+export interface Poll {
+  id: string;
+  question: string;
+  options: { id: string; text: string }[];
+  pageNumber: number;
+}
+
+// API 데이터를 Poll 형태로 변환하는 함수
+export const convertVotesToPolls = (currentVotes: CurrentVote[]): Poll[] => {
+  return currentVotes.map((vote, index) => ({
+    id: index.toString(),
+    question: vote.content,
+    options: vote.voteItems.map((item, itemIndex) => ({
+      id: itemIndex.toString(),
+      text: item.itemName,
+    })),
+    pageNumber: vote.page,
+  }));
+};
+
+export const getRoomPlaying = async (roomId: number): Promise<RoomPlayingResponse> => {
+  try {
+    const response = await apiClient.get<RoomPlayingResponse>(`/rooms/${roomId}/playing`);
+    return response.data;
+  } catch (error) {
+    console.error('진행중인 방 상세 정보 조회 API 오류:', error);
+    throw error;
+  }
+};

src/components/members/MemberList.styled.ts

@@ -48,8 +48,8 @@ export const ProfileSection = styled.div`
 `;
 
 export const ProfileImage = styled.div`
-  width: 48px;
-  height: 48px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   background-color: ${colors.grey['400']};
   flex-shrink: 0;

src/components/members/MemberList.tsx

@@ -1,7 +1,8 @@
 import { useNavigate } from 'react-router-dom';
 import type { KeyboardEvent } from 'react';
+import styled from '@emotion/styled';
 import rightChevron from '../../assets/member/right-chevron.svg';
-import type { Member } from '../../mocks/members.mock';
+import type { Member } from '@/api/rooms/getRoomMembers';
 import {
   Container,
   MemberItem,
@@ -47,7 +48,11 @@ const MemberList = ({ members, onMemberClick }: MemberListProps) => {
           }}
         >
           <ProfileSection>
-            <ProfileImage />
+            {member.profileImageUrl ? (
+              <ProfileImageWithSrc src={member.profileImageUrl} alt={`${member.nickname} 프로필`} />
+            ) : (
+              <ProfileImage />
+            )}
             <MemberInfo>
               <MemberName>{member.nickname}</MemberName>
               <MemberRole>{member.role}</MemberRole>
@@ -63,4 +68,14 @@ const MemberList = ({ members, onMemberClick }: MemberListProps) => {
   );
 };
 
+// 프로필 이미지가 있을 때 사용하는 스타일드 컴포넌트
+const ProfileImageWithSrc = styled.img`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: var(--color-grey-400);
+  flex-shrink: 0;
+  object-fit: cover;
+`;
+
 export default MemberList;