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

src/App.tsx

@@ -14,7 +14,7 @@ function App() {
         <Route path="/" element={<Friends />} />
         <Route path="/chatList" element={<Chatting />} />
         <Route path="/setting" element={<Setting />} />
-        <Route path="/chatRoom" element={<ChatRoom />} />
+        <Route path="/chatRoom/:id" element={<ChatRoom />} />
       </Routes>
     </BrowserRouter>
   );

src/components/chatRooms/ChatRoomItem.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
 import styled from 'styled-components';
@@ -9,8 +10,16 @@ const ChatRoomItem = (user: User) => {
   const myChats = chats.filter((chat) => chat.user_id === user.user_id);
   console.log(myChats[0]);
 
+  const navigate = useNavigate();
+
+  const id = user.user_id;
+
   return (
-    <UserItemWrapper>
+    <UserItemWrapper
+      onClick={() => {
+        navigate(`/chatRoom/${id}`);
+      }}
+    >
       <UserImgWrapper isSelected={user.isSelected}>
         <UserImg src={user.user_img} />
       </UserImgWrapper>
@@ -43,16 +52,20 @@ const UserImg = styled.img`
   object-fit: cover;
 `;
 
+const UserInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+`;
+
 const UserName = styled.div`
   font-size: 0.9rem;
   font-weight: 600;
 `;
 
-const UserInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+const Message = styled.div`
+  font-size: 0.85rem;
+  color: gray;
 `;
 
-const Message = styled.div``;
-
 export default ChatRoomItem;

src/components/friends/FriendsList.tsx

@@ -12,7 +12,11 @@ const FriendsList = () => {
       {users.map((it) => (
         <>
           <Friend key={it.user_id} {...it} />
-          {it.isSelected ? <FriendsNum>친구 {users.length}</FriendsNum> : <></>}
+          {it.isSelected ? (
+            <FriendsNum>친구 {users.length - 1}</FriendsNum>
+          ) : (
+            <></>
+          )}
         </>
       ))}
     </Friends>

src/pages/ChatRoom.tsx

@@ -6,14 +6,13 @@ import InputBox from '../components/InputBox';
 import ChatBoxList from '../components/chatRoom/ChatBoxList';
 
 const ChatRoom = () => {
-  // const { id } = useParams();
-  const id = 2;
+  const { id } = useParams();
 
   return (
     <Container>
       <ChatHeader />
       <ChatBoxList />
-      <InputBox id={id} />
+      <InputBox id={2} />
     </Container>
   );
 };