+
+ );
+};
+
+export default ChatRoomHeader;
diff --git a/src/components/ChatItem.tsx b/src/components/ChatItem.tsx
new file mode 100644
index 00000000..d184961b
--- /dev/null
+++ b/src/components/ChatItem.tsx
@@ -0,0 +1,37 @@
+import { useQuery } from "react-query";
+import { Message, User } from "../pages/ChatRoom";
+import { fetchUsers } from "../api";
+import { useNavigate } from "react-router-dom";
+
+const ChatItem = ({ sender, text, chatRoomId, receiver }: Message) => {
+ const { isLoading, data = [] } = useQuery("messageUser", fetchUsers);
+ const nav = useNavigate();
+
+ const findProfilePic = (): User =>
+ data.find((userInfo: User) => userInfo.name === sender);
+ //filter와 map의 차이 map은 전체 배열을 수정해서 새롭게 만들고
+ //filter는 그중에서 찾음
+ const getProfilePic = findProfilePic()?.profilePic;
+
+ const onClick = () => {
+ nav(`/chat-room/${chatRoomId}`, { state: { chatRoomId: chatRoomId } });
+ };
+
+ return (
+
+
+
+ {/* 프로필 이미지 */}
+ 
+
+ {/* 사용자 이름 */}
+
+
+ {/* 오른쪽 아이콘 */}
+
+
+ + {user.name} +
+
+
+
+
+
+
+
+ );
+};
+
+export default ChatItem;
diff --git a/src/components/FriendsList.tsx b/src/components/FriendsList.tsx
new file mode 100644
index 00000000..4939c545
--- /dev/null
+++ b/src/components/FriendsList.tsx
@@ -0,0 +1,37 @@
+import { User } from "../pages/ChatRoom";
+
+const FriendsList = ({
+ data,
+ profileOnClick,
+}: {
+ data: User[];
+ profileOnClick: (index: number) => void;
+}) => {
+ //data는 query에서 불러옴
+
+ return (
+
+ {!isLoading && (
+ 
+ )}
+
+
+
+
+ {sender === "김류원" ? receiver : sender}
+
+ {text}
+
+ {/*최상위 JSX */}
+ {data.slice(1).map((user, index) => {
+ return (
+
+ );
+};
+
+export default FriendsList;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..6a5bdac0
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,38 @@
+import personPlus from "../assets/person_plus.svg";
+import setting from "../assets/setting.svg";
+import video from "../assets/video.svg";
+import search from "../assets/search.svg";
+import { useMatch } from "react-router-dom";
+
+const Header = () => {
+ const match = useMatch("/");
+
+ return (
+ profileOnClick(index + 1)}
+ >
+ 
+
+ );
+ })}
+
+
+ {user.name}
+ {user.description}
+
+
+ );
+};
+
+export default Header;
diff --git a/src/components/MessageInput.tsx b/src/components/MessageInput.tsx
new file mode 100644
index 00000000..f9beacc6
--- /dev/null
+++ b/src/components/MessageInput.tsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import styled, { keyframes } from "styled-components";
+import plus from "../assets/plus.svg";
+import smile from "../assets/smile.svg";
+import thumb_up from "../assets/thumb_up.svg";
+import sendIcon from "../assets/send.svg";
+
+interface MessageInputProps {
+ onSendMessage: (message: string) => void;
+ isProfileDetailOpen: boolean;
+}
+
+const MessageInput: React.FC
+ {match ? "친구" : "채팅"}
+
+
+ {/* 오른쪽 아이콘 */}
+
+
+ {match ? (
+
+ ) : null}
+
+
+
+
+ ) => {
+ setMessage(e.target.value);
+ setIsInputClicked(true);
+ }}
+ onKeyUp={handleKeyUp}
+ onFocus={() => setIsInputClicked(true)}
+ className="flex-1 w-[255px] h-[34px] px-[16px] py-[7px] border focus:outline-none"
+ style={{ borderRadius: "60px", backgroundColor: "#F0F2F3" }}
+ placeholder="Aa"
+ />
+ 
+
+
+ );
+};
+
+export default MessageInput;
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
new file mode 100644
index 00000000..0451d985
--- /dev/null
+++ b/src/components/MessageList.tsx
@@ -0,0 +1,177 @@
+import styled, { keyframes } from "styled-components";
+import React, { useState, useEffect } from "react";
+import { Message } from "../pages/ChatRoom";
+
+// interface Message {
+// id: string | number;
+// sender: string;
+// text: string;
+// time: string | number | Date;
+// }
+
+interface User {
+ name: string;
+}
+
+interface MessageListProps {
+ messages: Message[];
+ currentUser: User;
+ messageData: Message[];
+ setMessages: React.Dispatch
+ {messages.map((message, index) => {
+ const messageDate = formatDate(message.time);
+ const showDate = messageDate !== previousDate;
+ previousDate = messageDate;
+
+ return (
+
+ );
+};
+
+const DateTimeText = styled.div<{ isCurrentUser: boolean }>`
+ text-align: center;
+ font-size: 12px;
+ color: #737373;
+ margin: 20px 0;
+ white-space: nowrap;
+`;
+
+const MessageContainer = styled.div<{ isCurrentUser: boolean }>`
+ display: flex;
+ justify-content: ${(props) =>
+ props.isCurrentUser ? "flex-end" : "flex-start"};
+ margin-bottom: 16px;
+ animation: ${fadeIn} 0.3s ease-in-out;
+`;
+
+const MessageContent = styled.div`
+ display: flex;
+ align-items: center;
+ word-break: break-all;
+`;
+
+const MessageText = styled.div<{ isCurrentUser: boolean }>`
+ background-color: ${(props) => (props.isCurrentUser ? "#0A7CFF" : "#F0F2F3")};
+ color: ${(props) => (props.isCurrentUser ? "white" : "#333")};
+ padding: 8px 16px;
+ border-radius: 20px;
+ font-family: Pretendard;
+ font-size: 15px;
+ font-weight: 400;
+ line-height: 20px;
+ margin-bottom: 4px;
+ display: inline-block;
+`;
+
+const TimeText = styled.span<{ isCurrentUser: boolean }>`
+ font-size: 12px;
+ color: #b4b8bc;
+ margin-left: ${(props) => (props.isCurrentUser ? "0" : "4px")};
+ margin-right: ${(props) => (props.isCurrentUser ? "4px" : "0")};
+ align-self: flex-end;
+`;
+
+export default MessageList;
diff --git a/src/components/ProfileInfo.tsx b/src/components/ProfileInfo.tsx
new file mode 100644
index 00000000..186c1bbc
--- /dev/null
+++ b/src/components/ProfileInfo.tsx
@@ -0,0 +1,56 @@
+interface User {
+ name: string;
+ profilePic: string;
+}
+
+interface ProfileInfoProps {
+ user: User;
+ onProfileDetail: () => void;
+}
+
+const ProfileInfo: React.FC
+ {showDate && (
+
+ {formatDateTime(message.time)}
+
+ )}
+
+ {message.sender !== currentUser.name && (
+ })
+ )}
+
+
+ {message.sender === currentUser.name ? (
+ <>
+
+ {formatTime(message.time)}
+
+
+ {message.text}
+
+
+ ) : (
+ <>
+
+ {message.text}
+
+
+ {formatTime(message.time)}
+
+
+ )}
+
+
+
+ );
+ })}
+ 사용자 정보가 없습니다.
; + } + + return ( +
+
+ );
+};
+
+export default ProfileInfo;
diff --git a/src/index.css b/src/index.css
index ec2585e8..5b15d903 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+ font-family: "Pretendard";
}
diff --git a/src/index.tsx b/src/index.tsx
index d10be77d..989e4a45 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
+import { RecoilRoot } from "recoil";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+
+import { QueryClient, QueryClientProvider } from "react-query";
+
+const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
- document.getElementById('root') as HTMLElement
+ document.getElementById("root") as HTMLElement
);
root.render(
-
+ {/* 프로필 이미지 */}
+
+
+ {/* 사용자 이름 */}
+
+ + {user.name} +
+ + {/* 추가 정보 */} ++ Facebook 친구입니다 +
++ 서울특별시 마포 거주 +
+ + {/* 프로필 보기 버튼 */} + +
+
+ );
+};
+
+export default ChatList;
diff --git a/src/pages/ChatRoom.tsx b/src/pages/ChatRoom.tsx
new file mode 100644
index 00000000..d5f2ee10
--- /dev/null
+++ b/src/pages/ChatRoom.tsx
@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useRef } from "react";
+import MessageList from "../components/MessageList";
+import MessageInput from "../components/MessageInput";
+import ProfileInfo from "../components/ProfileInfo";
+import CHeader from "../components/CHeader";
+import ProfileDetail from "../pages/ProfileDetail";
+import { useQuery } from "react-query";
+import { fetchMessages, fetchUsers } from "../api";
+import { useLocation, useParams } from "react-router-dom";
+
+export interface User {
+ id: number;
+ name: string;
+ profilePic: string;
+ facebook: string;
+ instagram: string;
+ description?: string;
+}
+
+export interface Message {
+ id: number;
+ text: string;
+ sender: string;
+ receiver: string;
+ time: string;
+ chatRoomId: string;
+}
+
+const ChatRoom: React.FC = () => {
+ const { isLoading: messageLoading, data: messageData = [] } = useQuery<
+ Message[]
+ >("chat-message", fetchMessages);
+ const { isLoading: userLoading, data: userData = [] } = useQuery로딩중
+ ) : (
+
+
+ );
+};
+
+export default ChatRoom;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 00000000..60ee4d56
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,81 @@
+import Header from "../components/Header";
+import { useQuery } from "react-query";
+import { fetchUsers } from "../api";
+import { User } from "./ChatRoom";
+import FriendsList from "../components/FriendsList";
+import { useState } from "react";
+import ProfileDetail from "./ProfileDetail";
+
+const Home = () => {
+ const { isLoading, data = [] } = useQuery
+
+
+
+ )}
+
+
+ );
+};
+
+export default Home;
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
new file mode 100644
index 00000000..d00c42c1
--- /dev/null
+++ b/src/pages/NotFound.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+ return 로딩중
+ ) : (
+
+ {/* 사용자 프로필 */}
+
+ )}
+ {/* 프로필 상세 보기 */}
+ {isProfileDetailOpen && (
+ profileOnClick(0)}
+ >
+ 
+
+ {/* 활동 상태 */}
+
+
+ {data[0].name}
+
+
+ {/* 친구 목록 */}
+ 활동 상태
+
+ {data.slice(1).map((item, i) => (
+
+
+
+ ))}
+
+ 
+
+
+ {item.name}
+
+
+ + 친구 {data.length} +
+
+
+ )}
+ 잘못된 경로입니다!
;
+};
+
+export default NotFound;
diff --git a/src/pages/ProfileDetail.tsx b/src/pages/ProfileDetail.tsx
new file mode 100644
index 00000000..011d87d2
--- /dev/null
+++ b/src/pages/ProfileDetail.tsx
@@ -0,0 +1,89 @@
+import cancel from "../assets/cancel.svg";
+import settings from "../assets/setting.svg";
+import facebook from "../assets/profile_facebook.svg";
+import instagram from "../assets/profile_insta.svg";
+import plus from "../assets/profile_plus.svg";
+import edit from "../assets/edit.svg";
+import { useMatch, useNavigate } from "react-router-dom";
+
+interface User {
+ name: string;
+ profilePic: string;
+ facebook: string;
+ instagram: string;
+}
+
+interface ProfileDetailProps {
+ user: User;
+ onClose: () => void;
+}
+
+const ProfileDetail: React.FC
+
+ );
+};
+
+export default ProfileDetail;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..ecf62b50
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
+
+
+
+
+
+
+
+
+ {user.name}
+ +
+
+
+
+
+
+