Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DEV] 선택사항 ~ 룸메이트 추천 페이지 api 연동 & ui수정 #92

Merged
merged 11 commits into from
Dec 7, 2023
Merged

[DEV] 선택사항 ~ 룸메이트 추천 페이지 api 연동 & ui수정 #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3005815
Update TestPage.tsx:edit mt
causyj Dec 6, 2023
e67c4be
Update ResultHome.tsx: edit ui
causyj Dec 6, 2023
50e3277
Update ResultHome.tsx: edit tilebox color
causyj Dec 6, 2023
50a6c21
Update Home.tsx:edit ui
causyj Dec 6, 2023
5f79811
Update Home.tsx : edit test card ui
causyj Dec 6, 2023
718a901
Update ChatList.tsx: add chat login
causyj Dec 7, 2023
9986fde
Update RecommendIntro.tsx: solve loadingpage
causyj Dec 7, 2023
ee941ee
Update RecommendIntro.tsx&TestPagePanel.tsx: solve loading page
causyj Dec 7, 2023
93867fb
Update RecommendIntro.tsx: set data type
causyj Dec 7, 2023
ca7fcfe
Update RoommateCard.tsx: edit card color
causyj Dec 7, 2023
6635c5c
Update chatting.tsx: edit chat
causyj Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -16,8 +15,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: '/',
Expand All @@ -39,6 +39,10 @@ const Router = createBrowserRouter([
path: '/roommatelist',
element: <><BottomNavbar/><RoommateRecommend/></>,
},
{
path: '/recommendIntro',
element: <><RecommendIntro/></>,
},
{
path: '/resulthome',
element: <><BottomNavbar/><ResultHome/></>,
Expand All @@ -52,7 +56,7 @@ const Router = createBrowserRouter([
element: <><BottomNavbar/><ChatList/></>,
},
{
path: '/chat/:nickname',
path: '/chat/:apply_id',
element: <><Chatting/></>,
},
{
Expand Down
6 changes: 3 additions & 3 deletions src/components/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion src/components/resultdetail/TitleBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export function TitleBox({ title, animalColor }: TitleBoxProps) {
const animalColors = "yellow"
return (
<div>
<div className={`w-full border-4 font-['700'] text-${animalColors}-500 rounded-lg flex items-center justify-center text-center p-4 font-bold text-xl`}>
<div className={`w-full border-4 font-['700'] ㅠ-${animalColors}-500 rounded-lg flex items-center justify-center text-center p-4 font-bold text-xl`}>
{title}
</div>
</div>
Expand Down
9 changes: 2 additions & 7 deletions src/forpractice/ForPractice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div> <Loading address='/resulthome' firstLine='모글리님의' secondLine='생활 유형을 분석 중이에요'/></div>
<div>ssf</div>
)
}
108 changes: 54 additions & 54 deletions src/pages/chat/ChatList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,83 @@ import { Avatar, Stack } from "@mui/material";
import { Link } from "react-router-dom";

export function ChatList() {
const nickname = "모글리"
return (
<div className="flex flex-col justify-center items-center w-full">
<div className=" max-w-[413px] w-full h-24 font-['700'] text-3xl flex bg-white justify-start fixed top-0 px-9 items-center " style={{zIndex:200}}>
<div className="">채팅목록</div>
</div>
<div className="w-full mt-[72px]">
<Link to='/roommatelist' className="flex items-start">
<div className="max-w-[413px] w-full h-16 bg-gray-100 rounded-2xl">
<div className="flex flex-col items-center justify-start p-3">
<div className="text-s text-center">나와 생활유형이 맞는 룸메이트를 찾아보세요!</div>
<div className="flex flex-row">
<div className="mt-1 mr-1 font-['700'] text-m ">나와 맞는 룸메이트 보러가기 {'>'}</div>
<img src={process.env.PUBLIC_URL + '/roommate.png'} alt="roomie" width="35px" />
</div>
const apply_id = "1"
return (
<div className="flex flex-col justify-center items-center w-full">
<div className=" max-w-[413px] w-full h-24 font-['700'] text-3xl flex bg-white justify-start fixed top-0 px-9 items-center " style={{zIndex:200}}>
<div className="">채팅목록</div>
</div>
<div className="w-full mt-[72px]">
<Link to='/roommatelist' className="flex items-start">
<div className="max-w-[413px] w-full h-16 bg-gray-100 rounded-2xl">
<div className="flex flex-col items-center justify-start p-3">
<div className="text-s text-center">나와 생활유형이 맞는 룸메이트를 찾아보세요!</div>
<div className="flex flex-row">
<div className="mt-1 mr-1 font-['700'] text-m ">나와 맞는 룸메이트 보러가기 {'>'}</div>
<img src={process.env.PUBLIC_URL + '/roommate.png'} alt="roomie" width="35px" />
</div>
</div>
</div>
</Link>
</div>
</div>
</Link>
</div>

<div className="flex flex-col overflow-y-auto gap-4 mt-4">
<Link to={`${nickname}`}>
<div className="w-full flex flex-row">
<div>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
</div>
<div className="flex flex-col ml-4 py-0.5">
<div className="font-['700'] text-lg ">{nickname}님</div>
<div className="font-['700'] text-xs text-primary-gray">예민한 고양이 / 혹은 마지막 채팅 내용</div>
</div>
<div className="font-['700'] text-xs text-primary-gray text-xxs text-end ml-auto mr-1 mt-2">오전 11:38</div>
</div>
</Link>
<div className="w-full flex flex-row">
<div className="flex flex-col overflow-y-auto gap-4 mt-4">
<Link to={`${apply_id}`}>
<div className="w-full flex flex-row">
<div>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
</div>
<div className="flex flex-col ml-4 py-0.5">
<div className="font-['700'] text-lg "></div>
<div className="font-['700'] text-xs text-primary-gray">예민한 고양이 / 혹은 마지막 채팅 내용</div>
</div>
<div className="font-['700'] text-xs text-primary-gray text-xxs text-end ml-auto mr-1 mt-2">오전 11:38</div>
</div>
</Link>
<div className="w-full flex flex-row">
<div>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
</div>
<div className="flex flex-col ml-4 py-0.5">
<div className="font-['700'] text-lg ">모글리님</div>
<div className="font-['700'] text-xs text-primary-gray">예민한 고양이 / 혹은 마지막 채팅 내용</div>
</div>
<div className="font-['700'] text-xs text-primary-gray text-xxs text-end ml-auto mr-1 mt-2">오전 11:38</div>
</div>
<div className="w-full flex flex-row">
</div>
<div className="w-full flex flex-row">
<div>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
</div>
<div className="flex flex-col ml-4 py-0.5">
<div className="font-['700'] text-lg ">모글리님</div>
<div className="font-['700'] text-xs text-primary-gray">예민한 고양이 / 혹은 마지막 채팅 내용</div>
</div>
<div className="font-['700'] text-xs text-primary-gray text-xxs text-end ml-auto mr-1 mt-2">오전 11:38</div>
</div>
<div className="w-full flex flex-row">
</div>
<div className="w-full flex flex-row">
<div>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" sx={{ bgcolor: 'pink', width: 50, height: 50 }} src={process.env.PUBLIC_URL + '/cat.png'} />
</Stack>
</div>
<div className="flex flex-col ml-4 py-0.5">
<div className="font-['700'] text-lg ">모글리님</div>
<div className="font-['700'] text-xs text-primary-gray">예민한 고양이 / 혹은 마지막 채팅 내용</div>
</div>
<div className="font-['700'] text-xs text-primary-gray text-xxs text-end ml-auto mr-1 mt-2">오전 11:38</div>
</div>



</div>


</div>
</div>
);



</div>
</div>
);
}
Loading