(null);
+ const chatRoomList = useRecoilValue(messageState);
+
+ const UserList = useRecoilValue(userState);
+ const { toggleAccount } = useChatRoom();
+
+ /* const goToChat = ({ userList }: any) => {
+ navigate(`/room/${chatRoomList.id}`);
+ };
+ */
+ const scrollToBottom = () => {
+ if (messageWrapperRef.current) {
+ messageWrapperRef.current.scrollTop =
+ messageWrapperRef.current.scrollHeight;
+ }
+ };
+ useEffect(() => {}, [chatRoomList]);
+ const ResetData = useResetRecoilState(chatRoomState);
+
+ const onClickMe = (): void => {
+ toggleAccount(0);
+ ResetData();
+ };
+
+ //recoil로 전체 가져오기!! [chatRoom,setChatROom]useRecoilState, 이한비 값은 안받는걸로 해주기
+ const TempList = ({ userList, realId }: any) => {
+ const [chatRoom, setChatRoom] = useRecoilState(messageState);
+ const testRoom = useRecoilValue(chatRoomState);
+
+ const newData = chatRoom.filter((txt) => txt.id === Number(userList.id))[0];
+
+ const realNum = newData.messages.length - 1;
+ const realNum2 = newData.message.length - 1;
+
+ if (newData.message.length === 0) {
+ return (
+
+
+
+ {userList.name}
+ {newData.messages[realNum].text}
+ {newData.messages[realNum].time}
+
+
+ );
+ } else {
+ return (
+
+
+
+ {userList.name}
+ {newData.message[realNum2].text}
+ {newData.message[realNum2].time}
+
+
+ );
+ }
+ };
+ const newUserList = UserList.users.slice(0, 6);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 채팅
+
+ {newUserList.map((userList) => (
+
+ ))}
+
+
+
+ );
+}
+const Wrapper = styled.section`
+ display: flex;
+ flex-direction: column;
+ height: 584px;
+
+ overflow: auto;
+ padding: 0.5rem 0.8rem 0 0.2rem;
+ ::-webkit-scrollbar {
+ width: 0.9rem;
+ }
+ ::-webkit-scrollbar-thumb {
+ background-color: black;
+ border-radius: 1rem;
+ background-clip: padding-box;
+ border: 0.3rem solid transparent;
+ }
+`;
+
+const CurrentTime = styled.div`
+ font-size: 12px;
+ font-weight: light;
+ margin-left: 125px;
+ color: #d8d0d0;
+`;
+const AllTemp = styled.div`
+ display: flex;
+ flex-direction: row;
+ border-bottom: 1px solid lightgray;
+ margin-bottom: 1px;
+ padding-top: 0.05px;
+`;
+const ChatLink = styled(Link)`
+ display: flex;
+ flex-direction: column;
+
+ padding: 28px 3px;
+ align-items: left;
+
+ text-decoration: none;
+ font-size: 18px;
+ color: black;
+ font-weight: bold;
+ margin-bottom: 3px;
+`;
+
+const MainImg = styled.img`
+ width: 38px;
+ height: 38px;
+ border-radius: 50%;
+ background-size: cover;
+ margin: 15px;
+ margin-top: 15px;
+`;
+
+const CurrentText = styled.div`
+ color: #1c191976;
+ font-size: small;
+ font-weight: 650;
+`;
+const BodyTemplate = styled.div`
+ box-sizing: border-box;
+ padding: 0 3px;
+ margin-top: 1px;
+`;
+
+const RealAll = styled.div`
+ width: 350px;
+ height: 680px;
+ background-color: white;
+ border-radius: 25px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ display: grid;
+ grid-template-columns: 68px auto;
+`;
+const SideTemplate = styled.div`
+ background-color: rgb(230, 230, 230);
+ border-right: 1px solid rgb(223, 223, 223);
+ border-radius: 25px 0px 0px 25px;
+ display: block;
+`;
+const ShowImg = styled.img`
+ width: 58px;
+ height: 58px;
+ padding: 28px 15px;
+ border-radius: 50%;
+ background-size: cover;
+`;
+
+const AllTemplate = styled.div`
+ width: 350px;
+ height: 660px;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default List;
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
new file mode 100644
index 0000000..cc7769e
--- /dev/null
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { chatRoomState, userState } from '../atom';
+import useChatRoom from '../hooks/useChatRoom';
+
+function MainPage() {
+ const navigate = useNavigate();
+ const UserList = useRecoilValue(userState);
+
+ const goToList = () => {
+ navigate('/Search');
+ };
+
+ //css공통된 요소 많은것 props로 넘기는걸로 바꾸기!
+ const TempList = ({ userList, realId }: any) => {
+ if (userList.id !== 0) {
+ return (
+
+
+
+
+ {userList.name}
+ {userList.currentText}
+
+
+
+
+
+
+ {userList.name}
+ {userList.currentText}
+
+
+
친구{UserList.users.length - 1}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 친구
+
+
+
+
+ {UserList.users.map((userList) => (
+
+ ))}
+
+
+
+ );
+}
+const AllTemp = styled.div`
+ display: flex;
+ flex-direction: row;
+`;
+const CurrentText = styled.div`
+ font-size: 11px;
+ color: grey;
+ font-weight: bold;
+`;
+const FriendNum = styled.h6`
+ margin-top: 10px;
+ color: grey;
+ margin-bottom: 20px;
+`;
+const ShowImg2 = styled.img`
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ background-size: cover;
+ margin: 0 15px;
+ border-radius: 10px;
+`;
+const HeaderTemplate = styled.div`
+ display: flex;
+ flex-direction: row;
+`;
+const FindButton = styled.img`
+ width: 18px;
+ height: 18px;
+ margin-left: 200px;
+ margin-top: 18px;
+`;
+
+const MainImg = styled.img`
+ width: 38px;
+ height: 38px;
+ border-radius: 50%;
+ background-size: cover;
+ margin: 15px;
+ margin-top: 15px;
+`;
+const ShowImg = styled.img`
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background-size: cover;
+ margin: 0 15px;
+ border-radius: 10px;
+`;
+const MainId = styled(Link)`
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ padding: 30px 25px;
+ text-decoration: none;
+ border-bottom: 1px solid grey;
+ padding-bottom: 10px;
+ padding-left: 1px;
+ box-sizing: border-box;
+ color: black;
+ border-radius: 3px;
+ border-bottom-color: #66616190;
+
+ /*margin: 0px 10px;*/
+`;
+const OneId = styled(Link)`
+ display: flex;
+ flex-direction: column;
+ padding: 6px;
+ -webkit-box-align: center;
+ align-items: left;
+ padding-bottom: 20px;
+ text-decoration: none;
+
+ color: black;
+`;
+const BodyTemplate = styled.div`
+ box-sizing: border-box;
+ padding: 0 3px;
+`;
+const RealAll = styled.div`
+ width: 350px;
+ height: 680px;
+ background-color: white;
+ border-radius: 25px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ display: grid;
+ grid-template-columns: 68px auto;
+`;
+const SideTemplate = styled.div`
+ background-color: rgb(230, 230, 230);
+ border-right: 1px solid rgb(223, 223, 223);
+ border-radius: 25px 0px 0px 25px;
+ display: block;
+`;
+
+const AllTemplate = styled.div`
+ width: 350px;
+ height: 660px;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default MainPage;
diff --git a/src/pages/OwnChat.tsx b/src/pages/OwnChat.tsx
new file mode 100644
index 0000000..7ca2c51
--- /dev/null
+++ b/src/pages/OwnChat.tsx
@@ -0,0 +1,62 @@
+import InputForm from '../components/InputMessage';
+import styled from 'styled-components';
+import MessageChatForm from '../components/MessageChatForm';
+
+import useChatRoom from '../hooks/useChatRoom';
+
+import { useNavigate } from 'react-router-dom';
+
+function OwnChat() {
+ const navigate = useNavigate();
+ const { addMsg, toggleAccount } = useChatRoom();
+
+ const goToMain = () => {
+ toggleAccount(0);
+ navigate('/');
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+const MoveButton = styled.img`
+ width: 30px;
+ height: 30px;
+ margin-left: 250px;
+`;
+const AllTemplate = styled.div`
+ width: 350px;
+ height: 660px;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ justify-content: center;
+ align-items: center;
+`;
+
+const ImgProfAll = styled.section`
+ display: flex;
+ flex-direction: row;
+`;
+const ImgProf = styled.img`
+ width: 53px;
+ height: 53px;
+ border-radius: 25px;
+ transition: 0.5s;
+ display: block;
+`;
+
+export default OwnChat;
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
new file mode 100644
index 0000000..cf2d9d8
--- /dev/null
+++ b/src/pages/Room.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import InputForm from '../components/InputMessage';
+import styled from 'styled-components';
+import MessageChatForm from '../components/MessageChatForm';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import useChatRoom from '../hooks/useChatRoom';
+import { useEffect } from 'react';
+import { chatRoomState, messageState, userState } from '../atom';
+import { useNavigate, useParams } from 'react-router-dom';
+import { idText } from 'typescript';
+
+function Room() {
+ const navigate = useNavigate();
+ const { addMsg, toggleAccount } = useChatRoom();
+
+ const UserList = useRecoilValue(userState);
+ const [id, setId] = useRecoilState(chatRoomState);
+
+ let params = useParams();
+
+ let num = params.id;
+
+ const realNum = Number(num);
+
+ useEffect(() => {
+ setId((prevId) => {
+ const variable = { ...prevId };
+ variable.id = realNum;
+
+ return { ...variable };
+ });
+ }, []);
+
+ const onCLickYou = (): void => {
+ toggleAccount(realNum);
+ };
+
+ const goToMain = () => {
+ toggleAccount(0);
+ navigate('/list');
+ };
+
+ return (
+
+
+
+
+
+
+ {UserList.users[realNum].name}
+
+
+
+
+ );
+}
+const Text = styled.div`
+ margin-top: 1px;
+ margin-left: 10px;
+ font-size: 13px;
+`;
+const MoveButton = styled.img`
+ width: 30px;
+ height: 30px;
+ margin-left: 250px;
+`;
+const AllTemplate = styled.div`
+ width: 350px;
+ height: 660px;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 1px 1px 30px grey;
+ margin-top: 10%;
+ margin-bottom: 10%;
+ margin-left: 38%;
+ justify-content: center;
+ align-items: center;
+`;
+
+const ImgProfAll = styled.section`
+ display: flex;
+ flex-direction: row;
+`;
+const ImgProf = styled.img`
+ width: 53px;
+ height: 53px;
+ border-radius: 25px;
+ transition: 0.5s;
+ display: block;
+ margin-left: 5px;
+ margin-top: 5px;
+ margin-bottom: 0.05px;
+`;
+
+export default Room;
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
new file mode 100644
index 0000000..83aee94
--- /dev/null
+++ b/src/pages/Search.tsx
@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { userState } from '../atom';
+
+function Search() {
+ const navigate = useNavigate();
+ const UserList = useRecoilValue(userState);
+
+ const [search, setSearch] = useState('');
+ const onChange = (e: React.ChangeEvent) => {
+ setSearch(e.target.value);
+ };
+ const filterName = UserList.users.filter((p) => {
+ return p.name.replace(' ', '').includes(search);
+ });
+ const goToMain = () => {
+ navigate('/');
+ };
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 친구
+
+
+
+
+ {filterName.map((m) => (
+
+
+
+ {m.name}
+ {m.currentText}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Setting
+
+
+ Github
+
+
+
+
+ tistory
+
+
+
+