[5주차] 김채림 미션 제출합니다.

.prettierrc

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

package.json

@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "@types/react-custom-scrollbars": "^4.0.10",
     "react": "^18.1.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.3-alpha.2",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.25"
   }
 }

src/App.tsx

@@ -0,0 +1,36 @@
+import { Route, Routes } from 'react-router-dom';
+import GlobalStyle from './Globalstyle';
+import styled from 'styled-components';
+import FriendList from './routes/FriendList';
+import ChatList from './routes/ChatList';
+import Setting from './routes/Setting';
+import MessengerBox from './components/Message/MessengerBox';
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <MessengerContainer>
+        <Routes>
+          <Route path="/" element={<FriendList />} />
+          <Route path="/chatlist" element={<ChatList />} />
+          <Route path="/messengerbox/:userName" element={<MessengerBox />} />
+          <Route path="/setting" element={<Setting />} />
+        </Routes>
+      </MessengerContainer>
+    </>
+  );
+};
+export default App;
+
+const MessengerContainer = styled.div`
+  /* 너비 | 스타일 | 색 */
+  border: 0.08rem solid #c2bbbb;
+  margin: 0 auto;
+  margin-top: 5rem;
+  background: white;
+  border-radius: 0.5rem;
+  height: 43rem;
+  width: 26rem;
+  justify-content: flex-start;
+`;

src/Globalstyle.tsx

@@ -0,0 +1,29 @@
+import { createGlobalStyle } from 'styled-components';
+
+//페이지 전체에 적용될 style
+const GlobalStyle = createGlobalStyle`
+
+button {
+  &:hover{
+    cursor: pointer;
+  }
+  border: none;
+  background: none;
+  font-size: 17px;
+}
+
+::-webkit-scrollbar {
+    width: 0.9rem;
+    margin: 0;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    height: 17%;
+    background-color: #c2bbbb;
+    border-radius: 10px;
+    background-clip: padding-box;
+    border: 0.3rem solid transparent;
+  }
+`;
+
+export default GlobalStyle;

src/components/ChatList/Chattings.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { IChattingsProps } from '../../interface/interface';
+import {
+  LinkToChat,
+  ListItem,
+  ProfileImg,
+  UserName,
+} from '../layout/CommonStyle';
+const Chattings = ({ userId, userName, message }: IChattingsProps) => {
+  return (
+    <ChattingRooms>
+      <LinkToChat to={`/messengerbox/${userName}`}>
+        <ProfileImg src={`/assets/${userId}.jpg`} />
+        <ListItem>
+          <UserName>{userName}</UserName>
+          <LastMessage>{message}</LastMessage>
+        </ListItem>
+      </LinkToChat>
+    </ChattingRooms>
+  );
+};
+
+export default Chattings;
+
+const ChattingRooms = styled.div`
+  display: flex;
+  padding-left: 1rem;
+  margin: 0.5rem;
+`;
+
+const LastMessage = styled.div`
+  font-weight: lighter;
+  font-size: 14px;
+`;

src/components/FriendList/Friends.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { IFriendsProps } from '../../interface/interface';
+import {
+  LinkToChat,
+  ListItem,
+  ProfileImg,
+  UserName,
+} from '../layout/CommonStyle';
+const Friends = ({ userProfile, userName, userStatus }: IFriendsProps) => {
+  return (
+    <FriendList>
+      <LinkToChat to={`/messengerbox/${userName}`}>
+        <ProfileImg src={`/assets/${userProfile}`} />
+        <ListItem>
+          <UserName>{userName}</UserName>
+          <UserStatus>{userStatus}</UserStatus>
+        </ListItem>
+      </LinkToChat>
+    </FriendList>
+  );
+};
+
+export default Friends;
+
+const FriendList = styled.div`
+  display: flex;
+  padding-left: 1rem;
+  margin: 0.5rem;
+`;
+
+const UserStatus = styled.div`
+  font-weight: lighter;
+  font-size: 14px;
+`;

src/components/FriendList/SearchUser.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { BsSearch } from 'react-icons/bs';
+import useInput from '../../hooks/useInput';
+import { useEffect } from 'react';
+import { IFilteredUser } from '../../interface/interface';
+
+const SearchUser = ({ filteredUser }: IFilteredUser) => {
+  const { textinput, handleInputChange } = useInput('');
+
+  useEffect(() => filteredUser(textinput), [filteredUser, textinput]);
+  return (
+    <SearchContainer>
+      <BsSearch size={18} className="searchLogo" />
+      <SearchInput
+        placeholder="Search . . . "
+        value={textinput}
+        type="text"
+        onChange={handleInputChange}
+      />
+    </SearchContainer>
+  );
+};
+export default SearchUser;
+
+const SearchInput = styled.input`
+  margin-left: 1rem;
+  width: 16rem;
+  height: 1.5rem;
+  border-radius: 0.5rem;
+  border: 0.08rem solid #c2bbbb;
+  padding-left: 1rem;
+`;
+const SearchContainer = styled.div`
+  padding: 1rem;
+  height: 2rem;
+  text-align: center;
+
+  .searchLogo {
+    line-height: 3rem;
+    position: relative;
+    top: 0.3rem;
+  }
+`;

src/components/Message/MessageList.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import SingleMessage from './SingleMessage';
+import { IMessageData } from '../../interface/interface';
+
+const MessageList = ({ messageData }: { messageData: Array<IMessageData> }) => {
+  const scrollbarRef = useRef<HTMLDivElement>(null);
+
+  const scrollToBottom = () => {
+    if (scrollbarRef.current) {
+      scrollbarRef.current.scrollTop = scrollbarRef.current.scrollHeight;
+    }
+  };
+  useEffect(() => {
+    scrollToBottom();
+  }, [messageData]);
+
+  return (
+    <ListContainer ref={scrollbarRef}>
+      <ShowList>
+        {messageData.map((chat: IMessageData) => (
+          <SingleMessage chat={chat} key={chat.userId} />
+        ))}
+      </ShowList>
+    </ListContainer>
+  );
+};
+
+export default MessageList;
+
+const ListContainer = styled.div`
+  height: 26rem;
+  padding: 1rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
+const ShowList = styled.div``;

src/components/Message/MessengerBox.tsx

@@ -0,0 +1,37 @@
+import UserNav from '../layout/UserNav';
+import { useState } from 'react';
+import user from '../../data/user.json';
+import message from '../../data/message.json';
+import MessengerInput from './MessengerInput';
+import MessageList from './MessageList';
+import { useParams } from 'react-router-dom';
+
+const MessengerBox = () => {
+  // 사용자 나부터 시작
+  const otherUser = useParams();
+  const userindex = message.findIndex(
+    (message) => message.userName === otherUser.userName
+  );
+  const userMessageData = message[userindex];
+
+  const [currentUser, setCurrentUser] = useState(user[0]);
+  const [messageData, setMessageData] = useState(userMessageData.messages);
+  return (
+    <>
+      <UserNav
+        currentUser={currentUser}
+        setCurrentUser={setCurrentUser}
+        otherUser={otherUser}
+      />
+      <MessageList messageData={messageData} />
+
+      <MessengerInput
+        currentUser={currentUser}
+        messageData={messageData}
+        setChatList={setMessageData}
+      />
+    </>
+  );
+};
+
+export default MessengerBox;

src/components/Message/MessengerInput.tsx

@@ -0,0 +1,86 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+import useInput from '../../hooks/useInput';
+import { IMessengerInputProps } from '../../interface/interface';
+const MessengerInput = ({ currentUser, messageData, setChatList }: any) => {
+  const { textinput, handleInputChange, handleInputInitialize } = useInput('');
+
+  const handleInputSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      //공백이 아닐 때에만 send 가능
+      if (textinput.replace(/\s+/g, '')) {
+        const date = new Date();
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const messageObject = {
+          userId: currentUser.userId,
+          userName: currentUser.userName,
+          text: textinput,
+          time: `${hours}:${minutes}`,
+        };
+
+        setChatList([...messageData, messageObject]);
+
+        //공백일 경우 alert
+      } else {
+        alert('메세지를 입력하세요 ! ');
+      }
+
+      handleInputInitialize();
+
+      //새로고침 방지
+      e.preventDefault();
+    },
+    [messageData]
+  );
+
+  return (
+    <SubmitForm onSubmit={handleInputSubmit}>
+      <InputBoxWrapper>
+        <InputBox
+          value={textinput}
+          onChange={handleInputChange}
+          placeholder="Send Message . . ."
+          type="text"
+        />
+      </InputBoxWrapper>
+
+      <SendButton>🕸</SendButton>
+    </SubmitForm>
+  );
+};
+
+export default MessengerInput;
+
+const SubmitForm = styled.form`
+  align-items: center;
+  border-top-style: solid;
+  border-color: #c2bbbb;
+  border-width: 0.08rem;
+  padding: 0;
+  height: 6rem;
+  display: flex;
+  justify-content: space-evenly;
+`;
+
+const InputBoxWrapper = styled.div`
+  padding-left: 2rem;
+`;
+
+const InputBox = styled.input`
+  padding-left: 1rem;
+  line-height: 5.5rem;
+  border-color: #c2bbbb;
+  border-width: 0.08rem;
+  border-style: solid;
+  border-radius: 0.5rem;
+  width: 18rem;
+  height: 2.3rem;
+  margin: 0;
+  line-height: 6rem;
+`;
+const SendButton = styled.button`
+  line-height: 6rem;
+  background-color: transparent;
+  font-size: 1.5rem;
+`;