[FE] FEAT: 채팅 소켓 연결 #193

src/frontend/src/api/endpoints/room/room.api.ts

@@ -1,5 +1,12 @@
 import instance from '@/api/axios.instance';
-import { PlaylistDto, RoomRequestDto, MyRoomDto, RoomDto, CurrentRoomDto } from './room.interface';
+import {
+  PlaylistDto,
+  RoomRequestDto,
+  MyRoomDto,
+  RoomDto,
+  CurrentRoomDto,
+  ReceiveMessageDto,
+} from './room.interface';
 
 export const roomApi = {
   // 방 생성
@@ -41,6 +48,14 @@ export const roomApi = {
   //   return data;
   // },
 
+  // 메시지 조회
+  getMessages: async (roomId: number, cursor?: number, limit?: number) => {
+    const { data } = await instance.get<ReceiveMessageDto[]>(`/messages/${roomId}`, {
+      params: { cursor, limit: limit ?? 10 },
+    });
+    return data;
+  },
+
   // 방 참여자 조회
   getParticipants: async (roomId: string) => {
     const { data } = await instance.get(`/rooms/participants`, { params: { roomId } });

src/frontend/src/api/endpoints/room/room.interface.ts

@@ -66,3 +66,18 @@ export interface CurrentRoomDto {
     playlist: CurrentRoomPlaylistDto[];
   };
 }
+
+export interface SendMessageDto {
+  roomId: number;
+  userId: number;
+  nickname: string | null;
+  role: number;
+  profileImageUrl: string | null;
+  content: string | null;
+  message: string;
+}
+
+export interface ReceiveMessageDto extends SendMessageDto {
+  id: string;
+  timestamp: number;
+}

src/frontend/src/components/Modal/RoomCreateModal/index.tsx

@@ -24,6 +24,7 @@ interface IRoomCreateModal {
 
 export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
   const titleRef = useRef<HTMLInputElement>(null);
+  const descriptionRef = useRef<HTMLTextAreaElement>(null);
   const [isPublic, setIsPublic] = useState(true);
   const [titleLength, setTitleLength] = useState(0);
   const createRoom = useCreateRoom();
@@ -50,7 +51,7 @@ export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
 
     createRoom.mutate({
       title: titleRef.current?.value || '',
-      description: '',
+      description: descriptionRef.current?.value || '',
       isPublic: isPublic,
     });
     onCancel();
@@ -81,7 +82,7 @@ export const RoomCreateModal = ({ onCancel }: IRoomCreateModal) => {
           required
         />
         <TitleLength>{`${titleLength} / 60`}</TitleLength>
-        <TextArea placeholder="방 설명" rows={4} />
+        <TextArea placeholder="방 설명" rows={4} ref={descriptionRef} />
         <PrivacyToggleContainer>
           <PrivacyButton $active={isPublic} onClick={() => setIsPublic(true)}>
             {isPublic ? (

src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname/index.tsx

@@ -34,7 +34,7 @@ export const ChatNickname = (props: IChatNickname) => {
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 `;
 
 const Img = styled.img``;

src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.css.ts

@@ -9,6 +9,7 @@ export const Profile = styled.img`
   width: 40px;
   height: 40px;
   margin-right: 4px;
+  border-radius: 10px;
 `;
 export const ChatContainer = styled.div`
   display: flex;
@@ -18,10 +19,11 @@ export const Title = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-bottom: 4px;
 `;
 export const Title__Time = styled.div`
   font-size: 12px;
   color: #888888;
-  margin-left: 4px;
+  margin-left: 8px;
 `;
 export const ChatText = styled.div``;

src/frontend/src/components/Sidebar/Chating/ChatMessages/ChatLayout/index.tsx

@@ -1,25 +1,19 @@
-import ProfileImg from '@/assets/img/ProfileImg.svg';
 import { Wrapper, Profile, ChatContainer, Title, Title__Time, ChatText } from './index.css';
-import { UserRole } from '@/types/enums/UserRole';
 import { ChatNickname } from '@/components/Sidebar/Chating/ChatMessages/ChatLayout/ChatNickname';
+import { ReceiveMessageDto } from '@/api/endpoints/room/room.interface';
+import { formatDateToKorean } from '@/utils/dateUtils';
+import DefaultProfile from '@/assets/img/DefaultProfile.svg';
 
-interface IChat {
-  role: UserRole;
-  nickname: string;
-  time: string;
-  text: string;
-}
-
-export const ChatLayout = (props: IChat) => {
+export const ChatLayout = ({ message }: { message: ReceiveMessageDto }) => {
   return (
     <Wrapper>
-      <Profile className="Profile" src={ProfileImg} />
+      <Profile className="Profile" src={message.profileImageUrl ?? DefaultProfile} />
       <ChatContainer>
         <Title>
-          <ChatNickname role={props.role} nickname={props.nickname} />
-          <Title__Time>{props.time}</Title__Time>
+          <ChatNickname role={message.role} nickname={message.nickname ?? '알수없음'} />
+          <Title__Time>{formatDateToKorean(message.timestamp ?? new Date().getTime())}</Title__Time>
         </Title>
-        <ChatText>{props.text}</ChatText>
+        <ChatText>{message.message}</ChatText>
       </ChatContainer>
     </Wrapper>
   );

src/frontend/src/components/Sidebar/Chating/index.css.ts

@@ -7,6 +7,7 @@ export const ChatContainer = styled.div`
   background-color: #ffffff;
   border: 1px solid #d4d4d4;
   border-radius: 10px;
+  position: relative;
 `;
 
 export const ChatScrollArea = styled.div`
@@ -99,3 +100,34 @@ export const ChatInputButton = styled.button`
 export const Blank = styled.div<{ $blankPadding: string }>`
   padding-bottom: ${({ $blankPadding }) => $blankPadding};
 `;
+
+export const ScrollButton = styled.button`
+  position: absolute;
+  bottom: 70px;
+  right: 15px;
+  z-index: 100;
+  background-color: var(--palette-primary);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  opacity: 0.9;
+  border: none;
+  border-radius: 50%;
+  padding: 5px 10px;
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+
+  & > span {
+    position: absolute;
+    right: -0.5rem;
+    top: -0.5rem;
+    background-color: var(--palette-accent-redOrange);
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    color: #fff;
+    font-weight: 500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;