Merge pull request #82 from capstone-maru/fix/shared-api

feat/fix: Apply changes to the Shared API
capstone-maru · May 16, 2024 · 3c35ec5 · 3c35ec5
2 parents c6e49ce + 774ac99
commit 3c35ec5
Show file tree

Hide file tree

Showing 32 changed files with 1,480 additions and 837 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import './globals.scss';
 
 import {
   AuthProvider,
+  InitialzationProvider,
   RecoilRootProvider,
   StyledComponentsRegistry,
   TanstackQueryProvider,
@@ -39,8 +40,10 @@ export default function RootLayout({
             <StyledComponentsRegistry>
               <NavigationBar />
               <AuthProvider>
-                <main>{children}</main>
-                <FloatingChatting />
+                <InitialzationProvider>
+                  <main>{children}</main>
+                  <FloatingChatting />
+                </InitialzationProvider>
                 <ToastProvider />
               </AuthProvider>
             </StyledComponentsRegistry>

diff --git a/src/app/lib/providers/AuthProvider.tsx b/src/app/lib/providers/AuthProvider.tsx
@@ -2,9 +2,10 @@
 
 import { isAxiosError } from 'axios';
 import { usePathname, useRouter } from 'next/navigation';
-import { useLayoutEffect, useState, useCallback } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 import {
+  getUserData,
   postTokenRefresh,
   useAuthActions,
   useAuthValue,
@@ -13,7 +14,7 @@ import { load, remove } from '@/shared/storage';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const auth = useAuthValue();
-  const { login } = useAuthActions();
+  const { setAuthUserData, login } = useAuthActions();
 
   const router = useRouter();
   const pathName = usePathname();
@@ -57,16 +58,31 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     postTokenRefresh(refreshToken)
       .then(({ data }) => {
         handleLoginSuccess(data);
+        getUserData()
+          .then(res => {
+            setAuthUserData(res.data);
+          })
+          .catch(err => {
+            console.error(err);
+          });
       })
       .catch(handleLoginError)
       .finally(() => {
         setIsLoading(false);
       });
-  }, [pathName, auth, isLoading, handleLoginSuccess, handleLoginError, router]);
+  }, [
+    pathName,
+    auth,
+    isLoading,
+    handleLoginError,
+    router,
+    handleLoginSuccess,
+    setAuthUserData,
+  ]);
 
   useLayoutEffect(() => {
     checkAndRefreshToken();
-  }, [checkAndRefreshToken]);
+  });
 
   if (pathName !== '/' && pathName !== '/login' && (isLoading || auth == null))
     return <></>;

diff --git a/src/app/lib/providers/InitializationProvider.tsx b/src/app/lib/providers/InitializationProvider.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
+
+export function InitialzationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+
+  const auth = useAuthValue();
+  const { setAuthUserData } = useAuthActions();
+
+  const { data: userData } = useUserData(auth?.accessToken != null);
+
+  useEffect(() => {
+    if (userData != null) {
+      setAuthUserData(userData);
+      if (userData.initialized) {
+        router.replace('/profile');
+      }
+    }
+  }, [userData, router, setAuthUserData]);
+
+  return <>{children}</>;
+}
diff --git a/src/app/lib/providers/index.ts b/src/app/lib/providers/index.ts
@@ -1,4 +1,5 @@
 export * from './AuthProvider';
+export * from './InitializationProvider';
 export * from './RecoilRootProvider';
 export * from './StyledComponentsRegistry';
 export * from './TanstackQueryProvider';

diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
@@ -1,15 +1,14 @@
 'use client';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { CircularButton } from '@/components';
 import { UserCard } from '@/components/main-page';
-import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
+import { useAuthValue } from '@/features/auth';
 import { getGeolocation } from '@/features/geocoding';
-import { useDummyUsers } from '@/features/shared';
+import { useRecommendationMate } from '@/features/recommendation';
 
 const styles = {
   container: styled.div`
@@ -87,18 +86,13 @@ const styles = {
 };
 
 export function MainPage() {
-  const router = useRouter();
-
   const auth = useAuthValue();
-  const { setAuthUserData } = useAuthActions();
-
-  const { data: userData } = useUserData(auth?.accessToken !== undefined);
 
-  // const { data: recommendationMates } = useRecommendationMate({
-  //   memberId: auth?.user?.memberId ?? 'undefined',
-  //   cardType: 'mate',
-  //   enabled: auth?.accessToken != null,
-  // });
+  const { data: recommendationMates } = useRecommendationMate({
+    memberId: auth?.user?.memberId ?? 'undefined',
+    cardType: 'mate',
+    enabled: auth?.accessToken != null && false,
+  });
 
   const [map, setMap] = useState<naver.maps.Map | null>(null);
 
@@ -138,17 +132,6 @@ export function MainPage() {
     });
   }, []);
 
-  useEffect(() => {
-    if (userData !== undefined) {
-      setAuthUserData(userData);
-      if (userData.initialized) {
-        // router.replace('/profile');
-      }
-    }
-  }, [userData, router, setAuthUserData]);
-
-  const users = useDummyUsers();
-
   return (
     <styles.container>
       <styles.map id="map">
@@ -170,26 +153,14 @@ export function MainPage() {
             onClick={handleScrollLeft}
           />
           <styles.mateRecommendation ref={scrollRef}>
-            {/* {recommendationMates?.map(({ name, similarity, userId }) => (
+            {recommendationMates?.map(({ name, similarity, userId }) => (
               <Link key={userId} href={`/profile/${userId}`}>
                 <UserCard
                   name={name}
                   percentage={Math.floor(similarity * 100)}
                 />
               </Link>
-            ))} */}
-            {users?.map(
-              ({
-                userId,
-                data: {
-                  authResponse: { name },
-                },
-              }) => (
-                <Link key={userId} href={`/profile/${userId}`}>
-                  <UserCard name={name} percentage={50} />
-                </Link>
-              ),
-            )}
+            ))}
           </styles.mateRecommendation>
           <CircularButton
             direction="right"