[4주차] 이현영 미션 제출합니다.

.prettierrc

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

package.json

@@ -3,16 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@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-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "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 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

src/App.tsx

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

src/components/chatRoom/ChatBoxItem.tsx

@@ -0,0 +1,94 @@
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+
+import { curUserState } from '../../recoil/recoil';
+import { User } from '../../interfaces/interfaces';
+
+const ChatBox = ({
+  user,
+  chat_content,
+}: {
+  user: User;
+  chat_content: string;
+}) => {
+  const curUser = useRecoilValue(curUserState);
+
+  return (
+    <ChatBoxItem isSelected={user.user_id === curUser}>
+      {user.user_id === curUser ? (
+        <></>
+      ) : (
+        <UserImgWrapper>
+          <UserImg src={user.user_img} />
+        </UserImgWrapper>
+      )}
+      <ChatWrapper>
+        {user.user_id === curUser ? (
+          <></>
+        ) : (
+          <ChatUserName>{user.user_name}</ChatUserName>
+        )}
+        <ChatItem>
+          <ChatText isSelected={user.user_id === curUser}>
+            {chat_content}
+          </ChatText>
+          <ChatTime />
+        </ChatItem>
+      </ChatWrapper>
+    </ChatBoxItem>
+  );
+};
+
+const ChatBoxItem = styled.div<{ isSelected: boolean }>`
+  display: flex;
+  gap: 0.8rem;
+
+  justify-content: ${(props) => (props.isSelected ? 'right' : 'left')};
+`;
+
+const UserImgWrapper = styled.div`
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 40%;
+  overflow: hidden;
+`;
+
+const UserImg = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+const ChatWrapper = styled.div``;
+
+const ChatUserName = styled.div`
+  padding-bottom: 0.4rem;
+
+  font-size: 0.75rem;
+`;
+
+const ChatItem = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+
+const ChatText = styled.div<{ isSelected: boolean }>`
+  padding: 0.6rem 0.8rem 0.5rem;
+
+  border-radius: 5px;
+
+  font-size: 0.9rem;
+  font-weight: 500;
+
+  background-color: ${(props) =>
+    props.isSelected ? 'rgb(255, 234, 0)' : 'white'};
+`;
+
+const ChatTime = styled.div`
+  align-self: flex-end;
+
+  font-size: 0.5rem;
+  font-weight: 500;
+`;
+
+export default ChatBox;

src/components/chatRoom/ChatBoxList.tsx

@@ -0,0 +1,56 @@
+import { useRef, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+
+import { userState, chatState } from '../../recoil/recoil';
+import ChatBoxItem from './ChatBoxItem';
+
+const ChatBoxList = () => {
+  const { id } = useParams();
+  const roomId = Number(id);
+
+  const chatList = useRecoilValue(chatState);
+  const userList = useRecoilValue(userState);
+
+  const chatBoxRef = useRef<HTMLDivElement>(null);
+
+  const scrollTo = () => {
+    if (chatBoxRef.current) {
+      chatBoxRef.current.scrollTo(0, chatBoxRef.current.scrollHeight);
+    }
+  };
+
+  useEffect(() => {
+    scrollTo();
+  }, [chatList]);
+
+  return (
+    <ChatBoxWrapper ref={chatBoxRef}>
+      {chatList
+        .filter((chat) => chat.chat_room === roomId)
+        .map((chat) => (
+          <ChatBoxItem
+            key={chat.chat_id}
+            {...chat}
+            user={userList.find((user) => user.user_id === chat.user_id)!}
+          />
+        ))}
+    </ChatBoxWrapper>
+  );
+};
+
+const ChatBoxWrapper = styled.div`
+  height: 26rem;
+  padding: 1.5rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  overflow-y: auto;
+
+  background-color: rgb(180, 213, 226);
+`;
+
+export default ChatBoxList;

src/components/chatRoom/ChatHeader.tsx

@@ -0,0 +1,34 @@
+import { useRecoilValue } from 'recoil';
+import { useParams } from 'react-router-dom';
+
+import HeaderItem from './HeaderItem';
+import { userState } from '../../recoil/recoil';
+import styled from 'styled-components';
+
+const ChatHeader = () => {
+  const { id } = useParams();
+  const roomId = Number(id);
+
+  const users = useRecoilValue(userState);
+
+  return (
+    <HeaderWrapper>
+      {users
+        .filter((user) => user.user_id === 1 || user.user_id === roomId)
+        .map((user) => (
+          <HeaderItem key={user.user_id} {...user} />
+        ))}
+    </HeaderWrapper>
+  );
+};
+
+const HeaderWrapper = styled.div`
+  height: 6rem;
+  padding-left: 1.5rem;
+
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+export default ChatHeader;

src/components/chatRoom/ChatInput.tsx

@@ -0,0 +1,93 @@
+import { useRef } from 'react';
+import { useParams } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { Chat } from '../../interfaces/interfaces';
+
+import useInput from '../../hooks/useInput';
+import { chatState, curUserState } from '../../recoil/recoil';
+
+import styled from 'styled-components';
+
+const InputBox = () => {
+  const { id } = useParams();
+  const roomId = Number(id);
+
+  const [chat, handleChangeInput, reset] = useInput('');
+
+  const setChats = useSetRecoilState(chatState);
+
+  const chatId = useRef<number>(11);
+
+  const curUser = useRecoilValue(curUserState);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (chat.trim()) {
+      const newChat: Chat = {
+        user_id: curUser,
+        chat_id: chatId.current,
+        chat_room: roomId,
+        chat_content: chat,
+      };
+
+      chatId.current += 1;
+
+      setChats((prevChats) => [...prevChats, newChat]);
+    }
+
+    reset();
+  };
+
+  const handleEnter = (e: React.KeyboardEvent<HTMLFormElement>) => {
+    if (e.keyCode === 13) {
+      if (!e.shiftKey) handleSubmit(e);
+    }
+  };
+
+  return (
+    <InputWrapper onSubmit={handleSubmit} onKeyDown={handleEnter}>
+      <Input value={chat} onChange={handleChangeInput} />
+      <Button>전송</Button>
+    </InputWrapper>
+  );
+};
+
+const InputWrapper = styled.form`
+  height: 8rem;
+
+  display: flex;
+`;
+
+const Input = styled.input`
+  padding: 1rem;
+  flex-grow: 8;
+
+  border: none;
+  resize: none;
+  word-break: break-word;
+
+  font-family: sans-serif;
+`;
+
+const Button = styled.button`
+  padding: 0.5rem 1rem 0.5rem;
+  margin: 0.5rem;
+  height: 2rem;
+
+  align-self: end;
+
+  border-radius: 10px;
+
+  background-color: rgb(237, 237, 237);
+  font-weight: 500;
+  color: rgb(144, 144, 144);
+`;
+
+/* 
+  .input-box__btn--default:hover {
+    background-color: rgb(255, 234, 0);
+    color: black;
+  } */
+
+export default InputBox;