diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index 4d29575de..000000000
--- a/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777cc4..000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index aa069f27c..2a9b5f5b9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,43 +1,10 @@
-
+
-
-
-
-
-
-
-
-
- React App
+ 판다마켓
-
-
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a37..000000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a654..000000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index 080d6c77a..000000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "short_name": "React App",
- "name": "Create React App Sample",
- "icons": [
- {
- "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
- },
- {
- "src": "logo192.png",
- "type": "image/png",
- "sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
- }
- ],
- "start_url": ".",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc4d..000000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/App.css b/src/App.css
index 74b5e0534..5902e942c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,8 @@
-.App {
- text-align: center;
+.product-lists {
+ width: 1200px;
+ margin: 70px auto 0;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.all-product-list {
+ padding-top: 40px;
}
diff --git a/src/App.js b/src/App.js
index 378457572..c599b74b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,45 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState, useEffect } from "react";
+import "./App.css";
+import Nav from "./components/Nav";
+import AllProductList from "./components/AllProductList";
+
+async function getData() {
+ const url = "https://panda-market-api.vercel.app/products";
+ const response = await fetch(url);
+ const result = await response.json();
+
+ const data = result.list.map((items) => ({
+ id: items.id,
+ title: items.name,
+ description: items.description,
+ price: items.price,
+ image: items.images,
+ favoriteCount: items.favoriteCount,
+ createAt: items.createAt,
+ }));
+
+ return data;
+}
function App() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ async function fetchData() {
+ const data = await getData();
+ setItems(data);
+ }
+ fetchData();
+ }, []);
+
return (
-
+ <>
+
+
+ ;
+ >
);
}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afeec..000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render();
- const linkElement = screen.getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/assets/images/Img_logo_icon.png b/src/assets/images/Img_logo_icon.png
new file mode 100644
index 000000000..574bf0622
Binary files /dev/null and b/src/assets/images/Img_logo_icon.png differ
diff --git a/src/assets/images/Img_logo_text.png b/src/assets/images/Img_logo_text.png
new file mode 100644
index 000000000..43bf8dba3
Binary files /dev/null and b/src/assets/images/Img_logo_text.png differ
diff --git a/src/assets/images/ic_heart_empty.png b/src/assets/images/ic_heart_empty.png
new file mode 100644
index 000000000..0d2e8e4c2
Binary files /dev/null and b/src/assets/images/ic_heart_empty.png differ
diff --git a/src/assets/images/ic_heart_full.png b/src/assets/images/ic_heart_full.png
new file mode 100644
index 000000000..94a646909
Binary files /dev/null and b/src/assets/images/ic_heart_full.png differ
diff --git a/src/components/AllProductList.css b/src/components/AllProductList.css
new file mode 100644
index 000000000..795137465
--- /dev/null
+++ b/src/components/AllProductList.css
@@ -0,0 +1,56 @@
+.label {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 24px;
+}
+
+.label-title {
+ font-weight: bold;
+ font-size: 20px;
+ line-height: 140%;
+ letter-spacing: 2%;
+ color: var(--gray800);
+}
+
+.search-input {
+ width: 325px;
+ height: 42px;
+ margin-right: 12px;
+ padding-left: 16px;
+ border: 0px;
+ border-radius: 12px;
+ background-color: var(--gray100);
+}
+.search-input::placeholder {
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--gray400);
+}
+
+.product-add-button {
+ width: 133px;
+ height: 42px;
+ margin-right: 12px;
+ border: 0;
+ border-radius: 8px;
+ background-color: var(--blue);
+ font-weight: 600;
+ font-size: 16px;
+ color: var(--white);
+}
+
+.order-dropdown {
+ width: 130px;
+ height: 42px;
+ border: solid 1px var(--gray200);
+ border-radius: 12px;
+}
+
+.items {
+ list-style-type: none;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 24px;
+}
diff --git a/src/components/AllProductList.js b/src/components/AllProductList.js
new file mode 100644
index 000000000..c4f5d220b
--- /dev/null
+++ b/src/components/AllProductList.js
@@ -0,0 +1,37 @@
+import "./AllProductList.css";
+import ProductListItem from "./ProductListItem";
+
+function AllProductList({ items }) {
+ return (
+
+
+
전체 상품
+
+
+
+
+
+
+
+ {items.map((item) => {
+ return (
+ -
+
+
+ );
+ })}
+
+
+ );
+}
+
+export default AllProductList;
diff --git a/src/components/Menu.css b/src/components/Menu.css
new file mode 100644
index 000000000..f937c0e4b
--- /dev/null
+++ b/src/components/Menu.css
@@ -0,0 +1,21 @@
+.Menu-wrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.Menu {
+ flex-grow: 0;
+ flex-shrink: 0;
+ width: 109px;
+ font-weight: bold;
+ font-size: 18px;
+ text-align: center;
+ color: var(--gray600);
+ text-decoration: none;
+ cursor: pointer;
+}
+
+a:active {
+ color: var(--blue);
+}
diff --git a/src/components/Menu.js b/src/components/Menu.js
new file mode 100644
index 000000000..96cb4f73e
--- /dev/null
+++ b/src/components/Menu.js
@@ -0,0 +1,14 @@
+import "./Menu.css";
+
+function Menu({ className, name, href }) {
+ const classNames = `Menu ${className}`;
+ return (
+
+ );
+}
+
+export default Menu;
diff --git a/src/components/Nav.css b/src/components/Nav.css
new file mode 100644
index 000000000..cecc51ca7
--- /dev/null
+++ b/src/components/Nav.css
@@ -0,0 +1,58 @@
+/* PC style (1200px 이상) */
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ height: 70px;
+ padding-left: 200px;
+ padding-right: 200px;
+ border-bottom: solid 1px #dfdfdf;
+ background-color: #ffffff;
+ position: fixed;
+ top: 0;
+ z-index: 1;
+}
+
+.logo-Menu-wrapper {
+ display: flex;
+ justify-content: center;
+ align-content: center;
+}
+
+.logo-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-grow: 0;
+ margin: 0 32px;
+ width: 153px;
+ height: 51px;
+ cursor: pointer;
+}
+
+.logo-icon {
+ width: 40px;
+ height: auto;
+}
+
+.logo-text {
+ width: 103px;
+ height: auto;
+}
+
+.login-link {
+ flex-grow: 0;
+ flex-shrink: 0;
+ width: 88px;
+ height: 42px;
+ padding: 11.5px 23px;
+ border-radius: 8px;
+ background-color: var(--blue);
+ font-size: 16px;
+ font-weight: 600;
+ text-align: center;
+ color: var(--white);
+ text-decoration: none;
+ cursor: pointer;
+}
diff --git a/src/components/Nav.js b/src/components/Nav.js
new file mode 100644
index 000000000..9dfce2bcb
--- /dev/null
+++ b/src/components/Nav.js
@@ -0,0 +1,32 @@
+import "./Nav.css";
+import Menu from "./Menu";
+import logoIcon from "../assets/images/Img_logo_icon.png";
+import logoText from "../assets/images/Img_logo_text.png";
+
+function Nav() {
+ return (
+
+ );
+}
+
+export default Nav;
diff --git a/src/components/ProductListItem.css b/src/components/ProductListItem.css
new file mode 100644
index 000000000..04744695a
--- /dev/null
+++ b/src/components/ProductListItem.css
@@ -0,0 +1,35 @@
+.image {
+ display: block;
+ width: 221px;
+ height: 221px;
+ padding-bottom: 16px;
+ object-fit: cover;
+ border-radius: 16px;
+}
+
+.title {
+ margin-bottom: 6px;
+ font-weight: 500;
+ font-size: 14px;
+ color: var(--gray800);
+}
+
+.price {
+ margin-bottom: 6px;
+ font-weight: bold;
+ font-size: 16px;
+ color: var(--gray800);
+}
+
+.like {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 4px;
+}
+
+.like-num {
+ font-weight: 500;
+ font-size: 12px;
+ color: var(--gray600);
+}
diff --git a/src/components/ProductListItem.js b/src/components/ProductListItem.js
new file mode 100644
index 000000000..0e44a3cb9
--- /dev/null
+++ b/src/components/ProductListItem.js
@@ -0,0 +1,19 @@
+import "./ProductListItem.css";
+import likeIcon from "../assets/images/ic_heart_empty.png";
+
+function ProductListItem({ item }) {
+ const { title, price, image, favoriteCount } = item;
+ return (
+
+
+
{title}
+
{price}원
+
+
+
{favoriteCount}
+
+
+ );
+}
+
+export default ProductListItem;
diff --git a/src/index.css b/src/index.css
index ec2585e8c..51f98ebc0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,26 @@
-body {
+:root {
+ --blue: #3692ff;
+ --light-blue: #cfe5ff;
+ --red: #f74747;
+ --black: #000;
+ --gray900: #111827;
+ --gray800: #1f2937;
+ --gray700: #374151;
+ --gray600: #4b5563;
+ --gray500: #6b7280;
+ --gray400: #9ca3af;
+ --gray200: #e5e7eb;
+ --gray100: #f3f4f6;
+ --gray50: #f9fafb;
+ --white: #fff;
+}
+
+* {
+ box-sizing: border-box;
+ padding: 0;
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+body {
+ font-family: "Pretendard", sans-serif;
}
diff --git a/src/index.js b/src/index.js
index d563c0fb1..4f2f2786e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-
-
-
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058..000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3ad9..000000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7b..000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';