Skip to content

Commit

Permalink
Merge branch 'feature/120' of https://github.com/catchroom/FE_CatchRoom…
Browse files Browse the repository at this point in the history 
… into feature/#180
  • Loading branch information
@LikeFireAndSky
LikeFireAndSky committed Jan 19, 2024
2 parents 6457249 + f0cc8e0 commit f3bc56b
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 91 deletions.
23 changes: 13 additions & 10 deletions api/chat/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ const accessToken = nookies.get(null)['accessToken'];
const ACCESSTOKEN = '6231025e-0347-4ae3-9fdd-dd4e6cbb5abe';

// 1. 참여중인 채팅방 리스트 보기
export const loadedChatList = async (userId: string) => {
const res = await fetch(`/v1/chat/room/${userId}`, {
export const loadedChatList = async () => {
const res = await fetch('https://catchroom.xyz/v1/chat/room/list', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand All @@ -23,7 +23,7 @@ export const creatChatRoom = async (
sellerId: string,
productId: string,
) => {
const res = await fetch(`/v1/chat/room/create`, {
const res = await fetch(`https://catchroom.xyz/v1/chat/room/create`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand All @@ -38,7 +38,7 @@ export const creatChatRoom = async (

// 3. 채팅 내용 불러오기
export const loadedChatMessage = async (roomId: string) => {
const res = await fetch(`/v1/chat/find?id=${roomId}`, {
const res = await fetch(`http://catchroom.xyz/v1/chat/find?id=${roomId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Expand All @@ -52,13 +52,16 @@ export const loadedChatMessage = async (roomId: string) => {

// 4. 채팅방 내부 정보 불러오기
export const loadedChatInfo = async (roomId: string) => {
const res = await fetch(`/v1/chat/room?roomId=${roomId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`,
const res = await fetch(
`https://catchroom.xyz/v1/chat/room?roomId=${roomId}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`,
},
},
});
);

const data = await res.json();
console.log(data);
Expand Down
113 changes: 55 additions & 58 deletions app/chat/chatRoom/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
// 'use client';
// import React, { useState } from 'react';
// import ProductInfo from '@/components/chat/chatRoom/productInfo';
// import Send from '@/components/chat/chatRoom/send';
// import Date from '@/components/chat/chatRoom/date';
// import Header from '@/components/common/header';
// import MessageList from '@/components/chat/chatRoom/messageList';
// import WebSocketConnection from '@/components/chat/chatRoom/WebSocketConnection/WebSocketConnection';
// import { MessageProps } from '@/types/chat/chatRoom/types';
// // eslint-disable-next-line
// import { loadedChatMessage, loadedChatInfo } from '@/api/chat/api';
'use client';
import React, { useState } from 'react';
import ProductInfo from '@/components/chat/chatRoom/productInfo';
import Send from '@/components/chat/chatRoom/send';
import Date from '@/components/chat/chatRoom/date';
import Header from '@/components/common/header';
import MessageList from '@/components/chat/chatRoom/messageList';
import WebSocketConnection from '@/components/chat/chatRoom/WebSocketConnection/WebSocketConnection';
import { MessageProps } from '@/types/chat/chatRoom/types';
import { loadedChatMessage } from '@/api/chat/api';

// // eslint-disable-next-line
// const ROOMID = '02d6b08d-60f8-4c21-b5b2-0ba7af752e29';
const ROOMID = '02d6b08d-60f8-4c21-b5b2-0ba7af752e29';

// const Page = () => {
// const [message, setMessage] = useState<MessageProps[]>([]);
const Page = () => {
const [message, setMessage] = useState<MessageProps[]>([]);

// // // 채팅방 내부 정보 불러오기
// // const ChatInfo = async () => {
// // try {
// // const result = await loadedChatInfo(ROOMID);
// // console.log(result);
// // } catch (error) {
// // console.error('failed:', error);
// // }
// // };
// // ChatInfo();
// // 채팅방 내부 정보 불러오기
// const ChatInfo = async () => {
// try {
// const result = await loadedChatInfo(ROOMID);
// console.log(result);
// } catch (error) {
// console.error('failed:', error);
// }
// };
// ChatInfo();

// // //채팅 내용 불러오기
// // const chatMessage = async () => {
// // try {
// // const result = await loadedChatMessage(ROOMID);
// // console.log(result);
// // } catch (error) {
// // console.error('failed:', error);
// // }
// // };
// // chatMessage();
//채팅 내용 불러오기
const chatMessage = async () => {
try {
const result = await loadedChatMessage(ROOMID);
console.log(result);
} catch (error) {
console.error('failed:', error);
}
};
chatMessage();

// const onMessageReceived = (newMessage: MessageProps) => {
// setMessage((prev) => [...prev, newMessage]);
// };
const onMessageReceived = (newMessage: MessageProps) => {
setMessage((prev) => [...prev, newMessage]);
};

// // eslint-disable-next-line
// // const { sendMessage } = WebSocketConnection({ onMessageReceived });
const { sendMessage } = WebSocketConnection({ onMessageReceived });

// const handleSendMessage = (messageText: string) => {
// sendMessage(messageText);
// };
const handleSendMessage = (messageText: string) => {
sendMessage(messageText);
};

// return (
// <>
// <Header title="닉네임" showBackButton />
// <div className="flex flex-col ">
// <ProductInfo />
// <div className="bg-gray-100 overflow-auto flex flex-col px-5 h-screen">
// <Date />
// <MessageList messages={message} />
// </div>
// <Send onSendMessage={handleSendMessage} />
// </div>
// </>
// );
// };
return (
<>
<Header title="닉네임" showBackButton />
<div className="flex flex-col ">
<ProductInfo />
<div className="bg-gray-100 overflow-auto flex flex-col px-5 h-screen">
<Date />
<MessageList messages={message} />
</div>
<Send onSendMessage={handleSendMessage} />
</div>
</>
);
};

// export default Page;
export default Page;
42 changes: 22 additions & 20 deletions app/chat/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,32 @@ import { useRouter } from 'next/navigation';
import Modal from '@/components/common/modal';
import { useRecoilState } from 'recoil';
import { isModalState } from '@/atoms/chat/leaveButton';
import axios from 'axios';

import { useMutation } from '@tanstack/react-query';
import SimpleButton from '@/components/common/sheetsButtons/simpleButton';
import { creatChatRoom, loadedChatList } from '@/api/chat/api';

const ACCESSTOKEN = '6231025e-0347-4ae3-9fdd-dd4e6cbb5abe';

// 채팅방 생성하기
const createRoom = async () => {
const data = await axios.post(
'http://localhost:3000/v1/chat/room/create',
{
buyerId: 'buyer1',
sellerId: 'seller1',
productId: 'product1',
},
{
headers: {
Authorization: `Bearer ${ACCESSTOKEN}`,
},
},
);
console.log(data);
console;
return data;
try {
const result = await creatChatRoom('buyer1', 'seller1', 'product1');
console.log(result);
} catch (error) {
console.error('failed:', error);
}
};
createRoom();

//채팅방 리스트 불러오기
const chatLists = async () => {
try {
const result = await loadedChatList();
console.log(result);
} catch (error) {
console.error('failed:', error);
}
};
chatLists();

const MakeButton = () => {
const mutation = useMutation({
Expand Down Expand Up @@ -64,7 +66,7 @@ const Page = () => {
};
const onConfirm = () => {
handleModalOpen();
router.push('/login');
router.push('/chat');
};

return (
Expand Down
6 changes: 3 additions & 3 deletions app/stomp/sock/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import SockJS from 'sockjs-client';
import { CompatClient, Stomp } from '@stomp/stompjs';
import { useRecoilState } from 'recoil';
import { chatContentAtom } from '@/atoms/chat/chatContentAtom';

// import { loadedChatMessage } from '@/api/chat/api';
// test 완료되면 지우도록 하겠습니다

const ROOMID = '02d6b08d-60f8-4c21-b5b2-0ba7af752e29';

export type ChatContentType = {
type: 'ENTER' | 'TALK' | 'LEAVE';
type: 'ENTER' | 'TALK' | 'QUIT';
message: string;
sender: string;
roomId: string;
Expand Down Expand Up @@ -42,7 +42,7 @@ const StompPage = ({ children }: { children: ReactNode }) => {
destination: `/pub/chat/message`,
body: JSON.stringify({
roomId: ROOMID,
sender: '민섭',
sender: '승연',
type: 'ENTER',
userId: 'user2',
message: '소켓 연결 성공!',
Expand Down

0 comments on commit f3bc56b

Please sign in to comment.