Merge pull request #166 from YAPP-Github/dev

Release 0.1.6

src/components/domain/matching/MatchingTemplete.tsx

@@ -9,13 +9,15 @@ import NoneButton from './buttons/NoneButton';
 import WaitingButton from './buttons/WaitingButton';
 import SuccessButton from './buttons/SuccessButton';
 import Path from '@/router/Path';
+import { Status } from '@/pages/MatchingPage';
 
 interface MatchingTemplateProps {
   children: ReactNode;
   title: ReactNode;
   btnName: string;
+  handleStatus: (status: Status) => void;
 }
-const MatchingTemplete = ({ children, btnName, title }: MatchingTemplateProps) => {
+const MatchingTemplete = ({ children, btnName, title, handleStatus }: MatchingTemplateProps) => {
   const location = useLocation();
   const [type, setType] = useState('meeting');
   const navigate = useNavigate();
@@ -54,7 +56,7 @@ const MatchingTemplete = ({ children, btnName, title }: MatchingTemplateProps) =
               waiting: <WaitingButton />,
               success: <SuccessButton />,
               pay: <CompleteButton />,
-              end: <EndButton />,
+              end: <EndButton handleStatus={handleStatus} />,
             }[btnName]
           }
         </ButtonWrapper>

src/components/domain/matching/buttons/EndButton.tsx

@@ -1,14 +1,48 @@
-import { Button } from '@/components/base';
+import { Button, Modal } from '@/components/base';
+import { useToggle } from '@/hooks/common';
+import { postReMatchMettingSurvey } from '@/lib/api/meeting';
+import { postReMatchDatingSurvey } from '@/lib/api/dating';
+import { useMatch } from 'react-router-dom';
 import React from 'react';
+import { Status } from '@/pages/MatchingPage';
 
-function EndButton() {
-  const handleClick = () => {
-    console.log('asd');
+interface EndButtonProps {
+  handleStatus: (status: Status) => void;
+}
+
+function EndButton({ handleStatus }: EndButtonProps) {
+  const [isErrorModal, onToggleErrorModal] = useToggle();
+  const matchMeeting = useMatch('/meeting/*');
+
+  const handleClick = async () => {
+    try {
+      const res = matchMeeting ? await postReMatchMettingSurvey() : await postReMatchDatingSurvey();
+      if (typeof res === 'number') {
+        handleStatus('waiting');
+      }
+    } catch (e) {
+      onToggleErrorModal();
+    }
   };
   return (
-    <Button onClick={handleClick} size="medium" variant={'kakao'}>
-      <strong>카카오페이</strong>로 간편하고 안전하게 결제
-    </Button>
+    <>
+      <Button onClick={handleClick} size="medium">
+        다시 매칭하기
+      </Button>
+      {isErrorModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          onToggleModal={onToggleErrorModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </>
   );
 }
 

src/components/domain/survey/SearchSelector.tsx

@@ -12,11 +12,10 @@ interface SearchSelectorProps {
   searchData: SearchData[];
   selectedResults: number[];
   setSelectedResults: React.Dispatch<React.SetStateAction<number[]>>;
+  max: number;
 }
 
-const MAX = 4;
-
-const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedResults }: SearchSelectorProps) => {
+const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedResults, max }: SearchSelectorProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [selectedSchools, setSelectedSchools] = useState<string[]>([]); // 렌더링될 NAME 데이터
@@ -34,7 +33,7 @@ const SearchSelector = ({ placeholder, searchData, selectedResults, setSelectedR
 
     const noMatchData = !searchData.map(({ id }) => id).includes(id);
     const existSelected = selectedResults.includes(id);
-    const overMaxLimit = selectedResults.length >= MAX;
+    const overMaxLimit = selectedResults.length >= max;
     if (noMatchData || existSelected || overMaxLimit) return;
 
     setSelectedResults((prev) => [...prev, id]);

src/components/header/DatingInfoBox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal } from '@/components/base';
 import { palette } from '@/lib/styles/palette';
 import { addComma } from '@/utils/addComma';
@@ -17,6 +17,7 @@ import { useDatingSessionState, useToggle } from '@/hooks/common';
 const DatingInfoBox = () => {
   const { initDatingState, setDatingData } = useDatingSessionState();
   const [isErrorModal, onToggleErrorModal] = useToggle();
+  const [doSurvey, setDoSurvey] = useState(true);
   const {
     age,
     myDepartment,
@@ -49,13 +50,29 @@ const DatingInfoBox = () => {
           setDatingData(res);
         }
       } catch (e) {
-        onToggleErrorModal();
+        if ((e as any).request.status === 400) {
+          setDoSurvey(false);
+          return;
+        }
+        if ((e as any).request.status === 500) {
+          onToggleErrorModal();
+          return;
+        }
       }
     };
 
     getDatingData();
   }, []);
 
+  //doSurvey 안됐으면 설문 안뜨게
+  if (!doSurvey)
+    return (
+      <div>
+        <GroupLabel>Me</GroupLabel>
+        <InfoLabel>설문 진행 전</InfoLabel>
+      </div>
+    );
+
   return (
     <>
       <div>

src/components/header/MeetingInfoBox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal } from '@/components/base';
 import {
   conversionDepartment,
@@ -16,6 +16,7 @@ import { useMeetingSessionState, useToggle } from '@/hooks/common';
 function MeetingInfoBox() {
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const [isErrorModal, onToggleErrorModal] = useToggle();
+  const [doSurvey, setDoSurvey] = useState(true);
   const {
     ourDepartments,
     domesticAreas,
@@ -31,21 +32,35 @@ function MeetingInfoBox() {
     preferHeight,
   } = initMeetingState;
 
-  const getMeetingData = async () => {
-    try {
-      const res = await getMeetingSurvey();
-      if (res) {
-        setMeetingData(res);
-      }
-    } catch (e) {
-      onToggleErrorModal();
-    }
-  };
-
   useEffect(() => {
+    const getMeetingData = async () => {
+      try {
+        const res = await getMeetingSurvey();
+        if (res) {
+          setMeetingData(res);
+        }
+      } catch (e) {
+        if ((e as any).request.status === 400) {
+          setDoSurvey(false);
+          return;
+        }
+        if ((e as any).request.status === 500) {
+          onToggleErrorModal();
+          return;
+        }
+      }
+    };
     getMeetingData();
   }, []);
 
+  if (!doSurvey)
+    return (
+      <div>
+        <GroupLabel>Team</GroupLabel>
+        <InfoLabel>설문 진행 전</InfoLabel>
+      </div>
+    );
+
   return (
     <>
       <div>

src/hooks/survey/useAboardAreaLoad.ts

@@ -0,0 +1,17 @@
+import { getAboardAreaAPI } from '@/lib/api/area';
+import { useEffect, useState } from 'react';
+
+function useAboardAreaLoad() {
+  const [area, setArea] = useState([]);
+  useEffect(() => {
+    const getAboardArea = async () => {
+      const data = await getAboardAreaAPI();
+      setArea(data);
+    };
+    getAboardArea();
+  }, []);
+
+  return { area };
+}
+
+export default useAboardAreaLoad;

src/hooks/survey/useUnivLoad.ts

@@ -0,0 +1,22 @@
+import { SearchData } from '@/components/domain/survey/SearchSelector';
+import { getUnivAPI } from '@/lib/api/university';
+import { useEffect, useState } from 'react';
+
+function useUnivLoad() {
+  const [univs, setUnivs] = useState<SearchData[]>([]);
+  useEffect(() => {
+    const getAllUniv = async () => {
+      try {
+        const data = await getUnivAPI();
+        setUnivs(data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getAllUniv();
+  }, []);
+
+  return { univs };
+}
+
+export default useUnivLoad;

src/lib/api/admin.ts

@@ -0,0 +1,22 @@
+import apiClient from './index';
+import { AdminUsersStatus } from '@/types/user';
+
+export const getMeetingUsers = async () => {
+  const res = await apiClient.get<AdminUsersStatus[]>('/admin/users/meeting/status');
+  return res.data;
+};
+
+export const getDatingUsers = async () => {
+  const res = await apiClient.get<AdminUsersStatus[]>('/admin/users/dating/status');
+  return res.data;
+};
+
+export const patchMeetingPayment = async (kakaoId: string) => {
+  const res = await apiClient.patch<AdminUsersStatus[]>('/admin/users/meeting/payment', { kakaoId });
+  return res.data;
+};
+
+export const patchDatingPayment = async (kakaoId: string) => {
+  const res = await apiClient.patch<AdminUsersStatus[]>('/admin/users/dating/payment', { kakaoId });
+  return res.data;
+};

src/lib/api/area.ts

@@ -0,0 +1,13 @@
+import apiClient from '.';
+
+export const getAboardAreaAPI = async () => {
+  const res = await apiClient.get('/areas');
+  console.log(res);
+
+  return res.data;
+};
+
+export const postAboardAreaAPI = async (body: { id: number; name: string }) => {
+  const res = await apiClient.post('/areas', body);
+  return res.data;
+};

src/lib/api/index.ts

@@ -2,12 +2,23 @@ import axios from 'axios';
 import { SERVER_URL } from '@/lib/constants';
 import Cookies from 'js-cookie';
 
+console.log(Cookies.get('AccessToken') || '');
 const apiClient = axios.create({
   baseURL: SERVER_URL,
   withCredentials: false,
-  headers: {
-    Authorization: Cookies.get('AccessToken') ?? '',
-  },
 });
 
+apiClient.interceptors.request.use(
+  (config) => {
+    if (!config?.headers) {
+      throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
+    }
+    const token = Cookies.get('AccessToken');
+    config.headers.Authorization = token || '';
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
 export default apiClient;

src/lib/api/login.ts

@@ -5,7 +5,13 @@ import { LoginResponse, LoginRequest } from '@/types/user';
   임시 아이디 비번: test1
 */
 
+export const postJoin = async (payload: LoginRequest): Promise<LoginResponse | undefined> => {
+  const res = await apiClient.post('/join', payload);
+  return res.data;
+};
+
 export const postLogin = async (payload: LoginRequest): Promise<LoginResponse | undefined> => {
+  await apiClient.post('/join', payload);
   const res = await apiClient.post('/login', payload);
   return res.data;
 };

src/lib/api/meeting.ts

@@ -12,7 +12,7 @@ export const getMeetingSurvey = async () => {
   return res.data;
 };
 
-export const postReMathcingMettingSurvey = async () => {
+export const postReMatchMettingSurvey = async () => {
   const res = await apiClient.post('/meeting/survey/rematch');
   return res.data;
 };

src/lib/api/university.ts

@@ -0,0 +1,11 @@
+import apiClient from '.';
+
+export const getUnivAPI = async () => {
+  const res = await apiClient.get('/university');
+  return res.data;
+};
+
+export const postUnivAPI = async (body: { id: number; name: string }) => {
+  const res = await apiClient.post('/university', body);
+  return res.data;
+};

src/pages/AbroadAreasSurvey.tsx

@@ -5,11 +5,12 @@ import { SurveyTemplate } from '@/components/domain/survey';
 import Path from '@/router/Path';
 import { Title } from '@/lib/styles/styledComponents';
 import SearchSelector from '@/components/domain/survey/SearchSelector';
-import { schools } from '@/mock/schools';
 import { useMeetingSessionState, useDatingSessionState } from '@/hooks/common';
+import useAboardAreaLoad from '@/hooks/survey/useAboardAreaLoad';
 
 const AbroadAreasSurvey = () => {
   const matchMeeting = useMatch('/meeting/*');
+  const { area } = useAboardAreaLoad();
   const meetingNavigate = matchMeeting ? useMeetingNavigate() : useDatingNavigate();
   const { initMeetingState, setMeetingData } = useMeetingSessionState();
   const { initDatingState, setDatingData } = useDatingSessionState();
@@ -39,7 +40,7 @@ const AbroadAreasSurvey = () => {
       </Title>
       <SearchSelector
         placeholder="지역을 검색하세요."
-        searchData={schools}
+        searchData={area}
         selectedResults={matchMeeting ? abroadAreas : abroadAreasDating}
         setSelectedResults={matchMeeting ? setAbroadAreas : setAbroadAreasDating}
       />