diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx
index dd62217..07d3014 100644
--- a/src/components/Chat/ChatContainer/index.tsx
+++ b/src/components/Chat/ChatContainer/index.tsx
@@ -3,10 +3,10 @@ import { getProfileInfoSelector } from '../../../reducer/profile';
 import ChatZone from '../ChatZone';
 import Textarea from '../Textarea';
 import useSocket from '../../../hooks/useSocket';
-import { chatSection } from '../../../utils/chatSection';
 import { getChatData, newChatData } from '../../../utils/ChatSocketData';
+import { getAllMessages, getChatDataSelector, sendMessages } from '../../../reducer/chat';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useParams } from 'react-router';
 import { Scrollbars } from 'react-custom-scrollbars';
 
@@ -14,8 +14,11 @@ import { AllMessagesDataType, ChatDataType, ChatIdType, ChatUpdateDataType } fro
 
 const WorkSpaceChat = (): JSX.Element => {
 	const profileInfo = useSelector(getProfileInfoSelector);
+	const chatData = useSelector(getChatDataSelector);
+
 	const { projectUrl, part: room } = useParams<{ projectUrl: string; part: string }>();
 	const history = useHistory();
+	const dispatch = useDispatch();
 	const currentAddress = history.location.pathname.split('/')[3];
 	const [socket, connectionSocket, disconnectSocket] = useSocket(projectUrl, currentAddress);
 	const scrollbarRef = useRef<Scrollbars>(null);
@@ -46,9 +49,9 @@ const WorkSpaceChat = (): JSX.Element => {
 			}
 
 			setIsEnd(isEnd);
-			setChatBucket([...chats, ...chatBucket]);
+			dispatch(getAllMessages(chats));
 		});
-	}, [chatBucket]);
+	}, [chatData]);
 
 	useEffect(() => {
 		// TODO: room이 바뀌면 room과 다시 연결한다.
@@ -67,7 +70,7 @@ const WorkSpaceChat = (): JSX.Element => {
 		// TODO: 메세지를 받으면 재렌더링 한다.
 		socket?.on('sendMessage', (chat: ChatDataType) => {
 			if (chat) {
-				setChatBucket([...chatBucket, chat]);
+				dispatch(sendMessages([chat]));
 			}
 		});
 
@@ -97,17 +100,17 @@ const WorkSpaceChat = (): JSX.Element => {
 		// TODO: 채팅 이미지 업로드
 		socket?.on('sendImage', ({ chat }: ChatDataType) => {
 			if (chat?.uploadImage) {
-				setChatBucket([...chatBucket, chat]);
+				dispatch(sendMessages([chat]));
 			}
 		});
-	}, [chatBucket]);
+	}, [chatData]);
 
 	// TODO: 스크롤바는 항상 맨 밑에 위치한다.
 	useEffect(() => {
-		if (chatBucket && order === 0) {
+		if (chatData && order === 0) {
 			scrollbarRef.current?.scrollToBottom();
 		}
-	}, [chatBucket]);
+	}, [chatData]);
 
 	// TODO: 채팅 입력
 	const onSubmitForm = useCallback(
@@ -117,13 +120,13 @@ const WorkSpaceChat = (): JSX.Element => {
 				return;
 			}
 
-			const data: ChatUpdateDataType = getChatData(room, profileInfo, chat, chatBucket.length);
+			const data: ChatUpdateDataType = getChatData(room, profileInfo, chat, chatData.length);
 			const newChat: ChatDataType = newChatData(-1, chat, '', room, profileInfo);
 
 			socket?.emit('sendMessage', data);
 
 			if (chat) {
-				setChatBucket([...chatBucket, newChat]);
+				dispatch(sendMessages([newChat]));
 				setChat('');
 			}
 
@@ -131,40 +134,17 @@ const WorkSpaceChat = (): JSX.Element => {
 				scrollbarRef.current.scrollToBottom();
 			}
 		},
-		[chat, chatBucket],
+		[chat, chatData],
 	);
 
 	const onChangeChatValue: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback((e): void => {
 		setChat(e.target.value);
 	}, []);
 
-	const chatSections = chatSection(chatBucket ? [...chatBucket] : []);
-	const isEmpty = chatBucket.length === 0;
-	const isReachingEnd = isEmpty || (chatBucket && chatBucket.length < 30);
-
 	return (
 		<>
-			<ChatZone
-				socket={socket}
-				scrollbarRef={scrollbarRef}
-				chatSections={chatSections}
-				chatBucket={chatBucket}
-				setChatBucket={setChatBucket}
-				order={order}
-				setOrder={setOrder}
-				isEnd={isEnd}
-				isEmpty={isEmpty}
-				isReachingEnd={isReachingEnd}
-			/>
-			<Textarea
-				socket={socket}
-				onSubmitForm={onSubmitForm}
-				onChangeChat={onChangeChatValue}
-				chat={chat}
-				chatBucket={chatBucket}
-				setChatBucket={setChatBucket}
-				placeholder={`${room}에게 메세지 보내기`}
-			/>
+			<ChatZone socket={socket} scrollbarRef={scrollbarRef} order={order} setOrder={setOrder} isEnd={isEnd} />
+			<Textarea socket={socket} onSubmitForm={onSubmitForm} onChangeChat={onChangeChatValue} chat={chat} />
 		</>
 	);
 };
diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 49b700f..eb7e956 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -1,10 +1,11 @@
-import React, { Dispatch, memo, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import ProfileImage from '../../Common/ProfileImage';
 import ChatProfileModal from '../ChatProfileModal';
 import DeleteAlert from '../DeleteAlert';
 import useInput from '../../../hooks/useInput';
 import { getProfileInfoSelector } from '../../../reducer/profile';
 import { getChatDeleteData, getChatEditData, newChatData } from '../../../utils/ChatSocketData';
+import { getChatDataSelector } from '../../../reducer/chat';
 
 import { Socket } from 'socket.io-client';
 import dayjs from 'dayjs';
@@ -35,14 +36,14 @@ import { ChatDataType, ChatUpdateDataType } from '../../../types/types';
 interface Props {
 	socket: Socket<DefaultEventsMap, DefaultEventsMap> | undefined;
 	data: ChatDataType;
-	chatBucket: ChatDataType[];
-	setChatBucket: Dispatch<SetStateAction<ChatDataType[]>>;
 	isSameSender: boolean;
 	index: number;
 }
 
-const ChatItem = ({ socket, data, chatBucket, setChatBucket, isSameSender, index }: Props): JSX.Element => {
+const ChatItem = ({ socket, data, isSameSender, index }: Props): JSX.Element => {
 	const profileInfo = useSelector(getProfileInfoSelector);
+	const chatData = useSelector(getChatDataSelector);
+
 	const { part: room } = useParams<{ projectUrl: string; part: string }>();
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const modalRef = useRef<HTMLDivElement>(null);
@@ -55,20 +56,23 @@ const ChatItem = ({ socket, data, chatBucket, setChatBucket, isSameSender, index
 
 	const { uploadImage, profileColor, name, email } = data.writer;
 
-	useEffect(() => {
-		if (textareaRef.current) {
-			autosize(textareaRef.current);
+	const onClickChatItem = useCallback(() => {
+		if (modalRef.current) {
+			const location = modalRef.current.getBoundingClientRect();
+			if (location.y > 520) {
+				setChatLocation(`-${String(location.y - 520)}px`);
+			}
 		}
-	}, [textareaRef.current]);
+	}, []);
 
 	// TODO: 채팅 수정 엔터
 	const onChatEditEnter = useCallback((): void => {
 		const getChatEdit: ChatUpdateDataType = getChatEditData(room, index, data.id, editChat);
 		const newChat: ChatDataType = newChatData(data.id, editChat, '', room, profileInfo);
 
-		const copyChatBucket = [...chatBucket];
+		const copyChatBucket = [...chatData];
 		copyChatBucket.splice(index, 1, newChat);
-		setChatBucket([...copyChatBucket]);
+		// setChatBucket([...copyChatBucket]);
 
 		socket?.emit('editMessage', getChatEdit);
 		setShowChatEditForm(false);
@@ -82,9 +86,9 @@ const ChatItem = ({ socket, data, chatBucket, setChatBucket, isSameSender, index
 			const getChatEdit: ChatUpdateDataType = getChatEditData(room, index, data.id, editChat);
 			const newChat: ChatDataType = newChatData(data.id, editChat, '', room, profileInfo);
 
-			const copyChatBucket = [...chatBucket];
-			copyChatBucket.splice(index, 1, newChat);
-			setChatBucket([...copyChatBucket]);
+			const copyChatBucket = [...chatData];
+			copyChatBucket[index] = newChat;
+			// setChatBucket([...copyChatBucket]);
 
 			socket?.emit('editMessage', getChatEdit);
 			setShowChatEditForm(false);
@@ -109,12 +113,12 @@ const ChatItem = ({ socket, data, chatBucket, setChatBucket, isSameSender, index
 			setShowChatDeleteAlert(false);
 
 			const getChatDelete = getChatDeleteData(room, index, data.id);
-			const copyChatBucket = [...chatBucket];
+			const copyChatBucket = [...chatData];
 			copyChatBucket.splice(index, 1);
-			setChatBucket([...copyChatBucket]);
+			// setChatBucket([...copyChatBucket]);
 			socket?.emit('deleteMessage', getChatDelete);
 		},
-		[chatBucket],
+		[chatData],
 	);
 
 	// TODO: 채팅 프로필 모달 실행
@@ -136,14 +140,11 @@ const ChatItem = ({ socket, data, chatBucket, setChatBucket, isSameSender, index
 		};
 	}, []);
 
-	const onClickChatItem = useCallback(() => {
-		if (modalRef.current) {
-			const location = modalRef.current.getBoundingClientRect();
-			if (location.y > 520) {
-				setChatLocation(`-${String(location.y - 520)}px`);
-			}
+	useEffect(() => {
+		if (textareaRef.current) {
+			autosize(textareaRef.current);
 		}
-	}, []);
+	}, [textareaRef.current]);
 
 	return (
 		<ChatWrapper isSameSender={isSameSender} ref={modalRef} onClick={onClickChatItem}>
diff --git a/src/components/Chat/ChatZone/index.tsx b/src/components/Chat/ChatZone/index.tsx
index 053c4b4..b2eb24b 100644
--- a/src/components/Chat/ChatZone/index.tsx
+++ b/src/components/Chat/ChatZone/index.tsx
@@ -4,10 +4,12 @@ import { onDragUploadImage } from '../../../utils/imageUpload';
 import { getProfileInfoSelector } from '../../../reducer/profile';
 import { getChatUploadImageData, newChatData } from '../../../utils/ChatSocketData';
 import DragUploadModal from '../DragUploadModal';
+import { chatSection } from '../../../utils/chatSection';
+import { getChatDataSelector, sendMessages } from '../../../reducer/chat';
 
 import { Socket } from 'socket.io-client';
 import { Scrollbars } from 'react-custom-scrollbars';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 
 import { ChatList, ChatZoneContainer, ChatDateHeader, DragOverZone } from './styles';
@@ -18,34 +20,25 @@ import { ChatDataType, ChatSectionType, ChatUpdateDataType } from '../../../type
 export interface Props {
 	socket: Socket<DefaultEventsMap, DefaultEventsMap> | undefined;
 	scrollbarRef: RefObject<Scrollbars>;
-	chatSections: ChatSectionType;
-	chatBucket: ChatDataType[];
-	setChatBucket: Dispatch<SetStateAction<ChatDataType[]>>;
 	order: number;
 	setOrder: Dispatch<SetStateAction<number>>;
 	isEnd: boolean;
-	isEmpty: boolean;
-	isReachingEnd: boolean;
 }
 
-const ChatZone = ({
-	socket,
-	scrollbarRef,
-	chatSections,
-	chatBucket,
-	setChatBucket,
-	order,
-	setOrder,
-	isEnd,
-	isEmpty,
-	isReachingEnd,
-}: Props): JSX.Element => {
+const ChatZone = ({ socket, scrollbarRef, order, setOrder, isEnd }: Props): JSX.Element => {
 	const profileInfo = useSelector(getProfileInfoSelector);
+	const chatData = useSelector(getChatDataSelector);
+
+	const dispatch = useDispatch();
 	const { part: room } = useParams<{ part: string }>();
 
 	const [dragOver, setDragOver] = useState<boolean>(false);
 	const [chatUploadImage, setChatUploadImage] = useState<string>('');
 
+	const chatSections: ChatSectionType = chatSection(chatData ? [...chatData] : []);
+	const isEmpty = chatData.length === 0;
+	const isReachingEnd = isEmpty || (chatData && chatData.length < 30);
+
 	// TODO: 채팅 인피니티 스크롤
 	const onScrollFrame = useCallback(
 		values => {
@@ -68,7 +61,7 @@ const ChatZone = ({
 			const newChat: ChatDataType = newChatData(-1, '', chatUploadImage, room, profileInfo);
 			const getImageData: ChatUpdateDataType = getChatUploadImageData(room, profileInfo, chatUploadImage);
 
-			setChatBucket([...chatBucket, newChat]);
+			dispatch(sendMessages([newChat]));
 			socket?.emit('sendImage', getImageData);
 		}
 	}, [chatUploadImage]);
@@ -97,29 +90,19 @@ const ChatZone = ({
 	return (
 		<ChatZoneContainer onDrop={onDrop} onDragOver={onDragOver} onDragLeave={onDragLeave}>
 			<Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScrollFrame}>
-				{Object.entries(chatSections).map(([date, chatsBucket]) => {
+				{Object.entries(chatSections).map(([date, chatData]) => {
 					return (
 						<ChatList key={date}>
 							<ChatDateHeader>
 								<button>{date}</button>
 							</ChatDateHeader>
-							{chatsBucket.length > 0 &&
-								chatsBucket.map((chat: ChatDataType, index: number) => {
+							{chatData.length > 0 &&
+								chatData.map((chat: ChatDataType, index: number) => {
 									let isSameSender = false;
 									if (index > 0) {
-										isSameSender = chat.writer.email === chatsBucket[index - 1].writer.email;
+										isSameSender = chat.writer.email === chatData[index - 1].writer.email;
 									}
-									return (
-										<ChatItem
-											socket={socket}
-											key={index}
-											data={chat}
-											chatBucket={chatBucket}
-											setChatBucket={setChatBucket}
-											index={index}
-											isSameSender={isSameSender}
-										/>
-									);
+									return <ChatItem socket={socket} key={index} data={chat} index={index} isSameSender={isSameSender} />;
 								})}
 						</ChatList>
 					);
diff --git a/src/components/Chat/Textarea/index.tsx b/src/components/Chat/Textarea/index.tsx
index b7e2994..ef20b8e 100644
--- a/src/components/Chat/Textarea/index.tsx
+++ b/src/components/Chat/Textarea/index.tsx
@@ -1,22 +1,13 @@
-import React, {
-	useCallback,
-	KeyboardEvent,
-	FormEvent,
-	useRef,
-	useEffect,
-	useState,
-	Dispatch,
-	SetStateAction,
-	ChangeEvent,
-} from 'react';
+import React, { useCallback, KeyboardEvent, FormEvent, useRef, useEffect, useState, ChangeEvent } from 'react';
 import { changeImage, clickUploadImage } from '../../../utils/imageUpload';
 import { getProfileInfoSelector } from '../../../reducer/profile';
 import { getChatUploadImageData, newChatData } from '../../../utils/ChatSocketData';
+import { getChatDataSelector, sendMessages } from '../../../reducer/chat';
 
 import { Socket } from 'socket.io-client';
 import autosize from 'autosize';
 import { useParams } from 'react-router';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import {
 	ChatArea,
@@ -37,34 +28,19 @@ interface Props {
 	onSubmitForm: (e: FormEvent) => void;
 	onChangeChat: React.ChangeEventHandler<HTMLTextAreaElement>;
 	chat?: string;
-	placeholder?: string;
-	chatBucket: ChatDataType[];
-	setChatBucket: Dispatch<SetStateAction<ChatDataType[]>>;
 }
 
-const Textarea = ({
-	socket,
-	onSubmitForm,
-	onChangeChat,
-	chat,
-	placeholder,
-	chatBucket,
-	setChatBucket,
-}: Props): JSX.Element => {
+const Textarea = ({ socket, onSubmitForm, onChangeChat, chat }: Props): JSX.Element => {
 	const profileInfo = useSelector(getProfileInfoSelector);
-	const { part: room } = useParams<{ projectUrl: string; part: string }>();
+	const chatData = useSelector(getChatDataSelector);
 
+	const dispatch = useDispatch();
+	const { part: room } = useParams<{ projectUrl: string; part: string }>();
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const imageInput = useRef<HTMLInputElement>(null);
 
 	const [chatUploadImage, setChatUploadImage] = useState<string>('');
 
-	useEffect(() => {
-		if (textareaRef.current) {
-			autosize(textareaRef.current);
-		}
-	}, [textareaRef.current]);
-
 	const onKeydownChat = useCallback(
 		(e: KeyboardEvent<HTMLTextAreaElement>): void => {
 			if (e.key === 'Enter') {
@@ -77,26 +53,32 @@ const Textarea = ({
 		[onSubmitForm],
 	);
 
+	// TODO: 채팅 이미지 업로드 창 열기
+	const onChatUploadImage = useCallback(() => {
+		clickUploadImage(imageInput);
+	}, [imageInput]);
+
 	const onChangeUploadImage = useCallback((e: ChangeEvent<HTMLInputElement>): void => {
 		e.preventDefault();
 		changeImage(e, setChatUploadImage);
 	}, []);
 
+	useEffect(() => {
+		if (textareaRef.current) {
+			autosize(textareaRef.current);
+		}
+	}, [textareaRef.current]);
+
 	// TODO: 채팅 이미지 업로드
 	useEffect(() => {
 		if (chatUploadImage) {
 			const newChat: ChatDataType = newChatData(-1, '', chatUploadImage, room, profileInfo);
 			const getImageData: ChatUpdateDataType = getChatUploadImageData(room, profileInfo, chatUploadImage);
 
-			setChatBucket([...chatBucket, newChat]);
 			socket?.emit('sendImage', getImageData);
+			dispatch(sendMessages([newChat]));
 		}
-	}, [chatUploadImage]);
-
-	// TODO: 채팅 이미지 업로드 창 열기
-	const onChatUploadImage = useCallback(() => {
-		clickUploadImage(imageInput);
-	}, [imageInput]);
+	}, [chatUploadImage, chatData]);
 
 	return (
 		<ChatAreaContainer>
@@ -106,7 +88,7 @@ const Textarea = ({
 						value={chat}
 						onChange={onChangeChat}
 						onKeyPress={onKeydownChat}
-						placeholder={placeholder}
+						placeholder={`${room}에게 메세지 보내기`}
 						ref={textareaRef}
 					></ChatTextarea>
 				</ChatForm>
diff --git a/src/reducer/chat.ts b/src/reducer/chat.ts
new file mode 100644
index 0000000..bbfb9ad
--- /dev/null
+++ b/src/reducer/chat.ts
@@ -0,0 +1,54 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootStateOrAny } from 'react-redux';
+
+import { ChatDataType } from '../types/types';
+
+// TODO: 초기 상태
+const initialState: ChatDataType[] = [
+	// {
+	// 	id: -1,
+	// 	text: '',
+	// 	uploadImage: '',
+	// 	room: '',
+	// 	index: -1,
+	// 	writer: {
+	// 		id: null,
+	// 		name: '',
+	// 		email: '',
+	// 		mobile: '',
+	// 		gitId: '',
+	// 		career: {
+	// 			office: '',
+	// 			job: '',
+	// 			period: '',
+	// 		},
+	// 		aboutMe: '',
+	// 		uploadImage: '',
+	// 		profileColor: '',
+	// 		createdAt: '',
+	// 		updatedAt: '',
+	// 	},
+	// 	createdAt: '',
+	// 	project: undefined,
+	// 	foundChat: undefined,
+	// 	chat: undefined,
+	// },
+];
+
+// TODO: slice 실행
+export const chatSlice = createSlice({
+	name: 'chat',
+	initialState,
+	reducers: {
+		getAllMessages: (state, { payload }: PayloadAction<ChatDataType[]>) => {
+			return [...payload, ...state];
+		},
+		sendMessages: (state, { payload }: PayloadAction<ChatDataType[]>) => {
+			return [...state, ...payload];
+		},
+	},
+});
+
+export const { getAllMessages, sendMessages } = chatSlice.actions;
+
+export const getChatDataSelector = (state: RootStateOrAny): ChatDataType[] => state.chatSlice;
diff --git a/src/reducer/index.ts b/src/reducer/index.ts
index 4669984..b147b36 100644
--- a/src/reducer/index.ts
+++ b/src/reducer/index.ts
@@ -9,6 +9,7 @@ import { roomsListInfoSlice } from './roomsList';
 import { kanbanDataSlice } from './kanban';
 import { projectInfoSlice } from './projectInfo';
 import { loginSlice } from './login';
+import { chatSlice } from './chat';
 
 const reducer = combineReducers({
 	profileInfoSlice: profileInfoSlice.reducer,
@@ -19,6 +20,7 @@ const reducer = combineReducers({
 	kanbanDataSlice: kanbanDataSlice.reducer,
 	projectInfoSlice: projectInfoSlice.reducer,
 	loginSlice: loginSlice.reducer,
+	chatSlice: chatSlice.reducer,
 });
 
 export default configureStore({
diff --git a/src/utils/chatSection.ts b/src/utils/chatSection.ts
index cad97ce..0e3f9b2 100644
--- a/src/utils/chatSection.ts
+++ b/src/utils/chatSection.ts
@@ -4,10 +4,10 @@ import 'dayjs/locale/ko';
 import { ChatDataType, ChatSectionType } from '../types/types';
 
 dayjs.locale('ko');
-export const chatSection = (chatBucket: ChatDataType[]): ChatSectionType => {
+export const chatSection = (chatData: ChatDataType[]): ChatSectionType => {
 	const sections: ChatSectionType = {};
 
-	chatBucket.forEach(chat => {
+	chatData.forEach(chat => {
 		const monthDate = dayjs(chat.createdAt).format('M월 D일 ddd요일');
 
 		if (Array.isArray(sections[monthDate])) {