CEOS-Developers · GeonHeeAhn · Mar 28, 2021 · Mar 28, 2021 · Mar 31, 2021 · Mar 31, 2021
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi":true,
+    "singleQuote": true
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"

diff --git a/public/battery.png b/public/battery.png
diff --git a/public/bell.png b/public/bell.png
diff --git a/public/calendar.png b/public/calendar.png
diff --git a/public/chat.png b/public/chat.png
diff --git a/public/heart_bg.png b/public/heart_bg.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/myMelody.jpg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,9 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>12기 프론트 투표</title>
+    <title>♥ messenger ♥</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
   </head>
-  <body>
+  <body >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/public/kakaoImg.png b/public/kakaoImg.png
diff --git a/public/myMelody-bg.jpg b/public/myMelody-bg.jpg
diff --git a/public/myMelody-profile.png b/public/myMelody-profile.png
diff --git a/public/myMelody.jpg b/public/myMelody.jpg
diff --git a/public/person.png b/public/person.png
diff --git a/public/profile1.jpg b/public/profile1.jpg
diff --git a/public/profile2.jpg b/public/profile2.jpg
diff --git a/public/search.png b/public/search.png
diff --git a/public/setting.png b/public/setting.png
diff --git a/public/settingImg.png b/public/settingImg.png
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,45 @@
-import React from 'react';
+import { React, useState } from 'react';
+import styled from 'styled-components';
+import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { chatData } from './Data';
+import Chat from './chat/Index';
+import Main from './main/Index';
+import ChatList from './chatList/Index';
+import Setting from './setting/Index';
+import MenuBar from './MenuBar';
 
-function App() {
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+function ChatOutput(){
+  let {user} = useParams();
+  return <div> {user} </div>;
+}
+export default function App(props) {
+  const [list, setList] = useState(chatData);
   return (
-    <div > 12기 프론트엔드 개발팀장 투표 ^.^
-    </div>
+    <Router>
+      <Container>
+        <Link to="/"></Link>
+        <Link to="/chat"></Link>
+        <Link to="/chatlist"></Link>
+        <Link to="/setting"></Link>
+        <Route path={['/', '/chatlist', '/setting']} component={MenuBar} />
+
+        <Switch>
+          <Route exact path="/" component={Main} />
+          <Route path="/chatlist/:id" component={Chat} />
+          {/* <Route path="/chat/:user" component={Chat} />
+            <ChatOutput/> */}
+          <Route
+            path="/chatlist"
+            render={(props) => <ChatList {...props} list={list} />}
+          />
+          <Route path="/setting" component={Setting} />
+        </Switch>
+      </Container>
+    </Router>
   );
 }
-
-export default App;
diff --git a/src/Data.js b/src/Data.js
@@ -0,0 +1,69 @@
+//이름 채팅데이터 아이디 프로필사진
+
+//아이디 내용
+
+export const userData = [
+  {
+    name: '안건희',
+    id: 0,
+    profileImg: `${process.env.PUBLIC_URL}/profile1.jpg`,
+  },
+  {
+    name: '고양이',
+    id: 1,
+    profileImg: `${process.env.PUBLIC_URL}/profile1.jpg`,
+  },
+  {
+    name: '야옹이',
+    id: 2,
+    profileImg: `${process.env.PUBLIC_URL}/profile1.jpg`,
+  },
+  {
+    name: '겸댕',
+    id: 3,
+    profileImg: `${process.env.PUBLIC_URL}/profile1.jpg`,
+  },
+];
+
+export const chatData = [
+  {
+      user:userData[0],
+      id:0,
+      chatText:[{
+          user: userData[0],
+          text:'이렇게 하면 되나'
+      },{
+          user: userData[1],
+          text:'웅야'
+      },{
+        user: userData[1],
+        text:'그렇게 하면 돼'
+      }]
+  },{
+    user:userData[1],
+    id:1,
+    chatText:[{
+        user: userData[0],
+        text:'이렇게 하면 되나'
+    },{
+        user: userData[1],
+        text:'웅야'
+    },{
+      user: userData[1],
+      text:'그렇게 하면 돼'
+    }]
+},{
+  user:userData[2],
+  id:2,
+  chatText:[{
+      user: userData[2],
+      text:'이렇게 하면 되나'
+  },{
+      user: userData[1],
+      text:'웅야'
+  },{
+    user: userData[2],
+    text:'그렇게 하면 돼'
+  }]
+},
+];
diff --git a/src/MenuBar.js b/src/MenuBar.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const Container = styled.div`
+  position: fixed;
+  width: 70px;
+  height: calc(100% - 50px);
+  background-color: rgb(66, 54, 48);
+  padding-top: 25px;
+  display:flex;
+  flex-direction:column;
+  align-content: center;
+  justify-content: space-between; 
+  padding-bottom: 25px;
+`;
+
+const Contents = styled.img`
+  margin-left: 22px;
+  margin-top: 10px;
+  margin-bottom: 15px;
+  width: 26px;
+  height: 26px;
+`;
+
+const MiniContents = styled.img`
+  width: 18px;
+  height:18px;
+  margin-left: 26px;
+  margin-top:8px;
+  margin-bottom:8px;
+`;
+export default function MenuBar() {
+  return (
+    <Container>
+      <div>
+       <Link to="/">
+          <Contents src={process.env.PUBLIC_URL + 'person.png'} />
+       </Link>
+        <Link to="/chatlist">
+          <Contents src={process.env.PUBLIC_URL + 'chat.png'} />
+        </Link>
+        <Link to="/setting">
+          <Contents src={process.env.PUBLIC_URL + 'setting.png'} />
+        </Link>
+      </div>
+      <div>
+        <MiniContents src={process.env.PUBLIC_URL + `calendar.png`}/>
+        <MiniContents src={process.env.PUBLIC_URL + `bell.png`}/>
+        <MiniContents src={process.env.PUBLIC_URL + `settingImg.png`}/>
+      </div>
+    </Container>
+  );
+}
diff --git a/src/chat/ChatInput.js b/src/chat/ChatInput.js
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import React from 'react';
+
+const Box = styled.form`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 70px;
+    width: 100%;
+    bottom: 0px;
+    position: fixed;
+    background-color: rgb(237, 232, 234);
+`;
+const Input = styled.input`
+    height: 50px;
+    border-radius: 30px;
+    margin-left: 5%;
+    flex-grow: 5;
+    border: 1px solid rgb(204, 194, 180);
+    :focus{
+        border:  1px solid rgb(204, 194, 180);;
+        outline: none;
+    }
+`;
+
+const Button = styled.button`
+    height: 50px;
+    flex-grow: 1;
+    margin-left: 10px;
+    margin-right: 5%;
+    border-radius: 30px;
+    background-color: rgb(222, 189, 164);
+    border: none;
+    :focus{
+        border: none;
+        outline: none;
+    }
+`;
+
+export default function ChatInput(props){
+    const {message,handleSubmit,handleChangeInput} = props;
+    return(
+        <Box onSubmit = {handleSubmit}>
+            <Input
+                type="text"
+                value={message}
+                placeholder = ' Please enter a message'
+                onChange = {handleChangeInput}
+            />
+            <Button type="submit">전송</Button>
+        </Box>
+    )
+}
diff --git a/src/chat/ChatList.js b/src/chat/ChatList.js
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import MessageItem from './MessageItem';
+import { useEffect, useRef } from 'react';
+import {chatData} from '../Data';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: fixed;
+  width: 100%;
+  top: 120px;
+  bottom: 70px;
+  background-image: url('./heart_bg.png');
+`;
+
+export default function ChatList(props) {
+
+  const containerRef = useRef(null);
+  const list = props.chatData.chatText.map((item) => {
+    return <MessageItem chatItem={item} />;
+  });
+
+  useEffect(() => {
+    containerRef.current.scrollTo(0, containerRef.current.scrollHeight);
+  }, [list]);
+
+  return <Container ref={containerRef}>{list}</Container>;
+}
+// export default function ChatList(props) {
+//   const { chatData } = props;
+//   const containerRef = useRef(null);
+//   const list = chatData.map((item) => {
+//     return <MessageItem chatItem={item} />;
+//   });
+
+//   useEffect(() => {
+//     containerRef.current.scrollTo(0, containerRef.current.scrollHeight);
+//   }, [list]);
+
+//   return <Container ref={containerRef}>{list}</Container>;
+// }
+