Skip to content

Commit

Permalink
Merge pull request #370 from SejongPeer/feature/23
Browse files Browse the repository at this point in the history 
fix: [23] 메인 페이지 데탑 디자인 수정 및 api 분리
  • Loading branch information
@AhnRian
AhnRian authored Jul 30, 2024
2 parents ab86209 + 4e8b2fc commit 15bc5e4
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 282 deletions.
182 changes: 15 additions & 167 deletions src/pages/main/mainPage/MainPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { MyContext } from '../../../App';

import MainBuddy from './MainBuddy';
Expand All @@ -16,157 +16,27 @@ import ready from '../../../assets/image/ready.png';
import style from './MainPage.module.css';

import useStudyInfoStore from '../../study/useStudyInfoStore';
import { BuddyHandler, HonbobHandler } from './api'; // Import API functions

const images = [honbobUse, buddyUse, peerUse];

const MainPage = () => {
const navigate = useNavigate();
const refreshToken = localStorage.getItem('refreshToken');
const accessToken = localStorage.getItem('accessToken');
const { setBuddyCount } = useContext(MyContext);

// 동물상 미팅 페이지 이동
const goResult = () => {
navigate('/fest/AnimalApply');
};

// 동물상 결과 확인
const goAnimalResult = () => {
navigate('/fest/animalcheck');
};

// 버디 상태 확인
const BuddyHandler = async () => {
if (refreshToken === null || accessToken === null) {
alert('로그인 후 이용 가능한 서비스입니다!');
navigate('/login');
} else {
try {
const response = await fetch(
process.env.REACT_APP_BACK_SERVER + '/buddy/check-matching-status',
{
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
'Refresh-Token': localStorage.getItem('refreshToken'),
},
}
);
const data = await response.json();
// console.log(data.data);

if (data.data !== null) setBuddyCount(data.data.matchingCompletedCount);
else setBuddyCount(0);

//상태 관리
if (data.data === null) {
navigate('/buddy/start1');
} else {
statusHandler(data.data.status, data.data.matchingCompletedCount);
}
} catch (error) {
alert('에러가 발생했습니다.');
console.log(error.message);
}
}
};

//버디 - 상태에따른 처리
const statusHandler = (status, count) => {
//취소, 거절 패널티 해제
if (status === 'CANCEL' || status === 'REACTIVATE') {
if (count > 0) {
navigate('/buddy/success');
} else {
navigate('/buddy/start1');
}
// 거절 당함
} else if (status === 'DENIED') {
alert('상대방이 거절했습니다. 다시 신청해 주세요.');
if (count > 0) {
navigate('/buddy/success');
} else {
navigate('/buddy/start1');
}
//매칭 최종 완료
} else if (status === 'MATCHING_COMPLETED') {
alert('매칭에 성공했습니다. 정보를 확인해주세요!');
navigate('/buddy/success');
//매칭 수락
} else if (status === 'ACCEPT') {
alert('신청 수락을 했습니다. 상대방이 수락할때까지 기다려 주세요.');
//매칭 거절
} else if (status === 'REJECT') {
alert(
'거절 패널티 1시간이 부과되었습니다. 1시간 이후에 다시 신청해 주세요.'
);
//매칭 중
} else if (status === 'IN_PROGRESS') {
alert('매칭중입니다!');
navigate('/buddy/waiting');
//매칭 완료
} else if (status === 'FOUND_BUDDY') {
alert('버디를 찾았습니다!');
navigate('/buddy/accept');
}
};

//혼밥 상태 확인
const HonbobHandler = async () => {
if (refreshToken === null || accessToken === null) {
alert('로그인 후 이용 가능한 서비스입니다!');
navigate('/login');
} else {
try {
const response = await fetch(
process.env.REACT_APP_BACK_SERVER + '/honbab/check-matching-status',
{
method: 'GET',
headers: {
Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
'Refresh-Token': localStorage.getItem('refreshToken'),
},
}
);
if (!response.ok) {
throw new Error('Network response was not ok'); // 응답 상태가 좋지 않을 경우 에러를 발생시킴
}
const data = await response.json(); // 주석 해제하여 JSON 응답을 파싱

if (data.data === null || data.data.status === 'CANCEL') {
navigate('/honbob/start1');
} else if (
data.data.status === 'TIME_OUT' ||
data.data.status === 'EXPIRED'
) {
navigate('/honbob/start1');
} else if (data.data.status === 'IN_PROGRESS') {
alert('매칭 중입니다!');
navigate('/honbob/waiting');
} else if (data.data.status === 'MATCHING_COMPLETED') {
alert('매칭에 성공했습니다!');
navigate('/honbob/success');
}
} catch (error) {
console.error('에러 체크:', error);
alert('매칭 체크 실패!');
}
}
};
//studyType설정
const { studyType, setStudyType } = useStudyInfoStore();

// StudyHandler function to set study type and navigate
const StudyHandler = () => {
setStudyType('lecture');
const refreshToken = localStorage.getItem('refreshToken');
const accessToken = localStorage.getItem('accessToken');
if (refreshToken === null || accessToken === null) {
alert('로그인 후 이용 가능한 서비스입니다!');
navigate('/login');
} else {
if (studyType === 'lecture') navigate('/study');
}
};
const reportUserHandler = () => {
alert('너 신고');
};

const [currentImageIndex, setCurrentImageIndex] = useState(0);
const [slideIn, setSlideIn] = useState(true);
Expand Down Expand Up @@ -229,7 +99,7 @@ const MainPage = () => {
className={style.useImg}
src={images[currentImageIndex]}
onClick={() => onImageClick(currentImageIndex)}
></img>
/>
<div
style={{
display: 'flex',
Expand All @@ -242,46 +112,27 @@ const MainPage = () => {
<img
src={buddy_button}
className={style.btn1}
onClick={BuddyHandler}
></img>
onClick={() => BuddyHandler(navigate, setBuddyCount)}
/>
<img
src={honbobButton}
className={style.btn1}
onClick={HonbobHandler}
></img>
onClick={() => HonbobHandler(navigate)}
/>
</div>
{/* 세종 스터디 버튼 임시로 숨겨둠 - 축제 때문에 */}
<div className={style.festButton}>
<div className={style.studyText}>
<h3 style={{ fontFamily: 'jalnan', margin: '16px 4px 12px 0px' }}>
세종스터디
</h3>
<p style={{ fontFamily: 'Pretendard' }}>인생 팀원 구하기</p>
<h3 className={style.title}>세종스터디</h3>
<p className={style.title} style={{ fontFamily: 'Pretendard' }}>
인생 팀원 구하기
</p>
</div>
<div className={style.studyContainer}>
<button className={style.school} onClick={StudyHandler}></button>
<button className={style.except}></button>
</div>
{/* <button
className={style.festButton2}
style={{ backgroundColor: '#FAFAFA' }}
onClick={goAnimalResult}
>
<p>내 동물상 확인</p>
</button>
<button
className={style.festButton2}
style={{
backgroundColor: '#FF4B4B',
color: 'white',
border: 'none',
}}
onClick={goResult}
>
<p>미팅하기</p>
</button> */}
</div>
{/* <img className={style.ready} src={ready} /> */}
</div>
<div onClick={kakaoChat}>
<button
Expand All @@ -293,9 +144,6 @@ const MainPage = () => {
카카오톡 문의하기
</button>
</div>
{/* <button className={style.btn} onClick={readyHandler}>
<MainStudy />
</button> */}
</div>
);
};
Expand Down
53 changes: 41 additions & 12 deletions src/pages/main/mainPage/MainPage.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,31 +50,54 @@
.festButton {
display: flex;
justify-content: center;
align-items: flex-end;
/* align-items: center; */
gap: 7px;
background-color: white;
height: 204px;
width: 343px;
border: 1px solid #e5e5e5;
border-radius: 16px;
margin-top: 2vh;
flex-direction: column;
}
.festButton {
width: 351px;
height: 204px;
/* background-image: url('../../../assets/image/Festival.png'); */
background-repeat: no-repeat;
background-position: center;
background-size: cover;

.studyText {
display: flex;
flex-direction: row;
align-items: baseline;
margin-left: 16px;
}

.title {
font-family: 'jalnan';
margin: 16px 4px 4px 0px;
}

.studyContainer {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
border: 1px solid #e5e5e5;
border-radius: 15px;
gap: 7px;
}

.school {
width: 152px;
height: 136px;
background-image: url('../../../assets/image/school.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: white;
}

.except {
width: 152px;
height: 136px;
background-image: url('../../../assets/image/except.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: white;
}
.festButton2 {
margin-top: 144px;
width: 152px;
Expand Down Expand Up @@ -307,6 +330,12 @@
align-items: baseline;
margin-left: 16px;
}

.title {
font-family: 'jalnan';
margin: 16px 4px 12px 0px;
}

.studyContainer {
display: flex;
justify-content: center;
Expand Down
Loading

0 comments on commit 15bc5e4

Please sign in to comment.