add : 트랙 셀렉터(트랙전체조회) api 연결 (#19)

Kim-s-Crew · May 29, 2024 · a9c202c · a9c202c
1 parent ad92a05
commit a9c202c
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 74 deletions.
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { registerReqData, loginReqData } from '@/types/types';
 
-export const loginFn = async (reqData: loginReqData) => {
+export const login = async (reqData: loginReqData) => {
   try {
     const response = await axios.post(
       `${process.env.NEXT_PUBLIC_SERVER_URL}/api/auths/login`,
@@ -15,7 +15,7 @@ export const loginFn = async (reqData: loginReqData) => {
   }
 };
 
-export const registerFn = async (reqData: registerReqData) => {
+export const registerUser = async (reqData: registerReqData) => {
   console.log('회원가입 펑션 호출됨');
   try {
     const response = await axios.post(

diff --git a/src/apis/track.ts b/src/apis/track.ts
@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+export const getTracks = async () => {
+  const token = sessionStorage.getItem('token');
+  try {
+    const response = await axios.get(
+      `${process.env.NEXT_PUBLIC_SERVER_URL}/tracks`,
+      {
+        headers: {
+          Authorization: `${token}`,
+        },
+      },
+    );
+    console.log(response);
+    return response.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
diff --git a/src/app/admin/student/page.tsx b/src/app/admin/student/page.tsx
@@ -3,29 +3,8 @@ import { Button } from '@nextui-org/react';
 import { getStudent } from '@/apis/student';
 import React, { useEffect, Suspense } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
 
-// const TempComponent = async () => {
-//   const response = await axios.get(
-//     'https://jsonplaceholder.typicode.com/todos/1',
-//   );
-//   console.log('이거', response);
-
-//   let promise = new Promise((resolve, reject) => {
-//     // 비동기 작업 수행
-//     let success = true; // 예시로 성공 여부를 나타내는 변수
-
-//     if (success) {
-//       resolve('작업이 성공했습니다!'); // 작업이 성공하면 resolve 호출
-//     } else {
-//       reject('작업이 실패했습니다.'); // 작업이 실패하면 reject 호출
-//     }
-//   });
-
-//   console.log(promise);
-
-//   return <div>{response.data.title}</div>;
-// };
+import TrackSelector from '@/components/admin/TrackSelector';
 
 const Student = () => {
   // const { data, error } = useQuery({
@@ -44,6 +23,7 @@ const Student = () => {
 
   return (
     <div>
+      <TrackSelector />
       <Button onClick={() => getStudent()}>조회</Button>
       {/* <Suspense fallback={<h1>로딩중</h1>}>
         <TempComponent />

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Button, Input, Spacer } from '@nextui-org/react';
 import { useForm, SubmitHandler } from 'react-hook-form';
-import { loginFn } from '../../apis/auth';
+import { login } from '../../apis/auth';
 
 interface FormValues {
   email: string;
@@ -29,7 +29,7 @@ const LoginPage = () => {
   const loginHandler: SubmitHandler<FormValues> = async (formData) => {
     const { email, password } = formData;
     console.log(email, password);
-    loginFn({ email, password });
+    login({ email, password });
     router.push('/');
   };
 

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
@@ -5,7 +5,7 @@ import nbcIcon from '@/assets/images/spaghetti_logo.png';
 import { Button, Checkbox, Input, Select, SelectItem } from '@nextui-org/react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { useRouter } from 'next/navigation';
-import { registerFn } from '../../apis/auth';
+import { registerUser } from '../../apis/auth';
 
 interface FormValues {
   username: string;
@@ -49,28 +49,39 @@ const RegisterPage = () => {
       recommend,
     } = formData;
 
-    // const newUser = {
-    //   ...formData,
-    //   track: inputs.track,
-    //   isAdmin: inputs.isAdmin,
-    // };
-    const testNewUser = {
+    const NewUser = {
       username,
       email,
       password,
       checkPassword: confirmPassword,
       track: inputs.track,
     };
 
-    console.log(testNewUser);
-    registerFn(testNewUser);
+    const NewAdminUser = {
+      username,
+      email,
+      password,
+      checkPassword: confirmPassword,
+      recommendEmail: recommend,
+    };
+
+    console.log(NewUser);
+    if (inputs.isAdmin) {
+      console.log('관리자', inputs.isAdmin);
+      registerUser(NewAdminUser);
+      router.replace('/');
+    } else {
+      console.log('학생', inputs.isAdmin);
+      registerUser(NewUser);
+      router.replace('/');
+    }
   };
 
   const inputHandler = (e: any) => {
     setInputs({ ...inputs, [e.target.name]: e.target.value });
   };
   const inputCheckHandler = (e: any) => {
-    console.log(e);
+    console.log(inputs.isAdmin);
     setInputs({ ...inputs, [e.target.name]: e.target.checked });
   };
 
@@ -174,7 +185,7 @@ const RegisterPage = () => {
         <div>
           <Checkbox
             id='adminCheck'
-            name='admin'
+            name='isAdmin'
             checked={inputs.isAdmin}
             placeholder='adminCheck'
             onChange={inputCheckHandler}
@@ -200,20 +211,38 @@ const RegisterPage = () => {
           </p>
         )}
         <div>
-          <Button
-            type='submit'
-            color='danger'
-            className='mr-2'
-            isDisabled={
-              !watchName ||
-              !watchEmail ||
-              !watchPassword ||
-              !watchConfirmPassword ||
-              !inputs.track
-            }
-          >
-            회원가입
-          </Button>
+          {inputs.isAdmin ? (
+            <Button
+              type='submit'
+              color='danger'
+              className='mr-2'
+              isDisabled={
+                !watchName ||
+                !watchEmail ||
+                !watchPassword ||
+                !watchConfirmPassword ||
+                !watchRecommend
+              }
+            >
+              회원가입
+            </Button>
+          ) : (
+            <Button
+              type='submit'
+              color='danger'
+              className='mr-2'
+              isDisabled={
+                !watchName ||
+                !watchEmail ||
+                !watchPassword ||
+                !watchConfirmPassword ||
+                !inputs.track
+              }
+            >
+              회원가입
+            </Button>
+          )}
+
           <Button type='button' onClick={cancelRegister}>
             취소
           </Button>

diff --git a/src/components/admin/TrackSelector.tsx b/src/components/admin/TrackSelector.tsx
@@ -1,34 +1,49 @@
 'use client';
+import { getTracks } from '@/apis/track';
 import useStore from '@/zustand/store';
 import { Select, SelectItem } from '@nextui-org/react';
-import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import React, { useState } from 'react';
+
+interface Track {
+  trackId: number;
+  trackName: string;
+}
 
 const TrackSelector = () => {
-  const dummyTrack = [
-    { trackName: 'React 3기' },
-    { trackName: 'Spring 3기' },
-    { trackName: 'Spring 4기' },
-    { trackName: 'React 4기' },
-    { trackName: 'Spring 5기' },
-  ];
+  const { data, isLoading } = useQuery({
+    queryKey: ['allTracks'],
+    queryFn: getTracks,
+  });
 
   const { setTrack, selectedTrack } = useStore((state) => state);
   // const setTrack = useStore(state=> state.setTrack)
-  console.log('전역변수니?', selectedTrack);
+  // console.log(selectedTrack);
+
+  if (isLoading) {
+    return <p>로딩중...</p>;
+  }
+
+  console.log(data.payload);
 
   return (
     <Select
       placeholder='트랙선택'
       aria-label='track-selector'
       onChange={(e) => {
-        setTrack(e.target.value);
+        console.log('여기', e.target.value);
+        let targetName = e.target.value;
+        const result = data.payload.find(
+          (track: Track) => track.trackName === targetName,
+        );
+        console.log(result);
+
+        setTrack(result);
       }}
-      selectedKeys={[selectedTrack]}
+      selectedKeys={[selectedTrack!.trackName]}
     >
-      {dummyTrack.map((track) => (
-        <SelectItem key={track.trackName} value={track.trackName}>
-          {track.trackName}
-        </SelectItem>
+      {data.payload.map((track: Track) => (
+        <SelectItem key={track.trackName}>{track.trackName}</SelectItem>
       ))}
     </Select>
   );

diff --git a/src/types/types.d.ts b/src/types/types.d.ts
@@ -3,7 +3,8 @@ export interface registerReqData {
   password: string;
   checkPassword: string;
   email: string;
-  track: string;
+  track?: string;
+  recommendEmail?: string;
 }
 
 export interface loginReqData {

diff --git a/src/zustand/store.ts b/src/zustand/store.ts
@@ -2,21 +2,24 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 
 interface Store {
-  selectedTrack: string;
-  setTrack: (arg0: string) => void;
+  selectedTrack: {
+    trackId: number;
+    trackName: string;
+  } | null;
+  setTrack: (track: { trackId: number; trackName: string }) => void;
 }
 
 const useStore = create<Store>()(
   devtools(
     persist(
       (set) => ({
-        selectedTrack: '',
-        setTrack: (track) => set(() => ({ selectedTrack: track })),
+        selectedTrack: null,
+        setTrack: (track) => set({ selectedTrack: track }),
       }),
       // localStorage key 이름
-      { name: 'selectedTrack' }
-    )
-  )
+      { name: 'selectedTrack' },
+    ),
+  ),
 );
 
 export default useStore;