⚡ :: professor list #8

@Types/images.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png";
+declare module "*.JPG";
+declare module "*.jpeg";
+declare module "*.svg";
+declare module "*.gif";

package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.40.1",
+    "@tanstack/react-query-devtools": "^5.40.1",
     "cookies-next": "^4.1.1",
     "next": "14.1.4",
     "next-cookies": "^2.0.3",

src/Components/Auth/login/index.tsx

@@ -6,7 +6,7 @@ import useLogin from "src/hooks/Auth/login/useLogin";
 import TextField from "src/components/common/TextField";
 import { useRouter } from "next/navigation";
 import { useRecoilState } from "recoil";
-import { ErrorStateAtom } from "src/store/common/common.store";
+import { ErrorStateAtom } from "src/Store/common/common.store";
 
 const Login = () => {
   const { ...hooks } = useLogin();
@@ -23,7 +23,7 @@ const Login = () => {
           functions="userId"
           onchange={hooks.handleLoginChange}
           labelStyle={{ top: "37%" }}
-          type="password"
+          type="email"
         >
           이메일
         </TextField>

src/Hooks/Auth/login/useLogin.ts

@@ -1,16 +1,18 @@
 "use client";
 import axios from "axios";
+import { useRouter } from "next/navigation";
 import React, { useCallback, useEffect, useState } from "react";
 import { useRecoilState } from "recoil";
 import config from "src/config/config.json";
 import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from "src/constants/token/token.constants";
 import { showToast } from "src/libs/Swal/Swal";
 import token from "src/libs/token/token";
-import { ErrorStateAtom } from "src/store/common/common.store";
+import { ErrorStateAtom } from "src/Store/common/common.store";
 import { LoginParam, LoginResponse } from "src/types/Auth/auth.type";
-import patternCheck from "src/util/check/patternCheck";
+import patternCheck from "src/Util/check/patternCheck";
 
 const useLogin = () => {
+  const router = useRouter();
   const [LoginData, setLoginData] = useState<LoginParam>({
     userId: "",
     password: "",
@@ -48,8 +50,10 @@ const useLogin = () => {
           password: LoginData.password,
         })
         .then((res) => {
-          token.setToken(ACCESS_TOKEN_KEY, res.data.accessToken);
-          token.setToken(REFRESH_TOKEN_KEY, res.data.refreshToken);
+          token.setToken(ACCESS_TOKEN_KEY, res.data.data.accessToken);
+          token.setToken(REFRESH_TOKEN_KEY, res.data.data.refreshToken);
+          showToast("success", "로그인 성공");
+          router.push("/");
         });
     } catch (e) {
       showToast("error", "로그인 실패");

src/Hooks/matching/useMatching.ts

@@ -1,3 +1,25 @@
+import { useEffect, useState } from "react";
+import { dearV1Axios } from "src/libs/Axios/customAxios";
+import { ProfessorData } from "src/types/matching/professor.types";
+
 const useMatching = () => {
-
-}
+  const [professor, setProfessor] = useState<ProfessorData[]>([]);
+
+  useEffect(() => {
+    const onLoadProfessor = async () => {
+      try {
+        await dearV1Axios.get("/professor?page=1&size=100").then((res) => setProfessor(res.data.data));
+      } catch (error) {
+        console.log(error);
+      }
+    };
+
+    onLoadProfessor();
+  }, []);
+
+  return {
+    professor,
+  };
+};
+
+export default useMatching;

src/Libs/token/token.ts

@@ -1,5 +1,5 @@
 import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from "src/constants/token/token.constants";
-import cookieUtil from "src/util/cookie/cookie.util";
+import cookieUtil from "src/Util/cookie/cookie.util";
 
 class Token {
   public getToken(key: string): string | undefined {

src/Repositories/token/token.repository.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import config from "src/config/config.json";
 import { RefreshTokenParams } from "./token.param";
-import { RefreshResponse } from "src/Types/token/token.type";
+import { RefreshResponse } from "src/types/token/token.type";
 
 class TokenRepository {
   public async getRefreshToken(refreshToken: RefreshTokenParams): Promise<RefreshResponse> {

src/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
-import Layout from "src/components/common/layout/index";
-import StyledComponentsRegistry from "src/Libs/registry";
-import GlobalStyle from "src/style/global";
+import Layout from "@/components/common/layout";
+import StyledComponentsRegistry from "src/libs/registry";
 export const metadata: Metadata = {
   title: "Dear",
   description: "Generated by create next app",
@@ -15,7 +14,6 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <StyledComponentsRegistry>
-          <GlobalStyle />
           <Layout>{children}</Layout>
         </StyledComponentsRegistry>
       </body>

src/components/common/layout/index.tsx

@@ -2,6 +2,7 @@
 import Sidebar from "src/components/Sidebar/index";
 import { Container, Wrap } from "./style";
 import { usePathname, useRouter } from "next/navigation";
+import { RecoilRoot } from "recoil";
 
 interface Props {
   children: React.ReactNode;
@@ -11,10 +12,12 @@ const Layout = ({ children }: Props) => {
   const pathname = usePathname();
   return (
     <>
-      <Container>
-        {pathname !== "/login" && <Sidebar />}
-        <Wrap isSign={pathname == "/sign" ? false : true}>{children}</Wrap>
-      </Container>
+      <RecoilRoot>
+        <Container>
+          {pathname !== "/login" && <Sidebar />}
+          <Wrap isSign={pathname == "/sign" ? false : true}>{children}</Wrap>
+        </Container>
+      </RecoilRoot>
     </>
   );
 };

src/components/matching/index.tsx

@@ -17,17 +17,17 @@ const index = () => {
         </S.SearchProfessor>
       </S.SearchProfessorWrap>
       <S.Main>
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
-        <ProfessorList onclick={() => router.push("/matching/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
+        <ProfessorList onclick={() => router.push("/find/professor")} />
       </S.Main>
     </S.FindProfessorWrap>
   );

src/components/matching/professorDetail/index.tsx

@@ -2,11 +2,53 @@
 
 import React from "react";
 import * as S from "./style";
+import Image from "next/image";
+import Avartar from "src/asset/Avatar.svg";
+import BestRecommandImg from "src/asset/BestRecommand.svg";
+import Subject from "src/asset/Subject.png";
 
 const index = () => {
   return (
     <S.ProfessorDetailWrap>
-      <S.Main></S.Main>
+      <S.Main>
+        <S.InfoWrap>
+          <S.UtilityWrap>
+            <S.ProfileWrap>
+              <Image src={Avartar} alt="프로필 이미지" />
+              <div>
+                <h1>이해준 교수</h1>
+                <span>영남이공대 박승철 헤어과</span>
+              </div>
+              <S.BestRecommandIcon>
+                <Image src={BestRecommandImg} alt="최다 추천" />
+              </S.BestRecommandIcon>
+            </S.ProfileWrap>
+            <S.ButtonWrap>
+              <button>채팅하기</button>
+            </S.ButtonWrap>
+          </S.UtilityWrap>
+          <S.OneLiner>헤어 봉사하는것을 좋아합니다.</S.OneLiner>
+          <S.Subject>
+            <Image src={Subject} alt="전문과목" />
+            <span>전문과목 : 수능영어, 고등진로</span>
+          </S.Subject>
+        </S.InfoWrap>
+        <S.CareerWrap>
+          <h1>경력</h1>
+          <S.Careers>
+            <span>2021.02.02</span>
+            <span>포항 제철 고등학교 졸업</span>
+          </S.Careers>
+          <S.Careers>
+            <span>2021.02.02</span>
+            <span>포항 제철 고등학교 졸업</span>
+          </S.Careers>
+          <S.Careers>
+            <span>2021.02.02</span>
+            <span>포항 제철 고등학교 졸업</span>
+          </S.Careers>
+        </S.CareerWrap>
+      </S.Main>
     </S.ProfessorDetailWrap>
   );
 };