From e5ccbe62005250eaf633d620d034b84657576325 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 22:07:18 +0900
Subject: [PATCH 1/4] Add image radius to profile image component

---
 src/components/Common/ProfileImage/index.tsx |  6 +++++
 src/components/Common/ProfileImage/styles.ts | 24 ++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/ProfileImage/index.tsx b/src/components/Common/ProfileImage/index.tsx
index 6d630d8..45452fb 100644
--- a/src/components/Common/ProfileImage/index.tsx
+++ b/src/components/Common/ProfileImage/index.tsx
@@ -7,6 +7,10 @@ import { UserProfileDefault, UserProfileImage } from './styles';
 프로필은 프로필 이미지를 변경하였을 경우 유저의 프로필 이미지를 보여주고, 
 설정하지 않았으면 기본 프로필을 보여준다.
 
+5/28 수정
+radius - true: border-radius 100%;
+radius - false: border-radius 0; 
+
 Props: {
   width
   height
@@ -26,6 +30,7 @@ interface Props {
 	profileImage?: string;
 	profileColor?: string;
 	userName?: string;
+	radius: boolean;
 }
 
 const ProfileImage = (props: Props): JSX.Element => {
@@ -51,6 +56,7 @@ ProfileImage.defaultProps = {
 	height: '30px',
 	margin: '0',
 	userNameSize: '16px',
+	radius: 'true',
 };
 
 export default ProfileImage;
diff --git a/src/components/Common/ProfileImage/styles.ts b/src/components/Common/ProfileImage/styles.ts
index 7c76eaf..7c19593 100644
--- a/src/components/Common/ProfileImage/styles.ts
+++ b/src/components/Common/ProfileImage/styles.ts
@@ -1,22 +1,36 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const UserProfileImage = styled.img<{ width: string; margin: string }>`
+export const UserProfileImage = styled.img<{ width: string; margin: string; radius: boolean }>`
 	cursor: pointer;
 	object-fit: cover;
 	${({ theme }) => theme.align.flexCenter}
 	width: ${({ width }) => width};
 	height: ${({ height }) => height};
 	margin: ${({ margin }) => margin};
-	border-radius: 100%;
+	${props =>
+		props.radius
+			? css`
+					border-radius: 100%;
+			  `
+			: `
+		border-radius: 0;
+	`}
 `;
 
-export const UserProfileDefault = styled.div<{ width: string; height: string; margin: string }>`
+export const UserProfileDefault = styled.div<{ width: string; height: string; margin: string; radius: boolean }>`
 	cursor: pointer;
 	${({ theme }) => theme.align.flexCenter}
 	width: ${({ width }) => width};
 	height: ${({ height }) => height};
 	margin: ${({ margin }) => margin};
-	border-radius: 100%;
+	${props =>
+		props.radius
+			? css`
+					border-radius: 100%;
+			  `
+			: `
+		border-radius: 0;
+	`}
 
 	& > span {
 		${({ theme }) => theme.align.flexCenter}

From 1ead0ac3af0e6a881505d364af4cad71a9bba1fc Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 22:08:22 +0900
Subject: [PATCH 2/4] Remove chatBucket props

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

diff --git a/src/components/Chat/ChatContainer/index.tsx b/src/components/Chat/ChatContainer/index.tsx
index 1fd64ee..fe4a47f 100644
--- a/src/components/Chat/ChatContainer/index.tsx
+++ b/src/components/Chat/ChatContainer/index.tsx
@@ -133,7 +133,7 @@ const WorkSpaceChat = (): JSX.Element => {
 
 	return (
 		<WorkSpaceFrame>
-			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} chatBucket={chatBucket} />
+			<ChatZone scrollbarRef={scrollbarRef} chatSections={chatSections} />
 			<Textarea
 				onSubmitForm={onSubmitForm}
 				onChangeChat={onChangeChatValue}
diff --git a/src/components/Chat/ChatZone/index.tsx b/src/components/Chat/ChatZone/index.tsx
index 3056794..26dd421 100644
--- a/src/components/Chat/ChatZone/index.tsx
+++ b/src/components/Chat/ChatZone/index.tsx
@@ -10,10 +10,9 @@ import { ChatDataType, ChatSectionType } from '../../../types/types';
 export interface Props {
 	scrollbarRef: RefObject<Scrollbars>;
 	chatSections: ChatSectionType;
-	chatBucket: ChatDataType[];
 }
 
-const ChatZone = ({ scrollbarRef, chatSections, chatBucket }: Props): JSX.Element => {
+const ChatZone = ({ scrollbarRef, chatSections }: Props): JSX.Element => {
 	const onScrollFrame = useCallback(
 		values => {
 			if (values.scrollTop === 0 && scrollbarRef.current) {
@@ -43,9 +42,9 @@ const ChatZone = ({ scrollbarRef, chatSections, chatBucket }: Props): JSX.Elemen
 									isSameSender = chat.writer.email === chatsBucket[index - 1].writer.email;
 								}
 								return isSameSender ? (
-									<ChatItem key={index} data={chat} isSameSender={true} chatBucket={chatBucket} />
+									<ChatItem key={index} data={chat} isSameSender={true} />
 								) : (
-									<ChatItem key={index} data={chat} isSameSender={false} chatBucket={chatBucket} />
+									<ChatItem key={index} data={chat} isSameSender={false} />
 								);
 							})}
 						</ChatList>

From 4e521e66e6f26250bdd4e6864030f12331a553e8 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 22:09:15 +0900
Subject: [PATCH 3/4] Add socket parameter

---
 src/components/Chat/ChatItem/index.tsx | 36 ++++++++++++++++----------
 src/components/Chat/ChatItem/styles.ts | 15 +++++++++--
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/Chat/ChatItem/index.tsx b/src/components/Chat/ChatItem/index.tsx
index 6c0d5c8..a1bc04d 100644
--- a/src/components/Chat/ChatItem/index.tsx
+++ b/src/components/Chat/ChatItem/index.tsx
@@ -6,7 +6,7 @@ import useSocket from '../../../hooks/useSocket';
 
 import dayjs from 'dayjs';
 import autosize from 'autosize';
-import { useParams } from 'react-router';
+import { useHistory, useParams } from 'react-router';
 
 import {
 	AlertButtonWrapper,
@@ -21,6 +21,8 @@ import {
 	ChatEditbutton,
 	ChatEditButtonWrapper,
 	ChatEditTextArea,
+	ChatItemProfileModal,
+	ChatItemProfileModalWrapper,
 	ChatNowDateHover,
 	ChatProfileImageWrapper,
 	ChatUpdateModal,
@@ -36,12 +38,13 @@ import useInput from '../../../hooks/useInput';
 interface Props {
 	data: ChatDataType;
 	isSameSender: boolean;
-	chatBucket: ChatDataType[];
 }
 
-const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
+const ChatItem = ({ data, isSameSender }: Props): JSX.Element => {
 	const { projectUrl, part: room } = useParams<{ projectUrl: string; part: string }>();
-	const [socket] = useSocket(projectUrl);
+	const history = useHistory();
+	const currentAddress = history.location.pathname.split('/')[3];
+	const [socket] = useSocket(projectUrl, currentAddress);
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 
 	const [showChatProfileModal, setShowChatProfileModal] = useState<boolean>(false);
@@ -62,11 +65,8 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
 	// TODO: 채팅 프로필 모달
 	const onShowChatProfileModal = useCallback(e => {
 		e.preventDefault();
-		if (editChat.trim() === '') {
-			return;
-		}
 		e.stopPropagation();
-		setShowChatProfileModal(true);
+		setShowChatProfileModal(prev => !prev);
 	}, []);
 
 	// TODO: 채팅 수정 엔터
@@ -91,6 +91,10 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
 			e.preventDefault();
 			e.stopPropagation();
 
+			if (editChat.trim() === '') {
+				return;
+			}
+
 			const getChatEditData = {
 				room: room,
 				id: data.id,
@@ -136,11 +140,7 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
 					userName={name}
 				/>
 			</ChatProfileImageWrapper>
-			{showChatProfileModal && (
-				<Modal backgroundColor={false} setShowModal={setShowChatProfileModal}>
-					<ChatProfileModal data={data} />
-				</Modal>
-			)}
+
 			<div>
 				<ChatUserInfoWrapper isSameSender={isSameSender}>
 					<ChatUserId>{name}</ChatUserId>
@@ -203,6 +203,16 @@ const ChatItem = ({ data, isSameSender, chatBucket }: Props): JSX.Element => {
 					</ChatDeleteAlert>
 				</Modal>
 			)}
+			{/* showModal={showChatProfileModal} */}
+			{showChatProfileModal && (
+				// <Modal backgroundColor={false} setShowModal={setShowChatProfileModal}>
+				// </Modal>
+				<ChatItemProfileModalWrapper onClick={onShowChatProfileModal}>
+					<ChatItemProfileModal>
+						<ChatProfileModal data={data} />
+					</ChatItemProfileModal>
+				</ChatItemProfileModalWrapper>
+			)}
 		</ChatWrapper>
 	);
 };
diff --git a/src/components/Chat/ChatItem/styles.ts b/src/components/Chat/ChatItem/styles.ts
index f8c454f..d2089fc 100644
--- a/src/components/Chat/ChatItem/styles.ts
+++ b/src/components/Chat/ChatItem/styles.ts
@@ -29,6 +29,19 @@ export const ChatWrapper = styled.div<{ isSameSender: boolean }>`
 	`}
 `;
 
+// ------------------TODO: 채팅 프로필 이미지 모달 ------------------
+
+export const ChatItemProfileModalWrapper = styled.div``;
+
+export const ChatItemProfileModal = styled.div`
+	${({ theme }) => theme.align.flexCenter};
+	flex-direction: row;
+	position: absolute;
+	top: 6px;
+	left: 70px;
+	z-index: 10;
+`;
+
 // ------------------TODO: 채팅 수정 및 삭제 버튼 모달 ------------------
 
 export const ChatUpdateModal = styled.span`
@@ -82,8 +95,6 @@ export const ChatProfileImageWrapper = styled.div<{ isSameSender: boolean }>`
 
 // ------------------TODO: 채팅 수정 인풋 ------------------
 
-export const ChatEditInputWrapper = styled.div``;
-
 export const ChatEditTextArea = styled.textarea`
 	resize: none;
 	${({ theme }) => theme.align.flexVertical};

From 0596a04479c63718ae48cbd955d97cd02e35b8f2 Mon Sep 17 00:00:00 2001
From: useonglee <useong0830@naver.com>
Date: Fri, 28 May 2021 22:09:53 +0900
Subject: [PATCH 4/4] Add #226 chat profile modal feature

---
 src/components/Chat/ChatProfileModal/index.tsx | 5 +++--
 src/components/Chat/ChatProfileModal/styles.ts | 9 ++-------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Chat/ChatProfileModal/index.tsx b/src/components/Chat/ChatProfileModal/index.tsx
index e15fc51..5f9e462 100644
--- a/src/components/Chat/ChatProfileModal/index.tsx
+++ b/src/components/Chat/ChatProfileModal/index.tsx
@@ -27,11 +27,12 @@ const ChatProfileModal = ({ data }: Props): JSX.Element => {
 		<ChatProfileModalWrapper>
 			<ProfileModalTopWrapper>
 				<ProfileImage
-					width="140px"
-					height="140px"
+					width="100%"
+					height="100%"
 					profileImage={uploadImage}
 					profileColor={profileColor}
 					userName={name}
+					radius={false}
 				/>
 			</ProfileModalTopWrapper>
 			<PrfileModalBottomWrapper>
diff --git a/src/components/Chat/ChatProfileModal/styles.ts b/src/components/Chat/ChatProfileModal/styles.ts
index f4e2685..91fa278 100644
--- a/src/components/Chat/ChatProfileModal/styles.ts
+++ b/src/components/Chat/ChatProfileModal/styles.ts
@@ -2,11 +2,8 @@ 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;
+	overflow: hidden;
+
 	width: 240px;
 	height: 330px;
 	font-family: NanumSquareR;
@@ -24,8 +21,6 @@ export const ProfileModalTopWrapper = styled.div`
 	background-color: #eee;
 `;
 
-export const ProfileImage = styled.div``;
-
 export const PrfileModalBottomWrapper = styled.div`
 	display: flex;
 	flex-direction: column;