Skip to content

Commit 1d0c467

Browse files
wjzlskxkwjzlskxk
committed
⚡ :: 프로필 변경 시 학교&학과 모달 처리
1 parent 4095481 commit 1d0c467

File tree

14 files changed

+202
-200
lines changed

14 files changed

+202
-200
lines changed

‎src/app/main/page.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ import * as S from "./style";
44
import Banner from "@/components/common/banner";
55
import Find from "@/components/home/mainPageProfessor";
66
import SelectSchoolModal from "src/components/common/selectSchoolModal/index";
7-
import SelectMajorModal from "@/components/common/selectMajorModal/index";
7+
import { useGetProfileInfo } from "@/queries/profile/query";
88

99
const index = () => {
10+
const { data } = useGetProfileInfo();
1011
return (
1112
<>
1213
<S.Page>
1314
<Banner />
1415
<Find />
1516
</S.Page>
16-
<SelectSchoolModal />
17+
<SelectSchoolModal isOpen={data?.data.schoolName === null} />
1718
</>
1819
);
1920
};

‎src/components/common/modalBtn/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,7 @@ const Modal: React.FC<ModalProps> = ({ setModalBtn }) => {
1515
};
1616

1717
return (
18-
<S.layout
19-
20-
21-
>
18+
<S.layout>
2219
<S.Boxlayout onClick={(e) => e.stopPropagation()}>
2320
<S.profile onClick={handleProfileClick}>프로필</S.profile>
2421
<S.logout>로그아웃</S.logout>

‎src/components/common/profileModal/index.tsx

Lines changed: 85 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import * as S from "./style";
22
import { remark } from "remark";
33
import html from "remark-html";
4-
import {
5-
Dispatch,
6-
RefObject,
7-
SetStateAction,
8-
useEffect,
9-
useState,
10-
} from "react";
4+
import { Dispatch, RefObject, SetStateAction, useEffect, useState } from "react";
115
import Image from "next/image";
126
import Profile from "public/svgs/Avatar.svg";
137
import Photo from "public/svgs/photo.svg";
148
import Close from "public/svgs/close.svg";
159
import useProfileChange from "@/hooks/modal/useProfileChange";
1610
import { useGetProfileInfo } from "@/queries/profile/query";
11+
import SelectSchoolModal from "@/components/common/selectSchoolModal/index";
12+
import SelectMajorModal from "@/components/common/selectMajorModal/index";
13+
import { useSchool } from "@/hooks/firstLogin/useSchool";
1714

1815
interface ProfileModalProps {
1916
setModal: Dispatch<SetStateAction<boolean>>;
@@ -23,100 +20,92 @@ interface ProfileModalProps {
2320
const ProfileModal = ({ setModal, modalRef }: ProfileModalProps) => {
2421
const { ...modal } = useProfileChange();
2522
const { data } = useGetProfileInfo();
26-
23+
const { isNext } = useSchool();
2724
return (
28-
<S.layout ref={modalRef} onClick={(e) => e.stopPropagation()}>
29-
<S.Boxlayout>
30-
<Image
31-
onClick={() => setModal(false)}
32-
src={Close}
33-
alt=""
34-
style={{
35-
fontSize: "30px",
36-
position: "absolute",
37-
top: "20px",
38-
right: "20px",
39-
cursor: "pointer",
40-
}}
41-
/>
42-
<S.ProfileTextBox>
43-
<S.ProfileFix>프로필 </S.ProfileFix>
44-
<S.ProfileText>자신의 정보를 수정할 수 있습니다.</S.ProfileText>
45-
</S.ProfileTextBox>
46-
<S.ProfileImgBox>
47-
<S.ProfileImgText>프로필 사진</S.ProfileImgText>
48-
<S.ProfileImgBunddle>
49-
<div>
50-
<Image
51-
id="profile"
52-
src={data?.img ? data.img : Profile}
53-
alt="프로필"
54-
width={130}
55-
height={130}
56-
style={{ borderRadius: "50%" }}
57-
/>
58-
</div>
59-
<S.Label htmlFor="file_upload">
25+
<>
26+
<S.layout ref={modalRef} onClick={(e) => e.stopPropagation()}>
27+
<S.Boxlayout>
28+
<Image
29+
onClick={() => setModal(false)}
30+
src={Close}
31+
alt=""
32+
style={{
33+
fontSize: "30px",
34+
position: "absolute",
35+
top: "20px",
36+
right: "20px",
37+
cursor: "pointer",
38+
}}
39+
/>
40+
<S.ProfileTextBox>
41+
<S.ProfileFix>프로필 </S.ProfileFix>
42+
<S.ProfileText>자신의 정보를 수정할 수 있습니다.</S.ProfileText>
43+
</S.ProfileTextBox>
44+
<S.ProfileImgBox>
45+
<S.ProfileImgText>프로필 사진</S.ProfileImgText>
46+
<S.ProfileImgBunddle>
6047
<div>
61-
<Image src={Photo} alt="" />
48+
<Image
49+
id="profile"
50+
src={data?.data.img ? data?.data.img : Profile}
51+
alt="프로필"
52+
width={130}
53+
height={130}
54+
style={{ borderRadius: "50%" }}
55+
/>
6256
</div>
63-
</S.Label>
64-
<S.InputImg
65-
type="file"
66-
accept=".jpg, .png, .jpeg"
67-
id="file_upload"
68-
onChange={modal.handleProfileChange}
69-
/>
70-
</S.ProfileImgBunddle>
71-
</S.ProfileImgBox>
72-
<S.ChangeInput>
73-
{/* <S.InputBox>
74-
<S.InputText>학교</S.InputText>
75-
<S.TextBox>
76-
<S.TextBox>
77-
<S.FixBtn onClick={handleMarkdownSave}>수정완료</S.FixBtn>
78-
</S.TextBox>
57+
<S.Label htmlFor="file_upload">
58+
<div>
59+
<Image src={Photo} alt="" />
60+
</div>
61+
</S.Label>
62+
<S.InputImg
63+
type="file"
64+
accept=".jpg, .png, .jpeg"
65+
id="file_upload"
66+
onChange={modal.handleProfileChange}
67+
/>
68+
</S.ProfileImgBunddle>
69+
</S.ProfileImgBox>
70+
<S.ChangeInput>
71+
<S.InputBox>
72+
<S.InputText>학교</S.InputText>
7973
<S.TextBox>
80-
<S.FixBtn
81-
onClick={() => handleEditClick("school-and-department")}
82-
>
83-
수정하기
84-
</S.FixBtn>
74+
<S.TextBox>
75+
<S.FixBtn onClick={modal.handleIsOpen}>수정하기</S.FixBtn>
76+
</S.TextBox>
8577
</S.TextBox>
86-
</S.TextBox>
87-
</S.InputBox>
88-
<S.InputBox>
89-
<S.InputText>
90-
{data?.role === "PROFESSOR" ? "학과" : "관심 학과"}
91-
</S.InputText>
92-
<input type="text" value={data?.mclass} />
93-
<div></div>
94-
</S.InputBox> */}
95-
<S.InputBox>
96-
<S.InputText>현재 비밀번호</S.InputText>
97-
<input
98-
type="text"
99-
value={modal.passwordData.oldPassword}
100-
name="oldPassword"
101-
onChange={modal.handlePasswordChange}
102-
/>
103-
<S.InputText>새 비밀번호</S.InputText>
104-
<input
105-
type="text"
106-
value={modal.passwordData.newPassword}
107-
name="newPassword"
108-
onChange={modal.handlePasswordChange}
109-
/>
110-
<div>
111-
<button>비밀번호변경</button>
112-
</div>
113-
</S.InputBox>
114-
</S.ChangeInput>
115-
<div>
116-
{/* <S.FixEnd onClick={handleSaveChanges}>수정완료</S.FixEnd> */}
117-
</div>
118-
</S.Boxlayout>
119-
</S.layout>
78+
</S.InputBox>
79+
<S.InputBox>
80+
<S.InputText>{data?.data.role === "PROFESSOR" ? "학과" : "관심 학과"}</S.InputText>
81+
<input type="text" value={data?.data.mclass} />
82+
<div></div>
83+
</S.InputBox>
84+
<S.InputBox>
85+
<S.InputText>현재 비밀번호</S.InputText>
86+
<input
87+
type="text"
88+
value={modal.passwordData.oldPassword}
89+
name="oldPassword"
90+
onChange={modal.handlePasswordChange}
91+
/>
92+
<S.InputText>새 비밀번호</S.InputText>
93+
<input
94+
type="text"
95+
value={modal.passwordData.newPassword}
96+
name="newPassword"
97+
onChange={modal.handlePasswordChange}
98+
/>
99+
<div>
100+
<button>비밀번호변경</button>
101+
</div>
102+
</S.InputBox>
103+
</S.ChangeInput>
104+
</S.Boxlayout>
105+
</S.layout>
106+
<SelectSchoolModal isOpen={modal.isOpen} />
107+
<SelectMajorModal isOpen={isNext} />
108+
</>
120109
);
121110
};
122111

‎src/components/common/selectMajorModal/index.tsx

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,74 @@ import useMajor from "@/hooks/firstLogin/useMajor";
77
import convertMajorListType from "@/utils/majorList/convertMajorListType";
88
import { useGetMajorBySubject } from "@/queries/firstLogin/firstLogin.query";
99

10-
const SelectMajorModal = () => {
10+
interface ModalProps {
11+
isOpen: boolean;
12+
}
13+
14+
const SelectMajorModal = ({ isOpen }: ModalProps) => {
1115
const { ...major } = useMajor();
1216
const searchMajorBySubjectMutation = useGetMajorBySubject();
1317
return (
1418
<>
15-
<S.SelectMajorModalWrap>
16-
<S.Main>
17-
<S.Header>
18-
<S.Title>관심 학과 선택</S.Title>
19-
<S.SearchWrap>
20-
<input
21-
type="text"
22-
placeholder="학과를 입력해주세요"
23-
value={major.keyword}
24-
onChange={major.handleKeyword}
25-
/>
26-
<Image src={Search} alt="돋보기" width={20} height={20} onClick={major.searchMajorList} />
27-
</S.SearchWrap>
28-
</S.Header>
29-
<S.MajorBoxWrap>
30-
<S.MajorWrap>
31-
<S.MajorTypeWrap>
32-
{MAJOR_TYPE_LIST.map((item, idx) => (
33-
<S.MajorTypeList
34-
$isclicked={major.subject === item ? "true" : "false"}
35-
onClick={() => {
36-
const parmas = {
37-
subject: item,
38-
};
39-
searchMajorBySubjectMutation.mutate(parmas, {
40-
onSuccess: (data) => {
41-
console.log(data);
42-
major.setMajorList(data);
43-
},
44-
});
45-
}}
46-
>
47-
<span key={idx} onClick={() => major.handleSubject(item)}>
48-
{convertMajorListType.convertMajorToString(item)}
49-
</span>
50-
</S.MajorTypeList>
51-
))}
52-
</S.MajorTypeWrap>
53-
<S.MajorListWrap>
54-
{major.majorList?.data.map((item, idx) => (
55-
<S.Major
56-
key={idx}
57-
onClick={() => {
58-
console.log(item.majorSeq, item.lClass, item.mClass);
19+
{isOpen === true && (
20+
<S.SelectMajorModalWrap>
21+
<S.Main>
22+
<S.Header>
23+
<S.Title>관심 학과 선택</S.Title>
24+
<S.SearchWrap>
25+
<input
26+
type="text"
27+
placeholder="학과를 입력해주세요"
28+
value={major.keyword}
29+
onChange={major.handleKeyword}
30+
/>
31+
<Image src={Search} alt="돋보기" width={20} height={20} onClick={major.searchMajorList} />
32+
</S.SearchWrap>
33+
</S.Header>
34+
<S.MajorBoxWrap>
35+
<S.MajorWrap>
36+
<S.MajorTypeWrap>
37+
{MAJOR_TYPE_LIST.map((item, idx) => (
38+
<S.MajorTypeList
39+
$isclicked={major.subject === item ? "true" : "false"}
40+
onClick={() => {
41+
const parmas = {
42+
subject: item,
43+
};
44+
searchMajorBySubjectMutation.mutate(parmas, {
45+
onSuccess: (data) => {
46+
console.log(data);
47+
major.setMajorList(data);
48+
},
49+
});
50+
}}
51+
>
52+
<span key={idx} onClick={() => major.handleSubject(item)}>
53+
{convertMajorListType.convertMajorToString(item)}
54+
</span>
55+
</S.MajorTypeList>
56+
))}
57+
</S.MajorTypeWrap>
58+
<S.MajorListWrap>
59+
{major.majorList?.data.map((item, idx) => (
60+
<S.Major
61+
key={idx}
62+
onClick={() => {
63+
console.log(item.majorSeq, item.lClass, item.mClass);
5964

60-
major.handleSubmitParams(item.majorSeq, item.lClass, item.mClass);
61-
}}
62-
>
63-
<span>{item.mClass}</span>
64-
</S.Major>
65-
))}
66-
</S.MajorListWrap>
67-
</S.MajorWrap>
68-
</S.MajorBoxWrap>
69-
<S.NextButton onClick={major.onSubmit}>완료</S.NextButton>
70-
</S.Main>
71-
</S.SelectMajorModalWrap>
65+
major.handleSubmitParams(item.majorSeq, item.lClass, item.mClass);
66+
}}
67+
>
68+
<span>{item.mClass}</span>
69+
</S.Major>
70+
))}
71+
</S.MajorListWrap>
72+
</S.MajorWrap>
73+
</S.MajorBoxWrap>
74+
<S.NextButton onClick={major.onSubmit}>완료</S.NextButton>
75+
</S.Main>
76+
</S.SelectMajorModalWrap>
77+
)}
7278
</>
7379
);
7480
};

‎src/components/common/selectMajorModal/style.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ export const SelectMajorModalWrap = styled.div`
55
width: 100%;
66
height: 100vh;
77
8-
position: absolute;
8+
position: fixed;
99
left: 0;
10+
top: 0;
1011
1112
display: flex;
1213
flex-direction: column;
1314
align-items: center;
1415
justify-content: center;
1516
1617
background: rgba(0, 0, 0, 0.2);
18+
z-index: 1;
1719
`;
1820

1921
export const Main = styled.div`

0 commit comments

Comments
 (0)