CEOS-Developers · kather0220 · Apr 27, 2021 · Apr 28, 2021 · Apr 28, 2021 · Apr 29, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^12.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
@@ -36,4 +38,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>프론트 2주차 미션 메신저 만들기</title>
   </head>
-  <body style="background-color: beige;">
+  <body style="background-color: ghostwhite;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/public/profile0.jpg b/public/profile0.jpg
diff --git a/public/profile2.jpg b/public/profile2.jpg
diff --git a/public/profile3.jpg b/public/profile3.jpg
diff --git a/public/profile4.jpg b/public/profile4.jpg
diff --git a/public/profile5.jpg b/public/profile5.jpg
diff --git a/public/profile6.jpg b/public/profile6.jpg
diff --git a/public/cherryblossom.jpg → public/profile7.jpg b/public/cherryblossom.jpg → public/profile7.jpg
diff --git a/public/profile8.jpg b/public/profile8.jpg
diff --git a/public/profile9.jpg b/public/profile9.jpg
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,5 @@
+a {
+  text-decoration: inherit;
+  color: inherit;
+  cursor: inherit;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,79 +1,24 @@
-import React, {useState} from 'react';
-import Header from './Header';
-import ChatContainer from './ChatContainer';
-import ChatForm from './ChatForm';
+import React from 'react';
+import {HashRouter, Route} from 'react-router-dom';
+import ChattingList from './ChattingList';
+import Navigation from './Navigation';
+import FriendList from './FriendList';
+import SettingPage from './SettingPage';
+import ChattingScreen from './ChattingScreen';
+import Home from './Home';
+import './App.css';
 
-const App = () => {
-  const [currentUser, setCurrentUser] = useState(1)
-  const [message,setMessage] = useState([
-    {
-      id: 1,
-      text: "Hi",
-      isUser: 0
-    },
-    {
-      id: 2,
-      text: "Hello",
-      isUser: 1
-    },
-    {
-      id: 3,
-      text: "What do you do today?",
-      isUser: 1
-    },
-    {
-      id: 4,
-      text: "I'm standing on the concert. Would you come? I already left a ticket for you!",
-      isUser: 0
-    },
-    {
-      id: 5,
-      text: "Of course!!!! I'm eagerly waiting for it!!",
-      isUser: 1
-    },
-  ]);
-  const submitMessage = (sendText) => {
-    const newMessage = message.concat({
-      id: new Date(),
-      text: sendText,
-      isUser: currentUser
-    })
-    setMessage(newMessage);
+const App = () =>{
+    return (
+      <HashRouter>
+       <Navigation />
+       <Route path="/" exact={true} component={Home} />
+       <Route path="/friend-list" component={FriendList} />
+       <Route path="/chatting-list" component={ChattingList} />
+       <Route path="/setting-page" component={SettingPage} />
+       <Route path="/chatting-screen/:id" component={ChattingScreen}/>
+      </HashRouter>
+    );
   }
-  const users = [
-  {
-    id: 0,
-    name: "THE BOYZ",
-    img: "profile2.jpg",
-  },
-  {
-    id: 1,
-    name: "KATHERINE",
-    img: "profile1.jpg",
-  },
-  ];
-  const [user,setUsers] = useState(users[0]);  
-
-
-  function handleClick() {
-    if(currentUser === 0){
-      setCurrentUser(1);
-    }
-    else{
-      setCurrentUser(0);
-    }
-  }
-  return (
-    <div>
-      <div onClick={handleClick}>
-        <Header user={users[currentUser]} />
-      </div>
-
-      <ChatContainer message={message} user={user}/>
-
-      <ChatForm submitMessage={submitMessage} {...{currentUser}}/>
-    </div>
-  );
-}
 
 export default App;
diff --git a/src/ChatContainer.js b/src/ChatContainer.js
@@ -6,11 +6,12 @@ import Message from './Message';
 const StyledChatContainer = styled.div`
         display: flex;
         flex-direction: column;
+        float: right;
         height: 100%;
-        width: 100%;
+        width: 92%;
         padding-top: 150px;
         padding-bottom: 70px;
-        background: beige;
+        background: Snow;
 `;
 
 

diff --git a/src/ChatForm.js b/src/ChatForm.js
@@ -2,27 +2,27 @@ import React, {useState} from 'react';
 import styled from 'styled-components';
 
 const StyleChatForm = styled.div`
-
-    position: fixed;
     bottom: 0;
     width: 100%;
     left: 0;
     right: 0;
+    position: fixed;
+
     & div{
-
-
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
-        width: 100%;
+        width: 92%;
         height: 0%;
+        float: right;
     }
     & input{
         border: 1px solid lightpink;
         border-radius : 30px;
         flex-direction : row;
-        width: 80%;
+        float: right;
+        width: 100%;
         margin: 10px;
         height : 50px;
         text-align : center;
@@ -31,7 +31,7 @@ const StyleChatForm = styled.div`
     }
     & button{
         border-radius: 20px;
-        background-color: pink;
+        background-color: #ffcdd2;
         color: #f06292;
         border: 1px solid #f06292;
         width: 18%;

diff --git a/src/ChattingData.json b/src/ChattingData.json
@@ -0,0 +1,137 @@
+[
+    {
+        "id": 1,
+        "text": "Hi",
+        "isUser": 0,
+        "receiver": 0
+      },
+      {
+        "id": 2,
+        "text": "Hello",
+        "isUser": 1,
+        "receiver": 0
+      },
+      {
+        "id": 3,
+        "text": "What do you do today?",
+        "isUser": 1,
+        "receiver": 0
+      },
+      {
+        "id": 4,
+        "text": "I'm standing on the concert. Would you come? I already left a ticket for you!",
+        "isUser": 0, 
+        "receiver": 0
+      },
+      {
+        "id": 5,
+        "text": "Of course!!!! I'm eagerly waiting for it!!",
+        "isUser": 1,
+        "receiver": 0,
+        "last": true
+      },
+      {
+        "id": 6,
+        "text": "언니!!!!!",
+        "isUser": 2,
+        "receiver": 2
+      },
+      {
+        "id": 7,
+        "text": "울 묭이 보고싶어 흐엉",
+        "isUser": 1,
+        "receiver": 2,
+        "last": true
+      },
+      {
+        "id": 8,
+        "text": "영아 나 너네 집 또 갈래",
+        "isUser": 1,
+        "receiver": 3
+      },
+      {
+        "id": 9,
+        "text": "언제든 컴온",
+        "isUser": 3,
+        "receiver": 3,
+        "last": true
+      },
+      {
+        "id": 10,
+        "text": "내 이름은 소정",
+        "isUser": 4,
+        "receiver": 4
+      },
+      {
+        "id": 11,
+        "text": "세 살이지",
+        "isUser": 4,
+        "receiver": 4,
+        "last": true
+      },
+      {
+        "id": 12,
+        "text": "소정아 술마시자",
+        "isUser": 5,
+        "receiver": 5
+      },
+      {
+        "id": 13,
+        "text": "꺄 조아조아",
+        "isUser": 1,
+        "receiver": 5,
+        "last": true
+      },
+      {
+        "id": 14,
+        "text": "아 이게 뭐야 왜 아무도 없숴",
+        "isUser": 6,
+        "receiver": 6
+      },
+      {
+        "id": 14,
+        "text": "쭈냥이 귀여워",
+        "isUser": 1,
+        "receiver": 6,
+        "last": true
+      },
+      {
+        "id": 15,
+        "text": "굠이 너는 항상 최고야",
+        "isUser": 1,
+        "receiver": 7,
+        "last": true
+      },
+      {
+        "id": 16,
+        "text": "새벽 여섯시면 안 잔건가요 일어난건가요!",
+        "isUser": 8,
+        "receiver": 8
+      },
+      {
+        "id": 17,
+        "text": "안 잔거에요",
+        "isUser": 1,
+        "receiver": 8
+      },
+      {
+        "id": 18,
+        "text": "....늘 건강 최우선임동",
+        "isUser": 8,
+        "receiver": 8,
+        "last": true
+      },
+      {
+        "id": 19,
+        "text": "밍이 안 본지 몇 개월이냐ㅠ",
+        "isUser": 1,
+        "receiver": 9
+      },
+      {
+        "id": 20,
+        "text": "그러겡ㅠ",
+        "isUser": 9,
+        "receiver": 9,
+        "last": true
+      }
+]
diff --git a/src/Header.js → src/ChattingHeader.js b/src/Header.js → src/ChattingHeader.js
@@ -2,14 +2,15 @@ import React from 'react';
 import styled from 'styled-components';
 
 const StyledHeader = styled.div`
-    background-color: #ffcdd2;
+    background: #ffcdd2;
     display : flex;
     flex-direction : row;
+    float: right;
+    margin-left: 119px;
+    width: 91%;
     position: fixed;
-    width: 98%;
-    border-radius: 30px;
     color: #f06292;
-
+    
     & img {
         margin: 20px;
         width:100px;
@@ -24,7 +25,7 @@ const TextPosition = styled.div`
     }
 `;
 
-export default function Header(props) {
+export default function ChattingHeader(props) {
     return (
         <StyledHeader>
             <img src={props.user.img} alt="profile"></img>