[3주차] 이승범 미션 제출합니다.

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+}

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
+    "react-icons": "^4.2.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^4.0.0",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },

src/App.js

@@ -1,10 +1,113 @@
 import React from 'react';
+import { BrowserRouter, Link, Route, Switch} from 'react-router-dom';
+import ChatListPage from './ChatListPage';
+import FriendListPage from './FriendListPage';
+import SettingPage from './SettingPage';
+import styled, { createGlobalStyle } from 'styled-components';
+import ChattingPage from './ChattingPage';
+import { BsFillPersonFill, BsFillChatFill, BsThreeDots } from 'react-icons/bs';
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    background: orange;
+  }
+`;
+
+const AppLayout = styled.ul`
+  width: 70px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  position: fixed;
+  height: 550px;
+  background-color: #F5F5F5;
+  float: left;
+`;
+
+const AppContainer = styled.div`
+  width: 350px;
+  height: 550px;
+  // border: solid;
+  // border-width: 1px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+  background: white;
+  overflow: auto;
+
+`;
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  color: black;
+`;
+
+const StyledUl = styled.ul`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  align-items: center;
+`;
+
+const StyledLi = styled.li`
+  padding: 10px;
+`;
+export const initialList = [
+  { id: 'black', name: '검은색', message: `I'm black`, img: '/img/black.png'},
+  { id: 'red', name: '빨간색', message: `I'm Red`, img: '/img/red.png'},
+  { id: 'orange', name: '주황색', message: `I'm Orange`, img: 'img/orange.png'},
+  { id: 'yellow', name: '노란색', message: `I'm Yellow`, img:'img/yellow.png'},
+  { id: 'green', name: '초록색', message: `I'm Green`, img: 'img/green.png'},
+  { id: 'blue', name: '파란색', message: `I'm Blue`, img: 'img/blue.png'},
+  { id: 'navy', name: '남색', message: `I'm Navy`, img: 'img/navy.png'},
+  { id: 'purple', name: '보라색', message: `I'm Purple`, img: 'img/purple.png'},
+]
 
 function App() {
+
   return (
-    <div > 12기 프론트엔드 개발팀장 투표 ^.^
-    </div>
+    <BrowserRouter>
+    <GlobalStyle/>
+     <AppContainer>
+        <AppLayout>
+          <StyledUl>
+            <StyledLi>
+              <StyledLink to="/">
+                <BsFillPersonFill size="30" />
+              </StyledLink>
+            </StyledLi>
+            <StyledLi>
+              <StyledLink to="/ChatListPage">
+                <BsFillChatFill size="25" />
+              </StyledLink>
+            </StyledLi>
+            <StyledLi>
+              <StyledLink to="/SettingPage">
+                <BsThreeDots size="30" />
+              </StyledLink>
+            </StyledLi>
+          </StyledUl>
+        </AppLayout>
+        <div>
+          <Switch>
+            <Route exact path="/" component={FriendListPage} />
+            <Route path={`/ChattingPage/:id`} component={ChattingPage} />
+            <Route path="/ChatListPage" component={ChatListPage} />
+            <Route path="/SettingPage" component={SettingPage} />
+          </Switch>
+        </div>
+      </AppContainer>
+    </BrowserRouter>
   );
 }
 
-export default App;
+export default App;

src/Chat.js

@@ -0,0 +1,69 @@
+import React, { memo, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+export const ChatContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 415px;
+    overflow-y: scroll;
+`
+export const BlackChat = styled.div`
+    align-self: flex-start;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    div {
+        border: solid 1px #dcdcdc;
+    }
+`
+export const WhiteChat = styled.div`
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    div {
+        background-color: #FFFA78;
+        border: ;
+    }
+`
+export const Text = styled.div`
+    padding: 5px;
+    margin: 5px;
+    border-radius: 15px;
+`
+export const ChatIcon = styled.img`
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+`
+
+const Chat = memo(({ chatting, id }) => {
+    const scrollRef = useRef(null);
+
+    useEffect(() => {
+        scrollRef.current.scrollBy(0, scrollRef.current.scrollHeight);
+    }, [chatting]);
+
+    return(
+        <ChatContainer ref={scrollRef}>
+            {chatting.map((v,i) => {
+                return v.isMe ? 
+                <WhiteChat key={i}>
+                    <Text>
+                        {v.text}
+                    </Text>
+                    <ChatIcon src="/img/white.png" alt="img" />
+                </WhiteChat>
+                :
+                <BlackChat key={i}>
+                    <ChatIcon src={`/img/${id}.png`} alt="img" />
+                    <Text>
+                        {v.text}
+                    </Text>
+                </BlackChat>
+            })}
+        </ChatContainer>
+    );
+});
+
+export default Chat;

src/ChatData.json

@@ -0,0 +1,58 @@
+{   
+    "black" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "안녕하세요"}
+    ],
+    "red" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "이 화면에서"}
+    ],
+    "orange" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "이름 아래 뜨는 텍스트는"}
+    ],
+    "yellow" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "채팅방에서"}
+    ],
+    "green" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "마지막으로 한 대화입니다"}
+    ],
+    "blue" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "어우 피곤해"}
+    ],
+    "navy" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "살려주세요"}
+    ],
+    "purple" : [
+        {"isMe": false, "text": "hey wassup You to party tonight?"},
+        {"isMe": true, "text": "I wanna go, but nah"},
+        {"isMe": false, "text": "Why? I heard they prepared a lot. It must be cool"},
+        {"isMe": true, "text": "My professor just uploaded a new assignment, and the due is tomorrow"},
+        {"isMe": false, "text": "보라색과 한 마지막 대화"}
+    ]
+}

src/ChatListPage.js

@@ -0,0 +1,78 @@
+import React,{useState} from 'react';
+import { initialList } from './App';
+import styled from 'styled-components';
+import {IoIosText} from 'react-icons/io';
+import FriendState from './FriendState';
+import {Link} from 'react-router-dom';
+
+const ChatListPageContainer = styled.div`
+    margin-left: 70px;
+`;
+const Top = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+
+const H3 = styled.h3`
+    padding-left: 10px;
+`;
+const Icon = styled.div`
+    padding-right: 10px;
+`;
+
+const Input = styled.input`
+    width: 98%;
+    margin: 10px;
+    margin-left: 0px;
+    height: 30px;
+    border: solid 1px #dcdcdc;
+    border-radius: 10%;
+    display: block;
+`;
+
+const StyledLink = styled(Link)`
+    text-decoration: none;
+    color: black;
+`;
+
+
+const ChatListPage = () => {
+    const friendList = initialList;
+    const [text, setText] = useState('');
+
+    const onChangeText = (e) => {
+        setText(e.target.value);
+    }
+
+    return(
+        <ChatListPageContainer>
+            <Top>
+                <H3>채팅</H3>
+                <Icon>
+                    <IoIosText size="24" padding-right="10"/>
+                </Icon>
+            </Top>
+            <Input placeholder=" 채팅방, 참여자 검색" value={text} onChange={onChangeText} />
+            {friendList.map((v) => {
+                if (text === ''){
+                    return (
+                        <StyledLink to={`/ChattingPage/${v.id}`}>
+                            <FriendState props={v} where={'ChatList'}/>
+                        </StyledLink>
+                    );
+                } else {
+                    if (v.name.includes(text)){
+                        return (
+                            <Link to={`/ChattingPage/${v.id}`}>
+                                <FriendState props={v} where={'ChatList'}/>
+                            </Link>
+                        );
+                    }
+                }
+            })}
+        </ChatListPageContainer>
+    );
+}
+
+export default ChatListPage;

src/ChattingPage.js

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Top from './Top';
+import Chat from './Chat';
+import Form from './Form';
+import styled from 'styled-components';
+import ChatData from './ChatData.json';
+import {initialList} from './App.js';
+
+const ChattingPageContainer = styled.div`
+    margin-left: 70px;
+    display: flex;
+    flex-direction: column;
+    height: 550px;
+`;
+
+const ChattingPage = ({ match }) => {
+    const [isMe, setIsMe] = useState(true);
+    const [userName, setUserName] = useState('');
+    const [chatting, setChatting] = useState([]);
+
+    useEffect(() => {
+        setChatting(ChatData[match.params.id]);
+        setUserName(initialList.find(e => e.id === match.params.id).name);
+    }, []);
+
+    const onClickTop = useCallback(() => {
+        setIsMe(!isMe);
+    }, [isMe]);
+    const upLoadChatting = useCallback((v) => {
+        setChatting(v);
+    }, [])
+
+    return (
+    <ChattingPageContainer>
+        <Top isMe={isMe} onClickTop={onClickTop} id={match.params.id} userName={userName}/>
+        <Chat chatting={chatting} isMe={isMe} id={match.params.id}/>
+        <Form isMe={isMe} upLoadChatting={upLoadChatting} chatting={chatting} />
+    </ChattingPageContainer>
+    );
+}
+
+export default ChattingPage;