Feat/issue-88

frontend/src/components/chat/ChatForm.tsx

@@ -1,9 +1,12 @@
-import { useRef } from 'react';
 import * as StompJs from '@stomp/stompjs';
-import { useChatStore } from '../../stores/useChatStore';
 import styled from '@emotion/styled';
 import ChatMessage from './ChatMessage';
 
+import { useRef } from 'react';
+import { useChatStore } from '../../stores/useChatStore';
+import { ColumnDisplay, OverFlowScrollbar } from '../../styles/ComponentLayout';
+import { bodyMessage } from '../../interface/CommonInterface';
+
 type StompClient = StompJs.Client;
 
 const ChatForm = () => {
@@ -33,7 +36,7 @@ const ChatForm = () => {
 
 	const subscribe = () => {
 		if (client.current) {
-			client.current.subscribe('/topic/public/5', (message: any) => {
+			client.current.subscribe('/topic/public/5', (message: bodyMessage) => {
 				const receivedMessage = JSON.parse(message.body);
 				setMessages((prevMessages) => [
 					...prevMessages,
@@ -108,32 +111,13 @@ const InputContainer = styled.footer`
 `;
 
 const ChattingContainer = styled.section`
+	${OverFlowScrollbar}
 	width: 100%;
 	height: 100%;
 	background-color: var(--color-white);
-	overflow: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.5rem;
-		height: 0rem;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: var(--color-crusta);
-		border-radius: 0.25rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background-color: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background-color: var(--color-pumpkin);
-	}
 `;
 
 const ChatWrapper = styled.div`
+	${ColumnDisplay}
 	height: calc(100% - 3.125rem);
-	display: flex;
-	flex-direction: column;
 `;

frontend/src/components/chat/ChatRoom.tsx

@@ -1,15 +1,18 @@
 import ChatForm from './ChatForm';
 import styled from '@emotion/styled';
+import { ChattingRoomHeader } from '../../styles/ComponentLayout';
 
-const ChatRoom: React.FC = () => {
+const ChatRoom = () => {
 	return (
 		<ChattingRoom>
-			<ChattingRoomHeader>채팅방</ChattingRoomHeader>
+			<ChatHeader>채팅방</ChatHeader>
 			<ChatForm />
 		</ChattingRoom>
 	);
 };
 
+export default ChatRoom;
+
 const ChattingRoom = styled.div`
 	width: 100%;
 	height: 100%;
@@ -19,17 +22,13 @@ const ChattingRoom = styled.div`
 	/* border: 1px solid var(--color-rangoongreen); */
 `;
 
-const ChattingRoomHeader = styled.header`
+const ChatHeader = styled.header`
+	${ChattingRoomHeader}
 	width: 100%;
 	height: 3.125rem;
-	background-color: var(--color-pumpkin);
-	color: var(--color-white);
-	border-radius: 5px 5px 0px 0px;
 	font-size: var(--font-size-md);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 `;
-
-export default ChatRoom;

frontend/src/components/user/List.tsx

@@ -0,0 +1,91 @@
+import * as StompJs from '@stomp/stompjs';
+import styled from '@emotion/styled';
+import UserProfile from './UserProfile';
+
+import { ColumnDisplay, OverFlowScrollbar } from '../../styles/ComponentLayout';
+import { useUserListStore } from '../../stores/useUserListStore';
+import { useChatStore } from '../../stores/useChatStore';
+import { useRef } from 'react';
+import { bodyMessage } from '../../interface/CommonInterface';
+
+type StompClient = StompJs.Client;
+
+const Users = () => {
+	const { id, setId } = useChatStore();
+	const { userlist, setUserList } = useUserListStore();
+
+	const client = useRef<StompClient | null>(null);
+
+	const connect = () => {
+		if (client.current) {
+			client.current.deactivate();
+		}
+		client.current = new StompJs.Client({
+			brokerURL: 'ws://localhost:8010/ws',
+			onConnect: () => {
+				console.log('success');
+				testSubscribe();
+			},
+			debug: (str: string) => {
+				console.log(str);
+			},
+			reconnectDelay: 5000,
+			heartbeatIncoming: 4000,
+			heartbeatOutgoing: 4000,
+		});
+
+		client.current.activate();
+	};
+
+	const connectId = () => {
+		connect();
+
+		return () => {
+			if (client.current) {
+				client.current.deactivate();
+			}
+		};
+	};
+
+	const testSubscribe = () => {
+		if (client.current) {
+			const users = {
+				userName: id,
+			};
+
+			client.current.publish({
+				destination: '/app/users',
+				body: JSON.stringify(users),
+			});
+
+			client.current.subscribe('/topic/users', (userlist: bodyMessage) => {
+				const receivedUserList = JSON.parse(userlist.body);
+				setUserList((prevUserList) => [
+					...prevUserList,
+					{
+						userName: receivedUserList.userName,
+					},
+				]);
+			});
+		}
+	};
+
+	return (
+		<ChatWrapper>
+			<UserProfile userlist={userlist} />
+			<div>
+				<input type="text" value={id} onChange={(e) => setId(e.target.value)} />
+				<button onClick={connectId}>Connect</button>
+			</div>
+		</ChatWrapper>
+	);
+};
+
+export default Users;
+
+const ChatWrapper = styled.div`
+	${ColumnDisplay}
+	${OverFlowScrollbar}
+	height: calc(100% - 0.8125rem);
+	overflow: auto;
+`;

frontend/src/components/user/UserList.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import { ChattingRoomHeader } from '../../styles/ComponentLayout';
+import List from './List';
+
+const UserList = () => {
+	return (
+		<UserListContainer>
+			<ListHeader>커뮤니티</ListHeader>
+			<List />
+		</UserListContainer>
+	);
+};
+
+export default UserList;
+
+const UserListContainer = styled.div`
+	width: 100%;
+	height: 100%;
+	border-radius: 5px 5px 0px 0px;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-white);
+	/* border: 1px solid var(--color-rangoongreen); */
+`;
+
+const ListHeader = styled.header`
+	${ChattingRoomHeader}
+	width: calc(100% - 1.25rem);
+	height: 0.8125rem;
+	padding: 0.5rem 0.625rem 0.5rem 0.625rem;
+	font-size: var(--font-size-xxs);
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+	align-items: center;
+`;

frontend/src/components/user/UserProfile.tsx

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+import { UserList } from '../../interface/UserListInterface';
+
+import { ColumnDisplay } from '../../styles/ComponentLayout';
+
+type UserListProps = {
+	userlist: UserList[];
+};
+
+const UserProfile = ({ userlist }: UserListProps) => {
+	return (
+		<>
+			{DUMMY_DATA.map((item, index) => (
+				<ProfileContainer key={index}>
+					<Text>{item.userName}</Text>
+					<SmallText>이것이 취업을 위한 코딩테스트다.-파이썬편-</SmallText>
+				</ProfileContainer>
+			))}
+		</>
+	);
+};
+
+export default UserProfile;
+
+const ProfileContainer = styled.div`
+	${ColumnDisplay}
+	width: calc(100% - 1.25rem);
+	height: 1.875rem;
+	padding: 0.625rem;
+	border-bottom: 1px solid var(--color-mercury);
+`;
+
+const Text = styled.span`
+	font-size: var(--font-size-xs);
+`;
+
+const SmallText = styled.span`
+	width: 100%;
+	margin-top: 0.5rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font-size: var(--font-size-xxs);
+	color: var(--color-orient);
+`;
+
+const DUMMY_DATA: UserList[] = [
+	{
+		userName: '[email protected]',
+	},
+	{
+		userName: '[email protected]',
+	},
+	{
+		userName: '[email protected]',
+	},
+	{
+		userName: '[email protected]',
+	},
+	{
+		userName: '[email protected]',
+	},
+];

frontend/src/interface/CommonInterface.ts

@@ -0,0 +1,3 @@
+export interface bodyMessage {
+	body: string;
+}

frontend/src/interface/UserListInterface.ts

@@ -0,0 +1,3 @@
+export interface UserList {
+	userName: string;
+}

frontend/src/pages/ChattingRoomPage.tsx

@@ -2,6 +2,7 @@
 import { Container, Wrapper, SideWrapper, MainWrapper } from '../styles/Layout';
 import styled from '@emotion/styled';
 import ChatRoom from '../components/chat/ChatRoom';
+import UserList from '../components/user/UserList';
 
 const ChattingRoomPage = () => {
 	return (
@@ -14,7 +15,9 @@ const ChattingRoomPage = () => {
 						<ChatRoom />
 					</ChatWrapper>
 				</MainWrapper>
-				<SideWrapper>인원 목록</SideWrapper>
+				<SideWrapper>
+					<UserList />
+				</SideWrapper>
 			</Wrapper>
 		</Container>
 	);

frontend/src/stores/useUserListStore.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { UserList } from '../interface/UserListInterface';
+
+type UserListStore = {
+	userlist: UserList[];
+	setUserList: (userlist: (prev: UserList[]) => UserList[]) => void;
+};
+
+export const useUserListStore = create<UserListStore>((set) => ({
+	userlist: [],
+	setUserList: (userlist) => set((state) => ({ userlist: userlist(state.userlist) })),
+}));