[4주차] 정희수 미션 제출합니다.

.prettierrc

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

package.json

@@ -7,13 +7,18 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.60",
+    "@types/node": "^16.11.65",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/recoil": "^0.0.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.4.2",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
-    "typescript": "^4.8.3",
+    "recoil": "^0.7.6",
+    "styled-components": "^5.3.6",
+    "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -39,5 +44,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router": "^5.1.19",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26"
   }
 }

src/App.tsx

@@ -1,5 +1,23 @@
+import { Route, Routes } from 'react-router-dom';
+import Friends from "./pages/Friends/Friends";
+import Chat from "./pages/Chatting/Chat";
+import Setting from "./pages/Setting/Setting";
+import Room from './pages/Room/Room';
+import GlobalStyle from './styles/GlobalStyle';
+
 function App() {
-  return <div>화이팅!!</div>;
+
+  return (
+    <>
+      <GlobalStyle/>
+      <Routes>
+        <Route path = '/' element={<Friends/>}/>
+        <Route path = '/chat' element={<Chat/>}/>
+        <Route path = '/setting' element={<Setting/>}/>
+        <Route path = '/room/:id' element={<Room/>}/>
+      </Routes>
+    </>
+  );
 }
 
 export default App;

src/assets/ContentInfo.json

@@ -0,0 +1,58 @@
+[
+    {
+        "id":0,
+        "from":0,
+        "to":3,
+        "content":"짱구짱구",
+        "date":"02:11"
+    },
+    {
+        "id":1,
+        "from":3,
+        "to":0,
+        "content":"스폰지밥",
+        "date":"02:12"
+    },
+    {
+        "id":2,
+        "from":0,
+        "to":1,
+        "content":"난 짱구",
+        "date":"02:14"
+    },
+    {
+        "id":3,
+        "from":2,
+        "to":0,
+        "content":"난 그로밋",
+        "date":"02:16"
+    },
+    {
+        "id":4,
+        "from":5,
+        "to":0,
+        "content":"난 징징이",
+        "date":"02:17"
+    },
+    {
+        "id":5,
+        "from":3,
+        "to":0,
+        "content":"스폰지밥밥",
+        "date":"02:19"
+    },
+    {
+        "id":6,
+        "from":0,
+        "to":3,
+        "content":"짱구",
+        "date":"02:20"
+    },
+    {
+        "id":7,
+        "from":4,
+        "to":0,
+        "content":"난 뚱이",
+        "date":"02:21"
+    }
+]

src/assets/UserInfo.json

@@ -0,0 +1,32 @@
+[
+    {
+        "id":0,
+        "name":"짱구",
+        "src":"img/짱구.png"
+    },
+    {
+        "id":1,
+        "name":"숀",
+        "src":"img/a.jfif"
+    },
+    {
+        "id":2,
+        "name":"그로밋",
+        "src":"img/b.jfif"
+    },
+    {
+        "id":3,
+        "name":"스폰지밥",
+        "src":"img/c.jfif"
+    },
+    {
+        "id":4,
+        "name":"뚱이",
+        "src":"img/d.jfif"
+    },
+    {
+        "id":5,
+        "name":"징징이",
+        "src":"img/e.jfif"
+    }
+]

src/components/Header.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from "styled-components"
+
+const StyledBlock = styled.div`
+    height: 700px;
+    width: 80px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: #EAEAEA;
+    border-radius:30px 0px 0px 30px;
+`
+
+const StyledList = styled.ul`
+    display: flex;
+    font-size: 30px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 0px;
+`
+
+const StyledLink = styled(Link)`
+    text-decoration: none;
+    text-align: center;
+    width: 80px;
+`;
+
+const Header = () => {
+    return (
+        <StyledBlock>
+            <StyledList>
+                <StyledLink to="/">👥</StyledLink>
+            </StyledList>
+            <StyledList>
+                <StyledLink to="/chat">💬​</StyledLink>
+            </StyledList>
+            <StyledList>
+                <StyledLink to="/setting">⚙️​</StyledLink>
+            </StyledList>
+        </StyledBlock>
+    );
+};
+
+export default Header;

src/index.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import { RecoilRoot } from "recoil";
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <RecoilRoot>
+    <BrowserRouter>
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>
+    </BrowserRouter>
+  </RecoilRoot>
 );

src/pages/Chatting/Chat.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Header from '../../components/Header';
+import { userState } from '../../recoil/atom';
+import {useRecoilState,useRecoilValue,} from 'recoil';
+import styled from "styled-components"
+import ChatItem from './ChatItem';
+
+const StyledBlock = styled.div`
+    display: flex;
+    flex-direction: row;
+    border-radius: 30px;
+    box-shadow: 5px 5px 10px #000;
+    height: 700px;
+`
+const StyledContent = styled.div`
+    height: 650px;
+    width: 280px;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    border-radius:0px 30px 30px 0px;
+    margin: 20px;
+`
+
+const Chat = () => {
+
+    const [user, setUser] = useRecoilState<Object[]>(userState);
+
+    return (
+        <StyledBlock>
+            <Header/>
+            <StyledContent>
+                채팅
+                {
+                    user.map((u)=>(
+                        Object.values(u)[0] === 0 ?
+                        null
+                        :
+                        <ChatItem
+                        key={Object.values(u)[0]}
+                        id={Object.values(u)[0]}
+                        name={Object.values(u)[1]}
+                        src={Object.values(u)[2]}
+                        number={Object.values(user).length}
+                        />
+                    ))
+                }
+            </StyledContent>
+        </StyledBlock>
+    );
+};
+
+export default Chat;

src/pages/Chatting/ChatItem.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { contentState} from '../../recoil/atom';
+import {useRecoilState,useRecoilValue,} from 'recoil';
+
+type ChatItemProps = {
+    id: number;
+    name: string;
+    src: string;
+    number: number;
+};
+
+function ChatItem({id,name,src,number}:ChatItemProps){
+    const chatLink = '/room/' + id;
+
+    const [content, setContent] = useRecoilState(contentState);
+    const result = content.filter(c=>(c.to === id || c.from === id));
+    const lastContent = result[result.length-1];
+
+    return (
+        <StyledItem to={chatLink}>
+            <StyledBox>
+                <StyledImage width={"45px"} height={"45px"} src={src}/>&nbsp;
+                <StyledFontBox>
+                    {name}
+                    <StyledFont>
+                        {lastContent.content}
+                    </StyledFont>
+                </StyledFontBox>
+                <StyledDate>
+                    {lastContent.date}
+                </StyledDate>
+            </StyledBox>
+        </StyledItem>
+    );
+};
+
+type StyledProps = {
+    width: string;
+    height: string;
+}
+
+const StyledDate = styled.div`
+    float: right;
+    object-align: top;
+    color: gray;
+    font-size: small;
+`
+
+const StyledFontBox = styled.div`
+    display: flex;
+    flex-direction: column;
+    width:200px;
+    color: black;
+`
+const StyledFont = styled.div`
+    font-size: small;
+    color: gray;
+`
+const StyledBox = styled.div`
+    display: flex;  
+    margin: 2px;
+    heigth: 16px;
+    width: 280px;
+    align-items: center;
+    &:hover{  
+        background-color : #EEEEEE;
+    }
+`
+
+const StyledImage = styled.img<StyledProps>`
+    margin: 5px;
+    border-radius: 15px;
+    height: ${(props) => props.height}
+    width: ${(props) => props.width}
+`;
+
+const StyledItem = styled(Link)`
+    text-decoration: none;
+    height: auto;
+    width: 280px;
+`
+
+
+export default ChatItem;