refactor :: Modal #42

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

src/app/main/page.tsx

@@ -14,9 +14,9 @@ const index = () => {
     <>
       <S.Page>
         <Banner />
-        {/* {data?.data.role === "PROFESSOR" ? <ProfessorMainView /> : <Find />} */}
+        {data?.data.role === "PROFESSOR" ? <ProfessorMainView /> : <Find />}
       </S.Page>
-      {/* <SelectSchoolModal isOpen={data?.data.schoolName === null} /> */}
+      <SelectSchoolModal />
     </>
   );
 };

src/app/page.tsx

@@ -4,12 +4,14 @@ import React from "react";
 import Image from "next/image";
 import Mainpage from "../app/main/page";
 import Sidebar from "@/components/common/sidebar";
+import SelectSchoolModal from "@/components/common/selectSchoolModal";
 
 const Home = () => {
   return (
 
     <div style={{ display: "flex", height: "100vh" }}>
       <Mainpage />      
+      {/* <SelectSchoolModal /> */}
     </div>
 
   );

src/components/common/modal/index.tsx

@@ -1,29 +1,19 @@
 import { ModalProps } from "./type";
 import styled, { CSSObject } from "styled-components";
 import { Portal } from "../modalPortal";
-const Modal = ({width,
-    height,
-    zIndex,
-    isOpen,
-    close,
-    children,
-    customStyle,}:ModalProps)=>{
-        return(
-            <Portal>
-            {
-                isOpen && (
-
-                    <Background onClick={close} customStyle={customStyle}>
-                        {children}
-                    </Background>
-
-                ) 
-            }
-            </Portal>
-        )
-}
+const Modal = ({ width, height, zIndex, isOpen, close, children, customStyle }: ModalProps) => {
+  return (
+    <Portal>
+      {isOpen && (
+        <Background onClick={close} customStyle={customStyle}>
+          {children}
+        </Background>
+      )}
+    </Portal>
+  );
+};
 export default Modal;
- const Background = styled.div<{ customStyle?: CSSObject }>`
+const Background = styled.div<{ customStyle?: CSSObject }>`
   width: 100%;
   min-height: 100%;
   position: fixed;
@@ -38,15 +28,15 @@ export default Modal;
   overflow: auto;
   ${({ customStyle }) => customStyle}
 `;
- const ModalHeaderWrap = styled.div`
+const ModalHeaderWrap = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 53px;
   border-bottom: 1px solid rgb(221, 221, 221);
 `;
- const Title = styled.h1`
+const Title = styled.h1`
   font-size: 17px;
   font-weight: bold;
-`;
+`;

src/components/common/selectMajorModal/index.tsx

@@ -6,17 +6,19 @@ import { MAJOR_TYPE_LIST } from "@/constants/majorType/majorType.constants";
 import useMajor from "@/hooks/firstLogin/useMajor";
 import convertMajorListType from "@/utils/majorList/convertMajorListType";
 import { useGetMajorBySubject } from "@/queries/firstLogin/firstLogin.query";
+import Modal from "../modal";
 
 interface ModalProps {
   isOpen: boolean;
+  onClose: () => void;
 }
 
-const SelectMajorModal = ({ isOpen }: ModalProps) => {
+const SelectMajorModal = ({ isOpen, onClose }: ModalProps) => {
   const { ...major } = useMajor();
   const searchMajorBySubjectMutation = useGetMajorBySubject();
   return (
     <>
-      {isOpen === true && (
+      <Modal isOpen={isOpen} close={onClose}>
         <S.SelectMajorModalWrap>
           <S.Main>
             <S.Header>
@@ -74,7 +76,7 @@ const SelectMajorModal = ({ isOpen }: ModalProps) => {
             <S.NextButton onClick={major.onSubmit}>완료</S.NextButton>
           </S.Main>
         </S.SelectMajorModalWrap>
-      )}
+      </Modal>
     </>
   );
 };

src/components/common/selectSchoolModal/index.tsx

@@ -8,17 +8,22 @@ import { useSchool } from "@/hooks/firstLogin/useSchool";
 import convertElemListType from "@/utils/transform/elemList/convertElemListType";
 import { useGetProfileInfo } from "@/queries/profile/query";
 import SelectMajorModal from "@/components/common/selectMajorModal/index";
+import { useRecoilState, useRecoilValue } from "recoil";
+import { IsFirst } from "@/store/profile/profile.store";
+import Modal from "../modal";
 
-interface ModalProps {
-  isOpen: boolean;
-}
-
-const SelectSchoolModal = ({ isOpen }: ModalProps) => {
+const SelectSchoolModal = () => {
   const { ...first } = useSchool();
+  const [isFirst, setIsFirst] = useRecoilState(IsFirst);
+  console.log(isFirst);
+
+  const onClose = () => {
+    setIsFirst((prev) => !prev);
+  };
 
   return (
     <>
-      {isOpen === true && (
+      <Modal isOpen={isFirst} close={() => setIsFirst(false)}>
         <S.SelectSchoolModalWrap>
           <S.Main>
             <S.SelectWrap>
@@ -53,7 +58,7 @@ const SelectSchoolModal = ({ isOpen }: ModalProps) => {
                         $isclicked={item.seq === first.seq ? "true" : "false"}
                         key={idx}
                         onClick={() => {
-                          first.handlePostSchoolParams(item.seq, item.schoolName);
+                          first.handlePostSchoolParams(item.seq, item.schoolName, item.link, item.adres);
                         }}
                       >
                         <span>{item.schoolName}</span>
@@ -71,8 +76,8 @@ const SelectSchoolModal = ({ isOpen }: ModalProps) => {
             </div>
           </S.Main>
         </S.SelectSchoolModalWrap>
-      )}
-      <SelectMajorModal isOpen={first.isNext} />
+      </Modal>
+      <SelectMajorModal isOpen={first.isNext} onClose={onClose} />
     </>
   );
 };

src/components/common/selectSchoolModal/style.ts

@@ -5,7 +5,7 @@ export const SelectSchoolModalWrap = styled.div`
   width: 100%;
   height: 100vh;
 
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
 
@@ -15,7 +15,7 @@ export const SelectSchoolModalWrap = styled.div`
   justify-content: center;
 
   background: rgba(0, 0, 0, 0.2);
-  z-index: 1;
+  z-index: 5;
 `;
 
 export const Main = styled.div`
@@ -166,7 +166,7 @@ export const SchoolList = styled.div<{ $isclicked: string }>`
     &:nth-child(2) {
       color: ${({ $isclicked }) => ($isclicked === "true" ? theme.colors.white : theme.colors.gray600)};
       font-size: 14px;
-      font-weight: ${theme.fontWeight.light};
+      font-weight: ${theme.fontWeight.normal};
     }
   }
 `;
@@ -177,7 +177,7 @@ export const NextButton = styled.button`
 
   background: ${theme.colors.new};
   color: ${theme.colors.white};
-  font-weight: ${theme.fontWeight.semiBold};
+  font-weight: ${theme.fontWeight.semibold};
   font-size: 20px;
 
   border: none;

src/components/common/sidebar/index.tsx

@@ -18,36 +18,43 @@ import SideBarModal from "./sidebarModal/index";
 import ProfileModal from "./profileModal/index";
 import UseSidebar from "@/hooks/sidebar/useSidebar";
 import { useRecoilState } from "recoil";
-import { ProfileId } from "@/store/profile/profile.store";
-import { useMediaQuery } from 'react-responsive';
+import { IsFirst, ProfileId } from "@/store/profile/profile.store";
+import { useMediaQuery } from "react-responsive";
 
 export const SideBar = () => {
-  const {...sidebar} = UseSidebar();
+  const { ...sidebar } = UseSidebar();
   const { data } = useGetProfileInfo();
   const [, setProfileId] = useRecoilState(ProfileId);
+  const [isFirst, setIsFirst] = useRecoilState(IsFirst);
   setProfileId(data?.data.id!);
+  if (data?.data.schoolName === null || data?.data.mclass === null) {
+    setIsFirst(true);
+  } else {
+    setIsFirst(false);
+  }
 
-  const isSmallScreen = useMediaQuery({ query: '(max-width: 1264px)' });
+  console.log(isFirst);
+
+  const isSmallScreen = useMediaQuery({ query: "(max-width: 1264px)" });
 
-
   const logoSrc = isSmallScreen && sidebar.isSidebarOpen ? Logo2 : Logo;
 
   return (
-    <S.Side isSidebarOpen={sidebar.isSidebarOpen}>      
+    <S.Side isSidebarOpen={sidebar.isSidebarOpen}>
       <ProfileModal
-       isOpen={sidebar.isOpenProfile}
-       close={sidebar.PrfoileClose}
-       handleProfileClick={sidebar.handleProfileClick}
+        isOpen={sidebar.isOpenProfile}
+        close={sidebar.PrfoileClose}
+        handleProfileClick={sidebar.handleProfileClick}
       />
-      <SideBarModal 
-         isOpen={sidebar.modalBtn}
-         close={sidebar.closeModal}
-         customStyle={{background:"none"}}
-         handleProfileClick={sidebar.handleProfileClick}
+      <SideBarModal
+        isOpen={sidebar.modalBtn}
+        close={sidebar.closeModal}
+        customStyle={{ background: "none" }}
+        handleProfileClick={sidebar.handleProfileClick}
       />
       <Link href={"/"}>
         <S.Logo isSidebarOpen={sidebar.isSidebarOpen}>
-           <Image src={logoSrc} alt="로고" />
+          <Image src={logoSrc} alt="로고" />
         </S.Logo>
       </Link>
 
@@ -78,7 +85,8 @@ export const SideBar = () => {
             <Image
               src={"/community" == sidebar.pathname ? Communitylight : Community}
               alt="커뮤니티 광장"
-              width={30} height={30}
+              width={30}
+              height={30}
             />
             <span>커뮤니티 광장</span>
           </S.Select>
@@ -92,11 +100,7 @@ export const SideBar = () => {
             sidebar.setModalBtn(true);
           }}
         >
-          {data?.data.img ? (
-            <Image src={data?.data.img} alt="프로필" />
-          ) : (
-            <Image src={Profile} alt="프로필" />
-          )}
+          {data?.data.img ? <Image src={data?.data.img} alt="프로필" /> : <Image src={Profile} alt="프로필" />}
 
           {sidebar.isSidebarOpen && (
             <S.Detail>

src/hooks/auth/login/useLogin.ts

@@ -17,7 +17,7 @@ const useLogin = () => {
     userId: "",
     password: "",
   });
-  const [errorState, setErrorState] = useRecoilState<Record<string, string>>(ErrorStateAtom);
+
   const handleLoginChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const { value, name } = e.target;

src/hooks/auth/signup/useInfo.ts

@@ -33,7 +33,7 @@ const useInfo = () => {
           password: password.pw,
           name: infoData.name,
           birthDay: infoData.birthday,
-          type: infoData.type,
+          userRole: infoData.type,
         })
         .then(() => {
           DearToast.sucessToast("로그인 성공");

src/hooks/firstLogin/useSchool.ts

@@ -6,9 +6,24 @@ import { ELEM_TYPE } from "@/constants/elemType/elemType.constants";
 import convertElemList from "@/utils/transform/elemList/convertElemListType";
 import { GetSchoolListRespose } from "@/types/firstLogin/firstLogin.types";
 
+interface InfoType {
+  seq: string;
+  schoolName: string;
+  link: string;
+  adres: string;
+}
+
 export const useSchool = () => {
   const [seq, setSeq] = useState<string>("");
   const [schoolName, setSchoolName] = useState<string>("");
+  const [link, setLink] = useState();
+
+  const [info, setInfo] = useState<InfoType>({
+    seq: "",
+    schoolName: "",
+    link: "",
+    adres: "",
+  });
   const [searchName, setSearchName] = useState<string>("");
   const [gubunType, setGubunType] = useState<ELEM_TYPE>("ELEM_LIST");
   const [schoolList, setSchoolList] = useState<GetSchoolListRespose>();
@@ -45,17 +60,17 @@ export const useSchool = () => {
     });
   };
 
-  const handlePostSchoolParams = (seq: string, schoolName: string) => {
-    setSeq(seq);
-    setSchoolName(schoolName);
+  const handlePostSchoolParams = (seq: string, schoolName: string, link: string, adres: string) => {
+    setInfo({
+      seq,
+      schoolName,
+      link,
+      adres,
+    });
   };
 
   const onSubmitSchool = () => {
-    const params = {
-      seq: seq,
-      schoolName: schoolName,
-    };
-    postSchoolMuation.mutate(params, {
+    postSchoolMuation.mutate(info, {
       onSuccess: () => {
         dearToast.sucessToast("학교 등록이 되었습니다.");
         setIsNext(true);

src/store/profile/profile.store.ts

@@ -1,6 +1,11 @@
-import {atom} from "recoil";
+import { atom } from "recoil";
 
 export const ProfileId = atom<number>({
-key: "profileId",
-default:0,
-})
+  key: "profileId",
+  default: 0,
+});
+
+export const IsFirst = atom<boolean>({
+  key: "isFirst",
+  default: false,
+});