Skip to content

Commit 3056cbf

Browse files
AngelaChaejungAngelaChaejung
authored
Merge pull request #186 from gnims-project/dev
Feat/ 비밀번호변경 모달창, Login alert->modal 변경, Design 패딩값, 지난일정 수정 #100
2 parents 5c1d895 + 34b0d71 commit 3056cbf

16 files changed

+152
-181
lines changed

‎src/components/Schedule/ScheduleDetail.jsx

+6-20
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ 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 {
8-
__getScheduleDetail,
9-
scheduleReset,
10-
} from "../../redux/modules/ScheduleSlice";
7+
import { __getScheduleDetail, scheduleReset } from "../../redux/modules/ScheduleSlice";
118
import schedulealoneIcon from "../../img/schedulealone.png";
129

1310
const ScheduleDetail = () => {
@@ -40,7 +37,7 @@ const ScheduleDetail = () => {
4037
}
4138

4239
return (
43-
<div className="width-[375px]">
40+
<div className="width-[375px] h-screen">
4441
<div className="bg-[#F8FCFF] h-full width-[375px]">
4542
<div className="fixed bottom-0">
4643
{/* 케밥모달이 열리면 bottomNavi는 사라집니다 */}
@@ -53,20 +50,11 @@ const ScheduleDetail = () => {
5350
>
5451
<div className="flex space-x-3 text-[18px] font-extralight ">
5552
<div>{schedule.date}</div> <div> {time}</div>
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-
/>
53+
<div className="w-[160px] flex pl-[155px]" onClick={showModalHandler}>
54+
<img className={`h-[20px] ${isHidden} row cursor-pointer `} src={kebab} alt="케밥메뉴" />
6555
</div>
6656
</div>
67-
<div className="mt-[28px] font-semibold text-[24px]">
68-
{schedule.subject}
69-
</div>
57+
<div className="mt-[28px] font-semibold text-[24px]">{schedule.subject}</div>
7058
<div className="place-content-end font-extralight flex text-[18px] mt-[66px]">
7159
D-
7260
{schedule.dday === 0 ? <div>DAY</div> : <div>{schedule.dday}</div>}
@@ -81,9 +69,7 @@ const ScheduleDetail = () => {
8169
<div className="bg-white h-[50px] border-solid border-[1px] border-[#E2E2E2] w-[335px] mt-[20px] p-[15px] lg flex rounded-lg">
8270
{joiner &&
8371
joiner.map((a) => {
84-
return (
85-
<span className="text-sm ml-[5px]">{a.username}</span>
86-
);
72+
return <span className="text-sm ml-[5px]">{a.username}</span>;
8773
})}
8874
</div>
8975
</div>

‎src/components/layout/TopNavBar.jsx

+6-20
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,30 @@ import { instance } from "../../shared/AxiosInstance";
88
import Point from "../../img/point.png";
99
import { EventSourcePolyfill } from "event-source-polyfill";
1010
import NotificationModal from "../modal/NotificationModal";
11-
import { useDispatch, useSelector } from "react-redux";
12-
import { openModal, closeModal } from "../../redux/modules/ModalSlice";
11+
import { useDispatch } from "react-redux";
1312

1413
const TopNavBar = () => {
1514
const navigate = useNavigate();
1615
const dispatch = useDispatch();
1716
const [content, setContent] = useState("");
18-
// const { isOpen = false, message = "" } = useSelector(
19-
// (state) => state.modal || {}
20-
// );
17+
2118
const [open, setOpen] = useState(false);
2219
const [allchecked, setAllChecked] = useState("");
23-
// const handleModalOpen = (message) => {
24-
// dispatch(openModal({ isOpen: true, message }));
25-
// };
26-
// const handleCloseModal = () => {
27-
// dispatch(closeModal());
28-
// };
20+
2921
const close = () => setOpen(false);
3022
//DB불러오는 getNoti
3123
const getNoti = async () => {
3224
await instance.get("/notifications").then((res) => {
3325
const notilist = res.data.data.map((data) => data.isChecked);
34-
notilist.filter((a) => a === false).length > 0
35-
? setAllChecked("")
36-
: setAllChecked("hidden");
26+
notilist.filter((a) => a === false).length > 0 ? setAllChecked("") : setAllChecked("hidden");
3727
});
3828
};
3929

4030
let eventSource;
4131
const fetchSse = async () => {
4232
try {
4333
//EventSource생성.
44-
eventSource = new EventSourcePolyfill("https://eb.jxxhxxx.shop/connect", {
34+
eventSource = new EventSourcePolyfill("https://eb.jxxhxxx.shop/connection", {
4535
//headers에 토큰을 꼭 담아줘야 500이 안뜬다.
4636
headers: {
4737
Authorization: sessionStorage.getItem("accessToken"),
@@ -132,11 +122,7 @@ const TopNavBar = () => {
132122
navigate("/notification");
133123
}}
134124
/>
135-
<img
136-
src={Point}
137-
alt="알림표시"
138-
className={`${allchecked} ml-[20px]`}
139-
/>
125+
<img src={Point} alt="알림표시" className={`${allchecked} ml-[20px]`} />
140126
</div>
141127
</div>
142128
</div>

‎src/components/layout/input/LoginSignupInputBox.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const LoginSignupInputBox = forwardRef((props, ref) => {
66
<>
77
<div>
88
<input
9-
// className={`w-full px-3 h-[50px] ${bgColor} focus:bg-inputBoxFocus placeholder-inputText `}
109
className={`w-full px-3 h-[50px] ${bgColor} placeholder-inputPlaceHoldText`}
1110
type={type}
1211
id={id}

‎src/components/login/InputEmail.jsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010
__NextPage,
1111
resetCheck,
1212
} from "../../redux/modules/LoginSlice";
13-
import { __openModal, __closeModal } from "../../redux/modules/SingupSlice";
13+
import {
14+
__openModal,
15+
__closeModal,
16+
openModal,
17+
} from "../../redux/modules/SingupSlice";
1418
import { useEffect } from "react";
1519

1620
const InputEmail = () => {
@@ -168,6 +172,9 @@ const InputEmail = () => {
168172
};
169173

170174
useEffect(() => {
175+
if (sessionStorage.getItem("socialCode")) {
176+
navigator(-1);
177+
}
171178
return () => {
172179
dispatch(resetCheck());
173180
};

‎src/components/login/NaverLoginLoding.jsx

+16-13
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import axios from "axios";
2-
import React, { useEffect } from "react";
2+
import React, { useEffect, useState } from "react";
33
import DotLoader from "react-spinners/DotLoader";
4+
import WelcomeModal from "../modal/WelcomeModal";
45

56
function NaverLoginLoding() {
67
const userAccessToken = () => {
78
window.location.href.includes("access_token") && getToken();
89
};
9-
10+
const [isModalOpen, setIsModalOpen] = useState(false);
11+
const [message, setMessage] = useState("");
12+
const [path, setPath] = useState("");
1013
const getToken = async () => {
1114
const navertoken = window.location.href.split("=")[1].split("&")[0];
1215
// sessionStorage.setItem("NaverAuthorization", navertoken);
@@ -33,15 +36,20 @@ function NaverLoginLoding() {
3336
sessionStorage.setItem("profileImage", profileImage);
3437
sessionStorage.setItem("userId", userId);
3538
sessionStorage.setItem("email", email);
36-
alert("그님스에 오신걸 환영합니다");
37-
return window.location.assign("/main");
39+
sessionStorage.setItem("socialCode", "social");
40+
setIsModalOpen(true);
41+
setMessage(nickname + "님, 어서오세요!");
42+
setPath("/main");
43+
return;
3844

3945
//멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야함
4046
} else if (res.data.message === "non-member") {
41-
alert("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
4247
sessionStorage.setItem("email", email);
4348
sessionStorage.setItem("socialCode", "NAVER");
44-
return window.location.assign("/signup/setProfileName");
49+
setIsModalOpen(true);
50+
setMessage("그님스를 이용하려면 프로필 정보를 입력해줘야합니다.");
51+
setPath("/signup/setProfileName");
52+
return;
4553
}
4654
});
4755
};
@@ -54,6 +62,7 @@ function NaverLoginLoding() {
5462

5563
return (
5664
<div>
65+
{isModalOpen && <WelcomeModal message={message} path={path} />}
5766
<div
5867
style={{
5968
position: "fixed",
@@ -62,13 +71,7 @@ function NaverLoginLoding() {
6271
transform: "translate(-50%, -50%)",
6372
}}
6473
>
65-
<DotLoader
66-
color="#36abd6"
67-
height={15}
68-
width={5}
69-
radius={2}
70-
margin={2}
71-
/>
74+
<DotLoader color="#36abd6" height={15} width={5} radius={2} margin={2} />
7275
</div>
7376
</div>
7477
);

‎src/components/main/MainScheduleCards.jsx

+13-19
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useState } from "react";
22
import { useEffect } from "react";
3-
import { useNavigate } from "react-router-dom";
3+
import { useLocation, useNavigate } from "react-router-dom";
44

55
const MainScheduleCards = ({ schedules }) => {
66
const navigate = useNavigate();
7-
const invitees = schedules.invitees;
7+
const location = useLocation().pathname;
88

9+
const invitees = schedules.invitees;
910
const hourClock = schedules.time.split(":", 2)[0];
1011
let hour = 0;
1112
const min = schedules.time.split(":", 2)[1];
@@ -27,9 +28,7 @@ const MainScheduleCards = ({ schedules }) => {
2728
if (invitees.length > 1) {
2829
setInviteesList(() => ({
2930
hidden: false,
30-
inviteesList: `${schedules.invitees[0].username} 외 ${
31-
invitees.length - 1
32-
} 명`,
31+
inviteesList: `${schedules.invitees[0].username} 외 ${invitees.length - 1} 명`,
3332
}));
3433
}
3534
}, [invitees, schedules.invitees]);
@@ -43,9 +42,7 @@ const MainScheduleCards = ({ schedules }) => {
4342
onClick={onDetail}
4443
className={`w-[335px] h-[180px] bg-white rounded-[10px] border border-solid border-[#E8E8E8] shadow-md`}
4544
>
46-
<div
47-
className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}
48-
>
45+
<div className={`flex items-center h-[14px] ${bgColor} rounded-t-[10px] `}>
4946
<ul className="ml-[9px] flex flex-row gap-[4px]">
5047
{[0, 1, 2].map((list) => (
5148
<li key={list} className="bg-white h-[4px] w-[4px] rounded-full" />
@@ -66,10 +63,12 @@ const MainScheduleCards = ({ schedules }) => {
6663
{time}
6764
</div>
6865
)}
69-
<div className="font-[700]">
70-
D-
71-
{schedules.dday === 0 ? <>DAY</> : <>{schedules.dday}</>}
72-
</div>
66+
{location !== "/pastEvents" ? (
67+
<div className="font-[700]">
68+
D-
69+
{schedules.dday === 0 ? <>DAY</> : <>{schedules.dday}</>}
70+
</div>
71+
) : null}
7372
</div>
7473

7574
<div className="grid grid-flow-row gap-[17px]">
@@ -82,10 +81,7 @@ const MainScheduleCards = ({ schedules }) => {
8281
<div className="flex -space-x-5 overflow-hidden ">
8382
{invitees.map((list, index) => {
8483
return (
85-
<div
86-
key={index}
87-
className="flex border-2 border-white rounded-full"
88-
>
84+
<div key={index} className="flex border-2 border-white rounded-full">
8985
<img
9086
className="inline-block h-[40px] w-[40px] rounded-full"
9187
src={list.profile}
@@ -95,9 +91,7 @@ const MainScheduleCards = ({ schedules }) => {
9591
);
9692
})}
9793
</div>
98-
<div className="flex items-center text-[#6F6F6F]">
99-
{inviteesList.inviteesList}
100-
</div>
94+
<div className="flex items-center text-[#6F6F6F]">{inviteesList.inviteesList}</div>
10195
</div>
10296
</div>
10397
</div>

‎src/components/modal/ProfileEditCompletion.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import { useNavigate } from "react-router-dom";
3+
4+
const ProfileEditCompletion = ({ modalMessage }) => {
5+
const navigate = useNavigate();
6+
7+
return (
8+
<div className="h-full w-[375px] bg-black bg-opacity-50 justify-center fixed bottom-0 z-10 flex">
9+
<div className="text-black p-9 items-center w-[300px] h-[167px] text-center rounded-[16px] fixed top-[200px] bg-white">
10+
<div className="text-[18px] font-bold flex flex-col ">{modalMessage}</div>
11+
<button
12+
className="bg-[#002C51] rounded-[4px] h-[40px] w-[127px] text-white mt-[32px]"
13+
onClick={() => navigate("/profile")}
14+
>
15+
확인
16+
</button>{" "}
17+
</div>{" "}
18+
</div>
19+
);
20+
};
21+
22+
export default ProfileEditCompletion;

‎src/components/modal/WelcomeModal.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { useNavigate } from "react-router-dom";
3+
4+
const WelcomeModal = ({ message, path }) => {
5+
const navigate = useNavigate();
6+
return (
7+
<div>
8+
<div className="h-full w-[375px] bg-black bg-opacity-50 justify-center fixed bottom-0 z-10 flex">
9+
<div className="text-black p-9 items-center w-[300px] h-[167px] text-center rounded-[16px] fixed top-[200px] bg-white">
10+
<div className="text-[18px] font-bold flex flex-col ">{message}</div>
11+
<button
12+
className="bg-[#002C51] rounded-[4px] h-[40px] w-[127px] text-white mt-[32px]"
13+
onClick={() => navigate(path)}
14+
>
15+
확인
16+
</button>
17+
</div>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default WelcomeModal;

‎src/components/mypage/PageInfoCard.jsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,9 @@ import React from "react";
33
const PageInfoCard = ({ profileImg, nickname, children }) => {
44
return (
55
<div>
6-
<div className="h-full flex p-5 gap-[30px] justify-items-center">
6+
<div className="h-full flex pl-5 gap-[30px] pb-5 justify-items-center">
77
<div className="flex-[50%] cursor-pointer">
8-
<img
9-
className="rounded-full w-[86px] h-[86px] "
10-
src={profileImg}
11-
alt="사용자 프로필 사진"
12-
/>
8+
<img className="rounded-full w-[86px] h-[86px] " src={profileImg} alt="사용자 프로필 사진" />
139
</div>
1410
<div className="w-full pt-2 border-2 ">
1511
<div className="text-[18px] pt-[12px] leading-[21px] tracking-tighter w-[198px]">

‎src/components/mypage/PastEvents.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ const PastEvents = () => {
1616
}, []);
1717

1818
return (
19-
<div className="container container-md pt-[34px] pr-[19px] pl-[21px]">
19+
<div className="container container-md pt-5 pr-[19px] pb-5 ">
2020
<div className="grid grid-flow-row gap-[24px] ">
2121
<div>
2222
<PageInfoCard profileImg={profileImg} nickname={nickname}>
23-
,<p>멋진 일대기를 돌아볼까요?</p>
23+
<p>멋진 일대기를 돌아볼까요?</p>
2424
</PageInfoCard>
2525
</div>
26-
<div className="grid grid-flow-row gap-[30px]">
26+
<div className="grid grid-flow-row gap-[30px] pl-[20px]">
2727
{pastSchedules.map((list) => (
2828
<MainScheduleCards key={list.eventId} schedules={list} />
2929
))}

0 commit comments

Comments
 (0)