Skip to content

Commit 14a6d46

Browse files
AngelaChaejungAngelaChaejung
committed
2 parents f5e0f2a + 4ae8e3b commit 14a6d46

File tree

11 files changed

+192
-47
lines changed

11 files changed

+192
-47
lines changed

‎src/App.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import GlobalStyles from "./styles/GlobalStyle";
55
function App() {
66
return (
77
<>
8-
<GlobalStyles />
9-
<Router />
8+
<div className="overflow-hidden">
9+
<GlobalStyles />
10+
<Router />
11+
</div>
1012
</>
1113
);
1214
}

‎src/api/ScheduleApi.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
import { instance } from "../shared/AxiosInstance";
2+
import qs from "qs";
23

34
export const ScheduleApi = {
45
getSccheduleApi: (payload) => {
56
console.log(payload);
7+
//const data = instance.get(`/v2-dto/users/${payload}/events`);
68
const data = instance.get(`/users/${payload}/events`);
79
return data;
810
},
11+
getInfiniteScrollPage: (payload) => {
12+
console.log(payload.userId);
13+
const data = instance.get(
14+
`/v2-page/users/${payload.userId}/events?page=${payload.page}&size=${3}`
15+
);
16+
return data;
17+
},
918
postScheduleApi: (payload) => {
1019
const data = instance.post("/events", payload);
1120
return data;

‎src/components/Schedule/ScheduleAdd.jsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import DatePicker from "react-datepicker";
33
import "react-datepicker/dist/react-datepicker.css";
44
import { useDispatch } from "react-redux";
55
import { useNavigate } from "react-router-dom";
6-
import BottomNavi from "../../components/layout/BottomNavi";
6+
import BottomNavi from "../layout/BottomNavi";
77
import { __postSchedule } from "../../redux/modules/ScheduleSlice";
88
import TopNavBar from "../layout/TopNavBar";
99
import ScheduleModal from "../modal/ScheduleModal";
@@ -82,7 +82,6 @@ const ScheduleAdd = () => {
8282
content: content,
8383
participantsId: [3],
8484
};
85-
8685
await dispatch(
8786
__postSchedule({
8887
Schedule: newSchedule,

‎src/components/layout/BottomNavi.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { useNavigate } from "react-router-dom";
77
const BottomNavi = () => {
88
const navigate = useNavigate();
99
return (
10-
<div className="relative">
11-
<div className="fixed bottom-0 min-w-[375px] h-[50px] bg-white opacity-80">
10+
<div className="relative ">
11+
<div className="fixed bottom-0 min-w-[375px] h-[50px] bg-white">
1212
<div className="flex gap-[77px] pt-[13px] justify-center">
1313
<div
1414
onClick={() => {

‎src/components/layout/Layout.jsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ const Container = styled.div`
1212
width: 100%;
1313
max-width: 375px;
1414
height: 100vh;
15-
position: absolute;
15+
position: relative;
1616
opacity: 1;
1717
box-sizing: border-box;
1818
top: "calc(50% - 167px/2)";
1919
-ms-overflow-style: none;
2020
background-color: #edf7ff;
2121
font-family: Pretendard-Regular;
22-
22+
2323
//스크롤창 숨기기
2424
overflow-y: scroll;
2525
/* IE and Edge */
@@ -28,7 +28,6 @@ const Container = styled.div`
2828
scrollbar-width: none;
2929
&::-webkit-scrollbar {
3030
display: none;
31-
3231
}
3332
@media screen and (max-width: 768px) {
3433
width: 375px;

‎src/components/main/InfiniteScroll.jsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React, { useState, useEffect, useRef, useCallback } from "react";
2+
import { ScheduleApi } from "../../api/ScheduleApi";
3+
import MainScheduleCards from "./MainScheduleCards";
4+
import { useSelector, useDispatch } from "react-redux";
5+
import { useNavigate } from "react-router-dom";
6+
import { __getScrollPage } from "../../redux/modules/ScheduleSlice";
7+
import { pagePlus } from "../../redux/modules/ScheduleSlice";
8+
import axios from "axios";
9+
10+
const InfiniteScroll = () => {
11+
//리스트 생성
12+
const [scheduleList, setScheduleList] = useState();
13+
//페이징 생성
14+
const [page, setPage] = useState(0);
15+
//로딩여부
16+
const [load, setLoad] = useState(true);
17+
//중복 실행 방저
18+
const preventRef = useRef(true);
19+
//모든 글 로드 확인
20+
const endRef = useRef(false);
21+
//옵저버 확인
22+
const observerRef = useRef(null);
23+
const userId = window.localStorage.getItem("userId");
24+
25+
//옵저버 핸들링 함수
26+
const observerHandler = ([entries]) => {
27+
console.log(entries);
28+
console.log(endRef.current);
29+
if (!endRef.current && entries.isIntersecting) {
30+
preventRef.current = false;
31+
setPage((prev) => prev + 1);
32+
}
33+
};
34+
35+
//데이터가져옴
36+
const getSchedule = useCallback(async (payload) => {
37+
setLoad(true);
38+
try {
39+
const { data } = await ScheduleApi.getInfiniteScrollPage(payload);
40+
const dataList = data.data;
41+
console.log(dataList);
42+
setScheduleList(() => ({ dataList }));
43+
console.log(scheduleList);
44+
} catch {
45+
} finally {
46+
}
47+
}, []);
48+
49+
useEffect(() => {
50+
if (page !== 0) getSchedule({ userId: userId, page: page });
51+
}, [page, userId, getSchedule]);
52+
53+
useEffect(() => {
54+
const observer = new IntersectionObserver(observerHandler, {
55+
threshold: 0.5,
56+
});
57+
//주시대상목록에 추가
58+
if (observerRef.current) observer.observe(observerRef.current);
59+
return () => {
60+
observer.disconnect();
61+
};
62+
}, []);
63+
return (
64+
<>
65+
<div className="wrap min-h-[100vh]">
66+
{scheduleList && (
67+
<>
68+
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px] ">
69+
{scheduleList.map((list, index) => {
70+
return <MainScheduleCards key={index} schedules={list} />;
71+
})}
72+
</div>
73+
</>
74+
)}
75+
{load && <div className="py-3 bg-blue-500 text-center">로딩 중</div>}
76+
<div
77+
ref={observerRef}
78+
className="py-3 bg-red-500 text-white text-center"
79+
>
80+
옵저버 Element
81+
</div>
82+
</div>
83+
</>
84+
);
85+
};
86+
87+
export default InfiniteScroll;

‎src/components/main/Main.jsx

+34-30
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@ import React, { useState } from "react";
22
import defaultprofileImg from "../../img/User-86.png";
33
import { useEffect } from "react";
44
import { useNavigate } from "react-router-dom";
5+
import MainScheduleCards from "./MainScheduleCards";
56
import { useDispatch, useSelector } from "react-redux";
67
import { __getSchedule } from "../../redux/modules/ScheduleSlice";
7-
import MainScheduleCards from "./MainScheduleCards";
8+
//import InfiniteScroll from "./InfiniteScroll";
89

910
const Main = () => {
10-
const dispatch = useDispatch();
1111
const navigate = useNavigate();
12-
const { schedules } = useSelector((state) => state.ScheduleSlice);
1312
const [profileImg, setProfileImg] = useState(defaultprofileImg);
1413
const [nickName, setNickname] = useState("");
1514
const [email, setEmail] = useState("");
16-
15+
const dispatch = useDispatch();
16+
const { schedules } = useSelector((state) => state.ScheduleSlice);
17+
console.log(schedules);
1718
useEffect(() => {
19+
const userId = window.localStorage.getItem("userId");
1820
const getnickName = window.localStorage.getItem("nickname");
1921
const getprofilImg = window.localStorage.getItem("profileImage");
2022
const getEmail = window.localStorage.getItem("email");
21-
const userId = window.localStorage.getItem("userId");
2223
if (getnickName && getEmail) {
2324
setNickname(() => getnickName);
2425
setEmail(() => getEmail);
@@ -29,38 +30,41 @@ const Main = () => {
2930
} else {
3031
navigate(`/login`);
3132
}
32-
}, [dispatch, navigate, email]);
33-
34-
console.log(schedules);
33+
}, [navigate, email, dispatch]);
3534

3635
return (
37-
<div className="container md">
38-
<div className="grid grid-flow-row ml-[20px] mr-[20px]">
39-
<div className="mt-[78px] w-full h-[80px] bg-[#FFFFFF]">
40-
<div className="flex flex-row gap-[10px]">
41-
<div className="p-[10px]">
42-
<img
43-
className="h-[60px] w-[60px] rounded-full"
44-
src={profileImg}
45-
alt="프로필이미지"
46-
/>
47-
</div>
48-
<div className="flex items-center">
49-
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
50-
{nickName} 님
51-
</p>
36+
<>
37+
<div className="container md mb-[70px] ">
38+
<div className="grid grid-flow-row ml-[20px] mr-[20px]">
39+
<div className="mt-[78px] w-full h-[80px] bg-[#FFFFFF]">
40+
<div className="flex flex-row gap-[10px]">
41+
<div className="p-[10px]">
42+
<img
43+
className="h-[60px] w-[60px] rounded-full"
44+
src={profileImg}
45+
alt="프로필이미지"
46+
/>
47+
</div>
48+
<div className="flex items-center">
49+
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
50+
{nickName} 님
51+
</p>
52+
</div>
5253
</div>
5354
</div>
54-
</div>
55-
<div>
56-
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
57-
{schedules.map((list) => {
58-
return <MainScheduleCards key={list.eventId} schedules={list} />;
59-
})}
55+
<div>
56+
{/* <InfiniteScroll /> */}
57+
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px] ">
58+
{schedules.map((list) => {
59+
return (
60+
<MainScheduleCards key={list.eventId} schedules={list} />
61+
);
62+
})}
63+
</div>
6064
</div>
6165
</div>
6266
</div>
63-
</div>
67+
</>
6468
);
6569
};
6670

‎src/components/main/MainScheduleCards.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { useEffect } from "react";
33
import { useNavigate } from "react-router-dom";
44

55
const MainScheduleCards = ({ schedules }) => {
6+
console.log(schedules);
67
const navigate = useNavigate();
78
const invitees = schedules.invitees;
89
const time = schedules.time.split(":", 2).join(":");
9-
10+
// const bgColor = `bg-${schedules.cardColor}`;
11+
const bgColor = `bg-sora`;
1012
const [dDay, setDday] = useState({
1113
hidden: false,
1214
dDay: schedules.dday,
@@ -47,7 +49,7 @@ const MainScheduleCards = ({ schedules }) => {
4749
return (
4850
<div
4951
onClick={onDetail}
50-
className=" w-[335px] h-[180px] bg-[#538EDF] rounded-[10px] pt-[20px] pl-[22px] "
52+
className={`w-[335px] h-[180px] ${bgColor} rounded-[10px] pt-[20px] pl-[22px]`}
5153
>
5254
<div className=" text-[#ffff]">
5355
<div className="grid grid-flow-row gap-[19px]">

‎src/page/MainPage.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import TopNavBar from "../components/layout/TopNavBar";
44
import BottomNavi from "../components/layout/BottomNavi";
55
const MainPage = () => {
66
return (
7-
<>
7+
<div className="">
88
<TopNavBar />
99
<Main />
1010
<BottomNavi />
11-
</>
11+
</div>
1212
);
1313
};
1414

0 commit comments

Comments
 (0)