Recruitment-Platform · Songhyejeong · Nov 25, 2023 · Nov 25, 2023
diff --git a/src/assets/icons/back-icon.svg b/src/assets/icons/back-icon.svg
diff --git a/src/components/layout/ChatCard.tsx b/src/components/layout/ChatCard.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import ChatMessage from './ChatMessage';
 
 interface ChatCardProps {
+  setIsEnter : React.Dispatch<React.SetStateAction<boolean>>;
   key: number;
   profile?: string;
   nickName: string;
@@ -12,6 +13,7 @@ interface ChatCardProps {
 }
 
 function ChatCard({
+  setIsEnter,
   key,
   profile,
   nickName,
@@ -22,16 +24,11 @@ function ChatCard({
   const [isChatView, setChatView] = useState(false);
   function ChatHandler() {
     setChatView(true);
+    setIsEnter(true);
   }
   return (
     <>
-      <ChatContentContainer onClick={ChatHandler}>
-        <ChatMessage
-          isChatView={isChatView}
-          profile={profile}
-          nickName={nickName}
-          roomId={key}
-        />
+        <ChatContentContainer onClick = { ChatHandler} >
         <Profile src={profile} />
         <SenderAndContent>
           <Sender>{nickName}</Sender>
@@ -44,6 +41,13 @@ function ChatCard({
           </Count>
         </TimeAndUnread>
       </ChatContentContainer>
+      <ChatMessage
+      setChatView ={setChatView}
+          isChatView={isChatView}
+          profile={profile}
+          nickName={nickName}
+          roomId={key}
+        />
     </>
   );
 }
@@ -69,6 +73,8 @@ const Profile = styled.img`
   height: 40px;
   border-radius: 15px;
   background: #eeeeee;
+  display: flex;
+  border: none;
 `;
 const SenderAndContent = styled.div`
   width: 147px;
@@ -110,7 +116,7 @@ const TimeAndUnread = styled.li`
   flex-direction: column;
 `;
 const SentTime = styled.span`
-  font-family: Inter;
+  font-family: Noto Sans KR;
   font-size: 9px;
   font-weight: 400;
   line-height: 11px;
@@ -131,5 +137,6 @@ const Count = styled.div`
     font-weight: 700;
     line-height: 12px;
     letter-spacing: 0em;
+    font-family: Noto Sans KR;
   }
 `;
diff --git a/src/components/layout/ChatList.tsx b/src/components/layout/ChatList.tsx
@@ -1,65 +1,49 @@
-import React from 'react';
+import React ,{useState } from 'react';
 import styled from 'styled-components';
 import ChatCard from './ChatCard';
 const ChatItem = [
   {
-    profile: '../profile.jpg',
+    profile: '/images/default-profile.jpg',
     sender: '뉴비 디자이너',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행하시는 걸로 알고있는데 맞을까요?',
     sentTime: '오전 09:28',
     unreadCount: 1,
   },
   {
-    profile: '../profile.jpg',
+    profile:  '/images/default-profile.jpg',
     sender: '닉네임',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
     sentTime: '오전 10:35',
     unreadCount: 2000,
   },
   {
-    profile: '../profile.jpg',
+    profile: ' /images/default-profile.jpg',
     sender: '닉네임',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
     sentTime: '오전 10:27',
     unreadCount: 30,
   },
   {
-    profile: '../profile.jpg',
+    profile: '/images/default-profile.jpg',
     sender: '닉네임',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
     sentTime: '오전 10:27',
     unreadCount: 30,
   },
   {
-    profile: '../profile.jpg',
+    profile: '/images/default-profile.jpg',
     sender: '닉네임',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
     sentTime: '오전 10:27',
     unreadCount: 30,
   },
   {
-    profile: '../profile.jpg',
-    sender: '닉네임',
-    content:
-      '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
-    sentTime: '오전 10:27',
-    unreadCount: 30,
-  },
-  {
-    profile: '../profile.jpg',
-    sender: '닉네임',
-    content:
-      '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
-    sentTime: '오전 10:27',
-    unreadCount: 30,
-  },
-  {
-    profile: '../profile.jpg',
+    profile:  '/images/default-profile.jpg',
     sender: '닉네임',
     content:
       '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행...',
@@ -69,14 +53,16 @@ const ChatItem = [
 ];
 
 function ChatList() {
+  const [isEnter, setIsEnter] = useState(false);
   return (
     <ChatCardLayout>
       <ChatTitle>
         <p>채팅목록</p>
-      </ChatTitle>
-      <ChatContainer>
+      </ChatTitle>      
+      <ChatContainer isEnter = {isEnter}>
         {ChatItem.map((item: any) => (
           <ChatCard
+            setIsEnter = {setIsEnter}
             key={item.key}
             profile={item.profile}
             nickName={item.sender}
@@ -94,6 +80,7 @@ export default ChatList;
 
 const ChatCardLayout = styled.div`
   position: fixed;
+  display: 'flex';
   /* margin-bottom: 35px;*/
   bottom: 19%;
   right: 4%;
@@ -121,7 +108,7 @@ const ChatTitle = styled.div`
   }
 `;
 
-const ChatContainer = styled.div`
+const ChatContainer = styled.div<{isEnter: boolean}>`
   display: flex;
   height: 320px;
   width: 300px;
@@ -137,5 +124,6 @@ const ChatContainer = styled.div`
     background: rgba(217, 217, 217, 1);
     border-radius: 15px;
     width: 5px;
+    display : ${props => props.isEnter ?  'none' : 'flex'}
   }
 `;
diff --git a/src/components/layout/ChatMessage.tsx b/src/components/layout/ChatMessage.tsx
@@ -2,101 +2,95 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { ReactComponent as BackToChatList } from '@assets/icons/back-icon.svg';
 interface ChatViewProps {
+  setChatView : React.Dispatch<React.SetStateAction<boolean>>;
   isChatView: boolean;
   roomId: number;
   profile?: string;
   nickName: string;
 }
 
-const MESSAGE = [
-  {
-    isSender: true,
-    isprevSender: false,
-    isLastMessage: false,
-    messages:
-      '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행하시는 걸로 알고있는데 맞을까요?',
-  },
-  {
-    isSender: false,
-    isprevSender: false,
-    isLastMessage: false,
-    messages:
-      '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
-  },
-  {
-    isSender: true,
-    isprevSender: false,
-    isLastMessage: false,
-    messages: '텍스트텍스트텍스트',
-  },
-  {
-    isSender: true,
-    isprevSender: true,
-    isLastMessage: false,
-    messages: '텍스트텍스트텍스트',
-  },
-  {
-    isSender: true,
-    isprevSender: true,
-    isLastMessage: false,
-    messages:
-      '텍스트텍스트텍스트 텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트텍스트',
-  },
-  {
-    isSender: true,
-    isprevSender: true,
-    isLastMessage: false,
-    messages: '텍스트텍스트텍스트',
-  },
-  {
-    isSender: false,
-    isprevSender: false,
-    isLastMessage: true,
-    messages: '텍스트텍스트텍스트',
-  },
-];
-function ChatMessage({ isChatView, profile, nickName }: ChatViewProps) {
-
-  function ChatViewHandler() {
-    //...
+function ChatMessage({ setChatView, isChatView, profile, nickName }: ChatViewProps) {
+  const [messages, SetMessages] = useState([
+    {
+      id : 1,
+      name: nickName,
+      message : '안녕하세요! 디자인 스터디그룹건으로 연락드립니다. 오프라인 진행하시는 걸로 알고있는데 맞을까요?',
+    }, 
+    {
+      id : 2,
+      name : nickName,
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+    {
+      id : 3,
+      name : 'me',
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+    {
+      id : 4,
+      name : nickName,
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+    {
+      id : 5,
+      name : nickName,
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+    {
+      id : 6,
+      name : nickName,
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+    {
+      id : 7,
+      name : nickName,
+      message :  '안녕하세요 반갑습니다! 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트',
+    },
+  ]);
+  const ChatViewHandler= () => {
+      setChatView(false)
   }
   return (
     <>
       {isChatView && (
         <ChatViewLayout>
           <ChatTitle>
-            <BackToChatList onClick={ChatViewHandler} />
+            <BackToChatList onClick = {
+              ChatViewHandler}/>
             <p>{nickName}</p>
           </ChatTitle>
           <MessageList>
-            {MESSAGE.map((key: any) => {
+            {messages.map((message, index) => {
               return (
                 <div>
-                  {key.isSender === true ? (
+                    {message.name === '닉네임' ? (
                     <SenderMessage>
                       <Image>
-                        {!key.isprevSender && <img src={profile} />}
+                        {index === 0 && <img src={profile} /> }
+                        {index > 0 && messages[index-1].name !== message.name &&  <img src={profile} /> }
                       </Image>
                       <div>
-                        {!key.isprevSender && <p>{nickName}</p>}
+                        {index === 0 && <p>{nickName}</p>}
+                        { index > 0 && messages[index -1].name !== message.name &&  <p>{nickName}</p>}
                         <div>
-                          <p>{key.messages}</p>
+                            <p>{message.message}</p>
                         </div>
                       </div>
-                    </SenderMessage>
-                  ) : (
+                    </SenderMessage>) :
+                    (
                     <MyMessage>
                       <div>
-                        <p>{key.messages}</p>
+                            <p>{message.message}</p>
                       </div>
                     </MyMessage>
-                  )}
+                    )
+                  }
                 </div>
               );
             })}
           </MessageList>
           <MessageInputLayout>
-            <input type="text" placeholder="텍스트" />
+            <input type="text" placeholder="텍스트 입력" />
             <button>
               <p>전송</p>
             </button>
@@ -114,6 +108,7 @@ const SenderMessage = styled.div`
   flex-wrap: wrap;
   div {
     & > p {
+      margin: 2px 0px;
       font-family: Noto Sans KR;
       font-size: 10px;
       font-weight: 500;
@@ -144,8 +139,9 @@ const SenderMessage = styled.div`
   }
 `;
 const Image = styled.div`
-  margin: 0px 10px;
+  margin: 2px 10px;
   border-radius: 15px;
+  border: none;
   width: 40px;
   height: 40px;
 `;
@@ -163,6 +159,7 @@ const MyMessage = styled.div`
     height: auto;
     border-radius: 10px;
     padding: 5px 10px;
+    background: #F9F9F9;
     p {
       margin: 0px;
       display: inlin-flex;
@@ -210,8 +207,11 @@ const ChatTitle = styled.div`
 const MessageList = styled.div`
   width: 300px;
   height: 300px;
+  display: flex;
+  flex-direction: column-reverse;
   overflow: scroll;
   overflow-y: auto;
+  overflow-x: hidden;
   &::-webkit-scrollbar {
     width: 5px;
     height: 20px;