From 3d08613182fc7e3f039cf1adb5cf6f84de22942e Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 10:10:04 +0900
Subject: [PATCH 01/10] Add chat id to chat data type

---
 src/components/Chat/ChatContainer/index.tsx | 7 ++++---
 src/types/types.ts                          | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx
index c8de28c..39d79ca 100644
--- a/src/components/Chat/ChatContainer/index.tsx
+++ b/src/components/Chat/ChatContainer/index.tsx
@@ -47,8 +47,8 @@ const WorkSpaceChat = (): JSX.Element => {
 
 	// TODO: 메세지를 받으면 재렌더링 한다.
 	useEffect(() => {
-		socket?.on('sendMessage', ({ text, writer, room, project, createdAt }: ChatDataType) => {
-			setChatBucket([...chatBucket, { text, writer, room, project, createdAt }]);
+		socket?.on('sendMessage', ({ id, text, writer, room, project, createdAt }: ChatDataType) => {
+			setChatBucket([...chatBucket, { id, text, writer, room, project, createdAt }]);
 		});
 	}, [chatBucket]);
 
@@ -74,6 +74,7 @@ const WorkSpaceChat = (): JSX.Element => {
 				message: chat,
 			};
 			const newChat: ChatDataType = {
+				id: null,
 				text: chat,
 				room: room,
 				createdAt: newChatDate.toString(),
@@ -110,7 +111,7 @@ const WorkSpaceChat = (): JSX.Element => {
 
 	return (
 		<WorkSpaceFrame>
-			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} />
+			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} setChatBucket={setChatBucket} />
 			<Textarea
 				onSubmitForm={onSubmitForm}
 				onChangeChat={onChangeChatValue}
diff --git a/src/types/types.ts b/src/types/types.ts
index 4e4ee0c..571bb77 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -213,6 +213,7 @@ export interface projectCreateDataType {
 ///////////////////////////////////////////////////////
 
 export interface ChatDataType {
+	id: number | null;
 	text: string;
 	room: string;
 	writer: ChatWriterDataType;

From caf6660ea2c24f1feb6955d73b717ed4bca2011e Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 10:11:18 +0900
Subject: [PATCH 02/10] Add background-color props to Modal component

---
 src/components/Common/Modal/index.tsx | 12 ++++++++++--
 src/components/Common/Modal/styles.ts | 13 ++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx
index e11c833..03b1ae2 100644
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -4,20 +4,28 @@ import { Dimed, Modalcontainer } from './styles';
 interface Props {
 	children: ReactNode;
 	setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+	backgroundColor: boolean;
 }
 
 /*
 	children - 필요한 모달 창을 자식 요소로 넣어주어 사용
 	setShowModal - 상태로 열고 닫음을 구분 짓기 위해 setState 형식을 전달 시켜 사용
+	
+	5.27 수정
+	background-color가 false이면 배경색 없음, 기본값은 dimed 처리
 */
 
-const Modal = ({ children, setShowModal }: Props): JSX.Element => {
+const Modal = ({ children, setShowModal, backgroundColor }: Props): JSX.Element => {
 	return (
 		<Modalcontainer>
-			<Dimed onClick={() => setShowModal(false)} />
+			<Dimed backgroundColor={backgroundColor} onClick={() => setShowModal(false)} />
 			{children}
 		</Modalcontainer>
 	);
 };
 
+Modal.defaultProps = {
+	backgroundColor: true,
+};
+
 export default Modal;
diff --git a/src/components/Common/Modal/styles.ts b/src/components/Common/Modal/styles.ts
index 80cb918..08c22ae 100644
--- a/src/components/Common/Modal/styles.ts
+++ b/src/components/Common/Modal/styles.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Modalcontainer = styled.div`
 	${({ theme }) => theme.align.positionCenter}
@@ -6,9 +6,16 @@ export const Modalcontainer = styled.div`
 	z-index: 100;
 `;
 
-export const Dimed = styled.div`
+export const Dimed = styled.div<{ backgroundColor: boolean }>`
 	width: 100vw;
 	height: 100vh;
 	margin-top: -1px;
-	background-color: rgba(0, 0, 0, 0.3);
+	${props =>
+		props.backgroundColor
+			? css`
+					background-color: rgba(0, 0, 0, 0.3);
+			  `
+			: `
+			background-color: transparent;
+	`}
 `;

From c89f8580828ea02324efc1bcb8853966d629eaca Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 10:26:17 +0900
Subject: [PATCH 03/10] Add z-index

---
 src/components/Chat/ChatZone/styles.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/ChatZone/styles.ts b/src/components/Chat/ChatZone/styles.ts
index 4937f18..ebe4833 100644
--- a/src/components/Chat/ChatZone/styles.ts
+++ b/src/components/Chat/ChatZone/styles.ts
@@ -14,16 +14,16 @@ export const ChatList = styled.section`
 
 export const ChatDateHeader = styled.div`
 	${({ theme }) => theme.align.flexHorizontal};
+	flex: 1;
 	position: sticky;
 	top: 14px;
-	flex: 1;
+	z-index: 10;
 	width: 100%;
 
 	& button {
 		outline: none;
 		position: relative;
 		top: -14px;
-		z-index: 10;
 		height: 28px;
 		line-height: 28px;
 		padding: 0 16px;

From 464df44de1d14deaee38e1894b71ddd69a9db0e8 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 10:27:17 +0900
Subject: [PATCH 04/10] Add #221 chat item hover feature

---
 src/components/Chat/ChatItem/index.tsx | 61 ++++++++++++++++++++++--
 src/components/Chat/ChatItem/styles.ts | 65 ++++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 3 deletions(-)

diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 00bad41..2955930 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -1,12 +1,20 @@
-import React, { memo } from 'react';
+import React, { Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react';
 import ProfileImage from '../../Common/ProfileImage';
+import ChatProfileModal from '../ChatProfileModal';
+import Modal from '../../Common/Modal';
+import useSocket from '../../../hooks/useSocket';
 
 import dayjs from 'dayjs';
+import { useParams } from 'react-router';
 
 import {
 	ChatContent,
 	ChatCreatedAt,
+	ChatDeleteButton,
+	ChatEditbutton,
+	ChatNowDateHover,
 	ChatProfileImageWrapper,
+	ChatUpdateModal,
 	ChatUserId,
 	ChatUserInfoWrapper,
 	ChatWrapper,
@@ -17,16 +25,52 @@ import { ChatDataType } from '../../../types/types';
 interface Props {
 	data: ChatDataType;
 	isSameSender: boolean;
+	setChatBucket: Dispatch<SetStateAction<ChatDataType[]>>;
 }
 
-const ChatItem = ({ data, isSameSender }: Props): JSX.Element => {
+const ChatItem = ({ data, isSameSender, setChatBucket }: Props): JSX.Element => {
+	const { projectUrl, part: room } = useParams<{ projectUrl: string; part: string }>();
+	const [socket] = useSocket(projectUrl);
+
+	const [showChatProfileModal, setShowChatProfileModal] = useState<boolean>(false);
+
 	const { uploadImage, profileColor, name } = data.writer;
 	let date = dayjs(data.createdAt);
 	date = date.add(9, 'hour');
 
+	const onShowChatProfileModal = useCallback(e => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		setShowChatProfileModal(true);
+	}, []);
+
+	// console.log(data.id);
+	const onChatEditButton = useCallback(() => {
+		console.log(data.id);
+	}, []);
+
+	useEffect(() => {
+		socket?.on('deleteMessage', ({ id }) => {
+			console.log({ id });
+			// setChatBucket([...{ id }])
+		});
+	}, []);
+
+	const onChatDeleteButton = useCallback(e => {
+		console.log('room확인', room);
+		console.log(data.id);
+		e.preventDefault();
+		const getChatDeleteData = {
+			room: room,
+			id: data.id,
+		};
+		socket?.emit('deleteMessage', getChatDeleteData);
+	}, []);
+
 	return (
 		<ChatWrapper isSameSender={isSameSender}>
-			<ChatProfileImageWrapper isSameSender={isSameSender}>
+			<ChatProfileImageWrapper isSameSender={isSameSender} onClick={e => onShowChatProfileModal(e)}>
 				<ProfileImage
 					width="40px"
 					height="40px"
@@ -35,6 +79,12 @@ const ChatItem = ({ data, isSameSender }: Props): JSX.Element => {
 					userName={name}
 				/>
 			</ChatProfileImageWrapper>
+			{showChatProfileModal && (
+				<Modal backgroundColor={false} setShowModal={setShowChatProfileModal}>
+					<ChatProfileModal data={data} />
+				</Modal>
+			)}
+
 			<div>
 				<ChatUserInfoWrapper isSameSender={isSameSender}>
 					<ChatUserId>{name}</ChatUserId>
@@ -42,6 +92,11 @@ const ChatItem = ({ data, isSameSender }: Props): JSX.Element => {
 				</ChatUserInfoWrapper>
 				<ChatContent isSameSender={isSameSender}>{data.text}</ChatContent>
 			</div>
+			<ChatUpdateModal>
+				<ChatEditbutton onClick={onChatEditButton} />
+				<ChatDeleteButton onClick={onChatDeleteButton} />
+			</ChatUpdateModal>
+			<ChatNowDateHover isSameSender={isSameSender}>{dayjs(date).format('A h:mm')}</ChatNowDateHover>
 		</ChatWrapper>
 	);
 };
diff --git a/src/components/Chat/ChatItem/styles.ts b/src/components/Chat/ChatItem/styles.ts
index 0609fff..a1fd4fa 100644
--- a/src/components/Chat/ChatItem/styles.ts
+++ b/src/components/Chat/ChatItem/styles.ts
@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components';
+import { HiOutlineTrash, HiOutlinePencil } from 'react-icons/hi';
 
 export const ChatWrapper = styled.div<{ isSameSender: boolean }>`
+	position: relative;
 	width: 100%;
 	padding: 8px 20px;
 
@@ -12,6 +14,10 @@ export const ChatWrapper = styled.div<{ isSameSender: boolean }>`
 		background: #eee;
 	}
 
+	&:hover > span {
+		opacity: 1;
+	}
+
 	${props =>
 		props.isSameSender
 			? css`
@@ -23,7 +29,47 @@ export const ChatWrapper = styled.div<{ isSameSender: boolean }>`
 	`}
 `;
 
+// ------------------TODO: 채팅 수정 및 삭제 버튼 모달 ------------------
+
+export const ChatUpdateModal = styled.span`
+	opacity: 0;
+	${({ theme }) => theme.align.flexCenter};
+	flex-direction: row;
+	position: absolute;
+	top: -16px;
+	right: 40px;
+	z-index: 10;
+	width: 80px;
+	height: 30px;
+	background-color: #fff;
+	border: 1px solid ${({ theme }) => theme.color.lineColor};
+	border-radius: 30px;
+`;
+
+export const ChatEditbutton = styled(HiOutlinePencil)`
+	cursor: pointer;
+	margin: 0 2px;
+	font-size: 22px;
+	color: #555555;
+
+	&:hover {
+		color: ${({ theme }) => theme.color.pointColor};
+	}
+`;
+
+export const ChatDeleteButton = styled(HiOutlineTrash)`
+	cursor: pointer;
+	margin: 0 2px;
+	font-size: 22px;
+	color: #555555;
+
+	&:hover {
+		color: ${({ theme }) => theme.color.warningColor};
+	}
+`;
+
 export const ChatProfileImageWrapper = styled.div<{ isSameSender: boolean }>`
+	position: relative;
 	${props =>
 		props.isSameSender
 			? css`
@@ -34,6 +80,8 @@ export const ChatProfileImageWrapper = styled.div<{ isSameSender: boolean }>`
 	`}
 `;
 
+// ------------------TODO: 채팅 디테일 ------------------
+
 export const ChatUserInfoWrapper = styled.div<{ isSameSender: boolean }>`
 	${props =>
 		props.isSameSender
@@ -71,3 +119,20 @@ export const ChatContent = styled.p<{ isSameSender: boolean }>`
 			margin-top: 8px;
 	`}
 `;
+
+export const ChatNowDateHover = styled.span<{ isSameSender: boolean }>`
+	opacity: 0;
+	position: absolute;
+	left: 4px;
+	font-family: NanumSquareR;
+	font-size: 13px;
+	color: #6b6b6b;
+	${props =>
+		props.isSameSender
+			? css`
+					display: block;
+			  `
+			: `
+		display: none;
+`}
+`;

From 7de2febe6ed4be70c0d43651f4de6ac1d0954b80 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 12:51:12 +0900
Subject: [PATCH 05/10] Add transition to cancel props in button component

---
 src/components/Common/Button/styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Common/Button/styles.ts b/src/components/Common/Button/styles.ts
index 5e1d968..e55420f 100644
--- a/src/components/Common/Button/styles.ts
+++ b/src/components/Common/Button/styles.ts
@@ -42,6 +42,7 @@ export const ButtonTag = styled.button<{ size: string; buttonType: string; margi
 			border: 1px solid ${({ theme }) => theme.color.lineColor};
 
 			&:hover {
+				transition: 0.1s;
 				color: ${({ theme }) => theme.color.warningColor};
 				background-color: rgba(255, 255, 255, 0);
 				border: 1px solid ${({ theme }) => theme.color.warningColor};

From 112dd4207a82bbcb749f09a88c78b06ef84b6e34 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 12:52:10 +0900
Subject: [PATCH 06/10] Use #224 socket implemented chat delete feature

---
 src/components/Chat/ChatContainer/index.tsx | 11 +++
 src/components/Chat/ChatItem/index.tsx      | 78 +++++++++++++++------
 src/components/Chat/ChatItem/styles.ts      | 62 ++++++++++++++++
 3 files changed, 131 insertions(+), 20 deletions(-)

diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx
index 39d79ca..bae51b3 100644
--- a/src/components/Chat/ChatContainer/index.tsx
+++ b/src/components/Chat/ChatContainer/index.tsx
@@ -50,6 +50,17 @@ const WorkSpaceChat = (): JSX.Element => {
 		socket?.on('sendMessage', ({ id, text, writer, room, project, createdAt }: ChatDataType) => {
 			setChatBucket([...chatBucket, { id, text, writer, room, project, createdAt }]);
 		});
+		socket?.on('deleteMessage', ({ id }) => {
+			const copyChatBucket = [...chatBucket];
+			const findChat = (copyChatBucket: ChatDataType): true | undefined => {
+				if (copyChatBucket.id === id) {
+					return true;
+				}
+			};
+			const findChatIndex = copyChatBucket.findIndex(findChat);
+			copyChatBucket.splice(findChatIndex, 1);
+			setChatBucket([...copyChatBucket]);
+		});
 	}, [chatBucket]);
 
 	// TODO: 스크롤바는 항상 맨 밑에 위치한다.
diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 2955930..565b2da 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react';
 import ProfileImage from '../../Common/ProfileImage';
 import ChatProfileModal from '../ChatProfileModal';
 import Modal from '../../Common/Modal';
@@ -8,8 +8,14 @@ import dayjs from 'dayjs';
 import { useParams } from 'react-router';
 
 import {
+	AlertButtonWrapper,
+	AlertChatContent,
+	AlertChatDeleteButton,
+	AlertChatItem,
+	AlertChatItemUserInfoWrapper,
 	ChatContent,
 	ChatCreatedAt,
+	ChatDeleteAlert,
 	ChatDeleteButton,
 	ChatEditbutton,
 	ChatNowDateHover,
@@ -21,6 +27,7 @@ import {
 } from './styles';
 
 import { ChatDataType } from '../../../types/types';
+import Button from '../../Common/Button';
 
 interface Props {
 	data: ChatDataType;
@@ -33,40 +40,39 @@ const ChatItem = ({ data, isSameSender, setChatBucket }: Props): JSX.Element =>
 	const [socket] = useSocket(projectUrl);
 
 	const [showChatProfileModal, setShowChatProfileModal] = useState<boolean>(false);
+	const [showChatDeleteAlert, setShowChatDeleteAlert] = useState<boolean>(false);
+	const [showChatEditForm, setShowChatEditForm] = useState<boolean>(false);
 
 	const { uploadImage, profileColor, name } = data.writer;
 	let date = dayjs(data.createdAt);
 	date = date.add(9, 'hour');
 
+	// TODO: 채팅 프로필 모달
 	const onShowChatProfileModal = useCallback(e => {
 		e.preventDefault();
 		e.stopPropagation();
-
 		setShowChatProfileModal(true);
 	}, []);
 
-	// console.log(data.id);
 	const onChatEditButton = useCallback(() => {
 		console.log(data.id);
 	}, []);
 
-	useEffect(() => {
-		socket?.on('deleteMessage', ({ id }) => {
-			console.log({ id });
-			// setChatBucket([...{ id }])
-		});
-	}, []);
+	// TODO: 채팅 삭제 버튼
+	const onChatDeleteButton = useCallback(
+		(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+			e.preventDefault();
+			e.stopPropagation();
+			setShowChatDeleteAlert(false);
 
-	const onChatDeleteButton = useCallback(e => {
-		console.log('room확인', room);
-		console.log(data.id);
-		e.preventDefault();
-		const getChatDeleteData = {
-			room: room,
-			id: data.id,
-		};
-		socket?.emit('deleteMessage', getChatDeleteData);
-	}, []);
+			const getChatDeleteData = {
+				room: room,
+				id: data.id,
+			};
+			socket?.emit('deleteMessage', getChatDeleteData);
+		},
+		[data],
+	);
 
 	return (
 		<ChatWrapper isSameSender={isSameSender}>
@@ -94,9 +100,41 @@ const ChatItem = ({ data, isSameSender, setChatBucket }: Props): JSX.Element =>
 			</div>
 			<ChatUpdateModal>
 				<ChatEditbutton onClick={onChatEditButton} />
-				<ChatDeleteButton onClick={onChatDeleteButton} />
+				<ChatDeleteButton onClick={() => setShowChatDeleteAlert(true)} />
 			</ChatUpdateModal>
 			<ChatNowDateHover isSameSender={isSameSender}>{dayjs(date).format('A h:mm')}</ChatNowDateHover>
+			{showChatDeleteAlert && (
+				<Modal setShowModal={setShowChatDeleteAlert}>
+					<ChatDeleteAlert>
+						<div>메세지 삭제</div>
+						<p>이 메시지를 삭제하시겠습니까? 이 작업은 실행 취소할 수 없습니다.</p>
+						<AlertChatItem>
+							<div>
+								<ProfileImage
+									width="40px"
+									height="40px"
+									profileImage={uploadImage}
+									profileColor={profileColor}
+									userName={name}
+								/>
+							</div>
+							<AlertChatItemUserInfoWrapper>
+								<div>
+									<ChatUserId>{name}</ChatUserId>
+									<ChatCreatedAt>{dayjs(date).format('A h:mm')}</ChatCreatedAt>
+								</div>
+								<AlertChatContent>{data.text}</AlertChatContent>
+							</AlertChatItemUserInfoWrapper>
+						</AlertChatItem>
+						<AlertButtonWrapper>
+							<Button size="small" buttonType="cancel" clickEvent={() => setShowChatDeleteAlert(false)}>
+								취소
+							</Button>
+							<AlertChatDeleteButton onClick={onChatDeleteButton}>삭제</AlertChatDeleteButton>
+						</AlertButtonWrapper>
+					</ChatDeleteAlert>
+				</Modal>
+			)}
 		</ChatWrapper>
 	);
 };
diff --git a/src/components/Chat/ChatItem/styles.ts b/src/components/Chat/ChatItem/styles.ts
index a1fd4fa..afa5c08 100644
--- a/src/components/Chat/ChatItem/styles.ts
+++ b/src/components/Chat/ChatItem/styles.ts
@@ -136,3 +136,65 @@ export const ChatNowDateHover = styled.span<{ isSameSender: boolean }>`
 		display: none;
 `}
 `;
+
+// ------------------TODO: 채팅 삭제 시 모달 ------------------
+
+export const ChatDeleteAlert = styled.div`
+	${({ theme }) => theme.align.positionCenter}
+	padding: 30px;
+	background-color: #fff;
+	border-radius: 3px;
+
+	& > div {
+		font-family: NanumSquareB;
+		font-size: 20px;
+		margin-bottom: 8px;
+	}
+
+	& > p {
+		font-family: NanumSquareR;
+		font-size: 16px;
+		margin-bottom: 16px;
+	}
+`;
+
+export const AlertChatItem = styled.div`
+	${({ theme }) => theme.align.flexVertical};
+	flex-direction: row;
+	width: 440px;
+	height: 80px;
+	padding: 12px;
+	border: 1px solid ${({ theme }) => theme.color.lineColor};
+`;
+
+export const AlertChatItemUserInfoWrapper = styled.div`
+	margin-left: 12px;
+`;
+
+export const AlertChatContent = styled.div`
+	margin-top: 4px;
+	font-family: NanumSquareR;
+	font-size: 16px;
+`;
+
+export const AlertButtonWrapper = styled.div`
+	display: flex;
+	justify-content: flex-end;
+`;
+
+export const AlertChatDeleteButton = styled.button`
+	width: 65px;
+	hegiht: 40px;
+	margin-left: 12px;
+	font-family: 'NanumSquareB';
+	font-size: 14px;
+	color: #fff;
+	background-color: ${({ theme }) => theme.color.warningColor};
+	border-radius: 3px;
+
+	&:hover {
+		transition: 0.1s;
+		color: #ddd;
+		background-color: #c91b1b;
+	}
+`;

From bb2f354368f6172be2ef97ea2d51406c9653272e Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 18:10:28 +0900
Subject: [PATCH 07/10] Add html textarea element type to useInput hook

---
 src/hooks/useInput.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts
index d4d3d77..3082112 100644
--- a/src/hooks/useInput.ts
+++ b/src/hooks/useInput.ts
@@ -1,10 +1,14 @@
 import { useCallback, useState, Dispatch, ChangeEvent, SetStateAction } from 'react';
 
-type ReturnTypes<T> = [T, (e: ChangeEvent<HTMLInputElement>) => void, Dispatch<SetStateAction<T>>];
+type ReturnTypes<T> = [
+	T,
+	(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void,
+	Dispatch<SetStateAction<T>>,
+];
 
 const useInput = <T>(initialData: T): ReturnTypes<T> => {
 	const [value, setValue] = useState(initialData);
-	const handler = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+	const handler = useCallback((e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
 		setValue(e.target.value as unknown as T);
 	}, []);
 

From 23615ce48627207fc7a8ce395d46fd6c045e6f6a Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 18:12:30 +0900
Subject: [PATCH 08/10] Use #223 socket implemented edit chat feature

---
 src/components/Chat/ChatItem/index.tsx | 84 +++++++++++++++++++++++---
 src/components/Chat/ChatItem/styles.ts | 31 +++++++++-
 2 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 565b2da..6c0d5c8 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -1,10 +1,11 @@
-import React, { ChangeEvent, Dispatch, memo, SetStateAction, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import ProfileImage from '../../Common/ProfileImage';
 import ChatProfileModal from '../ChatProfileModal';
 import Modal from '../../Common/Modal';
 import useSocket from '../../../hooks/useSocket';
 
 import dayjs from 'dayjs';
+import autosize from 'autosize';
 import { useParams } from 'react-router';
 
 import {
@@ -18,6 +19,8 @@ import {
 	ChatDeleteAlert,
 	ChatDeleteButton,
 	ChatEditbutton,
+	ChatEditButtonWrapper,
+	ChatEditTextArea,
 	ChatNowDateHover,
 	ChatProfileImageWrapper,
 	ChatUpdateModal,
@@ -28,34 +31,82 @@ import {
 
 import { ChatDataType } from '../../../types/types';
 import Button from '../../Common/Button';
+import useInput from '../../../hooks/useInput';
 
 interface Props {
 	data: ChatDataType;
 	isSameSender: boolean;
-	setChatBucket: Dispatch<SetStateAction<ChatDataType[]>>;
+	chatBucket: ChatDataType[];
 }
 
-const ChatItem = ({ data, isSameSender, setChatBucket }: Props): JSX.Element => {
+const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
 	const { projectUrl, part: room } = useParams<{ projectUrl: string; part: string }>();
 	const [socket] = useSocket(projectUrl);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
 
 	const [showChatProfileModal, setShowChatProfileModal] = useState<boolean>(false);
 	const [showChatDeleteAlert, setShowChatDeleteAlert] = useState<boolean>(false);
 	const [showChatEditForm, setShowChatEditForm] = useState<boolean>(false);
+	const [editChat, onChangeChat, setEditChat] = useInput<string>(data.text);
 
 	const { uploadImage, profileColor, name } = data.writer;
 	let date = dayjs(data.createdAt);
 	date = date.add(9, 'hour');
 
+	useEffect(() => {
+		if (textareaRef.current) {
+			autosize(textareaRef.current);
+		}
+	}, [textareaRef.current]);
+
 	// TODO: 채팅 프로필 모달
 	const onShowChatProfileModal = useCallback(e => {
 		e.preventDefault();
+		if (editChat.trim() === '') {
+			return;
+		}
 		e.stopPropagation();
 		setShowChatProfileModal(true);
 	}, []);
 
-	const onChatEditButton = useCallback(() => {
-		console.log(data.id);
+	// TODO: 채팅 수정 엔터
+	const onChatEditEnter = useCallback((): void => {
+		if (editChat.trim() === '') {
+			return;
+		}
+
+		const getChatEditData = {
+			room: room,
+			id: data.id,
+			message: editChat,
+		};
+
+		socket?.emit('editMessage', getChatEditData);
+		setShowChatEditForm(false);
+	}, [editChat]);
+
+	// TODO: 채팅 수정 버튼
+	const onChatEditButton = useCallback(
+		(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			const getChatEditData = {
+				room: room,
+				id: data.id,
+				message: editChat,
+			};
+
+			socket?.emit('editMessage', getChatEditData);
+			setShowChatEditForm(false);
+		},
+		[editChat],
+	);
+	// TODO: 채팅 수정 실행 취소
+	const onChatEditCancel = useCallback((e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+		e.preventDefault();
+		setEditChat(data.text);
+		setShowChatEditForm(false);
 	}, []);
 
 	// TODO: 채팅 삭제 버튼
@@ -90,16 +141,33 @@ const ChatItem = ({ data, isSameSender, setChatBucket }: Props): JSX.Element =>
 					<ChatProfileModal data={data} />
 				</Modal>
 			)}
-
 			<div>
 				<ChatUserInfoWrapper isSameSender={isSameSender}>
 					<ChatUserId>{name}</ChatUserId>
 					<ChatCreatedAt>{dayjs(date).format('A h:mm')}</ChatCreatedAt>
 				</ChatUserInfoWrapper>
-				<ChatContent isSameSender={isSameSender}>{data.text}</ChatContent>
+				<ChatContent isSameSender={isSameSender}>
+					{showChatEditForm ? (
+						<div>
+							<ChatEditTextArea
+								value={editChat}
+								onChange={onChangeChat}
+								ref={textareaRef}
+								onKeyPress={e => e.key === 'Enter' && onChatEditEnter()}
+								onBlur={onChatEditEnter}
+							/>
+							<ChatEditButtonWrapper>
+								<button onClick={onChatEditCancel}>취소</button>
+								<button onClick={onChatEditButton}>저장</button>
+							</ChatEditButtonWrapper>
+						</div>
+					) : (
+						<>{data.text}</>
+					)}
+				</ChatContent>
 			</div>
 			<ChatUpdateModal>
-				<ChatEditbutton onClick={onChatEditButton} />
+				<ChatEditbutton onClick={() => setShowChatEditForm(true)} />
 				<ChatDeleteButton onClick={() => setShowChatDeleteAlert(true)} />
 			</ChatUpdateModal>
 			<ChatNowDateHover isSameSender={isSameSender}>{dayjs(date).format('A h:mm')}</ChatNowDateHover>
diff --git a/src/components/Chat/ChatItem/styles.ts b/src/components/Chat/ChatItem/styles.ts
index afa5c08..f8c454f 100644
--- a/src/components/Chat/ChatItem/styles.ts
+++ b/src/components/Chat/ChatItem/styles.ts
@@ -80,6 +80,35 @@ export const ChatProfileImageWrapper = styled.div<{ isSameSender: boolean }>`
 	`}
 `;
 
+// ------------------TODO: 채팅 수정 인풋 ------------------
+
+export const ChatEditInputWrapper = styled.div``;
+
+export const ChatEditTextArea = styled.textarea`
+	resize: none;
+	${({ theme }) => theme.align.flexVertical};
+	width: 400px;
+	height: 40px;
+	padding: 11px 14px;
+	font-family: NanumSquareR;
+	font-size: 16px;
+	background-color: ${({ theme }) => theme.color.lineColor};
+	border-radius: 4px;
+`;
+
+export const ChatEditButtonWrapper = styled.div`
+	margin-top: 2px;
+	& > button {
+		padding-right: 6px;
+		font-family: NanumSquareR;
+		font-size: 14px;
+		color: ${({ theme }) => theme.color.pointColor};
+		&:hover {
+			color: ${({ theme }) => theme.hover.pointColorHover};
+		}
+	}
+`;
+
 // ------------------TODO: 채팅 디테일 ------------------
 
 export const ChatUserInfoWrapper = styled.div<{ isSameSender: boolean }>`
@@ -105,7 +134,7 @@ export const ChatCreatedAt = styled.span`
 	color: #888888;
 `;
 
-export const ChatContent = styled.p<{ isSameSender: boolean }>`
+export const ChatContent = styled.div<{ isSameSender: boolean }>`
 	margin-top: 8px;
 	font-family: NanumSquareR;
 	font-size: 16px;

From 7c79c4371234b6878a0abc0e491ee5727c71ef7e Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 18:16:20 +0900
Subject: [PATCH 09/10] Add #226 chat item porfile modal

---
 .../Chat/ChatProfileModal/index.tsx           | 60 +++++++++++++++++
 .../Chat/ChatProfileModal/styles.ts           | 67 +++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 src/components/Chat/ChatProfileModal/index.tsx
 create mode 100644 src/components/Chat/ChatProfileModal/styles.ts

diff --git a/src/components/Chat/ChatProfileModal/index.tsx b/src/components/Chat/ChatProfileModal/index.tsx
new file mode 100644
index 0000000..e15fc51
--- /dev/null
+++ b/src/components/Chat/ChatProfileModal/index.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { getProfileInfoSelector } from '../../../reducer/profile';
+import { ChatDataType } from '../../../types/types';
+
+import ProfileImage from '../../Common/ProfileImage';
+import {
+	ChatProfileModalWrapper,
+	GoToProfileLink,
+	PrfileModalBottomWrapper,
+	ProfileModalTopWrapper,
+	ProfileModalUserName,
+	ProfileModalUserAboutMe,
+	LinkWrapper,
+} from './styles';
+
+interface Props {
+	data: ChatDataType;
+}
+
+const ChatProfileModal = ({ data }: Props): JSX.Element => {
+	const profileInfo = useSelector(getProfileInfoSelector);
+	const { uploadImage, profileColor, name, aboutMe, email } = data.writer;
+
+	return (
+		<ChatProfileModalWrapper>
+			<ProfileModalTopWrapper>
+				<ProfileImage
+					width="140px"
+					height="140px"
+					profileImage={uploadImage}
+					profileColor={profileColor}
+					userName={name}
+				/>
+			</ProfileModalTopWrapper>
+			<PrfileModalBottomWrapper>
+				<ProfileModalUserName>{name}</ProfileModalUserName>
+				<ProfileModalUserAboutMe>{aboutMe}</ProfileModalUserAboutMe>
+				{profileInfo.email === email ? (
+					<LinkWrapper>
+						<div>
+							<GoToProfileLink to={`/project`}>내 레시피 보기</GoToProfileLink>
+						</div>
+						<div>
+							<GoToProfileLink to={`/profile/${profileInfo.id}`}>프로필 편집 하기</GoToProfileLink>
+						</div>
+					</LinkWrapper>
+				) : (
+					<>
+						<button>디엠 보내기</button>
+						<button>전체 프로필 보기</button>
+					</>
+				)}
+			</PrfileModalBottomWrapper>
+		</ChatProfileModalWrapper>
+	);
+};
+
+export default ChatProfileModal;
diff --git a/src/components/Chat/ChatProfileModal/styles.ts b/src/components/Chat/ChatProfileModal/styles.ts
new file mode 100644
index 0000000..f4e2685
--- /dev/null
+++ b/src/components/Chat/ChatProfileModal/styles.ts
@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const ChatProfileModalWrapper = styled.div`
+	position: absolute;
+	top: 115px;
+	bottom: 0;
+	left: 372px;
+	right: 0;
+	width: 240px;
+	height: 330px;
+	font-family: NanumSquareR;
+	background-color: #fff;
+	border: 1px solid #a6a6a6;
+	border-radius: 4px;
+	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
+`;
+
+export const ProfileModalTopWrapper = styled.div`
+	${({ theme }) => theme.align.flexCenter};
+	flex-direction: column;
+	width: 100%;
+	height: 180px;
+	background-color: #eee;
+`;
+
+export const ProfileImage = styled.div``;
+
+export const PrfileModalBottomWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 140px;
+	padding: 12px 20px;
+	background-color: #fff;
+	color: #333333;
+`;
+
+export const ProfileModalUserName = styled.div`
+	margin-bottom: 6px;
+	font-family: NanumSquareB;
+	font-size: 24px;
+	color: #333333;
+`;
+
+export const ProfileModalUserAboutMe = styled.div`
+	margin-bottom: 20px;
+	color: #333333;
+`;
+
+export const LinkWrapper = styled.div`
+	dispaly: flex;
+	align-items: center;
+	height: 100%;
+
+	& > div {
+		margin-bottom: 6px;
+	}
+`;
+
+export const GoToProfileLink = styled(Link)`
+	color: ${({ theme }) => theme.color.pointColor};
+
+	&:hover {
+		color: ${({ theme }) => theme.hover.pointColorHover};
+	}
+`;

From 8f36b5f1eb1333073e06afbbc3f8aa4e5921231a Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 18:19:09 +0900
Subject: [PATCH 10/10] Use #223 socket receive data after give data to server

---
 src/components/Chat/ChatContainer/index.tsx | 10 +++++++++-
 src/components/Chat/ChatZone/index.tsx      |  7 ++++---
 src/components/Chat/Textarea/index.tsx      |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx
index bae51b3..503a193 100644
--- a/src/components/Chat/ChatContainer/index.tsx
+++ b/src/components/Chat/ChatContainer/index.tsx
@@ -50,6 +50,14 @@ const WorkSpaceChat = (): JSX.Element => {
 		socket?.on('sendMessage', ({ id, text, writer, room, project, createdAt }: ChatDataType) => {
 			setChatBucket([...chatBucket, { id, text, writer, room, project, createdAt }]);
 		});
+
+		// TODO: 채팅 수정
+		socket?.on('editMessage', (foundChat: ChatDataType) => {
+			console.log('서버에서 받아오는 값', foundChat);
+			setChatBucket([...chatBucket, foundChat]);
+		});
+
+		// TODO: 채팅 삭제
 		socket?.on('deleteMessage', ({ id }) => {
 			const copyChatBucket = [...chatBucket];
 			const findChat = (copyChatBucket: ChatDataType): true | undefined => {
@@ -122,7 +130,7 @@ const WorkSpaceChat = (): JSX.Element => {
 
 	return (
 		<WorkSpaceFrame>
-			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} setChatBucket={setChatBucket} />
+			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} chatBucket={chatBucket} />
 			<Textarea
 				onSubmitForm={onSubmitForm}
 				onChangeChat={onChangeChatValue}
diff --git a/src/components/Chat/ChatZone/index.tsx b/src/components/Chat/ChatZone/index.tsx
index 26dd421..3056794 100644
--- a/src/components/Chat/ChatZone/index.tsx
+++ b/src/components/Chat/ChatZone/index.tsx
@@ -10,9 +10,10 @@ import { ChatDataType, ChatSectionType } from '../../../types/types';
 export interface Props {
 	scrollbarRef: RefObject<Scrollbars>;
 	chatSections: ChatSectionType;
+	chatBucket: ChatDataType[];
 }
 
-const ChatZone = ({ scrollbarRef, chatSections }: Props): JSX.Element => {
+const ChatZone = ({ scrollbarRef, chatSections, chatBucket }: Props): JSX.Element => {
 	const onScrollFrame = useCallback(
 		values => {
 			if (values.scrollTop === 0 && scrollbarRef.current) {
@@ -42,9 +43,9 @@ const ChatZone = ({ scrollbarRef, chatSections }: Props): JSX.Element => {
 									isSameSender = chat.writer.email === chatsBucket[index - 1].writer.email;
 								}
 								return isSameSender ? (
-									<ChatItem key={index} data={chat} isSameSender={true} />
+									<ChatItem key={index} data={chat} isSameSender={true} chatBucket={chatBucket} />
 								) : (
-									<ChatItem key={index} data={chat} isSameSender={false} />
+									<ChatItem key={index} data={chat} isSameSender={false} chatBucket={chatBucket} />
 								);
 							})}
 						</ChatList>
diff --git a/src/components/Chat/Textarea/index.tsx b/src/components/Chat/Textarea/index.tsx
index e4f8911..cf498c3 100644
--- a/src/components/Chat/Textarea/index.tsx
+++ b/src/components/Chat/Textarea/index.tsx
@@ -29,7 +29,7 @@ interface Props {
 	onSubmitForm: (e: FormEvent) => void;
 	onChangeChat: OnChangeHandlerFunc;
 	chat?: string;
-	placeholder: string;
+	placeholder?: string;
 	chatBucket: ChatDataType[];
 }