Fix: chatRoom 페이지 import문 수정

Author: gustn99

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

@@ -1,11 +1,14 @@
-import { ChatBoxContainer, Textarea, SendButton } from './styles';
 import { useEffect, useRef, useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { useParams } from 'react-router-dom';
-import { OtherUserAtom } from '@recoil/util/OtherUser';
+
+import { useRecoilValue } from 'recoil';
+
 import { useSocket } from '@context/SocketProvider';
+import { OtherUserAtom } from '@recoil/util/OtherUser';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 
+import { ChatBoxContainer, Textarea, SendButton } from './styles';
+
 const ChatBox: React.FC = () => {
 	const [newMessage, setNewMessage] = useState('');
 	const textareaRef = useRef<HTMLTextAreaElement | null>(null);

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

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+
 import SendIcon from '@assets/default/send-message.svg';
 
 export const ChatBoxContainer = styled.div`

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

@@ -1,12 +1,14 @@
-import React from 'react';
+import { memo } from 'react';
+
 import theme from '@styles/theme';
+
 import { DatebarLayout, Date, Divider } from './styles';
 
 interface DateBarProps {
 	formattedDate: string; // yyyy년 MM월 dd일 EEEE
 }
 
-const DateBar: React.FC<DateBarProps> = React.memo(({ formattedDate }) => {
+const DateBar: React.FC<DateBarProps> = memo(({ formattedDate }) => {
 	return (
 		<DatebarLayout>
 			<Divider />

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

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+
 import { StyledText } from '@components/Text/StyledText';
 
 export const DatebarLayout = styled.div`

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

@@ -1,9 +1,12 @@
-import React from 'react';
+import { memo } from 'react';
+
 import theme from '@styles/theme';
+
 import type { RcvdMessageProps } from '../dto';
+
 import { FirstMessageLayout, UserImage, UsernameText, MessageBox, Message, TimeWrapper, MessageLayout } from './styles';
 
-const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> = React.memo(
+const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> = memo(
 	({
 		fromUserNickname,
 		profilePictureUrl,

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

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+
 import { StyledText } from '@components/Text/StyledText';
 
 export const FirstMessageLayout = styled.div<{ $isSenderChanged: boolean }>`

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

@@ -1,19 +1,20 @@
-import React from 'react';
+import { memo } from 'react';
+
 import theme from '@styles/theme';
+
 import type { SentMessageProps } from '../dto';
+
 import { Message, TimeWrapper, MessageLayout } from './styles';
 
-const SentMessage: React.FC<SentMessageProps> = React.memo(
-	({ content, isSenderChanged, isTimeVisible, formattedTime }) => {
-		return (
-			<MessageLayout $isSenderChanged={isSenderChanged}>
-				{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
-				<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
-					{content}
-				</Message>
-			</MessageLayout>
-		);
-	},
-);
+const SentMessage: React.FC<SentMessageProps> = memo(({ content, isSenderChanged, isTimeVisible, formattedTime }) => {
+	return (
+		<MessageLayout $isSenderChanged={isSenderChanged}>
+			{isTimeVisible && <TimeWrapper>{formattedTime}</TimeWrapper>}
+			<Message $textTheme={{ style: 'body2-regular' }} color={theme.colors.text.primary}>
+				{content}
+			</Message>
+		</MessageLayout>
+	);
+});
 
 export default SentMessage;

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

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components';
+
 import { StyledText } from '@components/Text/StyledText';
 
 export const MessageLayout = styled.div<{ $isSenderChanged: boolean }>`

src/pages/Chats/ChatRoom/createExtendedMessages.ts

@@ -1,9 +1,11 @@
-import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto';
-import defaultProfile from '@assets/default/defaultProfile.svg';
 import dayjs from 'dayjs';
 import 'dayjs/locale/ko';
-import { OtherUserDto } from '@apis/chatting/dto';
-import { chatRoomMessagesData } from '@apis/chatting/dto';
+
+import defaultProfile from '@assets/default/defaultProfile.svg';
+
+import type { OtherUserDto, chatRoomMessagesData } from '@apis/chatting/dto';
+
+import type { ExtendedMessageDto, RcvdMessageProps, SentMessageProps } from './dto';
 
 export const createExtendedMessages = (
 	allMessages: chatRoomMessagesData[],
@@ -26,23 +28,24 @@ export const createExtendedMessages = (
 
 		// 채팅의 첫 메시지가 아니고, 날짜가 바뀐 경우
 		// 날짜 표시줄 출력
-		let isDateBarVisible = prevMessage !== null && isNewDay(message.createdAt, prevMessage.createdAt);
+		const isDateBarVisible = prevMessage !== null && isNewDay(message.createdAt, prevMessage.createdAt);
 
 		// 채팅의 첫 메시지이거나 전송자 또는 날짜가 바뀐 경우
 		// 프로필 사진 출력
-		let isProfileImageVisible =
+		const isProfileImageVisible =
 			prevMessage === null || prevMessage.fromUser.id !== message.fromUser.id || isDateBarVisible;
 
 		// 가장 마지막 메시지이거나, 전송자 또는 시간이 바뀌기 직전인 경우
 		// 메시지 전송 시각 출력
-		let isTimeVisible =
+		const isTimeVisible =
 			nextMessage === null ||
 			message.fromUser.id !== nextMessage.fromUser.id ||
 			formattedTime !== dayjs(nextMessage.createdAt).format('HH:mm');
 
 		// 채팅의 첫 메시지가 아니고, 전송자가 바뀐 경우
 		// margin-top 추가
-		let isSenderChanged = prevMessage !== null && !isDateBarVisible && prevMessage.fromUser.id !== message.fromUser.id;
+		const isSenderChanged =
+			prevMessage !== null && !isDateBarVisible && prevMessage.fromUser.id !== message.fromUser.id;
 
 		if (message.fromUser.id === userId) {
 			// 보낸 메시지일 경우 sentMessage 속성 추가

src/pages/Chats/ChatRoom/dto.ts

@@ -1,4 +1,4 @@
-import { chatRoomMessagesData } from '@apis/chatting/dto';
+import type { chatRoomMessagesData } from '@apis/chatting/dto';
 
 export interface ExtendedMessageDto extends chatRoomMessagesData {
 	isDateBarVisible: boolean;