Skip to content

Commit 75866e1

Browse files
gustn99gustn99
authored
Merge pull request #135 from oodd-team/feat/OD-180
[OD-180] 매칭 룸 버그 해결
2 parents a0d2295 + d0d8695 commit 75866e1

17 files changed

Lines changed: 103 additions & 120 deletions

File tree

‎src/App.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
33

44
import Home from '@pages/Home';
@@ -28,9 +28,26 @@ import ChatRoom from '@pages/Chats/ChatRoom';
2828
import MatchingRoom from '@pages/Chats/MatchingRoom';
2929

3030
import NotFound from '@pages/NotFound';
31+
import { getUserInfoApi } from '@apis/user';
32+
import { getCurrentUserId } from '@utils/getCurrentUserId';
33+
import Loading from '@components/Loading';
3134

3235
const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
33-
const isAuthenticated = Boolean(localStorage.getItem('new_jwt_token'));
36+
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
37+
38+
useEffect(() => {
39+
const checkAuth = async () => {
40+
const currentUserId = getCurrentUserId();
41+
const response = await getUserInfoApi(currentUserId);
42+
setIsAuthenticated(response.isSuccess);
43+
};
44+
checkAuth();
45+
}, []);
46+
47+
if (isAuthenticated === null) {
48+
return <Loading />;
49+
}
50+
3451
return isAuthenticated ? children : <Navigate to="/login" />;
3552
};
3653

‎src/apis/matching/dto.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import type { BaseSuccessResponse } from '@apis/core/dto';
2-
31
type RequestStatusEnum = 'accepted' | 'rejected' | 'pending';
42

53
// 매칭 요청
@@ -10,16 +8,6 @@ export interface CreateMatchingRequest {
108
message: string;
119
}
1210

13-
// response
14-
export type CreateMatchingResponse = BaseSuccessResponse<CreateMatchingData>;
15-
16-
export interface CreateMatchingData {
17-
id: number; // matchingId
18-
chatRoomId: number;
19-
requesterId: number;
20-
targetId: number;
21-
}
22-
2311
// 최근 매칭 조회 (채팅방 리스트에서)
2412
export interface LatestMatchingData {
2513
id?: number;
@@ -56,20 +44,3 @@ export interface PostImageDto {
5644
url: string;
5745
orderNum: number;
5846
}
59-
60-
// 매칭 요청 수락 및 거절
61-
// request
62-
export interface ModifyMatchingStatusRequest {
63-
requestStatus: 'accept' | 'reject';
64-
}
65-
66-
// response
67-
export type ModifyMatchingStatusResponse = BaseSuccessResponse<ModifyMatchingStatusData>;
68-
69-
export interface ModifyMatchingStatusData {
70-
id: number; // matchingId
71-
requesterId: number;
72-
targetId: number;
73-
requestStatus: string;
74-
chatRoomId: number;
75-
}

‎src/apis/matching/index.ts‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/pages/Chats/MatchingRoom/Card/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
3030
</ProfileImgBox>
3131
<ProfileInfo>
3232
<StyledText
33-
$textTheme={{ style: 'body1-medium' }}
33+
$textTheme={{ style: 'body2-medium' }}
3434
color={theme.colors.text.primary}
3535
onClick={handleUserClick}
3636
>
@@ -39,7 +39,7 @@ const Card: React.FC<CardProps> = ({ requester }) => {
3939
<div className="row-flex">
4040
{requester.representativePost.styleTags.map((tag, index) => (
4141
<div className="row-flex" key={tag}>
42-
<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[200]}>
42+
<StyledText $textTheme={{ style: 'caption2-regular' }} color={theme.colors.gray[600]}>
4343
{tag}
4444
</StyledText>
4545
{index < requester.representativePost.styleTags.length - 1 && (

‎src/pages/Chats/MatchingRoom/MatchingMessage/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import dayjs from 'dayjs';
22

33
import RcvdMessage from '@pages/Chats/RcvdMessage';
44

5+
import defaultProfile from '@assets/default/defaultProfile.svg';
6+
57
import type { MatchingData } from '@apis/matching/dto';
68
import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
79

@@ -14,7 +16,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
1416

1517
const firstMessageProps: RcvdMessageProps = {
1618
fromUserNickname: '오딩이',
17-
profilePictureUrl: '',
19+
profilePictureUrl: defaultProfile,
1820
content: '얘가 너 소개받고 싶대',
1921
isSenderChanged: false,
2022
isProfileImageVisible: true,
@@ -24,7 +26,7 @@ const MatchingMessage: React.FC<MatchingData> = ({ id, message, createdAt, chatR
2426

2527
const matchingMessageProps: RcvdMessageProps = {
2628
fromUserNickname: '오딩이',
27-
profilePictureUrl: '',
29+
profilePictureUrl: defaultProfile,
2830
content: message,
2931
isSenderChanged: false,
3032
isProfileImageVisible: false,

‎src/pages/Chats/MatchingRoom/NoMatchingMessage/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import dayjs from 'dayjs';
22

33
import RcvdMessage from '@pages/Chats/RcvdMessage';
44

5+
import defaultProfile from '@assets/default/defaultProfile.svg';
6+
57
import type { RcvdMessageProps } from '@pages/Chats/RcvdMessage/dto';
68

79
const NoMatchingMessage: React.FC = () => {
810
const formattedTime = dayjs(new Date()).format('HH:mm');
911

1012
const messageProps: RcvdMessageProps = {
1113
fromUserNickname: '오딩이',
12-
profilePictureUrl: '',
14+
profilePictureUrl: defaultProfile,
1315
content: '매칭이 들어오면 오딩이가 알려줄게!',
1416
isSenderChanged: true,
1517
isProfileImageVisible: true,

‎src/pages/Chats/MatchingRoom/ResponseMessage/index.tsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
11
import { useNavigate } from 'react-router-dom';
22

3+
import { useRecoilState } from 'recoil';
4+
5+
import theme from '@styles/theme';
6+
7+
import { RequesterDto } from '@apis/matching/dto';
38
import { useSocket } from '@context/SocketProvider';
9+
import { OtherUserAtom } from '@recoil/util/OtherUser';
10+
11+
import { StyledText } from '@components/Text/StyledText';
412

513
import { ResponseButton, ResponseContainer } from './styles';
614

715
export interface ResponseMessageProps {
816
matchingId: number;
917
chatRoomId: number;
18+
requester: Omit<RequesterDto, 'RepresentativePostDto'>;
1019
requestStatus: 'accepted' | 'rejected' | 'pending';
1120
}
1221

13-
const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requestStatus }) => {
22+
const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomId, requester, requestStatus }) => {
1423
const socket = useSocket('matching');
1524
const isPending = requestStatus === 'pending';
1625
const nav = useNavigate();
26+
const [, setOtherUser] = useRecoilState(OtherUserAtom);
1727

1828
const handlebuttonClick = (status: 'accept' | 'reject') => {
1929
if (requestStatus !== 'pending') return;
2030
if (socket) {
2131
socket.emit('patchMatching', { id: matchingId, requestStatus: status });
2232
if (status === 'accept') {
33+
setOtherUser(requester);
2334
nav(`/chats/${chatRoomId}`);
2435
}
2536
}
@@ -29,12 +40,16 @@ const ResponseMessage: React.FC<ResponseMessageProps> = ({ matchingId, chatRoomI
2940
<ResponseContainer>
3041
{(requestStatus === 'pending' || requestStatus === 'rejected') && (
3142
<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('reject')}>
32-
거절
43+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
44+
거절
45+
</StyledText>
3346
</ResponseButton>
3447
)}
3548
{(requestStatus === 'pending' || requestStatus === 'accepted') && (
3649
<ResponseButton $isPending={isPending} onClick={() => handlebuttonClick('accept')}>
37-
수락
50+
<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
51+
수락
52+
</StyledText>
3853
</ResponseButton>
3954
)}
4055
</ResponseContainer>

‎src/pages/Chats/MatchingRoom/ResponseMessage/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ export const ResponseButton = styled.button<{ $isPending: boolean }>`
1111
padding: 0.4rem 0.8rem;
1212
margin: 0.5rem 0;
1313
background-color: #f2f2f2;
14-
border-radius: 0.5rem;
14+
border-radius: 0.8rem;
1515
overflow-wrap: break-word;
1616
`;

‎src/pages/Chats/MatchingRoom/index.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const MatchingRoom: React.FC = () => {
5656
useEffect(() => {
5757
// 전체 매칭 불러오기 socket api
5858
const getAllMatchings = ({ matching }: { matching: MatchingData[] }) => {
59+
console.log(matching);
5960
setAllMatchings(matching);
6061
setIsScroll(true);
6162
setIsLoading(false);
@@ -65,20 +66,28 @@ const MatchingRoom: React.FC = () => {
6566
if (JSON.stringify(data) === '{}') {
6667
setHasNewMatching(false);
6768
} else {
69+
setHasNewMatching(true);
6870
setAllMatchings([...allMatchings, data]);
6971
}
7072
};
7173

74+
const handleError = (data: string) => {
75+
alert(data);
76+
};
77+
7278
if (socket) {
7379
socket.emit('getAllMatchings', { userId: currentUserId });
7480
socket.emit('getMatching', { userId: currentUserId });
7581
socket.on('matchings', getAllMatchings);
7682
socket.on('nextMatching', getNewMatching);
83+
socket.on('error', handleError);
7784
}
7885

7986
return () => {
8087
if (socket) {
81-
socket.off();
88+
socket.off('matchings');
89+
socket.off('nextMatching');
90+
socket.off('error');
8291
}
8392
};
8493
}, [socket]);
@@ -94,23 +103,20 @@ const MatchingRoom: React.FC = () => {
94103
$withBorder={true}
95104
/>
96105
<MessagesContainer $isLoading={isLoading}>
97-
{allMatchings.length === 0 ? (
98-
<NoMatchingMessage />
99-
) : (
100-
allMatchings.map((matching: MatchingData) => {
101-
console.log(matching);
102-
return (
103-
<div key={matching.id}>
104-
<MatchingMessage {...matching} />
105-
<ResponseMessage
106-
matchingId={matching.id}
107-
chatRoomId={matching.chatRoomId}
108-
requestStatus={matching.requestStatus}
109-
/>
110-
</div>
111-
);
112-
})
113-
)}
106+
{allMatchings.map((matching: MatchingData) => {
107+
console.log(matching);
108+
return (
109+
<div key={matching.id}>
110+
<MatchingMessage {...matching} />
111+
<ResponseMessage
112+
matchingId={matching.id}
113+
chatRoomId={matching.chatRoomId}
114+
requester={matching.requester}
115+
requestStatus={matching.requestStatus}
116+
/>
117+
</div>
118+
);
119+
})}
114120
{!hasNewMatching && <NoMatchingMessage />}
115121
<div ref={chatWindowRef} />
116122
</MessagesContainer>

‎src/pages/Chats/RcvdMessage/index.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,22 @@ const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile?: () => void; ch
2222
return (
2323
<FirstMessageLayout $isSenderChanged={isSenderChanged}>
2424
<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
25-
<MessageBox>
25+
<div>
2626
<UsernameText
2727
onClick={onClickProfile}
2828
$textTheme={{ style: 'body2-regular' }}
2929
color={theme.colors.text.primary}
3030
>
3131
{fromUserNickname}
3232
</UsernameText>
33-
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
34-
{children}
35-
{content}
36-
</Message>
37-
</MessageBox>
38-
{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
33+
<MessageBox>
34+
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
35+
{children}
36+
{content}
37+
</Message>
38+
{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
39+
</MessageBox>
40+
</div>
3941
</FirstMessageLayout>
4042
);
4143
} else {

0 commit comments

Comments
 (0)