[4주차] 김선영 미션 제출합니다.

package.json

@@ -12,7 +12,9 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

src/App.tsx

@@ -1,5 +1,24 @@
-function App() {
-  return <div>화이팅!!</div>;
-}
+import { Route, Routes } from "react-router-dom";
+
+import Layout from "./components/Layout";
+import FriendPage from "./pages/FriendPage";
+import ChatroomPage from "./pages/ChatroomPage";
+import SettingPage from "./pages/SettingPage";
+import Chatroom from "./pages/Chatroom";
+
+const App = () => {
+  return (
+    <>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<FriendPage />} />
+          <Route path="/chatrooms" element={<ChatroomPage />} />
+          <Route path="/setting" element={<SettingPage />} />
+        </Route>
+        <Route path="/chatrooms/:id" element={<Chatroom />} />
+      </Routes>
+    </>
+  );
+};
 
 export default App;

src/asset/icon/index.ts

@@ -0,0 +1,5 @@
+import person from "./person.svg";
+import chat from "./chat.svg";
+import more from "./more.svg";
+
+export const ICON = { person, chat, more };

src/common/getRoomMembers.tsx

@@ -0,0 +1,16 @@
+import { User } from "./interface";
+import chatData from "../data/chatData.json";
+import userData from "../data/userData.json";
+
+const chatrooms = chatData.rooms;
+const users = userData.users;
+
+// 해당 채팅방 멤버들의 유저정보를 담은 배열을 반환
+export const getRoomMembers = (roomId: number, includeCurUser: Boolean) => {
+  const roomMembers: User[] = [];
+  chatrooms[roomId].users.map((memberId) => roomMembers.push(users[memberId]));
+  if (!includeCurUser) {
+    roomMembers.shift();
+  }
+  return roomMembers;
+};

src/common/index.css

@@ -0,0 +1,30 @@
+html{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: whitesmoke;
+    font-size: 0.8rem;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  body {
+    position: relative;
+    margin: 0;
+    width: 400px;
+    height: 90vh;
+    box-shadow: 0 0 16px lightgray;
+    background-color: white;
+    border-radius: 10px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  @media screen and (max-width: 400px) {
+    body {
+      width: 100%;
+      height: 100%;
+    }
+  }

src/common/interface.tsx

@@ -0,0 +1,13 @@
+export interface User {
+  id: number;
+  name: string;
+  profileImage: string;
+  message: string;
+}
+
+export interface Chat {
+  id: number;
+  senderId: number;
+  text: string;
+  date: string;
+}

src/components/Item.tsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Item = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 8px 20px;
+  gap: 8px;
+
+  :hover {
+    background-color: whitesmoke;
+  }
+
+  .title {
+    color: black;
+  }
+
+  .content {
+    color: gray;
+    font-size: 0.8rem;
+  }
+`;
+
+export const ProfileImage = styled.img<{
+  noImage?: boolean;
+  selected?: boolean;
+}>`
+  width: 40px;
+  height: 40px;
+  border-radius: 15px;
+  object-fit: cover;
+  outline: ${({ selected }: { selected?: boolean }) =>
+    selected ? "1px solid black" : "none"};
+  opacity: ${(props) => (props.noImage ? 0 : 1)};
+`;

src/components/Layout.tsx

@@ -0,0 +1,65 @@
+import { NavLink, Outlet, useLocation } from "react-router-dom";
+import styled from "styled-components";
+import { ICON } from "../asset/icon";
+
+const MENUS = [
+  { text: "친구", path: "/", icon: ICON.person },
+  { text: "채팅", path: "/chatrooms", icon: ICON.chat },
+  { text: "더보기", path: "/setting", icon: ICON.more },
+];
+
+export default function Layout() {
+  const { pathname } = useLocation();
+
+  return (
+    <Wrapper>
+      <Navigation>
+        {MENUS.map((menu) => (
+          <NavLink
+            key={menu.text}
+            to={menu.path}
+            style={({ isActive }) =>
+              isActive ? { opacity: 1.0 } : { opacity: 0.3 }
+            }>
+            <img src={menu.icon} alt="" />
+          </NavLink>
+        ))}
+      </Navigation>
+      <Container>
+        <h2>{MENUS.find((menu) => menu.path === pathname)?.text}</h2>
+        <Outlet />
+      </Container>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+const Navigation = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+  background-color: #e6e6e6;
+  padding: 20px;
+  border-bottom-left-radius: 10px;
+  border-top-left-radius: 10px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  h2 {
+    margin: 0px;
+    padding: 20px;
+  }
+`;

src/components/chatroom/ChatItem.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import { Chat, User } from "../../common/interface";
+import { ProfileImage } from "../Item";
+
+interface ChatItemProps {
+  chat: Chat;
+  isCurUser: boolean;
+  noProfile: boolean;
+  sender: User;
+}
+
+const ChatItem = ({ chat, isCurUser, sender, noProfile }: ChatItemProps) => {
+  const time = String(new Date(chat.date).getHours()).padStart(2, "0");
+  const minute = String(new Date(chat.date).getMinutes()).padStart(2, "0");
+
+  return (
+    <Wrapper isCurUser={isCurUser} isMargin={!noProfile}>
+      {isCurUser ? (
+        <>
+          <ChatWrapper>
+            <div className="time">
+              {time}:{minute}
+            </div>
+            <ChatBalloon isCurUser={true}>{chat.text}</ChatBalloon>
+          </ChatWrapper>
+        </>
+      ) : (
+        <>
+          {noProfile ? (
+            <ProfileImage src={sender.profileImage} noImage={true} />
+          ) : (
+            <ProfileImage src={sender.profileImage} />
+          )}
+          <ContentWrapper>
+            {!noProfile && <div className="name">{sender.name}</div>}
+            <ChatWrapper>
+              <ChatBalloon isCurUser={false}>{chat.text}</ChatBalloon>
+              <div className="time">
+                {time}:{minute}
+              </div>
+            </ChatWrapper>
+          </ContentWrapper>
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ isCurUser: boolean; isMargin: boolean }>`
+  display: flex;
+  gap: 10px;
+  justify-content: ${({ isCurUser }: { isCurUser: boolean }) =>
+    isCurUser ? "flex-end" : "flex-start"};
+  width: 100%;
+  margin-top: ${({ isMargin }: { isMargin: boolean }) =>
+    isMargin ? "20px" : "0px"};
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const ChatWrapper = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  .time {
+    font-size: 8px;
+    color: grey;
+  }
+`;
+const ChatBalloon = styled.div`
+  background-color: ${({ isCurUser }: { isCurUser: boolean }) =>
+    isCurUser ? "yellow" : "white"};
+  padding: 10px;
+  border-radius: 5px;
+  word-break: break-all;
+`;
+
+export default ChatItem;

src/components/chatroom/ChatList.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+import styled from "styled-components";
+import { Chat, User } from "../../common/interface";
+import ChatItem from "./ChatItem";
+
+interface ChatListProps {
+  curUser: number;
+  chats: Chat[];
+  users: User[];
+}
+
+const ChatList = ({ curUser, chats, users }: ChatListProps) => {
+  // 채팅이 업데이트될 때마다 아래로 스크롤
+  const chatListRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    chatListRef.current?.scrollTo(0, chatListRef.current.scrollHeight);
+    console.log("스크롤!");
+  }, [chats]);
+
+  return (
+    <Wrapper ref={chatListRef}>
+      {chats.map((chat, idx) => (
+        <ChatItem
+          key={chat.id}
+          noProfile={idx !== 0 && chats[idx - 1].senderId === chat.senderId}
+          isCurUser={curUser === chat.senderId}
+          chat={chat}
+          sender={users[chat.senderId]}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  gap: 10px;
+  height: 65%;
+  overflow: auto;
+  background-color: powderblue;
+
+  /* 스크롤바 커스텀*/
+  ::-webkit-scrollbar {
+    width: 3px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: white;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-track {
+  }
+`;
+
+export default ChatList;