CEOS-Developers · silverain02 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
diff --git a/public/data/chatData.json b/public/data/chatData.json
@@ -0,0 +1,24 @@
+[
+  {
+    "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": 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"
+      }
+    ]
+  }
+]
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,7 +12,7 @@ function App() {
     <Routes>
       <Route path="/" element={<FriendList />} />
       <Route path="/chatlist" element={<ChatList />} />
-      {/* <Route path="/chatroom/:cid" element={<ChatRoom />} /> */}
+      <Route path="/chatroom/:userId" element={<ChatRoom />} />
       <Route path="/mypage" element={<MyPage />} />
     </Routes>
   );

diff --git a/src/components/ChatListBox.tsx b/src/components/ChatListBox.tsx
@@ -3,8 +3,11 @@ import styled from 'styled-components';
 import theme from '../style/theme';
 import ProfileSmallIcon from '../static/ProfileSmallIcon';
 import ProfileIcon from '../static/PropfileIcon';
+import { Route, Routes } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 interface ChatListBoxProps {
+  userId: number;
   userName: string;
   comment: string;
   newNum: number;
@@ -16,24 +19,30 @@ const ChatListBox: React.FC<ChatListBoxProps> = ({
   comment,
   newNum,
   latestTime,
+  userId,
 }) => {
   return (
-    <Wrapper>
-      <ProfileSmallIcon width={56} height={56} />
-      <RightWrapper>
-        <RightWrapperTop>
-          <SubText>{userName}</SubText>
-          <Caption>{latestTime}</Caption>
-        </RightWrapperTop>
-        <RightWrapperBottom>
-          <Caption>{comment}</Caption>
-          <NewNum>{newNum}</NewNum>
-        </RightWrapperBottom>
-      </RightWrapper>
-    </Wrapper>
+    <StyledLink to={`/chatroom/${userId}`}>
+      <Wrapper>
+        <ProfileSmallIcon width={56} height={56} />
+        <RightWrapper>
+          <RightWrapperTop>
+            <SubText>{userName}</SubText>
+            <Caption>{latestTime}</Caption>
+          </RightWrapperTop>
+          <RightWrapperBottom>
+            <Caption>{comment}</Caption>
+            <NewNum>{newNum}</NewNum>
+          </RightWrapperBottom>
+        </RightWrapper>
+      </Wrapper>
+    </StyledLink>
   );
 };
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
 const SubText = styled.div`
   font-style: ${theme.fonts.subText};
 `;
@@ -52,8 +61,8 @@ const NewNum = styled.div`
   font-style: ${theme.fonts.caption1};
   background-color: ${theme.colors.purple};
   border-radius: 99px;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
 `;
 const RightWrapperBottom = styled.div`
   display: flex;
@@ -77,7 +86,7 @@ const RightWrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   width: 80%;
-  gap: 5px;
+  gap: 7px;
 `;
 
 const Wrapper = styled.div`
@@ -86,6 +95,7 @@ const Wrapper = styled.div`
   justify-content: space-between;
   align-items: center;
   padding-left: 10px;
+  padding-right: 20px;
   padding-top: 1rem;
   padding-bottom: 1rem;
 

diff --git a/src/pages/ChatList.tsx b/src/pages/ChatList.tsx
@@ -39,6 +39,7 @@ const ChatList = () => {
       <Body>
         {chatData.map((it) => (
           <ChatListBox
+            userId={it.userId}
             userName={it.userName}
             latestTime={it.latestTime}
             comment={it.latestMent}

diff --git a/src/pages/ChatRoom.tsx b/src/pages/ChatRoom.tsx
@@ -6,108 +6,36 @@ import Header from '../components/Header';
 import ProfileSmallIcon from '../static/ProfileSmallIcon';
 import ChatInputBar from '../components/ChatInputBar';
 import { useEffect, useState, useRef } from 'react';
+import { useParams } from 'react-router-dom';
 
-interface UserInfo {
-  id: number;
+interface UserData {
+  id: string;
+  userName: string;
+  comment: string;
 }
 
-const ChatRoom: React.FC<UserInfo> = ({ id }) => {
-  const userIdArr: string[] = ['이은비', '윤서윤'];
-  const [userId, setUserId] = useState(id);
-  const [inputText, setInputText] = useState('');
-  const [isInputFocused, setInputFocused] = useState(false);
-
-  const bodyRef = React.useRef<HTMLDivElement | null>(null);
-
-  const initialData = JSON.parse(
-    localStorage.getItem('chatData') || '[]'
-  ) as any[];
-  const [chatData, setChatData] = useState<any[]>(initialData);
-
-  const handleHeaderClick = () => {
-    // id를 0과 1 사이에서 토글
-    setUserId((prevId) => (prevId === 0 ? 1 : 0));
-  };
-
-  // 날짜 형식을 지정하는 함수
-  const getCurrentDate = () => {
-    const now = new Date();
-    // const year = now.getFullYear();
-    // const month = String(now.getMonth() + 1).padStart(2, '0');
-    // const day = String(now.getDate()).padStart(2, '0');
-    const hours = String(now.getHours()).padStart(2, '0');
-    const minutes = String(now.getMinutes()).padStart(2, '0');
-    return `${hours}:${minutes}`;
-  };
+interface ChatData {
+  userId: string;
+  isLike: boolean;
+  chat: string;
+  time: string;
+}
 
-  //inputText변동시 chatData추가
+const ChatRoom = () => {
+  const { userId } = useParams();
+  const [userData, setUserData] = useState<UserData[]>([]);
   useEffect(() => {
-    const currentDate = getCurrentDate();
-    if (inputText.trim() !== '') {
-      setChatData((prevChatData) => {
-        if (prevChatData) {
-          return [
-            ...prevChatData,
-            {
-              userId: userId,
-              isLike: false,
-              chat: inputText,
-              time: currentDate,
-            },
-          ];
-        } else {
-          return [
-            {
-              userId: userId,
-              isLike: false,
-              chat: inputText,
-              time: currentDate,
-            },
-          ];
-        }
+    fetch('/data/userData.json')
+      .then((res) => res.json())
+      .then((result) => {
+        setUserData(result);
+        console.log(userData);
       });
-    }
-  }, [inputText]);
-
-  useEffect(() => {
-    if (isInputFocused && bodyRef.current) {
-      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
-    }
-  }, [isInputFocused]);
-
-  // chatData가 업데이트될 때마다 로컬 스토리지에 저장
-  useEffect(() => {
-    localStorage.setItem('chatData', JSON.stringify(chatData));
-  }, [chatData]);
+  }, []);
 
   return (
     <Wrapper>
-      <Header text={userIdArr[userId]} onClick={handleHeaderClick} />
-      <Body ref={bodyRef}>
-        {chatData.map((chatItem, index) => (
-          <ChatBox
-            text={chatItem.chat}
-            hasTail={false}
-            isMe={chatItem.userId === userId}
-            time={
-              index === 0 || chatData[index - 1].time !== chatItem.time
-                ? chatItem.time
-                : ''
-            }
-            isFirst={
-              index === 0 || chatData[index - 1].userId !== chatItem.userId
-            }
-            user={userIdArr[chatItem.userId]}
-          />
-        ))}
-      </Body>
-
-      <ChatInputBar
-        inputText={inputText}
-        setInputText={setInputText}
-        isInputFocused={isInputFocused}
-        setInputFocused={setInputFocused}
-      />
+      {userData.map((it) => it.id === userId && <div>{it.userName}</div>)}
     </Wrapper>
   );
 };