Feat/issue-28

frontend/src/components/roomPreview/CreateRoomPreview.tsx

@@ -15,14 +15,12 @@ interface CreateRoomPreviewProps {
   newRoom: { roomName: string; description:string; owner:string; category: string; capacity: number; };
 }
 
-const CreateRoomPreview: React.FC<CreateRoomPreviewProps> = ({ onClose, onAddRoom, roominfo, username, handleInputChange }) => {
+const CreateRoomPreview: React.FC<CreateRoomPreviewProps> = ({ onClose, roominfo, username, handleInputChange }) => {
   const handleAddRoomClick = async () => {
     try {
-      const roomWithOwner = { ...roominfo, owner: username };
+      const roomWithOwner = { roomName: roominfo.roomName,category:roominfo.hashtag, capacity:roominfo.capacity, description:roominfo.description, owner: username };
       console.log(roomWithOwner);
       await axios.post('http://localhost:8002/chatroom-service/create', roomWithOwner);
-
-      onAddRoom();
       onClose();
     } catch (error) {
       console.error('Error creating room:', error);

frontend/src/components/roomPreview/RoomPreview.tsx

@@ -2,9 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 // import { useNotification } from 'web-notification';
 import axios from "axios"
-import { GetAllRoomsApis } from '../../hooks/useGetAllRoom';
+import { GetAllRoomsApis } from '../../hooks/react-query/useGetAllRoom';
 import { useNavigate } from 'react-router-dom';
-
+import styled from '@emotion/styled';
+import BookmarkSVG from "../../assets/Bookmark.svg"
+import DefaultUserSVG from "../../assets/DefaultUser.svg"
 
 export const RoomPreview = ({roomId, roomName, description, hashtag}:{roomId:string, roomName:string, description:string, hashtag: string}) =>{
 
@@ -31,21 +33,98 @@ export const RoomPreview = ({roomId, roomName, description, hashtag}:{roomId:str
   }
 
   return(
-    <main className="ChattingRoom-wrapper" onClick={handlieRoomClick}>
-      <section className="ChattingRoom-container">
+    <RoomPreviewWrapper onClick={handlieRoomClick}>
         {/* 이미지 썸네일 */}
-        <div className="ChattingRoom-image">
-          {thumbnailUrl && <img src={thumbnailUrl} alt="썸네일" />}
-        </div>
+        <PreviewImg>
+          { thumbnailUrl ? <img src={thumbnailUrl} alt="썸네일" />:<img src={DefaultUserSVG} alt="DefaultUserSVG"/> }
+        </PreviewImg>
 
         {/* 채팅룸 설명 */}
-        <div className="ChattingRoom-detail">
-          <span className="ChattingRoom-title">{roomName}</span><br/>
-          <span className="ChattingRoom-bookmark">즐겨찾기</span><br/>
-          <span className="ChattingRoom-info">{description}</span><br/>
-          <span className=" ChattingRoom-category">{hashtag}</span>
-        </div>
-      </section>
-    </main>
+        <RoomPreviewDetail>
+          <title>
+            <h1>{roomName}</h1>
+            <img src={BookmarkSVG} alt="BookmarkSVG"/>
+          </title>
+          <p>{description}</p>
+          <em>{hashtag}</em>
+        </RoomPreviewDetail>
+    </RoomPreviewWrapper>
   )
-}
+}
+
+const RoomPreviewWrapper = styled.main`
+  width: 100%;
+  min-width: 6.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+
+  cursor: pointer;
+  transition: 0.3s ease;
+
+  &:hover {
+    filter: brightness(0.9);
+  }
+`
+
+const RoomPreviewDetail = styled.section`
+  display: flex;
+  width: 100%;
+  height: 5.3125rem;
+  padding: 0.625rem 1.5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.25rem;
+
+  box-sizing: border-box;
+  color: var(--color-rangoongreen);
+
+  border-radius: 0.0625rem;
+  border: 1px solid var(--color-mercury);
+  background: var(--color-white);
+
+  title{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+  }
+
+  h1 {
+    flex: 1 0 0;
+    margin: 0;
+    font-size: var(--font-size-sm);
+    font-weight: 700;
+    align-self: stretch;
+    align-self: center;
+  }
+
+  p {
+    margin: 0;
+    font-size: var(--font-size-xxs);
+    align-self: stretch;
+  }
+
+  em{
+    font-size: 0.5rem;
+    font-weight: 700;
+    align-self: stretch;
+  }
+`
+
+const PreviewImg = styled.div`
+  width: 100%;
+  min-width: 6.25rem;
+  height: 8.6875rem;
+  flex-shrink: 0;
+  border-radius: 0.3125rem;
+  background: var(--color-white);  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+`

frontend/src/components/roomPreview/RoomPreviewList.tsx

@@ -1,18 +1,20 @@
 import { RoomPreview } from "./RoomPreview";
 import styled from '@emotion/styled';
 import { RoomsInfo } from '../../stores/useRoomStore';
+import { useEffect } from "react";
 
-const RoomPreviewList = () => {
-  const roomsInfo = RoomsInfo.getState();
-  console.log(roomsInfo.rooms);
+const RoomPreviewList = ({ roomsPreviewListData, refetchRooms }) => {
+
+  useEffect(() => {
+    console.log(roomsPreviewListData);
+  }, [roomsPreviewListData]); 
 
 	return (
 		<RoomPreviewListWrapper>
-			<RoomPreviewListSection>
 
 				{/* Grid */}
         <ChattingRoomListGridContainer>
-         {roomsInfo.rooms.map((item, index) => (
+         {roomsPreviewListData?.map((item, index) => (
             <RoomPreview
               key={index}
               roomId={item.roomId}
@@ -23,7 +25,6 @@ const RoomPreviewList = () => {
           ))}
         </ChattingRoomListGridContainer>
 
-			</RoomPreviewListSection>
 		</RoomPreviewListWrapper>
 	)
 };
@@ -32,14 +33,18 @@ export default RoomPreviewList;
 
 
 const RoomPreviewListWrapper = styled.main`
-
-`
-
-const RoomPreviewListSection = styled.section`
+  height: 100%;
+  width: 100%;
 `
 
-export const ChattingRoomListGridContainer = styled.div`
+const ChattingRoomListGridContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
   display: grid;
+  align-items: start;
+  justify-items: start; 
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
+  padding: 1.25rem;
 `;

frontend/src/hooks/useAuthQuery.ts → frontend/src/hooks/react-query/useAuthQuery.ts

@@ -1,5 +1,5 @@
 import axios,{ AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { UserInfo } from '../stores/UserInfoStore';
+import { UserInfo } from '../../stores/UserInfoStore';
 import { useQuery } from '@tanstack/react-query';
 
 

frontend/src/hooks/useGetAllRoom.ts → frontend/src/hooks/react-query/useGetAllRoom.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { RoomsInfo } from '../stores/useRoomStore';
+import { RoomsInfo } from '../../stores/useRoomStore';
 import { useStore } from 'zustand';
 
 export const GetAllRoomsApis = {

frontend/src/pages/SigninPage.tsx

@@ -5,7 +5,7 @@ import { Button } from "../components/common/Button";
 import { NaverLoginButton } from "../components/auth/NaverLoginButton";
 import { useStore } from "zustand";
 import { UserInfoStore } from "../stores/UserInfoStore";
-import { AuthApis }  from "../hooks/useAuthQuery";
+import { AuthApis }  from "../hooks/react-query/useAuthQuery";
 import styled from "@emotion/styled"
 import LogoSVG from "../assets/Logo.svg"
 import TadakTadakSVG from "../assets/TadakTadak.svg"

frontend/src/pages/SignupPage.tsx

@@ -6,7 +6,7 @@ import { useStore } from "zustand";
 import { UserInfoStore } from "../stores/UserInfoStore";
 import styled from '@emotion/styled';
 
-import { AuthApis }  from "../hooks/useAuthQuery";
+import { AuthApis }  from "../hooks/react-query/useAuthQuery";
 
 type isValid = {
     passwordIsValid: boolean;

frontend/src/pages/WelcomePage.tsx

@@ -15,19 +15,19 @@ import { RoomInfo, RoomsInfo } from '../stores/useRoomStore';
 import { UserInfoStore } from '../stores/UserInfoStore';
 import RoomPreviewList from '../components/roomPreview/RoomPreviewList';
 import CreateRoomPreview from '../components/roomPreview/CreateRoomPreview';
-import { GetAllRoomsApis } from '../hooks/useGetAllRoom';
+import { GetAllRoomsApis } from '../hooks/react-query/useGetAllRoom';
 
 const WelcomePage = () => {
+	const navigate = useNavigate();
+	const clientConnected = useRef(false);
+	const userinfo = useStore(UserInfoStore);
+	const roominfo = useStore(RoomInfo);
 	const [loginText, setLoginText] = useState('Login');
 	const [showToast, setShowToast] = useState(false);
+	const [CreateRoom, setCreateRoom] = useState(false);
 	const { connect, unconnect } = useLoginWebSocket();
-	const navigate = useNavigate();
 	const accessToken = localStorage.getItem('Accesstoken');
 	const isLoggedIn = accessToken !== null;
-	const clientConnected = useRef(false);
-	const [CreateRoom, setCreateRoom] = useState(false);
-	const userinfo = useStore(UserInfoStore);
-	const roominfo = useStore(RoomInfo);
 
 	const handleCreateRoom = () => {
 		setCreateRoom(true);
@@ -36,7 +36,6 @@ const WelcomePage = () => {
 	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const { name, value } = e.target;
 		roominfo.update(name, value);
-		console.log(roominfo);
 	};
 
 	const {
@@ -50,10 +49,25 @@ const WelcomePage = () => {
 		enabled: isLoggedIn,
 	});
 
+
+    const {
+		data: roomsPreviewListData,
+		isLoading: roomsIsLoading,
+		isError: roomsIsError,
+		refetch: refetchRooms,
+	} = useQuery({
+		queryKey: ['roomPreviewListData'],
+		queryFn: GetAllRoomsApis.getAllRooms,
+		staleTime: 3000,
+		enabled: isLoggedIn,
+		refetchInterval: 3000,
+	});
+
 	useEffect(() => {
 		if (isLoggedIn && userData) {
 			setLoginText('Logout');
 			connect(userData.username);
+            userinfo.updateUsername(userData.username);
 		} else {
 			setLoginText('Login');
 		}
@@ -82,37 +96,6 @@ const WelcomePage = () => {
 		}
 	};
 
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				const data = await getUserData();
-				userinfo.updateUsername(data.username);
-			} catch (error) {
-				console.error(error);
-			}
-		};
-
-		fetchData();
-	}, []);
-
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				const res = await GetAllRoomsApis.getAllRooms();
-			} catch (error) {
-				console.error('Error fetching rooms:', error);
-			}
-		};
-
-		fetchData();
-
-		const intervalId = setInterval(() => {
-			fetchData();
-		}, 10000);
-
-		return () => clearInterval(intervalId);
-	}, []);
-
 	return (
 		<>
 			{/* 전체 컴포넌트와 토스트 컴포넌트 함께 보여주기 */}
@@ -167,7 +150,7 @@ const WelcomePage = () => {
 						/>
 					</SideWrapper>
 					<MainContainer>
-						<RoomPreviewList />
+						<RoomPreviewList roomsPreviewListData={roomsPreviewListData} refetchRooms={refetchRooms}/>
 						{CreateRoom && (
 							<CreateRoomPreview
 								onClose={() => setCreateRoom(false)}
@@ -182,7 +165,6 @@ const WelcomePage = () => {
 			{showToast && <Toast messageType="logout" type="success" />}
 		</>
 	);
-
 };
 
 export default WelcomePage;
@@ -206,6 +188,8 @@ const LogoDiv = styled.div`
 `;
 
 const MainContainer = styled.div`
+	height:100%;
+	width: calc(100% - 11.5rem);
 	${FlexCenterWrapper}
 `;