Skip to content

Commit 31c4471

Browse files
AngelaChaejungAngelaChaejung
authored
Merge pull request #159 from gnims-project/dev
Upload/Main Merge #100
2 parents a3b4a3e + 3557f7d commit 31c4471

15 files changed

+231
-70
lines changed

‎src/components/follow/FollowerCard.jsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ const FollowerCard = ({ follower }) => {
1111
const navigate = useNavigate();
1212
const dispatch = useDispatch();
1313
const [isFollowed, setIsFollowed] = useState(
14-
follower.followStatus === "ACTIVE" || "INIT"
14+
follower.followStatus === "INACTIVE"
1515
);
1616

1717
const [btnColor, setBtnColor] = useState(
18-
follower.followStatus === "ACTIVE" || "INIT" ? "#A31414" : "#002C51"
18+
follower.followStatus === "INACTIVE" ? "#002C51" : "#A31414"
1919
);
2020

2121
const handleClick = (e) => {
@@ -24,8 +24,8 @@ const FollowerCard = ({ follower }) => {
2424
};
2525

2626
useLayoutEffect(() => {
27-
if (isFollowed) setBtnColor("#A31414");
28-
else setBtnColor("#002C51");
27+
if (isFollowed) setBtnColor("#002C51");
28+
else setBtnColor("#A31414");
2929
}, [follower]);
3030

3131
return (
@@ -48,13 +48,13 @@ const FollowerCard = ({ follower }) => {
4848
<div className="flex w-[119px] items-center">{follower.username}</div>
4949
</div>
5050
{isFollowed ? (
51-
<div className="flex items-center w-[62px] h-[39px] justify-center text-sm rounded-[4px] text-white bg-[#A31414]">
52-
<span onClick={handleClick}>삭제</span>
53-
</div>
54-
) : (
5551
<div className="flex items-center w-[62px] h-[39px] justify-center text-sm rounded-[4px] text-white bg-[#002C51]">
5652
<span onClick={handleClick}>팔로우</span>
5753
</div>
54+
) : (
55+
<div className="flex items-center w-[62px] h-[39px] justify-center text-sm rounded-[4px] text-white bg-[#A31414]">
56+
<span onClick={handleClick}>삭제</span>
57+
</div>
5858
)}
5959
</div>
6060
);

‎src/components/layout/Layout.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const Layout = ({ children }) => {
2929
setHeader(() => <TopNavBar />);
3030
break;
3131
case `/friendsdetail/${id}`:
32-
setHeader(() => () => (
32+
setHeader(() => (
3333
<TopNavTitleBar>
3434
{sessionStorage.getItem("clickedUserName")}님의 일정
3535
</TopNavTitleBar>

‎src/components/layout/TopNavBar.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const TopNavBar = () => {
5050
});
5151
// SSE 연결 성공 시 호출되는 이벤트 핸들러
5252
eventSource.onopen = () => {
53-
console.log("SSE 연결완료");
53+
// console.log("SSE 연결완료");
5454
};
5555
eventSource.onmessage = async function (event) {
5656
const data = JSON.parse(event.data);
@@ -87,7 +87,7 @@ const TopNavBar = () => {
8787
//컴포넌트가 언마운트될 때 eventSource를 닫음
8888
return () => {
8989
eventSource && eventSource.close();
90-
console.log("event source closed.");
90+
// console.log("event source closed.");
9191
};
9292
}, []);
9393

‎src/components/main/FriednsScheduleCard.jsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React, { useState } from "react";
2+
import { useEffect } from "react";
3+
import { useNavigate } from "react-router-dom";
4+
5+
const FriednsScheduleCard = ({ schedules }) => {
6+
const navigate = useNavigate();
7+
const invitees = schedules.invitees;
8+
9+
const hourClock = schedules.time.split(":", 2)[0];
10+
let hour = 0;
11+
const min = schedules.time.split(":", 2)[1];
12+
const morningAfternoon = ["오전", "오후"];
13+
if (hourClock > 12) {
14+
hour = hourClock - 12;
15+
} else {
16+
hour = hourClock;
17+
}
18+
const time = `${hour}:${min}`;
19+
const bgColor = `bg-${schedules.cardColor}`;
20+
21+
const [inviteesList, setInviteesList] = useState({
22+
hidden: true,
23+
inviteesList: "",
24+
});
25+
useEffect(() => {
26+
if (invitees.length > 1) {
27+
setInviteesList(() => ({
28+
hidden: false,
29+
inviteesList: `${schedules.invitees[0].username} 외 ${
30+
invitees.length - 1
31+
} 명`,
32+
}));
33+
}
34+
}, [invitees, schedules.invitees]);
35+
36+
const onDetail = () => {
37+
navigate(`/friendsdetail/${schedules.eventId}`);
38+
};
39+
40+
return (
41+
<div
42+
onClick={onDetail}
43+
className={`w-[335px] h-[180px] bg-white rounded-[10px] border border-solid border-[#E8E8E8] shadow-md`}
44+
>
45+
<div
46+
className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}
47+
>
48+
<ul className="ml-[9px] flex flex-row gap-[4px]">
49+
{[0, 1, 2].map((list) => (
50+
<li key={list} className="bg-white h-[4px] w-[4px] rounded-full" />
51+
))}
52+
</ul>
53+
</div>
54+
55+
<div className="pt-[20px] pl-[22px] pr-[22px]">
56+
<div className="text-textBlack ">
57+
<div className="grid grid-flow-row gap-[20px]">
58+
<div className="flex flex-row h-[21px] gap-[25px] text-[16px] font-[400]">
59+
<div>{schedules.date}</div>
60+
{hourClock > 12 ? (
61+
<div>{` ${morningAfternoon[1]} ${time}`}</div>
62+
) : (
63+
<div>
64+
{morningAfternoon[0]}
65+
{time}
66+
</div>
67+
)}
68+
<div className="font-[700]">
69+
D-
70+
{schedules.dday === 0 ? <>DAY</> : <>{schedules.dday}</>}
71+
</div>
72+
</div>
73+
74+
<div className="grid grid-flow-row gap-[17px]">
75+
<div className="text-[18px] font-[700]">
76+
<div>{schedules.subject}</div>
77+
</div>
78+
79+
<div className="h-[40px]">
80+
<div hidden={inviteesList.hidden} className="flex space-x-32">
81+
<div className="flex -space-x-5 overflow-hidden ">
82+
{invitees.map((list, index) => {
83+
return (
84+
<div
85+
key={index}
86+
className="flex rounded-full border-white border-2"
87+
>
88+
<img
89+
className="inline-block h-[40px] w-[40px] rounded-full"
90+
src={list.profile}
91+
alt="프로필이미지"
92+
></img>
93+
</div>
94+
);
95+
})}
96+
</div>
97+
<div className="flex items-center text-[#6F6F6F]">
98+
{inviteesList.inviteesList}
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
<div className="flex h-[40px] text-rigth">
106+
<div className="items-center text-right w-full rigth-0 "></div>
107+
</div>
108+
</div>
109+
</div>
110+
);
111+
};
112+
113+
export default FriednsScheduleCard;

‎src/components/main/FriendsMain.jsx

+76-28
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,101 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
2+
import { useDispatch } from "react-redux";
23
import { useParams } from "react-router-dom";
34
import { instance } from "../../shared/AxiosInstance";
4-
import MainScheduleCards from "./MainScheduleCards";
5+
import FriednsScheduleCard from "./FriednsScheduleCard";
6+
import { __postFollowState } from "../../redux/modules/FollowSlice";
57

68
const FriendsMain = () => {
9+
const dispatch = useDispatch();
710
const id = useParams();
11+
const [status, setStatus] = useState(200);
812
const followid = id.id;
13+
const [button, setButton] = useState(false);
914
const [schedule, setSchedule] = useState();
15+
1016
const friendName = sessionStorage.getItem("clickedUserName");
1117
const friendImg = sessionStorage.getItem("clickedUserImg");
18+
1219
const getSchdule = async () => {
13-
await instance.get(`/users/${followid}/events`).then((appData) => {
14-
setSchedule(appData.data.data);
15-
}, []);
20+
try {
21+
await instance.get(`/users/${followid}/events`).then((response) => {
22+
setSchedule(response.data.data);
23+
});
24+
} catch (e) {
25+
if (e.response.status === 403) {
26+
setStatus(403);
27+
console.log(status);
28+
}
29+
}
1630
};
17-
18-
useEffect(() => {
31+
const refresh = () => {
32+
window.location.reload();
33+
};
34+
const handleClick = () => {
35+
dispatch(__postFollowState({ id: id.id, state: "following" }));
36+
setButton(true);
37+
// window.location.reload();
38+
};
39+
useLayoutEffect(() => {
1940
getSchdule();
20-
}, []);
41+
}, [schedule]);
2142

2243
return (
2344
<>
2445
<div className="container">
2546
<div className="grid grid-flow-row mt-[] ml-[20px] mr-[20px]">
26-
<div className="mt-[30px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
27-
<div className="flex flex-row gap-[10px]">
28-
<div className="p-[10px]">
47+
<div>
48+
{status === 200 ? (
49+
<div className="mt-[30px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
50+
<div className="flex flex-row gap-[10px]">
51+
<div className="p-[10px]">
52+
<img
53+
className="h-[60px] w-[60px] rounded-full"
54+
src={friendImg}
55+
alt="프로필이미지"
56+
/>
57+
</div>
58+
<div className="flex items-center">
59+
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
60+
{friendName}님의 스케쥴입니다!
61+
</p>
62+
</div>
63+
</div>
64+
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
65+
{schedule?.map((list) => {
66+
return (
67+
<FriednsScheduleCard
68+
key={list.eventId}
69+
schedules={list}
70+
/>
71+
);
72+
})}
73+
</div>
74+
</div>
75+
) : (
76+
<div className="text-[22px] mt-[100px] font-extralight ">
77+
현재 팔로우하고있지 않은 유저입니다!
78+
<br />
79+
<div className="text-[16px] mt-[20px] text-center">
80+
{friendName}님의 스케쥴을 확인하시려면 <br />
81+
팔로우해주세요
82+
</div>
2983
<img
30-
className="h-[60px] w-[60px] rounded-full"
84+
className="h-[80px] m-auto mt-[30px] w-[80px] rounded-full"
3185
src={friendImg}
3286
alt="프로필이미지"
3387
/>
88+
<div className="flex items-center w-[110px] mx-auto h-[39px] justify-center mt-[20px] text-[12px] rounded-[4px] text-white bg-[#002C51] cursor-pointer">
89+
<span onClick={button ? refresh : handleClick}>
90+
{button ? (
91+
<span>한번만 더 클릭해줭</span>
92+
) : (
93+
<span>{friendName}님 팔로우하기</span>
94+
)}
95+
</span>
96+
</div>
3497
</div>
35-
<div className="flex items-center">
36-
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
37-
{friendName}님의 스케쥴입니다!
38-
</p>
39-
</div>
40-
</div>
41-
</div>
42-
<div>
43-
{/* <InfiniteScroll /> */}
44-
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
45-
{schedule?.map((list) => {
46-
return (
47-
<MainScheduleCards key={list.eventId} schedules={list} />
48-
);
49-
})}
50-
</div>
98+
)}
5199
</div>
52100
</div>
53101
</div>

‎src/components/modal/FollowingModal.jsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,23 @@ import JoinerList from "./JoinerList";
55

66
const FollowingModal = ({ setFollowingListOpen }) => {
77
const dispatch = useDispatch();
8-
// const [selectedUserIds, setSelectedUserIds] = useState([]);
9-
const submitHandler = () => {
10-
const filteredSelectedId = [...new Set(selectedUserIds)];
11-
const filteredSelectedNames = [...new Set(selectedUserNames)];
12-
sessionStorage.setItem("selectedJoiner", filteredSelectedId);
13-
sessionStorage.setItem("selectedJoinerNames", filteredSelectedNames);
14-
setFollowingListOpen(false);
15-
};
168

179
const following = useSelector((state) => state.FollowSlice.following);
18-
useEffect(() => {
19-
dispatch(__getFollowing());
20-
}, [dispatch]);
2110
const [selectedUserIds, setSelectedUserIds] = useState([]);
2211
const [selectedUserNames, setSelectedUserNames] = useState([]);
12+
2313
const closeFollowModal = () => {
2414
setFollowingListOpen(false);
2515
};
16+
const submitHandler = () => {
17+
sessionStorage.setItem("selectedJoiner", selectedUserIds);
18+
sessionStorage.setItem("selectedJoinerNames", selectedUserNames);
19+
setFollowingListOpen(false);
20+
};
21+
useEffect(() => {
22+
dispatch(__getFollowing());
23+
}, [dispatch]);
24+
2625
return (
2726
<>
2827
<div className="h-full w-[375px] bg-black bg-opacity-50 justify-center fixed bottom-0 z-10 flex">

‎src/components/modal/JoinerList.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const JoinerList = ({
99
setSelectedUserNames,
1010
selectedUserNames,
1111
}) => {
12-
useEffect(() => {}, [selectedUserIds]);
1312

1413
function selectHandler(followId) {
1514
// 기존 선택된 사용자 ID 리스트에서 해당 아이디가 이미 선택되어 있는지 확인

‎src/components/mypage/ProfileEdit.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const ProfileEdit = () => {
5757
const { imageUrl } = response.data.data.profileImage;
5858
setImage(imageUrl);
5959
} catch (error) {
60-
console.error(error);
60+
// console.error(error);
6161
}
6262
};
6363
useEffect(() => {

‎src/components/mypage/ScheduleInvitation.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const ScheduleInvitation = () => {
1313
const { isLoading, error, invitation } = useSelector(
1414
(state) => state.InvitationSlice
1515
);
16-
console.log("무슨 스테이트?", invitation);
1716

1817
useEffect(() => {
1918
dispatch(__getInvitation());

0 commit comments

Comments
 (0)