fix : 채팅 높이수정, 스크롤 맨 밑으로 고정, 채팅방 생성 시 날짜 수정

.gitignore

@@ -31,7 +31,6 @@ dist-ssr
 
 # Api Keys
 .env
-src/Router.tsx
 node_modules/vite/bin/vite.js
 
 # snapshots file

src/Router.tsx

@@ -0,0 +1,48 @@
+import { lazy } from 'react';
+
+const Main = lazy(() => import('./pages/Main'));
+const Login = lazy(() => import('./pages/LogIn'));
+// const KakaoLogin = lazy(() => import('./pages/KakaoLogin'));
+const SignUp = lazy(() => import('./pages/SignUp'));
+const WritePost = lazy(() => import('./pages/WritePost'));
+const CategoryPage = lazy(() => import('./pages/CategoryPage'));
+const WishList = lazy(() => import('./pages/WishList'));
+const SalesList = lazy(() => import('./pages/SalesList'));
+const PurchaseList = lazy(() => import('./pages/PurchaseList'));
+const MyPage = lazy(() => import('./pages/MyPage'));
+const EditInfo = lazy(() => import('./pages/EditInfo'));
+const SearchPage = lazy(() => import('./pages/SearchPage'));
+const CategoryList = lazy(() => import('./components/CategoryList'));
+const SellerPage = lazy(() => import('./pages/SellerPage'));
+const ChatList = lazy(() => import('./pages/ChatList'));
+const ItemDetail = lazy(() => import('./pages/ItemDetail'));
+const ItemUpdate = lazy(() => import('./pages/ItemUpadate'));
+const ChattingPage = lazy(() => import('./pages/ChattingPage'));
+
+export const routes = [
+  { path: '/', element: <Main /> },
+  { path: '/login', element: <Login /> },
+  //   { path: '/auth/kakao', element: <KakaoLogin /> },
+  { path: '/signup', element: <SignUp /> },
+  { path: '/write', element: <WritePost /> },
+  { path: '/wishlist', element: <WishList /> },
+  { path: '/saleslist', element: <SalesList /> },
+  { path: '/purchaselist', element: <PurchaseList /> },
+  { path: '/mypage', element: <MyPage /> },
+  { path: '/item:productId', element: <ItemDetail /> },
+  { path: '/item/update/:productId', element: <ItemUpdate /> },
+  { path: '/edit_info', element: <EditInfo /> },
+  { path: '/chat/room', element: <ChatList /> },
+  { path: '/chat/:chatRoomId', element: <ChattingPage /> },
+  { path: '/chat/create/:idx', element: <ChattingPage /> },
+  { path: '/item/:id', element: <ItemDetail /> },
+  { path: '/category', element: <CategoryList /> },
+  { path: '/category/:categoryId', element: <CategoryPage /> },
+  { path: '/search', element: <SearchPage /> },
+  {
+    path: 'products',
+    element: <SearchPage />,
+    children: [{ path: '', element: <SearchPage /> }],
+  },
+  { path: '/seller', element: <SellerPage /> },
+];

src/components/Chat/index.tsx

@@ -148,7 +148,11 @@ const Chat: React.FC<ChatProps> = ({ chatId }) => {
             </S.Div>
           </S.Container>
 
-          <ChatContainer chatList={chatList} setChatList={setChatList} />
+          <ChatContainer
+            chatList={chatList}
+            setChatList={setChatList}
+            chatContainerRef={chatContainerRef}
+          />
           <S.BottomContainer>
             <S.ChatDiv>
               <S.Input

src/components/Chat/styles.tsx

@@ -79,7 +79,8 @@ export const ChatDiv = styled.div`
 export const Input = styled.input`
   border-radius: 10px;
   width: 45rem;
-  height: 3rem;
+  height: 3.5rem;
+  /* min-height: 15px; */
   margin-left: 5px;
   font-style: normal;
   font-weight: 700;

src/components/ChatContainer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import * as S from './styles';
 import moment from 'moment';
 import 'moment/locale/ko';
@@ -10,11 +10,14 @@ import { ChatInfoData } from '../Chat';
 interface IChatContainer {
   chatList: ChatInfoData[];
   setChatList: React.Dispatch<React.SetStateAction<ChatInfoData[]>>;
+  chatContainerRef: React.RefObject<HTMLDivElement>;
 }
-const BASE_URL = 'http://techeermarket.ap-northeast-2.elasticbeanstalk.com/api';
-const ChatContainer = ({ chatList, setChatList }: IChatContainer) => {
+
+const BASE_URL = import.meta.env.VITE_APP_URL;
+const ChatContainer = ({ chatList, setChatList, chatContainerRef }: IChatContainer) => {
   const [IsUserId, setIsUserId] = useState(null);
   const [loading, setLoading] = useState(true);
+
   useEffect(() => {
     const fetchUserId = async () => {
       try {
@@ -32,7 +35,11 @@ const ChatContainer = ({ chatList, setChatList }: IChatContainer) => {
     fetchUserId();
   }, []);
 
-  useEffect(() => {}, [chatList]);
+  useEffect(() => {
+    if (chatContainerRef.current) {
+      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+    }
+  }, [chatList, chatContainerRef]);
 
   const formatDate = (date: string) => moment(date).format('YYYY년 MM월 DD일');
 
@@ -48,7 +55,7 @@ const ChatContainer = ({ chatList, setChatList }: IChatContainer) => {
     newUserId = parseInt(userIdFromLocalStorage, 10);
   }
   return (
-    <S.Container>
+    <S.Container ref={chatContainerRef}>
       {chatList?.map((message, index) => {
         const isMyMessage = message.senderId === newUserId;
         const showDate = isNewDay(index, message);

src/components/ChatForm/index.tsx

@@ -35,7 +35,7 @@ export default function ChatForm({ items }: ChatListProps) {
           <S.Texts>
             <S.TopText>
               <S.NameText>{item.chatPartnerName}</S.NameText>
-              <S.DayText>{formatDateToNow(item?.currentChatAt)}</S.DayText>
+              <S.DayText>{formatDateToNow(item?.createdAt)}</S.DayText>
             </S.TopText>
             <S.Chat>{item.message}</S.Chat>
           </S.Texts>