Skip to content

Commit

Permalink
⚡ :: 프로필 변경 시 학교&학과 모달 처리
Browse files Browse the repository at this point in the history
  • Loading branch information
@wjzlskxk
wjzlskxk committed Jul 10, 2024
1 parent 4095481 commit 1d0c467
Show file tree
Hide file tree
Showing 14 changed files with 202 additions and 200 deletions.
5 changes: 3 additions & 2 deletions src/app/main/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@ import * as S from "./style";
import Banner from "@/components/common/banner";
import Find from "@/components/home/mainPageProfessor";
import SelectSchoolModal from "src/components/common/selectSchoolModal/index";
import SelectMajorModal from "@/components/common/selectMajorModal/index";
import { useGetProfileInfo } from "@/queries/profile/query";

const index = () => {
const { data } = useGetProfileInfo();
return (
<>
<S.Page>
<Banner />
<Find />
</S.Page>
<SelectSchoolModal />
<SelectSchoolModal isOpen={data?.data.schoolName === null} />
</>
);
};
Expand Down
5 changes: 1 addition & 4 deletions src/components/common/modalBtn/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@ const Modal: React.FC<ModalProps> = ({ setModalBtn }) => {
};

return (
<S.layout


>
<S.layout>
<S.Boxlayout onClick={(e) => e.stopPropagation()}>
<S.profile onClick={handleProfileClick}>프로필</S.profile>
<S.logout>로그아웃</S.logout>
Expand Down
181 changes: 85 additions & 96 deletions src/components/common/profileModal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
import * as S from "./style";
import { remark } from "remark";
import html from "remark-html";
import {
Dispatch,
RefObject,
SetStateAction,
useEffect,
useState,
} from "react";
import { Dispatch, RefObject, SetStateAction, useEffect, useState } from "react";
import Image from "next/image";
import Profile from "public/svgs/Avatar.svg";
import Photo from "public/svgs/photo.svg";
import Close from "public/svgs/close.svg";
import useProfileChange from "@/hooks/modal/useProfileChange";
import { useGetProfileInfo } from "@/queries/profile/query";
import SelectSchoolModal from "@/components/common/selectSchoolModal/index";
import SelectMajorModal from "@/components/common/selectMajorModal/index";
import { useSchool } from "@/hooks/firstLogin/useSchool";

interface ProfileModalProps {
setModal: Dispatch<SetStateAction<boolean>>;
Expand All @@ -23,100 +20,92 @@ interface ProfileModalProps {
const ProfileModal = ({ setModal, modalRef }: ProfileModalProps) => {
const { ...modal } = useProfileChange();
const { data } = useGetProfileInfo();

const { isNext } = useSchool();
return (
<S.layout ref={modalRef} onClick={(e) => e.stopPropagation()}>
<S.Boxlayout>
<Image
onClick={() => setModal(false)}
src={Close}
alt=""
style={{
fontSize: "30px",
position: "absolute",
top: "20px",
right: "20px",
cursor: "pointer",
}}
/>
<S.ProfileTextBox>
<S.ProfileFix>프로필 </S.ProfileFix>
<S.ProfileText>자신의 정보를 수정할 수 있습니다.</S.ProfileText>
</S.ProfileTextBox>
<S.ProfileImgBox>
<S.ProfileImgText>프로필 사진</S.ProfileImgText>
<S.ProfileImgBunddle>
<div>
<Image
id="profile"
src={data?.img ? data.img : Profile}
alt="프로필"
width={130}
height={130}
style={{ borderRadius: "50%" }}
/>
</div>
<S.Label htmlFor="file_upload">
<>
<S.layout ref={modalRef} onClick={(e) => e.stopPropagation()}>
<S.Boxlayout>
<Image
onClick={() => setModal(false)}
src={Close}
alt=""
style={{
fontSize: "30px",
position: "absolute",
top: "20px",
right: "20px",
cursor: "pointer",
}}
/>
<S.ProfileTextBox>
<S.ProfileFix>프로필 </S.ProfileFix>
<S.ProfileText>자신의 정보를 수정할 수 있습니다.</S.ProfileText>
</S.ProfileTextBox>
<S.ProfileImgBox>
<S.ProfileImgText>프로필 사진</S.ProfileImgText>
<S.ProfileImgBunddle>
<div>
<Image src={Photo} alt="" />
<Image
id="profile"
src={data?.data.img ? data?.data.img : Profile}
alt="프로필"
width={130}
height={130}
style={{ borderRadius: "50%" }}
/>
</div>
</S.Label>
<S.InputImg
type="file"
accept=".jpg, .png, .jpeg"
id="file_upload"
onChange={modal.handleProfileChange}
/>
</S.ProfileImgBunddle>
</S.ProfileImgBox>
<S.ChangeInput>
{/* <S.InputBox>
<S.InputText>학교</S.InputText>
<S.TextBox>
<S.TextBox>
<S.FixBtn onClick={handleMarkdownSave}>수정완료</S.FixBtn>
</S.TextBox>
<S.Label htmlFor="file_upload">
<div>
<Image src={Photo} alt="" />
</div>
</S.Label>
<S.InputImg
type="file"
accept=".jpg, .png, .jpeg"
id="file_upload"
onChange={modal.handleProfileChange}
/>
</S.ProfileImgBunddle>
</S.ProfileImgBox>
<S.ChangeInput>
<S.InputBox>
<S.InputText>학교</S.InputText>
<S.TextBox>
<S.FixBtn
onClick={() => handleEditClick("school-and-department")}
>
수정하기
</S.FixBtn>
<S.TextBox>
<S.FixBtn onClick={modal.handleIsOpen}>수정하기</S.FixBtn>
</S.TextBox>
</S.TextBox>
</S.TextBox>
</S.InputBox>
<S.InputBox>
<S.InputText>
{data?.role === "PROFESSOR" ? "학과" : "관심 학과"}
</S.InputText>
<input type="text" value={data?.mclass} />
<div></div>
</S.InputBox> */}
<S.InputBox>
<S.InputText>현재 비밀번호</S.InputText>
<input
type="text"
value={modal.passwordData.oldPassword}
name="oldPassword"
onChange={modal.handlePasswordChange}
/>
<S.InputText>새 비밀번호</S.InputText>
<input
type="text"
value={modal.passwordData.newPassword}
name="newPassword"
onChange={modal.handlePasswordChange}
/>
<div>
<button>비밀번호변경</button>
</div>
</S.InputBox>
</S.ChangeInput>
<div>
{/* <S.FixEnd onClick={handleSaveChanges}>수정완료</S.FixEnd> */}
</div>
</S.Boxlayout>
</S.layout>
</S.InputBox>
<S.InputBox>
<S.InputText>{data?.data.role === "PROFESSOR" ? "학과" : "관심 학과"}</S.InputText>
<input type="text" value={data?.data.mclass} />
<div></div>
</S.InputBox>
<S.InputBox>
<S.InputText>현재 비밀번호</S.InputText>
<input
type="text"
value={modal.passwordData.oldPassword}
name="oldPassword"
onChange={modal.handlePasswordChange}
/>
<S.InputText>새 비밀번호</S.InputText>
<input
type="text"
value={modal.passwordData.newPassword}
name="newPassword"
onChange={modal.handlePasswordChange}
/>
<div>
<button>비밀번호변경</button>
</div>
</S.InputBox>
</S.ChangeInput>
</S.Boxlayout>
</S.layout>
<SelectSchoolModal isOpen={modal.isOpen} />
<SelectMajorModal isOpen={isNext} />
</>
);
};

Expand Down
120 changes: 63 additions & 57 deletions src/components/common/selectMajorModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,68 +7,74 @@ import useMajor from "@/hooks/firstLogin/useMajor";
import convertMajorListType from "@/utils/majorList/convertMajorListType";
import { useGetMajorBySubject } from "@/queries/firstLogin/firstLogin.query";

const SelectMajorModal = () => {
interface ModalProps {
isOpen: boolean;
}

const SelectMajorModal = ({ isOpen }: ModalProps) => {
const { ...major } = useMajor();
const searchMajorBySubjectMutation = useGetMajorBySubject();
return (
<>
<S.SelectMajorModalWrap>
<S.Main>
<S.Header>
<S.Title>관심 학과 선택</S.Title>
<S.SearchWrap>
<input
type="text"
placeholder="학과를 입력해주세요"
value={major.keyword}
onChange={major.handleKeyword}
/>
<Image src={Search} alt="돋보기" width={20} height={20} onClick={major.searchMajorList} />
</S.SearchWrap>
</S.Header>
<S.MajorBoxWrap>
<S.MajorWrap>
<S.MajorTypeWrap>
{MAJOR_TYPE_LIST.map((item, idx) => (
<S.MajorTypeList
$isclicked={major.subject === item ? "true" : "false"}
onClick={() => {
const parmas = {
subject: item,
};
searchMajorBySubjectMutation.mutate(parmas, {
onSuccess: (data) => {
console.log(data);
major.setMajorList(data);
},
});
}}
>
<span key={idx} onClick={() => major.handleSubject(item)}>
{convertMajorListType.convertMajorToString(item)}
</span>
</S.MajorTypeList>
))}
</S.MajorTypeWrap>
<S.MajorListWrap>
{major.majorList?.data.map((item, idx) => (
<S.Major
key={idx}
onClick={() => {
console.log(item.majorSeq, item.lClass, item.mClass);
{isOpen === true && (
<S.SelectMajorModalWrap>
<S.Main>
<S.Header>
<S.Title>관심 학과 선택</S.Title>
<S.SearchWrap>
<input
type="text"
placeholder="학과를 입력해주세요"
value={major.keyword}
onChange={major.handleKeyword}
/>
<Image src={Search} alt="돋보기" width={20} height={20} onClick={major.searchMajorList} />
</S.SearchWrap>
</S.Header>
<S.MajorBoxWrap>
<S.MajorWrap>
<S.MajorTypeWrap>
{MAJOR_TYPE_LIST.map((item, idx) => (
<S.MajorTypeList
$isclicked={major.subject === item ? "true" : "false"}
onClick={() => {
const parmas = {
subject: item,
};
searchMajorBySubjectMutation.mutate(parmas, {
onSuccess: (data) => {
console.log(data);
major.setMajorList(data);
},
});
}}
>
<span key={idx} onClick={() => major.handleSubject(item)}>
{convertMajorListType.convertMajorToString(item)}
</span>
</S.MajorTypeList>
))}
</S.MajorTypeWrap>
<S.MajorListWrap>
{major.majorList?.data.map((item, idx) => (
<S.Major
key={idx}
onClick={() => {
console.log(item.majorSeq, item.lClass, item.mClass);

major.handleSubmitParams(item.majorSeq, item.lClass, item.mClass);
}}
>
<span>{item.mClass}</span>
</S.Major>
))}
</S.MajorListWrap>
</S.MajorWrap>
</S.MajorBoxWrap>
<S.NextButton onClick={major.onSubmit}>완료</S.NextButton>
</S.Main>
</S.SelectMajorModalWrap>
major.handleSubmitParams(item.majorSeq, item.lClass, item.mClass);
}}
>
<span>{item.mClass}</span>
</S.Major>
))}
</S.MajorListWrap>
</S.MajorWrap>
</S.MajorBoxWrap>
<S.NextButton onClick={major.onSubmit}>완료</S.NextButton>
</S.Main>
</S.SelectMajorModalWrap>
)}
</>
);
};
Expand Down
4 changes: 3 additions & 1 deletion src/components/common/selectMajorModal/style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,17 @@ export const SelectMajorModalWrap = styled.div`
width: 100%;
height: 100vh;
position: absolute;
position: fixed;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
`;

export const Main = styled.div`
Expand Down
Loading

0 comments on commit 1d0c467

Please sign in to comment.