Merge pull request #46 from Hanjuri/feature/#15

✨ Feature:  채팅방 구현 및 헤더 수정

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  }
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "notebook.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -16,7 +16,7 @@
     "axios": "^1.7.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.26.0",
+    "react-router-dom": "^6.26.1",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/App.jsx

@@ -1,11 +1,25 @@
+import { useState } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  Link,
+  useLocation,
+} from "react-router-dom";
+import Header from "./components/Common/Header";
+import HomeMain from "./pages/homepages/HomeMain";
 import GlobalStyle from "./components/Common/GlobalStyle";
 import { PeopleListPage } from "./pages/PeopleListPage";
+import ChatPage from "./pages/chat/ChatPage";
+
 function App() {
   return (
-    <>
-      <GlobalStyle />
-      <PeopleListPage></PeopleListPage>
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomeMain />}></Route>
+        <Route path="/chat" element={<ChatPage />}></Route>
+      </Routes>
+    </Router>
   );
 }
 

src/components/Common/Header.jsx

@@ -6,17 +6,19 @@ import peoplelogo from "../../assets/images/peoplelogo.png";
 function Header() {
   return (
     <styles.HeaderContainer>
-      <styles.LogoWrapper>
-        <styles.Logo src={logo} alt="Logo" />
-        <styles.ServiceName>카부카부</styles.ServiceName>
-      </styles.LogoWrapper>
+      <styles.HeaderSubContainer>
+        <styles.LogoWrapper>
+          <styles.Logo src={logo} alt="Logo" />
+          <styles.ServiceName>카부커넥션</styles.ServiceName>
+        </styles.LogoWrapper>
 
-      <styles.NavBar>
-        <styles.NavItem href="/">카부 게시판</styles.NavItem>
-        <styles.NavItem href="#about">카부 프로젝트</styles.NavItem>
-        <styles.NavItem href="#services">카부 편의</styles.NavItem>
-        <styles.NavItem href="#contact">카부 커넥션</styles.NavItem>
-      </styles.NavBar>
+        <styles.NavBar>
+          <styles.NavItem href="/">카부 게시판</styles.NavItem>
+          <styles.NavItem href="#about">카부 프로젝트</styles.NavItem>
+          <styles.NavItem href="#services">카부 편의</styles.NavItem>
+          <styles.NavItem href="/chat">카부 커넥션</styles.NavItem>
+        </styles.NavBar>
+      </styles.HeaderSubContainer>
       <styles.PeopleLogoWrapper>
         <styles.PeopleLogo src={peoplelogo} />
       </styles.PeopleLogoWrapper>

src/components/Common/Header.styled.js

@@ -5,27 +5,34 @@ import { css } from "@emotion/react";
 export const HeaderContainer = styled.header`
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  background-color: rgb(255, 255, 255, 0.5);
+  justify-content: center;
+  background-color: rgb(255, 255, 255, 0.5)
   color: white;
-  width: 100%;
-  height: 100px;
+  width: 100vw;
+  height: 150px;
   backdrop-filter: blur(10px);
 `;
+export const HeaderSubContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 90%;
+  height: 100%;
+`;
 
 export const Logo = styled.img`
-  height: 55px;
+  height: 100px;
 `;
 export const LogoWrapper = styled.div`
-  width: 200px;
+  width: 300px;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 `;
 
 export const ServiceName = styled.h1`
-  font-size: 30px;
+  font-size: 35px;
   font-weight: bold;
   color: black;
   margin-left: 10px;
@@ -35,13 +42,14 @@ export const NavBar = styled.nav`
   display: flex;
   gap: 20px;
   margin-left: 40px;
+  width: 400px;
 `;
 
 export const NavItem = styled.a`
   color: #715f00;
   text-decoration: none;
-  font-size: 15px;
-  font-weight: 500;
+  font-size: 17px;
+  font-weight: 600;
 
   &:hover {
     text-decoration: underline;
@@ -61,7 +69,6 @@ export const PeopleLogoWrapper = styled.button`
   align-items: center;
   width: 40px;
   height: 100%;
-  margin-left: 630px;
   border: none;
   background-color: transparent; /* 배경 색상 제거 */
 

src/components/Common/Layout.jsx

@@ -7,7 +7,7 @@ import { LayoutContainer, MainContent } from "./Layout.styled";
 const Layout = ({ children }) => {
   return (
     <>
-      <Background />
+      <Background></Background>
       <LayoutContainer>
         <Header />
         <MainContent>{children}</MainContent>

src/index.css

@@ -0,0 +1,33 @@
+/* 
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 200%;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: aqua;
+}
+
+
+#root, #app {
+  height: 100%;
+  width: 200%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: red;
+}
+*/
+
+/* 전체 화면을 채우는 컨테이너 설정  
+.container {
+  width: 100%;
+  height: 200vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: blanchedalmond;
+} */

src/pages/Homepage/HomePage.jsx

@@ -1,13 +1,13 @@
 import React from "react";
 import Layout from "../../components/Common/Layout";
-
+import ChatMain from "../../pages/chat/ChatMain";
 function HomePage() {
   return (
-    <Layout>
-      <h1>햄스터</h1>
+    <Layout children={ChatMain}>
       <h1>햄스터</h1>
       <h1>햄스터</h1>
       <h1>햄스터</h1>
+      <h1>햄스터22</h1>
     </Layout>
   );
 }

src/pages/chat/ChatList.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import * as styles from "./styled/ChatList.styled";
+import smile from "../../assets/images/smiles.png";
+const ChatList = (props) => {
+  const truncatedContent =
+    props.content.length > 20
+      ? `${props.content.slice(0, 15)}...`
+      : props.content;
+
+  return (
+    <styles.TotalWrapper>
+      <styles.ContentWrapper>
+        <styles.ProfileWrapper>
+          <styles.Profile src={smile}></styles.Profile>
+        </styles.ProfileWrapper>
+        <styles.NameContentWrapper>
+          <styles.UserName>{props.name}</styles.UserName>
+          <styles.TalkContent>{truncatedContent}</styles.TalkContent>
+        </styles.NameContentWrapper>
+      </styles.ContentWrapper>
+      <styles.TimeAlramWrapper>
+        <styles.Time>{props.time}</styles.Time>
+        <styles.AlramWrapper>
+          <styles.Alram>{props.alramcount}</styles.Alram>
+        </styles.AlramWrapper>
+      </styles.TimeAlramWrapper>
+    </styles.TotalWrapper>
+  );
+};
+
+export default ChatList;

src/pages/chat/ChatMain.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import * as styles from "./styled/ChatMain.styled";
+import ChatRoom from "./ChatRoom";
+import ChatList from "./ChatList";
+import Layout from "../../components/Common/Layout";
+
+function ChatMain() {
+  return (
+    <styles.TotalWrapper>
+      <styles.TitleWrapper>
+        <styles.Title>첫 커넥션</styles.Title>
+      </styles.TitleWrapper>
+      <styles.ChatWrapper>
+        <styles.LeftWrapper>
+          <ChatList
+            name="celina.jung"
+            content="동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세"
+            time="오후 9시 30분"
+            alramcount={3}
+          />
+          <ChatList
+            name="celina.jung"
+            content="동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세"
+            time="오후 9시 30분"
+            alramcount={3}
+          />
+          <ChatList
+            name="celina.jung"
+            content="동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세"
+            time="오후 9시 30분"
+            alramcount={3}
+          />
+        </styles.LeftWrapper>
+        <styles.RightWrapper>
+          <ChatRoom name="celina.jung" />
+        </styles.RightWrapper>
+      </styles.ChatWrapper>
+    </styles.TotalWrapper>
+  );
+}
+
+export default ChatMain;