diff --git a/.gitignore b/.gitignore index e1e23ecc..383bb151 100644 --- a/.gitignore +++ b/.gitignore @@ -31,7 +31,6 @@ dist-ssr # Api Keys .env -src/Router.tsx node_modules/vite/bin/vite.js # snapshots file diff --git a/src/Router.tsx b/src/Router.tsx new file mode 100644 index 00000000..58ce686e --- /dev/null +++ b/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:
}, + { path: '/login', element: }, + // { path: '/auth/kakao', element: }, + { path: '/signup', element: }, + { path: '/write', element: }, + { path: '/wishlist', element: }, + { path: '/saleslist', element: }, + { path: '/purchaselist', element: }, + { path: '/mypage', element: }, + { path: '/item:productId', element: }, + { path: '/item/update/:productId', element: }, + { path: '/edit_info', element: }, + { path: '/chat/room', element: }, + { path: '/chat/:chatRoomId', element: }, + { path: '/chat/create/:idx', element: }, + { path: '/item/:id', element: }, + { path: '/category', element: }, + { path: '/category/:categoryId', element: }, + { path: '/search', element: }, + { + path: 'products', + element: , + children: [{ path: '', element: }], + }, + { path: '/seller', element: }, +]; diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx index 9d60fe67..0b1a1983 100644 --- a/src/components/Chat/index.tsx +++ b/src/components/Chat/index.tsx @@ -148,7 +148,11 @@ const Chat: React.FC = ({ chatId }) => { - + >; + chatContainerRef: React.RefObject; } -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 ( - + {chatList?.map((message, index) => { const isMyMessage = message.senderId === newUserId; const showDate = isNewDay(index, message); diff --git a/src/components/ChatForm/index.tsx b/src/components/ChatForm/index.tsx index 078f05af..1f73c600 100644 --- a/src/components/ChatForm/index.tsx +++ b/src/components/ChatForm/index.tsx @@ -35,7 +35,7 @@ export default function ChatForm({ items }: ChatListProps) { {item.chatPartnerName} - {formatDateToNow(item?.currentChatAt)} + {formatDateToNow(item?.createdAt)} {item.message}