Skip to content

Commit 34cd968

Browse files
gustn99gustn99
authored
Merge pull request #107 from oodd-team/feat/OD-142
[OD-142] Chats 리팩토링
2 parents f79f503 + f73c0b6 commit 34cd968

34 files changed

Lines changed: 250 additions & 257 deletions

‎src/pages/Chats/ChatRoom/ChatBox/index.tsx‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,27 @@ import { ChatBoxContainer, Textarea, SendButton } from './styles';
22
import { useEffect, useRef, useState } from 'react';
33
import { useRecoilValue } from 'recoil';
44
import { useParams } from 'react-router-dom';
5-
import { OpponentInfoAtom } from '../../../../recoil/util/OpponentInfo';
6-
import { useSocket } from '../../../../context/SocketProvider';
5+
import { OpponentInfoAtom } from '@recoil/util/OpponentInfo';
6+
import { useSocket } from '@context/SocketProvider';
7+
import { getCurrentUserId } from '@utils/getCurrentUserId';
78

89
const ChatBox: React.FC = () => {
9-
const opponentInfo = useRecoilValue(OpponentInfoAtom);
10-
const storageValue = localStorage.getItem('my_id');
11-
const userId = storageValue ? Number(storageValue) : -1;
12-
const { chatRoomId } = useParams();
13-
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
14-
1510
const [newMessage, setNewMessage] = useState('');
16-
11+
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
1712
const socket = useSocket();
13+
14+
const { chatRoomId } = useParams();
15+
const currentUserId = getCurrentUserId();
16+
const opponentInfo = useRecoilValue(OpponentInfoAtom);
1817
const isOpponentValid = !!(opponentInfo && opponentInfo.id);
1918

19+
useEffect(() => {
20+
if (textareaRef.current && !isOpponentValid) {
21+
textareaRef.current.disabled = true;
22+
textareaRef.current.placeholder = '메시지를 보낼 수 없습니다.';
23+
}
24+
}, []);
25+
2026
// textarea 내용에 따라 높이 조정
2127
useEffect(() => {
2228
if (textareaRef.current) {
@@ -25,56 +31,48 @@ const ChatBox: React.FC = () => {
2531
}
2632
}, [newMessage]);
2733

28-
useEffect(() => {
29-
if (textareaRef.current && !isOpponentValid) {
30-
textareaRef.current.disabled = true;
31-
textareaRef.current.placeholder = '메시지를 보낼 수 없습니다.';
32-
}
33-
}, []);
34-
35-
const onChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
34+
const handleMessageChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
3635
setNewMessage(e.target.value);
3736
};
3837

39-
const sendNewMessage = (): void => {
38+
const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
39+
if (e.key === 'Enter' && !e.shiftKey) {
40+
e.preventDefault();
41+
handleNewMessageSubmit();
42+
}
43+
};
44+
45+
const handleNewMessageSubmit = () => {
4046
if (newMessage === '') {
4147
return;
4248
}
4349

44-
// 메시지 전송
50+
// 메시지 전송 api
4551
if (socket) {
4652
const sendMessageRequest = {
4753
chatRoomId: Number(chatRoomId),
4854
toUserId: opponentInfo?.id,
4955
content: newMessage,
50-
fromUserId: userId,
56+
fromUserId: currentUserId,
5157
createdAt: new Date().toISOString(),
5258
};
53-
5459
socket.emit('sendMessage', sendMessageRequest);
5560
setNewMessage('');
5661
}
5762
};
5863

59-
const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
60-
if (e.key === 'Enter' && !e.shiftKey) {
61-
e.preventDefault();
62-
sendNewMessage();
63-
}
64-
};
65-
6664
return (
6765
<ChatBoxContainer>
6866
<Textarea
6967
$isOpponentValid={isOpponentValid}
7068
placeholder="메시지 보내기"
7169
ref={textareaRef}
7270
value={newMessage}
73-
onKeyDown={onKeyDown}
74-
onChange={onChangeMessage}
75-
onSubmit={sendNewMessage}
71+
onChange={handleMessageChange}
72+
onKeyDown={handleEnterKeyDown}
73+
onSubmit={handleNewMessageSubmit}
7674
/>
77-
<SendButton $isOpponentValid={isOpponentValid} onClick={sendNewMessage} />
75+
<SendButton $isOpponentValid={isOpponentValid} onClick={handleNewMessageSubmit} />
7876
</ChatBoxContainer>
7977
);
8078
};

‎src/pages/Chats/ChatRoom/ChatBox/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import SendIcon from '../../../../assets/default/send-message.svg';
2+
import SendIcon from '@assets/default/send-message.svg';
33

44
export const ChatBoxContainer = styled.div`
55
${({ theme }) => theme.breakPoints};

‎src/pages/Chats/ChatRoom/DateBar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import theme from '../../../../styles/theme';
2+
import theme from '@styles/theme';
33
import { DatebarLayout, Date, Divider } from './styles';
44

55
interface DateBarProps {

‎src/pages/Chats/ChatRoom/DateBar/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../../../../components/Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
33

44
export const DatebarLayout = styled.div`
55
display: flex;

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

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import theme from '../../../../styles/theme';
3-
import { RcvdMessageProps } from '../dto';
2+
import theme from '@styles/theme';
3+
import type { RcvdMessageProps } from '../dto';
44
import { FirstMessageLayout, UserImage, UsernameText, MessageBox, Message, TimeWrapper, MessageLayout } from './styles';
55

66
const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> = React.memo(
@@ -16,19 +16,17 @@ const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> =
1616
}) => {
1717
if (isProfileImageVisible) {
1818
return (
19-
<>
20-
<FirstMessageLayout $isSenderChanged={isSenderChanged}>
21-
<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
22-
<MessageBox>
23-
<UsernameText onClick={onClickProfile} $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
24-
{fromUserNickname}
25-
</UsernameText>
26-
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
27-
{content}
28-
</Message>
29-
</MessageBox>
30-
</FirstMessageLayout>
31-
</>
19+
<FirstMessageLayout $isSenderChanged={isSenderChanged}>
20+
<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
21+
<MessageBox>
22+
<UsernameText onClick={onClickProfile} $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
23+
{fromUserNickname}
24+
</UsernameText>
25+
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
26+
{content}
27+
</Message>
28+
</MessageBox>
29+
</FirstMessageLayout>
3230
);
3331
} else {
3432
return (

‎src/pages/Chats/ChatRoom/RcvdMessage/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../../../../components/Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
33

44
export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>`
55
display: flex;

‎src/pages/Chats/ChatRoom/SentMessage/index.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
import React from 'react';
2-
import theme from '../../../../styles/theme';
3-
import { SentMessageProps } from '../dto';
2+
import theme from '@styles/theme';
3+
import type { SentMessageProps } from '../dto';
44
import { Message, TimeWrapper, MessageLayout } from './styles';
55

66
const SentMessage: React.FC<SentMessageProps> = React.memo(
77
({ content, isSenderChanged, isTimeVisible, formattedTime }) => {
88
return (
9-
<>
10-
<MessageLayout $isSenderChanged={isSenderChanged}>
11-
{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
12-
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
13-
{content}
14-
</Message>
15-
</MessageLayout>
16-
</>
9+
<MessageLayout $isSenderChanged={isSenderChanged}>
10+
{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
11+
<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.black}>
12+
{content}
13+
</Message>
14+
</MessageLayout>
1715
);
1816
},
1917
);

‎src/pages/Chats/ChatRoom/SentMessage/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { StyledText } from '../../../../components/Text/StyledText';
2+
import { StyledText } from '@components/Text/StyledText';
33

44
export const MessageLayout = styled.div<{ $isSenderChanged: boolean }>`
55
display: flex;

‎src/pages/Chats/ChatRoom/createExtendedMessages.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto';
2-
import defaultProfile from '../../../assets/default/defaultProfile.svg';
1+
import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto';
2+
import defaultProfile from '@assets/default/defaultProfile.svg';
33
import dayjs from 'dayjs';
44
import 'dayjs/locale/ko';
5-
import { OtherUserDto } from '../../../apis/chatting/dto';
6-
import { chatRoomMessagesData } from '../../../apis/chatting/dto';
5+
import { OtherUserDto } from '@apis/chatting/dto';
6+
import { chatRoomMessagesData } from '@apis/chatting/dto';
77

88
export const createExtendedMessages = (
99
allMessages: chatRoomMessagesData[],
@@ -14,9 +14,11 @@ export const createExtendedMessages = (
1414
const isNewDay = (curDate: string, lastDate: string) => {
1515
const curDateDayjs = dayjs(curDate);
1616
const lastDateDayjs = dayjs(lastDate);
17+
1718
return !curDateDayjs.isSame(lastDateDayjs, 'day');
1819
};
1920

21+
// 렌더링에 필요한 요소를 추가한 메시지 배열
2022
const temp: ExtendedMessageDto[] = allMessages.map((message: chatRoomMessagesData, index) => {
2123
const prevMessage = index !== 0 ? allMessages[index - 1] : null;
2224
const nextMessage = index !== allMessages.length - 1 ? allMessages[index + 1] : null;

‎src/pages/Chats/ChatRoom/dto.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { chatRoomMessagesData } from '../../../apis/chatting/dto';
1+
import { chatRoomMessagesData } from '@apis/chatting/dto';
22

33
export interface ExtendedMessageDto extends chatRoomMessagesData {
44
isDateBarVisible: boolean;

0 commit comments

Comments
 (0)