codeit-bootcamp-frontend · dongqui · Apr 18, 2025 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:image" content="./resource/img/preview.png" />
+    <meta property="og:title" content="판다마켓" />
+    <meta name="og:description" content="일상의 모든 물건을 거래해보세요" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,16 +6,18 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^7.5.0",
+    "sass": "^1.86.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "echo \"Add your test runner here\""
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "vite": "^6.2.6"
   }
 }
diff --git a/public/index.html b/public/index.html
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,21 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import "./style/global.scss";
+import Login from "./pages/Sign/Login";
+import Signup from "./pages/Sign/Signup";
+import Main from "./pages/main/Main";
+import Items from "./pages/Items/Items";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Main />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/items" element={<Items />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/api/api.jsx b/src/api/api.jsx
@@ -0,0 +1,32 @@
+const BASE_URL = "https://panda-market-api.vercel.app";
+
+export async function getItems({
+  search,
+  order = "recent",
+  page = 1,
+  pageSize = 10,
+}) {
+  const query = `page=${page}&pageSize=${pageSize}&orderBy=${order}&keyword=${search}`;
+
+  const res = await fetch(`${BASE_URL}/products?${query}`);
+
+  if (!res.ok) {
+    throw new Error(res.status);
+  }
+
+  const body = await res.json();
+
+  return body;
+}
+
+export async function getBestItems() {
+  const query = `pageSize=4&orderBy=favorite`;
+  const res = await fetch(`${BASE_URL}/products?${query}`);
+
+  if (!res.ok) {
+    throw new Error(res.status);
+  }
+
+  const body = await res.json();
+  return body;
+}
diff --git a/src/components/BigLogo/BigLogo.jsx b/src/components/BigLogo/BigLogo.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import logo from "../../images/login_logo.png";
+import "./BigLogo.scss";
+
+function BigLogo() {
+  return (
+    <div className="logo-area">
+      <Link to={"/"}>
+        <img src={logo} alt="판다마켓 로고" />
+      </Link>
+    </div>
+  );
+}
+
+export default BigLogo;
diff --git a/src/components/BigLogo/BigLogo.scss b/src/components/BigLogo/BigLogo.scss
@@ -0,0 +1,7 @@
+@charset 'uft-8';
+
+@media (width < 768px) {
+  .logo-area img {
+    width: 198px;
+  }
+}
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import "./Card.scss";
+
+function Card({ keyword, cardImg, reverse = false, children }) {
+  return (
+    <div className={`cont-box ${reverse ? "ty-reverse" : ""}`}>
+      <div className="box-img">
+        <img src={cardImg} alt="" />
+      </div>
+      <div className="box-text">
+        <span className="keyword">{keyword}</span>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Card;
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -0,0 +1,136 @@
+.cont-box {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+  margin: 0 auto;
+  width: 988px;
+  height: 444px;
+  border-radius: 12px;
+  background: #fcfcfc;
+
+  &.ty-reverse {
+    justify-content: flex-end;
+
+    .box-text {
+      order: 0;
+      text-align: right;
+    }
+
+    .box-img {
+      order: 1;
+    }
+  }
+
+  .box-img {
+    height: 100%;
+    padding: 0 23px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .box-text {
+    .keyword {
+      display: inline-block;
+      margin-bottom: 12px;
+      font-size: 18px;
+      font-weight: bold;
+      color: #3692ff;
+    }
+
+    .text {
+      margin-bottom: 24px;
+      font-size: 40px;
+      font-weight: bold;
+      color: #374151;
+    }
+
+    .info {
+      font-size: 24px;
+      font-weight: 500;
+      color: #374151;
+    }
+  }
+}
+
+/* tablet */
+@media (width < 1200px) {
+  .cont-box {
+    width: 100%;
+    height: auto;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+
+    &.ty-reverse {
+      justify-content: flex-start;
+      align-items: flex-end;
+
+      .box-text {
+        order: 1;
+        text-align: left;
+      }
+
+      .box-img {
+        order: 0;
+      }
+    }
+
+    .box-img {
+      width: 100%;
+      height: auto;
+      padding: 0;
+      order: 0;
+
+      img {
+        border-radius: 15px;
+      }
+    }
+
+    .box-text {
+      order: 1;
+
+      .keyword {
+        margin-bottom: 16px;
+      }
+
+      .text {
+        margin-bottom: 24px;
+        font-size: 32px;
+      }
+
+      .info {
+        font-size: 18px;
+      }
+    }
+  }
+}
+
+/* mobile */
+@media (width < 768px) {
+  .cont-box {
+    .box-img {
+      img {
+        border-radius: 7px;
+      }
+    }
+
+    .box-text {
+      .keyword {
+        margin-bottom: 8px;
+        font-size: 16px;
+      }
+
+      .text {
+        margin-bottom: 16px;
+        font-size: 24px;
+      }
+
+      .info {
+        font-size: 16px;
+      }
+    }
+  }
+}