CEOS-Developers · jhj2713 · May 2, 2022 · May 2, 2022 · May 2, 2022 · May 2, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,19 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.31",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "@types/styled-components": "^5.1.25",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.2",
+    "styled-components": "^5.3.5",
+    "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/images/DAY6.jpg b/public/images/DAY6.jpg
diff --git a/public/images/backbutton.png b/public/images/backbutton.png
diff --git a/public/images/colde.jpg b/public/images/colde.jpg
diff --git a/public/images/damons year.jpg b/public/images/damons year.jpg
diff --git a/public/images/ducky.jpg b/public/images/ducky.jpg
diff --git a/public/images/ghost.jpg b/public/images/ghost.jpg
diff --git a/public/images/ghost.png b/public/images/ghost.png
diff --git a/public/images/joan.jpg b/public/images/joan.jpg
diff --git a/public/images/keshi.jpg b/public/images/keshi.jpg
diff --git a/public/images/kitty.jpg b/public/images/kitty.jpg
diff --git a/public/images/krkorklo.jpg b/public/images/krkorklo.jpg
diff --git a/public/images/nell.jpg b/public/images/nell.jpg
diff --git a/public/images/send.png b/public/images/send.png
diff --git a/public/images/taeng_ss.jpg b/public/images/taeng_ss.jpg
diff --git a/public/index.html b/public/index.html
@@ -9,9 +9,11 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>React App</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Messenger</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+import { useRecoilState } from "recoil";
+import { resizeState } from "recoil/recoil";
+import { useEffect } from "react";
+import { Route, Routes } from "react-router-dom";
+import { ChatList, ChatFriends, ChatRoom, Setting } from "pages";
+
+const App = () => {
+  const [isMobile, setIsMobile] = useRecoilState(resizeState);
+
+  const _handleResize = () => {
+    if (window.innerWidth <= 640) {
+      setIsMobile(true);
+    } else {
+      setIsMobile(false);
+    }
+  };
+
+  useEffect(() => {
+    if (window.innerWidth <= 640) {
+      setIsMobile(true);
+    }
+
+    window.addEventListener("resize", _handleResize);
+    return () => {
+      window.removeEventListener("resize", _handleResize);
+    };
+  }, []);
+
+  return (
+    <Wrapper>
+      <Container isMobile={isMobile}>
+        <Routes>
+          <Route path="/chatList" element={<ChatList />} />
+          <Route path="/chatRoom/:id" element={<ChatRoom />} />
+          <Route path="/" element={<ChatFriends />} />
+          <Route path="/setting" element={<Setting />} />
+        </Routes>
+      </Container>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const Container = styled.div<{ isMobile: boolean }>`
+  border: 0.05rem solid lightgrey;
+  ${({ isMobile }) =>
+    isMobile
+      ? css`
+          height: 100%;
+          width: 100%;
+        `
+      : css`
+          height: 640px;
+          width: 360px;
+          border-radius: 0.5rem;
+        `}
+`;
+
+export default App;
diff --git a/src/components/chatFriends/ChatFriendsList.tsx b/src/components/chatFriends/ChatFriendsList.tsx
@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import user from "data/user.json";
+import List from "components/layout/List";
+import Search from "components/common/Search";
+import { useState } from "react";
+
+const ChatList = () => {
+  const totalUser = user.slice(1);
+  const [showUser, setShowUser] = useState(totalUser);
+
+  const filterUser = (text: string): void => {
+    if (!text.trim()) {
+      setShowUser(totalUser);
+    } else {
+      const filtered = totalUser.filter((user) =>
+        user.name.toLowerCase().includes(text.trim().toLowerCase())
+      );
+      setShowUser(filtered);
+    }
+  };
-  const filterUser = (text: string): void => {
-    if (!text.trim()) {
-      setShowUser(totalUser);
-    } else {
-      const filtered = totalUser.filter((user) =>
-        user.name.toLowerCase().includes(text.trim().toLowerCase())
-      );
-      setShowUser(filtered);
-    }
-  };
+  const filterUser = (text: string): void => {
+    const filtered = totalUser.filter((user) =>
+      user.name.toLowerCase().includes(text.trim().toLowerCase())
+    );
+    setShowUser(filtered);
+  };
-  const filterUser = (text: string): void => {
-    if (!text.trim()) {
-      setShowUser(totalUser);
-    } else {
-      const filtered = totalUser.filter((user) =>
-        user.name.toLowerCase().includes(text.trim().toLowerCase())
-      );
-      setShowUser(filtered);
-    }
-  };
+  const filterUser = (text: string): void => {
+    const filtered = totalUser.filter((user) =>
+      user.name.toLowerCase().includes(text.trim().toLowerCase())
+    );
+    setShowUser(filtered);
+  };
+
+  return (
+    <Container>
+      <Search filter={filterUser} />
+      {showUser.map((user) => (
+        <List
+          key={user.id}
+          link={user.id}
+          img={user.name}
+          title={user.name}
+          subTitle={user.statusMessage}
+        />
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  height: 67%;
+  overflow: auto;
+  padding-top: 1rem;
+  ::-webkit-scrollbar {
+    width: 0.9rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 1rem;
+    background-clip: padding-box;
+    border: 0.3rem solid transparent;
+  }
+`;
+
+export default ChatList;
diff --git a/src/components/chatList/MessageChatList.tsx b/src/components/chatList/MessageChatList.tsx
@@ -0,0 +1,66 @@
+import List from "components/layout/List";
+import message from "data/message.json";
+import styled from "styled-components";
+import { useState } from "react";
+import Search from "components/common/Search";
+import { IUserType } from "interface";
+
+const MessageChatList = () => {
+  const [showMessage, setShowMessage] = useState(message);
+
+  const filterMessage = (text: string): void => {
+    if (!text.trim()) {
+      setShowMessage(message);
+    } else {
+      const filtered = message.filter(
+        (msg) =>
+          msg.user.filter((user) =>
+            user.name.toLowerCase().includes(text.trim().toLowerCase())
+          ).length !== 0
+      );
+      setShowMessage(filtered);
+    }
-    if (!text.trim()) {
-      setShowMessage(message);
-    } else {
-      const filtered = message.filter(
-        (msg) =>
-          msg.user.filter((user) =>
-            user.name.toLowerCase().includes(text.trim().toLowerCase())
-          ).length !== 0
-      );
-      setShowMessage(filtered);
-    }
+    const filtered = message.filter(
+      (msg) =>
+        msg.user.filter((user) =>
+          user.name.toLowerCase().includes(text.trim().toLowerCase())
+        ).length !== 0
+    );
-    if (!text.trim()) {
-      setShowMessage(message);
-    } else {
-      const filtered = message.filter(
-        (msg) =>
-          msg.user.filter((user) =>
-            user.name.toLowerCase().includes(text.trim().toLowerCase())
-          ).length !== 0
-      );
-      setShowMessage(filtered);
-    }
+    const filtered = message.filter(
+      (msg) =>
+        msg.user.filter((user) =>
+          user.name.toLowerCase().includes(text.trim().toLowerCase())
+        ).length !== 0
+    );
+  };
+  const _handleFriendsName = (friends: IUserType[]): string => {
+    return friends.length === 1
+      ? friends[0].name
+      : friends.map((user) => user.name).join(", ");
+  };
+
+  return (
+    <Container>
+      <Search filter={filterMessage} />
+      {showMessage.map(
+        (msg) =>
+          msg.messages.length !== 0 && (
+            <List
+              key={msg.id}
+              link={msg.id}
+              img={msg.user[0].name}
+              title={_handleFriendsName(msg.user)}
+              subTitle={msg.messages[msg.messages.length - 1].text}
+            />
+          )
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  height: 67%;
+  overflow: auto;
+  padding-top: 1rem;
+  ::-webkit-scrollbar {
+    width: 0.9rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 1rem;
+    background-clip: padding-box;
+    border: 0.3rem solid transparent;
+  }
+`;
+
+export default MessageChatList;
diff --git a/src/components/common/Alert.tsx b/src/components/common/Alert.tsx
@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import { IAlert } from "interface";
+
+const Alert = ({ setVisibleAlert, value }: IAlert) => {
+  const _handleClick = (): void => {
+    setVisibleAlert(false);
+  };
+
+  return (
+    <Wrapper>
+      <Background onClick={_handleClick} />
+      <Container>
+        <AlertButtonBox>
+          <AlertButton type="button" onClick={_handleClick}>
+            X
+          </AlertButton>
+        </AlertButtonBox>
+        <AlertContent>{value}</AlertContent>
+      </Container>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: alert-show 0.2s;
+  @keyframes alert-show {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const Background = styled.div`
+  background: #00000020;
+  width: 100%;
+  height: 100%;
+`;
+const Container = styled.section`
+  position: absolute;
+  width: 25rem;
+  height: 9rem;
+  background: #ffffff;
+  border-radius: 0.4rem;
+`;
+const AlertContent = styled.section`
+  margin: 1.8rem;
+  font-size: 1.1rem;
+`;
+const AlertButtonBox = styled.section`
+  display: flex;
+  justify-content: flex-end;
+  margin: 1.5rem;
+`;
+const AlertButton = styled.button`
+  border: none;
+  background: none;
+  font-size: 1.2rem;
+  cursor: pointer;
+  :hover {
+    opacity: 0.5;
+    transition: 0.15s;
+  }
+`;
+
+export default Alert;
diff --git a/src/components/common/Search.tsx b/src/components/common/Search.tsx
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+import { ISearch } from "interface";
+import { AiOutlineSearch } from "react-icons/ai";
+import { useRecoilValue } from "recoil";
+import { resizeState } from "recoil/recoil";
+import useInput from "hooks/useInput";
+import { useEffect } from "react";
+
+const Search = ({ filter }: ISearch) => {
+  const { text, handleTextChange } = useInput("");
+  const isMobile = useRecoilValue(resizeState);
+
+  useEffect(() => {
+    filter(text);
+  }, [filter, text]);
+
+  return (
+    <Container>
+      <IconBox>
+        <AiOutlineSearch size={20} />
+      </IconBox>
+      <SearchInput
+        placeholder="Search..."
+        value={text}
+        onChange={handleTextChange}
+        isMobile={isMobile}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  display: flex;
+`;
+const IconBox = styled.section`
+  margin: 0.3rem 0.5rem 0 1rem;
+`;
+const SearchInput = styled.input<{ isMobile: boolean }>`
+  border: 0.05rem solid lightgrey;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  width: ${({ isMobile }) => (isMobile ? "85%" : "17rem")};
+  height: 1rem;
+  font-size: 0.7rem;
+  :focus {
+    outline: none;
+  }
+`;
+
+export default Search;
diff --git a/src/components/layout/ChatFooter.tsx b/src/components/layout/ChatFooter.tsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { AiOutlineUser, AiOutlineSetting } from "react-icons/ai";
+import { BiMessage } from "react-icons/bi";
+
+const ChatFooter = ({ path }: { path: string }) => {
+  return (
+    <Container>
+      <IconBox to="/" selected={path === "friends"}>
+        <AiOutlineUser size={22} />
+      </IconBox>
+      <IconBox to="/chatList" selected={path === "chatList"}>
+        <BiMessage size={22} />
+      </IconBox>
+      <IconBox to="/setting" selected={path === "setting"}>
+        <AiOutlineSetting size={22} />
+      </IconBox>
+    </Container>
+  );
+};
+
+const Container = styled.section`
+  border-top: 0.05rem solid lightgrey;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+`;
+const IconBox = styled(Link)<{ selected: boolean }>`
+  display: flex;
+  justify-content: center;
+  margin: 1.3rem;
+  color: ${({ selected }) => (selected ? "#1986fc" : "#000000")};
+  cursor: pointer;
+  :hover {
+    opacity: 0.7;
+    transition: 0.15s;
+  }
+`;
+
+export default ChatFooter;