From 3005815f0730571728cb48ca16c45b908e42a137 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 01:25:31 +0900 Subject: [PATCH 01/11] Update TestPage.tsx:edit mt --- src/pages/testpage/TestPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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( -
+
From e67c4be1dd79703e7bdd4172f6aec4e94867fc75 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 01:34:43 +0900 Subject: [PATCH 02/11] Update ResultHome.tsx: edit ui --- src/pages/home/Home.tsx | 2 +- src/pages/resulthome/ResultHome.tsx | 34 ++++++++++++----------------- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index c01edd1..88c43a0 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -56,7 +56,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; },[]); //h-[calc(40%+2rem)] return ( -
+
diff --git a/src/pages/resulthome/ResultHome.tsx b/src/pages/resulthome/ResultHome.tsx index a17be91..af8d611 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(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 &&
{nickname}님의 생활 유형은
- {adv} {animalKOR} + {adv} {animalKOR}
} @@ -121,10 +123,8 @@ export const ResultHome =() => {
-
- 나의 동물 유형 한줄 소개 -
- {/* */} + + {descripData &&
{descripData.features} @@ -143,11 +143,7 @@ export const ResultHome =() => {
- -
- 나의 생활 유형 한 눈에 보기 -
- {/* */} + {descripData && @@ -162,10 +158,8 @@ export const ResultHome =() => { } -
- 나의 생활 유형 상세보기 -
- {/* */} + + From 50e32775c09fa7d2b5932cb04650c348a8676280 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 01:42:41 +0900 Subject: [PATCH 03/11] Update ResultHome.tsx: edit tilebox color --- src/components/resultdetail/TitleBox.tsx | 2 +- src/pages/home/Home.tsx | 18 ++++++------------ src/pages/resulthome/ResultHome.tsx | 17 ++++++++++++----- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/src/components/resultdetail/TitleBox.tsx b/src/components/resultdetail/TitleBox.tsx index 2a9c1f9..5d4a081 100644 --- a/src/components/resultdetail/TitleBox.tsx +++ b/src/components/resultdetail/TitleBox.tsx @@ -7,7 +7,7 @@ export function TitleBox({ title, animalColor }: TitleBoxProps) { const animalColors = "yellow" return (
-
+
{title}
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 88c43a0..9eafd70 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -56,8 +56,8 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; },[]); //h-[calc(40%+2rem)] return ( -
-
+
+ {/*
@@ -129,17 +129,11 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
- - - -
- - - - - +
*/} +
+
채팅목록
+
); }; diff --git a/src/pages/resulthome/ResultHome.tsx b/src/pages/resulthome/ResultHome.tsx index af8d611..ce7a9c8 100644 --- a/src/pages/resulthome/ResultHome.tsx +++ b/src/pages/resulthome/ResultHome.tsx @@ -123,8 +123,10 @@ export const ResultHome =() => {
- - +
+ 나의 동물 유형 한줄 소개 +
+ {/* */} {descripData &&
{descripData.features} @@ -143,7 +145,10 @@ export const ResultHome =() => {
- +
+ 나의 생활 유형 한 눈에 보기 +
+ {/* */} {descripData && @@ -158,8 +163,10 @@ export const ResultHome =() => { } - - +
+ 나의 생활 유형 상세보기 +
+ {/* */} From 50a6c21f39903eeaf499a1e5c47db2c04adafc68 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 02:19:32 +0900 Subject: [PATCH 04/11] Update Home.tsx:edit ui --- src/pages/chat/[nickname]/Chatting.tsx | 4 +- src/pages/home/Home.tsx | 129 +++++++++++++------------ 2 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/pages/chat/[nickname]/Chatting.tsx b/src/pages/chat/[nickname]/Chatting.tsx index 98d8a84..6a4edfd 100644 --- a/src/pages/chat/[nickname]/Chatting.tsx +++ b/src/pages/chat/[nickname]/Chatting.tsx @@ -127,8 +127,8 @@ export const Chatting = () => {
-
-
+
+
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 9eafd70..24e7446 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -56,11 +56,8 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; },[]); //h-[calc(40%+2rem)] return ( -
- {/*
- - -
+
+
logo
@@ -69,71 +66,75 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-
-
- -
- {verify ? - -
-
-
이제 룸메이트 추천을 받을 수 있어요!
-
-
기숙사 합격 인증 완료
- -
-
-
+ + - : - -
-
-
룸메이트 추천을 위해 기숙사 합격 인증이 필요해요!
-
-
기숙사 합격 인증 하러가기 {'>'}
- roomie -
-
-
- } +
-
+
+
+ +
+ {verify ? + +
+
+
이제 룸메이트 추천을 받을 수 있어요!
+
+
기숙사 합격 인증 완료
+ +
+
+
+ + : + +
+
+
룸메이트 추천을 위해 기숙사 합격 인증이 필요해요!
+
+
기숙사 합격 인증 하러가기 {'>'}
+ roomie +
+
+
+ } +
+
+
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+ +
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+ + + + +
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+
sfsdfsdfsdf
+ +
+
-
- -
-
sfsdfsdfsdf
-
sfsdfsdfsdf
- -
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
- - - - -
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
- -
- -
*/} -
-
채팅목록
-
- + + + + + +
); }; From 5f79811fffc0b391254f6aaae401e46250784131 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 02:30:06 +0900 Subject: [PATCH 05/11] Update Home.tsx : edit test card ui --- src/pages/home/Home.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 24e7446..3b920e7 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -57,8 +57,8 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'; //h-[calc(40%+2rem)] return (
-
-
+
+
logo
{nickname ? `${nickname} 님` : '로딩 중...'}
@@ -67,9 +67,6 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
- - -
@@ -113,18 +110,14 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
sfsdfsdfsdf
sfsdfsdfsdf
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
+ - -
sfsdfsdfsdf
+
sfsdfsdfsdf
sfsdfsdfsdf
-
sfsdfsdfsdf
-
sfsdfsdfsdf
+
From 718a901dda11a61585948e34060d1ecd32468f29 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 15:39:00 +0900 Subject: [PATCH 06/11] Update ChatList.tsx: add chat login --- src/App.tsx | 9 +- src/pages/chat/ChatList.tsx | 108 ++++----- src/pages/chat/[apply_id]/Chatting.tsx | 205 ++++++++++++++++ src/pages/chat/[nickname]/Chatting.tsx | 136 ----------- src/pages/home/Home.tsx | 4 +- src/pages/roommatelist/RoommateOption.tsx | 3 + src/recommendIntro/RecommendIntro.tsx | 274 ++++++++++++++++++++++ 7 files changed, 545 insertions(+), 194 deletions(-) create mode 100644 src/pages/chat/[apply_id]/Chatting.tsx delete mode 100644 src/pages/chat/[nickname]/Chatting.tsx create mode 100644 src/recommendIntro/RecommendIntro.tsx diff --git a/src/App.tsx b/src/App.tsx index c3a7f47..3c98fc3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,8 +16,9 @@ import { ResultHome } from './pages/resulthome/ResultHome' import { AnimalDictDetail } from './pages/animaldict/[animal]/AnimalDictDetail' import { GroupDetail } from './pages/group/[group]/GroupDetail' import { LandingPage } from './components/LandingPage' -import { Chatting } from './pages/chat/[nickname]/Chatting' +import { Chatting } from './pages/chat/[apply_id]/Chatting' import { ResultAnother } from './pages/resulthome/[nickname]/ResultAnother' +import { RecommendIntro } from './recommendIntro/RecommendIntro' const Router = createBrowserRouter([ { path: '/', @@ -39,6 +40,10 @@ const Router = createBrowserRouter([ path: '/roommatelist', element: <>, }, +{ + path: '/recommendIntro', + element: <>, +}, { path: '/resulthome', element: <>, @@ -52,7 +57,7 @@ const Router = createBrowserRouter([ element: <>, }, { - path: '/chat/:nickname', + path: '/chat/:apply_id', element: <>, }, { 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 ( -
-
-
채팅목록
-
-
- -
-
-
나와 생활유형이 맞는 룸메이트를 찾아보세요!
-
-
나와 맞는 룸메이트 보러가기 {'>'}
- roomie -
+ const apply_id = "1" + return ( +
+
+
채팅목록
+
+
+ +
+
+
나와 생활유형이 맞는 룸메이트를 찾아보세요!
+
+
나와 맞는 룸메이트 보러가기 {'>'}
+ roomie +
+
+
+
-
- -
-
- -
-
- - - -
-
-
{nickname}님
-
예민한 고양이 / 혹은 마지막 채팅 내용
-
-
오전 11:38
-
- -
+
+ +
+
+ + + +
+
+
+
예민한 고양이 / 혹은 마지막 채팅 내용
+
+
오전 11:38
+
+ +
- - - + + +
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
-
+
+
- - - + + +
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
-
+
+
- - - + + +
모글리님
예민한 고양이 / 혹은 마지막 채팅 내용
오전 11:38
-
- - - +
-
-
- ); + + + +
+
+ ); } diff --git a/src/pages/chat/[apply_id]/Chatting.tsx b/src/pages/chat/[apply_id]/Chatting.tsx new file mode 100644 index 0000000..c9efbcc --- /dev/null +++ b/src/pages/chat/[apply_id]/Chatting.tsx @@ -0,0 +1,205 @@ +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'; +import { Button } from "../../../components/common"; +type ChattingPageParams = { + apply_id : string; +} +export const Chatting = () => { + const { apply_id } = useParams(); + const [inputHeight, setInputHeight] = useState(60); // 초기값은 입력 부분의 높이 + //const [msgInput, setMsgInput] = useState(''); + const [msg, setMsg] = 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 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); + //setChatt((prevChatt) => [...prevChatt, newMessage]); + }; +// @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'); + } + } else { + alert('메세지를 입력하세요.'); + // @ts-ignore + document.getElementById('msg').focus(); + return; + } + setMsg(''); + }, [chkLog, msg, name, webSocketLogin]); + +const handleConfirm = () => { + console.log('눌림') + +} + const buttonColor = msg == '' ? 'bg-zinc-100' : 'bg-primary-logo' + + return ( +
+
+
+
모글리님
+ + +
+
+
+
+ {/* 상대방 */} +
+ + + + {/* border-2 border-primary-logo */} +
+
{message}
+
오전 12:05
+
+
+ + {/* 나 */} +
+
오전 12:05
+ +
{message}
+ +
+
+ + {/* 메시지 입력 부분 */} +
+
+ {/* 메시지 입력 컴포넌트 -form 형식*/} + {/*
+ setMsgInput(e.target.value)} + className="bg-zinc-100 h-100vh max-h-[52px]" + type="text" + placeholder="메시지를 입력하세요" + style={{ width: '80%',borderRadius: '20px', padding: '5px', }} + /> + +
+ +
+
*/} + {/* 메시지 입력 컴포넌트 -input*/} +
+ + +
+ +
+
+
+
+
+
+ + + + ) +} \ 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 6a4edfd..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(); - 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 ( -
-
-
{nickname}님
-
-
-
- {/* 상대방 */} -
- - - -{/* border-2 border-primary-logo */} -
-
{message}
-
오전 12:05
-
-
- - {/* 나 */} -
-
오전 12:05
- -
{message}
- -
-
- - {/* 메시지 입력 부분 */} -
-
- {/* 메시지 입력 컴포넌트 -form 형식*/} - {/*
- setMsgInput(e.target.value)} - className="bg-zinc-100 h-100vh max-h-[52px]" - type="text" - placeholder="메시지를 입력하세요" - style={{ width: '80%',borderRadius: '20px', padding: '5px', }} - /> - -
- -
-
*/} - {/* 메시지 입력 컴포넌트 -input*/} -
- - -
- -
-
-
-
-
-
- - - - ) -} diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx index 3b920e7..b475a23 100644 --- a/src/pages/home/Home.tsx +++ b/src/pages/home/Home.tsx @@ -111,10 +111,10 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
sfsdfsdfsdf
sfsdfsdfsdf
- + - +
sfsdfsdfsdf
sfsdfsdfsdf
diff --git a/src/pages/roommatelist/RoommateOption.tsx b/src/pages/roommatelist/RoommateOption.tsx index ba8001c..20b5fb6 100644 --- a/src/pages/roommatelist/RoommateOption.tsx +++ b/src/pages/roommatelist/RoommateOption.tsx @@ -8,6 +8,7 @@ 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'; +import { InputLabel } from '@mui/material'; const BootstrapInput = styled(InputBase)(({ theme }) => ({ 'label + &': { marginTop: theme.spacing(3), @@ -67,6 +68,8 @@ export function RoommateOption({ onClick }: { onClick: () => void }) {
호실 인원 *
+ 성별 + + 블루미르홀 308관 + 블루미르홀 309관 + {/* 퓨처하우스 */} + + + +
+ + {/* 호실 */} +
호실 인원 *
+ + + 인원 + + + + +
+ + +
+
(선택사항)
+ +
+ +
+
+ {/* 대학 */} +
학과
+ + + 대학 + + + + + {/* 학번 */} +
학번
+ + + 학번 + + + + + + + +
+ + {/* 나이 */} +
나이
+ + + 나이 + + + + + + + {/* mbti */} +
mbti
+ + + mbti + + + + +
+ + +
+
+ + {/* */} +
+ + + + + ) +} From 9986fded1f52213664680176e604aa3d55ce2d22 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 16:28:37 +0900 Subject: [PATCH 07/11] Update RecommendIntro.tsx: solve loadingpage --- src/App.tsx | 2 +- src/components/Loading.tsx | 6 +- src/forpractice/ForPractice.tsx | 2 +- src/recommendIntro/RecommendIntro.tsx | 403 +++++++++++++++----------- 4 files changed, 237 insertions(+), 176 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3c98fc3..0883b13 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -42,7 +42,7 @@ const Router = createBrowserRouter([ }, { path: '/recommendIntro', - element: <>, + element: <>, }, { path: '/resulthome', diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx index 107129a..a938db2 100644 --- a/src/components/Loading.tsx +++ b/src/components/Loading.tsx @@ -2,16 +2,16 @@ import { useEffect, useState } from "react"; import ProgressIndLinear from "./common/ProgressIndLinear"; import { useNavigate } from "react-router-dom"; interface LoadingProps{ - address : string; + address : string; firstLine : string, secondLine : string, } -export const Loading = ({ address,firstLine, secondLine }: LoadingProps) => { +export const Loading = ({ address , firstLine, secondLine }: LoadingProps) => { const navigate = useNavigate(); const timeout = () => { return setTimeout(() => { navigate(address); - }, 5000); + }, 1000); }; useEffect(() => { const timeoutId = timeout(); diff --git a/src/forpractice/ForPractice.tsx b/src/forpractice/ForPractice.tsx index 953d550..1c101e2 100644 --- a/src/forpractice/ForPractice.tsx +++ b/src/forpractice/ForPractice.tsx @@ -5,6 +5,6 @@ import { RoommateOption } from "../pages/roommatelist/RoommateOption" import { Card73 } from "../pages/roommatelist/components/Card73" export function ForPractice() { return ( -
+
) } \ No newline at end of file diff --git a/src/recommendIntro/RecommendIntro.tsx b/src/recommendIntro/RecommendIntro.tsx index 0a5c67f..5bd637e 100644 --- a/src/recommendIntro/RecommendIntro.tsx +++ b/src/recommendIntro/RecommendIntro.tsx @@ -1,6 +1,8 @@ import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material"; -import { useState } from "react"; 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: '인문대학' }, @@ -51,6 +53,8 @@ export const RecommendIntro = () => { const [age, setAge] = useState(''); const [age_num, setAge_num] = useState(0); const [mbti, setMbti] = useState(''); + const usenavigate = useNavigate(); + const [loading, setLoading] = useState(false); const handledormChange = (event: SelectChangeEvent) => { setDorm(event.target.value as string); setDormNUM(parseInt(dorm)); @@ -85,188 +89,245 @@ export const RecommendIntro = () => { {mbtis.label} )); + + + 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(); + setLoading(true); + //usenavigate('/resulthome'); + + 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); + + // Check if login is successful, then redirect to StarPage + + if (response.ok) { + usenavigate('/resulthome'); + // + } + } catch (error) { + console.error('Error during login:', error); + } + }; return ( -
-
-
보다 정확한 추천을 위해,
-
아래의 내용을 입력해주세요!
- -
+
+ {loading ? + +: +
+
+
보다 정확한 추천을 위해,
+
아래의 내용을 입력해주세요!
+ +
-
-
- {/* 기숙사 건물 */} -
거주하게 될 기숙사 *
- - - 건물 - - - -
+
+
+ {/* 기숙사 건물 */} +
거주하게 될 기숙사 *
+ + + 건물 + + + +
- {/* 호실 */} -
호실 인원 *
- - - 인원 - - - - -
+ {/* 호실 */} +
호실 인원 *
+ + + 인원 + + + + +
-
-
(선택사항)
- -
- -
-
- {/* 대학 */} -
학과
- - - 대학 - - - - - {/* 학번 */} -
학번
- - - 학번 - - - - - - +
+
(선택사항)
+ +
+ +
+
+ {/* 대학 */} +
+
학과
+ + + 대학 + + + + +
+ {/* 학번 */} +
+
학번
+ + + 학번 + + + + +
+ + -
+
- {/* 나이 */} -
나이
- - - 나이 - - - - + {/* 나이 */} +
나이
+ + + 나이 + + + + - {/* mbti */} -
mbti
- - - mbti - - - - -
+ {/* mbti */} +
mbti
+ + + mbti + + + + +
+ + +
+
- -
-
+ +
+ - {/* */} + }
- + From ee941ee9a67af03cc1d015c649cd039edbd7a32e Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 16:34:27 +0900 Subject: [PATCH 08/11] Update RecommendIntro.tsx&TestPagePanel.tsx: solve loading page --- src/pages/testpage/TestPagePanel.tsx | 170 +++++++++++++------------- src/recommendIntro/RecommendIntro.tsx | 11 +- 2 files changed, 94 insertions(+), 87 deletions(-) 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') // - - - - + setLoading(true); } } catch (error) { console.error('Error during login:', error); @@ -499,92 +497,100 @@ const handlePrevPage = () => { const isNextButtonDisabled = selectedAnswer === 0; return ( +
+ {loading ? + + :
- {questionIndex === 0 || questionIndex === 1? -
- -
해당하는 대답을 선택해 주세요!
- + {questionIndex === 0 || questionIndex === 1? +
+ +
해당하는 대답을 선택해 주세요!
+ -
{TEST_LIST[questionIndex].question}
-
-
- -
- -
- - {(TEST_LIST[questionIndex].answer).map((answer, index) => ( - handleAnswerSelect({index}) - - } - /> ))} -
-
{TEST_LIST[questionIndex].question}
+
+
- -
+
- -
sdfsd
-
sdfsd
-
sdfsd
-
sdfsd
-
sdfsd
-
sdfsd
-
sdfsd
+
+ + {(TEST_LIST[questionIndex].answer).map((answer, index) => ( + handleAnswerSelect({index}) + + } + /> ))} +
+
+ +
- : -
- -
-
해당하는 대답을 선택해 주세요!
- -
-
{TEST_LIST[questionIndex].question}
-
-
- -
- -
- - {(TEST_LIST[questionIndex].answer).map((answer, index) => ( - handleAnswerSelect({index}) + +
sdfsd
+
sdfsd
+
sdfsd
+
sdfsd
+
sdfsd
+
sdfsd
+
sdfsd
+ +
+ : +
- } - /> ))} -
-
+
해당하는 대답을 선택해 주세요!
+ +
+
{TEST_LIST[questionIndex].question}
+
+
- -
+
- -
sdfsd
-
sdfsd
-
sdfsd
+
+ + {(TEST_LIST[questionIndex].answer).map((answer, index) => ( + handleAnswerSelect({index}) + + } + /> ))} +
+
+ +
- } -
+ +
sdfsd
+
sdfsd
+
sdfsd
+ +
+ } +
+ + } +
+ ); } diff --git a/src/recommendIntro/RecommendIntro.tsx b/src/recommendIntro/RecommendIntro.tsx index 5bd637e..9a57cc0 100644 --- a/src/recommendIntro/RecommendIntro.tsx +++ b/src/recommendIntro/RecommendIntro.tsx @@ -101,7 +101,7 @@ export const RecommendIntro = () => { 6.${mbti} `) e.preventDefault(); - setLoading(true); + //usenavigate('/resulthome'); try { @@ -123,13 +123,14 @@ export const RecommendIntro = () => { // Handle the response as needed console.log(response); - + setLoading(true); // Check if login is successful, then redirect to StarPage if (response.ok) { - usenavigate('/resulthome'); + //usenavigate('/resulthome'); // - } + setLoading(true); + } } catch (error) { console.error('Error during login:', error); } @@ -137,7 +138,7 @@ export const RecommendIntro = () => { return (
{loading ? - + :
From 93867fb91d116be4a0a5b03a8e076edb9e5d5bb5 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 17:12:49 +0900 Subject: [PATCH 09/11] Update RecommendIntro.tsx: set data type --- .../roommatelist/components/RoommateCard.tsx | 4 +- src/recommendIntro/RecommendIntro.tsx | 66 ++++++++++++++----- 2 files changed, 53 insertions(+), 17 deletions(-) diff --git a/src/pages/roommatelist/components/RoommateCard.tsx b/src/pages/roommatelist/components/RoommateCard.tsx index 9d39c37..bd58303 100644 --- a/src/pages/roommatelist/components/RoommateCard.tsx +++ b/src/pages/roommatelist/components/RoommateCard.tsx @@ -363,9 +363,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/recommendIntro/RecommendIntro.tsx b/src/recommendIntro/RecommendIntro.tsx index 9a57cc0..df5a9d8 100644 --- a/src/recommendIntro/RecommendIntro.tsx +++ b/src/recommendIntro/RecommendIntro.tsx @@ -53,19 +53,34 @@ export const RecommendIntro = () => { const [age, setAge] = useState(''); const [age_num, setAge_num] = useState(0); const [mbti, setMbti] = useState(''); - const usenavigate = useNavigate(); 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) => { - setDept(event.target.value as string); + setDeptValid(event.target.value as string !== ''); + if(deptValid){ + setDept(event.target.value as string); + }else{ + setDept("비공개"); + } + console.log(dept) }; const departmentOptions = departments.map((department) => ( @@ -74,21 +89,39 @@ export const RecommendIntro = () => { )); const handlestu_numChange = (event: SelectChangeEvent) => { - setStu_num(event.target.value as string); - setStu_NUM(parseInt(room)); + 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) => { - setAge(event.target.value as string); - setAge_num(parseInt(room)); + + 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) => { - setMbti(event.target.value as string); + + setMbtiValid(event.target.value as string !== ''); + if(mbtiValid){ + setMbti(event.target.value as string) + }else{ + setDept("비공개"); + } }; const mbtiOptions = mbtis.map((mbtis) => ( {mbtis.label} )); + const isFormValid = dormValid && roomValid ; const handleSubmit = async (e: React.FormEvent) => { @@ -103,8 +136,8 @@ export const RecommendIntro = () => { e.preventDefault(); //usenavigate('/resulthome'); - - try { + if(isFormValid){ + try { const response = await fetch('http://aniroomi-env.eba-rj7upyms.ap-northeast-2.elasticbeanstalk.com/detail', { method: 'POST', headers: { @@ -135,6 +168,8 @@ export const RecommendIntro = () => { console.error('Error during login:', error); } }; + } + return (
{loading ? @@ -210,7 +245,7 @@ export const RecommendIntro = () => {
학과
- 대학 + 비공개 { height : '48px', }} > + 비공개 16학번 17학번 18학번 @@ -267,7 +303,7 @@ export const RecommendIntro = () => {
나이
- 나이 + 비공개 Date: Thu, 7 Dec 2023 18:10:33 +0900 Subject: [PATCH 10/11] Update RoommateCard.tsx: edit card color --- src/App.tsx | 1 - src/forpractice/ForPractice.tsx | 9 +- src/pages/roommatelist/Intro2.tsx | 14 -- src/pages/roommatelist/Intro3.tsx | 14 -- src/pages/roommatelist/Optional.tsx | 143 ------------- src/pages/roommatelist/RoommateOption.tsx | 101 --------- src/pages/roommatelist/RoommateRecommend.tsx | 201 +++++++++++++----- .../roommatelist/RoommateRecommendPanel.tsx | 156 -------------- src/pages/roommatelist/Tab1.tsx | 4 +- .../roommatelist/components/RoommateCard.tsx | 25 ++- 10 files changed, 167 insertions(+), 501 deletions(-) delete mode 100644 src/pages/roommatelist/Intro2.tsx delete mode 100644 src/pages/roommatelist/Intro3.tsx delete mode 100644 src/pages/roommatelist/Optional.tsx delete mode 100644 src/pages/roommatelist/RoommateOption.tsx delete mode 100644 src/pages/roommatelist/RoommateRecommendPanel.tsx diff --git a/src/App.tsx b/src/App.tsx index 0883b13..7d23a13 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,6 @@ import { AnimalDictionary } from './pages/animaldict/AnimalDictionary' import { Verify } from './pages/verify/Verify' import { ChatList, } from './pages/chat/ChatList' import { RoommateRecommend } from './pages/roommatelist/RoommateRecommend' -import { RoommateOption } from './pages/roommatelist/RoommateOption' import { Group } from './pages/group/Group' import { Notice } from './pages/notice/Notice' import BottomNavbar from './components/BottomNavBar/BottomNavBar' diff --git a/src/forpractice/ForPractice.tsx b/src/forpractice/ForPractice.tsx index 1c101e2..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 ( -
+
ssf
) } \ No newline at end of file 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 ( -
-
더 많은 사용자의 유입을 위해, 기숙사 합격통보 날의 일주일 뒤부터 매칭을 시작합니다
-
- monkey -
-
- 매칭이 시작되면 알림으로 알려드릴게요 :) -
- -
- ) -} \ 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 ( -
-
모글리님에게 어울리는 룸메이트를 찾고 있습니다!
-
잠시만 기다려주세요
-
- monkey -
- -
- ) -} \ 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 ( -
-
-
추가로 표시되고 싶은 항목을 선택해주세요 (선택사항)
-
- -
-
-
학과
- - - - - -
-
-
학번
- - - - - -
-
-
-
나이
-
- - - - - -
-
-
-
MBTI
-
- - - - - -
- - -
-
- -
-
- - -
-
- {/*
- {/*
- 로그인 -
*/} - -
- ) -} \ 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 20b5fb6..0000000 --- a/src/pages/roommatelist/RoommateOption.tsx +++ /dev/null @@ -1,101 +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'; -import { InputLabel } from '@mui/material'; -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 ( -
-
-
보다 정확한 추천을 위해,
-
아래의 내용을 입력해주세요!
-
- -
-
-
거주하게 될 기숙사 *
- - - - - -
-
-
호실 인원 *
- - - 성별 - - - - -
- - -
- -
- {/*
- -
- -
- -
- ) -} \ 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( -
-
축하합니다!
- -
룸메이트 추천을 위한
-
모든 과정이 끝났습니다
- -
- monkey -
-
- {/*
+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 ( + - ) -} -export const Intro2 = ({ onClick }: { onClick: () => void }) => { - return ( -
-
더 많은 사용자의 유입을 위해, 기숙사 합격통보 날의 일주일 뒤부터 매칭을 시작합니다
-
- monkey + ); + } +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 ( +
+ {nickname}님을 위한 +
추천 결과입니다.
+ ); + case 1: + return (
- 매칭이 시작되면 알림으로 알려드릴게요 :) + 전체 목록 +
{nickname}님이 거주하는 건물의
+
기숙사생들을 모두 볼 수 있어요!
- -
- ) -} -export function RoommateRecommend() { - const [step, setStep] = React.useState(3); - - const handleButtonClick= () =>{ - setStep(step+1); + ); + case 2: + return ( +
+ {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 === 1 && } - {step === 2 && } */} - {/* 원래 이 페이지여야 하지만, 우선 제외 - {step === 3 && } - */} - {step === 3 && } - +
+
+ {/* + + */} + + + +
{getContentBasedOnTab()}
- ) -} + + + + + + + + + + + + + + + + + +
+ ) +} \ 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 ( - - ); - } -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 ( -
- 전체 목록 -
{nickname}님이 거주하는 건물의
-
기숙사생들을 모두 볼 수 있어요!
-
- ); - case 2: - return ( -
- {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 ( -
-
- {/* - - */} - - - -
{getContentBasedOnTab()}
-
- - - - - - - - - - - - - - - - - -
- ) -} \ 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 bd58303..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 (
@@ -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}
From 6635c5cda2c139c3adb05ea6b12296a3e136d772 Mon Sep 17 00:00:00 2001 From: sonyujin Date: Thu, 7 Dec 2023 18:11:31 +0900 Subject: [PATCH 11/11] Update chatting.tsx: edit chat --- src/pages/chat/[apply_id]/Chatting.tsx | 147 +++++++++++++------------ 1 file changed, 74 insertions(+), 73 deletions(-) diff --git a/src/pages/chat/[apply_id]/Chatting.tsx b/src/pages/chat/[apply_id]/Chatting.tsx index c9efbcc..f932327 100644 --- a/src/pages/chat/[apply_id]/Chatting.tsx +++ b/src/pages/chat/[apply_id]/Chatting.tsx @@ -2,7 +2,6 @@ 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'; -import { Button } from "../../../components/common"; type ChattingPageParams = { apply_id : string; } @@ -11,20 +10,46 @@ export const Chatting = () => { const [inputHeight, setInputHeight] = useState(60); // 초기값은 입력 부분의 높이 //const [msgInput, setMsgInput] = useState(''); const [msg, setMsg] = useState(''); - const message="안녕하세요! " - const [name, setName] = 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% @@ -54,8 +79,13 @@ export const Chatting = () => { // @ts-ignore ws.current.onmessage = (message) => { console.log('WebSocket message received:', message.data); - //const newMessage = JSON.parse(message.data); - //setChatt((prevChatt) => [...prevChatt, newMessage]); + 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) => { @@ -95,7 +125,18 @@ export const Chatting = () => { // @ts-ignore ws.current.send(temp); } else { - console.warn('WebSocket is not open'); + 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('메세지를 입력하세요.'); @@ -106,71 +147,34 @@ export const Chatting = () => { setMsg(''); }, [chkLog, msg, name, webSocketLogin]); -const handleConfirm = () => { - console.log('눌림') - -} const buttonColor = msg == '' ? 'bg-zinc-100' : 'bg-primary-logo' - return ( -
-
-
-
모글리님
- - -
+
+
+
모글리님
-
+
- {/* 상대방 */} -
- - - - {/* border-2 border-primary-logo */} -
-
{message}
-
오전 12:05
+ {chat.map((item: any, idx) => ( +
+ {item.name !== name && ( + + + + )} +
+
+ {item.msg} +
+
{item.date}
+
-
- - {/* 나 */} -
-
오전 12:05
- -
{message}
- -
+ ))}
- {/* 메시지 입력 부분 */} -
-
- {/* 메시지 입력 컴포넌트 -form 형식*/} - {/*
- setMsgInput(e.target.value)} - className="bg-zinc-100 h-100vh max-h-[52px]" - type="text" - placeholder="메시지를 입력하세요" - style={{ width: '80%',borderRadius: '20px', padding: '5px', }} - /> - -
- -
-
*/} - {/* 메시지 입력 컴포넌트 -input*/} + {/* 메시지 입력 부분 */} +
+
{ className="bg-zinc-100 h-100vh max-h-[52px]" type="text" placeholder="메시지를 입력하세요" - style={{ width: '80%',borderRadius: '20px', padding: '5px', }} + style={{ width: '80%', borderRadius: '20px', padding: '5px' }} />
@@ -198,8 +202,5 @@ const handleConfirm = () => {
- - - - ) + ); } \ No newline at end of file