qp-official-org · taejun-J · Jan 9, 2024 · Jan 9, 2024 · Jan 24, 2024 · Jan 29, 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,10 @@
     "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-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
@@ -29,7 +29,7 @@
     -->
     <title>React App</title>
   </head>
-  <body style = "margin : 0px"> 
+  <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,44 +1,59 @@
 // @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 MainPage2 from './MainPage2';
+import Header from './Header';
+import SearchPage from './SearchPage';
+import SearchQues from './searchQues';
 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" 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 />} />
+            </Routes>
+          </BrowserRouter>
+        </div>
+      </SearchContentProvider>
+    </>
   );
 }
 
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker
-      .register("/service-worker.js")
-      .then((registration) => {
-        console.log("SW registered: ", registration);
-      })
-      .catch((registrationError) => {
-        console.log("SW registration failed: ", registrationError);
-      });
-  });
-}
+// if ('serviceWorker' in navigator) {
+//   window.addEventListener('load', () => {
+//     navigator.serviceWorker
+//       .register('/service-worker.js', { type: 'text/javascript' })
+//       .then((registration) => {
+//         console.log('SW registered: ', registration);
+//       })
+//       .catch((registrationError) => {
+//         console.log('SW registration failed: ', registrationError);
+//       });
+//   });
+// }
 
-export default App;
+export default App;
diff --git a/src/Certify.jsx b/src/Certify.jsx
@@ -1,65 +1,100 @@
 // 메일 인증 컴포넌트
 //@ts-nocheck
-import React from "react";
-import { useState } from "react";
-import { styles } from "src/components/logindetail/style";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import { useState } from 'react';
+import { styles } from 'src/components/logindetail/style';
+import { useNavigate } from 'react-router-dom';
 
 // 로그인버튼 기능, 이전페이지 기능
 
 function Certify() {
-    const [CertifyNum, setCertifyNum] = useState("");
-    const [isValidNum, setIsValidNum] = useState(false);
-    const navigate = useNavigate();
+  const [CertifyNum, setCertifyNum] = useState('');
+  const [isValidNum, setIsValidNum] = useState(false);
+  const navigate = useNavigate();
 
-    const handleNumChange = (event) => {
-        const newNum = event.target.value;
-        setCertifyNum(newNum);
-        //여기에서 닉네임 유효성 체크 후, isValidNum 상태 업데이트
-        const isValid = 
-            newNum.length == 8 && /^[a-zA-Z0-9!@#$%^&*()]*$/g.test(newNum);
+  const handleNumChange = (event) => {
+    const newNum = event.target.value;
+    setCertifyNum(newNum);
+    //여기에서 닉네임 유효성 체크 후, isValidNum 상태 업데이트
+    const isValid =
+      newNum.length == 8 && /^[a-zA-Z0-9!@#$%^&*()]*$/g.test(newNum);
 
-        setIsValidNum(isValid);
-    };
+    setIsValidNum(isValid);
+  };
 
-    const handleNextButtonClick = () => {
-        if(isValidNum){
-        //유효한 경우 다음 페이지로 이동하거나 다른 동작 수행
-            navigate('/Nickname');
-        }else{
-            alert("인증번호를 다시 입력해주세요.") //알림창 푸시
-        }
+  const handleNextButtonClick = () => {
+    if (isValidNum) {
+      //유효한 경우 다음 페이지로 이동하거나 다른 동작 수행
+      navigate('/Nickname');
+    } else {
+      alert('인증번호를 다시 입력해주세요.'); //알림창 푸시
     }
-    const BackBtn = () => {
-        navigate('/'); // 바로 이전 페이지로 이동
-        };
-
-    return (
-        // 주황색 화면
-        <div style={styles.container}> 
-            {/* 흰 박스 */}
-            <div style={styles.whitebox}>
-                <div>
-                    <div>
-                    <button onClick={BackBtn} style={styles.previous}>X</button>
-                    </div>
-                    <div style={styles.buttonBox}>
-                        <h1 style = {styles.pageTitle}>인증번호 입력</h1>
-                        <input placeholder="큐피 메일([email protected])로 받은 인증번호를 입력해주세요." style = {styles.bar} 
-                        id="CertifyNum" type="text" value={CertifyNum} onChange={handleNumChange}></input>
-                            <div class="help">
-                                {isValidNum ? (
-                                    <span class="success" style = {{color: "green", fontFamily: "Pretendard", fontSize: "30px", fontStyle: "normal", fontWeight: 400, lineHeight: "normal"}}></span> //이 부분은 임의로 작성해둔 것 (메일로 전송받은 인증번호를 어떻게 확인할지에 대해 논의 필요<)
-                                ) : (
-                                    <span class="fail" style = {{position:"absolute", color:'#F00', fontFamily: "Pretendard", fontSize: "30px", fontStyle: "normal", fontWeight: 400, lineHeight: "normal", top:"509px", left:"24%"}}>틀린 인증번호 입니다.</span>
-                                )}
-                            </div>
-                        <button style = {styles.loginButton} onClick={handleNextButtonClick}>로그인</button>
-                    </div>
-                </div>
+  };
+  const BackBtn = () => {
+    navigate('/'); // 바로 이전 페이지로 이동
+  };
+
+  return (
+    // 주황색 화면
+    <div style={styles.container}>
+      {/* 흰 박스 */}
+      <div style={styles.whitebox}>
+        <div>
+          <div>
+            <button onClick={BackBtn} style={styles.previous}>
+              X
+            </button>
+          </div>
+          <div style={styles.buttonBox}>
+            <h1 style={styles.pageTitle}>인증번호 입력</h1>
+            <input
+              placeholder="큐피 메일([email protected])로 받은 인증번호를 입력해주세요."
+              style={styles.bar}
+              id="CertifyNum"
+              type="text"
+              value={CertifyNum}
+              onChange={handleNumChange}
+            ></input>
+            <div class="help">
+              {isValidNum ? (
+                <span
+                  class="success"
+                  style={{
+                    color: 'green',
+                    fontFamily: 'Pretendard',
+                    fontSize: '30px',
+                    fontStyle: 'normal',
+                    fontWeight: 400,
+                    lineHeight: 'normal',
+                  }}
+                ></span> //이 부분은 임의로 작성해둔 것 (메일로 전송받은 인증번호를 어떻게 확인할지에 대해 논의 필요<)
+              ) : (
+                <span
+                  class="fail"
+                  style={{
+                    position: 'absolute',
+                    color: '#F00',
+                    fontFamily: 'Pretendard',
+                    fontSize: '30px',
+                    fontStyle: 'normal',
+                    fontWeight: 400,
+                    lineHeight: 'normal',
+                    top: '60%',
+                    left: '20%',
+                  }}
+                >
+                  틀린 인증번호 입니다.
+                </span>
+              )}
             </div>
+            <button style={styles.loginButton} onClick={handleNextButtonClick}>
+              로그인
+            </button>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
-export default Certify;
+export default Certify;