+
+
+
goChatRoomInformation()}>
+ {selectChatRoom.title}
+
+
+
goChatRoomInformation()}>
+ {users.map((user, index) => (
+
0) ? '' : `url(${user.profileImage})`
+ }}
+ />
+ ))}
+ {extraProfilesCount > 0 && (
+
+ +{extraProfilesCount}
+
+ )}
+
+
+
+
+
+
+
+ {formatMessages(messages)}
+
+
+
+
+
+
+ )
+ }
+}
+
+export default ChatRoom;
\ No newline at end of file
diff --git a/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.css b/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.css
new file mode 100644
index 0000000..2da054d
--- /dev/null
+++ b/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.css
@@ -0,0 +1,276 @@
+.chatRoomInformation {
+ height: 812px;
+ width: 375px;
+
+ margin: 0 auto;
+
+ .margin-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin: 0 16px;
+ }
+
+ .title {
+ width: 100%;
+ height: 46px;
+ margin-top: 50px;
+ background: #ffffff;
+ display: flex;
+ text-align: center;
+
+ }
+
+ .title-name {
+ /* 채팅방 이름 */
+
+ padding-top: 15px;
+ width: 90px;
+ height: 18px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+ /* identical to box height, or 112% */
+ display: flex;
+ align-items: center;
+
+ color: #3D3D3D;
+ }
+
+
+ .chat-room-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 50px;
+ margin-top: 10px
+ }
+
+ .chat-room-image {
+ border-radius: 50%;
+ margin-bottom: 10px;
+
+ /* 채팅방 대표사진 */
+ width: 60px;
+ height: 60px;
+ background-color: #3D3D3D;
+
+ }
+
+ .chat-room-name {
+
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+
+ color: #3D3D3D;
+ }
+
+
+
+ .chat-room-actions {
+ width: 300px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: 20px;
+ }
+
+ .action-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ width: 84px;
+ height: 84px;
+ background-color: #FAFAFA;
+ border-radius: 20%;
+ transition: all 0.3s ease;
+ }
+
+ .action-item img {
+ width: 30px;
+ height: 30px;
+ }
+
+ .action-item span {
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+
+ color: #000000;
+ }
+
+ .chat-room-timer {
+
+ margin: 0 auto;
+ width: 272px;
+ height: 40px;
+
+
+ background: #FAFAFA;
+ border-radius: 10px;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .chat-room-timer span {
+
+
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ /* identical to box height, or 117% */
+
+
+ color: #000000;
+ }
+
+ .participant-list {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .participant-list-text {
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 18px;
+
+ color: #3D3D3D;
+ margin-bottom: 10px;
+ }
+
+ .gender {
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 12px;
+ color: #777777;
+ margin-bottom: 10px;
+ }
+
+
+ .participant-group {
+ max-height: 150px;
+ overflow-y: scroll;
+ scrollbar-width: none;
+ /* Firefox */
+ -ms-overflow-style: none;
+ }
+
+ .participant-group ul {
+ padding-left: 0px;
+ }
+
+
+
+ .bar {
+ width: 343px;
+ height: 6px;
+ background-color: #FAFAFA;
+
+ }
+
+
+ .major {
+
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ /* identical to box height, or 117% */
+ display: flex;
+ align-items: center;
+
+ color: #777777;
+ }
+
+ .nickName {
+
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ /* identical to box height, or 117% */
+ display: flex;
+ align-items: center;
+
+ color: #3D3D3D;
+ }
+
+ .user-list {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 5px;
+ }
+
+ .user-list img {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ margin-left: 3px;
+ margin-right: 5px;
+ }
+
+ .user-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+
+
+
+
+
+ .action-item svg {
+ fill: none;
+ transition: all 0.3s ease;
+ }
+
+ .action-item span {
+ color: #3D3D3D;
+ transition: all 0.3s ease;
+ }
+
+ .action-item.active {
+ background-color: #FF7898;
+ /* 핑크 배경 */
+ }
+
+ .action-item.active svg {
+ fill: #fff;
+ /* 아이콘 하얀색 */
+ }
+
+ .action-item.active span {
+ color: #fff;
+ /* 글자 하얀색 */
+ }
+
+}
\ No newline at end of file
diff --git a/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.jsx b/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.jsx
new file mode 100644
index 0000000..cf25182
--- /dev/null
+++ b/src/page/Chat/ChatRoom/ChatRoomInformation/ChatRoomInformation.jsx
@@ -0,0 +1,205 @@
+import React, { useState, useEffect } from "react";
+import './ChatRoomInformation.css'
+import ExitDialog from '../../Dialog/ExitDialog'
+import UserIntroduceDialog from '../../Dialog/UserintroduceDialog'
+import { fetchChatroomInformation } from '../../../../api/chatRoom/fetchChatroomInformation'
+
+function ChatRoomInformation({ roomId, socket, chatRoomInformation }) {
+ const [exitDialog, setExitDialog] = useState(false);
+
+ const goChatRoom = () => {
+ chatRoomInformation(false);
+ };
+
+ const [activeItemPromise, setActiveItemPromise] = useState(null);
+ const [activeItemAlarm, setActiveItemAlarm] = useState(null);
+ const [activeItemExit, setActiveItemExit] = useState(null);
+ const [userIntroduceDialog, setUserIntroduceDialog] = useState(false);
+ const [clickUser, setClickUser] = useState();
+
+ const handleClick = (item) => {
+ if (item === "promise") {
+ if (activeItemPromise) {
+ setActiveItemPromise(false);
+ } else {
+ setActiveItemPromise(true);
+ }
+ } else if (item === "alarm") {
+ if (activeItemAlarm) {
+ setActiveItemAlarm(false);
+ } else {
+ setActiveItemAlarm(true);
+ }
+ } else if (item === "exit") {
+ if (activeItemExit) {
+ setActiveItemExit(false);
+ } else {
+ setActiveItemExit(true);
+ }
+ }
+
+ };
+
+
+ const [room, setRoom] = useState({
+ title: "프로그래밍 기초",
+ members: [
+ { gender: "여자", major: "Physics", studentId: "20210003", nickname: "Alice", profileImage: "../../../../asset/ChatRoomPic3.png" },
+ { gender: "여자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" },
+ { gender: "남자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" },
+ { gender: "남자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" }
+ ],
+ profileImage: '../../../../asset/ChatRoomPic1.png',
+ })
+
+ const [possibleEnterNumber, setPossibleEnterNumber] = useState(3);
+ const [remainingTime, setRemainingTime] = useState('');
+ const [dDay, setDDay] = useState(0);
+
+ useEffect(() => {
+ const fetchRoomData = async () => {
+ try {
+ const data = await fetchChatroomInformation(roomId);
+ setRoom(data.room);
+ setPossibleEnterNumber(data.possibleEnterNumber);
+ setRemainingTime(data.remainingTime);
+ setDDay(data.dDay);
+ } catch (error) {
+ console.error("Error fetching room data:", error);
+ }
+ };
+
+ fetchRoomData();
+ }, [roomId]);
+
+
+
+
+ const dialogOpen = (nickname) => {
+ setUserIntroduceDialog(true);
+ setClickUser(nickname);
+ }
+
+
+
+
+ return (
+
+
setUserIntroduceDialog(false)} roomId={roomId} />
+ setExitDialog(false)} possibleEnterNumber={possibleEnterNumber} roomId={roomId} socket={socket} />
+
+
+ {/* 이미지와 채팅방 이름 */}
+
+
+
{room.title}
+
+
+ {/* 버튼들 */}
+
+ {/* 약속 잡기 */}
+
handleClick('promise')}
+ >
+
+
약속 잡기
+
+
+ {/* 알림 끄기 */}
+
handleClick('alarm')}
+ >
+
+ {activeItemAlarm ? <>
알림 키기 :
알림 끄기
+ }
+
+
+
+ {/* 나가기 */}
+
{ handleClick('exit'); setExitDialog(true) }}
+ >
+
+
+
나가기
+
+
+
+
+ {/* 채팅방 종료 시간 */}
+
+
+ {remainingTime}에 채팅방이 종료됩니다 D-{dDay}
+
+
+
+
+
+ {/* 참여자 목록 */}
+
+
+
+ );
+}
+
+export default ChatRoomInformation;
\ No newline at end of file
diff --git a/src/page/Chat/ChatStartPage.jsx b/src/page/Chat/ChatStartPage.jsx
new file mode 100644
index 0000000..1889556
--- /dev/null
+++ b/src/page/Chat/ChatStartPage.jsx
@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from "react";
+import './ChatPage.css'
+import EnterCheckPage from './EnterCheckPage'
+import NoEnterCheckPage from './NoEnterCheckPage'
+import { useNavigate } from 'react-router-dom';
+import logo from '../../asset/logo.png'
+import { fetchChatRoomFetch } from '../../api/chatRoom/fetchChatRoomFetch'
+
+function ChatStartPage() {
+
+ const navigate = useNavigate();
+ const [loading, setLoading] = useState(true);
+
+ const [isEnterCheck, setIsEnterClick] = useState(false);
+ //유저의 정보를 가져와 성별,입장참여 횟수를 가져온다
+ const [possibleEnterNumber, setPossibleEnterNumber] = useState(3);
+ const [gender, setGender] = useState("남자");
+
+
+ const handleNavigation = (destination) => {
+ switch (destination) {
+ case 'play':
+ navigate('/mbti');
+ break;
+ case 'talk':
+ window.location.reload(); // 페이지 새로고침 (필요에 따라 이 부분을 변경)
+ break;
+ case 'my':
+ navigate('/myPage');
+ break;
+ default:
+ break;
+ }
+ };
+
+
+ // 채팅방 정보를 저장하는 state(예시 백에서 받아와야함)
+ //나중에 역순으로 할거?
+ const [chatRooms, setChatRooms] = useState([
+ {
+ id: 1,
+ //제목 길이 20자 제한
+ title: "채팅방 메인 타이틀아아아아f",
+ //서브제목 길이 30자 제한
+ subTitle: "dddddddddddddddddddddddddddddddddddddddddddddddddd",
+
+ //방아이디로 조회한다.
+
+ // //나중에 서버로 부터 바는 member이기 때문에 삭제!
+ members: [
+ { gender: "남자", major: "Computer Science", studentId: "20210001", nickname: "John", profileImage: "../../../../asset/ChatRoomPic1.png" },
+ { gender: "여자", major: "Design", studentId: "20210002", nickname: "Jane", profileImage: "../../../../asset/ChatRoomPic2.png" }
+ ],
+ maxMembers: 2,
+ //입장체크
+ enterCheck: false,
+ host: "asdfasdf1234346",
+ maleCount: 1,
+ femaleCount: 1,
+ profileImage: '../../../../asset/ChatRoomPic1.png',
+ status: "Waiting"
+ },
+ {
+ id: 2,
+ title: "프로그래밍 기초",
+ subTitle: "프로그래밍의 기초를 배워봅시다",
+ members: [
+ { gender: "여자", major: "Physics", studentId: "20210003", nickname: "Alice", profileImage: "../../../../asset/ChatRoomPic3.png" },
+ { gender: "여자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" },
+ { gender: "남자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" },
+ { gender: "남자", major: "Mathematicasdfasdfdassdfsssadfsdf", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic4.png" }
+ ],
+ maxMembers: 4,
+ enterCheck: true,
+ host: "asdfasdf1234346",
+ maleCount: 2,
+ femaleCount: 2,
+ profileImage: '../../../../asset/ChatRoomPic1.png',
+ status: "active"
+ },
+ {
+ id: 3,
+ title: "프로그래밍 기초",
+ subTitle: "프로그래밍의 기초를 배워봅시다",
+ members: [
+ { gender: "여자", major: "Physics", studentId: "20210003", nickname: "Alice", profileImage: "../../../../asset/ChatRoomPic4.png" },
+ { gender: "남자", major: "Mathematics", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic5.png" },
+ { gender: "남자", major: "asd", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic6.png" },
+
+ ],
+ maxMembers: 6,
+ enterCheck: false,
+ host: "asdfasdf1234346",
+ maleCount: 2,
+ femaleCount: 1,
+ profileImage: '../../../../asset/ChatRoomPic1.png',
+ status: "Waiting"
+ },
+ {
+ id: 4,
+ title: "프로그래밍 기초",
+ subTitle: "프로그래밍의 기초를 배워봅시다",
+ //사진경로 절대경로로 수정
+ members: [
+ { gender: "여자", major: "Physics", studentId: "20210003", nickname: "Alice", profileImage: "../../../../asset/ChatRoomPic3.png" },
+ { gender: "남자", major: "Mathematics", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic2.png" },
+ { gender: "여자", major: "Mathematics", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic6.png" },
+ { gender: "남자", major: "Mathematics", studentId: "20210004", nickname: "Bob", profileImage: "../../../../asset/ChatRoomPic1.png" },
+ { gender: "여자", major: "asd", studentId: "20210004", nickname: "한준서", profileImage: "../../../../asset/ChatRoomPic5.png" }
+ ],
+ maxMembers: 6,
+ enterCheck: false,
+ host: "asdfasdf1234346",
+ maleCount: 2,
+ femaleCount: 3,
+ profileImage: '../../../../asset/ChatRoomPic1.png',
+ status: "Waiting"
+ }
+ ]);
+
+
+ useEffect(() => {
+ const fetchChatRooms = async () => {
+ try {
+ const data = await fetchChatRoomFetch();
+ const roomsWithMembers = data.rooms.map(room => ({
+ ...room,
+ members: []
+ }));
+ setChatRooms(roomsWithMembers);
+
+ setPossibleEnterNumber(data.possibleEnterNumber);
+ setGender(data.gender);
+ } catch (error) {
+ console.error('Error fetching chat rooms:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchChatRooms();
+ }, []);
+
+
+
+
+
+
+
+
+ const makeChatRoom = () => {
+ //챗룸 만들기로 이동
+ navigate('/makeChatRoom')
+ }
+
+
+
+ if (loading) return (
+
+ );
+
+ return (
+
+
+
+
+
+
+ setIsEnterClick(true)} >참여중
+ setIsEnterClick(false)}>모집중
+
+ {isEnterCheck ?
최대 {possibleEnterNumber}개 방까지 참여 가능합니다 :
}
+
+
+
+
+ {isEnterCheck ? (
+ setIsEnterClick(value)}
+ />
+ ) : (
+ setIsEnterClick(value)}
+ />
+ )}
+
+
+
+
+
+
+
+
handleNavigation('play')}>
+
handleNavigation('talk')}>
+
handleNavigation('my')}>
+
+
+
+ );
+}
+
+export default ChatStartPage;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/ExitDialog.jsx b/src/page/Chat/Dialog/ExitDialog.jsx
new file mode 100644
index 0000000..503f1ce
--- /dev/null
+++ b/src/page/Chat/Dialog/ExitDialog.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { useNavigate } from 'react-router-dom';
+import './dialog.css'
+import { leaveChatRoom } from '../../../api/chatRoom/leaveChatRoom';
+import { sendLeaveMessage, unsubscribeFromRoom } from '../../../api/chatRoom/socket/socketService';
+
+function ExitDialog({ isOpen, onClose, possibleEnterNumber, roomId, socket }) {
+ const navigate = useNavigate();
+ if (!isOpen) return null;
+
+ const exitRoom = async () => {
+ try {
+ await leaveChatRoom(roomId);
+ sendLeaveMessage(socket, roomId);
+ unsubscribeFromRoom(socket, roomId);
+
+ navigate('/chatStartPage');
+ onClose();
+ } catch (error) {
+ console.error("채팅방 나가기 실패:", error);
+ }
+ }
+
+
+ return (
+
+
+
+
+
정말로 채팅방을 나가시겠어요?
+
+ 현재 나의 채팅방 입장 참여 횟수 {possibleEnterNumber}개
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default ExitDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/LeaveDialog.jsx b/src/page/Chat/Dialog/LeaveDialog.jsx
new file mode 100644
index 0000000..0fba53d
--- /dev/null
+++ b/src/page/Chat/Dialog/LeaveDialog.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { useNavigate } from 'react-router-dom';
+import './dialog.css'
+import { deleteUser } from '../../../api/deleteUser';
+
+function LeaveDialog({ isOpen, onClose }) {
+ const navigate = useNavigate();
+ if (!isOpen) return null;
+
+ const exitRoom = async () => {
+ try {
+ const result = await deleteUser();
+ if (result.success) {
+ console.log('User account deleted successfully');
+ // You can add a success message or redirect the user here
+ } else {
+ console.error('Failed to delete user account');
+ // You can add an error message or handle the error here
+ }
+ } catch (error) {
+ console.error('Error deleting user account:', error);
+ // You can add an error message or handle the error here
+ }
+ //chatStartPage로 이동
+ navigate('/');
+ onClose();
+ }
+
+ return (
+
+
+
+
+
정말로 탈퇴하시겠어요?
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default LeaveDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/MaxChanceDialog.jsx b/src/page/Chat/Dialog/MaxChanceDialog.jsx
new file mode 100644
index 0000000..76f9b54
--- /dev/null
+++ b/src/page/Chat/Dialog/MaxChanceDialog.jsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import './dialog.css'
+
+function MaxChanceDialog({ isOpen, onClose, possibleEnterNumber }) {
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+
최대 참여 가능한 채팅방 수가 초과되었습니다
+
+ {/* 로직구현 */}
+ 현재 나의 채팅방 입장 잔여 횟수 {possibleEnterNumber}개
+
+
+
+
+
+ );
+}
+
+export default MaxChanceDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/MaxMemberDialog.jsx b/src/page/Chat/Dialog/MaxMemberDialog.jsx
new file mode 100644
index 0000000..92c0323
--- /dev/null
+++ b/src/page/Chat/Dialog/MaxMemberDialog.jsx
@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+function MaxMemberDialog({ isOpen, onClose }) {
+ if (!isOpen) return null;
+
+ return (
+
+
+
+
+
채팅방 인원이 마감되었습니다
+
+
+
+
+
+
+
+ );
+}
+
+export default MaxMemberDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/OkayDialog.jsx b/src/page/Chat/Dialog/OkayDialog.jsx
new file mode 100644
index 0000000..bd381d8
--- /dev/null
+++ b/src/page/Chat/Dialog/OkayDialog.jsx
@@ -0,0 +1,75 @@
+import { useNavigate } from 'react-router-dom';
+import './dialog.css'
+
+function OkayDialog({ isOpen, onClose, selectChatRoom, possibleEnterNumber }) {
+ const navigate = useNavigate();
+
+ if (!isOpen) return null;
+
+
+ const maxVisibleProfiles = 3;
+ const memberLength = selectChatRoom.members.length;
+ const members = selectChatRoom.members.slice(0, maxVisibleProfiles);
+ const extraProfilesCount = memberLength - maxVisibleProfiles;
+
+ const memberLengthClassName = `member-length-${memberLength}`;
+
+
+
+ const goChatRoom = () => {
+ navigate(`/chat/2`); // 원하는 경로로 이동
+ // navigate(`/chat/${selectChatRoom.id}`); // 원하는 경로로 이동
+ onClose();
+ }
+
+ return (
+
+
+
+
채팅방 메인 타이틀에 입장하시겠습니까?
+
+ {members.map((member, index) => (
+
0) ? '' : `url(${member.profileImage})`
+ }}
+ />
+ ))}
+ {extraProfilesCount > 0 && (
+
+ +{extraProfilesCount}
+
+ )}
+
+
+
+
+ 원활한 서비스 이용을 위해
+ 동시에 최대 3개의 채팅방을 이용할 수 있습니다
+
+
+ 현재 나의 채팅방 입장 참여 횟수 {possibleEnterNumber}개
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default OkayDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/UserintroduceDialog.jsx b/src/page/Chat/Dialog/UserintroduceDialog.jsx
new file mode 100644
index 0000000..4d12959
--- /dev/null
+++ b/src/page/Chat/Dialog/UserintroduceDialog.jsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { fetchAnotherInformation } from '../../../api/chatRoom/fetchAnotherInformation';
+
+function UserIntroduceDialog({ isOpen, onClose, nickname, roomId }) {
+ //유저의 정보를 받아오는 useEffect 사용
+ const [profile, setProfile] = useState({
+ profileImage: "",
+ nickname: "아아",
+ department: "컴공",
+ studentId: "202001485",
+ shortIntroduce: "안녕하세요",
+ mbti: "INFJ",
+ height: "180",
+ drinking: "소주3병마심",
+ smoking: "1갑"
+ });
+
+
+ useEffect(() => {
+ const fetchIntroduceItems = async () => {
+ try {
+ const userData = await fetchAnotherInformation(nickname, roomId);
+ setProfile(userData);
+ } catch (error) {
+ console.error('Error fetching user info:', error);
+ }
+ };
+ fetchIntroduceItems();
+ }, [nickname, roomId]);
+
+
+
+
+
+
+ if (!isOpen) return null;
+
+
+
+ return (
+
+
+
+
+
+
+
{profile.nickname}
+
{profile.department} {profile.studentId.slice(1, 3)}학번
+
+
{profile.shortIntroduce}
+
+
+
+
+ {/* 유저를통한 로직추가 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default UserIntroduceDialog;
\ No newline at end of file
diff --git a/src/page/Chat/Dialog/dialog.css b/src/page/Chat/Dialog/dialog.css
new file mode 100644
index 0000000..3e3e3fd
--- /dev/null
+++ b/src/page/Chat/Dialog/dialog.css
@@ -0,0 +1,483 @@
+.dialog {
+
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ background: rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ left: 0px;
+
+ .dialog-backdrop {
+
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+
+ z-index: 1000;
+ /* 앞으로 오게 하기 위해 z-index 값 추가 */
+
+ /* Group 816134 */
+
+ position: absolute;
+ width: 343px;
+ height: 330px;
+ left: calc(50% - 343px/2);
+ top: 199px;
+ }
+
+ .dialog-container {
+ background-color: white;
+ border-radius: 20px;
+ width: 343px;
+ height: 330px;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+
+
+ }
+
+ .dialog-icon {
+ margin-top: 32px;
+ margin-bottom: 32px;
+ }
+
+ .dialog-title {
+ /* 최대 참여 가능 채팅방 수가 초과되었습니다 */
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+ margin-bottom: 0;
+ /* identical to box height, or 112% */
+
+
+ color: #3D3D3D;
+ }
+
+ .dialog-message {
+ margin-top: 3px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ /* identical to box height, or 117% */
+
+
+ color: #3D3D3D;
+ }
+
+ .highlight-text {
+ color: #FF7898;
+ font-weight: bold;
+ }
+
+
+
+ .dialog-button {
+ background-color: #F5F5F5;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 20px;
+ color: #3D3D3D;
+ border: none;
+ border-radius: 14px;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ margin: 10px 31px 0 31px;
+ }
+
+ .dialog-button:hover {
+ background-color: #FF7898;
+ }
+
+
+ .dialog-okay-title {
+ /* 에 입장하시겠습니까? */
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 18px;
+ /* identical to box height, or 112% */
+ margin-top: 30px;
+ align-items: center;
+ color: #3D3D3D;
+ }
+
+ .button-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ }
+
+ .dialog-button-cancle {
+ /* Rectangle 3470049 */
+ width: 136px;
+ height: 44px;
+ border: none;
+ background: #F5F5F5;
+ border-radius: 14px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 20px;
+ color: #3D3D3D;
+ }
+
+ .dialog-button-pink {
+ /* Rectangle 3470049 */
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 20px;
+ color: #FFFFFF;
+ width: 136px;
+ height: 44px;
+ border: none;
+ background: #FF7898;
+ border-radius: 14px;
+ }
+
+
+ .dialog-icon-container {
+ margin-top: 15px;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ }
+
+ /*원이 3개이상*/
+ .profile-icon-0 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #A0A0A0;
+ left: 60px;
+ top: 0;
+ z-index: 0;
+ }
+
+ .profile-icon-1 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #BBBBBB;
+ left: 0;
+ top: 0;
+ z-index: 1;
+ }
+
+ .profile-icon-2 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #F5F5F5;
+ left: -60px;
+ top: 0;
+ z-index: 2;
+ }
+
+ /*원이 2개*/
+ .profile-icon-0.member-length-2 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #A0A0A0;
+ left: 30px;
+ top: 0;
+ z-index: 0;
+ }
+
+ .profile-icon-1.member-length-2 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #BBBBBB;
+ left: -30px;
+ top: 0;
+ z-index: 1;
+ }
+
+ /*원이 1개*/
+ .profile-icon-0.member-length-1 {
+ width: 96px;
+ height: 96px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 50%;
+ position: relative;
+ background-color: #A0A0A0;
+ left: 0px;
+ top: 0;
+ z-index: 0;
+ }
+
+
+ .extra-profile-count {
+
+ /* +2 */
+
+ position: absolute;
+ width: 17px;
+ height: 16px;
+ left: 200px;
+ top: 118px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ /* identical to box height, or 114% */
+ display: flex;
+ align-items: center;
+ text-align: center;
+
+ color: #606060;
+ z-index: 3;
+
+ }
+
+ .okayDialog-container {
+ display: flex;
+ flex-direction: column;
+ margin-left: 47px;
+ }
+
+ .dialog-message-2 {
+ /* 원활한 서비스 이용을 위해 동시에 최대 3개의 채팅방을 이용할 수 있습니다 */
+ margin-top: 15px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 18px;
+ /* or 150% */
+ margin-bottom: 0px;
+ color: #777777;
+
+ display: flex;
+ justify-content: start;
+ flex-direction: column;
+ text-align: left;
+ }
+
+ .dialog-message.okay {
+ margin-top: 0px;
+ margin-bottom: 16px;
+ text-align: left;
+ }
+}
+
+
+.userIntroduceDialog {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ background: rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ left: 0px;
+ display: flex;
+ justify-content: center;
+
+ .dialog-backdrop {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ position: absolute;
+ width: 375px;
+ height: 558px;
+ top: 254px;
+ }
+
+ .dialog-container {
+ background-color: white;
+ border-radius: 20px;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ display: flex;
+ flex-direction: column;
+
+
+ }
+
+
+ .dialog-title {
+ /* 최대 참여 가능 채팅방 수가 초과되었습니다 */
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+ margin-bottom: 0;
+ /* identical to box height, or 112% */
+ margin-top: 10px;
+
+ color: #3D3D3D;
+ }
+
+ .dialog-message {
+ margin-top: 3px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ color: #777777;
+ }
+
+
+ .button-container {
+ margin-top: 30px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ }
+
+
+
+
+ .dialog-button-cancle {
+ /* Rectangle 3470049 */
+ width: 136px;
+ height: 44px;
+ border: none;
+ background-color: #F5F5F5;
+ border-radius: 14px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 20px;
+ cursor: pointer;
+ color: #3D3D3D;
+ }
+
+
+ .dialog-button-cancle:hover {
+ background-color: #FF7898;
+ color: #F5F5F5;
+ }
+
+ .profile-image-container {
+ margin-top: 50px;
+ }
+
+ .profile-image-container img {
+ width: 128px;
+ height: 128px;
+ border-radius: 50%;
+ }
+
+ .introduction-container {
+ margin: 10px auto;
+ margin-bottom: 30px;
+ width: 343px;
+ height: 46px;
+ background: #F5F5F5;
+ border-radius: 10px;
+ align-items: center;
+ display: flex;
+ }
+
+ .introduction {
+ /* 한 줄 소개 안녕하세요~~~~ */
+ width: 100%;
+ height: 16px;
+ padding: 0 20px;
+ text-align: left;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+
+ color: #3D3D3D;
+ }
+
+ .additional-info-container {
+ margin: 0 20px;
+ padding: 0 10px;
+ background: #F5F5F5;
+ border-radius: 10px;
+
+ }
+
+ .additional-info {
+ width: 100%;
+ height: 100%;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ padding: 10px;
+ gap: 7px;
+ }
+
+ .additional-info div {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .additional-info .first {
+
+ width: 45px;
+ height: 16px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+
+
+ color: #3D3D3D;
+ }
+
+ .additional-info .second {
+
+ width: 269px;
+ height: 16px;
+ margin-left: 10px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+
+
+ color: #3D3D3D;
+ }
+
+}
\ No newline at end of file
diff --git a/src/page/Chat/EnterCheckPage.jsx b/src/page/Chat/EnterCheckPage.jsx
new file mode 100644
index 0000000..00c0129
--- /dev/null
+++ b/src/page/Chat/EnterCheckPage.jsx
@@ -0,0 +1,226 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from 'react-router-dom';
+import './ChatPage.css'
+import { roomStart } from '../../api/chatRoom/roomStart'
+import { fetchRoomParticipants } from '../../api/chatRoom/fetchRoomParticipants';
+
+function EnterCheckPage(props) {
+ const { chatRooms, isEnterCheck } = props;
+ const [expandedRoomIds, setExpandedRoomIds] = useState([]);
+ const [updatedChatRooms, setUpdatedChatRooms] = useState(
+ chatRooms.filter(room => room.enterCheck === true)
+ );
+
+ const navigate = useNavigate();
+
+ //새로고침
+ const [startY, setStartY] = useState(0);
+ const [translateY, setTranslateY] = useState(0);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+ const threshold = 80; // 새로고침을 트리거하는 기준 거리
+
+ // 새로고침 함수
+ const handleRefresh = () => {
+ setIsRefreshing(true);
+ setTimeout(() => {
+ setIsRefreshing(false);
+ isEnterCheck(true); // enterCheck를 true로 설정
+ }, 1500);
+ };
+
+ // 터치 시작
+ const handleTouchStart = (event) => {
+ setStartY(event.touches[0].clientY);
+ };
+
+ // 터치 중일 때
+ const handleTouchMove = (event) => {
+ const currentY = event.touches[0].clientY;
+ const distance = currentY - startY;
+
+
+ // 스크롤이 최상단일 때만 동작
+ if (window.scrollY === 0 && distance > 0) {
+ setTranslateY(distance * 0.3); // 끌린 만큼 translateY 값을 설정
+ }
+
+ // 기준 거리를 넘었을 때 새로고침
+ if (distance > threshold) {
+ handleRefresh();
+ }
+ };
+
+ // 터치 끝
+ const handleTouchEnd = () => {
+ setTranslateY(0); // 터치가 끝나면 원래 위치로 돌아가기
+ };
+
+
+
+ //토글확장 관리
+ const toggleExpand = (roomId) => {
+ setExpandedRoomIds(prevState =>
+ prevState.includes(roomId)
+ ? prevState.filter(id => id !== roomId)
+ : [...prevState, roomId]
+ );
+ console.log(expandedRoomIds)
+ };
+
+
+
+ const goChatRoom = (roomId) => {
+ console.log(roomId)
+ navigate(`/chat/${roomId}`);
+ //navigate(`/chat/${roomId}`); // 원하는 경로로 이동
+ }
+
+ // 수정된 handleButtonClick 함수
+ const handleButtonClick = async (event, room) => {
+ // console.log(room)
+ //console.log("sdafdddddddddddffdfdfsdfsdfdsfsdfdsfsdfsdfsdfsdf")
+ if (room.members.length < room.maxMembers) {
+ event.stopPropagation(); // 이벤트 버블링을 막음
+ } else {
+ event.stopPropagation();
+ const started = await roomStart(room.id);
+ if (started) {
+ goChatRoom(room.id);
+ } else {
+ // 시작 실패 시 에러 처리 (예: 알림 표시)
+ console.error('Failed to start the room');
+ }
+ }
+ };
+
+
+
+
+ useEffect(() => {
+ if (expandedRoomIds.length > 0) {
+ const updateMembers = async () => {
+ const updatedRooms = await Promise.all(
+ updatedChatRooms.map(async (room) => {
+ if (room.id === expandedRoomIds[expandedRoomIds.length - 1]) {
+ const updatedMembers = await fetchRoomParticipants(room.id);
+ return {
+
+ ...room,
+ members: updatedMembers,
+ maleCount: updatedMembers.filter(member => member.gender === "남자").length,
+ femaleCount: updatedMembers.filter(member => member.gender === "여자").length
+ };
+ }
+ return room;
+ })
+ );
+
+ setUpdatedChatRooms(updatedRooms);
+ };
+
+ updateMembers();
+ }
+ }, [expandedRoomIds, isEnterCheck, chatRooms]);
+
+
+
+ return (
+
+ {isRefreshing &&
}
+ {updatedChatRooms
+ .map(room => {
+ const maleCount = room.maleCount;
+ const femaleCount = room.femaleCount;
+
+ const isExpanded = expandedRoomIds.includes(room.id); // 현재 방이 확장되었는지 확인
+ return (
+
+
goChatRoom(room.id)}>
+
+
+
+
+
+ {/* /사진수정/ */}
+
+
{room.title}
+
남: {maleCount} 여: {femaleCount}
+
{room.subTitle}
+
+
toggleExpand(room.id)}>
+
+ 참여인원 보기
+ {!isExpanded ? :
+ }
+
+
+ {/* 확장된 상태일 때만 멤버 리스트를 렌더링 */}
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ )
+}
+
+
+export default EnterCheckPage;
\ No newline at end of file
diff --git a/src/page/Chat/MakeChatRoom/MakeChatRoom.css b/src/page/Chat/MakeChatRoom/MakeChatRoom.css
new file mode 100644
index 0000000..bf09277
--- /dev/null
+++ b/src/page/Chat/MakeChatRoom/MakeChatRoom.css
@@ -0,0 +1,255 @@
+.makeChatRoom {
+
+ height: 812px;
+ width: 375px;
+ margin: 0 auto;
+
+ .margin-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ margin: 0 10px;
+ }
+
+ .title {
+ width: 100%;
+ height: 46px;
+ margin-top: 50px;
+ background: #ffffff;
+ display: flex;
+ text-align: center;
+ margin-left: 6px;
+ justify-content: space-between;
+ }
+
+ .title-name {
+ /* 채팅방 이름 */
+
+ padding-top: 15px;
+ width: 120px;
+ height: 18px;
+
+ cursor: pointer;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+ /* identical to box height, or 112% */
+ display: flex;
+ align-items: center;
+
+ color: #3D3D3D;
+
+
+ }
+
+ .small-title {
+ /* 채팅방 정보 */
+ margin-top: 20px;
+ width: 73px;
+ height: 18px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+
+ color: #3D3D3D;
+
+ }
+
+ .top {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+ height: 80px;
+ margin-bottom: 20px;
+ justify-content: space-between;
+
+ }
+
+
+ .chat-room-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 5px;
+ }
+
+
+
+ .top img {
+ border: 1px solid #ccc;
+ border-radius: 50%;
+ width: 80px;
+ height: 100%;
+ /* background-color: none; */
+ }
+
+
+ .edit-avatar {
+ border: 1px solid #ccc;
+ border-radius: 50%;
+ position: relative;
+ width: 20px;
+ height: 20px;
+ left: -110px;
+ top: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #F5F5F5;
+ }
+
+ .chat-room-name {
+
+
+ width: 230px;
+ background: #F5F5F5;
+ border-radius: 10px;
+ margin: auto 0px;
+ height: 50px;
+ border: 1px solid #ccc;
+ padding: 0 10px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: #777777;
+ }
+
+ .chat-room-description {
+
+ width: 335px;
+ height: 100px;
+
+ background: #F5F5F5;
+ border-radius: 10px;
+
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ font-size: 14px;
+
+
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ padding: 10px;
+ color: #777777;
+ }
+
+ .members-settings {
+ margin-top: 50px;
+ margin-bottom: 20px;
+ }
+
+ .small-title2 {
+ width: 73px;
+ height: 18px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 18px;
+ margin-bottom: 30px;
+ color: #3D3D3D;
+ }
+
+ .gender-settings {
+ margin-left: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+
+ .gender-settings div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .gender-settings span {
+
+ width: 25px;
+ height: 16px;
+
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+
+
+ color: #3D3D3D;
+ }
+
+
+
+ .count-button {
+
+ padding: 5px 15px;
+ border-radius: 20px;
+ border: 1px solid #ccc;
+ background-color: #fff;
+ cursor: pointer;
+ }
+
+ .count-button.active {
+ background-color: #FF7898;
+ border-color: #ccc;
+ color: #F5F5F5;
+ }
+
+
+
+ .note {
+ margin-top: 50px;
+ font-size: 12px;
+ color: #888;
+ margin-bottom: 20px;
+ }
+
+ .create-room-button {
+ /* Rectangle 13 */
+ margin: 5px auto;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 20px;
+ color: #FFFFFF;
+ background: #FF7898;
+ width: 343px;
+ height: 50px;
+ background: #FF7898;
+ border-radius: 5px;
+ border: none;
+ }
+
+ .create-room-button:hover {
+ background-color: #FF7898;
+ }
+
+ .error {
+ margin-left: 7px;
+ font-family: 'Pretendard';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ display: flex;
+ align-items: center;
+ color: #FF3131;
+ }
+
+}
\ No newline at end of file
diff --git a/src/page/Chat/MakeChatRoom/MakeChatRoom.jsx b/src/page/Chat/MakeChatRoom/MakeChatRoom.jsx
new file mode 100644
index 0000000..609dd7a
--- /dev/null
+++ b/src/page/Chat/MakeChatRoom/MakeChatRoom.jsx
@@ -0,0 +1,224 @@
+import React, { useState, useRef } from "react";
+import './MakeChatRoom.css'
+import { useNavigate } from 'react-router-dom';
+import Pic1 from '../../../asset/ChatRoomPic1.png'
+import Pic2 from '../../../asset/ChatRoomPic2.png'
+import Pic3 from '../../../asset/ChatRoomPic3.png'
+import Pic4 from '../../../asset/ChatRoomPic4.png'
+import Pic5 from '../../../asset/ChatRoomPic5.png'
+import Pic6 from '../../../asset/ChatRoomPic6.png'
+import { makeChatRoom } from '../../../api/chatRoom/makeChatRoom';
+
+
+
+function MakeChatRoom() {
+
+ const profileImages = [
+ Pic1, Pic2, Pic3, Pic4, Pic5, Pic6
+ ]
+ const getRandomImage = () => {
+ return profileImages[Math.floor(Math.random() * profileImages.length)];
+ };
+
+ const navigate = useNavigate();
+
+ const [count, setCount] = useState(3);
+ const [roomTitle, setRoomTitle] = useState('');
+ const [subTitle, setSubTitle] = useState('');//30자 이내로 제한
+ const [profileImage, setProfileImage] = useState(getRandomImage());
+ const [error, setError] = useState('');
+
+ const handleNavigation = (destination) => {
+ switch (destination) {
+ case 'play':
+ window.location.reload();
+ break;
+ case 'talk':
+ navigate('/ChatStartPage'); // 페이지 새로고침 (필요에 따라 이 부분을 변경)
+ break;
+ case 'my':
+ navigate('/myPage');
+ break;
+ default:
+ break;
+ }
+ };
+
+ const fileInputRef = useRef(null);
+
+ const handleImageClick = () => {
+ fileInputRef.current.click();
+ };
+
+ const handleImageChange = (event) => {
+ const file = event.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setProfileImage(reader.result);
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
+
+ const handleTitleChange = (e) => {
+ if (e.target.value.length <= 20) {
+ setRoomTitle(e.target.value);
+ }
+ };
+
+ const handleSubTitleChange = (e) => {
+ if (e.target.value.length <= 50) {
+ setSubTitle(e.target.value);
+ }
+ };
+
+ const makeRoom = async () => {
+ if (roomTitle === '' || subTitle === '') {
+ setError('모든 필드를 입력해 주세요.');
+ return;
+ }
+
+ try {
+ const numberOfMembers = count * 2;
+ const roomData = {
+ title: roomTitle,
+ subTitle: subTitle,
+ profileImage: profileImage,
+ maxMembers: numberOfMembers,
+ maleCount: count,
+ femaleCount: count
+ };
+
+ await makeChatRoom(roomData);
+ console.log("Room Created");
+ navigate('/ChatStartPage');
+ setError('');
+ } catch (error) {
+ setError(error.message);
+ }
+ };
+
+
+
+
+ return (
+ <>
+
+
+
+
navigate('/ChatStartPage')} >
+
+
+ 채팅방 만들기
+
+
+
+
+
채팅방 정보
+
+
+
+
+
+
+
+
+
+
+
+
인원 설정
+
+
+ 남자
+ {[2, 3, 4, 5].map(cnt => (
+
+ ))}
+
+
+
+ 여자
+ {[2, 3, 4, 5].map(cnt => (
+
+ ))}
+
+
+
+
+
+ {/* 로직추가 */}
+ - 생성된 채팅방은 30일 후에 자동으로 종료됩니다.
+
+
+ {/* Display error message if needed */}
+ {error &&
+ {error}
}
+
+
+
+
+
+
+
+
+
handleNavigation('play')}>
+
handleNavigation('talk')}>
+
handleNavigation('my')}>
+
+
+
+
+
+
+ );
+}
+
+export default MakeChatRoom;
\ No newline at end of file
diff --git a/src/page/Chat/NoEnterCheckPage.jsx b/src/page/Chat/NoEnterCheckPage.jsx
new file mode 100644
index 0000000..f7f985e
--- /dev/null
+++ b/src/page/Chat/NoEnterCheckPage.jsx
@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from "react";
+import './ChatPage.css'
+import OkayDialog from './Dialog/OkayDialog'
+import MaxMemberDialog from './Dialog/MaxMemberDialog'
+import MaxChanceDialog from './Dialog/MaxChanceDialog'
+import { fetchRoomParticipants } from "../../api/chatRoom/fetchRoomParticipants";
+
+function NoEnterCheckPage(props) {
+ const { chatRooms, possibleEnterNumber, gender, isEnterCheck } = props;
+ const [expandedRoomIds, setExpandedRoomIds] = useState([]);
+ const [okayDialog, setOkayDialog] = useState(false);
+ const [maxMemberDialog, setMaxMemberDialog] = useState(false);
+ const [maxChanceDialog, setMaxChanceDialog] = useState(false);
+ const [selectChatRoom, setSelectChatRoom] = useState(false);
+
+
+ const [updatedChatRooms, setUpdatedChatRooms] = useState(
+ chatRooms.filter(room => room.enterCheck === false)
+ );
+
+
+
+
+ //새로고침
+ const [startY, setStartY] = useState(0);
+ const [translateY, setTranslateY] = useState(0);
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+
+
+ const threshold = 80; // 새로고침을 트리거하는 기준 거리
+
+ // 새로고침 함수
+ const handleRefresh = () => {
+ setIsRefreshing(true);
+ setTimeout(() => {
+ setIsRefreshing(false);
+ isEnterCheck(false); // 페이지 새로고침 (필요에 따라 이 부분을 변경)
+ }, 1500);
+ };
+
+ // 터치 시작
+ const handleTouchStart = (event) => {
+ setStartY(event.touches[0].clientY);
+ };
+
+ // 터치 중일 때
+ const handleTouchMove = (event) => {
+ const currentY = event.touches[0].clientY;
+ const distance = currentY - startY;
+
+
+ // 스크롤이 최상단일 때만 동작
+ if (window.scrollY === 0 && distance > 0) {
+ setTranslateY(distance * 0.3); // 끌린 만큼 translateY 값을 설정
+ }
+
+ // 기준 거리를 넘었을 때 새로고침
+ if (distance > threshold) {
+ handleRefresh();
+ }
+ };
+
+ // 터치 끝
+ const handleTouchEnd = () => {
+ setTranslateY(0); // 터치가 끝나면 원래 위치로 돌아가기
+ };
+
+
+ useEffect(() => {
+ if (expandedRoomIds.length > 0) {
+ const updateMembers = async () => {
+ const updatedRooms = await Promise.all(
+ updatedChatRooms.map(async (room) => {
+ if (room.id === expandedRoomIds[expandedRoomIds.length - 1]) {
+ const updatedMembers = await fetchRoomParticipants(room.id);
+ return {
+
+ ...room,
+ members: updatedMembers,
+ maleCount: updatedMembers.filter(member => member.gender === "남자").length,
+ femaleCount: updatedMembers.filter(member => member.gender === "여자").length
+ };
+ }
+ return room;
+ })
+ );
+
+ setUpdatedChatRooms(updatedRooms);
+ };
+
+ updateMembers();
+ }
+ }, [expandedRoomIds, isEnterCheck, chatRooms]);
+
+
+ //전에꺼
+ // // expandedRoomIds가 변경될 때마다 서버에서 members를 가져와 업데이트하는 useEffect
+ // useEffect(() => {
+ // if (expandedRoomIds.length > 0) {
+ // const fetchRoomDetails = async (roomId) => {
+ // try {
+ // const response = await api.get(`/api/chatroom/participants/${roomId}`);
+ // return response.data; // 서버로부터 members를 받아옴
+ // } catch (error) {
+ // console.error(`Error fetching room details for roomId: ${roomId}`, error);
+ // return [];
+ // }
+ // };
+
+ // const updateMembers = async () => {
+ // const updatedRooms = await Promise.all(
+ // chatRooms.map(async (room) => {
+ // if (room.id === expandedRoomIds[expandedRoomIds.length - 1]) {
+ // const updatedMembers = await fetchRoomDetails(room.id);
+ // return { ...room, members: updatedMembers };
+ // }
+ // console.log(updatedChatRooms);
+ // return room;
+ // })
+ // );
+
+ // setUpdatedChatRooms(updatedRooms);
+ // };
+
+ // updateMembers();
+ // }
+ // }, [expandedRoomIds,isEnterCheck]); // expandedRoomIds가 변경될 때마다
+
+
+
+
+
+
+
+ const toggleExpand = (roomId) => {
+ setExpandedRoomIds(prevState =>
+ prevState.includes(roomId)
+ ? prevState.filter(id => id !== roomId) // 이미 확장된 상태면 닫기
+ : [...prevState, roomId] // 확장되지 않았다면 추가
+ );
+ };
+
+ const enterCheckMessage = (chatRoom) => {
+ const halfMaxMembers = Math.floor(chatRoom.maxMembers / 2); // 최대 인원의 절반 계산
+ let maleCount = chatRoom.maleCount;
+ let femaleCount = chatRoom.femaleCount;
+
+ // 유저가 남자일 때: 남성 인원이 절반보다 적으면 true
+ if (gender === "남자" && maleCount < halfMaxMembers) {
+ return true;
+ }
+
+ // 유저가 여자일 때: 여성 인원이 절반보다 적으면 true
+ if (gender === "여자" && femaleCount < halfMaxMembers) {
+ return true;
+ }
+
+ // 그 외에는 참가 불가
+ return false;
+ };
+
+ const dialogOpen = (room) => {
+ if (!enterCheckMessage(room)) {
+ setMaxMemberDialog(true);
+ } else if (possibleEnterNumber === 0) {
+ setMaxChanceDialog(true)
+ } else {
+ setSelectChatRoom(room)
+ setOkayDialog(true);
+ }
+ }
+
+
+
+
+
+
+
+
+ return (
+ <>
+ {/* 다이얼로그 컴포넌트들 */}
+
setOkayDialog(false)} />
+ setMaxMemberDialog(false)} />
+ setMaxChanceDialog(false)} />
+
+
+ {isRefreshing &&
}
+
+ {updatedChatRooms
+ .map(room => {
+ const maleCount = room.maleCount;
+ const femaleCount = room.femaleCount;
+
+ const isExpanded = expandedRoomIds.includes(room.id); // 현재 방이 확장되었는지 확인
+ return (
+
+
dialogOpen(room)}>
+ {enterCheckMessage(room) ?
참여가능
:
참여불가
}
+
{room.title}
+
+ 남 {enterCheckMessage(room) ? {maleCount} : {maleCount}}/{room.maxMembers / 2}
+ 여 {enterCheckMessage(room) ? {femaleCount} : {femaleCount}}/{room.maxMembers / 2}
+
+
+
{room.subTitle}
+
+
toggleExpand(room.id)}>
+
+ 참여인원 보기
+ {!isExpanded ? :
+ }
+
+
+ {/* 확장된 상태일 때만 멤버 리스트를 렌더링 */}
+
+
+
+ );
+ })}
+
+
+
+
+
+
비밀번호를 입력해주세요
+
가입하실 때 설정한 비밀번호를 입력하세요
+
+
{
+ setPassword(e.target.value);
+ setError(""); // 에러 메시지 초기화
+ }}
+ />
+ {error && (
+
{error}
// 에러 메시지 출력
+ )}
+
+
+
+
+
+
+
+
+
+
+
학교 이메일을 입력해 주세요
+
안전한 인피 활동을 위해 학교 인증이 필요해요
+
+
+
+
+
+
+
+
+
+
+
+
인증 메일이 보내졌습니다
+
인증 번호 6자리를 입력해주세요
+
+
+ {code.map((digit, index) => (
+ handleInputChange(e.target, index)}
+ onKeyDown={(e) => handleKeyDown(e, index)} // onKeyDown 이벤트 추가
+ onFocus={(e) => e.target.select()}
+ />
+ ))}
+
+
+ 메일을 못받으셨나요?
+ 다시 받기
+
+
+
+
+
+
+
+
+
+
+
비밀번호를 설정해주세요
+
영문, 숫자, 특수문자를 조합하여 8자 이상으로 설정해주세요
+
+
+
+ {/* 비밀번호 유효성 검사 에러 메시지 */}
+
+ {passwordError}
+
+
+
+
+
+
+ {/* 비밀번호 확인 에러 메시지 */}
+
+ {confirmPasswordError}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
닉네임을 입력해주세요
+
한글로만 2자 이상, 20자 이하로 가능해요
+
+
{
+ setNickname(e.target.value);
+ setIsNicknameChecked(false); // 닉네임이 변경될 때마다 중복 확인 초기화
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
춘식이님의 성별을 알려주세요
+
+
handleGenderSelect('남성')}
+ >
+
+
+
남성
+
+
+
handleGenderSelect('여성')}
+ >
+
+
+
여성
+
+
+
+
+
+
+
+
+
+
+
+
+
춘식이님에 대해 알려주세요
+
학번 9자리를 입력해주세요
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
춘식이님의 생일을 알려주세요
+
+
+
+
+
+
+
- 메인
-
- )
-}
+// 시작화면
+function Main() {
+ const navigate = useNavigate(); // useNavigate 훅 사용
+
+ //로컬스토리지 확인후 로그인 페이지 혹은 회원가입 페이지로 이동
+ const handleButtonClick = () => {
+ if (localStorage.getItem('userEmail')) {
+ navigate('../Login'); // '/next' 경로로 이동
+ } else {
+ navigate('../Login1'); // '/next' 경로로 이동
+ //navigate('../SignUp'); // '/next' 경로로 이동
+ }
+ };
+
+
+ return (
+
+
+
+
+
-export default Main;
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
당신의 횃불이 유형은?
+
+
+
+
+
handleNavigation('play')}>
+
handleNavigation('talk')}>
+
handleNavigation('my')}>
+
+
);
};
diff --git a/src/page/Mbti/Mbti1.jsx b/src/page/Mbti/Mbti1.jsx
index 2a5d7a2..6ab37c5 100644
--- a/src/page/Mbti/Mbti1.jsx
+++ b/src/page/Mbti/Mbti1.jsx
@@ -1,16 +1,53 @@
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
import { IoChevronBack } from "react-icons/io5"; // 아이콘 추가
import Question from "./Question";
import "./Mbti.css";
import { useNavigate } from "react-router-dom";
-
+import { MbtiContext } from "../../context/MbitContext";
function Mbti1(){
+ const { Mbti, updateMbti } = useContext(MbtiContext);
+ const [isa1Checked,setIsa1Checked]=useState(false);
+ const [isa2Checked,setIsa2Checked]=useState(false);
+ const [selectedAnswer, setSelectedAnswer] = useState(null); // 선택된 답변 상태
+ const selectedValue1 = Mbti.selectList["1"];
const navigate = useNavigate();
+ useEffect(() =>{
+ if(selectedValue1){
+ setIsa1Checked(true);
+ setIsa2Checked(false);
+ }
+ else{
+ setIsa1Checked(false);
+ setIsa2Checked(true);
+ }
+ },[selectedValue1])
+
+
+
+ // 사용자가 선택한 답변을 업데이트하는 함수
+ const handleAnswerSelected = (answer) => {
+ setSelectedAnswer(answer); // 선택된 답변을 상태로 저장
+ };
+
const handleBack = () => {
+ if (selectedAnswer === 1) { //1번선택하면 e+1
+ updateMbti({ selectList: { ...Mbti.selectList, "1": true } });
+ console.log("Context updated:");
+
+ } else if (selectedAnswer === 2) {
+ updateMbti({selectList: { ...Mbti.selectList, "1": false } });
+ }
navigate("/mbti"); // 이전 페이지로 이동
};
const handleNext = () => {
+ if (selectedAnswer === 1) {
+ updateMbti({ selectList: { ...Mbti.selectList, "1": true } });
+ console.log("Context updated:");
+
+ } else if (selectedAnswer === 2) {
+ updateMbti({ selectList: { ...Mbti.selectList, "1": false } });
+ }
navigate("/mbti2");
};
@@ -27,9 +64,12 @@ function Mbti1(){