[4주차] 이은비 미션 제출합니다

package.json

@@ -3,12 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.7.1",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@types/react-redux": "^7.1.28",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.18.0",
+    "react-scripts": "latest_version",
+    "styled-components": "^6.0.8",
+    "styled-system": "^5.1.5",
+    "typescript": "^4.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/data/chatData.json

@@ -0,0 +1,53 @@
+[
+  {
+    "userId": 3,
+    "chatData": [
+      {
+        "userId": 4,
+        "isLike": false,
+        "chat": "밥 먹으러 가자",
+        "time": "17:22"
+      }
+    ]
+  },
+  {
+    "userId": 4,
+    "chatData": [
+      { "userId": 4, "isLike": false, "chat": "어디냐", "time": "15:00" },
+      { "userId": 0, "isLike": false, "chat": "집", "time": "15:40" },
+      { "userId": 4, "isLike": false, "chat": "중도가자", "time": "15:50" },
+      { "userId": 4, "isLike": false, "chat": "가자니까", "time": "15:50" }
+    ]
+  },
+  {
+    "userId": 5,
+    "chatData": [
+      { "userId": 5, "isLike": false, "chat": "과제안함?", "time": "18:00" },
+      { "userId": 0, "isLike": false, "chat": "할거야", "time": "18:50" },
+      { "userId": 5, "isLike": false, "chat": "언제", "time": "18:55" },
+      {
+        "userId": 0,
+        "isLike": false,
+        "chat": "어쩌라고 화나게하지마",
+        "time": "19:00"
+      },
+      {
+        "userId": 0,
+        "isLike": false,
+        "chat": "카피바라 보고싶다",
+        "time": "20:00"
+      }
+    ]
+  },
+  {
+    "userId": 6,
+    "chatData": [
+      {
+        "userId": 6,
+        "isLike": false,
+        "chat": "씨프 책 빌려주라",
+        "time": "06:22"
+      }
+    ]
+  }
+]

public/data/chatListData.json

@@ -0,0 +1,30 @@
+[
+  {
+    "userId": 3,
+    "userName": "변희민",
+    "latestMent": "밥 먹으러 가자",
+    "newNum": 1,
+    "latestTime": "17:22"
+  },
+  {
+    "userId": 4,
+    "userName": "장수화",
+    "latestMent": "가자니까",
+    "newNum": 2,
+    "latestTime": "13:22"
+  },
+  {
+    "userId": 5,
+    "userName": "이서현",
+    "latestMent": "카피바라 보고싶다",
+    "newNum": 0,
+    "latestTime": "06:22"
+  },
+  {
+    "userId": 6,
+    "userName": "이주원",
+    "latestMent": "씨프 책 빌려주라",
+    "newNum": 0,
+    "latestTime": "06:22"
+  }
+]

public/data/userData.json

@@ -0,0 +1,9 @@
+[
+  { "id": 0, "userName": "이은비", "comment": "프론트가 미래다" },
+  { "id": 1, "userName": "윤서윤", "comment": "디자인이 미래다" },
+  { "id": 2, "userName": "김미래", "comment": "내가 미래다" },
+  { "id": 3, "userName": "변희민", "comment": "막이래" },
+  { "id": 4, "userName": "장수화", "comment": "이걸 안마시네" },
+  { "id": 5, "userName": "이서현", "comment": "뭘 할 수 있는데" },
+  { "id": 6, "userName": "이주원", "comment": "겠냐고" }
+]

src/App.tsx

@@ -0,0 +1,35 @@
+import ChatRoom from './pages/ChatRoom';
+import ChatList from './pages/ChatList';
+import MyPage from './pages/MyPage';
+import FriendList from './pages/FriendList';
+import React from 'react';
+import styled from 'styled-components';
+import theme from './style/theme';
+import { Route, Routes } from 'react-router-dom';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<FriendList />} />
+      <Route path="/chatlist" element={<ChatList />} />
+      <Route path="/chatroom/:userId" element={<ChatRoom />} />
+      <Route path="/mypage" element={<MyPage />} />
+    </Routes>
+  );
+}
+
+const Box = styled.div`
+  width: 23.4375rem;
+  height: 50.75rem;
+  border-radius: 1rem;
+  background: var(--white, #fff);
+`;
+
+// const Wrapper = styled.div`
+//   width: 100%;
+//   height: 100%;
+//   display: flex;
+//   justify-content: center;
+// `;
+
+export default App;

src/components/ChatBox.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled from 'styled-components';
+import theme from '../style/theme';
+import ProfileSmallIcon from '../static/ProfileSmallIcon';
+
+// 채팅 박스의 입력 프로퍼티를 정의하는 인터페이스
+interface ChatBoxProps {
+  isMe: boolean;
+  isFirst: boolean;
+  text: string;
+  hasTail: boolean;
+  time: string;
+  user: string;
+}
+
+// ChatBoxProps를 사용하여 채팅 박스 컴포넌트를 정의
+const ChatBox: React.FC<ChatBoxProps> = ({
+  text,
+  hasTail,
+  isMe,
+  time,
+  isFirst,
+  user,
+}) => {
+  return (
+    <Wrapper>
+      {isMe && (
+        <MyBox>
+          <Time>{time}</Time>
+          <MyChat
+            style={
+              isFirst ? { borderRadius: '0.75rem  0rem 0.75rem 0.75rem' } : {}
+            }
+          >
+            {text}
+          </MyChat>
+        </MyBox>
+      )}
+      {!isMe && !isFirst && (
+        <YourBox>
+          <YourChat style={{ marginLeft: '45px' }}>{text}</YourChat>
+          <Time>{time}</Time>
+        </YourBox>
+      )}
+      {!isMe && isFirst && (
+        <YourBox>
+          <div style={{ width: '36px' }}>
+            <ProfileSmallIcon />
+          </div>
+
+          <div>
+            <UserName>{user}</UserName>
+            <YourChat style={{ borderRadius: '0rem 0.75rem 0.75rem 0.75rem' }}>
+              {text}
+            </YourChat>
+          </div>
+
+          <Time>{time}</Time>
+        </YourBox>
+      )}
+    </Wrapper>
+  );
+};
+
+const UserName = styled.div`
+  font-size: ${theme.fonts.caption1};
+  padding-bottom: 5px;
+  padding-top: 2px;
+`;
+
+const Time = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  font-size: ${theme.fonts.caption2};
+  color: ${theme.colors.g5};
+  padding: 5px;
+`;
+
+const commonStyles = `
+  padding: 0.5rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  display: inline-block; 
+`;
+
+const MyBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const YourBox = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+
+  font-size: ${theme.fonts.body2};
+`;
+const YourChat = styled.div`
+  ${commonStyles}
+  border-radius: 0.75rem;
+  background-color: ${theme.colors.g2};
+  overflow: hidden;
+  display: inline-block;
+  overflow-wrap: break-word;
+`;
+
+const MyChat = styled.div`
+  ${commonStyles}
+  border-radius: 0.75rem;
+  background-color: ${theme.colors.purple};
+  color: white;
+  display: inline-block;
+  overflow-wrap: break-word;
+`;
+
+const Wrapper = styled.div`
+  margin: 10px;
+`;
+
+export default ChatBox;