Merge pull request #102 from Leets-Official/100-fix/판매-상태-오류-수정

[Fix] 판매 상태 오류 수정

Author: KyeongJooni

src/pages/chat/ui/ChatConversation.tsx

@@ -104,7 +104,7 @@ export const ChatConversation = ({
             })}
           </div>
 
-          <div className="mt-xs xl:mt-xl w-full max-w-[647px]">
+          <div className="mt-xs xl:mt-xl w-full max-w-[647px] xl:sticky xl:bottom-4">
             <ChatInput placeholder="메시지를 입력하세요." onSend={onSend} />
           </div>
         </>

src/pages/chat/ui/ChatPage.tsx

@@ -24,7 +24,7 @@ const ChatPage = () => {
 
   return (
     <div className="w-full bg-white">
-      <div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col bg-white xl:min-h-[1024px]">
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col bg-white">
         <main className="md:px-xxxl flex flex-col px-(--margin-l) xl:flex-1 xl:px-0">
           <section className="mx-auto flex w-full max-w-[1200px] flex-col gap-8 xl:flex-1 xl:flex-row xl:gap-0">
             <div className={hasSelection ? 'hidden xl:block' : 'block h-fit'}>

src/pages/chat/ui/ChatThreadList.tsx

@@ -30,7 +30,7 @@ export const ChatThreadList = ({ rooms, selectedRoomId, onSelect }: ChatThreadLi
               type="button"
               onClick={() => onSelect(room.roomId)}
               className={cn(
-                'gap-xxs rounded-m px-l py-l flex h-[130px] w-full items-center text-left transition-colors',
+                'gap-xxs rounded-m px-l py-l flex h-[130px] w-full cursor-pointer items-center text-left transition-colors',
                 isActive ? 'bg-gray-50' : 'hover:bg-gray-50'
               )}
               aria-pressed={isActive}

src/shared/apis/chat/queries.ts

@@ -1,5 +1,6 @@
 import { useAuthStore } from '@shared/stores';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 import { checkUnreadMessages, createOrGetRoom, getChatMessages, getChatRooms, getRoomByPostId } from './api';
 import { chatKeys } from './keys';
 
@@ -12,11 +13,21 @@ export const useChatRoomsQuery = () => {
 };
 
 export const useChatMessagesQuery = (roomId: number | null) => {
-  return useQuery({
+  const queryClient = useQueryClient();
+
+  const query = useQuery({
     queryKey: chatKeys.messages(roomId!),
     queryFn: () => getChatMessages(roomId!),
     enabled: roomId !== null,
   });
+
+  useEffect(() => {
+    if (roomId !== null && query.isSuccess) {
+      queryClient.invalidateQueries({ queryKey: chatKeys.unread() });
+    }
+  }, [roomId, query.isSuccess, queryClient]);
+
+  return query;
 };
 
 export const useCreateRoomMutation = () => {

src/shared/apis/sell/queries.ts

@@ -1,4 +1,5 @@
 import { buyKeys } from '@shared/apis/buy/keys';
+import { chatKeys } from '@shared/apis/chat/keys';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   activePost,
@@ -66,7 +67,9 @@ export const useReservePostMutation = () => {
   return useMutation({
     mutationFn: (request: ReservePostRequest) => reservePost(request),
     onSuccess: (_, variables) => {
+      queryClient.removeQueries({ queryKey: buyKeys.lists() });
       queryClient.invalidateQueries({ queryKey: buyKeys.detail(variables.postId) });
+      queryClient.invalidateQueries({ queryKey: chatKeys.roomByPost(variables.postId) });
     },
   });
 };
@@ -76,7 +79,9 @@ export const useCompletePostMutation = () => {
   return useMutation({
     mutationFn: (request: CompletePostRequest) => completePost(request),
     onSuccess: (_, variables) => {
+      queryClient.removeQueries({ queryKey: buyKeys.lists() });
       queryClient.invalidateQueries({ queryKey: buyKeys.detail(variables.postId) });
+      queryClient.invalidateQueries({ queryKey: chatKeys.roomByPost(variables.postId) });
     },
   });
 };
@@ -86,7 +91,9 @@ export const useActivePostMutation = () => {
   return useMutation({
     mutationFn: (request: ActivePostRequest) => activePost(request),
     onSuccess: (_, variables) => {
+      queryClient.removeQueries({ queryKey: buyKeys.lists() });
       queryClient.invalidateQueries({ queryKey: buyKeys.detail(variables.postId) });
+      queryClient.invalidateQueries({ queryKey: chatKeys.roomByPost(variables.postId) });
     },
   });
 };

src/shared/ui/ChatInput/ChatInput.variants.ts

@@ -35,6 +35,7 @@ export const chatInputVariants = tv({
         icon: ['[&_.send-circle]:fill-white', '[&_.send-circle]:stroke-gray-400', '[&_.send-arrow]:stroke-gray-400'],
       },
       active: {
+        button: ['cursor-pointer'],
         icon: ['[&_.send-circle]:fill-brand-primary', '[&_.send-circle]:stroke-black', '[&_.send-arrow]:stroke-black'],
       },
     },

src/shared/ui/Header/Header.variants.ts

@@ -31,7 +31,7 @@ export const headerVariants = tv({
       'xl:pl-[120px]',
       'xl:pr-[120px]',
     ],
-    logo: ['w-[192px]', 'h-[36px]', 'shrink-0'],
+    logo: ['w-[160px]', 'xl:w-[192px]', 'h-[36px]', 'shrink-0'],
 
     // Desktop Navigation
     desktopNav: ['hidden', 'xl:flex', 'items-center', 'gap-[93px]'],