Merge pull request #55 from Dear-project/Feature/Chat-#43

Feature/chat #43
Dear-project · Oct 22, 2024 · cb2b582 · cb2b582
2 parents 998d66b + 7f2e49b
commit cb2b582
Show file tree

Hide file tree

Showing 32 changed files with 1,012 additions and 179 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@stomp/stompjs": "^7.0.0",
+    "@types/sockjs-client": "^1.5.4",
     "axios": "^1.7.2",
     "cookies-next": "^4.1.1",
     "dayjs": "^1.11.11",
@@ -27,6 +28,7 @@
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "slick-carousel": "^1.8.1",
+    "sockjs-client": "^1.6.1",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2",
     "sweetalert2": "^11.10.7"

diff --git a/src/app/detailed-information/personal-information/page.tsx b/src/app/detailed-information/personal-information/page.tsx
diff --git a/src/app/detailed-information/personal-information/style.ts b/src/app/detailed-information/personal-information/style.ts
@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+export const InformationContainer = styled.div`
+  min-width: 100px;
+  width: 100%;
+  height: 4800px;
+  @media screen and (min-width: 100px) {
+    font-size: 0.8rem;
+  }
+  @media screen and (min-width: 800px) {
+    font-size: 1.2rem;
+  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  row-gap: 15px;
+`;
+
+export const InformationHeadBox = styled.div`
+  width: 100%;
+  height: 100px;
+
+  display: flex;
+`;
+export const InformationLogo = styled.img`
+  width: 200px;
+  height: 100%;
+  margin-left: 50px;
+`;
+
+export const InformationContentContainer = styled.div`
+  width: 70%;
+
+  display: flex;
+  flex-direction: column;
+
+  row-gap: 20px;
+
+  margin-bottom: 50px;
+`;
+
+export const InformationTitle = styled.h1`
+  font-size: 30px;
+`;
+
+export const InformationContent = styled.p`
+  line-height: 25px;
+`;
+
+export const InformationBtn = styled.button`
+  position: fixed;
+  width: 105px;
+  height: 40px;
+  background: #fece23;
+  color: #fff;
+  border-radius: 100px;
+  border: none;
+  right: 20px;
+  bottom: 20px;
+  cursor: pointer;
+
+  &:hover {
+    transition: 1s;
+    background-color: black;
+    color: white;
+  }
+`;
+
+export const InformationImg = styled.img`
+  width: 100%;
+  min-height: 200px;
+`;
+export const InformationLinkBtn = styled.div`
+  font-size: 30px;
+
+  color: #000;
+  &:hover {
+    transition: 0.5s;
+    color: #fece23;
+  }
+`;
+
+export const NullState = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100px;
+`;
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/main/style.ts b/src/app/main/style.ts
@@ -29,6 +29,7 @@ export const MainView = styled.div`
 export const MainBox = styled.div`
   display: flex;
   width: 100%;
+  height: 300px;
   align-items: center;
   justify-content: space-around;
 

diff --git a/src/components/common/selectModal/index.tsx b/src/components/common/selectModal/index.tsx
@@ -15,6 +15,7 @@ interface SelectModalProps {
 
 const SelectModal = ({isOpen,sectionLocation}:SelectModalProps)=>{   
   const {section, ...select}= useSelectModal();
+
   useEffect(() => {
     if (sectionLocation === "second") {
       select.setSection("second");

diff --git a/src/components/home/banner/style.ts b/src/components/home/banner/style.ts
@@ -9,7 +9,6 @@ export const BannerContainer = styled.div`
   position: relative;
   overflow: hidden;
   display: flex;
-
   .slick-initialized {
     width: 100%;
   }

diff --git a/src/components/home/chat/chatRoom/index.tsx b/src/components/home/chat/chatRoom/index.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import * as S from "./style";
+import { ChatData } from "@/types/chat/chat.type";
+interface ChatRoomProps {
+  selectedChat: ChatData; 
+  messages: any[]; 
+  newMessage: string;
+  setNewMessage: (value: string) => void;
+  sendMessage: () => void;
+}
+
+const ChatRoom = ({ selectedChat, messages, newMessage, setNewMessage, sendMessage }:ChatRoomProps) => {
+
+
+  return (
+    <S.ChatRoom>
+        <S.ChatRoomHeader><h2>{selectedChat.chatName}</h2></S.ChatRoomHeader>
+      <S.ChatRoomContainer>
+        <S.OpponentMessageList>
+        {messages.map((msg, index) => (
+          <p key={index}>{msg.content}</p>
+        ))}
+        </S.OpponentMessageList>
+        <S.MyMessageList>
+
+        </S.MyMessageList>
+      </S.ChatRoomContainer>
+      <S.MessageInputContainer>
+        <input
+          type="text"
+          value={newMessage}
+          onChange={(e) => setNewMessage(e.target.value)}
+          placeholder="메시지를 입력하세요"
+        />
+        <button onClick={sendMessage}>전송</button>
+      </S.MessageInputContainer>
+    </S.ChatRoom>
+  );
+};
+
+export default ChatRoom;
diff --git a/src/components/home/chat/chatRoom/style.ts b/src/components/home/chat/chatRoom/style.ts
@@ -0,0 +1,74 @@
+import styled from "styled-components";
+import {theme} from "@/styles/theme";
+export const ChatRoom = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  background-color: ${theme.colors.gray100};
+`;
+export const ChatRoomHeader = styled.div`
+height: 5%;
+border-bottom: 1px solid ${theme.colors.gray300};
+background:${theme.colors.white};
+border-radius: 0 10px;
+padding: 20px;
+`
+export const ChatRoomContainer = styled.div`
+display: flex;
+width: 100%;
+height: 100%;
+
+`
+export const OpponentMessageList = styled.div`
+display: flex;
+flex-direction: column;
+gap:60px;
+width: 50%;
+height: 100%;
+`
+export const MyMessageList = styled.div`
+display: flex;
+flex-direction: column;
+gap:60px;
+width: 50%;
+height: 100%;
+`
+export const ChatPlaceholder = styled.div`
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+  color: #888;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+`;
+
+export const MessageInputContainer = styled.div`
+  display: flex;
+  margin-top: 20px;
+
+  input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-right: 10px;
+  }
+
+  button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 5px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+`;
diff --git a/src/components/home/chat/chatSidebar/chatItem/index.tsx b/src/components/home/chat/chatSidebar/chatItem/index.tsx
@@ -1,34 +1,42 @@
+'use Client'
 import * as S from "./style";
 import Profile from "@/asset/img/Avatar.svg";
 import Image from "next/image";
 import { ChatData } from "@/types/chat/chat.type";
 
 interface ChatItemProps {
-  chatData?: ChatData[];
-  setSelectedChat: (chat: ChatData) => void; 
+  chat: ChatData;
+  setSelectedChat: (chat: ChatData | null) => void; 
+  isSelected: boolean; 
 }
 
-const ChatItem = ({ chatData, setSelectedChat }: ChatItemProps) => {
+const ChatItem = ({ chat, setSelectedChat ,isSelected}: ChatItemProps) => {
+  const handleClick = () => {
+    if (isSelected) {
+      setSelectedChat(null);
+    } else {
+      setSelectedChat(chat); 
+    }
+  };
   return (
-    <S.chatList>
-      {chatData?.map((chat: ChatData) => (
-        <S.chatItem key={chat.data.id} onClick={() => setSelectedChat(chat)}> {/* Handle click */}
-          <Image src={Profile} alt="프로필" />
-          <S.chatDetail>
-            <S.chatTitle>
-              <span>{chat.data.chatName}</span>
-              <p>박승철 헤어디자인과</p>
-            </S.chatTitle>
-            <S.content>
-              <span>{chat.data.lastMessage}</span>
-            </S.content>
-          </S.chatDetail>
-          <S.timeDetail>
-            <span>{new Date(chat.data.lastMessageTimeStamp).toLocaleTimeString()}</span>
-          </S.timeDetail>
-        </S.chatItem>
-      ))}
-    </S.chatList>
+    <S.chatItem 
+    onClick={handleClick} 
+    isSelected={isSelected} 
+  >
+      <Image src={Profile} alt="프로필" width={35} height={35}/>
+      <S.chatDetail>
+        <S.chatTitle>
+          <span>{chat.chatName}</span>
+          <p>박승철 헤어디자인과</p>
+        </S.chatTitle>
+        <S.content>
+          <span>{chat.lastMessage}</span>
+        </S.content>
+      </S.chatDetail>
+      <S.timeDetail>
+        <span>{new Date(chat.lastMessageTimeStamp).toLocaleTimeString()}</span>
+      </S.timeDetail>
+    </S.chatItem>
   );
 };
 

diff --git a/src/components/home/chat/chatSidebar/chatItem/style.ts b/src/components/home/chat/chatSidebar/chatItem/style.ts
@@ -1,29 +1,27 @@
 import styled from "styled-components";
 import { theme } from "@/styles/theme";
 
-export const chatList  = styled.div`
-display: flex;
-flex-direction: column;
-height: 100%;
-padding: 10px;
-gap: 10px;
-`
-export const chatItem = styled.div`
-display: flex;
-width: 281px;
-height: 67px;
-justify-content: space-around;
-align-items: center;
-img{
-    width: 50px;
-    height: 50px;
-}
 
-`
+export const chatItem = styled.div<{ isSelected: boolean }>`
+  display: flex;
+  align-items: center;
+  padding: 20px 10px;
+  background-color: ${({ isSelected }) => (isSelected ? "#f0f0f0" : "#fff")}; // 선택된 경우 배경색 변경
+  cursor: pointer;
+  border-radius: 8px;
+  margin-bottom: 8px;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+`;
+
 export const chatDetail = styled.div`
     display: flex;  
     flex-direction: column;
     height: 100%;
+    width: 200px;
+    margin-left: 10px;
     justify-content: space-evenly;
     img{
     width: 40px;
@@ -49,11 +47,16 @@ gap: 5px;
 `
 export const timeDetail = styled.div`
     display: flex;
+    position: relative;
+    width: 90px;
     height: 100%;
+    text-align: center;
     
     span{
-        padding: 0.9rem;
-        font-size: 13px;
+        position: absolute;
+        top: 4px;
+        left: 0px;
+        font-size: 10px;
         font-weight: ${theme.fontWeight.medium};
     }
 `