[4주차] 임채리 미션 제출합니다.

package.json

@@ -8,11 +8,17 @@
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.5.2",
  "@types/node": "^16.11.60",
- "@types/react": "^18.0.21",
- "@types/react-dom": "^18.0.6",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "@types/react-router-dom": "^5.3.3",
+ "history": "5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-icons": "^4.6.0",
+ "react-router-dom": "^6.4.2",
  "react-scripts": "5.0.1",
+ "recoil": "^0.7.6",
+ "styled-components": "^5.3.6",
  "typescript": "^4.8.3",
  "web-vitals": "^2.1.4"
  },
@@ -39,5 +45,8 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "@types/styled-components": "^5.1.26"
  }
 }

src/App.tsx

@@ -1,5 +1,67 @@
+import styled from 'styled-components';
+import { createGlobalStyle } from 'styled-components';
+import { RecoilRoot } from 'recoil';
+import ChatRoomListPage from './pages/ChatRoomListPage';
+import FriendsPage from './pages/FriendsPage';
+import SettingsPage from './pages/SettingsPage';
+import ChatsPage from './pages/ChatsPage';
+import NavBar from './NavBar';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+//vercel 배포
 function App() {
- return <div>화이팅!!</div>;
+ return (
+ <BrowserRouter>
+ <RecoilRoot>
+ <GlobalStyle />
+ <Wrapper>
+ <Container>
+ <NavBar />
+ <Routes>
+ <Route path="/" element={<FriendsPage />} />
+ <Route path="/chatlist" element={<ChatRoomListPage />} />
+ <Route path="/chatroom/:roomid" element={<ChatsPage />} />
+ <Route path="/settings" element={<SettingsPage />} />
+ </Routes>
+ </Container>
+ </Wrapper>
+ </RecoilRoot>
+ </BrowserRouter>
+ );
 }
 
+const GlobalStyle = createGlobalStyle`
+ body {
+ font-family: "Helvetica", "Arial", sans-serif;
+ width: 100%;
+ height: 100%;
+ background-color: white;
+ }
+
+ button {
+ background-color: transparent;
+ font-size: 20px;
+ cursor: pointer;
+ border: none;
+ }
+
+`;
+
+const Wrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ flex-direction: column;
+ border-radius: 20px;
+`;
+
+const Container = styled.div`
+ border-radius: 20px;
+ width: 400px;
+ height: 600px;
+ box-shadow: 1px 1px 10px gray;
+ display: grid;
+ grid-template-columns: 1fr 5fr;
+`;
+
 export default App;

src/NavBar.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { BsPersonFill, BsChatFill, BsThreeDots } from 'react-icons/bs';
+
+const NavBar = () => {
+ return (
+ <Nav>
+ <Icons>
+ <Link to="/">
+ <BsPersonFill color={'#696969'} />
+ </Link>
+ </Icons>
+ <Icons>
+ <Link to="/chatlist">
+ <BsChatFill color={'#696969'} />
+ </Link>
+ </Icons>
+ <Icons>
+ <Link to="/settings">
+ <BsThreeDots color={'#696969'} />
+ </Link>
+ </Icons>
+ </Nav>
+ );
+};
+
+const Nav = styled.div`
+ display: flex;
+ flex-direction: column;
+ background-color: #dcdcdc;
+ border-radius: 20px 0px 0px 20px;
+`;
+
+const Icons = styled.li`
+ list-style: none;
+ font-size: 30px;
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+`;
+
+export default NavBar;

src/atoms.tsx

@@ -0,0 +1,15 @@
+import { atom } from 'recoil';
+import message from './data/message.json';
+import user from './data/user.json';
+import { IChatBoard,IUser } from './interface';
+
+
+export const listAtom = atom<IChatBoard[]>({
+ key: 'chatList',
+ default: message
+});
+
+export const userAtom = atom<IUser>({
+ key: 'user',
+ default: user[0]
+})

src/components/ChatRoomLists/ChatRoom.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IChatRoomList } from '../../interface';
+
+const ChatRoom = ({ text, name }: IChatRoomList) => {
+ return (
+ <ChatRoomContainer>
+ <ChatRoomImg src={`./img/${name}.png`} />
+ <div>
+ <ChatRoomName>{name}</ChatRoomName>
+ <ChatRoomText>{text}</ChatRoomText>
+ </div>
+ </ChatRoomContainer>
+ );
+};
+
+const ChatRoomContainer = styled.div`
+ display: grid;
+ grid-template-columns: 1fr 5fr;
+ height: 50px;
+ margin-bottom: 10px;
+ margin-left: 10px;
+`;
+
+const ChatRoomImg = styled.img`
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+`;
+
+const ChatRoomName = styled.div`
+ font-size: 17px;
+ font-weight: 500;
+`;
+
+const ChatRoomText = styled.div`
+ color: gray;
+ font-size: 13px;
+ margin-top: 2px;
+`;
+
+export default ChatRoom;

src/components/ChatRoomLists/ChatRoomList.tsx

@@ -0,0 +1,25 @@
+import message from '../../data/message.json';
+import ChatRoom from './ChatRoom';
+import { Link } from 'react-router-dom';
+
+function ChatRoomList() {
+ return (
+ <div>
+ {message.map((Msg) => (
+ <Link
+ to={`/chatroom/${Msg.roomid}`}
+ style={{ textDecoration: 'none', color: 'black' }}
+ >
+ <ChatRoom
+ key={Msg.userid}
+ text={Msg.msg[Msg.msg.length - 1].text}
+ name={Msg.name}
+ roomid={Msg.roomid}
+ />
+ </Link>
+ ))}
+ </div>
+ );
+}
+
+export default ChatRoomList;

src/components/Chats/Chat.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IUser, IChatRoomList } from '../../interface';
+import { userAtom } from '../../atoms';
+import { useRecoilState } from 'recoil';
+
+const Chat = ({ name, text }: IChatRoomList) => {
+ const [currentUser] = useRecoilState<IUser>(userAtom);
+
+ return (
+ <>
+ {name === currentUser.name ? (
+ <Li1>
+ <UserImg src={`../img/${name}.png`} />
+ <div>
+ <UserName1>{name}</UserName1>
+ <Text>{text}</Text>
+ </div>
+ </Li1>
+ ) : (
+ <Li2>
+ <UserImg src={`../img/${name}.png`} />
+ <div>
+ <UserName2>{name}</UserName2>
+ <Text>{text}</Text>
+ </div>
+ </Li2>
+ )}
+ </>
+ );
+};
+
+const Li1 = styled.li`
+ display: flex;
+ flex-direction: row-reverse;
+ margin-right: 20px;
+ margin-bottom: 10px;
+`;
+
+const Li2 = styled.li`
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 10px;
+`;
+
+const UserImg = styled.img`
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+`;
+
+const UserName1 = styled.span`
+ display: flex;
+ flex-direction: row-reverse;
+ padding: 5px;
+ margin-bottom: 5px;
+ margin-right: 5px;
+`;
+
+const UserName2 = styled.span`
+ display: flex;
+ flex-direction: row;
+ padding: 5px;
+ margin-bottom: 5px;
+ margin-left: 5px;
+`;
+
+const Text = styled.span`
+ background-color: white;
+ margin: 10px;
+ padding: 10px;
+ border-radius: 10px;
+ font-size: 13px;
+ margin-top: 10px;
+`;
+
+export default Chat;

src/components/Chats/ChatBoard.tsx

@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from 'react';
+import Chat from './Chat';
+import styled from 'styled-components';
+import { IChatBoard } from '../../interface';
+import { listAtom } from '../../atoms';
+import { useRecoilState } from 'recoil';
+
+function ChatBoard({ roomid }: any) {
+ const [chatList] = useRecoilState<IChatBoard[]>(listAtom);
+ const chatBoardRef = useRef<HTMLDivElement>(null);
+
+ const scrollDown = () => {
+ if (chatBoardRef.current) {
+ chatBoardRef.current.scrollTop = chatBoardRef.current.scrollHeight;
+ }
+ };
+
+ useEffect(() => {
+ scrollDown();
+ }, [chatList]);
+
+ const currentChatList = chatList[roomid].msg;
+
+ return (
+ <ChatBoardContainer ref={chatBoardRef}>
+ <UserChat>
+ {currentChatList.map((li: any) => (
+ <Chat key={li.name} name={li.name} text={li.text} />
+ ))}
+ </UserChat>
+ </ChatBoardContainer>
+ );
+}
+
+const ChatBoardContainer = styled.div`
+ background-color: #85c1e9;
+ overflow: auto;
+`;
+
+const UserChat = styled.ul`
+ list-style: none;
+`;
+
+export default ChatBoard;