React 임경민 미션 6

.env.example

@@ -0,0 +1 @@
+VITE_API_URL=https://api.example.com

.gitignore

@@ -12,6 +12,10 @@ dist
 dist-ssr
 *.local
 
+# env
+.env
+!.env.example
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

README.md

@@ -29,6 +29,11 @@
 
 10. React 기반 중고 마켓 페이지 구현
 
+### 09.28
+
+11. 제품 등록 페이지 구현
+12. express, mongo 기반 백엔드와 연결 구현
+
 ## 기술 스택
 
 ### 지금까지 사용 된 스택

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/App.jsx

@@ -1,19 +1,21 @@
-import { BestItemsSection } from './pages/ItemPage/BestItemsSection';
-import { SalesItemsSection } from './pages/ItemPage/SalesItemsSection';
-import { ItemProvider } from './providers/ItemProvider';
+import { Routes, Route } from 'react-router';
 import { Header } from '@/components/Header';
 import { Footer } from '@/components/Footer';
+import { LandingPage } from './pages/LandingPage';
+import { ItemsPage } from './pages/ItemsPage';
+import { RegistItemPage } from './pages/RegistItemPage';
 
 function App() {
   return (
-    <ItemProvider>
+    <>
       <Header />
-      <main className="main item-main">
-        <BestItemsSection />
-        <SalesItemsSection />
-      </main>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/items" element={<ItemsPage />} />
+        <Route path="/registration" element={<RegistItemPage />} />
+      </Routes>
       <Footer />
-    </ItemProvider>
+    </>
   );
 }
 

src/api/ProductService.js

@@ -1,15 +1,41 @@
-const API_URL = "https://panda-market-api.vercel.app/products";
+const API_URL = import.meta.env.VITE_API_URL + '/products';
 
 const DEFULT_PAGE = 1;
 const DEFULT_PAGE_SIZE = 1;
 const DEFULR_ORDERBY = 'recent';
 
-export const getProductList = async function({page = DEFULT_PAGE, pageSize = DEFULT_PAGE_SIZE, orderBy = DEFULR_ORDERBY, keyword = ""}) {
+export const getProductList = async function ({
+  page = DEFULT_PAGE,
+  pageSize = DEFULT_PAGE_SIZE,
+  orderBy = DEFULR_ORDERBY,
+  keyword = '',
+}) {
+  console.log(API_URL);
   const url = `${API_URL}?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
   const response = await fetch(url);
   if (!response.ok) {
-    throw new Error(`리퀘스트 에러: ${response.status}, 에러 메시지: ${response.statusText}`);
+    throw new Error(
+      `리퀘스트 에러: ${response.status}, 에러 메시지: ${response.statusText}`,
+    );
   }
   const data = await response.json();
   return data;
-}
+};
+
+export const createProduct = async function (contents) {
+  const url = `${API_URL}`;
+  const response = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(contents),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (!response.ok) {
+    throw new Error(
+      `리퀘스트 에러: ${response.status}, 에러 메시지: ${response.statusText}`,
+    );
+  }
+  const data = await response.json();
+  return data;
+};

src/components/Footer/Footer.css

@@ -0,0 +1,74 @@
+#footer {
+  justify-content: center;
+  align-items: flex-start;
+  background: var(--secondary-900);
+  text-align: center;
+}
+
+#footer-box {
+  display: flex;
+  width: 120rem;
+  height: 10rem;
+  padding: 2rem 12.5rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  text-align: center;
+}
+
+#footer-box > ul {
+  display: flex;
+  align-items: flex-start;
+}
+
+#footer-box > ul > li {
+  display: inline-block;
+}
+
+#copyright {
+  color: var(--secondary-400);
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+#cs-list {
+  gap: 1.875rem;
+}
+
+#cs-list a {
+  color: var(--secondary-200);
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+#sns-list {
+  gap: 0.75rem;
+}
+
+#sns-list img {
+  width: 1.25rem;
+}
+
+@media screen and (max-width: 120rem) {
+  #footer-box {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 74.9rem) {
+  #footer-box {
+    padding: 2rem 1.5rem;
+  }
+}
+
+@media screen and (max-width: 46.4rem) {
+  #footer-box {
+    padding: 2rem 1rem;
+    flex-wrap: wrap-reverse;
+  }
+
+  #copyright {
+    width: 100%;
+    margin: 1.5rem 0 2rem;
+    text-align: start;
+  }
+}

src/components/Footer/Footer.jsx

@@ -2,6 +2,7 @@ import facebookIcon from '@/assets/img/ic_facebook.png';
 import twitterIcon from '@/assets/img/ic_twitter.png';
 import youtubeIcon from '@/assets/img/ic_youtube.png';
 import instagramIcon from '@/assets/img/ic_instagram.png';
+import './Footer.css';
 
 export function Footer() {
   return (

src/components/Header/Header.css

@@ -0,0 +1,83 @@
+#header {
+  position: fixed;
+  height: 4.4rem;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+#title {
+  width: 9.6rem;
+  height: 3.2rem;
+}
+
+.logo {
+  width: 100%;
+  height: 100%;
+}
+
+#nav {
+  display: flex;
+  width: 120rem;
+  height: 4.4rem;
+  padding: 0px 25rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#nav-left {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.nav-menu {
+  padding: 0 0.94rem;
+  color: var(--secondary-600);
+  text-align: center;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.625rem;
+}
+
+.intro-nav-btn {
+  width: 8rem;
+}
+
+.nav-menu-active {
+  color: var(--primary-100);
+}
+
+@media screen and (max-width: 120rem) {
+  #nav {
+    width: 100%;
+    padding: 0 12.5rem;
+  }
+}
+
+@media screen and (max-width: 74.9rem) {
+  #nav {
+    padding: 0 1.5rem;
+  }
+}
+
+@media screen and (max-width: 46.4rem) {
+  #nav {
+    padding: 0 1rem;
+  }
+
+  #title {
+    width: 5rem;
+    height: auto;
+  }
+
+  #nav-left {
+    gap: 0.5rem;
+  }
+
+  .nav-menu {
+    padding: 0 0.5rem 0 0;
+    font-size: 1rem;
+  }
+}