Skip to content

Commit 995018a

Browse files
AngelaChaejungAngelaChaejung
authored
Merge branch 'dev' into Feat/ScheduleEdit
2 parents 8760cfa + dcd2c90 commit 995018a

25 files changed

+349
-62
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"react-redux": "^8.0.5",
2121
"react-router-dom": "^6.8.1",
2222
"react-scripts": "5.0.1",
23+
"react-spinners": "^0.13.8",
2324
"redux": "^4.2.1",
2425
"styled-components": "^5.3.6",
2526
"styled-reset": "^4.4.5",

‎src/components/Schedule/ScheduleDetail.jsx

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import axios from "axios";
12
import React, { memo, useEffect, useState } from "react";
23
import { useParams } from "react-router-dom";
34
import kebab from "../../img/kebab.png";
@@ -6,6 +7,7 @@ import KebabModal from "../modal/KebabButtonModal";
67
import gnimsIcon from "../../img/gnimslogo1.png";
78
import { useDispatch, useSelector } from "react-redux";
89
import { __getScheduleDetail } from "../../redux/modules/ScheduleSlice";
10+
import schedulealoneIcon from "../../img/schedulealone.png";
911

1012
const ScheduleDetail = () => {
1113
const dispatch = useDispatch();
@@ -28,6 +30,7 @@ const ScheduleDetail = () => {
2830
// setSchedule(appData.data.data);
2931
// }, []);
3032
// };
33+
3134
const time = schedule.time?.split(":", 2).join(":");
3235
useEffect(() => {
3336
dispatch(__getScheduleDetail(id));
@@ -52,7 +55,7 @@ const ScheduleDetail = () => {
5255
console.log(Number(sessionStorage.getItem("userId")));
5356

5457
return (
55-
<div className="bg-[#EDF7FF] h-full width-[375px]">
58+
<div className="bg-[#F8FCFF] h-full width-[375px]">
5659
<div>
5760
<div className="fixed bottom-0">
5861
{/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
@@ -64,7 +67,7 @@ const ScheduleDetail = () => {
6467
>
6568
<div className="flex flex-row-reverse ">
6669
<img
67-
className={`h-[20px] ${isHidden} row`}
70+
className={`h-[20px] ${isHidden} row cursor-pointer`}
6871
src={kebab}
6972
alt="케밥메뉴"
7073
onClick={showModalHandler}
@@ -81,13 +84,13 @@ const ScheduleDetail = () => {
8184
{schedule.dday === 0 ? <div>DAY</div> : <div>{schedule.dday}</div>}
8285
</div>
8386
</div>
84-
<div className="text-[#12396F]">
87+
<div className="">
8588
<div>
8689
{/* 참여자는 2명이상일 때부터 화면에 보입니다. */}
8790
{numberOfJoiner !== 1 ? (
8891
<div className="mt-[30px] h-[98px] ml-[20px]">
8992
참여자
90-
<div className="bg-[#CEE4F8] h-[50px] w-[335px] mt-[20px] p-[15px] drop-shadow-lg flex rounded-lg">
93+
<div className="bg-white h-[50px] w-[335px] mt-[20px] p-[15px] drop-shadow-lg flex rounded-lg">
9194
{joiner &&
9295
joiner.map((a) => {
9396
return (
@@ -104,22 +107,23 @@ const ScheduleDetail = () => {
104107
{schedule.content ? (
105108
<div className="h-[234px] mt-[30px] mb-[8px] ml-[20px]">
106109
일정내용{" "}
107-
<div className="bg-[#CEE4F8] shadow-lg h-[186px] w-[335px] mt-[20px] p-[15px] flex rounded-lg">
110+
<div className="bg-white shadow-lg h-[186px] w-[335px] mt-[20px] p-[15px] flex rounded-lg">
108111
{schedule.content}
109112
</div>
110113
</div>
111114
) : (
112115
false
113116
)}
114117
{!schedule.content && numberOfJoiner === 1 ? (
115-
<div>
118+
<div className="m-auto justify-center items-center mt-[80px]">
116119
<img
117-
src={gnimsIcon}
120+
src={schedulealoneIcon}
118121
alt="gnimslogo"
119-
className="ml-[50px] opacity-[60%] h-[100px] flex justify-center mt-[80px]"
122+
className="m-auto w-[167px] h-[153px] flex justify-center items-center"
120123
/>
121-
<div className="font-bold mt-[30px] text-center">
122-
혼자만의 일정이군요! 좋은 하루 되세요!
124+
<div className="font-medium mt-[30px] text-[20px] text-center text-black">
125+
혼자만의 일정이군요! <br />
126+
때로는 개인시간도 중요한 법이죠.
123127
</div>
124128
</div>
125129
) : null}

‎src/components/follow/FollowerCard.jsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React, { useState } from "react";
22
import { useDispatch } from "react-redux";
3+
import { useNavigate } from "react-router-dom";
34
import { __postFollowState } from "../../redux/modules/FollowSlice";
45

56
const FollowerCard = ({ follower }) => {
7+
const navigate = useNavigate();
68
const dispatch = useDispatch();
79
const [isFollowed, setIsFollowed] = useState(
810
follower.followStatus === "ACTIVE" && "INIT"
@@ -21,7 +23,14 @@ const FollowerCard = ({ follower }) => {
2123

2224
return (
2325
<div className="flex gap-[90px] w-full mt-[16px]">
24-
<div className="flex gap-[14px]">
26+
<div
27+
className="flex gap-[14px] "
28+
onClick={() => {
29+
navigate(`/friends/${follower.followId}`);
30+
sessionStorage.setItem("clickedUserName", follower.username);
31+
sessionStorage.setItem("clickedUserImg", follower.profile);
32+
}}
33+
>
2534
<div className="w-[50px] h-[50px]">
2635
<img
2736
className="w-full h-full rounded-full"

‎src/components/follow/FollowingCard.jsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { useState } from "react";
22
import { useDispatch } from "react-redux";
3+
import { useNavigate } from "react-router-dom";
34
import { __postFollowState } from "../../redux/modules/FollowSlice";
45

56
const FollowingCard = ({ following }) => {
67
const dispatch = useDispatch();
78
const [isFollowed, setIsFollowed] = useState(
89
following.followStatus === "ACTIVE" || "INIT"
910
);
10-
11+
const navigate = useNavigate();
1112
const [btnColor, setBtnColor] = useState(
1213
following.followStatus === "ACTIVE" || "INIT" ? "#A31414" : "#002C51"
1314
);
@@ -21,7 +22,14 @@ const FollowingCard = ({ following }) => {
2122

2223
return (
2324
<div className="flex gap-[90px] w-full mt-[16px]">
24-
<div className="flex gap-[14px]">
25+
<div
26+
className="flex gap-[14px]"
27+
onClick={() => {
28+
navigate(`/friends/${following.followId}`);
29+
sessionStorage.setItem("clickedUserName", following.username);
30+
sessionStorage.setItem("clickedUserImg", following.profile);
31+
}}
32+
>
2533
<div className="w-[50px] h-[50px]">
2634
<img
2735
className="w-full h-full rounded-full"

‎src/components/layout/BottomNavi.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const BottomNavi = () => {
2323
handleIconClick("follow");
2424
navigate("/follow");
2525
}}
26-
className="w-[24px] h-[24px]"
26+
className="w-[24px] cursor-pointer h-[24px]"
2727
>
2828
<img
2929
src={onIcon === "follow" ? onFollow : offFollow}
@@ -37,7 +37,7 @@ const BottomNavi = () => {
3737
handleIconClick("home");
3838
navigate("/main");
3939
}}
40-
className="w-[24px] h-[24px]"
40+
className="w-[24px] h-[24px] cursor-pointer"
4141
>
4242
<img src={onIcon === "home" ? onHome : offHome} alt="홈" />
4343
{/* <img src={onIcon[1]? onHome : offHome} alt="홈" /> */}
@@ -48,7 +48,7 @@ const BottomNavi = () => {
4848
handleIconClick("My");
4949
navigate("/profile");
5050
}}
51-
className="px-[3.5px] py-[5.5px] w-[24px] h-[24px]"
51+
className="cursor-pointer px-[3.5px] c py-[5.5px] w-[24px] h-[24px]"
5252
>
5353
<img src={onIcon === "My" ? onMy : offMy} alt="마이" />
5454
{/* <img src={onIcon[2] ? onMy : offMy} alt="마이" /> */}

‎src/components/layout/Layout.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const Layout = ({ children }) => {
1111
const pagePathName = useLocation();
1212
const [header, setHeader] = useState(null);
1313
const id = pagePathName.pathname.split("/")[2];
14-
console.log(id);
1514
useEffect(() => {
1615
const userId = sessionStorage.getItem("userId");
1716
const pageName = pagePathName.pathname;
@@ -29,6 +28,9 @@ const Layout = ({ children }) => {
2928
case `/detail/${id}`:
3029
setHeader(() => <TopNavBar />);
3130
break;
31+
case `/friends/${id}`:
32+
setHeader(() => <TopNavTitleBar>내 친구의 일정</TopNavTitleBar>);
33+
break;
3234
case "/schedule":
3335
setHeader(() => <TopNavTitleBar>일정 추가</TopNavTitleBar>);
3436
break;

‎src/components/layout/TopNavBar.jsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@ const TopNavBar = () => {
1313
<img
1414
src={gnimsLogo}
1515
alt="gnimsLogo"
16-
className="mt-[4px] h-[40px]"
16+
className="mt-[4px] h-[40px] cursor-pointer"
1717
onClick={() => {
1818
navigate("/main");
1919
}}
2020
/>
2121
</div>
2222
<div className="flex flex-row gap-[19px]">
2323
<img
24-
className="h-[24px] w-[24px] flex left-[255px] mt-[13px]"
24+
className="h-[24px] w-[24px] flex left-[255px] cursor-pointer mt-[13px]"
2525
src={searchIcon}
2626
alt="검색버튼"
2727
//navigate 경로는 검색페이지루트가 정해지면 변경하면됩니다
@@ -31,7 +31,7 @@ const TopNavBar = () => {
3131
}}
3232
/>
3333
<img
34-
className="h-[24px] w-[24px] flex left-[293px] mt-[13px]"
34+
className="h-[24px] cursor-pointer w-[24px] flex left-[293px] mt-[13px]"
3535
src={plusIcon}
3636
alt="추가버튼"
3737
onClick={() => {
@@ -41,8 +41,7 @@ const TopNavBar = () => {
4141
}}
4242
/>
4343
<img
44-
className="h-[24px] w-[24px] flex left-[331px] mt-[13px]
45-
"
44+
className="h-[24px] w-[24px] cursor-pointer flex left-[331px] mt-[13px]"
4645
src={notifyIcon}
4746
alt="알림버튼"
4847
onClick={() => {

‎src/components/layout/TopNavTitleBar.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const TopNavTitleBar = ({ children }) => {
88
<div className="h-[48px] w-full bg-white flex items-center">
99
<div className="h-[48px]">
1010
<img
11-
className="h-[24px] w-[24px] absolute left-[21px] mt-[13px]"
11+
className="h-[24px] w-[24px] cursor-pointer absolute left-[21px] mt-[13px]"
1212
src={backIncom}
1313
alt="검색버튼"
1414
//navigate 경로는 검색페이지루트가 정해지면 변경하면됩니다

‎src/components/login/NaverLogin.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ const NaverLogin = () => {
77

88
const NAVER_CLIENT_ID = "T9R5hFNUTuTa1UqoVBcO";
99
// process.env.REACT_APP_NAVER_CLIENT_ID;
10-
const NAVER_CALLBACK_URL = "http://localhost:3000/social/naver-login";
10+
const NAVER_CALLBACK_URL =
11+
"https://gnims-chaejung-work-git-dev-angelachaejung.vercel.app/social/naver-login";
1112
// process.env.REACT_APP_NAVER_CALLBACK_URL;
1213
const initializeNaverLogin = () => {
1314
const naverLogin = new naver.LoginWithNaverId({

‎src/components/login/NaverLoginLoding.jsx

+17-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import axios from "axios";
22
import React, { useEffect } from "react";
3+
import DotLoader from "react-spinners/DotLoader";
34

45
function NaverLoginLoding() {
56
const userAccessToken = () => {
@@ -60,7 +61,22 @@ function NaverLoginLoding() {
6061

6162
return (
6263
<div>
63-
<div>loding...</div>
64+
<div
65+
style={{
66+
position: "fixed",
67+
top: "30%",
68+
left: "50%",
69+
transform: "translate(-50%, -50%)",
70+
}}
71+
>
72+
<DotLoader
73+
color="#36abd6"
74+
height={15}
75+
width={5}
76+
radius={2}
77+
margin={2}
78+
/>
79+
</div>
6480
</div>
6581
);
6682
}

‎src/components/main/FriendsMain.jsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useEffect, useState } from "react";
2+
import { useParams } from "react-router-dom";
3+
import { instance } from "../../shared/AxiosInstance";
4+
import FriendsScheduleCard from "./FriendsScheduleCard";
5+
6+
const FriendsMain = () => {
7+
const id = useParams();
8+
const followid = id.id;
9+
const [schedule, setSchedule] = useState();
10+
const friendName = sessionStorage.getItem("clickedUserName");
11+
const friendImg = sessionStorage.getItem("clickedUserImg");
12+
const getSchdule = async () => {
13+
await instance.get(`/users/${followid}/events`).then((appData) => {
14+
setSchedule(appData.data.data);
15+
}, []);
16+
};
17+
18+
useEffect(() => {
19+
window.addEventListener("beforeunload", clearSessionStorage);
20+
getSchdule();
21+
// 컴포넌트가 언마운트될 때, beforeunload 이벤트 해제
22+
return () => {
23+
window.removeEventListener("beforeunload", clearSessionStorage);
24+
};
25+
}, []);
26+
27+
const clearSessionStorage = () => {
28+
// 세션 스토리지 지우기
29+
sessionStorage.removeItem("clickedUserName");
30+
sessionStorage.removeItem("clickedUserImg");
31+
console.log("비웠다");
32+
};
33+
return (
34+
<>
35+
<div className="container">
36+
<div className="grid grid-flow-row mt-[] ml-[20px] mr-[20px]">
37+
<div className="mt-[30px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
38+
<div className="flex flex-row gap-[10px]">
39+
<div className="p-[10px]">
40+
<img
41+
className="h-[60px] w-[60px] rounded-full"
42+
src={friendImg}
43+
alt="프로필이미지"
44+
/>
45+
</div>
46+
<div className="flex items-center">
47+
<p className="p-[10px] font-[700] text-[20px] text-textNavy">
48+
{friendName}님의 스케쥴입니다!
49+
</p>
50+
</div>
51+
</div>
52+
</div>
53+
<div>
54+
{/* <InfiniteScroll /> */}
55+
<div className="flex flex-col gap-[30px] mt-[28px] rounded-[10px]">
56+
{schedule?.map((list) => {
57+
return (
58+
<FriendsScheduleCard key={list.eventId} schedules={list} />
59+
);
60+
})}
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</>
66+
);
67+
};
68+
69+
export default FriendsMain;

0 commit comments

Comments
 (0)