qp-official-org · Baetato · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024 · Jan 10, 2024
diff --git a/lib/api/user.service.js b/lib/api/user.service.js
@@ -0,0 +1,42 @@
+import axios from 'axios';
+
+/**
+ * 기본적인 HttpClient 객체 구조
+ * GET, POST, PUT, DELETE 메서드 제공
+ *
+ * @example
+ * const apiClient = new HttpClient('https://your-api-url.com');
+ *
+ * // GET 요청 예시
+ * apiClient.get('/endpoint')
+ *   .then(response => console.log(response.data))
+ *   .catch(error => console.error(error));
+ *
+ * // POST 요청 예시
+ * apiClient.post('/endpoint', { data: 'yourData' })
+ *   .then(response => console.log(response.data))
+ *   .catch(error => console.error(error));
+ */
+// class HttpClient {
+//     constructor(baseURL) {
+//         this.client = axios.create({
+//             baseURL: baseURL
+//         });
+//     }
+
+//     get(url, config = {}) {
+//         return this.client.get(url, config);
+//     }
+
+//     post(url, data, config = {}) {
+//         return this.client.post(url, data, config);
+//     }
+
+//     put(url, data, config = {}) {
+//         return this.client.put(url, data, config);
+//     }
+
+//     delete(url, config = {}) {
+//         return this.client.delete(url, config);
+//     }
+// }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,11 @@
     "gh-pages": "^6.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "^5.0.1",
+    "recoil": "^0.7.7",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -1,24 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!-- <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
-    <!--
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -27,12 +25,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body style = "margin : 0px"> 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body style="margin : 0px">
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -42,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,42 +1,60 @@
 // @ts-nocheck
 
-import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Main from "src/Main";
-import Qdetail from "src/Qdetail";
-import Login1 from "src/Login1";
-import Certify from "src/Certify";
-import Nickname from "src/Nickname";
-import Profile from "src/Profile";
-import Qregister from "./Qregister";
-
+import React from 'react';
+import { useState } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { SearchContentProvider } from './Context';
+import Main from 'src/Main';
+import Qdetail from 'src/Qdetail';
+import Login1 from 'src/Login1';
+import Certify from 'src/Certify';
+import Nickname from 'src/Nickname';
+import Profile from 'src/Profile';
+import Qregister from './Qregister';
+import Myprofile from './Myprofile';
+import MainPage from './MainPage';
+import Header from './Header';
+import SearchPage from './SearchPage';
+import SearchQues from './searchQues';
+import Auth from "src/Auth";
 function App() {
   return (
-    <div>
-      <BrowserRouter basename={process.env.PUBLIC_URL}>
-        <Routes>
-          <Route path="/" element={<Login1 />} />
-          <Route path="/detail" element={<Qdetail />} />
-          <Route path="/certify" element={<Certify />} />
-          <Route path="/nickname" element={<Nickname />} />
-          <Route path="/setProfile" element={<Profile />} />
-          <Route path="/mainpage" element={<Main />} />
-          <Route path="/register" element={<Qregister />} />
-        </Routes>
-      </BrowserRouter>
-    </div>
+    <>
+      <SearchContentProvider>
+        <div>
+          <BrowserRouter basename={process.env.PUBLIC_URL}>
+            <Routes>
+              <Route path="/" element={<Login1 />} />
+              <Route path="/detail/:questionId" element={<Qdetail />} />
+              <Route path="/certify" element={<Certify />} />
+              <Route path="/nickname" element={<Nickname />} />
+              <Route path="/setProfile" element={<Profile />} />
+              <Route path="/mainpage" element={<MainPage />} />
+              {/*<Route path="/mainpage2" element={<MainPage2 />} />*/}
+              <Route path="/register" element={<Qregister />} />
+              <Route path="/myprofile" element={<Myprofile />} />
+              <Route path="/search" element={<SearchPage />} />
+              <Route path="/searchq" element={<SearchQues />} />
+              <Route path="/auth/kakao/login" element={<Auth />} />
+              {/* 정의되지 않은 경로에 접근시 해당 페이지로 이동*/}
+              <Route path="*" element={<Nickname />} />
+            </Routes>
+          </BrowserRouter>
+        </div>
+      </SearchContentProvider>
+    </>
   );
 }
 
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
     navigator.serviceWorker
-      .register("/service-worker.js")
+      .register('/service-worker.js', { type: 'text/javascript' })
       .then((registration) => {
-        console.log("SW registered: ", registration);
+        console.log('SW registered: ', registration);
       })
       .catch((registrationError) => {
-        console.log("SW registration failed: ", registrationError);
+        console.log('SW registration failed: ', registrationError);
       });
   });
 }

diff --git a/src/Auth.jsx b/src/Auth.jsx
@@ -0,0 +1,109 @@
+//@ts-nocheck
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+
+function Auth() {
+    const navigate = useNavigate();
+    const [code, setCode] = useState({})
+
+    // useEffect(() => {
+    //     // Query String Parsing
+    //     let href = window.location.href;
+    //     // Parsing Query String
+    //     let queryString = href.substring(href.indexOf("?") + 1);
+    //     // Parsing Query String to Object
+    //     let queryObj = {};
+
+    //     // Split by "&"
+    //     queryString.split("&").forEach((value) => {
+    //         let key = value.split("=")[0];
+    //         let val = value.split("=")[1];
+    //         queryObj[key] = val;
+    //     });
+
+    //     let kakaoCode = queryObj["code"];
+
+    //     let data = {
+    //         "grant_type" : "authorization_code",
+    //         "client_id" : "1d5868c6919c5a981e66913f02262514",
+    //         "redirect_uri" : "http://localhost:3000/auth/kakao/login",
+    //         "code" : kakaoCode,
+    //     };
+
+    //     console.log("1",data);
+    //     // 쿼리스트링으로 데이터 넘기기 시도
+    //     axios.post(`https://kauth.kakao.com/oauth/token`, querystring.stringify(data),{
+    //         headers : {
+    //             "Content-type" : "application/x-www-form-urlencoded"
+    //         }
+    //     })
+    //     // .then(console.log("3")) 테스트
+    //     .then((res) => {
+    //         console.log(res.data);
+    // 		// 여기에 회원가입 요청 API 호출!
+    //         axios.get(`http://52.78.248.199:8080/users/sign_up?accessToken=${res.data.access_token}`);
+    //         setCode(res.data);
+    //     }).catch((err) => {
+    //         console.log(err);
+    //     });
+    // }, []);
+    // return (
+    //     <div>
+    //         <h1>AuthPage</h1>
+    //         {JSON.stringify(code)}
+    //     </div>
+    // );
+    // }
+    const signUp = async () => {
+        const location = window.location;
+
+        const params = new URLSearchParams(location.search);
+
+        let kakaoCode = params.get("code");
+
+        let data = {
+            "grant_type": "authorization_code",
+            "client_id": "9c0435350e0714d02ef07e6bccb168ab",
+            code: kakaoCode,
+        };
+
+        let response = await axios.post("https://kauth.kakao.com/oauth/token", data, {
+            headers: {
+                "Content-type": "application/x-www-form-urlencoded"
+            }
+        });
+
+        let ret = await axios.get(`http://52.78.248.199:8080/users/sign_up?accessToken=${response.data.access_token}`);
+        console.log(ret);
+        console.log(ret.data.result.accessToken);
+        let { isSuccess, result } = ret.data;
+        let { isNew } = result;
+        console.log(ret)
+        if (isSuccess) {
+            if (isNew) {
+                localStorage.setItem('accesstoken', ret.data.result.accessToken);
+                localStorage.setItem('userId', ret.data.result.userId);
+                // 프로필 수정 페이지로 이동
+                navigate("/nickname");
+            }
+            // 여기에 userId, accessToken, refreshToken을 저장하는 코드를 작성해야 함 (recoil 사용하는 것으로 알고있음)
+            // dispatch({type: INIT_USER, ...result});
+            localStorage.setItem('accesstoken', ret.data.result.accessToken);
+            localStorage.setItem('userId', ret.data.result.userId);
+            navigate("/mainpage");
+        } else {
+            console.log("Login Failed");
+        }
+        // localStorage.setItem('accesstoken', ret.data.result.accessToken);
+        // localStorage.setItem('userId', ret.data.result.userId);
+        // navigate("/mainpage");
+    }
+
+    useEffect(() => {
+        signUp()
+    }, []);
+};
+
+export default Auth;