🔧 Fix, ♻️ Refactor : 메인 및 검색 페이지 개선

🔧 Fix, ♻️ Refactor : 메인 및 검색 페이지 개선

src/apis/chat.ts

@@ -1,4 +1,8 @@
-import { ChatListResponse, ChatMessageResponse } from '@typings/types';
+import {
+  ChatListBusiness,
+  ChatListMember,
+  ChatMessageResponse,
+} from '@typings/types';
 import { authInstance } from '.';
 
 // 메시지 기록 조회
@@ -9,8 +13,14 @@ export const getMessage = async (
   return response.data;
 };
 
-// 채팅방 목록 조회
-export const getChatList = async (): Promise<ChatListResponse[]> => {
+// 채팅방 목록 조회 (사용자)
+export const getChatListMember = async (): Promise<ChatListMember[]> => {
+  const response = await authInstance.get('/api/v1/chat/room');
+  return response.data;
+};
+
+// 채팅방 목록 조회 (사업자)
+export const getChatListBusiness = async (): Promise<ChatListBusiness[]> => {
   const response = await authInstance.get('/api/v1/chat/room');
   return response.data;
 };

src/apis/workplace.ts

@@ -174,7 +174,7 @@ export const getPossibleTime = async (
   studyRoomId: number,
   checkDate: Date,
 ): Promise<PossibleTime> => {
-  const formattedDate = checkDate.toISOString().split('T')[0];
+  const formattedDate = `${checkDate.getFullYear()}-${(checkDate.getMonth() + 1).toString().padStart(2, '0')}-${checkDate.getDate().toString().padStart(2, '0')}`;
   const response = await defaultInstance.get(
     `api/v1/studyroom/search/${studyRoomId}`,
     {

src/layouts/MainLayout.tsx

@@ -1,11 +1,15 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
 
 interface MainLayoutProps {
   children: ReactNode;
   headerType?: 'both' | 'default';
 }
 
 const MainLayout = ({ children, headerType = 'default' }: MainLayoutProps) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   const paddingTop = headerType === 'both' ? 'pt-[132px]' : 'pt-[93px]';
 
   return (

src/pages/ChatListPage/components/ChatCard.tsx

@@ -1,17 +1,18 @@
-import { ChatListResponse } from '@typings/types';
+import { ChatListBusiness, ChatListMember } from '@typings/types';
 import { getDateFunction } from '@utils/formatTime';
 import { GrNext } from 'react-icons/gr';
 import { useNavigate } from 'react-router-dom';
 
 interface ChatCardProps {
-  chat: ChatListResponse;
+  chat: ChatListMember | ChatListBusiness;
 }
 const ChatCard = (props: ChatCardProps) => {
   const { chat } = props;
-
+  const userName =
+    'memberId' in chat ? chat.memberNickname : chat.workplaceName;
   const navigate = useNavigate();
   const handleClickChat = () => {
-    navigate(`/chat/${chat.roomId}`, { state: chat.name });
+    navigate(`/chat/${chat.roomId}`, { state: userName });
   };
 
   return (
@@ -26,16 +27,15 @@ const ChatCard = (props: ChatCardProps) => {
             type='button'
             className='flex items-center gap-1 text-sm font-medium'
           >
-            {chat.name} <GrNext className='text-xs' />
+            {userName} <GrNext className='text-xs' />
           </button>
           <span className='text-xs text-subfont'>
             {getDateFunction(chat.updatedAt)}
           </span>
         </div>
         <div className='flex items-center justify-between'>
           <div className='w-64 text-xs text-focusColor'>
-            안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.
-            안녕하세요. 안녕하세요. 안녕하세요. 안.....
+            {chat.messageContent}
           </div>
           <span className='h-2 w-2 rounded-full bg-[#F83A3A]' />
         </div>

src/pages/ChatListPage/hooks/useGetChatList.ts

@@ -1,12 +1,16 @@
-import { getChatList } from '@apis/chat';
+import { getChatListBusiness, getChatListMember } from '@apis/chat';
 import { useQuery } from '@tanstack/react-query';
-import { ChatListResponse } from '@typings/types';
+import { ChatListBusiness, ChatListMember } from '@typings/types';
+import { getRole } from '@utils/auth';
 
 const useGetChatList = () => {
-  const { data, isLoading, isError } = useQuery<ChatListResponse[]>({
-    queryKey: ['chatList'],
-    queryFn: () => getChatList(),
-  });
+  const role = getRole();
+  const queryKey = ['chatList', role];
+  const queryFn =
+    role === 'ROLE_USER' ? getChatListMember : getChatListBusiness;
+  const { data, isLoading, isError } = useQuery<
+    ChatListMember[] | ChatListBusiness[]
+  >({ queryKey, queryFn });
 
   return { data: data ?? [], isLoading, isError };
 };

src/pages/ChatPage/components/ReceiveMessage.tsx

@@ -6,11 +6,11 @@ interface ReceiveMessageProps {
 
 const ReceiveMessage = (props: ReceiveMessageProps) => {
   const { message } = props;
-  const formattedTime = message.timestamp
-    .split('T')[1]
-    .split(':')
-    .slice(0, 2)
-    .join(':');
+  const formattedTime = message.timestamp;
+  // .split('T')[1]
+  // .split(':')
+  // .slice(0, 2)
+  // .join(':');
   return (
     <div className='flex w-custom justify-start'>
       <div className='flex items-end gap-2'>

src/pages/ChatPage/components/SendMessage.tsx

@@ -6,11 +6,11 @@ interface SendMessageProps {
 
 const SendMessage = (props: SendMessageProps) => {
   const { message } = props;
-  const formattedTime = message.timestamp
-    .split('T')[1]
-    .split(':')
-    .slice(0, 2)
-    .join(':');
+  const formattedTime = message.timestamp;
+  // .split('T')[1]
+  // .split(':')
+  // .slice(0, 2)
+  // .join(':');
   return (
     <div className='flex w-custom justify-end'>
       <div className='flex items-end gap-2'>

src/pages/ChatPage/index.tsx

@@ -60,7 +60,7 @@ const ChatPage = () => {
       client.onConnect = () => {
         console.log('Connected');
 
-        client.subscribe(`/sub/chat`, (message: IMessage) => {
+        client.subscribe(`/sub/chat/${roomId}`, (message: IMessage) => {
           try {
             const newMessage = JSON.parse(message.body);
             setMessages((prevMessages) => [...prevMessages, newMessage]);
@@ -94,7 +94,7 @@ const ChatPage = () => {
         content: inputValue,
         roomId: parseInt(roomId || '', 10),
         timestamp: getDatetoLocalDate(new Date()),
-        senderType: role === 'ROLE_USER' ? 'member' : 'business',
+        senderType: role === 'ROLE_USER' ? 'MEMBER' : 'BUSINESS',
       };
 
       stompClient.publish({

src/pages/DetailPage/components/DetailNavigation.tsx

@@ -1,4 +1,7 @@
 import { postCreateChatRoom } from '@apis/chat';
+import useAuthStore from '@store/authStore';
+import { getRole } from '@utils/auth';
+import { useEffect, useState } from 'react';
 import { IoChatbubbleEllipsesOutline } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
@@ -23,30 +26,43 @@ const DetailNavigation = ({
     navigate(`/reservation/${selectedRoomId}`);
   };
 
+  // 사용자 / 사업자인지 확인
+  const { isLogin } = useAuthStore();
+  const [isUser, setIsUser] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (isLogin) {
+      const role = getRole();
+      if (role === 'ROLE_USER') {
+        setIsUser(true);
+      }
+    }
+  }, [isLogin]);
+
   return (
     <div className='fixed bottom-0 z-10 flex h-[94px] w-[375px] items-center justify-center border-t border-subfont bg-white pb-[16px]'>
-      <div className='flex'>
-        <button
-          type='button'
-          className='flex h-[48px] w-[100px] items-center justify-center rounded-[8px] border border-primary'
-          onClick={handleClickChat}
-        >
-          <IoChatbubbleEllipsesOutline
-            size='20px'
-            color='#50BEAD'
-          />
-          <p className='ml-[4px] text-[16px] font-medium text-primary'>
-            1 : 1 문의
-          </p>
-        </button>
+      <div className='flex items-center gap-2'>
+        {isUser && (
+          <button
+            type='button'
+            className='flex h-[48px] w-[100px] items-center justify-center rounded-[8px] border border-primary'
+            onClick={handleClickChat}
+          >
+            <IoChatbubbleEllipsesOutline
+              size='20px'
+              color='#50BEAD'
+            />
+            <p className='ml-[4px] text-[16px] font-medium text-primary'>
+              1 : 1 문의
+            </p>
+          </button>
+        )}
+
         <button
           type='button'
-          className='ml-[8px] w-[222px] rounded-[8px] text-white'
+          className={`h-[48px] rounded-[8px] text-white ${isBtnDisabled ? 'bg-subfont' : 'bg-primary'} ${isUser ? 'w-[222px]' : 'pointer-events-none w-custom bg-subfont'}`}
           disabled={isBtnDisabled}
           onClick={handleSelectRoom}
-          style={{
-            backgroundColor: isBtnDisabled === false ? '#50BEAD' : '#c3c3c3',
-          }}
         >
           룸 선택하기
         </button>

src/pages/DetailPage/components/RoomSelect.tsx

@@ -24,7 +24,7 @@ const RoomSelect = ({
 
   return (
     <div className='w-custom'>
-      {data ? (
+      {data && data.length > 0 ? (
         data.map((item) => (
           <button
             key={item.studyRoomId}
@@ -42,7 +42,9 @@ const RoomSelect = ({
           </button>
         ))
       ) : (
-        <p>조회된 룸이 없습니다.</p>
+        <div className='flex h-[150px] w-full items-center justify-center font-normal text-subfont'>
+          조회된 룸이 없습니다.
+        </div>
       )}
     </div>
   );

src/pages/DetailPage/components/TabComponent.tsx

@@ -61,7 +61,7 @@ const TabComponent = ({
         )}
         {activeTab === 2 &&
           (workplaceDetailData.reviewCount === 0 ? (
-            <div className='text-[16px] font-normal text-subfont'>
+            <div className='flex h-[150px] w-full items-center justify-center font-normal text-subfont'>
               등록된 리뷰가 없습니다.
             </div>
           ) : (

src/pages/MainPage/components/KakaoMap.tsx

@@ -77,6 +77,9 @@ const KakaoMap = (props: KakaoMapProps) => {
     setIsModalOpen(false);
   }, []);
 
+  // 지도에 표시할 데이터
+  const markerData = activeTab === '주변 스터디룸' ? data : recommendData;
+
   return (
     <div className='relative h-[298px] w-[375px]'>
       <Map
@@ -90,27 +93,9 @@ const KakaoMap = (props: KakaoMapProps) => {
           setCenterPosition({ lat: latlng.getLat(), lng: latlng.getLng() });
         }}
       >
-        {activeTab === '주변 스터디룸' &&
-          data &&
-          data.length > 0 &&
-          data.map((item) => (
-            <MapMarker
-              onClick={() => handleMarkerClick(item)}
-              key={item.positionLat}
-              position={{ lat: item.positionLat, lng: item.positionLon }}
-              image={{
-                src: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png',
-                size: {
-                  width: 24,
-                  height: 35,
-                },
-              }}
-            />
-          ))}
-        {activeTab === '맞춤형 추천' &&
-          recommendData &&
-          recommendData.length > 0 &&
-          recommendData.map((item) => (
+        {markerData &&
+          markerData.length > 0 &&
+          markerData.map((item) => (
             <MapMarker
               onClick={() => handleMarkerClick(item)}
               key={item.positionLat}

src/pages/MainPage/hooks/useGetWorkplaceData.tsx

@@ -1,6 +1,7 @@
 import { getRecommendWorkPlace, postPositionWorkPlace } from '@apis/workplace';
-import { useQuery } from '@tanstack/react-query';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import {
+  CenterPosition,
   GetPositionWorkPlaceData,
   MapPosition,
   NowPosition,
@@ -9,25 +10,31 @@ import {
 export const useGetWorkplaceData = (
   nowPosition: NowPosition,
   mapPosition: MapPosition,
+  centerPosition: CenterPosition,
 ) => {
   const isMapEnabled =
     mapPosition.topRight.lat !== 0 || mapPosition.bottomLeft.lat !== 0;
   const { data, isLoading, isError, refetch } = useQuery<
     GetPositionWorkPlaceData[]
   >({
-    queryKey: ['nearWorkplace', nowPosition, mapPosition],
+    queryKey: ['nearWorkplace', nowPosition, mapPosition, centerPosition],
     queryFn: () => postPositionWorkPlace({ nowPosition, mapPosition }),
     enabled: isMapEnabled,
+    placeholderData: keepPreviousData,
   });
 
   return { data, isLoading, isError, refetch };
 };
 
-export const useGetRecommendData = (isLogin: boolean, isUser: boolean) => {
+export const useGetRecommendData = (
+  isLogin: boolean,
+  isUser: boolean,
+  activeTab: string,
+) => {
   const { data, isLoading, isError } = useQuery<GetPositionWorkPlaceData[]>({
     queryKey: ['recommendWorkPlace', isLogin, isUser],
     queryFn: () => getRecommendWorkPlace(),
-    enabled: isLogin && isUser,
+    enabled: isLogin && isUser && activeTab !== '주변 스터디룸',
   });
 
   return {

src/pages/MainPage/index.tsx

@@ -13,7 +13,7 @@ import {
 } from './hooks/useGetWorkplaceData';
 
 const MainPage = () => {
-  const { mapPosition, nowPosition } = usePositionStore();
+  const { mapPosition, nowPosition, centerPosition } = usePositionStore();
 
   const position = {
     latitude: nowPosition.center.lat,
@@ -24,6 +24,7 @@ const MainPage = () => {
   const { data, isLoading, isError } = useGetWorkplaceData(
     position,
     mapPosition,
+    centerPosition,
   );
 
   // 비로그인 / 사업자 / 사용자 확인
@@ -39,15 +40,15 @@ const MainPage = () => {
     }
   }, [isLogin]);
 
+  // 선택한 탭
+  const [activeTab, setActiveTab] = useState('주변 스터디룸');
+
   // 사업장 추천 데이터
   const {
     data: recommendData,
     isLoading: isRecommendLoading,
     isError: isRecommendError,
-  } = useGetRecommendData(isLogin, isUser);
-
-  // 선택한 탭
-  const [activeTab, setActiveTab] = useState('주변 스터디룸');
+  } = useGetRecommendData(isLogin, isUser, activeTab);
 
   return (
     <>