Skip to content

Commit d089c14

Browse files
haruharugandaharuharuganda
authored
Feat gnims-project#32 초대받은 스케줄리스트 GET 구현
Feat gnims-project#32 초대받은 스케줄리스트 GET 구현
2 parents f2b203b + 2c98505 commit d089c14

9 files changed

+198
-47
lines changed

‎src/components/mypage/ InvitationCard.jsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react";
2+
import { useSelector } from "react-redux";
3+
4+
const InvitationCard = ({ invit }) => {
5+
console.log("뭘까요?", invit);
6+
7+
return (
8+
<div>
9+
<div className="rounded-[10px] mx-[20px] w-[335px] h-[184px] bg-gray-500">
10+
<div className="flex gap-[50px] relative top-[16px] ">
11+
<div className="flex ml-[23px] gap-[20px]">
12+
<span className="text-sm">{invit.date}</span>
13+
<span className="text-sm">{invit.time}</span>
14+
</div>
15+
<span className="text-sm">from.{invit.invitees.username}</span>
16+
</div>
17+
<div className="ml-[23px] relative top-[20px]">
18+
<div className="p-2 text-md">
19+
일이삼사오육칠팔구십일이삼사오육칠팔구십
20+
</div>
21+
</div>
22+
<div className="flex relative top-[44px] h-[57px] text-center items-center border-t-[1px] border-[#BBD7FF] border-solid">
23+
<div className="flex items-center justify-center flex-1 h-full text-center text-md">
24+
거절
25+
</div>
26+
<div className="flex text-center justify-center items-center flex-1 border-l-[1px] h-full border-[#BBD7FF] border-solid text-md">
27+
수락
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
export default InvitationCard;

‎src/components/mypage/Profile.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ const Profile = () => {
99
const navigate = useNavigate();
1010

1111
// 임시로 사용하는 데이터
12-
// window.localStorage.setItem("nickname", "동퐈");
13-
// window.localStorage.setItem("email", "[email protected]");
14-
// window.localStorage.setItem("profileImage", "");
12+
// localStorage.setItem("nickname", "동퐈");
13+
// localStorage.setItem("email", "[email protected]");
14+
// localStorage.setItem("profileImage", "");
1515

1616
//로컬 스토리지에 있는 데이터를 가져오는 코드
17-
const nickname = window.localStorage.getItem("nickname");
18-
const email = window.localStorage.getItem("email");
19-
const profileImage = window.localStorage.getItem("profileImage");
17+
const nickname = localStorage.getItem("nickname");
18+
const email = localStorage.getItem("email");
19+
const profileImage = localStorage.getItem("profileImage");
2020

2121
//페이지 렌더링시 팔로우 정보를 가져와야함
2222
useEffect(() => {}, []);
@@ -65,7 +65,7 @@ const Profile = () => {
6565
</div>
6666
<div
6767
onClick={() => {
68-
navigate();
68+
navigate("/scheduleinvitation");
6969
}}
7070
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
7171
>

‎src/components/mypage/ScheduleInvitation.jsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, { useEffect } from "react";
2+
import { useDispatch, useSelector } from "react-redux";
3+
import basicImg from "../../img/User-86.png";
4+
import { __getInvitation } from "../../redux/modules/InvitationSlice";
5+
import InvitationCard from "./ InvitationCard";
6+
7+
const ScheduleInvitation = () => {
8+
localStorage.setItem("nickname", "동퐈");
9+
const nickname = localStorage.getItem("nickname");
10+
11+
const dispatch = useDispatch();
12+
const { isLoading, error, data } = useSelector(
13+
(state) => state.InvitationSlice
14+
);
15+
16+
useEffect(() => {
17+
dispatch(__getInvitation());
18+
}, []);
19+
20+
if (isLoading) {
21+
return <div>로딩 중....</div>;
22+
}
23+
24+
if (error) {
25+
return <div>{error.message}</div>;
26+
}
27+
28+
return (
29+
<div>
30+
<div className="flex p-5 gap-[30px] justify-items-center">
31+
<div className="flex-none p-2 w-[86px] h-[86px] border-2 border-solid border-red-500">
32+
<img className="rounded-full" src={basicImg} />
33+
</div>
34+
<div className="pt-2 border-2 border-red-500 border-solid">
35+
<div className="text-[18px] pt-[12px] leading-[21px]">
36+
<span>
37+
{nickname} 님에게 온 일정 초대를 한 번에 확인 할 수 있습니다.
38+
</span>
39+
</div>
40+
</div>
41+
</div>
42+
<div>
43+
{data.map((invit) => (
44+
<InvitationCard key={invit.eventId} invit={invit} />
45+
))}
46+
</div>
47+
</div>
48+
);
49+
};
50+
51+
export default ScheduleInvitation;

‎src/redux/config/ConfigStore.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { configureStore } from "@reduxjs/toolkit";
22
import LoginSlice from "../modules/LoginSlice";
33
import ScheduleSlice from "../modules/ScheduleSlice";
44
import SingupSlice from "../modules/SingupSlice";
5+
import InvitationSlice from "../modules/InvitationSlice";
56

67
const store = configureStore({
7-
reducer: { LoginSlice, SingupSlice, ScheduleSlice },
8+
reducer: { LoginSlice, SingupSlice, ScheduleSlice, InvitationSlice },
89
});
910

1011
export default store;

‎src/redux/modules/InvitationSlice.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
2+
import axios from "axios";
3+
import { instance } from "../../shared/AxiosInstance";
4+
5+
const initialState = {
6+
data: [
7+
{
8+
eventId: null,
9+
date: "",
10+
time: "",
11+
cardColor: "",
12+
subject: "",
13+
invitees: [
14+
{
15+
username: "",
16+
profile: "",
17+
},
18+
],
19+
dday: null,
20+
},
21+
],
22+
isLoading: false,
23+
error: null,
24+
};
25+
26+
export const __getInvitation = createAsyncThunk(
27+
"getInvitation",
28+
async (payload, thunkAPI) => {
29+
try {
30+
const data = await instance.get(`/events/pending`);
31+
console.log("무슨데이터?", data);
32+
return thunkAPI.fulfillWithValue(data.data);
33+
} catch (error) {
34+
console.log("무슨에러?", error);
35+
console.log(error.response.data.errorMessage);
36+
return thunkAPI.rejectWithValue(error.response.data.errorMessage);
37+
}
38+
}
39+
);
40+
41+
export const invitationSlice = createSlice({
42+
name: "invitation",
43+
initialState,
44+
reducers: {},
45+
extraReducers: {
46+
[__getInvitation.pending]: (state) => {
47+
state.isLoading = true;
48+
},
49+
[__getInvitation.fulfilled]: (state, action) => {
50+
state.isLoading = false;
51+
state.todos = action.payload;
52+
},
53+
[__getInvitation.rejected]: (state, action) => {
54+
state.isLoading = false;
55+
state.error = action.payload;
56+
},
57+
},
58+
});
59+
60+
export const {} = invitationSlice.actions;
61+
export default invitationSlice.reducer;

‎src/redux/modules/LoginSlice.jsx

+34-36
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,43 @@ export const __kakaologin = createAsyncThunk(
5050
async (code, thunkAPI) => {
5151
try {
5252
console.log("페이로드?", code);
53-
const data = await axios
54-
.post("http://hayangaeul.shop/kakao/login", { code })
55-
.then((res) => {
56-
console.log("서버에서 보내는값?", res.data.data);
57-
const email = res.data.data.email;
58-
localStorage.setItem("email", email);
59-
localStorage.setItem("socialCode", "KAKAO");
53+
const data = await instance.post("/kakao/login", { code }).then((res) => {
54+
console.log("서버에서 보내는값?", res.data.data);
55+
const email = res.data.data.email;
56+
localStorage.setItem("email", email);
57+
localStorage.setItem("socialCode", "KAKAO");
6058

61-
if (res.data.message !== "non-member") {
62-
const accessToken = res.headers.get("Authorization");
63-
const nickname = res.data.data.nickname;
64-
console.log(nickname);
65-
localStorage.setItem("token", accessToken);
66-
localStorage.setItem("nickname", nickname);
67-
alert("그님스에 오신걸 환영합니다");
68-
return window.location.assign("/main");
59+
if (res.data.message !== "non-member") {
60+
const accessToken = res.headers.get("Authorization");
61+
const nickname = res.data.data.nickname;
62+
console.log(nickname);
63+
localStorage.setItem("token", accessToken);
64+
localStorage.setItem("nickname", nickname);
65+
alert("그님스에 오신걸 환영합니다");
66+
return window.location.assign("/main");
6967

70-
//멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야함
71-
} else if (res.data.message === "non-member") {
72-
alert("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
73-
return window.location.assign("/signup/setProfileName");
74-
}
75-
// const accessToken = res.headers.get("Authorization");
76-
// const nickname = res.data.nickname;
77-
// const email = res.data.email;
68+
//멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야함
69+
} else if (res.data.message === "non-member") {
70+
alert("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
71+
return window.location.assign("/signup/setProfileName");
72+
}
73+
// const accessToken = res.headers.get("Authorization");
74+
// const nickname = res.data.nickname;
75+
// const email = res.data.email;
7876

79-
// // 유저 토큰,닉네임,이메일이 있다면 가져온 후 세팅
80-
// if (accessToken && nickname && email) {
81-
// localStorage.setItem("token", accessToken);
82-
// localStorage.setItem("nickname", nickname);
83-
// localStorage.setItem("email", email);
84-
// alert(`소셜로그인 인증 완료! ${nickname}님 환영합니다!`);
85-
// return window.location.assign("/");
86-
// }
87-
// else {
88-
// alert("인증 오류! 다시 시도해주세요!");
89-
// return window.location.assign("/");
90-
// }
91-
});
77+
// // 유저 토큰,닉네임,이메일이 있다면 가져온 후 세팅
78+
// if (accessToken && nickname && email) {
79+
// localStorage.setItem("token", accessToken);
80+
// localStorage.setItem("nickname", nickname);
81+
// localStorage.setItem("email", email);
82+
// alert(`소셜로그인 인증 완료! ${nickname}님 환영합니다!`);
83+
// return window.location.assign("/");
84+
// }
85+
// else {
86+
// alert("인증 오류! 다시 시도해주세요!");
87+
// return window.location.assign("/");
88+
// }
89+
});
9290
return thunkAPI.fulfillWithValue(data);
9391
} catch (error) {
9492
window.location.assign("/");

‎src/shared/AxiosInstance.jsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ export const instance = axios.create({
44
//로컬
55
//baseURL: "http://localhost:3001",
66
//본서버
7-
//baseURL: "https://eb.jxxhxxx.shop",
7+
baseURL: "https://eb.jxxhxxx.shop",
88
//민우님 개인서버
99
//baseURL: "http://hayangaeul.shop/auth/login",
10-
baseURL: "http://hayangaeul.shop",
10+
// baseURL: "http://hayangaeul.shop",
1111
});
1212

1313
//서버에 요청을 보내기 전
@@ -24,4 +24,3 @@ instance.interceptors.request.use(
2424
return Promise.reject(error);
2525
}
2626
);
27-

‎src/shared/Router.jsx

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import MainPage from "../page/MainPage";
1616
import SetProfileNamePage from "../page/SetProfileNamePage";
1717
import SetProfileImgPage from "../page/SetProfileImgPage";
1818
import NotificationsPage from "../page/NotificationsPage";
19+
import ScheduleInvitation from "../components/mypage/ScheduleInvitation";
1920

2021
const Router = () => {
2122
return (
@@ -48,6 +49,10 @@ const Router = () => {
4849
element={<SetProfileImgPage />}
4950
/>
5051
<Route path="/notification" element={<NotificationsPage />} />
52+
<Route
53+
path="/scheduleinvitation"
54+
element={<ScheduleInvitation />}
55+
/>
5156
</Routes>
5257
</Layout>
5358
</Container>

‎tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ module.exports = {
55
extend: {
66
fontSize: {
77
sm: ["16px", "19px"],
8+
md: ["20px", "24px"],
89
},
910
colors: {
1011
sora: "#538EDF",

0 commit comments

Comments
 (0)