CEOS-Developers · SeieunYoo · May 6, 2022 · May 6, 2022 · May 6, 2022 · May 6, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,17 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.0",
+    "@types/node": "^17.0.31",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.3-alpha.2",
+    "styled-component": "^2.8.0",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +42,20 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.4"
   }
 }
diff --git a/public/img/profile0.png b/public/img/profile0.png
diff --git a/public/img/profile1.png b/public/img/profile1.png
diff --git a/public/img/profile2.png b/public/img/profile2.png
diff --git a/public/img/profile3.png b/public/img/profile3.png
diff --git a/public/img/profile4.png b/public/img/profile4.png
diff --git a/public/img/profile5.png b/public/img/profile5.png
diff --git a/public/img/profile6.png b/public/img/profile6.png
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,7 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <title>💌 Messenger</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/.eslinterc.js b/src/.eslinterc.js
@@ -0,0 +1,23 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'react-hooks'],
+    extends: [
+      'airbnb', // or airbnb-base
+      'plugin:react/recommended',
+      'plugin:jsx-a11y/recommended', // 설치 한경우
+      'plugin:import/errors', // 설치한 경우
+      'plugin:import/warnings', // 설치한 경우
+      'plugin:@typescript-eslint/recommended',
+      'plugin:prettier/recommended',
+    ],
+    rules: {
+      'prettier/prettier': 0,
+    },
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+    },
+  };
diff --git a/src/.prettierc b/src/.prettierc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,58 @@
+import { Route, Routes } from 'react-router-dom';
+import styled  from "styled-components";
+import ChatRoom from "./Pages/ChatRoom";
+import Menu from "./Menu";
+import FriendList from './Pages/FriendList';
+import ChatRoomList from './Pages/ChatRoomList';
+import Home from './Pages/Home';
+import Setting from './Pages/Setting';
+
+function App() {
+
+
+const Container = styled.div`
+
+text-align: center;
+width: 400px;
+height: 600px;
+background-color: white;
+display: flex;
+
+border-left :0px;
+border-radius: 9px;
+
+margin:0 auto;  //중앙에 박스
+margin-top: 50px;
+box-shadow:3px 3px 3px 3px lightgrey;
+
+`;
+
+
+      return (
+
+        /*
+
+         App
+         /  \
+      Menu   CHatRoom
+               /         \           \
+               InputForm  UserProfile Message
+
+        */ 
+       <div>
+       <Container>
+         <Menu/>
+         <Routes>
+           <Route path ="/Home" element ={<Home/>}/>
+           <Route index element={<FriendList />} />
+           <Route path ="/Chatroom/:friendId" element ={<ChatRoom/>}/>
+           <Route path ="/ChatRoomList" element ={<ChatRoomList/>}/>
+           <Route path ="/Setting" element ={<Setting/>}/>
+        </Routes>
+        </Container> 
+        </div>
+  );
+}
+
+export default App;
+
diff --git a/src/ChatRoom/Input/InputForm.tsx b/src/ChatRoom/Input/InputForm.tsx
@@ -0,0 +1,74 @@
+import {MessageItem} from "../../type"
+import React from "react";
+import {useCallback} from "react";
+import { Dispatch, SetStateAction} from "react";
+import useInput from "../../hook/useInput";
+import {Input,MessageButton,Form,InputWrapper,Emojimerong} from "./InputformDesign";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { messageListState, userState } from "../../recoil";
+
+type InputProps = {
+    messageList : MessageItem[];
+    setMessageList : Dispatch<SetStateAction<MessageItem[]>>
+  };
+
+function Inputform ({messageList, setMessageList} : InputProps){
+
+    const{message, onChange ,setMessage} = useInput();
+    const currentUser = useRecoilValue(userState); //currentUser 불러오기
+
+    //const messageList =useRecoilValue(messageListState);
+    //const setMessageList = useSetRecoilState(messageListState);
+
+    const submitEmoji = useCallback((event : React.SyntheticEvent) => {
+      event.preventDefault();
+        setMessageList(messageList => [...messageList,
+        {
+          roomId : currentUser,
+          text: "😛",
+          userId: currentUser,
+        }]);  
+        //입력받은 걸 배열에 넣음
+
+      },[currentUser]);
+
+      const submitInput = useCallback((event : React.SyntheticEvent) => {
+        event.preventDefault();
+
+         if (message) {
+          setMessageList(messageList => [...messageList,
+          {
+            roomId : currentUser,
+            text: message,
+            userId: currentUser,
+          }]);
+          //입력받은 걸 배열에 넣음
+
+        }
+
+        else{
+           alert("메시지를 입력하세요!");
+        }
+
+        setMessage("");
+      },[message]);
+
+      return(
+        <Form onSubmit={submitInput} >
+          <Emojimerong onClick={submitEmoji}>😛</Emojimerong>
+          <Input
+            onChange={onChange}
+            value={message}
+            type="text"
+            placeholder="메시지를 입력하세요"
+            autoFocus = {true}
+            spellCheck="false"
+
+          />
+          <MessageButton onClick={submitInput}>보내기</MessageButton>
+        </Form>
+        );
+  }
+
+
+  export default React.memo(Inputform);
diff --git a/src/ChatRoom/Input/InputformDesign.tsx b/src/ChatRoom/Input/InputformDesign.tsx
@@ -0,0 +1,35 @@
+import styled  from "styled-components";
+
+export const Input = styled.input
+      `
+      font-family: 'SuncheonB';
+      width: 200px;
+      height: 50px;
+      border-radius: 9px;
+      margin:1rem;
+
+      `
+
+export const MessageButton = styled.span
+      `
+      cursor: pointer;
+      margin-left : 0.1rem;
+      font-size: 15px;
+      `
+
+export const Form = styled.form
+      `
+      margin-bottom: 10px;
+
+      `
+      ;
+
+export const InputWrapper = styled.div
+      `
+       flex:0.3;
+      `;
+export const Emojimerong = styled.span
+      `
+         cursor:pointer;
+         font-size:20px;
+      `;
diff --git a/src/ChatRoom/Message/Message.tsx b/src/ChatRoom/Message/Message.tsx
@@ -0,0 +1,47 @@
+import { MessageItem, MessageList} from "../../type";
+import {useRef,useEffect} from "react";
+import {Wrapper,ChatMessage,ChatProfile,Chatcontainer,MessageBox,ChatName} from "./MessageDesign";
+import user from "../../data/user.json";
+import React from "react";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { messageListState } from "../../recoil";
+import chatting from "../../data/chat.json";
+
+type IMessage = {
+    roomId : number;
+}
+
+function Message({messageList} : MessageList){
+
+    const messageRef = useRef<HTMLDivElement>(null);
+
+    const ScrollEvent = useEffect(()=>{
+        if(messageRef.current)
+        messageRef.current.scrollTo({
+            top: messageRef.current.scrollHeight,
+            behavior: "smooth",
+        })
+    },[messageList]); //메세지리스트가 변할때만 스크롤에 대한 렌더링
+
+
+    return(
+
+        <Wrapper ref={messageRef}>
+            {messageList.map((message) => (
+                <Chatcontainer key ={message.roomId}>
+                    <ChatProfile src = {user[message.roomId].profile} loading ="lazy"/> 
+                     <MessageBox>
+                        <ChatName>{user[message.roomId].name} 님의 말: </ChatName>
+                        <ChatMessage>{message.text}</ChatMessage>   
+                     </MessageBox>
+                </Chatcontainer>
+                ))
+            }
+
+        </Wrapper>
+
+    );
+
+}
+
+export default React.memo(Message);
diff --git a/src/ChatRoom/Message/MessageDesign.tsx b/src/ChatRoom/Message/MessageDesign.tsx
@@ -0,0 +1,53 @@
+import styled  from "styled-components";
+export const Wrapper = styled.div
+    `
+    flex:1;
+    overflow: auto;
+    ::-webkit-scrollbar{
+        width:8px;
+        heigth:8px;
+        background-color: white;
+        /* 스크롤바 둥글게 설정    */
+        border-radius: 10px;   
+    }
+        ::-webkit-scrollbar-track{
+            background-color: white;
+
+    `;
+
+export const ChatName = styled.div
+    `
+    text-align:left;
+     font-size:13px;
+     margin: 0.5rem;
+    `;
+
+export const Chatcontainer =  styled.div
+    ` border-radius: 9px 
+      border: 1px solid grey;
+      display:flex;
+      margin: 0.5rem;
+    `;
+
+export const ChatProfile =styled.img
+    `
+    flex:0.1;
+    width: 30px;
+    height: 30px;
+    border-radius: 30px;
+    margin:0.7rem;
+    `;
+
+export const ChatMessage = styled.div
+    `
+      text-align:left;
+      margin-left: 1.3rem;
+      font-size:13px;
+    `;
+
+export const MessageBox = styled.div
+    `
+      display:flex;
+      flex-direction: column;
+
+    `;