Skip to content

Commit 57cac12

Browse files
authored
Fix #146 카카오 모달 작업
Fix #146 카카오 모달 작업
2 parents 59b0d8e + d8e1c41 commit 57cac12

File tree

3 files changed

+126
-89
lines changed

3 files changed

+126
-89
lines changed

src/components/Schedule/ScheduleDetail.jsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import kebab from "../../img/kebab.png";
44
import BottomNavi from "../layout/BottomNavi";
55
import KebabModal from "../modal/KebabButtonModal";
66
import { useDispatch, useSelector } from "react-redux";
7-
import { __getScheduleDetail, scheduleReset } from "../../redux/modules/ScheduleSlice";
7+
import {
8+
__getScheduleDetail,
9+
scheduleReset,
10+
} from "../../redux/modules/ScheduleSlice";
811
import schedulealoneIcon from "../../img/schedulealone.png";
912

1013
const ScheduleDetail = () => {
@@ -37,7 +40,7 @@ const ScheduleDetail = () => {
3740
}
3841

3942
return (
40-
<div className="width-[375px] h-screen">
43+
<div className="width-[375px]">
4144
<div className="bg-[#F8FCFF] h-full width-[375px]">
4245
<div className="fixed bottom-0">
4346
{/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
@@ -50,11 +53,20 @@ const ScheduleDetail = () => {
5053
>
5154
<div className="flex space-x-3 text-[18px] font-extralight ">
5255
<div>{schedule.date}</div> <div> {time}</div>
53-
<div className="w-[160px] flex pl-[155px]" onClick={showModalHandler}>
54-
<img className={`h-[20px] ${isHidden} row cursor-pointer `} src={kebab} alt="케밥메뉴" />
56+
<div
57+
className="w-[160px] flex pl-[155px]"
58+
onClick={showModalHandler}
59+
>
60+
<img
61+
className={`h-[20px] ${isHidden} row cursor-pointer `}
62+
src={kebab}
63+
alt="케밥메뉴"
64+
/>
5565
</div>
5666
</div>
57-
<div className="mt-[28px] font-semibold text-[24px]">{schedule.subject}</div>
67+
<div className="mt-[28px] font-semibold text-[24px]">
68+
{schedule.subject}
69+
</div>
5870
<div className="place-content-end font-extralight flex text-[18px] mt-[66px]">
5971
D-
6072
{schedule.dday === 0 ? <div>DAY</div> : <div>{schedule.dday}</div>}
@@ -69,7 +81,9 @@ const ScheduleDetail = () => {
6981
<div className="bg-white h-[50px] border-solid border-[1px] border-[#E2E2E2] w-[335px] mt-[20px] p-[15px] lg flex rounded-lg">
7082
{joiner &&
7183
joiner.map((a) => {
72-
return <span className="text-sm ml-[5px]">{a.username}</span>;
84+
return (
85+
<span className="text-sm ml-[5px]">{a.username}</span>
86+
);
7387
})}
7488
</div>
7589
</div>

src/components/schedule/ScheduleDetail.jsx

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import kebab from "../../img/kebab.png";
44
import BottomNavi from "../layout/BottomNavi";
55
import KebabModal from "../modal/KebabButtonModal";
66
import { useDispatch, useSelector } from "react-redux";
7-
import { __getScheduleDetail, scheduleReset } from "../../redux/modules/ScheduleSlice";
7+
import {
8+
__getScheduleDetail,
9+
scheduleReset,
10+
} from "../../redux/modules/ScheduleSlice";
811
import schedulealoneIcon from "../../img/schedulealone.png";
912

1013
const ScheduleDetail = () => {
@@ -37,7 +40,7 @@ const ScheduleDetail = () => {
3740
}
3841

3942
return (
40-
<div className="width-[375px] h-screen">
43+
<div className="width-[375px]">
4144
<div className="bg-[#F8FCFF] h-full width-[375px]">
4245
<div className="fixed bottom-0">
4346
{/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
@@ -50,11 +53,20 @@ const ScheduleDetail = () => {
5053
>
5154
<div className="flex space-x-3 text-[18px] font-extralight ">
5255
<div>{schedule.date}</div> <div> {time}</div>
53-
<div className="w-[160px] flex pl-[155px]" onClick={showModalHandler}>
54-
<img className={`h-[20px] ${isHidden} row cursor-pointer `} src={kebab} alt="케밥메뉴" />
56+
<div
57+
className="w-[160px] flex pl-[155px]"
58+
onClick={showModalHandler}
59+
>
60+
<img
61+
className={`h-[20px] ${isHidden} row cursor-pointer `}
62+
src={kebab}
63+
alt="케밥메뉴"
64+
/>
5565
</div>
5666
</div>
57-
<div className="mt-[28px] font-semibold text-[24px]">{schedule.subject}</div>
67+
<div className="mt-[28px] font-semibold text-[24px]">
68+
{schedule.subject}
69+
</div>
5870
<div className="place-content-end font-extralight flex text-[18px] mt-[66px]">
5971
D-
6072
{schedule.dday === 0 ? <div>DAY</div> : <div>{schedule.dday}</div>}
@@ -69,7 +81,9 @@ const ScheduleDetail = () => {
6981
<div className="bg-white h-[50px] border-solid border-[1px] border-[#E2E2E2] w-[335px] mt-[20px] p-[15px] lg flex rounded-lg">
7082
{joiner &&
7183
joiner.map((a) => {
72-
return <span className="text-sm ml-[5px]">{a.username}</span>;
84+
return (
85+
<span className="text-sm ml-[5px]">{a.username}</span>
86+
);
7387
})}
7488
</div>
7589
</div>

src/redux/modules/LoginSlice.jsx

Lines changed: 86 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,81 @@ import { openModal, __openModal } from "./SingupSlice";
66

77
//이메일 로그인
88

9-
export const __emailLogin = createAsyncThunk("login/EmailLogin", async (payload, thunkAPI) => {
10-
try {
11-
const data = await LoginApi.EmailLogin({
12-
email: payload.email,
13-
password: payload.password,
14-
});
15-
16-
const accessToken = data.headers.get("Authorization");
17-
const { email, nickname, profileImage, userId } = data.data.data;
18-
sessionStorage.setItem("accessToken", accessToken);
19-
sessionStorage.setItem("userId", userId);
20-
sessionStorage.setItem("email", email);
21-
sessionStorage.setItem("nickname", nickname);
22-
sessionStorage.setItem("profileImage", profileImage);
23-
payload.setModalStr({
24-
modalTitle: `${nickname}님 어서오세요.`,
25-
modalMessage: `오늘도 그님스와 함께\n행복한 하루 보내세요.`,
26-
});
27-
payload.dispatch(__openModal(payload.dispatch));
28-
// window.location.href = "/main";
29-
} catch (error) {
30-
const { data } = error.response;
31-
if (data.status === 401) {
32-
payload.setModalStr({
33-
modalTitle: "ID를 찾을 수 없어요.",
34-
modalMessage: "이메일와 비밀번호를 \n 다시 한 번 확인해주세요.",
9+
export const __emailLogin = createAsyncThunk(
10+
"login/EmailLogin",
11+
async (payload, thunkAPI) => {
12+
try {
13+
const data = await LoginApi.EmailLogin({
14+
email: payload.email,
15+
password: payload.password,
3516
});
36-
payload.dispatch(__openModal(payload.dispatch));
37-
} else {
17+
18+
const accessToken = data.headers.get("Authorization");
19+
const { email, nickname, profileImage, userId } = data.data.data;
20+
sessionStorage.setItem("accessToken", accessToken);
21+
sessionStorage.setItem("userId", userId);
22+
sessionStorage.setItem("email", email);
23+
sessionStorage.setItem("nickname", nickname);
24+
sessionStorage.setItem("profileImage", profileImage);
3825
payload.setModalStr({
39-
modalTitle: "ID를 찾을 수 없어요.",
40-
modalMessage: "이메일와 비밀번호를 \n 다시 한 번 확인해주세요.",
26+
modalTitle: `${nickname}님 어서오세요.`,
27+
modalMessage: `오늘도 그님스와 함께\n행복한 하루 보내세요.`,
4128
});
4229
payload.dispatch(__openModal(payload.dispatch));
30+
// window.location.href = "/main";
31+
} catch (error) {
32+
const { data } = error.response;
33+
if (data.status === 401) {
34+
payload.setModalStr({
35+
modalTitle: "ID를 찾을 수 없어요.",
36+
modalMessage: "이메일와 비밀번호를 \n 다시 한 번 확인해주세요.",
37+
});
38+
payload.dispatch(__openModal(payload.dispatch));
39+
} else {
40+
payload.setModalStr({
41+
modalTitle: "ID를 찾을 수 없어요.",
42+
modalMessage: "이메일와 비밀번호를 \n 다시 한 번 확인해주세요.",
43+
});
44+
payload.dispatch(__openModal(payload.dispatch));
45+
}
4346
}
4447
}
45-
});
48+
);
4649

4750
//카카오 로그인
4851
export const __kakaologin = createAsyncThunk(
4952
"kakaologin",
5053
//전달 받은 코드 비동기로 처리
5154
async (code, thunkAPI, setMessage, setPath, setIsModalOpen) => {
5255
try {
53-
const data = await instance.post("social/kakao-login", { code }).then((res) => {
54-
const email = res.data.data.email;
55-
sessionStorage.setItem("email", email);
56-
sessionStorage.setItem("socialCode", "KAKAO");
57-
if (res.data.message !== "non-member") {
58-
const accessToken = res.headers.get("Authorization");
59-
const nickname = res.data.data.nickname;
60-
const userId = res.data.data.userId;
61-
const profileImage = res.data.data.profileImage;
62-
sessionStorage.setItem("accessToken", accessToken);
63-
sessionStorage.setItem("nickname", nickname);
64-
sessionStorage.setItem("userId", userId);
65-
sessionStorage.setItem("profileImage", profileImage);
66-
sessionStorage.setItem("socialCode", "social");
67-
setIsModalOpen(true);
68-
setPath("/main");
69-
setMessage("그님스에 오신걸 환영합니다");
70-
return window.location.assign("/main");
56+
const data = await instance
57+
.post("social/kakao-login", { code: code })
58+
.then((res) => {
59+
const email = res.data.data.email;
60+
sessionStorage.setItem("email", email);
61+
sessionStorage.setItem("socialCode", "KAKAO");
62+
if (res.data.message !== "non-member") {
63+
const accessToken = res.headers.get("Authorization");
64+
const nickname = res.data.data.nickname;
65+
const userId = res.data.data.userId;
66+
const profileImage = res.data.data.profileImage;
67+
sessionStorage.setItem("accessToken", accessToken);
68+
sessionStorage.setItem("nickname", nickname);
69+
sessionStorage.setItem("userId", userId);
70+
sessionStorage.setItem("profileImage", profileImage);
71+
sessionStorage.setItem("socialCode", "social");
72+
setIsModalOpen(true);
73+
setMessage("그님스에 오신걸 환영합니다");
74+
setPath("/main");
75+
// return window.location.assign("/main");
7176

72-
//멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야함
73-
} else if (res.data.message === "non-member") {
74-
setIsModalOpen(true);
75-
setMessage("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
76-
setPath("/signup/setProfileName");
77-
}
78-
});
77+
//멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야함
78+
} else if (res.data.message === "non-member") {
79+
setIsModalOpen(true);
80+
setMessage("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
81+
setPath("/signup/setProfileName");
82+
}
83+
});
7984
return thunkAPI.fulfillWithValue(data);
8085
} catch (error) {
8186
window.location.assign("/");
@@ -84,30 +89,33 @@ export const __kakaologin = createAsyncThunk(
8489
}
8590
);
8691

87-
export const __sendEmail = createAsyncThunk("sendEamil", async ({ email, setModalStr }, thunkAPI) => {
88-
try {
89-
const data = await LoginApi.SendEmailAuthenticationNumber(email);
90-
if (data.status === 200) {
91-
sessionStorage.setItem("changePasswordEmail", email);
92-
setModalStr({
93-
modalTitle: "이메일함을 확인해주세요",
94-
modalMessage: "인증번호를 입력해주세요",
95-
});
92+
export const __sendEmail = createAsyncThunk(
93+
"sendEamil",
94+
async ({ email, setModalStr }, thunkAPI) => {
95+
try {
96+
const data = await LoginApi.SendEmailAuthenticationNumber(email);
97+
if (data.status === 200) {
98+
sessionStorage.setItem("changePasswordEmail", email);
99+
setModalStr({
100+
modalTitle: "이메일함을 확인해주세요",
101+
modalMessage: "인증번호를 입력해주세요",
102+
});
103+
return thunkAPI.fulfillWithValue(data.data);
104+
}
96105
return thunkAPI.fulfillWithValue(data.data);
97-
}
98-
return thunkAPI.fulfillWithValue(data.data);
99-
} catch (error) {
100-
const { data } = error.response;
101-
if (data.status === 400) {
102-
setModalStr({
103-
modalTitle: data.message,
104-
modalMessage: "이메일을 확인해주세요.",
105-
});
106+
} catch (error) {
107+
const { data } = error.response;
108+
if (data.status === 400) {
109+
setModalStr({
110+
modalTitle: data.message,
111+
modalMessage: "이메일을 확인해주세요.",
112+
});
113+
return thunkAPI.rejectWithValue(data);
114+
}
106115
return thunkAPI.rejectWithValue(data);
107116
}
108-
return thunkAPI.rejectWithValue(data);
109117
}
110-
});
118+
);
111119

112120
export const __NextPage = createAsyncThunk(
113121
"onSubnitNextPage",
@@ -208,5 +216,6 @@ const LoginSlice = createSlice({
208216
},
209217
});
210218

211-
export const { isLoading, isLogin, setMessage, resetCheck } = LoginSlice.actions;
219+
export const { isLoading, isLogin, setMessage, resetCheck } =
220+
LoginSlice.actions;
212221
export default LoginSlice.reducer;

0 commit comments

Comments
 (0)