Merge pull request #87 from Jin-coding-333/react-배진한-sprint5

[배진한] Sprint5
codeit-sprint-fullstack · Oct 30, 2024 · 3433f59 · 3433f59
2 parents fd58012 + b62814d
commit 3433f59
Show file tree

Hide file tree

Showing 35 changed files with 19,584 additions and 0 deletions.
diff --git a/sprint5/.gitignore b/sprint5/.gitignore
diff --git a/sprint5/package-lock.json b/sprint5/package-lock.json
diff --git a/sprint5/package.json b/sprint5/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "sprint5",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/sprint5/public/index.html b/sprint5/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="../src/img/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>중고마켓</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/sprint5/public/manifest.json b/sprint5/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "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/sprint5/public/robots.txt b/sprint5/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/sprint5/src/API/api.js b/sprint5/src/API/api.js
@@ -0,0 +1,19 @@
+import { url } from './endpoint.js';
+
+async function getProducts(query) {
+
+  try {
+    const response = await fetch(`${url}${query}`, {
+      headers: {
+        'Content-type': 'application/json'
+      }
+    }
+    );
+    const data = await response.json();
+    return data
+  } catch (err) {
+    console.error('Fetch error:', err);
+  }
+}
+
+export default getProducts;
diff --git a/sprint5/src/API/endpoint.js b/sprint5/src/API/endpoint.js
@@ -0,0 +1,2 @@
+export const url = new URL('https://panda-market-api.vercel.app/products?');
+
diff --git a/sprint5/src/App.css b/sprint5/src/App.css
diff --git a/sprint5/src/App.js b/sprint5/src/App.js
@@ -0,0 +1,18 @@
+import './App.css';
+import Header from './components/Header/index.js';
+import ItemsPage from './pages/ItemsPage/index.js';
+import Footer from './components/Footer';
+
+function App() {
+  return (
+    <>
+
+      <Header />
+      <ItemsPage />
+      <Footer />
+
+    </>
+  );
+}
+
+export default App;
diff --git a/sprint5/src/components/Footer/index.css b/sprint5/src/components/Footer/index.css
@@ -0,0 +1,62 @@
+footer {
+  width: 100%;
+  height: 16rem;
+  background-color: #111827;
+  display: flex;
+  justify-content: center;
+  padding-top: 3.2rem;
+}
+
+#footerContent {
+  width: 152rem;
+  height: 2rem;
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20rem;
+  margin-right: 20rem;
+}
+
+#copyright {
+  width: 12.2rem;
+  height: 1.9rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.909rem;
+  display: flex;
+  text-align: center;
+  color: #9CA3AF;
+}
+
+#info {
+  width: 16.9rem;
+  height: 1.9rem;
+  gap: 3rem;
+  opacity: 0rem;
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.909rem;
+  text-align: center;
+  color: #E5E7EB;
+  display: flex;
+  justify-content: space-between;
+}
+
+#info a {
+  text-decoration: none;
+  color: #E5E7EB;
+}
+
+#socialIcons {
+  list-style: none;
+  padding-left: 0rem;
+  margin-left: 1.6rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+#socialIcons img {
+  width: 2rem;
+  height: 2rem;
+  margin-right: 1.2rem;
+  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 15%));
+}
diff --git a/sprint5/src/components/Footer/index.js b/sprint5/src/components/Footer/index.js
@@ -0,0 +1,29 @@
+import faceBookImg from '../../img/social/ic_facebook.png';
+import twitterImg from '../../img/social/ic_twitter.png';
+import youtubeImg from '../../img/social/ic_youtube.png';
+import instagramImg from '../../img/social/ic_instargram.png';
+import './index.css';
+
+function Footer() {
+  return (
+    <footer>
+      <div id="footerContent">
+        <div id="copyright">© Codeit 2024</div>
+
+        <div id="info">
+          <div><a href="/privacy">Privacy Policy</a></div>
+          <div><a href="/faq">FAQ</a></div>
+        </div>
+
+        <div id="socialIcons">
+          <a href="https://www.facebook.com/?locale=ko_KR"><img src={faceBookImg} alt="Facebook" /></a>
+          <a href="https://x.com/?lang=ko"><img src={twitterImg} alt="Twitter" /></a>
+          <a href="https://www.youtube.com/"><img src={youtubeImg} alt="YouTube" /></a>
+          <a href="https://www.instagram.com/sem/campaign/emailsignup/?campaign_id=13530338586&extra_1=s%7Cc%7C547419126947%7Ce%7Cinstagram%20c%7C&placement=&creative=547419126947&keyword=instagram%20c&partner_id=googlesem&extra_2=campaignid%3D13530338586%26adgroupid%3D126262419014%26matchtype%3De%26network%3Dg%26source%3Dnotmobile%26search_or_content%3Ds%26device%3Dc%26devicemodel%3D%26adposition%3D%26target%3D%26targetid%3Dkwd-1321618852491%26loc_physical_ms%3D1009866%26loc_interest_ms%3D%26feeditemid%3D%26param1%3D%26param2%3D&gad_source=1&gclid=CjwKCAjw_4S3BhAAEiwA_64YhgkFInpQexBqyLXjThDfjkEHXMlvBam2vK2b7L7e_xsKy934puQxuBoCe7IQAvD_BwE"><img src={instagramImg} alt="Instagram" /></a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer;
diff --git a/sprint5/src/components/Header/index.css b/sprint5/src/components/Header/index.css
@@ -0,0 +1,78 @@
+:root {
+  --mainColor: #3692FF;
+}
+
+html {
+  font-size: 10px;
+}
+
+.nav {
+  position: sticky;
+  height: 7rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 0.1rem solid #DFDFDF;
+  background-color: rgba(255, 255, 255, 0.8);
+  top: 0;
+  padding-left: 20rem;
+  padding-right: 20rem;
+  z-index: 1;
+}
+
+#navContent {
+  height: 5.1rem;
+  width: 100%;
+  min-width: 74.4rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+Img {
+  width: 15.3rem;
+  height: 5.1rem;
+}
+
+#textBox {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: 37rem;
+  min-width: 20.1rem;
+}
+
+.text {
+  font-weight: 700;
+  font-size: 1.8rem;
+  text-align: center;
+  list-style-type: none;
+  margin: 1.5rem 0;
+  margin-right: 1.5rem;
+}
+
+.text>a {
+  text-decoration: none;
+  color: #4B5563;
+}
+
+#loginButtn {
+  text-decoration: none;
+  min-width: 12.8rem;
+  height: 4.8rem;
+  border-radius: 0.8rem;
+  background-color: var(--mainColor);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #F3F4F6;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 8px;
+  padding: 11.5px 23px;
+  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 15%));
+}
+
+#loginButtn:hover {
+  background-color: #3ee4d7;
+}
diff --git a/sprint5/src/components/Header/index.js b/sprint5/src/components/Header/index.js
@@ -0,0 +1,25 @@
+import './index.css';
+import pandaLogoImg from '../../img/panda-market-logo.png';
+
+function Header() {
+  return (
+    <header>
+      <nav className='nav'>
+        <div id='navContent'>
+          <a id='logoImg' href='./'>
+            <img src={pandaLogoImg} alt='pandaMarketLogo' />
+          </a>
+
+          <div id='textBox'>
+            <div className='text'><a href="/">자유게시판</a></div>
+            <div className='text'><a href="/">중고마켓</a></div>
+          </div>
+
+          <a href="/로그인" id='loginButtn'>로그인</a>
+        </div>
+      </nav>
+    </header>
+  )
+}
+
+export default Header;
diff --git a/sprint5/src/img/favicon.ico b/sprint5/src/img/favicon.ico
diff --git a/sprint5/src/img/icons/Vector.png b/sprint5/src/img/icons/Vector.png
diff --git a/sprint5/src/img/icons/heart.png b/sprint5/src/img/icons/heart.png
diff --git a/sprint5/src/img/icons/left.png b/sprint5/src/img/icons/left.png
diff --git a/sprint5/src/img/icons/menu.png b/sprint5/src/img/icons/menu.png
diff --git a/sprint5/src/img/icons/right.png b/sprint5/src/img/icons/right.png
diff --git a/sprint5/src/img/panda-market-logo.png b/sprint5/src/img/panda-market-logo.png
diff --git a/sprint5/src/img/social/ic_facebook.png b/sprint5/src/img/social/ic_facebook.png
diff --git a/sprint5/src/img/social/ic_instargram.png b/sprint5/src/img/social/ic_instargram.png
diff --git a/sprint5/src/img/social/ic_twitter.png b/sprint5/src/img/social/ic_twitter.png
diff --git a/sprint5/src/img/social/ic_youtube.png b/sprint5/src/img/social/ic_youtube.png
diff --git a/sprint5/src/index.css b/sprint5/src/index.css
@@ -0,0 +1,13 @@
+body {
+  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;
+}
diff --git a/sprint5/src/index.js b/sprint5/src/index.js
@@ -0,0 +1,14 @@
+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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const url = new URL('https://panda-market-api.vercel.app/products?');