((profileRef.current as HTMLDivElement[])[idx] = el as HTMLDivElement)} data-id={idx}>
-
+
{children}
diff --git a/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx
index 0021469b..feaf6134 100644
--- a/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx
+++ b/client/src/Component/Molecules/Chat/ChatInput/ChatInput.hook.tsx
@@ -1,6 +1,6 @@
-import { postChat } from "@Util/data";
import { ChangeEvent, ChangeEventHandler, useRef } from "react";
-import ClientSocket from "Socket";
+import { postChat } from "@Common/api";
+import ClientSocket from "@Socket/.";
type chatRoomInfo = {
uid: string;
diff --git a/client/src/Component/Molecules/Chat/ChatProfileInfoContainer.tsx b/client/src/Component/Molecules/Chat/ChatProfileInfoContainer.tsx
index 9cf7bd6a..87bb4396 100644
--- a/client/src/Component/Molecules/Chat/ChatProfileInfoContainer.tsx
+++ b/client/src/Component/Molecules/Chat/ChatProfileInfoContainer.tsx
@@ -1,6 +1,19 @@
import React from "react";
import { css } from "@emotion/react";
-import { ChatListInfoType } from "@Util/type";
+
+type ChatListInfoType = {
+ lastChat: string;
+ from: string;
+};
+
+export const ChatProfileInfoContainer = ({ lastChat, from }: ChatListInfoType) => {
+ return (
+
+ );
+};
const ChatProfileInfoContainerStyle = css`
width: 50%;
@@ -15,12 +28,3 @@ const ChatProfileTextStyle = css`
font-size: 20px;
font-weight: bold;
`;
-
-export const ChatProfileInfoContainer = ({ lastChat, from }: ChatListInfoType) => {
- return (
-
- );
-};
diff --git a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx
index 122577bc..df9e7b25 100644
--- a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx
+++ b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.hook.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useRef } from "react";
-import { IWebRTCUser } from "@Util/type";
-import ClientSocket from "Socket";
-import { getSenderAnswerEvent, getSenderCandidateEvent, getReceiverAnswerEvent, getReceiverCandidateEvent, allUsersEvent, userEnterEvent, userExitEvent } from "Socket/util";
-import { getLocalStream } from "Socket/webRTC";
+import { IWebRTCUser } from "@Common/type";
+import ClientSocket from "@Socket/.";
+import { getSenderAnswerEvent, getSenderCandidateEvent, getReceiverAnswerEvent, getReceiverCandidateEvent, allUsersEvent, userEnterEvent, userExitEvent } from "@Socket/util";
+import { getLocalStream } from "@Socket/webRTC";
type userType = {
users: IWebRTCUser[];
diff --git a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx
index 6d41c4fe..979e9b4e 100644
--- a/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx
+++ b/client/src/Component/Molecules/Chat/ChatRoomBasic/ChatRoomBasic.tsx
@@ -3,7 +3,7 @@ import { useRecoilValue } from "recoil";
// import { Socket } from "socket.io-client";
import { css } from "@emotion/react";
import { Video, Button } from "@Atom/.";
-import { IWebRTCUser } from "@Util/type";
+import { IWebRTCUser } from "@Common/type";
import { userChatRoomInfo } from "@Recoil/ChatData";
import ClientSocket from "../../../../Socket";
import { useVideoSocketEvent } from "./ChatRoomBasic.hook";
diff --git a/client/src/Component/Molecules/Chat/Chats.tsx b/client/src/Component/Molecules/Chat/Chats.tsx
index dd34a89f..27ec6851 100644
--- a/client/src/Component/Molecules/Chat/Chats.tsx
+++ b/client/src/Component/Molecules/Chat/Chats.tsx
@@ -1,13 +1,17 @@
import React from "react";
import { Chat } from "@Atom/.";
-import { MessageType } from "@Util/type";
+import { MessageType } from "@Common/type";
+import { userState } from "@Recoil/UserData";
+import { useRecoilValue } from "recoil";
export const Chats = ({ chats }: { chats: MessageType[] }) => {
+ const { id: myId } = useRecoilValue(userState);
return (
<>
{chats?.map((chat, i) => {
const { from, message, source } = chat;
- return
;
+ const type = from === myId ? "Mine" : "Other";
+ return
;
})}
);
diff --git a/client/src/Component/Molecules/Chat/NotReadNum.tsx b/client/src/Component/Molecules/Chat/NotReadNum.tsx
deleted file mode 100644
index 144ecbaa..00000000
--- a/client/src/Component/Molecules/Chat/NotReadNum.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useRecoilValue } from "recoil";
-import { joinChatRoomState } from "@Recoil/ChatData";
-import { RoundNumberContainer } from "@Atom/.";
-import { joinChatType } from "@Util/type";
-
-export const NotReadNum = ({ type }: { type: string }) => {
- const datas = useRecoilValue(joinChatRoomState);
- const notReadNum = countNotReadNum(datas, type);
- return
;
-};
-
-function countNotReadNum(datas: joinChatType[], type: string) {
- if (type === "Total") return datas.reduce((acc, cur) => acc + cur.notReadNum, 0);
- return datas.filter((data) => data.chatRoomId === Number(type))[0].notReadNum;
-}
diff --git a/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.hook.tsx b/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.hook.tsx
new file mode 100644
index 00000000..0fe0152f
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.hook.tsx
@@ -0,0 +1,14 @@
+import { joinChatType } from "@Common/type";
+import { joinChatRoomSelector } from "@Recoil/ChatData";
+import { useRecoilValue } from "recoil";
+
+export const useCountNotReadChat = ({ type }: { type: string }) => {
+ const datas = useRecoilValue(joinChatRoomSelector);
+ const num = countNotReadNum(datas, type);
+ return num;
+};
+
+export const countNotReadNum = (datas: joinChatType[], type: string) => {
+ if (type === "Total") return datas.reduce((acc, cur) => acc + cur.notReadNum, 0);
+ return datas.filter((data) => data.chatRoomId === Number(type))[0]?.notReadNum ?? 0;
+};
diff --git a/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.tsx b/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.tsx
new file mode 100644
index 00000000..a3c75907
--- /dev/null
+++ b/client/src/Component/Molecules/Chat/NotReadNum/NotReadNum.tsx
@@ -0,0 +1,7 @@
+import { RoundNumberContainer } from "@Atom/.";
+import { useCountNotReadChat } from "./NotReadNum.hook";
+
+export const NotReadNum = ({ type }: { type: string }) => {
+ const num = useCountNotReadChat({ type });
+ return
;
+};
diff --git a/client/src/Component/Molecules/Login/SocialLoginContainer.tsx b/client/src/Component/Molecules/Login/SocialLoginContainer.tsx
index dae8da16..d8b87db8 100644
--- a/client/src/Component/Molecules/Login/SocialLoginContainer.tsx
+++ b/client/src/Component/Molecules/Login/SocialLoginContainer.tsx
@@ -1,12 +1,10 @@
import { css } from "@emotion/react";
import { Button } from "@Atom/.";
-import { SOCIAL_NAVER_LOGIN, SOCIAL_GITHUB_LOGIN, SOCIAL_KAKAO_LOGIN } from "../../../Util/URL";
+import { SOCIAL_NAVER_LOGIN, SOCIAL_GITHUB_LOGIN, SOCIAL_KAKAO_LOGIN } from "../../../Common/URL";
const SocialLoginButtonContainerStyle = css`
- div:nth-child(1) {
- margin-top: 20px;
- }
- div:nth-child(2) {
+ margin-top: 10px;
+ button:nth-child(1) {
margin: 10px 0;
}
`;
diff --git a/client/src/Component/Molecules/MainPage/MainBodyRight.ButtonContainer.tsx b/client/src/Component/Molecules/MainPage/MainBodyRight.ButtonContainer.tsx
index 8fc768a7..fe60f030 100644
--- a/client/src/Component/Molecules/MainPage/MainBodyRight.ButtonContainer.tsx
+++ b/client/src/Component/Molecules/MainPage/MainBodyRight.ButtonContainer.tsx
@@ -1,6 +1,6 @@
import React from "react";
import { css } from "@emotion/react";
-import { ChildrenType } from "@Util/type";
+import { ChildrenType } from "@Common/type";
export const MainBodyRightButtonContainer: React.FC
= ({ children }) => {
return {children}
;
diff --git a/client/src/Component/Molecules/MainPage/MainHeaderRightSide.tsx b/client/src/Component/Molecules/MainPage/MainHeaderRightSide.tsx
index c1016fba..edb1c109 100644
--- a/client/src/Component/Molecules/MainPage/MainHeaderRightSide.tsx
+++ b/client/src/Component/Molecules/MainPage/MainHeaderRightSide.tsx
@@ -1,9 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
import { css } from "@emotion/react";
import { LinkButton, DropDown } from "@Core/.";
import { UserIcon } from "@Atom/.";
-import { checkLogin } from "@Util/.";
+import { checkLogin } from "@Common/util";
import useDropDownCloseEvent from "@Hook/useDropDownCloseEvent";
+import { useToggleHook } from "@Hook/useToggleHook";
const MainHeaderRightContainer = css`
margin-top: 50px;
@@ -14,11 +15,9 @@ const MainHeaderRightContainer = css`
`;
export const MainHeaderRightSide: React.FC = () => {
- const [userOpen, setUser] = useState(false);
- const ToggleUserModal = () => setUser((isOpen) => !isOpen);
-
+ const [userOpen, ToggleUserModal, closeUserModal] = useToggleHook();
const userRef = useRef(null);
- useDropDownCloseEvent(userRef, () => setUser(false));
+ useDropDownCloseEvent(userRef, closeUserModal);
if (!checkLogin())
return (
diff --git a/client/src/Component/Molecules/index.tsx b/client/src/Component/Molecules/index.tsx
index 772ce563..22a389eb 100644
--- a/client/src/Component/Molecules/index.tsx
+++ b/client/src/Component/Molecules/index.tsx
@@ -7,7 +7,7 @@ export * from "./Chat/ChatInput/ChatInput";
export * from "./Chat/ChatProfileInfoContainer";
export * from "./Chat/ChatRoomBasic/ChatRoomBasic";
export * from "./Chat/Chats";
-export * from "./Chat/NotReadNum";
+export * from "./Chat/NotReadNum/NotReadNum";
export * from "./Login/LoginButtonContainer";
export * from "./Login/LoginMainInput";
diff --git a/client/src/Component/Organism/Chat/ChatDetail/ChatDetail.hook.tsx b/client/src/Component/Organism/Chat/ChatDetail/ChatDetail.hook.tsx
index 56dd6442..5de329cc 100644
--- a/client/src/Component/Organism/Chat/ChatDetail/ChatDetail.hook.tsx
+++ b/client/src/Component/Organism/Chat/ChatDetail/ChatDetail.hook.tsx
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
-import { changeNotReadToRead, getChatMessage } from "@Util/data";
+import { changeNotReadToRead, getChatMessage } from "@Common/api";
import { chatTarget } from "@Recoil/Atom";
import { useRecoilState, useSetRecoilState } from "recoil";
import { joinChatRoomState } from "@Recoil/ChatData";
-import { joinChatType } from "@Util/type";
+import { joinChatType } from "@Common/type";
export const useGetChatDatasHook = () => {
const [chatInfo, setChatInfo] = useRecoilState(chatTarget);
@@ -15,7 +15,7 @@ export const useGetChatDatasHook = () => {
if (scrollTop !== 0) return;
const chatMessages = await getChatMessage({ index: dataIndex, chatRoomId });
- if (!chatMessages.length || chatMessages === "error") return;
+ if (!chatMessages.length) return;
setChatInfo((prev) => {
return {
diff --git a/client/src/Component/Organism/Chat/ChatImageContainer.tsx b/client/src/Component/Organism/Chat/ChatImageContainer.tsx
index 3d6183ba..1a7e805c 100644
--- a/client/src/Component/Organism/Chat/ChatImageContainer.tsx
+++ b/client/src/Component/Organism/Chat/ChatImageContainer.tsx
@@ -1,12 +1,31 @@
-import React from "react";
+import React, { RefObject } from "react";
import { useRecoilValue } from "recoil";
import { css } from "@emotion/react";
import styled from "@emotion/styled";
-import { ChatImageContainerType } from "@Util/type";
import { ProfileImage, Button } from "@Atom/.";
import { useMovePage } from "@Hook/useMovePage";
import { getChatMemberSelector } from "@Recoil/Atom";
+type ChatImageContainerType = {
+ profileRef: RefObject;
+};
+
+export const ChatImageContainer = ({ profileRef }: ChatImageContainerType) => {
+ const member = useRecoilValue(getChatMemberSelector);
+ const [handleCloseRoomClick] = useMovePage("/main");
+
+ return (
+
+
+ {member?.map((userInfo, idx) => (
+
((profileRef.current as HTMLDivElement[])[idx] = el as HTMLDivElement)} data-id={idx} />
+ ))}
+
- {member?.map((userInfo, idx) => (
-
((profileRef.current as HTMLDivElement[])[idx] = el as HTMLImageElement)} data-id={idx} />
- ))}
-
);
};
+
+const ChatListContainerStyle = css`
+ width: 50%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-width: 520px;
+`;
diff --git a/client/src/Component/Organism/Chat/ChatProfile.tsx b/client/src/Component/Organism/Chat/ChatProfile.tsx
index 5151ab72..ee6b9d97 100644
--- a/client/src/Component/Organism/Chat/ChatProfile.tsx
+++ b/client/src/Component/Organism/Chat/ChatProfile.tsx
@@ -1,7 +1,7 @@
import { ProfileCard } from "@Atom/.";
import { ProfileImageContainer } from "@Hoc/.";
import { ChatProfileInfoContainer } from "@Molecules/Chat/ChatProfileInfoContainer";
-import { ChatInfoType } from "@Util/type";
+import { ChatInfoType } from "@Common/type";
type props = { data: ChatInfoType; idx: number; chatRoomRef: React.MutableRefObject
| 
| 
| 
|
+
+## [κΈ°μ μ€ν](https://github.com/boostcampwm-2021/web10-CowDogTing/wiki/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)
+
+
+
# CowDogTing