feat: 로그인 기능구현 (#52)

* feat: 소셜로그인 및 회원가입 연결
- 소셜 로그인, 회원가입 시 리디렉션 페이지 연동 완료
- 유저정보 저장 진행 중

* feat:편지 작성 페이지 1차 기능구현 (#47)

* feat:편지전송 답장 post api 연결완료

* feat:매칭된 편지 작성시 api 분기 구현

* feat:카테고리 페이지 페이지 뒤로가기 버튼 제거 + 이전단계 위치 조정

* feat:옵션 모달 외부 클릭시 슬라이드 닫히는 로직 구현

* feat: 편지작성 페이지 전역변수 편지전송 관련 request값들 객체형태로 통일

* fix:코드리뷰 사항 수정

* feat:랜덤 편지 + 편지 상세 1차 기능 구현 (#46)

* feat:편지 상세 페이지 삭제 모달 추가

* chore:기존 파일들 컴포넌트파일로 이동

* feat:쿨타임 컴포넌트 생성 + 랜덤편지 타입 수정

* feat:차단된 편지 버튼 disabled처리

* feat:편지 상세보기 모달 생성(매칭편지는 상세페이지와 분리)

* fix:쿨타임 페이지 letterWrapper 적용

* feat:편지 상세, 랜덤 편지 api throw error 예외처리 추가

* feat:편지 매칭 제한시간 구현

* feat:랜덤편지 페이지 매칭 제한시간, 쿨타임 로직 구현

* feat:랜덤편지 페이지 편지 매칭 제한시간, 쿨타임 시간 구현

* feat:매칭된 편지 전달시 location값 전달처리({randomMatched: true})

* feat:코드리뷰 사항 수정

* feat: 로그인 기능 임시 구현
- API 완성 되지 않음 : 논의된 부분을 바탕으로 임시로 제작함(작동 안함)
- 토큰을 전달 받기 위해 권한 상태 페이지 추가(보여주기 위한 용도가 아니라 쿼리문으로 토큰 전달을 위한 목적)

* feat: logout API 추가

* test: 로그인 테스트용 임시 커밋

* refactor: API 변경 사항 수정 반영, 토큰관련 interceptor 문 수정
- API 수정 반영하여 오류 사항들 수정
- 기존 interceptor 문에 오류가 있어서 수정
- AuthCallback Page에서 회원정보 설정 및 우편번호 발급

* test: 탈퇴 처리 테스트

* Perf: 내 편지함 탄스택 쿼리 적용 (#50)

* fix: 모바일에서 gradient 보이지 않는 문제 해결

* refactor: 내 편지함 및 상세 querykey 적용
- useState을 삭제 하고 데이터 관리 및 성능 최적화를 위해 tanstack query 적용

* fix: 편지 상세 무한 스크롤 오류 수정
- 마지막 편지 보일 시 새로 페이징 하는 로직을 response data에 맞게 수정
- react-intersection-observer 라이브러리를 이용하여 마지막 요소가 view에 들어오는지 확인

* fix: 내 편지함 디자인 보이지 않는 문제 해결
- gradietn class에 !important를 적용

---------

Co-authored-by: nirii00 <[email protected]>

* feat: 소셜로그인 및 회원가입 연결
- 소셜 로그인, 회원가입 시 리디렉션 페이지 연동 완료
- 유저정보 저장 진행 중

* Fix: intercepter 오류 해결
- intercepter retry 코드 빠진 부분 수정
- header에 잘못 설정 하는 부분 수정

* feat: 마이페이지 로그아웃 적용
- 로그아웃 테스트를 위해 마이페이지에 로그아웃 기능을 먼저 구현했습니다!

* Update src/pages/Auth/index.tsx

refac: 코드 개선

Co-authored-by: Minha Ahn <[email protected]>

* refactor: 코드 리뷰 반영
- 로그인 타입 파일 만듦
- logout 중복 선언 정리
- myPage 탈퇴 추가, p 태그 -> 버튼
- useAuthState 상태 가져오는 코드 수정

* refactor: myPage 오타 수정

---------

Co-authored-by: nirii00 <[email protected]>
Co-authored-by: wldnjs990 <[email protected]>
Co-authored-by: Minha Ahn <[email protected]>

Author: 3 people

pnpm-lock.yaml

@@ -7,6 +7,7 @@ import AdminPage from './pages/Admin';
 import FilteredLetterManage from './pages/Admin/FilteredLetter';
 import FilteringManage from './pages/Admin/Filtering';
 import ReportManage from './pages/Admin/Report';
+import AuthCallbackPage from './pages/Auth';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
 import LetterBoardPage from './pages/LetterBoard';
@@ -54,7 +55,8 @@ const App = () => {
           <Route path="board" element={<LetterBoardPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
-        <Route path="*" element={<NotFoundPage />}></Route>
+        <Route path="*" element={<NotFoundPage />} />
+        <Route path="auth-callback" element={<AuthCallbackPage />} />
       </Route>
 
       <Route path="admin" element={<AdminPage />}>

src/App.tsx

@@ -0,0 +1,70 @@
+import client from './client';
+
+export const socialLogin = (loginType: LoginType) => {
+  window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${loginType}`;
+};
+
+export const getUserToken = async (stateToken: string) => {
+  try {
+    const response = await client.get(`/api/auth/token?state=${stateToken}`);
+    if (!response) throw new Error('getUserToken: Error while fetching user token');
+    const userInfo = response.data;
+    if (userInfo) {
+      return userInfo;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const postZipCode = async () => {
+  try {
+    const response = await client.post(`/api/members/zipCode`);
+    if (!response) throw new Error('fail to post ZipCode');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getNewToken = async () => {
+  try {
+    const response = await client.get('/api/reissue', { withCredentials: true });
+    if (!response) throw new Error('getNewToken: no response data');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getMydata = async () => {
+  try {
+    const response = await client.get('/api/members/me');
+    if (!response) throw new Error('getNewTOken: no response data');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const deleteUserInfo = async () => {
+  try {
+    const response = await client.delete('/api/members/me', {
+      withCredentials: true,
+    });
+    if (!response) throw new Error('deleteUserInfo: no response');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const postLogout = async () => {
+  try {
+    const response = await client.post('/api/logout', { withCredentials: true });
+    if (!response) throw new Error('postLogout: failed to logout');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/apis/auth.ts

@@ -1,21 +1,70 @@
 import axios from 'axios';
 
+import useAuthStore from '@/stores/authStore';
+
+import { getNewToken } from './auth';
+
 const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 });
 
-// client.interceptors.request.use(
-//   (config) => {
-//     const token = localStorage.getItem('authToken');
-//     if (token) {
-//       config.headers['Authorization'] = `Bearer ${token}`;
-//     }
-//     return config;
-//   },
-//   (error) => {
-//     //TODO: 에러처리
-//     return Promise.reject(error);
-//   },
-// );
+client.interceptors.request.use(
+  (config) => {
+    const accessToken = useAuthStore((state) => state.accessToken);
+    console.log(config.url);
+    console.log(accessToken);
+    if (config.url !== '/auth/reissue' && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+      console.log('intercepter', config.headers);
+    }
+    return config;
+  },
+  (error) => {
+    const logout = useAuthStore((state) => state.logout);
+    logout();
+    window.location.replace('/login');
+    return Promise.reject(error);
+  },
+);
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const setAccessToken = useAuthStore((state) => state.setAccessToken);
+    const logout = useAuthStore((state) => state.logout);
+
+    const originalRequest = error.config;
+
+    if (!originalRequest) {
+      return Promise.reject(error);
+    }
+
+    if (
+      (error.response.status === 401 ||
+        error.response.status === 403 ||
+        error.response.data.message === 'Unauthorized') &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        const response = await getNewToken();
+        const newToken = response?.data.accessToken;
+
+        if (!newToken) throw new Error('Failed to Refresh Token');
+
+        setAccessToken(newToken);
+        originalRequest.headers.Authorization = `Bearer ${newToken}`;
+
+        return client(originalRequest);
+      } catch (e) {
+        logout();
+        window.location.replace('/login');
+        return Promise.reject(e);
+      }
+    }
+    return Promise.reject(error);
+  },
+);
 
 export default client;

src/apis/client.ts

@@ -15,11 +15,11 @@ queryClient.setDefaultOptions({
 });
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </QueryClientProvider>,
+  // </StrictMode>,
 );

src/main.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
+import { getUserToken, getMydata, postZipCode } from '@/apis/auth';
+import useAuthStore from '@/stores/authStore';
+
+const AuthCallbackPage = () => {
+  const stateToken = new URLSearchParams(window.location.search).get('state');
+  const redirectURL = new URLSearchParams(window.location.search).get('redirect');
+
+  const login = useAuthStore((state) => state.login);
+  const setAccessToken = useAuthStore((state) => state.setAccessToken);
+  const setZipCode = useAuthStore((state) => state.setZipCode);
+
+  const navigate = useNavigate();
+
+  const setUserInfo = async (stateToken: string) => {
+    try {
+      const response = await getUserToken(stateToken);
+      if (!response) throw new Error('Error Fetching userInfo');
+
+      const userInfo = response.data;
+      if (userInfo) {
+        login();
+        userInfo.accessToken && setAccessToken(userInfo.accessToken);
+
+        if (redirectURL == 'home') {
+          const zipCodeResponse = await getMydata();
+          if (!zipCodeResponse) throw new Error('Error Fetching userInfo');
+          const zipCode = zipCodeResponse.data.data.zipCode;
+          zipCode && setZipCode(zipCode);
+
+          console.log(
+            'isLoggedIn',
+            useAuthStore.getState().isLoggedIn,
+            'access',
+            useAuthStore.getState().accessToken,
+            'zipCode',
+            useAuthStore.getState().zipCode,
+          );
+        } else if (redirectURL === 'onboarding') {
+          const createZipCodeResponse = await postZipCode();
+          if (!createZipCodeResponse) throw new Error('Error creating ZipCode');
+          const zipCode = createZipCodeResponse.data.data.zipCode;
+          console.log(createZipCodeResponse);
+          const newAccessToken = createZipCodeResponse.headers['Authorization'];
+          setZipCode(zipCode);
+          setAccessToken(newAccessToken);
+          console.log(
+            'isLoggedIn',
+            useAuthStore.getState().isLoggedIn,
+            'access',
+            useAuthStore.getState().accessToken,
+            'zipCode',
+            useAuthStore.getState().zipCode,
+          );
+        }
+      } else {
+        navigate('/login');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const redirection = () => {
+    if (redirectURL === 'onboarding') navigate('/onboarding');
+    else if (redirectURL === 'home') navigate('/');
+    else navigate('/notFound');
+  };
+
+  useEffect(() => {
+    if (stateToken) {
+      setUserInfo(stateToken as string);
+      redirection();
+    } else navigate('/notFound');
+  }, []);
+  return <></>;
+};
+
+export default AuthCallbackPage;

src/pages/Auth/index.tsx

@@ -1,8 +1,12 @@
+import { socialLogin } from '@/apis/auth';
 import { GoogleIcon, KakaoIcon, NaverIcon, StampIcon } from '@/assets/icons';
 
 import Background from './components/Background';
 
 const LoginPage = () => {
+  const handleLogin = (loginType: LoginType) => {
+    socialLogin(loginType);
+  };
   return (
     <>
       <main className="mt-10 flex grow flex-col items-center justify-between">
@@ -22,20 +26,23 @@ const LoginPage = () => {
             type="button"
             className="rounded-full bg-[#03C75A] p-3.5"
             aria-label="네이버 로그인"
+            onClick={() => handleLogin('naver')}
           >
             <NaverIcon />
           </button>
           <button
             type="button"
             className="rounded-full bg-[#FEE500] p-3.5"
             aria-label="카카오 로그인"
+            onClick={() => handleLogin('kakao')}
           >
             <KakaoIcon />
           </button>
           <button
             type="button"
             className="border-gray-5 rounded-full border bg-white p-3.5"
             aria-label="구글 로그인"
+            onClick={() => handleLogin('google')}
           >
             <GoogleIcon />
           </button>