Merge pull request #99 from yousuk88/react-정유석-sprint6

.gitignore

@@ -21,3 +21,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# reference files
+src/pages/MeetingRoomFive.js
+src/pages/Registration(TaejinLiveShare).js
+src/pages/ApiComparisonTest.js

package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,13 +1,13 @@
 @font-face {
-  font-family: 'Pretendard-Regular';
-  src: url('./assets/font/Pretendard-Regular.woff') format('woff');
+  font-family: "Pretendard-Regular";
+  src: url("/public/static/font/Pretendard-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'rokaf';
-  src: url('./assets/font/ROKAF_Sans_Medium.ttf') format('truetype');
+  font-family: "rokaf";
+  src: url("/public/static/font/ROKAF_Sans_Medium.ttf") format("truetype");
 }
 
 * {
@@ -24,4 +24,14 @@ html {
 a {
   text-decoration: none;
   color: inherit;
-}
+}
+
+.coming_soon {
+  height: calc(100vh - 230px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 5rem;
+  font-weight: 700;
+  color: #3692ff;
+}

src/App.js

@@ -1,15 +1,47 @@
-import Nav from './components/Nav/Nav'
-import Main from './components/Main/Main'
-import Footer from './components/Footer/Footer'
-import './App.css'
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+import Nav from './components/Nav/Nav';
+import Footer from './components/Footer/Footer';
+import Main from './pages/Main';
+import Login from './pages/Login';
+import Signup from './pages/Signup';
+import Items from './pages/Items';
+import Community from './pages/Community';
+import Faq from './pages/Faq';
+import Privacy from './pages/Privacy';
+import Registration from './pages/Registration';
+// import ApiComparisonTest from './pages/ApiComparisonTest';
+import './App.css';
+
+function AppContent() {
+  const location = useLocation();
+
+  // Nav와 Footer를 제외할 경로 목록
+  const hideHeaderFooterPaths = ['/login', '/signup'];
+
+  return (
+    <>
+      {!hideHeaderFooterPaths.includes(location.pathname) && <Nav />}
+      <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/items" element={<Items />} />
+        <Route path="/community" element={<Community />} />
+        <Route path="/faq" element={<Faq />} />
+        <Route path="/privacy" element={<Privacy />} />
+        <Route path="/registration" element={<Registration />} />
+        {/* <Route path="/test" element={<ApiComparisonTest />} /> */}
+      </Routes>
+      {!hideHeaderFooterPaths.includes(location.pathname) && <Footer />}
+    </>
+  );
+}
 
 function App() {
   return (
-    <div>
-      <Nav />
-      <Main />
-      <Footer />
-    </div>
+    <Router>
+      <AppContent />
+    </Router>
   );
 }
 

src/apis/ProductService(MongoDB).js

@@ -0,0 +1,42 @@
+const BASE_URL = 'http://localhost:8000/api/products';
+
+export async function getProductList(offset, limit, orderBy, keyword) {
+  const params = new URLSearchParams({
+    offset,
+    limit,
+    orderBy,
+    keyword,
+  });
+
+  const url = `${BASE_URL}?${params}`;
+
+  try {
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      throw new Error(`지정 에러: ${response.status} - ${response.statusText}`); // 내가 지정한 오류 핸들링
+    }
+
+    const data = await response.json();
+    return data;
+
+  } catch (error) {
+    console.error("기타 에러:", error); // 서버 등 예측하지 못한 에러 위해
+  }
+}
+
+export async function registerProduct(productData) {
+  try {
+    const response = await fetch(BASE_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(productData),
+    });
+    if (!response.ok) {
+      throw new Error(`등록 실패: ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    console.error("상품 등록 중 오류:", error);
+  }
+}

src/apis/ProductService.js

@@ -18,7 +18,7 @@ export async function getProductList(page, pageSize, orderBy, keyword) {
     }
 
     const data = await response.json();
-    console.log(data);
+    // console.log(data);
     return data;
 
   } catch (error) {