Feat/issue-29 (#38)

* Feat:FE디렉토리 구조

* Feat:FE 디렉토리 구조 추가 수정

* Chore : 더미 파일 명 수정

* Feat: 라우터 경로 설정

* Test: 임시 컴포넌트 테스트 페이지 생성

* Test: 임시 테스트 페이지 라우터 설정

* Feat : 채팅 상태관리 및 스켈레톤 코드 구현

* Feat: 채팅 입력시 날짜 표현

* Remove : 필요없는 상태 코드 삭제

* Test: 최근 데이터 불러오기 코드 작성 및 날짜 체크

* Feat: 더미데이터 시간 중복 표시 구현

* Rename: RecentChat -> ChatRecent 파일명 변경

* Feat: 시간 중복일때 마지막 메시지만 시간 표시

* Chore: Chat 파일명 분리

---------

Co-authored-by: eastfilmm <[email protected]>

frontend/src/App.tsx

@@ -1,35 +1,36 @@
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from "/vite.svg";
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import RootPage from './pages/RootPage';
+import WelcomePage from './pages/WelcomePage';
+import ErrorPage from './pages/ErrorPage';
+import ChattingListPage from './pages/ChattingListPage';
+import SignupPage from './pages/SignupPage';
+import SigninPage from './pages/SigninPage';
+import ChattingRoomPage from './pages/ChattingRoomPage';
+import TestPage from './test/TestPage';
 
+const router = createBrowserRouter([
+	{
+		path: '/',
+		element: <RootPage />,
+		id: 'root',
+		errorElement: <ErrorPage />,
+		children: [
+			{ index: true, element: <WelcomePage /> },
+			{ path: 'signin', element: <SigninPage /> },
+			{ path: 'signup', element: <SignupPage /> },
+			{ path: 'chattinglist', element: <ChattingListPage /> },
+			{ path: 'chatroom/:chatroom_id', element: <ChattingRoomPage /> },
+			{ path: 'test', element: <TestPage /> },
+		],
+	},
+]);
 
-function App() {
-	const [count, setCount] = useState(0);
-
+const App = () => {
 	return (
 		<>
-			<div>
-				<a href="https://vitejs.dev" target="_blank">
-					<img src={viteLogo} className="logo" alt="Vite logo" />
-				</a>
-				<a href="https://react.dev" target="_blank">
-					<img src={reactLogo} className="logo react" alt="React logo" />
-				</a>
-			</div>
-			<h1>Vite + React</h1>
-			<div className="card">
-				<button onClick={() => setCount((count) => count + 1)}>
-					count is {count}
-				</button>
-				<p>
-					Edit <code>src/App.tsx</code> and save to test HMR
-				</p>
-			</div>
-			<p className="read-the-docs">
-				Click on the Vite and React logos to learn more
-			</p>
+			<RouterProvider router={router} />
 		</>
 	);
-}
+};
 
 export default App;

frontend/src/components/chat/Chat.tsx

@@ -0,0 +1,55 @@
+import useChatStore from '../../stores/useChatStore';
+import { useEffect } from 'react';
+
+const formatTime = (createdAt: Date) => {
+	return createdAt.toLocaleTimeString('ko-KR', {
+		hour: '2-digit',
+		minute: '2-digit',
+		hour12: true,
+	});
+};
+
+const formatDate = (createdAt: Date) => {
+	return createdAt.toLocaleDateString('ko-KR', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+	});
+};
+
+const Chat: React.FC = () => {
+	const { messages } = useChatStore();
+
+	useEffect(() => {
+		console.log(messages);
+	}, [messages]);
+
+	return (
+		<>
+			<section>
+				{messages.map((message, index, array) => {
+					const isLastMessageForWriter =
+						index === array.length - 1 ||
+						array[index + 1].writer !== message.writer ||
+						formatTime(array[index + 1].createdAt) !==
+							formatTime(message.createdAt);
+
+					const shouldDisplayYear =
+						index === 0 ||
+						formatDate(message.createdAt) !==
+							formatDate(array[index - 1].createdAt);
+
+					return (
+						<div key={message.id}>
+							{shouldDisplayYear && <div>{formatDate(message.createdAt)}</div>}
+							<strong>{message.writer}: </strong> {message.message}{' '}
+							{isLastMessageForWriter && formatTime(message.createdAt)}
+						</div>
+					);
+				})}
+			</section>
+		</>
+	);
+};
+
+export default Chat;

frontend/src/components/chat/ChatForm.tsx

@@ -0,0 +1,31 @@
+import useChatStore from '../../stores/useChatStore';
+import Chat from './Chat';
+import ChatRecent from './ChatRecent';
+
+const ChatForm: React.FC = () => {
+	const { inputMessage, setInputMessage, handleSendMessage } = useChatStore();
+
+	return (
+		<>
+			<ChatRecent />
+			<Chat />
+			<div>
+				<input
+					type="text"
+					value={inputMessage}
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+						setInputMessage(e.target.value)
+					}
+					onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+						if (e.key === 'Enter') {
+							handleSendMessage();
+						}
+					}}
+					placeholder="채팅을 입력해주세요"
+				/>
+			</div>
+		</>
+	);
+};
+
+export default ChatForm;

frontend/src/components/chat/ChatRecent.tsx

@@ -0,0 +1,81 @@
+interface ChatMessage {
+	writer: string;
+	message: string;
+	createdAt: Date | string;
+}
+
+const DUMMY_DATA: ChatMessage[] = [
+	{
+		writer: '감자',
+		message: '헬로',
+		createdAt: '2023-12-31T23:57:59',
+	},
+	{
+		writer: '감자',
+		message: '점메추',
+		createdAt: '2023-12-31T23:57:59',
+	},
+	{
+		writer: '감자',
+		message: '점메추123',
+		createdAt: '2023-12-31T23:59:59',
+	},
+	{
+		writer: '고구마',
+		message: '헬로',
+		createdAt: '2023-12-31T23:59:59',
+	},
+	{
+		writer: '고구마',
+		message: '점메추',
+		createdAt: '2024-01-01T00:05:59',
+	},
+	{
+		writer: '고구마',
+		message: '점메추',
+		createdAt: '2024-01-01T00:07:59',
+	},
+];
+
+const RecentChat: React.FC = () => {
+	let currentFormattedDate = '';
+	return (
+		<>
+			{DUMMY_DATA.map((item, index, array) => {
+				const date = new Date(item.createdAt);
+
+				const formattedDate = date.toLocaleDateString('ko-KR', {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+				});
+
+				const formattedTime = date.toLocaleTimeString('ko-KR', {
+					hour: '2-digit',
+					minute: '2-digit',
+					hour12: true,
+				});
+
+				const isLastMessageForWriter =
+					index === array.length - 1 ||
+					array[index + 1].writer !== item.writer ||
+					array[index + 1].createdAt !== item.createdAt;
+
+				const shouldDisplayYear = formattedDate !== currentFormattedDate;
+
+				currentFormattedDate = formattedDate;
+
+				return (
+					<div key={index}>
+						{shouldDisplayYear && <div>{formattedDate}</div>}
+						<strong>{item.writer}: </strong> {item.message}{' '}
+						{isLastMessageForWriter && formattedTime}
+					</div>
+				);
+			})}
+			<div>---- 이전 채팅 기록입니다. ----</div>
+		</>
+	);
+};
+
+export default RecentChat;

frontend/src/components/chat/ChatRoom.tsx

@@ -0,0 +1,12 @@
+import ChatForm from './ChatForm';
+
+const ChatRoom: React.FC = () => {
+	return (
+		<div>
+			<header>채팅방</header>
+			<ChatForm />
+		</div>
+	);
+};
+
+export default ChatRoom;

frontend/src/pages/ChattingListPage.tsx

@@ -0,0 +1,5 @@
+const ChattingListPage = () => {
+	return <>It's ChattingListPage!</>;
+};
+
+export default ChattingListPage;

frontend/src/pages/ChattingRoomPage.tsx

@@ -0,0 +1,5 @@
+const ChattingRoomPage = () => {
+	return <>It's Chatting RoomPage!</>;
+};
+
+export default ChattingRoomPage;

frontend/src/pages/ErrorPage.tsx

@@ -0,0 +1,7 @@
+const ErrorPage = () => {
+    return(
+        <>It's ErrorPage!</>
+    )
+};
+
+export default ErrorPage;

frontend/src/pages/RootPage.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from 'react-router-dom';
+
+const RootPage = () => {
+	return <>
+
+        <main>
+            <Outlet/>
+        </main>
+    </>
+};
+
+export default RootPage;

frontend/src/pages/SigninPage.tsx

@@ -0,0 +1,7 @@
+const SigninPage = () => {
+    return(
+        <>It's SigninPage!</>
+    )
+};
+
+export default SigninPage;

frontend/src/pages/SignupPage.tsx

@@ -0,0 +1,5 @@
+const SignupPage = () => {
+    return <div>It's SignupPage!</div>;
+};
+
+export default SignupPage;

frontend/src/pages/WelcomePage.tsx

@@ -0,0 +1,7 @@
+const WelcomePage = () => {
+    return(
+        <>It's Home!</>
+    )
+};
+
+export default WelcomePage;