Skip to content

Commit 1003f76

Browse files
author
Ju
committed
Feat/pastSchedlue #49 지난일정보기 기능 추가 및 전반적인 CSS수정
1 parent a11a395 commit 1003f76

24 files changed

+401
-93
lines changed

‎src/api/ScheduleApi.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@ export const ScheduleApi = {
1919
const data = instance.post("/events", payload);
2020
return data;
2121
},
22+
getPastScheduleApi: (payload) => {
23+
const data = instance.get("/events/past");
24+
return data;
25+
},
2226
};

‎src/components/layout/Label.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Label = ({ htmlFor, children }) => {
77
<div>
88
<label
99
htmlFor={htmlFor}
10-
className="cursor-pointer text-[#12396F] font-[600]"
10+
className="cursor-pointer text-textBlack font-[600]"
1111
>
1212
{children}
1313
</label>

‎src/components/layout/Layout.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Container = styled.div`
1717
box-sizing: border-box;
1818
top: "calc(50% - 167px/2)";
1919
-ms-overflow-style: none;
20-
background-color: #edf7ff;
20+
background-color: #f8fcff;
2121
font-family: Pretendard-Regular;
2222
2323
//스크롤창 숨기기
@@ -31,7 +31,7 @@ const Container = styled.div`
3131
}
3232
@media screen and (max-width: 768px) {
3333
width: 375px;
34-
background-color: #edf7ff;
34+
background-color: #f8fcff;
3535
background-size: contain;
3636
background-position: center;
3737
background-repeat: no-repeat;

‎src/components/layout/LoginSignupInputBox.jsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React, { forwardRef } from "react";
22

33
const LoginSignupInputBox = forwardRef((props, ref) => {
4-
const { placeholder, onChange, id } = props;
4+
const { type, placeholder, onChange, id, bgColor, shadow } = props;
55
return (
66
<>
7-
<div>
7+
<div className={`${shadow}`}>
88
<input
9-
className="w-full px-3 h-[50px] focus:placeholder-[#12396f] placeholder-[#12396fa1] "
10-
type="text"
9+
// className={`w-full px-3 h-[50px] ${bgColor} focus:bg-inputBoxFocus placeholder-inputText `}
10+
className={`w-full px-3 h-[50px] ${bgColor} placeholder-inputPlaceHoldText`}
11+
type={type}
1112
id={id}
1213
ref={ref}
1314
placeholder={placeholder}
1415
onChange={onChange}
16+
autoComplete="off"
1517
/>
1618
</div>
1719
</>

‎src/components/login/EmailLogin.jsx

+44-5
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ const EmailLogin = () => {
1919
modalTitle: "",
2020
modalMessage: "",
2121
});
22+
const [style, setStyle] = useState({
23+
bgColorEmail: "bg-inputBox",
24+
bgColorPassword: "bg-inputBox",
25+
shadowEmail: "",
26+
shadowPassword: "",
27+
});
2228
const { isLoading } = useSelector((state) => state.LoginSlice);
2329

2430
console.log(isLoading);
@@ -40,12 +46,37 @@ const EmailLogin = () => {
4046
//유효성검사
4147
const onValidity = (event) => {
4248
const { id, value } = event.target;
43-
4449
if (id === "userEmail") {
50+
setStyle(() => ({
51+
...style,
52+
bgColorEmail: "bg-inputBoxFocus",
53+
shadowEmail: "drop-shadow-inputBoxShadow",
54+
}));
55+
if (value.trim() === "") {
56+
setStyle(() => ({
57+
...style,
58+
bgColorEmail: "bg-inputBox",
59+
shadowEmail: "",
60+
}));
61+
}
4562
if (!emailRegulationExp.test(value)) {
4663
SetRegulation(() => ({ ...regulation, regulationEmail: false }));
47-
} else SetRegulation(() => ({ ...regulation, regulationEmail: true }));
64+
} else {
65+
SetRegulation(() => ({ ...regulation, regulationEmail: true }));
66+
}
4867
} else {
68+
setStyle(() => ({
69+
...style,
70+
bgColorPassword: "bg-inputBoxFocus",
71+
shadowPassword: "drop-shadow-inputBoxShadow",
72+
}));
73+
if (value.trim() === "") {
74+
setStyle(() => ({
75+
...style,
76+
bgColorPassword: "bg-inputBox",
77+
shadowPassword: "",
78+
}));
79+
}
4980
if (!passwordRegulationExp.test(value)) {
5081
SetRegulation(() => ({ ...regulation, regulationPassword: false }));
5182
} else SetRegulation(() => ({ ...regulation, regulationPassword: true }));
@@ -106,6 +137,7 @@ const EmailLogin = () => {
106137
window.location.href = KAKAO_AUTH_URL;
107138
};
108139

140+
console.log({ style });
109141
return (
110142
<div className="container md">
111143
<div className="ml-[20px] mr-[20px]">
@@ -125,10 +157,13 @@ const EmailLogin = () => {
125157
<div className=" grid grid-row-2">
126158
<Label htmlFor="userEmail">이메일</Label>
127159
<LoginSignupInputBox
160+
type="text"
128161
id="userEmail"
129162
ref={userEmailRef}
130163
onChange={onValidity}
131164
placeholder="아이디(이메일) 입력"
165+
shadow={style.shadowEmail}
166+
bgColor={style.bgColorEmail}
132167
/>
133168
</div>
134169
<div className="flex items-center ">
@@ -144,10 +179,13 @@ const EmailLogin = () => {
144179
<div className="grid grid-row-2">
145180
<Label htmlFor="userPassword">비밀번호</Label>
146181
<LoginSignupInputBox
182+
type="password"
147183
ref={userPasswordRef}
148184
onChange={onValidity}
149185
id="userPassword"
150186
placeholder="비밀번호 입력"
187+
shadow={style.shadowPassword}
188+
bgColor={style.bgColorPassword}
151189
/>
152190
</div>
153191
<div className="flex items-center ">
@@ -159,6 +197,7 @@ const EmailLogin = () => {
159197
</p>
160198
</div>
161199
</div>
200+
162201
<button
163202
onClick={onSubmit}
164203
className="h-[50px] rounded w-full bg-[#002C51] font-[700] text-[#ffff] mt-[24px]"
@@ -168,14 +207,14 @@ const EmailLogin = () => {
168207
</div>
169208
</form>
170209
<div className="mt-[26px] grid grid-cols-2 text-center">
171-
<div>
172-
<button className="text-[#12396F] text-[16px] font-[400] px-[30px] py-[10px]">
210+
<div className="border-4 border-indigo-600">
211+
<button className="text-textBlack text-[16px] font-[400] px-[30px] py-[10px]">
173212
비밀번호 재설정
174213
</button>
175214
</div>
176215
<div>
177216
<button
178-
className="text-[#12396F] text-[16px] font-[400] px-[30px] py-[10px] "
217+
className="text-textBlack text-[16px] font-[400] px-[30px] py-[10px] "
179218
onClick={() => navigate(`/signup`)}
180219
>
181220
회원가입

‎src/components/main/Main.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ const Main = () => {
3636
<>
3737
<div className="container md mb-[70px] ">
3838
<div className="grid grid-flow-row ml-[20px] mr-[20px]">
39-
<div className="mt-[78px] w-full h-[80px] bg-[#FFFFFF]">
40-
<div className="flex flex-row gap-[10px]">
39+
<div className="mt-[78px] w-full h-[80px] bg-[#FFFFFF] rounded-[10px] drop-shadow-lg">
40+
<div className="flex flex-row gap-[10px] ">
4141
<div className="p-[10px]">
4242
<img
4343
className="h-[60px] w-[60px] rounded-full"

‎src/components/main/MainScheduleCards.jsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const MainScheduleCards = ({ schedules }) => {
4949
return (
5050
<div
5151
onClick={onDetail}
52-
className={`w-[335px] h-[180px] ${bgColor} rounded-[10px] pt-[20px] pl-[22px]`}
52+
className={`w-[335px] h-[180px] ${bgColor} rounded-[10px] pt-[20px] pl-[22px] pr-[22px]`}
5353
>
5454
<div className=" text-[#ffff]">
5555
<div className="grid grid-flow-row gap-[19px]">
@@ -91,9 +91,12 @@ const MainScheduleCards = ({ schedules }) => {
9191
</div>
9292
</div>
9393
</div>
94-
<div className=" h-[40px] ">
95-
<div hidden={dDay.hidden} className="flex items-center w-full rigth-0 ">
96-
<div className="text-[#FFFFFF] font-[400] text-[18px]">
94+
<div className="flex h-[40px] text-rigth">
95+
<div
96+
hidden={dDay.hidden}
97+
className="items-center text-right w-full rigth-0 "
98+
>
99+
<div className=" text-[#FFFFFF] font-[400] text-[18px] ">
97100
{dDay.dDay}-DAY
98101
</div>
99102
</div>

‎src/components/modal/Modal.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ const IsModal = ({ isModalOpen, onMoalClose, message }) => {
4747
<h1 className="px-[10px] text-[#12396F] text-[18px] font-[700] whitespace-pre-line">
4848
{modalStr.modalTitle}
4949
</h1>
50-
<p className="font-[400] text-[14px] text-[#12396F]">
50+
<p className="font-[400] text-[14px] text-[#12396F] whitespace-pre">
5151
{modalStr.modalMessage}
5252
</p>
5353
</div>
5454
<button
55-
className="w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
55+
className=" w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
5656
onClick={onMoalClose}
5757
>
5858
확인

‎src/components/mypage/PageInfoCard.jsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { Children } from "react";
2+
3+
const PageInfoCard = ({ profileImg, nickname, children }) => {
4+
return (
5+
<div className="w-full ">
6+
<div className="flex p-5 gap-[30px] justify-items-center">
7+
<div className="flex-none p-2 w-[86px] h-[86px] border-2 border-solid border-red-500">
8+
<img
9+
className="rounded-full"
10+
src={profileImg}
11+
alt="사용자 프로필 사진"
12+
/>
13+
</div>
14+
<div className="pt-2 border-2 border-red-500 border-solid w-full">
15+
<div className="text-[18px] pt-[12px] leading-[21px]">
16+
<span className="font-[600]">{nickname}</span>님{children}
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
);
22+
};
23+
24+
export default PageInfoCard;

‎src/components/mypage/PastEvents.jsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from "react";
2+
import { useEffect } from "react";
3+
import { useDispatch, useSelector } from "react-redux";
4+
import { __getPastSchedlue } from "../../redux/modules/ScheduleSlice";
5+
import MainScheduleCards from "../main/MainScheduleCards";
6+
import PageInfoCard from "./PageInfoCard";
7+
8+
const PastEvents = () => {
9+
const dispatch = useDispatch();
10+
const { pastSchedules } = useSelector((state) => state.ScheduleSlice);
11+
console.log(pastSchedules);
12+
const nickname = localStorage.getItem("nickname");
13+
const profileImg = localStorage.getItem("profileImage");
14+
15+
useEffect(() => {
16+
console.log("실행");
17+
dispatch(__getPastSchedlue());
18+
}, []);
19+
20+
return (
21+
<div className="container container-md pr-[19px] pl-[21px]">
22+
<div className="grid grid-flow-row gap-[24px] mt-[82px]">
23+
<div>
24+
<PageInfoCard profileImg={profileImg} nickname={nickname}>
25+
의 멋진 일대기를<p>돌아볼까요?</p>
26+
</PageInfoCard>
27+
</div>
28+
<div className="grid grid-flow-row gap-[30px]">
29+
{pastSchedules.map((list) => (
30+
<MainScheduleCards key={list.eventId} schedules={list} />
31+
))}
32+
</div>
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
export default PastEvents;

‎src/components/mypage/Profile.jsx

+13-12
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const Profile = () => {
2525
<div>
2626
<div className="flex p-5 gap-[30px] justify-items-center">
2727
<div className="p-2 w-[86px] h-[86px]">
28-
<img className="rounded-full" src={profileImage} alr="이미지" />
28+
<img className="rounded-full" src={profileImage} alt="이미지" />
2929
</div>
3030
<div className="inline-block pt-2">
3131
<div className="text-lg font-semibold leading-[21px]">
@@ -49,48 +49,49 @@ const Profile = () => {
4949
onClick={() => {
5050
navigate();
5151
}}
52-
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
52+
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
5353
>
5454
<span className="text-sm w-[175px] h-[20px]">비밀번호 재설정</span>
55-
<img src={Vector} alr="화살표" />
55+
<img src={Vector} alt="화살표" />
5656
</div>
5757
<div
5858
onClick={() => {
59-
navigate();
59+
navigate("/pastEvents");
6060
}}
61-
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
61+
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
6262
>
6363
<span className="text-sm w-[175px] h-[20px]">나의 지난 일정</span>
64-
<img src={Vector} alr="화살표" />
64+
65+
<img src={Vector} alt="화살표" />
6566
</div>
6667
<div
6768
onClick={() => {
6869
navigate("/scheduleinvitation");
6970
}}
70-
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
71+
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
7172
>
7273
<span className="text-sm w-[175px] h-[20px]">내게 온 초대 목록</span>
73-
<img src={Vector} alr="화살표" />
74+
<img src={Vector} alt="화살표" />
7475
</div>
7576
<div
7677
onClick={() => {
7778
navigate();
7879
}}
79-
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
80+
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
8081
>
8182
<span className="text-sm w-[175px] h-[20px]">알림 설정</span>
82-
<img src={Vector} alr="화살표" />
83+
<img src={Vector} alt="화살표" />
8384
</div>
8485
<div
8586
onClick={() => {
8687
navigate();
8788
}}
88-
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px]"
89+
className="flex gap-[130px] p-[15px] border-b-[1px] border-[#BBD7FF] border-solid bg-white w-[375px] h-[50px] cursor-pointer"
8990
>
9091
<span className="text-sm w-[175px] h-[20px]">
9192
그님스 피드백 보내기
9293
</span>
93-
<img src={Vector} alr="화살표" />
94+
<img src={Vector} alt="화살표" />
9495
</div>
9596
</div>
9697
</div>

‎src/components/mypage/ScheduleInvitation.jsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
33
import basicImg from "../../img/User-86.png";
44
import { __getInvitation } from "../../redux/modules/InvitationSlice";
55
import InvitationCard from "./ InvitationCard";
6+
import PageInfoCard from "./PageInfoCard";
67

78
const ScheduleInvitation = () => {
89
const nickname = localStorage.getItem("nickname");
@@ -29,7 +30,11 @@ const ScheduleInvitation = () => {
2930
<div>
3031
<div className="flex p-5 gap-[30px] justify-items-center">
3132
<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+
<img
34+
className="rounded-full"
35+
src={basicImg}
36+
alt="사용자 프로필 사진"
37+
/>
3338
</div>
3439
<div className="pt-2 border-2 border-red-500 border-solid">
3540
<div className="text-[18px] pt-[12px] leading-[21px]">

0 commit comments

Comments
 (0)