-
Notifications
You must be signed in to change notification settings - Fork 35
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[이재완] Sprint5 #167
The head ref may contain hidden characters: "React-\uC774\uC7AC\uC644-sprint5"
[이재완] Sprint5 #167
Changes from all commits
b2e37bd
6f8bbb0
e11e25f
212e864
4dc5dd0
2ab3c30
8449cc1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,10 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<html lang="ko"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<meta | ||
name="description" | ||
content="Web site created using create-react-app" | ||
/> | ||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> | ||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
<!-- | ||
Notice the use of %PUBLIC_URL% in the tags above. | ||
It will be replaced with the URL of the `public` folder during the build. | ||
Only files inside the `public` folder can be referenced from the HTML. | ||
|
||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
work correctly both with client-side routing and a non-root public URL. | ||
Learn how to configure a non-root public URL by running `npm run build`. | ||
--> | ||
<title>React App</title> | ||
<title>판다마켓</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
|
||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
|
||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
|
||
Comment on lines
+6
to
+22
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이 부분은 별도의 파일로 분리가 되면 좋겠어요! 예를들어 getData.js 을 아래 처럼 별도의 모듈로 만들어서 사용하는 방법은 확장성이나 유지보수에도 더 좋은 장점이 있어요.
|
||
function App() { | ||
const [items, setItems] = useState([]); | ||
|
||
useEffect(() => { | ||
async function fetchData() { | ||
const data = await getData(); | ||
setItems(data); | ||
} | ||
fetchData(); | ||
}, []); | ||
|
||
return ( | ||
<div className="App"> | ||
<header className="App-header"> | ||
<img src={logo} className="App-logo" alt="logo" /> | ||
<p> | ||
Edit <code>src/App.js</code> and save to reload. | ||
</p> | ||
<a | ||
className="App-link" | ||
href="https://reactjs.org" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Learn React | ||
</a> | ||
</header> | ||
</div> | ||
<> | ||
<Nav /> | ||
<div className="product-lists"> | ||
<AllProductList className="all-product-list" items={items} /> | ||
</div> | ||
; | ||
</> | ||
); | ||
} | ||
|
||
|
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import "./AllProductList.css"; | ||
import ProductListItem from "./ProductListItem"; | ||
|
||
function AllProductList({ items }) { | ||
return ( | ||
<div className="all-product-list"> | ||
<div className="label"> | ||
<div className="label-title">전체 상품</div> | ||
<div className="label-inputs"> | ||
<input | ||
className="search-input" | ||
type="text" | ||
placeholder="검색할 상품을 입력해주세요" | ||
></input> | ||
<button className="product-add-button">상품 등록하기</button> | ||
<select className="order-dropdown" name="order" id="order"> | ||
<option value="createAt" selected> | ||
최신순 | ||
</option> | ||
<option value="rating">좋아요순</option> | ||
</select> | ||
</div> | ||
</div> | ||
<ul className="items"> | ||
{items.map((item) => { | ||
return ( | ||
<li key={items.id}> | ||
<ProductListItem item={item} /> | ||
Comment on lines
+4
to
+28
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 단순 UI를 표현하는 컴포넌트를 잘 만들어주셨습니다! 👍 |
||
</li> | ||
Comment on lines
+27
to
+29
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 여기 key 값이 |
||
); | ||
})} | ||
</ul> | ||
</div> | ||
); | ||
} | ||
|
||
export default AllProductList; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import "./Menu.css"; | ||
|
||
function Menu({ className, name, href }) { | ||
const classNames = `Menu ${className}`; | ||
return ( | ||
<div className="Menu-wrapper"> | ||
<a className={classNames} href={href}> | ||
{name} | ||
</a> | ||
</div> | ||
); | ||
} | ||
|
||
Comment on lines
+3
to
+13
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 여기 Menu 컴포넌트도 headless UI 처럼 잘만들어주셨어요! 👍 |
||
export default Menu; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
리뷰 반영 굳! 👍