+
diff --git a/src/forpractice/ForPractice.tsx b/src/forpractice/ForPractice.tsx
index 953d550..52dfb88 100644
--- a/src/forpractice/ForPractice.tsx
+++ b/src/forpractice/ForPractice.tsx
@@ -1,10 +1,5 @@
-
-import { Loading } from "../components/Loading"
-import { Intro2 } from "../pages/roommatelist/Intro2"
-import { RoommateOption } from "../pages/roommatelist/RoommateOption"
-import { Card73 } from "../pages/roommatelist/components/Card73"
-export function ForPractice() {
+export const ForPractice = () => {
return (
-
{title}
ssf
)
}
\ No newline at end of file
diff --git a/src/pages/chat/ChatList.tsx b/src/pages/chat/ChatList.tsx
index d4fb1b8..e422303 100644
--- a/src/pages/chat/ChatList.tsx
+++ b/src/pages/chat/ChatList.tsx
@@ -2,83 +2,83 @@ import { Avatar, Stack } from "@mui/material";
import { Link } from "react-router-dom";
export function ChatList() {
- const nickname = "모글리"
- return (
-
- ();
+ const [inputHeight, setInputHeight] = useState(60); // 초기값은 입력 부분의 높이
+ //const [msgInput, setMsgInput] = useState('');
+ const [msg, setMsg] = useState('');
+ const [chat, setChat] = useState([]);
+ //const message="안녕하세요! "
+ const [name, setName] = useState('');
+ const [chkLog, setChkLog] = useState(false);
+ const [socketData, setSocketData] = useState();
+ const ws = useRef(null);
+
+
+
+
+ const messageStyle = {
+ maxWidth:' 70%',
+
+ //`${message.length * 15}px`, // 예시: 글자 수에 따라 동적으로 설정
+ };
+
+ useEffect(() => {
+ const fetchNickname = async () =>{
+ try{
+ const response = await fetch(`http://localhost:8080/nickname`,{
+ method: 'GET',
+ credentials: 'include',
+ });
+
+ // Check if login is successful, then redirect to StarPage
+ if (response.ok) {
+ const nicknameData = await response.text();
+ console.log(nicknameData);
+ setName(nicknameData);
+ console.log(name);
+ }else{
+ console.error('Failed to fetch nickname : ',response.status, response.statusText);
+ }
+ } catch (error) {
+ console.error('Failed to fetch nickname : ', error);
+ }
+ };
+ fetchNickname();
+ },[]);
+
+ useEffect(() => {
+ const handleResize = () => {
+ setInputHeight(window.innerHeight * 0.1); // 예시: 뷰포트 높이의 10%
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+ const handleInputChange = (e:any) => {
+ // 여기에서 메시지 전송 로직을 구현하면 됩니다.
+ // 메시지 변수에는 입력된 메시지가 들어 있습니다.
+
+ setMsg(e.target.value)
+ };
+
+
+ const webSocketLogin = useCallback(() => {
+ // @ts-ignore
+ ws.current = new WebSocket(`ws://localhost:8080/socket/chatt/${apply_id}`);
+// @ts-ignore
+ ws.current.onopen = () => {
+ console.log('WebSocket connection opened');
+ };
+// @ts-ignore
+ ws.current.onmessage = (message) => {
+ console.log('WebSocket message received:', message.data);
+ const newMessage = JSON.parse(message.data);
+ // @ts-ignore
+ setChat((prevChat) => {
+ const newChat = [...prevChat, newMessage];
+ console.log('New chat state:', newChat); // 로깅 추가
+ return newChat;
+ });
+ };
+// @ts-ignore
+ ws.current.onclose = (event: any) => {
+ console.log('WebSocket connection closed:', event);
+ };
+// @ts-ignore
+ ws.current.onerror = (error: any) => {
+ console.error('WebSocket error:', error);
+ };
+ }, [apply_id]);
+
+
+ const handleSendMessage = useCallback(() => {
+ console.log('전송된 메시지:', msg);
+ if (!chkLog) {
+ if (name === '') {
+ alert('이름을 입력하세요.');
+ // @ts-ignore
+ document.getElementById('name').focus();
+ return;
+ }
+ webSocketLogin();
+ setChkLog(true);
+ }
+
+ if (msg !== '') {
+ const data = {
+ name,
+ msg,
+ date: new Date().toLocaleString(),
+ };
+
+ const temp = JSON.stringify(data);
+
+ // @ts-ignore
+ if (ws.current.readyState === WebSocket.OPEN) {
+ // @ts-ignore
+ ws.current.send(temp);
+ } else {
+ console.warn('WebSocket is not open, waiting for connection to open...');
+ // Wait for the connection to open
+ setTimeout(() => {
+ // Check again and send the message if the connection is open
+ // @ts-ignore
+ if (ws.current.readyState === WebSocket.OPEN) {
+ // @ts-ignore
+ ws.current.send(temp);
+ } else {
+ console.error('WebSocket is still not open. Message not sent.');
+ }
+ }, 1000); // Adjust the timeout duration as needed
+ }
+ } else {
+ alert('메세지를 입력하세요.');
+ // @ts-ignore
+ document.getElementById('msg').focus();
+ return;
+ }
+ setMsg('');
+ }, [chkLog, msg, name, webSocketLogin]);
+
+ const buttonColor = msg == '' ? 'bg-zinc-100' : 'bg-primary-logo'
+ return (
+ ();
- const [inputHeight, setInputHeight] = useState(60); // 초기값은 입력 부분의 높이
- const [msgInput, setMsgInput] = useState('');
- const message="안녕하세요! "
-
- //저는 모글리에 sdfsdf hdsjkfㄴㅇㄹㄴㅇㄹㄴㅇㄹㄴhskdhfjsdhfsdfsdfskshdjkfhsdsfdfj
- const messageStyle = {
- maxWidth:' 70%',
-
- //`${message.length * 15}px`, // 예시: 글자 수에 따라 동적으로 설정
- };
-
- useEffect(() => {
- const handleResize = () => {
- setInputHeight(window.innerHeight * 0.1); // 예시: 뷰포트 높이의 10%
- };
-
- window.addEventListener('resize', handleResize);
-
- return () => {
- window.removeEventListener('resize', handleResize);
- };
- }, []);
- const handleInputChange = (e:any) => {
- // 여기에서 메시지 전송 로직을 구현하면 됩니다.
- // 메시지 변수에는 입력된 메시지가 들어 있습니다.
-
- setMsgInput(e.target.value)
- };
-
- const handleSendMessage = () => {
- // 여기에서 메시지 전송 로직을 구현하면 됩니다.
- // 메시지 변수에는 입력된 메시지가 들어 있습니다.
- console.log('전송된 메시지:', msgInput);
- setMsgInput(msgInput)
- setMsgInput('');
-
- };
-
- const buttonColor = msgInput == '' ? 'bg-zinc-100' : 'bg-primary-logo'
-
- return (
- */}
diff --git a/src/pages/roommatelist/Intro2.tsx b/src/pages/roommatelist/Intro2.tsx
deleted file mode 100644
index 3ca8f8a..0000000
--- a/src/pages/roommatelist/Intro2.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export const Intro2 = () => {
- return (
-
-
- 채팅목록
-
-
-
+ );
}
diff --git a/src/pages/chat/[apply_id]/Chatting.tsx b/src/pages/chat/[apply_id]/Chatting.tsx
new file mode 100644
index 0000000..f932327
--- /dev/null
+++ b/src/pages/chat/[apply_id]/Chatting.tsx
@@ -0,0 +1,206 @@
+import { Avatar, Stack } from "@mui/material";
+import { useEffect, useCallback, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import SendIcon from '@mui/icons-material/Send';
+type ChattingPageParams = {
+ apply_id : string;
+}
+export const Chatting = () => {
+ const { apply_id } = useParams
-
+
-
- 나와 생활유형이 맞는 룸메이트를 찾아보세요!
-
- 
-
+ const apply_id = "1"
+ return (
+ 나와 맞는 룸메이트 보러가기 {'>'}
-
+
-
-
+
+ 채팅목록
+
+
+
-
+
+
+
+ 나와 생활유형이 맞는 룸메이트를 찾아보세요!
+
+
+
+ 나와 맞는 룸메이트 보러가기 {'>'}
+
-
-
- );
+
+
+
+
-
-
-
-
-
-
-
-
- {nickname}님
- 예민한 고양이 / 혹은 마지막 채팅 내용
- 오전 11:38
-
+
-
+
+
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+ 예민한 고양이 / 혹은 마지막 채팅 내용
+ 오전 11:38
+
-
-
+
+
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
+
+
-
-
+
+
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
+
+
-
-
+
+
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/chat/[nickname]/Chatting.tsx b/src/pages/chat/[nickname]/Chatting.tsx
deleted file mode 100644
index 98d8a84..0000000
--- a/src/pages/chat/[nickname]/Chatting.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Avatar, Stack } from "@mui/material";
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import SendIcon from '@mui/icons-material/Send';
-type ChattingPageParams = {
- nickname : string;
-}
-export const Chatting = () => {
- const { nickname } = useParams
+
+ 모글리님
+
+
+
+ {chat.map((item: any, idx) => (
+
+
+ {/* 메시지 입력 부분 */}
+
+ {item.name !== name && (
+
+
+ )}
+
+ ))}
+
+
+
+ {item.msg}
+
+ {item.date}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- )
-}
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index c01edd1..b475a23 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -56,12 +56,9 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
},[]);
//h-[calc(40%+2rem)]
return (
-
-
- {nickname}님
-
-
-
- {/* 상대방 */}
-
-
- {/* 메시지 입력 부분 */}
-
-
-
-{/* border-2 border-primary-logo */}
-
-
- {/* 나 */}
-
-
- {message}
- 오전 12:05
-
-
- 오전 12:05
-
- {message}
-
-
-
-
- {/* 메시지 입력 컴포넌트 -form 형식*/}
- {/* */}
- {/* 메시지 입력 컴포넌트 -input*/}
-
-
-
-
-
-
-
-
-
- */}
@@ -164,7 +165,7 @@ export const ResultHome =() => {
{/*
-
-
- */}
{descripData &&
{/*
- (null);
const [descripData, setDescripData] = useState(null);
const usenavigate = useNavigate();
- const animalKOR = ANIMAL_DATA[animalData?.animal as AnimalType['animal']].type;
+
// 닉네임
useEffect(()=>{
const nicknameData = async () => {
try {
- const response = await fetch(`http://localhost:8080/nickname`, {
+ const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/nickname`, {
method: 'GET',
credentials: 'include',
});
@@ -51,7 +51,7 @@ export const ResultHome =() => {
useEffect(()=>{
const AnimalData = async () => {
try {
- const response = await fetch(`http://localhost:8080/animal`, {
+ const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/animal`, {
method: 'GET',
credentials: 'include',
});
@@ -73,7 +73,7 @@ export const ResultHome =() => {
useEffect(()=>{
const DescripData = async () => {
try {
- const response = await fetch(`http://localhost:8080/style/animal`, {
+ const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/style/animal`, {
method: 'GET',
credentials: 'include',
});
@@ -94,7 +94,9 @@ export const ResultHome =() => {
const color = getAnimalColor(animalData?.animal as AnimalType['animal']);
const colorRGB = getAnimalColorRGB(animalData?.animal as AnimalType['animal']);
const adv = animalData?.sensitive == true ? "예민한" : "무던한"
-
+ const animalKOR = animalData?.animal ? ANIMAL_DATA[animalData.animal].type : '';
+ //ANIMAL_DATA[animalData?.animal as AnimalType['animal']].type;
+ //ANIMAL_DATA[animalData?.animal as AnimalType['animal'] ].type
console.log(color);
return (
@@ -108,7 +110,7 @@ export const ResultHome =() => {
{animalData &&
}
@@ -123,7 +125,7 @@ export const ResultHome =() => {
{/*
+
);
};
diff --git a/src/pages/resulthome/ResultHome.tsx b/src/pages/resulthome/ResultHome.tsx
index a17be91..ce7a9c8 100644
--- a/src/pages/resulthome/ResultHome.tsx
+++ b/src/pages/resulthome/ResultHome.tsx
@@ -10,7 +10,7 @@ import { AnimalType } from "../../interface/AnimalType"
//api : 닉네임 / 동물 유형 /
interface AnimalDataProps{
- animal : string ;
+ animal : AnimalType['animal'];
sensitive : boolean;
}
interface DescriplDataProps{
@@ -24,12 +24,12 @@ export const ResultHome =() => {
const [animalData, setAnimalData] = useState
+
-
-
-
-
+
-
- {nickname ? `${nickname} 님` : '로딩 중...'}
@@ -69,77 +66,68 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
-
+
- {verify ?
-
-
-
-
-
- :
-
-
-
- 이제 룸메이트 추천을 받을 수 있어요!
-
-
- 기숙사 합격 인증 완료
-
-
- }
+
-
- 룸메이트 추천을 위해 기숙사 합격 인증이 필요해요!
-
-
-
- 기숙사 합격 인증 하러가기 {'>'}
-
+
+
+
+
+ {verify ?
+
+
+
+
+
+ :
+
+
+
+ 이제 룸메이트 추천을 받을 수 있어요!
+
+
+ 기숙사 합격 인증 완료
+
+
+ }
+
+
+ 룸메이트 추천을 위해 기숙사 합격 인증이 필요해요!
+
+
+
+ 기숙사 합격 인증 하러가기 {'>'}
+
+
-
- sfsdfsdfsdf
+ sfsdfsdfsdf
+
+ sfsdfsdfsdf
+ sfsdfsdfsdf
+ sfsdfsdfsdf
+ sfsdfsdfsdf
+ sfsdfsdfsdf
-
-
-
+
+ sfsdfsdfsdf
- sfsdfsdfsdf
-
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
- sfsdfsdfsdf
+ sfsdfsdfsdf
+ sfsdfsdfsdf
-
-
-
-
-
-
+
+
+
+
+
+
{nickname}님의 생활 유형은
- {adv} {animalKOR}
+ {adv} {animalKOR}
나의 동물 유형 한줄 소개
-
+
@@ -143,10 +145,9 @@ export const ResultHome =() => {
-
나의 생활 유형 한 눈에 보기
-
+
나의 생활 유형 상세보기
-
+
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/roommatelist/Intro3.tsx b/src/pages/roommatelist/Intro3.tsx
deleted file mode 100644
index b92d209..0000000
--- a/src/pages/roommatelist/Intro3.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import ProgressIndLinear from "../../components/common/ProgressIndLinear"
-
-export const Intro3 = () =>{
- return (
- 더 많은 사용자의 유입을 위해, 기숙사 합격통보 날의 일주일 뒤부터 매칭을 시작합니다
-
-
-
-
- 매칭이 시작되면 알림으로 알려드릴게요 :)
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/roommatelist/Optional.tsx b/src/pages/roommatelist/Optional.tsx
deleted file mode 100644
index f2cf83d..0000000
--- a/src/pages/roommatelist/Optional.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import { styled } from '@mui/material/styles';
-import InputBase from '@mui/material/InputBase';
-import { Button } from '../../components/common';
-import CircleIcon from '@mui/icons-material/Circle';
-import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
-
-const BootstrapInput = styled(InputBase)(({ theme }) => ({
- 'label + &': {
- marginTop: theme.spacing(3),
- fontFamily: ['Pretendard'],
-
- },
- '& .MuiInputBase-input': {
- borderRadius: 8,
- position: 'relative',
- backgroundColor: theme.palette.background.paper,
- border: '2px solid #27334b',
- fontSize: 16,
- padding: '10px 26px 10px 12px',
- transition: theme.transitions.create(['border-color', 'box-shadow']),
- fontFamily: ['Pretendard'],
- '&:focus': {
- borderRadius: 8,
- borderColor: '#80bdff',
- boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
- },
- },
- }));
-export function Optional({ onClick }: { onClick: () => void }) {
- const [age, setAge] = React.useState('');
-
- const handleChange = (event: SelectChangeEvent) => {
- setAge(event.target.value as string);
- };
- return (
- 모글리님에게 어울리는 룸메이트를 찾고 있습니다!
- 잠시만 기다려주세요
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/roommatelist/RoommateOption.tsx b/src/pages/roommatelist/RoommateOption.tsx
deleted file mode 100644
index ba8001c..0000000
--- a/src/pages/roommatelist/RoommateOption.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import { styled } from '@mui/material/styles';
-import InputBase from '@mui/material/InputBase';
-import { Button } from '../../components/common';
-import CircleIcon from '@mui/icons-material/Circle';
-import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
-const BootstrapInput = styled(InputBase)(({ theme }) => ({
- 'label + &': {
- marginTop: theme.spacing(3),
- fontFamily: ['Pretendard'],
-
- },
- '& .MuiInputBase-input': {
- borderRadius: 8,
- position: 'relative',
- backgroundColor: theme.palette.background.paper,
- border: '2px solid #27334b',
- fontSize: 16,
- padding: '10px 26px 10px 12px',
- transition: theme.transitions.create(['border-color', 'box-shadow']),
- fontFamily: ['Pretendard'],
- '&:focus': {
- borderRadius: 8,
- borderColor: '#80bdff',
- boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
- },
- },
- }));
-export function RoommateOption({ onClick }: { onClick: () => void }) {
- const [age, setAge] = React.useState('');
-
- const handleChange = (event: SelectChangeEvent) => {
- setAge(event.target.value as string);
- };
- return (
-
-
-
- 추가로 표시되고 싶은 항목을 선택해주세요 (선택사항)
-
-
-
-
-
- }
- >
-
-
-
-
-
-
-
- 학과
-
-
-
- }
- >
-
-
-
-
-
-
- 학번
-
-
-
-
-
- 나이
-
-
- }
- >
-
-
-
-
-
-
-
-
-
- MBTI
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
- {/*
- {/*
- 로그인
-
*/}
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/roommatelist/RoommateRecommend.tsx b/src/pages/roommatelist/RoommateRecommend.tsx
index e5fad01..467c483 100644
--- a/src/pages/roommatelist/RoommateRecommend.tsx
+++ b/src/pages/roommatelist/RoommateRecommend.tsx
@@ -1,61 +1,158 @@
+
import * as React from 'react';
-import { RoommateRecommendPanel } from './RoommateRecommendPanel';
-import { RoommateOption } from './RoommateOption';
-import { Optional } from './Optional';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Tab1 } from './Tab1';
+import { Tab2 } from './Tab2';
+import { Tab3 } from './Tab3';
+import { Avatar, Stack } from '@mui/material';
+import { ANIMAL_DATA, getAnimalColorRGB } from '../../constants';
+import { AnimalType } from '../../interface/AnimalType';
+import { useEffect, useState } from "react";
-const Intro1 = ({ onClick }: { onClick: () => void }) => {
- return(
-
-
-
- 보다 정확한 추천을 위해,
- 아래의 내용을 입력해주세요!
-
-
-
-
-
-
- }
- >
-
-
-
-
-
-
-
- 거주하게 될 기숙사 *
-
-
-
- }
- >
-
-
-
-
-
-
-
- 호실 인원 *
-
-
-
-
- {/* */}
-
-
-
-
축하합니다!
-
- 룸메이트 추천을 위한
- 모든 과정이 끝났습니다
-
-
-
-
-
- {/*
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+ }
+ interface AnimalDataProps{
+ animal : AnimalType['animal'];
+ sensitive : boolean;
+ }
+function CustomTabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+ {children}
+ )}
- )
-}
-export const Intro2 = ({ onClick }: { onClick: () => void }) => {
- return (
-
-
더 많은 사용자의 유입을 위해, 기숙사 합격통보 날의 일주일 뒤부터 매칭을 시작합니다
-
-
+ );
+ }
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+ }
+export const RoommateRecommend = () => {
+ const [value, setValue] = useState(0);
+ const [nickname, setNickname] = useState('');
+ const [animalData, setAnimalData] = useState(null);
+ const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+ setValue(newValue);
+ };
+
+ const getContentBasedOnTab = () => {
+ switch (value) {
+ case 0:
+ return (
+
- )
-}
-export function RoommateRecommend() {
- const [step, setStep] = React.useState(3);
-
- const handleButtonClick= () =>{
- setStep(step+1);
+ );
+ case 2:
+ return (
+
+ {nickname}님을 위한
+
+ );
+ case 1:
+ return (
추천 결과입니다.
- 매칭이 시작되면 알림으로 알려드릴게요 :)
+ 전체 목록
+
-
- {nickname}님이 거주하는 건물의
+ 기숙사생들을 모두 볼 수 있어요!
+ {nickname}님이
+
+ );
+ default:
+ return null;
+ }
+ };
+ useEffect(()=>{
+ const nicknameData = async () => {
+ try {
+ const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/nickname`, {
+ method: 'GET',
+ credentials: 'include',
+ });
+
+ if (response.ok) {
+ const data = await response.text();
+ setNickname(data); // 새로운 카드 정보 설정
+
+ } else {
+ console.error('Failed to fetch new card data : ', response.status, response.statusText);
+ }
+ } catch (error) {
+ console.error('Failed to fetch new card data : ', error);
}
- // useEffect(() => {
- // // 최초 렌더링 시에만 실행되도록 설정
- // if (step === 0) {
- // // 여기에 최초 렌더링 시에 실행되어야 하는 로직 추가
- // }
- // }, [step]);
+ };
+ nicknameData();
+ },[]);
+ // 동물
+ useEffect(()=>{
+ const AnimalData = async () => {
+ try {
+ const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/animal`, {
+ method: 'GET',
+ credentials: 'include',
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ setAnimalData(data); // 새로운 카드 정보 설정
+
+ } else {
+ console.error('Failed to nicknameData data : ', response.status, response.statusText);
+ }
+ } catch (error) {
+ console.error('Failed to nicknameData data : ', error);
+ }
+ };
+ AnimalData();
+ },[]);
+ // const animalData = ANIMAL_DATA[animal as AnimalType['animal']];
+ const colorRGB = getAnimalColorRGB(animalData?.animal as AnimalType['animal']);
return (
- 찜하신 목록입니다.
+
- {/* {step === 0 && }
- {step === 2 && } */}
- {/* 원래 이 페이지여야 하지만, 우선 제외
- {step === 3 && }
- */}
- {step === 3 &&
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/roommatelist/RoommateRecommendPanel.tsx b/src/pages/roommatelist/RoommateRecommendPanel.tsx
deleted file mode 100644
index 5d58518..0000000
--- a/src/pages/roommatelist/RoommateRecommendPanel.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { Tab1 } from './Tab1';
-import { Tab2 } from './Tab2';
-import { Tab3 } from './Tab3';
-import { Avatar, Stack } from '@mui/material';
-import { ANIMAL_DATA, getAnimalColorRGB } from '../../constants';
-import { AnimalType } from '../../interface/AnimalType';
-import { useEffect, useState } from "react";
-
-interface TabPanelProps {
- children?: React.ReactNode;
- index: number;
- value: number;
- }
-function CustomTabPanel(props: TabPanelProps) {
- const { children, value, index, ...other } = props;
-
- return (
-
+ {/*
+ */}
+
+
+
- )
-}
+ {getContentBasedOnTab()}
- {value === index && (
- {children}
- )}
-
- );
- }
-function a11yProps(index: number) {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- };
- }
-export const RoommateRecommendPanel = () => {
- const [value, setValue] = useState(0);
- const [nickname, setNickname] = useState('');
- const [animal, setAnimal] = useState('');
- const handleChange = (event: React.SyntheticEvent, newValue: number) => {
- setValue(newValue);
- };
-
- const getContentBasedOnTab = () => {
- switch (value) {
- case 0:
- return (
-
- {nickname}님을 위한
-
- );
- case 1:
- return (
- 추천 결과입니다.
-
- 전체 목록
-
- );
- case 2:
- return (
- {nickname}님이 거주하는 건물의
- 기숙사생들을 모두 볼 수 있어요!
-
- {nickname}님이
-
- );
- default:
- return null;
- }
- };
- const fetchData = async () => {
- try {
- // nickname API 호출
- const nicknameResponse = await fetch('http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/nickname', {
- method: 'GET',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- // 다른 헤더 정보가 필요하다면 여기에 추가합니다.
- },
- });
-
- if (nicknameResponse.ok) {
- const nicknameData = await nicknameResponse.json();
- setNickname(nicknameData);
- console.log('nickname data fetched successfully:', nickname);
- } else {
- console.error('Failed to fetch card data: ', nicknameResponse.status, nicknameResponse.statusText);
- }
-
- // 두 번째 API 호출
- const animalResponse = await fetch('http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/animal', {
- method: 'GET',
- credentials: 'include',
- headers: {
- 'Content-Type': 'application/json',
- // 다른 헤더 정보가 필요하다면 여기에 추가합니다.
- },
- });
-
- if (animalResponse.ok) {
- const aniamlData = await animalResponse.json();
- setAnimal(aniamlData);
- console.log('animal data fetched successfully:', aniamlData);
- } else {
- console.error('Failed to fetch animal data: ', animalResponse.status, animalResponse.statusText);
- }
- } catch (error) {
- console.error('Failed to fetch data: ', error);
- }
- };
-
- // fetchData 함수 호출
- useEffect(() => {
- fetchData();
- }, []); // 컴포넌트가 처음 마운트될 때 한 번만 호출하도록 설정
- // const animalData = ANIMAL_DATA[animal as AnimalType['animal']];
- const colorRGB = getAnimalColorRGB(animal as AnimalType['animal'])
- return (
- 찜하신 목록입니다.
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/pages/roommatelist/Tab1.tsx b/src/pages/roommatelist/Tab1.tsx
index eb6ff6d..4909ecf 100644
--- a/src/pages/roommatelist/Tab1.tsx
+++ b/src/pages/roommatelist/Tab1.tsx
@@ -62,8 +62,8 @@ export const Tab1 = () => {
const data = await response.json();
setCardData(data); // 새로운 카드 정보 설정
console.log("2. new ok");
- console.log(data);
- console.log(cardData);
+ console.log(`data : ${data}`);
+ console.log(`data : ${cardData}`);
} else {
console.error('Failed to fetch new card data : ', response.status, response.statusText);
}
diff --git a/src/pages/roommatelist/components/RoommateCard.tsx b/src/pages/roommatelist/components/RoommateCard.tsx
index 9d39c37..9a164d9 100644
--- a/src/pages/roommatelist/components/RoommateCard.tsx
+++ b/src/pages/roommatelist/components/RoommateCard.tsx
@@ -8,7 +8,7 @@ import FavoriteOutlined from "@mui/icons-material/FavoriteOutlined"
import FavoriteBorder from "@mui/icons-material/FavoriteBorder"
import { Link } from "react-router-dom";
import { Divider } from "@mui/material";
-import { ANIMAL_DATA } from "../../../constants";
+import { ANIMAL_DATA, getAnimalColor, getAnimalColorRGB } from "../../../constants";
import { AnimalType } from "../../../interface/AnimalType";
interface RoomateCardProps {
disableFlip?: boolean;
@@ -79,7 +79,7 @@ const FrontDetailPercentage = ({nickname,animal,dorm, room }: CardFrontDetailPro
const handleStarClick = async (e: any)=> {
e.stopPropagation(); // 이벤트 전파를 막습니다.
- setIsStarred(!isStarred);
+ // setIsStarred(!isStarred);
try {
const response = await fetch(`http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/star/${nickname}`, {
@@ -94,6 +94,7 @@ const FrontDetailPercentage = ({nickname,animal,dorm, room }: CardFrontDetailPro
const data = await response.text();
if(data != ''){
setStartId(data);
+ setIsStarred(!isStarred);
}
console.log({starId});
} else {
@@ -104,7 +105,7 @@ const FrontDetailPercentage = ({nickname,animal,dorm, room }: CardFrontDetailPro
console.error('Error during mailConfirm2:', error);
}
};
-
+ const colorRGB = getAnimalColorRGB(animal as AnimalType['animal']);
return (
- {/*
- */}
-
-
-
- {getContentBasedOnTab()}
-
@@ -112,7 +113,7 @@ const FrontDetailPercentage = ({nickname,animal,dorm, room }: CardFrontDetailPro
-
{isStarred ? (
@@ -171,6 +172,7 @@ const CardFrontPercentage = ({isFrontView, nickname, animal, dorm, room, age, d
const FrontDetail = ({nickname,animal,dorm, room }: CardFrontDetailProps) => {
const [isStarred, setIsStarred] = useState(true);
const [starId, setStartId] = useState('');
+
//찜 추가
const handleStarClick = async (e: any)=> {
e.stopPropagation(); // 이벤트 전파를 막습니다.
@@ -200,14 +202,14 @@ const FrontDetail = ({nickname,animal,dorm, room }: CardFrontDetailProps) => {
console.error('Error during mailConfirm2:', error);
}
};
-
+ const colorRGB = getAnimalColorRGB(animal as AnimalType['animal']);
return (
-
{isStarred ? (
@@ -294,6 +296,7 @@ const TypeAtAGlance = ({ nickname, animal,rhythm,smoke,noise, temperature,outgoi
const EmptysleepCount = Array.from({ length: 5 - sleep }, (_, index) => (
));
+ const color = getAnimalColor(animal as AnimalType['animal']);
return (
@@ -310,23 +313,23 @@ const TypeAtAGlance = ({ nickname, animal,rhythm,smoke,noise, temperature,outgoi
{rhythm}
{smoke}
-
+
{nosieCount}
{EmptynosieCount}
-
+
{temperatureCount}
{EmptytemperatureCount}
-
+
{outgoingCount}
{EmptyoutgoingCount}
-
+
{cleanCount}
{EmptycleanCount}
-
+
{sleepCount}
{EmptysleepCount}
@@ -363,9 +366,9 @@ const CardBack = ({isFrontView,animal,nickname, rhythm,smoke,noise, temperature,
export const RoommateCardPercentage = ({disableFlip=false, nickname, animal, dorm, room, age, dept, stu_num ,mbti,rhythm,smoke,noise, temperature,outgoing,clean,sleep} : RoomateCardProps) => {
const [isFrontView, setIsFrontView] = useState(false)
const ages = age.toString();
- const AGE = ages == "" ? "비공개" : `${ages}살`;
+ const AGE = ages == "0" ? "비공개" : `${ages}살`;
const stuNum = stu_num.toString();
- const STU_NUM = stuNum == "" ? "비공개" : `${stuNum}학번`;
+ const STU_NUM = stuNum == "0" ? "비공개" : `${stuNum}학번`;
const toggleCardView = () => {
setIsFrontView((isFrontView) => !isFrontView)
}
diff --git a/src/pages/testpage/TestPage.tsx b/src/pages/testpage/TestPage.tsx
index abd8be5..fa20cdb 100644
--- a/src/pages/testpage/TestPage.tsx
+++ b/src/pages/testpage/TestPage.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom"
const Intro1 = ({ onClick }: { onClick: () => void }) => {
return(
-
+
어서오세요!
@@ -35,7 +35,7 @@ const Intro1 = ({ onClick }: { onClick: () => void }) => {
}
const Intro2 = ({ onClick }: { onClick: () => void }) => {
return(
-
+
diff --git a/src/pages/testpage/TestPagePanel.tsx b/src/pages/testpage/TestPagePanel.tsx
index 50970cc..6f34021 100644
--- a/src/pages/testpage/TestPagePanel.tsx
+++ b/src/pages/testpage/TestPagePanel.tsx
@@ -67,7 +67,7 @@ const [inhomeSensitivity, setinhomeSensitivity] = useState(0);
const [coldOrHot, setcoldOrHot] = useState(0);
const [summerOrWinter, setsummerOrWinter] = useState(0);
const navigate = useNavigate();
-const [loading, setLoading] = useState(true);
+const [loading, setLoading] = useState(false);
useEffect(() => {
console.log(`저장한 답변 ${selectedAnswer}`);
@@ -303,19 +303,17 @@ const [loading, setLoading] = useState(true);
);
-
+
// Handle the response as needed
console.log(response);
// Check if login is successful, then redirect to StarPage
if (response.ok) {
+ //setLoading(true);
// navigate('/testpage');
- navigate('/resulthome')
+ //navigate('/resulthome')
//
+ {loading ?
+
- {questionIndex === 0 || questionIndex === 1?
-
+
);
}
diff --git a/src/recommendIntro/RecommendIntro.tsx b/src/recommendIntro/RecommendIntro.tsx
new file mode 100644
index 0000000..df5a9d8
--- /dev/null
+++ b/src/recommendIntro/RecommendIntro.tsx
@@ -0,0 +1,372 @@
+import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";
+import { Button } from "../components/common";
+import { useNavigate } from "react-router-dom";
+import { Loading } from "../components/Loading";
+import { useState } from "react";
+const departments = [
+ { value: '비공개', label: '비공개' },
+ { value: '인문대학', label: '인문대학' },
+ { value: '사회과학대학', label: '사회과학대학' },
+ { value: '사범대학', label: '사범대학' },
+ { value: '자연과학대학', label: '자연과학대학' },
+ { value: '생명공학대학', label: '생명공학대학' },
+ { value: '공학대학', label: '공학대학' },
+ { value: '창의ICT공과대학', label: '창의ICT공과대학' },
+ { value: '소프트웨어대학', label: '소프트웨어대학' },
+ { value: '의과대학', label: '의과대학' },
+ { value: '약학대학', label: '약학대학' },
+ { value: '적십자간호대학', label: '적십자간호대학' },
+ { value: '예술대학', label: '예술대학' },
+ { value: '예술공학대학', label: '예술공학대학' },
+ { value: '체육대학', label: '체육대학' },
+ // ... 다른 학과들을 추가할 수 있습니다.
+ ];
+ const mbtis = [
+ { value: '비공개', label: '비공개' },
+ { value: 'ENFP', label: 'ENFP' },
+ { value: 'ENFJ', label: 'ENFJ' },
+ { value: 'ENTP', label: 'ENTP' },
+ { value: 'ENTJ', label: 'ENTJ' },
+ { value: 'ESFP', label: 'ESFP' },
+ { value: 'ESFJ', label: 'ESFJ' },
+ { value: 'ESTP', label: 'ESTP' },
+ { value: 'ESTJ', label: 'ESTJ' },
+ { value: 'INFP', label: 'INFP' },
+ { value: 'INFJ', label: 'INFJ' },
+ { value: 'INTP', label: 'INTP' },
+ { value: 'INTJ', label: 'INTJ' },
+ { value: 'ISFP', label: 'ISFP' },
+ { value: 'ISFJ', label: 'ISFJ' },
+ { value: 'ISTP', label: 'ISTP' },
+ { value: 'ISTJ', label: 'ISTJ' },
+ // ... 다른 학과들을 추가할 수 있습니다.
+ ];
+export const RecommendIntro = () => {
+ const [dorm, setDorm] = useState('');
+ const [dorm_num, setDormNUM] = useState(0);
+ const [room, setRoom] = useState('');
+ const [room_num, setRoomNUM] = useState(0);
+
+ const [dept, setDept] = useState('');
+ const [stu_num, setStu_num] = useState('');
+ const [stu_NUM, setStu_NUM] = useState(0);
+ const [age, setAge] = useState('');
+ const [age_num, setAge_num] = useState(0);
+ const [mbti, setMbti] = useState('');
+ const [loading, setLoading] = useState(false);
+
+
+
+ const [dormValid, setDormValid] = useState(false);
+ const [roomValid, setRoomValid] = useState(false);
+ const [deptValid, setDeptValid] = useState(false);
+ const [stuNumValid, setStuNumValid] = useState(false);
+ const [ageValid, setAgeValid] = useState(false);
+ const [mbtiValid, setMbtiValid] = useState(false);
+ const handledormChange = (event: SelectChangeEvent) => {
+ setDorm(event.target.value as string);
+ setDormNUM(parseInt(dorm));
+ setDormValid(event.target.value as string !== '');
+ };
+ const handleroomChange = (event: SelectChangeEvent) => {
+ setRoom(event.target.value as string);
+ setRoomNUM(parseInt(room));
+ setRoomValid(event.target.value as string !== '');
+ };
+ const handledeptChange = (event: SelectChangeEvent) => {
+ setDeptValid(event.target.value as string !== '');
+ if(deptValid){
+ setDept(event.target.value as string);
+ }else{
+ setDept("비공개");
+ }
+
+ console.log(dept)
+ };
+ const departmentOptions = departments.map((department) => (
+
+ ));
+ const handlestu_numChange = (event: SelectChangeEvent) => {
+ setStuNumValid(event.target.value as string !== '');
+ if(stuNumValid){
+ setStu_num(event.target.value as string);
+ setStu_NUM(parseInt(stu_num));
+ }else{
+ setStu_NUM(0);
+ }
+ };
+ const handledageChange = (event: SelectChangeEvent) => {
+
+ setAgeValid(event.target.value as string !== '');
+ if(ageValid){
+ setAge(event.target.value as string);
+ setAge_num(parseInt(age))
+ }else{
+ setAge_num(0);
+ }
+ };
+ const handlembtiChange = (event: SelectChangeEvent) => {
+
+ setMbtiValid(event.target.value as string !== '');
+ if(mbtiValid){
+ setMbti(event.target.value as string)
+ }else{
+ setDept("비공개");
+ }
+ };
+ const mbtiOptions = mbtis.map((mbtis) => (
+
+ ));
+ const isFormValid = dormValid && roomValid ;
+
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ console.log(`
+ 1.${dorm_num}
+ 2.${room_num}
+ 3.${dept}
+ 4.${stu_NUM}
+ 5.${age_num}
+ 6.${mbti}
+ `)
+ e.preventDefault();
+
+ //usenavigate('/resulthome');
+ if(isFormValid){
+ try {
+ const response = await fetch('http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/detail', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ dorm: dorm_num,
+ room: room_num,
+ dept: dept,
+ stu_num: stu_NUM,
+ age: age_num,
+ mbti: mbti,
+ }),
+ credentials: 'include',
+ });
+
+ // Handle the response as needed
+ console.log(response);
+ setLoading(true);
+ // Check if login is successful, then redirect to StarPage
+
+ if (response.ok) {
+ //usenavigate('/resulthome');
+ //
-
-
+
+ }
+ 해당하는 대답을 선택해 주세요!
-
+ {loading ?
+
+
+
+
+
+ )
+}
+
+
+
+ }
+
+
+
+ 보다 정확한 추천을 위해,
+ 아래의 내용을 입력해주세요!
+
+
+
+
+ 인원
+
+
+
+
+
+
+
+
+ {/* 기숙사 건물 */}
+
+
+ 건물
+
+
+
+
+
+ {/* 호실 */}
+ 거주하게 될 기숙사 *
+ 호실 인원 *
+
+
+
+(선택사항)
+
+
+
+
+
+
+ {/* 대학 */}
+
+
+
+
+ 비공개
+
+
+
+
+
+ {/* 학번 */}
+ 학과
+
+
+
+ 비공개
+
+
+
+
+
+
+
+
+ 학번
+
+
+ {/* 나이 */}
+
+
+ 비공개
+
+
+
+
+
+
+ {/* mbti */}
+
+
+ 비공개
+
+
+
+
+
+
+
+ 나이
+ mbti
+