-
+
+
+
);
}
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/Header.css b/src/Header.css
new file mode 100644
index 000000000..0a45c7998
--- /dev/null
+++ b/src/Header.css
@@ -0,0 +1,67 @@
+header {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 70px;
+ padding: 0 200px;
+ gap: 20px;
+ border: 1px solid #dfdfdf;
+ position: fixed;
+ left: 0;
+ top: 0;
+ background-color: #fff;
+}
+
+a {
+ text-decoration: none;
+}
+
+.home-button {
+ display: inline-flex;
+ width: 153px;
+ height: 51px;
+}
+
+.nav-box {
+ display: flex;
+ width: 100%;
+}
+
+.nav-item {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 109px;
+ height: 69px;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 21px;
+ color: #4b5563;
+}
+
+.login-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 88px;
+ height: 42px;
+ border-radius: 8px;
+ gap: 10px;
+ background-color: #3692ff;
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 19px;
+ color: #fff;
+}
+
+@media (max-width: 1199px) {
+ header {
+ padding: 0 24px;
+ }
+}
+
+@media (max-width: 767px) {
+ header {
+ padding: 0 16px;
+ }
+}
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 000000000..5086ffe1a
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,25 @@
+import './Header.css';
+import logo from './images/logo1.png';
+
+function Header() {
+ return (
+
+ );
+}
+
+export default Header;
diff --git a/src/Items.js b/src/Items.js
new file mode 100644
index 000000000..cecc4e76b
--- /dev/null
+++ b/src/Items.js
@@ -0,0 +1,33 @@
+import './items.css';
+
+function Items() {
+ return (
+ <>
+
+
베스트 상품
+
상품들
+
+
판매 중인 상품
+
+
상품 등록하기
+
+
+
상품들
+
+
+ - 좌
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 우
+
+
+ );
+}
+
+export default Items;
diff --git a/src/fonts/Pretendard-Regular.ttf b/src/fonts/Pretendard-Regular.ttf
new file mode 100644
index 000000000..01147e999
Binary files /dev/null and b/src/fonts/Pretendard-Regular.ttf differ
diff --git a/src/images/logo1.png b/src/images/logo1.png
new file mode 100644
index 000000000..8db15c9cf
Binary files /dev/null and b/src/images/logo1.png differ
diff --git a/src/images/logo_text.png b/src/images/logo_text.png
new file mode 100644
index 000000000..242c3d5bd
Binary files /dev/null and b/src/images/logo_text.png differ
diff --git a/src/index.css b/src/index.css
index ec2585e8c..ace17ca3e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,14 @@
-body {
+@font-face {
+ font-family: 'Pretendard-Regular';
+ src: url('./fonts/Pretendard-Regular.ttf') format('truetype');
+}
+
+* {
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;
+ padding: 0;
+ box-sizing: border-box;
}
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
+body {
+ font-family: 'Pretendard-Regular', sans-serif;
}
diff --git a/src/index.js b/src/index.js
index d563c0fb1..2cb1087e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
-import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
@@ -10,8 +9,3 @@ 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();
diff --git a/src/items.css b/src/items.css
new file mode 100644
index 000000000..024a91839
--- /dev/null
+++ b/src/items.css
@@ -0,0 +1,15 @@
+.main {
+ margin: 70px auto 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.onsale-bar {
+ display: flex;
+ align-items: center;
+}
+
+.pagination-container {
+ display: flex;
+ list-style-type: none;
+}
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';