API 수정

devTible · Jul 30, 2024 · 2744bf0 · 2744bf0
1 parent 853b322
commit 2744bf0
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 189 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,33 +1,47 @@
-import React, { useState, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import router from './routes/Route';
 import GlobalStyles from './styles/GlobalStyle';
 import { ThemeProvider } from 'styled-components';
 import theme from './styles/ThemeStyle';
-<<<<<<< HEAD
-import Header from './components/Header';
-import Footer from './components/Footer';
-function App() {
-  return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
-
-      <RouterProvider router={router} />
-=======
+import User from './pages/MyPage/User';
 import Login from './apis/auth/Login';
-import { UserProvider } from './apis/UserContext';
+import MyPage from './pages/MyPage/MyPage';
+import { UserProvider, UserContext } from './apis/UserContext';
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <UserProvider>
-        <Login />
+    <UserProvider>
+      <ThemeProvider theme={theme}>
+        <Main />
         <GlobalStyles />
         <RouterProvider router={router} />
-      </UserProvider>
->>>>>>> f92c3a333f9951f2d753eb2cda5ce545ce479d76
-    </ThemeProvider>
+      </ThemeProvider>
+    </UserProvider>
   );
 }
 
+const Main = () => {
+  const { userId } = useContext(UserContext);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (userId) {
+      setReady(true);
+    }
+  }, [userId]);
+
+  return (
+    <>
+      <Login />
+      {ready && (
+        <>
+          <User />
+          <MyPage />
+        </>
+      )}
+    </>
+  );
+};
+
 export default App;
diff --git a/src/apis/MyComponent.jsx b/src/apis/MyComponent.jsx
@@ -1,64 +1,64 @@
-import React from 'react';
-import UseApiRequest from './useapirequest';
+// import React from 'react';
+// import UseApiRequest from './useapirequest';
 
-const MyComponent = () => {
-  const {
-    data: loginData,
-    error: loginError,
-    loading: loginLoading,
-  } = UseApiRequest(
-    'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/login/github',
-    'GET',
-  );
+// const MyComponent = () => {
+//   const {
+//     data: loginData,
+//     error: loginError,
+//     loading: loginLoading,
+//   } = UseApiRequest(
+//     'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/login/github',
+//     'GET',
+//   );
 
-  const {
-    data: commitTestData,
-    error: commitTestError,
-    loading: commitTestLoading,
-  } = UseApiRequest(
-    'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/commit/test/fetch',
-    'POST',
-  );
+//   const {
+//     data: commitTestData,
+//     error: commitTestError,
+//     loading: commitTestLoading,
+//   } = UseApiRequest(
+//     'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/commit/test/fetch',
+//     'POST',
+//   );
 
-  const {
-    data: commitData,
-    error: commitError,
-    loading: commitLoading,
-  } = UseApiRequest(
-    'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/commit/fetch',
-    'POST',
-  );
+//   const {
+//     data: commitData,
+//     error: commitError,
+//     loading: commitLoading,
+//   } = UseApiRequest(
+//     'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/commit/fetch',
+//     'POST',
+//   );
 
-  const {
-    data: userData,
-    error: userError,
-    loading: userLoading,
-  } = UseApiRequest(
-    'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/user/search?githubId=woneeeee',
-    'GET',
-  );
+//   const {
+//     data: userData,
+//     error: userError,
+//     loading: userLoading,
+//   } = UseApiRequest(
+//     'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/user/search?githubId=woneeeee',
+//     'GET',
+//   );
 
-  return (
-    <div>
-      {loginLoading && <p>Loading login...</p>}
-      {loginError && <p>Login error: {loginError.message}</p>}
-      {loginData && <p>Login data: {JSON.stringify(loginData)}</p>}
+//   return (
+//     <div>
+//       {loginLoading && <p>Loading login...</p>}
+//       {loginError && <p>Login error: {loginError.message}</p>}
+//       {loginData && <p>Login data: {JSON.stringify(loginData)}</p>}
 
-      {commitTestLoading && <p>Loading commit test data...</p>}
-      {commitTestError && <p>Commit test error: {commitTestError.message}</p>}
-      {commitTestData && (
-        <p>Commit test data: {JSON.stringify(commitTestData)}</p>
-      )}
+//       {commitTestLoading && <p>Loading commit test data...</p>}
+//       {commitTestError && <p>Commit test error: {commitTestError.message}</p>}
+//       {commitTestData && (
+//         <p>Commit test data: {JSON.stringify(commitTestData)}</p>
+//       )}
 
-      {commitLoading && <p>Loading commit data...</p>}
-      {commitError && <p>Commit error: {commitError.message}</p>}
-      {commitData && <p>Commit data: {JSON.stringify(commitData)}</p>}
+//       {commitLoading && <p>Loading commit data...</p>}
+//       {commitError && <p>Commit error: {commitError.message}</p>}
+//       {commitData && <p>Commit data: {JSON.stringify(commitData)}</p>}
 
-      {userLoading && <p>Loading user data...</p>}
-      {userError && <p>User error: {userError.message}</p>}
-      {userData && <p>User data: {JSON.stringify(userData)}</p>}
-    </div>
-  );
-};
+//       {userLoading && <p>Loading user data...</p>}
+//       {userError && <p>User error: {userError.message}</p>}
+//       {userData && <p>User data: {JSON.stringify(userData)}</p>}
+//     </div>
+//   );
+// };
 
-export default MyComponent;
+// export default MyComponent;
diff --git a/src/apis/UseApiRequest.jsx b/src/apis/UseApiRequest.jsx
@@ -1,33 +1,33 @@
-import { useState, useEffect } from 'react';
-import axios from 'axios';
+// import { useState, useEffect } from 'react';
+// import axios from 'axios';
 
-const UseApiRequest = (url, method, body = null) => {
-  const [data, setData] = useState(null);
-  const [error, setError] = useState(null);
-  const [loading, setLoading] = useState(false);
+// const UseApiRequest = (url, method, body = null) => {
+//   const [data, setData] = useState(null);
+//   const [error, setError] = useState(null);
+//   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const response = await axios({
-          method,
-          url,
-          data: body,
-        });
-        setData(response.data);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    };
+//   useEffect(() => {
+//     const fetchData = async () => {
+//       setLoading(true);
+//       setError(null);
+//       try {
+//         const response = await axios({
+//           method,
+//           url,
+//           data: body,
+//         });
+//         setData(response.data);
+//       } catch (err) {
+//         setError(err);
+//       } finally {
+//         setLoading(false);
+//       }
+//     };
 
-    fetchData();
-  }, [url, method, body]);
+//     fetchData();
+//   }, [url, method, body]);
 
-  return { data, error, loading };
-};
+//   return { data, error, loading };
+// };
 
-export default UseApiRequest;
+// export default UseApiRequest;
diff --git a/src/apis/UserContext.jsx b/src/apis/UserContext.jsx
@@ -3,15 +3,16 @@ import React, { createContext, useState } from 'react';
 export const UserContext = createContext();
 
 export const UserProvider = ({ children }) => {
-  const [userId, setUserId] = useState(null);
+  const [userId, setUserId] = useState('');
   const [userData, setUserData] = useState(null);
   const [allUserData, setAllUserData] = useState(null);
-  const [userExp, setUserExp] = useState(null);
-  const [userTierName, setUserTierName] = useState(null);
-  const [userConsecutiveCommitDays, setUserConsecutiveCommitDays] =
-    useState(null);
-  const [userTotalCommitCount, setUserTotalCommitCount] = useState(null);
-  const [userTodayCommitCount, setUserTodayCommitCount] = useState(null);
+  const [userName, setUserName] = useState(null);
+  const [userExp, setUserExp] = useState(0);
+  const [userTierName, setUserTierName] = useState('');
+  const [userCharacterUrl, setUserCharacterUrl] = useState('');
+  const [userConsecutiveCommitDays, setUserConsecutiveCommitDays] = useState(0);
+  const [userTotalCommitCount, setUserTotalCommitCount] = useState(0);
+  const [userTodayCommitCount, setUserTodayCommitCount] = useState(0);
   const [error, setError] = useState(null);
 
   return (
@@ -23,10 +24,14 @@ export const UserProvider = ({ children }) => {
         setUserData,
         allUserData,
         setAllUserData,
+        userName,
+        setUserName,
         userExp,
         setUserExp,
         userTierName,
         setUserTierName,
+        userCharacterUrl,
+        setUserCharacterUrl,
         userConsecutiveCommitDays,
         setUserConsecutiveCommitDays,
         userTotalCommitCount,

diff --git a/src/apis/auth/Login.jsx b/src/apis/auth/Login.jsx
@@ -3,7 +3,8 @@ import axios from 'axios';
 import { UserContext } from '../UserContext';
 
 const Login = () => {
-  const { setUserData, setError, setAllUserData } = useContext(UserContext);
+  const { setUserData, setError, setAllUserData, setUserId } =
+    useContext(UserContext);
 
   useEffect(() => {
     const accessToken = import.meta.env.VITE_REACT_APP_ACCESS_TOKEN;
@@ -26,14 +27,13 @@ const Login = () => {
     console.log(headers);
 
     axios
-      .get(
-        'http://ec2-43-201-143-81.ap-northeast-2.compute.amazonaws.com:8080/login/test',
-        { headers },
-      )
+      .get('api/login/test', { headers })
       .then(response => {
+        console.log('Login response:', response.data);
         if (response.data.isSuccess) {
           // isSuccess로 응답 상태 확인
           setUserData(response.data.result); // 데이터 저장
+          setUserId(response.data.result.userId);
         } else {
           setError(response.data.message); // 오류 메시지 설정
         }
@@ -42,7 +42,7 @@ const Login = () => {
         console.error('Error fetching data:', err);
         setError('An error occurred while fetching the data');
       });
-  }, [setUserData, setError, setAllUserData]);
+  }, [setUserData, setError, setAllUserData, setUserId]);
 
   return null;
 };

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -76,7 +76,7 @@ const StyledLogOutButton = styled.h1`
   font-family: ${({ theme }) => theme.FONT_FAMILY.pretendard[100]};
   font-size: ${({ theme }) => theme.FONT_SIZE.small};
   color: ${({ theme }) => theme.COLORS.gray[200]};
-  margin-left: 74%;
+  margin-left: 68%;
   margin-top: 10px;
   cursor: pointer;
   &:hover {