diff --git a/package.json b/package.json
index a162369f..eebbef5f 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"react-hot-toast": "^2.3.0",
"react-items-carousel": "^2.8.0",
"react-notion": "^0.10.0",
+ "react-player": "^2.11.0",
"react-query": "^3.39.1",
"react-router-dom": "6",
"react-scripts": "5.0.1",
diff --git a/public/index.html b/public/index.html
index faf3dbde..92861393 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,6 +2,7 @@
+
-->
modoco
+
+
+
+
+
+
+
+
+
diff --git a/src/adapters/receiveMessage.ts b/src/adapters/receiveMessage.ts
index f215e989..42f9d02d 100644
--- a/src/adapters/receiveMessage.ts
+++ b/src/adapters/receiveMessage.ts
@@ -14,20 +14,20 @@ const onChatMessage = (roomId: string) => {
useEffect(() => {
const receiveMessage = (receiveMsg) => {
- const isMe = receiveMsg.sender === uid;
+ const isMe = receiveMsg.from === uid;
const userInfo = isMe
? {
- uid: receiveMsg.sender,
+ uid: receiveMsg.from,
nickname,
avatar,
}
- : connectedUsers.filter((user) => user.uid === receiveMsg.sender)[0];
+ : connectedUsers.filter((user) => user.uid === receiveMsg.from)[0];
setMessages([
...messages.map((m, index) => {
if (
index === messages.length - 1 &&
- m.uid === receiveMsg.sender &&
+ m.uid === receiveMsg.from &&
moment(m.createdAt).format('LT') ===
moment(receiveMsg.createdAt).format('LT')
) {
@@ -74,7 +74,7 @@ const onChatMessage = (roomId: string) => {
moment(receiveMsg.createdAt).format('LT')
) {
isHideNicknameAndAvatar = false;
- } else if (msg[msg.length - 1].uid !== receiveMsg.sender) {
+ } else if (msg[msg.length - 1].uid !== receiveMsg.from) {
isHideNicknameAndAvatar = false;
} else if (msg[msg.length - 1].type !== 'MESSAGE') {
isHideNicknameAndAvatar = false;
diff --git a/src/adapters/roomConnection.ts b/src/adapters/roomConnection.ts
index bfdc1f0f..c33bbd0a 100644
--- a/src/adapters/roomConnection.ts
+++ b/src/adapters/roomConnection.ts
@@ -52,6 +52,10 @@ export const roomConnection = (roomId: string) => {
joinSuccess();
+ newSocket?.on('exception', (event) => {
+ console.log('except', event);
+ });
+
newSocket?.on(SOCKET_EVENT.JOINED_ROOM, (room) => {
console.log('[roomConnection] joinedRoom', room);
emitAudioStateChange(roomId, userMic);
diff --git a/src/adapters/youtubeSocket.ts b/src/adapters/youtubeSocket.ts
new file mode 100644
index 00000000..06d1f2ed
--- /dev/null
+++ b/src/adapters/youtubeSocket.ts
@@ -0,0 +1,99 @@
+import { io } from 'socket.io-client';
+import { API } from '../config';
+import youtubeSearch from '../interface/youtubeSearch.interface';
+
+const youtubeSocket = {
+ socket: io(`${API.YOUTUBE_PLAYLIST as string}`, {
+ transports: ['websocket', 'polling'],
+ query: { token: localStorage.getItem('access_token') },
+ }),
+};
+
+const generateYoutubeSocket = () => {
+ youtubeSocket.socket = io(`${API.YOUTUBE_PLAYLIST as string}`, {
+ transports: ['websocket', 'polling'],
+ query: { token: localStorage.getItem('access_token') },
+ });
+};
+
+const initSocketConnection = () => {
+ if (!youtubeSocket.socket) generateYoutubeSocket();
+ youtubeSocket.socket?.connect();
+};
+
+const checkSocket = () => {
+ if (!youtubeSocket.socket || !youtubeSocket.socket.connected) {
+ initSocketConnection();
+ }
+};
+
+const disconnectSocket = () => {
+ youtubeSocket.socket?.off('connect');
+ youtubeSocket.socket?.off('playlist:join');
+ youtubeSocket.socket?.off('playlist:joined');
+ youtubeSocket.socket?.off('playlist:sync');
+ youtubeSocket.socket?.disconnect();
+};
+
+const connectedYoutube = () => {
+ youtubeSocket.socket?.on('connect', () => {
+ console.log(`[youtube connect] connected! ${youtubeSocket.socket?.id}`);
+ });
+};
+
+const joinYoutube = (roomId: string) => {
+ checkSocket();
+ youtubeSocket.socket?.emit('playlist:join', {
+ room: roomId,
+ playlistName: 'playlistItem',
+ });
+ console.log(
+ `[emit join] waiting for join ${roomId}! ${youtubeSocket.socket?.id}`,
+ );
+};
+
+// const joinedYoutube = () => {
+// youtubeSocket.socket?.on('playlist:joined', (roomId: string) => {
+// console.log(`[on join] joined ${roomId}! ${youtubeSocket.socket?.id}`);
+// });
+// };
+
+const selectVideo = (roomId: string, video: youtubeSearch) => {
+ checkSocket();
+ youtubeSocket.socket?.emit('playlist:sync', {
+ room: roomId,
+ playlistName: 'playlistItem',
+ type: 'sync',
+ playlist: [{ video }],
+ });
+ console.log(
+ `[emit select] select ${video.id.videoId}! ${youtubeSocket.socket?.id}`,
+ );
+};
+
+const addVideo = (addFunc) => {
+ checkSocket();
+ youtubeSocket.socket?.on('playlist:sync', (data) => addFunc(data));
+ console.log(`[on add] add video! ${youtubeSocket.socket?.id}`);
+};
+
+const leaveYoutube = (roomId: string) => {
+ checkSocket();
+ youtubeSocket.socket?.emit('playlist:leave', {
+ room: roomId,
+ playlistName: 'playlistItem',
+ });
+ console.log(`[emit leave] leave ${roomId}! ${youtubeSocket.socket?.id}`);
+};
+
+export {
+ youtubeSocket,
+ initSocketConnection,
+ // generateYoutubeSocket,
+ disconnectSocket,
+ connectedYoutube,
+ joinYoutube,
+ selectVideo,
+ addVideo,
+ leaveYoutube,
+};
diff --git a/src/api/core/index.ts b/src/api/core/index.ts
index 88e5aedd..6127dfe4 100644
--- a/src/api/core/index.ts
+++ b/src/api/core/index.ts
@@ -1,2 +1,3 @@
export { awsRequest } from './awsLambdaAxios';
export { authorizationRequest, unAuthorizationRequest } from './backendAxios';
+export { youtubeAxios } from './youtubeAxios';
diff --git a/src/api/core/youtubeAxios.ts b/src/api/core/youtubeAxios.ts
new file mode 100644
index 00000000..14357081
--- /dev/null
+++ b/src/api/core/youtubeAxios.ts
@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { API } from '../../config';
+
+const youtubeAxios = axios.create({
+ baseURL: API.YOUTUBE,
+});
+
+// add youtube key in params
+youtubeAxios.interceptors.request.use((config) => {
+ return Object.assign(config, {
+ params: {
+ ...config.params,
+ key: process.env.REACT_APP_YOUTUBE_KEY,
+ },
+ });
+});
+
+youtubeAxios.interceptors.response.use(
+ (response) => {
+ return response;
+ },
+ (error) => {
+ console.warn('[Axios] ', error);
+ return Promise.reject(error);
+ },
+);
+
+export { youtubeAxios };
diff --git a/src/api/main.ts b/src/api/main.ts
index 9d0aa3c1..c5ee7451 100644
--- a/src/api/main.ts
+++ b/src/api/main.ts
@@ -3,6 +3,7 @@ import {
authorizationRequest,
unAuthorizationRequest,
awsRequest,
+ youtubeAxios,
} from './core/index';
import { API } from '../config';
@@ -139,6 +140,29 @@ const getRecords = () => {
return authorizationRequest.get(API.RECORDS);
};
+/**
+ * youtube
+ */
+
+// search youtube video
+const searchYoutubeVideo = (keyword: string) => {
+ return youtubeAxios.get(API.YOUTUBE_SEARCH, {
+ params: {
+ q: keyword,
+ part: 'snippet',
+ maxResults: 15,
+ type: 'video',
+ videoEmbeddable: true,
+ videoCategoryId: 10,
+ },
+ });
+};
+
+// delete room
+const deleteRoom = (roomId: number) => {
+ return authorizationRequest.delete((API.ROOM as string) + roomId);
+};
+
export {
getUser,
getMe,
@@ -156,4 +180,6 @@ export {
getFriend,
getRecords,
changeProfile,
+ searchYoutubeVideo,
+ deleteRoom,
};
diff --git a/src/assets/svg/Check.svg b/src/assets/svg/Check.svg
new file mode 100644
index 00000000..b64b7ba7
--- /dev/null
+++ b/src/assets/svg/Check.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/src/assets/svg/GrayYoutube.svg b/src/assets/svg/GrayYoutube.svg
new file mode 100644
index 00000000..9f80167b
--- /dev/null
+++ b/src/assets/svg/GrayYoutube.svg
@@ -0,0 +1,5 @@
+
+
diff --git a/src/assets/svg/MusicOff.svg b/src/assets/svg/MusicOff.svg
new file mode 100644
index 00000000..281d7991
--- /dev/null
+++ b/src/assets/svg/MusicOff.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/src/assets/svg/MusicOn.svg b/src/assets/svg/MusicOn.svg
new file mode 100644
index 00000000..82508db0
--- /dev/null
+++ b/src/assets/svg/MusicOn.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/src/assets/svg/RedYoutube.svg b/src/assets/svg/RedYoutube.svg
new file mode 100644
index 00000000..30d2f76c
--- /dev/null
+++ b/src/assets/svg/RedYoutube.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/src/assets/svg/Search.svg b/src/assets/svg/Search.svg
new file mode 100644
index 00000000..17057f5e
--- /dev/null
+++ b/src/assets/svg/Search.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/src/assets/svg/WhiteYoutube.svg b/src/assets/svg/WhiteYoutube.svg
new file mode 100644
index 00000000..ba825854
--- /dev/null
+++ b/src/assets/svg/WhiteYoutube.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/src/assets/svg/verticalMenu.svg b/src/assets/svg/verticalMenu.svg
new file mode 100644
index 00000000..339e1017
--- /dev/null
+++ b/src/assets/svg/verticalMenu.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/src/components/atoms/chatting/SendChat.tsx b/src/components/atoms/chatting/SendChat.tsx
index b6969a25..940919a9 100644
--- a/src/components/atoms/chatting/SendChat.tsx
+++ b/src/components/atoms/chatting/SendChat.tsx
@@ -36,7 +36,7 @@ export default function SendChat({
newSocket.emit('chatMessage', {
room: roomId,
type: 'MESSAGE',
- sender: uid,
+ from: uid,
message: newMessage,
createdAt: new Date(),
});
@@ -93,6 +93,8 @@ const Input = styled.textarea<{ roomId: string }>`
color: rgba(255, 255, 255, 1);
min-height: 2rem;
max-height: 13rem;
+ resize: none;
+
::-webkit-scrollbar {
width: 0.3rem;
}
diff --git a/src/components/atoms/chattingModal/ChattingModal.tsx b/src/components/atoms/chattingModal/ChattingModal.tsx
new file mode 100644
index 00000000..4e3e2ee1
--- /dev/null
+++ b/src/components/atoms/chattingModal/ChattingModal.tsx
@@ -0,0 +1,118 @@
+import styled from 'styled-components';
+import chattingModalStore from 'src/stores/chattingModalStore';
+import useUser from 'src/hooks/useUser';
+import MyAvatar from 'src/assets/avatar/MyAvatar';
+import ChattingPortal from './ChattingPortal';
+import SendChat from './SendChat';
+import { ReactComponent as Close } from '../../../assets/svg/X.svg';
+
+export default function ChattingModal() {
+ const { closeChattingModal, chattingFriend } = chattingModalStore();
+ const { isLoading, error, data } = useUser(Number(chattingFriend));
+ if (isLoading)
+ return (
+
+
+ e.stopPropagation()}>
+
+ {chattingFriend}
+
+
+
+
+ );
+ if (error)
+ return (
+
+
+ e.stopPropagation()}>
+
+ {chattingFriend}
+
+
+
+
+ );
+
+ return (
+
+
+ e.stopPropagation()}>
+
+
+
+
+
+
+ {data?.nickname}
+
+
+ {chattingFriend}
+
+
+
+
+ );
+}
+
+const CloseContainer = styled.div`
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
+ cursor: pointer;
+`;
+
+const Avatar = styled.div`
+ display: flex;
+ height: 5rem;
+ font-size: 1.6rem;
+ align-items: center;
+ svg {
+ height: 100%;
+ }
+`;
+
+const Outside = styled.div`
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ z-index: 999;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.5);
+`;
+
+const Header = styled.div`
+ width: 100%;
+ height: 8rem;
+ color: white;
+ border-bottom: 1px solid #374151;
+ display: flex;
+ align-items: center;
+`;
+
+const Content = styled.div`
+ width: 100%;
+ flex-grow: 1;
+`;
+
+const Footer = styled.div`
+ width: 100%;
+`;
+
+const Container = styled.div`
+ width: 30%;
+ min-width: 40rem;
+ height: 80%;
+ min-height: 30rem;
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ background-color: #23262f;
+ padding: 2rem;
+ border-radius: 1rem;
+`;
diff --git a/src/components/atoms/chattingModal/ChattingPortal.ts b/src/components/atoms/chattingModal/ChattingPortal.ts
new file mode 100644
index 00000000..7ac412f7
--- /dev/null
+++ b/src/components/atoms/chattingModal/ChattingPortal.ts
@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom';
+
+const ChattingPortal = ({ children }) => {
+ const el = document.getElementById('chatting-modal');
+ return ReactDOM.createPortal(children, el);
+};
+
+export default ChattingPortal;
diff --git a/src/components/atoms/chattingModal/SendChat.tsx b/src/components/atoms/chattingModal/SendChat.tsx
new file mode 100644
index 00000000..8eefd1f6
--- /dev/null
+++ b/src/components/atoms/chattingModal/SendChat.tsx
@@ -0,0 +1,96 @@
+import React, { useState, useRef } from 'react';
+import styled from 'styled-components';
+import { ReactComponent as MessageSend } from '../../../assets/svg/MessageSend.svg';
+
+export default function SendChat({ uid }: { uid: number }) {
+ const [newMessage, setNewMessage] = useState('');
+ const inputRef = useRef(null);
+
+ const onMessageChange = (event: React.ChangeEvent) => {
+ event.preventDefault();
+ setNewMessage(() => event.target.value);
+ autoGrow();
+ };
+
+ const autoGrow = () => {
+ if (inputRef.current) {
+ inputRef.current.style.height = '2rem';
+ inputRef.current.style.height = inputRef.current.scrollHeight
+ .toString()
+ .concat('px');
+ console.log(inputRef.current.style.height);
+ }
+ };
+
+ const onSubmit = (event: React.MouseEvent) => {
+ event.preventDefault();
+ if (newMessage.trim() === '') return;
+ console.log('send to', uid, newMessage);
+ // emit
+ setNewMessage(() => '');
+ if (inputRef.current) {
+ inputRef.current.style.height = '2rem';
+ }
+ };
+
+ const onKeyPress = (event) => {
+ if (event.key === 'Enter') {
+ if (!event.shiftKey) {
+ event.preventDefault();
+ onSubmit(event);
+ }
+ }
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+const SubmitMessage = styled.form`
+ width: 100%;
+ max-height: 19rem;
+ border-radius: 1rem;
+ padding: 1.5rem 2rem;
+ background-color: #313540;
+ z-index: 999;
+`;
+
+const Input = styled.textarea`
+ width: calc(100% - 2.7rem);
+ font-size: 1.3rem;
+ background-color: #313540;
+ font-family: IBMPlexSansKRRegular;
+ color: rgba(255, 255, 255, 1);
+ min-height: 2rem;
+ max-height: 13rem;
+ resize: none;
+ ::-webkit-scrollbar {
+ width: 0.3rem;
+ }
+
+ &:focus {
+ outline: none;
+ }
+`;
+
+const Button = styled.button`
+ cursor: pointer;
+ float: right;
+ svg {
+ width: 2rem;
+ height: 2rem;
+ }
+`;
diff --git a/src/components/atoms/chattingModal/chattingUtil.ts b/src/components/atoms/chattingModal/chattingUtil.ts
new file mode 100644
index 00000000..43b5b969
--- /dev/null
+++ b/src/components/atoms/chattingModal/chattingUtil.ts
@@ -0,0 +1,11 @@
+import chattingModalStore from 'src/stores/chattingModalStore';
+
+export default function ChattingUtil() {
+ const { openChattingModal, setChattingFriend } = chattingModalStore();
+ const openChat = (friendUid: number) => {
+ setChattingFriend(friendUid);
+ openChattingModal();
+ };
+
+ return { openChat };
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 1a846abd..2c976959 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -44,7 +44,7 @@ export default function Footer() {
Github|
- F&Q|
+ FAQ|
{uid ? (
@@ -39,6 +42,7 @@ export default function MainLayout() {
/>
)}
{isOpenNoticeModal && }
+ {isChattingModal && }
diff --git a/src/components/layout/RoomLayout.tsx b/src/components/layout/RoomLayout.tsx
index 360f52c1..3c13c64d 100644
--- a/src/components/layout/RoomLayout.tsx
+++ b/src/components/layout/RoomLayout.tsx
@@ -1,10 +1,13 @@
import React from 'react';
import { ReactChannelIO } from 'react-channel-plugin';
import { Outlet } from 'react-router-dom';
+import chattingModalStore from 'src/stores/chattingModalStore';
+import ChattingModal from '../atoms/chattingModal/ChattingModal';
import userStore from '../../stores/userStore';
export default function RoomLayout() {
const { uid, nickname } = userStore();
+ const { isChattingModal } = chattingModalStore();
const profile = uid
? {
email: localStorage.getItem('email'),
@@ -13,6 +16,7 @@ export default function RoomLayout() {
: null;
return (
<>
+ {isChattingModal && }
{uid ? (
) => {
event.preventDefault();
- toast.error('로그인 후 입장 가능합니다.');
+ openLoginModal();
};
return (
diff --git a/src/components/main/block/Block.tsx b/src/components/main/block/Block.tsx
index 5b313e53..c5389f22 100644
--- a/src/components/main/block/Block.tsx
+++ b/src/components/main/block/Block.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { isMobile } from 'react-device-detect';
import styled from 'styled-components';
import media from 'src/styles/media';
+import mainModalStore from 'src/stores/mainModalStore';
import UserStore from '../../../stores/userStore';
import MyAvatar from '../../../assets/avatar/MyAvatar';
import RoomDetail from '../../atoms/RoomDetail';
@@ -14,11 +15,12 @@ export default function Block({ isMain, data }) {
const navigate = useNavigate();
const { nickname } = UserStore();
const { enterProfile } = useEnterProfile(data?.moderator.uid);
+ const { openLoginModal } = mainModalStore();
const enterRoom = (event: React.MouseEvent) => {
event.preventDefault();
if (!nickname) {
- toast.error('로그인이 필요합니다');
+ openLoginModal();
return;
}
if (isMobile) {
diff --git a/src/components/main/block/MyBlock.tsx b/src/components/main/block/MyBlock.tsx
index 22922175..2daf0f46 100644
--- a/src/components/main/block/MyBlock.tsx
+++ b/src/components/main/block/MyBlock.tsx
@@ -1,16 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { useNavigate } from 'react-router-dom';
import { isMobile } from 'react-device-detect';
import styled from 'styled-components';
import media from 'src/styles/media';
+import useDeleteRoom from 'src/hooks/useDeleteRoom';
import UserStore from '../../../stores/userStore';
import RoomDetail from '../../atoms/RoomDetail';
import BlockDetail from './BlockDetail';
+import { ReactComponent as VerticalMenu } from '../../../assets/svg/verticalMenu.svg';
export default function MyBlock({ data }) {
const navigate = useNavigate();
const { nickname } = UserStore();
+ const [isDelete, setIsDelete] = useState(false);
+
+ const { mutate, isLoading, isError, isSuccess } = useDeleteRoom(data?.itemId);
+
+ if (isLoading) {
+ return <>loading;
+ }
+ if (isError) return <>error;
+
+ const toggleDelete = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ setIsDelete(!isDelete);
+ };
const enterRoom = (event: React.MouseEvent) => {
event.preventDefault();
@@ -28,8 +43,21 @@ export default function MyBlock({ data }) {
}
navigate(`/ready/${data.itemId}`);
};
+
+ const deleteRoom = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ mutate();
+ if (isSuccess) {
+ console.log('successfully deleted room');
+ }
+ };
+
return (
-
+ setIsDelete(false)}>
+ {isDelete && 방 삭제하기}
+
@@ -39,6 +67,38 @@ export default function MyBlock({ data }) {
);
}
+const Delete = styled.div`
+ position: absolute;
+ top: 4rem;
+ right: 2rem;
+ padding: 1rem 3rem;
+ background-color: #191f28;
+ border-radius: 0.4rem;
+ font-size: 1.4rem;
+ color: #fcfcfd;
+ &:hover {
+ cursor: pointer;
+ background-color: #2f3a4b;
+ }
+`;
+
+const Menu = styled.div`
+ position: absolute;
+ width: 2rem;
+ height: 2rem;
+ top: 2rem;
+ right: 2rem;
+ cursor: pointer;
+ svg {
+ width: 100%;
+ height: 100%;
+ fill: #fcfcfd;
+ &:hover {
+ fill: rgba(255, 255, 255, 0.6);
+ }
+ }
+`;
+
const Entering = styled.div`
display: flex;
flex-direction: column;
@@ -75,6 +135,7 @@ const Enter = styled.button`
`;
const Container = styled.div`
+ position: relative;
background-color: #23262f;
border-radius: 2rem;
width: 29.4rem;
diff --git a/src/components/main/block/Tags.tsx b/src/components/main/block/Tags.tsx
index 5450dfe0..c157f94d 100644
--- a/src/components/main/block/Tags.tsx
+++ b/src/components/main/block/Tags.tsx
@@ -1,9 +1,13 @@
+import { useRef } from 'react';
import styled from 'styled-components';
import media from 'src/styles/media';
export default function Tags({ tags }) {
+ const ref = useRef(null);
+ const isOverflow = ref.current?.clientWidth < ref.current?.scrollWidth;
+
return (
-
+
{tags.map((myTag) => (
#{myTag}
))}
@@ -11,10 +15,11 @@ export default function Tags({ tags }) {
);
}
-const TagContainer = styled.div`
+const TagContainer = styled.div<{ isOverflow: boolean }>`
display: flex;
gap: 1rem;
- justify-content: center;
+ justify-content: ${({ isOverflow }) =>
+ isOverflow ? 'flex-start' : 'center'};
align-items: center;
overflow-y: auto;
width: 100%;
diff --git a/src/components/main/lobby/SingleParticipant.tsx b/src/components/main/lobby/SingleParticipant.tsx
index 3962388d..620e98bc 100644
--- a/src/components/main/lobby/SingleParticipant.tsx
+++ b/src/components/main/lobby/SingleParticipant.tsx
@@ -10,7 +10,7 @@ export default function SingleParticipant({ user }) {
- {user.nickname}
+ {user?.nickname}
);
}
diff --git a/src/components/notice/Contents.tsx b/src/components/notice/Contents.tsx
index 1b1a0574..34bb8da2 100644
--- a/src/components/notice/Contents.tsx
+++ b/src/components/notice/Contents.tsx
@@ -5,12 +5,12 @@ export default function Contents() {
const onClickDiscord = () => {
window.open('https://discord.gg/RqYBHcJT4G', '_blank');
};
- const onClickNotion = () => {
- window.open(
- 'https://fortune-innocent-45c.notion.site/513c922718904e2d9d558f39f9513649',
- '_blank',
- );
- };
+ // const onClickNotion = () => {
+ // window.open(
+ // 'https://fortune-innocent-45c.notion.site/513c922718904e2d9d558f39f9513649',
+ // '_blank',
+ // );
+ // };
return (
공지사항✨
@@ -21,9 +21,7 @@ export default function Contents() {
온라인 모각코 플랫폼을 만들고 있는 소프트웨어 마에스트로 FIRE팀입니다.
-
-
-
+ {/*
사이트 오픈 기념으로
를 클릭해주세요!
-
+ */}
버그 신고는 왼쪽 아래 채널톡으로 해주시면 감사드리겠습니다 :)
@@ -98,12 +96,12 @@ const SvgComponent = styled.div`
const Text = styled.span``;
-const Button = styled.button`
- color: white;
- cursor: pointer;
- font-size: 1.6rem;
+// const Button = styled.button`
+// color: white;
+// cursor: pointer;
+// font-size: 1.6rem;
- &:hover {
- text-decoration: underline;
- }
-`;
+// &:hover {
+// text-decoration: underline;
+// }
+// `;
diff --git a/src/components/notice/NoticeModal.tsx b/src/components/notice/NoticeModal.tsx
index ae2a765d..2efb1a9f 100644
--- a/src/components/notice/NoticeModal.tsx
+++ b/src/components/notice/NoticeModal.tsx
@@ -27,11 +27,11 @@ export default function NoticeModal() {
e.stopPropagation()}>
+
+ 하루동안 열지않기
+ 닫기
+
-
- 하루동안 열지않기
- [닫기]
-
);
@@ -45,17 +45,29 @@ const Content = styled.div`
align-items: center;
`;
-const Text = styled.p`
- font-size: 1.4rem;
- cursor: pointer;
-`;
-
const Close = styled.div`
+ display: flex;
+ flex-direction: column;
width: 100%;
- padding: 1rem 2rem;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ margin-top: 1rem;
+`;
+
+const Text = styled.div`
display: flex;
- justify-content: space-between;
+ justify-content: center;
align-items: center;
+ width: 50%;
+ background-color: rgba(255, 255, 255, 0.3);
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.4);
+ }
+ padding: 1rem;
+ border-radius: 0.5rem;
+ font-size: 1.4rem;
+ cursor: pointer;
`;
const Screen = styled.div`
@@ -72,6 +84,9 @@ const Screen = styled.div`
`;
const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
position: relative;
width: fit-content;
background-color: black;
diff --git a/src/components/profile/friends/FriendIcon.tsx b/src/components/profile/friends/FriendIcon.tsx
index dcc5507c..f3675ba7 100644
--- a/src/components/profile/friends/FriendIcon.tsx
+++ b/src/components/profile/friends/FriendIcon.tsx
@@ -22,7 +22,7 @@ export default function FriendIcon({ friend }: { friend: singleFriend }) {
- {friend.nickname}
+ {friend?.nickname}
{/*
{friend.state !== '' ? friend.state : '오프라인'}
diff --git a/src/components/profile/friends/FriendList.tsx b/src/components/profile/friends/FriendList.tsx
index a229fe99..83563aaf 100644
--- a/src/components/profile/friends/FriendList.tsx
+++ b/src/components/profile/friends/FriendList.tsx
@@ -1,6 +1,8 @@
+/* eslint-disable no-unused-vars */
import styled from 'styled-components';
import media from 'src/styles/media';
import { detailedFriend } from 'src/interface/singleFriend.interface';
+import ChattingUtil from 'src/components/atoms/chattingModal/chattingUtil';
import { ReactComponent as SendImage } from '../../../assets/svg/MessageSend.svg';
import FriendIcon from './FriendIcon';
@@ -9,6 +11,7 @@ export default function FriendList({
}: {
friendList: detailedFriend[];
}) {
+ const { openChat } = ChattingUtil();
const filteredFriends = friendList.map((friend) =>
friend.role === 'RECEIVER' ? friend.sender : friend.receiver,
);
@@ -18,7 +21,7 @@ export default function FriendList({
{filteredFriends.map((friend) => (
-
+ openChat(friend?.uid)}>
diff --git a/src/components/profile/userProfile/UserProfile.tsx b/src/components/profile/userProfile/UserProfile.tsx
index 694357c6..f99ed9ea 100644
--- a/src/components/profile/userProfile/UserProfile.tsx
+++ b/src/components/profile/userProfile/UserProfile.tsx
@@ -9,6 +9,7 @@ import useSingleFriend from 'src/hooks/friend/useSingleFriend';
import useRequestFriend from 'src/hooks/friend/useRequestFriend';
import useDeleteFriendRequest from 'src/hooks/friend/useDeleteFriendRequest';
import userStore from 'src/stores/userStore';
+import ChattingUtil from 'src/components/atoms/chattingModal/chattingUtil';
import Avatar from '../../atoms/Avatar';
import Group from './Group';
import Badge from './Badge';
@@ -26,6 +27,7 @@ export default function UserProfile({ isMe, setIsEdit, userId, isModal }) {
const { setClear } = userStore();
const navigate = useNavigate();
const { isLoading, error, refetch, data } = useUser(Number(userId));
+ const { openChat } = ChattingUtil();
const {
isLoading: friendLoading,
@@ -159,7 +161,7 @@ export default function UserProfile({ isMe, setIsEdit, userId, isModal }) {
)}
{isFriend ? (
-